/* ==========================================================================
   Vocerossa — design-system portfolio pages
   One page template, seven themes. Each theme is a block of tokens on body[data-ds]
   plus the styling of its own hero. Everything below the hero reads the tokens.
   ========================================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }

body.ws {
  /* colour roles */
  --bg: #fff; --fg: #000; --ft: #000; --ac: #000;          /* page, display/accents, reading text, secondary */
  --pbg: transparent; --pfg: var(--fg); --pt: var(--ft); --pac: var(--ac); --pbd: var(--fg);   /* console panels */
  --cb-bg: var(--fg); --cb-fg: var(--bg);                    /* console bar + labels */
  /* type roles */
  --df: "Arial Black", Arial, sans-serif; --dsx: 1; --dw: 900; --dtt: uppercase; --dlh: .95; --dls: 0;
  --tf: Arial, "Helvetica Neue", sans-serif; --tw: 400;
  /* bar */
  --bar-h: 64px; --bar-bg: var(--bg); --bar-bd: var(--fg); --bar-fg: var(--ft);
  --sq-bg: transparent; --sq-fg: var(--fg); --sq-bd: var(--fg); --sq-hbg: var(--fg); --sq-hfg: var(--bg);
  --bw: 2px;
  --gut: clamp(16px, 4.8vw, 67px);
  --gap: clamp(20px, 3.4vw, 56px);
  --fs: clamp(1rem, .92rem + .4vw, 1.2rem);
  /* motif colours */
  --m1: var(--fg); --m2: var(--ac); --m3: var(--bg);

  margin: 0;
  background: var(--bg);
  color: var(--ft);
  font: var(--tw) var(--fs)/1.5 var(--tf);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------- themes */
body[data-ds="brutal"] {
  --bg: #0146DF; --fg: #F634DE; --ft: color-mix(in srgb, #F634DE 22%, #fff); --ac: #7839D7;
  --pbd: #F634DE; --pt: var(--ft);
  --cb-bg: transparent; --cb-fg: var(--ft);
  --df: "Arial Black", "Arial Bold", Arial, sans-serif; --dsx: .6; --dlh: .9;
  --tf: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; --tw: 400;
  --bw: 3px;
  --bar-bd: #F634DE; --sq-fg: var(--ft); --sq-bd: #F634DE; --sq-hbg: #F634DE; --sq-hfg: #0146DF;
}
body[data-ds="timeless"] {
  --bg: #002B14; --fg: #FEC337; --ft: #FEC337; --ac: #C69768;
  --cb-bg: #FEC337; --cb-fg: #002B14;
  --df: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", serif; --dsx: .8; --dw: 400; --dtt: none; --dlh: .9; --dls: -.01em;
  --tf: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bw: 1px;
  --sq-bg: #FEC337; --sq-fg: #002B14; --sq-bd: #002B14; --sq-hbg: #002B14; --sq-hfg: #FEC337;
}
body[data-ds="aurora"] {
  --bg: #2A384F; --fg: #F44767; --ft: #FD9475; --ac: #973F63;
  --pbg: rgba(5, 10, 18, .32); --pbd: #41426C;
  --cb-bg: #F44767; --cb-fg: #050A12;
  --df: Arial, "Helvetica Neue", sans-serif; --dsx: .62; --dw: 700; --dtt: none; --dlh: .92;
  --tf: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; --tw: 400;
  --bw: 1px;
  --bar-bg: #050A12; --bar-bd: #41426C; --bar-fg: #FD9475;
  --sq-bg: #F44767; --sq-fg: #050A12; --sq-bd: #050A12; --sq-hbg: #FD9475; --sq-hfg: #050A12;
}
body[data-ds="open-docs"] {
  --bg: #fff; --fg: #32007C; --ft: #32007C; --ac: #FED900;
  --pbd: #32007C;
  --cb-bg: #32007C; --cb-fg: #fff;
  --df: "Helvetica Neue", "Segoe UI", Arial, sans-serif; --dsx: 1; --dw: 100; --dtt: none; --dlh: .86; --dls: -.03em;
  --tf: "Avenir Next Condensed", "Avenir Next", "Arial Narrow", Arial, sans-serif; --tw: 500;
  --bw: 1px;
  --sq-bg: #fff; --sq-fg: #32007C; --sq-bd: #32007C; --sq-hbg: #FED900; --sq-hfg: #32007C;
}
body[data-ds="pretentious"] {
  --bg: #B6F900; --fg: #7B00F9; --ft: #7B00F9; --ac: #7B00F9;
  --cb-bg: #7B00F9; --cb-fg: #B6F900;
  --df: "Arial Black", "Arial Bold", Arial, sans-serif; --dsx: 1; --dlh: .95; --dls: -.02em;
  --tf: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; --tw: 400;
  --bw: 2px;
  --sq-bg: #7B00F9; --sq-fg: #B6F900; --sq-bd: #B6F900; --sq-hbg: #B6F900; --sq-hfg: #7B00F9;
}
body[data-ds="amber"] {
  --bg: #FFEFCC; --fg: #CD461A; --ft: #2A0400; --ac: #CD461A;
  --pbd: #CD461A; --pt: #2A0400;
  --cb-bg: #2A0400; --cb-fg: #FFEFCC;
  --df: Baskerville, "Hoefler Text", Georgia, "Times New Roman", serif; --dsx: 1; --dw: 400; --dtt: none; --dlh: .92; --dls: -.01em;
  --tf: "Avenir Next", Avenir, "Gill Sans", "Segoe UI", Arial, sans-serif;
  --bw: 1.5px;
  --sq-bg: #CD461A; --sq-fg: #FFEFCC; --sq-bd: #FFEFCC; --sq-hbg: #2A0400; --sq-hfg: #FFEFCC;
}
body[data-ds="newsroom"] {
  --bg: #E80000; --fg: #fff; --ft: #fff; --ac: #000;
  --pbg: #fff; --pfg: #E80000; --pt: #E80000; --pac: #000; --pbd: #fff;
  --cb-bg: #fff; --cb-fg: #E80000;
  --df: Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif; --dsx: .72; --dw: 400; --dlh: .84; --dls: -.01em;
  --tf: Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif; --tw: 400;
  --bw: 3px;
  --bar-bg: #fff; --bar-bd: #E80000; --bar-fg: #E80000;
  --sq-bg: #E80000; --sq-fg: #fff; --sq-bd: #fff; --sq-hbg: #000; --sq-hfg: #fff;
}

/* ---------------------------------------------------------------- base */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { padding-inline: var(--gut); max-width: 1680px; margin-inline: auto; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

/* horizontally scaled display type */
.dx {
  display: block; width: calc(100% / var(--dsx)); transform: scaleX(var(--dsx)); transform-origin: 0 0;
  font-family: var(--df); font-weight: var(--dw); text-transform: var(--dtt); line-height: var(--dlh); letter-spacing: var(--dls);
  white-space: nowrap;
}

/* motif drawing classes */
.s-s { fill: none; stroke: var(--m1); }
.s-f { fill: var(--m1); }
.s-a { fill: var(--m2); }
.s-b { fill: var(--m3); }
.s-bs { stroke: var(--m3); fill: none; }
.s-as { stroke: var(--m2); fill: none; }
.ns { vector-effect: non-scaling-stroke; }
.mt { display: block; width: 100%; height: auto; overflow: visible; }

/* duotone photography */
.duo { margin: 0; overflow: hidden; }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duo--indigo img { filter: url(#duo-indigo); }
.duo--violet img { filter: url(#duo-violet); }
.duo--red img { filter: url(#duo-red); }
.duo--lime img { filter: url(#duo-lime); }

/* Pretentious logo (colours from the page tokens, so it inverts inside the orb) */
.pl__r { fill: none; stroke: var(--fg); stroke-width: 7; }
.pl__d { fill: var(--fg); }
.pl__b { fill: var(--bg); }

/* ---------------------------------------------------------------- top strip */
.top { display: flex; align-items: center; gap: 18px; padding: 16px var(--gut); color: var(--fg); position: relative; z-index: 3; }
.top__home { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.top__mark { width: 26px; height: auto; }
.top__crumb { font: 600 .72rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .9; display: flex; gap: .7em; }
.top__crumb b { font-weight: 700; }

/* ---------------------------------------------------------------- hero (shared) */
.hero { container-type: inline-size; position: relative; overflow: hidden; }

/* BRUTAL — heavy outline, magenta on voltage blue */
.hb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: end; padding-block: clamp(8px, 2cqw, 28px) clamp(32px, 6cqw, 90px); }
.hb__l { display: grid; gap: clamp(14px, 2.4cqw, 32px); align-content: end; }
.hb__sq { width: min(100%, 400px); height: auto; display: block; }
.hb__sq .s-s, .hb__burst .s-s { stroke-width: var(--bw); }
.hb__t { color: var(--fg); }
.hb__t .dx { font-size: 14.2cqw; color: var(--fg); }
.hb__s { display: block; font: 400 clamp(1.1rem, 3.2cqw, 3rem)/1.05 var(--tf); color: var(--fg); margin-top: .2em; }
.hb__r { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: clamp(14px, 2.4cqw, 32px); }
.hb__dither { border: var(--bw) solid var(--fg); aspect-ratio: 612 / 363; background: var(--bg); }
.hb__dither img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb__free { font-size: 8.6cqw; color: var(--fg); }
.hb__free { min-width: 0; overflow: hidden; }
.hb__free .dx { overflow: hidden; }
.hb__burst { width: min(100%, 560px); height: auto; display: block; justify-self: end; }
@media (max-width: 719px) { .hb { grid-template-columns: 1fr; } .hb__t .dx { font-size: 28cqw; } .hb__free { font-size: 17cqw; } .hb__s { font-size: 6cqw; } .hb__sq { width: 64%; } }

/* TIMELESS — green, gold, tall serif */
.ht { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); padding-block: clamp(16px, 4cqw, 64px) clamp(36px, 6cqw, 96px); align-items: end; }
.ht__t .dx { font-size: 15.4cqw; color: var(--fg); line-height: .85; }
.ht__s { font-size: clamp(1.1rem, 2.4cqw, 2.1rem); margin: .4em 0 clamp(20px, 3cqw, 44px); color: var(--ft); font-family: var(--tf); }
.ht__ph { margin: 0; }
.ht__ph img { display: block; width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; }
.ht__r { display: grid; gap: clamp(14px, 2cqw, 28px); align-content: end; }
.ht__acc { --m1: var(--bg); --m3: var(--fg); position: relative; background: var(--fg); aspect-ratio: 1; display: grid; place-items: center; }
.ht__acc .mt { width: 56%; }
.ht__lab { position: absolute; right: 5%; bottom: 3%; width: auto; font-size: clamp(1.4rem, 4.6cqw, 4rem); color: var(--bg); }
.ht__sub { border-bottom: 2px solid var(--fg); color: var(--fg); }
.ht__sub .dx { font-size: clamp(1.8rem, 5.4cqw, 4.6rem); }
.ht__p { max-width: 20em; }
@media (max-width: 719px) { .ht { grid-template-columns: 1fr; } .ht__t .dx { font-size: 34cqw; } .ht__acc { max-width: 70%; } }

/* AURORA — dimmed photograph, tall coral title */
.ha { display: grid; background: var(--bg); }
.ha__bg, .ha__top { grid-area: 1 / 1; }
.ha__bg { position: relative; min-height: clamp(300px, 52cqw, 620px); }
.ha__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.7); }
.ha__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(33, 46, 82, .55), rgba(42, 56, 79, .9)); }
.ha__top { position: relative; z-index: 1; align-self: end; padding-bottom: clamp(18px, 3cqw, 40px); width: 100%; }
.ha__t .dx { font-size: 29cqw; color: var(--fg); line-height: .8; }
.ha__s { font: 400 clamp(1.1rem, 3.4cqw, 3rem)/1.1 var(--tf); letter-spacing: .09em; color: var(--ft); margin-top: .35em; }
.ha__low { grid-row: 2; padding-block: clamp(24px, 4cqw, 60px); display: grid; gap: 1.4rem; max-width: 1000px; margin-inline: 0; width: 100%; }
.ha__li { display: flex; gap: 1.2rem; align-items: flex-start; letter-spacing: .05em; color: var(--ft); max-width: 24em; }
.ha__li i { flex: none; width: clamp(20px, 2.4cqw, 30px); aspect-ratio: 1; background: var(--ac); margin-top: .1em; }
.ha__rule { width: min(100%, 540px); border: 0; height: 6px; background: #41426C; margin: 0; }
.ha__p { letter-spacing: .05em; color: var(--ft); max-width: 24em; padding-left: calc(clamp(20px, 2.4cqw, 30px) + 1.2rem); }

/* OPEN DOCS — hairlines, indigo on white, yellow rules */
.ho { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); padding-block: clamp(16px, 4cqw, 56px) clamp(36px, 6cqw, 96px); }
.ho__cap { display: inline-block; background: var(--fg); color: var(--ac); font: 900 clamp(1.5rem, 5.4cqw, 4.6rem)/1 "Arial Black", Arial, sans-serif; padding: .08em .3em; }
.ho__t { font: 100 clamp(3.4rem, 14.5cqw, 12.5rem)/.84 var(--df); letter-spacing: -.03em; color: var(--fg); margin: clamp(20px, 4cqw, 60px) 0; }
.ho__t span { display: block; }
.ho__y { border: 0; border-top: 5px solid var(--ac); margin: clamp(14px, 2cqw, 28px) 0; }
.ho__b { font: 700 clamp(1.15rem, 2.6cqw, 2.2rem)/1.05 var(--tf); color: var(--fg); }
.ho__p { font: 500 clamp(1.05rem, 2.2cqw, 1.9rem)/1.1 var(--tf); color: var(--fg); max-width: 20em; }
.ho__r { display: grid; align-content: start; }
.ho__ti { font: 100 clamp(2.4rem, 8cqw, 7rem)/.8 var(--df); color: var(--fg); letter-spacing: -.02em; }
.ho__pp { font: 500 clamp(.95rem, 1.9cqw, 1.6rem)/1.05 var(--tf); color: var(--fg); margin: .7em 0 clamp(14px, 2cqw, 28px); max-width: 24em; }
.ho__ph { position: relative; aspect-ratio: 900 / 1000; }
.ho__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: var(--fg); color: var(--ac); font: 900 clamp(1.8rem, 8cqw, 7rem)/1 "Arial Black", Arial, sans-serif; padding: .05em .12em .02em; }
@media (max-width: 719px) { .ho { grid-template-columns: 1fr; } .ho__t { font-size: 26cqw; } }

/* PRETENTIOUS — acid lime, ultraviolet. An orb floats across the page and reverses the scheme
   wherever it passes: the second layer (violet field, green text, green duotone) is revealed through a moving circle. */
.hp { background: var(--bg); }
.hp__stage { position: relative; }
.hp__lay { background: var(--bg); }
.hp__lay--rev {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --bg: #7B00F9; --fg: #B6F900; --ft: #B6F900; --ac: #B6F900;
  clip-path: circle(22cqw at 50% 50%);
  animation: orb 34s linear infinite;
  will-change: clip-path;
}
.hp__in { padding-top: clamp(8px, 2.6cqw, 36px); position: relative; }
.hp__seal { display: block; width: clamp(54px, 9cqw, 124px); }
.hp__seal .pl { display: block; width: 100%; height: auto; }
.hp__tw { position: relative; margin-top: clamp(10px, 1.6cqw, 24px); }
.hp__t { display: block; position: relative; font: 900 10.6cqw/1 var(--df); letter-spacing: -.025em; color: var(--fg); white-space: nowrap; margin: 0; }
.hp__box { position: relative; border: 1px solid var(--fg); background: var(--bg); padding: clamp(14px, 2.2cqw, 32px); margin-top: clamp(14px, 2.4cqw, 34px); max-width: 100%; }
.hp__box p { font: 300 clamp(1.05rem, 2.5cqw, 2.1rem)/1.12 var(--tf); letter-spacing: -.01em; color: var(--fg); max-width: 30em; }
.hp__box b { font-weight: 900; }
.hp__ph { height: clamp(150px, 32cqw, 420px); margin-top: -1px; }
@keyframes orb {
  0% { clip-path: circle(24.7cqw at 66.8% 50.0%); }
  5% { clip-path: circle(25.0cqw at 75.5% 68.2%); }
  10% { clip-path: circle(22.8cqw at 81.6% 79.5%); }
  15% { clip-path: circle(20.0cqw at 84.7% 79.5%); }
  20% { clip-path: circle(18.8cqw at 84.4% 68.2%); }
  25% { clip-path: circle(20.3cqw at 80.7% 50.0%); }
  30% { clip-path: circle(23.2cqw at 74.0% 31.8%); }
  35% { clip-path: circle(25.1cqw at 65.0% 20.5%); }
  40% { clip-path: circle(24.5cqw at 54.5% 20.5%); }
  45% { clip-path: circle(21.8cqw at 43.5% 31.8%); }
  50% { clip-path: circle(19.3cqw at 33.2% 50.0%); }
  55% { clip-path: circle(19.0cqw at 24.5% 68.2%); }
  60% { clip-path: circle(21.2cqw at 18.4% 79.5%); }
  65% { clip-path: circle(24.0cqw at 15.3% 79.5%); }
  70% { clip-path: circle(25.2cqw at 15.6% 68.2%); }
  75% { clip-path: circle(23.7cqw at 19.3% 50.0%); }
  80% { clip-path: circle(20.8cqw at 26.0% 31.8%); }
  85% { clip-path: circle(18.9cqw at 35.0% 20.5%); }
  90% { clip-path: circle(19.5cqw at 45.5% 20.5%); }
  95% { clip-path: circle(22.2cqw at 56.5% 31.8%); }
  100% { clip-path: circle(24.7cqw at 66.8% 50.0%); }
}

/* AMBER — cream, vermillion, radial petals */
.hm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; min-height: clamp(380px, 54cqw, 780px); padding-block: clamp(16px, 3cqw, 40px); }
.hm__t .dx { font-size: 17cqw; color: var(--fg); }
.hm__s { font: 400 clamp(1.2rem, 3cqw, 2.5rem)/1.2 var(--tf); max-width: 16em; margin-top: .4em; }
.hm__ast { width: clamp(26px, 3.4cqw, 48px); margin: clamp(18px, 3cqw, 44px) 0 clamp(8px, 1cqw, 16px); display: block; overflow: visible; }
.hm__p { max-width: 26em; }
.hm__r { align-self: stretch; position: relative; min-height: 320px; }
.am { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.am-o { fill: var(--bg); stroke: var(--fg); stroke-width: 4; stroke-linejoin: round; }
.am-s { fill: var(--fg); }
@media (max-width: 719px) { .hm { grid-template-columns: 1fr; padding-bottom: 0; } .hm__t .dx { font-size: 32cqw; } .hm__r { min-height: 460px; } }

/* NEWSROOM — red duotone, white boxes, zero gutters */
.hn {
  display: grid; aspect-ratio: 3 / 2; max-height: 92vh; width: 100%;
  grid-template-columns: 24fr 33fr 43fr;
  grid-template-rows: 14fr 11fr 18fr 20fr 23fr 14fr;
  grid-template-areas: "a c e" "a c f" "a t f" "b t f" "b d f" "b d g";
}
.hn > * { min-width: 0; min-height: 0; overflow: hidden; }
.hn__a { grid-area: a; } .hn__b { grid-area: b; } .hn__c { grid-area: c; } .hn__t { grid-area: t; }
.hn__d { grid-area: d; } .hn__e { grid-area: e; } .hn__f { grid-area: f; } .hn__g { grid-area: g; }
.hn__b, .hn__e, .hn__g { background: #fff; color: #E80000; font: 400 clamp(.6rem, 1.9cqw, 1.7rem)/1.1 var(--tf); text-align: justify; padding: .3em .35em; letter-spacing: -.01em; hyphens: auto; }
.hn__t { background: #fff; color: #E80000; display: grid; align-content: center; padding-left: 3%; }
.hn__t .dx { font-size: 13.4cqw; color: #E80000; line-height: .8; }
@media (max-width: 719px) { .hn { aspect-ratio: 4 / 5; } .hn__b, .hn__e, .hn__g { font-size: 2.9cqw; } }

/* ---------------------------------------------------------------- about */
.about { padding-block: clamp(48px, 8vw, 120px); }
.kicker { display: flex; gap: 1em; font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); margin-bottom: clamp(14px, 2vw, 26px); }
.kicker span { opacity: .8; }
.about__tag { font: var(--dw) clamp(1.5rem, 3.6vw, 3.2rem)/1.06 var(--df); text-transform: var(--dtt); letter-spacing: var(--dls); color: var(--fg); max-width: 20em; margin-bottom: clamp(30px, 5vw, 70px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); }
.hd { font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); border-top: var(--bw) solid var(--fg); padding-top: 1rem; margin-bottom: 1.4rem; }
.about__main p { font-size: clamp(1.1rem, 1rem + .6vw, 1.55rem); line-height: 1.4; max-width: 34em; margin-bottom: 1em; }
.about__ideal { font-size: 1rem !important; margin-top: 1.6em; padding: .9em 0 0; border-top: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); }
.about__ideal b { color: var(--fg); letter-spacing: .12em; text-transform: uppercase; font: 700 .78rem Arial, sans-serif; margin-right: .6em; }
.insp { list-style: none; padding: 0; }
.insp li { display: flex; gap: .9em; padding: .85em 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); line-height: 1.35; }
.insp li::before { content: ""; flex: none; width: .55em; height: .55em; margin-top: .5em; background: var(--fg); }
@media (max-width: 819px) { .about__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- brand identity console */
.console { padding-block: clamp(16px, 4vw, 60px) clamp(48px, 8vw, 120px); }
.console__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  padding: 14px clamp(14px, 2vw, 24px); background: var(--cb-bg); color: var(--cb-fg); border: var(--bw) solid var(--pbd);
  font: 700 clamp(.78rem, 1.1vw, .95rem)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
}
.console__bar h2 { font: inherit; letter-spacing: inherit; }
.console__meta { display: flex; gap: 22px; align-items: center; }
.console__led { display: inline-flex; align-items: center; gap: .6em; }
.console__led i { width: .75em; height: .75em; background: currentColor; animation: led 1.8s steps(2, jump-none) infinite; }
@keyframes led { 50% { opacity: .25; } }

.console__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(10px, 1.4vw, 20px); }
.cp {
  --m1: var(--pfg); --m2: var(--pac); --m3: var(--pbg);
  grid-column: span 6; min-width: 0; padding: clamp(16px, 2vw, 28px);
  background: var(--pbg); color: var(--pt); border: var(--bw) solid var(--pbd);
}
.cp--colour { grid-column: 1 / -1; }
.cp--type { grid-column: span 7; }
.cp--contrast { grid-column: span 5; }
.cp--motifs { grid-column: 1 / -1; }
@media (max-width: 959px) { .cp--type, .cp--contrast { grid-column: 1 / -1; } }

.cp__t { display: flex; align-items: center; gap: .8em; font: 700 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--pfg); margin-bottom: 1.3rem; }
.cp__t::before { content: ""; width: .7em; height: .7em; background: var(--pfg); }
.cp__sub { font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--pt); opacity: .85; margin: 1.6rem 0 .8rem; }
.cp__hint { font: 500 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity: .8; margin-top: 1rem; }

.swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.sw { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; cursor: pointer; text-align: left; color: var(--pt); }
.sw:focus-visible { outline: 3px solid var(--pfg); outline-offset: 3px; }
.sw__chip { position: relative; display: block; height: clamp(88px, 10vw, 140px); background: var(--c); border: 1px solid color-mix(in srgb, var(--pt) 55%, transparent); margin-bottom: 8px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sw:hover .sw__chip { transform: translateY(-4px); }
.sw__copied { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on); font: 700 .78rem ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.sw.is-copied .sw__copied { opacity: 1; }
.sw__name { font-weight: 700; font-family: var(--tf); }
.sw__hex { font: 700 .95rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.sw__rgb, .sw__role { font: 500 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity: .85; }
.sw__role { font-family: var(--tf); }

.mix { display: flex; height: clamp(22px, 2.4vw, 34px); border: 1px solid color-mix(in srgb, var(--pt) 55%, transparent); }
.mix i { display: block; min-width: 2px; }
.mix__cap { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: .7rem; font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mix__cap span { display: inline-flex; align-items: center; gap: .5em; }
.mix__cap b { width: .85em; height: .85em; border: 1px solid color-mix(in srgb, var(--pt) 55%, transparent); }

.cp--type { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 44px); align-content: start; }
.cp--type .cp__t { grid-column: 1 / -1; }
@media (max-width: 719px) { .cp--type { grid-template-columns: 1fr; } }
.tp { min-width: 0; }
.tp .cp__sub { margin-top: 0; }
.spec { display: inline-block; margin: 0; color: var(--pfg); white-space: nowrap; }
.spec--d { font: var(--dw) clamp(4.2rem, 9vw, 7.4rem)/.95 var(--df); letter-spacing: var(--dls); transform: scaleX(var(--dsx)); transform-origin: 0 100%; }
.spec--t { font: var(--tw) clamp(4.2rem, 9vw, 7.4rem)/.95 var(--tf); }
.spec__sample { margin: .8rem 0 .9rem; color: var(--pt); }
.f-d { display: block; width: calc(100% / var(--dsx)); transform: scaleX(var(--dsx)); transform-origin: 0 0; font: var(--dw) clamp(1.3rem, 2.2vw, 1.8rem)/1.05 var(--df); text-transform: var(--dtt); letter-spacing: var(--dls); }
.f-t { font: var(--tw) 1.05rem/1.4 var(--tf); }
.spec__k { font-weight: 700; margin: 0 0 .2rem; }
.spec__n { font: 500 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity: .85; }

.cxl { list-style: none; padding: 0; display: grid; gap: 14px; }
.cxl li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.cx { display: grid; place-items: center; width: 58px; height: 58px; font: 700 1.4rem Arial, sans-serif; border: 1px solid color-mix(in srgb, var(--pt) 55%, transparent); }
.cx__v b { display: block; font: 700 1.25rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cx__v small { font: 500 .72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity: .85; }
.cx__l { font: 700 .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; padding: .45em .65em; border: 1.5px solid var(--pfg); text-align: center; max-width: 9em; }
.cx__l--ok { background: var(--pfg); color: var(--pbg); }
.cx__l--ok { color: var(--cb-fg); background: var(--cb-bg); border-color: var(--cb-bg); }
body[data-ds="brutal"] .cx__l--ok { background: var(--fg); color: #0146DF; }
.cx__l--mid { border-style: solid; }
.cx__l--low { border-style: dashed; opacity: .9; }

.motifs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; }
.motifs li { display: grid; gap: 10px; justify-items: center; align-content: space-between; text-align: center; padding: 14px 8px; border: 1px solid color-mix(in srgb, var(--pt) 40%, transparent); font-size: .85rem; line-height: 1.25; }
.motifs .mt { max-width: 120px; }
@media (max-width: 479px) { .motifs { grid-template-columns: 1fr; } .motifs .mt { max-width: 96px; } }

/* ---------------------------------------------------------------- next */
.next { padding-bottom: clamp(32px, 6vw, 90px); }
.next__a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); grid-template-areas: "l img" "n img" "d img"; gap: 6px clamp(18px, 4vw, 56px); align-content: end; text-decoration: none; padding: clamp(18px, 3vw, 40px); border: var(--bw) solid var(--fg); overflow: hidden; position: relative; transition: background .35s, color .35s; }
.next__l { grid-area: l; font: 700 .78rem ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.next__n { grid-area: n; display: block; font: var(--dw) clamp(2.4rem, 8vw, 7.5rem)/.95 var(--df); color: var(--fg); text-transform: var(--dtt); letter-spacing: var(--dls); transform-origin: 0 0; transform: scaleX(var(--dsx)); width: calc(100% / var(--dsx)); }
.next__d { grid-area: d; max-width: 28em; }
.next__a img { grid-area: img; width: 100%; height: auto; display: block; align-self: center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.next__a:hover img { transform: scale(1.05) rotate(-1deg); }
.next__a:hover { background: var(--fg); color: var(--bg); }
.next__a:hover .next__l, .next__a:hover .next__n { color: var(--bg); }
@media (max-width: 719px) { .next__a { grid-template-columns: 1fr; grid-template-areas: "img" "l" "n" "d"; } }

/* ---------------------------------------------------------------- action bar */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; align-items: stretch;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bar-bg); border-top: var(--bw) solid var(--bar-bd); color: var(--bar-fg);
}
.bar__sq { display: flex; }
.sq {
  display: grid; place-items: center; flex: none; width: var(--bar-h); height: var(--bar-h);
  background: var(--sq-bg); color: var(--sq-fg); border: 0; border-right: var(--bw) solid var(--sq-bd); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.sq svg { width: 24px; height: 24px; display: block; }
.sq:hover { background: var(--sq-hbg); color: var(--sq-hfg); }
.sq:focus-visible { outline: 3px solid var(--sq-fg); outline-offset: -7px; }
.sq:hover:focus-visible { outline-color: var(--sq-hfg); }
.bar__mid { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; margin: 0; padding-inline: clamp(12px, 2vw, 28px); font: 600 .74rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.bar__mid b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.bar__n { opacity: .8; }
.bar__r { display: flex; align-items: stretch; margin-left: auto; }
.bar__a, .bar__lang {
  all: unset; box-sizing: border-box; display: grid; place-items: center; min-width: 52px; height: 100%; cursor: pointer;
  color: var(--bar-fg); border-left: 1px solid color-mix(in srgb, var(--bar-fg) 35%, transparent); transition: background .2s, color .2s;
}
.bar__a svg { width: 22px; height: 22px; }
.bar__lang span { font: 700 .78rem ui-monospace, Menlo, monospace; letter-spacing: .14em; }
.bar__a:hover, .bar__lang:hover { background: var(--bar-fg); color: var(--bar-bg); }
.bar__a:focus-visible, .bar__lang:focus-visible { outline: 3px solid var(--bar-fg); outline-offset: -6px; }
@media (max-width: 559px) { .bar { --bar-h: 56px; } .bar__n { display: none; } .bar__a, .bar__lang { min-width: 46px; } }
@media (max-width: 399px) { .bar__mid { display: none; } }

/* ---------------------------------------------------------------- SINOPIA — white line on sinoper red */
body[data-ds="sinopia"] {
  --bg: #BB1111; --fg: #fff; --ft: #fff; --ac: #fff;
  --pbd: #fff; --cb-bg: #fff; --cb-fg: #BB1111;
  --df: "Arial Black", "Helvetica Neue", Arial, sans-serif; --dsx: 1.25; --dw: 900; --dtt: uppercase; --dlh: .95; --dls: -.01em;
  --tf: "Helvetica Neue", Helvetica, Arial, sans-serif; --tw: 400;
  --bw: 2px;
  --sq-bg: #fff; --sq-fg: #BB1111; --sq-bd: #BB1111; --sq-hbg: #7d0b0b; --sq-hfg: #fff;
}
body[data-ds="sinopia"] .f-t, body[data-ds="sinopia"] .spec--t {
  font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .38em; text-transform: uppercase; font-stretch: condensed;
}
.sm__e { fill: none; stroke: var(--sc, var(--fg)); stroke-width: 12.73px; stroke-linecap: round; stroke-linejoin: round; }

.hs { position: relative; display: grid; align-items: center; min-height: clamp(320px, 46cqw, 700px); }
.hs__dots {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .26) 1.5px, transparent 2px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 95%); mask-image: linear-gradient(100deg, transparent 15%, #000 95%);
  animation: hs-dots 20s linear infinite;
}
@keyframes hs-dots { to { background-position: 160px 80px; } }
.hs__in { position: relative; width: 100%; padding-block: clamp(28px, 6cqw, 90px); display: grid; gap: clamp(10px, 1.6cqw, 24px); }
.hs__t { margin: 0; }
.hs__t svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs__sub { font: 400 clamp(.9rem, 2.2cqw, 2rem)/1 "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .5em; text-transform: uppercase; padding-left: .5%; }
.hs .sm__a { animation: sm-a 8s ease-in-out infinite alternate; }
.hs .sm__b { animation: sm-b 8s ease-in-out infinite alternate; }
@keyframes sm-a { to { translate: -150px 0; } }
@keyframes sm-b { to { translate: 150px 0; } }

/* projects and drafts (Sinopia) */
.show { padding-block: clamp(8px, 2vw, 24px) clamp(36px, 6vw, 90px); }
.show .hd:not(:first-child) { margin-top: clamp(32px, 5vw, 64px); }
.show__grid { display: grid; gap: clamp(14px, 2vw, 28px); }
.show__grid--p { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.show__grid--d4, .show__grid--p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.show__grid--p4 .pj__art { aspect-ratio: 3 / 2; }
.show__grid--d5, .show__grid--v5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.show__grid--v { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pj__art img.cover { object-fit: cover; }
.show__grid--d5 .pj__art, .show__grid--d4 .pj__art { aspect-ratio: 3 / 2; padding: 6%; }
.show__grid--v5 .pj__art { aspect-ratio: 1; background: #121212; }
.show__grid--v5 .pj__art img { object-fit: cover; }
.pj { margin: 0; min-width: 0; }
.pj__art { border: var(--bw) solid var(--fg); background: #fff; overflow: hidden; line-height: 0; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.pj:hover .pj__art { translate: 0 -4px; }
.pj__art svg { display: block; width: 100%; height: auto; }
.pj figcaption { display: grid; gap: 3px; padding-top: 12px; }
.pj figcaption b { font: 700 .78rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.pj figcaption span { font-size: .92rem; line-height: 1.35; opacity: .92; }
@media (max-width: 1099px) { .show__grid--d5, .show__grid--v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859px) { .show__grid--d5, .show__grid--d4, .show__grid--p4, .show__grid--v5, .show__grid--v, .show__grid--p { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .show__grid--p, .show__grid--p4, .show__grid--d4, .show__grid--d5, .show__grid--v5, .show__grid--v { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- VOCEROSSA — the site's own branding: red on blue */
body[data-ds="vocerossa"] {
  --bg: #00207C; --fg: #FF3645; --ft: color-mix(in srgb, #FF3645 78%, #fff); --ac: #FF3645; --co: #FF3645;
  --pbd: #FF3645; --cb-bg: #FF3645; --cb-fg: #00207C;
  --df: "Arial Black", "Arial Bold", Arial, sans-serif; --dsx: 1.42; --dw: 900; --dtt: uppercase; --dlh: .98; --dls: 0;
  --tf: Arial, "Helvetica Neue", Helvetica, sans-serif; --tw: 400;
  --bw: 1.5px;
  --bar-bg: #00207C; --bar-bd: #FF3645; --bar-fg: var(--ft);
  --sq-bg: #FF3645; --sq-fg: #00207C; --sq-bd: #00207C; --sq-hbg: #FF626E; --sq-hfg: #00207C;
  --g1: rgba(60, 110, 255, .38); --g2: rgba(255, 54, 69, .34);
  --m1: var(--fg); --m2: var(--fg);
}
body[data-ds="vocerossa"] .hv__glow { display: none; }
body[data-ds="vocerossa"] .hv__sub { font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 400; letter-spacing: .32em; font-size: clamp(.8rem, 1.6cqw, 1.5rem); }
body[data-ds="vocerossa"] .hv__line { color: var(--ft); }
body[data-ds="vocerossa"] .cx__l--ok { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------------------------------------------------------------- VOCEROSSA — rich black, sky blue, coral */
body[data-ds="vocerossa-brand"] {
  --bg: #121212; --fg: #FDFDFD; --ft: #FDFDFD; --ac: #00BAFF; --co: #FF5757;
  --pbd: rgba(253, 253, 253, .4); --cb-bg: #00BAFF; --cb-fg: #121212;
  --df: "Arial Black", "Helvetica Neue", Arial, sans-serif; --dsx: 1.3; --dw: 900; --dtt: uppercase; --dlh: .95; --dls: -.01em;
  --tf: Montserrat, "Avenir Next", "Helvetica Neue", Arial, sans-serif; --tw: 300;
  --bw: 2px;
  --bar-bd: #FF5757;
  --sq-bg: #00BAFF; --sq-fg: #121212; --sq-bd: #121212; --sq-hbg: #FF5757; --sq-hfg: #121212;
  --m1: var(--co); --m2: var(--ac);
}
body[data-ds="vocerossa-brand"] .about__main p, body[data-ds="vocerossa-brand"] .insp li { font-weight: 300; }
.cx__l--ok { white-space: nowrap; }

.hv { position: relative; overflow: hidden; }
.hv__glow { position: absolute; width: 62cqw; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.hv__glow--a { left: -14%; top: -40%; background: radial-gradient(closest-side, var(--g1, rgba(0, 186, 255, .42)), transparent); animation: hv-a 14s ease-in-out infinite alternate; }
.hv__glow--b { right: -16%; bottom: -50%; background: radial-gradient(closest-side, var(--g2, rgba(255, 87, 87, .5)), transparent); animation: hv-b 16s ease-in-out infinite alternate; }
@keyframes hv-a { to { translate: 30cqw 18cqw; scale: 1.2; } }
@keyframes hv-b { to { translate: -34cqw -12cqw; scale: .85; } }
.hv__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; padding-block: clamp(24px, 5cqw, 80px); min-height: clamp(340px, 46cqw, 700px); }
.hv__mark { width: 100%; max-width: 520px; height: auto; display: block; justify-self: center; overflow: visible; }
.hv__txt { display: grid; gap: clamp(8px, 1.4cqw, 20px); min-width: 0; }
.hv__t { margin: 0; }
.hv__t svg { display: block; width: 100%; height: auto; overflow: visible; }
.hv__sub { font: 300 clamp(1rem, 2.6cqw, 2.4rem)/1 Montserrat, "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: .6em; padding-left: .6%; }
.hv__line { font: 400 clamp(1rem, 1.7cqw, 1.5rem)/1.4 var(--tf); color: var(--co); margin-top: clamp(6px, 1.4cqw, 18px); }
@media (max-width: 719px) { .hv__in { grid-template-columns: 1fr; } .hv__mark { max-width: 62%; } }
.hv .vr__a { animation: vr-go 4.4s ease-in-out infinite alternate; }
.hv .vr__s1 { animation: vr-s1 4.4s ease-in-out infinite alternate; }
.hv .vr__s2 { animation: vr-s2 4.4s ease-in-out infinite alternate; }
.hv .vr__s3 { animation: vr-s3 4.4s ease-in-out infinite alternate; }
@keyframes vr-go { to { translate: 24px 0; } }
@keyframes vr-s1 { to { translate: 26px -34px; } }
@keyframes vr-s2 { to { translate: 40px 0; } }
@keyframes vr-s3 { to { translate: 26px 34px; } }

/* ==========================================================================
   Motion
   Every hero loops. data-a / data-w elements slide, pop or wipe in once on the page; inside the
   gallery previews (html.is-preview) they enter, hold and leave again on a nine-second cycle.
   Only translate / scale / rotate / opacity / clip-path are animated, so the elements' own transform stays intact.
   ========================================================================== */
:root { --e: cubic-bezier(.16, .84, .24, 1); }
[data-a], [data-w] { --k: .5; }
[data-a="l"] { --tx: -26vw; } [data-a="r"] { --tx: 26vw; }
[data-a="u"] { --ty: 12vh; } [data-a="d"] { --ty: -12vh; }
[data-a="z"] { --sx: .2; --sy: .2; }
[data-a="x"] { --sx: 0; transform-origin: 0 50%; }
[data-w="l"] { --c0: inset(0 100% 0 0); --c1: inset(0 0 0 100%); }
[data-w="r"] { --c0: inset(0 0 0 100%); --c1: inset(0 100% 0 0); }
[data-w="u"] { --c0: inset(100% 0 0 0); --c1: inset(0 0 100% 0); }
[data-w="d"] { --c0: inset(0 0 100% 0); --c1: inset(100% 0 0 0); }

html:not(.is-preview) [data-a] { animation: a-in .9s var(--e) backwards; animation-delay: calc(var(--i, 0) * .09s + .05s); }
html:not(.is-preview) [data-w] { animation: w-in 1.1s var(--e) backwards; animation-delay: calc(var(--i, 0) * .09s + .05s); }
html.is-preview [data-a] { --k: 1; animation: a-cyc 9s linear infinite backwards; animation-delay: calc(var(--i, 0) * .16s); }
html.is-preview [data-w] { animation: w-cyc 9s linear infinite backwards; animation-delay: calc(var(--i, 0) * .16s); }

@keyframes a-in {
  from { opacity: 0; translate: calc(var(--tx, 0px) * var(--k)) calc(var(--ty, 0px) * var(--k)); scale: calc(1 - (1 - var(--sx, 1)) * var(--k)) calc(1 - (1 - var(--sy, 1)) * var(--k)); }
  to { opacity: 1; translate: 0 0; scale: 1 1; }
}
@keyframes w-in { from { clip-path: var(--c0); } to { clip-path: inset(0 0 0 0); } }
@keyframes a-cyc {
  0% { opacity: 0; translate: var(--tx, 0px) var(--ty, 0px); scale: var(--sx, 1) var(--sy, 1); animation-timing-function: cubic-bezier(.16, .84, .24, 1); }
  14%, 80% { opacity: 1; translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  94%, 100% { opacity: 0; translate: calc(var(--tx, 0px) * -1) calc(var(--ty, 0px) * -1); scale: var(--sx, 1) var(--sy, 1); }
}
@keyframes w-cyc {
  0% { clip-path: var(--c0); animation-timing-function: cubic-bezier(.16, .84, .24, 1); }
  14%, 80% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  94%, 100% { clip-path: var(--c1); }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes kb { from { scale: 1; translate: 0 0; } to { scale: 1.12; translate: -2% -1.5%; } }
@keyframes blink { 50% { opacity: 0; } }

/* frozen when the preview card is off-screen */
html.is-paused *, html.is-paused *::before, html.is-paused *::after { animation-play-state: paused !important; }

/* brutal */
.hb__dia { animation: hb-dia 2.6s steps(6, jump-none) infinite alternate; }
@keyframes hb-dia { to { translate: 0 calc((var(--j) - 1) * -26px); } }
.hb__dither { position: relative; overflow: hidden; }
.hb__dither img { animation: hb-pan 11s ease-in-out infinite alternate; }
@keyframes hb-pan { from { scale: 1.02; translate: 0 0; } to { scale: 1.16; translate: -3% -2%; } }
.hb__dither::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14%; pointer-events: none; background: linear-gradient(transparent, rgba(246, 52, 222, .4), transparent); animation: hb-scan 3.6s steps(18) infinite; }
@keyframes hb-scan { from { translate: 0 -100%; } to { translate: 0 720%; } }
.hb__mq { display: flex; width: max-content; animation: hb-mq 18s linear infinite; }
.hb__mq > span { flex: none; }
@keyframes hb-mq { to { translate: -50% 0; } }

/* timeless */
.ht__ph { overflow: hidden; }
.ht__ph img { animation: kb 18s ease-in-out infinite alternate; }
.ht__acc .mt { transform-origin: 50% 88%; animation: ht-sway 4.6s ease-in-out infinite alternate; }
@keyframes ht-sway { from { rotate: -5deg; } to { rotate: 5deg; } }
.ht__t .dx, .ht__sub .dx {
  color: transparent; background: linear-gradient(100deg, var(--fg) 0 38%, #fff3c4 50%, var(--fg) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; animation: shimmer 6.5s linear infinite;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* aurora */
.ha__bg { overflow: hidden; }
.ha__bg img { animation: kb 22s ease-in-out infinite alternate; }
.ha__glow { position: absolute; width: 46cqw; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; }
.ha__glow--a { left: -8%; top: -30%; background: radial-gradient(closest-side, rgba(244, 71, 103, .6), transparent); animation: ha-a 13s ease-in-out infinite alternate; }
.ha__glow--b { right: -6%; top: -12%; background: radial-gradient(closest-side, rgba(253, 148, 117, .42), transparent); animation: ha-b 17s ease-in-out infinite alternate; }
.ha__glow--c { left: 30%; top: 8%; width: 36cqw; background: radial-gradient(closest-side, rgba(151, 63, 99, .6), transparent); animation: ha-c 11s ease-in-out infinite alternate; }
@keyframes ha-a { to { translate: 36cqw 14cqw; scale: 1.25; } }
@keyframes ha-b { to { translate: -34cqw 18cqw; scale: .8; } }
@keyframes ha-c { to { translate: -12cqw -6cqw; scale: 1.35; } }
.ha__t .dx { color: transparent; background: linear-gradient(100deg, #F44767 0 40%, #FD9475 50%, #F44767 60% 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 7s linear infinite; }
.ha__li i { animation: ha-pulse 2.4s ease-in-out infinite alternate; }
@keyframes ha-pulse { from { scale: 1; } to { scale: 1.3; } }

/* open docs */
body[data-ds="open-docs"] .hero { background: repeating-linear-gradient(90deg, rgba(50, 0, 124, .09) 0 1px, transparent 1px calc(100% / 12)); }
.ho__scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ac); pointer-events: none; z-index: 2; animation: ho-scan 7s linear infinite; }
@keyframes ho-scan { from { top: 0; } to { top: calc(100% - 3px); } }
.ho__caret { display: inline-block; width: .4em; height: .1em; margin-left: .06em; background: var(--ac); animation: blink 1s steps(1) infinite; }
.ho__ph img { animation: kb 14s ease-in-out infinite alternate; }

/* pretentious */
.hp__seal .pl { animation: spin 26s linear infinite; }

/* amber */
.am__c { translate: calc(var(--n) * 12px) calc(var(--n) * -76.5px); animation: am-ext 8s ease-in-out infinite; animation-delay: calc(var(--n) * .07s); }
@keyframes am-ext { 50% { translate: calc(var(--n) * 3px) calc(var(--n) * -19px); } }
.am__p { transform-origin: 593px 1275px; animation: am-rot 11s ease-in-out infinite alternate; }
@keyframes am-rot { from { rotate: -6deg; } to { rotate: 6deg; } }
.hm__spin { transform-origin: 60px 60px; animation: spin 9s linear infinite; }

/* newsroom */
.hn figure { position: relative; }
.hn figure img + img { position: absolute; inset: 0; opacity: 0; animation: hn-xf 9s ease-in-out infinite; }
.hn__c img + img { animation-delay: -3s; } .hn__d img + img { animation-delay: -6s; } .hn__f img + img { animation-delay: -1.5s; }
@keyframes hn-xf { 0%, 32% { opacity: 0; } 42%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
.hn__t { position: relative; }
.hn__t::before { content: ""; position: absolute; inset: 0; background: #E80000; opacity: 0; animation: hn-flip 6s steps(1) infinite; }
.hn__t .dx { position: relative; animation: hn-ink 6s steps(1) infinite; }
@keyframes hn-flip { 0%, 70% { opacity: 0; } 70.01%, 82% { opacity: 1; } 82.01%, 100% { opacity: 0; } }
@keyframes hn-ink { 0%, 70% { color: #E80000; } 70.01%, 82% { color: #fff; } 82.01%, 100% { color: #E80000; } }
.hn__b, .hn__g { padding: 0; overflow: hidden; }
.hn__tk { display: flex; flex-direction: column; padding: .3em .35em; animation: hn-crawl 44s linear infinite; }
.hn__tk > span { display: block; }
@keyframes hn-crawl { to { translate: 0 -50%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}