/* Global styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --bg-panel:  #131920;
  --text:      #e8e4d9;
  --text-dim:  #7a8490;
  --blue:      #4fa8d5;
  --blue-dim:  rgba(79,168,213,0.15);
  --red:       #e05a4a;
  --red-dim:   rgba(224,90,74,0.12);
  --demand:    #c8b97a;
  --demand-dim:rgba(200,185,122,0.12);
  --gap:       rgba(224,90,74,0.18);
  --rule:      rgba(255,255,255,0.07);
  --green:     #5bc99a;
  --green-dim: rgba(91,201,154,0.15);
  --snow:      #eef4f7;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
}

/* Sticky chart layout */
#scene {
  position: relative;
  display: flex;
  align-items: flex-start;
}

#sticky-chart {
  position: sticky;
  top: 0;
  width: 58%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem 2rem 3rem;
}

#chart-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

#chart-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

#chart-load-error {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(224, 90, 74, 0.35);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  max-width: 520px;
}

#chart-load-error.visible {
  display: block;
}

#chart-load-error code {
  font-size: 0.68rem;
  color: var(--text);
}

#chart-svg {
  width: 100%;
  flex: 1;
  min-height: 280px;
  max-height: 420px;
  overflow: visible;
}

#legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-dim);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-hover-note {
  align-self: flex-start;
  margin-top: 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
}

/* Scrolly text column */
#scroll-text {
  width: 42%;
  padding: 0 2.5rem 0 2rem;
}

.step {
  min-height: 100vh;
}

.step:first-child { padding-top: 10vh; }
.step:last-child  { padding-bottom: 20vh; }

.step-inner {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2rem;
  max-width: 380px;
}

/* Later steps stack above earlier ones during handoff */
.step[data-step="0"] .step-inner { z-index: 1; }
.step[data-step="1"] .step-inner { z-index: 2; }
.step[data-step="2"] .step-inner { z-index: 3; }
.step[data-step="3"] .step-inner { z-index: 4; }
.step[data-step="4"] .step-inner { z-index: 5; }

.step-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}

.step-head {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--text);
}

.step-head em {
  font-style: italic;
  color: var(--red);
}

.step-body {
  font-size: 0.88rem;
  color: #a8b4be;
  line-height: 1.75;
}

.step-body strong {
  color: var(--text);
  font-weight: 500;
}

.callout {
  border-left: 2px solid var(--red);
  padding: 0.6rem 0.8rem;
  margin-top: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--demand);
  background: rgba(224,90,74,0.06);
  line-height: 1.5;
}

/* Intro/outro */
.full-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.intro-inner {
  max-width: 560px;
}

.intro-inner h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.intro-inner h1 span {
  display: block;
  font-style: italic;
  color: var(--blue);
}

.intro-inner h1 em { font-style: italic; color: var(--blue); }

.intro-inner p {
  font-size: 0.95rem;
  color: #8a9aaa;
  max-width: 420px;
  margin: 0 auto 2rem;
}

.scroll-cue {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Chart annotations */
.peak-label {
  pointer-events: none;
}

/* Progress dots */
#progress {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
  border: 1px solid var(--text-dim);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}

.dot.active {
  background: var(--blue);
  transform: scale(1.4);
}

/* ============================================================ */
/* Chart tooltip                                                */
/* ============================================================ */

#chart-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left-width: 2px;
  border-left-color: var(--rule);
  padding: 0.7rem 0.9rem 0.65rem;
  min-width: 180px;
  max-width: 280px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

#chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

#chart-tooltip[data-series="historical"] { border-left-color: var(--blue); }
#chart-tooltip[data-series="projected"]  { border-left-color: var(--red); }
#chart-tooltip[data-series="demand"]     { border-left-color: var(--demand); }

#chart-tooltip .tt-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

#chart-tooltip .tt-eyebrow .tt-month {
  color: var(--text);
}

#chart-tooltip .tt-primary {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 0.2rem;
}

#chart-tooltip .tt-secondary {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

#chart-tooltip .tt-footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  line-height: 1.55;
  border-top: 1px solid var(--rule);
  padding-top: 0.45rem;
}

#chart-tooltip .tt-footer-line + .tt-footer-line {
  margin-top: 0.1rem;
}

.tooltip-targets circle {
  cursor: pointer;
}


/* ===== Scene 2 (A Century of Storage) — from scene2-snowpack-timeseries branch ===== */
#scene2 {
  background: var(--bg);
  padding: 5rem 3rem 6rem;
  border-top: 1px solid var(--rule);
}

#scene2-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

#scene2-text {
  flex: 0 0 280px;
  padding-top: 1.5rem;
}

.scene2-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

#scene2-head {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text);
}

#scene2-desc {
  font-size: 0.88rem;
  color: #a8b4be;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

#scene2-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--demand);
  line-height: 1.6;
  border-left: 2px solid var(--red);
  padding: 0.5rem 0.75rem;
  background: rgba(224,90,74,0.06);
  min-height: 2.5rem;
  transition: color 0.3s;
  margin-bottom: 1.5rem;
}

.scene2-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  line-height: 1.6;
  opacity: 0.7;
}

#scene2-chart-wrap {
  flex: 1;
  min-width: 0;
}

#scene2-chart-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.25rem;
}

#scene2-chart-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

#scene2-svg {
  width: 100%;
  height: 320px;
  display: block;
  overflow: visible;
}

#scene2-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.scene2-slider-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

#scene2-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#scene2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--bg);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(79,168,213,0.5);
}

#scene2-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--bg);
  cursor: pointer;
}

#scene2-year-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.6rem;
  text-align: center;
}

#scene2-year-display span {
  color: var(--blue);
  font-weight: 500;
}

@media (max-width: 720px) {
  #scene2-inner {
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.5rem 4rem;
  }
  #scene2-text { flex: none; }
}

/* ===== Scene 1 (The cause — what falls as snow) — mirrors Scene 2 layout ===== */
#scene1 {
  background: var(--bg);
  padding: 5rem 3rem 6rem;
  border-top: 1px solid var(--rule);
}

#scene1-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

#scene1-text {
  flex: 0 0 300px;
  padding-top: 1.5rem;
}

.scene1-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

#scene1-head {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text);
}

#scene1-head em { font-style: italic; color: var(--blue); }

#scene1-desc {
  font-size: 0.88rem;
  color: #a8b4be;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

#scene1-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--demand);
  line-height: 1.6;
  border-left: 2px solid var(--blue);
  padding: 0.5rem 0.75rem;
  background: rgba(79,168,213,0.06);
  min-height: 2.5rem;
  margin-bottom: 1.5rem;
}

#scene1-stat strong { color: var(--text); font-weight: 700; }

.scene1-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  line-height: 1.6;
  opacity: 0.7;
}

#scene1-chart-wrap { flex: 1; min-width: 0; }

#scene1-chart-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.25rem;
}

#scene1-chart-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

#scene1-svg { width: 100%; height: 300px; display: block; overflow: visible; }

#scene1-toggle-wrap {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 1.25rem;
}

.scene1-toggle-btn {
  background: transparent;
  color: var(--text-dim);
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.scene1-toggle-btn.active { background: var(--blue-dim); color: var(--text); }

#scene1-legend {
  display: flex;
  gap: 1.3rem;
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.7rem;
}

#scene1-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: -1px;
}

#scene1-tip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  background: #0b1016;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.6rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
  transition: opacity 0.12s;
  z-index: 50;
  max-width: 230px;
}

#scene1-tip .h {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}

#scene1-tip .row { display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 720px) {
  #scene1 { padding: 3rem 1.5rem 4rem; }
  #scene1-inner { flex-direction: column; gap: 2rem; }
  #scene1-text { flex: none; }
}

/* ===== Scene 5 — The Consequence ===== */
#scene-5{max-width:1100px;margin:0 auto;padding:7rem 2rem;border-top:1px solid var(--rule);}
.scene5-inner{display:flex;gap:52px;align-items:center;flex-wrap:wrap;}
.scene5-text{flex:0 0 320px;max-width:340px;}
.scene5-tag{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.1rem;}
.scene5-head{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.22;color:var(--text);margin-bottom:1rem;}
.scene5-head em{font-style:italic;color:var(--demand);}
.scene5-desc{font-size:1rem;color:var(--text-dim);line-height:1.65;font-weight:300;}
.scene5-desc strong{color:var(--text);font-weight:400;}
.scene5-source{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;line-height:1.55;color:var(--text-dim);margin-top:1.5rem;padding-left:0.8rem;border-left:2px solid var(--rule);}
.scene5-chart-wrap{flex:1 1 480px;min-width:0;}
.scene5-chart-title{font-family:'Playfair Display',serif;font-size:clamp(1.1rem,2vw,1.35rem);font-weight:400;color:var(--text);margin-bottom:0.3rem;line-height:1.3;}
.scene5-chart-subtitle{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text-dim);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.4rem;}
#scene5-svg{width:100%;display:block;overflow:visible;}
#scene5-tip{position:fixed;pointer-events:none;opacity:0;z-index:50;background:#0a0d11;border:1px solid var(--rule);border-left:2px solid var(--blue);border-radius:2px;padding:0.55rem 0.7rem;font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,0.5);transition:opacity 0.12s;}
#scene5-tip .h{color:var(--demand);margin-bottom:0.3rem;letter-spacing:0.04em;}
#scene5-tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--text-dim);}
#scene5-tip .r b{color:var(--text);font-weight:500;}
@media (max-width:720px){#scene-5{padding:4.5rem 1.5rem;}.scene5-inner{gap:32px;}}

/* ===== Scene 6 — The Choice (dumbbell) ===== */
#scene-6-choice{max-width:1200px;margin:0 auto;padding:7rem 2rem;border-top:1px solid var(--rule);}
.s6c-inner{display:flex;gap:56px;align-items:center;flex-wrap:wrap;}
.s6c-text{flex:0 0 300px;max-width:320px;}
.s6c-tag{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.1rem;}
.s6c-head{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.22;color:var(--text);margin-bottom:1rem;}
.s6c-desc{font-size:0.98rem;color:var(--text-dim);line-height:1.65;font-weight:300;}
.s6c-desc strong{color:var(--text);font-weight:400;}
.s6c-source{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;line-height:1.55;color:var(--text-dim);margin-top:1.5rem;padding-left:0.8rem;border-left:2px solid var(--rule);}
.s6c-source code{font-family:'IBM Plex Mono',monospace;}
.s6c-chart-wrap{flex:1 1 600px;min-width:0;}
.s6c-chart-subtitle{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text-dim);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;}
#scene-6-choice svg{width:100%;display:block;overflow:visible;}
.s6c-ax{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--text-dim);}
.s6c-val{font-family:'IBM Plex Mono',monospace;font-weight:500;}
.s6c-scen{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;}
.s6c-mname{font-family:'IBM Plex Sans',sans-serif;}
@media (max-width:760px){#scene-6-choice{padding:4.5rem 1.5rem;}.s6c-inner{gap:32px;}.s6c-text{flex:1 1 100%;max-width:none;}}

/* ============================================================ */
/* SCENE 4 · Zoom Out: The Sierra Water Network                 */
/* ============================================================ */

.scene4-section {
  --s4-river:      #4fa8d5;
  --s4-snow:       #d8f3ff;
  --s4-valley:     #9bb06a;
  --s4-valley-dim: rgba(155,176,106,0.16);
  --s4-nevada:     #8f86c4;
  --s4-nevada-dim: rgba(143,134,196,0.16);
  --s4-owens:      #e6b85c;
  --s4-owens-dim:  rgba(230,184,92,0.16);
  position: relative;
  background: linear-gradient(180deg, #0b1016 0%, #0d1117 100%);
  border-top: 1px solid var(--rule);
}

.scene4-scroll {
  display: flex;
  align-items: flex-start;
}

/* Scrolly text column */
.scene4-steps {
  width: 40%;
  padding: 0 2rem 0 3rem;
}

.scene4-step {
  min-height: 100vh;
}

.scene4-step:first-child { padding-top: 10vh; }
.scene4-step:last-child  { padding-bottom: 20vh; }

.scene4-step-inner {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2rem;
  max-width: 380px;
}

/* Later steps stack above earlier ones during handoff (matches scene 1) */
.scene4-step[data-step="0"] .scene4-step-inner { z-index: 1; }
.scene4-step[data-step="1"] .scene4-step-inner { z-index: 2; }
.scene4-step[data-step="2"] .scene4-step-inner { z-index: 3; }
.scene4-step[data-step="3"] .scene4-step-inner { z-index: 4; }
.scene4-step[data-step="4"] .scene4-step-inner { z-index: 5; }
.scene4-step[data-step="5"] .scene4-step-inner { z-index: 6; }
.scene4-step[data-step="6"] .scene4-step-inner { z-index: 7; }

.scene4-step-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}

.scene4-step h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--text);
}

.scene4-step h2 em {
  font-style: italic;
  color: var(--red);
}

.scene4-step p {
  font-size: 0.88rem;
  color: #a8b4be;
  line-height: 1.75;
}

.scene4-step p strong {
  color: var(--text);
  font-weight: 500;
}

/* Sticky visualization column */
.scene4-viz-wrap {
  width: 60%;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 2.2rem 1.4rem 1.4rem;
}

.scene4-viz-head {
  margin-bottom: 0.6rem;
}

.scene4-viz-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--text);
  line-height: 1.3;
}

.scene4-viz-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.scene4-state-label {
  color: var(--s4-river);
}

/* Controls */
.scene4-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.scene4-control-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.scene4-control-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 0.2rem;
}

.scene4-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.26rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.scene4-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.scene4-btn.is-active {
  color: var(--bg);
  background: var(--s4-river);
  border-color: var(--s4-river);
}

.scene4-months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.scene4-months .scene4-btn {
  padding: 0.22rem 0.38rem;
  min-width: 2rem;
  text-align: center;
}

/* SVG map */
.scene4-svg-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
}

#scene4-river-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.scene4-river {
  fill: none;
  stroke: var(--s4-river);
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  transition: stroke-width 0.7s ease, opacity 0.7s ease;
}

.scene4-aqueduct {
  fill: none;
  stroke: var(--s4-owens);
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  cursor: pointer;
  transition: stroke-width 0.7s ease, opacity 0.7s ease;
}

.scene4-aqueduct.is-animating {
  animation: scene4-dash 1.4s linear infinite;
}

@keyframes scene4-dash {
  to { stroke-dashoffset: -26; }
}

.scene4-region {
  transition: opacity 0.5s ease;
}

.scene4-region-shape {
  stroke-width: 1;
}

.scene4-node-dot {
  transition: opacity 0.5s ease, r 0.5s ease;
}

.scene4-node-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  fill: var(--text);
  paint-order: stroke;
  stroke: rgba(8,12,18,0.85);
  stroke-width: 3px;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.scene4-particle {
  pointer-events: none;
}

.scene4-snow-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--s4-snow);
  paint-order: stroke;
  stroke: rgba(8,12,18,0.85);
  stroke-width: 3px;
  pointer-events: none;
}

/* Legend */
.scene4-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 0.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
}

.scene4-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scene4-legend-swatch {
  flex-shrink: 0;
  display: inline-block;
}

/* Sierra Nevada analysis region (CMIP6 box) */
.scene4-sierra-area {
  fill: rgba(216, 243, 255, 0.05);
  stroke: var(--s4-snow);
  stroke-opacity: 0.8;
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.scene4-sierra-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  fill: var(--s4-snow);
  paint-order: stroke;
  stroke: rgba(8, 12, 18, 0.85);
  stroke-width: 3px;
  pointer-events: none;
}

/* State boundaries (primary geographic reference on the plain basemap) */
.scene4-state {
  fill: rgba(255, 255, 255, 0.015);
  stroke: rgba(232, 228, 217, 0.5);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Caption */
.scene4-caption {
  margin-top: 0.55rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--text-dim);
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}

.scene4-caption.is-warning {
  color: var(--red);
}

/* Tooltip */
.scene4-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 220;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--s4-river);
  padding: 0.6rem 0.8rem;
  min-width: 170px;
  max-width: 250px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

.scene4-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.scene4-tooltip .scene4-tt-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.scene4-tooltip .scene4-tt-row {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
}

.scene4-tooltip .scene4-tt-row b {
  color: var(--text);
  font-weight: 500;
}

.scene4-tooltip .scene4-tt-note {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Responsive */
@media (max-width: 820px) {
  .scene4-scroll {
    flex-direction: column;
  }
  .scene4-steps,
  .scene4-viz-wrap {
    width: 100%;
  }
  .scene4-viz-wrap {
    height: 78vh;
    padding: 1rem;
  }
  .scene4-steps {
    padding: 0 1.2rem;
    order: 2;
  }
}

/* ============================================================ */
/* SCENE 6 — Two Futures                                        */
/* ============================================================ */

#scene-6 {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

#sticky-chart-6 {
  width: 58%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem 2rem 3rem;
}

#scene6-text {
  width: 42%;
  padding: 0 2.5rem 0 2rem;
  display: flex;
  align-items: center;
}

#scene6-text .step-inner {
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2rem;
  max-width: 380px;
}

#chart-title-6 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

#chart-subtitle-6 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

#legend-6 {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-dim);
}

#chart-svg-6 {
  width: 100%;
  flex: 1;
  min-height: 280px;
  max-height: 420px;
  overflow: visible;
}

/* Scenario toggle buttons */
#scenario-toggle {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  opacity: 0;
  transition: opacity 0.4s;
}

#scenario-toggle.visible {
  opacity: 1;
}

.toggle-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.toggle-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

.toggle-btn.active-mod {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-dim);
}

.toggle-btn.active-high {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-dim);
}

.toggle-btn.active-both {
  color: var(--text);
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
}

.diff-annotation {
  pointer-events: none;
}

#chart-tooltip[data-series="moderate"] { border-left-color: var(--green); }

/* ===== CLOSE · "Find your water" personalization ===== */
#scene-personal {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 1.5rem;
}
.personal-inner {
  max-width: 640px;
  width: 100%;
  text-align: center;
}
.personal-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.personal-head {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: var(--text);
}
.personal-head em { font-style: italic; color: var(--blue); }
.personal-sub {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 auto 1.6rem;
  max-width: 30rem;
}
.personal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.personal-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.personal-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.personal-btn.active {
  color: var(--text);
  border-color: var(--blue);
  background: var(--blue-dim);
}
.personal-result {
  border-top: 1px solid var(--rule);
  padding-top: 1.3rem;
  opacity: 0;
  transition: opacity 0.4s;
  text-align: left;
}
.personal-result.shown { opacity: 1; }
.personal-source {
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 0.7rem;
}
.personal-source strong { color: var(--blue); font-weight: 500; }
.personal-line {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}
.personal-foot {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text);
  border-left: 2px solid var(--demand);
  padding-left: 0.8rem;
}

/* ===== Video walkthrough link ===== */
.video-section {
  min-height: auto;
  padding: 8vh 1.5rem 0;
  display: block;
}
.video-link {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}
.video-link:hover { color: var(--text); }

/* ===== Data & methods (progressive disclosure) ===== */
.methods-section {
  min-height: auto;
  padding: 4vh 1.5rem 12vh;
  display: block;
}
.methods {
  max-width: 680px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
}
.methods summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}
.methods summary::-webkit-details-marker { display: none; }
.methods summary::before { content: "+ "; color: var(--blue); }
.methods[open] summary::before { content: "– "; }
.methods summary:hover { color: var(--text); }
.methods-body {
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.methods-body p { margin: 0 0 0.8rem; }
.methods-body ul { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.methods-body li { margin-bottom: 0.4rem; }
.methods-body strong { color: var(--text); font-weight: 500; }
.methods-body code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92em;
  color: var(--blue);
  background: rgba(255,255,255,0.05);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}