/* ============================================================================
   Planetary Health Check 2026 — interactive "Interconnections" figure.

   The page has no palette of its own. Ground, ink and the nine boundary hues
   all come from /phc2026/interconnections/palette.css, which the print build
   writes out from the same two themes it uses for the PDF. So the page is the
   figure's own surface extended to the edges of the window, and switching to
   light switches figure and page together, by definition.
   ========================================================================== */

@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;
  --ic-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Shared PHC signature gradient — phc-chrome.css paints the logo mark with it. */
  --phc-grad: linear-gradient(
    to right,
    #006837 0%, #8cc63f 25%, #ffe657 25.01%, #fcce17 30%,
    #df711c 40%, #c31920 60%, #871e5e 80%, #3d1e5e 100%
  );
}

/* How far back an unselected mark falls. Black swallows a faded line faster
   than white does, so the two grounds need different floors to feel equal. */
html[data-theme='dark'] {
  --ic-mute: 0.4;
  --ic-mute-ink: #949ea4;
  --ic-mute-node: 0.52;
  --ic-tone-up: #e8695f;
  --ic-tone-down: #4fb477;
  --ic-tone-mixed: #d9a13c;
  --ic-surface: rgba(255, 255, 255, 0.045);
  --ic-line: rgba(255, 255, 255, 0.11);
  --ic-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}
html[data-theme='light'] {
  --ic-mute: 0.36;
  --ic-mute-ink: #9aa3a8;
  --ic-mute-node: 0.46;
  --ic-tone-up: #c0392b;
  --ic-tone-down: #2c8a55;
  --ic-tone-mixed: #a8761a;
  --ic-surface: rgba(16, 26, 34, 0.035);
  --ic-line: rgba(16, 26, 34, 0.1);
  --ic-shadow: 0 24px 60px rgba(16, 26, 34, 0.16);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fig-bg);
  color: var(--fig-ink);
  font-family: var(--phc-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:where(a) { color: inherit; }
:focus-visible { outline: 2px solid var(--fig-ink); outline-offset: 3px; border-radius: 3px; }

/* ── Password gate (shared sessionStorage grant with /phc2026/) ──────────────*/
#phc-content { display: none; }
#phc-gate {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--fig-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.45s var(--ic-ease);
}
.phc-gate-ambient {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 42%, rgba(120, 160, 190, 0.16), transparent 70%);
  pointer-events: none;
}
.phc-gate-card { position: relative; width: min(360px, 88vw); text-align: center; }
.phc-gate-band { display: block; height: 3px; border-radius: 2px; background: var(--phc-grad); margin-bottom: 26px; }
.phc-gate-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.phc-gate-sub { margin: 0 0 22px; color: var(--fig-grey); font-size: 0.9rem; }
.phc-gate-form { display: flex; flex-direction: column; gap: 10px; }
.phc-gate-input, .phc-gate-submit {
  font-family: inherit; font-size: 0.95rem; padding: 11px 14px;
  border-radius: 9px; border: 1px solid var(--ic-line);
  background: var(--ic-surface); color: var(--fig-ink);
}
.phc-gate-submit { cursor: pointer; background: var(--fig-ink); color: var(--fig-bg); border-color: transparent; font-weight: 500; }
.phc-gate-error { margin: 2px 0 0; min-height: 1.2em; font-size: 0.82rem; color: #e0605f; opacity: 0; }
.phc-gate-error.is-shown { opacity: 1; }

/* ── Masthead ───────────────────────────────────────────────────────────────*/
.ic-page { max-width: 1560px; margin: 0 auto; padding: 26px clamp(18px, 3.4vw, 46px) 0; }
.ic-masthead { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 34px); }
.ic-masthead h1 {
  margin: 0 0 0.42em;
  font-size: clamp(1.9rem, 3.7vw, 3rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.ic-standfirst { margin: 0; color: var(--fig-grey); font-size: clamp(0.98rem, 1.15vw, 1.09rem); line-height: 1.62; }

/* ── Stage: the ring, and the column that reads it ──────────────────────────*/
.ic-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(24px, 3.2vw, 56px);
  align-items: start;
}
.ic-figure { position: relative; min-width: 0; }
/* The ring is capped by the window's height as well as by its column, so that
   once the masthead is scrolled past, figure and legend are on screen together.
   The cap is a width, scaled by the artboard's own aspect, because clamping the
   height of a replaced element already at width:100% squashes it rather than
   shrinking it. The floor matters: 64 arcs on one ring stop being separable
   below about 600px, and scrolling a little is the lesser cost.
   Readout, ring and legend share the cap, so all three align on the same edges
   however the window is shaped, and the block stays flush left with the title
   above it rather than floating in the middle of its column. */
.ic-figure-inner {
  max-width: min(100%, max(600px, calc((100svh - 170px) * 0.981)));
}
.ic-ring { display: block; width: 100%; height: auto; touch-action: manipulation; }

/* Live readout. One line of prose that answers what the pointer is doing —
   the page's only piece of text that moves. */
.ic-readout {
  min-height: 2.9em;
  margin: 0 0 10px;
  color: var(--fig-grey);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ic-readout b { color: var(--fig-ink); font-weight: 500; }

/* ── The figure's own marks ─────────────────────────────────────────────────*/
.ic-link, .ic-head, .ic-head-clearance, .ic-plate, .ic-node {
  transition: opacity 0.2s var(--ic-ease);
}
.ic-link, .ic-node { cursor: pointer; }
.ic-node-label { font-family: var(--phc-font); font-weight: 500; letter-spacing: -0.005em; }
/* Colour is the figure's scarcest signal: it says which boundary is doing the
   driving. So while something is being read, colour belongs to that reading and
   to nothing else — every other arc, head and plate drops to one neutral grey
   and keeps only its shape. Not hidden, though: drained and dimmed, so you can
   still see WHERE the lit thread runs among the rest, which is the whole reason
   to solo one in the first place. */
.is-muted { opacity: var(--ic-mute); }
.ic-link.is-muted .ic-shaft { stroke: var(--ic-mute-ink); }
.ic-link.is-muted .ic-qmark { fill: var(--ic-mute-ink); stroke: none; }
.ic-head-g.is-muted .ic-head { fill: var(--ic-mute-ink); }
.ic-plate.is-muted { stroke: var(--ic-mute-ink); }
/* A boundary's name is how a reader navigates the ring, so a muted node fades
   less than a muted arc — and its label takes the group's fade only. Stacking a
   second opacity on the text put the side labels under 12% on white. */
.ic-node.is-muted { opacity: var(--ic-mute-node); }
/* The icon paints --ci; the boundary's own hue stays on --c. So a boundary the
   pointer is not on drains the same way its arcs do, and the ring dims as one
   figure rather than leaving nine full-colour discs floating on a grey web. */
.ic-node { --ci: var(--c); }
.ic-node.is-muted { --ci: var(--ic-mute-ink); }
.ic-link, .ic-head, .ic-plate { transition: opacity 0.2s var(--ic-ease), stroke 0.2s var(--ic-ease), fill 0.2s var(--ic-ease); }
/* A soloed link is left exactly as the print build drew it. Nothing is
   thickened or glowed: what changes is only how far everything else recedes —
   which is also why keyboard focus must not draw a box round an arc's bounding
   rectangle. Focus is shown by the soloing itself, and, at a boundary, by an
   underline under its name. */
.ic-ring :focus,
.ic-ring :focus-visible { outline: none !important; }
.ic-node:focus-visible .ic-node-label { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .ic-link, .ic-head, .ic-head-clearance, .ic-plate, .ic-node { transition: none; }
}

/* ── Heavier lines ──────────────────────────────────────────────────────────*/
/* Every stroke is multiplied, its dash pattern swapped for one refitted at the
   heavier weight, and each head scaled about its own tip so it grows backwards
   along its shaft instead of sliding off the plate it points at. The ranking
   the widths encode is preserved, because they are all multiplied by the same
   number. */
.ic-ring[data-weight='bold'] .ic-shaft { stroke-width: calc(var(--w) * 1.8); stroke-dasharray: var(--db); }
.ic-ring[data-weight='bold'] .ic-halo { stroke-width: calc(var(--w) * 1.8 + 2.6); }
.ic-ring[data-weight='bold'] .ic-head-g { transform: translate(var(--tx), var(--ty)) scale(1.5); }
.ic-ring[data-weight='bold'] .ic-plate { stroke-width: 9.5; }
.ic-ring[data-weight='bold'] path.ic-hit { stroke-width: calc(var(--w) * 1.8 + 11); }

/* ── Tooltip ────────────────────────────────────────────────────────────────*/
.ic-tip {
  position: fixed; z-index: 60;
  max-width: 300px;
  padding: 11px 13px 12px;
  border-radius: 10px;
  background: var(--fig-bg);
  border: 1px solid var(--ic-line);
  box-shadow: var(--ic-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.13s linear;
}
.ic-tip.is-shown { opacity: 1; }
.ic-tip-route { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; line-height: 1.3; }
.ic-tip-route span { display: inline-flex; align-items: center; gap: 6px; }
.ic-tip-route i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; font-style: normal; flex: none; }
.ic-tip-arrow { color: var(--fig-faint); }
.ic-tip-text { margin: 7px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--fig-grey); }
.ic-tip-meta { margin: 8px 0 0; font-size: 0.76rem; color: var(--fig-faint); }
.ic-tip-hint { margin: 6px 0 0; font-size: 0.73rem; color: var(--fig-faint); }

/* ── Legend, which is also the filter ───────────────────────────────────────*/
.ic-legend { margin: clamp(16px, 2.4vw, 30px) 0 0; }
.ic-legend-group + .ic-legend-group { margin-top: 14px; }
.ic-legend-head {
  margin: 0 0 8px;
  font-size: 0.83rem;
  color: var(--fig-faint);
}
.ic-legend-row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ic-key {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 3px 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.87rem;
  color: var(--fig-grey);
  transition: color 0.16s var(--ic-ease), opacity 0.16s var(--ic-ease);
}
.ic-key svg { display: block; flex: none; overflow: visible; }
.ic-key:hover { color: var(--fig-ink); }
.ic-key[aria-pressed='true'] { color: var(--fig-ink); }
.ic-key.is-dimmed { opacity: 0.34; }
.ic-key-mark { stroke: currentColor; fill: none; }
.ic-key-head { fill: currentColor; stroke: none; }
.ic-filter-clear {
  margin-top: 12px;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 0.83rem;
  color: var(--fig-faint);
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.ic-filter-clear[hidden] { display: none; }

/* ── The reading column: a guide at rest, a record when something is chosen ──*/
.ic-column { position: sticky; top: 22px; min-width: 0; }
.ic-guide h2, .ic-record h2 { margin: 0; }

.ic-guide {
  border-top: 1px solid var(--ic-line);
  padding-top: 20px;
}
.ic-guide h2 { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 14px; }
.ic-guide dl { margin: 0; }
.ic-guide dt { font-size: 0.88rem; font-weight: 500; margin-top: 15px; }
.ic-guide dt:first-of-type { margin-top: 0; }
.ic-guide dd { margin: 3px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--fig-grey); }
.ic-guide-note {
  margin: 24px 0 0; padding-top: 18px;
  border-top: 1px solid var(--ic-line);
  font-size: 0.9rem; line-height: 1.6; color: var(--fig-grey);
}
.ic-guide-note b { color: var(--fig-ink); font-weight: 500; }

/* The record. It replaces the guide in place, so the column never jumps. */
.ic-record { display: none; }
.ic-column[data-view='record'] .ic-guide { display: none; }
.ic-column[data-view='record'] .ic-record { display: block; }

.ic-record-route {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 9px;
  font-size: 1.06rem; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.012em;
}
.ic-record-route span { display: inline-flex; align-items: center; gap: 8px; }
.ic-record-route i { width: 11px; height: 11px; border-radius: 50%; background: currentColor; font-style: normal; flex: none; }
.ic-record-route .ic-tip-arrow { font-weight: 400; }
.ic-record-lede {
  margin: 16px 0 0;
  font-size: 1.06rem;
  line-height: 1.52;
  font-weight: 300;
  letter-spacing: -0.006em;
}
.ic-record-verbatim {
  margin: 18px 0 0; padding-left: 15px;
  border-left: 2px solid var(--ic-line);
  font-size: 0.88rem; line-height: 1.55; color: var(--fig-grey);
}
.ic-record-verbatim span { display: block; margin-bottom: 4px; color: var(--fig-faint); font-size: 0.79rem; }
.ic-record-caveat { margin: 18px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--fig-grey); }
.ic-record-caveat span { display: block; margin-bottom: 4px; color: var(--fig-faint); font-size: 0.79rem; }

.ic-record-facts {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--ic-line);
  display: grid; grid-template-columns: auto 1fr; gap: 9px 18px;
  font-size: 0.87rem;
}
.ic-record-facts dt { color: var(--fig-faint); }
.ic-record-facts dd { margin: 0; }

.ic-record-chain {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--ic-line);
  font-size: 0.87rem; line-height: 1.5;
}
.ic-record-chain b { display: block; color: var(--fig-faint); font-weight: 400; margin-bottom: 6px; }
.ic-record-chain em { font-style: normal; color: var(--fig-faint); padding: 0 6px; }

.ic-record-source {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--ic-line);
  font-size: 0.79rem; line-height: 1.5; color: var(--fig-faint);
}
.ic-record-close {
  margin-top: 18px;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 0.83rem; color: var(--fig-faint); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ── Footer ─────────────────────────────────────────────────────────────────*/
.ic-footer {
  max-width: 1560px; margin: clamp(46px, 6vw, 80px) auto 0;
  padding: 22px clamp(18px, 3.4vw, 46px) 40px;
  color: var(--fig-faint); font-size: 0.8rem; line-height: 1.6;
}
.ic-footer p { margin: 0 0 4px; max-width: 78ch; }
.ic-footer-band { display: block; height: 3px; width: 92px; border-radius: 2px; background: var(--phc-grad); margin-bottom: 16px; }

/* ── Narrow ─────────────────────────────────────────────────────────────────*/
@media (max-width: 1020px) {
  .ic-stage { grid-template-columns: minmax(0, 1fr); }
  .ic-column { position: static; }
  /* On a touch screen the record is a sheet: the ring stays where it was,
     and the record comes up over the bottom of it. */
  .ic-column[data-view='record'] {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    max-height: 68vh; overflow-y: auto;
    padding: 20px clamp(18px, 5vw, 30px) 30px;
    background: var(--fig-bg);
    /* On black the sheet's ground is the page's ground, so the top edge is the
       only thing separating the record from the ring behind it. */
    border-top: 1px solid color-mix(in srgb, var(--fig-ink) 24%, transparent);
    box-shadow: 0 -20px 50px color-mix(in srgb, var(--fig-bg) 88%, transparent);
    border-radius: 16px 16px 0 0;
    animation: ic-sheet 0.32s var(--ic-ease);
  }
  @keyframes ic-sheet { from { transform: translateY(18px); opacity: 0; } }
  /* The sheet is dismissed by its own close link at the end of the record, and
     by Escape. A sticky one would sit on top of the citation it is scrolling
     past. */
  .ic-record-close { margin-top: 22px; }
  .ic-tip { display: none; }
}
@media (max-width: 640px) {
  .ic-readout { font-size: 0.9rem; }
  .ic-legend-row { gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ic-column[data-view='record'] { animation: none; }
}

/* ── Hit testing ────────────────────────────────────────────────────────────*/
/* Only the invisible fat stroke under each arc is a pointer target. The drawn
   shaft is 1.5 units wide on a 1900-unit board — at any real screen size that
   is a target under one pixel across. */
.ic-plates, .ic-heads, .ic-icon { pointer-events: none; }
.ic-link .ic-halo, .ic-link .ic-shaft, .ic-link circle, .ic-link text { pointer-events: none; }
.ic-node text { pointer-events: none; }
path.ic-hit { pointer-events: stroke; }
rect.ic-hit { pointer-events: all; }
/* A link the legend filters have excluded stops taking the pointer. A link that
   is merely dimmed because something else is hovered does not — otherwise the
   pointer cannot walk from one arc to its neighbour. The rule has to name the
   hit stroke itself: pointer-events on a parent does not override a value its
   child sets. */
.ic-link.is-filtered-out path.ic-hit,
.ic-node.is-muted rect.ic-hit { pointer-events: none; }

/* ── Theme toggle: offer the theme you are not in ───────────────────────────*/
#ic-theme-toggle svg { width: 20px; height: 20px; }
html[data-theme='dark'] .ic-moon { display: none; }
html[data-theme='light'] .ic-sun { display: none; }

.ic-ring-wrap { position: relative; }

/* The unknown-relevance key carries the figure's own question mark rather than a
   fifth line weight — the report marks that one connection on the arc itself. */
.ic-key-query { fill: currentColor; stroke: none; font-family: var(--phc-font); font-size: 15px; font-weight: 600; }

/* ── Lucide marks in the record ─────────────────────────────────────────────*/
/* One size, one stroke, and colour inherited from whatever row they sit in.
   Only the four effect directions are tinted, because those four are the
   figure's line grammar and the one thing a reader carries from the legend
   to an arc and back. */
.ic-i { width: 1em; height: 1em; flex: none; color: var(--fig-faint); }
.ic-i[data-tone='up'] { color: var(--ic-tone-up); }
.ic-i[data-tone='down'] { color: var(--ic-tone-down); }
.ic-i[data-tone='mixed'] { color: var(--ic-tone-mixed); }

/* ── The connection's own line, redrawn in the panel ────────────────────────*/
.ic-sig {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
  margin-top: 16px;
  padding: 14px 0 15px;
  border-top: 1px solid var(--ic-line);
  border-bottom: 1px solid var(--ic-line);
}
.ic-sig-line { grid-row: span 2; width: 78px; height: 26px; overflow: visible; }
.ic-sig-effect,
.ic-sig-rel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.88rem; line-height: 1.35; }
.ic-sig-effect { font-weight: 500; }
.ic-sig-effect[data-tone='up'] { color: var(--ic-tone-up); }
.ic-sig-effect[data-tone='down'] { color: var(--ic-tone-down); }
.ic-sig-effect[data-tone='mixed'] { color: var(--ic-tone-mixed); }
.ic-sig-rel { color: var(--fig-grey); }
.ic-record-facts { margin-top: 20px; }
.ic-record-facts dd { display: flex; align-items: center; gap: 8px; }
.ic-record-chain b { display: flex; align-items: center; gap: 8px; }
.ic-record-source { display: flex; align-items: flex-start; gap: 8px; }
.ic-record-source .ic-i { margin-top: 0.25em; }

/* ── Readout row: the live line, and the weight setting beside it ───────────*/
.ic-readout-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ic-weight {
  flex: none;
  margin-top: 1px;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 0.83rem;
  color: var(--fig-faint);
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.16s var(--ic-ease);
}
.ic-weight:hover { color: var(--fig-ink); }
.ic-weight[aria-pressed='true'] { color: var(--fig-ink); }
@media (max-width: 640px) {
  .ic-readout-row { flex-direction: column; gap: 8px; }
}
.ic-tip-meta { display: flex; align-items: center; gap: 7px; }
.ic-tip-meta[data-tone='up'] { color: var(--ic-tone-up); }
.ic-tip-meta[data-tone='down'] { color: var(--ic-tone-down); }
.ic-tip-meta[data-tone='mixed'] { color: var(--ic-tone-mixed); }

/* ── Phones ─────────────────────────────────────────────────────────────────
   At this width the boundary names on the rim fall to a few pixels. The ring
   keeps its symbols, a tap names the boundary in the readout above, and the
   engine crops the margin the names needed so the ring itself grows. */
.ic-say-touch { display: none; }
@media (hover: none) {
  .ic-say-hover { display: none; }
  .ic-say-touch { display: inline; }
}
@media (max-width: 640px) {
  .ic-node-label { display: none; }
}

/* ── Intro fold (only on a phone on its side) ───────────────────────────────*/
.ic-intro-toggle {
  display: none;
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fig-faint); cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px;
}
.ic-intro-toggle:hover,
.ic-intro-toggle:focus-visible { outline: none; color: var(--fig-ink); }

/* ── A phone on its side ────────────────────────────────────────────────────
   The ring sits at left, as tall as the screen under it allows (--ic-top is its
   measured top edge, set in interconnections.js), with the readout and the
   legend beside it. Rim names go, as on phones: the symbols stay, a tap names. */
@media (orientation: landscape) and (max-height: 500px) {
  .ic-page {
    padding-top: 8px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .ic-masthead { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; margin-bottom: 10px; }
  .ic-masthead h1 { margin: 0; font-size: 1.3rem; }
  .ic-intro-toggle { display: inline-block; }
  .ic-standfirst { display: none; flex-basis: 100%; max-width: 72ch; margin-top: 8px; font-size: 0.92rem; }
  .ic-intro-open .ic-standfirst { display: block; }
  .ic-node-label { display: none; }
  .ic-figure-inner {
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(18px, 3.4vw, 40px);
    align-items: start;
  }
  .ic-ring-wrap { grid-column: 1; grid-row: 1 / span 2; width: min(56vw, calc(100svh - var(--ic-top, 96px) - 10px)); }
  .ic-readout-row { grid-column: 2; grid-row: 1; flex-direction: column; gap: 6px; }
  .ic-readout { min-height: 0; margin: 0; font-size: 0.88rem; }
  .ic-legend { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .ic-legend-group + .ic-legend-group { margin-top: 10px; }
  .ic-legend-head { font-size: 0.76rem; margin-bottom: 4px; }
  .ic-legend-row { gap: 2px 14px; }
  .ic-key { font-size: 0.8rem; }
  .ic-column[data-view='record'] { max-height: 84vh; }
}

/* ── Large screens (>1920px) ────────────────────────────────────────────────
   Type grows with the window (+25% at 2560, capped at +40%); the page, the ring's
   height cap and the reading column grow with it. */
@media (min-width: 1921px) {
  html { font-size: clamp(16px, calc(0.625vw + 4px), 22.4px); }
  body { font-size: 1rem; }
  .ic-page { max-width: min(2240px, 90vw); padding: 1.6rem 3.5rem 0; }
  .ic-stage { grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 3.5rem; }
  .ic-figure-inner { max-width: min(100%, calc((100svh - 11rem) * 0.981)); }
  .ic-tip { max-width: 19rem; }
  .ic-key svg { width: 4.1rem; height: 0.6rem; }
  .ic-legend-row { gap: 0.4rem 1.4rem; }
  .ic-sig-line { width: 4.9rem; height: 1.6rem; }
  .ic-footer { max-width: min(2240px, 90vw); padding: 1.4rem 3.5rem 2.5rem; }
  #ic-theme-toggle svg { width: clamp(20px, 0.98vw, 28px); height: clamp(20px, 0.98vw, 28px); }
}