/* ══════════════════════════════════════════════════════════════
   $PNDNG — Pigeon Pending
   A sodium-lit night dispatch board that is always three seconds behind.
   Two families only: Archivo (display + body) and Chakra Petch (the board).
   ══════════════════════════════════════════════════════════════ */

 /* ── THE COLOUR LAW ─────────────────────────────────────────
    Obeyed everywhere, no exceptions:
      --signal  belongs to the pigeon and his cargo — envelope, helmet,
                strap, the lag marker, and every lateness stamp.
      --mint    belongs to things that are ON TIME — the live clock, the
                open window, a delivery that beat the shutter.
      --amber   is the city's own light — sodium lamps, lit windows,
                the stamp on a docket that was accepted anyway.
    A late thing is never mint. An on-time thing is never red.
   ─────────────────────────────────────────────────────────── */
:root{
  /* ground — deep ink-violet, the inside of a departure hall at 4am */
  --night:    #17102A;
  --night-2:  #1E1638;
  --night-3:  #261C45;
  --flap:     #2A1E45;
  --flap-hi:  #382A58;
  --flap-lo:  #1B1332;
  --line:     rgba(243,236,224,.11);
  --line-2:   rgba(243,236,224,.06);

  /* type */
  --bone:   #F3ECE0;
  --bone-2: #B9AFC8;
  --bone-3: #82769A;

  /* accents — the envelope, the neck, the stamp */
  --signal:   #FF4B35;
  --signal-d: #C22A18;
  --signal-w: rgba(255,75,53,.14);
  --mint:     #2FD4A6;
  --mint-d:   #17997A;
  --amber:    #FFB43A;

  --fd: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fm: 'Chakra Petch', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* mascot palette hooks */
  --plume:    #8D93A8;
  --plume-dk: #565D75;
  --plume-lt: #C9CFDC;
  --iris:     #2FD4A6;
  --beak:     #FFB43A;
  --beak-dk:  #D8901C;
  --foot:     #FF8B3C;
  --helmet:   #FF4B35;
  --helmet-dk:#B82A1A;
  --sneak:    #F7F1E4;
  --env:      #FF4B35;
  --env-dk:   #8E1C11;
  --ink:      #0E0919;
  --paper:    #F3ECE0;

  --wrap: 1200px;
  --r:    14px;
  --ease: cubic-bezier(.22,.72,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-over: cubic-bezier(.2,1.4,.35,1);   /* overshoots, then corrects */
}
*,*::before,*::after{ box-sizing:border-box }
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
[hidden]{ display:none !important }

body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--fd);
  font-size:clamp(15px,.44vw + 14px,17px);
  line-height:1.62;
  font-synthesis-weight:none;
  overflow-x:clip;
}
body.is-booting{ overflow:hidden }
body.is-locked{ overflow:hidden }

img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit }
::selection{ background:var(--signal); color:#fff }

h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.02;
  font-stretch:118%; text-wrap:balance }
/* italic is the speed line — headings lean forward, everything else stands still */
h2{ font-size:clamp(1.9rem,4.4vw,3.4rem); font-style:italic; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.028em; line-height:.96 }
h2 em{ font-style:italic }
h3{ font-size:clamp(1.05rem,1.5vw,1.28rem); font-stretch:108%; letter-spacing:-.01em; line-height:1.2 }
p{ margin:0 0 1em }
em{ font-style:italic; color:var(--amber); font-weight:700 }
b.hl{ color:var(--signal) }

.mono{ font-family:var(--fm); font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto }
@media (max-width:640px){ .wrap{ width:min(100% - 1.6rem, var(--wrap)) } }

.skip{ position:fixed; left:-999px; top:0; z-index:1000; background:var(--signal); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:700 }
.skip:focus-visible{ left:0 }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--mint); outline-offset:3px; border-radius:6px }

/* ─────────── ambient layers ─────────── */
.sky{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85 }
.grain{ position:fixed; inset:-120%; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite }
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)} }
.scanline{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px) }

.scroll-bar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--signal),var(--amber) 55%,var(--mint));
  box-shadow:0 0 14px rgba(255,75,53,.55) }

/* the cursor's echo — arrives three seconds after you do */
.echo{ position:fixed; top:0; left:0; z-index:3; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) rotate(-8deg); transition:opacity .5s linear;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) }
.echo.on{ opacity:.62 }

/* ─────────── preloader ─────────── */
#boot{ transition:opacity .5s var(--ease), transform .6s var(--ease) }
#boot.gone{ opacity:0; transform:translateY(-14px); pointer-events:none }
#boot .rail i{ font-family:var(--fm); color:var(--bone);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) }
#boot .rail i.lit{ color:var(--amber) }
.boot-stamp{ color:var(--signal) !important; letter-spacing:.3em; animation:stampIn .45s var(--ease-out) both }
@keyframes stampIn{ from{ opacity:0; transform:scale(1.6) rotate(-7deg) } to{ opacity:1; transform:none } }

/* ─────────── nav ─────────── */
.nav{ position:sticky; top:0; z-index:50; background:rgba(23,16,42,.82);
  border-bottom:1px solid var(--line); backdrop-filter:blur(14px) saturate(140%) }
.nav-in{ display:flex; align-items:center; gap:1.2rem; height:64px }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto }
.brand-mark{ display:block; transition:transform .5s var(--ease-out) }
.brand:hover .brand-mark{ transform:translateX(4px) rotate(-6deg) }
.brand-txt{ font-weight:800; font-stretch:112%; letter-spacing:.01em; font-size:.94rem }

.nav-links{ display:flex; gap:1.35rem; margin-inline:auto }
.nav-links a{ text-decoration:none; font-size:.88rem; font-weight:600; color:var(--bone-2);
  position:relative; padding:.2rem 0; transition:color .25s }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--signal); transition:width .3s var(--ease) }
.nav-links a:hover{ color:var(--bone) }
.nav-links a:hover::after{ width:100% }

.nav-right{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto }
.clock{ font-size:.74rem; color:var(--mint); letter-spacing:-.04em;
  background:var(--flap-lo); border:1px solid var(--line); padding:.32rem .5rem; border-radius:7px }

.burger{ display:none; width:42px; height:38px; border:1px solid var(--line); background:var(--flap-lo);
  border-radius:9px; cursor:pointer; padding:0; place-content:center; gap:4px }
.burger span{ display:block; width:17px; height:2px; background:var(--bone); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:900px){
  .nav-links{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    gap:0; background:var(--night-2); border-bottom:1px solid var(--line); padding:.4rem 0 .8rem;
    box-shadow:0 22px 40px rgba(0,0,0,.5) }
  .nav-links.open{ display:flex }
  .nav-links a{ padding:.85rem 1.2rem; font-size:1rem; border-bottom:1px solid var(--line-2) }
  .nav-links a::after{ display:none }
  .burger{ display:grid }
  .clock{ display:none }
}
@media (max-width:430px){ .brand-txt{ font-size:.84rem }
  .brand-txt .long{ display:none } }

/* ─────────── split-flap ─────────── */
.flap-line{ display:flex; flex-wrap:nowrap; gap:.1em }
.flap{ display:inline-block; position:relative; min-width:.72em; text-align:center;
  background:linear-gradient(180deg,var(--flap-hi) 0 49.6%, var(--flap) 50.4% 100%);
  border-radius:.07em; padding:.06em .04em;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06),
             0 3px 0 rgba(0,0,0,.36);
  color:var(--bone); font-family:var(--fm); font-weight:700;
  transform-origin:center; will-change:transform }
.flap::after{ content:''; position:absolute; left:6%; right:6%; top:50%; height:1px;
  background:rgba(0,0,0,.55); pointer-events:none }
.flap.sp{ background:none; box-shadow:none; min-width:.34em }
.flap.sp::after{ display:none }
.flap.turning{ animation:flapTurn .1s linear }
@keyframes flapTurn{
  0%{ transform:perspective(300px) rotateX(0) } 49%{ transform:perspective(300px) rotateX(-88deg) }
  51%{ transform:perspective(300px) rotateX(88deg) } 100%{ transform:perspective(300px) rotateX(0) } }

/* ─────────── hero ─────────── */
.hero{ position:relative; z-index:1; padding:clamp(2.4rem,6vw,5rem) 0 clamp(2rem,4vw,3.4rem);
  overflow:clip; isolation:isolate }
.hero-city{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.hero-city .layer{ position:absolute; left:-6%; right:-6%; bottom:0; background-repeat:repeat-x;
  background-position:bottom center; will-change:transform }
.layer-far{ height:58%; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='240' preserveAspectRatio='none'%3E%3Cg fill='%23241A3F'%3E%3Crect x='0' y='96' width='58' height='144'/%3E%3Crect x='66' y='140' width='42' height='100'/%3E%3Crect x='116' y='68' width='70' height='172'/%3E%3Crect x='196' y='120' width='50' height='120'/%3E%3Crect x='254' y='40' width='46' height='200'/%3E%3Crect x='310' y='108' width='64' height='132'/%3E%3Crect x='384' y='150' width='38' height='90'/%3E%3Crect x='430' y='78' width='58' height='162'/%3E%3Crect x='498' y='128' width='62' height='112'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 240px }
.layer-mid{ height:42%; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='200'%3E%3Cg fill='%231C1435'%3E%3Crect x='0' y='70' width='76' height='130'/%3E%3Crect x='88' y='34' width='54' height='166'/%3E%3Crect x='156' y='96' width='84' height='104'/%3E%3Crect x='254' y='58' width='60' height='142'/%3E%3Crect x='328' y='110' width='72' height='90'/%3E%3Crect x='414' y='44' width='50' height='156'/%3E%3Crect x='478' y='92' width='66' height='108'/%3E%3Crect x='558' y='64' width='62' height='136'/%3E%3C/g%3E%3Cg fill='%23FFB43A' opacity='.5'%3E%3Crect x='14' y='86' width='7' height='9'/%3E%3Crect x='34' y='106' width='7' height='9'/%3E%3Crect x='102' y='52' width='7' height='9'/%3E%3Crect x='120' y='86' width='7' height='9'/%3E%3Crect x='176' y='114' width='7' height='9'/%3E%3Crect x='212' y='134' width='7' height='9'/%3E%3Crect x='272' y='74' width='7' height='9'/%3E%3Crect x='344' y='126' width='7' height='9'/%3E%3Crect x='430' y='62' width='7' height='9'/%3E%3Crect x='498' y='108' width='7' height='9'/%3E%3Crect x='574' y='82' width='7' height='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:620px 200px }
.layer-near{ height:22%;
  background:linear-gradient(180deg, transparent, rgba(11,7,20,.9) 62%, #0B0714) }
.lamp{ position:absolute; width:52vmax; height:52vmax; border-radius:50%; filter:blur(48px); opacity:.42 }
.lamp-a{ left:-14vmax; top:-16vmax; background:radial-gradient(circle,rgba(255,180,58,.5),transparent 62%) }
.lamp-b{ right:-16vmax; bottom:-20vmax; background:radial-gradient(circle,rgba(47,212,166,.38),transparent 62%) }

.hero-in{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center }
@media (max-width:980px){ .hero-in{ grid-template-columns:1fr } }

.eyebrow{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-3);
  margin:0 0 1rem; font-weight:600 }
.eyebrow .dot{ color:var(--signal); margin:0 .4em }
.eyebrow .pending{ color:var(--amber) }

/* size is taken over by fitFlaps(); this clamp is the no-JS fallback */
.hero-h1{ font-size:clamp(2rem,6.6vw,4.4rem); margin:0 0 1.3rem; display:grid; gap:.16em; justify-items:start }
.hero-h1 .flap-line.accent .flap{ color:var(--signal) }

.lede{ font-size:clamp(1.05rem,2.1vw,1.4rem); font-weight:600; color:var(--bone); max-width:37ch;
  margin-bottom:.7rem; line-height:1.34 }
.sub{ color:var(--bone-2); max-width:48ch; font-size:.98rem }

.ca{ display:inline-flex; align-items:center; gap:.7rem; margin:.4rem 0 1.4rem; cursor:pointer;
  background:var(--flap-lo); border:1px solid var(--line); border-radius:99px; padding:.5rem .6rem .5rem .9rem;
  max-width:100%; transition:border-color .25s, transform .25s var(--ease) }
.ca:hover{ border-color:var(--signal); transform:translateY(-2px) }
.ca-k{ font-size:.64rem; letter-spacing:.2em; color:var(--bone-3) }
.ca-v{ font-size:.8rem; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ca-copy{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--night);
  background:var(--amber); padding:.34rem .6rem; border-radius:99px; flex:0 0 auto }

.cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.5rem }
.btn{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; cursor:pointer;
  font-family:var(--fd); font-weight:700; font-size:.9rem; font-stretch:106%;
  color:var(--bone); background:var(--flap); border:1px solid var(--line);
  padding:.72rem 1.15rem; border-radius:11px; box-shadow:0 4px 0 var(--flap-lo);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .25s }
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--flap-lo); background:var(--flap-hi) }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--flap-lo) }
.btn img{ opacity:.92 }
.btn-primary{ background:var(--signal); border-color:transparent; color:#fff; box-shadow:0 4px 0 var(--signal-d) }
.btn-primary:hover{ background:#ff6250; box-shadow:0 6px 0 var(--signal-d) }
.btn-primary:active{ box-shadow:0 1px 0 var(--signal-d) }
.btn-primary img{ filter:brightness(0) invert(1) }
.btn-sm{ padding:.44rem .8rem; font-size:.8rem; box-shadow:0 3px 0 var(--flap-lo) }
.btn .key{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7;
  border:1px solid rgba(255,255,255,.34); padding:.1rem .32rem; border-radius:5px }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0 }
.chips li{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; letter-spacing:.06em;
  color:var(--bone-2); background:rgba(243,236,224,.05); border:1px solid var(--line-2);
  padding:.34rem .7rem; border-radius:99px }

/* hero art */
.hero-art{ position:relative; aspect-ratio:1/.86; display:grid; place-items:center }
.art-bird{ width:100%; max-width:540px; margin-right:7%; position:relative; z-index:2 }
.art-bird svg{ width:100%; height:auto; overflow:visible }
.art-shutter{ position:absolute; right:0; bottom:9%; width:min(24%,146px); height:38%; z-index:1;
  border-radius:12px 12px 0 0; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,180,58,.75),rgba(255,180,58,.42) 60%,rgba(255,180,58,.2));
  box-shadow:inset 0 0 0 2px rgba(255,180,58,.5), 0 0 60px rgba(255,180,58,.22) }
.art-shutter::after{ content:''; position:absolute; left:-9%; right:-9%; bottom:-10px; height:11px;
  border-radius:3px; background:linear-gradient(180deg,var(--amber),#A96F12);
  box-shadow:0 6px 16px rgba(0,0,0,.5) }
.art-shutter span{ position:absolute; inset:0 0 auto; height:56%;
  background:repeating-linear-gradient(180deg,#3B2B60 0 7px,#241A46 7px 11px);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.5), 0 5px 14px rgba(0,0,0,.45);
  border-bottom:3px solid var(--flap-lo);
  animation:shutterNudge 5.5s var(--ease) infinite }
@keyframes shutterNudge{ 0%,62%{ transform:translateY(0) } 72%,100%{ transform:translateY(18%) } }
.art-cap{ position:absolute; left:2%; bottom:0; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-3); z-index:3; margin:0 }

.hero-foot{ display:flex; align-items:center; gap:.8rem; margin:clamp(1.6rem,4vw,3rem) auto 0;
  width:min(100% - 2.4rem, var(--wrap)); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-3) }
.hero-foot .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent) }

/* ─────────── flip band ─────────── */
.band{ position:relative; z-index:1; background:var(--flap-lo); border-block:1px solid var(--line);
  padding:.9rem 0; overflow:hidden }
.band-in{ display:flex; gap:2.2rem; justify-content:center; flex-wrap:wrap; padding-inline:1rem }
.band-cell{ font-family:var(--fm); font-size:clamp(.62rem,1.5vw,.82rem); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-2);
  display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap }
.band-cell::before{ content:''; width:7px; height:7px; background:var(--signal); border-radius:2px;
  transform:rotate(45deg); flex:0 0 auto }
.band-cell.hot{ color:var(--amber) }
.band-cell span{ display:inline-block }
.band-cell.flip span{ animation:cellFlip .42s var(--ease) }
@keyframes cellFlip{
  0%{ transform:perspective(220px) rotateX(0); opacity:1 }
  45%{ transform:perspective(220px) rotateX(-90deg); opacity:.2 }
  55%{ transform:perspective(220px) rotateX(90deg); opacity:.2 }
  100%{ transform:perspective(220px) rotateX(0); opacity:1 } }

/* ─────────── sections ─────────── */
.sec{ position:relative; z-index:1; padding:clamp(3.4rem,8vw,6.6rem) 0; scroll-margin-top:76px }
.sec-head{ margin-bottom:clamp(1.8rem,4vw,3rem); max-width:62ch }
.sec-head.center{ margin-inline:auto; text-align:center }
.sec-sub{ color:var(--bone-2); margin-top:1rem; font-size:1rem }
.sec-head.center .sec-sub{ margin-inline:auto; max-width:56ch }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .55s var(--ease-out), transform .62s var(--ease-over) }
.reveal.in{ opacity:1; transform:none }

/* dispatch */
.dispatch-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(1.6rem,4vw,3.2rem); align-items:start }
@media (max-width:900px){ .dispatch-grid{ grid-template-columns:1fr } }
.prose p{ color:var(--bone-2); max-width:52ch }
.prose p:last-child{ margin-bottom:0 }

.log{ background:linear-gradient(180deg,var(--night-3),var(--night-2)); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; align-self:start; box-shadow:0 22px 50px rgba(0,0,0,.4) }
.log-head{ display:grid; grid-template-columns:8.4em 1fr; gap:1rem; padding:.75rem 1.1rem;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3);
  background:var(--flap-lo); border-bottom:1px solid var(--line) }
.log-row{ display:grid; grid-template-columns:8.4em 1fr; gap:1rem; padding:.82rem 1.1rem;
  border-bottom:1px solid var(--line-2); font-size:.9rem; color:var(--bone-2);
  transition:background .3s, color .3s }
.log-row:last-child{ border-bottom:0 }
.log-row:hover{ background:rgba(243,236,224,.04); color:var(--bone) }
.log-row .t{ font-size:.76rem; color:var(--mint) }
.log-row.is-shut{ background:rgba(255,75,53,.07) }
.log-row.is-shut .t{ color:var(--signal) }
.log-row.is-late{ background:rgba(255,180,58,.09); color:var(--bone) }
.log-row.is-late .t{ color:var(--amber) }
.log-row.is-late span:last-child{ font-weight:700 }
@media (max-width:520px){
  .log-head,.log-row{ grid-template-columns:1fr; gap:.2rem }
}

/* ─────────── the late window (centrepiece) ─────────── */
.game{ background:linear-gradient(180deg,var(--night-3),var(--night-2)); border:1px solid var(--line);
  border-radius:20px; padding:clamp(1rem,2.6vw,1.8rem); box-shadow:0 30px 70px rgba(0,0,0,.46) }
.game-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:1.1rem }
.clockbox{ display:grid; gap:.15rem }
.clockbox .lbl{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3) }
.clockbox .big{ font-size:clamp(2rem,6vw,3.2rem); font-weight:800; line-height:1; color:var(--mint);
  letter-spacing:-.05em }
.game.is-shut .clockbox .big{ color:var(--signal) }
.game.is-won  .clockbox .big{ color:var(--amber) }
.game-stats{ display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.68rem; letter-spacing:.06em;
  color:var(--bone-3); text-transform:uppercase }
.game-stats b{ color:var(--bone); font-weight:700; margin-left:.3em }

.street{ position:relative; height:clamp(190px,27vw,248px); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#120C22 0%,#1A1230 58%,#0E0919 100%);
  border:1px solid var(--line) }
.street::before{ content:''; position:absolute; left:0; right:0; bottom:34%; height:46%; opacity:.5;
  background-repeat:repeat-x; background-position:bottom left; background-size:420px 120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cg fill='%231E1638'%3E%3Crect x='0' y='38' width='52' height='82'/%3E%3Crect x='60' y='62' width='38' height='58'/%3E%3Crect x='106' y='20' width='46' height='100'/%3E%3Crect x='160' y='52' width='60' height='68'/%3E%3Crect x='228' y='30' width='40' height='90'/%3E%3Crect x='276' y='68' width='54' height='52'/%3E%3Crect x='338' y='44' width='44' height='76'/%3E%3C/g%3E%3Cg fill='%23FFB43A' opacity='.42'%3E%3Crect x='12' y='50' width='6' height='8'/%3E%3Crect x='30' y='72' width='6' height='8'/%3E%3Crect x='118' y='34' width='6' height='8'/%3E%3Crect x='134' y='58' width='6' height='8'/%3E%3Crect x='176' y='66' width='6' height='8'/%3E%3Crect x='240' y='44' width='6' height='8'/%3E%3Crect x='292' y='82' width='6' height='8'/%3E%3Crect x='352' y='58' width='6' height='8'/%3E%3C/g%3E%3C/svg%3E") }
.street-road{ position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,#221838,#150E28); border-top:1px solid rgba(243,236,224,.12) }
.street-marks{ position:absolute; left:0; right:0; bottom:14%; height:3px;
  background:repeating-linear-gradient(90deg, rgba(243,236,224,.22) 0 22px, transparent 22px 46px) }
.runner{ position:absolute; left:1.5%; bottom:17%; width:clamp(128px,19vw,182px);
  will-change:transform }
.runner svg{ width:100%; height:auto; overflow:visible }
.runner.is-running .r-legs{ animation:legPump .26s steps(2,end) infinite }
@keyframes legPump{ to{ transform:translateY(-4px) } }

.shutterbox{ position:absolute; right:2.5%; bottom:20%; width:clamp(84px,12vw,116px); height:64%;
  border-radius:9px 9px 0 0; overflow:hidden;
  background:linear-gradient(180deg,#FFD98A,rgba(255,180,58,.55) 46%,rgba(255,180,58,.22));
  box-shadow:inset 0 0 0 2px rgba(255,180,58,.6), 0 0 46px rgba(255,180,58,.3);
  transition:box-shadow .3s, filter .3s }
.game.is-shut .shutterbox{ box-shadow:inset 0 0 0 2px rgba(255,75,53,.5), 0 0 30px rgba(255,75,53,.22);
  filter:saturate(.55) brightness(.82) }
.shutterbox::before{ content:''; position:absolute; left:0; right:0; top:44%; height:2px; z-index:1;
  background:rgba(90,59,6,.45) }
.shutterbox::after{ content:'OPEN'; position:absolute; left:0; right:0; bottom:6%; text-align:center;
  font-family:var(--fm); font-weight:700; font-size:.58rem; letter-spacing:.2em; color:#3D2703; z-index:1 }
.game.is-shut .shutterbox::after{ content:'CLOSED'; color:var(--bone-2) }
.awning{ position:absolute; right:1%; bottom:calc(20% + 64%); width:clamp(96px,13.6vw,132px); height:14px;
  border-radius:4px 4px 2px 2px; z-index:4;
  background:repeating-linear-gradient(90deg,var(--signal) 0 12px,#F3ECE0 12px 24px);
  box-shadow:0 6px 16px rgba(0,0,0,.5) }
.shutter{ position:absolute; inset:0 0 auto; height:100%; display:grid; gap:2px; padding:3px 2px;
  transform:translateY(-100%); transition:transform .2s cubic-bezier(.6,0,.9,.3);
  background:var(--flap-lo); z-index:2 }
.shutter span{ display:block; background:linear-gradient(180deg,#453268,#241A44); border-radius:2px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.5) }
.game.is-shut .shutter, .shutter.down{ transform:translateY(0) }
.sill{ position:absolute; left:-8%; right:-8%; bottom:0; height:10px; border-radius:3px; z-index:3;
  background:linear-gradient(180deg,var(--amber),#A96F12); box-shadow:0 6px 16px rgba(0,0,0,.5) }

.obstacle{ position:absolute; bottom:20%; width:clamp(34px,5vw,46px); height:clamp(34px,5vw,46px);
  border-radius:9px; background:var(--signal); box-shadow:0 6px 0 var(--signal-d);
  display:grid; place-items:center; font-size:1.2rem; transform:translateX(-50%) }

.street-verdict{ position:absolute; left:50%; top:9%; transform:translateX(-50%);
  margin:0; font-size:clamp(.6rem,1.6vw,.74rem); letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-2); background:rgba(11,7,20,.72); border:1px solid var(--line);
  padding:.4rem .8rem; border-radius:99px; white-space:nowrap; max-width:94%;
  overflow:hidden; text-overflow:ellipsis; text-align:center }
.game.is-shut .street-verdict{ color:var(--signal); border-color:rgba(255,75,53,.4) }
.game.is-won .street-verdict{ color:var(--amber); border-color:rgba(255,180,58,.45) }

.game-ctrl{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem }

.dockets{ display:grid; gap:.5rem; margin-top:1.2rem; max-height:194px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--flap-hi) transparent }
.docket{ display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center;
  background:var(--flap-lo); border:1px solid var(--line); border-left:3px solid var(--signal);
  border-radius:9px; padding:.6rem .85rem; font-size:.78rem; color:var(--bone-2);
  animation:docketIn .4s var(--ease-out) both }
.docket.ok{ border-left-color:var(--amber) }
.docket .d-m{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.docket .d-n{ font-family:var(--fm); font-size:.64rem; color:var(--bone-3) }
.docket .d-t{ font-family:var(--fm); font-size:.72rem; color:var(--signal); white-space:nowrap }
.docket.ok .d-t{ color:var(--amber) }
@keyframes docketIn{ from{ opacity:0; transform:translateX(-14px) } to{ opacity:1; transform:none } }

/* ─────────── manifest cards ─────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(.8rem,1.8vw,1.2rem) }
@media (min-width:860px){ .cards{ grid-template-columns:repeat(3,1fr) } }
.card{ position:relative; background:linear-gradient(150deg,var(--night-3),var(--night-2));
  border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.3rem 1.25rem;
  transform-style:preserve-3d; transition:border-color .3s, box-shadow .3s;
  overflow:hidden }
.card::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,75,53,.16), transparent 62%) }
.card:hover{ border-color:rgba(255,75,53,.4); box-shadow:0 20px 48px rgba(0,0,0,.42) }
.card:hover::before{ opacity:1 }
.card-k{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3); margin:0 0 .55rem }
.card-v{ font-size:clamp(1.4rem,2.7vw,2rem); font-weight:800; font-stretch:106%; letter-spacing:-.035em;
  line-height:1; margin:0 0 .6rem; color:var(--bone); overflow-wrap:anywhere }
.card-n{ font-size:.84rem; color:var(--bone-3); margin:0 }

/* ─────────── steps ─────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(.8rem,1.8vw,1.2rem);
  counter-reset:none }
.step{ position:relative; background:var(--night-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.3rem 1.3rem; overflow:hidden; transition:transform .35s var(--ease), border-color .3s }
.step:hover{ transform:translateY(-5px); border-color:rgba(47,212,166,.42) }
.step-n{ position:absolute; right:1rem; top:.9rem; font-size:2.4rem; font-weight:800; line-height:1;
  color:rgba(243,236,224,.07); letter-spacing:-.06em }
.step h3{ margin:0 0 .55rem; padding-right:2.4rem }
.step p{ font-size:.88rem; color:var(--bone-2); margin:0 }
.step a{ color:var(--mint); text-decoration:none; border-bottom:1px solid rgba(47,212,166,.4) }
.step a:hover{ color:var(--amber); border-color:var(--amber) }
.step-i{ margin-top:1.1rem; width:30px; height:30px; opacity:.4;
  transition:opacity .3s, transform .4s var(--ease); filter:brightness(0) invert(1) }
.step:hover .step-i{ opacity:.85; transform:translateX(5px) }
.chips li img{ filter:brightness(0) invert(1); opacity:.7 }
.btn img{ filter:brightness(0) invert(1) }

/* ─────────── route ─────────── */
.stops{ display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:clamp(.8rem,1.8vw,1.2rem) }
.stop{ position:relative; background:var(--night-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.3rem 1.3rem; transition:transform .35s var(--ease), border-color .3s;
  display:flex; flex-direction:column }
.stop::after{ content:''; position:absolute; left:1.3rem; right:1.3rem; top:0; height:2px;
  background:linear-gradient(90deg,var(--signal),transparent); opacity:.6 }
.stop:hover{ transform:translateY(-5px); border-color:rgba(255,180,58,.42) }
.stop-k{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3); margin:0 0 .6rem }
.stop h3{ margin:0 0 .5rem }
.stop p{ font-size:.86rem; color:var(--bone-2); margin:0 0 1.1rem }
.stop .badge{ margin-top:auto; align-self:flex-start }
.badge{ display:inline-block; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); background:rgba(255,180,58,.12); border:1px solid rgba(255,180,58,.3);
  padding:.3rem .6rem; border-radius:99px }
.badge.is-forever{ color:var(--signal); background:var(--signal-w); border-color:rgba(255,75,53,.34) }

/* ─────────── join ─────────── */
.join-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.4rem,4vw,3rem);
  align-items:center; background:linear-gradient(140deg,var(--night-3),var(--night-2));
  border:1px solid var(--line); border-radius:22px; padding:clamp(1.6rem,4vw,3rem);
  box-shadow:0 30px 70px rgba(0,0,0,.42) }
@media (max-width:860px){ .join-in{ grid-template-columns:1fr } .join-art{ order:-1 } }
.join-art{ display:grid; place-items:center }
.join-art svg{ width:min(100%,340px); height:auto; overflow:visible }

/* ─────────── footer ─────────── */
.foot{ position:relative; z-index:1; border-top:1px solid var(--line); background:var(--flap-lo);
  padding:clamp(2.2rem,5vw,3.4rem) 0 2rem }
.foot-in{ display:grid; gap:1.4rem }
.foot-brand{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap }
.foot-tick{ font-size:1.5rem; font-weight:800; color:var(--signal); letter-spacing:-.04em }
.foot-line{ margin:0; color:var(--bone-2); font-size:.92rem }
.foot-links{ display:flex; flex-wrap:wrap; gap:1.2rem }
.foot-links a{ font-size:.85rem; color:var(--bone-2); text-decoration:none; font-weight:600 }
.foot-links a:hover{ color:var(--signal) }
.disclaimer{ font-size:.76rem; color:var(--bone-3); max-width:78ch; margin:0; line-height:1.6 }
.copy{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); margin:0 }

/* ─────────── toast ─────────── */
.toast{ position:fixed; left:50%; bottom:26px; z-index:80; transform:translate(-50%,18px);
  background:var(--flap); color:var(--bone); border:1px solid var(--line); border-left:3px solid var(--mint);
  padding:.75rem 1.1rem; border-radius:11px; font-size:.84rem; font-weight:600;
  box-shadow:0 18px 40px rgba(0,0,0,.5); opacity:0; transition:opacity .3s, transform .3s var(--ease);
  max-width:min(92vw,420px) }
.toast.on{ opacity:1; transform:translate(-50%,0) }

/* ─────────── egg overlays ─────────── */
.stampmark{ position:fixed; z-index:70; pointer-events:none; font-family:var(--fm); font-weight:800;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--signal);
  border:2px solid var(--signal); padding:.3rem .55rem; border-radius:6px;
  animation:stampPop 1.9s var(--ease-out) forwards }
@keyframes stampPop{
  0%{ opacity:0; transform:scale(2.1) rotate(-14deg) }
  16%{ opacity:1; transform:scale(1) rotate(-9deg) }
  70%{ opacity:1; transform:scale(1) rotate(-9deg) }
  100%{ opacity:0; transform:scale(1.04) rotate(-9deg) } }

.flit{ position:fixed; z-index:69; pointer-events:none; will-change:transform }

.caught{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1.4rem;
  background:rgba(11,7,20,.9); backdrop-filter:blur(7px); opacity:0; transition:opacity .45s }
.caught.on{ opacity:1 }
.caught-card{ background:linear-gradient(160deg,var(--night-3),var(--night-2)); border:1px solid var(--line);
  border-radius:20px; padding:clamp(1.6rem,4vw,2.6rem); max-width:520px; text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.6); transform:translateY(16px) scale(.97);
  transition:transform .5s var(--ease-out) }
.caught.on .caught-card{ transform:none }
.caught-card h3{ font-size:clamp(1.4rem,3.6vw,2rem); margin:0 0 .8rem }
.caught-card p{ color:var(--bone-2); font-size:.94rem }
.caught-card .stamp{ display:inline-block; margin:.4rem 0 1rem; font-family:var(--fm); font-weight:800;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
  border:2px solid var(--amber); padding:.4rem .8rem; border-radius:7px; transform:rotate(-5deg) }

/* ─────────── scrollbar ─────────── */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px }
  ::-webkit-scrollbar-track{ background:var(--flap-lo) }
  ::-webkit-scrollbar-thumb{ background:var(--flap-hi); border-radius:99px;
    border:3px solid var(--flap-lo) }
  ::-webkit-scrollbar-thumb:hover{ background:var(--signal) }
}

/* ─────────── mascot rig ─────────── */
.pgn-wing{ transform-origin:238px 158px; animation:wingFlap .42s ease-in-out infinite alternate }
.pgn-wing-back{ transform-origin:224px 150px; animation:wingFlap .42s ease-in-out infinite alternate-reverse }
@keyframes wingFlap{ from{ transform:rotate(-11deg) } to{ transform:rotate(9deg) } }
.pgn-head{ transform-origin:270px 140px; animation:headBob .42s ease-in-out infinite alternate }
.pgn-helmet{ transform-origin:300px 96px; animation:headBob .42s ease-in-out infinite alternate }
.pgn-env{ transform-origin:360px 120px; animation:envFlut .5s ease-in-out infinite alternate }
@keyframes headBob{ from{ transform:translateY(-3px) } to{ transform:translateY(2px) } }
@keyframes envFlut{ from{ transform:rotate(-3deg) translateY(-2px) } to{ transform:rotate(4deg) translateY(3px) } }
.pgn-legf{ transform-origin:250px 222px; animation:legF .3s linear infinite alternate }
.pgn-legb{ transform-origin:204px 226px; animation:legB .3s linear infinite alternate }
@keyframes legF{ from{ transform:rotate(-13deg) } to{ transform:rotate(12deg) } }
@keyframes legB{ from{ transform:rotate(14deg) } to{ transform:rotate(-11deg) } }
.pgn-speed path{ animation:speedRun .5s linear infinite }
.pgn-speed path:nth-child(2){ animation-delay:.1s }
.pgn-speed path:nth-child(3){ animation-delay:.2s }
.pgn-speed path:nth-child(4){ animation-delay:.05s }
.pgn-speed path:nth-child(5){ animation-delay:.16s }
@keyframes speedRun{ 0%{ opacity:0; transform:translateX(24px) } 30%{ opacity:1 }
  100%{ opacity:0; transform:translateX(-30px) } }
.pgn-feathers path{ animation:featherDrift 2.6s ease-in-out infinite }
.pgn-feathers path:nth-child(2){ animation-delay:1.1s }
@keyframes featherDrift{ 0%{ transform:translate(0,0) rotate(0) } 50%{ transform:translate(-14px,10px) rotate(-24deg) }
  100%{ transform:translate(0,0) rotate(0) } }
.art-bird{ animation:birdBounce 1.4s ease-in-out infinite alternate }
@keyframes birdBounce{ from{ transform:translateY(-8px) } to{ transform:translateY(6px) } }

/* ─────────── reduced motion ─────────── */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  html:not(.force-motion) .reveal{ opacity:1 !important; transform:none !important }
  html:not(.force-motion) .grain,
  html:not(.force-motion) .echo,
  html:not(.force-motion) .sky{ display:none }
}
html.no-motion .reveal{ opacity:1; transform:none }
html.no-motion .grain, html.no-motion .echo, html.no-motion .sky{ display:none }
html.no-motion .art-bird, html.no-motion .pgn-wing, html.no-motion .pgn-wing-back,
html.no-motion .pgn-head, html.no-motion .pgn-helmet, html.no-motion .pgn-env,
html.no-motion .pgn-legf, html.no-motion .pgn-legb{ animation:none }

/* shot mode — headless capture: everything visible, nothing moving */
html.shot .reveal{ opacity:1 !important; transform:none !important }
html.shot #boot{ display:none }

/* ─────────── the service level agreement ─────────── */
.sla{ margin-top:clamp(1.6rem,3.4vw,2.6rem); background:linear-gradient(180deg,var(--night-3),var(--night-2));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:0 24px 56px rgba(0,0,0,.4) }
.sla-head{ padding:1.3rem 1.4rem .2rem; display:grid; gap:.2rem }
.sla-head .eyebrow{ margin-bottom:.5rem }
.sla-n{ font-size:.86rem; color:var(--bone-3); margin:0 0 1.1rem; max-width:62ch }
.sla-t{ width:100%; border-collapse:collapse; font-size:.9rem }
.sla-t caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.sla-t th, .sla-t td{ text-align:left; padding:.8rem 1.4rem; border-top:1px solid var(--line-2) }
.sla-t th:nth-child(2), .sla-t td:nth-child(2){ text-align:right; width:1%; padding-right:2.6rem }
.sla-t th:nth-child(3), .sla-t td:nth-child(3){ text-align:right; width:1% }
.sla-t thead th{ font-family:var(--fm); font-weight:700; font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-3); background:var(--flap-lo); border-top:1px solid var(--line) }
.sla-t tbody th{ font-weight:600; color:var(--bone-2) }
.sla-t td.d{ color:var(--signal); font-weight:700; letter-spacing:.02em; white-space:nowrap }
.sla-t td.st{ color:var(--mint); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap }
.sla-t tbody tr{ transition:background .25s }
.sla-t tbody tr:hover{ background:rgba(243,236,224,.04) }
.sla-t tr.is-late td.d{ color:var(--amber) }
.sla-t tr.is-late th{ color:var(--bone) }
@media (max-width:560px){
  .sla-t thead{ display:none }
  .sla-t tr{ display:grid; grid-template-columns:1fr auto auto; gap:.5rem; align-items:baseline;
    padding:.15rem 0; border-top:1px solid var(--line-2) }
  .sla-t th, .sla-t td{ border-top:0; padding:.62rem .9rem }
}

/* hero tally */
.missed{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3);
  margin:0 0 1rem }
.missed b{ color:var(--signal); font-weight:700; font-size:.86rem }

/* ─────────── the late click ─────────── */
.holding{ position:relative }
.holding::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:var(--hold,0%);
  background:var(--signal); border-radius:2px; pointer-events:none;
  box-shadow:0 0 8px rgba(255,75,53,.7) }
.receipt{ position:fixed; right:20px; bottom:20px; z-index:82; width:min(88vw,300px);
  background:var(--bone); color:#241C15; border-radius:4px; padding:.9rem 1rem 1rem;
  font-family:var(--fm); box-shadow:0 22px 50px rgba(0,0,0,.55);
  transform:translateY(24px); opacity:0; transition:transform .42s var(--ease-over), opacity .3s;
  background-image:linear-gradient(var(--bone),var(--bone));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),94% 100%,88% calc(100% - 7px),82% 100%,76% calc(100% - 7px),70% 100%,64% calc(100% - 7px),58% 100%,52% calc(100% - 7px),46% 100%,40% calc(100% - 7px),34% 100%,28% calc(100% - 7px),22% 100%,16% calc(100% - 7px),10% 100%,4% calc(100% - 7px),0 100%) }
.receipt.on{ transform:none; opacity:1 }
.receipt h4{ margin:0 0 .5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#8B2116; font-weight:700 }
.receipt p{ margin:0 0 .5rem; font-size:.78rem; line-height:1.5; color:#3A2E22 }
.receipt .n{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#7A6A56; margin:0 }
.receipt .big{ font-size:1.5rem; font-weight:700; color:#B0261A; display:block; margin:.1rem 0 .4rem }