/* Zambrero · Annual Conference 2026 — the showreel. Dark room, cream type, green light. */
:root{
  --cream:#F2E7DA; --beige:#C4A384; --green:#083323; --neon:#3DDC84; --amber:#E9A23B;
  --ink:#F2E7DA; --ink-soft:rgba(242,231,218,.62);
  --glass:rgba(13,18,23,.62); --glass-solid:rgba(13,18,23,.92); --edge:rgba(242,231,218,.2);
  --glass-lift:rgba(242,231,218,.16); --glass-lift-hover:rgba(242,231,218,.26); --edge-lift:rgba(242,231,218,.42);
  --pill:rgba(242,231,218,.94); --pill-ink:#0B1116; --page:#06090C; --label:rgba(245,238,229,.94); --label-shadow:0 1px 4px rgba(4,20,14,.85);
  --e:cubic-bezier(.32,.72,0,1); --e2:cubic-bezier(.2,.8,.2,1);
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --serif:'Instrument Serif',Georgia,'Times New Roman',serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace;
}
html,body{margin:0;height:100%;background:#000;color:var(--ink);font-family:var(--font);overflow:hidden;cursor:none}
body.show-cursor{cursor:default}
#map{position:fixed;inset:0;z-index:1;background:transparent}
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-attrib{display:none!important}
.maplibregl-canvas{outline:none}

/* backdrop */
.stars{position:fixed;inset:0;z-index:0;overflow:hidden;background:#02040A;opacity:0;transition:opacity 1.2s var(--e);pointer-events:none}
.stars i{position:absolute;inset:-820px;will-change:transform;background:
  radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
  radial-gradient(1.1px 1.1px at 28% 62%, rgba(255,255,255,.65), transparent 60%),
  radial-gradient(1.6px 1.6px at 41% 31%, rgba(255,255,255,.9), transparent 60%),
  radial-gradient(1px 1px at 55% 77%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(1.3px 1.3px at 68% 12%, rgba(255,255,255,.75), transparent 60%),
  radial-gradient(1px 1px at 76% 48%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.7px 1.7px at 88% 71%, rgba(255,255,255,.9), transparent 60%),
  radial-gradient(1.1px 1.1px at 94% 26%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(1px 1px at 6% 82%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.4px 1.4px at 34% 92%, rgba(255,255,255,.7), transparent 60%),
  radial-gradient(1.2px 1.2px at 62% 40%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(1px 1px at 19% 45%, rgba(255,255,255,.45), transparent 60%),
  radial-gradient(1.5px 1.5px at 49% 8%, rgba(255,255,255,.8), transparent 60%),
  radial-gradient(1px 1px at 83% 90%, rgba(255,255,255,.5), transparent 60%), transparent;
  background-repeat:repeat;background-size:300px 300px,300px 300px,300px 300px,300px 300px,430px 430px,430px 430px,430px 430px,430px 430px,590px 590px,590px 590px,590px 590px,590px 590px,780px 780px,780px 780px,auto}
body.space .stars{opacity:1}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.6;transition:opacity 1.2s var(--e);
  background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(0,0,0,.72) 100%)}
body.space .vignette{opacity:1}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>")}

/* chrome */
.chrome{position:fixed;left:48px;right:48px;z-index:40;pointer-events:none;display:flex;align-items:center;gap:18px;transition:opacity .8s var(--e)}
#chrome{top:36px}
.wordmark{height:26px;opacity:.95}
.kicker{font:500 11px/1 var(--mono);letter-spacing:3px;color:var(--beige);padding-left:18px;border-left:1px solid rgba(242,231,218,.25)}
.live{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:2.4px;color:rgba(242,231,218,.5)}
.live b{color:var(--neon);font-weight:500}
.foot{bottom:34px;align-items:flex-end}
.chapter{font:400 12px/1.4 var(--mono);letter-spacing:2px;color:rgba(242,231,218,.6);text-transform:uppercase}
.chapter b{color:var(--cream);font-weight:500}
.progress{margin-left:auto;width:220px;height:2px;background:rgba(242,231,218,.15);position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--beige);transition:width 1.2s var(--e)}
body.booting .chrome{opacity:0}
body.st-present .foot,body.st-present #chrome{opacity:1}

/* beats: typographic overlays */
.beat{position:fixed;z-index:30;pointer-events:none;opacity:0;transform:translateY(28px);transition:opacity .9s var(--e2),transform 1.1s var(--e2)}
.beat.on{opacity:1;transform:none}
.beat.off{opacity:0;transform:translateY(-18px);transition-duration:.6s}
.beat .k{font:500 12px/1 var(--mono);letter-spacing:3.2px;color:var(--beige);text-transform:uppercase;margin-bottom:22px}
.beat h1{margin:0;font-weight:300;font-size:clamp(56px,7.2vw,124px);line-height:.98;letter-spacing:-.025em}
.beat h1 b{font-weight:500}
.beat h2{margin:0;font-weight:300;font-size:clamp(40px,5vw,88px);line-height:1;letter-spacing:-.03em}
.beat p{margin:22px 0 0;font-weight:300;font-size:clamp(18px,1.6vw,28px);line-height:1.35;color:var(--ink-soft);max-width:34em}
.title{left:48px;bottom:120px;max-width:min(62vw,1100px)}
.count{right:48px;top:50%;transform:translateY(calc(-50% + 28px));text-align:right}
.count.on{transform:translateY(-50%)}
.count .n b{font-weight:300;font-size:clamp(120px,16vw,300px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:block;color:var(--cream)}
.count .l{margin-top:14px;font:300 clamp(18px,1.7vw,30px)/1.2 var(--font);color:var(--ink-soft)}
.country{left:48px;top:50%;transform:translateY(calc(-50% + 28px))}
.country.on{transform:translateY(-50%)}
.country .n{margin-top:18px;display:flex;align-items:baseline;gap:18px}
.country .n b{font-weight:300;font-size:clamp(90px,11vw,200px);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.country .n small{font:300 clamp(16px,1.5vw,26px)/1.2 var(--font);color:var(--ink-soft)}
.state{left:48px;bottom:112px;max-width:min(56vw,980px)}
.state .line{font-size:clamp(16px,1.4vw,24px)}
.tiles{display:flex;gap:0;margin-top:36px;border-top:1px solid rgba(242,231,218,.18)}
.tile{padding:18px 44px 0 0}
.tile b{display:block;font-weight:300;font-size:clamp(40px,4.6vw,78px);line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tile small{display:block;margin-top:10px;font:400 11px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--beige)}
.tile.g b{color:var(--neon)}
.next{left:48px;bottom:112px;max-width:min(60vw,1000px)}
.tags{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.tags{gap:0 22px;margin-top:18px;padding-top:12px;border-top:1px solid rgba(242,231,218,.18)}
.tags span{font:400 11px/2.2 var(--mono);letter-spacing:2px;text-transform:uppercase;color:rgba(242,231,218,.75)}
.tags span.av{color:var(--neon)}
.tags span.al{color:var(--beige)}
/* strip: during a site keynote, who and where */
.strip{top:86px;left:48px;display:flex;gap:18px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:rgba(242,231,218,.6);transform:translateY(-10px)}
.strip span{padding-right:18px;border-right:1px solid rgba(242,231,218,.2)}
.strip span:last-child{border:0}
.strip .nm{color:var(--cream)}
.strip .tg.av{color:var(--neon)}
.strip .tg.al{color:var(--beige)}

/* pins */
.pin{width:14px;height:14px;pointer-events:none;will-change:transform,opacity}
.pin i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.tp i.d{width:5px;height:5px;background:var(--cream);box-shadow:0 0 0 1px rgba(0,0,0,.35);opacity:0;transition:opacity .5s var(--e),transform .5s var(--e)}
.tp.lit i.d{opacity:.95}
.tp.lit i.r{width:6px;height:6px;border:1px solid var(--cream);opacity:0;animation:ignite 1.4s var(--e2) 1}
.tp.faint i.d{opacity:.28}
.tp.off i.d{opacity:0}
.tp.lit.flash i.d{transform:translate(-50%,-50%) scale(1.9);transition:transform .18s}
@keyframes ignite{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}}
.pp{width:18px;height:18px}
.pp i.d{width:9px;height:9px;background:#0f4a2e;border:1px solid rgba(61,220,132,.85);box-shadow:0 0 10px rgba(61,220,132,.35);opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity .6s var(--e2),transform .7s var(--e2)}
.pp.lit i.d{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pp i.r{width:9px;height:9px;border:1px solid rgba(242,231,218,.7);opacity:0}
.pp.lit i.r{animation:ignite 1.6s var(--e2) 1}
.pp.faint i.d{opacity:.35;box-shadow:none}
.pp.off i.d{opacity:0;transform:translate(-50%,-50%) scale(.3)}
.pp.hero i.d{transform:translate(-50%,-50%) scale(1.7);box-shadow:0 0 22px rgba(61,220,132,.7)}
.pp.hero i.r{animation:ignite 1.8s var(--e2) infinite}
.pp.av i.d{background:#0f4a2e}
.pp.al i.d{background:#2b2a26;border-color:var(--beige);box-shadow:0 0 12px rgba(196,163,132,.45)}
.pp.al i.r{border-color:var(--beige)}
.pp.co i.d{background:#26323a;border-color:var(--cream);box-shadow:0 0 10px rgba(242,231,218,.35)}
.pp.co i.r{border-color:var(--cream)}
/* state chips during the FY27 beat */
.chip{pointer-events:none;font:500 12px/1 var(--mono);letter-spacing:2px;color:var(--cream);background:rgba(6,9,12,.55);border:1px solid var(--edge);padding:9px 12px;border-radius:999px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s var(--e2),transform .6s var(--e2);backdrop-filter:blur(8px)}
.chip b{color:var(--neon);font-weight:500}
.chip.on{opacity:1;transform:none}
/* world country pins */
.wp{width:10px;height:10px}
.wp i.d{width:7px;height:7px;background:var(--cream);opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity .5s var(--e2),transform .5s var(--e2)}
.wp.lit i.d{opacity:.95;transform:translate(-50%,-50%) scale(1)}
.wp.lit i.r{width:7px;height:7px;border:1px solid var(--cream);animation:ignite 1.6s var(--e2) 1}

/* kiosk: hide everything interactive from the site tools */
body.kiosk .st-drawer,body.kiosk .sp-bar,body.kiosk .st-pillm,body.kiosk #stDuelPick,body.kiosk .st-duel{display:none!important}
body.kiosk .st-pres{pointer-events:none}
body.kiosk .sp-cap{bottom:112px;left:48px;max-width:min(60vw,1000px);opacity:0;transform:translateY(26px);transition:opacity .9s var(--e2),transform 1.1s var(--e2)}
body.kiosk .sp-cap.in{opacity:1;transform:none}
body.kiosk .sp-cap h2{font-weight:500;letter-spacing:-.02em}
body.kiosk .st-hud .hud-ll,body.kiosk .st-hud .hud-z,body.kiosk .hud-sweep{display:none!important}
body.kiosk .st-markw{pointer-events:none}

/* operator bar: hidden until the mouse moves, gone again after 4 s */
.ops{position:fixed;right:40px;bottom:30px;z-index:60;display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .4s;pointer-events:none}
body.show-cursor .ops{opacity:1;pointer-events:auto}
.ops button{font:500 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--cream);background:rgba(13,18,23,.7);border:1px solid var(--edge);padding:10px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(10px)}
.ops button:hover{border-color:var(--edge-lift)}
.ops button[aria-pressed="true"]{background:var(--cream);color:var(--pill-ink)}
.ops .st{font:400 11px/1 var(--mono);letter-spacing:1.5px;color:rgba(242,231,218,.55);margin-left:8px}
#pausedNote{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;font:500 12px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--cream);background:rgba(13,18,23,.8);border:1px solid var(--edge);padding:16px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .4s}
body.paused #pausedNote{opacity:1}

@media (max-width:1100px){ .chrome{left:28px;right:28px} .title,.state,.next,.country{left:28px} .count{right:28px} }
@media (prefers-reduced-motion:reduce){ .beat,.chip,.pin i,body.kiosk .sp-cap{transition:none;animation:none} }

/* ── the site keynote panel — type-led, hairlines, one accent ────── */
body.kiosk .sp-cap{display:none!important}
.key{position:fixed;left:48px;bottom:104px;z-index:4900;width:min(46vw,900px);pointer-events:none;opacity:0;transform:translateY(22px);transition:opacity .9s var(--e2),transform 1.1s var(--e2);text-shadow:0 2px 24px rgba(0,0,0,.65)}
.key.in{opacity:1;transform:none}
.key.wide{width:min(64vw,1200px)}
.key .kk{font:500 11px/1 var(--mono);letter-spacing:3.4px;color:var(--beige);text-transform:uppercase;margin-bottom:18px}
.key .kk i{font-style:normal;color:rgba(242,231,218,.45);margin-right:14px}
.key h2{margin:0;font-weight:300;font-size:clamp(36px,3.8vw,68px);line-height:1.02;letter-spacing:-.03em;max-width:15em}
.key p{margin:14px 0 0;font-weight:300;font-size:clamp(15px,1.2vw,21px);line-height:1.45;color:var(--ink-soft);max-width:36em}
.ktiles{display:flex;gap:0;margin-top:30px;flex-wrap:wrap;border-top:1px solid rgba(242,231,218,.18)}
.kt{min-width:170px;padding:18px 34px 0 0;margin-right:34px}
.kt b{display:block;font-weight:300;font-size:clamp(34px,3.4vw,60px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--cream)}
.kt small{display:block;margin-top:10px;font:400 10.5px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:rgba(242,231,218,.55)}
.kt.g b,.key .g{color:var(--neon)}
.key .b{color:var(--beige)}
.kreach{margin-top:22px;display:grid;gap:9px}
.kr,.kcmp,.kbar{display:grid;grid-template-columns:150px 1fr 86px 150px;align-items:center;gap:16px}
.kr{grid-template-columns:70px 1fr}
.kbar{grid-template-columns:220px 1fr 150px}
.kl{font:400 10.5px/1.2 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:rgba(242,231,218,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktr{position:relative;height:3px;background:rgba(242,231,218,.14);overflow:visible}
.ktr i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--cream);transition:width 1.4s var(--e2)}
.ktr b{position:absolute;left:var(--x);top:-6px;width:1px;height:15px;background:var(--neon);opacity:.95}
.kv{font-weight:300;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;color:var(--cream)}
.kv small{font:400 10px/1 var(--mono);letter-spacing:1px;color:rgba(242,231,218,.5)}
.kd{font:400 10.5px/1.3 var(--mono);letter-spacing:1px;color:rgba(242,231,218,.42)}
.kd.up{color:var(--neon)}
.kcmps{margin-top:26px;display:grid;gap:13px}
.klegend{margin-top:16px;font:400 10.5px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:rgba(242,231,218,.5)}
.klegend i{display:inline-block;width:18px;height:3px;background:var(--cream);vertical-align:middle;margin-right:8px}
.klegend b{display:inline-block;width:1px;height:12px;background:var(--neon);vertical-align:middle;margin:0 8px 0 14px}
.knet{margin-top:18px;font:300 15px/1.5 var(--font);color:var(--ink-soft)}
.knet b{color:var(--cream);font-weight:400}
.kline{display:block;width:100%;height:170px;margin-top:22px;overflow:visible}
.kline .ka{fill:url(#kg1)}
.kline .kp{fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kline .kq{fill:none;stroke:var(--neon);stroke-width:1.4;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.kline .kc{fill:var(--neon)}
.kline .kx{font:10.5px var(--mono);fill:rgba(242,231,218,.5);letter-spacing:1px}
.kline .ky{font:300 14px var(--font);fill:var(--cream)}
.kgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:28px;border-top:1px solid rgba(242,231,218,.18)}
.kg{padding:16px 16px 0 0}
.kg b{display:block;font-weight:300;font-size:clamp(28px,2.6vw,44px);line-height:1;letter-spacing:-.03em}
.kg small{display:block;margin-top:8px;font:400 10px/1.35 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:rgba(242,231,218,.52)}
.kcomps{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:22px;padding-top:14px;border-top:1px solid rgba(242,231,218,.12)}
.kcomps span{font:300 15px/2 var(--font);color:var(--cream)}
.kcomps span small{color:rgba(242,231,218,.5);margin-left:6px;font-size:12px}
.kcomps i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:9px;background:rgba(242,231,218,.4);vertical-align:2px}
.kcomps .kc-mexican i{background:var(--neon)}.kcomps .kc-burger i{background:var(--beige)}
.kbars{margin-top:26px;display:grid;gap:14px}
.kcard{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.kfacts{display:flex;gap:0 22px;flex-wrap:wrap;margin-top:24px;padding-top:14px;border-top:1px solid rgba(242,231,218,.18)}
.kfacts span{font:400 11px/2.2 var(--mono);letter-spacing:2px;text-transform:uppercase;color:rgba(242,231,218,.75)}
.kfacts span.g{color:var(--neon)}.kfacts span.b{color:var(--beige)}
.knear{margin-top:24px;display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.knear small{display:block;width:100%;font:400 10.5px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:rgba(242,231,218,.5);margin-bottom:-8px}
.knear span{font:300 17px/1.3 var(--font);color:var(--ink-soft)}
.knear span b{color:var(--cream);font-weight:400;margin-left:6px}
.kq{text-align:center}
.kqr{display:block;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.kq small{display:block;margin-top:12px;font:400 10.5px/1.6 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:rgba(242,231,218,.55)}
.kstatus{display:inline-block;margin-top:16px;font:400 11px/1 var(--mono);letter-spacing:2.2px;text-transform:uppercase;color:var(--neon)}
.kstatus.b{color:var(--beige)}
@media (prefers-reduced-motion:reduce){ .key,.ktr i{transition:none} }

/* ── the opening: a globe out of the dark, a constellation of restaurants ── */
#map{transition:transform 9s cubic-bezier(.16,.7,.2,1)}
body.rise #map{transform:translateY(38%) scale(.92)}
.shade{position:absolute;z-index:5;pointer-events:none;border-radius:50%;opacity:0;transition:opacity 1.5s var(--e);
  background:radial-gradient(circle at 38% 32%,rgba(0,0,0,0) 38%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.9) 82%,rgba(0,0,0,1) 100%)}
body.space .shade{opacity:1}
.open{left:50%;bottom:64px;transform:translate(-50%,28px);text-align:center;width:min(90vw,1100px)}
.open.on{transform:translate(-50%,0)}
.open .k{margin-bottom:18px}
.open h1{font-weight:200;font-size:clamp(36px,4.4vw,76px);letter-spacing:-.02em;line-height:1.04}
.year{right:48px;bottom:92px;text-align:right}
.year b{display:block;font-weight:200;font-size:clamp(64px,8vw,150px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--cream)}
.year small{display:block;margin-top:10px;font-weight:300;font-size:clamp(20px,2vw,34px);letter-spacing:-.01em;color:var(--cream);font-variant-numeric:tabular-nums}
.year span{display:block;margin-top:8px;font:400 11px/1.5 var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:rgba(242,231,218,.5)}
.num{left:48px;bottom:112px}
.num b{display:block;font-weight:200;font-size:clamp(140px,19vw,340px);line-height:.86;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--cream)}
.num.g b{color:var(--cream)}
.num .l{margin-top:22px;font-weight:300;font-size:clamp(20px,1.9vw,32px);line-height:1.25;color:var(--ink-soft)}
/* points of light */
.tp i.d{width:3.5px;height:3.5px;box-shadow:0 0 6px 1px rgba(242,231,218,.55)}
.tp.lit i.r{width:5px;height:5px}

.fade{position:fixed;inset:0;z-index:45;background:#000;opacity:0;pointer-events:none;transition:opacity 1.3s var(--e)}
.fade.on{opacity:1}

/* welcome + chapter cards, over black */
.welcome{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:46;width:min(90vw,1100px)}
.welcome.on{transform:translate(-50%,-50%)}
.welcome .z{display:block;margin:0 auto;height:min(22vh,180px);opacity:0;transform:scale(.86);transition:opacity 2.4s var(--e),transform 4s var(--e)}
.welcome.on .z{opacity:.95;transform:none}
.welcome h1{margin:34px 0 0;font-weight:200;font-size:clamp(56px,7.4vw,128px);letter-spacing:-.03em;line-height:1;opacity:0;transform:translateY(16px);transition:opacity 1.6s var(--e2),transform 1.8s var(--e2)}
.welcome.w2 h1{opacity:1;transform:none}
.welcome p{margin:22px auto 0;font:400 12px/1 var(--mono);letter-spacing:4px;text-transform:uppercase;color:var(--beige);opacity:0;transition:opacity 1.4s var(--e2) .3s}
.welcome.w3 p{opacity:1}
.inter{left:50%;top:50%;transform:translate(-50%,calc(-50% + 20px));text-align:center;z-index:46;width:min(92vw,1300px)}
.inter.on{transform:translate(-50%,-50%)}
.inter h1{font-weight:200;font-size:clamp(64px,8.5vw,150px);letter-spacing:-.035em;line-height:1}
.inter .k{margin-bottom:22px}

/* ── the piece: night earth, a halo, serif statements, points of light ───── */
.halo{position:absolute;z-index:0;pointer-events:none;border-radius:50%;opacity:0;transition:opacity 2s var(--e);
  background:radial-gradient(circle,rgba(120,170,220,0) 60%,rgba(120,170,220,.28) 68%,rgba(90,140,200,.16) 74%,rgba(60,100,160,.06) 82%,rgba(0,0,0,0) 90%)}
body.space .halo{opacity:1}
.shade{background:radial-gradient(circle at 36% 30%,rgba(0,0,0,0) 30%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.95) 100%)}
.welcome h1,.open h1,.inter h1,.beat h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.welcome h1{font-size:clamp(64px,8.6vw,150px)}
.open h1{font-size:clamp(40px,5vw,88px)}
.open h1 i{font-style:italic;color:var(--cream)}
.inter h1{font-size:clamp(72px,9.5vw,170px);line-height:.98}
.num b{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(150px,21vw,380px)}
.num .tiles{margin-top:28px}
.year b{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.tp i.d{width:3px;height:3px;background:#FFE9C4;box-shadow:0 0 5px 1.5px rgba(255,214,150,.75),0 0 14px 3px rgba(255,190,110,.25)}
.tp.lit i.r{border-color:rgba(255,220,160,.8)}
.tp.faint i.d{opacity:.45}
.pin{mix-blend-mode:screen}
.state h2,.next h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(48px,6vw,104px)}
.key h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(40px,4.4vw,78px)}