/* =============================================================================
   Ciral Fusion: production stylesheet. Tokens, components and sections.
   No framework, no build step.
   Rules: chrome is monochrome; the one accent marks interactive state only;
   colour lives in content (renders, art, charts) and the rainbow logo.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted Geist 5.3.0, Latin, OFL) ---------------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap does not shift layout. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- 2. Tokens ------------------------------------------------------ */
:root {
  --night-0: #07080C; --night-1: #0E1015; --night-2: #16181F; --night-3: #1F2229;
  --paper-0: #F6F4EF; --paper-1: #FFFFFF; --paper-2: #ECE9E2;
  --snow: #F6F4EF; --grey-300: #AEB0B8; --grey-400: #8C8F98;
  --ink-900: #0B0C10; --ink-700: #42454E; --ink-600: #5E616B;
  --blue-400: #4A9EFF; --blue-700: #0A5BD1;

  --grad-rainbow-night: linear-gradient(92deg,
    #F86AB5 0%, #FF9A6B 16.67%, #FFDC4F 33.33%, #67EB72 50%, #10DEE7 66.67%, #54A0FE 83.33%, #A76EF8 100%);
  --grad-rainbow-paper: linear-gradient(92deg,
    #CD2E8B 0%, #E15F0A 16.67%, #CE9C09 33.33%, #279936 50%, #048B91 66.67%, #0267C7 83.33%, #7A31CA 100%);

  --chart-p-1: #C2410C; --chart-p-2: #00826A; --chart-p-3: #3B5BDB; --chart-p-4: #A3307F;
  --chart-n-1: #E8692E; --chart-n-2: #11A88C; --chart-n-3: #6A86EE; --chart-n-4: #C85AAB;
  --chart-dot-p: #7E818A; --chart-dot-n: #6B6E77;
  --chart-grid-p: #E2DED6; --chart-grid-n: #1C1E25;
  --chart-band-p: rgba(11, 12, 16, 0.026); --chart-band-n: rgba(246, 244, 239, 0.03);

  --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-hero:     clamp(2.75rem, 1.636rem + 4.571vw, 5.75rem);   /* 44 -> 92 (four-line signature) */
  --fs-display:  clamp(2.25rem, 1.229rem + 4.19vw, 5rem);        /* 36 -> 80 */
  --fs-headline: clamp(1.75rem, 1.193rem + 2.286vw, 3.25rem);    /* 28 -> 52 */
  --fs-title:    clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem);    /* 20 -> 28 */
  --fs-lead:     clamp(1.1875rem, 1.071rem + 0.476vw, 1.5rem);   /* 19 -> 24 */
  --fs-body:     clamp(1.0625rem, 1.039rem + 0.0952vw, 1.125rem);/* 17 -> 18 */
  --fs-small:    0.9375rem;
  --fs-caption:  0.875rem;
  --fs-mono:     0.75rem;
  --fs-numeral:  clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-giant:    clamp(5rem, 2.4rem + 10.6vw, 12rem);

  --lh-hero: 0.95; --lh-display: 1.0; --lh-headline: 1.06; --lh-title: 1.2;
  --lh-lead: 1.45; --lh-body: 1.6; --lh-caption: 1.45;
  --tr-hero: -0.045em; --tr-display: -0.038em; --tr-headline: -0.028em;
  --tr-title: -0.015em; --tr-lead: -0.008em; --tr-mono: 0.01em;

  --container: 1440px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --col-gap: clamp(16px, 2vw, 24px);
  --nav-h: 64px;
  /* left edge of the grid, measured from the viewport edge */
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));

  --section-s: clamp(64px, 8vw, 112px);
  --section-m: clamp(96px, 11vw, 168px);
  --section-l: clamp(128px, 15vw, 224px);

  --r-s: 6px; --r-m: 14px; --r-l: 24px; --r-pill: 999px;
  --shadow-frame: 0 1px 0 rgba(11, 12, 16, 0.04), 0 40px 80px -48px rgba(11, 12, 16, 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 160ms; --t-ui: 320ms; --t-fade: 600ms; --t-reveal: 900ms; --t-shimmer: 28s;

  --z-nav: 50; --z-sheet: 60; --z-dialog: 70; --z-skip: 80;
}
:root, [data-theme="night"] {
  --bg: var(--night-0); --bg-raised: var(--night-1); --bg-frame: var(--night-2); --bg-pressed: var(--night-3);
  --text: var(--snow); --text-2: var(--grey-300); --text-3: var(--grey-400);
  --line: rgba(246, 244, 239, 0.12); --line-strong: rgba(246, 244, 239, 0.44);
  --accent: var(--blue-400);
  --btn-bg: var(--snow); --btn-fg: var(--ink-900);
  --logo-fill: var(--grad-rainbow-night);
  --nav-bg: var(--night-0);
  --chart-1: var(--chart-n-1); --chart-2: var(--chart-n-2); --chart-3: var(--chart-n-3); --chart-4: var(--chart-n-4);
  --chart-dot: var(--chart-dot-n); --chart-grid: var(--chart-grid-n); --chart-band: var(--chart-band-n);
  --chart-surface: var(--night-0);
  color-scheme: dark;
}
[data-theme="paper"] {
  --bg: var(--paper-0); --bg-raised: var(--paper-1); --bg-frame: var(--paper-2); --bg-pressed: #E3DFD6;
  --text: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-600);
  --line: rgba(11, 12, 16, 0.12); --line-strong: rgba(11, 12, 16, 0.46);
  --accent: var(--blue-700);
  --btn-bg: var(--ink-900); --btn-fg: var(--paper-0);
  --logo-fill: var(--grad-rainbow-paper);
  --nav-bg: var(--paper-0);
  --chart-1: var(--chart-p-1); --chart-2: var(--chart-p-2); --chart-3: var(--chart-p-3); --chart-4: var(--chart-p-4);
  --chart-dot: var(--chart-dot-p); --chart-grid: var(--chart-grid-p); --chart-band: var(--chart-band-p);
  --chart-surface: var(--paper-0);
  color-scheme: light;
}
@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    --grad-rainbow-night: linear-gradient(92deg in oklch,
      oklch(0.72 0.19 350), oklch(0.78 0.17 45), oklch(0.90 0.17 95), oklch(0.84 0.20 145),
      oklch(0.82 0.14 200), oklch(0.70 0.17 255), oklch(0.66 0.20 300));
    --grad-rainbow-paper: linear-gradient(92deg in oklch,
      oklch(0.58 0.21 350), oklch(0.64 0.18 45), oklch(0.72 0.15 85), oklch(0.60 0.17 145),
      oklch(0.58 0.11 200), oklch(0.52 0.17 255), oklch(0.50 0.22 300));
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-ui: 1ms; --t-fade: 1ms; --t-reveal: 1ms; --t-shimmer: 0s; }
}
@media (forced-colors: active) {
  :root { --accent: Highlight; --line: CanvasText; --line-strong: CanvasText; }
}
@media (max-width: 819px) { :root { --nav-h: 56px; } }

/* ---------- 3. Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--night-0);
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
ol, ul { margin: 0; padding: 0; }
strong, b { font-weight: 600; }
i, em { font-style: normal; }
sup { line-height: 0; }
table { border-collapse: collapse; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }
[hidden] { display: none !important; }
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

section, header, footer { background: var(--bg); color: var(--text); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Layout primitives */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* Type */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 600; }
.t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); font-weight: 600; }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: 600; }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--text-2); }
.t-small { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.5; letter-spacing: var(--tr-mono); color: var(--text-3); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }
.body p + p { margin-top: 1.1em; }
.body { color: var(--text-2); max-width: 62ch; }
.body strong { color: var(--text); font-weight: 500; }
.body h3, .body h4 { color: var(--text); }

/* Inline links */
.link {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-std), text-decoration-color var(--t-fast) var(--ease-std);
}
.link:hover, .link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* Skip link */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: var(--z-skip);
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--snow); color: var(--ink-900); font-weight: 500; font-size: 15px; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-ui) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------- 4. Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 16px/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color var(--t-fast) var(--ease-std), transform var(--t-fast) var(--ease-std);
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--text-2)); }
.btn:active { transform: scale(0.98); }
.btn--s { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--s::after { content: ""; position: absolute; inset: -4px 0; }
.btn--s { position: relative; }

.chev {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  color: var(--text); font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.chev::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translateY(0.5px) rotate(45deg); transition: transform var(--t-fast) var(--ease-std);
}
.chev:hover::after, .chev:focus-visible::after { transform: translate(3px, 0.5px) rotate(45deg); }
.chev--down::after { transform: translateY(-2px) rotate(135deg); }
.chev--down:hover::after { transform: translateY(1px) rotate(135deg); }

.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
  font: 500 14px/1 var(--font-sans); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std), background-color var(--t-fast) var(--ease-std);
  position: relative;
}
.ghost::after { content: ""; position: absolute; inset: -3px -2px; }
.ghost:hover { border-color: var(--text); }
.ghost[aria-pressed="true"] { background: var(--bg-pressed); border-color: var(--text); }
.ghost .ico-pause { display: inline-block; width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.ghost .ico-play { display: inline-block; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Quiet text buttons for the hero's 3-D controls: they must not compete with the primary action */
.qbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 500 13px/1 var(--font-sans); color: var(--text-3); white-space: nowrap; border-radius: var(--r-s);
  transition: color var(--t-fast) var(--ease-std);
}
.qbtn:hover { color: var(--text); }
.qbtn .ico-pause { display: inline-block; width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.qbtn .ico-play { display: inline-block; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.hud--quiet .hud__ctl { gap: 4px 14px; }

/* ---------- 5. Tags, captions, footnotes ------------------------------------ */
.tag {
  display: inline; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.5; letter-spacing: var(--tr-mono);
  color: var(--text-2); font-weight: 500; white-space: nowrap; cursor: default;
}
.cap__line > .tag:not(:last-child)::after, .hud__cap > .tag::after, .tags > .tag:not(:last-child)::after {
  content: "\00a0\00b7"; color: var(--text-3); font-weight: 400;
}
.cap { margin-top: 16px; max-width: 64ch; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.cap__line { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.5; letter-spacing: var(--tr-mono); color: var(--text-3); }
.cap__line .tags { display: inline-flex; gap: 0.6ch; }
/* 5 Nov: the line flows as text, so a long one wraps after its tag instead of leaving the tag alone on a line */
.cap__line > .tag:not(:last-child), .cap__line > .tags:not(:last-child) { margin-right: 0.6ch; }
/* a marker right after a unit that ends in a superscript three needs air, or the two read as one exponent */
.cap__line sup.fn { margin-left: 0.5ch; }
.spec__l sup.fn { margin-left: 0.5ch; }  /* fx2: markers follow a word, never a number or unit, 0.5ch off it */
.cap__nw { white-space: nowrap; }  /* fx2: a caption clause that must not break inside (Fig. 2 numbers) */
.cap__text { display: block; margin-top: 8px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); max-width: 60ch; }

sup.fn { font-size: 0.62em; vertical-align: super; line-height: 0; margin-left: 1px; font-weight: 500; }
sup.fn a { color: var(--text-3); text-decoration: none; padding: 0 2px; }
sup.fn a:hover, sup.fn a:focus-visible { color: var(--accent); }

/* ---------- 6. Rainbow logo (masked layers) --------------------------------- */
/* The whole spectrum sits on the shape (the gradient spans the artwork edge to edge, every hue at its
   most luminous lightness). The shimmer is a slow hue offset of at most 36 deg (about 12 % of the
   sweep), two passes, then rest; it never slides the ends off the mark. */
@property --rb-shift { syntax: "<number>"; inherits: false; initial-value: 0; }
.rainbow {
  background: var(--logo-fill); background-size: 100% 100%;
  -webkit-mask: url("/assets/brand/logo-rainbow.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo-rainbow.svg") center / contain no-repeat;
  aspect-ratio: 885 / 735;
}
@supports (background: linear-gradient(in oklch, red, blue)) {
  .rainbow {
    background-image: linear-gradient(92deg in oklch,
      oklch(0.72 0.19 calc(350 + var(--rb-shift))), oklch(0.78 0.17 calc(45 + var(--rb-shift))),
      oklch(0.90 0.17 calc(95 + var(--rb-shift))), oklch(0.84 0.20 calc(145 + var(--rb-shift))),
      oklch(0.82 0.14 calc(200 + var(--rb-shift))), oklch(0.70 0.17 calc(255 + var(--rb-shift))),
      oklch(0.66 0.20 calc(300 + var(--rb-shift))));
  }
  [data-theme="paper"] .rainbow {
    background-image: linear-gradient(92deg in oklch,
      oklch(0.58 0.21 calc(350 + var(--rb-shift))), oklch(0.64 0.18 calc(45 + var(--rb-shift))),
      oklch(0.72 0.15 calc(85 + var(--rb-shift))), oklch(0.60 0.17 calc(145 + var(--rb-shift))),
      oklch(0.58 0.11 calc(200 + var(--rb-shift))), oklch(0.52 0.17 calc(255 + var(--rb-shift))),
      oklch(0.50 0.22 calc(300 + var(--rb-shift))));
  }
}
.rainbow--mark {
  -webkit-mask-image: url("/assets/brand/logo-mark-rainbow.svg");
  mask-image: url("/assets/brand/logo-mark-rainbow.svg");
  aspect-ratio: 785 / 555;
}
@media (prefers-reduced-motion: no-preference) {
  .rainbow.is-shimmer { animation: shimmer var(--t-shimmer) var(--ease-in-out) 2; }
  .rainbow.is-shimmer.is-paused { animation-play-state: paused; }
}
@keyframes shimmer { 0%, 100% { --rb-shift: 0; } 50% { --rb-shift: 36; } }
@media (forced-colors: active) { .rainbow { background: CanvasText; } }

/* ---------- 7. Nav ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h); background: var(--nav-bg); color: var(--text);
  transition: background-color var(--t-ui) var(--ease-std), color var(--t-ui) var(--ease-std), box-shadow var(--t-ui) var(--ease-std);
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  margin-right: auto; min-height: 44px; border-radius: var(--r-s);
  transition: opacity var(--t-ui) var(--ease-std), visibility 0s linear 0s;
}
.brand img { height: 30px; width: auto; }
.brand .logo-paper { display: none; }
.nav[data-theme="paper"] .brand .logo-night { display: none; }
.nav[data-theme="paper"] .brand .logo-paper { display: block; }
.brand span { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.brand .brand__sub {
  font-weight: 500; font-size: 12px; letter-spacing: 0.01em; color: var(--text-3);
  padding-left: 10px; border-left: 1px solid var(--line); line-height: 14px;
}
html.js .nav.brand-hidden .brand { opacity: 0; visibility: hidden; transition: opacity var(--t-ui) var(--ease-std), visibility 0s linear var(--t-ui); }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast) var(--ease-std);
}
.nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="true"], .nav__links a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav__menu {
  display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer;
  position: relative; border-radius: var(--r-s);
}
.nav__menu i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform var(--t-ui) var(--ease-out), top var(--t-ui) var(--ease-out); }
.nav__menu i:first-child { top: 18px; }
.nav__menu i:last-child { top: 25px; }
.nav__menu[aria-expanded="true"] i:first-child { top: 21.5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child { top: 21.5px; transform: rotate(-45deg); }

.sheet {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-sheet);
  background: var(--bg-raised); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.sheet.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s; }
.sheet__in { padding-top: 24px; padding-bottom: 48px; display: flex; flex-direction: column; min-height: 100%; }
.sheet__links { list-style: none; border-top: 1px solid var(--line); }
.sheet__links a {
  display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-headline); line-height: 1.1; letter-spacing: var(--tr-headline); font-weight: 600; text-decoration: none; color: var(--text);
}
.sheet__foot { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sheet__foot .mono { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
html.sheet-open { overflow: hidden; }
/* Without JS: no dead controls. The sheet button, tabs and scrubber need the module; the page itself does not. */
html:not(.js) .nav__menu, html:not(.js) .seg, html:not(.js) .film__ui { display: none; }
@media (max-width: 1279px) { html:not(.js) .nav__cta { display: inline-flex; } }

@media (max-width: 1279px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
}
@media (max-width: 819px) {
  .brand img { height: 28px; }
  .nav__in { gap: 16px; }
}

/* ---------- 8. Section rhythm ----------------------------------------------- */
.head { align-items: end; row-gap: 20px; }
.head > h2 { grid-column: 1 / span 7; }
.head > .head__lead { grid-column: 9 / -1; max-width: 34ch; }
.head__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--text-2); }
@media (max-width: 819px) {
  .head > h2, .head > .head__lead { grid-column: 1 / -1; }
}

/* Reveal: section heads and figures only, and only with JS */
@media (prefers-reduced-motion: no-preference) {
  html.rv-on .rv { opacity: 0; transform: translateY(16px); transition: opacity var(--t-fade) var(--ease-out), transform var(--t-fade) var(--ease-out); }
  html.rv-on .rv.is-in { opacity: 1; transform: none; }
}

/* ---------- 9. Hero (S1) --------------------------------------------------- */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: calc(min(100svh, 1440px) - var(--nav-h));  /* fx1: fills the first screen up to 2560 x 1440 */
  display: grid;
}
.hero__in {
  position: relative; z-index: 2; pointer-events: none;
  align-content: center; padding-block: clamp(32px, 3.6vw, 52px) clamp(48px, 5vw, 72px);
}
.hero__copy { grid-column: 1 / span 7; pointer-events: auto; }
.hero__lockup { width: clamp(96px, 7.6vw, 136px); margin-bottom: clamp(22px, 2.2vw, 34px); }
.kicker { font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); margin-bottom: clamp(14px, 1.6vw, 22px); }
.hero h1 {
  /* tied to the viewport height as well, so the four-line signature, the CTAs and the caption row fit the
     first screen of a laptop window; never below the 2.75rem floor, so text zoom still enlarges it */
  font-size: min(var(--fs-hero), max(10svh, 2.75rem)); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); font-weight: 600;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.hero h1 > span { display: block; text-wrap: balance; }
.hero h1 .dim { color: var(--text-3); }
.hero__lead { font-size: clamp(1.1875rem, 1.11rem + 0.32vw, 1.3125rem); line-height: 1.45; letter-spacing: var(--tr-lead); color: var(--text-2); max-width: 30em; margin-bottom: clamp(24px, 2.6vw, 34px); }
.hero__lead strong { color: var(--text); font-weight: 500; }
.ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 30px; }

.hero__stage {
  --cx: min(77.5vw, calc(50vw + 406px));
  position: absolute; z-index: 1; top: 0; bottom: 0;
  height: 100%; aspect-ratio: 16 / 10; left: var(--cx); transform: translateX(-50%);
}
/* fx1: no mask. The viewer's backdrop (main.js, viewer.js) and the posters end exactly on #07080C well inside the
   stage, so the stage edge is invisible by itself; a radial mask over a flat night only added a 1-2 level darker
   rounding ring (the "dark-blue ellipse" behind the headline). */
.stage__poster, .stage__canvas { position: absolute; inset: 0; }
.stage__poster picture { width: 100%; height: 100%; }
.stage__poster img { width: 100%; height: 100%; object-fit: cover; }
.stage__canvas { opacity: 0; transition: opacity var(--t-fade) var(--ease-std); }
.stage__canvas.is-live { opacity: 1; }
.stage__canvas canvas { width: 100% !important; height: 100% !important; }
/* keyboard focus on a 3-D view: an unmasked ring, plus the key help as visible text */
.stage__ring {
  position: absolute; z-index: 2; inset: 4%; border-radius: var(--r-l); pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent); opacity: 0; transition: opacity var(--t-fast) var(--ease-std);
}
.hero__stage .stage__ring { inset: 12% max(28%, calc(50% - (100vw - var(--cx) - 24px))); border-radius: 50%; }
.is-kbd .stage__ring, .hero__stage:has(canvas:focus-visible) .stage__ring, .sim3d__stage:has(canvas:focus-visible) .stage__ring { opacity: 1; }
.is-kbd .hint { opacity: 1; }
.hero__stage .hint { top: 6%; }  /* above the elliptical ring, never across it */
/* Hero copy: lines arrive once on load (12 px rise, 70 ms stagger). Pure CSS, so it never hides text. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: heroIn var(--t-fade) var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 70ms; }
  .hero__copy > :nth-child(3) { animation-delay: 140ms; }
  .hero__copy > :nth-child(4) { animation-delay: 210ms; }
  .hero__copy > :nth-child(5) { animation-delay: 280ms; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__hud {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(20px, 2.4vw, 32px);
  pointer-events: none;
}
.hero__hud .hud { grid-column: 7 / -1; pointer-events: auto; }
@media (min-width: 820px) and (max-width: 1439px) { .hero__hud .hud { grid-column: 6 / -1; } }
.hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.hud__cap { display: block; min-width: 0; flex: 1 1 280px; }
.hud__cap > .tag { margin-right: 0.6ch; }
.hud__cap .nw { white-space: nowrap; }
.hud__cap .mono { color: var(--text-3); }
.hud__ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.hud__msg { flex: 1 1 100%; order: 3; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); max-width: 52ch; }
.hint {
  position: absolute; z-index: 3; left: 50%; top: 18%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-2); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fade) var(--ease-std); pointer-events: none;
}
.hint.is-on { opacity: 1; }
.sim3d__stage .hint { top: calc(4% + 14px); }  /* inside the focus ring, above the model (key and pointer help) */
/* short laptop windows: a smaller lockup and tighter padding, so the hero ends on its caption row */
@media (min-width: 820px) and (max-height: 940px) {
  .hero__in { padding-block: clamp(16px, 1.8vw, 26px) clamp(32px, 3.4vw, 48px); }
  .hero__lockup { width: clamp(77px, 6.1vw, 109px); margin-bottom: clamp(18px, 1.8vw, 27px); }
}

/* fx2: portrait screens from 820 px: the stage is sized by the width, not the tall hero, and centred on the copy's
   right, so the hot spot stays in the right-hand columns instead of running behind the headline */
@media (min-width: 820px) and (max-aspect-ratio: 4/5) {
  .hero__stage { --cx: 78vw; top: 50%; bottom: auto; height: min(100%, 68vw); transform: translate(-50%, -50%); }
}
@media (max-width: 819px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero__stage {
    position: relative; order: -1; left: auto; transform: none; top: auto; bottom: auto;
    width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 70svh;
  }
  .hero__stage .stage__ring { inset: 10% 8%; }
  /* caption and the tap-to-load pill sit on the dark foot of the 4:5 stage */
  .hero__hud { position: absolute; top: min(125vw, 70svh); bottom: auto; transform: translateY(-100%); padding-bottom: 12px; }
  .hero__hud .hud { grid-column: 1 / -1; }
  .hero__in { order: 1; padding-block: 28px 64px; }
  .hero__copy { grid-column: 1 / -1; }
  .hero__lockup { width: 72px; margin-bottom: 22px; }
}

/* ---------- 10. Vision (S2, paper) ---------------------------------------- */
.vision { padding: var(--section-l) 0 var(--section-m); }
.vision__body { margin-top: clamp(56px, 7vw, 112px); row-gap: 48px; }
.vision__text { grid-column: 2 / span 6; }
.vision__text p { font-size: var(--fs-body); }
.vision__text p:first-child::first-line { color: var(--text); }
.aside { grid-column: 9 / -1; border-top: 1px solid var(--line); padding-top: 24px; align-self: start; }
.aside h3 { margin-bottom: 14px; }
.aside p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.aside p + p { margin-top: 14px; }
.aside strong { color: var(--text); font-weight: 500; }
@media (max-width: 819px) {
  .vision__text, .aside { grid-column: 1 / -1; }
}

/* ---------- 11. How IIF works (S3, night) ---------------------------------- */
.tech { padding-top: var(--section-m); }
.tech .head { align-items: start; }
.tech__def { margin-top: 18px; list-style: none; counter-reset: def; border-top: 1px solid var(--line); }
.tech__def li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); line-height: 1.45; }
.tech__def li::before { counter-increment: def; content: counter(def); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); padding-top: 3px; min-width: 1ch; }

/* Chapter: static stacked rows by default (no JS, reduced motion, small or tall screens) */
.chapter { position: relative; margin-top: clamp(64px, 8vw, 128px); }
.chapter__rail { display: none; }
.chapter__steps { list-style: none; }
.step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding-block: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step__media { grid-column: 1 / span 6; position: relative; }
.step__copy { grid-column: 8 / -1; }
.step:nth-child(even) .step__media { grid-column: 7 / -1; grid-row: 1; }
.step:nth-child(even) .step__copy { grid-column: 1 / span 5; grid-row: 1; }
.step__count { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); margin-bottom: 20px; letter-spacing: 0.02em; }
.step__count b { color: var(--text); font-weight: 500; }
.step__copy h3 { margin-bottom: 16px; }
.step__copy p { color: var(--text-2); max-width: 46ch; }
.step__key { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.step__key::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }

/* Hardware slot: typographic fallback until the integration pass wires the concept art.
   The box reserves the art's 16:9 frame so the layout does not move when it lands. */
.hw-slot { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.hw-slot__n { font-family: var(--font-sans); font-weight: 200; font-size: clamp(7rem, 3rem + 13vw, 15rem); line-height: 0.78; letter-spacing: -0.07em; color: var(--text); font-variant-numeric: tabular-nums; margin-left: -0.07em; }
.chapter.is-pinned .hw-slot { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.hw-slot__label { color: var(--text-3); font-size: 13px; }
.step:has(.hw-slot[data-hw-state="pending"]) .step__count { display: none; }
.hw-slot[data-hw-state="ready"] { border-bottom: 0; padding-bottom: 0; display: block; }

/* Pinned (JS adds .is-pinned when the media queries allow it) */
.chapter.is-pinned { height: calc(var(--steps, 3) * 70svh + 100svh); margin-top: clamp(24px, 3vw, 48px); }
/* the stage never grows past 920 px; on taller screens it is centred in the space under the nav */
.chapter.is-pinned .chapter__sticky { position: sticky; top: calc(var(--nav-h) + max(0px, (100svh - min(100svh, 920px)) / 2)); height: calc(min(100svh, 920px) - var(--nav-h)); }
.chapter.is-pinned .chapter__sticky > .wrap { position: relative; height: 100%; }
.chapter.is-pinned .chapter__steps { position: relative; height: 100%; }
.chapter.is-pinned .step {
  position: absolute; inset: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fade) var(--ease-in-out);
}
.chapter.is-pinned .step.is-active { opacity: 1; pointer-events: auto; }
.chapter.is-pinned .step .step__media, .chapter.is-pinned .step:nth-child(even) .step__media { grid-column: 1 / span 7; grid-row: 1; }
.chapter.is-pinned .step .step__copy, .chapter.is-pinned .step:nth-child(even) .step__copy { grid-column: 9 / -1; grid-row: 1; align-self: center; min-height: 23rem; padding-top: 72px; }
.chapter.is-pinned .step__copy > * { transition: transform var(--t-ui) var(--ease-out); }
.chapter.is-pinned .step:not(.is-active) .step__copy > * { transform: translateY(12px); }
.chapter.is-pinned .step__count { display: none; }
.chapter.is-pinned .chapter__rail {
  display: block; position: absolute; z-index: 2;
  left: calc(var(--gutter) + (100% - 2 * var(--gutter) + var(--col-gap)) * 8 / 12);
  right: var(--gutter); top: calc(50% - 11.5rem);
}
.rail__count { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); margin-bottom: 14px; letter-spacing: 0.02em; }
.rail__count b { color: var(--text); font-weight: 500; }
.rail__segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rail__segs span { height: 2px; background: var(--line); overflow: hidden; }
.rail__segs i { display: block; height: 100%; background: var(--text); transform-origin: left; transform: scaleX(var(--f, 0)); }

@media (max-width: 819px) {
  .step, .step:nth-child(even) { row-gap: 28px; }
  .step .step__media, .step:nth-child(even) .step__media,
  .step .step__copy, .step:nth-child(even) .step__copy { grid-column: 1 / -1; grid-row: auto; }
}

/* Proof row: shown to work elsewhere */
.proof { margin-top: var(--section-s); row-gap: 32px; }
.proof__title { grid-column: 1 / span 3; }
.proof__title p { margin-top: 14px; color: var(--text-2); font-size: var(--fs-small); max-width: 26ch; }
.proof__cells { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); list-style: none; }
.proof__cells li { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.proof__cells .mono { display: block; margin-bottom: 26px; }
.proof__cells h4 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; }
.proof__cells p { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
@media (max-width: 1079px) { .proof__title { grid-column: 1 / -1; } .proof__cells { grid-column: 1 / -1; } }
@media (max-width: 819px) { .proof__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 459px) { .proof__cells { grid-template-columns: 1fr; } }

/* What's different + readiness */
.diff { margin-top: var(--section-m); row-gap: 56px; }
.diff__list { grid-column: 1 / span 7; list-style: none; }
.diff__head { margin-bottom: 8px; }
.diff__item { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.diff__item:first-of-type { border-top: 1px solid var(--line); margin-top: 28px; }
.diff__item .mono { padding-top: 7px; font-size: 13px; }
.diff__item h4 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); margin-bottom: 10px; }
.diff__item p { color: var(--text-2); max-width: 52ch; }
.ready { grid-column: 9 / -1; align-self: start; }
.ready .ready__trl { font-size: clamp(4.5rem, 2.2rem + 6.4vw, 8.5rem); color: var(--text); white-space: nowrap; line-height: 0.82; letter-spacing: -0.06em; font-weight: 600; font-variant-numeric: tabular-nums; margin: 18px 0 26px; }
.ready__trl sup.fn { font-size: 0.14em; vertical-align: top; letter-spacing: 0; margin-left: 6px; position: relative; top: 0.4em; }
.ready p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.ready p + p { margin-top: 14px; }
.ready__tools { padding-top: 16px; margin-top: 22px; border-top: 1px solid var(--line); }
.hw-slot--reserve:empty { display: none; }
@media (max-width: 1079px) { .diff__list { grid-column: 1 / span 7; } .ready { grid-column: 9 / -1; } }
@media (max-width: 819px) { .diff__list, .ready { grid-column: 1 / -1; } }

.tech__end { height: var(--section-s); }
/* fx2: proof, What's different and readiness on paper, so the page keeps its paper / night cadence through S3 */
.tech__paper { margin-top: var(--section-s); padding: var(--section-m) 0; background: var(--bg); color: var(--text); }
.tech__paper .proof { margin-top: 0; }

/* ---------- 12. Artwork plates (S4, S9) ------------------------------------ */
.plate { position: relative; display: flex; flex-direction: column; overflow: clip; }
.plate__copy { position: relative; z-index: 1; padding-top: var(--section-m); }
.plate__copy h2 { grid-column: 1 / span 7; }
.plate__copy p { grid-column: 1 / span 5; margin-top: 18px; color: var(--text-2); font-size: var(--fs-body); max-width: 46ch; }
.plate__art { margin-top: calc(-0.40 * 100vw * 1100 / 2560); position: relative; z-index: 0; }
.plate__art img { width: 100%; height: auto; }
/* fx1 L6: the S4 plate's lower edge eases into the night over its last 18 % (it dropped to night in about 40 px) */
.plate[aria-labelledby="plate-h"] .plate__art img {
  -webkit-mask-image: linear-gradient(180deg, #000 82%, rgb(0 0 0 / 0.74) 87%, rgb(0 0 0 / 0.4) 92%, rgb(0 0 0 / 0.13) 96.5%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, rgb(0 0 0 / 0.74) 87%, rgb(0 0 0 / 0.4) 92%, rgb(0 0 0 / 0.13) 96.5%, transparent);
}
@media (max-width: 819px) {
  .plate__copy h2, .plate__copy p { grid-column: 1 / -1; }
  .plate__art { margin-top: calc(-0.42 * 100vw * 1800 / 1440); }
}

/* ---------- 13. Simulation (S5, night) -------------------------------------- */
.sim { padding: var(--section-m) 0 0; }
.specs { --specs-gap: clamp(36px, 4vw, 56px); margin-top: clamp(56px, 7vw, 104px); list-style: none; row-gap: var(--specs-gap); }
.spec { grid-column: span 4; padding-top: 26px; border-top: 1px solid var(--line); }
.spec__n { display: block; font-size: var(--fs-numeral); line-height: 1; letter-spacing: -0.045em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec__n small { font-size: 0.36em; letter-spacing: -0.01em; font-weight: 500; margin-left: 0.32em; color: var(--text-2); }
.spec__l { display: block; margin-top: 12px; font-size: var(--fs-caption); color: var(--text-2); line-height: var(--lh-caption); max-width: 34ch; }
.specs__note { grid-column: 1 / -1; margin-top: calc(32px - var(--specs-gap)); font-size: var(--fs-small); color: var(--text-3); }
/* 5 Nov numbers (DESIGN 15 "Simulation numbers"): the second row holds one value per stagnation, always first then
   second. Its first tile, 2.5 | 5.5 ns, sets that order for the three after it, so no label has to repeat the times.
   The two values are split by a hairline (a border, so it survives forced colours), never a comma (it reads as the
   thousands comma in "1,024" above), a middle dot or a times sign (both read as a product). Screen readers hear
   "and" between the two. Measured in Geist: the widest pair (the density tile) needs 351 px at the full numeral size and
   281 px at 0.8 of it, so the row runs four across (span 3, 300-310 px) only from 1400 px, at 0.8; from 820 to
   1399 px it is two by two at full size; below 520 px each pair takes the full row. */
.spec--pair { grid-column: span 6; }
.spec__sep { display: inline-block; width: 0; height: 0.72em; border-left: 1px solid var(--line-strong); margin: 0 0.24em 0 0.26em; vertical-align: 0; }
.spec__name { display: block; color: var(--text); font-weight: 500; }
@media (min-width: 1400px) {
  .spec, .spec--pair { grid-column: span 3; }
  .spec:not(.spec--pair) + .spec--pair { grid-column: 1 / span 3; }  /* row 2 starts under row 1 */
  .spec .spec__n { font-size: calc(var(--fs-numeral) * 0.8); }
  /* fx2: the note fills row 1's fourth column (it was empty), hairline on top like every tile, its line level
     with the tile labels, so the sheet reads as a full four by two */
  .specs__note { grid-column: 10 / span 3; grid-row: 1; align-self: stretch; margin-top: 0; border-top: 1px solid var(--line);
    padding-top: calc(26px + var(--fs-numeral) * 0.8 + 12px); font-size: var(--fs-caption); line-height: var(--lh-caption); }
}
@media (max-width: 819px) { .spec { grid-column: span 6; } .spec:first-child { grid-column: 1 / -1; } }
@media (max-width: 519px) { .spec--pair { grid-column: 1 / -1; } }

.chap { margin-top: clamp(96px, 12vw, 176px); }
.chap__head { row-gap: 16px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.chap__head h3 { grid-column: 1 / span 6; }
.chap__head p { grid-column: 8 / span 5; color: var(--text-2); max-width: 46ch; }
@media (max-width: 819px) { .chap__head h3, .chap__head p { grid-column: 1 / -1; } }

/* 3-D stage in S5 */
.sim3d__stage {
  position: relative; margin-inline: auto;
  width: min(100%, calc(76svh * 1.6)); aspect-ratio: 16 / 10;
}
/* fx1: no mask (see the hero stage) */
.sim3d__stage .stage__poster { transition: opacity var(--t-fade) var(--ease-in-out); }
.sim3d__stage .stage__poster.is-off { opacity: 0; pointer-events: none; }
.stage__poster--contain img { object-fit: contain; }
.stage__poster--pair { display: grid; grid-template-columns: 1fr 1fr; }
.stage__poster--pair picture { position: relative; overflow: hidden; }
.stage__poster--pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sim3d__ctl { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.sim3d__ctl .hud__msg { order: 3; }
.sim3d .cap { margin-top: 20px; }
@media (min-width: 1024px) { .sim3d .cap { max-width: none; } .sim3d .cap .cap__line { white-space: nowrap; } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; list-style: none; font-size: var(--fs-caption); color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; height: 6px; border-radius: 3px; display: block; }
@media (max-width: 819px) {
  .sim3d__stage { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; max-height: 72svh; }
}

/* Segmented control */
.seg { display: inline-flex; align-items: stretch; height: 50px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg [role="tab"] {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font: 500 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std);
}
.seg [role="tab"] .mono { color: inherit; font-size: 12px; }
.seg [role="tab"]:hover { color: var(--text); }
.seg [role="tab"][aria-selected="true"] { background: var(--bg-pressed); color: var(--text); }
.seg [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px; background: var(--accent); }
.seg [role="tab"]:focus-visible { outline-offset: -2px; }
@media (max-width: 559px) {
  .seg { width: 100%; }
  .seg [role="tab"] { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .seg [role="tab"] .mono { font-size: 13px; }
  .seg__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Feature: heat and burn */
.feature { align-items: center; row-gap: 40px; }
.feature__fig { grid-column: 1 / span 6; }
.feature__fig img { width: 100%; max-height: 820px; object-fit: contain; }
.feature__txt { grid-column: 8 / span 4; }
.feature__txt h3 { margin-bottom: 20px; }
.feature__txt > p { color: var(--text-2); }
.keys { list-style: none; display: grid; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.keys li { display: flex; align-items: center; gap: 14px; font-size: var(--fs-caption); color: var(--text-2); }
.keys i { width: 44px; height: 6px; border-radius: 3px; flex: none; }
.key-inferno { background: linear-gradient(90deg, #000004, #1b0c41, #4a0c6b, #781c6d, #a52c60, #cf4446, #ed6925, #fb9b06, #f7d13d, #fcffa4); box-shadow: inset 0 0 0 1px var(--line); }
.key-magma { background: linear-gradient(90deg, #000004, #180f3d, #440f76, #721f81, #9e2f7f, #cd4071, #f1605d, #fd9668, #feca8d, #fcfdbf); box-shadow: inset 0 0 0 1px var(--line); }
.key-fuel { background: #5F9F63; }
@media (max-width: 819px) { .feature__fig, .feature__txt { grid-column: 1 / -1; } }

/* Diptych */
.dip { row-gap: 56px; align-items: end; }
.dip__a { grid-column: 1 / span 5; }
.dip__b { grid-column: 7 / span 6; }
.dip img { width: 100%; }
@media (max-width: 819px) { .dip__a, .dip__b { grid-column: 1 / -1; } }

/* Filmstrip + scrubber */
.film__track {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-inline: var(--edge); scroll-padding-inline: var(--edge);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  border-radius: 2px;
}
.film__track::-webkit-scrollbar { display: none; }
.film__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.film__strip { display: flex; width: max-content; gap: 0; --fh: clamp(220px, 26vw, 374px); }
.film__seq { flex: none; }
.film__seq img { height: var(--fh); width: auto; max-width: none; }
.film__seq--a img { aspect-ratio: 5050 / 748; }
.film__seq--b img { aspect-ratio: 4128 / 755; }
.film__labels { display: flex; list-style: none; margin-top: 14px; }
.film__labels li { flex: 1 1 0; scroll-snap-align: center; text-align: center; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); line-height: 1.4; transition: color var(--t-fast) var(--ease-std); }
.film__labels li b { display: block; font-weight: 400; color: var(--text); }
.film__labels li.is-current { color: var(--text); }
.film__seq--b { margin-right: var(--edge); }
.film__ui { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.scrub { display: flex; align-items: center; gap: 16px; flex: 1 1 360px; min-width: 0; }
.scrub label { white-space: nowrap; }
.scrub output { font-family: var(--font-mono); font-size: 13px; color: var(--text); min-width: 15ch; white-space: nowrap; }
.scrub input[type="range"] { flex: 1; min-width: 120px; }
.film__btns { display: flex; gap: 8px; }
@media (max-width: 559px) {
  .scrub { flex-wrap: wrap; row-gap: 0; flex-basis: 100%; }
  .scrub label { flex: 1 1 auto; }
  .scrub output { order: 2; min-width: 0; }
  .scrub input[type="range"] { order: 3; flex: 1 1 100%; }
  .film__ui { row-gap: 8px; }
}
.ghost--icon { width: 40px; padding: 0; }
.ghost--icon::before { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, 1px); }
.ghost--prev::before { transform: rotate(-135deg) translate(-1px, 1px); }

/* Native range, styled (thumb ring = accent, the scrubber's state indicator) */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--text) var(--fill, 0%), var(--line-strong) var(--fill, 0%)); border-radius: 1px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 1px; }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--text); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--accent); }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-s); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

/* Ribbon */
.ribbon { margin-top: clamp(96px, 12vw, 176px); }
.ribbon__scroll { overflow: hidden; }
.ribbon__scroll img { width: 100%; }
.ribbon__hint { display: none; }
.ribbon > .cap { max-width: var(--container); margin-top: 18px; }
.ribbon > .cap .cap__line { max-width: 72ch; }
@media (max-width: 819px) {
  .ribbon__scroll { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ribbon__scroll::-webkit-scrollbar { display: none; }
  .ribbon__scroll img { width: 260%; max-width: none; }
  .ribbon__snaps { position: relative; width: 260%; height: 0; display: flex; justify-content: space-between; }
  .ribbon__snaps i { width: 1px; height: 1px; scroll-snap-align: center; }
  .ribbon__snaps i:first-child { scroll-snap-align: start; }
  .ribbon__snaps i:last-child { scroll-snap-align: end; }
  .ribbon__hint { display: block; margin-top: 10px; }
}

/* Anatomy pair */
.anat { row-gap: 56px; align-items: start; }
.anat__a { grid-column: 1 / span 7; }
.anat__b { grid-column: 9 / -1; margin-top: clamp(0px, 10vw, 160px); }
/* fx1 M4: Fig. 8 and 9 were re-levelled so their ground is exactly #07080C (it was #050507, a black disc under the
   feather); their content stops well inside the frame, so they take no feather (a mask over a flat night only adds
   1-2 level rounding rings). */
.feather { -webkit-mask-image: none; mask-image: none; }
.anat img { width: 100%; }
@media (max-width: 819px) { .anat__a, .anat__b { grid-column: 1 / -1; margin-top: 0; } }

/* Honesty panel */
.honest { margin-top: var(--section-m); padding: clamp(40px, 5vw, 64px) 0 var(--section-m); border-top: 1px solid var(--line); row-gap: 24px; }
.honest h3 { grid-column: 1 / span 5; }
.honest p { grid-column: 7 / -1; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--text-2); max-width: 40ch; }
@media (max-width: 819px) { .honest h3, .honest p { grid-column: 1 / -1; } }

/* ---------- 14. Machine learning (S6, paper) -------------------------------- */
.ml { padding: var(--section-l) 0 var(--section-m); }
.ml__block { margin-top: clamp(80px, 10vw, 152px); row-gap: 32px; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }
.chart svg .t-sans { font-family: var(--font-sans); font-size: 13px; fill: var(--text-2); }
.chart svg .t-strong { fill: var(--text); }
.chart:focus-visible { outline-offset: 6px; border-radius: var(--r-s); }
.chart__tip {
  position: absolute; z-index: 3; pointer-events: none; left: 0; top: 0;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: var(--fs-caption); line-height: 1.4; color: var(--text); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast) var(--ease-std);
}
.chart__tip.is-on { opacity: 1; }
.chart__tip .mono { display: block; color: var(--text-3); }
.notes h3 { margin-bottom: 12px; }
.notes > p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.notes > p + p { margin-top: 12px; }
.notes .cap { margin-top: 20px; }
.notes .ghost { margin-top: 22px; }
.legend-k { list-style: none; display: grid; gap: 8px; margin-top: 18px; font-size: var(--fs-caption); color: var(--text-2); }
.legend-k li { display: flex; align-items: center; gap: 10px; }
.legend-k svg { width: 14px; height: 14px; flex: none; }
.legend-k .k-line { width: 14px; height: 1px; background: var(--line-strong); flex: none; }

.ml-a .chart { grid-column: 1 / span 8; }
.ml-a .notes { grid-column: 10 / -1; align-self: end; }
.ml-e .notes { grid-column: 1 / span 4; align-self: end; grid-row: 1; }
.ml-e .chart { grid-column: 5 / -1; grid-row: 1; }
@media (max-width: 1079px) {
  .ml-a .chart, .ml-e .chart { grid-column: 1 / -1; }
  .ml-a .notes, .ml-e .notes { grid-column: 1 / span 8; grid-row: auto; }
}
@media (max-width: 819px) { .ml-a .notes, .ml-e .notes { grid-column: 1 / -1; } }

.diagram { --ml-accent: var(--text); --ml-c1: var(--chart-1); --ml-c2: var(--chart-2); --ml-c3: var(--chart-3);
  --ml-c1-soft: color-mix(in srgb, var(--chart-1) 12%, transparent); --ml-c2-soft: color-mix(in srgb, var(--chart-2) 12%, transparent); --ml-c3-soft: color-mix(in srgb, var(--chart-3) 12%, transparent);
  --ml-ink: var(--text); --ml-ink-soft: color-mix(in srgb, var(--text) 55%, transparent); --ml-muted: var(--text-2);
  --ml-line: var(--line-strong); --ml-surface: var(--bg-raised); --ml-surface-hot: var(--bg-raised);
  --ml-bg: var(--bg); --ml-head: var(--font-sans); --ml-body: var(--font-sans); --ml-mono: var(--font-mono); --ml-faint: var(--text-3); }
.diagram svg { width: 100%; height: auto; }
.diagram .motto, .diagram .motto2 { display: none; }
.diagram--tall { display: none; }
@media (max-width: 719px) { .diagram--wide { display: none; } .diagram--tall { display: block; max-width: 440px; } }
.ml-loop { margin-top: clamp(80px, 10vw, 152px); }
.ml-loop .cap { margin-top: 8px; }
/* The committee diagram has no tall variant; below 600 px its labels would be illegible,
   and the same content is in the body copy and the numbered list above it. */
@media (max-width: 599px) { .ml-committee-fig { display: none; } }

.ml-d { align-items: start; }
.ml-d .body { grid-column: 1 / span 5; }
.ml-d .diagram-col { grid-column: 7 / -1; }
.ml-feat { grid-column: 7 / -1; list-style: none; counter-reset: feat; border-top: 1px solid var(--line-strong); }
.ml-feat li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.ml-feat li::before { counter-increment: feat; content: "0" counter(feat); grid-row: 1 / span 2; padding-top: 7px; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
.ml-feat h3 { grid-column: 2; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); margin-bottom: 8px; }
.ml-feat p { grid-column: 2; color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; max-width: 40ch; }
@media (max-width: 819px) { .ml-d .body, .ml-feat { grid-column: 1 / -1; } .ml-feat { margin-top: 24px; } }

.ml-f { align-items: start; row-gap: 64px; }
.ml-f .hist { grid-column: 1 / span 5; }
.ml-f .ledger { grid-column: 7 / -1; }
.ml-f h3 { margin-bottom: 10px; }
.ml-f .sub { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; max-width: 48ch; margin-bottom: 28px; }
@media (max-width: 1079px) { .ml-f .hist, .ml-f .ledger { grid-column: 1 / -1; } .ml-f .hist { max-width: 640px; } }

/* Chart marks. Colour only in marks; text uses text tokens. */
.chart svg .t-small { font-size: 12px; fill: var(--text-3); }
.chart svg .t-strong { fill: var(--text); font-weight: 500; }
.chart .c-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .c-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .c-band { fill: var(--chart-band); }
.chart .c-divide { stroke: var(--line-strong); stroke-width: 1; }
.chart .c-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart .c-dot { fill: var(--chart-dot); stroke: var(--chart-surface); stroke-width: 2; }
.chart .c-dot--best { fill: var(--chart-1); }
.chart .c-leader { stroke: var(--text-3); stroke-width: 1; }
.chart .c-cross { stroke: var(--line-strong); stroke-width: 1; }
.chart .c-ring { fill: none; stroke: var(--text); stroke-width: 1.5; }
.chart .c-hit { fill: transparent; cursor: crosshair; }
.chart .c-diag { stroke: var(--line-strong); stroke-width: 1; }
.chart .c-mark { stroke: var(--chart-surface); stroke-width: 1.5; }
.chart .c-errbar { stroke-width: 1; opacity: 0.4; }
.chart .c-mark.c-s1 { fill: var(--chart-1); } .chart .c-errbar.c-s1 { stroke: var(--chart-1); }
.chart .c-mark.c-s2 { fill: var(--chart-2); } .chart .c-errbar.c-s2 { stroke: var(--chart-2); }
.chart .c-mark.c-s3 { fill: var(--chart-3); } .chart .c-errbar.c-s3 { stroke: var(--chart-3); }
.chart .c-bar { fill: var(--chart-2); }
.chart .c-marker { stroke: var(--text-3); stroke-width: 1; }
.chart__tip sup { font-size: 0.7em; }
/* draw-on: the line, then the dots (once, at 40% in view; instant under reduced motion) */
.chart.is-armed .c-line { stroke-dashoffset: 1; }
.chart.is-armed .c-dots, .chart.is-armed .c-err, .chart.is-armed .c-ann { opacity: 0; }
.chart.is-armed .c-bars { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; }
.chart.is-armed.is-drawn .c-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--ease-out); }
.chart.is-armed.is-drawn .c-dots, .chart.is-armed.is-drawn .c-err, .chart.is-armed.is-drawn .c-ann { opacity: 1; transition: opacity var(--t-fade) var(--ease-out) 600ms; }
.chart.is-armed.is-drawn .c-bars { transform: none; transition: transform 900ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .chart.is-armed .c-line { stroke-dashoffset: 0; } .chart.is-armed .c-dots, .chart.is-armed .c-err, .chart.is-armed .c-ann { opacity: 1; } .chart.is-armed .c-bars { transform: none; } }

/* Ledger table */
.tbl { width: 100%; font-size: var(--fs-caption); line-height: 1.4; }
.tbl th { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; color: var(--text-3); text-align: left; padding: 0 12px 12px 0; vertical-align: bottom; border-bottom: 1px solid var(--line-strong); }
.tbl td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.tbl td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.r { text-align: right; }
.tbl tfoot td { border-bottom: 0; color: var(--text); font-weight: 500; padding-top: 14px; }
.tbl-wrap .cap { margin-top: 18px; }
@media (min-width: 820px) { .tbl--ledger th:last-child, .tbl--ledger td[data-label="Verdict"] { padding-left: 40px; } }
@media (max-width: 819px) {
  .tbl--ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--ledger, .tbl--ledger tbody, .tbl--ledger tr, .tbl--ledger td, .tbl--ledger tfoot { display: block; }
  .tbl--ledger tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .tbl--ledger td { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; border: 0; padding: 3px 0; text-align: left; }
  .tbl--ledger td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); padding-top: 2px; }
  .tbl--ledger td:first-child { font-size: 16px; }
  .tbl--ledger td:first-child::before { content: none; }
  .tbl--ledger .r { text-align: left; }
  .tbl--ledger tfoot td { grid-template-columns: 1fr; }
}
.datatable { margin-top: 24px; max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
.datatable .tbl td, .datatable .tbl th { padding: 6px 16px 6px 0; }
.datatable .tbl td:first-child { font-weight: 400; color: var(--text-2); }

/* Dark square stage on paper */
.ml-g { align-items: center; row-gap: 40px; }
.ml-g .body { grid-column: 1 / span 6; }
.ml-g figure { grid-column: 8 / -1; }
.dark-stage { background: var(--night-0); border-radius: var(--r-m); overflow: hidden; }
.dark-stage img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 819px) { .ml-g .body, .ml-g figure { grid-column: 1 / -1; } }

/* ---------- 15. Roadmap (S7, night) ----------------------------------------- */
.road { padding: var(--section-m) 0; }
.track { margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); list-style: none; position: relative; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line); }
.phase { position: relative; padding-top: 40px; padding-right: 8px; }
.phase__dot { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.phase--now .phase__dot { background: var(--text); box-shadow: none; }
.phase__k { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
.phase__k .mono { font-size: 13px; }
.phase__k .now { color: var(--text); }
.phase h3 { margin-bottom: 14px; }
.phase p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.phase__t { display: block; margin-top: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.phase__m { margin-top: 8px; font-size: var(--fs-caption) !important; color: var(--text-2); padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 1079px) {
  .track { grid-template-columns: 1fr; gap: 0; padding-left: 36px; }
  .track::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .phase { padding: 0 0 48px 0; max-width: 560px; }
  .phase__dot { left: -36px; top: 7px; }
}

/* ---------- 16. Founder (S8, paper) ----------------------------------------- */
.founder { padding: var(--section-m) 0 var(--section-l); }
.founder__grid { align-items: end; row-gap: 40px; }
.founder__photo { grid-column: 1 / span 5; }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m); background: var(--paper-2); }
.founder__txt { grid-column: 7 / -1; padding-bottom: 8px; }
.founder__txt h2 { margin-bottom: clamp(40px, 5vw, 72px); }
.founder__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.founder__name .mono { font-size: 13px; }
.founder__txt .t-lead { max-width: 36ch; }
.founder__txt .chev { margin-top: 26px; }
@media (max-width: 819px) { .founder__photo, .founder__txt { grid-column: 1 / -1; } .founder__photo { max-width: 520px; } }

/* ---------- 17. Contact plate (S9) + footer base ----------------------------- */
.contact .plate__copy { padding-top: var(--section-l); }
.contact .plate__copy h2 { grid-column: 1 / span 6; }
.contact .plate__copy p { grid-column: 1 / span 5; }
.contact__act { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.tbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--font-sans); color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong); text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease-std), text-decoration-color var(--t-fast) var(--ease-std);
}
.tbtn:hover, .tbtn:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.contact__mark { grid-column: 9 / -1; grid-row: 1 / span 3; justify-self: end; align-self: start; width: min(100%, 300px); }
.contact__city { grid-column: 1 / -1; margin-top: 28px; }
@media (max-width: 819px) {
  .contact .plate__copy h2, .contact .plate__copy p, .contact__act { grid-column: 1 / -1; }
  .contact__mark { grid-column: 1 / -1; grid-row: auto; justify-self: start; width: 160px; margin-top: 40px; }
}

.foot { background: var(--bg-raised); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-caption); line-height: 1.55; }
.foot__in { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 40px; }
.fns { list-style: none; counter-reset: fn; display: grid; gap: 10px; max-width: 92ch; }
.fns li { display: grid; grid-template-columns: 2.2ch 1fr; gap: 10px; color: var(--text-3); }
.fns li::before { counter-increment: fn; content: counter(fn); font-variant-numeric: tabular-nums; color: var(--text-3); }
.fns li:target { color: var(--text); }
.fns a.back { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; color: var(--text-2); text-decoration: none; margin-left: 2px; vertical-align: middle; }
.fns a.back:hover, .fns a.back:focus-visible { color: var(--accent); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-2); text-decoration: none; }
.foot__nav a:hover { color: var(--text); }
.foot__legal { margin-top: 20px; display: grid; gap: 4px; }
.foot__nav--first { margin-top: 0; padding-top: 0; border-top: 0; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 24px; }
.foot__base a { color: var(--text-2); }
.foot .chev { color: var(--text-2); font-size: var(--fs-caption); }
.foot .chev--up::after { transform: translateY(2px) rotate(-45deg); }
.foot .chev--up:hover::after { transform: translateY(-1px) rotate(-45deg); }

/* ---------- 18. 404 --------------------------------------------------------- */
.nf { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding: clamp(48px, 7vw, 112px) 0; }
.nf__grid { align-items: center; row-gap: 48px; }
.nf__copy { grid-column: 1 / span 6; }
.nf__mark { width: 96px; margin-bottom: 40px; }
.nf__code { display: block; font-size: 13px; margin-bottom: 18px; }
.nf h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); margin-bottom: 24px; }
.nf p { color: var(--text-2); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 34ch; margin-bottom: 36px; }
.nf__fig { grid-column: 8 / -1; }
.nf__fig .feather { aspect-ratio: 16 / 10; }
.nf__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 819px) { .nf__copy, .nf__fig { grid-column: 1 / -1; } }

/* ---------- 19. Scroll-linked stage scale (progressive) ---------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 820px) {
    .sim3d__stage { animation: stageIn linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes stageIn { from { transform: scale(0.94); } to { transform: scale(1); } }
  }
}

/* ---------- 20. Print ------------------------------------------------------- */
@media print {
  .nav, .sheet, .hud__ctl, .film__ui, .stage__canvas { display: none !important; }
  section, body { background: #fff !important; color: #000 !important; }
}

/* ---------- 21. Hardware renders (concept art: Rattler, projectiles, Helios) --
   The opaque renders were flattened on a studio radial a shade lighter than the night
   ground. On the page they pass through #hw-flat (an inline SVG levels table): the
   backdrop maps exactly onto #07080C while the lit machine keeps its tones, so the
   machine sits on the night itself and no lit box shows. A thin linear feather softens
   any subject that meets a frame edge. Alpha renders need neither. Sequences draw to a
   canvas over their poster; the poster is the no-JS, reduced-motion and Save-Data view. */
.cap--hw .cap__line { display: block; line-height: 24px; }
.cap--hw .cap__sep { color: var(--text-3); }
.cap--hw .cap__line > .tag::after { content: none; }  /* hardware captions carry their own separator */
.cap--hw .cap__line > .tag:not(:last-child) { margin-right: 0; }
.hw-fig { position: relative; }
.hw-fig .cap { margin-top: 14px; }
.hw-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hw-frame > picture, .hw-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-frame img { width: 100%; height: 100%; object-fit: cover; }
.hw-flat img, .hw-frame--flat img { filter: url(#hw-flat); }
/* fx1 L2: the locked pair and the roadmap elevation were levelled offline against the rig's radial (as the lens set):
   they meet the night exactly, so no levels filter and no edge ramp (that only added 1-level rounding bands) */
.hw-frame.hw-frame--dip-b, .hw-frame.hw-frame--profile { -webkit-mask-image: none; mask-image: none; }  /* beats the ramp block below */
.hw-frame--dip-b img, .hw-frame--profile img { filter: none; }
/* Sequence canvases carry their own levels (drawn with canvas fills in main.js, never an SVG filter on a
   repainting canvas); each poster gets the SVG filter that does the same sums, so the hand-over is exact. */
.hw-scrub--rattler .seq__poster img { filter: url(#hw-sub-lo); }   /* exploded view: flat #0C0C0C ground */
/* The projectile approach (frames and poster) was levelled offline against the rig's exact studio radial
   (fx1, as the lens set), so its backdrop is the night itself: no levels pass and no mask. */
.hw-frame--flat, .hw-scrub__frame {
  --fx: 3%; --fy: 4%;
  --ramp-x: transparent, rgb(0 0 0 / 0.16) calc(var(--fx) * 0.3), rgb(0 0 0 / 0.5) calc(var(--fx) * 0.55), rgb(0 0 0 / 0.84) calc(var(--fx) * 0.8), #000 var(--fx),
            #000 calc(100% - var(--fx)), rgb(0 0 0 / 0.84) calc(100% - var(--fx) * 0.8), rgb(0 0 0 / 0.5) calc(100% - var(--fx) * 0.55), rgb(0 0 0 / 0.16) calc(100% - var(--fx) * 0.3), transparent;
  --ramp-y: transparent, rgb(0 0 0 / 0.16) calc(var(--fy) * 0.3), rgb(0 0 0 / 0.5) calc(var(--fy) * 0.55), rgb(0 0 0 / 0.84) calc(var(--fy) * 0.8), #000 var(--fy),
            #000 calc(100% - var(--fy)), rgb(0 0 0 / 0.84) calc(100% - var(--fy) * 0.8), rgb(0 0 0 / 0.5) calc(100% - var(--fy) * 0.55), rgb(0 0 0 / 0.16) calc(100% - var(--fy) * 0.3), transparent;
  -webkit-mask-image: linear-gradient(90deg, var(--ramp-x)), linear-gradient(180deg, var(--ramp-y));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, var(--ramp-x)), linear-gradient(180deg, var(--ramp-y));
  mask-composite: intersect;
}

/* Until the hero is done (html.hw-go, set on load or on the first scroll past the hero) hardware
   images are not rendered, so the browser's lazy loader cannot fetch them early. Frames keep their
   aspect-ratio box, so nothing moves when they appear. Without JS they render as usual. */
html.js:not(.hw-go) .hw-frame img, html.js:not(.hw-go) .seq img { display: none; }

/* S3 chapter slots: 01 the Rattler on its own (alpha), 02 the projectile sequence, 03 the Helios
   cut-away (alpha) with a slow push-in */
.hw-slot[data-hw-state="ready"],
.chapter.is-pinned .hw-slot[data-hw-state="ready"] { display: block; aspect-ratio: auto; border-bottom: 0; padding-bottom: 0; }
.hw-zoom img { transform: scale(calc(1 + 0.045 * var(--z, 0))); transform-origin: 50% 56%; }
/* Pinned, the products fill their frames and each caption sits about 22 px under its subject (a % margin
   follows the frame, whose height is a fixed share of its width). The alpha renders may run a little past
   the frame into the free column 8; the caption stays above the canvas. */
.chapter.is-pinned .hw-frame--alpha { overflow: visible; }
.chapter.is-pinned .step[data-step="0"] .hw-frame--alpha img { transform: scale(1.18); transform-origin: 20% 55%; }
.chapter.is-pinned .hw-zoom img { transform: scale(calc(1.12 + 0.045 * var(--z, 0))); transform-origin: 40% 56%; }
.chapter.is-pinned .hw-fig .cap { position: relative; z-index: 1; }
.chapter.is-pinned .step[data-step="0"] .hw-fig .cap { margin-top: calc(22px - 6.1%); }
.chapter.is-pinned .step[data-step="1"] .hw-fig .cap { margin-top: calc(22px - 17.4%); }
.chapter.is-pinned .step[data-step="2"] .hw-fig .cap { margin-top: calc(22px - 12%); }
/* Pinned copy hangs from a fixed line under the rail, so a long step (03) grows downwards and never
   rides up into the rail; headings keep one baseline across the three steps. */
.chapter.is-pinned .step .step__copy, .chapter.is-pinned .step:nth-child(even) .step__copy {
  align-self: start; min-height: 0; margin-top: calc((min(100svh, 920px) - var(--nav-h)) / 2 - 11.5rem);
}
@media (min-width: 1080px) {
  /* pinned: media bleeds to the left viewport edge; the caption stays on the grid */
  .chapter.is-pinned .step__media { margin-left: calc(-1 * var(--edge)); }
  .chapter.is-pinned .step__media .cap { margin-left: var(--edge); }
  /* static (very tall screens, reduced motion): the same 7-column bleed, alternating sides */
  .chapter:not(.is-pinned) .step .step__media { grid-column: 1 / span 7; margin-left: calc(-1 * var(--edge)); }
  .chapter:not(.is-pinned) .step .step__copy { grid-column: 9 / -1; }
  .chapter:not(.is-pinned) .step:nth-child(even) .step__media { grid-column: 6 / -1; margin-left: 0; margin-right: calc(-1 * var(--edge)); }
  .chapter:not(.is-pinned) .step:nth-child(even) .step__copy { grid-column: 1 / span 4; }
  .chapter:not(.is-pinned) .step:nth-child(odd) .step__media .cap { margin-left: var(--edge); }
}
@media (max-width: 819px) {
  .step__media .hw-frame { margin-inline: calc(-1 * var(--gutter)); }
}

/* The locked pair, right under "Two things to invent": one angled still, offset to the right (columns 5 to
   12), an asymmetric editorial beat rather than a second look at step 02's side view. */
.hw-dip { margin-top: var(--section-s); row-gap: 48px; align-items: start; }
.hw-dip__b { grid-column: 5 / -1; }
.hw-dip .cap { max-width: none; }
@media (max-width: 819px) {
  .hw-dip__b { grid-column: 1 / -1; }
}

/* Roadmap: the side elevation, full container width under the four phases, cropped tight */
.hw-phase { margin-top: clamp(24px, 3vw, 48px); }
.hw-frame--profile { aspect-ratio: 5 / 1; }
.hw-frame--profile img { object-position: 50% 40%; }
@media (max-width: 819px) {
  .hw-frame--profile { aspect-ratio: 8 / 3; margin-inline: calc(-1 * var(--gutter)); }
}

/* Sequences: poster, then canvas, then (Rattler) the lead still that crossfades away */
.seq > picture, .seq > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq img { width: 100%; height: 100%; object-fit: cover; }
.seq__poster img { transform: scale(var(--seq-zoom, 1)); transform-origin: var(--seq-o, 50% 50%); }
.seq__canvas { opacity: 0; transition: opacity var(--t-ui) var(--ease-std); }
.seq.is-live .seq__canvas { opacity: 1; }
.seq__lead { z-index: 1; opacity: var(--lead, 1); }
.seq[data-seq-lead] > .seq__poster, .seq[data-seq-lead].is-live > .seq__canvas { opacity: var(--seqin, 0); }
.seq__lead img { transform: scale(calc(1 + 0.04 * (1 - var(--lead, 1)))); transform-origin: 40% 60%; }
/* Inside Rattler opens tight on the detailed part (copper coil pods, blue fibre), the flat breech face
   bottom-left under the caption ground, the flat faces a shade darker (#hw-flat-dk keeps the night floor) */
.hw-scrub--rattler .seq__lead img { filter: url(#hw-flat-dk); object-position: 76% 24%; transform: scale(calc(1.2 + 0.04 * (1 - var(--lead, 1)))); transform-origin: 76% 24%; }

/* Full-bleed scrubbed moments: "Inside Rattler" and "Inside Helios", a matched pair.
   Static by default (no JS, reduced motion, Save-Data, small or short screens): heading, then the
   frame, then the caption. */
.hw-scrub { position: relative; }
.hw-scrub--rattler { margin-top: var(--section-m); }
/* a typographic breath (space and a hairline) between the two moments */
.hw-break { margin-top: var(--section-m); }
.hw-break::before { content: ""; display: block; height: 1px; background: var(--line); }
.hw-break + .hw-scrub { margin-top: var(--section-m); }
/* Helios: a quieter grade (canvas: x .878 floored at the night in main.js, then saturate; poster: #hw-grade)
   and a vignette, so the floor falls away and the glowing pinch column carries the frame */
.hw-scrub--helios .seq__canvas { filter: saturate(0.72); }
.hw-scrub--helios .seq__poster img { filter: url(#hw-grade); }
/* the push-in frames carry their own ~3 % night border; a wider side feather melts its inner edge */
.hw-scrub--helios .hw-scrub__frame, .hw-scrub--helios.is-letterbox .hw-scrub__frame { --fx: 12%; --fy: 14%; }
.hw-scrub--helios .hw-scrub__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 58%, transparent 55%, rgb(7 8 12 / 0.75) 100%);
}
.hw-scrub__stage { position: relative; }
.hw-scrub__fig { position: relative; }
.hw-scrub__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; --fx: 0%; --fy: 10%; }
.hw-scrub__cap { max-width: var(--container); margin: 16px auto 0; padding-inline: var(--gutter); }
.hw-scrub__copy { margin-bottom: clamp(28px, 4vw, 48px); }
.hw-scrub__copy h3 { max-width: 12ch; }
.hw-scrub__copy p { margin-top: 18px; max-width: 30ch; }
@media (max-width: 819px) {
  /* phones: a taller crop so the machine fills the width */
  .hw-scrub__frame { aspect-ratio: 4 / 3; }
  .hw-scrub__frame img { object-position: 55% 50%; }
  .hw-scrub--helios .hw-scrub__frame { aspect-ratio: 4 / 5; }
  .hw-scrub--helios .hw-scrub__frame img { object-position: 50% 60%; }
}
/* Pinned: the 16:9 frame letterboxes inside the stage (never cover-cropped), the heading leaves as
   the motion starts, and the caption sits on a guaranteed dark ground. */
.hw-scrub.is-pinned { height: calc(var(--len, 250) * 1svh); }
.hw-scrub.is-pinned .hw-scrub__stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; }
.hw-scrub.is-pinned .hw-scrub__fig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* up to 7 % of the frame may be cropped top and bottom before it letterboxes, so a common 16:9 screen
   still runs edge to edge while wide laptop screens never push the machine into the heading */
.hw-scrub.is-pinned .hw-scrub__frame { flex: none; width: min(100%, calc((100svh - var(--nav-h)) * 16 / 9 * 1.07)); }
.hw-scrub.is-letterbox .hw-scrub__frame { --fx: 5%; }
.hw-scrub.is-pinned .hw-scrub__copy {
  position: absolute; z-index: 3; left: 0; right: 0; top: clamp(24px, 6svh, 72px); margin-bottom: 0;
  pointer-events: none; opacity: var(--copy, 1);
}
/* the pinned copy always has a dark ground: night under the text block, feathered to the right and below,
   leaving together with the copy (mirrors the caption ground at the foot) */
.hw-scrub--rattler { --scrim-w: max(calc(var(--fs-display) * 6.1), calc(var(--fs-lead) * 18)); --scrim-h: calc(var(--fs-display) + 30px + var(--fs-lead) * 2.9); }
.hw-scrub--helios { --scrim-w: calc(var(--fs-display) * 5.8); --scrim-h: calc(var(--fs-display) + 12px); }
.hw-scrub.is-pinned .hw-scrub__stage::before {
  content: ""; position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none;
  width: calc(var(--edge) + var(--scrim-w) + 200px); max-width: 100%;
  height: calc(clamp(24px, 6svh, 72px) + var(--scrim-h) + 120px);
  background: linear-gradient(90deg, var(--night-0) calc(100% - 200px), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent);
  opacity: var(--copy, 1);
}
/* Helios sits low in the stage, so the facility's ring starts well below the heading */
.hw-scrub--helios.is-pinned .hw-scrub__fig { align-items: flex-end; }
.hw-scrub.is-pinned .hw-scrub__stage::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: clamp(110px, 17svh, 170px); pointer-events: none;
  /* stops in px from the foot, so a short stage never collapses two of them into a hard step */
  background: linear-gradient(to top, var(--night-0) 0, var(--night-0) 44px, rgb(7 8 12 / 0.86) 78px, rgb(7 8 12 / 0.4) calc(78px + (100% - 78px) * 0.5), transparent);
}
.hw-scrub.is-pinned .hw-scrub__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(14px, 2.6svh, 28px); margin-top: 0; }
.hw-scrub.is-pinned .hw-scrub__cap .cap__line { color: var(--text-2); }
/* ---- 5 Nov: Shock lenses (S3, between the locked pair and Inside Rattler) ----------------------------- */
/* Pinned, it is one full-bleed scrubbed moment like Inside Rattler: the closed shell first sits right of
   centre with the copy in the free night to its left; as the copy fades the frame glides to the centre and
   the shell opens. Static (no JS, reduced motion, Save-Data, phones, short or portrait screens): the copy,
   then the closed and the opened stills as an asymmetric diptych. The lens renders were exported on the night
   itself (each master levelled offline against the render's exact studio radial), so frames, poster and
   stills meet the page at #07080C on every edge, with no halo, banding or levels pass. They take no edge ramp and no caption ground: over a flat night those only
   add 1-level rounding bands (a faint rectangle on a good screen). Every block of the opening keeps at least
   13 % of the frame height from every edge, and the caption sits on empty night. */
.hw-scrub--lens { margin-top: var(--section-m); --lens-x: 12%; }
.lens__copy h3 { max-width: 10.5ch; }
.hw-scrub--lens.is-pinned .lens__copy h3 { max-width: min(10.5ch, 38vw); }
.hw-scrub--lens.is-pinned .lens__copy p { max-width: min(30ch, 33vw); }
.lens__copy p + p { margin-top: 14px; }
.hw-scrub--lens .hw-scrub__frame { -webkit-mask-image: none; mask-image: none; }
.hw-scrub--lens.is-pinned .hw-scrub__stage::after { content: none; }
.hw-scrub--lens .lens__scrub { display: none; }
.hw-scrub--lens.is-pinned .lens__still { display: none; }
/* pinned: the copy hangs in the night left of the shell, centred on it; no scrim is needed there */
.hw-scrub--lens.is-pinned .hw-scrub__copy {
  top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-bottom: 2svh;
  opacity: clamp(0, calc(var(--copy, 1) * 3.4 - 2.4), 1);  /* fx2: gone by --copy 0.7, while the shell has barely moved */
}
.hw-scrub--lens.is-pinned .hw-scrub__stage::before { content: none; }
/* fx2: the glide waits for the copy (--glide holds at 1 until --copy 0.85), and the frame grows as it centres, so
   the opened shell fills about two thirds of the stage height (data-seq-scale draws the canvas at that size) */
.hw-scrub--lens { --lens-s: 0.22; }
.hw-scrub--lens.is-pinned .hw-scrub__frame {
  --glide: min(1, calc(var(--copy, 1) / 0.85));
  transform: translate3d(calc(var(--glide) * var(--lens-x)), 0, 0) scale(calc(1 + (1 - var(--glide)) * var(--lens-s)));
  transform-origin: 50% 50%;
}
@media (max-width: 1199px) {
  .hw-scrub--lens { --lens-x: 16%; }
  .hw-scrub--lens.is-pinned .lens__copy p { max-width: min(27ch, 33vw); }
}
@media (max-width: 999px) {
  .hw-scrub--lens { --lens-x: 19%; }
  .hw-scrub--lens.is-pinned .lens__copy p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: min(30ch, 33vw); }
}
/* fx1: very wide screens: the frames stop at 1920 css px (the w1920 set is never upscaled; the night letterbox is
   invisible), so the shell keeps its proportion to the copy */
@media (min-width: 2200px) { .hw-scrub--lens.is-pinned .hw-scrub__frame { max-width: 1920px; } }
/* fx1: short landscape windows that still pin: body-size copy, so its last line keeps clear of the caption */
@media (max-height: 720px) and (min-width: 1000px) {
  .hw-scrub--lens.is-pinned .lens__copy p { font-size: var(--fs-body); line-height: var(--lh-body); }
  .hw-scrub--lens.is-pinned .lens__copy .kicker { margin-bottom: 10px; }
}
/* static: closed shell in columns 1-5, the opened shell in columns 7-12, set lower; the opened still is
   drawn a little closer so both shells read at one size (its lifted facet keeps 7 % from the frame top) */
.lens__dip { row-gap: 40px; align-items: start; }
.lens__a { grid-column: 1 / span 5; }
.lens__b { grid-column: 7 / -1; margin-top: clamp(64px, 10vw, 160px); }
.lens__a .hw-frame { aspect-ratio: 1 / 1; }
.lens__b .hw-frame { aspect-ratio: 4 / 3; }
.lens__b img { transform: scale(1.18); transform-origin: 50% 47%; }
/* fx1: each caption sits about 22 px under its shell, as in the chapter (a % margin follows the figure width, which
   sets the square / 4:3 frame's height) */
@media (min-width: 820px) {
  .lens__dip .lens__a .cap { margin-top: calc(22px - 14.6%); position: relative; }
  .lens__dip .lens__b .cap { margin-top: calc(22px - 10.4%); position: relative; }
}
@media (max-width: 819px) {
  /* phones: stacked and staggered, each frame running off its own side of the screen; captions stay on the grid */
  .lens__a, .lens__b { grid-column: 1 / -1; margin-top: 0; }
  .lens__a .hw-frame { margin-left: calc(-1 * var(--gutter)); margin-right: 10%; }
  .lens__b .hw-frame { margin-left: 10%; margin-right: calc(-1 * var(--gutter)); aspect-ratio: 1 / 1; }
  /* fx2: the frames are 0.9 x figure + gutter wide; the night under each shell is 14.6 % (closed) and 13.9 %
     (opened) of that, so the caption pulls up by as much and sits about 20 px under its own shell */
  .lens__dip { row-gap: 88px; }
  .lens__dip .lens__a .cap { position: relative; margin-top: calc(20px - 13.14% - 0.146 * var(--gutter)); }
  .lens__dip .lens__b .cap { position: relative; margin-top: calc(20px - 12.51% - 0.139 * var(--gutter)); }
}
/* ---- 5 Nov merge: S3 readiness levels, S5 Fig. 10 two-solver cross-check ----------------------------- */
/* two labelled levels (simulation software, hardware): mono label above each numeral, both numerals at the
   original size and weight; side by side only where both fit, otherwise stacked */
.ready__levels { display: flex; flex-wrap: wrap; gap: 22px 40px; margin: 18px 0 26px; }
.ready__level { display: flex; flex-direction: column; gap: 12px; }
.ready__level dd { margin: 0; }
.ready .ready__levels .ready__trl { margin: 0; }
/* fx1: each label says what its level applies to (J-01), so it reads as part of the figure, not as a caption */
.ready__level dt { font-size: var(--fs-small); color: var(--text); }
.ready__levels + p { max-width: 52ch; }
/* Fig. 10: the renders are on #07080C (= --night-0), so they sit straight on the night ground, no frame or feather.
   >= 600 px: the four-across composite; below: the four single-panel exports, 2 x 2 (pairs in rows) (DESIGN 15.7) */
.xcheck__wide { position: relative; }
.xcheck__labels { position: relative; height: 36px; margin-top: 4px; }
.xcheck__labels .xcheck__label { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); }
.xcheck__label { display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.xcheck__label > span + span { color: var(--text-3); }
.xcheck__label > span:first-child { color: var(--text-2); }
.xcheck__panels { display: none; }
.xcheck .cap { margin-top: 28px; }
.key-density { background: linear-gradient(90deg, #091e5a, #203089, #234da0, #2073b2, #2498c1, #40b5c4, #73c8bd, #a9ddb7, #d6efb3, #f0f9b8, #feffd8); box-shadow: inset 0 0 0 1px var(--line); }
.key-wall { background: #61a35c; }
/* laptops: cap the composite by height so all four cavities and their labels fit one view below the nav */
@media (min-width: 1080px) { .xcheck__wide { max-width: min(100%, calc((100svh - var(--nav-h) - 72px) * 5464 / 3379)); } }
@media (max-width: 599px) {
  .xcheck__wide { display: none; }
  .xcheck__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .xcheck__panel .xcheck__label { margin-top: 2px; }
}
/* fx1: the capability heading never leaves "at" at a line end. >= 1280 px: heading 7 columns (6 missed "Next-generation simulation," by ~3 px), text 8 / -1;
   820-1279 px: heading and text stacked, so it sets "Next-generation simulation, / at supercomputer scale." */
@media (min-width: 820px) {
  .honest__keep { white-space: nowrap; }
}
@media (min-width: 820px) and (max-width: 1279px) {
  .honest h3, .honest p { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .honest h3 { grid-column: 1 / span 7; }
  .honest p { grid-column: 8 / -1; }
}

/* rb-link */
/* Rainbow text (founder requests, 5 Nov): the logo's rainbow flowing through the letters, on the
   "Physical testing is underway" link, the "Real Physics Data" nav item and the Orwell quote.
   Night uses the logo's luminous stops; paper uses the darker stops of logo-mark-rainbow-light.svg. */
/* fx1: one light moving through the page. Every rainbow element samples one colour field, a --rb-w wide cycle anchored
   to the viewport (main.js sets --rb-ox, minus the element's left edge, and starts every rbFlow on one clock), so the
   nav item, the hero link and the quote show the hues of their place on screen, moving together. Paper stops are
   constant-lightness (OKLCH L 0.50), each at least 5:1 on #F6F4EF. */
:root { --rb-w: 960px; --rb-t: 9s; }
.rb-link, .rb-text {
  --rb: #f86ab5, #ff8b7f, #ffb16a, #ffdc4f, #ace84f, #0ceba7, #10dee7, #21b7ff, #7392ff, #a76ef8, #f86ab5;
  background-image: linear-gradient(90deg, var(--rb));
  background-size: var(--rb-w) 100%; background-repeat: repeat-x;
  background-position: var(--rb-ox, 0px) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: rbFlow var(--rb-t) linear infinite;
}
.rb-link { text-decoration-color: rgba(246, 244, 239, 0.4); }
[data-theme="paper"] .rb-link, [data-theme="paper"] .rb-text {
  --rb: #9e366f, #a8353a, #984b01, #7c5e07, #5e6b04, #087736, #127367, #0c6f81, #0a68a5, #5255b6, #7d45a2, #9e366f;
}
[data-theme="paper"] .rb-link { text-decoration-color: rgba(11, 12, 16, 0.35); }
.rb-link:hover, .rb-link:focus-visible { text-decoration-color: rgba(246, 244, 239, 0.85); }
[data-theme="paper"] .rb-link:hover, [data-theme="paper"] .rb-link:focus-visible { text-decoration-color: rgba(11, 12, 16, 0.8); }
@keyframes rbFlow { from { background-position: var(--rb-ox, 0px) 0; } to { background-position: calc(var(--rb-ox, 0px) - var(--rb-w)) 0; } }
.nav__links .rb-link, .sheet__links .rb-link { --rb-w: 220px; --rb-t: 6s; }  /* fx2: about half the spectrum across the label */
@media (prefers-reduced-motion: reduce) { .rb-link, .rb-text { animation: none; } }
@media (forced-colors: active) {
  .rb-link { background: none; color: LinkText; -webkit-text-fill-color: LinkText; }
  .rb-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* Orwell quote, top right of the hero; it pops in once after the headline and steps aside while the
   3-D first-use hint is showing, since both sit near the top of the stage. */
.hero__quote-wrap { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(14px, 1.6vw, 24px); pointer-events: none; }
.hero__quote {
  grid-column: 8 / -1; justify-self: end; max-width: 380px; margin: 0; text-align: right;
  pointer-events: auto; transition: opacity var(--t-ui) var(--ease-std);
}
.hero__quote blockquote { margin: 0; }
.hero__quote p { font-size: clamp(0.9375rem, 0.86rem + 0.25vw, 1.0625rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.005em; text-wrap: balance; }
.hero__quote figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-mono); color: var(--text-3); }
.hero__quote cite { font-style: normal; }
.hero__quote cite::before { content: "\201C"; }
.hero__quote cite::after { content: "\201D"; }
.hero:has(.hint.is-on) .hero__quote { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__quote { animation: quotePop 800ms var(--ease-out) 1.1s both; }
}
@keyframes quotePop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  60% { opacity: 1; transform: translateY(1px) scale(1.01); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 819px) {
  .hero__quote-wrap { top: 12px; }
  .hero__quote { grid-column: 1 / -1; max-width: 250px; }
  .hero__quote p { font-size: 13px; }
  .hero__quote figcaption { font-size: 10px; }
  .hero__quote .q-src { display: none; }
}

/* ML heading (founder request, 5 Nov): a quiet first line, as in the hero signature. */
#ml-h .dim { display: block; color: var(--text-3); }
@media (min-width: 1200px) {
  #ml-h .dim { font-size: 0.72em; letter-spacing: -0.03em; white-space: nowrap; line-height: 1.05; margin-bottom: 0.08em; }
}

/* Beauty pass (5 Nov; founder: "make sure it's beautiful").
   Orwell credit: set in the sans. Geist Mono draws its curly quotes almost straight, so the essay title read as
   typewriter quotes beside the quote's curly ones; the sans also reads as a literary credit, not a data label. */
.hero__quote figcaption { margin-top: 8px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; letter-spacing: 0; text-wrap: balance; }
/* 820-1023 px: five columns are narrower than the credit, which left "1946" alone on a line */
@media (min-width: 820px) and (max-width: 1023px) { .hero__quote { grid-column: 6 / -1; } }
/* Hero caption on phones and tablets: the long middle segment may wrap, so the line no longer breaks after
   "Fig. 1 ·" and leaves the separator hanging; "t = 2.5 ns" still never splits. */
/* The caption block took the 17 px body strut (27 px lines), so a wrapped caption sat on double-spaced lines. */
.hero__hud .hud__cap { font-size: var(--fs-mono); line-height: 1.6; }
@media (max-width: 1279px) { .hero__hud .hud__cap [data-status] > .nw:first-child { white-space: normal; } }
@media (max-width: 819px) { .hero__quote figcaption { font-size: 11.5px; margin-top: 6px; } }
/* "Z-pinch" never splits at its hyphen (the hero lead broke it as "Z-" / "pinch" at 1024 px). */
.nobr { white-space: nowrap; }