/* ============================================================
   case-13-august.css — case study page, 13 August 2026
   Prefix: case-   ·   Companion files: case-13-august.html,
   js/case-13-august.js

   The palette is copied from live.css rather than shared, so this page
   survives if the live feature is ever removed. It is the same validated
   set: adjacent-pair CVD deltaE 9.1 light / 8.4 dark, normal-vision
   19.6 / 19.3, against the surfaces pinned below. Change --case-surface
   only together with a re-run of the palette validator.
   ============================================================ */

.case-page {
  --case-surface:   #fcfcfb;
  --case-plane:     #f9f9f7;
  --case-ink:       #0b0b0b;
  --case-ink-2:     #52514e;
  --case-ink-muted: #898781;
  --case-grid:      #e1e0d9;
  --case-axis:      #c3c2b7;
  --case-ring:      rgba(11, 11, 11, 0.10);
  --case-accent:    #3FA9C4;

  --case-coal:      #8b4513;
  --case-nuclear:   #4a3aa7;
  --case-gas:       #eb6834;
  --case-hydro:     #2a78d6;
  --case-wind:      #1baf7a;
  --case-solar:     #eda100;
  --case-storage:   #e87ba4;
  --case-other:     #898781;

  /* The hydro split is two shades of the hydro hue, not two hues. Both series
     ARE hydro, and every other hue on this page already means something else —
     magenta in particular is storage in the mix chart, so reusing it for
     reservoir would make one colour mean two things on one page. The stronger
     step is reservoir, the series the section is about. */
  --case-hydro-river: #2a78d6;
  --case-hydro-res:   #184f95;

  /* Diverging pair for the cross-border chart: polarity, not identity. */
  --case-export:    #2a78d6;
  --case-import:    #e34948;

  /* de-emphasis grey for the context lines in the emphasis chart */
  --case-mute:      #b8b6ae;

  background: var(--case-plane);
  min-height: 100vh;
}

body.theme-dark.case-page {
  --case-surface:   #1a1a19;
  --case-plane:     #0d0d0d;
  --case-ink:       #ffffff;
  --case-ink-2:     #c3c2b7;
  --case-ink-muted: #898781;
  --case-grid:      #2c2c2a;
  --case-axis:      #383835;
  --case-ring:      rgba(255, 255, 255, 0.10);

  --case-coal:      #b06a2c;
  --case-nuclear:   #9085e9;
  --case-gas:       #d95926;
  --case-hydro:     #3987e5;
  --case-wind:      #199e70;
  --case-solar:     #c98500;
  --case-storage:   #d55181;
  --case-other:     #898781;

  --case-hydro-river: #3987e5;
  --case-hydro-res:   #86b6ef;

  --case-export:    #3987e5;
  --case-import:    #e66767;

  --case-mute:      #56554f;
}

/* ---------------------------------------------------------- layout */

.case-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 96px 24px 96px;
  color: var(--case-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.case-wrap p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--case-ink-2);
  margin: 0 0 18px;
}

.case-wrap p strong { color: var(--case-ink); font-weight: 600; }
.case-wrap a { color: var(--case-accent); }

.case-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------- header */

.case-head { margin-bottom: 40px; }

.case-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--case-accent);
  margin-bottom: 10px;
}

.case-title {
  font-size: 44px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0 0 20px;
  color: var(--case-ink);
}

.case-standfirst {
  font-size: 19px !important;
  line-height: 1.6 !important;
}

/* ---------------------------------------------------------- stats */

.case-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 56px;
}

.case-stat {
  background: var(--case-surface);
  border: 1px solid var(--case-ring);
  border-radius: 12px;
  padding: 16px 16px 14px;
}

.case-stat-label {
  font-size: 12.5px;
  color: var(--case-ink-2);
  margin-bottom: 6px;
}

.case-stat-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--case-ink);
  white-space: nowrap;
}

.case-stat-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--case-ink-muted);
  margin-left: 4px;
}

.case-stat-note {
  font-size: 11.5px;
  color: var(--case-ink-muted);
  margin-top: 6px;
  line-height: 1.35;
}

/* ---------------------------------------------------------- sections */

.case-section {
  margin-bottom: 56px;
  position: relative;
}

.case-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--case-accent);
  margin-bottom: 6px;
}

.case-h2 {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--case-ink);
  letter-spacing: -0.2px;
}

/* ---------------------------------------------------------- figures */

.case-fig {
  margin: 28px 0;
  background: var(--case-surface);
  border: 1px solid var(--case-ring);
  border-radius: 12px;
  padding: 20px 18px 16px;
}

.case-fig figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--case-ink-muted);
  margin-top: 14px;
}

.case-chart { position: relative; }

/* Scoped, and !important to beat the global `svg { width: 100% }` rule. */
.case-chart svg {
  width: 100% !important;
  height: auto !important;
  display: block;
  overflow: visible;
}

.case-axis-text {
  font-size: 11px;
  fill: var(--case-ink-muted);
  font-variant-numeric: tabular-nums;
}

.case-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--case-ink-2);
}

.case-gridline { stroke: var(--case-grid); stroke-width: 1; }
.case-baseline { stroke: var(--case-axis); stroke-width: 1; }
.case-crosshair { stroke: var(--case-axis); stroke-width: 1; pointer-events: none; }

.case-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------------------------------------------------------- legend */

.case-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.case-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--case-ink-2);
  min-height: 24px;
}

.case-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* Demand is an overlay line, not a stack category — its key says so. */
.case-swatch-line {
  height: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- tooltip */

.case-tip {
  position: absolute;
  pointer-events: none;
  background: var(--case-surface);
  border: 1px solid var(--case-ring);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--case-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

.case-tip-time {
  color: var(--case-ink-muted);
  margin-bottom: 6px;
  font-size: 11.5px;
}

.case-tip-row { display: flex; align-items: center; gap: 8px; }
.case-tip-row span:last-child { margin-left: auto; font-weight: 600; }

/* ---------------------------------------------------------- method */

.case-method {
  border-top: 1px solid var(--case-grid);
  padding-top: 32px;
}

.case-limits {
  margin: 0 0 20px;
  padding-left: 20px;
}

.case-limits li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--case-ink-2);
  margin-bottom: 10px;
}

.case-limits strong { color: var(--case-ink); font-weight: 600; }

.case-source {
  font-size: 13px !important;
  color: var(--case-ink-muted) !important;
}

/* ---------------------------------------------------------- mobile
   Own media query inside this feature's own stylesheet. */

@media (max-width: 760px) {
  .case-wrap { padding: 84px 16px 64px; }
  .case-title { font-size: 32px; }
  .case-standfirst { font-size: 17px !important; }
  .case-wrap p { font-size: 16px; }
  .case-h2 { font-size: 23px; }

  .case-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .case-stat { padding: 12px 12px 10px; }
  .case-stat-value { font-size: 21px; }

  .case-fig { padding: 14px 12px 12px; }
  .case-legend { gap: 4px 14px; }
}