/* Cancel Clankers — compiled stylesheet bundle
 *
 * Single-file bundle of tokens + base + components + pages, produced
 * by build/bundle-css.sh. Edit the source files in assets/css/, not
 * this file. Re-run bundle-css.sh and re-upload to Ghost to ship.
 *
 * Bundled: 2026-05-29T16:39:52Z
 */


/* ============================================================
 * tokens.css
 * ============================================================ */

/* Cancel Clankers — design tokens
 *
 * Locked from Brand Guide v2.5 (2026-04-29) and Wireframe v1.
 * If you're tempted to add a color or font outside this file, stop.
 * Edit here, document the why, and propagate.
 *
 * AI-slop guardrails baked in (see feedback_no_ai_slop.md):
 *   - Headlines are ONE typeface, ONE color across the whole phrase.
 *   - Never accent a single word inside a headline with a different color
 *     or font. No <em>-as-shimmer.
 *   - Rye is for stamps, signoffs, and standalone tagline beats.
 *     Use .stamp / .signoff utility classes — never under a hero headline.
 *   - No gradient text, no drop-shadowed accent words, no randomized
 *     letter-spacing flourishes.
 */

:root {
  /* ---- color · blood / bone / ink ---------------------------------- */

  --spilled-red: #7A1818;   /* primary red — buttons, stamps, accents     */
  --bone:        #EFE6CE;   /* dominant background — paper                */
  --bone-pulp:   #DDD0AC;   /* deeper bone — quiet panels, dividers       */
  --ink:         #0E0C0A;   /* near-black — type, marks, hard rules       */
  --iron:        #B14C20;   /* rust accent — sparingly, for emphasis      */
  --smoke:       #3F3A33;   /* warm gray — meta, captions, secondary type.
                               9.2.0: darkened from #5A554C (~5.5:1 on bone)
                               to #3F3A33 (~9.1:1 on bone). Reads under the
                               paper-grain texture without losing the
                               "secondary" feel — mono labels still feel
                               quieter than ink because of the uppercase +
                               letter-spacing treatment, not color alone.
                               Do not lighten back without a contrast test
                               against bone + paper-grain. */

  /* Aliases used inside components — keep semantic */
  --bg:          var(--bone);
  --bg-alt:      var(--bone-pulp);
  --bg-inverse:  var(--ink);
  --fg:          var(--ink);
  --fg-inverse:  var(--bone);
  --accent:      var(--spilled-red);
  --accent-alt:  var(--iron);
  --muted:       var(--smoke);

  /* ---- type · system ----------------------------------------------- */

  /* Display: Anton (condensed sans, the dominant brand voice).
     Body: Inter (American grotesque, neutral, hard-working).
     Mono: JetBrains Mono (data, meta, stamps small print).
     Display-script: Rye (woodblock — RESERVED, see usage rules above). */

  --font-display: "Anton", "Oswald", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-rye:     "Rye", "Rockwell", Georgia, serif;

  /* Ghost custom-font hooks. Ghost admin's font picker (Settings →
     Design → Typography) overrides these variables if used. The
     theme defaults them to the brand fonts so the locked typography
     stands when admin doesn't touch them. Don't route the rest of
     the theme through these aliases — keep declarations on
     --font-display / --font-body so the brand tokens stay the
     authoritative source. */
  --gh-font-heading: var(--font-display);
  --gh-font-body:    var(--font-body);

  /* ---- type · scale (mobile-first; clamps to desktop) ------------- */

  --type-h1:    clamp(3.25rem, 8vw + 0.5rem, 7.5rem);
  --type-h2:    clamp(2.25rem, 5vw + 0.5rem, 4.75rem);
  --type-h3:    clamp(1.625rem, 2.5vw + 0.75rem, 2.75rem);
  --type-h4:    clamp(1.25rem, 1.4vw + 0.85rem, 1.75rem);
  --type-lede:  clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --type-body:  1.0625rem;
  --type-small: 0.9375rem;
  --type-xs:    0.8125rem;
  --type-pull:  clamp(1.75rem, 2.5vw + 1rem, 2.5rem);

  /* ---- spacing scale (4px base) ----------------------------------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

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

  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* ---- borders / strokes ------------------------------------------ */

  --rule-thin: 1px solid var(--ink);
  --rule:      2px solid var(--ink);
  --rule-bold: 4px solid var(--ink);
  --rule-red:  2px solid var(--spilled-red);

  /* ---- motion ------------------------------------------------------ */

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  220ms;

  /* ---- paper grain · inline SVG noise ----------------------------- */
  /* Used as background-image on <html>. Subtle — adds tactility without
     screaming. Bone-tinted, low alpha, deterministic. */

  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.055   0 0 0 0 0.047   0 0 0 0 0.039   0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- prefers-reduced-motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ============================================================ *
 * Utility classes — typography
 * ============================================================ */

/* Display headlines. ONE color, ONE typeface across the phrase. Use the
   color modifier on the headline element, never on a child word. */

.display     { font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.display-xl  { font-size: var(--type-h1); }
.display-l   { font-size: var(--type-h2); }
.display-m   { font-size: var(--type-h3); }
.display-s   { font-size: var(--type-h4); }

/* Color modifiers — apply to the WHOLE headline element. */
.fg-ink   { color: var(--ink); }
.fg-bone  { color: var(--bone); }
.fg-red   { color: var(--spilled-red); }
.fg-iron  { color: var(--iron); }
.fg-smoke { color: var(--smoke); }

/* Background fills */
.bg-bone     { background-color: var(--bone); }
.bg-bone-pulp{ background-color: var(--bone-pulp); }
.bg-ink      { background-color: var(--ink); color: var(--bone); }
.bg-red      { background-color: var(--spilled-red); color: var(--bone); }

/* Mono — meta lines, stamp small print, issue numbers. */
.mono { font-family: var(--font-mono); font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.08em; }

/* Rye · WOODBLOCK SCRIPT.
   Permitted uses: .stamp, .signoff, .tagline-beat (standalone lines).
   Forbidden uses: inside hero headlines, accenting individual words
   inside otherwise-Anton phrases, anywhere the AI-slop rules call out.
   The .rye class itself is intentionally bare — combine with one of
   the permitted layout classes below so review is grep-able. */
.rye { font-family: var(--font-rye); font-weight: 400; }

.stamp {
  font-family: var(--font-rye);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--spilled-red);
  display: inline-block;
}
.signoff {
  font-family: var(--font-rye);
  font-size: var(--type-h4);
  color: var(--ink);
  text-align: center;
}
.tagline-beat {
  font-family: var(--font-rye);
  font-size: var(--type-h3);
  color: var(--spilled-red);
  text-align: center;
}

/* ============================================================ *
 * Utility classes — buttons
 * ============================================================ */

/* Single button system. Modifiers stack. No "primary/secondary/tertiary"
   layered ladder — we have two buttons: solid (red on bone) and outline.
   The dark variant flips for dark surfaces. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  border: 2px solid currentColor;
  background: var(--spilled-red);
  color: var(--bone);
  border-color: var(--spilled-red);
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.btn-on-dark { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-on-dark:hover { background: var(--spilled-red); color: var(--bone); border-color: var(--spilled-red); }

.btn-large { padding: var(--space-4) var(--space-6); font-size: 1.375rem; }
.btn-block { width: 100%; }

/* ============================================================ *
 * Form controls — base
 * ============================================================ */

.field {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bone);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  border-radius: 0;
  appearance: none;
}
.field::placeholder { color: var(--smoke); }
.field:focus { outline: 2px solid var(--spilled-red); outline-offset: 0; }


/* ============================================================
 * base.css
 * ============================================================ */

/* Cancel Clankers — base layer
 *
 * Reset, document defaults, typography baseline, layout primitives.
 * Tokens are already declared in tokens.css; this layer USES them.
 */

/* ---- modern reset ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

/* ---- document -------------------------------------------------------- */

html {
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bone);
  background-image: var(--paper-grain);
  background-attachment: fixed;
  background-size: 240px 240px;
}

body {
  min-height: 100vh;
  font-feature-settings: "kern", "liga", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- accessibility --------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--spilled-red);
  outline-offset: 3px;
}

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-sm { --stack-gap: var(--space-2); }
.stack-md { --stack-gap: var(--space-4); }
.stack-lg { --stack-gap: var(--space-6); }
.stack-xl { --stack-gap: var(--space-8); }

/* ---- typography defaults --------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }

/* Paragraph defaults — 9.2.0 cascade fix.
   Reasoning: the modern reset above zeroes p margins for layout
   control, but the consequence was that every page CSS had to
   re-add paragraph rhythm by hand, and several of them landed
   tight or forgot. These defaults establish:
     - generous 1.65 line-height for body reading
     - 1.5rem bottom margin so untouched <p> stacks correctly
     - explicit ink color to prevent inheritance drift to lighter
       surrounding tones (smoke, bone-pulp on alt slabs)
   Components that use adjacency rhythm (.prose, .stack) override
   below to keep their model intact. */
p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink);
  max-width: 64ch;
  margin-bottom: var(--space-5);
}
p:last-child { margin-bottom: 0; }

/* .prose and .stack manage spacing via adjacency (* + *), so the
   bottom-margin model above would double up. Kill bottom margin
   inside those contexts and let the adjacency rule own rhythm. */
.prose p, .stack p { margin-bottom: 0; }

.lede { font-size: var(--type-lede); line-height: 1.45; max-width: 56ch; }

a.inline-link {
  color: var(--spilled-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a.inline-link:hover { color: var(--ink); }

hr.rule {
  border: 0;
  height: 2px;
  background: var(--ink);
  margin-block: var(--space-6);
}

/* ---- selection ------------------------------------------------------- */

::selection {
  background: var(--spilled-red);
  color: var(--bone);
}

/* ---- prose body (Dispatch issues, manifesto, page bodies) ----------- */

.prose {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink);
}
/* 9.2.0: bumped from space-4 (1rem) to space-5 (1.5rem) so Dispatch
   body and other long-form prose reads at editorial cadence instead
   of feeling cramped. Headings inside .prose carry their own larger
   top margins below. */
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-7); font-size: var(--type-h3); }
.prose h3 { margin-top: var(--space-5); font-size: var(--type-h4); }
.prose blockquote {
  border-left: 4px solid var(--spilled-red);
  padding-left: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-pull);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.4em; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bone-pulp);
  padding: 0.1em 0.35em;
}


/* ============================================================
 * components.css
 * ============================================================ */

/* Cancel Clankers — components layer
 *
 * Reusable UI: site-header, site-footer, marks, cards, stamps, forms.
 * Each section is BEM-flavored. Tokens live in tokens.css.
 */

/* ================================================================== *
 * Visually hidden — accessibility utility used by header toggle, etc.
 * ================================================================== */

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================== *
 * Marks · X-mark
 * Renders the locked PNG (A1_X-Mark.png / A1_X-Mark_ALT.png).
 * Two variants — primary (Ink face) for Bone surfaces, alt (Bone face)
 * for Ink/Red surfaces. The partial picks the right variant via param.
 * ================================================================== */

.x-mark { display: block; flex-shrink: 0; height: auto; }
/* Width set via the partial's width attribute; height auto-scales. */

/* Wordmark — text-based, inherits parent color */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

/* Eagle — flagship raster mark */
.eagle { width: 100%; max-width: 720px; height: auto; margin-inline: auto; }

/* ================================================================== *
 * Site header
 * Sticky, Bone with paper grain, hard 4px Ink bottom rule.
 * ================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--bone);
  background-image: var(--paper-grain);
  background-blend-mode: multiply;
  border-bottom: var(--rule-bold);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
  min-height: 72px;
}

/* Brand · mark + wordmark */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  flex-shrink: 0;
}
.site-header__brand:hover .wordmark { color: var(--spilled-red); }
.site-header__brand:hover .x-mark    { transform: rotate(-2deg); }
.site-header__brand .x-mark          { transition: transform var(--t-fast) var(--ease-out); }

/* Hamburger toggle · mobile only */
.site-header__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 5px;
}
.site-header__toggle-bar {
  display: block;
  height: 2px;
  background: currentColor;
  width: 100%;
  transition: transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.site-header.is-open .site-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav · primary */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
  flex-wrap: wrap;
}
.site-header__nav-link {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.site-header__nav-link:hover { border-bottom-color: var(--spilled-red); }
.site-header__nav-link.is-active {
  color: var(--spilled-red);
  border-bottom-color: var(--spilled-red);
}

/* CTA · pinned right after nav */
.site-header__cta {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--spilled-red);
  border: 2px solid var(--ink);
  padding: 10px 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.site-header__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.site-header__cta:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* ---- Header · mobile (<= 720px) ---------------------------------- */

@media (max-width: 720px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    min-height: 60px;
    padding-block: var(--space-3);
  }

  .site-header__brand .wordmark { display: none; }

  .site-header__cta {
    order: 1;
    margin-left: auto;
    padding: 8px 14px;
    font-size: 0.875rem;
  }

  .site-header__toggle { display: flex; order: 2; margin-left: 0; }

  .site-header__nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--rule);
    display: none;
  }
  .site-header.is-open .site-header__nav { display: flex; }

  .site-header__nav-link {
    padding: var(--space-3) 0;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--bone-pulp);
  }
  .site-header__nav-link:last-child { border-bottom: 0; }
  .site-header__nav-link.is-active { border-bottom-color: var(--spilled-red); }
}

/* ---- Header · hub-grouped nav (9.4) ----------------------------- *
 * Two of the five primary slots are hubs that open dropdowns on
 * desktop and collapse to accordions inside the hamburger drawer on
 * mobile. The trigger styling intentionally matches .site-header__
 * nav-link so the hub reads as a peer of the flat links, with a
 * caret as the only visual differentiator.
 *
 * Open state is driven by aria-expanded on the trigger. JS toggles
 * the attribute; CSS does the rest. No JS-managed class on the menu
 * itself, so the dropdown stays accessible if JS fails (the menu
 * is hidden via aria-expanded sibling selector, but Esc + click-
 * outside require JS to close — degrades to "click trigger again to
 * close" without JS, which is acceptable).
 */

.site-header__hub {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-header__hub-trigger {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.site-header__hub-trigger:hover { border-bottom-color: var(--spilled-red); }
.site-header__hub-trigger.is-active,
.site-header__hub-trigger[aria-expanded="true"] {
  color: var(--spilled-red);
  border-bottom-color: var(--spilled-red);
}

.site-header__hub-caret {
  font-size: 0.75em;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease-out);
  display: inline-block;
}
.site-header__hub-trigger[aria-expanded="true"] .site-header__hub-caret {
  transform: rotate(180deg);
}

.site-header__hub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  margin-top: var(--space-3);
  background: var(--bone);
  border: 2px solid var(--ink);
  border-top: 4px solid var(--spilled-red);
  padding: var(--space-3);
  min-width: 300px;
  display: none;
  list-style: none;
  z-index: 60;
  box-shadow: 4px 4px 0 var(--ink);
}
.site-header__hub-trigger[aria-expanded="true"] + .site-header__hub-menu {
  display: block;
}

.site-header__hub-menu li { margin: 0; padding: 0; }

.site-header__hub-link {
  display: block;
  padding: var(--space-3);
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.site-header__hub-link:hover {
  background: var(--bone-pulp);
  border-left-color: var(--spilled-red);
}
.site-header__hub-link.is-active {
  background: var(--bone-pulp);
  border-left-color: var(--spilled-red);
}
.site-header__hub-link-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out);
}
.site-header__hub-link-sub {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--smoke);
}
.site-header__hub-link:hover .site-header__hub-link-title,
.site-header__hub-link.is-active .site-header__hub-link-title {
  color: var(--spilled-red);
}

/* ---- Header · hub-grouped nav · mobile (<= 720px) --------------- *
 * Inside the hamburger drawer, hubs become click-to-expand accordions.
 * The dropdown loses its absolute positioning, border, and shadow —
 * it becomes part of the vertical stack with a left indent so the
 * hierarchy is visible.
 */

@media (max-width: 720px) {
  .site-header__hub {
    display: block;
    border-bottom: 1px solid var(--bone-pulp);
  }
  .site-header__hub-trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 0;
    font-size: 1.125rem;
    border-bottom: 0;
  }
  .site-header__hub-trigger:hover,
  .site-header__hub-trigger.is-active,
  .site-header__hub-trigger[aria-expanded="true"] {
    border-bottom: 0;
  }
  .site-header__hub-menu {
    position: static;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 var(--space-3) var(--space-4);
    min-width: 0;
  }
  .site-header__hub-link {
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
    border-left-width: 2px;
  }
  .site-header__hub-link-title { font-size: 1rem; }
  .site-header__hub-link-sub { display: none; }
}

/* ================================================================== *
 * Site footer
 * Ink slab. Brand block + three sitemap columns + bottom legal row.
 * Paper grain rides on top of Ink at low opacity for tactile texture.
 * ================================================================== */

.site-footer {
  position: relative;
  margin-top: var(--space-9);
  padding-block: var(--space-7) var(--space-5);
  background: var(--ink);
  color: var(--bone);
  border-top: var(--rule-bold);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
}

/* Top grid: brand block (1.5fr) + 3 sitemap columns (1fr each).
   Mobile (<720px) collapses to 2 columns; brand block spans both. */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (max-width: 960px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Brand block — Anton headline, Rye signoff, Inter body */
.site-footer__brand h3 { color: var(--bone); }
.site-footer__tagline {
  color: var(--spilled-red);
  text-align: left;
  margin-top: var(--space-3);
  font-size: 1.5rem;
}
.site-footer__body {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--bone-pulp);
  max-width: 38ch;
  line-height: 1.55;
}

/* Sitemap columns */
.site-footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__list li { padding: 4px 0; }
.site-footer__list a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--t-fast) var(--ease-out);
}
.site-footer__list a:hover { color: var(--spilled-red); }

/* Inline category chip — "Coming Soon", "X", "IG"
   Mono caps, hairline border. Functional metadata, not eyebrow chrome. */
.site-footer__chip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  border: 1px solid var(--smoke);
  padding: 2px 6px;
  line-height: 1;
}

/* Creed line — standing site-wide statement of posture on tactics.
   Sits between the sitemap and the legal line. Not styled as a
   warning or disclaimer — read as a position. */
.site-footer__creed {
  border-top: 1px solid var(--smoke);
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}
.site-footer__creed-line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bone-pulp);
  margin: 0;
  max-width: 60ch;
}
.site-footer__creed-link {
  color: var(--bone);
  border-bottom: 1px solid var(--smoke);
  margin-left: 0.25rem;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.site-footer__creed-link:hover {
  color: var(--spilled-red);
  border-bottom-color: var(--spilled-red);
}

/* Bottom row */
.site-footer__bottom {
  border-top: 1px solid var(--smoke);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.site-footer__bottom a {
  color: var(--bone-pulp);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.site-footer__bottom a:hover { color: var(--spilled-red); border-bottom-color: var(--spilled-red); }
.site-footer__signoff { color: var(--bone-pulp); }
.site-footer__legal-line { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

@media (max-width: 720px) {
  .site-footer { padding-block: var(--space-6) var(--space-4); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ================================================================== *
 * Roster signup form
 * The conversion component. Three fields (first name, email,
 * optional ZIP), brutalist field styling, on-page success/error states.
 * No popups, no confetti.
 * ================================================================== */

.roster-form {
  background: var(--bone);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: var(--space-5);
  position: relative;
}

.roster-form__form { display: block; }

.roster-form__row { margin-bottom: var(--space-4); }
.roster-form__row:last-of-type { margin-bottom: 0; }

.roster-form__row--split {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .roster-form__row--split { grid-template-columns: 1fr; }
}

/* Field labels — Mono red caps, sit directly above input */
.roster-form__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-bottom: 6px;
  display: block;
}
.roster-form__label-aux {
  color: var(--smoke);
  letter-spacing: 0.18em;
  margin-left: 4px;
}

/* Inputs — transparent bg, hard ink border, hard focus state */
.roster-form__field {
  width: 100%;
  background: transparent;
  border: 2px solid var(--ink);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  appearance: none;
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease-out);
}
.roster-form__field::placeholder { color: var(--smoke); }
.roster-form__field:focus {
  outline: none;
  border-color: var(--spilled-red);
}
.roster-form__field:focus-visible {
  outline: 2px solid var(--spilled-red);
  outline-offset: 0;
  border-color: var(--spilled-red);
}

/* Submit — Ink slab, brutalist hover */
.roster-form__submit {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: 16px 24px;
  background: var(--ink);
  color: var(--bone);
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.roster-form__submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.roster-form__submit:active { transform: translate(0, 0); box-shadow: none; }
.roster-form__submit:focus-visible {
  outline: 2px solid var(--spilled-red);
  outline-offset: 3px;
}
.roster-form__submit[disabled],
.roster-form__submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}
.roster-form__submit-loading { display: none; }
.roster-form__submit[aria-busy="true"] [data-roster-submit-text] { display: none; }
.roster-form__submit[aria-busy="true"] .roster-form__submit-loading { display: inline; }

/* Trust line · Mono smoke caps */
.roster-form__trust {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-3);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Success state — replaces the form when a signup completes */
.roster-form__success {
  text-align: center;
  padding: var(--space-3) 0 var(--space-2);
}
.roster-form__success-star {
  display: block;
  font-family: var(--font-rye);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--spilled-red);
  margin-bottom: var(--space-3);
}
.roster-form__success-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.roster-form__success-body {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
  max-width: 40ch;
  margin-inline: auto;
}
.roster-form__success-email {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bone-pulp);
  padding: 1px 6px;
  word-break: break-all;
}

/* Error state — sits above the form, form remains usable for retry */
.roster-form__error {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bone-pulp);
  border: 2px solid var(--spilled-red);
}
.roster-form__error-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  color: var(--spilled-red);
  letter-spacing: 0;
}
.roster-form__error-body {
  font-size: 0.875rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}
.roster-form__error-body a { color: var(--spilled-red); text-decoration: underline; text-underline-offset: 2px; }

/* Form-hidden state when success shows */
.roster-form.is-success .roster-form__form { display: none; }

/* Variant · dark — inverts the card for placement on Ink/Red surfaces.
   Reserved for future footer/sidebar embed. */
.roster-form--dark {
  background: transparent;
  color: var(--bone);
  border-color: var(--bone);
}
.roster-form--dark .roster-form__label { color: var(--bone); }
.roster-form--dark .roster-form__label-aux { color: var(--bone-pulp); }
.roster-form--dark .roster-form__field {
  border-color: var(--bone);
  color: var(--bone);
}
.roster-form--dark .roster-form__field::placeholder { color: var(--bone-pulp); }
.roster-form--dark .roster-form__field:focus { border-color: var(--spilled-red); }
.roster-form--dark .roster-form__submit {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.roster-form--dark .roster-form__submit:hover {
  background: var(--spilled-red);
  color: var(--bone);
  box-shadow: 4px 4px 0 var(--bone);
}
.roster-form--dark .roster-form__trust { color: var(--bone-pulp); }
.roster-form--dark .roster-form__success-title,
.roster-form--dark .roster-form__success-body { color: var(--bone); }
.roster-form--dark .roster-form__success-email { background: rgba(239, 230, 206, 0.15); color: var(--bone); }
.roster-form--dark .roster-form__error { background: rgba(239, 230, 206, 0.1); border-color: var(--bone); }
.roster-form--dark .roster-form__error-title { color: var(--bone); }
.roster-form--dark .roster-form__error-body { color: var(--bone-pulp); }
.roster-form--dark .roster-form__error-body a { color: var(--bone); }

/* Variant · compact — smaller form for sidebar/inline embeds */
.roster-form--compact { padding: var(--space-4); }
.roster-form--compact .roster-form__field { padding: 10px 12px; font-size: 0.9375rem; }
.roster-form--compact .roster-form__submit { padding: 12px 18px; font-size: 0.9375rem; margin-top: var(--space-3); }
.roster-form--compact .roster-form__trust { font-size: 0.5625rem; }

/* Variant · stacked — email and ZIP get their own rows. Used on
   page-join.hbs where vertical real estate is unconstrained and the
   form benefits from full-width inputs throughout. */
.roster-form--stacked .roster-form__row--split {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  display: grid;
}

/* ================================================================== *
 * Threat band + threat stats
 * News from the Front. Ink slab on home, three stats across a divider.
 * Stat partial can also be used outside the band (on Bone surfaces)
 * via .threat-stat--light.
 * ================================================================== */

.threat-band {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-7);
  border-bottom: var(--rule-bold);
  overflow: hidden;
}
.threat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.threat-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 920px) {
  .threat-band__inner { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* "News from the Front" divider label */
.threat-band__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--bone);
  border-right: 2px solid var(--smoke);
  padding-right: var(--space-6);
}
@media (max-width: 920px) {
  .threat-band__label {
    border-right: 0;
    border-bottom: 2px solid var(--smoke);
    padding-right: 0;
    padding-bottom: var(--space-4);
  }
}

/* Single stat block */
.threat-stat { display: block; }
.threat-stat__num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--spilled-red);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}
.threat-stat__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--bone-pulp);
  margin: 0;
  max-width: 36ch;
}
.threat-stat__src {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--iron);
  margin-top: var(--space-2);
  text-transform: uppercase;
}

/* Linked variant — subtle pull on hover, no decorative chrome */
.threat-stat--link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out);
}
.threat-stat--link:hover { transform: translateY(-2px); }
.threat-stat--link:hover .threat-stat__num { color: var(--bone); }

/* Light variant — for placement on Bone surfaces (the-resistance, etc) */
.threat-stat--light .threat-stat__num  { color: var(--spilled-red); }
.threat-stat--light .threat-stat__desc { color: var(--ink); }
.threat-stat--light .threat-stat__src  { color: var(--smoke); }
.threat-stat--light.threat-stat--link:hover .threat-stat__num { color: var(--ink); }

/* ================================================================== *
 * Dispatch card
 * Two variants:
 *   default  → horizontal hero card. Bone-Pulp bg, grid auto/1fr/auto.
 *              Used for "latest dispatch" spotlight on home and for
 *              prev/next at the bottom of an issue.
 *   archive  → vertical card for the archive grid. Bone bg, flex column,
 *              brutalist hover, "→ Read the issue" pinned to bottom.
 * ================================================================== */

.dispatch-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--bone-pulp);
  border: 3px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.dispatch-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.dispatch-card:hover .dispatch-card__arrow { transform: translateX(4px); color: var(--ink); }

@media (max-width: 720px) {
  .dispatch-card { grid-template-columns: 1fr; gap: var(--space-3); }
}

.dispatch-card__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--spilled-red);
  text-transform: uppercase;
  line-height: 1.2;
  padding-right: var(--space-4);
  border-right: 2px solid var(--ink);
  align-self: stretch;
  display: flex;
  align-items: center;
  max-width: 12rem;
}
@media (max-width: 720px) {
  .dispatch-card__meta {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    padding-right: 0;
    padding-bottom: var(--space-3);
    max-width: none;
  }
}

.dispatch-card__body { min-width: 0; }
.dispatch-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}
.dispatch-card__dek {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

.dispatch-card__arrow {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--spilled-red);
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
@media (max-width: 720px) {
  .dispatch-card__arrow { display: none; }
}

/* "→ Read the issue" link only shows on archive variant */
.dispatch-card__read-more { display: none; }

/* Empty placeholder — for first paint before any issues exist */
.dispatch-card--empty { opacity: 0.85; }
.dispatch-card--empty:hover { transform: none; box-shadow: none; }
.dispatch-card--empty:hover .dispatch-card__arrow { transform: none; }

/* ---- variant · archive ---- */

.dispatch-card--archive {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-5);
  background: var(--bone);
  border-width: 2px;
}
.dispatch-card--archive:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.dispatch-card--archive .dispatch-card__meta {
  border-right: 0;
  padding-right: 0;
  display: block;
  max-width: none;
  margin-bottom: var(--space-3);
}
.dispatch-card--archive .dispatch-card__title {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}
.dispatch-card--archive .dispatch-card__dek {
  color: var(--smoke);
  font-size: 0.875rem;
  line-height: 1.55;
}
.dispatch-card--archive .dispatch-card__arrow { display: none; }
.dispatch-card--archive .dispatch-card__read-more {
  display: block;
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--spilled-red);
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-out);
}
.dispatch-card--archive:hover .dispatch-card__read-more { color: var(--ink); }

/* ================================================================== *
 * CTA card · "Join the Roster" callout
 * Two variants:
 *   default → Ink slab, centered, used at the bottom of Dispatch
 *             issues and at the close of pages.
 *   teaser  → Bone-Pulp card, 2-col grid, used for the Cell upsell
 *             on home and other softer card-style nudges.
 * ================================================================== */

.cta-card {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-7);
  border: 4px solid var(--ink);
  margin-block: var(--space-7);
  overflow: hidden;
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-card__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.cta-card__text { margin-bottom: var(--space-5); }
.cta-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1;
  color: var(--bone);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}
.cta-card__body {
  font-size: 1rem;
  color: var(--bone-pulp);
  margin: 0;
  line-height: 1.55;
}

/* Button — defaults to Spilled Red on Bone border for the Ink slab.
   Brutalist hover: translate -2,-2 + 4px bone box-shadow. */
.cta-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--spilled-red);
  color: var(--bone);
  border: 2px solid var(--bone);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.cta-card__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--bone);
  background: var(--ink);
}
.cta-card__btn:active { transform: translate(0, 0); box-shadow: none; }
.cta-card__btn:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

/* CTA button style modifiers */
.cta-card__btn--ink-on-bone {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.cta-card__btn--ink-on-bone:hover {
  background: var(--spilled-red);
  border-color: var(--spilled-red);
  box-shadow: 4px 4px 0 var(--ink);
}

/* ---- variant · teaser ---- */

.cta-card--teaser {
  background: var(--bone-pulp);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: var(--space-6);
}
.cta-card--teaser::before { display: none; }
.cta-card--teaser .cta-card__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: center;
  text-align: left;
  max-width: none;
}
@media (max-width: 720px) {
  .cta-card--teaser .cta-card__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}
.cta-card--teaser .cta-card__text { margin-bottom: 0; }
.cta-card--teaser .cta-card__title { color: var(--ink); }
.cta-card--teaser .cta-card__body { color: var(--ink); }
.cta-card--teaser .cta-card__action { justify-self: end; }
@media (max-width: 720px) {
  .cta-card--teaser .cta-card__action { justify-self: stretch; }
  .cta-card--teaser .cta-card__btn { width: 100%; }
}
.cta-card--teaser .cta-card__btn {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.cta-card--teaser .cta-card__btn:hover {
  background: var(--spilled-red);
  border-color: var(--spilled-red);
  box-shadow: 4px 4px 0 var(--ink);
}

/* ================================================================== *
 * Coming-soon stamp · Phase 02 marker
 * Inline pill (default) or hero-size tactile stamp (large variant).
 * ================================================================== */

.coming-soon-stamp {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  border: 2px solid var(--spilled-red);
  background: transparent;
  line-height: 1;
}

.coming-soon-stamp--large {
  padding: 14px 24px;
  font-size: 0.9375rem;
  letter-spacing: 0.3em;
  border-width: 3px;
  /* Slight tactile rotation — feels stamped, not pasted. */
  transform: rotate(-1.5deg);
  transform-origin: center;
}

/* On dark surfaces, stamp flips to bone-on-red border. */
.on-ink .coming-soon-stamp,
.on-red .coming-soon-stamp {
  color: var(--bone);
  border-color: var(--bone);
}


/* ============================================================
 * pages.css
 * ============================================================ */

/* Cancel Clankers — pages layer
 *
 * Page-level layout. One section per page template. Components carry
 * their own styles in components.css; this layer only owns the
 * arrangement of those components on a specific page.
 */

/* ============================================================ *
 * Home · 3.1
 * ============================================================ */

/* ---- Hero --------------------------------------------------- */

.home-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.home-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-9);
}
@media (max-width: 920px) {
  .home-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: var(--space-7);
  }
}

.home-hero__headline {
  /* Type-XL is already huge; bump line-height even tighter for hero feel */
  line-height: 0.85;
  letter-spacing: -0.015em;
  margin: 0;
}

.home-hero__subline {
  /* Spilled Red Anton sub-line — single color, single typeface, whole phrase */
  margin-top: var(--space-4);
  letter-spacing: 0.02em;
  line-height: 1;
}

.home-hero__lede {
  font-size: 1.3125rem;
  line-height: 1.5;
  max-width: 36ch;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-6);
  font-weight: 500;
}

.home-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.home-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-hero__eagle {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

/* ---- Manifesto excerpt -------------------------------------- */

.manifesto-excerpt {
  padding-block: var(--space-9);
}
.manifesto-excerpt__inner { /* container handles width */ }

.manifesto-excerpt__prose p {
  font-size: clamp(1.25rem, 1.4vw + 1rem, 1.5rem);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}
.manifesto-excerpt__prose p:last-child { margin-bottom: var(--space-5); }

/* ---- Roster band -------------------------------------------- */

.roster-band {
  position: relative;
  background: var(--spilled-red);
  color: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  overflow: hidden;
}
.roster-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.roster-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 920px) {
  .roster-band__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

.roster-band__counter-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--bone-pulp);
  text-transform: uppercase;
  margin: 0;
}
.roster-band__counter-num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8.75rem);
  line-height: 1;
  color: var(--bone);
  display: block;
  margin-top: var(--space-3);
  letter-spacing: -0.01em;
}
.roster-band__counter-num[data-roster-counter="—"]::before { content: ""; }
.roster-band__head {
  margin-top: var(--space-4);
  color: var(--bone);
}
.roster-band__lede {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: var(--space-3);
  color: var(--bone-pulp);
  max-width: 40ch;
}

/* ---- Latest Dispatch spotlight ------------------------------ */

.latest-dispatch {
  background: var(--bone);
  padding-block: var(--space-9);
}
.latest-dispatch__head {
  margin-bottom: var(--space-6);
}
.latest-dispatch__archive {
  margin-top: var(--space-5);
}
.latest-dispatch__archive-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.latest-dispatch__archive-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- Shop spotlight ----------------------------------------- */

.shop-spotlight {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  overflow: hidden;
}
.shop-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.shop-spotlight__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.shop-spotlight__head {
  margin-top: var(--space-4);
  color: var(--bone);
}
.shop-spotlight__body {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--bone-pulp);
  margin: var(--space-5) auto var(--space-6);
  max-width: 56ch;
}

/* ---- Cell teaser -------------------------------------------- */

.cell-teaser {
  background: var(--bone);
  padding-block: var(--space-8);
}

/* ============================================================ *
 * Join · 3.2 · Single-purpose signup
 * ============================================================ */

.join-page {
  padding-block: var(--space-9);
}

.join-page__head {
  /* Big — bigger than home hero on its own. Single phrase, single color. */
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 0.88;
  margin: 0 0 var(--space-5);
  letter-spacing: -0.015em;
}

.join-page__lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-7);
  max-width: 50ch;
}

/* Two stat cluster — counter on left, cadence on right */
.join-page__stats {
  display: flex;
  gap: var(--space-8);
  margin: 0 0 var(--space-7);
  flex-wrap: wrap;
  padding: 0;
}
.join-page__stat { margin: 0; }

.join-page__stat-num {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--spilled-red);
  margin: 0;
  letter-spacing: -0.005em;
}
.join-page__stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 6px 0 0;
}

.join-page__form { margin-bottom: var(--space-7); }

/* "What you get" panel — Bone-Pulp box, hard ink border */
.join-page__what {
  background: var(--bone-pulp);
  border: 2px solid var(--ink);
  padding: var(--space-5);
}
.join-page__what-head {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1;
  letter-spacing: 0;
}
.join-page__what-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.join-page__what-list li {
  font-size: 0.9375rem;
  color: var(--ink);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--ink);
  line-height: 1.45;
}
.join-page__what-list li:last-child { border-bottom: 0; }
.join-page__what-list li::before {
  content: "→ ";
  color: var(--spilled-red);
  font-family: var(--font-display);
  margin-right: 4px;
}

/* ============================================================ *
 * Manifesto · 3.3
 * ============================================================ */

.manifesto-hero {
  background: var(--bone);
  padding-block: var(--space-8);
  border-bottom: var(--rule-bold);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.manifesto-hero__inner {
  position: relative;
  z-index: 1;
}
.manifesto-hero__art {
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.manifesto-hero__signoff {
  margin-top: var(--space-5);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--spilled-red);
  /* Rye via .signoff utility — permitted standalone-tagline placement */
}

.manifesto-body {
  padding-block: var(--space-9);
}
.manifesto-body__prose p {
  font-size: clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.manifesto-body__prose p:last-of-type { margin-bottom: 0; }

/* Pull quote — Anton uppercase Spilled Red, hard red left rule, big.
   Replaces the .prose blockquote default for this template. */
.manifesto-pull {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  color: var(--spilled-red);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  margin: var(--space-7) 0;
  letter-spacing: -0.005em;
  max-width: 100%;
}

.manifesto-body__signoff {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-top: var(--space-7);
  letter-spacing: 0.02em;
}

/* Closing CTA — Ink slab with embedded dark roster form */
.manifesto-cta {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.manifesto-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.manifesto-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.manifesto-cta__head {
  margin: 0 0 var(--space-3);
  color: var(--bone);
}
.manifesto-cta__body {
  font-size: 1.125rem;
  color: var(--bone-pulp);
  margin: 0 auto var(--space-5);
  max-width: 50ch;
}
.manifesto-cta__form { text-align: left; max-width: 480px; margin-inline: auto; }

/* ============================================================ *
 * Dispatch archive · 4.1
 * ============================================================ */

.dispatch-archive-hero {
  background: var(--bone-pulp);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8);
}
.dispatch-archive-hero__head {
  /* A touch smaller than the home hero — list pages should feel
     editorial, not poster-y. */
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.92;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
.dispatch-archive-hero__lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: 50ch;
}

.dispatch-archive {
  background: var(--bone);
  padding-block: var(--space-7);
}
.dispatch-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.dispatch-archive__empty {
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================================ *
 * Pagination · used by Dispatch archive (Stage 4.2 polishes
 * this further if filtering/jumping is added)
 * ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  flex-wrap: wrap;
}
.pagination__edge { flex: 1; min-width: 0; }
.pagination__edge--prev { text-align: left; }
.pagination__edge--next { text-align: right; }
.pagination__counter {
  flex-shrink: 0;
  text-align: center;
  color: var(--smoke);
}
.pagination__link {
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pagination__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 480px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pagination__edge--prev,
  .pagination__edge--next { text-align: center; }
}

/* ============================================================ *
 * Dispatch issue · 4.3
 * ============================================================ */

/* Meta bar — Ink slab strip across the top */
.issue-meta-bar {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-4);
}
.issue-meta-bar__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
}
.issue-meta-bar__cell strong { color: var(--bone); }

/* Headline + lede */
.issue-headline {
  padding-block: var(--space-8) var(--space-5);
}
.issue-headline__h1 {
  font-size: clamp(2.625rem, 6vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
}
.issue-headline__lede {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  font-weight: 500;
}

/* Featured image (optional) */
.issue-feature { margin-block: var(--space-5) var(--space-7); }
.issue-feature__img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--ink);
}
.issue-feature__caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-3);
  text-align: left;
}

/* Body — overrides on top of .prose for the Dispatch-issue context */
.issue-body { padding-block: var(--space-5) var(--space-9); }

.issue-body__prose p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  max-width: 64ch;
}

/* Section headings — Anton red, used by Ghost's auto h2/h3 from Koenig */
.issue-body__prose h2,
.issue-body__prose h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  line-height: 1;
  letter-spacing: 0;
}
.issue-body__prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.issue-body__prose h3 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); }
.issue-body__prose h2 + p,
.issue-body__prose h3 + p { margin-top: 0; }

/* Pull quotes — INK Anton, top + bottom Spilled Red borders.
   Overrides the .prose default (which had a red left bar). */
.issue-body__prose blockquote {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  line-height: 1.05;
  color: var(--ink);
  border: 0;
  border-top: 4px solid var(--spilled-red);
  border-bottom: 4px solid var(--spilled-red);
  padding: var(--space-5) 0;
  margin: var(--space-7) 0;
  letter-spacing: -0.005em;
  max-width: 100%;
}
.issue-body__prose blockquote p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.issue-body__prose blockquote cite,
.issue-body__prose blockquote footer {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spilled-red);
  font-style: normal;
  margin-top: var(--space-3);
}

/* Inline links inside body — red underline */
.issue-body__prose a {
  color: var(--spilled-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.issue-body__prose a:hover { color: var(--ink); }

/* Lists */
.issue-body__prose ul,
.issue-body__prose ol {
  font-size: 1.125rem;
  line-height: 1.6;
  padding-left: 1.5em;
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.issue-body__prose ul li,
.issue-body__prose ol li { margin: 0.4em 0; }

/* Inline code + code blocks */
.issue-body__prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bone-pulp);
  padding: 0.1em 0.35em;
}
.issue-body__prose pre {
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: var(--space-5) 0;
}
.issue-body__prose pre code { background: transparent; padding: 0; color: inherit; }

/* Ghost Koenig figure / image cards — keep them tidy on Bone */
.issue-body__prose figure { margin: var(--space-6) 0; max-width: 100%; }
.issue-body__prose figure img { width: 100%; height: auto; display: block; border: 2px solid var(--ink); }
.issue-body__prose figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-3);
  text-align: left;
}

/* Horizontal rule — match the brand's hard rule */
.issue-body__prose hr {
  border: 0;
  height: 4px;
  background: var(--spilled-red);
  margin-block: var(--space-7);
}

/* Paywall — Ink slab card that replaces the body remainder for
   non-Cell members on paid issues */
.issue-paywall {
  position: relative;
  margin-block: var(--space-5) var(--space-7);
  padding: var(--space-7);
  background: var(--ink);
  color: var(--bone);
  border: 4px solid var(--ink);
  overflow: hidden;
  text-align: center;
}
.issue-paywall::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.issue-paywall__inner { position: relative; z-index: 1; }
.issue-paywall__head {
  margin: var(--space-4) 0 var(--space-3);
  color: var(--bone);
}
.issue-paywall__body {
  font-size: 1.0625rem;
  color: var(--bone-pulp);
  margin: 0 auto var(--space-5);
  max-width: 50ch;
  line-height: 1.55;
}

/* Prev/next row */
.issue-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.issue-nav__cell--prev { text-align: left; flex: 1; }
.issue-nav__cell--next { text-align: right; flex: 1; }
.issue-nav__link {
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.issue-nav__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 480px) {
  .issue-nav { flex-direction: column; gap: var(--space-3); }
  .issue-nav__cell--prev, .issue-nav__cell--next { text-align: center; }
}

/* ============================================================ *
 * The Resistance · 5.1
 * ============================================================ *
 *
 * Page rhythm: Bone hero → Bone-Pulp pillars slab → Bone flow
 * section → Ink closing CTA. The Bone-Pulp slab gives the four-up
 * pillar grid visual weight without a louder color move. CTA
 * mirrors .manifesto-cta — same Ink slab, same dark roster form.
 */

/* ---- Hero --------------------------------------------------- */

.resistance-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9) var(--space-8);
  position: relative;
  overflow: hidden;
}
.resistance-hero__inner {
  max-width: 880px;
}
.resistance-hero__head {
  font-size: clamp(3rem, 8vw, 6.75rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  margin: 0;
}
.resistance-hero__sub {
  margin-top: var(--space-4);
  letter-spacing: 0.02em;
  line-height: 1;
}
.resistance-hero__lede {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-5) 0 0;
  max-width: 60ch;
}
.resistance-hero__lede + .resistance-hero__lede {
  margin-top: var(--space-3);
}

/* ---- Pillars ------------------------------------------------ */

.resistance-pillars {
  background: var(--bone-pulp);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.resistance-pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.resistance-pillars__inner {
  position: relative;
  z-index: 1;
}
.resistance-pillars__head {
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.resistance-pillars__title {
  margin: 0;
  line-height: 0.95;
}
.resistance-pillars__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

.resistance-pillars__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1080px) {
  .resistance-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
  .resistance-pillars__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Pillar card */
.pillar {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.pillar__art {
  background: var(--bone);
  border: 2px solid var(--ink);
  margin: 0 0 var(--space-4);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}
.pillar__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pillar__title {
  margin: 0 0 var(--space-3);
  /* Single color, single typeface — display-m + fg-ink utilities cover this.
     Tighten line-height for the smaller pillar card context. */
  line-height: 0.95;
  letter-spacing: 0;
}
.pillar__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

/* ---- Flow --------------------------------------------------- */

.resistance-flow {
  background: var(--bone);
  padding-block: var(--space-9);
}
.resistance-flow__inner { /* container handles width */ }
.resistance-flow__head {
  margin-bottom: var(--space-6);
  max-width: 720px;
}
.resistance-flow__title {
  margin: 0;
  line-height: 0.95;
}
.resistance-flow__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

.resistance-flow__figure {
  margin: 0 0 var(--space-7);
  border: 2px solid var(--ink);
  background: var(--bone-pulp);
  overflow: hidden;
}
.resistance-flow__diagram {
  width: 100%;
  height: auto;
  display: block;
}

.resistance-flow__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1080px) {
  .resistance-flow__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .resistance-flow__steps { grid-template-columns: 1fr; }
}

.flow-step {
  border-top: 4px solid var(--spilled-red);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
}
.flow-step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-bottom: var(--space-2);
}
.flow-step__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
}
.flow-step__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: none;
}
.flow-step__link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  margin-top: auto;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.flow-step__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.flow-step__chip {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  padding: 4px 8px;
  border: 2px solid var(--ink);
}
.flow-step--soon { border-top-color: var(--ink); }
.flow-step--soon .flow-step__num { color: var(--ink); }

/* ---- Closing CTA ------------------------------------------- */

.resistance-cta {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.resistance-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.resistance-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.resistance-cta__head {
  margin: 0 0 var(--space-3);
  color: var(--bone);
}
.resistance-cta__body {
  font-size: 1.125rem;
  color: var(--bone-pulp);
  margin: 0 auto var(--space-5);
  max-width: 50ch;
  line-height: 1.55;
}
.resistance-cta__form {
  text-align: left;
  max-width: 480px;
  margin-inline: auto;
}

/* ============================================================ *
 * The Cell · 5.2
 * ============================================================ *
 *
 * Page rhythm: Bone hero (split copy + card art) → Bone perks
 * grid → Ink pricing slab (the ask) → Bone FAQ → Bone teaser
 * close. Stripe is verified but day-one ships in `cell_state =
 * stub` — CTAs route to /join with a "doors open soon" notice.
 * Live state swaps to Ghost Portal #/portal/signup.
 */

/* ---- Hero --------------------------------------------------- */

.cell-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.cell-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 920px) {
  .cell-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.cell-hero__text { /* grid item — no own layout */ }
.cell-hero__head {
  font-size: clamp(3.25rem, 8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0;
}
.cell-hero__sub {
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
  line-height: 1;
}
.cell-hero__lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-5);
  max-width: 50ch;
}
.cell-hero__notice {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-5);
  max-width: 48ch;
  line-height: 1.6;
}
.cell-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cell-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cell-hero__card {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  /* Subtle tilt + drop-shadow — the card photo already has its own
     baked-in tilt and edges, so we only tip a hair more for life. */
  transform: rotate(-2.5deg);
  filter: drop-shadow(8px 12px 0 rgba(14, 12, 10, 0.18));
  transition: transform var(--t-med) var(--ease-out);
}
.cell-hero__card:hover { transform: rotate(0deg); }

/* ---- Perks -------------------------------------------------- */

.cell-perks {
  background: var(--bone);
  padding-block: var(--space-9);
}
.cell-perks__inner { /* container handles width */ }
.cell-perks__head {
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.cell-perks__title {
  margin: 0;
  line-height: 0.95;
}
.cell-perks__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

.cell-perks__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1080px) {
  .cell-perks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cell-perks__grid { grid-template-columns: 1fr; }
}

.perk {
  border-top: 4px solid var(--spilled-red);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
}
.perk__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-bottom: var(--space-2);
}
.perk__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
}
.perk__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

/* ---- Pricing slab ------------------------------------------- */

.cell-pricing {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-9);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.cell-pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cell-pricing__inner {
  position: relative;
  z-index: 1;
}
.cell-pricing__head {
  text-align: center;
  margin-bottom: var(--space-7);
}
.cell-pricing__title {
  margin: 0;
  line-height: 0.95;
  color: var(--bone);
}
.cell-pricing__kicker {
  margin: var(--space-3) auto 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--bone-pulp);
  max-width: 50ch;
}

.cell-pricing__plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .cell-pricing__plans { grid-template-columns: 1fr; }
}

.plan {
  background: var(--bone);
  color: var(--ink);
  border: 2px solid var(--bone);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.plan--feature {
  background: var(--bone-pulp);
  border-color: var(--spilled-red);
}
.plan__cadence {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.plan__save {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  background: var(--spilled-red);
  color: var(--bone);
  padding: 3px 6px;
}
.plan__price {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  line-height: 1;
}
.plan__amount {
  font-size: clamp(3.5rem, 6vw + 1rem, 5.25rem);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plan__per {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--smoke);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.plan__note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: 32ch;
}
.plan__chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  padding: 6px 10px;
  border: 2px solid var(--ink);
}
/* Pin the CTA (or stub-state chip) to the bottom of every plan card.
   Without this, content variance above the button (e.g. yearly's
   2-line note vs monthly's 1-line) leaves the buttons at different
   vertical positions across the row. */
.plan > .btn,
.plan > .plan__chip {
  margin-top: auto;
}

.cell-pricing__stub-note {
  margin: var(--space-7) auto 0;
  max-width: 50ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bone-pulp);
  text-align: center;
}
.cell-pricing__stub-cta {
  margin-top: var(--space-5);
  text-align: center;
}

/* ---- FAQ ---------------------------------------------------- */

.cell-faq {
  background: var(--bone);
  padding-block: var(--space-9);
}
.cell-faq__inner { /* container handles width */ }
.cell-faq__head {
  margin-bottom: var(--space-6);
}
.cell-faq__title {
  margin: 0;
  line-height: 0.95;
}

.cell-faq__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 2px solid var(--ink);
  padding-block: var(--space-5);
}
.faq-item:last-child { border-bottom: 2px solid var(--ink); }
.faq-item__q {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
  line-height: 1.05;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
}
.faq-item__a {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}

/* ---- Closing CTA ------------------------------------------- */

.cell-close {
  background: var(--bone);
  padding-block: var(--space-8);
}

/* ============================================================ *
 * The Shop · 5.3
 * ============================================================ *
 *
 * Phase 02 page. Ships in `shop_state = coming-soon` for the
 * entire Phase 01 — the live shop lives at shop.cancelclankers.com
 * and is opened by flipping the switch in Ghost admin once the
 * Shopify store is published.
 *
 * Page rhythm (coming-soon): Bone hero (split copy + C4 stamp) →
 * Bone-Pulp preview grid (4 merch teasers) → Bone-Pulp promise
 * band → Bone teaser close. Live state is just the hero.
 */

/* ---- Hero --------------------------------------------------- */

.shop-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.shop-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 920px) {
  .shop-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.shop-hero__text { /* grid item — no own layout */ }

.shop-hero__head {
  font-size: clamp(3rem, 8vw, 6.75rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0;
}
.shop-hero__sub {
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
  line-height: 1;
}
.shop-hero__lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-4);
  max-width: 50ch;
}
.shop-hero__notice {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-5);
  max-width: 48ch;
  line-height: 1.6;
}
.shop-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.shop-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop-hero__stamp {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  /* Tilt the stamp slightly — feels hand-pressed, not Photoshopped */
  transform: rotate(-6deg);
  transition: transform var(--t-med) var(--ease-out);
}
.shop-hero__stamp:hover { transform: rotate(-2deg); }
@media (max-width: 920px) {
  .shop-hero__stamp { max-width: 360px; }
}

/* ---- Preview grid ------------------------------------------- */

.shop-preview {
  background: var(--bone-pulp);
  padding-block: var(--space-9);
  border-bottom: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.shop-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.shop-preview__inner {
  position: relative;
  z-index: 1;
}
.shop-preview__head {
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.shop-preview__title {
  margin: 0;
  line-height: 0.95;
}
.shop-preview__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

.shop-preview__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1080px) {
  .shop-preview__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
  .shop-preview__grid { grid-template-columns: 1fr; }
}

.merch-card {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.merch-card__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin-bottom: var(--space-2);
}
.merch-card__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
}
.merch-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: none;
}
.merch-card__chip {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  padding: 4px 8px;
  border: 2px solid var(--ink);
}

/* ---- Promise band ------------------------------------------ */

.shop-promise {
  background: var(--bone-pulp);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.shop-promise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.shop-promise__inner {
  position: relative;
  z-index: 1;
}
.shop-promise__title {
  margin: 0 0 var(--space-6);
  line-height: 0.95;
}

.shop-promise__rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.shop-promise__rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 2px solid var(--ink);
  align-items: start;
}
.shop-promise__rule:last-child { border-bottom: 2px solid var(--ink); }
.shop-promise__rule p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.shop-promise__rule p strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
  display: block;
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: 4px;
}
.shop-promise__rule-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--spilled-red);
  padding-top: 2px;
}

/* ---- Closing CTA ------------------------------------------- */

.shop-close {
  background: var(--bone);
  padding-block: var(--space-8);
}

/* ============================================================ *
 * Press · 5.4
 * ============================================================ *
 *
 * A working media kit. Bone hero (split copy + C5 newspaper
 * stack) → Bone-Pulp at-a-glance facts → Bone boilerplate →
 * Bone-Pulp quotables → Bone brand kit → Ink press contact
 * close. The page ends on a working email address, not a CTA —
 * press visitors are not Roster funnel material.
 */

/* ---- Hero --------------------------------------------------- */

.press-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9);
}
.press-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 920px) {
  .press-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.press-hero__text { /* grid item — no own layout */ }
.press-hero__head {
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0;
}
.press-hero__sub {
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
  line-height: 1;
}
.press-hero__lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-5) 0 0;
  max-width: 56ch;
}
.press-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.press-hero__stack {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  /* The newspaper stack already has its own perspective baked in
     — no rotate/transform here, let the artwork sit as-is. */
}

/* ---- At a glance ------------------------------------------- */

.press-glance {
  background: var(--bone-pulp);
  padding-block: var(--space-9);
  border-bottom: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.press-glance::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.press-glance__inner {
  position: relative;
  z-index: 1;
}
.press-glance__title {
  margin: 0 0 var(--space-6);
  line-height: 0.95;
}
.press-glance__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
@media (max-width: 720px) {
  .press-glance__facts { grid-template-columns: 1fr; }
}
.fact {
  border-bottom: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  padding: var(--space-5);
}
.fact__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.fact__value {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}

/* ---- Boilerplate ------------------------------------------- */

.press-boilerplate {
  background: var(--bone);
  padding-block: var(--space-9);
}
.press-boilerplate__inner { /* container handles width */ }
.press-boilerplate__head {
  margin-bottom: var(--space-6);
}
.press-boilerplate__title {
  margin: 0;
  line-height: 0.95;
}
.press-boilerplate__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

.boilerplate-block {
  background: var(--bone-pulp);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.boilerplate-block:last-child { margin-bottom: 0; }
.boilerplate-block__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.boilerplate-block__text {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  /* Mono on Bone-Pulp gives this the "press release plate" feel —
     a paste-able block of source text rather than running prose. */
}

/* ---- Quotables --------------------------------------------- */

.press-quotables {
  background: var(--bone-pulp);
  padding-block: var(--space-9);
  border-top: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.press-quotables::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.press-quotables__inner {
  position: relative;
  z-index: 1;
}
.press-quotables__head {
  margin-bottom: var(--space-6);
  max-width: 720px;
}
.press-quotables__title {
  margin: 0;
  line-height: 0.95;
}
.press-quotables__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}
.press-quotables__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.quotable {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
  border-top: 4px solid var(--spilled-red);
  padding: var(--space-5) 0;
  letter-spacing: -0.005em;
  margin: 0;
}
.quotable:last-child { border-bottom: 4px solid var(--spilled-red); }

/* ---- Brand kit --------------------------------------------- */

.press-kit {
  background: var(--bone);
  padding-block: var(--space-9);
}
.press-kit__inner { /* container handles width */ }
.press-kit__head {
  margin-bottom: var(--space-6);
  max-width: 720px;
}
.press-kit__title {
  margin: 0;
  line-height: 0.95;
}
.press-kit__kicker {
  margin: var(--space-3) 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}

.press-kit__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1080px) {
  .press-kit__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .press-kit__grid { grid-template-columns: 1fr; }
}

.kit-item {
  background: var(--bone);
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.kit-item__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.kit-item__link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.kit-item__art {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bone-pulp);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-5);
  display: block;
}
.kit-item__caption {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kit-item__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0;
}
.kit-item__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 1.4;
}

.press-kit__palette {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bone-pulp);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-4) var(--space-5);
  margin: 0;
}
.press-kit__palette strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  color: var(--spilled-red);
  margin-right: var(--space-2);
  display: inline;
}
.press-kit__palette code {
  font-family: var(--font-mono);
  background: var(--bone);
  padding: 0.1em 0.35em;
  font-size: 0.875rem;
  color: var(--ink);
}

/* ---- Press contact ----------------------------------------- */

.press-contact {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.press-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.press-contact__inner {
  position: relative;
  z-index: 1;
}
.press-contact__title {
  margin: 0 0 var(--space-3);
  color: var(--bone);
}
.press-contact__body {
  font-size: 1.0625rem;
  color: var(--bone-pulp);
  margin: 0 auto var(--space-6);
  max-width: 56ch;
  line-height: 1.6;
}
.press-contact__email {
  font-family: var(--font-display);
  text-transform: lowercase;
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  color: var(--bone);
  text-decoration: none;
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: 4px;
  letter-spacing: 0.01em;
  display: inline-block;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.press-contact__email:hover {
  color: var(--spilled-red);
  border-bottom-color: var(--bone);
}
.press-contact__note {
  margin: var(--space-6) auto 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  line-height: 1.6;
  max-width: 64ch;
}
.press-contact__note a {
  color: var(--spilled-red);
  text-decoration: none;
  border-bottom: 1px solid var(--spilled-red);
}
.press-contact__note a:hover {
  color: var(--bone);
  border-bottom-color: var(--bone);
}

/* ============================================================ *
 * Legal · 5.5
 * ============================================================ *
 *
 * Single-page Privacy + Terms + Contact. Brand voice in TL;DR
 * ledes (Bone-Pulp aside cards), formal policy text in narrow
 * Inter prose. TBD-attorney-review markers are styled loud
 * enough to be unmissable in a final scan.
 *
 * Page rhythm: small Bone hero with TOC → Bone Privacy →
 * Bone-Pulp Terms (visual break for the longest section) →
 * Bone Contact → Bone footer note.
 */

.legal-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.legal-hero__inner { /* container handles width */ }
.legal-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.legal-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 60ch;
}
.legal-hero__toc {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.legal-hero__toc-link {
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.legal-hero__toc-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.legal-hero__toc-sep { color: var(--smoke); }

/* ---- Section ------------------------------------------------ */

.legal-section {
  background: var(--bone);
  padding-block: var(--space-9);
  /* Anchor scroll-margin so deep links don't hide behind the
     sticky site-header. */
  scroll-margin-top: var(--space-6);
}
.legal-section--alt {
  background: var(--bone-pulp);
  border-block: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.legal-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.legal-section__inner {
  position: relative;
  z-index: 1;
}

.legal-section__head {
  margin-bottom: var(--space-6);
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.legal-section__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.legal-section__title {
  margin: 0;
  line-height: 0.95;
}

/* ---- TL;DR aside ------------------------------------------- */

.legal-tldr {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
}
.legal-section--alt .legal-tldr {
  background: var(--bone);
}
.legal-tldr__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.legal-tldr__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
  font-weight: 500;
}

/* ---- Formal policy prose ----------------------------------- */

.legal-prose {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.legal-prose h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.5rem);
  line-height: 1.05;
  color: var(--ink);
  margin: var(--space-6) 0 var(--space-3);
  letter-spacing: 0;
}
.legal-prose h3:first-child { margin-top: 0; }

.legal-prose p {
  margin: 0 0 var(--space-4);
  max-width: 64ch;
}
.legal-prose p:last-child { margin-bottom: 0; }

.legal-prose strong {
  font-weight: 700;
  color: var(--ink);
}

.legal-prose a {
  color: var(--spilled-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.legal-prose a:hover { color: var(--ink); }

/* ---- TBD attorney-review markers --------------------------- */
/* Deliberately loud so they cannot be missed in a final scan
   before launch. Spilled Red bg, bone text, mono caps, padded. */

.legal-tbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--spilled-red);
  padding: 3px 8px;
  margin: 0 2px;
  line-height: 1.4;
  border: 2px solid var(--ink);
}

/* ---- Footer note ------------------------------------------- */

.legal-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.legal-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.legal-footer-note__text strong {
  color: var(--ink);
}

/* ============================================================ *
 * Principles page
 * ============================================================ *
 *
 * The brand's standing position on tactics. Visual parity with
 * the Legal page is intentional — same kind of document, same
 * kind of permanence, same kind of quotability. The Principles
 * page is linked from the site-wide footer creed and from The
 * Brand nav column.
 *
 * Selectors mirror .legal-* rule-for-rule so the two pages can
 * evolve together. Anything that needs to diverge (color of TL;DR
 * accent, signoff treatment) is handled below.
 */

.principles-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.principles-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.principles-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 60ch;
}
.principles-hero__toc {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.principles-hero__toc-link {
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.principles-hero__toc-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.principles-hero__toc-sep { color: var(--smoke); }

/* ---- Section ------------------------------------------------ */

.principles-section {
  background: var(--bone);
  padding-block: var(--space-9);
  scroll-margin-top: var(--space-6);
}
.principles-section--alt {
  background: var(--bone-pulp);
  border-block: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.principles-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.principles-section__inner {
  position: relative;
  z-index: 1;
}

.principles-section__head {
  margin-bottom: var(--space-6);
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.principles-section__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.principles-section__title {
  margin: 0;
  line-height: 0.95;
}

/* ---- TL;DR aside ------------------------------------------- */

.principles-tldr {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
}
.principles-section--alt .principles-tldr {
  background: var(--bone);
}
.principles-tldr__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.principles-tldr__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
  font-weight: 500;
}

/* ---- Prose ------------------------------------------------- */

.principles-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
.principles-prose p {
  margin: 0 0 var(--space-6);
  max-width: 64ch;
}
.principles-prose p:last-child { margin-bottom: 0; }
.principles-prose strong {
  font-weight: 700;
  color: var(--ink);
}
.principles-prose a {
  color: var(--spilled-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.principles-prose a:hover { color: var(--ink); }

/* The §04 signoff line — Stay Human ★. Anton, red, sits flush
   with the prose container, marks the document closed. */
.principles-prose__signoff {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  line-height: 1;
  color: var(--spilled-red);
  margin: var(--space-6) 0 0;
  letter-spacing: 0;
}

/* ---- Footer note ------------------------------------------- */

.principles-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.principles-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.principles-footer-note__text strong {
  color: var(--ink);
}

/* ============================================================ *
 * Error pages · 6.4
 * ============================================================ *
 *
 * Generic error.hbs and error-404.hbs share the same layout +
 * styles. Bone slab, big Anton headline, red Anton subline (in
 * voice with the brand's edge), lede, two CTAs, and a quick
 * sub-nav so the visitor can keep moving. The page is intentionally
 * tall and centered — feels like a billboard, not a tooltip.
 */

.error-page {
  background: var(--bone);
  padding-block: var(--space-10) var(--space-9);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.error-page__inner {
  text-align: center;
}
.error-page__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-4);
}
.error-page__head {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0;
}
.error-page__sub {
  margin: var(--space-4) 0 0;
  letter-spacing: 0.02em;
  line-height: 1;
}
.error-page__lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-5) auto var(--space-6);
  max-width: 50ch;
}
.error-page__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-7);
}
.error-page__nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.error-page__nav-label { color: var(--smoke); }
.error-page__nav-link {
  color: var(--spilled-red);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.error-page__nav-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ============================================================ *
 * Generic page · 6.7
 * ============================================================ *
 *
 * Catch-all template for any Ghost page without a matching
 * page-{slug}.hbs override. Editorial chrome — feature image,
 * title, optional excerpt, prose body. Functions as a default so
 * any new page Jacob creates in admin renders cleanly without
 * needing a custom template.
 */

.generic-page__header {
  background: var(--bone);
  padding-block: var(--space-9) var(--space-6);
  border-bottom: var(--rule-bold);
}
.generic-page__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.generic-page__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0;
}
.generic-page__excerpt {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  margin: var(--space-5) 0 0;
  max-width: 60ch;
  font-weight: 500;
}
.generic-page__feature {
  margin: 0;
  padding-block: var(--space-7) 0;
  background: var(--bone);
}
.generic-page__feature-img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--ink);
}
.generic-page__feature-caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-3);
  text-align: left;
}
.generic-page__body {
  background: var(--bone);
  padding-block: var(--space-7) var(--space-9);
}

/* ---- Ghost Koenig editor cards · brand defaults -------------- */
/* Lightweight styling for the most-common Koenig blocks so they
   don't read as raw HTML when used inside a Dispatch issue. Full
   per-card brand treatment can land in Stage 6 polish. */

.issue-body__prose .kg-callout-card {
  background: var(--bone-pulp);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.issue-body__prose .kg-callout-emoji { flex-shrink: 0; font-size: 1.5rem; line-height: 1; }
.issue-body__prose .kg-callout-text { font-size: 1rem; line-height: 1.55; margin: 0; }

.issue-body__prose .kg-bookmark-card {
  display: block;
  border: 2px solid var(--ink);
  background: var(--bone);
  margin: var(--space-5) 0;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.issue-body__prose .kg-bookmark-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.issue-body__prose .kg-bookmark-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.issue-body__prose .kg-bookmark-content { padding: var(--space-4); }
.issue-body__prose .kg-bookmark-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.issue-body__prose .kg-bookmark-description {
  font-size: 0.875rem;
  color: var(--smoke);
  line-height: 1.45;
  margin-bottom: var(--space-2);
}
.issue-body__prose .kg-bookmark-metadata {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.issue-body__prose .kg-bookmark-thumbnail { display: flex; }
.issue-body__prose .kg-bookmark-thumbnail img { object-fit: cover; max-width: 200px; }

.issue-body__prose .kg-embed-card,
.issue-body__prose .kg-video-card,
.issue-body__prose .kg-audio-card { margin: var(--space-5) 0; }

.issue-body__prose .kg-button-card { text-align: center; margin: var(--space-5) 0; }
.issue-body__prose .kg-button-card a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--spilled-red);
  color: var(--bone);
  border: 2px solid var(--ink);
  text-decoration: none;
}

.issue-body__prose .kg-width-wide { max-width: 100%; }
.issue-body__prose .kg-width-full {
  /* Break out of container-narrow to full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
}

/* ============================================================ *
 * Watch · 7.1 — The public ledger of replacement events
 * ============================================================ *
 *
 * Surface layout for /watch/. Data is fetched client-side from
 * /assets/data/incidents.json (compiled by /build/build-watch.mjs).
 * Heroes, intro, leaderboards, blotter, filters, CTA, provenance.
 *
 * Design tokens only. No new colors, no new fonts. AI-slop rules
 * apply — headlines are one color, one typeface across the phrase.
 * ============================================================ */

/* ---- Hero / Tally ------------------------------------------- */

.watch-hero {
  background: var(--bone);
  background-image: var(--paper-grain);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9) var(--space-8);
  position: relative;
  overflow: hidden;
}
.watch-hero__inner {
  position: relative;
  z-index: 1;
}
.watch-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--smoke);
  margin: 0 0 var(--space-5);
}
.watch-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--spilled-red);
  border-radius: 50%;
  display: inline-block;
  /* Subtle pulse for the live-feel — respects reduced motion globally. */
  animation: watch-pulse 2.4s var(--ease-out) infinite;
}
@keyframes watch-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-hero__dot { animation: none; }
}

.watch-hero__head {
  margin: 0 0 var(--space-3);
  line-height: 0.85;
  letter-spacing: -0.015em;
}
.watch-hero__sub {
  margin: 0 0 var(--space-7);
  letter-spacing: 0.01em;
  line-height: 1;
  max-width: 22ch;
}

.watch-tally {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: end;
  padding-top: var(--space-6);
  border-top: var(--rule-bold);
}
@media (max-width: 760px) {
  .watch-tally {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.watch-tally__primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.watch-tally__label {
  color: var(--smoke);
}
.watch-tally__value {
  /* Hero tally — single Anton, single color, tabular numerics so the
     count doesn't reflow when JS animates the number. */
  font-variant-numeric: tabular-nums;
  line-height: 0.85;
  letter-spacing: -0.02em;
  /* Negative-net rendering: ink. Positive-net rendering: spilled red.
     The .is-replaced / .is-protected modifier is applied by main.js
     after the tally loads. */
}
.watch-tally__value.is-replaced { color: var(--spilled-red); }
.watch-tally__value.is-protected { color: var(--ink); }

.watch-tally__breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0;
}
@media (max-width: 520px) {
  .watch-tally__breakdown { grid-template-columns: 1fr 1fr; }
}
.watch-tally__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--rule-thin);
}
.watch-tally__stat dt {
  color: var(--smoke);
  margin: 0;
}
.watch-tally__stat dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.watch-hero__meta {
  margin: var(--space-6) 0 0;
  color: var(--smoke);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.watch-hero__rawlink {
  color: var(--spilled-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Intro -------------------------------------------------- */

.watch-intro {
  background: var(--bone);
  padding-block: var(--space-8);
}
.watch-intro__head { margin: 0 0 var(--space-5); }
.watch-intro__body {
  font-size: var(--type-lede);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  max-width: 56ch;
}

/* ---- Section heads (shared) --------------------------------- */

.watch-section__head {
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.watch-section__eyebrow {
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.watch-section__eyebrow.fg-bone { color: var(--bone); }
.watch-section__title { margin: 0 0 var(--space-3); line-height: 0.95; }
.watch-section__kicker {
  font-size: var(--type-lede);
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}
.watch-section__kicker.fg-bone { color: var(--bone-pulp); }

/* ---- Leaderboards (Pit + Walkout) --------------------------- */

.watch-pit {
  background: var(--bone-pulp);
  background-image: var(--paper-grain);
  padding-block: var(--space-9);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
}
.watch-walkout {
  background: var(--ink);
  background-image: var(--paper-grain);
  color: var(--bone);
  padding-block: var(--space-9);
  border-bottom: var(--rule-bold);
}

.watch-leaderboard {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.watch-leaderboard__row {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 14rem) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule-thin);
}
.watch-leaderboard__row:first-child { border-top: var(--rule-thin); }
.watch-leaderboard--inverse .watch-leaderboard__row {
  border-color: var(--smoke);
}
@media (max-width: 640px) {
  .watch-leaderboard__row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--space-3);
  }
  .watch-leaderboard__bar { display: none; }
}
.watch-leaderboard__rank {
  color: var(--spilled-red);
  font-variant-numeric: tabular-nums;
}
.watch-leaderboard--inverse .watch-leaderboard__rank { color: var(--iron); }
.watch-leaderboard__name {
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.005em;
}
.watch-leaderboard--inverse .watch-leaderboard__name { color: var(--bone); }
.watch-leaderboard__bar {
  height: 0.625rem;
  background: rgba(14, 12, 10, 0.08);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.watch-leaderboard--inverse .watch-leaderboard__bar {
  background: rgba(239, 230, 206, 0.08);
  border-color: var(--bone-pulp);
}
.watch-leaderboard__bar-fill {
  display: block;
  height: 100%;
  background: var(--spilled-red);
  transform-origin: left center;
  /* The width is set inline by JS via --w (0–1). */
  width: calc(var(--w, 0) * 100%);
  transition: width var(--t-med) var(--ease-out);
}
.watch-leaderboard--inverse .watch-leaderboard__bar-fill { background: var(--iron); }
.watch-leaderboard__weight {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}
.watch-leaderboard--inverse .watch-leaderboard__weight { color: var(--bone); }
.watch-leaderboard__empty {
  margin: var(--space-5) 0 0;
  color: var(--smoke);
  font-size: var(--type-small);
}

/* ---- Blotter (filters + cards) ------------------------------ */

.watch-blotter {
  background: var(--bone);
  padding-block: var(--space-9);
}

.watch-filters {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--space-5);
  align-items: end;
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  border: var(--rule-bold);
  background: var(--bone);
}
@media (max-width: 920px) {
  .watch-filters { grid-template-columns: 1fr; align-items: stretch; }
}

.watch-filter { border: 0; padding: 0; margin: 0; }
.watch-filter legend,
.watch-filter > label {
  color: var(--smoke);
  margin-bottom: var(--space-2);
  display: block;
}
.watch-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.watch-chip {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  line-height: 1;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.watch-chip:hover { background: var(--bone-pulp); }
.watch-chip:focus-visible { outline: 2px solid var(--spilled-red); outline-offset: 2px; }
.watch-chip.is-active {
  background: var(--ink);
  color: var(--bone);
}

.watch-filter__input {
  /* Inherits .field — overrides for compact filter context. */
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-small);
}

.watch-filter__reset { align-self: end; }

.watch-blotter__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.watch-card {
  background: var(--bone);
  border: var(--rule-bold);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: transform var(--t-fast) var(--ease-out);
}
.watch-card:hover { transform: translateY(-2px); }
.watch-card.is-retracted { opacity: 0.55; }
.watch-card.is-retracted .watch-card__headline { text-decoration: line-through; }

.watch-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
}
.watch-card__date { color: var(--smoke); }
.watch-card__category {
  padding: 0.25rem 0.5rem;
  background: var(--ink);
  color: var(--bone);
  letter-spacing: 0.1em;
}
.watch-card__category[data-category="layoff"]     { background: var(--spilled-red); }
.watch-card__category[data-category="deployment"] { background: var(--ink); }
.watch-card__category[data-category="capital"]    { background: var(--iron); }
.watch-card__category[data-category="statement"]  { background: var(--smoke); }
.watch-card__category[data-category="walkout"]    { background: var(--bone); color: var(--ink); border: 1px solid var(--ink); }

.watch-card__pillar { color: var(--smoke); }

.watch-card__headline {
  margin: 0;
  line-height: 1.05;
  /* AI-slop guardrail: single color across the whole headline. */
}
.watch-card__company {
  color: var(--spilled-red);
  margin: 0;
}
.watch-card__translation {
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.watch-card__sources {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--rule-thin);
}
.watch-card__sources summary {
  cursor: pointer;
  color: var(--smoke);
  list-style: none;
}
.watch-card__sources summary::-webkit-details-marker { display: none; }
.watch-card__sources summary::after {
  content: " +";
  color: var(--spilled-red);
}
.watch-card__sources[open] summary::after { content: " −"; }
.watch-card__source-list {
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.watch-card__source-list li {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
}
.watch-card__source-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.watch-card__source-list a:hover { color: var(--spilled-red); }
.watch-card__retracted {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 0.25rem 0.5rem;
  background: var(--ink);
  color: var(--bone);
  letter-spacing: 0.1em;
}

.watch-blotter__empty {
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--smoke);
  font-size: var(--type-small);
}

/* ---- CTA + Provenance --------------------------------------- */

.watch-cta {
  background: var(--ink);
  background-image: var(--paper-grain);
  color: var(--bone);
  padding-block: var(--space-9);
  border-bottom: var(--rule-bold);
}
.watch-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.watch-cta__head { margin: 0; line-height: 0.95; }
.watch-cta__body {
  font-size: var(--type-lede);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0;
}

.watch-provenance {
  background: var(--bone);
  padding-block: var(--space-6);
}
.watch-provenance__line {
  color: var(--smoke);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}
.watch-provenance__line a {
  color: var(--spilled-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- No-JS fallback ----------------------------------------- */

.no-js-only { display: none; }
.no-js .no-js-only { display: block; }
.no-js [data-watch-blotter],
.no-js [data-watch-leaderboard],
.no-js [data-watch-filters] { display: none; }

.watch-noscript {
  background: var(--bone-pulp);
  padding-block: var(--space-7);
  border-top: var(--rule-bold);
}

/* ============================================================ *
 * Watch · 7.1b — Overrides + bulletproofing
 * ============================================================ *
 *
 * Source-order wins on ties, so this block lands after the
 * primary Watch styles and patches the things the screenshots
 * surfaced: Tally hierarchy was off (giant number competed with
 * the page headline and overflowed its grid cell), leaderboard
 * rows weren't holding their grid, button defaults were leaking
 * into the filter chips, blotter cards weren't holding their
 * border + grid. We also stop relying on a .no-js class toggle —
 * the page uses <noscript> instead.
 * ============================================================ */

/* ---- Tally — vertical stack ---------------------------------- *
 * The Tally is one vertical block now. Eyebrow on top, giant
 * number in the middle (capped width so it never overflows),
 * 3-stat breakdown row at the bottom. No nested grid.
 * --------------------------------------------------------------- */

.watch-tally {
  display: block;          /* override the prior grid layout */
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  padding-bottom: var(--space-6);
}

.watch-tally__label {
  margin: 0 0 var(--space-3);
  color: var(--smoke);
}

.watch-tally__value {
  display: block;
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 400;
  /* Smaller than display-xl on desktop so it doesn't compete with
     the page headline. Stays bold on mobile via the clamp floor. */
  font-size: clamp(3.5rem, 6vw + 1rem, 6rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
  overflow-wrap: normal;
}
.watch-tally__value.is-replaced  { color: var(--spilled-red); }
.watch-tally__value.is-protected { color: var(--ink); }

.watch-tally__breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
}
@media (max-width: 540px) {
  .watch-tally__breakdown { grid-template-columns: 1fr 1fr; }
}

.watch-tally__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0 0;
  border-top: var(--rule-thin);
}
.watch-tally__stat dt {
  color: var(--smoke);
  margin: 0;
}
.watch-tally__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.25rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Dark / tinted slabs — explicit and !important ----------- *
 * The screenshots showed the Pit + Walkout + CTA rendering on
 * bone, not on their intended slabs. Force the backgrounds with
 * !important so any later cascade can't silently lose. Color of
 * the text inside is set per-element via fg-bone, which the
 * existing tokens layer already handles.
 * --------------------------------------------------------------- */

.watch-pit {
  background-color: var(--bone-pulp) !important;
  background-image: var(--paper-grain);
}
.watch-walkout,
.watch-cta {
  background-color: var(--ink) !important;
  background-image: var(--paper-grain);
  color: var(--bone);
}

/* ---- Leaderboard rows — grid hard-forced --------------------- */

.watch-leaderboard,
.watch-blotter__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.watch-leaderboard__row {
  display: grid !important;
  grid-template-columns: 3rem minmax(8rem, 14rem) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule-thin);
}
@media (max-width: 640px) {
  .watch-leaderboard__row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--space-3);
  }
  .watch-leaderboard__row .watch-leaderboard__bar { display: none; }
}

.watch-leaderboard__name,
.watch-leaderboard__weight {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.75rem);
}

/* ---- Filter chips — kill button defaults --------------------- */

.watch-filters {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--space-5);
  align-items: end;
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  border: var(--rule-bold);
  background: var(--bone);
}
@media (max-width: 920px) {
  .watch-filters { grid-template-columns: 1fr; align-items: stretch; }
}

.watch-filter__chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.watch-chip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  background: var(--bone);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.watch-chip:hover { background: var(--bone-pulp); }
.watch-chip.is-active {
  background: var(--ink) !important;
  color: var(--bone) !important;
}

/* ---- Blotter cards — grid + border hard-forced --------------- */

.watch-blotter__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.watch-card {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bone);
  border: var(--rule-bold);
  padding: var(--space-5);
  position: relative;
}
.watch-card__head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.watch-card__category {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- No-script note — small, contained ----------------------- *
 * The page now uses <noscript> for the fallback so it only
 * exists in the DOM when JS is disabled at the browser level.
 * Style it as a small mono note, not a hero band. The old
 * .no-js / .no-js-only toggle is gone — nothing to fight here.
 * --------------------------------------------------------------- */

.watch-noscript {
  background: var(--bone-pulp);
  padding-block: var(--space-5);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.watch-noscript p { margin: 0; color: var(--ink); }
.watch-noscript a { color: var(--spilled-red); text-decoration: underline; }

/* ============================================================ *
 * Watch · 7.1c — Colophon + home spotlight
 * ============================================================ */

/* ---- Colophon (Watch page footer) ---------------------------- *
 * Replaces the dev-ese provenance line at the bottom of /watch/.
 * Reads as a clerk-of-records note, not a build log.
 * --------------------------------------------------------------- */

.watch-colophon {
  background: var(--bone);
  padding-block: var(--space-7) var(--space-8);
  border-top: var(--rule);
}
.watch-colophon__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}
.watch-colophon__head {
  margin: 0;
  color: var(--spilled-red);
}
.watch-colophon__body {
  margin: 0 auto;
  max-width: 58ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink);
}
.watch-colophon__meta {
  margin: var(--space-3) 0 0;
  color: var(--smoke);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.watch-colophon__sep { color: var(--bone-pulp); }
.watch-colophon__rawlink {
  color: var(--spilled-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.watch-colophon__rawlink:hover { color: var(--ink); }

/* ---- Watch spotlight (home page) ---------------------------- *
 * Lives on home.hbs between the manifesto excerpt and the
 * roster band. Shows live Tally numbers pulled from
 * /assets/data/incidents.json and links to /watch/.
 * --------------------------------------------------------------- */

.watch-spotlight {
  background: var(--bone);
  padding-block: var(--space-9);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  position: relative;
  overflow: hidden;
}
.watch-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.watch-spotlight__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 920px) {
  .watch-spotlight__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

.watch-spotlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--smoke);
  margin: 0 0 var(--space-4);
}
.watch-spotlight__eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--spilled-red);
  border-radius: 50%;
  display: inline-block;
  animation: watch-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .watch-spotlight__eyebrow::before { animation: none; }
}

.watch-spotlight__head {
  margin: 0 0 var(--space-4);
  line-height: 0.95;
  max-width: 18ch;
}
.watch-spotlight__body {
  font-size: var(--type-lede);
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 0 var(--space-6);
  color: var(--ink);
}

.watch-spotlight__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6);
  border: var(--rule-bold);
  background: var(--bone);
}
.watch-spotlight__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--rule-thin);
}
.watch-spotlight__stat:last-child { border-bottom: none; }
.watch-spotlight__stat dt {
  color: var(--smoke);
  margin: 0;
}
.watch-spotlight__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.watch-spotlight__stat-value[data-watch-home-tally-key="gross_replaced"]  { color: var(--spilled-red); }
.watch-spotlight__stat-value[data-watch-home-tally-key="gross_protected"] { color: var(--ink); }

/* ============================================================ *
 * Watch · 7.1d — Spotlight redesign (mirrors threat-band)
 * ============================================================ *
 *
 * Source-order wins on ties — these rules land after the earlier
 * .watch-spotlight definitions and replace them. The spotlight is
 * now a bone-pulp slab with the same label-with-divider + 3-stat
 * grid pattern as the .threat-band, so the site's fact-presentation
 * language is consistent. .threat-stat--light handles the num/desc/
 * src colors automatically.
 *
 * Distinctness from the manifesto-excerpt section above (which is
 * bone) comes from three things: deeper bone-pulp background, hard
 * top + bottom rules, and the grid structure (vs centered prose).
 * ============================================================ */

.watch-spotlight {
  position: relative;
  background: var(--bone-pulp) !important;
  background-image: none;
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
  overflow: hidden;
}
.watch-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.watch-spotlight__inner {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: auto repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 920px) {
  .watch-spotlight__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.watch-spotlight__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  border-right: 2px solid var(--ink);
  padding-right: var(--space-6);
  align-self: stretch;
}
@media (max-width: 920px) {
  .watch-spotlight__label {
    border-right: 0;
    border-bottom: 2px solid var(--ink);
    padding-right: 0;
    padding-bottom: var(--space-4);
  }
}

/* Tighten the threat-stat__num scaling specifically for the
   data-driven Watch numbers — six-digit values like 160,000 need
   a slightly tighter cap than the hand-picked threat-band figures. */
.watch-spotlight .threat-stat__num {
  font-size: clamp(2.25rem, 3.5vw + 0.5rem, 3rem);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* CTA row sits below the stats grid, separated by a hairline.
   Body line on the left, button on the right. Stacks on mobile. */
.watch-spotlight__cta-row {
  position: relative;
  z-index: 1;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule-thin);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.watch-spotlight__cta-line {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink);
}

/* ============================================================ *
 * Watch · 7.1e — Spotlight label + spacing + dark-slab nukes
 * ============================================================ */

/* Home Watch spotlight label — bolder, bigger so it anchors the
   section the same way "News from the Front" anchors threat-band. */
.watch-spotlight__label {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 2.8vw + 0.5rem, 2.75rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  border-right: 3px solid var(--ink) !important;
  padding-right: var(--space-7) !important;
}
@media (max-width: 920px) {
  .watch-spotlight__label {
    border-right: 0 !important;
    border-bottom: 3px solid var(--ink) !important;
    padding-right: 0 !important;
    padding-bottom: var(--space-4) !important;
  }
}

/* Bottom breathing room — the spotlight shouldn't crash into the
   Roster band below. Generous space-9 below so the section reads
   as its own beat. The next section's hard top rule does the rest. */
.watch-spotlight {
  padding-bottom: var(--space-9) !important;
  margin-bottom: 0;
}

/* ---- Dark-slab nukes ---------------------------------------- *
 * High-specificity element+class selectors so even an aggressive
 * Ghost Custom CSS field in admin can't beat us without an
 * !important of its own. Combined with inline style attributes
 * on the sections themselves, these are belt + suspenders + glue.
 * ------------------------------------------------------------- */

section.watch-walkout,
section.watch-cta {
  background-color: var(--ink) !important;
  background-image: var(--paper-grain);
  color: var(--bone) !important;
}

section.watch-pit {
  background-color: var(--bone-pulp) !important;
  background-image: var(--paper-grain);
}

/* Text inside the dark slabs must be bone — including any default
   paragraph + link inheritance. Form fields handled by their own
   roster-form--dark variant. */
section.watch-walkout *,
section.watch-cta * {
  border-color: currentColor;
}
section.watch-walkout .watch-section__kicker,
section.watch-cta .watch-cta__body {
  color: var(--bone-pulp) !important;
}

/* ============================================================ *
 * Watch · 7.1f — Scoreboard tally + section rhythm + home spot
 * ============================================================ *
 *
 * Three things this block fixes from the May 18 review:
 *   1. The Tally now renders as a full-width scoreboard — Net
 *      cell on the left, Replaced / Protected / Entries flanking
 *      it. Every number is Anton at bury-your-face scale.
 *   2. Section rhythm on /watch/. The intro now lives in the
 *      wide .container (left-aligned, no centered narrow column)
 *      and every following section gets generous vertical padding
 *      so the slabs read as distinct beats.
 *   3. The homepage Watch spotlight gets a heavier display label
 *      (matches "News from the Front" in weight, beats it in
 *      scale), a hard top rule so it doesn't bleed into the
 *      manifesto-excerpt above, and a roomy bottom so it doesn't
 *      crash into the roster band below.
 *
 * Source-order wins on ties, so this block lands after every
 * prior .watch-* definition.
 * ============================================================ */

/* ---- Scoreboard Tally (Watch hero) -------------------------- */

.watch-tally--scoreboard {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-top: var(--space-7);
  padding: var(--space-6) 0;
  border-top: var(--rule-bold);
  border-bottom: var(--rule-bold);
}
@media (max-width: 960px) {
  .watch-tally--scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}
@media (max-width: 520px) {
  .watch-tally--scoreboard {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.watch-tally__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--rule-thin);
}
.watch-tally__cell--net {
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 960px) {
  .watch-tally__cell--net {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-thin);
  }
}

.watch-tally__cell-label {
  margin: 0;
  color: var(--smoke);
  font-size: var(--type-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.watch-tally__cell-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
  /* Bury-your-face scale — caps at 5.5rem desktop, ~2.75rem mobile floor. */
  font-size: clamp(2.75rem, 4vw + 0.5rem, 5.5rem);
}

.watch-tally__cell-value--lead {
  /* The Net number is the headline figure — scales larger than the
     three supporting cells so the eye lands here first. */
  font-size: clamp(3.5rem, 7vw + 0.5rem, 8rem);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.watch-tally__cell-value.is-replaced  { color: var(--spilled-red); }
.watch-tally__cell-value.is-protected { color: var(--ink); }

/* ---- Section rhythm on /watch/ ------------------------------- *
 * Generous vertical padding on every slab so the page reads as a
 * sequence of distinct beats rather than a continuous wall. The
 * hard top rules already exist on .watch-pit / .watch-walkout /
 * .watch-cta — adding extra block padding pushes the content off
 * the rules so the rules feel like section dividers, not borders.
 * --------------------------------------------------------------- */

.watch-intro {
  padding-block: var(--space-9) var(--space-9) !important;
}
.watch-intro__body {
  /* Cap line length so it stays readable inside the wide container. */
  max-width: 62ch;
}

section.watch-pit,
section.watch-walkout {
  padding-block: var(--space-9) !important;
  border-top: var(--rule-bold) !important;
  border-bottom: var(--rule-bold) !important;
}

section.watch-blotter {
  padding-block: var(--space-9) !important;
}

section.watch-cta {
  padding-block: var(--space-9) !important;
  border-top: var(--rule-bold) !important;
  border-bottom: var(--rule-bold) !important;
}

.watch-colophon {
  padding-block: var(--space-8) var(--space-9) !important;
}

/* ---- Home Watch spotlight — bolder label, hard separation ---- *
 * The spotlight's job is to mirror the threat-band's visual
 * grammar (label + 3 stats grid) while making sure the section is
 * unmistakably its own beat between the manifesto excerpt above
 * and the roster band below.
 *
 * The hard top rule + bone-pulp slab gives a clean break from the
 * cream manifesto. The bottom padding pushes the next section
 * (red roster band) far enough away that nothing crashes.
 * --------------------------------------------------------------- */

.watch-spotlight {
  padding-block: var(--space-9) var(--space-9) !important;
  margin-top: 0;
  border-top: 4px solid var(--ink) !important;
  border-bottom: 4px solid var(--ink) !important;
}

.watch-spotlight__label {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.25rem, 3.2vw + 0.5rem, 3.25rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  border-right: 4px solid var(--ink) !important;
  padding-right: var(--space-7) !important;
}
@media (max-width: 920px) {
  .watch-spotlight__label {
    border-right: 0 !important;
    border-bottom: 4px solid var(--ink) !important;
    padding-right: 0 !important;
    padding-bottom: var(--space-4) !important;
  }
}

/* CTA row sits below the stats — give it real breathing room from
   the stats above and from the section's bottom edge. */
.watch-spotlight__cta-row {
  margin-top: var(--space-8) !important;
  padding-top: var(--space-6) !important;
  border-top: var(--rule-thin) !important;
}

/* ============================================================ *
 * Watch · 7.1g — Mobile fallbacks for inline-styled hero blocks
 * ============================================================ *
 *
 * Several layout properties are inlined in page-watch.hbs and
 * home.hbs (inline styles win the cascade so the page renders
 * correctly even when a stale pages.css is served from cache).
 * Inline styles don't have media queries — these !important
 * rules let us still collapse to single-column at narrow widths
 * because !important CSS beats inline non-important values.
 * ============================================================ */

@media (max-width: 960px) {
  .watch-tally--scoreboard {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .watch-tally__cell--net {
    grid-column: 1 / -1 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--ink) !important;
  }
}
@media (max-width: 520px) {
  .watch-tally--scoreboard {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 920px) {
  .watch-spotlight__inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .watch-spotlight__label {
    border-right: 0 !important;
    border-bottom: 4px solid var(--ink) !important;
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
  }
}

/* =====================================================================
 * Stage 8.1 · The Grid (page-the-grid.hbs)
 * Editorial wrapper around the iframed U.S. data-center map.
 * Patterned after .watch-* and .resistance-*; same tokens, same shape.
 * ===================================================================== */

/* ----- 8.1.1 · Hero ------------------------------------------------- */

.grid-hero {
  background: var(--bone);
  background-image: var(--paper-grain);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-9) var(--space-8);
  position: relative;
  overflow: hidden;
}
.grid-hero__inner {
  position: relative;
  z-index: 1;
}
.grid-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--smoke);
  margin: 0 0 var(--space-5);
}
.grid-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--spilled-red);
  border-radius: 50%;
  display: inline-block;
  animation: watch-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .grid-hero__dot { animation: none; }
}
.grid-hero__head {
  margin: 0 0 var(--space-3);
  line-height: 0.85;
  letter-spacing: -0.015em;
}
.grid-hero__sub {
  margin: 0 0 var(--space-5);
  letter-spacing: 0.01em;
  line-height: 1;
  max-width: 22ch;
}
.grid-hero__lede {
  font-size: var(--fs-5);
  line-height: 1.45;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 var(--space-7);
  font-weight: 500;
}

.grid-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: end;
  padding-top: var(--space-6);
  border-top: var(--rule-bold);
}
@media (max-width: 920px) {
  .grid-hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 480px) {
  .grid-hero__stats { grid-template-columns: 1fr; }
}
.grid-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.grid-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: 0.005em;
  font-feature-settings: "tnum" 1;
}
.grid-stat__lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* ----- 8.1.2 · Editorial intro ------------------------------------- */

.grid-intro {
  background: var(--bone);
  padding-block: var(--space-8) var(--space-7);
}
.grid-intro__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
}
@media (max-width: 760px) {
  .grid-intro__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}
.grid-intro__rail {
  border-top: var(--rule-bold);
  padding-top: var(--space-4);
}
.grid-intro__rail-lbl {
  color: var(--spilled-red);
  margin: 0 0 var(--space-4);
}
.grid-intro__rail-num {
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
}
.grid-intro__body p {
  font-size: var(--fs-4);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: 64ch;
}
.grid-intro__lede {
  font-size: var(--fs-5) !important;
  line-height: 1.45 !important;
  font-weight: 600;
}

/* ----- 8.1.3 · Map frame ------------------------------------------- */

.grid-map {
  background: var(--bone);
  padding-block: var(--space-5) var(--space-8);
}
.grid-map__frame {
  border: 4px solid var(--ink);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.grid-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.65rem 1.1rem;
  background: var(--ink);
  color: var(--bone-pulp);
  border-bottom: 2px solid var(--spilled-red);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.grid-map__live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--bone-pulp); }
.grid-map__live-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--spilled-red);
  border-radius: 50%;
  animation: watch-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .grid-map__live-dot { animation: none; }
}
.grid-map__hint { color: var(--smoke); }

.grid-map__embed {
  position: relative;
  width: 100%;
  height: 820px;
  background: var(--ink);
}
@media (max-width: 920px) { .grid-map__embed { height: 640px; } }
@media (max-width: 540px) { .grid-map__embed { height: 540px; } }
.grid-map__iframe { width: 100%; height: 100%; border: 0; display: block; }
.grid-map__noscript {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-5);
  text-align: center;
}
.grid-map__noscript a { color: var(--iron); text-decoration: underline; text-underline-offset: 3px; }

/* Reading guide — flush below the embed inside the same frame. */
.grid-map__guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bone);
  border-top: 2px solid var(--ink);
}
@media (max-width: 920px) { .grid-map__guide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-map__guide { grid-template-columns: 1fr; } }
.grid-map__guide-cell {
  padding: var(--space-5) var(--space-5);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bone);
}
.grid-map__guide-cell:last-child { border-right: 0; }
@media (max-width: 920px) {
  .grid-map__guide-cell:nth-child(2) { border-right: 0; }
  .grid-map__guide-cell:nth-child(1),
  .grid-map__guide-cell:nth-child(2) { border-bottom: 1px solid var(--ink); }
}
@media (max-width: 480px) {
  .grid-map__guide-cell { border-right: 0; border-bottom: 1px solid var(--ink); }
  .grid-map__guide-cell:last-child { border-bottom: 0; }
}
.grid-map__guide-swatch {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ink);
  display: inline-block;
}
.grid-map__guide-swatch--red     { background: var(--spilled-red); }
.grid-map__guide-swatch--iron    { background: var(--iron); }
.grid-map__guide-swatch--bone    { background: var(--bone-pulp); }
.grid-map__guide-swatch--density { background: linear-gradient(90deg, var(--bone-pulp), var(--spilled-red)); }
.grid-map__guide-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.grid-map__guide-desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ----- 8.1.4 · Sources slab ---------------------------------------- */

.grid-sources {
  padding-block: var(--space-7);
}
.grid-sources__inner {}
.grid-sources__label {
  color: var(--iron);
  margin: 0 0 var(--space-3);
}
.grid-sources__body {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--bone-pulp);
  margin: 0 0 var(--space-4);
}
.grid-sources__body a { color: var(--iron); text-decoration: underline; text-underline-offset: 3px; }
.grid-sources__body a:hover { color: var(--bone); }
.grid-sources__contact {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--smoke);
  margin: 0;
}
.grid-sources__contact a { color: var(--iron); text-decoration: underline; text-underline-offset: 3px; }

/* ----- 8.1.5 · Sister rail ----------------------------------------- */

.grid-sister {
  background: var(--bone);
  padding-block: var(--space-7);
}

/* ----- 8.1.6 · CTA slab -------------------------------------------- */

.grid-cta {
  padding-block: var(--space-8);
}
.grid-cta__eyebrow {
  color: var(--iron);
  margin: 0 0 var(--space-4);
}
.grid-cta__head {
  margin: 0 0 var(--space-4);
  line-height: 0.95;
}
.grid-cta__body {
  font-size: var(--fs-4);
  line-height: 1.55;
  color: var(--bone-pulp);
  max-width: 58ch;
  margin: 0 0 var(--space-6);
}
.grid-cta__form { max-width: 540px; }

/* ----- 8.1.7 · Related dossiers rail ------------------------------- */

.grid-related {
  background: var(--bone);
  padding-block: var(--space-8);
  border-top: var(--rule-bold);
}
.grid-related__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.grid-related__label { color: var(--smoke); margin: 0; }
.grid-related__hint {
  font-size: 0.9rem;
  color: var(--smoke);
  margin: 0;
  max-width: 48ch;
}
.grid-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 920px) { .grid-related__list { grid-template-columns: 1fr; } }
.grid-related__card {
  border: 2px solid var(--ink);
  background: var(--bone);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 0.08s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.grid-related__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.grid-related__kind { color: var(--spilled-red); margin: 0; }
.grid-related__title { margin: 0; line-height: 1.05; }
.grid-related__desc { font-size: 0.95rem; line-height: 1.5; color: var(--smoke); margin: 0; }

/* ============================================================ *
 * The Lexicon · 9.2 · page-lexicon.hbs
 * ============================================================ *
 *
 * The glossary of replacement vocabulary. Mirrors .principles-*
 * grammar rule-for-rule — bone/ink slabs, mono eyebrows, Anton
 * heads, locked widths — and adds a term-card structure for the
 * repeating dl entries.
 *
 * AI-slop guardrail: term headlines are quoted artifacts ("the
 * phrase") rendered in their own typeface — Anton-bold on bone,
 * Anton on ink. Single color across each phrase. The quotes are
 * curly. Do not introduce mid-phrase color or font shifts.
 */

/* ---- Hero ----------------------------------------------------- */

.lexicon-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.lexicon-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.lexicon-hero__sub {
  margin: var(--space-3) 0 var(--space-5);
  line-height: 0.95;
  letter-spacing: -0.005em;
}
.lexicon-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.lexicon-hero__lede:last-of-type { margin-bottom: 0; }

/* ---- Rubric --------------------------------------------------- */

.lexicon-rubric {
  background: var(--bone-pulp);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.lexicon-rubric::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.lexicon-rubric__inner { position: relative; z-index: 1; }
.lexicon-rubric__title {
  margin: 0 0 var(--space-5);
  line-height: 0.95;
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.lexicon-rubric__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.lexicon-rubric__item {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--ink);
}
.lexicon-rubric__item:last-child { border-bottom: 1px solid var(--ink); }
.lexicon-rubric__cell {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.lexicon-rubric__rule { color: var(--smoke); }
.lexicon-rubric__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---- Term card ------------------------------------------------ */

.lexicon-term {
  background: var(--bone);
  padding-block: var(--space-9);
  scroll-margin-top: var(--space-6);
}
.lexicon-term--alt {
  background: var(--ink);
  border-block: var(--rule-bold);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.lexicon-term--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lexicon-term__inner { position: relative; z-index: 1; }

.lexicon-term__head {
  margin-bottom: var(--space-6);
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-4);
}
.lexicon-term__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.lexicon-term__term {
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-style: normal;
}
.lexicon-term--alt .lexicon-term__head { border-bottom-color: var(--spilled-red); }
.lexicon-term--alt .lexicon-term__eyebrow { color: var(--bone); }

/* ---- Definition list ----------------------------------------- */

.lexicon-term__dl {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}
.lexicon-term__dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}
.lexicon-term--alt .lexicon-term__dt { color: var(--bone); }
.lexicon-term__dd {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.lexicon-term--alt .lexicon-term__dd { color: var(--bone); }
.lexicon-term__dd strong { font-weight: 700; }
.lexicon-term__dd a {
  color: var(--spilled-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lexicon-term--alt .lexicon-term__dd a { color: var(--bone); }
.lexicon-term__dd a:hover { color: var(--ink); }
.lexicon-term--alt .lexicon-term__dd a:hover { color: var(--spilled-red); }

/* ---- Receipt block ------------------------------------------- */

.lexicon-term__dd--receipt {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-5);
  max-width: 64ch;
}
.lexicon-term--alt .lexicon-term__dd--receipt {
  background: var(--bone);
  color: var(--ink);
}
.lexicon-term--alt .lexicon-term__dd--receipt a { color: var(--spilled-red); }
.lexicon-term--alt .lexicon-term__dd--receipt a:hover { color: var(--ink); }
.lexicon-term__quote {
  font-family: var(--font-display);
  font-size: var(--type-pull);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.lexicon-term__cite {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.lexicon-term__source {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Submit slab --------------------------------------------- */

.lexicon-submit {
  padding-block: var(--space-9);
  border-block: var(--rule-bold);
}
.lexicon-submit__inner { text-align: left; }
.lexicon-submit__title {
  margin: 0 0 var(--space-4);
  line-height: 0.95;
}
.lexicon-submit__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.lexicon-submit__cta { margin: 0 0 var(--space-4); }
.lexicon-submit__fine {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  margin: 0;
}

/* ---- Closing CTA wrapper ------------------------------------- */

.lexicon-cta {
  background: var(--bone);
  padding-block: var(--space-8);
}

/* ---- Footer note --------------------------------------------- */

.lexicon-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.lexicon-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.lexicon-footer-note__text strong { color: var(--ink); }

/* ============================================================ *
 * The Sources · 9.3 · page-sources.hbs
 * ============================================================ *
 *
 * Public citation index. JSON-driven, client-side filtered/sorted.
 * Layout grammar matches .lexicon-* and .watch-* — bone slabs,
 * ink-on-bone hero, mono labels, hard-rule separators.
 *
 * The table is a flex layout, not an HTML <table>, so the row
 * order can be filtered client-side via class toggles without
 * rebuilding DOM. Rows that don't match active filters get
 * .is-hidden and the count updates.
 */

/* ---- Hero ----------------------------------------------------- */

.sources-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.sources-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.sources-hero__sub {
  margin: var(--space-3) 0 var(--space-5);
  line-height: 0.95;
}
.sources-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.sources-hero__lede:last-of-type { margin-bottom: 0; }

/* ---- Stats grid ---------------------------------------------- */

.sources-stats {
  background: var(--bone-pulp);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.sources-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sources-stats__inner { position: relative; z-index: 1; }
.sources-stats__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}
.sources-stats__card {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sources-stats__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.sources-stats__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 0.95;
  color: var(--ink);
}
.sources-stats__num--small {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ---- Filter bar ---------------------------------------------- */

.sources-filters {
  background: var(--bone);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
}
.sources-filters__head {
  margin-bottom: var(--space-5);
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.sources-filters__title { margin: 0; line-height: 0.95; }
.sources-filters__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: var(--space-2) 0 0;
}
.sources-filters__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-top: 1px solid var(--ink);
}
.sources-filters__row:last-of-type { border-bottom: 1px solid var(--ink); }
.sources-filters__row-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.sources-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sources-filters__chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.sources-filters__chip:hover { background: var(--bone-pulp); }
.sources-filters__chip.is-active {
  background: var(--ink);
  color: var(--bone);
}
.sources-filters__chip-count {
  margin-left: var(--space-2);
  color: var(--smoke);
}
.sources-filters__chip.is-active .sources-filters__chip-count { color: var(--bone-pulp); }

.sources-filters__row--reset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.sources-filters__reset {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--spilled-red);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.sources-filters__reset:hover { border-bottom-color: var(--spilled-red); }
.sources-filters__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.sources-filters__count [data-sources-count] {
  color: var(--ink);
  font-weight: 700;
}

/* ---- Sources table ------------------------------------------- */

.sources-table {
  background: var(--bone);
  padding-block: var(--space-7);
}
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sources-list__loading {
  padding: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.sources-list__row {
  display: grid;
  grid-template-columns: 110px 180px 1fr 110px;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink);
  align-items: start;
}
.sources-list__row:last-child { border-bottom: 1px solid var(--ink); }
.sources-list__row.is-hidden { display: none; }

.sources-list__cell { min-width: 0; }
.sources-list__date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-weight: 700;
}
.sources-list__pub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spilled-red);
  word-break: break-word;
}
.sources-list__headline {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  display: block;
}
.sources-list__headline:hover { color: var(--spilled-red); }
.sources-list__headline:visited { color: var(--smoke); }
.sources-list__subjects {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sources-list__subject {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  padding: 2px var(--space-2);
  border: 1px solid var(--smoke);
}
.sources-list__cited {
  text-align: right;
}
.sources-list__cited-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.sources-list__cited-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
}

@media (max-width: 720px) {
  .sources-list__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .sources-list__cited { text-align: left; }
}

.sources-noscript {
  background: var(--bone-pulp);
  border: 2px solid var(--ink);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.95rem;
}

/* ---- Download slab ------------------------------------------ */

.sources-download {
  padding-block: var(--space-9);
  border-block: var(--rule-bold);
}
.sources-download__title { margin: 0 0 var(--space-4); line-height: 0.95; }
.sources-download__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.sources-download__cta { margin: 0 0 var(--space-4); }
.sources-download__fine {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  margin: 0;
}
.sources-download__fine a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sources-download__fine a:hover { color: var(--spilled-red); }

/* ---- Closing CTA wrapper ------------------------------------ */

.sources-cta { background: var(--bone); padding-block: var(--space-8); }

/* ---- Footer note -------------------------------------------- */

.sources-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.sources-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.sources-footer-note__text strong { color: var(--ink); }

/* ============================================================ *
 * Entity directories · 9.5 · /people/ /companies/ /regulations/
 * ============================================================ *
 *
 * Shared .entities-* namespace covers all three list pages —
 * the chrome is identical, only the copy + the source JSON
 * differ. JS branches on the data-entity-type attribute on
 * the .entities-grid wrapper.
 *
 * Card grid is CSS Grid with auto-fill — adapts smoothly from
 * 1-column mobile to 3-column desktop without a JS layout step.
 */

/* ---- Hero ---------------------------------------------------- */

.entities-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.entities-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.entities-hero__sub {
  margin: var(--space-3) 0 var(--space-5);
  line-height: 0.95;
}
.entities-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.entities-hero__lede:last-of-type { margin-bottom: 0; }

/* ---- Stats grid --------------------------------------------- */

.entities-stats {
  background: var(--bone-pulp);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.entities-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.entities-stats__inner { position: relative; z-index: 1; }
.entities-stats__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}
.entities-stats__card {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.entities-stats__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.entities-stats__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 0.95;
  color: var(--ink);
}
.entities-stats__num--small {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ---- Filter bar --------------------------------------------- */

.entities-filters {
  background: var(--bone);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
}
.entities-filters__head {
  margin-bottom: var(--space-5);
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.entities-filters__title { margin: 0; line-height: 0.95; }
.entities-filters__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: var(--space-2) 0 0;
}
.entities-filters__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-top: 1px solid var(--ink);
}
.entities-filters__row:last-of-type { border-bottom: 1px solid var(--ink); }
.entities-filters__row-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.entities-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.entities-filters__chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.entities-filters__chip:hover { background: var(--bone-pulp); }
.entities-filters__chip.is-active { background: var(--ink); color: var(--bone); }
.entities-filters__chip-count { margin-left: var(--space-2); color: var(--smoke); }
.entities-filters__chip.is-active .entities-filters__chip-count { color: var(--bone-pulp); }
.entities-filters__row--reset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.entities-filters__reset {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--spilled-red);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.entities-filters__reset:hover { border-bottom-color: var(--spilled-red); }
.entities-filters__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.entities-filters__count [data-entities-count] {
  color: var(--ink);
  font-weight: 700;
}

/* ---- Card grid ---------------------------------------------- */

.entities-grid {
  background: var(--bone);
  padding-block: var(--space-7);
}
.entities-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}
.entities-cards__loading {
  grid-column: 1 / -1;
  padding: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.entities-card {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.entities-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--spilled-red);
}
.entities-card.is-hidden { display: none; }

.entities-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}
.entities-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}
.entities-card__status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border: 1px solid var(--ink);
  background: var(--bone-pulp);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.entities-card__status--active { background: var(--spilled-red); color: var(--bone); border-color: var(--spilled-red); }
.entities-card__status--watchlist { background: var(--iron); color: var(--bone); border-color: var(--iron); }

.entities-card__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0;
}
.entities-card__role:empty { display: none; }

.entities-card__summary {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.entities-card__meta {
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--bone-pulp);
  display: grid;
  gap: var(--space-2);
}
.entities-card__meta-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.entities-card__meta-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.entities-card__meta-value {
  font-size: 0.875rem;
  color: var(--ink);
}

@media (max-width: 540px) {
  .entities-filters__row {
    grid-template-columns: 1fr;
  }
  .entities-filters__row--reset {
    grid-template-columns: 1fr 1fr;
  }
}

.entities-noscript {
  background: var(--bone-pulp);
  border: 2px solid var(--ink);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.95rem;
}

/* ---- Closing CTA + footer note ------------------------------ */

.entities-cta { background: var(--bone); padding-block: var(--space-8); }

.entities-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.entities-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.entities-footer-note__text strong { color: var(--ink); }

/* ============================================================ *
 * The States · 9.6 · page-state.hbs
 * ============================================================ *
 *
 * Per-jurisdiction rollup cards. Reuses .entities-card base styling
 * and adds .state-jur-card-* for the per-card structure (counts row,
 * regs list, incidents list, deep-link footer).
 *
 * Future-proofing: as the brand tags more Watch incidents with state
 * codes and adds hq_state to companies, this same card grows new
 * sections (Recent receipts, Companies based here, etc.). The chrome
 * is built for that — sections marked `hidden` only show when data
 * exists.
 */

.state-jur-card {
  /* Inherits .entities-card. Override gap so the dense reg list
     reads as a unit. */
  gap: var(--space-4);
}

.state-jur-card__counts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--bone-pulp);
}
.state-jur-card__count {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.state-jur-card__count-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.state-jur-card__count-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
}

.state-jur-card__section-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-2);
}

.state-jur-card__reg-list,
.state-jur-card__incident-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.state-jur-card__reg,
.state-jur-card__incident {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bone-pulp);
  display: grid;
  gap: 2px;
}
.state-jur-card__reg:last-child,
.state-jur-card__incident:last-child { border-bottom: 0; }

.state-jur-card__reg-name,
.state-jur-card__incident-headline {
  color: var(--ink);
  display: block;
}
.state-jur-card__reg-status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.state-jur-card__reg-status--passed,
.state-jur-card__reg-status--passed-senate,
.state-jur-card__reg-status--enacted { color: var(--spilled-red); }
.state-jur-card__reg-status--vetoed { color: var(--iron); }

.state-jur-card__incident-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}

.state-jur-card__deep-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spilled-red);
  border-bottom: 2px solid transparent;
  padding: var(--space-2) 0;
  margin-top: auto;
  align-self: flex-start;
  transition: border-color var(--t-fast) var(--ease-out);
}
.state-jur-card__deep-link:hover { border-bottom-color: var(--spilled-red); }

/* Type badges on the card head: small variant of .entities-card__status */
.entities-card__status--type-federal {
  background: var(--iron);
  color: var(--bone);
  border-color: var(--iron);
}
.entities-card__status--type-international {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.entities-card__status--type-state {
  background: var(--spilled-red);
  color: var(--bone);
  border-color: var(--spilled-red);
}

/* ============================================================ *
 * The Chapters · 9.7 · page-chapters.hbs + page-start-a-chapter.hbs
 * ============================================================ *
 *
 * Reuses .entities-* for the directory chrome. Adds:
 *   - .chapters-empty       : the "be the first chapter" empty state
 *                              (shown while the vault has zero entries)
 *   - .start-chapter-*      : the application form on /start-a-chapter/
 *
 * Empty state is a high-conversion surface — strong headline, clear
 * CTA, no chrome competing with it.
 */

/* ---- Empty state on /chapters/ ------------------------------ */

.chapters-empty {
  background: var(--bone-pulp);
  border: 2px solid var(--ink);
  padding: var(--space-7);
  margin-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
.chapters-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.chapters-empty__inner { position: relative; z-index: 1; max-width: 60ch; }
.chapters-empty__head {
  margin: 0 0 var(--space-4);
  line-height: 0.95;
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.chapters-empty__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.chapters-empty__cta { margin: var(--space-5) 0 0; }

/* ---- Start a Chapter page ----------------------------------- */

.start-chapter-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.start-chapter-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.start-chapter-hero__sub {
  margin: var(--space-3) 0 var(--space-5);
  line-height: 0.95;
}
.start-chapter-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

.start-chapter-form-section {
  background: var(--bone-pulp);
  padding-block: var(--space-8);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.start-chapter-form-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.start-chapter-form-section__inner { position: relative; z-index: 1; }
.start-chapter-form-section__title {
  margin: 0 0 var(--space-3);
  line-height: 0.95;
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.start-chapter-form-section__kicker {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: 60ch;
}

.start-chapter-form {
  display: grid;
  gap: var(--space-5);
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-6);
}
.start-chapter-form__field {
  display: grid;
  gap: var(--space-2);
}
.start-chapter-form__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.start-chapter-form__input,
.start-chapter-form__textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-3);
  width: 100%;
}
.start-chapter-form__textarea { min-height: 7rem; resize: vertical; }
.start-chapter-form__input:focus,
.start-chapter-form__textarea:focus {
  outline: 3px solid var(--spilled-red);
  outline-offset: 2px;
}
.start-chapter-form__hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
}

.start-chapter-form__field--pledge .start-chapter-form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  align-items: start;
  cursor: pointer;
}
.start-chapter-form__check input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--spilled-red);
  width: 18px;
  height: 18px;
}

.start-chapter-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.start-chapter-form__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* ---- FAQ on /start-a-chapter/ ------------------------------- */

.start-chapter-faq { background: var(--bone); padding-block: var(--space-8); }
.start-chapter-faq__title {
  margin: 0 0 var(--space-5);
  line-height: 0.95;
  border-bottom: 4px solid var(--spilled-red);
  padding-bottom: var(--space-3);
}
.start-chapter-faq__list { margin: 0; display: grid; gap: var(--space-5); }
.start-chapter-faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.start-chapter-faq__a {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}

.start-chapter-cta { background: var(--bone-pulp); padding-block: var(--space-8); border-top: 2px solid var(--ink); }

/* ============================================================ *
 * Entity profile pages · 9.8 · custom-profile-*.hbs
 * ============================================================ *
 *
 * Shared chrome for /people/<slug>/, /companies/<slug>/, and
 * /regulations/<slug>/ pages — actually rendered at root-level
 * slugs in v1 (/<slug>/) until Sprint 2e introduces the
 * routes.yaml hierarchy. Each profile uses the same hero +
 * body + cross-rail + CTA flow; the .profile--{type} modifier
 * is reserved for any per-type accent treatment.
 *
 * Body content is server-rendered by the Admin API sync script
 * and inserted via {{content}}. The custom template provides
 * the surrounding chrome — that's why the prose styling lives
 * inside .profile-body__prose and inherits the existing .prose
 * layer from base.css.
 */

.profile {
  background: var(--bone);
}

.profile-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-6);
}
.profile-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.profile-hero__name {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
  word-break: break-word;
}
.profile-hero__excerpt {
  font-size: var(--type-lede);
  line-height: 1.45;
  color: var(--ink);
  margin: var(--space-4) 0 0;
  max-width: 60ch;
}

.profile-body {
  background: var(--bone);
  padding-block: var(--space-7) var(--space-8);
}
.profile-body__prose {
  /* Inherits .prose base. Spacing tightened for the dense
     profile structure (multiple short sections vs. long-form). */
}
.profile-body__prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.8vw + 0.75rem, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 4px solid var(--spilled-red);
}
.profile-body__prose .profile-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.profile-body__prose .profile-summary {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
}

.profile-body__prose ul.profile-quotes,
.profile-body__prose ul.profile-moves,
.profile-body__prose ul.profile-key-people,
.profile-body__prose ul.profile-related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.profile-body__prose ul.profile-quotes li {
  border-left: 4px solid var(--spilled-red);
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bone-pulp);
}
.profile-body__prose ul.profile-moves li,
.profile-body__prose ul.profile-key-people li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bone-pulp);
  color: var(--ink);
}
.profile-body__prose ul.profile-moves li:last-child,
.profile-body__prose ul.profile-key-people li:last-child {
  border-bottom: 0;
}

.profile-body__prose ul.profile-related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.profile-body__prose ul.profile-related li {
  padding: 0;
}
.profile-body__prose ul.profile-related a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  text-decoration: none;
}
.profile-body__prose ul.profile-related a:hover {
  background: var(--ink);
  color: var(--bone);
}

.profile-body__prose aside.profile-meta {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}
.profile-body__prose aside.profile-meta p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
}

/* ---- Cross-rail (every-page footer nav) -------------------- */

.profile-cross-rail {
  background: var(--bone-pulp);
  padding-block: var(--space-6);
  border-block: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.profile-cross-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.profile-cross-rail__kicker {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.profile-cross-rail__list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.profile-cross-rail__list a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.profile-cross-rail__list a:hover { border-bottom-color: var(--spilled-red); }

.profile-cta {
  background: var(--bone);
  padding-block: var(--space-7) var(--space-8);
}

/* ---- Card link behavior on directory pages ----------------- */

.entities-card__name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.entities-card__name-link:hover {
  color: var(--spilled-red);
  border-bottom-color: var(--spilled-red);
}

/* ============================================================ *
 * The Reports · 9.9 · page-reports.hbs + custom-report.hbs
 * ============================================================ *
 *
 * Two surfaces: the directory at /reports/ (.reports-*) and the
 * per-report chrome served by custom-report.hbs (.report-*).
 *
 * The directory is editorial — each report card is full-width with
 * a big headline stat block. The per-report chrome is documentary —
 * a long-form research layout with a sticky download CTA and a
 * sources rail at the bottom.
 */

/* ---- Directory hero ----------------------------------------- */

.reports-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.reports-hero__head {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.reports-hero__sub {
  margin: var(--space-3) 0 var(--space-5);
  line-height: 0.95;
}
.reports-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.reports-hero__lede:last-of-type { margin-bottom: 0; }

/* ---- Directory stats grid ---------------------------------- */

.reports-stats {
  background: var(--bone-pulp);
  padding-block: var(--space-7);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.reports-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.reports-stats__inner { position: relative; z-index: 1; }
.reports-stats__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}
.reports-stats__card {
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reports-stats__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
}
.reports-stats__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 0.95;
  color: var(--ink);
}
.reports-stats__num--small {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ---- Directory report cards -------------------------------- */

.reports-list {
  background: var(--bone);
  padding-block: var(--space-8);
}
.reports-card {
  border: 2px solid var(--ink);
  background: var(--bone);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.reports-card:last-child { margin-bottom: 0; }
.reports-card--coming-soon { opacity: 0.65; background: var(--bone-pulp); }

.reports-card__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.reports-card__title {
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.reports-card__title-link {
  color: inherit;
  border-bottom: 4px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.reports-card__title-link:hover { border-bottom-color: var(--spilled-red); }
.reports-card__dek {
  font-size: var(--type-lede);
  line-height: 1.45;
  color: var(--ink);
  margin: var(--space-3) 0 0;
  max-width: 60ch;
}

.reports-card__stat-block {
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-4);
  align-items: center;
  border-left: 6px solid var(--spilled-red);
}
.reports-card__stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.reports-card__stat-label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--bone-pulp);
}

.reports-card__body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.reports-card__footer {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.reports-card__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
}
.reports-card__meta strong { color: var(--ink); }
.reports-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* ---- Directory submit + CTA + footer ----------------------- */

.reports-submit {
  padding-block: var(--space-9);
  border-block: var(--rule-bold);
}
.reports-submit__title { margin: 0 0 var(--space-4); line-height: 0.95; }
.reports-submit__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.reports-submit__cta { margin: 0 0 var(--space-4); }
.reports-submit__fine {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  margin: 0;
}

.reports-cta { background: var(--bone); padding-block: var(--space-8); }
.reports-footer-note {
  background: var(--bone);
  padding-block: var(--space-6);
  border-top: 2px solid var(--ink);
}
.reports-footer-note__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
  text-align: center;
}
.reports-footer-note__text strong { color: var(--ink); }

/* ============================================================ *
 * Per-report chrome · custom-report.hbs
 * ============================================================ */

.report-hero {
  background: var(--bone);
  border-bottom: var(--rule-bold);
  padding-block: var(--space-8) var(--space-7);
}
.report-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-4);
}
.report-hero__title {
  font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
}
.report-hero__dek {
  font-size: var(--type-lede);
  line-height: 1.5;
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-6);
  max-width: 60ch;
}
.report-hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.report-hero__meta strong { color: var(--ink); }

.report-body {
  background: var(--bone);
  padding-block: var(--space-7) var(--space-8);
}
.report-body__prose {
  /* inherits .prose base */
}
.report-body__prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 4px solid var(--spilled-red);
}
.report-body__prose h2:first-child { margin-top: 0; }
.report-body__prose h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--ink);
}

/* In-body stat call-outs */
.report-body__prose .report-stat {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw + 1rem, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--spilled-red);
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-block: 4px solid var(--ink);
  text-align: center;
}

/* Primary-source receipt block */
.report-body__prose .report-receipt {
  background: var(--bone-pulp);
  border-left: 6px solid var(--spilled-red);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.report-body__prose .report-receipt__quote {
  font-family: var(--font-display);
  font-size: var(--type-pull);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.report-body__prose .report-receipt__cite {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
}
.report-body__prose .report-receipt__cite strong { color: var(--ink); }

/* Numbered figures + sources */
.report-body__prose ol.report-sources {
  list-style: none;
  padding: 0;
  counter-reset: ref;
  display: grid;
  gap: var(--space-3);
}
.report-body__prose ol.report-sources li {
  counter-increment: ref;
  padding-left: 3.5rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.5;
}
.report-body__prose ol.report-sources li::before {
  content: counter(ref, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--spilled-red);
}

.report-download {
  padding-block: var(--space-9);
  border-block: var(--rule-bold);
}
.report-download__title { margin: 0 0 var(--space-4); line-height: 0.95; }
.report-download__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.report-download__cta { margin: 0 0 var(--space-4); }
.report-download__fine {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-pulp);
  margin: 0;
}

.report-cross-rail {
  background: var(--bone-pulp);
  padding-block: var(--space-6);
  border-bottom: 2px solid var(--ink);
}
.report-cross-rail__kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spilled-red);
  margin: 0 0 var(--space-3);
}
.report-cross-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.report-cross-rail__list a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.report-cross-rail__list a:hover { border-bottom-color: var(--spilled-red); }

.report-cta { background: var(--bone); padding-block: var(--space-7) var(--space-8); }