/* AFC 13 — light studio portal, round 2: personality (round 5: grounds without squares, a sans secondary voice).
   One world: a still pearl studio ground, glass in depth, one Apex green — and below the fold the same energy: condensed heavy caps with one serif accent per headline, soft-lit grounds with a fine
   static grain (no pattern lines), dark panels that rise.
   Motion follows Apple's fluid-interface rules (apple-design skill; § numbers below refer to its sections). */

:root {
  --pearl: #eceff5;            /* page ground, under the still studio ground (.field) */
  --ground: #e5e9f0;           /* light band ground (never flat white) */
  --night: #091128;            /* dark ground: deep racing green-black */
  --paper: #f2f4f8;            /* raised light surface on a ground (cards, plates) */
  --silver: #ced1d7;
  --ink: #10131c;
  --ink-2: #2a303d;
  --mute: #545c6b;
  --line: rgba(16, 19, 28, .12);
  --line-2: rgba(16, 19, 28, .24);
  --apex: #ff4d1f;
  --apex-deep: #c02a10;        /* accent text on light grounds (4.7:1 on --ground); flips to --apex on dark */
  --apex-soft: rgba(255, 77, 31, .16);
  --accent-ink: var(--apex-deep);
  --on-apex: #10131c;          /* text on an Apex fill, both themes */
  --focus: var(--apex-deep);   /* focus ring: 3:1+ against every ground */
  --glass: rgba(249, 250, 248, .44);
  --glass-edge: rgba(255, 255, 255, .82);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-filter: blur(14px) saturate(130%);
  --pill-bg: rgba(245, 247, 250, .5);
  --shadow: 0 22px 48px -22px rgba(23, 32, 56, .34), 0 2px 6px rgba(23, 32, 56, .06);

  /* grounds (round 5: the square grid is gone). A light band is the pearl --ground lit like a studio sweep: a soft,
     large key light from the top left and a faint cool falloff toward the bottom right, both at or above the
     ground's own luminance, so every AA pair measured on --ground still holds. Dark panels keep their faint Apex
     glow at the top (--ground-glow). Both carry the same very fine static grain (.ground, below). */
  --ground-glow: none;
  --ground-light:
    radial-gradient(120% 1150px at 0 0, rgb(255 255 255 / .6), rgb(255 255 255 / .2) 46%, rgb(255 255 255 / 0) 74%),
    radial-gradient(100% 1000px at 100% 100%, rgb(227 234 239 / .62), rgb(227 234 239 / 0) 72%),
    linear-gradient(rgb(255 255 255 / .04), rgb(255 255 255 / .04));   /* gives back the ~1 level the grain's dark specks take, so the ground's mean stays --ground */

  /* type families. The system font is out (the reader found it corporate): Archivo reads, Archivo condensed heavy
     caps speak (--display), JetBrains Mono counts. Instrument Serif (--serif) now lives ONLY in the one accent
     fragment inside a headline (.t-accent); round 5 moved every secondary text (ledes, pull quotes, secondary
     titles, captions, CTA lines) to the secondary voice --second: Archivo at a near-normal width (.t-lede,
     .t-second, .t-second-title below). */
  --text: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --brand: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --display: 'Archivo', 'Arial Narrow', ui-sans-serif, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;   /* headline accent only; only the italic is loaded (ital@1) */
  --second: 'Archivo', ui-sans-serif, system-ui, sans-serif;       /* secondary text */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* type scale (§15): size, leading, tracking, weight and width move together. Condensed caps read smaller than
     their size, so the display steps are bigger; the biggest sizes are the narrowest and tightest, smaller caps
     open up (wider, heavier) to stay legible; reading sizes stay near zero tracking. */
  --t-mega: clamp(3.2rem, .4rem + 12.4vw, 13.5rem);      --lh-mega: .86;      --tr-mega: -.005em;     --w-mega: 780;     --st-mega: 62%;
  --t-display: clamp(3.2rem, 1.2rem + 7.2vw, 9.6rem);    --lh-display: .88;   --tr-display: -.004em;  --w-display: 800;  --st-display: 65%;
  --t-title1: clamp(2.75rem, 1.1rem + 5.4vw, 7rem);      --lh-title1: .9;     --tr-title1: -.002em;   --w-title1: 820;   --st-title1: 70%;
  --t-title2: clamp(1.65rem, 1.15rem + 1.8vw, 2.6rem);   --lh-title2: 1.1;    --tr-title2: -.02em;    --w-title2: 500;
  --t-title3: clamp(1.3rem, 1.05rem + .8vw, 1.65rem);    --lh-title3: 1.18;   --tr-title3: -.012em;   --w-title3: 600;
  --t-lede: clamp(1.16rem, .98rem + .6vw, 1.56rem);      --lh-lede: 1.4;      --tr-lede: -.01em;      --w-lede: 400;     --st-lede: 103%;   /* Archivo: its tall x-height reads big, so smaller than the old serif step */
  --t-body: 1rem;                                         --lh-body: 1.55;     --tr-body: -.003em;     --w-body: 400;
  --t-callout: .94rem;                                    --lh-callout: 1.45;  --tr-callout: -.002em;
  --t-subhead: .88rem;                                    --lh-subhead: 1.4;   --tr-subhead: 0em;
  --t-footnote: .76rem;                                   --lh-footnote: 1.38; --tr-footnote: .004em;
  --t-caption: .7rem;                                     --lh-caption: 1.33;  --tr-caption: .012em;
  --t-label: max(11px, .7rem);                            --lh-label: 1.3;     --tr-label: .16em;      --w-label: 560;
  --accent-size: 1.06em;       /* the serif fragment inside a caps headline */
  /* the secondary voice (round 5), Archivo variable (wdth 62–125, wght 100–900):
     reading lines (ledes, pull quotes, captions set large): near-normal width, regular weight, a little negative
     tracking, open leading; secondary titles (milestone titles, news headlines, a stage line): a touch condensed,
     semibold, tight. Size stays with the owner (the lede token, title3, or the section's own clamp). */
  --st-second: 102%;    --w-second: 400;   --tr-second: -.01em;
  --st-second-title: 92%;   --w-second-title: 600;   --tr-second-title: -.01em;   --lh-second-title: 1.12;

  /* materials (§12): weight encodes hierarchy; bigger surfaces read thicker */
  --mat-thin: rgba(250, 251, 249, .55);      --mat-thin-filter: blur(18px) saturate(180%);     /* chips, small controls */
  --mat-regular: rgba(247, 248, 246, .72);   --mat-regular-filter: blur(24px) saturate(180%);  /* dock, popovers */
  --mat-thick: rgba(243, 245, 250, .86);     --mat-thick-filter: blur(30px) saturate(160%);    /* sheets, menus */
  --mat-edge: inset 0 1px 0 rgba(255, 255, 255, .7);                                            /* light catching the top edge */
  --shadow-s: 0 1px 2px rgba(23, 32, 56, .06), 0 10px 24px -14px rgba(23, 32, 56, .3);
  --shadow-l: 0 2px 6px rgba(23, 32, 56, .06), 0 34px 70px -30px rgba(23, 32, 56, .42);
  --scrim: rgba(16, 19, 28, .18);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --press: .97;                 /* §1 pressed scale; cards use .98 */
  --press-t: 100ms;
  --panel-r: 44px;              /* rising panels: top corner radius at the start of the rise */
  --panel-lift: 7vh;            /* rising panels: how far the content trails and then settles */

  /* the page uses viewport-fit=cover: in landscape on a notched phone the edges keep clear of the sensor housing */
  --edge: max(clamp(16px, 2.6vw, 36px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* 1rem = 17px, the iOS body size; on iOS rem follows the reader's Dynamic Type setting (§15) */
html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: auto;        /* native scrolling, zero latency (§1); AFC.scrollTo animates in-page jumps */
  scrollbar-gutter: stable;     /* AFC.lockScroll hides overflow without shifting the layout */
}
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
html.scroll-locked { overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--apex-soft); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[data-jump-target]:focus { outline: none; }   /* a section that received focus from an in-page jump */
input, textarea { caret-color: var(--apex); }
html { scrollbar-color: var(--silver) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 9px; border: 2px solid var(--pearl); }
::-webkit-scrollbar-track { background: transparent; }

/* language: PT / EN copies live side by side, one shows */
html[data-lang="pt"] [lang="en"]:not(html), html[data-lang="en"] [lang="pt"]:not(html) { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--edge); top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: top .3s var(--ease-out), scale var(--press-t) ease-out; }
.skip:focus-visible { top: 14px; outline-color: var(--apex); }   /* it appears over the dark intro: the bright ring reads there */

/* ── response: feedback lives on the press, and it's instant (§1, §10) ── */
/* zero specificity, so any component can set its own --press or transition; the independent `scale`
   property composes with whatever transform the element already carries */
:where(a[href], button, [role="button"], summary, label[for]) {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
:where(a[href], button, [role="button"]) { transition: scale var(--press-t) ease-out; }
:where(a[href], button, [role="button"]):active { scale: var(--press); }
/* inline text links can't scale: they dim on the press instead */
:where(a[href]:not([class])) { transition: scale var(--press-t) ease-out, opacity var(--press-t) ease-out; }
:where(a[href]:not([class])):active { opacity: .6; }
:where(button:disabled, [aria-disabled="true"]):active { scale: none; }

/* ── type (§15) ───────────────────────────────────────────────────── */
/* the display voice: condensed heavy caps. The section headline: */
.t-h2 {
  margin: 0; font-family: var(--display); text-transform: uppercase; text-wrap: balance;
  font-kerning: normal; font-synthesis: none;
  font-size: var(--t-title1); line-height: var(--lh-title1); letter-spacing: var(--tr-title1); font-weight: var(--w-title1); font-stretch: var(--st-title1); color: var(--ink);
}
/* the accent voice: one serif italic fragment inside a headline (mixed case, a touch larger, in the accent colour) */
.t-accent {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: var(--accent-size);
  text-transform: none; letter-spacing: -.01em; color: var(--accent-ink); font-synthesis: none;
}
/* the secondary voice (round 5): replaces every serif outside the headline accent. .t-second carries the family,
   width, weight and tracking (the owner sets size and leading); .t-second-title is the secondary title */
.t-second {
  font-family: var(--second); font-style: normal; font-stretch: var(--st-second); font-weight: var(--w-second);
  letter-spacing: var(--tr-second); font-synthesis: none;
}
.t-second-title {
  margin: 0; font-family: var(--second); font-style: normal; font-stretch: var(--st-second-title);
  font-weight: var(--w-second-title); letter-spacing: var(--tr-second-title); line-height: var(--lh-second-title);
  text-transform: none; font-synthesis: none; text-wrap: balance;
}
.t-label {
  font-family: var(--brand); font-size: var(--t-label); line-height: var(--lh-label); font-weight: var(--w-label);
  font-stretch: 125%; letter-spacing: var(--tr-label); text-transform: uppercase;
}
/* ledes speak in the secondary voice (round 5: Archivo, no longer the serif) */
.t-lede {
  margin: 0; font-family: var(--second); font-style: normal; font-size: var(--t-lede); line-height: var(--lh-lede);
  letter-spacing: var(--tr-lede); font-weight: var(--w-lede); font-stretch: var(--st-lede); font-synthesis: none;
  color: var(--ink-2); max-width: 46ch; text-wrap: pretty;
}
.t-body { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.t-callout { font-size: var(--t-callout); line-height: var(--lh-callout); letter-spacing: var(--tr-callout); }
.t-footnote { font-size: var(--t-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); }
.t-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }

/* materials (§12): the --mat-* tokens above; components apply them themselves. Never light glass on light glass. */

/* ── field: the still studio ground, fixed behind everything ─────── */
.field {
  /* round 9: the moving WebGL silk is gone (a full-viewport moving background: apple-design §14). The scenes now
     stand on a still studio ground — the pearl lit by the same soft key light as the bands, with the film grain —
     fixed behind the page so the scenes still read as one continuous floor */
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none;
  background-color: var(--pearl);
  background-image: url('../assets/r5/grain/grain-1x.webp'), var(--ground-light);
  background-size: 128px 128px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .field { background-image: url('../assets/r5/grain/grain-2x.webp'), var(--ground-light); }
}

/* the side index keeps its own lane: content never runs under it */
@media (min-width: 861px) {
  main > .section { padding-right: max(var(--gutter), calc(var(--edge) + 58px)); }
}

/* ── pill: the one action shape ──────────────────────────────────── */
.pill {
  --mx: 0; --my: 0;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 46px; padding: 0 26px; border: 1px solid var(--apex); border-radius: 999px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: var(--pill-bg);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out), box-shadow .45s var(--ease-out), scale var(--press-t) ease-out;
  translate: calc(var(--mx) * 1px) calc(var(--my) * 1px);   /* the magnet's spring writes --mx / --my */
}
.pill .t-label { letter-spacing: .22em; }
.pill svg { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.pill:hover { background: var(--apex); color: var(--on-apex); box-shadow: 0 14px 30px -14px rgba(192, 42, 16, .55); }
.pill:hover svg { transform: translateX(3px); }
.pill.is-solid { background: var(--apex); color: var(--on-apex); }
.pill.is-solid:hover { background: #fc7758; }
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color .4s var(--ease-out), color .4s var(--ease-out), scale var(--press-t) ease-out; }
.link-arrow:hover { border-color: var(--apex); color: var(--accent-ink); }
.link-arrow svg { width: 13px; height: 13px; }
.link-arrow::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }   /* 44px hit area, same look */

/* ── glass: the cards' material (frosted light glass, real blur only where it sits over the field) ── */
.glass {
  --press: .98;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}

/* ── grounds: no flat white anywhere, and no pattern lines (round 5) ── */
/* A band is the silver-pearl --ground lit like a studio sweep (--ground-light: a large soft key from the top left,
   a faint cool falloff toward the bottom right) under a very fine film grain: one static tiled noise, ≤ 3% contrast
   (white specks lift a dark ground, black specks sink a light one, so the same tile serves both themes and the
   ground's mean tone, and every AA pair on it, is unchanged). Inside [data-theme="dark"] the tokens flip: --night,
   the faint Apex glow at the top, no key light, the same grain. Photography (.rise.is-bg) brings the texture.
   .ground puts the ground on any element. */
.ground,
.section:not(.is-scene),
section[data-theme="dark"], footer[data-theme="dark"] {
  background-color: var(--ground);
  background-image: url('../assets/r5/grain/grain-1x.webp'), var(--ground-glow), var(--ground-light);
  background-size: 128px 128px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 50% 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-origin: border-box;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* the grain at device resolution (a 256px tile shown at 128px): it stays a film grain, never a pixel pattern */
  .ground,
  .section:not(.is-scene),
  section[data-theme="dark"], footer[data-theme="dark"] {
    background-image: url('../assets/r5/grain/grain-2x.webp'), var(--ground-glow), var(--ground-light);
  }
}
.section.is-scene { background: transparent; }

/* ── the dark scope: every token flips (AA on --night), so any component inside reads right without its own rules ── */
[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--night);
  --paper: #131c34;
  --silver: #232c44;
  --ink: #edf1f9;
  --ink-2: #c9cfdb;
  --mute: #939cb2;
  --line: rgba(237, 241, 249, .14);
  --line-2: rgba(237, 241, 249, .3);
  --apex-deep: var(--apex);    /* accent text on dark is the bright Apex (6.8:1 on --night) */
  --accent-ink: var(--apex);
  --apex-soft: rgba(255, 77, 31, .2);
  --focus: var(--apex);
  --glass: rgba(23, 33, 61, .52);
  --glass-edge: rgba(237, 241, 249, .14);
  --glass-hi: rgba(255, 255, 255, .1);
  --pill-bg: rgba(237, 241, 249, .05);
  --shadow: 0 22px 48px -22px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .25);
  --mat-thin: rgba(27, 37, 65, .55);
  --mat-regular: rgba(19, 28, 52, .72);
  --mat-thick: rgba(15, 22, 44, .86);
  --mat-edge: inset 0 1px 0 rgba(255, 255, 255, .09);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .6);
  --shadow-l: 0 2px 6px rgba(0, 0, 0, .3), 0 34px 70px -30px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .42);
  --ground-glow: radial-gradient(70% 560px at 50% 0, rgba(255, 77, 31, .15), rgba(255, 77, 31, .04) 55%, transparent 78%);
  --ground-light: none;        /* the night keeps only its glow and the grain */
  color: var(--ink);
}
[data-theme="dark"] ::selection { background: rgba(255, 77, 31, .38); color: #fff; }
[data-theme="dark"] .pill:hover { box-shadow: 0 14px 34px -12px rgba(255, 77, 31, .5); }

/* ── sections: lit bands, dark panels and field scenes ──────────── */
main { position: relative; }
.section { position: relative; padding: clamp(96px, 15vh, 190px) var(--gutter); }
.wrap { width: 100%; max-width: 1340px; margin: 0 auto; }
.section-head { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(48px, 7vw, 96px); }

/* entrance: content is visible by default; with JS it materializes once (§12): opacity, a short rise, scale and
   blur together. Independent properties, so an element's own transform survives; the transition only exists
   while it plays (.is-revealing), so the element's own transitions and the press come back afterwards.
   A headline with [data-lines] reveals by its lines instead (below). */
.js [data-reveal]:not([data-lines]):not(.is-in) { opacity: 0; translate: 0 18px; scale: .985; filter: blur(8px); }
.js [data-reveal].is-revealing {
  transition: opacity .75s var(--ease-reveal), translate .75s var(--ease-reveal), scale .75s var(--ease-reveal), filter .75s var(--ease-reveal);
  transition-delay: var(--d, 0s);
}
/* a parallax element ([data-depth]) materializes in place: its position stays 1:1 with the scroll the whole time
   (no rise, no transition on translate), while opacity, scale and blur still arrive together */
.js [data-reveal][data-depth]:not(.is-in) { translate: 0 var(--depth-y, 0px); }
.js [data-reveal][data-depth].is-revealing { transition-property: opacity, scale, filter; }

/* ── 1 · rising panels [data-panel] ──────────────────────────────── */
/* The panel rises over the previous section: its big rounded top flattens to 0 and its content trails by
   --panel-lift, then settles, as its top travels from the bottom of the viewport to the top. site.js writes
   --rise (0 → 1) 1:1 with the scroll. The panel overlaps the previous section by the corner radius (a transparent
   top border of the same size gives the room back, so the owner's padding is untouched); the corners show the
   previous section, which sinks a little underneath ([data-sinking], below). No-JS / reduced: --rise stays 1. */
[data-panel][data-panel] {
  --rise: 1;
  position: relative; z-index: 10;
  margin-top: calc(-1 * var(--panel-r));
  border-top: var(--panel-r) solid transparent;
  border-radius: calc(var(--panel-r) * (1 - var(--rise))) calc(var(--panel-r) * (1 - var(--rise))) 0 0;
  overflow: clip;             /* the trailing content never adds scroll room below the page, nor any sideways room */
}
/* over a field scene the corners show the field either way: no overlap, the scene keeps all of its height */
.is-scene + [data-panel][data-panel],
main:has(> .is-scene:last-child) + [data-panel][data-panel] { margin-top: 0; border-top-width: 0; }
[data-panel] > * { translate: 0 calc((1 - var(--rise)) * var(--panel-lift)); }
/* a light panel rising over the field gets a soft edge of its own, so it reads as a sheet */
[data-panel]:not([data-theme="dark"]) { box-shadow: 0 -24px 60px -36px rgba(23, 32, 56, calc(.35 * (1 - var(--rise)))); }
[data-panel][data-theme="dark"] { box-shadow: 0 -30px 70px -30px rgba(5, 9, 25, calc(.5 * (1 - var(--rise)))); }

/* the section a panel rises over: it darkens a little and, if it is a light band, recedes (§12 "push back").
   Scenes only darken (they are transparent over the fixed .field: scaling one would show its edge), and so do dark
   bands: shrunk, they would show the pearl floor as a light sliver down each side. */
:where([data-sinking]) { position: relative; }
[data-sinking]::after {
  content: ''; position: absolute; z-index: 9; left: 0; right: 0;
  bottom: calc(-1 * var(--panel-r)); height: min(calc(100% + var(--panel-r)), calc(100vh + 2 * var(--panel-r)));   /* reaches into the panel's corners */
  background: var(--sink-tint, #050919); opacity: calc(var(--sink, 0) * var(--sink-max, .3)); pointer-events: none;
}
[data-sinking]:not(.is-scene):not([data-theme="dark"]) { scale: calc(1 - var(--sink, 0) * .03); transform-origin: 50% 100%; }

/* ── 2 · line reveals [data-lines] ───────────────────────────────── */
/* site.js splits each [lang] copy on <br> and on the .t-accent boundary; every line sits in a clip mask and slides
   up from below with a forward speed skew that straightens, 70ms apart, once, when the headline is 20% visible.
   The mask clips with clip-path (overflow would move the inline-block's baseline and open the tight leading); its
   padding keeps accents (Ó, É) and the serif's descenders inside, the negative margin gives the room back. Once
   the lines have landed the clip goes (.is-lines-done). */
/* sections never push the page sideways (a headline line waiting skewed for its reveal is wider than its box); clip, not hidden: no scroll container, so sticky stages keep working */
main > .section, .site-footer { overflow-x: clip; }
.line-mask { display: inline-block; max-width: calc(100% + .16em); padding: .2em .08em .12em; margin: -.2em -.08em -.12em; clip-path: inset(0); }   /* a line wider than its column (narrow phones, big Dynamic Type) wraps inside its mask instead of pushing the page sideways */
.is-lines-done .line-mask { clip-path: none; }
.line-text { display: inline-block; transform-origin: 0 100%; }
.js [data-lines] .line-text { translate: 0 calc(110% + .2em); transform: skewX(-7deg); }
.js [data-lines].is-lines-in .line-text {
  translate: none; transform: none;
  transition: translate .95s var(--ease-reveal), transform 1.1s var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0s));
}

/* ── 3 · velocity ticker [data-ticker] ───────────────────────────── */
/* A band of huge display caps, solid and outline in turn, a small Apex stripe between them. It moves only when the
   page does (site.js: scroll delta × k plus a velocity spring that coasts to rest) and leans with its speed. */
[data-ticker] {
  --tk-size: clamp(3.4rem, 1.4rem + 8.6vw, 11rem);
  position: relative; overflow: hidden; contain: paint;
  width: var(--tk-w, 100%); max-width: none; margin-left: var(--tk-l, 0px);   /* full bleed, measured by site.js */
  font-family: var(--display); font-size: var(--tk-size); line-height: .9; font-weight: 820; font-stretch: 66%;
  letter-spacing: -.004em; text-transform: uppercase; white-space: nowrap; user-select: none;
  padding: .12em 0;           /* accents above the caps stay inside the band */
}
[data-ticker-track] { display: flex; width: max-content; will-change: transform; }
.tk-group { display: flex; align-items: center; flex: none; }
.tk-word { display: block; flex: none; padding: 0 .16em; }
.tk-word.is-outline { -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1px, .016em) currentColor; }
.tk-mark { display: block; flex: none; width: .3em; height: .11em; margin: 0 .12em; background: var(--apex); transform: skewX(-24deg); }
/* .tk-chrome: the name's finish (round 4), worn by the name at the start (01-name) and at the foot (99-footer). At rest
   it is chrome and perfectly still: the solid words carry a polished steel gradient (bright sky on the cap tops, a
   tight horizon of the night's own green-black across the middle, the ground's reflection below), the outline words
   are steel wire. The gradient is painted once into the ticker's own layer, so the scroll keeps moving only a
   transform. The liquid metal that ripples it near the pointer is the footer's own (99-footer.*) */
.tk-chrome {
  --lq-sky: #fbfcfa;
  --lq-steel: #c3c9d5;
  --lq-dusk: #8b93a5;
  --lq-horizon: #232c44;      /* --night-silver: the night panel reflected in the metal */
  --lq-ground: #6c7793;
  --lq-glow: #e4e8f2;
  --lq-wire: #aab1c1;         /* the outline words: steel, a step under the chrome's average, so the sheen shows on them */
}
/* the solid words: chrome. The box grows .22em up and down (and gives it back in margin, no layout change) so the
   accent on Ó, above the line box, is painted too; the stops sit on the caps (cap top ≈ 23 %, cap foot ≈ 76 %) */
.tk-chrome .tk-word:not(.is-outline) {
  padding-block: .22em; margin-block: -.22em;
  background: linear-gradient(180deg,
    var(--lq-sky) 0%, var(--lq-sky) 23%, var(--lq-steel) 37%, var(--lq-dusk) 47.5%,
    var(--lq-horizon) 50%, var(--lq-horizon) 51.6%, var(--lq-ground) 54.5%,
    var(--lq-steel) 63%, var(--lq-glow) 71%, var(--lq-steel) 80%, var(--lq-steel) 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tk-chrome .tk-word.is-outline { -webkit-text-stroke-color: var(--lq-wire); }
/* reduced motion, reduced transparency, more contrast, forced colours: the plain name (solid and outline in ink), no
   metal. A comma list, so an engine that does not know one of the features still honours the others */
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .tk-chrome .tk-word:not(.is-outline) {
    padding-block: 0; margin-block: 0; background: none;
    -webkit-text-fill-color: currentColor; color: inherit;
  }
  .tk-chrome .tk-word.is-outline { -webkit-text-stroke-color: currentColor; }
}

/* ── 4 · speed masks [data-speed] ────────────────────────────────── */
/* A forward-leaning parallelogram wipes the picture open left to right as it crosses the viewport, a thin Apex
   stripe riding its leading edge (our livery stripe). site.js writes --speed (0 → 1) 1:1 with the scroll and
   --speed-k (the lean, from the element's height). Put it on the wrapper (figure), not on the img/video. */
:where([data-speed]) { position: relative; }
[data-speed] {
  --speed: 1; --speed-k: 0px; --speed-lean: 18deg;   /* site.js: --speed-k = height × tan(--speed-lean) */
  --edge-x: calc(var(--speed) * (100% + var(--speed-k)) - var(--speed-k) / 2);   /* leading edge, at mid-height */
}
[data-speed].is-speed:not(.is-open) {
  clip-path: polygon(calc(-1 * var(--speed-k) - 2px) 0, calc(var(--edge-x) + var(--speed-k) / 2) 0, calc(var(--edge-x) - var(--speed-k) / 2) 100%, calc(-1 * var(--speed-k) - 2px) 100%);
}
[data-speed].is-speed:not(.is-open)::after {
  content: ''; position: absolute; z-index: 3; top: -2%; bottom: -2%; width: max(3px, .45%); pointer-events: none;
  left: calc(var(--edge-x) - max(3px, .45%) / 2);
  background: var(--apex); transform: skewX(calc(-1 * var(--speed-lean)));
  opacity: min(1, var(--speed) * 8, (1 - var(--speed)) * 8);
}

/* ── 5 · parallax depth [data-depth="n"] ─────────────────────────── */
/* n = depth in percent of the distance to the viewport centre: positive sits further away (moves slower than the
   page), negative comes closer. 1:1 with the scroll, on the independent `translate`, so transforms compose. */
[data-depth] { translate: 0 var(--depth-y, 0px); }

/* ── 6 · titles that leave through the camera [data-exit] ────────── */
/* site.js writes transform (a small rise + growth to 1.1), filter (blur to 8px) and opacity on the title's wrapper,
   1:1 with the scroll as it leaves; nothing at rest. The layer exists only while it moves. */
[data-exit] { transform-origin: var(--exit-origin, 50% 100%); }
[data-exit].is-exiting { will-change: transform, opacity, filter; }

/* ── 7 · elastic titles [data-elastic] ───────────────────────────── */
/* site.js writes font-stretch (Archivo's wdth axis) on the heading only while the page moves, and removes it at
   rest. The range it measures keeps every line in its row and inside its column, so no box moves and nothing needs
   reserving here. The serif accent keeps its own width whatever the heading does. */
[data-elastic] .t-accent { font-stretch: 100%; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.socials a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out), scale var(--press-t) ease-out; }
.socials a:hover { border-color: var(--apex); background: var(--apex-soft); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }   /* the partial's paths carry no fill: without this they paint black, invisible on dark grounds */

/* ── sec-tag: section number + name label above every headline (the label token) ── */
.sec-tag {
  color: var(--mute);
  display: block;
  margin-bottom: 0;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
}
.sec-tag::before {
  content: '';
  display: inline-block;
  width: 1.6em;
  height: 2px;
  background: var(--apex);
  vertical-align: .32em;
  margin-right: .75em;
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --panel-r: 28px; --panel-lift: 6vh; }
  .glass { --glass-filter: blur(8px) saturate(120%); }
}

/* ── accessibility: three independent signals (§14) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  /* reveals become a short cross-fade; the press dims instead of scaling; every scroll-linked utility is static */
  .js [data-reveal]:not([data-lines]):not(.is-in) { translate: none; scale: none; filter: none; }
  .js [data-reveal].is-revealing { transition: opacity .35s ease; transition-delay: var(--d, 0s); }
  .js [data-lines] .line-text { translate: none; transform: none; opacity: 0; }
  .js [data-lines].is-lines-in .line-text { opacity: 1; transition: opacity .35s ease; transition-delay: calc(var(--i, 0) * 40ms); }
  :where(a[href], button, [role="button"]):active { scale: none; opacity: .7; }
  [data-panel][data-panel] { --rise: 1; }
  [data-sinking]::after { display: none; }
  [data-sinking] { scale: none !important; }
  [data-depth] { translate: none; }
  [data-ticker-track] { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  /* frosted becomes solid: no blur anywhere, materials keep their weight as tone */
  :root {
    --glass: #f2f4f7; --pill-bg: var(--paper);
    --mat-thin: #f4f6f9; --mat-regular: #f1f3f6; --mat-thick: #edeff5;
    --glass-filter: none; --mat-thin-filter: none; --mat-regular-filter: none; --mat-thick-filter: none;
  }
  [data-theme="dark"] { --glass: #151f38; --pill-bg: #121a2f; --mat-thin: #1a2440; --mat-regular: #151f38; --mat-thick: #121a31; }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  /* near-solid surfaces with a defined border; quieter greys get darker (lighter on dark) */
  :root {
    --mute: #393f4d; --ink-2: #1a1f29; --line: rgba(16, 19, 28, .34); --line-2: rgba(16, 19, 28, .62);
    --glass: #f5f7fa; --glass-edge: rgba(16, 19, 28, .55); --pill-bg: var(--paper);
    --mat-thin: #f5f7fa; --mat-regular: #f3f5f8; --mat-thick: #f0f2f6;
    --glass-filter: none; --mat-thin-filter: none; --mat-regular-filter: none; --mat-thick-filter: none;
    --ground-light: none;      /* flat ground: nothing competes with the text */
  }
  [data-theme="dark"] {
    --mute: #b9c0d0; --ink-2: #e1e5ee; --line: rgba(237, 241, 249, .4); --line-2: rgba(237, 241, 249, .7);
    --glass: #131c34; --glass-edge: rgba(237, 241, 249, .55); --pill-bg: #121a2f;
    --mat-thin: #1a2440; --mat-regular: #151f38; --mat-thick: #121a31; --ground-glow: none;
  }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* forced colours (Windows High Contrast): backgrounds and colours are replaced, so a segmented control's sliding thumb
   and its colour change both vanish. The selected segment gets a system-coloured ring instead (home and sub-pages) */
@media (forced-colors: active) {
  button[aria-pressed="true"], [role="radio"][aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -3px; border-radius: 999px; }
  .lang-thumb, .car-switch-thumb, .cal-filter-mark, .pg-seg-thumb, .pg-lang-thumb { display: none; }
}