/* PHC 2026 — "A Living Planet Under Pressure" immersive scrolltelling.
   All selectors namespaced under #immersive-root. */

@font-face {
  font-family: 'Alcyone';
  src: url('/fonts/alcyone/Alcyone-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alcyone';
  src: url('/fonts/alcyone/Alcyone-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alcyone';
  src: url('/fonts/alcyone/Alcyone-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alcyone';
  src: url('/fonts/alcyone/Alcyone-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Comma Serif';
  src: url('/fonts/comma-serif/3-CommaSerif-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Comma Serif';
  src: url('/fonts/comma-serif/4-CommaSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Comma Serif';
  src: url('/fonts/comma-serif/4-CommaSerif-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Theme-aware tokens. --immersive-accent is overwritten per-act at runtime,
   so it is NOT theme-scoped here. Dark is the default. */
:root,
:root[data-theme='dark'] {
  --immersive-accent: #8CC63F;
  --ink: #f3f6fb;
  --ink-dim: #aab4c6;
  --bg: #05060b;
  --stage-glow: rgba(20, 30, 55, 0.55);
  --stage-glow-stop: 60%;
  --panel-bg: rgba(8, 11, 20, 0.62);
  --panel-border: rgba(255, 255, 255, 0.10);
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --hairline: rgba(255, 255, 255, 0.07);
  --ridge-stroke: rgba(8, 11, 20, 0.55);
  --immersive-scrim: rgba(10, 12, 20, 0.66);
  --chrome-border: rgba(255, 255, 255, 0.18);
  --ghost-border: rgba(255, 255, 255, 0.25);
  --rail-dot: rgba(255, 255, 255, 0.4);
  --btn-primary-ink: #07140a;
  --foot-fade: rgba(3, 4, 8, 0.9);
  --fallback-orb: radial-gradient(circle at 38% 32%, #1a6b46, #0a2a3e 45%, #06121f 72%), var(--bg);
  --fallback-shadow: inset -40px -30px 90px rgba(0, 0, 0, 0.7), 0 0 80px 8px var(--immersive-accent);
}

/* LIGHT THEME — bright, airy "observatory by day". */
:root[data-theme='light'] {
  --ink: #16202e;
  --ink-dim: #4d5b6e;
  --bg: #dcebf5;
  --stage-glow: rgba(255, 252, 240, 0.85);
  --stage-glow-stop: 65%;
  --panel-bg: rgba(255, 255, 255, 0.72);
  --panel-border: rgba(22, 40, 66, 0.12);
  --panel-shadow: 0 24px 60px rgba(40, 70, 110, 0.18);
  --hairline: rgba(22, 40, 66, 0.10);
  --ridge-stroke: rgba(60, 80, 110, 0.14);
  --immersive-scrim: rgba(248, 250, 253, 0.74);
  --chrome-border: rgba(22, 40, 66, 0.18);
  --ghost-border: rgba(22, 40, 66, 0.28);
  --rail-dot: rgba(22, 40, 66, 0.35);
  --btn-primary-ink: #0c1c0c;
  --foot-fade: rgba(225, 238, 248, 0.92);
  --fallback-orb: radial-gradient(circle at 38% 32%, #4fae7a, #2f7fae 48%, #9fd0e8 78%), var(--bg);
  --fallback-shadow: inset -36px -26px 80px rgba(20, 40, 60, 0.35), 0 0 70px 6px rgba(140, 198, 63, 0.55);
}

* { box-sizing: border-box; }

#immersive-root {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Alcyone', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background 0.6s ease, color 0.6s ease;
}

/* Fixed full-viewport WebGL stage behind the scrolling narrative. The CSS
   gradient covers the static fallback; the live canvas paints over it. */
.immersive-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--stage-glow), transparent var(--stage-glow-stop)),
    var(--bg);
  transition: background 0.6s ease;
}
/* In light mode, layer a luminous sky gradient under the fallback orb. */
:root[data-theme='light'] .immersive-stage {
  background:
    radial-gradient(130% 100% at 50% 12%, #ffffff 0%, #eaf4fb 32%, #cfe6f4 62%, #b9d8ec 100%);
}
/* Circular globe: the /globe/ Earth embedded in an iframe, clipped to a disc.
   Sits centered in the stage at roughly the diameter of the old orb, so it
   reads the same on both the dark and light stage backgrounds. */
.immersive-globe {
  position: absolute;
  top: 50%; left: 50%;
  width: min(72vmin, 640px);
  height: min(72vmin, 640px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Boundary-state stroke colour, set per scroll act by the orchestrator
     (green = within boundary, orange = increasing risk, red = high risk). */
  --globe-ring: #3a8534;
}
/* Boundary-state stroke: a luminous ring around the disc that cross-fades to
   the active boundary's status colour as it settles into view. */
.immersive-globe::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--globe-ring);
  box-shadow:
    0 0 22px -2px var(--globe-ring),
    inset 0 0 14px -6px var(--globe-ring);
  opacity: 0.92;
  pointer-events: none;
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}
/* Soft seating ring + lift — visible on both dark and light stage. */
.immersive-globe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 40px 90px -40px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
:root[data-theme='light'] .immersive-globe::after {
  box-shadow:
    0 0 0 1px rgba(20, 40, 70, 0.10),
    0 40px 90px -42px rgba(40, 70, 110, 0.45);
}
/* Poster disc shown until the Earth loads (and the reduced-motion fallback). */
.immersive-globe-poster {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fallback-orb);
  box-shadow: var(--fallback-shadow);
  filter: saturate(1.1);
  transition: opacity 0.9s ease;
}
/* Square iframe clipped to a circle; the globe Earth is centered within it. */
.immersive-globe-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none; /* purely a backdrop — page scroll passes through */
}
/* Cross-fade: once the Earth's textures are ready, reveal it over the poster. */
.immersive-globe.is-ready .immersive-globe-frame { opacity: 1; }
.immersive-globe.is-ready .immersive-globe-poster { opacity: 0; }

/* Top chrome — shared <SubHeader> in its fixed-overlay variant (see
   /phc2026/phc-chrome.css). Keep the bar click-through over the WebGL globe so
   only the logo + toggle catch pointer events. */
.phc-subhead[data-pos="fixed"] { pointer-events: none; }
.phc-subhead[data-pos="fixed"] a,
.phc-subhead[data-pos="fixed"] button { pointer-events: auto; }

/* Sun / moon theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--chrome-border);
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, background 0.6s ease;
}
.theme-toggle:hover { border-color: var(--immersive-accent); color: var(--immersive-accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--immersive-accent); outline-offset: 2px; }
.theme-toggle svg { display: block; }
/* Show the moon in dark mode (tap for light), the sun in light mode. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='light'] .theme-toggle .icon-sun { display: block; }

/* Narrative column */
.immersive-narrative {
  position: relative;
  z-index: 10;
  width: 100%;
}

.act {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 12vh 6vw;
}
.act-intro, .act-outro { justify-content: center; text-align: center; }
.act-boundary:nth-child(even) { justify-content: flex-end; }
.act-boundary:nth-child(odd)  { justify-content: flex-start; }

/* Glass panel */
.act-panel {
  max-width: 460px;
  background: var(--panel-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 34px 36px 38px;
  box-shadow: var(--panel-shadow);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.act.act-seen .act-panel { opacity: 1; transform: none; }

.act-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--immersive-accent);
  margin: 0 0 14px;
  font-weight: 600;
  transition: color 0.6s ease;
}
.act-title {
  font-family: 'Comma Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.act-blurb {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink-dim);
  margin: 0 0 22px;
}

/* Reading + status row */
.act-reading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  margin-top: 6px;
}
.act-value {
  font-family: 'Comma Serif', Georgia, serif;
  font-size: 1.5rem;
  color: var(--ink);
}
.act-value small { font-size: 0.8rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 600;
}
.status-pill::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.sub-readings {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.sub-readings li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 7px;
}
.sub-readings li b { color: var(--ink); font-weight: 500; }

/* Intro hero */
.hero-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--immersive-accent);
  margin: 0 0 22px;
}
.hero-headline {
  font-family: 'Comma Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 auto 26px;
  max-width: 16ch;
}
.hero-count {
  color: var(--immersive-accent);
  font-weight: 400;
}
.hero-sub {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0 auto 40px;
}
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.scroll-cue span {
  width: 1px; height: 46px;
  background: linear-gradient(var(--immersive-accent), transparent);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Outro */
.outro-panel { max-width: 620px; }
.outro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.btn-primary { background: var(--immersive-accent); color: var(--btn-primary-ink); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { color: var(--ink); border: 1px solid var(--ghost-border); }
.btn-ghost:hover { border-color: var(--immersive-accent); transform: translateY(-2px); }

/* Progress rail */
.act-progress {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.act-progress a {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--rail-dot);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.act-progress a:hover { transform: scale(1.3); border-color: var(--immersive-accent); }

footer.immersive-foot {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 60px 20px 80px;
  color: var(--ink-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  background: linear-gradient(transparent, var(--foot-fade) 40%);
}
footer.immersive-foot a { color: var(--immersive-accent); text-decoration: none; }

@media (max-width: 640px) {
  .act { padding: 10vh 5vw; }
  .act-boundary:nth-child(even), .act-boundary:nth-child(odd) { justify-content: center; }
  .act-panel { max-width: 100%; padding: 26px 24px 30px; }
  .act-progress { display: none; }
  .immersive-top { padding: 14px 18px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .act-panel { opacity: 1 !important; transform: none !important; transition: none; }
  .scroll-cue span { animation: none; opacity: 0.7; }
}

/* ════════════════════════════════════════════════════════════════════════
   Climate Change act — map layers, Locate readout, drag-to-rotate, ridgeline
   ════════════════════════════════════════════════════════════════════════ */

/* Globe drag-to-rotate. The narrative column (.immersive-narrative, z-10) sits
   ABOVE the globe canvas (z-0); pointer-events:none on the *section* alone is
   not enough because the narrative PARENT still captures the drag. So during
   the climate act we make the whole narrative transparent to pointer events and
   re-enable only the genuinely interactive descendants (the ridgeline input).
   This lets a drag anywhere over the globe reach the canvas — and stops the
   stray text-selection on the nearby card. */
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative {
  pointer-events: none;
  user-select: none;
}
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative .ridge-birth-row,
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative .ridge-collapse,
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative .ridge-baseline,
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative .ridgeline-canvas,
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative #ridge-birth,
/* …and the card's "Read more" trigger, so it stays clickable during the climate
   act. Only the button is re-enabled (not the whole card), so a drag anywhere
   else over the card still reaches the globe to rotate it. */
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-narrative .act-readmore {
  pointer-events: auto;
  user-select: auto;
}
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-globe-frame,
#immersive-root.globe-fullscreen .immersive-globe-frame {
  pointer-events: auto;
  cursor: grab;
}
#immersive-root.climate-active:not(.globe-fullscreen) .immersive-globe-frame:active,
#immersive-root.globe-fullscreen .immersive-globe-frame:active { cursor: grabbing; }

/* While the ridgeline panel is pinned, retract the globe controls. */
#immersive-root.in-ridgeline:not(.globe-fullscreen) .climate-controls {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
}

/* ── Fullscreen globe ─────────────────────────────────────────────────────── */
.immersive-globe {
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1), height 0.5s cubic-bezier(0.22,1,0.36,1),
              top 0.5s cubic-bezier(0.22,1,0.36,1), left 0.5s cubic-bezier(0.22,1,0.36,1),
              border-radius 0.5s ease;
}
#immersive-root.globe-fullscreen .immersive-stage { z-index: 38; background: var(--bg); }
#immersive-root.globe-fullscreen .immersive-globe {
  top: 0; left: 0;
  width: 100vw; height: 100svh;
  border-radius: 0;
  transform: none;
}
#immersive-root.globe-fullscreen .immersive-globe::before,
#immersive-root.globe-fullscreen .immersive-globe::after { display: none; }
#immersive-root.globe-fullscreen .immersive-globe-frame { border-radius: 0; touch-action: none; }
#immersive-root.globe-fullscreen .immersive-narrative,
#immersive-root.globe-fullscreen .act-progress,
#immersive-root.globe-fullscreen .phc-subhead { pointer-events: none; }
#immersive-root.globe-fullscreen .climate-controls { z-index: 42; }

.globe-fs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.globe-fs-btn:hover { color: var(--immersive-accent); border-color: var(--immersive-accent); }
.globe-fs-btn svg { display: block; }

.globe-fs-exit {
  display: none;
  position: fixed;
  top: 16px; right: 18px;
  z-index: 44;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--chrome-border);
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.globe-fs-exit:hover { color: var(--immersive-accent); border-color: var(--immersive-accent); }
.globe-fs-hint {
  display: none;
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 42;
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  pointer-events: none;
}
#immersive-root.globe-fullscreen .globe-fs-exit { display: inline-flex; }
/* In fullscreen the cluster stays bottom-centre (like /amoc/), full legend
   visible; the hint moves up to the top so the two don't collide. */
#immersive-root.globe-fullscreen .climate-controls {
  left: 50%;
  right: auto;
  bottom: 22px;
  top: auto;
  transform: translate(-50%, 0);
  width: min(92vw, 520px);
  align-items: center;
  z-index: 42;
}
#immersive-root.globe-fullscreen .globe-fs-btn { display: none; }
#immersive-root.globe-fullscreen .globe-fs-hint {
  display: block;
  top: 70px;
  bottom: auto;
}

/* ── Layer control cluster (fixed, bottom-centre; hidden until climate act) ── */
.climate-controls {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  z-index: 24;
  width: min(92vw, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--panel-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
#immersive-root.climate-active .climate-controls {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.lyr-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.lyr-chip {
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lyr-chip:hover { color: var(--ink); border-color: var(--immersive-accent); }
.lyr-chip[aria-selected='true'] {
  color: var(--btn-primary-ink);
  background: var(--immersive-accent);
  border-color: var(--immersive-accent);
  font-weight: 600;
}
.locate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ghost-border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.locate-btn:hover { color: var(--immersive-accent); border-color: var(--immersive-accent); }
.locate-btn:disabled { opacity: 0.6; cursor: progress; }
.locate-btn svg { display: block; }

/* ── Legend ─────────────────────────────────────────────────────────────── */
.layer-legend { width: 100%; }
.lyr-legend-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}
.lyr-legend-label { font-size: 0.8rem; color: var(--ink); font-weight: 500; }
.lyr-legend-units { font-size: 0.72rem; color: var(--ink-dim); }
.lyr-legend-bar {
  height: 9px;
  border-radius: 5px;
  border: 1px solid var(--hairline);
}
.lyr-legend-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.lyr-legend-src {
  margin-top: 6px;
  font-size: 0.64rem;
  color: var(--ink-dim);
  opacity: 0.8;
  text-align: center;
}

/* ── Locate readout ─────────────────────────────────────────────────────── */
.locate-readout {
  display: none;
  width: 100%;
  text-align: center;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.locate-readout.is-shown { display: flex; }
.locate-readout .loc-where { font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.locate-readout .loc-val {
  font-family: 'Comma Serif', Georgia, serif;
  font-size: 1.5rem;
  color: var(--immersive-accent);
  line-height: 1.15;
}
.locate-readout .loc-sub { font-size: 0.74rem; color: var(--ink-dim); }

.globe-hint {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.65;
}

/* ── Ridgeline (joyplot) — pinned scroll-scrubbed panel ──────────────────── */
.climate-ridgeline {
  position: relative;
  height: 300vh;
  z-index: 10;
}
/* OPAQUE focused figure panel — kills the globe bleed-through. Solid --bg base
   with a subtle vignette + faint accent wash layered on top for depth. */
.ridgeline-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 6vh, 72px) clamp(16px, 4vw, 56px) clamp(16px, 3vh, 28px);
  background:
    radial-gradient(120% 80% at 50% 8%,
      color-mix(in srgb, var(--immersive-accent) 5%, transparent), transparent 55%),
    radial-gradient(140% 120% at 50% 50%,
      transparent 60%, color-mix(in srgb, var(--bg) 40%, #000) 100%),
    var(--bg);
}
:root[data-theme='light'] .ridgeline-sticky {
  background:
    radial-gradient(120% 80% at 50% 8%,
      color-mix(in srgb, var(--immersive-accent) 7%, transparent), transparent 55%),
    radial-gradient(140% 120% at 50% 50%,
      transparent 62%, color-mix(in srgb, #6f86a0 22%, transparent) 100%),
    var(--bg);
}

/* One centered infographic column: header, chart and footnote share an axis. */
.ridge-figure {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
}

/* Tier 1 — centered, economical title block */
.ridgeline-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ridgeline-head .act-kicker { margin: 0; }
.ridgeline-title {
  font-family: 'Comma Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1.08;
  margin: 2px 0 0;
  letter-spacing: -0.01em;
}
.ridgeline-sub {
  font-size: clamp(0.86rem, 1.05vw, 0.98rem);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  max-width: 64ch;
}

/* Tier 2 — controls inline on one centered, wrapping row */
.ridge-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(4px, 0.8vh, 10px);
}
.ridge-baseline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.92rem;
}
.ridge-baseline-lbl { color: var(--ink-dim); letter-spacing: 0.01em; }
.ridge-seg {
  display: inline-flex;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.ridge-seg-btn {
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.ridge-seg-btn:hover { color: var(--ink); }
.ridge-seg-btn.is-active {
  color: var(--btn-primary-ink);
  background: var(--immersive-accent);
  font-weight: 600;
}
.ridge-seg-btn:focus-visible { outline: 2px solid var(--immersive-accent); outline-offset: 2px; }

.ridge-birth-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.ridge-birth-row label { letter-spacing: 0.01em; }
#ridge-birth {
  font: inherit;
  width: 6em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--chrome-border);
  border-radius: 9px;
  padding: 5px 10px;
}
#ridge-birth:focus-visible { outline: 2px solid var(--immersive-accent); outline-offset: 1px; }

/* Hero — flexes to fill all remaining height */
.ridgeline-canvas {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
}

/* Shared bottom meta row: baseline note (left) + birth result (right) */
.ridge-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  align-items: start;
  min-height: 2.6em;
}
@media (min-width: 760px) {
  .ridge-meta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.ridge-baseline-note {
  margin: 0;
  font-size: clamp(0.76rem, 0.95vw, 0.84rem);
  line-height: 1.45;
  color: var(--ink-dim);
}
.ridge-birth-out {
  margin: 0;
  font-size: clamp(0.78rem, 0.95vw, 0.86rem);
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
}
@media (min-width: 760px) { .ridge-birth-out { text-align: right; } }
.ridge-birth-out .ridge-delta { color: var(--immersive-accent); font-weight: 600; }
.ridge-birth-out b { font-weight: 600; }

.ridgeline-foot {
  margin: 6px 0 0;
  font-size: 0.7rem;
  color: var(--ink-dim);
  opacity: 0.8;
  text-align: center;
}

@media (max-width: 640px) {
  .climate-controls { bottom: 12px; width: 94vw; padding: 12px 12px 10px; }
  .locate-readout .loc-val { font-size: 1.3rem; }
  .climate-ridgeline { height: 360vh; }
  .ridge-controls { gap: 8px 14px; }
  .ridgeline-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .climate-controls { transition: none; }
}

/* ── Ridgeline expand / contract reveal (toggled by .ridge-open) ──────────── */
.climate-ridgeline .ridgeline-head,
.climate-ridgeline .ridge-meta,
.climate-ridgeline .ridgeline-foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.climate-ridgeline .ridgeline-canvas {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.climate-ridgeline.ridge-open .ridgeline-head,
.climate-ridgeline.ridge-open .ridge-meta,
.climate-ridgeline.ridge-open .ridgeline-foot,
.climate-ridgeline.ridge-open .ridgeline-canvas {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .climate-ridgeline .ridgeline-head,
  .climate-ridgeline .ridge-meta,
  .climate-ridgeline .ridgeline-foot,
  .climate-ridgeline .ridgeline-canvas { opacity: 1; transform: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Boundary story drawer — "Read more" → right-side 4-part explainer
   ════════════════════════════════════════════════════════════════════════ */

/* Quiet text+arrow trigger (no pill / no chrome — per the page's design language).
   Inline colour is the boundary's status hue, set on the element in the markup. */
.act-readmore {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.act-readmore svg { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.act-readmore:hover { opacity: 1; }
.act-readmore:hover svg { transform: translateX(4px); }
.act-readmore:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* Backdrop */
.bd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--immersive-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.42s ease;
}
.bd-backdrop.is-open { opacity: 1; }
.bd-backdrop[hidden] { display: none; }

/* Panel */
.boundary-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  height: 100%;
  width: min(460px, 92vw);
  --bd-accent: var(--immersive-accent);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-left: 1px solid var(--panel-border);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.42);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.boundary-drawer.is-open { transform: translateX(0); }
.boundary-drawer[hidden] { display: none; }

.bd-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bd-close:hover { color: var(--ink); border-color: var(--bd-accent); transform: rotate(90deg); }
.bd-close:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }

.bd-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 64px 38px 56px;
}

.bd-kicker {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bd-accent);
}
.bd-title {
  margin: 0 0 18px;
  font-family: 'Comma Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bd-lede {
  margin: 0 0 30px;
  padding-left: 16px;
  border-left: 2px solid var(--bd-accent);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.4;
  color: var(--ink);
}

.bd-sections { display: grid; gap: 26px; }
.bd-section { }
.bd-h {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.bd-h::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--bd-accent);
}
.bd-p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.92;
}

@media (max-width: 640px) {
  .boundary-drawer { width: 100%; }
  .bd-scroll { padding: 60px 24px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-backdrop, .boundary-drawer { transition: none; }
  .act-readmore, .act-readmore svg, .bd-close { transition: none; }
}