@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/atkinson-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2212,U+00D7}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/atkinson-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20AC}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2212}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20AC}

:root{
  --paper:#f2ede3;--card:#fbf8f2;--sunk:#e6dfd1;--ink:#191b20;--ink-2:#41444c;--line:#cbc2b0;
  --bus:#8f2808;--bus-ink:#fff7ee;--gap:#d98f1c;--gap-soft:rgba(217,143,28,.18);--even:#2f6a55;
  --person:#30343c;--road:#bdb4a2;--link:#1d4b9a;--focus:#1d4b9a;
  --led-bg:#16130f;--led-on:#ffb02e;--led-off:#2b241b;
  --shadow:0 1px 2px rgba(25,27,32,.08),0 8px 28px rgba(25,27,32,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0e1116;--card:#161a21;--sunk:#1d222b;--ink:#efe9dd;--ink-2:#c3bdb1;--line:#343a45;
  --bus:#ff8a3d;--bus-ink:#1a0f06;--gap:#f2b33d;--gap-soft:rgba(242,179,61,.16);--even:#6fc3a2;
  --person:#d9d3c6;--road:#3a414d;--link:#9cc0ff;--focus:#9cc0ff;
  --led-bg:#07080a;--led-on:#ffb02e;--led-off:#1d1912;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e1116;--card:#161a21;--sunk:#1d222b;--ink:#efe9dd;--ink-2:#c3bdb1;--line:#343a45;
  --bus:#ff8a3d;--bus-ink:#1a0f06;--gap:#f2b33d;--gap-soft:rgba(242,179,61,.16);--even:#6fc3a2;
  --person:#d9d3c6;--road:#3a414d;--link:#9cc0ff;--focus:#9cc0ff;
  --led-bg:#07080a;--led-on:#ffb02e;--led-off:#1d1912;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Atkinson",system-ui,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--ink);padding:8px 12px;z-index:50}
.skip-link:focus{left:8px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:620;letter-spacing:-.01em;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6.4vw,4.4rem);font-weight:680;font-variation-settings:"SOFT" 50,"WONK" 0}
h2{font-size:clamp(1.45rem,3.2vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
strong{font-weight:700}
.num{font-variant-numeric:tabular-nums}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:52px;padding:0 12px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;min-height:44px}
.brand svg{width:22px;height:22px;color:var(--bus)}
.topnav{display:flex;gap:2px;margin-left:12px;overflow:hidden}
.topnav a{color:var(--ink-2);text-decoration:none;font-size:.88rem;padding:10px 8px;border-radius:6px;white-space:nowrap}
.topnav a[aria-current="true"],.topnav a:hover{color:var(--ink);background:var(--sunk)}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--ink-2);text-decoration:none;font-size:.85rem;font-weight:700;border-radius:8px}
.chip[aria-current="page"]{color:var(--ink);background:var(--sunk)}
.icon-btn{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--sunk)}
:root .i-moon{display:none}
:root[data-theme="dark"] .i-moon{display:block}:root[data-theme="dark"] .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-moon{display:block}:root:not([data-theme="light"]) .i-sun{display:none}}
@media (max-width:860px){.topnav{display:none}}
@media (max-width:520px){.brand span{display:none}}

/* rail */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:2px;padding:6px 4px}
.rail-dot{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:30px;min-width:30px;text-decoration:none;color:var(--ink-2)}
.rail-dot .dot{width:8px;height:2px;background:var(--line);border-radius:2px;transition:width .2s,background .2s}
.rail-dot[aria-current="true"] .dot{width:18px;background:var(--bus)}
.rail-label{font-size:.78rem;opacity:0;transition:opacity .2s;background:var(--card);padding:2px 6px;border-radius:4px;pointer-events:none}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
.rail{opacity:0;transition:opacity .3s}.rail.on{opacity:1}
@media (max-width:700px){.rail{display:none}}
.progress{position:fixed;left:0;right:0;top:52px;height:2px;z-index:29;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--bus)}

/* hero */
.hero{min-height:calc(100svh - 52px);display:grid;align-content:center;gap:28px;padding:40px 20px 56px;max-width:1120px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:24px}.hero{align-content:start;padding-top:20px}}
.kicker{font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bus);margin-bottom:.8em}
.deck{font-size:clamp(1.12rem,2.1vw,1.32rem);line-height:1.5;color:var(--ink);max-width:36em}
.scroll-cue{color:var(--ink-2);font-size:.95rem;margin-top:1.4em}
.board{background:var(--led-bg);border-radius:14px;padding:18px 18px 14px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.04);margin:0}
.board canvas{display:block;width:100%;height:auto}
.board figcaption{color:#e9dfcc;font-size:.88rem;line-height:1.45;margin-top:12px;opacity:1}
.board figcaption b{color:#ffcf7a;font-weight:700}

/* story */
.story{position:relative}
.stage{position:sticky;top:52px;height:calc(100svh - 52px);z-index:1}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hud{position:absolute;left:16px;top:14px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.pill{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.88rem;box-shadow:var(--shadow)}
.pill b{color:var(--bus)}
.steps{list-style:none;margin:-100svh 0 0;padding:0;position:relative;z-index:2;pointer-events:none}
.step{min-height:105svh;display:flex;align-items:center;padding:0 20px;pointer-events:none}
.step-card{pointer-events:auto;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;box-shadow:var(--shadow);margin-left:max(20px,calc(50vw - 560px))}
.step-card p:last-child{margin-bottom:0}
.when{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5em}
.anchor{margin-left:.35em;color:var(--ink-2);text-decoration:none;font-size:.7em;opacity:0}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
.figs{display:flex;gap:18px;margin:4px 0 14px;flex-wrap:wrap}
.fig b{display:block;font-family:"Fraunces",serif;font-size:1.9rem;font-weight:650;line-height:1.05;color:var(--bus)}
.fig span{font-size:.86rem;color:var(--ink-2)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.btn{min-height:44px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);font:600 .95rem/1.2 "Atkinson",sans-serif;cursor:pointer}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--bus);border-color:var(--bus);color:var(--bus-ink)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tally{font-size:.95rem;color:var(--ink);background:var(--sunk);border-radius:10px;padding:10px 12px;margin:10px 0 0}
.tally:empty{display:none}
.hint{font-size:.9rem;color:var(--ink-2)}
@media (max-width:860px){
  .stage{height:42svh;z-index:3;background:var(--paper);box-shadow:0 8px 14px -10px rgba(0,0,0,.35)}
  .steps{margin-top:-42svh}
  .step{min-height:auto;padding:58svh 12px 30svh;align-items:flex-end}
  .step:first-child{padding-top:46svh}
  .step-card{margin:0 auto;max-width:560px;padding:18px 16px 14px}
  .hud{left:10px;top:8px}
  .pill{font-size:.8rem;padding:3px 9px}
}

/* after the story */
.after{position:relative;z-index:3;background:var(--paper)}
.prose{max-width:720px;margin:0 auto;padding:40px 20px 24px}
.block{padding:28px 0 18px;border-top:1px solid var(--line)}
.block:first-child{border-top:0}
.wide{max-width:1060px;margin:0 auto;padding:0 20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin:18px 0}
.finder{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.finder label{font-weight:700}
.finder input{min-height:44px;width:9em;font:600 1.1rem "Atkinson",sans-serif;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{min-height:44px;min-width:44px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 .95rem "Atkinson",sans-serif;cursor:pointer;padding:0 10px}
.quick button[aria-pressed="true"]{background:var(--bus);color:var(--bus-ink);border-color:var(--bus)}
.route-card h3{margin-bottom:.3em}
.bars{display:grid;gap:10px;margin:12px 0}
.bar{display:grid;grid-template-columns:8.5em 1fr 6.4em;gap:10px;align-items:center;font-size:.92rem}
.bar small{font-weight:400}
.bbars{display:grid;gap:12px;margin:4px 0 12px}
.bbar{display:grid;grid-template-columns:8em 1fr 12.5em;gap:4px 12px;align-items:center;font-size:.92rem}
.bbar .lab{grid-column:1;grid-row:1}.bbar .bars2{grid-column:2;grid-row:1;display:grid;gap:3px}.bbar .val{grid-column:3;grid-row:1;text-align:right}
.bbar i{display:block;height:9px;border-radius:3px;background:var(--even)}.bbar i.real{background:var(--gap)}
@media (max-width:640px){.bbar{grid-template-columns:1fr auto}.bbar .bars2{grid-column:1/-1;grid-row:2}.bbar .val{grid-column:2}}
.bar i{display:block;height:16px;border-radius:4px;background:var(--even)}
.bar i.real{background:var(--gap)}
.bar span:last-child{text-align:right;font-weight:700}
.scatter{width:100%;height:auto;display:block}
.scatter .dot{fill:var(--ink-2);opacity:.55;cursor:pointer}
.scatter .dot.on{fill:var(--bus);opacity:1}
.scatter .ax{stroke:var(--line)}
.scatter text{fill:var(--ink-2);font:var(--sc-font,13px) "Atkinson",sans-serif}
.scatter .diag{stroke:var(--even);stroke-dasharray:4 4}
.live{margin-top:16px}
.live canvas{display:block;width:100%;height:auto;background:var(--sunk);border-radius:10px}
.live-meta{font-size:.9rem;color:var(--ink-2);margin:.5em 0 0}
.live-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-2);margin:.4em 0}
.legend i{display:inline-block;width:14px;height:8px;border-radius:3px;vertical-align:middle;margin-right:5px}
.chart-cap{font-size:.9rem;color:var(--ink-2)}
.sources{padding-left:1.1em;font-size:.95rem}
.sources li{margin:.35em 0}
.related{font-size:.95rem}

/* share */
.share{margin:14px 0 4px}
.share-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.share-label{font-size:.9rem;font-weight:700;margin-right:6px;color:var(--ink-2)}
.ic{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.ic:hover{border-color:var(--ink-2)}
.share-msg{font-size:.88rem;color:var(--ink-2);min-height:1.2em;margin:.3em 0 0}

.site-footer{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:28px 20px 60px;color:var(--ink-2);font-size:.9rem;border-top:1px solid var(--line);max-width:1060px;margin:20px auto 0}
.back-top{position:fixed;right:14px;bottom:14px;z-index:25;display:flex;gap:6px;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 .88rem "Atkinson",sans-serif;cursor:pointer;box-shadow:var(--shadow)}
noscript p{background:var(--sunk);padding:12px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}