:root{
  --ground:#0e1a21; --panel:rgba(19,35,44,.94); --line:#25363f; --text:#f3ecdf; --muted:#a9b6bb; --soft:#c9d1d4;
  --amber:#ffb54d; --teal:#58c1c3; --violet:#c3a8ff; --tan:#cfc6b4;
  --display:"Bricolage Grotesque",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans)}
a{color:var(--amber)} a:hover{color:#ffd08f}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

#map{position:fixed;top:0;left:0;bottom:0;right:380px;overflow:hidden}
#map canvas{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;font-weight:500;padding:3px 7px;border-radius:4px;background:rgba(14,26,33,.82);border:1px solid #2f434d;color:#dfe4e2;transition:opacity .25s,background .25s,border-color .25s}
.lbl.up{color:#9fb0b7}
.lbl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#a9b6bb;font-weight:400;margin-top:1px}
.lbl.active small{font-size:11px;color:#ffd08f}
.lbl.active{font-size:14px;font-weight:600;padding:6px 10px;border-color:var(--amber);background:rgba(14,26,33,.95);color:var(--text);box-shadow:0 0 0 3px rgba(255,181,77,.18)}
.lbl.active::after{background:var(--amber);height:14px}
.lbl::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:10px;background:#8a9ba3}
.lbl i{display:inline-block;width:7px;height:7px;border-radius:4px;margin-right:6px;vertical-align:1px}
.stn{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:2px 6px;border-radius:10px;background:#1d5fa0;color:#eaf4ff;transition:opacity .25s}
.ctry{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:rgba(243,236,223,.62);text-shadow:0 1px 6px #000;transition:opacity .25s}
.ctry.bl{font-size:10px;letter-spacing:.08em;color:#ffd08f;background:rgba(14,26,33,.8);padding:2px 7px;border-radius:10px;border:1px solid #6b5230}
.hist{font-size:12px;color:var(--muted)}
.hist summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--amber);min-height:32px;display:flex;align-items:center}
.hist .tline{margin-top:8px}
.dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;border:2px solid #0e1a21;transition:opacity .25s}
.credit{position:absolute;right:10px;bottom:8px;font-size:10.5px;color:#8a9ba3;pointer-events:auto}
.credit a{color:#a9b6bb}
#story{position:relative;height:1600vh;pointer-events:none}

#loading{position:fixed;inset:0;display:flex;gap:12px;align-items:center;justify-content:center;background:var(--ground);z-index:50;font-size:14px;color:var(--soft);transition:opacity .6s;padding-inline:24px;text-align:center}
#loading.done{opacity:0;pointer-events:none}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid #3a4c56;border-top-color:var(--amber);animation:spin 1s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

.topbar{position:fixed;top:0;left:0;right:0;height:64px;padding:0 24px;display:flex;align-items:center;gap:28px;background:linear-gradient(#0e1a21f2,#0e1a21c0);border-bottom:1px solid var(--line);z-index:20}
.brand{display:flex;align-items:baseline;gap:10px;flex-grow:1}
.wordmark{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.coords{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.mainnav{display:flex;gap:24px;font-size:14px}
.mainnav a{color:var(--text);text-decoration:none}
.cta{height:44px;padding:0 18px;display:inline-flex;align-items:center;border-radius:22px;background:var(--amber);color:#14202a;font-weight:600;font-size:14px;text-decoration:none}

.rail{position:fixed;top:64px;bottom:0;left:0;width:240px;padding:28px 0 24px 24px;display:flex;flex-direction:column;gap:18px;z-index:10;background:linear-gradient(90deg,#0e1a21e6 55%,#0e1a2100)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
#chapters{display:flex;flex-direction:column;gap:2px}
#chapters a{display:flex;gap:12px;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);font-size:14px}
#chapters a .d{width:10px;height:10px;border-radius:5px;background:#3a4c56;flex-shrink:0;transition:background .3s}
#chapters a .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
#chapters a.done{color:var(--text)} #chapters a.done .d{background:var(--text)}
#chapters a.on{color:var(--text);font-weight:600} #chapters a.on .d{background:var(--amber)}
.key{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.legend{display:flex;flex-direction:column;gap:7px;font-size:12px}
.legend div{display:flex;gap:9px;align-items:center}
.legend span:last-child{color:var(--muted)}
.sw{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.sw.today{background:var(--tan)} .sw.rising{background:var(--amber)} .sw.approved{background:var(--teal)}
.sw.proposed{background:var(--violet);opacity:.6} .sw.vision{border:1px dashed #e9dfcc}

.panel{position:fixed;top:64px;right:0;bottom:0;width:380px;padding:32px 28px 28px;display:flex;flex-direction:column;gap:16px;background:var(--panel);border-left:1px solid var(--line);z-index:10;overflow-y:auto}
.panel .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--amber)}
.panel h1,.panel h2{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
.panel h1{font-size:42px} .panel h2{font-size:32px}
.panel p{margin:0;font-size:14.5px;line-height:1.55;color:var(--soft);max-width:60ch}
.panel .fade{animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stats{display:flex;flex-direction:column}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.stat .l,.grow .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.stat .v{font-family:var(--display);font-size:28px;font-weight:500;font-variant-numeric:tabular-nums}
.stat .s,.note{font-size:11px;color:var(--muted)}
.grow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.grow .r{font-size:12.5px;color:#b9c3c7;font-variant-numeric:tabular-nums}
.grow .p{font-family:var(--display);font-size:26px;font-weight:700;color:var(--amber);text-align:right}
.cards{display:flex;flex-direction:column;gap:9px}
.card{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:10px;background:#0e1a21;border:1px solid var(--line)}
.card .t{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.card .t i{width:8px;height:8px;border-radius:4px;display:inline-block}
.card .nm{font-size:14.5px;font-weight:600}
.card .fx{font-size:12px;line-height:1.45;color:#b9c3c7}
.card .src{font-size:11.5px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:1px 6px;border-radius:4px;border:1px solid #3a4c56;color:var(--muted)}
.tline{display:flex;flex-direction:column;border-left:1px solid #3a4c56;margin-left:4px}
.tline div{position:relative;padding:0 0 10px 14px;font-size:12.5px;line-height:1.4;color:#c9d1d4}
.tline div::before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;border-radius:4px;background:#3a4c56}
.tline div.next::before{background:var(--amber)}
.tline b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);font-weight:500}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{padding:10px 12px;border-radius:8px;background:#0e1a21;border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .v{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .l{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.adds{font-size:13.5px;line-height:1.5;color:#dfe4e2;padding:10px 12px;border-radius:8px;background:rgba(88,193,195,.08);border:1px solid rgba(88,193,195,.25)}
.adds b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--teal);font-weight:500;margin-bottom:3px}
.chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;gap:7px;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid #3a4c56;color:var(--text)}
.chip i{width:8px;height:8px;border-radius:4px;display:inline-block}
.facts{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 12px;margin:0;font-size:13px;line-height:1.45}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);padding-top:2px}
.facts dd{margin:0;color:#dfe4e2}
.nextup{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.nextup b{color:var(--text);font-weight:600}
.about{font-size:13px!important;color:var(--muted)!important;border-left:2px solid var(--amber);padding-left:10px}
.sources{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em;line-height:1.5}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.btn{height:48px;display:flex;align-items:center;justify-content:center;border-radius:24px;font-weight:600;font-size:15px;text-decoration:none}
.btn.primary{background:var(--amber);color:#14202a}
.btn.ghost{border:1px solid #3a4c56;color:var(--text);font-weight:500}

.pill{display:none}
.scrollcue{position:fixed;left:calc((100% - 380px) / 2);bottom:32px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font-size:13px;color:var(--soft);z-index:9;transition:opacity .4s;text-shadow:0 1px 8px #000;pointer-events:none}
.scrollcue.hide{opacity:0}
.mouse{width:18px;height:28px;border:1px solid var(--soft);border-radius:9px;display:flex;justify-content:center;padding-top:5px}
.mouse i{width:2px;height:6px;border-radius:1px;background:var(--amber);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(6px);opacity:.4}}
.progress{position:fixed;top:64px;left:0;right:0;height:2px;z-index:21}
.progress i{display:block;height:100%;width:0;background:var(--amber)}

@media (max-width: 900px){
  .rail,.coords{display:none}
  .topbar{height:56px;padding:0 16px;gap:12px}
  .cta{height:40px;font-size:13px;padding:0 14px}
  .progress{top:56px}
  #map{right:0;top:56px;bottom:46vh}
  .panel{top:auto;left:0;width:auto;height:46vh;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .panel h1{font-size:30px} .panel h2{font-size:25px}
  .pill{display:flex;position:fixed;top:68px;left:16px;height:32px;padding:0 12px;align-items:center;gap:8px;border-radius:16px;background:#13232c;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;z-index:12}
  .pill b{color:var(--amber);font-weight:500}
  .scrollcue{display:none}
  .lbl{font-size:11px}
  .credit{font-size:9px;left:10px;bottom:4px}
}
@media (prefers-reduced-motion: reduce){ .panel .fade{animation:none} .mouse i,.spinner{animation:none} }

.wordmark{color:var(--text);text-decoration:none}
.mainnav button,.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer;min-height:44px}
.mainnav button:hover,.linkbtn:hover{color:#ffd08f}
button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.linkbtn{color:var(--amber);min-height:auto;text-decoration:underline}
#sources{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:1px solid var(--line);border-radius:14px;background:#13232c;color:var(--text)}
#sources::backdrop{background:rgba(5,12,16,.72)}
#sources .shead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:#13232c;border-bottom:1px solid var(--line)}
#sources h2{margin:0;font-family:var(--display);font-size:26px;letter-spacing:-.01em}
#sources .close{width:44px;height:44px;border-radius:22px;border:1px solid #3a4c56;background:none;color:var(--text);font-size:20px;cursor:pointer}
#sources .sbody{padding:8px 24px 28px;font-size:13.5px;line-height:1.5;color:var(--soft)}
#sources h3{margin:22px 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--amber);font-weight:500}
#sources ul{margin:0;padding-left:18px}
#sources li{margin:4px 0;overflow-wrap:anywhere}
#sources .proj{padding:10px 0;border-top:1px solid var(--line)}
#sources .proj b{color:var(--text);font-weight:600}
#sources .proj.flash{background:rgba(255,181,77,.08)}

/* ---------- the map as the landing page (22 Oct 2026) ----------
   index.html loads global.css first for the footer, then this file. These
   rules undo the global base styles that would otherwise leak into the map,
   and lift the site footer over the fixed map layers once the tour ends. */
body.map-home{background:var(--ground);color:var(--text);font-family:var(--sans);font-size:16px;line-height:normal}
.map-home .panel h1,.map-home .panel h2,.map-home #sources h2{color:var(--text)}
.map-home .panel p+p{margin-top:0}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.wordmark:hover{color:var(--text)}
.wordmark img{display:block;width:40px;height:auto}
.map-home .brand{align-items:center}
.map-home .legend .sw.approved{margin-top:0}
.map-home .chip{background:none;font-weight:400;text-transform:none;padding:0 10px;border-radius:12px}
.map-home .chips{margin-top:0}
.map-home .card{box-shadow:none;transition:none}
.map-home .card:hover{box-shadow:none;transform:none;border-color:var(--line)}
.map-home .eyebrow{margin-bottom:0;font-weight:400;text-transform:none}
.mainnav{align-items:center}
.mainnav .cta{color:#14202a}
.mainnav .cta:hover{color:#14202a;background:#ffc670}
.map-footer{position:relative;z-index:40;font-family:var(--font-body);font-size:var(--size-body);line-height:1.65;color:var(--surface)}
.btn.restart{border:0;cursor:pointer;font:inherit;font-weight:600}
@media (max-width: 900px){
  .wordmark .wm{display:none}
  .mainnav{gap:12px;font-size:13px}
}