:root{
  --abyss:#060F16; --basin:#0B1922; --silt:#162A36; --silt-2:#20404F;
  --bone:#EDE6D6; --dust:#8DA4B0; --dim:#5C7484;
  --paper:#E6DECB; --paper-ink:#1A2730; --ember:#FF7A45; --aqua:#00D6E6;
  --display:'Fraunces',Georgia,serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--abyss);color:var(--bone);font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 700px at 18% -10%, rgba(45,90,120,.20), transparent 62%),
    radial-gradient(900px 620px at 92% 108%, rgba(90,40,80,.16), transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:1460px;margin:0 auto;padding:26px 20px 64px}

.masthead{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--silt);padding-bottom:18px;margin-bottom:20px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,54px);line-height:.98;letter-spacing:-.015em;margin:0}
h1 em{font-style:italic;color:var(--aqua)}
.standfirst{max-width:52ch;color:var(--dust);font-size:14px;margin:12px 0 0}
.asof{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:right;line-height:1.7;white-space:nowrap}
.asof b{color:var(--bone);font-weight:500}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--silt);
  border:1px solid var(--silt);margin-bottom:20px}
.stat{background:var(--basin);padding:13px 15px}
.stat .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-family:var(--display);font-size:29px;line-height:1.15;margin-top:3px;letter-spacing:-.02em}
.stat .n{font-size:11.5px;color:var(--dust);margin-top:2px}
.v.low{color:var(--ember)} .v.mid{color:#EFD01B} .v.ok{color:#2FD94F}

.controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:10px}
.seg{display:inline-flex;border:1px solid var(--silt-2);background:var(--basin)}
.seg button{appearance:none;background:transparent;border:0;color:var(--dust);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px;transition:background .18s,color .18s}
.seg button + button{border-left:1px solid var(--silt-2)}
.seg button[aria-pressed="true"]{background:var(--bone);color:var(--paper-ink)}
.seg button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.seglab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{appearance:none;cursor:pointer;background:transparent;color:var(--dust);border:1px solid var(--silt-2);
  padding:6px 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .18s,color .18s}
.chip:hover{border-color:var(--aqua);color:var(--bone)}
.chip[aria-pressed="true"]{border-color:var(--bone);color:var(--bone);background:rgba(237,230,214,.07)}
.chip:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

.timeline{display:flex;align-items:center;gap:14px;border:1px solid var(--silt);background:var(--basin);
  padding:10px 14px;margin-bottom:14px}
.playbtn{appearance:none;cursor:pointer;width:34px;height:34px;border:1px solid var(--silt-2);background:transparent;
  color:var(--aqua);font-size:13px;line-height:1;flex:none}
.playbtn:hover{border-color:var(--aqua)}
.playbtn:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.timeline input[type=range]{flex:1;accent-color:#00D6E6;min-width:120px}
.month{font-family:var(--mono);font-size:12px;color:var(--bone);min-width:98px;text-align:right}
.month small{display:block;font-size:9px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}

.stage{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.chart{position:relative;border:1px solid var(--silt);background:linear-gradient(180deg,#0A1721,#071119);overflow:hidden}
.chart svg{display:block;width:100%;height:auto;cursor:grab}
.chart svg:active{cursor:grabbing}
.viewnote{position:absolute;left:0;bottom:0;right:0;padding:9px 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--dim);background:linear-gradient(0deg,rgba(6,15,22,.94),rgba(6,15,22,0));pointer-events:none}
.zoomctl{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:1px;
  background:var(--silt-2);border:1px solid var(--silt-2)}
.zoomctl button{appearance:none;border:0;cursor:pointer;background:var(--basin);color:var(--dust);
  width:34px;height:32px;font-family:var(--mono);font-size:15px;line-height:1}
.zoomctl button:hover{background:var(--silt);color:var(--bone)}

.sheet{background:var(--paper);color:var(--paper-ink);border:1px solid #cfc5ab;padding:18px 18px 16px;
  position:sticky;top:18px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sheet .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6d6450;
  border-bottom:1px solid #cfc5ab;padding-bottom:8px;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}
.sheet h2{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.05;margin:0 0 2px;letter-spacing:-.01em}
.sheet .sub{font-size:12px;color:#5f5949;margin-bottom:12px}
.gauge{margin:6px 0 14px}
.gaugebar{position:relative;height:30px;background:#d5cbb2;border:1px solid #bfb59c;overflow:hidden}
.gaugefill{position:absolute;left:0;top:0;bottom:0;display:flex;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.gaugefill span{display:block;height:100%}
.gaugefill span+span{box-shadow:inset 1px 0 0 rgba(7,17,25,.35)}
.gaugemed{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px solid #1A2730}
.gaugelbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:#5f5949;margin-top:5px}
.rows{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.rows td{padding:5px 0;border-bottom:1px solid #d7cdb5;vertical-align:top}
.rows td:last-child{text-align:right;font-weight:500}
.rows tr:last-child td{border-bottom:0}
.rows .lab{color:#6d6450;letter-spacing:.04em;text-transform:uppercase;font-size:9.5px;padding-right:10px}
.prov{margin-top:12px;font-size:10.5px;line-height:1.5;color:#5f5949;font-family:var(--mono)}
.prov b{color:#1A2730;font-weight:500}
.badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor}
.badge.obs{color:#1d5c4a} .badge.est{color:#8a5a1d}
.empty{color:#5f5949;font-size:12.5px;line-height:1.6}
.compbar{display:flex;height:16px;border:1px solid #bfb59c;margin:2px 0 10px;overflow:hidden}
.compbar div{height:100%}
.complist{font-family:var(--mono);font-size:10.5px;line-height:1.75;color:#3c3a33}
.complist span.sw{display:inline-block;width:9px;height:9px;margin-right:6px;border:1px solid rgba(0,0,0,.25)}
.complist b{float:right;font-weight:500}
.srcline{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-family:var(--mono);font-size:10.5px;color:#3c3a33}
.srcline .sw{width:13px;height:13px;border:1px solid rgba(0,0,0,.3);flex:none}

.below{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:22px}
.card{border:1px solid var(--silt);background:var(--basin);padding:16px 18px}
.card h3{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:400}
.keyrow{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dust);margin-bottom:6px}
.swatch{width:20px;height:5px;flex:none;border-radius:2px}
.card p{font-size:12.5px;color:var(--dust);margin:0 0 10px;line-height:1.6}
.src{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--dust)}
.src li{margin-bottom:9px;list-style:none}
.src b{color:var(--bone);font-weight:500;display:block}
.src ul{padding:0;margin:0}
.livestat{font-family:var(--mono);font-size:11px;color:var(--dust);margin-top:10px;line-height:1.6}
.livestat a{color:var(--aqua)}
.paste{display:none;margin-top:10px}
.paste textarea{width:100%;height:70px;background:#08131B;border:1px solid var(--silt-2);color:var(--dust);
  font-family:var(--mono);font-size:10px;padding:8px;resize:vertical}
.paste button{margin-top:6px}

/* ------- SVG text: halo + hierarchy ------- */
text{font-family:var(--body);user-select:none;-webkit-user-select:none}
.lbl,.lbl2,.gval,.gid,.pmlbl,.xlbl,.xq{paint-order:stroke;stroke:#071119;stroke-width:3.75px;stroke-linejoin:round}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.03em;fill:#D9E4EA}
.lbl2{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;fill:#A9BCC7}
.gval{font-family:var(--mono);font-size:10px;fill:#8FA8B5}
.gid{font-family:var(--mono);font-size:8.5px;fill:#547482}
.pmlbl{font-family:var(--mono);font-size:9.5px}
.xlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:#D8DFE3}
.xq{font-family:var(--mono);font-size:9px;fill:#7E96A3}
.lbl-riv{font-family:var(--display);font-style:italic;font-size:11.5px;fill:#8FB2C4;paint-order:stroke;stroke:#071119;stroke-width:3px}
.lbl-big{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;fill:#4E6E80}
.lbl-basin{font-family:var(--mono);font-size:10px;letter-spacing:.22em;cursor:pointer;paint-order:stroke;stroke:#071119;stroke-width:3px}
.lbl-basin:hover{fill:#EDE6D6}
.tick{font-family:var(--mono);font-size:8px;fill:var(--dim)}
.ilbl{font-family:var(--mono);font-size:7.5px;fill:#0A1721;font-weight:600}
.hudlbl{font-family:var(--mono);font-size:9px;letter-spacing:.05em;fill:#8DA4B0}
.node-hit{cursor:pointer}
.node-hit:focus-visible{outline:none}
/* semantic zoom: label visibility is driven from JS; fade softly */
#viz g.lab,#viz text{transition:opacity .22s linear}
@media (max-width:940px){.stage{grid-template-columns:1fr}.sheet{position:static}.asof{text-align:left}}

/* fullscreen the map+sheet stage */
body.fs-on{overflow:hidden}
.stage.fs{position:fixed;inset:0;z-index:200;margin:0;padding:12px;gap:12px;background:var(--abyss);
  grid-template-columns:minmax(0,1fr) 340px}
.stage.fs .chart{height:100%}
.stage.fs .chart svg{height:100%}
.stage.fs .sheet{max-height:calc(100vh - 24px);overflow-y:auto}
@media (max-width:940px){.stage.fs{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow-y:auto}}

/* per-ZIP list — the map is hard to use on a phone, so small screens get a
   scannable list of your reservoirs + gages instead of the SVG */
.ziplist{display:none}
.zl-head{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dust);
  padding:2px 2px 10px;border-bottom:1px solid var(--silt);margin-bottom:6px}
.zl-sec{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 4px}
.zl-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;appearance:none;cursor:pointer;
  background:var(--basin);border:1px solid var(--silt);border-radius:0;color:var(--bone);
  padding:8px 12px;margin-bottom:6px;font-family:var(--body)}
.zl-row:active{background:var(--silt)}
.zl-g{flex:0 0 28px;display:flex;justify-content:center}
.zl-dia{color:var(--aqua);font-size:15px}
.zl-n{flex:1;font-size:14px;color:var(--dust)}
.zl-p{font-family:var(--mono);font-size:12px;font-weight:500}
@media (max-width:700px){
  .ziplist{display:block}
  .controls{display:none}
  .stage{display:block}      /* single column; chart hidden, sheet flows below the list */
  .stage .chart{display:none}
  .stage.fs{display:grid}
  .stage.fs .chart{display:block}
  /* Flow ("step-down") view IS shown on mobile — it's the one map view that
     works on a phone. Show the chart + the view toggle, hide the ZIP list. */
  body.view-flow .controls{display:flex}
  body.view-flow .ziplist{display:none}
  body.view-flow .stage .chart{display:block}
  body.view-flow .stage .chart svg{min-height:60vh}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------- site nav + subpages ------- */
.nav{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:baseline;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;color:var(--dim)}
.nav .brand{color:var(--bone);margin-right:auto;letter-spacing:.2em;text-decoration:none}
.nav a{color:var(--dust);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--aqua)}

.prose{max-width:72ch;color:var(--dust);font-size:14.5px;line-height:1.75}
.prose h2{font-family:var(--display);font-weight:400;font-size:27px;letter-spacing:-.01em;color:var(--bone);margin:38px 0 12px}
.prose h2 em{font-style:italic;color:var(--aqua)}
.prose p{margin:0 0 14px}
.prose b{color:var(--bone);font-weight:500}
.prose a{color:var(--aqua)}
.prose ul{padding-left:20px;margin:0 0 14px}
.prose li{margin-bottom:7px}
.prose .aside{border-left:2px solid var(--silt-2);padding:2px 0 2px 16px;color:var(--dim);font-size:13px;margin:18px 0}
.prose ul.grades{list-style:none;padding-left:0}
.prose ul.grades li{margin-bottom:10px}
.prose ul.grades .badge{margin-right:8px;vertical-align:1px}
.prose pre.cmd{font-family:var(--mono);font-size:12px;background:var(--basin);border:1px solid var(--silt);
  border-left:2px solid var(--silt-2);padding:12px 16px;margin:12px 0 18px;overflow-x:auto;color:var(--bone);line-height:1.7}

.tablewrap{overflow-x:auto;border:1px solid var(--silt);background:var(--basin);margin:18px 0}
.dtable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;min-width:820px}
.dtable th{text-align:left;color:var(--dim);text-transform:uppercase;font-size:9px;letter-spacing:.12em;
  padding:9px 10px;border-bottom:1px solid var(--silt-2);white-space:nowrap;font-weight:400}
.dtable td{padding:6px 10px;border-bottom:1px solid var(--silt);color:var(--dust);white-space:nowrap}
.dtable tr:last-child td{border-bottom:0}
.dtable td.num{text-align:right;font-variant-numeric:tabular-nums}
.dtable th.num{text-align:right}
.dtable td b{color:var(--bone);font-weight:500}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:20px 0}
.dl .card p{min-height:54px}
.dlbtn{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--aqua);border:1px solid var(--aqua);padding:8px 13px;text-decoration:none;cursor:pointer;background:transparent}
.dlbtn:hover{background:rgba(0,214,230,.1)}
.foot{margin-top:52px;border-top:1px solid var(--silt);padding-top:16px;font-family:var(--mono);
  font-size:10.5px;color:var(--dim);line-height:1.8}
.foot a{color:var(--dust)}

/* ------- v2: flow animation + hydrograph ------- */
@keyframes flowdash{to{stroke-dashoffset:-36}}
@keyframes tundash{to{stroke-dashoffset:-15}}
@keyframes mapdash{to{stroke-dashoffset:-9}}
.flowanim{animation:flowdash 4s linear infinite}
.tunanim{animation:tundash 2.2s linear infinite}
.mapdash{animation:mapdash 1.8s linear infinite}

.hydro{margin:14px 0 4px;border-top:1px solid #d7cdb5;padding-top:10px}
.hydro-cap{font-family:var(--mono);font-size:9px;color:#6d6450;margin-top:4px;letter-spacing:.04em;line-height:1.5}

/* ------- your tap: ZIP lookup bar ------- */
.zipbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:1px solid var(--silt);
  background:linear-gradient(90deg,rgba(0,214,230,.07),transparent 55%),var(--basin);
  padding:12px 16px;margin-bottom:14px}
.zipbar label{font-family:var(--display);font-size:17px;letter-spacing:-.01em;color:var(--bone)}
.zipbar label em{font-style:italic;color:var(--aqua)}
.zipbar input{width:110px;background:#08131B;border:1px solid var(--silt-2);color:var(--bone);
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;padding:8px 11px;outline:none}
.zipbar input:focus{border-color:var(--aqua)}
.zipbar button{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--aqua);color:var(--aqua);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:8px 14px}
.zipbar button:hover{background:rgba(0,214,230,.1)}
.zipbar #zipclear{border-color:var(--silt-2);color:var(--dust)}
.zipbar #zipmsg{font-family:var(--mono);font-size:10.5px;color:var(--dust)}

/* ------- sparkline stat tiles ------- */
.stat{display:flex;flex-direction:column}
.spark{margin-top:8px}
.sparksvg{width:100%;height:20px;display:block;opacity:.9}

/* ------- timeline page ------- */
.tl-intro{max-width:60ch;color:var(--dust);font-size:14px;line-height:1.7;margin:0 0 16px}
.tl-intro b{color:var(--bone);font-weight:500}

/* =====================================================================
   THE STORY (index.html) — clean stepped panels, no scroll-jacking
   ===================================================================== */
.story-stage{position:relative;min-height:68vh;display:flex;flex-direction:column;justify-content:center;padding:8px 0 40px}
.story-step{display:none}
.story-step.is-active{display:block;animation:storyIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes storyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.story-step.is-active{animation:none}}

.story-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.story-back{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 0}
.story-back:hover{color:var(--bone)}
.progress-rail{display:flex;gap:8px}
.progress-rail .dot{width:8px;height:8px;border-radius:50%;background:var(--silt-2)}
.progress-rail .dot.on{background:var(--aqua)}

/* entry */
.story-hero{max-width:60ch;margin:0 auto;text-align:center;padding:20px 0}
.story-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1.0;letter-spacing:-.02em;margin:6px 0 0}
.story-hero h1 em{font-style:italic;color:var(--aqua)}
.story-hero .lede{color:var(--dust);font-size:16px;line-height:1.7;margin:18px auto 26px;max-width:52ch}
.zip-entry{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.zip-entry input{width:150px;background:#08131B;border:1px solid var(--silt-2);color:var(--bone);
  font-family:var(--mono);font-size:16px;letter-spacing:.18em;text-align:center;padding:12px 14px;outline:none}
.zip-entry input:focus{border-color:var(--aqua)}
.zip-entry button{appearance:none;cursor:pointer;background:var(--aqua);border:1px solid var(--aqua);color:#04222a;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;font-weight:500}
.zip-entry button:hover{background:#5be7f2}
.zipmsg{min-height:18px;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--dust)}
.orpick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:14px 0 10px}
.citychips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:44ch;margin:0 auto}
/* two-line chip: the city, and the basin it drinks from (with the basin's hue)
   so the picker doubles as a reminder that all seven basins are represented */
.citychip{appearance:none;cursor:pointer;background:transparent;color:var(--dust);border:1px solid var(--silt-2);
  padding:7px 12px;font-family:var(--mono);letter-spacing:.04em;text-align:left;
  display:flex;flex-direction:column;gap:3px;transition:border-color .18s,color .18s}
.citychip .cc-city{font-size:11.5px;color:var(--dust)}
.citychip .cc-basin{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.citychip .cc-basin i{width:6px;height:6px;flex:0 0 6px;display:inline-block}
.citychip:hover{border-color:var(--aqua)}
.citychip:hover .cc-city{color:var(--bone)}
.skiplink{display:inline-block;margin-top:26px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none}
.skiplink:hover{color:var(--aqua)}

/* content steps */
.story-body{max-width:66ch;margin:0 auto}
.story-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0}
.story-h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.6vw,46px);line-height:1.02;letter-spacing:-.015em;margin:4px 0 16px}
.story-prose{color:var(--dust);font-size:15.5px;line-height:1.75;margin:0 0 18px}
.reveal{border-left:2px solid var(--aqua);padding:2px 0 2px 16px;color:var(--bone);font-size:15px;line-height:1.6;margin:18px 0}
.reveal b{color:var(--aqua);font-weight:500}
.fc-note{color:var(--dim);font-size:13px;line-height:1.6;font-style:italic;margin:18px 0 0}
.src-tip{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;margin-top:20px}

/* basin stat panel */
.basin-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--silt);border:1px solid var(--silt);margin:24px 0 8px}
.bp-cell{background:var(--basin);padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px}
.bp-num{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:-.02em}
.bp-lab{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--dim);letter-spacing:.03em}
.bp-spark .sparksvg{height:34px}
@media (max-width:620px){.basin-panel{grid-template-columns:1fr;gap:1px}}

/* Source strip. Reservoirs are ROWS, not bare cups: a lone glass told the
   reader nothing, so each row carries its share of the provider's supply, the
   volume in it today, and the shape of a normal year at that reservoir. */
.src-slope{margin:22px 0 0}
.src-slope-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--silt);padding-bottom:7px;margin-bottom:4px;
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.src-slope-n{letter-spacing:.06em;text-transform:none;color:var(--dust)}
.gmini{display:block}
.rrows{display:flex;flex-direction:column}
.rrow{display:grid;grid-template-columns:38px minmax(0,1fr) 108px 132px;gap:14px;align-items:center;
  padding:13px 2px;border-bottom:1px solid var(--silt)}
.rrow:last-child{border-bottom:0}
.rr-glass{display:flex;justify-content:center}
.rr-name{font-size:14px;color:var(--bone);line-height:1.3}
.rr-live{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aqua);border:1px solid rgba(0,214,230,.4);padding:1px 4px;margin-left:7px;vertical-align:2px}
.rr-sub{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:3px;line-height:1.5}
.rr-sub b{color:var(--dust);font-weight:500}
.rr-share{height:3px;background:var(--silt);margin-top:7px;max-width:260px}
.rr-share i{display:block;height:3px;background:var(--silt-2)}
.rr-spark{display:flex;flex-direction:column;gap:3px}
.resspark{display:block;width:104px;height:26px}
.rr-sparklab{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--dim)}
.rr-val{text-align:right}
.rr-pct{font-family:var(--mono);font-size:17px;font-weight:500;line-height:1.1}
.rr-of{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--dim);margin-top:2px}
.rr-af{font-family:var(--mono);font-size:10px;color:var(--dust);margin-top:5px;white-space:nowrap}
@media (max-width:700px){
  .rrow{grid-template-columns:34px minmax(0,1fr) auto;gap:8px 10px}
  /* the spark answers "is this level normal for NOW?" — that matters most on
     a phone, so it reflows to its own row instead of disappearing */
  .rr-spark{grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px}
  .resspark{width:150px;height:26px}
  .rr-val{grid-column:3}
}

/* CTA button */
.story-cta{display:inline-block;appearance:none;cursor:pointer;margin-top:28px;text-decoration:none;
  background:transparent;border:1px solid var(--aqua);color:var(--aqua);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px}
.story-cta:hover{background:rgba(0,214,230,.1)}

/* =====================================================================
   THE STORY — long-form scrolling article (index.html, #step-article)
   ===================================================================== */
.story-stage:has(#step-article.is-active){justify-content:flex-start}
.lr-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  background:rgba(6,15,22,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--silt);
  padding:11px 2px;margin:0 0 8px}
.lr-place{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dust);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-explore{margin-left:auto;text-decoration:none;white-space:nowrap;
  border:1px solid var(--aqua);color:var(--aqua);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:8px 14px}
.lr-explore:hover{background:rgba(0,214,230,.1)}
@media (max-width:640px){.lr-explore{display:none}}

.longread{max-width:640px;margin:0 auto}
.lr-hero{padding:14px 0 6px;border-bottom:1px solid var(--silt);margin-bottom:8px}
.lr-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0}
.lr-title{font-family:var(--display);font-weight:400;font-size:clamp(32px,7vw,52px);line-height:1.02;
  letter-spacing:-.02em;margin:8px 0 0;color:var(--bone)}
.lr-servedby{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--dust);margin:10px 0 0}
.lr-servedby b{color:var(--aqua);font-weight:500}
.lr-sub{color:var(--dust);font-size:15px;line-height:1.65;margin:12px 0 0;max-width:56ch}

.lr-sec{padding:34px 0;border-bottom:1px solid var(--silt)}
.lr-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin:0 0 6px}
.lr-h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,4.4vw,34px);line-height:1.1;
  letter-spacing:-.01em;color:var(--bone);margin:0 0 16px}
.lr-h3{font-family:var(--body);font-weight:600;font-size:16px;color:var(--bone);margin:26px 0 10px;letter-spacing:.01em}
.lr-p{color:var(--dust);font-size:15.5px;line-height:1.72;margin:0 0 15px;max-width:60ch}
.lr-p b,.lr-h2 b{color:var(--bone);font-weight:600}
.lr-p i{color:#a9bdc7;font-style:italic}
.lr-aside{border-left:2px solid var(--silt-2);padding-left:16px;color:var(--dim);font-size:14.5px}
.lr-list{margin:0 0 15px;padding-left:20px;max-width:60ch}
.lr-list li{color:var(--dust);font-size:15px;line-height:1.66;margin-bottom:11px}
.lr-list.lr-links{list-style:none;padding-left:0}
.lr-list.lr-links li{margin-bottom:8px}

/* inline verify links on bold nouns */
.wikilink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dim);transition:border-color .15s,color .15s}
.wikilink b{color:var(--bone)}
.wikilink:hover{border-bottom-color:var(--aqua)}
.wikilink:hover b{color:var(--aqua)}
.lr-cite{display:inline;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);white-space:nowrap}

/* fact grid (§ snow) */
/* 240px floor so the four facts land as a clean 2x2 in the 640px column
   rather than 3-up with an empty cell */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--silt);border:1px solid var(--silt);margin:20px 0}
.fact{background:var(--basin);padding:16px 16px 15px}
.fact-stat{font-family:var(--display);font-weight:400;font-size:26px;color:var(--bone);line-height:1;letter-spacing:-.01em}
.fact-lab{color:var(--dust);font-size:12.5px;line-height:1.5;margin-top:8px}

/* interactive seven-basin map */
.basinmap-wrap{margin:18px 0}
.basinmap{display:block;width:100%;height:auto;border:1px solid var(--silt);background:#08131B}
/* fill = storage vs normal, and it must stay CONSTANT: if selection changed
   fill-opacity, a selected basin would read as a different storage value.
   Hover/home/selected are therefore carried entirely by the stroke. */
.sbasin{fill-opacity:.62;stroke:#08131B;stroke-width:.8;stroke-opacity:.9;cursor:pointer;
  transition:stroke-width .15s,stroke .15s}
.sbasin:hover,.sbasin:focus-visible{outline:none;stroke:#EDE6D6;stroke-width:1.8}
.sbasin.home{stroke:#EDE6D6;stroke-width:1.5}
.sbasin.sel{stroke:#EDE6D6;stroke-width:2.4}

/* Basin-map legend: a continuous scale whose stops sit at their true values
   (built from RAMPS in data.js), with labelled ticks — so the legend and the
   choropleth are demonstrably the same scale. */
.bx-legend{border:1px solid var(--silt);border-top:0;background:var(--basin);padding:10px 14px 12px}
.bxl-cap{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.bxl-scale{position:relative;margin:9px 0 0;max-width:520px}
.bxl-bar{height:11px;width:100%}
.bxl-ticks{position:relative;height:22px}
.bxl-tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.bxl-tick i{display:block;width:1px;height:4px;background:var(--silt-2)}
.bxl-tick b{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--dim);margin-top:2px;white-space:nowrap}
.bxl-tick.is-norm i{width:2px;background:var(--bone)}
.bxl-tick.is-norm b{color:var(--bone)}
.bxl-note{font-size:12px;line-height:1.6;color:var(--dim);margin:6px 0 0;max-width:66ch}
.sbasin-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;fill:#F2ECE0;paint-order:stroke;stroke:#08131B;stroke-width:3.5px}
.sbasin-pct{font-family:var(--mono);font-size:12px;font-weight:500;fill:#F2ECE0;paint-order:stroke;stroke:#08131B;stroke-width:3.5px}
.bx-panel{border:1px solid var(--silt);border-top:0;background:var(--basin);padding:14px 16px}
.bx-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.bx-name{font-family:var(--display);font-size:20px;color:var(--bone)}
.bx-pct{font-family:var(--mono);font-size:13px;font-weight:500}
.bx-blurb{color:var(--dust);font-size:13.5px;line-height:1.6;margin:8px 0 10px;max-width:60ch}
.bx-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:10px}
.bx-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.bx-links a{color:var(--aqua);text-decoration:none;font-size:13px;border-bottom:1px dotted var(--dim)}
.bx-links a:hover{border-bottom-color:var(--aqua)}
.lr-cap{font-size:12.5px;color:var(--dim)}

/* charts */
.lr-chart{position:relative;margin:18px 0;border:1px solid var(--silt);background:var(--basin);padding:14px 14px 8px}
.histchart{display:block;width:100%;height:auto}
.hc-ax{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.hc-lgd{font-family:var(--mono);font-size:9.5px;fill:var(--dust)}
.hc-lbl{font-family:var(--mono);font-size:9.5px;font-weight:500}
.hc-ptitle{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;fill:var(--dust)}
.hc-thr{font-family:var(--mono);font-size:9px;letter-spacing:.06em}
/* value sitting inside a bar: the fills are all light steps, so it takes the
   chart surface as ink rather than a colour of its own */
.hc-barval{font-family:var(--mono);font-size:11px;font-weight:600;fill:#08131B}
.hc-evt{font-family:var(--mono);font-size:9px;letter-spacing:.04em;fill:var(--dust)}
.lr-chart-cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--dim);margin-top:8px;line-height:1.5}

/* Table view — every charted value is also reachable as text, so nothing in a
   plot depends on telling two colours apart. */
.lr-table{margin:10px 0 2px;border-top:1px solid var(--silt);padding-top:8px}
.lr-table summary{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;padding:3px 0}
.lr-table summary:hover{color:var(--bone)}
.lr-table summary:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.dtab{border-collapse:collapse;margin:10px 0 4px;font-family:var(--mono);font-size:11px;width:100%;max-width:520px}
.dtab caption{text-align:left;color:var(--dim);font-size:10px;line-height:1.6;margin-bottom:8px;max-width:64ch}
.dtab th,.dtab td{text-align:right;padding:5px 10px 5px 0;border-bottom:1px solid var(--silt);
  font-weight:400;font-variant-numeric:tabular-nums}
.dtab thead th{color:var(--dim);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.dtab tbody th{text-align:left;color:var(--bone)}
.dtab td{color:var(--dust)}
.dt-sub{color:var(--dim)}
.dt-note{font-size:12px;line-height:1.6;color:var(--dim);margin:8px 0 4px;max-width:64ch}
.dt-note b{color:var(--dust);font-weight:500}

/* tunnel history list */
.tunlist{list-style:none;padding:0;margin:10px 0 15px}
.tunlist li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--silt)}
.tunlist li:last-child{border-bottom:1px solid var(--silt)}
.tun-yr{font-family:var(--display);font-size:22px;color:var(--aqua);min-width:56px;line-height:1.1}
.tun-body{color:var(--dust);font-size:14px;line-height:1.6}

/* big single live number (§ scarcity) */
.bignum{display:flex;align-items:baseline;gap:16px;border:1px solid var(--silt);background:var(--basin);
  padding:18px 20px;margin:18px 0}
.bignum-v{font-family:var(--display);font-size:48px;line-height:1;letter-spacing:-.02em}
.bignum-lab{color:var(--dust);font-size:13.5px;line-height:1.55}

.lr-footcta{text-align:center;padding:36px 0 8px}

/* the mid-story ZIP gate (between Act 1 and Act 2) */
.zip-gate{max-width:640px;margin:8px auto 0;text-align:center;padding:40px 22px 44px;
  border:1px solid var(--silt-2);background:linear-gradient(180deg,rgba(0,214,230,.05),transparent 70%)}
.zg-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin:0 0 8px}
.zg-h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,4.6vw,34px);line-height:1.1;
  color:var(--bone);margin:0 0 10px}
.zg-h2 em{font-style:italic;color:var(--aqua)}
.zg-sub{color:var(--dust);font-size:14.5px;line-height:1.6;margin:0 auto 20px;max-width:46ch}
.zip-gate .zip-entry{justify-content:center}
.zip-gate .citychips{margin-top:4px}

/* second hero, opening Act 2 */
.lr-hero2{border-top:1px solid var(--silt);padding-top:26px;margin-top:8px}

/* basin-focused map */
.basinmap-detail{display:block;width:100%;height:auto;background:#08131B}
.bm-res{cursor:default}
.bm-lab{font-family:var(--mono);font-size:9.5px;fill:#C7D4DA;paint-order:stroke;stroke:#08131B;stroke-width:3px}
.bm-lab.mine{fill:#F2ECE0;font-weight:500}
.bm-riv{font-family:var(--display);font-style:italic;font-size:11px;fill:#8FB2C4;paint-order:stroke;stroke:#08131B;stroke-width:3px}
.bm-q{font-family:var(--mono);font-size:8.5px;fill:#00D6E6;paint-order:stroke;stroke:#08131B;stroke-width:3px}
.bm-tun{font-family:var(--mono);font-size:8.5px;fill:#A9BCC7;paint-order:stroke;stroke:#08131B;stroke-width:3px}

/* an aside that qualifies terminology without alarming the reader */
.callout{border:1px solid var(--silt-2);border-left:3px solid var(--aqua);
  background:rgba(0,214,230,.04);padding:14px 18px;margin:18px 0}
.co-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--aqua);margin:0 0 8px}
.co-p{color:var(--dust);font-size:13.5px;line-height:1.62;margin:0 0 8px;max-width:62ch}
.co-p:last-child{margin-bottom:0}
.co-p b{color:var(--bone);font-weight:600}
.co-p a{color:var(--aqua);text-decoration:none;border-bottom:1px dotted var(--dim)}
.co-p a:hover{border-bottom-color:var(--aqua)}

/* where a tap's stored water actually sits, split by basin */
.splitbar{margin:16px 0 20px}
.sb-track{display:flex;height:16px;border:1px solid var(--silt);background:var(--basin);overflow:hidden}
.sb-seg{display:block;height:100%}
.sb-keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;
  font-family:var(--mono);font-size:10.5px;color:var(--dust)}
.sb-key{display:flex;align-items:center;gap:6px}
.sb-key i{width:9px;height:9px;flex:0 0 9px;display:inline-block}
.sb-key b{color:var(--bone);font-weight:500}

/* the hand-off between the two basin maps */
.crossnote{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--aqua);border-left:1px dashed var(--silt-2);border-right:1px dashed var(--silt-2);
  padding:14px 12px;margin:4px auto 18px;max-width:80%}
.crossnote b{color:var(--bone);font-weight:500}

/* basin flow diagram — the step-down */
.basinflow{display:block;width:100%;height:auto;background:#08131B}
.bf-lab{font-family:var(--mono);font-size:9px;fill:#C7D4DA;paint-order:stroke;stroke:#08131B;stroke-width:3px}
.bf-lab.mine{fill:#F2ECE0;font-weight:500}
.bf-out{font-family:var(--mono);font-size:8.5px;fill:#8DA4B0;paint-order:stroke;stroke:#08131B;stroke-width:3px}
.bf-cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;fill:#5C7484}
/* the height on the second line of a step-down label — recessive, so the name
   and the percentage still read first */
.bf-elev{font-size:8px;fill:#7C93A1;letter-spacing:.04em}
.bf-lab.mine .bf-elev{fill:#A9BAC4}

/* the one place the dense statewide map is offered */
.explore-block{border:1px solid var(--silt-2);background:var(--basin);padding:22px 24px;margin:26px 0 8px}
.xb-h{font-family:var(--display);font-size:20px;color:var(--bone);margin:0 0 6px}
.xb-sub{color:var(--dust);font-size:13.5px;line-height:1.6;margin:0 0 16px;max-width:56ch}
.xb-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.xb-links .story-cta{margin-top:0}
.xb-alt{color:var(--dust);font-size:13px;text-decoration:none;border-bottom:1px dotted var(--dim)}
.xb-alt:hover{color:var(--bone);border-bottom-color:var(--aqua)}

/* water-year season labels, now drawn as the snowpack chart's background */
.wc-band{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;fill:var(--dim)}
.wc-now{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:#EDE6D6}

/* =====================================================================
   SHARED INTERACTION LAYER (js/charts.js) — tooltip, crosshair rule,
   and the hidden live region that reads the crosshair aloud
   ===================================================================== */
.cw-tip{position:absolute;z-index:30;display:none;pointer-events:none;
  background:rgba(6,15,22,.95);border:1px solid var(--silt-2);color:var(--bone);
  font-family:var(--mono);font-size:10.5px;line-height:1.6;padding:7px 10px;
  max-width:250px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.cw-tip .tt-h{color:var(--aqua);letter-spacing:.06em;margin-bottom:2px}
.cw-tip .tt-d{color:var(--dust)}
.cw-tip b{color:var(--bone);font-weight:500}
.cw-cursor{stroke:#8DA4B0;stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.cw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}