@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #05080d; --cyan: #56d4ff; --amber: #ffae4d; --violet: #9b7bff; --white: #e9eef5;
  --muted: #8d97a6; --line: rgba(233, 238, 245, .14);
  --display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(18px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--white); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--body); font-size: clamp(15px, 1.05vw + 8px, 18px); line-height: 1.55; background: var(--bg); overflow-x: hidden; }
a { color: var(--cyan); }
strong { color: #fff; font-weight: 600; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- stage */
#stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
#gl.ready { opacity: 1; }
#poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .55; transition: opacity 1.2s ease; filter: saturate(.9); }
#poster.gone { opacity: 0; }
/* wide screens: show the whole 4:5 still on the right, where the live engine will appear */
@media (min-aspect-ratio: 1/1) { #poster { object-fit: contain; object-position: 66% 50%; } }
#vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 8, 13, .75) 100%); }
#leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#leaders line { stroke-width: 1; vector-effect: non-scaling-stroke; }
#leaders circle { stroke: none; }

/* ---------- top bar */
.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 16px var(--pad); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { font-family: var(--display); font-weight: 800; font-stretch: 112%; text-decoration: none; color: var(--white); letter-spacing: -.01em; font-size: 17px; }
.brand span { color: var(--cyan); }
.chapters { margin-left: auto; }
.chapters ol { list-style: none; display: flex; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 8, 13, .55); backdrop-filter: blur(10px); }
.chapters a { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 999px; transition: color .3s, background .3s; }
.chapters a:hover, .chapters a:focus-visible { color: var(--white); }
.chapters a.on { color: var(--bg); background: var(--white); }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(5, 8, 13, .55); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; min-height: 32px; }
.pill b { color: var(--cyan); font-weight: 500; }
.pill[aria-pressed="false"] b { color: var(--muted); }
#progress { position: fixed; z-index: 21; left: 0; right: 0; top: 0; height: 2px; }
#progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan), var(--violet), var(--amber)); }
#pt-badge { position: fixed; z-index: 21; right: var(--pad); bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); opacity: 0; transition: opacity .4s; text-transform: uppercase; }
#pt-badge.on { opacity: 1; }
#pt-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-right: 8px; box-shadow: 0 0 10px var(--cyan); }
#loader { position: fixed; z-index: 30; left: var(--pad); bottom: 20px; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; transition: opacity .6s; }
#loader b { color: var(--cyan); font-weight: 500; }
#loader::after { content: ""; display: block; width: 160px; height: 2px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent) 0 0 / 60px 100% no-repeat, var(--line); animation: load 1.4s ease-in-out infinite; }
@keyframes load { from { background-position: -60px 0, 0 0; } to { background-position: 160px 0, 0 0; } }
html.no-webgl #loader::after { display: none; }
#loader.done { opacity: 0; pointer-events: none; }

/* ---------- story: tall scroll space, panels are fixed and driven by the master timeline */
#story { position: relative; z-index: 5; }
.chapter { position: relative; height: 200vh; }
.chapter-long { height: 520vh; }
#ch-hero { height: 150vh; }
#ch-pressure { height: 220vh; }
#ch-ignition { height: 240vh; }
.panel { position: fixed; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(430px, 40vw); opacity: 0; visibility: hidden; pointer-events: none; }
.panel.live { pointer-events: auto; }
@media (min-width: 761px) { .panel-low { top: auto; bottom: clamp(32px, 7vh, 72px); transform: none; width: min(400px, 34vw); } .panel-low h2 { font-size: clamp(26px, 2vw + 10px, 40px); } }
.panel h2 { font-family: var(--display); font-weight: 760; font-stretch: 100%; font-size: clamp(28px, 2.6vw + 10px, 50px); line-height: 1.02; letter-spacing: -.025em; margin: .2em 0 .45em; text-wrap: balance; }
.panel p { margin: 0 0 1em; color: #c5ccd6; text-wrap: pretty; }
.panel p.short { display: none; }
.tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; margin: 0 !important; }
.tag-cyan { color: var(--cyan) !important; } .tag-amber { color: var(--amber) !important; } .tag-violet { color: var(--violet) !important; }
.panel-hero { left: var(--pad); top: auto; bottom: clamp(36px, 9vh, 96px); transform: none; width: min(760px, 92vw); opacity: 1; visibility: visible; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan) !important; margin: 0 0 10px !important; }
.kicker span { color: var(--muted); margin-left: 10px; }
h1 { font-family: var(--display); font-weight: 860; font-stretch: 118%; font-size: clamp(54px, 9vw, 150px); line-height: .86; letter-spacing: -.045em; margin: 0 0 .22em; }
h1 .l1 { display: block; font-size: .32em; font-weight: 500; font-stretch: 100%; letter-spacing: -.01em; color: var(--muted); margin-bottom: .12em; }
h1 .l2 { display: block; background: linear-gradient(180deg, #fff 30%, #9fb3c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(16px, .6vw + 12px, 20px); max-width: 34em; }
.cue { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; display: flex; align-items: center; gap: 10px; }
.cue span { width: 1px; height: 28px; background: linear-gradient(var(--cyan), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.3); transform-origin: top; } 50% { transform: scaleY(1); } }

.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; }
.counters-one { grid-template-columns: 1fr; max-width: 260px; }
.counters div { border-top: 1px solid var(--line); padding-top: 10px; }
.counters dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.counters dd { margin: 4px 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 760; font-size: clamp(28px, 2.4vw + 8px, 46px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counters dd span { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.counters-one dd { font-size: clamp(48px, 5vw + 10px, 92px); color: var(--amber); }

/* ---------- part labels */
#labels { list-style: none; margin: 0; padding: 0; position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#labels li { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; white-space: nowrap; font-size: 13px; line-height: 1.2; padding: 5px 9px 6px; border-radius: 7px; background: rgba(5, 8, 13, .72); box-shadow: inset 0 0 0 1px rgba(233, 238, 245, .08); }
#labels li .n { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-right: 6px; }
#labels li .t { font-weight: 600; color: var(--white); }
#labels li .s { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }
#labels li.right { text-align: left; }
#labels li.left { text-align: right; }
#labels li[data-accent="cyan"] .t { color: var(--cyan); }
#labels li[data-accent="amber"] .t { color: var(--amber); }
#labels li[data-accent="violet"] .t { color: var(--violet); }

/* ---------- close */
.chapter-close { height: auto; min-height: 100vh; padding: 22vh var(--pad) 80px; background: linear-gradient(180deg, transparent 0, rgba(5, 8, 13, .65) 18vh, rgba(5, 8, 13, .92) 60vh); }
.close-wrap { max-width: 1120px; margin: 0 auto; }
.close-wrap h2 { font-family: var(--display); font-weight: 820; font-stretch: 112%; font-size: clamp(34px, 4vw + 8px, 72px); letter-spacing: -.035em; line-height: 1; margin: .2em 0 .6em; }
.facts { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts li { background: rgba(8, 12, 19, .92); padding: 26px 24px; }
.facts b { display: block; font-family: var(--display); font-stretch: 112%; font-weight: 780; font-size: clamp(30px, 2.6vw + 8px, 52px); letter-spacing: -.03em; line-height: 1; }
.facts li:nth-child(1) b { color: var(--amber); } .facts li:nth-child(2) b { color: var(--violet); } .facts li:nth-child(4) b { color: var(--cyan); }
.facts span { display: block; color: var(--muted); margin-top: 8px; font-size: 14px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credit { margin: 0; max-width: 34em; color: #c5ccd6; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--white); text-decoration: none; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.btn:hover, .btn:focus-visible { border-color: var(--cyan); }
.btn-solid { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.btn-solid:hover, .btn-solid:focus-visible { background: #fff; border-color: #fff; }
.sources { margin-top: 40px; font-size: 14px; color: var(--muted); }
.sources h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--white); font-weight: 500; }
.sources ol { padding-left: 1.3em; }
.sources li { margin-bottom: 6px; }
.sources a { color: #b9c6d6; }
.note { font-size: 12.5px; }
.nojs { position: relative; z-index: 9; padding: 20px var(--pad); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- record mode (reels) */
#rec-overlay { display: none; }
html.rec, html.rec body { overflow: hidden; height: 100%; }
html.rec .topbar, html.rec #progress, html.rec #loader, html.rec #pt-badge, html.rec .cue, html.rec .skip, html.rec #poster { display: none !important; }
html.rec #story { position: fixed; inset: 0; height: 100%; }
html.rec .chapter { height: 0; }
html.rec #facts { position: fixed; inset: 0; height: 100%; min-height: 0; padding: 0; background: none; }
html.rec .close-wrap { display: none; }
html.rec #rec-overlay { display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none; }
html.rec .rec-brand { position: absolute; top: 4.2vh; left: 6vw; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 4.2vw; color: var(--white); }
html.rec .rec-title { position: absolute; top: 4.5vh; right: 6vw; font-family: var(--mono); font-size: 2.6vw; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
html.rec .panel { left: 6vw; right: 6vw; width: auto; top: auto; bottom: 7vh; transform: none; }
html.rec .panel h2 { font-size: 8.4vw; }
html.rec .panel p { font-size: 3.7vw; line-height: 1.38; }
html.rec .panel .tag { font-size: 2.8vw; }
html.rec .panel-hero { bottom: 9vh; }
html.rec h1 { font-size: 17vw; }
html.rec #labels li .s { display: none; }
html.rec #gl { transition: none; }
html.rec #vignette { background: linear-gradient(to top, rgba(5, 8, 13, .95) 0, rgba(5, 8, 13, .6) 28%, transparent 50%), linear-gradient(to bottom, rgba(5, 8, 13, .7) 0, transparent 12%); }
html.rec.fmt-4x5 #vignette { background: linear-gradient(to right, rgba(5, 8, 13, .9) 0, rgba(5, 8, 13, .5) 38%, transparent 60%), linear-gradient(to bottom, rgba(5, 8, 13, .7) 0, transparent 14%); }
html.rec .lede { font-size: 4vw; }
/* reels use one short line per chapter instead of the long web copy */
html.rec .panel p:not(.tag):not(.kicker):not(.short) { display: none; }
html.rec .panel p.short { display: block; font-size: 4.6vw; line-height: 1.3; color: #d9dee6; max-width: 20em; }
html.rec.fmt-4x5 .panel p.short { font-size: 3.2vw; }
/* Instagram 9:16 safe zones: top 250 px, bottom 420 px, right 150 px (of 1080x1920) */
html.rec.fmt-9x16 .rec-brand, html.rec.fmt-9x16 .rec-title { top: 14vh; }
html.rec.fmt-9x16 .rec-title { right: 14vw; }
html.rec.fmt-9x16 .panel, html.rec.fmt-9x16 .panel-hero { bottom: 22.5vh; right: 14vw; }
html.rec.fmt-9x16 .rec-end { bottom: 22.5vh; right: 14vw; }
html.rec.fmt-9x16 h1, html.rec.fmt-9x16 .rec-end h2 { font-size: 15vw; }
html.rec.fmt-9x16 #vignette { background: linear-gradient(to top, rgba(5, 8, 13, .92) 0, rgba(5, 8, 13, .72) 22%, rgba(5, 8, 13, .35) 36%, transparent 50%), linear-gradient(to bottom, rgba(5, 8, 13, .85) 0, rgba(5, 8, 13, .4) 13%, transparent 20%); }
html.rec .counters dt { font-size: 2.4vw; }
html.rec .counters dd { font-size: 8vw; }
html.rec .counters dd span { font-size: 2.6vw; }
html.rec .counters-one dd { font-size: 15vw; }
html.rec #labels li { font-size: 3.1vw; }
html.rec #labels li .n { font-size: 2.4vw; }
html.rec #labels li .s { font-size: 2.4vw; }
html.rec.fmt-4x5 .panel h2 { font-size: 7vw; }
html.rec.fmt-4x5 .panel p { font-size: 3.2vw; }
html.rec.fmt-4x5 .panel { bottom: 6vh; right: 50vw; }
html.rec.fmt-4x5 .panel h2 { font-size: 6vw; }
html.rec.fmt-4x5 .panel p { font-size: 2.7vw; }
html.rec.fmt-4x5 h1 { font-size: 15vw; }
html.rec .rec-end { position: absolute; left: 6vw; right: 6vw; bottom: 9vh; opacity: 0; visibility: hidden; }
html.rec .rec-end h2 { font-family: var(--display); font-weight: 860; font-stretch: 118%; font-size: 17vw; line-height: .9; letter-spacing: -.045em; margin: .1em 0 .2em; }
html.rec .rec-end .tag { font-size: 3vw; color: var(--cyan) !important; }
html.rec .rec-sub { font-size: 4.4vw; color: #c5ccd6; margin: 0 0 2.6vh; }
.rec-credit { display: none; }
html.rec .rec-credit { display: block; margin: 1.6vh 0 0; font-family: var(--mono); font-size: 2.2vw; letter-spacing: .02em; color: var(--muted); }
html.rec .rec-cta { display: flex; flex-direction: column; gap: 1vh; margin: 0; }
html.rec .rec-cta b { font-family: var(--display); font-stretch: 112%; font-size: 6.4vw; color: var(--amber); }
html.rec .rec-cta span { font-family: var(--mono); font-size: 3.6vw; color: var(--white); letter-spacing: .04em; }
html.rec.fmt-4x5 .rec-end h2 { font-size: 13vw; }

/* ---------- small screens */
@media (max-width: 760px) {
  .chapters { display: none; }
  #vignette { background: linear-gradient(to top, rgba(5, 8, 13, .94) 0, rgba(5, 8, 13, .55) 30%, transparent 52%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5, 8, 13, .75) 100%); }
  .topbar { justify-content: space-between; }
  .panel { left: 16px; right: 16px; width: auto; top: auto; bottom: 22px; transform: none; padding: 16px 16px 4px; border-radius: 16px; background: rgba(5, 8, 13, .72); backdrop-filter: blur(12px); border: 1px solid var(--line); }
  .panel h2 { font-size: 27px; }
  .panel p { font-size: 15px; }
  .panel-hero { background: none; border: 0; backdrop-filter: none; padding: 0; bottom: 28px; }
  .counters { gap: 8px; }
  .counters dd { font-size: 26px; }
  .counters dt { font-size: 9.5px; }
  .counters-one dd { font-size: 44px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 18px 16px; }
  #labels li { font-size: 11.5px; }
  #labels li .s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cue span, #loader::after { animation: none; }
  #gl, #poster { transition: none; }
}
html.rec.fmt-9x16 .panel h2 { font-size: 7.6vw; }
html.rec.fmt-9x16 .counters { gap: 3vw; }
html.rec.fmt-9x16 .counters dt { font-size: 2.1vw; }
html.rec.fmt-9x16 .counters dd { font-size: 7vw; }
html.rec.fmt-9x16 .counters-one dd { font-size: 15vw; }
html.rec .panel h2, html.rec .panel p, html.rec .rec-end h2, html.rec .rec-sub { text-shadow: 0 2px 22px rgba(5, 8, 13, .95), 0 0 6px rgba(5, 8, 13, .6); }
html.rec .rec-sub { font-size: 4vw; }
/* 4:5 feed format: copy column on the left half */
html.rec.fmt-4x5 .panel { right: 46vw; }
html.rec.fmt-4x5 .panel-hero { right: 6vw; }
html.rec.fmt-4x5 h1 { font-size: 13vw; }
html.rec.fmt-4x5 .panel-hero .kicker span { display: inline; }
html.rec.fmt-4x5 .counters { grid-template-columns: 1fr 1fr; row-gap: 1.6vh; }
html.rec.fmt-4x5 .counters dd { font-size: 6.4vw; }
html.rec.fmt-4x5 .counters dt { font-size: 1.9vw; min-height: 2.7em; }
html.rec.fmt-4x5 .counters-one { grid-template-columns: 1fr; }
html.rec.fmt-4x5 .counters-one dd { font-size: 13vw; }
html.rec.fmt-4x5 .rec-end { right: 44vw; bottom: 7vh; }
html.rec.fmt-4x5 .rec-end h2 { font-size: 9.6vw; white-space: nowrap; }
html.rec.fmt-4x5 .rec-sub { font-size: 3.2vw; }
html.rec.fmt-4x5 .rec-cta b { font-size: 4.6vw; }
html.rec.fmt-4x5 .rec-cta span { font-size: 2.8vw; }
html.rec.fmt-4x5 #vignette { background: linear-gradient(to right, rgba(5, 8, 13, .95) 0, rgba(5, 8, 13, .78) 36%, rgba(5, 8, 13, .3) 52%, transparent 64%), linear-gradient(to bottom, rgba(5, 8, 13, .7) 0, transparent 14%); }

/* ---------- fallback: no WebGL (or the 3D failed to boot). The story becomes a plain article over the still render. */
html.no-webgl #story { padding: 0 var(--pad); }
html.no-webgl #story .chapter { height: auto; min-height: 0; }
html.no-webgl .topbar { background: linear-gradient(rgba(5, 8, 13, .92), rgba(5, 8, 13, 0)); }
html.no-webgl #story #ch-hero { min-height: 92vh; display: flex; align-items: flex-end; padding-bottom: 8vh; }
html.no-webgl .panel { position: relative; inset: auto; transform: none; opacity: 1 !important; visibility: visible !important; width: auto; max-width: 640px; margin: 0 0 10vh; padding: 20px 22px 6px; border-radius: 16px; background: rgba(5, 8, 13, .78); border: 1px solid var(--line); }
html.no-webgl .panel-hero { background: none; border: 0; padding: 0; margin: 0; }
html.no-webgl .panel p.short, html.no-webgl #labels, html.no-webgl .cue, html.no-webgl #photo-toggle, html.no-webgl .chapters { display: none; }
html.no-webgl #poster { position: fixed; opacity: .7; }
html.no-webgl #loader { display: none; }
html.rec.fmt-4x5 .panel-hero { right: 48vw; }
html.rec.fmt-4x5 h1 { font-size: 10vw; }
html.rec.fmt-4x5 .rec-end { right: 50vw; }
html.rec.fmt-4x5 .rec-end h2 { font-size: 8.4vw; }
html.rec.fmt-4x5 .rec-cta b { font-size: 4vw; }
html.rec.fmt-4x5 h1 { font-size: 8.4vw; white-space: nowrap; }
html.rec.fmt-4x5 .panel-hero .kicker { font-size: 1.9vw; white-space: nowrap; }