/* ==========================================================================
   Wodonga Wire — case study pages
   Implements the design grammar extracted from junction-place-pack (10 Aug 2026).
   See docs/case-studies/CASE_STUDY_DESIGN_GRAMMAR.md.

   SCOPE. Every token here is namespaced --cs-* and every rule is nested under
   .case-study. The site's own chrome tokens (--paper, --brick, --frame) are
   untouched, so the masthead, footer and every other page render exactly as
   before. The two palettes are allowed to differ because the dark identity
   band is the seam between them — that is what the 3px accent rule under it
   is for.

   THREE RULES HOLD THIS TOGETHER.

   1. EVERY STATE IS TRIPLE-ENCODED — colour, line style, and a written word.
      The page must read correctly in greyscale. Colour here is a data
      encoding, not decoration, which is why the palette runs wider than the
      site's single accent.

   2. EVIDENCE GRADE IS VISIBLE, NOT FOOTNOTED. Documented fact, contemporary
      claim, later explanation, Wodonga Wire synthesis and open question each
      carry a marker, used identically in every section. Record state and
      evidence grade are different axes and never share a vocabulary.

   3. RHYTHM IS DELIBERATE. No two consecutive sections share a shape. The
      component classes below are the vocabulary of shapes; a case study
      composes the ones its evidence supports and no others.
   ========================================================================== */

.case-study {
  --cs-bg: #f5f4ed;
  --cs-surface: #faf9f5;
  --cs-surface-warm: #e8e6dc;

  --cs-fg: #141413;
  --cs-fg-2: #3d3d3a;
  --cs-muted: #5e5d59;
  --cs-meta: #6b6a63; /* 12px text: 4.9:1 on --cs-bg (was #87867f, 3.3:1) */

  --cs-border: #f0eee6;
  --cs-border-soft: #e8e6dc;

  --cs-accent: #c96442;
  --cs-accent-active: color-mix(in oklab, var(--cs-accent), black 14%);
  --cs-success: #17a34a;
  --cs-warn: #eab308;

  /* Type, focus and motion are the publication's (publication.css); the
     kit names are kept so every rule below reads as it was written. */
  --cs-font-display: var(--font-display);
  --cs-font-body: var(--font-body);
  --cs-font-mono: var(--font-mono);

  --cs-1: 4px;  --cs-2: 8px;  --cs-3: 12px; --cs-4: 16px;
  --cs-5: 20px; --cs-6: 24px; --cs-8: 32px; --cs-12: 48px;

  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-pill: 9999px;

  --cs-focus: var(--focus-ring);
  --cs-motion-fast: var(--motion-fast);
  --cs-motion-base: var(--motion-base);
  --cs-ease: var(--ease-standard);

  --cs-container: 1200px;
  --cs-gutter: 24px;
  --cs-rail-w: 208px;

  /* Four measures. Do not introduce a fifth.

     `--cs-article` is the column the story is read in: the paragraphs, the
     number strips, the timelines and the comparison figures are all set to
     it, so the article has one edge rather than a text edge at 62ch and a
     figure edge at 78ch. 72ch is where the two used to sit either side of. */
  /* 61ch of the 19px lede is the same edge as 72ch of the 16px body, so the
     standfirst stops where the paragraphs and figures below it stop. */
  --cs-measure: 61ch;
  --cs-measure-tight: 46ch;
  --cs-measure-wide: 78ch;
  --cs-measure-head: 22ch;
  --cs-article: 72ch;

  /* Derived state colours — mixes of the tokens above, never new hex values. */
  --st-built:      color-mix(in oklab, var(--cs-success) 72%, var(--cs-fg));
  --st-built-wash: color-mix(in oklab, var(--cs-success) 12%, var(--cs-surface));
  --st-prop:       var(--cs-accent-active);
  --st-prop-wash:  color-mix(in oklab, var(--cs-accent) 10%, var(--cs-surface));
  --st-gone:       color-mix(in oklab, var(--cs-meta) 60%, var(--cs-fg));
  --st-gone-wash:  color-mix(in oklab, var(--cs-meta) 9%, var(--cs-surface));
  --st-part:       color-mix(in oklab, var(--cs-warn) 58%, var(--cs-fg));
  --st-part-wash:  color-mix(in oklab, var(--cs-warn) 14%, var(--cs-surface));
  --st-unk:        var(--cs-muted);

  background: var(--cs-bg);
  color: var(--cs-fg);
  font-family: var(--cs-font-body);
  font-size: 16px;
  line-height: 1.6;
}

.case-study *, .case-study *::before, .case-study *::after { box-sizing: border-box; }
.case-study h1, .case-study h2, .case-study h3, .case-study h4 {
  margin: 0; font-family: var(--cs-font-display); font-weight: 500;
  line-height: 1.1; text-wrap: balance;
}
.case-study p { margin: 0; }
.case-study a { color: var(--cs-fg-2); text-underline-offset: 3px; text-decoration-color: var(--cs-border-soft); }
.case-study a:hover { color: var(--cs-fg); text-decoration-color: var(--cs-accent); }
.case-study button { font: inherit; color: inherit; }
.case-study a, .case-study button { transition: var(--transition-feedback); }
.case-study svg { max-width: 100%; }
.case-study :focus-visible { outline: none; box-shadow: var(--cs-focus); border-radius: var(--cs-radius-sm); }
.case-study .vh {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

.cs-w { max-width: var(--cs-container); margin-inline: auto; padding-inline: var(--cs-gutter); }
@media (max-width: 900px) { .cs-w { padding-inline: 16px; } }
@media (max-width: 640px) { .cs-w { padding-inline: 12px; } }

/* ── the five case studies ─────────────────────────────────────────────────
   The row naming every case study sits under the band and is drawn by the
   publication shell (publication.css .cs-family), because the Case Studies
   index, a foundation page, carries the same row. */

/* ── state chips ───────────────────────────────────────────────────────────
   One component, used everywhere. The ::before is a 14px rule whose STYLE
   carries the state as well as its colour, and the word carries it a third
   time. Nothing on the page needs a colour key. */
.case-study .s {
  display: inline-flex; align-items: center; gap: var(--cs-2);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: var(--cs-muted);
}
.case-study .s::before { content: ""; width: 14px; border-top: 3px solid currentColor; flex: none; }
.case-study .s-built { color: var(--st-built); }
.case-study .s-prop { color: var(--st-prop); }
.case-study .s-prop::before { border-top-style: dashed; }
.case-study .s-gone { color: var(--st-gone); }
.case-study .s-gone::before { border-top-style: dotted; }
.case-study .s-part { color: var(--st-part); }
.case-study .s-part::before { border-top-style: dashed; }
.case-study .s-unk { color: var(--st-unk); }
.case-study .s-unk::before { border-top-style: dotted; opacity: 0.6; }
.case-study .s-fact { color: var(--cs-fg); }

/* Evidence grade — a different axis from record state, so a different shape:
   a glyph, never a rule. */
.case-study .ev {
  display: inline-flex; align-items: baseline; gap: var(--cs-2);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-muted);
}
.case-study .ev::before { font-family: var(--cs-font-mono); font-size: 11px; color: var(--cs-fg-2); }
.case-study .ev-doc::before { content: "\25A0"; }
.case-study .ev-claim::before { content: "\25C7"; }
.case-study .ev-later::before { content: "\25C8"; }
.case-study .ev-syn::before { content: "\25B2"; }
.case-study .ev-open::before { content: "\25CB"; }

/* ── identity band — a located strip, not a hero ─────────────────────────── */
.cs-band {
  background-color: var(--cs-fg);
  background-size: cover; background-position: center 46%;
  border-bottom: 3px solid var(--cs-accent);
}
.cs-band-in {
  padding-block: clamp(28px, 4.6vw, 52px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--cs-8); flex-wrap: wrap;
}
.cs-band .kicker {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--cs-accent) 64%, var(--cs-surface));
}
.cs-band h1 {
  margin-top: var(--cs-3); font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: -0.02em; color: var(--cs-surface); max-width: 20ch;
}
.cs-band .band-meta {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--cs-surface) 62%, var(--cs-fg));
  line-height: 1.9; text-align: right;
}
.cs-band .band-meta b { color: var(--cs-surface); font-weight: 500; }
@media (max-width: 640px) { .cs-band .band-meta { text-align: left; } }

/* The central finding sits inside the opening rather than arriving as another
   card below it. It is the shortest synthesis the record supports. */
.cs-finding { border-top: 3px solid var(--cs-accent); padding-top: var(--cs-4); margin-top: clamp(28px, 3.4vw, 40px); }
.cs-finding .lbl { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-muted); }
.cs-finding p { margin-top: var(--cs-3); font-family: var(--cs-font-display);
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.35; letter-spacing: -0.015em;
  max-width: var(--cs-measure-wide); }

/* ── story rail ────────────────────────────────────────────────────────────
   Two treatments, mutually exclusive, never a third navigation system.

   The geometry is the Site Foundation's (D-026): the rail is an in-flow
   sticky grid column beside the article from 1100px, never the kit's fixed
   gutter overlay from 1500px, which overlapped the band and the content
   column. Below 1100 the same chapters recompose into the sticky bar. The
   article's sections keep their own `cs-w` container class and give up its
   gutter inside the shell, so the record region below the shell can stay
   full-bleed. The rule set stays the case study's own until the family
   migrates onto the foundation (D-069). */
.cs-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-canvas { min-width: 0; }
.cs-canvas > .cs-w { max-width: none; padding-inline: 0; }
.cs-rail { display: none; }
.cs-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--cs-border-soft); }
.cs-rail a {
  display: block; padding: 5px 0 5px var(--cs-4); margin-left: -1px;
  border-left: 2px solid transparent; text-decoration: none;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-muted);
  transition: color var(--cs-motion-fast) var(--cs-ease);
}
.cs-rail a:hover { color: var(--cs-fg-2); }
.cs-rail a.on { color: var(--cs-fg); border-left-color: var(--cs-accent); font-weight: 500; }
.cs-rail .cap { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cs-muted); margin-bottom: var(--cs-3); display: block; }
@media (min-width: 1100px) {
  .cs-shell.has-rail {
    grid-template-columns: var(--cs-rail-w) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .cs-rail {
    display: block; position: sticky; top: calc(var(--chrome-h) + var(--cs-6));
    max-height: calc(100vh - var(--chrome-h) - var(--cs-12)); overflow-y: auto;
    /* Top padding matches .cs-sec so the cap aligns with the opening. */
    padding-block: clamp(40px, 4vw, 58px) var(--cs-6);
  }
}

/* The chapter bar is in-page navigation: it scrolls away with the page under
   the two-row stack (masthead and the case studies' row of five), so a third
   strip never forms. */
.cs-railbar {
  background: var(--cs-bg);
  border-bottom: 1px solid var(--cs-border-soft);
}
.cs-railbar-in { display: flex; align-items: center; gap: var(--cs-4);
  padding-block: var(--cs-2); overflow-x: auto; scrollbar-width: none;
  /* Twelve chapters do not fit one row below 1100px. The fade says the bar
     continues; the trailing spacer lets the last chapter scroll clear of it. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.cs-railbar-in::-webkit-scrollbar { display: none; }
.cs-railbar-in::after { content: ""; flex: none; width: 2.5rem; }
.cs-railbar a { flex: none; text-decoration: none; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cs-muted); padding: var(--cs-2) 0;
  border-bottom: 2px solid transparent; }
.cs-railbar a.on { color: var(--cs-fg); border-bottom-color: var(--cs-accent); font-weight: 500; }
@media (min-width: 1100px) { .cs-railbar { display: none; } }
/* The jump offset is the shell's (publication.css scroll-padding-top). */
@media (min-width: 1100px) { .cs-canvas [id] { scroll-margin-top: var(--cs-4); } }

/* ── section furniture ─────────────────────────────────────────────────────
   The section header is three rows: chapter label full width, heading on its
   own row, then body text and key block side by side. The key block's rule
   aligns with the body text, not with the heading. */
.cs-sec { padding-block: clamp(40px, 4vw, 58px); }
.cs-sec + .cs-sec { border-top: 1px solid var(--cs-border-soft); }
.cs-chap { display: flex; align-items: baseline; gap: var(--cs-4); margin-bottom: var(--cs-5); }
.cs-chap .num { font-family: var(--cs-font-mono); font-size: 12px; letter-spacing: 0.1em;
  /* 12px text: the base accent is 3.5:1 here; the active accent clears AA. */
  color: var(--cs-accent-active); }
.cs-chap .lbl { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-muted); }
.cs-sec h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; max-width: var(--cs-measure-head); }
.cs-sec .stand { margin-top: var(--cs-5); max-width: var(--cs-measure);
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--cs-fg-2); }
.cs-sec .stand + .stand { margin-top: var(--cs-4); }
/* The opening précis has the study's illustration to its left
   (publication.css .wf-withplate); on a phone the précis runs round it. The
   précis keeps its own measure beside the picture. */
.cs-opening.wf-withplate { --plate-w: 280px; }
.cs-opening .cs-opening-body > .stand:first-child { margin-top: 0; }
.cs-sec .note { margin-top: var(--cs-4); max-width: var(--cs-measure); color: var(--cs-muted); font-size: 15px; }

.cs-sec-head {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px); row-gap: var(--cs-5); align-items: start;
}
.cs-sec-head > .cs-chap { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
.cs-sec-head > h2 { grid-column: 1 / 2; grid-row: 2; }
.cs-sec-head > .sec-l { grid-column: 1 / 2; grid-row: 3; }
.cs-sec-head > .sec-key { grid-column: 2 / 3; grid-row: 3; }
.cs-sec-head .sec-l > .stand:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .cs-sec-head { grid-template-columns: 1fr; }
  .cs-sec-head > h2, .cs-sec-head > .sec-l, .cs-sec-head > .sec-key { grid-column: 1 / -1; }
}
.cs-sec-head .sec-key { border-top: 3px solid var(--cs-fg); padding-top: var(--cs-4); }
.sec-key .k-big { font-family: var(--cs-font-display); font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.025em; line-height: 1; }
.sec-key dl { margin: var(--cs-4) 0 0; max-width: 21rem; }
.sec-key dl > div { display: grid; grid-template-columns: 1fr auto; gap: var(--cs-3);
  align-items: baseline; padding-block: var(--cs-2); border-top: 1px solid var(--cs-border); }
.sec-key dt { font-size: 13px; color: var(--cs-muted); }
.sec-key dd { margin: 0; font-family: var(--cs-font-display); font-size: 16px; color: var(--cs-fg); }

/* ── citations — a list of sources, nothing else ───────────────────────────
   Title is the link. No trailing "Evidence →". One block per section. */
.cs-src { margin-top: var(--cs-5); padding-top: var(--cs-3); border-top: 1px solid var(--cs-border); }
.cs-src-h { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cs-muted); margin-bottom: var(--cs-2); }
.cs-src ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--cs-6); }
.cs-src li { padding-block: 3px; font-size: 12.5px; line-height: 1.5; display: inline; }
.cs-src li + li::before { content: "\00B7 "; color: var(--cs-muted); margin-right: var(--cs-1); }
.cs-src li a { display: inline; color: var(--cs-fg-2); text-decoration: underline;
  text-decoration-color: var(--cs-border-soft); }
.cs-src li a:hover { color: var(--cs-fg); text-decoration-color: var(--cs-accent); }
.cs-src li span { font-size: 12.5px; color: var(--cs-muted); white-space: nowrap; }
.cs-src li span::before { content: " \00B7 "; color: var(--cs-muted); }

/* ── missing evidence ──────────────────────────────────────────────────────
   The same class of fact as the figures above it, so the same weight rather
   than a sentence trailing off the end of a section. */
.cs-missing { margin-top: clamp(24px, 3vw, 34px); border-top: 3px dotted var(--cs-muted); padding-top: var(--cs-4); }
.cs-missing-h { font-size: 12px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-muted); }
.cs-missing ul { list-style: none; margin: var(--cs-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-5) var(--cs-8); }
.cs-missing li { border-top: 1px solid var(--cs-border); padding-top: var(--cs-3); font-size: 14px; }
.cs-missing li b { display: block; font-weight: 500; color: var(--cs-fg); }
.cs-missing li span { color: var(--cs-muted); }
@media (max-width: 900px) { .cs-missing ul { grid-template-columns: 1fr; } }

/* ── shape: answers band ───────────────────────────────────────────────────
   Not three cards: one band, three columns of unequal weight, hairline-split. */
.cs-answers { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--cs-fg); }
.cs-answers > div { padding: var(--cs-6) var(--cs-6) var(--cs-5) 0; }
.cs-answers > div + div { border-left: 1px solid var(--cs-border-soft); padding-left: var(--cs-6); }
.cs-answers dt { font-family: var(--cs-font-display); font-size: 25px; letter-spacing: -0.015em; }
.cs-answers dd { margin: var(--cs-3) 0 0; font-size: 15px; line-height: 1.6; color: var(--cs-muted); }
.cs-answers .tag { margin-top: var(--cs-4); display: flex; gap: var(--cs-3); flex-wrap: wrap; align-items: center; }
.cs-answers .yr { font-family: var(--cs-font-mono); font-size: 12px; color: var(--cs-fg-2);
  background: var(--cs-surface-warm); padding: 3px var(--cs-2); border-radius: var(--cs-radius-sm); }
@media (max-width: 900px) {
  .cs-answers { grid-template-columns: 1fr; }
  .cs-answers > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--cs-border-soft); }
  .cs-answers > div { padding-right: 0; }
}

/* ── shape: version lineage ────────────────────────────────────────────────
   The primitive generalises; the number of stages and their labels do not.
   Never manufacture a version matrix a dossier does not support. */
.cs-lin { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-scrub-hint { margin-top: clamp(20px, 2.6vw, 28px); margin-bottom: var(--cs-3);
  font-size: 14px; color: var(--cs-muted); max-width: var(--cs-measure); }
.cs-scrub-hint::before { content: "\25B8 "; color: var(--cs-accent); }
.cs-scrub { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--cs-border-soft); border-bottom: 1px solid var(--cs-border-soft); }
.cs-scrub button { background: none; border: 0; border-right: 1px solid var(--cs-border);
  padding: var(--cs-4) var(--cs-3) var(--cs-4) 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; transition: background var(--cs-motion-fast) var(--cs-ease); }
.cs-scrub button:last-child { border-right: 0; }
.cs-scrub button:hover { background: var(--cs-surface); }
.cs-scrub button:hover .nm { color: var(--cs-fg); }
.cs-scrub .yr { display: block; font-family: var(--cs-font-mono); font-size: 12px; color: var(--cs-muted); }
.cs-scrub .nm { display: block; margin-top: 5px; margin-bottom: var(--cs-5);
  font-family: var(--cs-font-display); font-size: 15px; line-height: 1.25; color: var(--cs-fg-2); }
.cs-scrub .bar { display: block; height: 3px; background: var(--cs-border-soft); margin-top: auto; }
.cs-scrub button[aria-selected="true"] .nm { color: var(--cs-fg); }
.cs-scrub button[aria-selected="true"] .yr { color: var(--cs-accent); }
.cs-scrub button[aria-selected="true"] .bar { background: var(--cs-accent); }
.cs-scrub button.past .bar { background: var(--cs-meta); }
@media (max-width: 900px) {
  .cs-scrub { grid-auto-flow: row; grid-auto-columns: auto; }
  .cs-scrub button { border-right: 0; border-bottom: 1px solid var(--cs-border); padding: var(--cs-3) 0;
    display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: var(--cs-3); }
  .cs-scrub .nm { margin-bottom: 0; }
  .cs-scrub .bar { grid-column: 1 / -1; margin-top: var(--cs-2); }
}
.cs-linbody { margin-top: clamp(20px, 2.6vw, 32px); display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
@media (max-width: 1100px) { .cs-linbody { grid-template-columns: 1fr; } }
.cs-plate { background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg); padding: var(--cs-5); }
.cs-plate svg { display: block; width: 100%; height: auto; }
.cs-linside h3 { font-size: 25px; letter-spacing: -0.015em; }
.cs-linside .when { font-family: var(--cs-font-mono); font-size: 12px; color: var(--cs-accent); letter-spacing: 0.06em; }
.cs-linside p { margin-top: var(--cs-3); font-size: 15px; line-height: 1.6; color: var(--cs-muted); }
.cs-linside .chg { margin-top: var(--cs-4); border-top: 1px solid var(--cs-border-soft); padding-top: var(--cs-3); }
.cs-linside .chg ul { margin: 0; padding: 0; }
.cs-linside .chg li { list-style: none; display: grid; grid-template-columns: 6.2rem 1fr; gap: var(--cs-3);
  padding-block: var(--cs-2); border-bottom: 1px solid var(--cs-border); font-size: 14px; color: var(--cs-muted); }
.cs-linside .chg b { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.c-add b { color: var(--st-prop); }
.c-keep b { color: var(--cs-fg-2); }
.c-move b { color: var(--st-part); }
.c-drop b { color: var(--st-gone); }
.c-built b { color: var(--st-built); }

/* ── shape: delivery tracks ────────────────────────────────────────────────
   Only where a case genuinely has two tracks with different payers. */
.cs-tracks { margin-top: clamp(28px, 3.4vw, 40px); display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px); }
@media (max-width: 900px) { .cs-tracks { grid-template-columns: 1fr; } }
.cs-track { border-top: 3px solid var(--cs-fg); padding-top: var(--cs-4); }
.cs-track.is-secondary { border-top-color: var(--st-prop); }
.cs-track h3 { font-size: 25px; letter-spacing: -0.015em; }
.cs-track .sub { margin-top: var(--cs-2); font-size: 14px; color: var(--cs-muted); }
.cs-track ul { list-style: none; margin: var(--cs-5) 0 0; padding: 0; }
.cs-track li { display: grid; grid-template-columns: 1fr auto; gap: var(--cs-2) var(--cs-4);
  align-items: baseline; padding-block: var(--cs-3); border-bottom: 1px solid var(--cs-border); }
.cs-track li .nm { font-size: 15px; }
.cs-track li .why { grid-column: 1 / -1; font-size: 14px; color: var(--cs-muted); }
.cs-trackfoot { margin-top: var(--cs-5); padding: var(--cs-4) var(--cs-5); background: var(--cs-surface);
  border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md);
  font-size: 15px; color: var(--cs-fg-2); max-width: var(--cs-measure-wide); }

/* ── shape: component fate rows ────────────────────────────────────────────
   Named components with individually dated trails. */
.cs-fates { margin-top: clamp(28px, 3.4vw, 40px); border-top: 2px solid var(--cs-fg); }
.cs-fate { border-bottom: 1px solid var(--cs-border); }
.cs-fate > button { display: grid; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 3fr) minmax(7rem, auto);
  gap: var(--cs-2) var(--cs-5); align-items: center; padding: var(--cs-4) var(--cs-2); }
.cs-fate > button:hover { background: var(--cs-surface); }
.cs-fate .cn { font-family: var(--cs-font-display); font-size: 18px; letter-spacing: -0.012em; }
.cs-fate .arc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-fate .step { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cs-muted); padding: 3px 9px; border: 1px solid var(--cs-border-soft); border-radius: var(--cs-radius-pill); }
.cs-fate .step.hot { color: var(--cs-fg); border-color: var(--cs-fg-2); }
.cs-fate .step.out { color: var(--st-gone); border-style: dotted; }
.cs-fate .arw { color: var(--cs-muted); font-size: 12px; }
.cs-fate .end { justify-self: end; }
.cs-fate .body { padding: 0 var(--cs-2) var(--cs-5) var(--cs-2); }
.cs-fate .body .row { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--cs-4);
  padding-block: var(--cs-2); border-top: 1px solid var(--cs-border); font-size: 14px; color: var(--cs-muted); }
.cs-fate .body .row i { font-style: normal; font-family: var(--cs-font-mono); font-size: 12px; color: var(--cs-muted); }
@media (max-width: 900px) {
  .cs-fate > button { grid-template-columns: 1fr; }
  .cs-fate .end { justify-self: start; }
}

/* ── shape: decision flow, and the causation break ─────────────────────────
   The break exists only where two events have a real, documented gap between
   them. Never used to dramatise ordinary sequence. */
.cs-flow { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; }
.cs-fnode { border-top: 3px solid var(--cs-fg); padding: var(--cs-4) var(--cs-5) var(--cs-5) 0;
  display: flex; flex-direction: column; }
.cs-fnode + .cs-fnode { border-left: 1px solid var(--cs-border-soft); padding-left: var(--cs-5); }
.cs-fnode .d { font-family: var(--cs-font-mono); font-size: 13px; font-weight: 500; color: var(--cs-fg); }
.cs-fnode .who { display: block; margin-top: var(--cs-2); font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-muted); }
.cs-fnode .act { margin-top: var(--cs-3); font-size: 15px; line-height: 1.5; color: var(--cs-fg); }
.cs-fnode .cons { margin-top: var(--cs-3); font-size: 14px; color: var(--cs-muted); }
.cs-fnode .ev { margin-top: auto; padding-top: var(--cs-4); }
@media (max-width: 900px) {
  .cs-flow { grid-template-columns: 1fr; }
  .cs-fnode, .cs-fnode + .cs-fnode { border-top: 0; border-left: 3px solid var(--cs-fg);
    padding: var(--cs-4) 0 var(--cs-4) var(--cs-5); }
}
.cs-brk { margin-top: clamp(28px, 3.4vw, 40px); background: var(--cs-surface);
  border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); padding: clamp(20px, 2.4vw, 28px); }
.cs-brk-line { display: flex; align-items: center; gap: var(--cs-4); flex-wrap: wrap; }
.cs-brk-line .end { font-family: var(--cs-font-display); font-size: 17px; line-height: 1.3; max-width: var(--cs-measure-head); }
.cs-brk-line .gap { flex: 1 1 6rem; min-width: 5rem; height: 0;
  border-top: 2px dashed var(--cs-border-soft); position: relative; }
.cs-brk-line .gap::after { content: "?"; position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
  background: var(--cs-surface); padding: 0 var(--cs-2); font-family: var(--cs-font-mono);
  font-size: 15px; color: var(--cs-muted); }
.cs-brk-verd { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--st-unk); border: 1px dotted var(--cs-meta);
  border-radius: var(--cs-radius-pill); padding: 5px var(--cs-3); }
.cs-accts { margin-top: var(--cs-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-5);
  border-top: 1px solid var(--cs-border-soft); padding-top: var(--cs-5); }
@media (max-width: 640px) { .cs-accts { grid-template-columns: 1fr; } }
.cs-acct-title { font-family: var(--cs-font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-accts p { margin-top: var(--cs-3); font-size: 14px; line-height: 1.6; color: var(--cs-muted); }
.cs-accts b { color: var(--cs-fg); font-weight: 500; }

/* ── shape: actor / authority matrix ───────────────────────────────────────
   Rows are actors, columns are powers. Answers "who could decide what"
   without implying powers an actor did not hold. */
.cs-net { margin-top: clamp(28px, 3.4vw, 40px); overflow-x: auto; }
.cs-netgrid { display: grid; min-width: 900px; }
.cs-netgrid > div { padding: var(--cs-3) var(--cs-3) var(--cs-3) 0; border-bottom: 1px solid var(--cs-border); }
.cs-netgrid .hd { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cs-muted); border-bottom: 1px solid var(--cs-fg-2); align-self: end; }
.cs-netgrid .ac { font-family: var(--cs-font-display); font-size: 16px; letter-spacing: -0.01em; }
.cs-netgrid .ac span { display: block; font-family: var(--cs-font-body); font-size: 12px;
  color: var(--cs-muted); margin-top: 2px; }
.cs-netgrid .cell { font-size: 12.5px; line-height: 1.5; color: var(--cs-muted); }
.cs-netgrid .cell b { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 2px; }
.cs-netgrid .lead { color: var(--cs-fg-2); }
.cs-netgrid .lead b { color: var(--cs-fg); }
.cs-netgrid .share b { color: var(--cs-fg-2); }
.cs-netgrid .adv b { color: var(--st-part); }
.cs-netgrid .non { color: var(--cs-muted); opacity: 0.55; }
.cs-netnote { margin-top: var(--cs-5); display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--cs-5); font-size: 14px; color: var(--cs-muted); }
.cs-netnote b { color: var(--cs-fg); font-weight: 500; }
@media (max-width: 900px) { .cs-netnote { grid-template-columns: 1fr; } }

/* ── shape: money lanes ────────────────────────────────────────────────────
   One lane per kind of number. Nothing here sums or compares across lanes;
   the interface makes the distinction legible rather than putting a caveat
   beside a misleading total. */
.cs-lanes { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--cs-8); }
.cs-lane { padding: var(--cs-5) var(--cs-5) var(--cs-5) 0; border-top: 3px solid var(--cs-border-soft); }
.cs-lane:nth-child(n+3) { margin-top: var(--cs-6); }
.cs-lane:nth-child(even) { border-left: 1px solid var(--cs-border-soft); padding-left: var(--cs-8); }
.cs-lane.actual { border-top-color: var(--st-built); }
.cs-lane.proposed { border-top-color: var(--st-prop); }
.cs-lane.forecast { border-top-color: var(--st-part); }
.cs-lane.unknown { border-top-style: dotted; border-top-color: var(--cs-muted); }
.cs-lane .amt { font-family: var(--cs-font-display); font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.025em; line-height: 1; }
.cs-lane.unknown .amt { color: var(--cs-muted); }
.cs-lane .kind { margin-top: var(--cs-3); font-size: 14px; font-weight: 500; }
.cs-lane p { margin-top: var(--cs-3); font-size: 14px; max-width: var(--cs-measure-tight);
  line-height: 1.6; color: var(--cs-muted); }
@media (max-width: 640px) {
  .cs-lanes { grid-template-columns: 1fr; }
  .cs-lane:nth-child(n+2) { margin-top: var(--cs-5); }
  .cs-lane:nth-child(even) { padding-left: 0; border-left: 0; }
}
.cs-moneynote { margin-top: var(--cs-5); max-width: var(--cs-measure-wide); font-size: 15px; color: var(--cs-muted); }
.cs-moneynote b { color: var(--cs-fg); font-weight: 500; }

/* ── shape: map plate + selection panel ────────────────────────────────────
   The list beneath carries every fact as text, so nothing is hover-only. */
.cs-mapwrap { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
@media (max-width: 1100px) { .cs-mapwrap { grid-template-columns: 1fr; } }
.cs-mapcap { margin-top: var(--cs-4); font-size: 12px; letter-spacing: 0.04em; color: var(--cs-muted); }
/* Sticks just below the site masthead, the one bar that stays at the top. */
.cs-mapcol { position: sticky; top: calc(var(--chrome-h) + var(--cs-4)); }
.cs-mapdet { background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg); padding: var(--cs-5); }
.cs-mapdet h3 { font-size: 25px; letter-spacing: -0.015em; }
.cs-mapdet .s { margin-top: var(--cs-3); }
.cs-mapdet p { margin-top: var(--cs-3); font-size: 15px; color: var(--cs-muted); }
.cs-mapdet .prov { margin-top: var(--cs-4); padding-top: var(--cs-3);
  border-top: 1px solid var(--cs-border-soft); font-size: 12px; color: var(--cs-muted); }
.cs-maplist h4 { font-family: var(--cs-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cs-muted); margin: var(--cs-5) 0 var(--cs-2); }
.cs-mi { display: grid; grid-template-columns: 1fr auto; gap: var(--cs-1) var(--cs-4); align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--cs-border);
  padding: 9px var(--cs-2); cursor: pointer; }
.cs-mi:hover { background: var(--cs-surface-warm); }
.cs-mi[aria-pressed="true"] { background: var(--cs-surface-warm); box-shadow: inset 3px 0 0 var(--cs-accent); }
.cs-mi .nm { font-size: 15px; font-weight: 500; line-height: 1.35; }
.cs-mi .why { grid-column: 1 / -1; font-size: 13px; color: var(--cs-muted); }

/* map SVG vocabulary */
.m-ground { fill: color-mix(in oklab, var(--cs-surface-warm) 30%, var(--cs-surface)); }
.m-road { stroke: var(--cs-surface-warm); stroke-width: 9; fill: none; stroke-linecap: round; }
.m-roadl { font: 500 10px var(--cs-font-body); fill: var(--cs-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.m-park { fill: color-mix(in oklab, var(--cs-success) 11%, var(--cs-surface));
  stroke: color-mix(in oklab, var(--cs-success) 40%, var(--cs-surface-warm)); stroke-width: 1.3; }
.m-public { fill: color-mix(in oklab, var(--cs-surface-warm) 80%, var(--cs-surface));
  stroke: color-mix(in oklab, var(--cs-fg) 34%, var(--cs-surface-warm)); stroke-width: 1.3; }
.m-herit { fill: color-mix(in oklab, var(--cs-warn) 13%, var(--cs-surface));
  stroke: color-mix(in oklab, var(--cs-warn) 52%, var(--cs-fg)); stroke-width: 1.5; }
.m-site { fill: color-mix(in oklab, var(--cs-accent) 7%, var(--cs-surface));
  stroke: var(--st-prop); stroke-width: 1.6; stroke-dasharray: 7 5; }
.m-site.is-appr { stroke-dasharray: none; stroke-width: 2; }
.m-n { font: 500 13px var(--cs-font-display); fill: var(--cs-fg); }
.m-s { font: 400 11.5px var(--cs-font-body); fill: var(--cs-muted); }
.m-t { font: 500 9.5px var(--cs-font-body); fill: var(--cs-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.m-feat { cursor: pointer; }
.m-feat .m-hit { fill: transparent; }
.m-feat:hover rect, .m-feat:focus-visible rect { stroke: var(--cs-fg); stroke-width: 2.4; }
.m-feat.on rect { stroke: var(--cs-fg); stroke-width: 2.8; }
.cs-mapwrap.has-sel .m-feat:not(.on) { opacity: 0.45; }

/* ── shape: visibility strip ───────────────────────────────────────────────
   When each part of the story became public. */
.cs-vis { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-visrow { display: grid; grid-template-columns: 11rem repeat(6, minmax(0, 1fr));
  gap: 0 var(--cs-3); align-items: center; border-bottom: 1px solid var(--cs-border); padding-block: var(--cs-3); }
.cs-visrow .lb { font-size: 13px; color: var(--cs-fg-2); }
.cs-visrow .cellv { height: 10px; border-radius: 2px; background: var(--cs-border-soft); }
.cs-visrow .cellv.on { background: var(--st-built); }
.cs-visrow .cellv.part { background: var(--st-part); }
.cs-visrow .cellv.none { background: none; border: 1px dotted var(--cs-meta); }
.cs-vishead { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-muted); }
@media (max-width: 900px) {
  .cs-visrow { grid-template-columns: 1fr; gap: var(--cs-2); }
  .cs-visrow .cellv { height: 6px; }
}

/* ── open questions ────────────────────────────────────────────────────────
   Only questions capable of materially changing how the story is understood.
   Lower-order research gaps live in Inspect the Record. */
.cs-qs { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-q { border-top: 2px solid var(--cs-fg); padding: var(--cs-4) 0 var(--cs-5); }
.cs-q.important { border-top-width: 1px; border-top-color: var(--cs-fg-2); }
.cs-q.detail { border-top-width: 1px; border-top-color: var(--cs-border-soft); }
.cs-q .sig { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-accent); }
.cs-q.important .sig { color: var(--cs-fg-2); }
.cs-q.detail .sig { color: var(--cs-muted); }
.cs-q h3 { margin-top: var(--cs-2); font-size: 20px; letter-spacing: -0.012em; max-width: var(--cs-measure); }
.cs-q p { margin-top: var(--cs-3); font-size: 15px; line-height: 1.6; color: var(--cs-muted); max-width: var(--cs-measure); }
.cs-q .avail { margin-top: var(--cs-3); }

/* ── Inspect the record — the second mode of reading ───────────────────────── */
.cs-rec { background: var(--cs-fg); color: color-mix(in oklab, var(--cs-surface) 74%, var(--cs-fg));
  padding-block: clamp(48px, 5vw, 72px); }
.cs-rec h2, .cs-rec h3 { color: var(--cs-surface); }
.cs-rec .cs-chap .num { color: color-mix(in oklab, var(--cs-accent) 74%, var(--cs-surface)); }
.cs-rec .cs-chap .lbl { color: color-mix(in oklab, var(--cs-surface) 56%, var(--cs-fg)); }
.cs-rec .stand { color: color-mix(in oklab, var(--cs-surface) 74%, var(--cs-fg)); max-width: var(--cs-measure); }
.cs-rec h2 { max-width: var(--cs-measure-head); }
.cs-rec a { color: color-mix(in oklab, var(--cs-surface) 82%, var(--cs-fg)); text-decoration-color: color-mix(in oklab, var(--cs-surface) 30%, var(--cs-fg)); }
.cs-rec a:hover { color: var(--cs-surface); text-decoration-color: color-mix(in oklab, var(--cs-accent) 74%, var(--cs-surface)); }
/* The record list. A heading and the records under it — the reader came here
   to open documents, not to read a second account of them. The table this
   replaced carried "What it establishes" and a "Council record" chip on every
   row, which restated the group heading once per line. */
.cs-recgrp { margin-top: clamp(26px, 3.2vw, 36px); }
.cs-recgrp h3 { font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.01em; }
.cs-recgrp > p { margin-top: var(--cs-3); font-size: 14px; max-width: var(--cs-article);
  color: color-mix(in oklab, var(--cs-surface) 62%, var(--cs-fg)); }
.cs-reclist { list-style: none; margin: var(--cs-4) 0 0; padding: 0;
  border-top: 1px solid color-mix(in oklab, var(--cs-surface) 20%, var(--cs-fg)); }
.cs-reclist li { padding: var(--cs-3) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--cs-surface) 14%, var(--cs-fg)); }
.cs-reclist a, .cs-reclist > li > span:first-child { font-size: 15px; overflow-wrap: anywhere; }
/* The publisher and date, where the record's own title does not carry them.
   One quiet line, never a column. */
.cs-reclist .who { display: block; margin-top: 3px; font-size: 12.5px;
  color: color-mix(in oklab, var(--cs-surface) 52%, var(--cs-fg)); }
.cs-rec .s { color: color-mix(in oklab, var(--cs-surface) 62%, var(--cs-fg)); }
.cs-rec .s-built { color: color-mix(in oklab, var(--cs-success) 60%, var(--cs-surface)); }
.cs-rec .s-prop { color: color-mix(in oklab, var(--cs-accent) 74%, var(--cs-surface)); }

/* ── closing note ──────────────────────────────────────────────────────────── */
.cs-foot { margin-top: clamp(32px, 4vw, 48px); padding-top: var(--cs-5);
  border-top: 1px solid var(--cs-border); font-size: 14px; color: var(--cs-muted);
  max-width: var(--cs-measure-wide); }

/* ── motion and print ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .case-study *, .case-study *::before, .case-study *::after {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
  }
}
@media print {
  .cs-rail, .cs-railbar { display: none !important; }
  .case-study { background: #fff; color: #000; }
  .cs-rec { background: #fff; color: #000; }
  .cs-rec h2, .cs-rec h3, .cs-rec a, .cs-rectable td.what { color: #000; }
  .cs-sec { break-inside: avoid-page; }
  .cs-fate .body { display: block !important; }
}

/* ── shape: compact timeline ────────────────────────────────────────────────
   A few dated events that carry the origin, not a chronology dump — the full
   chronology belongs in Inspect the Record. */
.cs-tl { list-style: none; margin: clamp(28px, 3.4vw, 40px) 0 0; padding: 0;
  border-top: 2px solid var(--cs-fg); }
.cs-tl-item { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--cs-5);
  padding-block: var(--cs-4); border-bottom: 1px solid var(--cs-border); align-items: baseline; }
.cs-tl-item .d { font-family: var(--cs-font-mono); font-size: 12.5px; color: var(--cs-muted); }
.cs-tl-item.is-turn .d { color: var(--cs-accent); font-weight: 500; }
.cs-tl-item .t { font-family: var(--cs-font-display); font-size: 18px; letter-spacing: -0.012em; }
.cs-tl-item.is-turn .t { font-size: 21px; }
.cs-tl-item .x { margin-top: var(--cs-2); font-size: 14.5px; line-height: 1.55;
  color: var(--cs-muted); max-width: var(--cs-measure); }
.cs-tl-item .ev { margin-top: var(--cs-2); }
@media (max-width: 640px) {
  .cs-tl-item { grid-template-columns: 1fr; gap: var(--cs-2); }
}

/* ── shape: sites — where each proposal has reached ─────────────────────── */
.cs-sites { margin-top: clamp(28px, 3.4vw, 40px); border-top: 2px solid var(--cs-fg); }
.cs-site { padding: var(--cs-5) 0; border-bottom: 1px solid var(--cs-border); }
.cs-site-h { display: flex; align-items: baseline; gap: var(--cs-4); flex-wrap: wrap; }
.cs-site h3 { font-size: 21px; letter-spacing: -0.015em; }
.cs-site-who { margin-top: var(--cs-2); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-site-x { margin-top: var(--cs-3); font-size: 15px; line-height: 1.6;
  color: var(--cs-muted); max-width: var(--cs-measure); }
.cs-site .ev { margin-top: var(--cs-3); }
@media (max-width: 640px) {
  /* Site-state labels can be fuller than a phone's reading measure.  Unlike
     compact status chips elsewhere, these must wrap rather than widen the
     whole article (Gateway Island exposed this at 375px). */
  .cs-site-h .s { max-width: 100%; white-space: normal; align-items: flex-start; }
  .cs-site-h .s::before { margin-top: 0.6em; }
}

/* ── shape: claims — what people believe, what the record shows ──────────── */
.cs-claims { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-claim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(20px, 3vw, 48px); padding-block: var(--cs-5);
  border-top: 1px solid var(--cs-border); align-items: start; }
.cs-claim:first-child { border-top: 2px solid var(--cs-fg); }
.cs-claim-q { font-family: var(--cs-font-display); font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.35; letter-spacing: -0.012em; color: var(--cs-fg-2); }
.cs-claim-q::before { content: "\201C"; }
.cs-claim-q::after { content: "\201D"; }
.cs-claim-a p { font-size: 15px; line-height: 1.6; color: var(--cs-muted); }
.cs-claim-a .ev { margin-top: var(--cs-3); }
@media (max-width: 900px) { .cs-claim { grid-template-columns: 1fr; gap: var(--cs-3); } }

/* ── shape: public process ─────────────────────────────────────────────────── */
.cs-proc { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 var(--cs-6); }
.cs-proc-i { padding: var(--cs-4) var(--cs-4) var(--cs-5) 0; border-top: 2px solid var(--cs-fg-2); }
.cs-proc-i + .cs-proc-i { border-top-color: var(--cs-border-soft); }
.cs-proc-i .d { font-family: var(--cs-font-mono); font-size: 12px; color: var(--cs-accent); }
.cs-proc-i .t { margin-top: var(--cs-2); font-family: var(--cs-font-display); font-size: 17px; letter-spacing: -0.012em; }
.cs-proc-i .x { margin-top: var(--cs-3); font-size: 14px; line-height: 1.55; color: var(--cs-muted); }
.cs-proc-i .ev { margin-top: var(--cs-3); }

/* Version panels: JS hides all but one. Without JS every panel shows, which is
   the complete text rather than a broken control. */
.cs-lin-panels { display: grid; gap: var(--cs-5); }
.cs-lin-panels > [hidden] { display: none; }

/* ── narrow-viewport corrections ────────────────────────────────────────────
   Two things overflowed 375px and neither is fixed by a breakpoint alone.

   The authority matrix is deliberately wider than a phone — it is a matrix, and
   squashing six columns into 375px would destroy the comparison it exists to
   make. It scrolls inside its own container instead, so the page never does. */
.cs-net { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-net::after { content: ""; display: block; height: 1px; }

/* State chips are `nowrap` because a state is one or two words. The
   availability line in open questions uses the same component to carry a
   sentence ("Withheld · not released publicly"), which must be allowed to
   wrap rather than push the page sideways. */
.cs-q .avail .s { white-space: normal; align-items: flex-start; }
.cs-q .avail .s::before { margin-top: 0.6em; }

.cs-site-when { margin-top: var(--cs-2); font-size: 12px; color: var(--cs-meta); }

/* ══ hero band ═══════════════════════════════════════════════════════════════
   The photograph is regional context, not a picture of the precinct — it is
   the publication's own banner image, and its alt text says so. The gradient
   carries the title at full contrast over any part of it. */
.cs-band.has-photo {
  background-image:
    linear-gradient(100deg,
      color-mix(in oklab, var(--cs-fg) 90%, transparent) 0%,
      color-mix(in oklab, var(--cs-fg) 72%, transparent) 52%,
      color-mix(in oklab, var(--cs-fg) 46%, transparent) 100%),
    url("/static/img/bethanga-bridge-hero.jpg");
  background-size: cover;
  background-position: center 46%;
}
.cs-band.has-photo .cs-band-in { min-height: clamp(180px, 22vw, 280px); }

/* ══ strata ══════════════════════════════════════════════════════════════════
   Arrangements stack; the land sits under them all. */
.cs-strata { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-strata-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.cs-stratum { display: grid; grid-template-columns: 7.5rem 6px 1fr; gap: 0 var(--cs-5);
  align-items: stretch; padding-block: var(--cs-4); }
.cs-stratum + .cs-stratum { border-bottom: 1px dashed var(--cs-border-soft); }
.cs-stratum-when { font-family: var(--cs-font-mono); font-size: 12.5px; color: var(--cs-muted);
  padding-top: 2px; }
.cs-stratum-bar { background: var(--st-gone); border-radius: 3px; }
.cs-stratum.st-current .cs-stratum-bar { background: var(--st-prop); }
.cs-stratum.st-superseded .cs-stratum-bar { background: var(--st-gone); opacity: 0.55; }
.cs-stratum.st-delivered .cs-stratum-bar { background: var(--st-built); }
.cs-stratum-body h3 { font-size: 19px; letter-spacing: -0.012em; }
.cs-stratum-body .s { margin-top: var(--cs-2); }
.cs-stratum-body p { margin-top: var(--cs-2); font-size: 14.5px; line-height: 1.55;
  color: var(--cs-muted); max-width: var(--cs-measure); }
.cs-stratum-end { font-size: 13px; color: var(--st-gone); }
.cs-stratum-body .ev { margin-top: var(--cs-2); }
.cs-strata-ground { margin-top: var(--cs-2); padding-top: var(--cs-3);
  border-top: 3px solid var(--cs-fg); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-fg-2); }
@media (max-width: 640px) {
  .cs-stratum { grid-template-columns: 5px 1fr; gap: 0 var(--cs-4); }
  .cs-stratum-when { grid-column: 1 / -1; margin-bottom: var(--cs-2); }
}

/* ══ attrition ladder ════════════════════════════════════════════════════════
   Reached rungs are solid; unreached rungs stay as an open outline so the
   distance a proposal did not travel is as visible as the distance it did. */
.cs-attr { margin-top: clamp(28px, 3.4vw, 40px); }
.cs-attr-head, .cs-attr-row { display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--cs-1) var(--cs-2);
  align-items: center; }
.cs-attr-head { padding-bottom: var(--cs-2); border-bottom: 1px solid var(--cs-fg-2); }
.cs-attr-rung { font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cs-muted); text-align: center; }
.cs-attr-row { padding-block: var(--cs-4); border-bottom: 1px solid var(--cs-border); }
.cs-attr-label .nm { display: block; font-family: var(--cs-font-display); font-size: 17px;
  letter-spacing: -0.012em; line-height: 1.25; }
.cs-attr-label .stopped { display: block; margin-top: 3px; font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-muted); }
.cs-attr-cell { height: 12px; border-radius: 2px; background: var(--cs-border-soft); }
.cs-attr-cell.reached { background: var(--st-built); }
.cs-attr-cell.not-reached { background: none; border: 1px dotted var(--cs-meta); }
.cs-attr-cell.final { box-shadow: inset 0 0 0 2px var(--cs-fg); }
.cs-attr-note { grid-column: 1 / -1; margin-top: var(--cs-2); font-size: 14px;
  line-height: 1.55; color: var(--cs-muted); max-width: var(--cs-measure); }
@media (max-width: 640px) {
  .cs-attr-head { display: none; }
  .cs-attr-row { grid-template-columns: repeat(4, 1fr); }
  .cs-attr-label { grid-column: 1 / -1; }
}

/* ══ named division ══════════════════════════════════════════════════════════
   Two motions on one item, both divided. Reading them side by side is the
   point: the same seven names appear twice with the sides reversed. */
.cs-div { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.cs-div-motion { background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg); padding: var(--cs-5); border-top: 3px solid var(--cs-fg); }
.cs-div-motion.is-lost { border-top-color: var(--st-gone); }
.cs-div-motion.is-carried { border-top-color: var(--st-built); }
.cs-div-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-3); }
.cs-div-seq { font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cs-muted); }
.cs-div-outcome { font-family: var(--cs-font-display); font-size: 21px; letter-spacing: -0.015em; }
.is-lost .cs-div-outcome { color: var(--st-gone); }
.is-carried .cs-div-outcome { color: var(--st-built); }
.cs-div-text { margin-top: var(--cs-3); font-size: 15px; line-height: 1.55; color: var(--cs-fg-2); }
.cs-div-effect { margin-top: var(--cs-3); font-size: 14px; color: var(--cs-muted); }
.cs-div-sides { margin-top: var(--cs-5); display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--cs-4); border-top: 1px solid var(--cs-border-soft); padding-top: var(--cs-4); }
.cs-div-side-title { font-family: var(--cs-font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-div-side-title span { font-family: var(--cs-font-display); font-size: 15px; color: var(--cs-fg); }
.cs-div-side ul { list-style: none; margin: var(--cs-3) 0 0; padding: 0; }
.cs-div-side li { font-size: 14px; padding-block: 2px; }
.cs-div-side.for li { color: var(--cs-fg); }
.cs-div-side.against li { color: var(--cs-fg); }
.cs-div-side.for .cs-div-side-title { color: var(--st-built); }
.cs-div-side.against .cs-div-side-title { color: var(--st-gone); }
.cs-div-motion .ev { margin-top: var(--cs-4); }

/* caveats inside components: muted, smaller, never a chip */
.cs-cav { color: var(--cs-meta) !important; font-size: 13.5px !important; }
.cs-tl-era { display: block; padding: var(--cs-4) 0 var(--cs-2); border-bottom: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-fg-2); }
.cs-tl-era .sp { color: var(--cs-meta); letter-spacing: 0.04em; }
.cs-proc-i .ch { margin-top: 2px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-claim-q.is-vision::before, .cs-claim-q.is-vision::after { content: ""; }

/* constraints */
.cs-cons { margin-top: clamp(28px, 3.4vw, 40px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.cs-con { border-top: 3px solid var(--cs-fg-2); padding-top: var(--cs-4); }
.cs-con h3 { font-size: 19px; letter-spacing: -0.012em; }
.cs-con .st { margin-top: var(--cs-2); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-part); }
.cs-con p:not(.st) { margin-top: var(--cs-3); font-size: 14.5px; line-height: 1.6; color: var(--cs-muted); }
.cs-con .ev { margin-top: var(--cs-3); }

/* lineage table */
.cs-linegrid-wrap { margin-top: clamp(28px, 3.4vw, 40px); overflow-x: auto; max-width: 100%; }
.cs-linegrid { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.cs-linegrid th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cs-muted); border-bottom: 1px solid var(--cs-fg-2);
  padding: var(--cs-2) var(--cs-4) var(--cs-2) 0; }
.cs-linegrid td { padding: var(--cs-3) var(--cs-4) var(--cs-3) 0; vertical-align: top;
  border-bottom: 1px solid var(--cs-border); color: var(--cs-muted); line-height: 1.5; }
.cs-linegrid td.lead { font-family: var(--cs-font-display); font-size: 15.5px; color: var(--cs-fg); }

/* orientation facts: one hairline row under the finding, not a card grid */
.cs-orient { margin: clamp(24px, 3vw, 34px) 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--cs-5) var(--cs-8);
  border-top: 1px solid var(--cs-border-soft); padding-top: var(--cs-4); }
.cs-orient dt { font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cs-muted); }
.cs-orient dd { margin: var(--cs-2) 0 0; font-family: var(--cs-font-display); font-size: 18px;
  letter-spacing: -0.012em; color: var(--cs-fg); }
.cs-orient dd span { display: block; margin-top: 3px; font-family: var(--cs-font-body);
  font-size: 13px; color: var(--cs-muted); }

.cs-lane .lane-when { margin-top: var(--cs-2); font-family: var(--cs-font-mono);
  font-size: 12px; color: var(--cs-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Article layer — publication-baseline prose sections and their placed
   figures. Composes with the existing kit tokens; every colour is a token
   or a mix. The classes below are the full vocabulary the five article
   author scripts may use inside prose body_html.
   ══════════════════════════════════════════════════════════════════════════ */
/* The prose block spans the section so a placed figure can reach its own 78ch;
   every running-text child keeps the kit measure. */
.cs-prose { max-width: none; }
.cs-prose > p, .cs-prose > ul, .cs-prose > ol, .cs-prose > h3, .cs-prose > h4, .cs-prose > blockquote { max-width: var(--cs-article); }
.cs-prose > p { margin-block: 1em; line-height: 1.7; }
.cs-prose > p:first-child { margin-top: 0; }
.cs-prose .pull { font-family: var(--cs-font-display, Georgia, serif);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; max-width: 46ch;
  border-left: 3px solid var(--cs-accent, #c96442); padding-left: 20px;
  margin-block: 1.6em; }
.cs-prose .qsrc { display: block; font-size: 13px; color: var(--cs-muted, #5e5d59);
  margin-top: 8px; font-family: var(--cs-font-body, sans-serif); }

/* A figure that may exceed the prose measure. */
/* `margin-block` alone leaves the browser's own 40px on a figure's left and
   right, so every figure sat inset from the paragraphs around it. The
   72ch cap hid that on a wide screen and not on a phone, where it cost the
   number strips a fifth of their width. */
.cs-afig { margin: clamp(28px, 4vw, 44px) 0; max-width: var(--cs-article); }
.cs-afig > figcaption { margin-top: 12px; font-size: 14px;
  color: var(--cs-muted, #5e5d59); max-width: 62ch; line-height: 1.55; }
.cs-afig .warn { color: var(--cs-fg-2, #3d3d3a); font-weight: 600; }

/* Number cluster: paired promoted values with labels. */
.cs-numgrid { display: grid; gap: 20px 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cs-num b { display: block; font-family: var(--cs-font-display, Georgia, serif);
  font-weight: 500; font-size: clamp(22px, 3vw, 32px);
  font-variant-numeric: tabular-nums; }
.cs-num span { display: block; font-size: 13px; color: var(--cs-muted, #5e5d59);
  line-height: 1.45; margin-top: 2px; }
.cs-num small { display: block; font-size: 12px; color: var(--cs-meta, #87867f);
  margin-top: 3px; }

/* Two-block comparison panel; stacks under 640px. */
.cs-panelpair { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.cs-panelpair > div { border-top: 2px solid var(--cs-accent, #c96442);
  padding-top: 12px; }
.cs-panelpair h3, .cs-panelpair h4 { font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.cs-panelpair ul { list-style: none; padding: 0; margin: 0; }
.cs-panelpair li { padding-block: 5px; font-size: 15px; line-height: 1.5;
  border-bottom: 1px solid var(--cs-border, #e8e6dc); }
.cs-panelpair li:last-child { border-bottom: 0; }
.cs-panelpair li b { font-variant-numeric: tabular-nums; }

/* Compact event strip: horizontal on desktop, vertical under 900px. */
.cs-tlstrip { list-style: none; padding: 0; margin: 0; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; }
.cs-tlstrip li { border-top: 2px solid var(--cs-fg, #141413); padding-top: 10px; }
.cs-tlstrip .d { font-family: var(--cs-font-mono, monospace); font-size: 13px;
  font-weight: 600; display: block; }
.cs-tlstrip .e { font-size: 14px; line-height: 1.5; display: block; margin-top: 4px; }
.cs-tlstrip li.is-anchor { border-top-color: var(--cs-accent, #c96442); }

/* Status-labelled site/place cards. The written status word is mandatory. */
.cs-sitecards { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs-sitecard { border: 1px solid var(--cs-border, #e8e6dc); padding: 14px 16px;
  background: var(--cs-surface, #faf9f5); }
.cs-sitecard h3, .cs-sitecard h4 { font-size: 15px; font-weight: 600; }
.cs-sitecard .st { display: inline-block; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600; margin-top: 6px;
  border-bottom: 2px solid var(--cs-accent, #c96442); padding-bottom: 1px; }
.cs-sitecard p { font-size: 13.5px; color: var(--cs-muted, #5e5d59);
  line-height: 1.5; margin-top: 8px; }

/* Commitment → expected return → public-record result rows. */
.cs-commit { list-style: none; padding: 0; margin: 0; }
.cs-commit li { display: grid; gap: 6px 20px; grid-template-columns: 1.2fr 1fr 1fr;
  padding-block: 12px; border-bottom: 1px solid var(--cs-border, #e8e6dc);
  font-size: 14.5px; line-height: 1.5; }
.cs-commit li:first-child { border-top: 1px solid var(--cs-border, #e8e6dc); }
.cs-commit .r { color: var(--cs-fg-2, #3d3d3a); font-weight: 600; }

/* Proportional one-bar breakdown; each segment labelled in text below. */
.cs-propbar { display: flex; height: 16px; overflow: hidden; }
.cs-propbar i { display: block; height: 100%;
  background: color-mix(in srgb, var(--cs-fg, #141413) 40%, var(--cs-bg, #f5f4ed)); }
.cs-propbar i:nth-child(odd) {
  background: color-mix(in srgb, var(--cs-fg, #141413) 62%, var(--cs-bg, #f5f4ed)); }
.cs-propbar i.hi { background: var(--cs-accent, #c96442); }
.cs-proplegend { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13.5px; }
.cs-proplegend li { display: flex; justify-content: space-between; gap: 12px;
  padding-block: 3px; }
.cs-proplegend b { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .cs-tlstrip { grid-auto-flow: row; }
  .cs-commit li { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cs-panelpair { grid-template-columns: 1fr; }
}