/* ===========================================================================
   Upside Down: Roadster flip concept page
   Design language: night test site. Concrete, graphite, instrument lime,
   cold gas cyan, a dusk sky that only ever appears inside the 3D canvas.
   Deliberately not the blue and amber used on Ahmed's X graphics.
   =========================================================================== */

:root{
  /* surfaces */
  --ink:#08090c;
  --ink-2:#0e1116;
  --ink-3:#171b22;
  --line-d:rgba(232,228,220,.14);
  --concrete:#e8e4dc;
  --concrete-2:#dcd7cd;
  --line-l:rgba(12,14,18,.14);

  /* type colours */
  --on-ink:#e8e4dc;
  --on-ink-dim:#9aa1ad;
  --on-light:#15181e;
  --on-light-dim:#5a6069;

  /* accents */
  --lime:#cdf34b;
  --lime-deep:#9cbc22;   /* decoration only: 1.75:1 on concrete, too low for text */
  --lime-ink:#566b06;    /* the text and icon version, 4.7:1 on concrete */
  --vapour:#8fe3f2;
  --alert:#ff6f5e;

  /* rhythm */
  --gut:clamp(20px,5vw,72px);
  --band:clamp(84px,11vw,168px);
  --r:2px;

  /* easing */
  --out:cubic-bezier(.16,1,.3,1);
  --inout:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.56;
  font-variation-settings:"wdth" 100,"wght" 420;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:#111}

.skip{
  position:fixed;top:10px;left:10px;z-index:10000;
  padding:10px 16px;background:var(--lime);color:#111;
  font:600 13px/1 Archivo,sans-serif;border-radius:var(--r);
  transform:translateY(-200%);transition:transform .25s var(--out);
}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.mono,.eyebrow,.hud,.chapters span,.beat__no,.stat__src,.facts th,
.topbar,.disclaimer,.marquee,.foot__end,.lab__read span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
}

/* ── top chrome ─────────────────────────────────────────────────────────── */
.rail{position:fixed;inset:0 0 auto 0;height:2px;z-index:900;background:rgba(232,228,220,.1)}
.rail i{display:block;height:100%;width:0;background:var(--lime);transform-origin:0 50%}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:890;
  display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  padding:16px var(--gut) 14px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-dim);
  background:linear-gradient(to bottom,rgba(8,9,12,.92),rgba(8,9,12,0));
  pointer-events:none;
}
.topbar a{pointer-events:auto;text-decoration:none}
.topbar__mark{display:flex;align-items:center;gap:10px;color:var(--on-ink)}
.topbar__ad{
  display:grid;place-content:center;width:26px;height:26px;
  border:1px solid var(--lime);color:var(--lime);
  font-size:10px;letter-spacing:.06em;font-family:"JetBrains Mono",monospace;
}
.topbar__who em{display:block;font-style:normal;color:var(--on-ink-dim);font-size:9.5px}
.topbar__chapter{
  margin-left:auto;color:var(--lime);white-space:nowrap;
  opacity:0;transition:opacity .4s var(--out);
}
body.in-hero .topbar__chapter{opacity:1}
.topbar__chapter span:first-child{color:var(--on-ink-dim);margin-right:8px}
.topbar__nav{display:flex;gap:clamp(10px,2vw,26px)}
.topbar__nav a{position:relative;padding-bottom:3px}
.topbar__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--lime);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--out);
}
.topbar__nav a:hover::after,.topbar__nav a:focus-visible::after{transform:none}
@media (max-width:860px){ .topbar__nav,.topbar__who{display:none} }

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  white-space:nowrap;clip-path:inset(50%);
}
/* the unofficial notice. It has to be readable, not tucked away, so it sits
   inside the sticky hero and stays on screen for the whole scroll scene. */
.disclaimer{
  position:absolute;left:0;right:0;bottom:14px;z-index:5;text-align:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;color:#9aa1ad;
  padding:0 var(--gut);pointer-events:none;
}
@media (max-width:560px){ .disclaimer{font-size:8.5px;letter-spacing:.08em;bottom:10px} }

/* ═══════════════════════════ HERO ═══════════════════════════════════════ */
.hero{position:relative}
.hero__length{height:760vh}
.hero__sticky{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:#05060a;
}
#stage{position:absolute;inset:0;width:100%;height:100%}

/* a touch of film: grade + vignette over the render */
.hero__grade{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 80% at 50% 92%,rgba(193,72,106,.5),transparent 60%);
}
.hero__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 45%,transparent 38%,rgba(2,3,6,.62) 100%),
    linear-gradient(to bottom,rgba(2,3,6,.5),transparent 22%,transparent 72%,rgba(2,3,6,.75));
}

/* opening title */
.title{
  position:absolute;left:var(--gut);bottom:clamp(60px,9vh,110px);
  width:min(640px,calc(100% - var(--gut) * 2));z-index:3;
}
.title__kick{
  display:flex;gap:18px;flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lime);margin-bottom:18px;
}
.title__kick span{display:flex;align-items:center;gap:8px}
.title__kick span+span::before{content:"";width:16px;height:1px;background:var(--line-d)}
.title__h{
  font-size:clamp(42px,8.2vw,104px);line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:"wdth" 108,"wght" 800;
  margin-bottom:22px;
}
.title__h .ln{display:block;overflow:hidden}
.title__h .ln>span{display:block}
.title__h .ln:last-child>span{color:var(--lime)}
.title__sub{max-width:46ch;color:var(--on-ink-dim);font-size:clamp(14px,.35vw + 13px,16px)}
.title__hint{
  display:flex;align-items:center;gap:12px;margin-top:26px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--on-ink-dim);
}
.title__hint i{
  display:block;width:46px;height:1px;background:var(--line-d);position:relative;overflow:hidden;
}
.title__hint i::after{
  content:"";position:absolute;inset:0;background:var(--lime);
  animation:sweep 2.1s var(--inout) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* per-beat captions */
.beats{position:absolute;inset:0;pointer-events:none;z-index:3}
.beat{
  position:absolute;left:var(--gut);bottom:clamp(60px,9vh,110px);
  width:min(560px,calc(100% - var(--gut) * 2));
  opacity:0;
}
.beat__no{
  font-size:10.5px;letter-spacing:.3em;color:var(--lime);margin-bottom:12px;
}
.beat h2{
  font-size:clamp(28px,4.4vw,56px);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:"wdth" 104,"wght" 760;
  margin-bottom:14px;
}
.beat p:last-child{
  max-width:44ch;color:var(--on-ink-dim);font-size:clamp(13.5px,.3vw + 13px,15.5px);
  border-left:1px solid var(--line-d);padding-left:16px;
}

/* chapter rail */
.chapters{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:2px;
}
.chapters button{
  display:flex;align-items:center;gap:12px;justify-content:flex-end;
  padding:6px 0;color:var(--on-ink-dim);
}
.chapters span{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.75;transform:translateX(6px);
  transition:opacity .35s var(--out),transform .35s var(--out),color .35s;
}
.chapters i{
  display:block;width:22px;height:1px;background:currentColor;opacity:.4;
  transition:width .4s var(--out),opacity .35s,background .35s;
}
.chapters button:hover span,.chapters button:focus-visible span{opacity:.9;transform:none}
.chapters button[aria-current="true"]{color:var(--lime)}
.chapters button[aria-current="true"] span{opacity:1;transform:none}
.chapters button[aria-current="true"] i{width:40px;opacity:1;background:var(--lime)}
@media (max-width:720px){ .chapters span{display:none} .chapters{gap:0} }

/* telemetry */
.hud{
  position:absolute;right:var(--gut);bottom:clamp(54px,8vh,96px);z-index:4;
  width:min(236px,46vw);padding:14px 16px 12px;
  border:1px solid var(--line-d);background:rgba(8,9,12,.5);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim);
}
.hud__head{font-size:9px;letter-spacing:.2em;color:var(--on-ink);margin-bottom:12px}
.hud__head em{display:block;font-style:normal;color:#8a919c;letter-spacing:.12em;margin-top:3px}
.hud dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 12px}
.hud dt{opacity:.6;font-size:9px}
.hud dd{margin:2px 0 0;display:flex;align-items:baseline;gap:4px}
.hud dd b{
  font-family:Archivo,sans-serif;font-variation-settings:"wdth" 92,"wght" 700;
  font-size:21px;letter-spacing:-.01em;color:var(--on-ink);
  font-variant-numeric:tabular-nums;
}
.hud dd span{font-size:9px;opacity:.55}
.hud__state{
  border-top:1px solid var(--line-d);padding-top:9px;color:var(--lime);font-size:9.5px;
}
@media (max-width:720px){ .hud{display:none} }

/* reduced motion storyboard */
.storyboard{position:absolute;inset:0;overflow-y:auto;background:#05060a;z-index:6}
.storyboard figure{margin:0;border-bottom:1px solid var(--line-d)}
.storyboard img{width:100%;height:auto}
.storyboard figcaption{padding:18px var(--gut) 30px}
.storyboard h2{
  font-size:clamp(22px,3.4vw,34px);text-transform:uppercase;letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 760;margin-bottom:8px;
}
.storyboard p{max-width:52ch;color:var(--on-ink-dim);font-size:14.5px}

/* ── ticker ─────────────────────────────────────────────────────────────── */
.marquee{
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  background:var(--ink-2);overflow:hidden;padding:13px 0;
}
.marquee__row{display:flex;gap:0;width:max-content;will-change:transform}
.marquee__row span{
  display:flex;align-items:center;gap:26px;padding-right:26px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-ink-dim);
  white-space:nowrap;
}
.marquee__row span::after{content:"";width:5px;height:5px;background:var(--lime);border-radius:50%}

/* ═══════════════════════════ BANDS ═════════════════════════════════════ */
.band{position:relative;padding:var(--band) 0;overflow:clip}
.band--light{background:var(--concrete);color:var(--on-light)}
.band--dark{background:var(--ink-2)}
.band--ink{background:var(--ink)}
.band--light+.band--light{padding-top:0}
.wrap{width:min(1280px,100% - var(--gut) * 2);margin-inline:auto}
.wrap--narrow{width:min(840px,100% - var(--gut) * 2)}

/* light bands get a faint survey grid */
.band--light::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line-l) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-l) 1px,transparent 1px);
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0,#000,transparent 75%);
          mask-image:radial-gradient(90% 70% at 50% 0,#000,transparent 75%);
}
.band>*{position:relative}

.eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime-ink);margin-bottom:20px;
}
.band--dark .eyebrow,.band--ink .eyebrow{color:var(--lime)}
.display{
  font-size:clamp(34px,6.6vw,86px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:"wdth" 108,"wght" 800;
  margin-bottom:34px;max-width:17ch;
}
.display .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.display .w>i{display:inline-block;font-style:normal}
.lede{display:grid;gap:14px;max-width:60ch;margin-bottom:clamp(34px,4vw,56px)}
.lede p{color:var(--on-light-dim)}
.band--dark .lede p,.band--ink .lede p{color:var(--on-ink-dim)}

/* ── physics lab ────────────────────────────────────────────────────────── */
.lab{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  border-top:1px solid var(--line-l);padding-top:clamp(28px,4vw,52px);
}
@media (max-width:900px){ .lab{grid-template-columns:1fr} }
.lab__stage{position:relative}
.loop{width:100%;height:auto}
.loop__track{fill:none;stroke:var(--on-light);stroke-width:4;stroke-linecap:round}
.loop__hatch{fill:none;stroke:var(--on-light);stroke-width:2;stroke-dasharray:2 10;opacity:.3}
#loopCar{fill:var(--on-light);stroke:none}
#loopCar circle{fill:var(--concrete);stroke:var(--on-light);stroke-width:2.5}
#loopArrows path{stroke:var(--lime-ink);stroke-width:3.5;fill:none;stroke-linecap:round}
#loopFall path{stroke:var(--alert);stroke-width:3;fill:none;stroke-linecap:round}
.lab__verdict{
  position:absolute;left:0;bottom:0;
  font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em;text-transform:uppercase;
  font-variation-settings:"wdth" 104,"wght" 780;
}
.lab__verdict[data-fall="1"]{color:var(--alert)}

.lab__panel{border-left:2px solid var(--on-light);padding-left:clamp(18px,2.4vw,30px)}
.band--light .lab__panel{border-color:var(--on-light)}
.lab__read{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.lab__read b{
  font-size:clamp(56px,9vw,104px);line-height:.85;letter-spacing:-.05em;
  font-variation-settings:"wdth" 96,"wght" 820;font-variant-numeric:tabular-nums;
}
.lab__read span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-dim)}
.lab__slider{display:block;margin:22px 0 26px}
.lab__slider>span{
  display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-light-dim);margin-bottom:12px;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;cursor:ew-resize;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(12,14,18,.25)}
input[type=range]::-moz-range-track{height:2px;background:rgba(12,14,18,.25)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;
  background:var(--lime);border:2px solid var(--on-light);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--lime);border:2px solid var(--on-light);
}
.lab__scale li{
  display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line-l);
  font-size:13px;color:var(--on-light-dim);
}
.lab__scale b{
  flex:0 0 52px;color:var(--on-light);font-variation-settings:"wdth" 92,"wght" 700;
  font-variant-numeric:tabular-nums;
}

/* ── stat grid ──────────────────────────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:1px;background:var(--line-l);margin:clamp(44px,6vw,86px) 0 30px;
  border:1px solid var(--line-l);
}
.stat{background:var(--concrete);padding:clamp(20px,2.4vw,30px);transition:background .4s var(--out)}
.stat:hover{background:var(--concrete-2)}
.stat__n{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}
.stat__n b{
  font-size:clamp(44px,5.4vw,66px);line-height:.85;letter-spacing:-.045em;
  font-variation-settings:"wdth" 94,"wght" 820;font-variant-numeric:tabular-nums;
}
.stat__n span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink)}
.stat h3{
  font-size:15px;text-transform:uppercase;letter-spacing:.04em;
  font-variation-settings:"wdth" 100,"wght" 700;margin-bottom:8px;
}
.stat p{font-size:13.5px;color:var(--on-light-dim)}
.stat__src{margin-top:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.caveat{
  max-width:64ch;font-size:13.5px;color:var(--on-light-dim);
  border-left:2px solid var(--lime-deep);padding-left:16px;
}

/* ── telemetry dials, a nod to the gauges on the broadcast ─────────────── */
.gauges{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--line-d);border:1px solid var(--line-d);
  margin-bottom:clamp(28px,3.4vw,46px);
}
.gauge{
  margin:0;background:var(--ink-2);padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px);
  display:grid;justify-items:center;text-align:center;gap:14px;
  transition:background .45s var(--out);
}
.gauge:hover{background:var(--ink-3)}
.gauge svg{width:clamp(96px,11vw,128px);height:auto;overflow:visible}
.gauge__bg,.gauge__fg{fill:none;stroke-width:5;stroke-linecap:round}
.gauge__bg{stroke:rgba(232,228,220,.11)}
.gauge__fg{stroke:var(--lime)}
.gauge__l{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-ink-dim);
}
.gauge__n{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:8px}
.gauge__n b{
  font-size:clamp(34px,4.4vw,52px);line-height:.88;letter-spacing:-.045em;
  font-variation-settings:"wdth" 92,"wght" 820;font-variant-numeric:tabular-nums;
}
.gauge__n span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.gauge__t{
  margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#868d99;
}
.gauge__t em{display:block;font-style:normal;margin-top:4px;color:#6f7681;letter-spacing:.1em}

.tele-note{
  display:grid;gap:14px;max-width:70ch;
  border-left:2px solid var(--vapour);padding-left:18px;
}
.tele-note p{font-size:13.5px;color:var(--on-ink-dim)}
.tele-note b{color:var(--on-ink)}

/* ── quote + verdict cards ──────────────────────────────────────────────── */
.quote{margin:0 0 clamp(40px,5vw,72px)}
.quote p{
  font-size:clamp(28px,5vw,62px);line-height:1.02;letter-spacing:-.035em;
  font-variation-settings:"wdth" 104,"wght" 760;
  max-width:15em;   /* em, not ch: ch here would resolve against the body size */
}
.quote p::before{content:"\201C"}
.quote p::after{content:"\201D"}
.quote footer{
  margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-dim);
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));gap:1px;background:var(--line-d)}
.card{background:var(--ink-2);padding:clamp(22px,2.6vw,34px);position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--line-d);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--out);
}
.card.in::after{transform:none}
.card--yes::after{background:var(--lime)}
.card--no::after{background:var(--alert)}
.card--open::after{background:var(--vapour)}
.card__tag{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:16px;
}
.card--yes .card__tag{color:var(--lime)}
.card--no .card__tag{color:var(--alert)}
.card--open .card__tag{color:var(--vapour)}
.card h3{
  font-size:clamp(19px,2.1vw,25px);line-height:1.1;letter-spacing:-.02em;
  text-transform:uppercase;font-variation-settings:"wdth" 102,"wght" 740;margin-bottom:18px;
}
.card li{
  padding:11px 0 11px 20px;border-top:1px solid var(--line-d);position:relative;
  font-size:13.5px;color:var(--on-ink-dim);
}
.card li::before{
  content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:currentColor;opacity:.6;
}

/* ── slip timeline ──────────────────────────────────────────────────────── */
.slip{margin-bottom:clamp(44px,6vw,80px)}
.slip__track{
  position:relative;height:2px;background:var(--line-l);
  margin:70px 0 96px;
}
.slip__track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--lime-deep)}
.slip__mark{
  position:absolute;left:var(--at);top:-14px;transform:translateX(-50%);
  display:block;padding-top:26px;text-align:center;white-space:nowrap;
  font-size:clamp(17px,2vw,26px);letter-spacing:-.02em;
  font-variation-settings:"wdth" 96,"wght" 760;font-variant-numeric:tabular-nums;
}
.slip__mark::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:16px;background:var(--on-light);
}
.slip__mark em{
  display:block;margin-top:5px;font-family:"JetBrains Mono",monospace;font-style:normal;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-dim);
}
.slip__mark--end{color:var(--lime-ink)}
.slip__mark--end::before{background:var(--lime-ink)}
.slip__mark:nth-child(3){top:-58px;padding-top:0;padding-bottom:26px}
.slip__mark:nth-child(3)::before{top:auto;bottom:0}
.slip__gap{max-width:40ch;font-size:15px;color:var(--on-light-dim)}
.slip__gap b{
  font-size:clamp(40px,5vw,60px);line-height:.8;letter-spacing:-.04em;color:var(--on-light);
  font-variation-settings:"wdth" 94,"wght" 820;display:inline-block;margin-right:10px;
  vertical-align:-6px;
}
@media (max-width:620px){
  .slip__track{margin:84px 0 120px}
  .slip__mark{font-size:14px}
  .slip__mark em{font-size:8.5px;letter-spacing:.1em}
}

.then-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.then-now article{background:var(--concrete);padding:clamp(22px,2.6vw,34px)}
.then-now__y{
  font-size:clamp(46px,6.4vw,82px);line-height:.85;letter-spacing:-.05em;
  font-variation-settings:"wdth" 92,"wght" 820;margin-bottom:22px;
}
.then-now dl{display:grid;gap:1px;background:var(--line-l)}
.then-now dl>div{background:var(--concrete);display:flex;justify-content:space-between;gap:16px;padding:12px 0}
.then-now dt{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-dim)}
.then-now dd{margin:0;font-variation-settings:"wdth" 96,"wght" 700;text-align:right}
.then-now__src{margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-dim)}

/* ── tiers ──────────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--line-d);margin-bottom:clamp(34px,4vw,60px)}
.tier{
  background:var(--ink-2);padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px);
  position:relative;overflow:hidden;transition:background .5s var(--out);
}
.tier::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(205,243,75,.1) 50%,transparent 65%);
  transition:opacity .5s;
}
.tier:hover{background:var(--ink-3)}
.tier:hover::before{opacity:1}
.tier h3{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);
  font-family:"JetBrains Mono",monospace;font-weight:500;margin-bottom:26px;
}
.tier__p{display:flex;align-items:baseline;gap:4px}
.tier__p span{font-size:clamp(20px,2.4vw,30px);color:var(--on-ink-dim);font-variation-settings:"wdth" 92,"wght" 600}
.tier__p b{
  font-size:clamp(38px,5.4vw,62px);line-height:.88;letter-spacing:-.045em;
  font-variation-settings:"wdth" 90,"wght" 800;font-variant-numeric:tabular-nums;
}
.tier__p--word{
  font-size:clamp(28px,3.6vw,44px);line-height:.95;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:"wdth" 100,"wght" 780;
}
.tier__pl{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-dim);margin-top:10px}
.tier ul{margin-top:26px}
.tier li{padding:11px 0;border-top:1px solid var(--line-d);font-size:13.5px;color:var(--on-ink-dim)}
.tier--top{background:#11151b}
.tier--top h3{color:var(--vapour)}

.shared{border:1px solid var(--line-d);padding:clamp(22px,2.6vw,34px)}
.shared__h{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-dim);margin-bottom:22px}
.shared ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px}
.shared li{font-size:13.5px;color:var(--on-ink-dim)}
.shared b{
  display:block;font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:-.03em;
  color:var(--on-ink);font-variation-settings:"wdth" 94,"wght" 780;margin-bottom:7px;
  text-transform:uppercase;
}
.shared__src{margin-top:24px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#868d99}

/* ── video facade ───────────────────────────────────────────────────────── */
.facade{margin-bottom:34px}
.facade__btn{
  display:block;width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;
  border:1px solid var(--line-l);text-align:left;
  padding:clamp(20px,3vw,38px);
  background:
    radial-gradient(60% 90% at 78% 30%,rgba(143,227,242,.22),transparent 65%),
    linear-gradient(145deg,#16191f,#0b0d11 60%);
  color:var(--on-ink);
}
.facade__btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  transform:translateX(-30%);transition:transform .9s var(--out);
}
.facade__btn:hover::after,.facade__btn:focus-visible::after{transform:translateX(30%)}
.facade__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(58px,8vw,86px);height:clamp(58px,8vw,86px);border:1px solid var(--lime);border-radius:50%;
  transition:transform .5s var(--out),background .4s;
}
.facade__play::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:14px solid var(--lime);border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.facade__btn:hover .facade__play{transform:translate(-50%,-50%) scale(1.09);background:rgba(205,243,75,.1)}
.facade__t{
  position:absolute;left:clamp(20px,3vw,38px);bottom:clamp(48px,7vw,74px);
  font-size:clamp(20px,2.6vw,32px);letter-spacing:-.025em;text-transform:uppercase;
  font-variation-settings:"wdth" 102,"wght" 760;
}
.facade__s{
  position:absolute;left:clamp(20px,3vw,38px);bottom:clamp(22px,3.4vw,38px);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-dim);
}
.facade iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.facade__note{margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-dim)}

.xlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.xlinks a{
  display:flex;flex-direction:column;gap:6px;background:var(--concrete);
  padding:20px;text-decoration:none;transition:background .35s var(--out),padding-left .35s var(--out);
}
.xlinks a:hover{background:var(--concrete-2);padding-left:26px}
.xlinks span{font-size:16px;font-variation-settings:"wdth" 98,"wght" 700}
.xlinks em{font-family:"JetBrains Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-dim)}

/* ── facts table ────────────────────────────────────────────────────────── */
.facts{width:100%;border-collapse:collapse;text-align:left;margin-bottom:clamp(36px,5vw,64px)}
.facts caption{
  text-align:left;color:var(--on-ink-dim);font-size:13px;max-width:70ch;
  padding-bottom:22px;
}
.facts th{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);
  font-weight:500;padding:0 18px 10px 0;border-bottom:1px solid var(--line-d);
}
.facts td{
  padding:13px 18px 13px 0;border-bottom:1px solid var(--line-d);
  font-size:13.5px;vertical-align:top;color:var(--on-ink-dim);
}
.facts td:first-child{color:var(--on-ink);width:44%}
.facts tr:hover td{color:var(--on-ink)}
@media (max-width:760px){
  .facts thead{display:none}
  .facts tr{display:block;padding:16px 0;border-bottom:1px solid var(--line-d)}
  .facts td{display:block;border:0;padding:0 0 6px}
  .facts td:first-child{width:auto;font-variation-settings:"wdth" 98,"wght" 600}
  .facts td:last-child{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
}
.open{border:1px solid var(--line-d);padding:clamp(20px,2.4vw,30px);max-width:62ch}
.open__h{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--vapour);margin-bottom:16px}
.open li{padding:10px 0;border-top:1px solid var(--line-d);font-size:13.5px;color:var(--on-ink-dim)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);border-top:1px solid var(--line-d);padding:var(--band) 0 40px}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,70px)}
.foot__h{
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-.025em;text-transform:uppercase;
  font-variation-settings:"wdth" 102,"wght" 760;margin-bottom:18px;
}
.foot p{color:var(--on-ink-dim);font-size:14px;margin-bottom:14px;max-width:52ch}
.foot b{color:var(--on-ink)}
.foot__credit{border-left:2px solid var(--lime);padding-left:16px;font-size:13px}
.foot__credit a{color:var(--lime)}
.foot__by a{color:var(--lime);text-decoration:none;border-bottom:1px solid currentColor}
.foot__end{
  display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(44px,6vw,80px);
  padding-top:22px;border-top:1px solid var(--line-d);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#868d99;
}

/* ── scroll-in states (JS adds .in; without JS everything is visible) ──── */
.js [data-rise]{opacity:0;transform:translateY(26px)}
.js [data-rise].in{opacity:1;transform:none;transition:opacity .9s var(--out),transform .9s var(--out)}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hero__length{display:none}
  .hero__sticky{position:static;height:auto;overflow:visible}
  .title{position:static;padding:150px var(--gut) 40px;width:auto;bottom:auto;left:auto}
  .beats,.chapters,.hud,#stage,.hero__grade,.hero__vignette,.title__hint{display:none}
  .disclaimer{position:static;text-align:left;padding:0 var(--gut) 26px}
  [data-rise]{opacity:1;transform:none}
  .storyboard{position:static;overflow:visible}
}