/* ==========================================================================
   Wodonga Wire — Site Foundation
   The canonical outer design system, extracted from the Case Study Kit
   (case-study-kit, build 2026-08-11) per docs/design/WODONGA_WIRE_SITE_FOUNDATION.md.

   SCOPE. This stylesheet is the foundation families' canvas: context
   rail, compact contextual navigation, canvas frame, evidence grammar and
   dark record region. The publication shell — the tokens the frame needs
   (type faces and the motion floor included), ground, container, masthead,
   primary navigation, skip link, shell focus, the identity band and the
   footer — is app/static/css/publication.css, loaded before this file by
   every base template (D-065, D-069). A foundation page
   loads this file INSTEAD of site.css, never alongside it.

   RULES CARRIED FROM THE KIT — not stylistic, do not relax:

   1. No raw hex outside the :root token blocks. Everything below them is a
      token or a color-mix of tokens; that is what makes the dark record
      layer work.
   2. Three breakpoints only — 640, 900, 1100. The kit template's 1500px
      rail switch is deliberately NOT inherited: measured in the rendered
      kit, the fixed gutter rail overlaps the content column by up to 58px
      between 1500 and 1664px. The foundation rail is an in-flow sticky
      column instead, switching at 1100 (see "context rail" below).
   3. Every state is triple-encoded — colour, line style, and a written
      word. Nothing depends on colour alone; the page must read correctly
      in greyscale.
   4. Four text measures. Do not introduce a fifth.
   5. Availability is a fact about the record, never about our retrieval:
      withheld · on the public record · no record located.
   ========================================================================== */

:root {
  /* Ground, ink, accent, type faces, the base type sizes, spacing, --radius-sm,
     the focus ring, motion and the container metric are the publication
     shell's tokens (publication.css). Only the canvas-specific values live here. */
  --success: #17a34a;
  --warn: #eab308;
  --danger: #b53333;

  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 52px;
  --text-4xl: 64px;

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}

/* Derived working values. Nothing new is invented — each is a mix of the
   tokens above. */
:root {
  --measure: 62ch;        /* running prose */
  --measure-tight: 46ch;  /* captions, notes inside components */
  --measure-wide: 78ch;   /* single full-width statements */
  --measure-head: 22ch;   /* headings */

  --st-built:      color-mix(in oklab, var(--success) 72%, var(--fg));
  --st-built-wash: color-mix(in oklab, var(--success) 12%, var(--surface));
  --st-prop:       var(--accent-active);
  --st-prop-wash:  color-mix(in oklab, var(--accent) 10%, var(--surface));
  --st-gone:       color-mix(in oklab, var(--meta) 60%, var(--fg));
  --st-gone-wash:  color-mix(in oklab, var(--meta) 9%, var(--surface));
  --st-part:       color-mix(in oklab, var(--warn) 58%, var(--fg));
  --st-part-wash:  color-mix(in oklab, var(--warn) 14%, var(--surface));
  --st-unk:        var(--muted);

  --rail-w: 208px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  line-height: var(--leading-tight); text-wrap: balance;
}
p { margin: 0; }
a { color: var(--fg-2); text-underline-offset: 3px; text-decoration-color: var(--border-soft); }
a:hover { color: var(--fg); text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; }
/* The motion floor (publication.css): feedback is a colour that changes,
   never a thing that moves. */
a, button, summary { transition: var(--transition-feedback); }
svg { max-width: 100%; }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── evidence + 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. Never colour alone; never a seventh state. */
.s {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted);
}
.s::before { content: ""; width: 14px; border-top: 3px solid currentColor; flex: none; }
.s-built { color: var(--st-built); }
.s-prop  { color: var(--st-prop); }
.s-prop::before { border-top-style: dashed; }
.s-gone  { color: var(--st-gone); }
.s-gone::before { border-top-style: dotted; }
.s-part  { color: var(--st-part); }
.s-part::before { border-top-style: dashed; }
.s-unk   { color: var(--st-unk); }
.s-unk::before { border-top-style: dotted; opacity: 0.6; }
.s-fact  { color: var(--fg); }
.s.wraps { white-space: normal; align-items: flex-start; }
.s.wraps::before { margin-top: 0.55em; }

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

/* ── identity banner ──────────────────────────────────────────────────────
   Lives in publication.css since D-069: the band is the page-entry grammar
   every family enters through, so the shell carries it and both base
   templates can render identity_banner(). Nothing about it is redefined
   here. */

/* ── context rail + compact contextual navigation ─────────────────────────
   One navigation, two compositions, never both at once and never a third.

   RESOLVED BREAKPOINT RULE. The kit's written scale is 640/900/1100; its
   template switched the rail at 1500px as a fixed overlay in the left
   gutter, which overlaps the content column between 1500 and 1664px. The
   foundation resolves this: the rail is an in-flow sticky column inside the
   container, present from 1100px up; below 1100 the same destinations
   recompose into a sticky horizontally scrollable bar. No fourth
   breakpoint, no overlay geometry. */
.wf-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.wf-canvas { min-width: 0; }

.wf-rail { display: none; }

/* ── family navigation ─────────────────────────────────────────────────────
   The pages of one family, one row directly under the band (the Numbers
   subjects), in the grammar of the section links on Projects & Consultations
   (site.css .secnav): the container's width, natural-width items, a 46px
   row on a hairline, the current page in a heavier weight on the accent
   underline. Where the
   ten titles do not fit it scrolls sideways under a fade rather than
   shrinking or wrapping. */
/* The family row is the family's local row: it sticks directly under the
   masthead (publication.css --mast-h), one step below it in the paint order,
   on an opaque ground, so the two rows move as one stacked header once the
   band has scrolled away. shell.js measures its height into --local-h. */
.wf-famnav { border-bottom: 1px solid var(--border-soft); background: var(--bg);
  position: sticky; top: var(--mast-h); z-index: 29; }
.wf-famnav-in { display: flex; align-items: stretch; gap: 0; min-height: 46px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -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); }
.wf-famnav-in::-webkit-scrollbar { display: none; }
.wf-famnav-in::after { content: ""; flex: none; width: 2.5rem; }
.wf-famnav a { flex: none; display: inline-flex; align-items: center; min-height: 46px;
  padding: 0 0.7rem; text-decoration: none; white-space: nowrap;
  font-size: 0.84rem; font-weight: 500; line-height: 1; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.wf-famnav a:first-child { padding-left: 0; }
.wf-famnav a:hover { color: var(--fg); border-bottom-color: var(--border-soft); }
.wf-famnav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.wf-famnav a:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

/* The compact bar is local navigation too, and scrolls with the page. */
.wf-subnav { background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.wf-subnav-in { display: flex; align-items: center; gap: var(--space-5);
  padding-block: 0; overflow-x: auto; scrollbar-width: none;
  /* The bar overflows sideways on most phones and some laptops. The fade
     says so; the trailing spacer lets the last destination 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); }
.wf-subnav-in::-webkit-scrollbar { display: none; }
.wf-subnav-in::after { content: ""; flex: none; width: 2.5rem; }
.wf-subnav a { flex: none; text-decoration: none; font-size: 13px; line-height: 1.2; color: var(--muted);
  padding: 0; border-bottom: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.wf-subnav a.on { color: var(--fg); border-bottom-color: var(--accent); }
.wf-subnav .cap { flex: none; font-size: 11px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
/* Inside the scroller the ring would be clipped; draw it inset. */
.wf-subnav a:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

@media (min-width: 1100px) {
  .wf-shell.has-rail {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  /* Sticky within the page's own scroll and never a scroller of its own: a
     rail that fits the viewport follows the reader; one that would not fit
     (a very short window) simply stays in the flow (foundation.js adds
     .is-static). Short topic labels keep it far inside a laptop screen. */
  .wf-rail {
    display: block; position: sticky; top: calc(var(--chrome-h) + var(--space-6));
    /* Top padding matches .wf-sec so the rail's cap aligns with the first
       section's kicker. */
    padding-block: clamp(40px, 4vw, 58px) var(--space-6);
  }
  .wf-rail.is-static { position: static; }
  .wf-rail .cap { font-size: 12px; font-weight: 600; color: var(--fg-2);
    margin-bottom: var(--space-3); display: block; }
  .wf-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-soft); }
  .wf-rail a {
    display: block; padding: 4px 0 4px 14px; margin-left: -1px;
    border-left: 2px solid transparent; text-decoration: none;
    font-size: 13px; line-height: 1.3; color: var(--muted);
    transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
  }
  .wf-rail a:hover { color: var(--fg-2); }
  .wf-rail a.on { color: var(--fg); border-left-color: var(--accent); font-weight: 500; }
  .wf-subnav { display: none; }
}

/* An in-page jump clears the sticky stack; the offset is the shell's
   (publication.css scroll-padding-top), which reads --chrome-h. */

/* ── canvas rhythm ────────────────────────────────────────────────────────
   The canvas belongs to each page family. The foundation supplies only
   vertical rhythm, hairline separation and the four measures — no chapter
   numbering, no mandated header geometry, no default card grid. */
.wf-sec { padding-block: clamp(40px, 4vw, 58px); }
.wf-sec + .wf-sec { border-top: 1px solid var(--border-soft); }
.wf-sec > h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; max-width: var(--measure-head); }
.wf-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--space-3); }
.stand { margin-top: var(--space-5); max-width: var(--measure); font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55; color: var(--fg-2); }
.note { margin-top: var(--space-4); max-width: var(--measure); color: var(--muted); font-size: 15px; }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }
.measure-wide { max-width: var(--measure-wide); }

/* Wide content scrolls inside its own container; the page never scrolls
   horizontally. Tables and maps live inside this. */
.wf-overflow { overflow-x: auto; }
.wf-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.wf-table th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--fg-2);
  padding: var(--space-2) var(--space-4) var(--space-2) 0; }
.wf-table td { border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4) var(--space-3) 0;
  vertical-align: top; }

/* ── provenance ───────────────────────────────────────────────────────────
   A source line is a list of sources. Title is the link; publisher and date
   sit beside it; nothing else lives here. One block per section, never per
   claim. */
.src { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); max-width: var(--measure-wide); }
.src-h { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--space-2); }
.src ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0 var(--space-6); }
.src li { padding-block: 3px; font-size: 12.5px; line-height: 1.5; }
.src li + li::before { content: "\00B7  "; color: var(--muted); margin-right: var(--space-1); }
.src li span::before { content: " \00B7 "; color: var(--muted); }
.src li a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--border-soft); }
.src li a:hover { color: var(--fg); text-decoration-color: var(--accent); }
.src li span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.src li, .src li a { display: inline; }

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

/* ── dark record region ───────────────────────────────────────────────────
   A strongly differentiated evidence surface. The foundation supplies the
   surface and its typography; what a family puts inside it — a register, a
   table, source rows beside records — is the family's own. */
.wf-record { background: var(--fg); color: var(--on-dark); padding-block: clamp(48px, 5vw, 72px); }
.wf-record h2 { color: var(--surface); font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em;
  max-width: var(--measure-head); }
.wf-record .wf-kicker { color: var(--on-dark-quiet); }
.wf-record .stand { color: var(--on-dark); }
.wf-record .note { color: var(--on-dark-quiet); }
.wf-record a { color: var(--dark-accent); text-decoration-color: var(--dark-border); }
.wf-record a:hover { color: var(--surface); text-decoration-color: var(--dark-accent); }
.wf-record .src { border-top-color: var(--dark-border); }
.wf-record .src-h, .wf-record .src li span, .wf-record .src li + li::before { color: var(--on-dark-quiet); }
.wf-record .src li a { color: var(--dark-accent); text-decoration-color: var(--dark-border); }
.wf-record .wf-table th { color: var(--on-dark-quiet); border-bottom-color: var(--on-dark-quiet); }
.wf-record .wf-table td { border-bottom-color: var(--dark-border); }

/* The state and provenance grammar on the dark surface. The light-surface
   state colours are mixes toward the ink, so they disappear here; they are
   remixed toward the surface instead. Line style and word are untouched, so
   the triple encoding survives on both surfaces. */
.wf-record .s { color: var(--on-dark-quiet); }
.wf-record .s-built { color: color-mix(in oklab, var(--success) 62%, var(--surface)); }
.wf-record .s-prop  { color: color-mix(in oklab, var(--accent) 74%, var(--surface)); }
.wf-record .s-gone  { color: color-mix(in oklab, var(--meta) 55%, var(--surface)); }
.wf-record .s-part  { color: color-mix(in oklab, var(--warn) 70%, var(--surface)); }
.wf-record .s-unk   { color: var(--on-dark-quiet); }
.wf-record .s-fact  { color: var(--surface); }
.wf-record .ev { color: var(--on-dark-quiet); }
.wf-record .ev::before { color: var(--on-dark); }
.wf-record .missing { border-top-color: var(--on-dark-quiet); }
.wf-record .missing-h { color: var(--on-dark-quiet); }
.wf-record .missing li { border-top-color: var(--dark-border); }
.wf-record .missing li b { color: var(--surface); }
.wf-record .missing li span { color: var(--on-dark-quiet); }

/* ── motion + print ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}
/* Forced colours drop box-shadows, which carry the ring. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}
@media print {
  .wf-rail, .wf-subnav, .wf-famnav { display: none; }
  body { font-size: 10.5pt; }
  .wf-record { background: none; color: var(--muted); }
  .wf-record h2 { color: var(--fg); }
  .wf-sec { break-inside: avoid; }
}

/* --------------------------------------------------------- home page */
/* The front door: the band, the introduction, the Council Record's
   Latest/Next strip, then two sets of ways in drawn as editorial plates
   (publication.css .wf-plate) — the five destinations and the five case
   studies, each a quiet row of five. It is not a dashboard and not a
   preview: a picture, a title and one line each. The pictures are
   illustrations, and the page says so under the last row. */
/* The introduction spans the section width, the same edges as the rows
   below it; the longer measure is deliberate here. */
.home-lede { font-size: var(--text-lg); line-height: var(--leading-body); }
.home-lede + .home-lede { margin-top: var(--space-4); }
/* Scoped so it outranks `.wf-sec > h2` (0,1,1): Home's section headings sit
   under the band title, not above it. */
.wf-sec > .home-h { font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-xl); margin-bottom: var(--space-5); }
/* The strip's eyebrow and the case studies' eyebrow are links to the
   section they name, in the kicker's own colour. */
.home-meetings > .wf-kicker a, .home-cases > .wf-kicker a { color: inherit; text-decoration: none; }
.home-meetings > .wf-kicker a:hover, .home-cases > .wf-kicker a:hover { color: var(--fg); }
.home-meetings > .wf-kicker { margin-bottom: var(--space-2); }

/* The front door's photograph band: taller than the kit's 189px text band,
   well short of July's 480px hero — an identity band, not a promotion. The
   height is the band's, never the image's. */
.wf-band--home .wf-band-in { min-height: clamp(232px, 24vw, 340px); }
/* On Home the kicker is the publication's name, so it reads as one: larger
   than any other band's kicker, in the same accent. The title is the
   publication's line, set to break between its two sentences. */
.wf-band--home .kicker { font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; letter-spacing: 0.16em; }
.wf-band--home h1 { max-width: 24ch; }
/* The photograph's caption and credit take the shell's own place for them:
   the right foot of the band, right-aligned, on the same baseline as the
   title (publication.css .wf-band-in). That corner crosses the brightest part
   of the bridge, so both lines carry the credit's soft ink shadow, and the
   credit wraps at a measure rather than running the width of the band.
   Below 640px the shell wraps the block under the title, left-aligned. */
.wf-band--home .wf-band-in { row-gap: var(--space-5); }
.wf-band--home .band-aside { max-width: 36ch; }
.wf-band--home .band-aside .band-meta { text-shadow: 0 1px 2px color-mix(in oklab, var(--fg) 70%, transparent); }

/* A plate, a title and a line. The title is the link; its ::after covers the
   whole entry so the picture is part of the target, and the ring is drawn
   round the whole entry. Feedback is colour only. */
.home-way, .home-case { position: relative; min-width: 0; }
.home-way h3 a, .home-case h3 a { color: var(--fg); text-decoration: none; }
.home-way h3 a::after, .home-case h3 a::after { content: ""; position: absolute; inset: 0; }
.home-way h3 a:focus-visible, .home-case h3 a:focus-visible { box-shadow: none; }
.home-way h3 a:focus-visible::after, .home-case h3 a:focus-visible::after { box-shadow: var(--focus-ring); }
.home-way:hover h3 a, .home-case:hover h3 a { color: var(--accent-active); }
.home-way .wf-plate img, .home-case .wf-plate img { transition: border-color var(--motion-fast) var(--ease-standard); }
.home-way:hover .wf-plate img, .home-case:hover .wf-plate img { border-color: var(--muted); }

/* Where to start: five across a desktop, then a picture beside its words. */
.home-ways-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.home-way h3 { margin-top: var(--space-3); font-size: var(--text-lg); line-height: 1.2; }
.home-way p { margin-top: var(--space-2); font-size: 15px; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 1100px) {
  .home-ways-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
  .home-way { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    column-gap: var(--space-4); align-content: start; }
  .home-way > .wf-plate { grid-row: 1 / span 2; }
  .home-way h3 { margin-top: 0; }
}
@media (max-width: 640px) {
  .home-ways-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .home-way { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); }
}

/* Case studies: all five, in one compact row on the same five columns as
   Where to start, so neither set outranks the other. The picture is the
   same width as a destination's; the title and line sit a size down. */
.home-cases-row { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.home-case h3 { margin-top: var(--space-3); font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; }
.home-case p { margin-top: var(--space-1); font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.home-note { margin-top: clamp(28px, 3.4vw, 40px); font-size: 13px; color: var(--meta); }
@media (max-width: 1100px) {
  .home-cases-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
  .home-case { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    column-gap: var(--space-4); align-content: start; }
  .home-case > .wf-plate { grid-row: 1 / span 2; }
  .home-case h3 { margin-top: 0; }
}
@media (max-width: 640px) {
  .home-cases-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .home-case { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); }
}

/* ------------------------------------------------ case studies index */
/* The five studies introduce the section themselves: a plate on the left,
   the title and its one line on the right, on the foundation's hairlines.
   The row of names under the band is publication.css .cs-family. */
.cs-index { list-style: none; margin: 0; padding: 0; }
.cs-index-row { --plate-w: 280px; position: relative; align-items: center;
  padding-block: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-soft); }
.cs-index-row:first-child { border-top: 0; padding-top: 0; }
.cs-index-row h2 { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 30px); max-width: 30ch; }
.cs-index-row h2 a { color: inherit; text-decoration: none; }
.cs-index-row h2 a::after { content: ""; position: absolute; inset: 0; }
.cs-index-row h2 a:focus-visible { box-shadow: none; }
.cs-index-row h2 a:focus-visible::after { box-shadow: var(--focus-ring); }
.cs-index-row:hover h2 a { color: var(--accent-active); }
.cs-index-row .wf-plate img { transition: border-color var(--motion-fast) var(--ease-standard); }
.cs-index-row:hover .wf-plate img { border-color: var(--muted); }
.cs-index-deck { margin-top: var(--space-3); max-width: var(--measure); font-size: var(--text-lg);
  color: var(--fg-2); line-height: 1.5; }
.cs-index-date { margin-top: var(--space-3); font-family: var(--font-mono);
  font-size: 12px; color: var(--meta); }
@media (max-width: 640px) {
  .cs-index-row { align-items: start; }
  .cs-index-row h2 { font-size: 20px; }
  .cs-index-deck { margin-top: var(--space-2); font-size: 15px; }
}