/* ============================================================================
   Planetary Health Check 2026 — interactive "Humanity's Journey" figure.
   Focused figure page: slim top bar, the chart, references. Standalone CSS.
   ========================================================================== */

@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; }

:root {
  --phc-font: 'Alcyone', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --phc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --phc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --phc-grad: linear-gradient(
    to right,
    #006837 0%, #8cc63f 25%, #ffe657 25.01%, #fcce17 30%,
    #df711c 40%, #c31920 60%, #871e5e 80%, #3d1e5e 100%
  );
}

html[data-theme="dark"] {
  --phc-bg: #08090c;
  --phc-stage: rgba(10, 12, 17, 0.55);
  --phc-text: #f0f1f3;
  --phc-text-dim: rgba(240, 241, 243, 0.66);
  --phc-text-faint: rgba(240, 241, 243, 0.5);
  --phc-border: rgba(255, 255, 255, 0.1);
  --phc-cyan: #57b6ec;
  --phc-tip-bg: rgba(16, 18, 24, 0.97);
  --phc-tip-border: rgba(255, 255, 255, 0.14);
  --phc-readout-bg: rgba(16, 18, 24, 0.94);
  --phc-hover: rgba(255, 255, 255, 0.08);
  --fig-bg-opacity: 0.2;
  color-scheme: dark;
}
html[data-theme="light"] {
  --phc-bg: #ffffff;
  --phc-stage: rgba(255, 255, 255, 0.6);
  --phc-text: #14181f;
  --phc-text-dim: rgba(20, 24, 31, 0.66);
  --phc-text-faint: rgba(20, 24, 31, 0.5);
  --phc-border: rgba(10, 22, 38, 0.12);
  --phc-cyan: #1f7fc0;
  --phc-tip-bg: rgba(255, 255, 255, 0.98);
  --phc-tip-border: rgba(10, 22, 38, 0.14);
  --phc-readout-bg: rgba(255, 255, 255, 0.95);
  --phc-hover: rgba(10, 22, 38, 0.06);
  --fig-bg-opacity: 0.2;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--phc-bg);
  color: var(--phc-text);
  font-family: var(--phc-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── Full-viewport ambient background (climate-journey panorama) ─────────────*/
/* Fixed layer pinned to the viewport, sitting behind all content. Opacity is
   tuned per theme (see --fig-bg-opacity); the chart panel stays opaque so the
   curve stays crisp. */
.fig-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: var(--fig-bg-opacity);
  transition: opacity 0.45s var(--phc-ease-soft);
}
/* Journey: dimmer panorama in dark mode so the reading panels carry the page
   (was 0.2). Scoped to .fj-page so the sibling figure pages keep the default. */
html[data-theme="dark"] .fj-page { --fig-bg-opacity: 0.12; }
.fig-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ── Password gate (shared sessionStorage grant with /phc2026/) ──────────────*/
/* Sits above content + background (z 10000). */
#phc-content { display: none; position: relative; z-index: 1; }
#phc-gate {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--phc-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.45s var(--phc-ease-soft);
}
.phc-gate-ambient {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 52% at 50% 38%, rgba(11, 122, 60, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 72% 74%, rgba(195, 25, 32, 0.08), transparent 55%);
}
.phc-gate-card { position: relative; z-index: 1; text-align: center; max-width: 380px; padding: 28px; }
.phc-gate-band { width: 190px; height: 12px; border-radius: 7px; margin: 0 auto 22px; background: var(--phc-grad); box-shadow: 0 3px 22px rgba(0,0,0,0.55); }
.phc-gate-title { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--phc-text); }
.phc-gate-sub { margin: 0 0 30px; color: var(--phc-text-dim); font-size: 0.95rem; }
.phc-gate-form { display: flex; flex-direction: column; gap: 14px; }
.phc-gate-input { width: 100%; background: var(--phc-hover); border: 1px solid var(--phc-border); border-radius: 11px; padding: 14px 18px; color: var(--phc-text); font: inherit; font-size: 1rem; text-align: center; outline: none; transition: border-color 0.2s; }
.phc-gate-input:focus { border-color: var(--phc-cyan); }
.phc-gate-input::placeholder { color: var(--phc-text-faint); }
.phc-gate-submit { width: 100%; border: 0; border-radius: 11px; padding: 14px 18px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #2b8fe6, #176fc0); transition: transform 0.25s var(--phc-ease), box-shadow 0.25s; }
.phc-gate-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(43,143,230,0.35); }
.phc-gate-error { margin: 2px 0 0; min-height: 1em; color: #ff6b6b; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s; }
.phc-gate-error.is-shown { opacity: 1; }

/* ── Top bar ─────────────────────────────────────────────────────────────────*/
/* Header is the shared <SubHeader> (see /phc2026/phc-chrome.css); align it with
   the centred figure column below. Scoped under #phc-content to outweigh the
   chrome stylesheet's padding. */
#phc-content .phc-subhead {
  max-width: min(1760px, 95vw);
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 56px);
}
.fig-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--phc-text-faint); }
.fig-icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--phc-border); border-radius: 11px; background: transparent;
  color: var(--phc-text); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.fig-icon-btn:hover { background: var(--phc-hover); transform: translateY(-1px); }
.fig-icon-btn svg { width: 20px; height: 20px; }
/* download-figure button feedback */
#fig-download.is-busy { opacity: 0.55; pointer-events: none; }
#fig-download.is-busy svg { animation: fig-dl-bounce 0.7s ease-in-out infinite; }
#fig-download.is-error svg { stroke: #e5484d; }
@keyframes fig-dl-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
/* show moon in light mode (offer dark), sun in dark mode (offer light) */
html[data-theme="dark"] .fig-moon { display: none; }
html[data-theme="light"] .fig-sun { display: none; }
.fig-fs-close { display: none; }
body.fig-fs-active .fig-fs-open { display: none; }
body.fig-fs-active .fig-fs-close { display: inline-block; }

/* ── Main ────────────────────────────────────────────────────────────────────*/
.fig-main { max-width: min(1760px, 95vw); margin: 0 auto; padding: 4px clamp(16px, 4vw, 56px) 64px; }
.fig-standfirst {
  max-width: 760px; margin: 0 0 22px; color: var(--phc-text-dim);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem); line-height: 1.6;
}

/* ── Stage + chart ───────────────────────────────────────────────────────────*/
.fig-stage {
  position: relative; width: 100%;
  background: var(--phc-stage);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--phc-border); border-radius: 14px;
  padding: 10px clamp(6px, 1.4vw, 16px);
  overflow: hidden;
}
.fig-stage.is-fullscreen {
  display: flex; align-items: center; justify-content: center;
  border-radius: 0; border: 0; padding: 24px;
}
.fig-chart { position: relative; width: 100%; }
.fig-stage.is-fullscreen .fig-chart { max-width: min(96vw, 1600px); }
.fig-svg { display: block; width: 100%; height: auto; }
.fig-chart[aria-busy="true"] { min-height: 360px; }

/* label hover affordance */
.fig-label { cursor: help; outline: none; }
.fig-label .fig-label-hit { transition: fill 0.15s; }
.fig-label:hover .fig-label-hit,
.fig-label:focus-visible .fig-label-hit { fill: var(--phc-hover); }
.fig-label:focus-visible { outline: none; }
.fig-label:focus-visible text { paint-order: stroke; }
.fig-hit { cursor: crosshair; }

/* ── Floating stacked readout (time + every series + GA domains) ──────────────*/
.fig-readout {
  position: absolute; z-index: 5; pointer-events: none;
  display: none; flex-direction: column; gap: 7px;
  min-width: 168px; max-width: 240px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--phc-readout-bg);
  border: 1px solid var(--phc-tip-border);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  backdrop-filter: blur(9px);
  font-variant-numeric: tabular-nums;
}
.fig-readout.is-on { display: flex; }
.fig-ro-time { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; }
.fig-ro-sec { display: flex; flex-direction: column; gap: 3px; }
.fig-ro-ga { padding-top: 6px; border-top: 1px solid var(--phc-tip-border); }
.fig-ro-head { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phc-text-faint); margin-bottom: 2px; }
.fig-ro-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; }
.fig-ro-sw { width: 9px; height: 9px; border-radius: 2px; }
.fig-ro-lab { font-size: 0.78rem; color: var(--phc-text-dim); white-space: nowrap; }
.fig-ro-val { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

/* ── Pulsating "we are here" (2025) dot ───────────────────────────────────────*/
.fig-now { cursor: help; }
.fig-now-pulse {
  transform-box: fill-box; transform-origin: center;
  animation: fig-now-pulse 2.1s var(--phc-ease-soft) infinite;
}
@keyframes fig-now-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.1); opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}

/* ── Rich label tooltip ──────────────────────────────────────────────────────*/
.fig-tip {
  position: absolute; z-index: 6; pointer-events: none;
  max-width: 290px; opacity: 0; transform: translateY(4px);
  transition: opacity 0.16s var(--phc-ease-soft), transform 0.16s var(--phc-ease-soft);
  padding: 12px 14px; border-radius: 11px;
  background: var(--phc-tip-bg);
  border: 1px solid var(--phc-tip-border);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
}
.fig-tip.is-on { opacity: 1; transform: translateY(0); }
.fig-tip-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }
.fig-tip-body { font-size: 0.85rem; line-height: 1.45; color: var(--phc-text-dim); }

/* ── References ──────────────────────────────────────────────────────────────*/
.fig-refs { margin-top: 40px; max-width: 880px; }
.fig-refs-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 6px; }
.fig-refs-intro { margin: 0 0 14px; color: var(--phc-text-dim); font-size: 0.9rem; }
.fig-refs-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 9px; }
.fig-refs-list li { font-size: 0.86rem; line-height: 1.5; color: var(--phc-text-dim); }
.fig-refs-list li strong { color: var(--phc-text); font-weight: 600; }
.fig-refs-list li em { font-style: italic; }

/* ── Narrative essay ("Humanity's Journey" long-form, anchored to A/B/C) ───────*/
.fj-article { max-width: 1080px; margin: 60px auto 0; }

/* Intro / non-panel chapters: single centred reading column. */
.fj-intro { max-width: 720px; margin: 0 auto 12px; }
.fj-kicker {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--phc-text-faint); margin: 0 0 10px;
}
.fj-intro-title {
  font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 18px; color: var(--phc-text);
}

/* Chapter = sticky panel locator (left) + heading & prose (right). */
.fj-chapter {
  display: grid;
  grid-template-columns: minmax(170px, 224px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 56px);
  padding: 46px 0;
  border-top: 1px solid var(--phc-border);
}
.fj-chapter:first-of-type { border-top: 0; }

.fj-aside { position: sticky; top: clamp(16px, 4vh, 30px); align-self: start; }
.fj-loc {
  background: var(--phc-stage);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--phc-border); border-radius: 12px;
  padding: 8px; overflow: hidden;
}
.fj-loc-svg { display: block; width: 100%; height: auto; }
.fj-aside-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--fj-c, var(--phc-text-dim));
}
.fj-aside-tag::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px;
  background: var(--fj-c, var(--phc-text-faint));
}

.fj-title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.018em; margin: 0; color: var(--fj-c, var(--phc-text));
}
.fj-sub {
  margin: 6px 0 18px; font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--phc-text-dim);
}

/* Prose */
.fj-prose p { margin: 0 0 1.05em; font-size: 1.02rem; line-height: 1.72; color: var(--phc-text); }
.fj-prose p:last-child { margin-bottom: 0; }
.fj-prose .fj-lead { font-size: 1.12rem; line-height: 1.66; color: var(--phc-text); }
.fj-prose .fj-lead::first-letter {
  font-size: 2.9em; font-weight: 700; line-height: 0.84;
  float: left; margin: 0.06em 0.1em 0 0; color: var(--fj-c, var(--phc-text));
}
.fj-prose strong { font-weight: 700; color: var(--phc-text); }
.fj-prose em { font-style: italic; }
.fj-term { font-variant: small-caps; letter-spacing: 0.03em; font-weight: 600; color: var(--phc-text); }
.fj-pull {
  margin: 1.3em 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--fj-c, var(--phc-cyan));
  font-size: 1.2rem; line-height: 1.45; font-weight: 500;
  color: var(--phc-text);
}

/* ── Reading panels (journey only) ───────────────────────────────────────────
   Translucent, blurred cards so the prose reads off a surface instead of
   floating directly on the background panorama. Same glass language as the
   chart stage + locator (var(--phc-stage) + backdrop blur + hairline border).

   HARMONISED LAYOUT: every essay panel sits in the SAME two-column grid —
   a left locator gutter + the reading column — so the boxes share one vertical
   line down the page. Intros and reference sections wrap their content in a
   `.fj-panel` that lands in column 2, exactly where the chapter `.fj-body` sits;
   their gutter is simply empty. The standfirst stays with the (wider) chart as
   the figure header. Scoped to .fj-page so sibling figure pages stay unchanged. */
.fj-page {
  --fj-aside: clamp(166px, 16vw, 216px); /* locator gutter width */
  --fj-gap: clamp(20px, 3.4vw, 48px);    /* gutter → reading column gap */
}

/* Shared glass surface for every panel. */
.fj-page .fig-standfirst,
.fj-page .fj-body,
.fj-page .fj-panel {
  background: var(--phc-stage);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  border: 1px solid var(--phc-border);
  border-radius: 16px;
  box-shadow: 0 16px 46px -22px rgba(0, 0, 0, 0.55);
}
.fj-page .fj-body,
.fj-page .fj-panel { padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px); }

/* Standfirst rides with the chart (figure header), left-aligned, not in the grid. */
.fj-page .fig-standfirst {
  max-width: 820px;
  padding: clamp(15px, 2vw, 20px) clamp(18px, 2.4vw, 26px);
}

/* Intros + reference sections reuse the chapter grid so their panel lands on the
   identical vertical line as every chapter body. */
.fj-page .fj-intro,
.fj-page .fig-refs {
  display: grid;
  grid-template-columns: var(--fj-aside) minmax(0, 1fr);
  column-gap: var(--fj-gap);
  max-width: 1080px;
  margin: 0 auto;
}
.fj-page .fj-intro > .fj-panel,
.fj-page .fig-refs > .fj-panel { grid-column: 2; min-width: 0; }
.fj-page .fj-intro { margin-bottom: 6px; }
.fj-page .fig-refs { margin-top: 28px; }

/* Chapter grid: same columns + gap; drop the old inter-chapter hairline. */
.fj-page .fj-chapter {
  grid-template-columns: var(--fj-aside) minmax(0, 1fr);
  column-gap: var(--fj-gap);
  border-top: 0;
  padding: clamp(14px, 2.2vw, 24px) 0;
}

/* Single column on narrow screens: gutter collapses, panels span full width. */
@media (max-width: 860px) {
  .fj-page .fj-chapter,
  .fj-page .fj-intro,
  .fj-page .fig-refs {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .fj-page .fj-intro > .fj-panel,
  .fj-page .fig-refs > .fj-panel { grid-column: 1; }
  .fj-page .fj-chapter { padding: 20px 0; }
}

/* In-text citations: cyan underline, deep-linked to the reference list. */
.fj-cite {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--phc-cyan);
  text-decoration-thickness: 1.5px; text-underline-offset: 2px;
  cursor: pointer; transition: color 0.15s var(--phc-ease-soft);
}
.fj-cite:hover { color: var(--phc-cyan); }
.fj-cite:focus-visible { outline: 2px solid var(--phc-cyan); outline-offset: 2px; border-radius: 2px; }

/* Reference list: clear the top bar on jump, and flash the targeted entry. */
.fig-refs-list li { scroll-margin-top: 90px; border-radius: 6px; transition: box-shadow 0.6s var(--phc-ease-soft); }
.fig-refs-list li:target {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--phc-cyan) 18%, transparent);
  background: color-mix(in srgb, var(--phc-cyan) 18%, transparent);
}

@media (max-width: 860px) {
  .fj-article { margin-top: 44px; }
  .fj-chapter { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .fj-aside { position: static; max-width: 300px; }
  .fj-loc-svg { max-height: 280px; }
  .fj-prose p { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fj-aside { position: static; }
}

/* ── Footer ──────────────────────────────────────────────────────────────────*/
.fig-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px 56px; }
.fig-footer-band { width: 160px; height: 8px; border-radius: 5px; background: var(--phc-grad); opacity: 0.85; }
.fig-footer p { margin: 0; color: var(--phc-text-faint); font-size: 0.8rem; letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .fig-standfirst { font-size: 0.92rem; }
  .fig-tip { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .fig-tip, .fig-icon-btn, .phc-gate-submit, #phc-gate, .fig-bg { transition: none; }
  .fig-now-pulse { animation: none; opacity: 0; }
}

/* ── Figures hub (the /phc2026/figures/ landing grid) ────────────────────────*/
.fig-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin: 10px 0 8px;
}
.fig-hub-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--phc-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--phc-stage);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s var(--phc-ease), box-shadow 0.3s var(--phc-ease), border-color 0.3s;
}
.fig-hub-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--phc-cyan) 50%, var(--phc-border));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.fig-hub-swatch { display: block; height: 120px; position: relative; }
.fig-hub-swatch.is-journey {
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(0,0,0,0.22), transparent 60%),
    var(--phc-grad);
}
.fig-hub-swatch.is-journey::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 62%, rgba(0,0,0,0.18));
}
.fig-hub-swatch.is-acceleration {
  background-image: repeating-linear-gradient(
    90deg,
    #2a1208 0 6px, #7a2a12 6px 12px, #c8521a 12px 18px, #f0a23a 18px 24px,
    #0d2230 24px 30px, #156070 30px 36px, #2bbf94 36px 42px, #94f0b8 42px 48px
  );
}
.fig-hub-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.fig-hub-kicker {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--phc-text-faint);
}
.fig-hub-title { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.01em; }
.fig-hub-blurb { font-size: 0.9rem; line-height: 1.5; color: var(--phc-text-dim); }
.fig-hub-cta {
  margin-top: 6px; font-size: 0.88rem; font-weight: 600; color: var(--phc-cyan);
}