@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2")}

:root{
  --bg:#06121c;--bg2:#0c2130;--card:#0e2433;--ink:#eef5f7;--ink2:#cfdde2;--muted:#a9bcc4;
  --line:#2b4a5c;--line-soft:#1b3443;--accent:#e9c46a;--accent-ink:#1a1200;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Atkinson Hyperlegible Next",system-ui,-apple-system,sans-serif;
  --bar:3rem;color-scheme:dark
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f4f7f6;--bg2:#e4ecea;--card:#ffffff;--ink:#0b1b22;--ink2:#22363e;--muted:#3c525b;
  --line:#b4c6c9;--line-soft:#d2dddd;--accent:#6b4a00;--accent-ink:#ffffff;color-scheme:light}}
:root[data-theme="light"]{
  --bg:#f4f7f6;--bg2:#e4ecea;--card:#ffffff;--ink:#0b1b22;--ink2:#22363e;--muted:#3c525b;
  --line:#b4c6c9;--line-soft:#d2dddd;--accent:#6b4a00;--accent-ink:#ffffff;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.06rem/1.62 var(--sans);text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.5rem 1rem;z-index:60}
.skip:focus{left:8px;top:8px}
section,.step{scroll-margin-top:calc(var(--bar) + 8px)}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0}
button{font:inherit;color:inherit}
.wrap{width:min(760px,calc(100% - 32px));margin:0 auto}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:.8rem;padding:0 max(16px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);font:500 .9rem/1 var(--sans)}
.home{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:700}
.home-ico{color:var(--accent)}
.topnav{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);text-decoration:none;padding:.5rem .6rem;border-radius:999px;white-space:nowrap}
.topnav a:hover,.topnav a[aria-current]{color:var(--ink);background:var(--bg2)}
.topnav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.spacer{flex:1}
.lang{color:var(--ink);text-decoration:none;font-weight:700;padding:.5rem .3rem;white-space:nowrap}
.lang:hover{color:var(--accent)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:640px){.home{font-size:0}.home-ico{width:34px;height:15px}.topbar{gap:.4rem}}

/* the story: readable as plain cards until the script marks the page live */
.stage{display:none}
.steps{width:min(760px,calc(100% - 32px));margin:0 auto;padding:2rem 0}
.step{margin:0 0 1.2rem}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:clamp(18px,2.4vw,28px)}
.card p{margin:0 0 .8rem}
.card p:last-child{margin-bottom:0}
.card strong{color:var(--accent)}
.kicker{margin:0 0 .7rem;font:700 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hero-card h1{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.01em}
.card .deck{margin:.9rem 0 .8rem;font:400 clamp(1.08rem,1.4vw,1.22rem)/1.5 var(--serif)}
.card .note{margin-top:.9rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.cue{margin-top:1rem;font:700 .86rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ch-head{margin:0 0 .8rem}
.ch-num{margin:0 0 .15rem;font:700 .8rem/1 var(--sans);letter-spacing:.18em;color:var(--accent)}
.ch-head h2{font-size:clamp(1.45rem,2.3vw,1.95rem);font-weight:600}
h2 .anchor{color:inherit;text-decoration:none}
h2 .anchor:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-soft);font-size:.86rem;line-height:1.35}
.meta dt{font:700 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:.15rem 0 0}

.live .scrolly{position:relative;background:#04101a}
.live .stage{display:block;position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow:hidden}
.live #cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.live .steps{position:relative;width:auto;margin:calc(var(--bar) - 100svh) 0 0;padding:0 0 30svh}
.live .step{min-height:88svh;margin:0;display:flex;align-items:center;padding:0 max(16px,4vw);pointer-events:none}
.live .hero-step{min-height:calc(100svh - var(--bar))}
.live .card{pointer-events:auto;width:min(440px,100%);background:rgba(5,16,24,.84);border-color:rgba(160,200,215,.28);color:#eef5f7;backdrop-filter:blur(9px);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.live .hero-card{width:min(600px,100%)}
.live .hero-step{align-items:flex-start;padding-top:clamp(20px,7svh,80px)}
.live .card strong,.live .card .kicker,.live .card .cue,.live .card .ch-num{color:#f0cf7a}
.live .card .note{color:#b9cbd2}
.live .card a{color:#f0cf7a}
.live .meta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:0}
.hud{position:absolute;right:max(16px,3vw);top:14px;display:grid;grid-template-columns:repeat(3,auto);gap:0 1.4rem;padding:.6rem .9rem;border-radius:14px;background:rgba(5,16,24,.72);border:1px solid rgba(160,200,215,.22);color:#eef5f7;font:500 .88rem/1.3 var(--sans);max-width:calc(100% - 32px)}
.hud .k{display:block;font:700 .64rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#a9c0c9}
.hud b{font-weight:700}
@media (max-width:760px){
  .live .step{align-items:flex-end;padding-bottom:5svh;min-height:105svh}
  .live .hero-step{align-items:flex-end;min-height:calc(100svh - var(--bar))}
  .live .card{width:100%;padding:16px 16px 18px;font-size:1rem;line-height:1.52}
  .hud{left:10px;right:10px;top:8px;grid-template-columns:1.3fr 1fr 1fr;gap:0 .7rem;font-size:.78rem;padding:.45rem .6rem}
  .hero-card h1{font-size:1.62rem}
  .card .deck{font-size:1.02rem}
}
@media (max-height:640px) and (max-width:760px){.live .card{font-size:.94rem}.card .note{display:none}}

/* after the story */
.prose{margin-top:4rem}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;margin-bottom:1rem}
.prose h3{font:700 1.05rem/1.3 var(--sans);margin:2rem 0 .6rem}
.prose p{margin:0 0 1rem;color:var(--ink2)}
.small{font-size:.9rem;color:var(--muted)}
.tbl{overflow-x:auto;border:1px solid var(--line-soft);border-radius:12px;margin:0 0 .6rem}
table{border-collapse:collapse;font:500 .86rem/1.3 var(--sans);font-variant-numeric:tabular-nums;width:100%}
th,td{padding:.5rem .6rem;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
th[scope="row"],thead th:first-child{text-align:left;position:sticky;left:0;background:var(--bg)}
thead th{color:var(--muted);font-weight:700}
.src{padding-left:1.1rem;font:400 .95rem/1.55 var(--sans)}
.src li{margin:0 0 .35rem}
.share-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:3rem}
.share-label{color:var(--muted);font-size:.9rem;margin-right:.3rem}
.sh{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.sh:hover,.sh:focus-visible{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){.sh{width:44px;height:44px}.icon-btn{width:44px;height:44px}.lang{padding:.9rem .4rem}}
.sh[hidden]{display:none}
.copied{margin:0 0 0 .5rem;color:var(--muted);font-size:.9rem}
.foot{margin:4rem auto 0;padding:2rem 16px 3rem;border-top:1px solid var(--line-soft);width:min(760px,100%);color:var(--muted);font-size:.95rem}
.foot a{color:var(--ink)}
.nf main{width:min(640px,calc(100% - 32px));margin:20vh auto}

/* phones: the story cards sit along the bottom edge, so the floating Top button waits until the story is over */
@media (max-width:760px){.in-story .to-top-x{display:none!important}}