/* ReferenceKeys landing. Native CSS, no framework.
   Design system: every token lives in :root below and is documented in DESIGN.md (live sheet: design.html).
   Shape rule: panels 14px radius, small tiles 10px, interactive controls full pill. One accent (felt vermilion). */

@font-face{font-family:"Geist";src:url(assets/fonts/geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(assets/fonts/big-shoulders-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(assets/fonts/big-shoulders-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/fonts/geist-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* color: surfaces, text, lines, one accent */
  --bg:#f3f3f1; --bg-2:#e9e9e6; --panel:#fbfbfa; --ink:#141416; --muted:#5b5b62; --faint:#65656c;
  --line:rgba(20,20,22,.12); --accent:#e4492b; --accent-ink:#141416; --accent-soft:rgba(228,73,43,.12);
  /* the stage (hero, gate, dark tiles) is dark in both themes */
  --stage:#0e0e10; --stage-ink:#f4f2ee; --stage-muted:rgba(244,242,238,.66); --stage-faint:rgba(244,242,238,.5); --stage-line:rgba(244,242,238,.16);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 20px 50px -30px rgba(40,30,30,.35);

  /* type: display for words that act as images, sans for reading, mono for numbers and labels */
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-wordmark:clamp(58px,16.2vw,212px); --t-gate:clamp(64px,15vw,200px); --t-numeral:clamp(4rem,9vw,7.5rem);
  --t-h2:clamp(2.6rem,5.4vw,4.6rem); --t-claim:clamp(1.5rem,2.6vw,2.2rem); --t-stat:clamp(1.6rem,2.6vw,2.3rem);
  --t-h3-lg:clamp(1.4rem,2.2vw,1.8rem); --t-h3:1.15rem; --t-lead:1.08rem; --t-body:16px;
  --t-small:14px; --t-caption:13px; --t-micro:12px; --t-axis:11px;

  /* space: 4px base; sections and gutters are fluid */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:96px;
  --section:clamp(72px,10vw,128px); --gutter:clamp(16px,4vw,40px); --max:1240px;

  /* shape and motion */
  --r:14px; --r-sm:10px; --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --dur-1:.25s; --dur-2:.5s; --dur-3:.9s;
  /* z-index scale: nav 10, skip 20, gate 30 */
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f0f11; --bg-2:#16161a; --panel:#18181c; --ink:#ecece8; --muted:#a2a2aa; --faint:#8b8b94;
    --line:rgba(236,236,232,.11); --accent:#ff5d3d; --accent-ink:#141416; --accent-soft:rgba(255,93,61,.14);
    --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -30px rgba(0,0,0,.8);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:var(--pill);text-decoration:none}
.skip:focus{top:12px}

/* icons: Phosphor (MIT) used as masks so they follow currentColor */
.icon{display:inline-block;width:1.15em;height:1.15em;background:currentColor;flex:none;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-play{--i:url(assets/icons/play.svg)} .i-pause{--i:url(assets/icons/pause.svg)}
.i-download{--i:url(assets/icons/download-simple.svg)} .i-waveform{--i:url(assets/icons/waveform.svg)}
.i-translate{--i:url(assets/icons/translate.svg)} .i-github{--i:url(assets/icons/github-logo.svg)}
.i-arrow-right{--i:url(assets/icons/arrow-right.svg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;padding:.85em 1.35em;border-radius:var(--pill);font-weight:500;text-decoration:none;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,border-color .25s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:color-mix(in oklab,var(--accent) 88%,var(--ink))}
.btn--ghost{border-color:var(--line);background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:.55em 1em;font-size:14px}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav__in{height:64px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__word{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.brand__mark{display:flex;align-items:flex-end;gap:2px;height:18px}
.brand__mark i{width:3px;border-radius:2px;background:var(--ink)}
.brand__mark i:nth-child(1){height:40%}.brand__mark i:nth-child(2){height:75%}.brand__mark i:nth-child(3){height:100%;background:var(--accent)}.brand__mark i:nth-child(4){height:60%}.brand__mark i:nth-child(5){height:30%}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14px}
.nav__links a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:var(--pill);padding:.45em .8em;font-size:13px;font-family:var(--mono)}
.lang:hover{border-color:var(--ink)}
@media (max-width:860px){.nav__links{display:none}.nav__actions{margin-left:auto}}
@media (max-width:420px){.nav .btn--sm span:last-child{display:none}}


/* type */
.eyebrow{font:500 var(--t-micro) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.h2{font-family:var(--display);text-transform:uppercase;font-size:var(--t-h2);letter-spacing:-.005em;line-height:.92;font-weight:800;margin:0 0 18px;max-width:16ch}
.h3{font-size:var(--t-h3);letter-spacing:-.01em;font-weight:600;margin:0 0 8px}
.lead{color:var(--muted);font-size:var(--t-lead);max-width:58ch;margin:0 0 32px}
.lead--sm{font-size:1rem;margin-bottom:22px}

/* compare */
.compare{padding-bottom:var(--section)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{border:1px solid var(--line);background:none;border-radius:var(--pill);padding:.55em 1.05em;font-size:14px;color:var(--muted);transition:all .25s var(--ease)}
.tab:hover{color:var(--ink);border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.board{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:18px}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 16px;box-shadow:var(--shadow)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--line)}
.chart .axis text{fill:var(--faint);font:var(--t-axis) var(--mono)}
.chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .ln--ref{stroke:var(--ink)}
.chart .ln--before{stroke:var(--faint);stroke-dasharray:4 5;stroke-width:1.8}
.chart .ln--after{stroke:var(--accent);stroke-width:2.8}
.chart .gap{fill:var(--accent-soft)}
.chart .dot{fill:var(--accent)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:var(--t-caption);color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:8px}.lg b{font-weight:500}
.lg i{width:18px;height:0;border-top:2px solid}
.lg--ref i{border-color:var(--ink)}.lg--before i{border-color:var(--faint);border-top-style:dashed}.lg--after i{border-color:var(--accent);border-top-width:3px}
.metrics{margin:0;display:grid;grid-template-rows:repeat(4,1fr);gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 20px;box-shadow:var(--shadow)}
.metric{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.metric:first-child{border-top:0}
.metric dt{font-size:13px;color:var(--muted)}
.metric dd{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.metric .v-after{font:500 1.5rem var(--mono);letter-spacing:-.02em;color:var(--accent)}
.metric .v-ref{font:13px var(--mono);color:var(--muted)}
.metric .v-before{font:13px var(--mono);color:var(--faint);text-decoration:line-through}
.note{font-size:var(--t-caption);color:var(--faint);margin:14px 0 0;max-width:80ch}
@media (max-width:900px){.board{grid-template-columns:1fr}.metrics{grid-template-rows:none;grid-template-columns:1fr 1fr;column-gap:20px}.metric:nth-child(2){border-top:0}}

/* listen */
.listen{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--section) 0}
.ab{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-bottom:clamp(56px,8vw,96px)}
.ab__play{width:72px;height:72px;border-radius:var(--pill);border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:26px;transition:transform .3s var(--ease)}
.ab__play:hover{transform:scale(1.05)}.ab__play:active{transform:scale(.96)}
.ab__body{min-width:0}
.wave{width:100%;height:84px;cursor:pointer}
.wave--sm{height:40px}
.ab__row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px}
.ab__time{font-size:13px;color:var(--muted)}
.seg{display:inline-flex;padding:3px;border-radius:var(--pill);border:1px solid var(--line);background:var(--bg)}
.seg__btn{border:0;background:none;border-radius:var(--pill);padding:.45em 1.2em;font:500 14px var(--mono);color:var(--muted);transition:all .25s var(--ease)}
.seg__btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.takes__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.take{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.take div{display:flex;flex-direction:column;line-height:1.3;min-width:120px}
.take div b{font-weight:500;font-size:15px}.take div span{font-size:13px;color:var(--muted)}
.take__play{width:44px;height:44px;border-radius:var(--pill);border:1px solid var(--line);background:none;display:grid;place-items:center;transition:all .25s var(--ease)}
.take__play:hover,.take.is-playing .take__play{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){.ab{grid-template-columns:1fr}.ab__play{width:60px;height:60px}.takes__grid{grid-template-columns:1fr}}

/* method bento */
.method{padding-top:var(--section);padding-bottom:var(--section)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:26px}
.cell{border-radius:var(--r);border:1px solid var(--line);background:var(--panel);padding:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.cell p{color:var(--muted);margin:0;max-width:44ch}
.cell--vel{grid-column:span 4}
.cell--accent{grid-column:span 2;background:var(--accent);border-color:transparent;color:var(--accent-ink);justify-content:flex-end;min-height:260px}
.cell--accent p{color:color-mix(in oklab,var(--accent-ink) 82%,var(--accent))}
.cell--spec{grid-column:span 3}
.cell--tune{grid-column:span 3;background:repeating-linear-gradient(90deg,transparent 0 23px,var(--line) 23px 24px),var(--panel)}
#velChart{width:100%;height:230px;margin-top:18px}
#miniSpec{width:100%;height:120px;margin-top:20px;border-radius:var(--r-sm)}
.knobs{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knobs li{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.knobs b{font-size:15px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:6px}
.knobs .icon{width:.9em;height:.9em;color:var(--accent)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.cell--vel,.cell--accent,.cell--spec,.cell--tune{grid-column:auto}.cell--accent{min-height:200px}}

/* presets */
.presets{padding-bottom:var(--section)}
.groups{display:grid;grid-template-columns:1.3fr 1fr;gap:40px 56px;margin-top:30px}
.group .h3{font-size:1rem;color:var(--muted);font-weight:500}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line);border-radius:var(--pill);padding:.5em 1em;font-size:15px;background:var(--panel)}
.chips--hot li{border-color:var(--accent);color:var(--ink);background:var(--accent-soft);font-weight:500}
@media (max-width:760px){.groups{grid-template-columns:1fr}}

/* install */
.install{border-top:1px solid var(--line);padding:var(--section) 0}
.install__in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:start}
.steps{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:18px;counter-reset:s}
.steps li{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline}
.steps b{font-weight:600}.steps span{color:var(--muted)}
.code{position:relative;background:#111114;color:#e9e9e5;border:1px solid var(--line);border-radius:var(--r);padding:56px 22px 22px;overflow:auto}
.code pre{margin:0;font:13px/1.9 var(--mono);white-space:pre}
.code__copy{position:absolute;top:14px;right:14px;border:1px solid rgba(233,233,229,.3);background:none;color:#e9e9e5;border-radius:var(--pill);padding:.35em .9em;font:12px var(--mono)}
.code__copy:hover{border-color:#e9e9e5}
@media (max-width:900px){.install__in{grid-template-columns:1fr}.steps li{grid-template-columns:90px 1fr}}

/* footer */
.foot{padding:var(--s-7) 0 56px;border-top:1px solid var(--line);font-size:var(--t-small);color:var(--muted)}
.foot p{margin:0 0 8px;max-width:72ch}
.foot__small{font-size:var(--t-micro);color:var(--faint)}
.foot__row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;color:var(--ink)}
.foot__gh{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.foot__gh:hover{color:var(--accent)}

/* motion: entrance + reveal, disabled under reduced motion */
@media (prefers-reduced-motion:no-preference){
  .reveal-load{opacity:0;transform:translateY(18px);animation:in .9s var(--ease) forwards}
  .hero__sub.reveal-load{animation-delay:.08s}.hero__ctas.reveal-load{animation-delay:.16s}.hero__media.reveal-load{animation-delay:.12s}
  @keyframes in{to{opacity:1;transform:none}}
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
  .chart .ln{transition:d .7s var(--ease)}
  .chart .gap{transition:d .7s var(--ease)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* grid children must be allowed to shrink below their content width */
.hero>*,.board>*,.install__in>*,.groups>*,.bento>*,.ab__body,.take>*{min-width:0}
.code{max-width:100%}
@media (max-width:600px){.chart{padding:14px 10px 12px}.chart .axis text{font-size:22px}.chart .ln{stroke-width:3.4}.chart .ln--after{stroke-width:4.4}}

/* ---------- story: sticky visual + scroll steps ---------- */
.story{padding:clamp(24px,4vw,40px) 0 var(--section)}
.story__photo{display:block;margin:8px 0 clamp(48px,7vw,88px);border:1px solid var(--line)}
.story__photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:contain}
.story__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.story__visual{position:sticky;top:max(96px,calc(50vh - 190px));background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.story__visual svg{width:100%;height:auto;overflow:visible}
.story__visual .ln{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s var(--ease)}
.story__steps{list-style:none;margin:0;padding:0}
/* inactive steps recede by color, not opacity, so every step stays AA readable */
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;color:var(--muted);transition:color var(--dur-2) var(--ease)}
.step.is-active{color:var(--ink)}
.step p{color:var(--faint);margin:0;max-width:42ch;transition:color var(--dur-2) var(--ease)}
.step.is-active p{color:var(--muted)}
.step .h3{font-size:var(--t-h3-lg);letter-spacing:-.02em;margin-bottom:12px}
.story__read{margin-top:14px;font-size:13px;color:var(--muted);min-height:1.6em}
.story__read b{color:var(--accent);font-weight:500}
@media (max-width:900px){
  .story__grid{grid-template-columns:1fr}
  .story__visual{top:72px;z-index:1;padding:12px}
  .step{min-height:56vh;justify-content:flex-start;padding-top:24px}
}

/* ---------- live analyzer ---------- */
.ab{grid-template-columns:auto 1fr;row-gap:20px}
.live{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}
.live__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.live__head b{font-weight:600}
.live__score{font-size:13px;color:var(--muted)}
.live__score strong{color:var(--accent);font-weight:500;font-size:1.25rem}
#liveCanvas{width:100%;height:220px}

/* ---------- photos in listen + method ---------- */
.takes{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,48px);align-items:center}
.takes__photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;border-radius:var(--r);border:1px solid var(--line)}
.takes__body .takes__grid{grid-template-columns:1fr}
.cell--photo{grid-column:span 2;position:relative;color:var(--stage-ink);background:var(--stage);border-color:transparent;justify-content:flex-end;min-height:340px;isolation:isolate}
.cell--photo img{position:absolute;inset:0 0 auto 0;width:100%;height:66%;object-fit:contain;padding:var(--s-5) var(--s-4) 0;z-index:-2}

.cell--photo p{color:var(--stage-muted)}
@media (max-width:900px){.cell--photo{grid-column:auto;min-height:280px}}
@media (max-width:760px){.takes{grid-template-columns:1fr}.takes__photo img{aspect-ratio:16/10}}

@media (prefers-reduced-motion:reduce){.step,.story__visual .ln{transition:none}}

/* ---------- display type: masked line reveal (shared by stage and gate) ---------- */
.wm{display:block;overflow:hidden;padding:.12em 0 .02em;margin-top:-.12em} /* top room keeps accents (Í, É) inside the mask */
.wm>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .wm>span{transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
  .wm+.wm>span{animation-delay:.09s}
  @keyframes rise{to{transform:none}}
  .gated .stage .wm>span{animation-play-state:paused}
}

/* ---------- stage (hero) ---------- */
.stage{background:var(--stage);color:var(--stage-ink);min-height:min(calc(100dvh - 64px),1000px);display:flex}
.stage__in{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);padding-top:clamp(20px,4vh,40px);padding-bottom:clamp(20px,4vh,40px)}
.stage__kicker{margin:0;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--stage-muted)}
.wordmark{margin:0;font:800 var(--t-wordmark)/.8 var(--display);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;display:flex;flex-wrap:wrap}
.wordmark .wm--hot{color:var(--accent)}
.stage__row{display:grid;grid-template-columns:minmax(0,560px);gap:24px 48px;align-items:end}
.stage__claim{margin:0 0 10px;font-size:var(--t-claim);line-height:1.12;letter-spacing:-.025em;font-weight:500;max-width:22ch}
.stage__claim em{font-style:normal;color:var(--accent)}
.stage__sub{margin:0;color:var(--stage-muted);max-width:52ch;font-size:var(--t-small)}
.stage__ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn--lg{padding:1em 1.6em;font-size:16px}
.btn--glass{color:var(--stage-ink);border-color:rgba(244,242,238,.28);background:rgba(244,242,238,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--glass:hover{border-color:var(--stage-ink);background:rgba(244,242,238,.12)}
.scope__bar{height:2px;background:rgba(244,242,238,.12);border-radius:2px;overflow:hidden}
.scope__bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.scope__read strong{color:var(--accent);font-weight:500;font-size:1.35em}
@media (max-width:760px){.stage{min-height:auto}.stage__row{grid-template-columns:1fr}.stage__ctas .btn{flex:1 1 auto;justify-content:center}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
  }
}

/* ---------- gate: sound or silence, also preloads the hero audio ---------- */
.gate{display:none}
.gated{overflow:hidden}
.gated .gate,.gate.is-out{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:clamp(20px,4vh,40px) 16px;background:var(--stage);color:var(--stage-ink)}
.gate__eyebrow{grid-row:1;grid-column:1;margin:0 0 12px;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--stage-muted)}
.gate__title{grid-row:2;grid-column:1;align-self:stretch;margin:0;display:flex;flex-direction:column;justify-content:space-between;font:800 var(--t-gate)/.82 var(--display);text-transform:uppercase;width:100%;pointer-events:none}
.gate__title .wm+.wm{color:var(--accent)}
.gate__mid{grid-row:2;grid-column:1;align-self:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px;z-index:1}
.gate__note{flex-basis:100%;margin:8px 0 0;font-size:var(--t-caption);color:var(--stage-muted)}
.gate__load{grid-row:3;grid-column:1;display:flex;align-items:center;gap:12px;width:min(260px,70vw);font-size:var(--t-axis);color:var(--stage-faint)}
.gate__load i{flex:1;height:1px;background:linear-gradient(90deg,var(--stage-ink) var(--p,0%),rgba(244,242,238,.18) var(--p,0%))}
.gate.is-out{pointer-events:none}
.gate[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
  .gate.is-out{animation:gateOut .9s var(--ease) forwards}
  @keyframes gateOut{to{clip-path:inset(0 0 100% 0)}}
}
@media (prefers-reduced-motion:reduce){.gate.is-out{display:none}}

/* ---------- story: big step numbers, sound, depth zoom on the photo ---------- */
.step__n{display:block;font:800 var(--t-numeral)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--faint);margin-bottom:14px;transition:color .5s var(--ease),-webkit-text-stroke-color .5s}
.step.is-active .step__n{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.hear{align-self:flex-start;margin-top:20px;display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--line);background:var(--panel);border-radius:var(--pill);padding:.6em 1.15em;font-weight:500;transition:all .25s var(--ease)}
.hear:hover{border-color:var(--ink)}
.hear[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hear:active{transform:scale(.98)}
.hear__hint{display:block;margin-top:10px;font-size:var(--t-micro);color:var(--faint)}
.story__photo{overflow:hidden;border-radius:var(--r);view-timeline-name:--photo}
.story__photo img{border-radius:0;border:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .story__photo{animation:aperture linear both;animation-timeline:--photo;animation-range:entry 0% cover 55%}
    .story__photo img{animation:dolly linear both;animation-timeline:--photo;animation-range:entry 0% cover 55%}
    @keyframes aperture{from{clip-path:inset(0 22% round 14px)}to{clip-path:inset(0 0 round 14px)}}
    @keyframes dolly{from{transform:scale(1.4)}to{transform:scale(1)}}
  }
}

/* ---------- the 3D piano behind the page (piano3d.js) ----------
   Painting order does the layering: section backgrounds (not positioned) < fixed canvas (z 0) < content (.wrap, z 1). */
.bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .4s linear}
.bg3d canvas{display:block;width:100%;height:100%}
.bg3d__fallback{position:absolute;right:4vw;top:12vh;height:70vh;width:auto;opacity:.35;transform:perspective(1400px) rotateX(40deg) rotateZ(-14deg)}
.has-3d .bg3d__fallback{display:none}
.wrap,.stage__in{position:relative;z-index:1}
.hud{display:grid;gap:10px;max-width:420px;margin-top:auto}
.scope__read{margin:0;font-size:var(--t-micro);color:var(--stage-muted)}
@media (max-width:900px){.stage{min-height:calc(100dvh - 64px)}.stage__in{padding-bottom:32vh}}

/* ---------- film: shots 2 and 3 (lid opens, dive to the hammers, cut to black) ----------
   piano3d.js sets --f on #film. Each line of text owns a window of --f and fades in and out inside it,
   like a subtitle. The cut is a black plate inside the pinned layer, above the fixed canvas. */
.film{height:420vh;background:var(--stage);color:var(--stage-ink)}
.film__pin{position:sticky;top:0;height:100vh;height:100dvh;pointer-events:none;overflow:hidden}
.film__pin::before{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(rgba(14,14,16,0),rgba(14,14,16,.88))}
.film__sub,.film__stats li{position:absolute;left:50%;bottom:clamp(40px,9vh,96px);width:min(100% - 32px,640px);transform:translateX(-50%) translateY(calc((1 - var(--o)) * 14px));opacity:var(--o);text-align:center;margin:0}
.film__sub{font:800 var(--t-h2)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance;
  --o:clamp(0,min((var(--f,0) - .1) * 9,(.38 - var(--f,0)) * 9),1)}
.film__stats{list-style:none;margin:0;padding:0}
.film__stats li{display:grid;gap:10px;justify-items:center}
.film__stats b{font-size:var(--t-stat);font-weight:500;letter-spacing:-.03em;line-height:1}
.film__stats b small{font-size:var(--t-small);color:var(--stage-muted);letter-spacing:0}
.film__stats span{font-size:var(--t-small);color:var(--stage-muted);max-width:34ch}
.film__stats li:nth-child(1){--o:clamp(0,min((var(--f,0) - .5) * 30,(.6 - var(--f,0)) * 30),1)}
.film__stats li:nth-child(2){--o:clamp(0,min((var(--f,0) - .6) * 30,(.7 - var(--f,0)) * 30),1)}
.film__stats li:nth-child(3){--o:clamp(0,min((var(--f,0) - .7) * 30,(.8 - var(--f,0)) * 30),1)}
.film__stats li:nth-child(4){--o:clamp(0,min((var(--f,0) - .8) * 30,(.9 - var(--f,0)) * 30),1)}
.film__cut{position:absolute;inset:0;background:#000;opacity:clamp(0,(var(--f,0) - .93) * 40,1)}
/* without the scroll film (no WebGL or reduced motion): one still frame with every line visible */
.no-3d .film{height:auto;padding:var(--section) 0}
.no-3d .film__pin{position:static;height:auto;display:grid;gap:var(--s-6);padding:0 var(--gutter)}
.no-3d .film__sub,.no-3d .film__stats li{position:static;transform:none;opacity:1;width:auto;left:auto}
.no-3d .film__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-6)}
.no-3d .film__cut,.no-3d .film__pin::before{display:none}
@media (prefers-reduced-motion:reduce){.film{height:auto;padding:var(--section) 0}.film__pin{position:static;height:auto;display:grid;gap:var(--s-6);padding:0 var(--gutter)}
  .film__sub,.film__stats li{position:static;transform:none;opacity:1;width:auto;left:auto}.film__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-6)}.film__cut,.film__pin::before{display:none}}