@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexsans-normal-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexsans-normal-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsans-normal-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsans-normal-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root,html[data-theme="dark"]{
  --w0:#f6c56a;--w1:#6fd6c9;--w2:#f497b4;--w3:#b9a6ff;--w4:#8ccaff;--w5:#cfe57c;--w6:#ffa577;--w7:#e0d6c4;
  --bg:#070b14;--panel:rgba(9,14,26,.86);--panel-solid:#0d1424;--panel-2:#162036;--ink:#f3ecdf;--ink-2:#ddd4c4;--muted:#c4bba9;
  --line:#2b3751;--line-soft:#1c2640;--accent:#f6c56a;--accent-ink:#1a1206;--focus:#9cc8ff;--scrim:linear-gradient(90deg,rgba(7,11,20,.94) 0%,rgba(7,11,20,.80) 34%,rgba(7,11,20,0) 52%);
  --serif:"Source Serif 4",Georgia,serif;--display:Fraunces,"Source Serif 4",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;color-scheme:dark}
html[data-theme="light"]{
  --w0:#8a4b00;--w1:#0a5f57;--w2:#9a1840;--w3:#4a2fa8;--w4:#16508f;--w5:#4c6309;--w6:#983a0c;--w7:#55493c;
  --bg:#f3ecdc;--panel:rgba(250,246,236,.9);--panel-solid:#faf6ec;--panel-2:#ece3cf;--ink:#1c1812;--ink-2:#352f26;--muted:#4f483d;
  --line:#cdbf9f;--line-soft:#e0d5bd;--accent:#7a4a00;--accent-ink:#fff8ec;--focus:#1a56b0;--scrim:linear-gradient(90deg,rgba(243,236,220,.96) 0%,rgba(243,236,220,.84) 34%,rgba(243,236,220,0) 52%);color-scheme:light}
@media (prefers-color-scheme:light){html:not([data-theme]){--bg:#f3ecdc;--panel:rgba(250,246,236,.9);--panel-solid:#faf6ec;--panel-2:#ece3cf;--ink:#1c1812;--ink-2:#352f26;--muted:#4f483d;--line:#cdbf9f;--line-soft:#e0d5bd;--accent:#7a4a00;--accent-ink:#fff8ec;--focus:#1a56b0;color-scheme:light}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.06rem/1.6 var(--serif);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;font:500 .86rem/1 var(--sans);background:var(--bg);border-bottom:1px solid var(--line-soft)}
.topbar .brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.topbar .spacer{flex:1}
.topbar .chip{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:5px 9px}
.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}
svg[hidden]{display:none}

/* layout: the map stays put, the story passes beside it (desktop) or below it (phone) */
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:8px;z-index:50;background:var(--panel-solid);padding:8px 12px;border-radius:8px}
.brand-mark{width:20px;height:20px}
.topnav{display:flex;gap:2px;margin-left:12px}
.topnav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:6px}
.topnav a:hover{color:var(--ink)}
.topbar .chip[aria-current]{color:var(--ink);border-color:var(--muted)}
.stage{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:0;background:var(--bg)}
.stage canvas{display:block;width:100%;height:100%;cursor:pointer}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--scrim)}
.map-status{position:absolute;right:16px;bottom:12px;margin:0;font:500 .8rem var(--sans);color:var(--muted)}
.map-tip{position:absolute;z-index:3;max-width:220px;background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:500 .8rem/1.35 var(--sans);color:var(--ink);pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.map-tip b{display:block;font-weight:600}.map-tip span{display:block;color:var(--muted)}.map-tip em{display:block;font:italic 1rem var(--serif);color:var(--accent);margin-top:2px}
.story{position:relative;z-index:2;padding:0 0 30vh 5vw;max-width:calc(5vw + 500px)}
.step{scroll-margin-top:60px;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:22px 24px;margin:0 0 55vh;backdrop-filter:none}
.step.hero{background:transparent;border:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0 40px;margin:0 0 20vh}
.step p{margin:0 0 .9em}
.step em{font-style:italic;color:var(--ink)}
.kicker{font:600 .76rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
h1{font:600 clamp(2.3rem,4.4vw,3.8rem)/1.02 var(--display);letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
h2{font:600 1.6rem/1.15 var(--display);margin:0 0 12px;position:relative;scroll-margin-top:80px}
h3{font:600 1.08rem/1.3 var(--sans);margin:18px 0 6px}
.anchor{margin-left:8px;color:var(--line);text-decoration:none;font-size:.8em;opacity:0}
h2:hover .anchor,.anchor:focus{opacity:1}
.deck{font-size:1.2rem;line-height:1.5;color:var(--ink-2);margin:0 0 22px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 .92rem/1.1 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.small{min-height:40px;padding:8px 14px;font-size:.86rem}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn:disabled{opacity:.4;cursor:default}
.note,.small{font:500 .9rem/1.5 var(--sans);color:var(--muted)}
.ex-title{font:600 1.25rem/1.25 var(--display);margin:16px 0 4px;min-height:1.3em}
details.home{margin-top:16px}details.home summary{cursor:pointer;font:600 .92rem var(--sans);color:var(--accent)}
.step.sub{margin-top:-60vh}
.shared-banner{font:500 .9rem/1.4 var(--sans);background:var(--panel-2);border-radius:10px;padding:10px 12px;margin:0 0 14px}
/* quiz */
.qbox{margin-top:8px}
.q-top{display:flex;align-items:center;gap:12px;font:600 .8rem var(--sans);color:var(--muted)}
.q-bar{flex:1;height:4px;border-radius:4px;background:var(--line-soft);overflow:hidden}.q-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.q-text{font:500 1.28rem/1.35 var(--display);margin:14px 0 12px;min-height:2.7em}
.q-opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);font:italic 1.08rem/1.1 var(--serif);cursor:pointer}
.opt.other{font:500 .86rem var(--sans);border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding-left:6px;padding-right:6px}
.opt.other.on{color:var(--ink);box-shadow:none;background:transparent}
.opt:hover{border-color:var(--w,var(--muted))}
.opt.on{border-color:var(--w,var(--accent));background:var(--w,var(--accent));color:var(--accent-ink)}
.opt .sw{background:var(--w)}
.opt.on .sw{background:var(--accent-ink)}
.q-src{font:500 .78rem/1.4 var(--sans);color:var(--muted);margin:10px 0 0}
.q-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 6px}
.live{font:500 1.06rem/1.4 var(--serif);color:var(--accent);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-soft)}
.q-end{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;justify-content:space-between}
/* result */
.r-main{font:600 1.7rem/1.2 var(--display);margin:0 0 8px;color:var(--ink)}
.r-sub{font:500 .9rem/1.45 var(--sans);color:var(--ink-2);margin:0 0 10px}
.r-how,.r-why{font:500 .88rem/1.45 var(--sans);color:var(--muted)}
.r-why em{font:italic 1rem var(--serif);color:var(--ink)}
.share-block{margin:16px 0}.share-label{font:600 .8rem var(--sans);color:var(--muted);margin:0 0 6px}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.sbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.sbtn:hover,.sbtn:focus-visible{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.sbtn{width:44px;height:44px}}
.status{font:500 .8rem var(--sans);color:var(--muted);min-height:1.2em;margin:6px 0 0}
.search label{display:block;font:600 .8rem var(--sans);color:var(--muted);margin:0 0 6px}
.search-row{display:flex;gap:8px}
.search input{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);padding:8px 12px;font:500 1rem var(--sans)}
.q-list{list-style:none;margin:4px 0 0;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel-solid);max-height:260px;overflow:auto}
.q-list li{padding:9px 10px;border-radius:8px;cursor:pointer;font:500 .95rem var(--sans)}.q-list li:hover{background:var(--panel-2)}
.q-list li small{display:block;color:var(--muted);font-size:.78rem}
.home-out{font:500 .95rem/1.45 var(--sans);margin:10px 0 0}
/* charts */
.chart-fig{margin:16px 0 8px}
.chart{width:100%;height:auto;font:500 10px var(--sans);fill:var(--muted)}
.chart .bar{fill:var(--accent)}.chart .bar.soft{fill:var(--accent);fill-opacity:.7}.chart .axis{stroke:var(--line);stroke-width:1}.chart .rule{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
figcaption.above{margin:0 0 6px;color:var(--ink-2);font-weight:600}.chart .bar2{fill:var(--w1)}.chart .ghost{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 2}
.chart .lbl{fill:var(--ink);font-weight:600}.chart .it{font:italic 12px var(--serif);fill:var(--ink)}.chart .gl{font:11px var(--sans);fill:var(--muted)}
figcaption{font:500 .78rem/1.4 var(--sans);color:var(--muted);margin-top:4px}
/* explorer */
.ex-h{font:600 .8rem var(--sans);color:var(--muted);margin:14px 0 6px}
.ex-chips{display:flex;flex-wrap:wrap;gap:6px}
.ex-chips button{min-height:36px;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 .82rem var(--sans);cursor:pointer}
.ex-chips button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 4px;padding:0;list-style:none;font:italic 1.02rem/1.3 var(--serif)}
.legend li{display:flex;align-items:center;gap:7px}.legend small{font:500 .76rem var(--sans);color:var(--muted);font-style:normal}
/* after the story */
.after{position:relative;z-index:3;background:var(--bg);padding:40px 16px 60px;border-top:1px solid var(--line-soft)}
.wrap{max-width:720px;margin:0 auto 34px}
.prose p{margin:0 0 1em}
.sources{padding-left:1.2em;font:500 .88rem/1.5 var(--sans)}.sources li{margin:0 0 6px}
.related{font:500 .92rem var(--sans)}
.site-footer{position:relative;z-index:3;background:var(--bg);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:22px 16px 40px;font:500 .82rem var(--sans);color:var(--muted);border-top:1px solid var(--line-soft)}
.site-footer a{color:var(--ink-2)}
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px}
.rail a{display:block;width:8px;height:8px;border-radius:50%;background:var(--line);position:relative}
.rail a span{position:absolute;right:16px;top:-6px;white-space:nowrap;font:500 .74rem var(--sans);color:var(--muted);opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus span{opacity:1}
.rail a[aria-current]{background:var(--accent)}
@media (max-width:1100px){.topnav{display:none}}
@media (max-width:899px){
  .stage{height:44svh;z-index:5}
  .stage::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(0,0,0,0) 18%)}
  .story{padding:44svh 0 0;max-width:none;background:transparent}
  .step{border-radius:0;border-width:1px 0 0;margin:0;background:var(--bg);padding:22px 16px 28px}
  .step.hero{min-height:auto;padding:14px 16px 30px;background:var(--bg)}
  h1{font-size:2.1rem}.deck{font-size:1.05rem}
  .rail{display:none}
  .step{scroll-margin-top:calc(44svh + 8px)}h2{scroll-margin-top:calc(44svh + 44px)}
  .topbar .brand span{display:none}
}
.c0{--w:var(--w0)}
.c1{--w:var(--w1)}
.c2{--w:var(--w2)}
.c3{--w:var(--w3)}
.c4{--w:var(--w4)}
.c5{--w:var(--w5)}
.c6{--w:var(--w6)}
.c7{--w:var(--w7)}
.sw{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--w)}
