/* ════════════════════════════════════════════════════════════════════════════
   INSTRUMENT — "The machine that sees the invisible"   (Affectory concept 06)
   One instrument at two scales: macro precision engineering (graphite · steel · crimson, from 01 Mechanism)
   and the luminous microscopic world inside it (bioluminescent red · cyan · violet, from 02 Microcosm),
   with the opening crawl from 04 Nicosia — which now tells Our Story (Episode I). Anybody (display, also the Episode I
   title) · Archivo (body) · Martian Mono (HUD) · Fraunces + Albert Sans (the crawl text and the founders only).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens & reset ─────────────────────────────────────────────────────── */
:root {
  --bg: #0A0B0D; --bg-2: #111317; --panel: #16181C; --panel-2: #1C1F24;
  --steel: #8E949C; --steel-hi: #D7DCE2;
  --line: rgba(215, 220, 226, .12); --line-2: rgba(215, 220, 226, .22); --line-3: rgba(215, 220, 226, .34);
  --red: #BD1F2E; --red-hi: #E0303F; --red-lite: #FF6B76; --red-deep: #9A1821; --plum: #411A2C;
  --led: #FFB547;
  --glow-red: #FF3B4E; --cyan: #3FE0FF; --violet: #8C6BFF;
  --hud: rgba(63, 224, 255, .35); --hud-strong: rgba(63, 224, 255, .7);
  --night: #0B0507; --amber: #F2A65A; --amber-hi: #FFD9A8; --ember: #FFB35C; --cream: #F4EBDD;
  --text: #ECEEF1; --muted: #8A9099;
  --f-display: 'Anybody', 'Archivo', system-ui, sans-serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --f-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-crawl: 'Albert Sans', 'Archivo', system-ui, sans-serif;
  --pad: clamp(18px, 4.4vw, 72px);
  --maxw: 1520px;
  --nav-h: 84px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fs-hero: clamp(38px, 5vw, 94px);
  --fs-h2: clamp(46px, 7vw, 124px);
  --fs-lead: clamp(27px, 3.7vw, 64px);
  --edge-vw: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  --grid-a: rgba(215, 220, 226, .04);
  --grid-b: rgba(215, 220, 226, .019);
  --story: #F4F4F6; --story-dim: rgba(244, 244, 246, .72); --story-glow: 0 0 22px rgba(255, 238, 226, .16);
  --saber: #FF1E2D; --saber-deep: #B00012;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.65 var(--f-body); font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

/* ── 2. Utilities ─────────────────────────────────────────────────────────── */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 3000; background: var(--led); color: #111; padding: 10px 16px; font: 600 13px var(--f-mono); transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.mono { font-family: var(--f-mono); font-size: 11px; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; font-stretch: 78%; font-variation-settings: "wdth" 78; }
.mono em, .eyebrow em { color: var(--red-hi); padding: 0 .35em; }
.nc { text-transform: none; letter-spacing: .02em; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--steel); }
.eyebrow__no { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border: 1px solid var(--line-2); color: var(--steel-hi); }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a2a14; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); flex: none; transition: background .25s, box-shadow .25s; }
.led--on, .led.is-on { background: var(--led); box-shadow: 0 0 6px 1px rgba(255, 181, 71, .75), 0 0 16px rgba(255, 181, 71, .35); }
.led.is-red { background: var(--red-hi); box-shadow: 0 0 6px 1px rgba(224, 48, 63, .7); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Piston typography: Anybody's width axis (--wd) and weight (--wg) */
[data-piston], [data-piston-title] { font-variation-settings: "wdth" var(--wd, 100), "wght" var(--wg, 800); }
.pln { display: block; }
.pwd { display: inline-block; white-space: nowrap; }
.pch { display: inline-block; font-variation-settings: "wdth" var(--wd, 100), "wght" var(--wg, 800); will-change: font-variation-settings; }

/* Buttons */
.btn { --h: 54px; position: relative; display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 24px;
  font: 500 12px/1 var(--f-mono); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  border-radius: 3px; transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.btn .ico { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.btn:hover .ico:last-child { transform: translateX(5px); }
.btn--red { background: linear-gradient(180deg, #D22838 0%, var(--red) 48%, #A51A28 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.28), 0 10px 30px -12px rgba(189,31,46,.8), 0 0 0 1px #7d1520; }
.btn--red:hover { background: linear-gradient(180deg, #E4364A 0%, var(--red-hi) 50%, #B01E2C 100%); }
.btn--red:active { transform: translateY(1px); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--steel-hi); background: rgba(255,255,255,.015); }
.btn--ghost:hover { border-color: var(--steel); background: rgba(255,255,255,.05); color: #fff; }
[data-magnetic] { will-change: transform; }

/* ── 3. Global layers: the one canvas, blueprint sheets, grain ───────────── */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; visibility: hidden; }
html.no-webgl #gl { display: none; }
main, .foot { position: relative; z-index: 2; }
/* ONE background for the whole page: #0A0B0D + a faint measuring grid that scrolls with the content. The WebGL canvas
   above it is transparent wherever no 3D view is (views fade in / out over ≥ 60vh of scroll), so no section has an edge. */
body { background-image: linear-gradient(var(--grid-a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-a) 1px, transparent 1px), linear-gradient(var(--grid-b) 1px, transparent 1px), linear-gradient(90deg, var(--grid-b) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: center top; }
.mission, .contact { position: relative; }
/* film grain: a small noise tile painted by main.js (a bitmap — an SVG feTurbulence tile cost a ~50 ms first raster) */
.grain { position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .055; background-size: 160px 160px;
  animation: grain 1.1s steps(6) infinite; transition: opacity .8s; }
html.in-team .grain { opacity: .075; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* Section heads */
.sec-head { position: relative; display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 88px); }
.sec-title { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h2); line-height: .86; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--text); --wd: 108; --wg: 800; max-width: 16ch; text-wrap: balance; }
.sec-doc { position: absolute; right: 0; top: 0; color: var(--muted); }

/* ── 4. Preloader: the reader's self-test → lens iris (compositor only: transform / opacity) ───────────── */
.pre { position: fixed; inset: 0; z-index: 2000; pointer-events: all; overflow: hidden; background: transparent; transition: opacity .25s linear 1.08s; }
html:not(.js) .pre { display: none; }
.pre { animation: preFailsafe .01s linear 6.6s forwards; }
@keyframes preFailsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
html.failsafe .pre:not(.is-gated) { display: none !important; }   /* the Enter gate waits for the visitor */
.pre.is-open { opacity: 0; pointer-events: none; }
/* 9 aperture blades: each a solid half-plane whose inner edge sits at distance --a from the centre (translateX),
   the group twists as it opens. Solid-colour layers → no raster work, the compositor animates them alone. */
.pre__iris { position: absolute; inset: 0; overflow: hidden; }
.pre__iris-rot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(38deg); will-change: transform; transition: transform 1.15s cubic-bezier(.76,0,.24,1) .08s; }
.pre__blade { position: absolute; left: 0; top: -160vmax; width: 160vmax; height: 320vmax; background: #101216; transform-origin: 0 50%;
  transform: rotate(calc(var(--i) * 40deg)) translateX(-1px); will-change: transform; transition: transform 1.15s cubic-bezier(.76,0,.24,1) .08s; }
.pre__blade:nth-child(3n+1) { background: #0d0f12; } .pre__blade:nth-child(3n+2) { background: #121418; }
.pre__blade b { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(215, 220, 226, .2); will-change: transform; }
.pre.is-open .pre__iris-rot { transform: rotate(0deg); }
.pre.is-open .pre__blade { transform: rotate(calc(var(--i) * 40deg)) translateX(78vmax); }
.pre__glow { position: absolute; left: 50%; top: 50%; width: min(70vmin, 620px); aspect-ratio: 1; margin: calc(min(70vmin, 620px) / -2) 0 0 calc(min(70vmin, 620px) / -2); border-radius: 50%; opacity: .14; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255, 59, 78, .5) 0, rgba(189, 31, 46, .22) 30%, rgba(65, 26, 44, .25) 52%, transparent 72%); }
.pre.is-open .pre__glow { animation: preGlow 1.15s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes preGlow { 0% { opacity: .14; transform: scale(1); } 22% { opacity: .9; transform: scale(1.25); } 100% { opacity: 0; transform: scale(2.2); } }
.pre__ring { position: absolute; left: 50%; top: 50%; width: min(88vmin, 760px); aspect-ratio: 1; margin: calc(min(88vmin, 760px) / -2) 0 0 calc(min(88vmin, 760px) / -2); overflow: visible; opacity: .8;
  will-change: transform, opacity; animation: preReticle 9s linear infinite; transition: opacity .35s; }
@keyframes preReticle { to { transform: rotate(360deg); } }
.pre__ring circle { fill: none; stroke: rgba(215, 220, 226, .2); stroke-width: .5; }
.pre__ring .pre__ring-in { stroke-dasharray: 1.5 5; stroke: rgba(215, 220, 226, .16); }
.pre__ring path { fill: none; stroke: rgba(215, 220, 226, .3); stroke-width: .6; }
.pre__ring path.maj { stroke: rgba(224, 48, 63, .75); stroke-width: .8; }
.pre__ring .pre__ring-arc { stroke: rgba(224, 48, 63, .8); stroke-width: 1.2; }
.pre__hud { position: absolute; top: 26px; display: flex; flex-direction: column; gap: 6px; color: var(--steel-hi); font-size: 10.5px; transition: opacity .35s; }
.pre__hud--tl { left: var(--pad); } .pre__hud--tr { right: var(--pad); text-align: right; }
.pre__dim { color: var(--muted); }
.pre__core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; will-change: transform, opacity; transition: transform .42s cubic-bezier(.5,0,.75,0), opacity .42s cubic-bezier(.5,0,.75,0); }
.pre.is-open .pre__core { transform: scale(.82); opacity: 0; }
.pre.is-open .pre__hud, .pre.is-open .pre__ring { opacity: 0; }
.pre__frame { position: relative; width: min(58vw, 500px); aspect-ratio: 3000 / 1800; }
.pre__corner { position: absolute; width: 18px; height: 18px; border: 1px solid var(--steel); opacity: .6; }
.pre__corner--tl { left: -22px; top: -14px; border-right: 0; border-bottom: 0; } .pre__corner--tr { right: -22px; top: -14px; border-left: 0; border-bottom: 0; }
.pre__corner--bl { left: -22px; bottom: -14px; border-right: 0; border-top: 0; } .pre__corner--br { right: -22px; bottom: -14px; border-left: 0; border-top: 0; }
.pre__logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pre__gear { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #9A9CA0; will-change: transform; }
.pre__gear--big { transform-origin: 45.31% 30.378%; animation: preUpBig 1.4s cubic-bezier(.11,0,.5,0) forwards, preLoopBig 1.385s linear 1.4s infinite; }
.pre__gear--mid { transform-origin: 34.057% 13.2%; animation: preUpMid 1.4s cubic-bezier(.11,0,.5,0) forwards, preLoopMid .677s linear 1.4s infinite; }
.pre__gear--small { transform-origin: 28.717% 23.756%; animation: preUpSmall 1.4s cubic-bezier(.11,0,.5,0) forwards, preLoopSmall .385s linear 1.4s infinite; }
@keyframes preUpBig { from { transform: rotate(0deg); } to { transform: rotate(182deg); } }
@keyframes preLoopBig { from { transform: rotate(182deg); } to { transform: rotate(542deg); } }
@keyframes preUpMid { from { transform: rotate(0deg); } to { transform: rotate(-372deg); } }
@keyframes preLoopMid { from { transform: rotate(-372deg); } to { transform: rotate(-732deg); } }
@keyframes preUpSmall { from { transform: rotate(0deg); } to { transform: rotate(654deg); } }
@keyframes preLoopSmall { from { transform: rotate(654deg); } to { transform: rotate(1014deg); } }
html.rm .pre__gear, html.rm .pre__ring { animation: none; }
/* the script: outline while the reader self-tests, crimson enamel fill fades in when ready (opacity only) */
.pre__logo .lg-script-stroke { fill: none; stroke: var(--red-hi); stroke-width: 5; stroke-linejoin: round; opacity: .55; transition: opacity .3s .2s; }
.pre__logo .lg-script-fill { fill: var(--red); opacity: 0; transition: opacity .34s ease-out; }
.pre.is-ready .pre__logo .lg-script-fill, html.rm .pre__logo .lg-script-fill { opacity: 1; }
.pre.is-ready .pre__logo .lg-script-stroke { opacity: 0; }
.pre__read { display: grid; grid-template-columns: repeat(6, auto); column-gap: 12px; color: var(--muted); font-size: 10.5px; align-items: baseline; }
.pre__v { color: var(--steel-hi); min-width: 8ch; }
.pre__v b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.pre__bar { width: min(58vw, 500px); height: 2px; background: var(--line); position: relative; overflow: hidden; }
.pre__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red-deep), var(--red-hi)); transform-origin: left; transform: scaleX(.04); box-shadow: 0 0 10px var(--glow-red); will-change: transform; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.pre__status { color: var(--steel); font-size: 10.5px; }
/* the Enter gate (appears where the iris used to open by itself) */
.pre__gate { position: absolute; left: 50%; bottom: max(6vh, 48px); transform: translate(-50%, 14px); display: grid; justify-items: center; gap: 12px; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; will-change: transform, opacity; z-index: 2; }
.pre.is-gated .pre__gate { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.pre.is-open .pre__gate { opacity: 0; transform: translate(-50%, 8px) scale(.96); transition: opacity .25s ease, transform .3s ease; }
.pre__enter { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 30px 0 24px; border-radius: 999px; color: #fff; cursor: pointer;
  font: 700 15px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 112, "wght" 760;
  background: linear-gradient(180deg, #D22838 0%, var(--red) 48%, #A51A28 100%); box-shadow: 0 0 0 1px rgba(255, 90, 104, .35), 0 12px 34px -10px rgba(255, 36, 54, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .3s, background .3s; }
.pre__enter:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 120, 132, .6), 0 16px 40px -8px rgba(255, 36, 54, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pre__enter:focus-visible, .pre__silent:focus-visible { outline: 2px solid var(--led); outline-offset: 4px; }
.pre__enter .ico { width: 20px; height: 20px; }
.pre__enter.is-muted { background: linear-gradient(180deg, #2a2d33, #1b1d21); box-shadow: 0 0 0 1px var(--line-3), 0 12px 30px -12px rgba(0, 0, 0, .8); }
.pre__gate-cap { color: var(--steel-hi); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.pre__gate-cap em { color: var(--red-hi); font-style: normal; }
.pre__silent { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid transparent; cursor: pointer; transition: color .3s, border-color .3s; }
.pre__silent:hover { color: #fff; border-color: var(--line-3); }
html.rm .pre__gate, html.rm .pre.is-gated .pre__gate { transition: none; transform: translate(-50%, 0); }
.pre.is-gated .pre__ring { opacity: .3; }
@media (max-width: 640px) { .pre__hud--tr { display: none; } }
html.rm .pre__blade, html.rm .pre__iris-rot { transition: none; }
html.rm .pre { transition: opacity .4s linear; }

/* ── 5. Nav (#top) + mobile menu ──────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--nav-h); transition: height .5s var(--ease), background-color .5s, border-color .5s, backdrop-filter .5s; border-bottom: 1px solid transparent; }
.nav.is-condensed { height: 60px; background: rgba(10, 11, 13, .72); border-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.nav__inner { height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 28px; }
.nav__logo { display: block; width: 104px; flex: none; transition: width .5s var(--ease); }
.nav.is-condensed .nav__logo { width: 84px; }
.nav__logo img, .nav__svg { width: 100%; height: auto; }
.nav__svg .lg-gear { fill: #A4A7AC; } .nav__svg .lg-script { fill: var(--red); }
.nav__links { margin-left: auto; }
.nav__links ol { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav__links a { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 0; font: 500 14px/1 var(--f-body); color: var(--steel-hi); letter-spacing: .01em; transition: color .3s; position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red-hi); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__idx { font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.nav__links a.is-cta { padding: 10px 14px; border: 1px solid rgba(224, 48, 63, .55); border-radius: 3px; color: #fff; background: rgba(189, 31, 46, .12); }
.nav__links a.is-cta::after { display: none; }
.nav__links a.is-cta:hover { background: var(--red); border-color: var(--red); }
.nav__links a.is-cta .nav__idx { color: rgba(255,255,255,.6); }
.nav__status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.nav__sound { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.nav__sound:hover { color: #fff; border-color: var(--line-3); }
.nav__sound .ico { width: 16px; height: 16px; }
.nav__sound.is-on { color: #fff; border-color: rgba(255, 36, 54, .55); background: rgba(189, 31, 46, .12); }
.ico-snd .snd-on { display: none; } .is-on .ico-snd .snd-on { display: inline; } .is-on .ico-snd .snd-off { display: none; }
.nav__burger { display: none; width: 46px; height: 46px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 3px; position: relative; background: rgba(10,11,13,.5); }
.nav__burger i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger i:nth-of-type(1) { top: 18px; } .nav__burger i:nth-of-type(2) { top: 26px; }
.nav__burger[aria-expanded="true"] i:nth-of-type(1) { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-of-type(2) { top: 22px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 790; background: #0B0C0E; padding: calc(var(--nav-h) + 24px) var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-a) 1px, transparent 1px); background-size: 48px 48px; }
.menu__nav { position: relative; }
.menu__nav li { border-bottom: 1px solid var(--line); overflow: hidden; }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; }
.menu__nav .mono { color: var(--red-lite); font-size: 10.5px; }
.menu__nav b { font: 800 clamp(32px, 9vw, 56px)/1 var(--f-display); font-variation-settings: "wdth" 92, "wght" 800; text-transform: uppercase; letter-spacing: -.01em; }
.menu__foot { position: relative; display: grid; gap: 10px; color: var(--muted); font-size: 10.5px; padding-top: 28px; }

/* ── 6. HERO — Reader AF-01 ─────────────────────────────────────────────── */
.hero { position: relative; }
.hero__stage, .line__stage { --edge: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad))); }
.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 16vh 5vw 30vh 52vw; background: radial-gradient(120% 90% at 70% 35%, #15171b 0%, var(--bg) 62%); }
.hero__fallback .lg-gear[data-gear="big"] { transform-origin: 1359.3px 546.8px; animation: fbSpin 24s linear infinite; }
.hero__fallback .lg-gear[data-gear="mid"] { transform-origin: 1021.7px 237.6px; animation: fbSpin 11.7s linear infinite reverse; }
.hero__fallback .lg-gear[data-gear="small"] { transform-origin: 861.5px 427.6px; animation: fbSpin 6.7s linear infinite; }
@keyframes fbSpin { to { transform: rotate(360deg); } }
html.rm .hero__fallback .lg-gear { animation: none; }
.hero__fallback svg { width: 100%; max-width: 820px; height: auto; overflow: visible; }
.hero__fallback .lg-gear { fill: #8E949C; } .hero__fallback .lg-script { fill: var(--red); }
html.no-webgl .hero__fallback { display: grid; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.55) 30%, rgba(10,11,13,0) 58%), linear-gradient(0deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,0) 34%), linear-gradient(180deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,0) 18%); }
.hero__hud { position: absolute; inset: calc(var(--nav-h) + 8px) var(--edge) 70px; pointer-events: none; color: var(--muted); }
.frame { position: absolute; width: 14px; height: 14px; border: 1px solid var(--line-3); }
.frame--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .frame--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.frame--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .frame--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud-tag { position: absolute; font-size: 10px; color: var(--muted); }
.hud-tag--tl { left: 24px; top: 0; } .hud-tag--tr { right: 24px; top: 0; color: var(--steel-hi); }
.hud-tag--bl { left: 24px; bottom: -3px; } .hud-tag--br { right: 24px; bottom: -3px; color: var(--steel-hi); }
.hud-tag--tr span, .hud-mag { font-variant-numeric: tabular-nums; }
.hud-mag { color: var(--text); font-weight: 500; }
.hero__copy { position: absolute; left: var(--edge); bottom: clamp(96px, 15vh, 170px); width: min(1060px, 78vw); z-index: 3; }
.hero__copy .eyebrow { margin-bottom: 26px; font-size: 10.5px; }
.hero__title { font-family: var(--f-display); font-size: var(--fs-hero); line-height: .9; letter-spacing: -.012em; font-weight: 800; text-transform: uppercase; color: var(--text); }
.hero__line { display: block; white-space: nowrap; --wd: 82; --wg: 800; }
@media (min-width: 961px) { .hero__title { font-size: clamp(34px, min(5vw, calc((54vw - var(--edge-vw)) / 10.2)), 94px); } }
.hero__line--2 { padding-left: .9em; }
.hero__line--2 .pch { transition: color .35s, -webkit-text-stroke-color .35s; }
.hero__line--2.is-outline .pch:not(.is-fill) { color: transparent; -webkit-text-stroke: 1.4px var(--steel-hi); }
.hero__welcome { margin-top: 30px; max-width: 470px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: #C9CED5; }
.hero__actions { margin-top: 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero__hint { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.hero__hint-tray { position: relative; width: 24px; height: 14px; border-radius: 3px; border: 1px solid var(--line-3); overflow: hidden; }
.hero__hint-tray i { position: absolute; left: 3px; right: 3px; top: 3px; height: 6px; border-radius: 1.5px; background: var(--red-hi); animation: trayIn 2.4s var(--ease) infinite; }
@keyframes trayIn { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(0); } }
.hero__outro { position: absolute; left: 50%; bottom: clamp(90px, 13vh, 150px); transform: translateX(-50%); width: min(880px, 86vw); text-align: center; display: grid; gap: 14px; justify-items: center; pointer-events: none; opacity: 0; visibility: hidden; z-index: 3; }
.hero__outro .mono { color: var(--steel); font-size: 10.5px; }
.hero__outro-txt { font: 700 clamp(22px, 2.5vw, 40px)/1.12 var(--f-display); font-variation-settings: "wdth" 88, "wght" 700; color: var(--text); text-wrap: balance; }
.callouts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.callouts__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co__lead { fill: none; stroke: rgba(215,220,226,.75); stroke-width: 1; }
.co__dot { fill: var(--bg); stroke: var(--red-hi); stroke-width: 1.5; }
.co__pulse { fill: none; stroke: var(--red-hi); stroke-width: 1; }
.co__label { position: absolute; left: 0; top: 0; white-space: nowrap; display: grid; gap: 4px; padding: 0 2px; will-change: transform; }
.co__label.is-left { text-align: right; }
.co__label .mono { font-size: 9.5px; color: var(--muted); }
.co__word { font: 800 clamp(20px, 1.9vw, 32px)/.95 var(--f-display); font-variation-settings: "wdth" 118, "wght" 800; text-transform: uppercase; color: var(--text); letter-spacing: .01em; }
.co--red .co__word { color: var(--red-lite); }
.rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 var(--edge) 18px; }
.rail__bar { position: relative; display: flex; align-items: center; height: 38px; border-radius: 19px; overflow: hidden; background: linear-gradient(180deg, #23262b 0%, #15171a 45%, #0d0e10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05), 0 12px 30px -10px rgba(0,0,0,.8); }
.rail__cap { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 30%, #d9dde2, #6d7278 60%, #33363b); box-shadow: 0 0 0 3px #111316; }
.rail__cap::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.4px; margin-top: -.7px; background: #2a2d31; transform: rotate(35deg); }
.rail__cap--l { left: 13px; } .rail__cap--r { right: 13px; }
.rail__track { position: absolute; left: 40px; right: 40px; top: 0; bottom: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail__belt { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.rail__set { display: flex; align-items: center; flex: none; }
.rail__tag { font: 400 11px/1 var(--f-mono); font-stretch: 80%; letter-spacing: .05em; color: #AEB4BB; white-space: nowrap; padding: 0 18px; }
.rail__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px rgba(189,31,46,.2); flex: none; }

/* ── 7. MISSION — Specification ──────────────────────────────────────────── */
.mission { padding: clamp(120px, 18vh, 200px) 0 clamp(110px, 16vh, 180px); }
.mission__lead { font: 700 var(--fs-lead)/1.04 var(--f-display); letter-spacing: -.012em; color: var(--text); max-width: 27ch; margin-bottom: clamp(64px, 9vw, 130px); position: relative; z-index: 1; }
.mission .sec-head, .mission .spec, .mission .pillars-wrap, .mission .kicker { position: relative; z-index: 1; }
.mission__draw { position: absolute; right: 10px; top: -40px; width: min(620px, 44vw); height: auto; pointer-events: none; z-index: 0; overflow: visible; }
.mission__draw .bp-l { fill: none; stroke: rgba(215,220,226,.22); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mission__draw .bp-gear { stroke: rgba(215,220,226,.34); }
.mission__draw .bp-dash { stroke-dasharray: 10 5 2 5; }
.mission__draw .bp-center { stroke: rgba(224,48,63,.35); stroke-dasharray: 22 6 4 6; }
.mission__draw .bp-dim { stroke: rgba(224,48,63,.55); }
.mission__draw .bp-lens { stroke: rgba(63,224,255,.55); }
.mission__draw .bp-t { font: 500 10px var(--f-mono); letter-spacing: .06em; fill: rgba(215,220,226,.5); }
.mission__draw .bp-red { fill: rgba(255,107,118,.8); }
.mission__draw .bp-cyan { fill: rgba(63,224,255,.7); }
.mission__lead .ln { display: block; white-space: nowrap; }
.mission__lead .wd { display: inline-block; font-variation-settings: "wdth" var(--wd, 100), "wght" var(--wg, 700); color: var(--c, var(--text)); }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 72px); border-top: 1px solid var(--line-2); margin-bottom: clamp(70px, 9vw, 120px); }
.spec__clause { padding-top: 26px; display: grid; gap: 18px; align-content: start; }
.spec__no { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.spec__no span:first-child { color: var(--red-lite); }
.spec__txt { font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.7; color: #C9CED5; max-width: 60ch; }
.pillars-wrap { display: grid; gap: 18px; margin-bottom: clamp(60px, 8vw, 110px); }
.pillars__cap { color: var(--muted); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar { position: relative; display: grid; grid-template-columns: 58px 1fr 44px; height: 76px; border: 1.5px solid #5d636b; background: linear-gradient(180deg, #17191d, #101114); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -10px 20px rgba(0,0,0,.35); }
.pillar__cell { display: grid; place-items: center; border-right: 1.5px solid #5d636b; }
.pillar__cell:last-of-type { border-right: 0; }
.pillar__sym svg { width: 26px; height: 26px; fill: none; stroke: var(--steel-hi); stroke-width: 1.6; }
.pillar__word { font: 800 clamp(20px, 1.9vw, 30px)/1 var(--f-display); font-variation-settings: "wdth" 124, "wght" 800; text-transform: uppercase; letter-spacing: .02em; color: #D8DDE3; text-shadow: 0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.12); }
.pillar__datum { font-size: 14px; color: var(--steel-hi); }
.pillar__pn { position: absolute; left: 0; top: -20px; font-size: 9.5px; color: var(--muted); }
.pillar::after { content: ''; position: absolute; left: -1.5px; right: -1.5px; bottom: -1.5px; height: 2px; background: var(--red); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.kicker { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font: 700 clamp(22px, 2.3vw, 36px)/1.2 var(--f-display); font-variation-settings: "wdth" 90, "wght" 700; color: var(--text); }
.kicker__arrow svg { width: clamp(90px, 10vw, 160px); height: 24px; fill: none; stroke: var(--red-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 8. THE LINE — pinned; one camera move from the conveyor into the strip and back ── */
.line { position: relative; }
.line__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.line__fallback { position: absolute; inset: 0; display: none; background: radial-gradient(60% 50% at 66% 50%, rgba(189,31,46,.16), transparent 70%), linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--grid-a) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg); }
.line__fallback-cas { position: absolute; left: 62%; top: 50%; width: 170px; height: 442px; transform: translate(-50%, -50%); }
html.no-webgl .line__fallback { display: block; }
.line__fallback-cas svg { width: 100%; height: 100%; overflow: visible; }
.line__fallback .cas-outline { fill: none; stroke: rgba(236, 238, 241, .75); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.line__fallback .cas-inner { stroke: rgba(236, 238, 241, .22); }
.line__fallback .cas-window-fill { fill: #ebe4df; }
.line__fallback .cas-well { stroke: rgba(63, 224, 255, .7); } .line__fallback .cas-well-in { stroke: rgba(63, 224, 255, .35); }
.line__fallback .cas-line, .line__fallback .cas-glow { fill: var(--red); }
.line__fallback .cas-flow { opacity: 0; }
.line__fallback .cas-mark { font-family: var(--f-mono); font-size: 15px; font-weight: 600; fill: var(--text); }
.line__fallback .cas-brand { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .12em; fill: var(--text); }
.line__fallback .cas-sub, .line__fallback .cas-rd { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .14em; fill: var(--muted); }
.line__fallback .cas-rd--t { fill: var(--red-lite); }
.line__fallback .cas-lead { fill: none; stroke: var(--hud-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line__fallback .cas-lead-dot { fill: var(--cyan); } .line__fallback .cas-lead-dot--t { fill: var(--glow-red); }
.line__shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.62) 27%, rgba(10,11,13,0) 46%), linear-gradient(180deg, rgba(10,11,13,.5), rgba(10,11,13,0) 22%); }
.line__shade::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s; background: linear-gradient(90deg, rgba(8,9,12,.9) 0%, rgba(8,9,12,.72) 30%, rgba(8,9,12,0) 46%); }
.line__stage.is-micro .line__shade::after { opacity: 1; }
html.in-line .gauge, html.at-foot .gauge { opacity: 0 !important; pointer-events: none; }
/* side panel = the machine's display: station + magnification together */
.line__panel { position: absolute; left: var(--edge); top: calc(var(--nav-h) + 3vh); bottom: 6vh; width: min(440px, 33vw); z-index: 4; display: flex; flex-direction: column; gap: 18px; }
.line__head { position: relative; display: grid; align-items: start; min-height: 200px; }
.lh { grid-area: 1 / 1; }   /* all head states share one cell: the head sizes to the tallest caption */
.lh--cap { opacity: 0; pointer-events: none; }
html.rm .lh--cap, html.no-webgl .lh--cap { grid-area: auto; opacity: 1; margin-top: 18px; }
.line__title { font-family: var(--f-display); font-size: clamp(36px, 3.8vw, 64px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; --wd: 100; --wg: 800; }
.line__intro { margin-top: 16px; color: #C0C6CD; font-size: 16px; max-width: 34ch; }
.cap__k { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 10.5px; }
.cap__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.cap__t { margin-top: 12px; font: 800 clamp(30px, 3vw, 48px)/.94 var(--f-display); font-variation-settings: "wdth" 96, "wght" 800; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.cap__p { margin-top: 14px; color: #C9D1DB; font-size: 16px; line-height: 1.55; max-width: 40ch; }
.stations { display: grid; border-top: 1px solid var(--line); }
.station { display: grid; grid-template-columns: 34px 1fr 12px; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); opacity: .42; transition: opacity .45s; }
.station.is-active { opacity: 1; } .station.is-done { opacity: .66; }
.station__no { padding-top: 5px; color: var(--muted); }
.station.is-active .station__no { color: var(--red-lite); }
.station__name { font: 800 20px/1.05 var(--f-display); font-variation-settings: "wdth" 118, "wght" 800; text-transform: uppercase; letter-spacing: .01em; }
.station__cap { color: #BFC5CC; font-size: 14.5px; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s, margin .6s var(--ease); }
.station.is-active .station__cap { max-height: 90px; opacity: 1; margin-top: 6px; }
.line__stage.is-micro .station.is-active .station__cap { max-height: 0; opacity: 0; margin-top: 0; }
.station__led { margin-top: 8px; }
.station.is-active .station__led { background: var(--led); box-shadow: 0 0 6px 1px rgba(255,181,71,.75); }
.station.is-done .station__led { background: #7a5a2a; }
.chrono { margin-top: auto; display: flex; align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.chrono__dial { width: 74px; height: 74px; flex: none; }
.chrono__rim { fill: #0e0f12; stroke: var(--line-3); stroke-width: 1.2; }
.chrono__ticks line { stroke: var(--steel); stroke-width: 1; } .chrono__ticks line.maj { stroke: var(--steel-hi); stroke-width: 1.6; }
.chrono__hand { stroke: var(--red-hi); stroke-width: 1.6; stroke-linecap: round; transform-origin: 50px 50px; }
.chrono__hub { fill: var(--steel-hi); }
.chrono__read { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.chrono__read b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.chrono__tc { color: var(--steel-hi); font-variant-numeric: tabular-nums; }
.chrono__res { color: var(--led); }
.line__progress { position: absolute; left: 0; right: 0; top: 60px; height: 2px; background: var(--line); z-index: 4; opacity: 0; transition: opacity .5s; }
html.in-line .line__progress { opacity: 1; }   /* only while pinned: it is a progress track, not a section edge */
.line__progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red-deep), var(--red-hi)); transform: scaleX(0); transform-origin: left; }
/* eyepiece HUD (the instrument's own readouts) */
.eye-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #C3CFE2; }
.eh-corner { position: absolute; top: calc(var(--nav-h) + 22px); right: var(--edge); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 9.5px; text-align: right; }
.eh-corner::before { content: ''; position: absolute; top: -10px; right: -12px; width: 22px; height: 22px; border-top: 1px solid var(--hud-strong); border-right: 1px solid var(--hud-strong); }
.eh-k { color: var(--cyan); opacity: .85; }
.eh-mag { font: 300 32px/1.05 var(--f-mono); font-stretch: 100%; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.eh-sub { color: #8A97AD; }
.eh-bottom { position: absolute; right: var(--edge); bottom: 22px; display: flex; align-items: center; gap: 22px; font-size: 9.5px; opacity: 0; transition: opacity .5s; }
.line__stage.is-lens .eh-bottom, .line__stage.is-lens .eh-focus { opacity: 1; }
.eh-scale { display: flex; align-items: center; gap: 10px; color: var(--text); }
.eh-scale span, .eh-xyz { text-transform: none; font-variant-numeric: tabular-nums; }
.eh-bar { position: relative; width: 96px; height: 7px; border: 1px solid #C3CFE2; border-top: 0; }
.eh-bar::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 4px; background: #C3CFE2; }
.eh-xyz { color: #8A97AD; }
.eh-focus { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 9px; color: var(--cyan); opacity: 0; transition: opacity .5s; }
.eh-focus i { position: relative; width: 64px; height: 9px; border-left: 1px solid var(--hud-strong); border-right: 1px solid var(--hud-strong); background: repeating-linear-gradient(90deg, var(--hud) 0 1px, transparent 1px 8px); }
.eh-focus b { position: absolute; left: 50%; top: -3px; width: 2px; height: 15px; margin-left: -1px; background: var(--glow-red); box-shadow: 0 0 8px var(--glow-red); }
.eye-ring { position: absolute; left: 62%; top: 50%; width: min(86vh, 70vw); height: min(86vh, 70vw); margin: calc(min(86vh, 70vw) / -2) 0 0 calc(min(86vh, 70vw) / -2); overflow: visible; pointer-events: none; z-index: 2; opacity: 0; }
.eye-ring > * { transform: rotate(var(--rot, 0deg)); transform-box: view-box; transform-origin: 0 0; }
.er-field { fill: none; stroke: var(--hud); stroke-width: 1.2; }
.er { stroke: var(--hud); stroke-width: 1.1; fill: none; } .er--major { stroke: var(--hud-strong); stroke-width: 1.4; }
.er-labels text { font-family: var(--f-mono); font-size: 13px; fill: rgba(63, 224, 255, .6); letter-spacing: .05em; }
.er-arc { fill: none; stroke: var(--glow-red); stroke-width: 2; opacity: .8; }
.brackets, .mcallout-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.brk { position: absolute; left: 0; top: 0; width: 60px; height: 60px; opacity: 0; will-change: transform; }
.brk .c { position: absolute; width: 14px; height: 14px; border-color: var(--glow-red); border-style: solid; filter: drop-shadow(0 0 4px rgba(255, 59, 78, .9)); transition: width .4s var(--ease-out), height .4s var(--ease-out); }
.brk .tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; } .brk .tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.brk .bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; } .brk .br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.brk.is-locked .c { width: 20px; height: 20px; }
.brk-label { position: absolute; left: 100%; top: -2px; margin-left: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 9px; white-space: nowrap; color: #C3CFE2; }
.brk-label b { color: var(--red-lite); font-weight: 600; }
.mcallouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.mcallouts g { opacity: 0; }
.mco-line { fill: none; stroke: var(--hud-strong); stroke-width: 1.2; }
.mco-dot { fill: var(--glow-red); filter: drop-shadow(0 0 6px var(--glow-red)); }
.mco-ring { fill: none; stroke: rgba(255, 59, 78, .7); stroke-width: 1; }
.mco-label { position: absolute; left: 0; top: 0; opacity: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid var(--hud); border-radius: 4px; background: rgba(6, 8, 14, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.mco-label b { font-size: 10.5px; color: var(--text); font-weight: 600; }
.mco-label span { font-size: 13px; color: #C3CFE2; }

/* station 02's four sub-steps (the cross-section's captions, compact) */
.station__sub { display: grid; gap: 3px; max-height: 0; overflow: hidden; opacity: 0; font-size: 9.5px; letter-spacing: .07em; color: var(--muted); transition: max-height .6s var(--ease), opacity .5s, margin .6s var(--ease); }
.station.is-active .station__sub { max-height: 120px; opacity: 1; margin-top: 8px; }
.station__sub li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; transition: color .35s; }
.station__sub li.is-done { color: #9aa0a8; }
.station__sub li.is-on { color: var(--text); }
.station__sub li.is-on span { color: var(--red-lite); }
.cap__dot--red { background: var(--glow-red); box-shadow: 0 0 8px var(--glow-red); }
.lh--strip .cap__k { color: var(--red-lite); }

/* ── 02 INSIDE THE STRIP — concept 05's lateral-flow cross-section (flowsim.js), restyled to this concept: a layer of
      the pinned stage, right of the panel (fig2's placement), faded in by a focus pull from the 3D push and zoomed
      into the test line on the way to the micro world. Transparent: the page background is its background. ── */
.strip2d { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.strip2d.is-on { visibility: visible; }
.s2-stage { position: absolute; inset: 0; }
.s2-viz { position: absolute; left: 36%; right: 0; top: 0; bottom: 0; overflow: hidden; }
.s2-zoom { position: absolute; inset: 0; will-change: transform; }
.s2-viz.is-zooming { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }   /* no hard edge while it zooms past the panel side */
.s2-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.s2-zone { position: absolute; left: 0; top: 0; translate: -50% -100%; white-space: nowrap; font-size: 9.5px; color: var(--muted); }
.s2-zone--line { translate: -50% 0; color: var(--red-lite); }
.s2-hud { position: absolute; inset: 0; }
.s2-timer { position: absolute; right: var(--edge); top: calc(var(--nav-h) + 3vh); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--muted); }
.s2-timer .mono { font-size: 9.5px; }
.s2-timer__v { font: 400 26px/1 var(--f-mono); font-stretch: 100%; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.s2-readout { position: absolute; right: var(--edge); top: calc(var(--nav-h) + 3vh + 70px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 14px 16px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(14, 16, 20, .84); color: var(--muted); opacity: 0; }
.s2-readout .mono { font-size: 9.5px; }
.s2-value { display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.s2-value b { font: 500 clamp(34px, 3.4vw, 54px)/1 var(--f-mono); font-stretch: 100%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--glow-red); text-shadow: 0 0 18px rgba(255, 59, 78, .35); }
.s2-value small { font-size: 12px; }
.s2-legend { position: absolute; right: var(--edge); bottom: 5vh; display: flex; gap: 22px; font-size: 9.5px; color: var(--muted); }
.s2-legend li { display: flex; align-items: center; gap: 8px; }
.s2-dot { width: 8px; height: 8px; border-radius: 50%; }
.s2-dot--t { background: #78E8FF; box-shadow: 0 0 8px #78E8FF; }
.s2-dot--m { background: var(--glow-red); box-shadow: 0 0 8px var(--glow-red); }
.s2-static-copy { display: none; }
/* while the cross-section owns the frame, the eyepiece corner steps aside for its timer and readout */
/* static (reduced motion / no WebGL): the finished cross-section and its four captions as one block under the panel */
.line__stage.is-static .strip2d { position: relative; inset: auto; z-index: 2; opacity: 1; visibility: visible; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 36px; align-items: center; margin: 0 var(--edge) 10vh; padding-top: 5vh; border-top: 1px solid var(--line); }
.line__stage.is-static .s2-stage { position: relative; inset: auto; height: clamp(380px, 36vw, 540px); }
.line__stage.is-static .s2-viz { left: 0; right: 0; top: 0; bottom: 0; height: auto; }
.line__stage.is-static .s2-hud { inset: auto 12px 0 12px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 26px; }   /* one row under the strip */
.line__stage.is-static .s2-timer, .line__stage.is-static .s2-readout, .line__stage.is-static .s2-legend { position: static; }
.line__stage.is-static .s2-readout { opacity: 1; transform: none; }
.line__stage.is-static .s2-legend { order: -1; margin-right: auto; padding-bottom: 4px; }
.line__stage.is-static .s2-static-copy { display: block; }
.line__stage.is-static .lh--strip { display: none; }
.line__stage.is-static .station__sub { max-height: none; opacity: 1; margin-top: 8px; }
.line__stage.is-static .station__sub li { color: #C9CED6; }
.s2-static-title { margin-top: 12px; font: 800 clamp(26px, 2.6vw, 40px)/.96 var(--f-display); font-variation-settings: "wdth" 96, "wght" 800; text-transform: uppercase; }
.s2-steps { margin-top: 18px; border-top: 1px solid var(--line); }
.s2-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.s2-steps li > .mono { padding-top: 4px; color: var(--red-lite); }
.s2-steps h4 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.s2-steps p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: #BFC5CC; }
html.no-webgl .line__fallback-cas { top: 50vh; }

/* ── 9. SOLUTIONS — Microcosm's POCT Solutions (client request): index · HUD biomarker cards · Pathogen Atlas ──
   Faithful to concept 02; only the type is mapped to this site (Anybody display at a condensed width, Archivo body). */
.sol { position: relative; }
.sol-head { position: relative; padding-top: clamp(110px, 16vh, 170px); padding-bottom: 4vh; }
.sol .sec-head { margin-bottom: 0; }
.sec-head--row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.eyebrow-hud { color: var(--cyan); opacity: .8; padding: 3px 8px; border: 1px solid var(--hud); border-radius: 4px; font-size: 9.5px; letter-spacing: .1em; }
.sol-index { display: grid; gap: 8px; min-width: min(460px, 100%); }
.sol-index a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #0b0f19; transition: border-color .3s, background .3s, transform .4s var(--ease-out); }
.sol-index a:hover { border-color: rgba(255, 59, 78, .6); background: #0e1220; transform: translateX(6px); }
.si-code { font-weight: 700; font-size: 12px; color: var(--red-lite); letter-spacing: .08em; }
.si-t { font-weight: 600; font-size: 16px; }
.si-n { font-size: 9.5px; color: var(--muted); }
.bmcat { position: relative; padding: 12vh 0 14vh; }
.cat-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 56px; align-items: end; margin-bottom: clamp(36px, 6vh, 64px); }
.cat-code { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; }
.cat-code span { display: inline-block; padding: 3px 8px; margin-right: 8px; border-radius: 4px; background: var(--red); color: #fff; font-weight: 700; }
.cat-title { font: 700 clamp(34px, 4vw, 64px)/.96 var(--f-display); font-variation-settings: "wdth" 84, "wght" 720; }
.cat-summary { color: #C3CFE2; font-size: 17.5px; max-width: 58ch; }
/* biomarker cards */
.bm-grid { position: relative; display: grid; gap: 16px; }
.bm-scan { position: absolute; left: -1.5%; right: -1.5%; top: 0; height: 2px; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(63, 224, 255, .9) 18%, #bff4ff 50%, rgba(63, 224, 255, .9) 82%, transparent); box-shadow: 0 0 22px 3px rgba(63, 224, 255, .45); }
.bm-grid--9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-grid--9 .bm-art { aspect-ratio: 5 / 2; }
.bm-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bm-card { position: relative; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 16px; cursor: pointer; background: linear-gradient(180deg, #0c111c, #080b12); border: 1px solid var(--line); transition: transform .55s var(--ease-out), border-color .35s, box-shadow .5s; }
.bm-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 59, 78, .14), transparent 60%); opacity: 0; transition: opacity .5s; }
.bm-card:hover, .bm-card:focus-within { transform: translateY(-8px); border-color: rgba(255, 59, 78, .55); box-shadow: 0 24px 60px -24px rgba(255, 59, 78, .55), 0 0 0 1px rgba(255, 59, 78, .15); }
.bm-card:hover::after, .bm-card:focus-within::after { opacity: 1; }
.bm-meta { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); }
.bm-meta span:first-child { color: var(--cyan); }
.bm-art { margin: 10px -6px 6px; aspect-ratio: 3 / 2; border-radius: 10px; background: radial-gradient(circle at 50% 50%, rgba(63, 224, 255, .06), transparent 70%), repeating-linear-gradient(0deg, rgba(63, 224, 255, .05) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(63, 224, 255, .05) 0 1px, transparent 1px 20px); }
.diagram { width: 100%; height: 100%; overflow: visible; }
.diagram .dl, .diagram .ds, .diagram .da { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .4s, stroke-width .4s; }
.diagram .dl { stroke: rgba(158, 222, 255, .82); stroke-width: 1.3; }
.diagram .ds { stroke: rgba(158, 222, 255, .38); stroke-width: 1.1; }
.diagram .da { stroke: var(--glow-red); stroke-width: 1.6; }
.diagram .dy { fill: none; stroke: #FFC14D; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .4s, stroke-width .4s; }
.diagram .db.dl { fill: rgba(63, 224, 255, .08); } .diagram .db.da { fill: rgba(255, 59, 78, .25); } .diagram .db.dy { fill: rgba(255, 193, 77, .3); }
.diagram .dty { fill: #FFD27A; }
.diagram .dash { stroke-dasharray: 3 4; }
.diagram .dt { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .12em; fill: rgba(170, 186, 210, .85); }
.diagram .dta { fill: var(--red-lite); }
.bm-card .diagram { filter: drop-shadow(0 0 0 rgba(63, 224, 255, 0)); transition: filter .5s; }
.bm-card:hover .diagram { filter: drop-shadow(0 0 5px rgba(63, 224, 255, .5)); }
.bm-card:hover .diagram .dl { stroke: #d8f4ff; }
.bm-card:hover .diagram .da { stroke: #ff6b77; stroke-width: 2; }
.bm-card:hover .diagram .dy { stroke: #FFD27A; stroke-width: 2; }
.bm-short { margin-top: 4px; font: 700 clamp(30px, 2.5vw, 42px)/1 var(--f-display); font-variation-settings: "wdth" 84, "wght" 740; }
.bm-name { margin-top: 8px; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text); }
.bm-teaser { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bm-open { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border-top: 1px solid var(--line); text-align: left; font-size: 10.5px; color: #C3CFE2; transition: color .3s; }
.bm-arr .ico { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.bm-card:hover .bm-open { color: #fff; }
.bm-card:hover .bm-arr .ico { transform: translateX(4px); }
/* Pathogen atlas (transparent: the morphing specimen renders on the one canvas behind) */
.atlas { position: relative; padding: 12vh 0 10vh; }
.cat-head--atlas { margin-bottom: 20px; }
.atlas-grid { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; align-items: center; min-height: 86vh; }
.atlas-list { display: flex; flex-direction: column; gap: 2px; }
.at-group { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 0 14px; font-size: 9px; color: var(--cyan); }
.at-group:first-child { margin-top: 0; }
.at-group i { font-style: normal; color: var(--muted); }
.at-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.atlas-tab { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; text-align: left; transition: background .3s, border-color .3s, color .3s; color: #C3CFE2; }
.atlas-tab:hover { background: rgba(232, 241, 255, .04); color: #fff; }
.atlas-tab[aria-selected="true"] { border-color: rgba(255, 59, 78, .55); background: linear-gradient(90deg, rgba(189, 31, 46, .28), rgba(189, 31, 46, .05)); color: #fff; box-shadow: inset 2px 0 0 var(--glow-red); }
.at-i { font-size: 9.5px; color: var(--muted); }
.atlas-tab[aria-selected="true"] .at-i { color: var(--red-lite); }
.at-n { font: 700 18px/1.12 var(--f-display); font-variation-settings: "wdth" 88, "wght" 680; }
.at-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the group subhead shows it */
.atlas-stage { position: relative; aspect-ratio: 1; width: 100%; max-height: 80vh; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.atlas-stage:active { cursor: grabbing; }
.atlas-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ar-field { fill: none; stroke: var(--hud); stroke-width: 1; }
.ar { stroke: var(--hud); stroke-width: 1; fill: none; } .ar--major { stroke: var(--hud-strong); }
.ar-rot { animation: spin 90s linear infinite; transform-box: view-box; transform-origin: 0 0; }
.ar-cross { stroke: var(--hud-strong); stroke-width: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.atlas-hud { position: absolute; display: flex; flex-direction: column; gap: 2px; font-size: 9px; color: var(--muted); pointer-events: none; max-width: 46%; }
.atlas-hud b { color: var(--text); font-weight: 500; font-size: 10.5px; }
.atlas-hud--tl { left: 2%; top: 2%; } .atlas-hud--tr { right: 2%; top: 2%; text-align: right; }
.atlas-hud--bl { left: 2%; bottom: 2%; } .atlas-hud--br { right: 2%; bottom: 2%; text-align: right; }
.atlas-hud--tl b { color: var(--red-lite); }
.atlas-hint { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); font-size: 9px; color: var(--cyan); opacity: .7; pointer-events: none; white-space: nowrap; }
.atlas-hint span::before { content: '⟵ '; } .atlas-hint span::after { content: ' ⟶'; }
.atlas-stage.is-drag .atlas-hint { opacity: 0; }
.atlas-fallback { display: none; }
html.no-webgl .atlas-fallback { display: block; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ff5a66, #7d0f1d 55%, #2a0610); box-shadow: 0 0 0 10px rgba(255, 59, 78, .12), 0 0 80px rgba(255, 59, 78, .45); outline: 2px dotted rgba(255, 90, 102, .7); outline-offset: 16px; }
.atlas-panel { align-self: center; padding: 26px 26px 28px; border-radius: 16px; background: linear-gradient(180deg, rgba(12, 16, 26, .94), rgba(8, 10, 17, .92)); border: 1px solid var(--line); }
.ap-k { font-size: 10px; color: var(--cyan); }
.ap-title { margin-top: 12px; font: 700 clamp(26px, 2.2vw, 36px)/1.02 var(--f-display); font-variation-settings: "wdth" 84, "wght" 720; }
.ap-text { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: #C3CFE2; }
/* specimen-report drawer */
.drawer { position: fixed; inset: 0; z-index: 1200; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #0d1220, #070a11); border-left: 1px solid var(--line-2); padding: 34px clamp(22px, 4vw, 48px) 48px; box-shadow: -40px 0 80px -20px rgba(0, 0, 0, .8); }
.drawer-panel:focus { outline: none; }
.drawer-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--glow-red), transparent); }
.drawer-close { position: sticky; top: 0; float: right; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(3, 5, 10, .8); font-size: 24px; line-height: 1; z-index: 2; transition: border-color .3s, transform .4s var(--ease-out); }
.drawer-close:hover { border-color: var(--glow-red); transform: rotate(90deg); }
.dr-k { color: var(--cyan); padding-top: 12px; font-size: 10.5px; }
.dr-title { margin-top: 14px; font: 700 clamp(32px, 3.4vw, 50px)/1 var(--f-display); font-variation-settings: "wdth" 84, "wght" 720; }
.dr-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.dr-meta div { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.dr-meta dt { font-size: 9px; color: var(--muted); }
.dr-meta dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; text-transform: capitalize; }
.dr-art { margin: 26px 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle, rgba(63, 224, 255, .07), transparent 70%); aspect-ratio: 3 / 2; }
.dr-text { font-size: 17px; line-height: 1.7; color: #C3CFE2; }
.dr-cta { margin-top: 30px; height: auto; min-height: 54px; padding-top: 12px; padding-bottom: 12px; white-space: normal; }
html.is-locked { overflow: hidden; }

/* ── 10. OUR STORY · EPISODE I (the crawl, concept 04) + TEAM (founders) ─────── */
.team { position: relative; color: var(--story); }
.episode { position: relative; color: var(--story); }
.team .founders { position: relative; z-index: 2; }
html.no-webgl .episode, html.no-webgl .team { background: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 72% 14%, #fff6, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #ffd9a8aa, transparent), radial-gradient(1px 1px at 86% 70%, #fff5, transparent), var(--bg); }
.crawl-stage { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; }
.crawl-eyebrow { position: absolute; left: var(--edge-vw); top: calc(var(--nav-h) + 18px); color: var(--story-dim); font-size: 10.5px; }
.crawl-eyebrow .eyebrow__no { border-color: rgba(244,244,246,.22); color: var(--story); }
.crawl-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 720px); text-align: center; font-family: var(--f-crawl); font-weight: 300; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: .01em; color: var(--story); text-shadow: var(--story-glow); }
/* the Episode I title (client, 05/11/26 — "less flamboyant"): Anybody, uppercase, heavy and wide, solid white with a
   subtle brushed-steel gradient. No neon halo, no flicker, no ignition: it appears big and recedes into the stars. */
.crawl-title { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(94vw, 1240px); margin: 0; transform: translate(-50%, -50%); text-align: center; pointer-events: none; will-change: transform, opacity;
  font-family: var(--f-display); font-weight: 880; font-size: clamp(29px, 7.3vw, 120px); line-height: .96; letter-spacing: .015em; text-transform: uppercase;
  font-variation-settings: "wdth" 132, "wght" 880; }
.ct-line { display: block; white-space: nowrap; color: #E2E5E9;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, rgba(90, 98, 110, .05) 1px 2px, rgba(255, 255, 255, 0) 2px 4px), linear-gradient(180deg, #ECEEF1 0%, #E4E7EB 44%, #CDD2D9 56%, #C9CED6 78%, #D9DDE2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.crawl-viewport { position: absolute; inset: 0; perspective: 380px; perspective-origin: 50% 20%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 42%, #000 100%); mask-image: linear-gradient(to bottom, transparent 8%, #000 42%, #000 100%); }
.crawl { position: absolute; left: 50%; top: 100%; width: min(680px, 84vw); transform-origin: 50% 0%; transform: translateX(-50%) rotateX(26deg) translateY(0); color: var(--story); text-shadow: var(--story-glow); text-align: justify; hyphens: auto; font-family: var(--f-crawl); font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.45; }
.crawl p + p { margin-top: 1.1em; }
.crawl-ep { text-align: center; font-size: .5em; letter-spacing: .4em; color: var(--story); }
.crawl-head { text-align: center; font-family: var(--f-serif); font-weight: 700; font-size: 1.5em; letter-spacing: .06em; text-transform: uppercase; margin-top: .2em !important; }
.episode-name { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; padding: 8vh var(--pad) 12vh; }
.episode-name .namefx { width: min(760px, 100%); margin: 0; border-top: 0; display: grid; justify-items: center; }
.episode-name .namefx__stage { width: 6.2em; font-size: clamp(44px, 5.6vw, 96px); max-width: 100%; }   /* exact width set by JS (fit) */
.episode-name .namefx__eq { justify-content: center; }
.episode-meaning { margin-top: 26px; max-width: 30ch; font-family: var(--f-serif); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--story); text-shadow: var(--story-glow); font-variation-settings: 'opsz' 72, 'SOFT' 100; }
.team-head { position: relative; z-index: 3; /* above .founders: an upright blade passes BEHIND this line, not through it */ display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: 10vh; padding-bottom: 6vh; }
.team-bridge { font-family: var(--f-crawl); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); color: var(--story); text-shadow: var(--story-glow); }
.team { overflow-x: clip; }                 /* the blades may run past the viewport edge: never a horizontal scroll */
.founders { display: grid; gap: 16vh; padding-top: 22vh; padding-bottom: 18vh; max-width: 1140px; }
.founder { display: grid; grid-template-columns: minmax(200px, 400px) minmax(0, 560px); gap: clamp(28px, 5vw, 80px); align-items: center; justify-content: center; }
.founder:nth-child(2) { grid-template-columns: minmax(0, 560px) minmax(200px, 400px); }
.founder:nth-child(2) .portrait { order: 2; }
.founder[data-founder="0"] { row-gap: 26px; }
.founder-info { position: relative; z-index: 4; }
.portrait { position: relative; margin: 0; width: 100%; max-width: 400px; aspect-ratio: 267 / 400; }
.portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: saturate(.94) contrast(1.03); }
.portrait-glow { position: absolute; inset: 12% 6% 0; border-radius: 50% 50% 18% 18%; background: radial-gradient(60% 55% at 50% 40%, rgba(189,31,46,.34), transparent 70%); filter: blur(10px); }
/* ── the founders' lightsabers (client, 05/11/26 — "fix the lightsaber animation"): drawn from the hilt's emitter
      (--ex, --ey ← data-emit) along data-dir and LOCKED on that axis (no sway). Classic red: white core, saturated red
      glow, deep red halo. The core starts a hair inside the emitter (--sink): no gap, nothing past the hilt. The glow
      layers are gradients (no box-shadow), so a mask can fade them softly into the emitter mouth and round the tip.
      Ignition / retraction = scaleY (WAAPI); idle = a glow shimmer (opacity + scaleX — never the blade's geometry). */
.portrait--saber { container-type: inline-size; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* the cut-outs end in the original photos' straight crop edges (bottom; right for the first): feathered away */
.portrait--saber img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 11%); mask-image: linear-gradient(to top, transparent 0, #000 11%); }
.founder:nth-child(1) .portrait--saber img, .founder[data-founder="0"] .portrait--saber img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 11%), linear-gradient(to left, transparent 0, #000 8%), linear-gradient(to right, transparent 0, #000 6%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 11%), linear-gradient(to left, transparent 0, #000 8%), linear-gradient(to right, transparent 0, #000 6%); mask-composite: intersect; }   /* + the left edge: the v6 cloak (and the v5 sleeve) meets it */
.portrait-rim { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .22s ease-out;
  background: radial-gradient(circle at calc(var(--ex) * 100%) calc(var(--ey) * 100%), rgba(255, 30, 45, .78) 0, rgba(255, 30, 45, .3) 12%, rgba(220, 10, 28, .08) 28%, rgba(220, 10, 28, 0) 42%);
  -webkit-mask-image: var(--img); mask-image: var(--img); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fblade { position: absolute; left: calc(var(--ex) * 100%); top: calc(var(--ey) * 100%); width: 0; height: 0; z-index: 3; pointer-events: none;
  --bl: calc(var(--ar) * 122cqw); --bw: 20cqw; --sink: .45cqw; }
.fb-axis { position: absolute; left: 0; top: 0; width: 0; height: 0; }            /* rotated once, to the hilt's axis */
.fb-ign { position: absolute; left: calc(var(--bw) / -2); bottom: calc(-1 * var(--sink)); width: var(--bw); height: calc(var(--bl) + var(--sink));
  transform-origin: 50% 100%; transform: scaleY(0); will-change: transform; }
.fb-ign i { position: absolute; display: block; }
.fb-halo { left: 0; right: 0; top: -3%; bottom: 0; border-radius: 999px; will-change: opacity, transform;
  background: linear-gradient(90deg, rgba(140, 0, 12, 0) 0%, rgba(150, 0, 14, .17) 12%, rgba(178, 2, 18, .38) 28%, rgba(214, 6, 26, .6) 50%, rgba(178, 2, 18, .38) 72%, rgba(150, 0, 14, .17) 88%, rgba(140, 0, 12, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 5cqw, #000 calc(100% - 10cqw), transparent 100%); mask-image: linear-gradient(to top, transparent 0, #000 5cqw, #000 calc(100% - 10cqw), transparent 100%); }
.fb-glow { left: 27%; right: 27%; top: -.9%; bottom: 0; border-radius: 999px; will-change: opacity, transform;
  background: linear-gradient(90deg, rgba(255, 30, 45, 0) 0%, rgba(255, 30, 45, .3) 16%, rgba(255, 30, 45, .78) 32%, #FF1E2D 41%, #FF3341 50%, #FF1E2D 59%, rgba(255, 30, 45, .78) 68%, rgba(255, 30, 45, .3) 84%, rgba(255, 30, 45, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 1.8cqw, #000 calc(100% - 3.4cqw), transparent 100%); mask-image: linear-gradient(to top, transparent 0, #000 1.8cqw, #000 calc(100% - 3.4cqw), transparent 100%); }
.fb-core { left: 45.4%; right: 45.4%; top: .6%; bottom: 0; border-radius: 1.2cqw 1.2cqw 0 0; background: #fff; box-shadow: 0 0 .7cqw .22cqw rgba(255, 255, 255, .9); }
.fb-tip { position: absolute; left: -3.4cqw; bottom: -3.4cqw; width: 6.8cqw; height: 6.8cqw; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, #fff 0, #fff 24%, rgba(255, 150, 158, .92) 40%, rgba(255, 30, 45, .5) 64%, rgba(255, 30, 45, 0)); }
.fb-flare { position: absolute; left: -8cqw; top: -8cqw; width: 16cqw; height: 16cqw; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, #fff 0, rgba(255, 240, 241, .92) 15%, rgba(255, 30, 45, .55) 46%, rgba(255, 30, 45, 0)); }
.portrait--saber.is-lit .portrait-rim { opacity: .85; }
.portrait--saber.is-lit .fb-halo { animation: fbHalo 2.4s ease-in-out .3s infinite; }
.portrait--saber.is-lit .fb-glow { animation: fbGlow .13s linear .3s infinite alternate; }
@keyframes fbHalo { 0%, 100% { opacity: 1; transform: scaleX(1); } 28% { opacity: .87; transform: scaleX(1.05); } 54% { opacity: .96; transform: scaleX(.97); } 79% { opacity: .9; transform: scaleX(1.03); } }
@keyframes fbGlow { from { opacity: 1; transform: scaleX(1); } to { opacity: .9; transform: scaleX(1.035); } }
.portrait--saber.is-static .fb-ign { transform: scaleY(1); }
html.rm .portrait--saber .fb-halo, html.rm .portrait--saber .fb-glow { animation: none !important; }
/* a blue blade (SABER_PORTRAITS blade: 'blue' — founder 1 as a Jedi, 11/11/26): the same layers re-tinted — white core,
   azure glow, deep-blue halo, blue light on him (rim) and behind him (glow) */
.portrait--saber[data-blade="blue"] .portrait-glow { background: radial-gradient(60% 55% at 50% 40%, rgba(30, 110, 230, .3), transparent 70%); }
.portrait--saber[data-blade="blue"] .portrait-rim { background: radial-gradient(circle at calc(var(--ex) * 100%) calc(var(--ey) * 100%), rgba(50, 150, 255, .78) 0, rgba(50, 150, 255, .3) 12%, rgba(16, 100, 235, .08) 28%, rgba(16, 100, 235, 0) 42%); }
.portrait--saber[data-blade="blue"] .fb-halo { background: linear-gradient(90deg, rgba(0, 40, 150, 0) 0%, rgba(0, 48, 170, .17) 12%, rgba(4, 78, 210, .38) 28%, rgba(10, 110, 245, .6) 50%, rgba(4, 78, 210, .38) 72%, rgba(0, 48, 170, .17) 88%, rgba(0, 40, 150, 0) 100%); }
.portrait--saber[data-blade="blue"] .fb-glow { background: linear-gradient(90deg, rgba(40, 150, 255, 0) 0%, rgba(40, 150, 255, .3) 16%, rgba(40, 150, 255, .78) 32%, #2896FF 41%, #4BAAFF 50%, #2896FF 59%, rgba(40, 150, 255, .78) 68%, rgba(40, 150, 255, .3) 84%, rgba(40, 150, 255, 0) 100%); }
.portrait--saber[data-blade="blue"] .fb-tip { background: radial-gradient(closest-side, #fff 0, #fff 24%, rgba(160, 210, 255, .92) 40%, rgba(40, 150, 255, .5) 64%, rgba(40, 150, 255, 0)); }
.portrait--saber[data-blade="blue"] .fb-flare { background: radial-gradient(closest-side, #fff 0, rgba(240, 247, 255, .92) 15%, rgba(40, 150, 255, .55) 46%, rgba(40, 150, 255, 0)); }
/* the "Click / Tap for sound" hint, just above founder 1 — shown until the sound is armed (or while it is off) */
.saber-hint-row { grid-column: 1 / -1; display: flex; justify-content: center; }
.saber-hint { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px;
  border: 1px solid rgba(255, 30, 45, .42); background: rgba(10, 11, 13, .55); color: var(--story); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; transition: border-color .3s, background .3s; }
.saber-hint .ico { width: 15px; height: 15px; }
.saber-hint:hover { border-color: var(--saber); background: rgba(189, 31, 46, .2); }
html.sound-armed .saber-hint-row { display: none; }
.founder-role { color: var(--story-dim); font-size: 10.5px; }
.founder-role em { color: rgba(255, 36, 54, .75); }
.founder-name { margin-top: 10px; font-family: var(--f-serif); font-weight: 420; font-size: clamp(32px, 3vw, 48px); line-height: 1.02; letter-spacing: -.015em; font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1; min-height: 2.04em; }
.name-live .nl { color: rgba(244,235,221,.46); transition: color .35s ease; }
.name-live .nl.is-lit { color: var(--story); animation: nlFlash .9s ease-out; }
.name-live .nl.no-flash { animation: none; }
@keyframes nlFlash { 0% { color: #fff; text-shadow: 0 0 22px rgba(255,170,90,.95), 0 0 6px rgba(255,200,140,.9); } 100% { text-shadow: 0 0 0 rgba(255,170,90,0); } }
.morse { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.morse-lamp { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(189,31,46,.6); background: radial-gradient(circle, #2a0f18, #120609); }
.morse-lamp span { width: 12px; height: 12px; border-radius: 50%; background: #3a1016; transition: background .05s, box-shadow .05s; }
.morse-lamp.is-on span { background: #FFF1DD; box-shadow: 0 0 10px 3px var(--ember), 0 0 26px 8px rgba(255,120,60,.55); }
.morse-code { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; max-width: 520px; }
.morse-code span { display: block; height: 6px; margin: 0 3px; border-radius: 3px; background: rgba(185,168,152,.28); transition: background .12s, box-shadow .12s; }
.morse-code .m-dot { width: 6px; } .morse-code .m-dash { width: 20px; } .morse-code .m-gap { width: 8px; background: none; }
.morse-code .m-word { width: 1px; height: 16px; margin: 0 12px; background: rgba(185,168,152,.4); }
.morse-code span.is-done:not(.m-gap) { background: var(--story); }
.morse-code span.is-now { background: var(--ember); box-shadow: 0 0 10px 2px rgba(255,160,80,.7); }
.founder-bio { margin-top: 20px; color: rgba(244, 244, 246, .86); font-size: 16px; }
.founder-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(244, 244, 246, .2); font-size: 14px; font-weight: 600; transition: border-color .3s, background .3s; }
.founder-link .ico { width: 18px; height: 18px; }
.founder-link:hover { border-color: var(--ember); background: rgba(255,179,92,.08); }

/* ── 11. THE NAME (AFFECT × FACTORY → AFFECTORY, concept 01) ──────────────── */
.namefx { margin-top: 34px; padding: 26px 0 8px; border-top: 1px dashed var(--line); overflow: hidden; }
.namefx__stage { position: relative; height: clamp(62px, 7vw, 112px); }
.namefx__word { position: absolute; top: 0; left: 0; display: flex; font: 800 clamp(44px, 5.6vw, 96px)/1 var(--f-display); font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: 0; white-space: nowrap; }
.namefx__word b { display: inline-block; font-weight: inherit; transition: color .6s, -webkit-text-stroke-color .6s; }
.namefx__word--a { color: var(--text); }
.namefx__word--b { color: transparent; -webkit-text-stroke: 1.5px var(--steel-hi); }
.namefx__word b.is-ct { color: var(--red-hi); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(255,59,78,.6); }
.namefx.is-merged .namefx__word--b b:not(.is-ct) { color: var(--text); -webkit-text-stroke-color: transparent; }
.namefx__script { width: min(380px, 80%); margin-top: 16px; opacity: 0; }
.namefx__script svg { width: 100%; height: auto; }
.namefx__script .lg-script { fill: var(--red); }
.namefx__eq { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; color: var(--muted); }
.namefx__eq span:last-child { color: var(--text); }

/* ── 12. CONTACT — Workshop ───────────────────────────────────────────────── */
.contact { padding: clamp(110px, 15vh, 180px) 0 clamp(90px, 12vh, 140px); }
.contact .wrap { z-index: 1; }
.contact__lede { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.contact__intro { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: #C9CED5; max-width: 52ch; }
.contact__ask { font: 800 clamp(26px, 2.6vw, 40px)/1.05 var(--f-display); font-variation-settings: "wdth" 110, "wght" 800; text-transform: uppercase; color: var(--text); justify-self: end; text-align: right; }
.contact__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.contact__col { display: grid; gap: 22px; min-width: 0; }
/* no form (client, 11/11/26): hours + the lab on the left, the four ways to reach them as big stacked keys on the right */
.contact__col--reach .channels__list { grid-template-columns: 1fr; gap: 14px; }
.contact__col--reach .pbtn { min-height: 84px; }
.contact__grid > *, .spec > *, .atlas-grid > * { min-width: 0; }
.board { border-radius: 8px; padding: 18px 18px 20px; background: linear-gradient(180deg, #151619, #0e0f11); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0,0,0,.9); }
.board__head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 14px; }
.board__rows { display: grid; gap: 8px; }
.board__row { display: flex; gap: 3px; align-items: center; }
.flap { position: relative; width: var(--fw, 26px); height: 40px; flex: none; perspective: 200px; font: 500 20px/40px var(--f-mono); font-stretch: 90%; color: #EDEFF2; text-align: center; }
.flap__half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #1c1e22; }
.flap__half--t { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #25282d, #1d1f23); }
.flap__half--b { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #1a1c20, #222429); }
.flap__half span { position: absolute; left: 0; right: 0; height: 40px; }
.flap__half--t span { top: 0; } .flap__half--b span { bottom: 0; }
.flap__leaf { position: absolute; left: 0; right: 0; top: 0; height: 50%; overflow: hidden; transform-origin: 50% 100%; background: linear-gradient(180deg, #25282d, #1d1f23); border-radius: 3px 3px 0 0; backface-visibility: hidden; }
.flap__leaf span { position: absolute; left: 0; right: 0; top: 0; height: 40px; }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: #050506; z-index: 3; }
.board__row.is-status .flap span { color: var(--led); }
.board__row.is-status.is-closed .flap span { color: #ff8a93; }
.board__status-led { width: 12px; height: 12px; margin-left: 10px; }
.lab { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.012); }
.lab__map svg { width: 100%; height: auto; overflow: visible; }
.lab__map .coast { fill: rgba(215,220,226,.04); stroke: var(--steel); stroke-width: 2.4; }
.lab__map .cross { stroke: var(--red-hi); stroke-width: 2; }
.lab__map .pin { fill: var(--red-hi); }
.lab__map .ring { fill: none; stroke: var(--red-hi); stroke-width: 2; }
.lab__title { font: 800 clamp(22px, 1.9vw, 28px)/1.05 var(--f-display); font-variation-settings: "wdth" 100, "wght" 800; text-transform: uppercase; margin-bottom: 10px; }
.lab__addr a { display: inline-flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 16px; line-height: 1.45; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color .3s; }
.lab__addr a:hover { border-color: var(--red-hi); }
.lab__addr .ico { width: 18px; height: 18px; margin-top: 2px; }
.lab__geo { margin-top: 12px; color: var(--steel-hi); }
.channels__title { color: var(--muted); margin-bottom: 12px; }
.channels__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pbtn { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 8px; min-height: 74px; background: linear-gradient(180deg, #1d2025, #15171a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.06), 0 6px 0 #07080a, 0 14px 24px -10px rgba(0,0,0,.9); transform: translateY(0); transition: transform .12s, box-shadow .12s, background .3s; }
.pbtn:hover { background: linear-gradient(180deg, #23272d, #181a1e); }
.pbtn:active { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.06), 0 1px 0 #07080a, 0 4px 10px -6px rgba(0,0,0,.9); }
.pbtn__cap { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: radial-gradient(circle at 40% 30%, #e1394a, var(--red) 55%, #7d1520); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 3px #0e0f11, 0 0 0 4px rgba(255,255,255,.08); }
.pbtn__txt { display: grid; gap: 2px; font-size: 14.5px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.pbtn__txt em { color: var(--muted); font-size: 9.5px; }

/* ── 13. FOOTER ───────────────────────────────────────────────────────────── */
.foot { overflow: hidden; padding: clamp(56px, 7vw, 90px) 0 28px; }
.foot__gear { position: absolute; right: -110px; top: -150px; width: 520px; height: 520px; pointer-events: none; fill: none; stroke: rgba(215,220,226,.07); stroke-width: .5; }
.foot__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.foot__logo { display: block; width: 150px; margin-bottom: 18px; }
.foot__tag { color: var(--muted); max-width: 34ch; font-size: 15px; }
.foot__nav ul { display: grid; gap: 10px; }
.foot__nav a { color: var(--steel-hi); font-size: 15px; transition: color .3s; }
.foot__nav a:hover { color: #fff; }
.foot__contact { display: grid; gap: 12px; align-content: start; color: var(--steel-hi); }
.foot__contact a:hover { color: #fff; }
.foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.foot__top { display: inline-flex; gap: 8px; align-items: center; color: var(--steel-hi); }
.foot__top .ico { width: 16px; height: 16px; }

/* ── 14. HUD — crosshair cursor + collapsed scroll gauge (in the gutter) ──── */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 850; }
.cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
html.fine.cursor-on .cursor { opacity: 1; }
.cursor__h, .cursor__v { position: absolute; background: var(--steel-hi); }
.cursor__h { left: -11px; top: -.5px; width: 22px; height: 1px; } .cursor__v { left: -.5px; top: -11px; width: 1px; height: 22px; }
.cursor__ring { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border: 1px solid rgba(215,220,226,.35); border-radius: 50%; transition: transform .35s var(--ease-out), border-color .3s, border-radius .35s; }
.cursor.is-hover .cursor__ring { transform: scale(1.55); border-color: var(--red-hi); border-radius: 4px; }
.cursor.is-hover .cursor__h, .cursor.is-hover .cursor__v { background: var(--red-hi); }
.cursor__xy { position: absolute; left: 22px; top: 14px; font-size: 9px; color: var(--muted); white-space: nowrap; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
html.fine.cursor-on body, html.fine.cursor-on a, html.fine.cursor-on button, html.fine.cursor-on .plate, html.fine.cursor-on .bm-card, html.fine.cursor-on [data-atlas-stage] { cursor: none; }
html.fine.cursor-on input, html.fine.cursor-on textarea { cursor: text; }
.gauge { position: fixed; left: 8px; bottom: 12px; display: flex; align-items: center; gap: 0; padding: 4px; border-radius: 40px; background: rgba(10,11,13,.72); box-shadow: 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: auto; transition: opacity .6s, gap .45s var(--ease-out), padding .45s var(--ease-out); }
.gauge.is-on { opacity: 1; }
.gauge.is-open, .gauge:hover { gap: 10px; padding-right: 12px; }
.gauge__svg { width: 44px; height: 44px; overflow: visible; flex: 0 0 auto; }
.gauge__svg circle.bg { fill: rgba(10,11,13,.75); stroke: var(--line-2); }
.gauge__svg line { stroke: var(--steel); stroke-width: 1; } .gauge__svg line.maj { stroke: var(--steel-hi); stroke-width: 1.5; }
.gauge__arc { fill: none; stroke: var(--red-hi); stroke-width: 2; }
.gauge__needle path { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.gauge__needle circle { fill: var(--red-hi); stroke: var(--bg); stroke-width: 1.5; }
.gauge__needle { transform-origin: 50px 50px; }
.gauge__read { display: grid; gap: 2px; font-size: 9px; color: var(--muted); max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--ease-out), opacity .3s; }
.gauge.is-open .gauge__read, .gauge:hover .gauge__read { max-width: 180px; opacity: 1; }
.gauge__read b { color: var(--text); font-weight: 500; }
.gauge__read span:last-child { color: var(--steel-hi); }

/* ── 15. Reduced motion + failsafe ────────────────────────────────────────── */
html.rm .grain, html.rm .hero__hint-tray i, html.rm .ar-rot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .station__cap { max-height: none; opacity: 1; margin-top: 6px; }
  .station { opacity: 1; }
}
html.rm .crawl-stage { height: auto; overflow: visible; padding: calc(var(--nav-h) + 12vh) var(--pad) 6vh; display: grid; justify-items: center; gap: 30px; }
html.rm .crawl-eyebrow { position: relative; left: auto; top: auto; }
html.rm .crawl-intro, html.rm .crawl-title { position: relative; left: auto; top: auto; transform: none; }
html.rm .crawl-title { font-size: clamp(26px, 6.2vw, 92px); }
html.rm .crawl-viewport { position: relative; inset: auto; perspective: none; -webkit-mask-image: none; mask-image: none; overflow: visible; }
html.rm .crawl { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: min(660px, 100%); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; text-align: left; hyphens: manual; }
html.rm .crawl p + p { margin-top: .9em; }
html.rm .crawl-ep { font-size: .62em; }
html.rm .crawl-title { width: min(94vw, 1000px); }
html.rm .line__stage, html.no-webgl .line__stage { height: auto; min-height: 100vh; }
html.rm .line__panel, html.no-webgl .line__panel { position: relative; left: auto; top: auto; bottom: auto; width: min(560px, 100%); margin: 0 0 0 var(--edge); padding: calc(var(--nav-h) + 6vh) 0 8vh; }
html.rm .line__head, html.no-webgl .line__head { min-height: 0; }
html.rm .line__head, html.no-webgl .line__head { display: block; }
html.rm .eye-hud, html.rm .eye-ring, html.rm .brackets, html.rm .mcallouts, html.rm .mcallout-labels, html.rm .line__progress { display: none; }

/* ── 16. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav__status { display: none; }
  .bm-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }        /* 3 + 2, the last two centred */
  .bm-grid--5 .bm-card { grid-column: span 2; }
  .bm-grid--5 .bm-card:nth-of-type(4) { grid-column: 2 / span 2; }
  .bm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-grid { grid-template-columns: minmax(180px, .75fr) minmax(0, 1.4fr); }
  .atlas-panel { grid-column: 1 / -1; }
  .founder { grid-template-columns: minmax(170px, 300px) minmax(0, 1fr); }
  .founder:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(170px, 300px); }   /* keeps each blade clear of its text */
}
/* laptops (≈ 768 px tall): the Line panel — head, five stations + the sub-steps, chrono — must fit */
@media (min-width: 961px) and (max-height: 860px) {
  .line__panel { gap: 12px; top: calc(var(--nav-h) + 2vh); bottom: 3vh; }
  .station { padding: 8px 0; }
  .station__sub { gap: 1px; line-height: 1.35; }
  .chrono { padding-top: 10px; }
  .chrono__dial { width: 56px; height: 56px; }
}
@media (max-width: 960px) {
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__sound { margin-left: auto; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 3px; }
  .nav__sound-lbl { display: none; }
  .nav__burger { margin-left: 0; }
  .nav__logo { width: 92px; }
  .hero__copy { width: auto; right: var(--pad); bottom: 92px; }
  .hero__line--2 { padding-left: 0; }
  .hero__shade { background: linear-gradient(0deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.75) 38%, rgba(10,11,13,0) 62%), linear-gradient(180deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,0) 18%); }
  .hud-tag--tl, .hud-tag--bl { display: none; }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .pillars { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .line__shade { background: linear-gradient(0deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.5) 34%, rgba(10,11,13,0) 55%), linear-gradient(180deg, rgba(10,11,13,.5), rgba(10,11,13,0) 18%); }
  .line__panel { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 3vh; gap: 10px; padding: 16px; border-radius: 8px; background: rgba(12,13,15,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line); }
  .line__panel > .eyebrow { display: none; }
  .line__head { min-height: 120px; }
  .line__title { font-size: 28px; }
  .line__intro { font-size: 14.5px; margin-top: 8px; }
  .cap__t { font-size: 26px; margin-top: 8px; }
  .cap__p { font-size: 14.5px; margin-top: 8px; }
  .stations { grid-template-columns: repeat(5, 1fr); border-top: 0; }
  .station { grid-template-columns: 1fr; padding: 0 0 8px; gap: 2px; border-bottom: 2px solid var(--line); }
  .station.is-active { border-color: var(--red-hi); }
  .station__cap, .station__led, .station__sub { display: none; }
  .s2-viz { left: 0; right: 0; top: calc(var(--nav-h) + 4px); bottom: auto; height: 50vh; }
  .s2-zone, .s2-zone--line { translate: 0 -50%; }
  .s2-timer { right: auto; left: var(--pad); top: calc(var(--nav-h) + 10px); align-items: flex-start; }
  .s2-timer__v { font-size: 20px; }
  .s2-readout { right: var(--pad); left: auto; top: calc(var(--nav-h) + 6px); align-items: flex-end; padding: 8px 11px 7px; gap: 3px; }
  .s2-readout .mono { font-size: 8.5px; }
  .s2-value b { font-size: 26px; }
  .s2-legend { display: none; }
  .s2-viz.is-zooming { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); }
  .line__stage.is-static .strip2d { grid-template-columns: 1fr; margin: 0 var(--pad) 8vh; }
  .line__stage.is-static .s2-stage { height: 560px; }
  .line__stage.is-static .s2-hud { inset: 0 0 auto 0; justify-content: space-between; align-items: flex-start; }   /* phones: timer + readout in the band above the strip */
  .line__stage.is-static .s2-timer { order: -1; }
  .station__name { font-size: 10.5px; font-variation-settings: "wdth" 84, "wght" 800; }
  .chrono { padding-top: 10px; margin-top: 0; }
  .chrono__dial { width: 48px; height: 48px; }
  .line__progress { display: none; }
  .eh-corner { top: calc(var(--nav-h) + 14px); }
  .eh-mag { font-size: 22px; }
  .eh-corner .eh-sub { display: none; }
  .eh-bottom, .eh-focus { display: none; }
  .eye-ring { left: 50%; top: 36%; width: 92vw; height: 92vw; margin: -46vw 0 0 -46vw; }
  .brk-label { display: none; }
  .mco-label { padding: 6px 9px; } .mco-label span { display: none; }
  .sec-head--row { grid-template-columns: 1fr; }
  .cat-head { grid-template-columns: 1fr; }
  .bm-grid--9 .bm-art { aspect-ratio: 3 / 2; }
  .contact__lede, .contact__grid { grid-template-columns: 1fr; }
  .contact__ask { justify-self: start; text-align: left; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .gauge { display: none; }
  .pre__read { grid-template-columns: repeat(2, auto); row-gap: 4px; }
}
@media (max-width: 700px) {
  .founder, .founder:nth-child(2) { grid-template-columns: 1fr; }
  .founder:nth-child(2) .portrait { order: 0; }
  .portrait { max-width: 250px; }
  .founder:nth-child(1) .portrait { justify-self: end; margin-right: 6vw; }
  .founder:nth-child(2) .portrait { justify-self: start; margin-left: 2vw; }
  .saber-hint-row { justify-content: flex-end; }   /* founder 1's blade rises straight up (v3 pose): keep the hint clear of it */
  .fblade { --bl: calc(var(--ar) * 92cqw); }
  .founders { padding-top: 16vh; gap: 12vh; }
  .crawl { font-size: 20px; }
  .crawl-viewport { -webkit-mask-image: linear-gradient(to bottom, transparent 17%, #000 48%, #000 100%); mask-image: linear-gradient(to bottom, transparent 17%, #000 48%, #000 100%); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sec-doc { display: none; }
  .hero__stage { min-height: 600px; }
  .hero__copy { bottom: 78px; }
  .hero__copy .eyebrow { margin-bottom: 16px; font-size: 9.5px; }
  .hero__title { font-size: clamp(30px, 9.1vw, 50px); }
  .hero__line { white-space: normal; }
  .hero__welcome { margin-top: 18px; font-size: 15.5px; }
  .hero__actions { margin-top: 22px; }
  .hero__hint { display: none; }
  .hero__hud { inset: calc(var(--nav-h) + 4px) var(--pad) 64px; }
  .rail { padding-bottom: 12px; }
  .rail__bar { height: 32px; }
  .co__word { font-size: 18px; }
  .co__label .mono { font-size: 8.5px; }
  .mission__lead .ln { white-space: normal; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { grid-template-columns: 52px 1fr 40px; height: 64px; }
  .bm-grid--9, .bm-grid--5, .bm-grid--4 { grid-template-columns: 1fr; }
  .bm-grid--5 .bm-card, .bm-grid--5 .bm-card:nth-of-type(4) { grid-column: auto; }
  .bm-card { padding: 16px; }
  .bm-art, .bm-grid--9 .bm-art { aspect-ratio: 2 / 1; }
  .atlas-grid { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  .atlas-list { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }   /* all 13 at once */
  .at-group { grid-column: 1 / -1; margin: 8px 0 0; padding: 0 2px; }
  .atlas-tab { grid-template-columns: auto minmax(0, 1fr); gap: 8px; border-color: var(--line); padding: 9px 10px; }
  .at-n { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .atlas-stage { order: 2; width: 100%; max-height: none; }
  .atlas-panel { order: 3; padding: 20px 18px; }
  .atlas-hud--br { max-width: 60%; }
  .atlas-hint { top: 3%; bottom: auto; }   /* clear of the two-line morphology note */
  .lab { grid-template-columns: 1fr; }
  .lab__map { max-width: 220px; }
  .channels__list { grid-template-columns: 1fr; }
  .board { padding: 14px 12px 16px; }
  .board__row { gap: 2px; }
  .flap { --fw: 12.5px; height: 24px; font-size: 11px; line-height: 24px; }
  .flap__half span, .flap__leaf span { height: 24px; }
  .board__status-led { width: 9px; height: 9px; margin-left: 7px; }
  .foot__inner { grid-template-columns: 1fr; }
  .pre__hud .pre__dim { display: none; }
}

/* Legibility (lead review, kept from concept 02): mid-size display type gets a little air so letters never touch. */
.cap__t, .cat-title, .ap-title, .dr-title, .bm-short, .station__name { letter-spacing: -.012em; }
.at-n, .si-t, .station__name { letter-spacing: 0; }