/* Passun — one page, three looks (A: the map on paper, B: the flight at night, C: the poster).
   The look is html[data-theme]; everything below reads its colours from the variables. */

/* ================= looks ================= */
[data-theme=A] {
  --bg:#f1eee7; --ink:#131313; --mute:#6f6b63; --soft:#2b2a27; --line:#d9d4c9; --card:#e9e5dc; --accent:#ff4d1a; --on-accent:#fff;
  --font:Geist, system-ui, sans-serif; --font-mono:'Geist Mono', ui-monospace, monospace;
  --map-contour:#dcd6ca; --map-contour-major:#cbc4b6; --map-river:#cdd8da; --map-route:#a39e94; --trail:#ff4d1a; --cone:#ff4d1a;
  --st-ahead:#ddd2c6; --st-seen:#f6a07c; --st-telling:#ff4d1a; --st-known:#c75c35;
  --lbl:#131313; --lbl-sub:#8a4b33; --lbl-hot:#131313; --lbl-known:#8a7e72; --you:#131313; --you-ring:#f1eee7; --you-text:#fff;
  --store-bg:transparent; --store-line:#131313; --store-ink:#131313;
  --wave-music:#cdc6b9; --wave-music-on:#131313; --wave-voice:#ffb49b; --wave-voice-on:#ff4d1a; --wave-head:#ff4d1a; --wave-align:center; --wave-step:4;
  --h-weight:500; --h-stretch:100%; --h-case:none; --h-track:-.035em; --h2-size:clamp(30px,3.4vw,54px);
}
[data-theme=B] {
  --bg:#0c0f11; --ink:#f0ece4; --mute:#8d918f; --soft:#cfcac1; --line:#23292d; --card:#13181b; --accent:#ff5a1f; --on-accent:#fff;
  --font:Archivo, system-ui, sans-serif; --font-mono:Archivo, system-ui, sans-serif;
  --scene-bg:#0c0f11; --scene-contour:#4a555c; --scene-contour-major:#76848d; --scene-river:#15272f; --scene-route:#6b706c; --b3-hidden:#23292d; --b3-hidden-edge:#c3ccd2; --trail:#ff5a1f; --cone:#ff5a1f;
  --b3-ahead:#1d1411; --b3-ahead-edge:#5b2a17; --b3-seen:#7a3316; --b3-seen-edge:#ff8a5c; --b3-telling:#ff5a1f; --b3-telling-edge:#fff1e8; --b3-known:#8d3a19; --b3-known-edge:#ff6a35;
  --map-contour:#2c3338; --map-contour-major:#3f484f; --map-river:#112028; --map-route:#5b5f5c;
  --st-ahead:#2a1c16; --st-seen:#7a3316; --st-telling:#ff5a1f; --st-known:#8d3a19;
  --lbl:#f0ece4; --lbl-sub:#ffb899; --lbl-hot:#fff; --lbl-known:#c98a6f; --you:#fff; --you-ring:rgba(255,90,31,.55); --you-text:#0c0f11;
  --store-bg:transparent; --store-line:rgba(240,236,228,.55); --store-ink:#f0ece4;
  --wave-music:#2c3338; --wave-music-on:#8d918f; --wave-voice:#6b3420; --wave-voice-on:#ff5a1f; --wave-head:#ff5a1f; --wave-align:center; --wave-step:4;
  --h-weight:700; --h-stretch:118%; --h-case:uppercase; --h-track:-.02em; --h2-size:clamp(28px,3.2vw,50px);
}
[data-theme=C] {
  --bg:#ff5b1f; --ink:#121110; --mute:#4a2412; --soft:#121110; --line:rgba(18,17,16,.25); --card:#f6efe3; --accent:#121110; --on-accent:#ff5b1f;
  --font:'Bricolage Grotesque', system-ui, sans-serif; --font-mono:'Bricolage Grotesque', system-ui, sans-serif;
  --map-contour:#e3d9c7; --map-contour-major:#d6cab5; --map-river:#cfdcdf; --map-route:#9a9184; --trail:#121110; --cone:#ff5b1f;
  --st-ahead:#e2d5c1; --st-seen:#ffa27d; --st-telling:#ff5b1f; --st-known:#121110;
  --lbl:#121110; --lbl-sub:#9b3a14; --lbl-hot:#121110; --lbl-known:#5b534b; --you:#121110; --you-ring:#f6efe3; --you-text:#f6efe3;
  --store-bg:#121110; --store-line:#121110; --store-ink:#f6efe3;
  --wave-music:rgba(18,17,16,.32); --wave-music-on:#121110; --wave-voice:rgba(246,239,227,.5); --wave-voice-on:#f6efe3; --wave-head:#121110; --wave-align:center; --wave-step:4;
  --h-weight:800; --h-stretch:75%; --h-case:uppercase; --h-track:-.01em; --h2-size:clamp(40px,5.4vw,92px);
}

/* ================= base ================= */
* { box-sizing:border-box; margin:0; }
figure { margin:0; }
:root { --gut:clamp(16px,3vw,48px); --wrap:1320px; --edge:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); --col:380px; --gap:28px; --t-sub:clamp(17px,1.25vw,19px); --t-body:15px; --t-meta:12.5px; }
html { scroll-behavior:smooth; }
html, body { background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
body { transition:background-color .3s; }
a { color:inherit; }
button { font:inherit; color:inherit; }
img, video, canvas, svg { display:block; max-width:100%; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
h1, h2 { font-weight:var(--h-weight); font-stretch:var(--h-stretch); text-transform:var(--h-case); letter-spacing:var(--h-track); }
[data-theme=C] h1, [data-theme=C] h2 { font-variation-settings:'opsz' 96; }
h1, h2 { text-wrap:balance; }
h2 { font-size:var(--h2-size); line-height:.98; max-width:18em; }
[data-theme=B] h1 { word-spacing:.08em; }
[data-theme=B] h2 { font-stretch:110%; text-transform:none; font-weight:600; letter-spacing:-.01em; word-spacing:.04em; --h2-size:clamp(28px,2.9vw,44px); line-height:1.04; }
.sub { font-size:var(--t-sub); line-height:1.45; color:var(--soft); max-width:38em; }
.sec .head { display:grid; grid-template-columns:minmax(0,1fr) var(--col); gap:20px 48px; align-items:start; }
.sec .head .sub { padding-top:.35em; }
.sec .body { margin-top:clamp(40px,4.4vw,64px); }
.mono { font-family:var(--font-mono); }
.th { display:none; }
[data-theme=A] .th-a, [data-theme=B] .th-b, [data-theme=C] .th-c { display:block; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }

/* ================= stage (hero, captures) ================= */
.stage { position:relative; overflow:hidden; background:var(--map-ground); }
[data-theme=A] { --map-ground:#f1eee7; } [data-theme=B] { --map-ground:#0c0f11; } [data-theme=C] { --map-ground:#f6efe3; }
.overlay { position:absolute; inset:0; pointer-events:none; z-index:2; }
.scene3d, .map2d { position:absolute; inset:0; width:100%; height:100%; display:block; }
.map2d .relief path { fill:none; stroke:var(--map-contour); stroke-width:1; vector-effect:non-scaling-stroke; }
.map2d .relief .major { stroke:var(--map-contour-major); }
.map2d .water path { fill:var(--map-river); }
.map2d .route { fill:none; stroke:var(--map-route); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.map2d .trail { fill:none; stroke:var(--trail); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.map2d .cone { fill:var(--cone); fill-opacity:.12; }
.map2d .ring { fill:none; stroke:var(--trail); stroke-width:2; vector-effect:non-scaling-stroke; }
.map2d .b { fill:var(--st-ahead); stroke:none; transition:fill .4s, stroke .4s; }
.map2d .b[data-st=seen] { fill:var(--st-seen); } .map2d .b[data-st=telling] { fill:var(--st-telling); } .map2d .b[data-st=known] { fill:var(--st-known); }
.map2d .b.line { fill:none; stroke:var(--st-ahead); stroke-width:3.5; vector-effect:non-scaling-stroke; }
.map2d .b.area { fill-opacity:.14; stroke:var(--st-ahead); stroke-width:1.2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.map2d .b.line[data-st=seen], .map2d .b.area[data-st=seen] { stroke:var(--st-seen); }
.map2d .b.line[data-st=telling], .map2d .b.area[data-st=telling] { stroke:var(--st-telling); }
.map2d .b.line[data-st=known], .map2d .b.area[data-st=known] { stroke:var(--st-known); }
.map2d .b[data-st=hidden] { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.lbl { position:absolute; left:0; top:0; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--lbl); padding-bottom:9px; transition:opacity .35s; will-change:transform; }
.lbl::after { content:''; position:absolute; left:50%; bottom:0; width:1px; height:8px; background:currentColor; }
.lbl small { display:block; font-weight:400; font-size:11.5px; color:var(--lbl-sub); }
[data-theme=B] .lbl { text-shadow:0 0 6px #0c0f11, 0 0 2px #0c0f11; }
[data-theme=B] .lbl small { color:#ffc7ad; }
.lbl[data-st=telling] { font-size:15px; color:var(--lbl-hot); }
.lbl[data-st=known] { font-size:11px; font-weight:500; color:var(--lbl-known); }
.lbl[data-st=hidden] { color:var(--lbl-known); }
.you { position:absolute; left:0; top:0; will-change:transform; z-index:3; }
.you i { position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; background:var(--you); box-shadow:0 0 0 3px var(--you-ring); }
.you span { position:absolute; left:14px; top:-24px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px 2px; border-radius:99px; background:var(--you); color:var(--you-text); }

/* ================= hero ================= */
.hero { position:relative; overflow:hidden; }
.hero .brand { font-weight:700; font-size:16px; display:flex; gap:12px; align-items:center; z-index:3; }
.hero .brand a { text-decoration:none; }
.hero .home { font-size:13px; font-weight:500; color:var(--mute); text-decoration:none; }
.hero .home:hover { color:var(--ink); }
.hud { display:flex; flex-direction:column; gap:10px; z-index:3; }
.clock { display:flex; gap:14px; align-items:baseline; font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
.clock b { font-size:26px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.ff { color:var(--accent); font-weight:600; opacity:0; transition:opacity .2s; }
.ff.on { opacity:1; }
.cap { font-size:14.5px; line-height:1.42; border-left:1.5px solid var(--line); padding:2px 0 2px 12px; min-height:4.3em; transition:opacity .3s; }
.cap.off { opacity:0; }
.hero h1 span { display:block; }
.side { display:flex; flex-direction:column; gap:20px; z-index:3; }
.lede { font-size:17px; line-height:1.45; }
.actions { display:flex; gap:14px; align-items:center; }
.sound { flex:none; width:56px; height:56px; border-radius:50%; border:0; background:var(--accent); cursor:pointer; display:grid; place-items:center; }
.sound svg { width:24px; height:24px; fill:none; stroke:var(--on-accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sound .eq { display:none; gap:3px; align-items:flex-end; height:20px; }
.sound .eq i { width:3px; background:var(--on-accent); border-radius:1px; animation:eq .9s ease-in-out infinite; }
.sound .eq i:nth-child(2) { animation-delay:-.3s; } .sound .eq i:nth-child(3) { animation-delay:-.6s; } .sound .eq i:nth-child(4) { animation-delay:-.15s; }
@keyframes eq { 0%,100% { height:5px; } 50% { height:20px; } }
.sound[aria-pressed=true] svg { display:none; }
.sound[aria-pressed=true] .eq { display:flex; }
.sound-text b { display:block; font-weight:600; font-size:15px; }
.sound-text small { font-size:12px; color:var(--mute); }
.store { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; border-radius:var(--radius); height:48px; padding:0 18px 0 15px; font-size:15px; font-weight:600; cursor:pointer; border:1.5px solid var(--store-line); background:var(--store-bg); color:var(--store-ink); }
.store svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chips { display:none; }
canvas.wave { display:block; width:100%; cursor:pointer; }
.scrim { display:none; }

/* A */
[data-theme=A] .hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto 1fr auto auto; grid-template-areas:"brand stage" "copy stage" "wave stage" "hud stage"; }
[data-theme=A] .hero .brand { grid-area:brand; padding:var(--gut) var(--gut) 0 var(--edge); font-weight:600; font-size:17px; }
[data-theme=A] .hero .brand::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--accent); }
[data-theme=A] .hero .copy { grid-area:copy; padding:0 var(--gut) 0 var(--edge); display:flex; flex-direction:column; justify-content:flex-end; gap:26px; }
[data-theme=A] .hero h1 { font-size:clamp(42px,4.8vw,80px); line-height:.98; margin-top:40px; }
[data-theme=A] .hero h1 span + span { color:var(--mute); }
[data-theme=A] .lede { color:var(--soft); max-width:34em; }
[data-theme=A] .side { gap:18px; }
[data-theme=A] .hero canvas.wave { grid-area:wave; height:84px; margin:22px var(--gut) 0 var(--edge); width:calc(100% - var(--gut) - var(--edge)); }
[data-theme=A] .hud { grid-area:hud; padding:14px var(--gut) var(--gut) var(--edge); }
[data-theme=A] .clock b { font-size:20px; }
[data-theme=A] .hero .stage { grid-area:stage; border-left:1px solid var(--line); }
[data-theme=A] .sound-text small, [data-theme=A] .clock { font-family:var(--font-mono); }

/* B */
[data-theme=B] .hero { height:100svh; min-height:660px; display:grid; grid-template-columns:var(--edge) minmax(0,1fr) 48px var(--col) var(--edge); grid-template-rows:auto 1fr auto auto 88px; }
[data-theme=B] .hero .stage { grid-area:1 / 1 / -1 / -1; }
[data-theme=B] .scrim { display:block; grid-area:1 / 1 / -1 / -1; align-self:end; height:64%; background:linear-gradient(to top, rgba(12,15,17,.97) 34%, rgba(12,15,17,0)); pointer-events:none; z-index:1; }
[data-theme=B] .hero .brand { grid-area:1 / 2 / 2 / 5; align-self:start; margin-top:var(--gut); font-stretch:125%; letter-spacing:.02em; text-transform:uppercase; }
[data-theme=B] .hud { grid-area:3 / 4 / 4 / 5; margin-bottom:26px; }
[data-theme=B] .clock b { font-stretch:110%; }
[data-theme=B] .cap { color:#e7e2d8; }
[data-theme=B] .hero .copy { display:contents; }
[data-theme=B] .hero h1 { grid-area:3 / 2 / 5 / 3; align-self:end; margin-bottom:calc(var(--gut) + 8px); z-index:3; }
[data-theme=B] .side { grid-area:4 / 4 / 5 / 5; margin-bottom:calc(var(--gut) + 8px); }
[data-theme=B] .hero h1 { font-size:clamp(40px,4.5vw,76px); line-height:.95; }
[data-theme=B] .hud .cap { min-height:4.3em; }
[data-theme=B] .hero h1 span + span { color:var(--accent); }
[data-theme=B] .lede { color:var(--soft); }
[data-theme=B] .hero canvas.wave { grid-area:5 / 1 / 6 / -1; height:88px; z-index:3; }

/* C */
[data-theme=C] .hero { min-height:100svh; padding:var(--gut) var(--edge); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto auto 1fr auto auto; grid-template-areas:"brand brand" "copy stage" "side stage" "side hud" "wave wave"; column-gap:clamp(24px,4vw,64px); }
[data-theme=C] .hero .copy { display:contents; }
[data-theme=C] .hero .brand { grid-area:brand; font-size:15px; font-weight:600; }
[data-theme=C] .hero h1 { grid-area:copy; font-size:clamp(60px,9.6vw,168px); line-height:.84; margin-top:clamp(40px,6vh,72px); position:relative; z-index:1; }
[data-theme=C] .side { grid-area:side; align-self:end; margin-top:36px; font-weight:500; }

[data-theme=C] .sound-text b { font-size:20px; font-weight:700; }
[data-theme=C] .sound-text small { color:var(--ink); font-size:13.5px; }
[data-theme=C] .lede { max-width:32em; font-size:clamp(17px,1.3vw,20px); line-height:1.4; }
[data-theme=C] .hero .stage { grid-area:stage; align-self:start; margin-top:clamp(20px,4vh,48px); aspect-ratio:4/5; max-height:64svh; justify-self:end; width:100%; max-width:470px; background:var(--card); transform:rotate(-3deg); box-shadow:0 1px 0 rgba(0,0,0,.08), 0 22px 44px -20px rgba(60,20,0,.5); z-index:2; }
[data-theme=C] .hud { grid-area:hud; margin-top:26px; justify-self:end; width:100%; max-width:470px; }
[data-theme=C] .clock, [data-theme=C] .ff { color:var(--ink); } [data-theme=C] .cap { border-left-color:var(--ink); font-weight:500; }
[data-theme=C] .hero canvas.wave { grid-area:wave; height:clamp(90px,13vh,140px); margin-top:28px; }
[data-theme=C] .chips { display:block; position:absolute; inset:0; pointer-events:none; z-index:3; }
[data-theme=C] .chip { position:absolute; width:clamp(104px,9vw,140px); aspect-ratio:1; background:var(--card); box-shadow:0 1px 0 rgba(0,0,0,.08), 0 16px 34px -18px rgba(60,20,0,.5); }
[data-theme=C] .chip svg { width:100%; height:100%; padding:14px 14px 30px; }
[data-theme=C] .chip path { fill:#cdbfa9; transition:fill .4s; }
[data-theme=C] .chip[data-st=telling] path { fill:#ff5b1f; } [data-theme=C] .chip[data-st=known] path { fill:#121110; }
[data-theme=C] .chip figcaption { position:absolute; left:10px; right:8px; bottom:8px; font-size:11.5px; font-weight:600; line-height:1.15; }
[data-theme=C] .chip:nth-child(1) { left:51%; top:36%; transform:rotate(5deg); }
[data-theme=C] .chip:nth-child(2) { left:47.5%; top:9%; transform:rotate(-6deg); }
[data-theme=C] .chip:nth-child(3) { left:42%; top:58%; transform:rotate(3deg); }

/* ================= sections ================= */
.sec { padding:clamp(88px,11vw,160px) 0 0; }
[data-theme=A] .sec > .wrap { border-top:1px solid var(--line); padding-top:28px; }
[data-theme=B] .sec h2 { color:var(--ink); }
.frame { position:relative; overflow:hidden; border-radius:var(--radius, 0); background:var(--card); box-shadow:0 0 0 1px var(--line); }
[data-theme=A] { --radius:6px; } [data-theme=B] { --radius:10px; } [data-theme=C] { --radius:0; }
[data-theme=C] .frame { box-shadow:0 0 0 1px rgba(18,17,16,.12), 0 22px 44px -22px rgba(60,20,0,.45); }
.frame img, .frame video { width:100%; height:100%; object-fit:cover; }

/* real speed */
.rt { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px 26px; align-items:center; }
.rt-play { width:56px; height:56px; border-radius:50%; border:0; background:var(--accent); cursor:pointer; display:grid; place-items:center; }
.rt-play svg { width:22px; height:22px; fill:var(--on-accent); }
.rt-play[aria-pressed=true] .i-play, .rt-play:not([aria-pressed=true]) .i-pause { display:none; }
.rt-body { position:relative; padding-top:46px; }
.rt-wave { width:100%; height:120px; cursor:pointer; }
.rt-tag { position:absolute; top:0; font-size:var(--t-meta); font-weight:600; line-height:1.3; border-left:1.5px solid var(--line); padding-left:8px; white-space:nowrap; }
.rt-tag small { display:block; font-weight:400; color:var(--mute); font-size:var(--t-meta); }
.rt-time { font-variant-numeric:tabular-nums; font-size:var(--t-meta); color:var(--mute); min-width:6.5em; text-align:right; }
.rt-cap { grid-column:2 / 3; min-height:3em; font-size:var(--t-body); line-height:1.45; color:var(--soft); transition:opacity .3s; }
.rt-cap.off { opacity:0; }
[data-theme=C] .rt-tag { border-left-color:var(--ink); } [data-theme=C] .rt-tag small { color:var(--ink); }

/* steps, keyed to marks on the real-speed waveform */
.rt-marks { position:relative; height:22px; margin-top:6px; }
.rt-mark { position:absolute; top:0; transform:translateX(-50%); font-size:var(--t-meta); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; padding-top:8px; }
.rt-mark::before { content:''; position:absolute; top:0; left:50%; width:1px; height:6px; background:var(--accent); }
.steps { list-style:none; padding:0; margin-top:22px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
.steps li { display:flex; gap:10px; align-items:baseline; }
.steps b { flex:none; font-size:var(--t-body); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.steps p { font-size:var(--t-body); line-height:1.45; color:var(--soft); }
[data-theme=C] .rt-mark, [data-theme=C] .steps b, [data-theme=C] .prints b { color:var(--ink); } [data-theme=C] .rt-mark::before { background:var(--ink); }

/* board: hidden, then told */
.pair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
.pair .frame { aspect-ratio:4/3; }
.pair figcaption { margin-top:14px; font-size:var(--t-body); line-height:1.45; color:var(--soft); max-width:36em; }
.pair figcaption b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* the whole run on one line */
.quiet-top { display:grid; grid-template-columns:minmax(0,1fr) var(--col); gap:20px 48px; align-items:end; margin-bottom:clamp(28px,3.4vw,48px); }
.numeral { font-size:clamp(96px,10.5vw,168px); line-height:.8; font-weight:var(--h-weight); font-stretch:var(--h-stretch); letter-spacing:-.05em; color:var(--ink); font-variant-numeric:tabular-nums; }
[data-theme=C] .numeral { color:var(--ink); font-variation-settings:'opsz' 96; }
.tl-legend i.k-music { background:var(--wave-music); } .tl-legend i.k-voice { background:var(--accent); }
.tl { width:100%; overflow:visible; }
.tl-m { display:none; }
@media (max-width:600px) { .tl-d { display:none; } .tl-m { display:block; } .tl-m text { font-size:19px; } .tl-m .big { font-size:21px; } }
.tl .bar { fill:var(--card); }
[data-theme=A] .tl .bar { fill:#e3ded3; }
.tl .music { fill:var(--wave-music); }
.tl .voice { fill:var(--accent); }
.tl .tick { stroke:var(--mute); stroke-width:1; }
.tl text { fill:var(--mute); font-size:13px; font-family:var(--font); }
.tl .big { fill:var(--ink); font-size:15px; font-weight:600; }
.tl .quiet { stroke:var(--ink); stroke-width:1.5; fill:none; }
.tl-legend { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:6px; font-size:var(--t-meta); color:var(--soft); }
.tl-legend i { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:8px; vertical-align:-1px; }

/* every line */
.lines { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--gap); }
.more { margin-top:0; }
.more summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:600; font-size:var(--t-body); height:48px; padding:0 18px; border-radius:var(--radius); box-shadow:0 0 0 1px var(--line); }
.more summary::-webkit-details-marker { display:none; }
.more summary::after { content:'↓'; font-weight:400; }
.more[open] summary { display:none; }
.lines li { display:grid; grid-template-columns:4.6em minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:4px 16px; padding:18px 0; border-top:1px solid var(--line); }
.lines .at { grid-column:1; grid-row:1 / span 3; }
.lines .at span { display:block; }
.lines h3 { grid-column:2; grid-row:1; }
.lines .at { font-size:var(--t-meta); color:var(--mute); font-variant-numeric:tabular-nums; line-height:1.5; }
.lines .at b { display:block; color:var(--mute); font-size:var(--t-meta); font-weight:600; }
.lines h3 { font-size:var(--t-body); font-weight:600; line-height:1.35; }
.lines li > p:not(.at) { grid-column:2; grid-row:2; font-size:var(--t-body); line-height:1.45; color:var(--soft); }
.lines a { grid-column:2; grid-row:3; align-self:start; font-size:var(--t-meta); color:var(--mute); text-underline-offset:3px; }
.lines a:hover { color:var(--ink); }

/* walk film */
.film { display:grid; grid-template-columns:minmax(0,1fr) var(--col); gap:20px 48px; align-items:start; }
.film .frame { aspect-ratio:16/9; }
.film video { background:var(--card); }
.film figcaption { font-size:var(--t-body); line-height:1.45; color:var(--soft); max-width:26em; }

/* made from a prototype: the closing note */
.note { padding-top:0; }

.note .body { margin-top:18px; }
[data-theme=A] .note > .wrap { border-top:0; padding-top:0; }
.prints { list-style:none; padding:0; margin:0 0 clamp(36px,4vw,56px); display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:32px var(--gap); }
.prints li { display:flex; flex-direction:column; gap:10px; }
.prints .fp { width:100%; aspect-ratio:1; }
.prints .fp path { fill:var(--ink); }
.prints .fp path.open { fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.prints span { font-size:var(--t-meta); line-height:1.3; color:var(--mute); }
.prints b { font-size:var(--t-meta); font-weight:600; color:var(--mute); font-variant-numeric:tabular-nums; }
.made p { font-size:var(--t-sub); line-height:1.5; color:var(--soft); max-width:34em; }
.made p + p { margin-top:16px; }
.credits { font-size:var(--t-meta) !important; color:var(--mute) !important; }

/* end */
.end { padding:clamp(110px,13vw,200px) 0 clamp(72px,8vw,120px); }

.end .store { margin-top:32px; }
.store.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
footer { padding:0 0 60px; font-size:var(--t-meta); color:var(--mute); }
footer .foot { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; border-top:1px solid var(--line); padding-top:20px; }

/* ================= switch, dialog ================= */
.switch { position:fixed; right:14px; bottom:14px; z-index:60; display:flex; padding:3px; gap:2px; border-radius:99px; background:rgba(20,20,20,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.switch span { font:600 11px/26px system-ui, sans-serif; color:#9a9a9a; padding:0 6px 0 10px; letter-spacing:.04em; text-transform:uppercase; }
.switch button { font:600 12px/1 system-ui, sans-serif; color:#cfcfcf; background:transparent; border:0; border-radius:99px; width:30px; height:26px; cursor:pointer; }
.switch button[aria-pressed=true] { background:#fff; color:#111; }
dialog { margin:auto; border:0; padding:0; border-radius:18px; max-width:min(440px, calc(100% - 32px)); background:var(--dlg-bg, var(--bg)); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
[data-theme=B] dialog { --dlg-bg:#161a1d; } [data-theme=C] dialog { --dlg-bg:#f6efe3; --accent:#ff5b1f; --on-accent:#fff; }
dialog::backdrop { background:rgba(10,10,10,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog .in { padding:28px 26px 24px; display:flex; flex-direction:column; gap:14px; font-family:var(--font); }
dialog h2 { font-size:28px; letter-spacing:-.02em; line-height:1.05; text-transform:none; font-stretch:100%; }
dialog p { font-size:16px; line-height:1.45; opacity:.85; }
dialog a { align-self:flex-start; margin-top:6px; text-decoration:none; font-weight:600; font-size:15px; padding:12px 18px; border-radius:12px; background:var(--accent); color:var(--on-accent); }
dialog .x { position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%; border:0; background:transparent; font-size:22px; cursor:pointer; opacity:.6; }

/* ================= widths ================= */
@media (max-width:1100px) {
  .steps { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:22px; }
  .prints { grid-template-columns:repeat(6, minmax(0,1fr)); }
}
@media (max-width:900px) {
  [data-theme=A] .hero { grid-template-columns:1fr; grid-template-rows:auto auto 52svh auto auto auto; grid-template-areas:"brand" "h1" "stage" "wave" "hud" "side"; }
  [data-theme=A] .hero .brand { padding-bottom:var(--gut); }
  [data-theme=A] .hero .copy { display:contents; }
  [data-theme=A] .hero h1 { grid-area:h1; padding:0 var(--gut) 24px; margin-top:12px; }
  [data-theme=A] .side { grid-area:side; padding:20px var(--gut) 0; }
  [data-theme=A] .hero .stage { border-left:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  [data-theme=A] .hero canvas.wave { height:64px; margin-top:16px; }
  [data-theme=B] .hero { height:auto; min-height:0; grid-template-columns:var(--gut) minmax(0,1fr) var(--gut); grid-template-rows:58svh auto; }
  [data-theme=B] .hero .stage { grid-area:1 / 1 / 2 / -1; min-height:440px; }
  [data-theme=B] .scrim { grid-area:1 / 1 / 2 / -1; height:100%; background:linear-gradient(to bottom, rgba(12,15,17,.9) 0%, rgba(12,15,17,.55) 28%, rgba(12,15,17,0) 48%, rgba(12,15,17,0) 62%, rgba(12,15,17,.92) 100%); }
  [data-theme=B] .hero .brand { grid-area:1 / 2 / 2 / 3; }
  [data-theme=B] .hero h1 { grid-area:1 / 2 / 2 / 3; align-self:start; margin:calc(var(--gut) + 34px) 0 0; font-size:clamp(34px,10.4vw,54px); }
  [data-theme=B] .hud { grid-area:1 / 2 / 2 / 3; align-self:end; margin:0 0 64px; }
  [data-theme=B] .cap { font-size:13.5px; min-height:3.9em; }
  [data-theme=B] .clock b { font-size:22px; }
  [data-theme=B] .hero canvas.wave { grid-area:1 / 1 / 2 / -1; align-self:end; height:44px; }
  [data-theme=B] .side { grid-area:2 / 2 / 3 / 3; margin:22px 0 var(--gut); }
  [data-theme=B] .lede { font-size:15.5px; }
  [data-theme=C] .hero { grid-template-columns:1fr; grid-template-areas:"brand" "copy" "stage" "hud" "side" "wave"; }
  [data-theme=C] .hero h1 { font-size:clamp(54px,17vw,110px); margin-top:40px; }
  [data-theme=C] .hero .stage { justify-self:center; width:88%; margin-top:30px; transform:rotate(-2deg); }
  [data-theme=C] .hud { max-width:none; }
  [data-theme=C] .chips { display:none; }

  .rt-cap { grid-column:1 / -1; }
  .rt-body { padding-top:0; }
  .rt-tag { display:none; }
  .pair, .lines { grid-template-columns:1fr; }
  .lines li { display:block; }
  .lines .at { display:flex; gap:12px; margin-bottom:4px; }
  .lines .at b { display:inline; }
  .sec .head, .quiet-top { grid-template-columns:1fr; }
  .hero .home .long { display:none; }
  .rt { grid-template-columns:auto minmax(0,1fr); }
  .rt-time { grid-column:2; text-align:right; margin-top:-8px; }
  .steps { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:20px; }
  .rt-mark::before { display:none; }
  .film { grid-template-columns:1fr; }
  .prints { grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px 14px; }
  .prints span { font-size:11px; }
  .switch { position:absolute; top:12px; bottom:auto; right:12px; }
  .switch button { width:26px; height:22px; font-size:11px; }
}
@media (max-width:560px) {
  .steps { grid-template-columns:1fr; }
}