/* ─────────────────────────────────────────────────────────────────────
   SiftingSignal — editorial design system
   Phase 1: masthead + section chrome. Layers on top of mobile.css; uses
   additive class names (`ed2-*`, `.sec-head`, `.sec-headline`) so it
   doesn't fight the existing chrome. Where it needs to override an
   existing rule (e.g. `.brand`, `.ed-section-head`, `.ed-label`), the
   override is selector-specific and labelled.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Editorial palette — warmer cream paper, single ink-blue accent.
     The five tier colours stay where they were; they're for data viz,
     not for chrome accents. */
  --ed-paper:        #F6F4EE;
  --ed-paper-2:      #EDE8DC;
  --ed-surface:      #FFFFFF;
  --ed-ink:          #0F1014;
  --ed-ink-2:        #2A2C33;
  --ed-ink-3:        #585B66;
  --ed-muted:        #8E909A;
  --ed-rule:         #D9D5C8;
  --ed-rule-strong:  #B8B4A6;
  --ed-accent:       #1F3A52;
  --ed-accent-2:     #305C7A;
  --ed-accent-soft:  #D9E2EC;

  /* Brand teal — matches the logomark family (signal #14B8A6) but tuned
   * slightly darker for body/nav legibility on cream. Use for nav text
   * and brand-mark-adjacent chrome. Use --ed-accent (navy) for accent
   * underlines, citation chips, chart axes — anywhere navy still reads
   * "considered." 2026-06-06 operator-locked. */
  --ed-teal:         #0F766E;
  --ed-teal-hover:   #0B5E57;

  --ed-serif: "Newsreader", "Source Serif 4", "Tiempos", Georgia, serif;
  --ed-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* OVERRIDE the legacy CSS variables that the inline <style> block
     (from build_media_home.py / build_niche_home.py) feeds to every
     rule using `var(--bg)`, `var(--ink)`, etc. By aliasing them to
     the editorial values, the warm cream + ink-blue palette cascades
     through every legacy selector without me having to rewrite each
     one. This is what was making the live look 'cold' even though
     the editorial vars themselves were correct. */
  --bg:            #F6F4EE !important;
  --surface:       #FFFFFF !important;
  --surface-2:     #EDE8DC !important;
  --ink:           #0F1014 !important;
  --ink-2:         #2A2C33 !important;
  --muted:         #585B66 !important;
  --border:        #D9D5C8 !important;
  --border-strong: #B8B4A6 !important;
  --signal:        #1F3A52 !important;
  --signal-2:      #305C7A !important;
  --font-serif:    "Newsreader", "Source Serif 4", "Tiempos", Georgia, serif !important;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace !important;
}

/* Apply the warm paper to the page (overrides the cold gray bg). */
body { background: var(--ed-paper); }

/* ─── EDITORIAL MASTHEAD (matches v4 mockup) ──────────────────────
   Replaces the old sticky .header-wrap. Three-column row: edition
   meta on the left, big serif wordmark in the middle, niche nav on
   the right. Non-sticky — mirrors a print front-page masthead. */
.ed-masthead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 32px 22px;
  /* 2026-06-06 evening: softened further. Was ed-rule-strong (#C4C0B0);
     drop to plain ed-rule (#D8D2C3) so the masthead → section-nav
     transition reads as one quiet hairline, not a bar. */
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
}
/* Single row: edition meta on the left, refined wordmark in the
   middle, niche tabs on the right.
   2026-06-06 evening: center-align rows (was baseline 'end'). Centering
   makes the small dateline + small niche nav sit visually balanced
   against the wordmark instead of floating below its baseline. */
.ed-masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
/* Dateline — the smallest, lightest chrome at the top. Pure utility. */
.ed-masthead__edition {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}
.ed-masthead__edition b { color: var(--ed-ink); font-weight: 600; }
.ed-masthead__brandwrap { text-align: center; }
/* Wordmark — refined 2026-06-06 evening.
   - 60px → 48px: less classified-ad, more editorial-display
   - letter-spacing -.02em → -.026em: tighter modern cut
   - Weight contrast 400/700 → 500/600: narrows the stroke-thickness
     gap between "Sifting" (light) and "Signal" (bold). Newsreader at
     400 vs 700 had visibly different character shapes; 500/600 still
     emphasises "Signal" without the harshness.
   - Sift mark: 48px → 32px so it stops competing with the wordmark. */
.ed-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.026em;
  white-space: nowrap;
}
.ed-masthead__brand .sift   { font-weight: 500; color: var(--ed-ink-2); }
.ed-masthead__brand .signal { font-weight: 600; color: var(--ed-ink); }
.ed-masthead__mark {
  color: var(--ed-accent);
  flex-shrink: 0;
  display: block;
  width: 32px !important;
  height: 32px !important;
}
/* Niche nav (top-right) — wayfinding. Inactive items recede; the
   active niche carries weight + a thicker underline so the chosen
   desk reads as the page identity. */
.ed-masthead__nav {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  font-family: var(--ed-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* 2026-06-06: niche nav text picks up brand teal (--ed-teal, #0F766E) —
 * a slightly darker step of the logomark teal #14B8A6 so it stays
 * legible on cream paper. Active niche stays full ink with a teal
 * underline so the chosen desk reads as the page identity. */
.ed-masthead__nav a {
  text-decoration: none;
  color: var(--ed-teal);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.ed-masthead__nav a:hover { color: var(--ed-teal-hover); }
.ed-masthead__nav a.active {
  color: var(--ed-ink);
  border-bottom: 2px solid var(--ed-teal);
  font-weight: 700;
  padding-bottom: 4px;
}
/* 2026-06-09 descope: "preview" chip on AI/Money/Health/Sports nav items,
   so a visitor at /ai-home isn't surprised by an empty consensus ledger. */
.ed-nav-preview {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ed-teal);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.20);
  border-radius: 3px;
  vertical-align: 1px;
}
@media (max-width: 760px) {
  .ed-masthead {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px 14px;
    gap: 8px;
  }
  .ed-masthead__edition,
  .ed-masthead__nav { justify-content: center; flex-wrap: wrap; gap: 14px; }
  .ed-masthead__brand { font-size: 36px; gap: 10px; letter-spacing: -.024em; }
  .ed-masthead__mark { width: 26px !important; height: 26px !important; }
}

/* Suppress the old sticky header + page-nav if they still appear (e.g.
   on niche pages that haven't been rebuilt yet). */
.header-wrap,
.page-nav { display: none !important; }

/* Dateline that follows the masthead — italic serif line per the v4
   mockup, with the brand promise + this-issue stats. */
.ed-dateline--standfirst {
  max-width: 1180px;
  margin: 0 auto 40px !important;
  padding: 14px 32px 16px !important;
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ed-ink-2) !important;
  border-bottom: 1px solid var(--ed-rule) !important;
}
@media (max-width: 760px) {
  .ed-dateline--standfirst { font-size: 14px !important; padding: 10px 18px 12px !important; }
}

/* Subscribe CTA in the dateline — accent color, no italic so it
   reads as an action against the surrounding italic standfirst. */
.ed-dateline--standfirst .ed-dateline__subscribe {
  font-family: var(--ed-sans, var(--ed-serif)) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--ed-accent) !important;
  text-decoration: none !important;
  letter-spacing: -.002em !important;
  border-bottom: 1px solid var(--ed-accent) !important;
  padding-bottom: 1px !important;
}
.ed-dateline--standfirst .ed-dateline__subscribe:hover { color: var(--ed-ink) !important; border-bottom-color: var(--ed-ink) !important; }
@media (max-width: 760px) {
  .ed-dateline--standfirst .ed-dateline__subscribe { display: block; margin-top: 6px; }
  .ed-dateline--standfirst .ed-dateline__sep-cta { display: none; }
}

/* Mid-page subscribe prompt — 2026-06-06 reskin after operator caught
 * the old khaki-block-with-teal-left-bar version as "out of place,
 * inconsistent with brand aesthetic." Replaces card-shaped widget with
 * a §12.2 editorial interstitial: hairline-rule top + bottom, no
 * background fill, mono small-caps section label, italic serif body.
 * Reads as a magazine interlude between §05 Hi·Lo and §06 Rising,
 * not as a marketing widget. */
.ed-midpage-sub {
  max-width: 640px;
  margin: 36px auto;
  padding: 18px 24px;
  border-top: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
  background: transparent;
  position: relative;
  text-align: center;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
}
/* Mono small-caps kicker — replaces the literal "Reading along?" prose
 * with §12.2 section-label vocabulary that scans as editorial chrome.
 * The label sits above the body copy, centered, just like a magazine
 * "Reader's Letters" or "Editor's note" interstitial. */
.ed-midpage-sub::before {
  content: "Reading along";
  display: block;
  margin: 0 auto 8px;
  font-family: var(--ed-mono);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}
.ed-midpage-sub p { margin: 0; }
.ed-midpage-sub a {
  color: var(--ed-ink);
  font-style: italic;
  font-weight: 500;
  border-bottom: 1px solid var(--ed-rule-strong);
  text-decoration: none;
  transition: border-color 120ms ease;
}
.ed-midpage-sub a:hover { border-bottom-color: var(--ed-ink); }
.ed-midpage-sub__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 16px;
  font-family: var(--ed-mono);
  color: var(--ed-ink-3);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 120ms ease;
}
.ed-midpage-sub__close:hover { color: var(--ed-ink); opacity: 1; }
@media (max-width: 760px) {
  .ed-midpage-sub {
    font-size: 14.5px;
    padding: 16px 24px;
    margin: 24px 14px;
  }
  .ed-midpage-sub::before { font-size: 10px; letter-spacing: .16em; }
}

/* Subscribe gate — appears INLINE when a visitor tries to vote,
   react, or otherwise interact without being subscribed. Sized to
   match the surrounding chrome; not a modal. */
/* Subscribe gate — modernised 2026-06-06 evening. Was a beige callout
   box with a thick 3px left rule and square corners; operator caught
   it as dated. New version: paper background with a soft hairline,
   12px border-radius, pill-shaped button, niche checkboxes rendered as
   toggleable chips. Reads as a contemporary editorial form, not a
   2010s blog callout. */
.ss-gate {
  background: var(--ed-paper);
  border: 1px solid var(--ed-rule);
  border-radius: 12px;
  padding: 22px 24px 18px;
  margin: 20px 0;
  font-family: var(--ed-serif);
  color: var(--ed-ink);
  box-shadow: 0 1px 0 rgba(20, 18, 12, 0.02);
}
.ss-gate__head {
  font-family: var(--ed-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin-bottom: 6px;
}
.ss-gate__blurb {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  margin: 0 0 14px;
}
.ss-gate__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ss-gate__email {
  flex: 1 1 220px;
  font-family: var(--ed-serif);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--ed-rule-strong);
  border-radius: 8px;
  background: var(--ed-paper);
  color: var(--ed-ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ss-gate__email:focus {
  outline: none;
  border-color: var(--ed-accent);
  box-shadow: 0 0 0 3px rgba(14, 125, 125, 0.12);
}
.ss-gate__submit {
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--ed-sans, var(--ed-serif));
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease;
}
.ss-gate__submit:hover { background: var(--ed-accent); }

/* Niche chips — replace the square checkboxes. The native input is
   visually hidden; the label becomes a tappable pill. Visited /
   :checked state fills with the accent color so the selected niches
   are visible at a glance. */
.ss-gate__niches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 8px;
}
.ss-gate__niches label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-ink-2);
  background: transparent;
  border: 1px solid var(--ed-rule);
  border-radius: 999px;
  padding: 7px 12px 7px 12px;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.ss-gate__niches label:hover {
  border-color: var(--ed-accent);
  color: var(--ed-ink);
}
.ss-gate__niches input[type="checkbox"] {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}
.ss-gate__niches label:has(input[type="checkbox"]:checked) {
  background: var(--ed-ink);
  border-color: var(--ed-ink);
  color: var(--ed-paper);
}

.ss-gate__skip {
  background: transparent;
  border: none;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ed-ink-3);
  cursor: pointer;
  padding: 6px 0 0;
  margin-left: auto;
  text-decoration: underline;
  text-decoration-color: var(--ed-rule);
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.ss-gate__skip:hover {
  color: var(--ed-ink);
  text-decoration-color: var(--ed-ink-3);
}
.ss-gate__status {
  flex-basis: 100%;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ed-ink-3);
  margin-top: 8px;
  min-height: 18px;
}
.ss-gate__status--ok { color: var(--ed-accent); }
.ss-gate__status--err { color: #9F3A1E; }

/* Pre-gate stance highlight (when a vote is held in flight). The
   stance segment the visitor clicked stays visually selected while
   the gate is up — so the action context is preserved. */
.tq-seg.ss-gate-pending { outline: 2px solid var(--ed-accent); outline-offset: -2px; }

/* Nominate link in the colophon — a SINGLE deliberate link, not a
   form. Reads as a considered next step ("you'd take this if you
   actually have someone in mind"), distinct from the inline
   subscribe form above it which is quick and easy. */
.ed-nominate-link {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ed-ink-3);
  line-height: 1.5;
  margin: 18px 0 2px;
  padding-top: 14px;
  border-top: 1px dotted var(--ed-rule);
}
.ed-nominate-link a {
  color: var(--ed-accent);
  font-style: normal;
  font-weight: 500;
  border-bottom: 1px solid var(--ed-accent);
}
.ed-nominate-link a:hover { color: var(--ed-ink); border-bottom-color: var(--ed-ink); }

/* Exit-intent overlay — fires once per session if visitor moves to
   leave (cursor crosses top of viewport). Quiet semi-transparent
   scrim + centered gate; close button + Maybe-later both dismiss
   for the rest of the session. */
/* Scroll-trigger / exit-intent overlay — modernised 2026-06-06 evening.
   Was a square card with sharp corners; now rounded 16px with a
   softer shadow + scrim. Close button becomes a rounded ghost icon. */
.ss-exit-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 16, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  animation: ss-exit-fade .2s ease;
  padding: 24px;
}
@keyframes ss-exit-fade { from { opacity: 0; } to { opacity: 1; } }
.ss-exit-inner {
  background: var(--ed-paper);
  max-width: 480px;
  width: 100%;
  padding: 4px 0 0;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 16, 20, 0.22),
              0 2px 8px rgba(15, 16, 20, 0.08);
  animation: ss-exit-rise .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ss-exit-rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ss-exit-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent;
  border: 1px solid var(--ed-rule);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--ed-mono); font-size: 18px; line-height: 1;
  color: var(--ed-ink-3); padding: 0;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.ss-exit-close:hover {
  color: var(--ed-ink);
  border-color: var(--ed-ink);
  background: var(--ed-paper-2);
}
.ss-exit-host > .ss-gate {
  /* Inside the overlay, the gate loses its own card chrome — the
     overlay container IS the card now. */
  border: none;
  border-radius: 16px;
  box-shadow: none;
  margin: 0;
  background: var(--ed-paper);
  padding: 32px 32px 26px;
}

/* Section nav — two-level: sticky+background on the outer, centered
   max-width flex row on the inner. Outer spans full viewport width
   (so the backdrop blur covers edge-to-edge); inner is the constrained
   1180px box. Single-level layout had Firefox painting the strip
   wider than max-width in some viewports, which left the anchors
   hugging the left edge despite justify-content: center. */
.ed-section-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 244, 238, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  /* 2026-06-06: dropped border-bottom. The masthead's heavy ink rule
     above already defines the chrome boundary; the section nav's own
     hairline + the dateline's natural margin + the §01 kicker rule were
     stacking up as 4 visible lines at the top of the page. */
}
/* Section nav (sticky in-page) — utility navigation. Sits BELOW the
   masthead niche-nav and ABOVE every section kicker, so it has to
   read as plumbing, not as a heading. Smaller + lighter than the
   niche nav above; the active section kicker is what defines
   "where you are in the page," not this strip. */
.ed-section-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 32px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* 2026-06-06: section nav text uses brand teal (--ed-teal) to match the
 * masthead niche nav. Hover deepens to --ed-teal-hover. */
.ed-section-nav a {
  color: var(--ed-teal);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.ed-section-nav a:hover {
  color: var(--ed-teal-hover);
  border-bottom-color: var(--ed-teal-hover);
}
/* Anchor-target scroll offset — when the user clicks an anchor, the
   browser jumps so the target sits at viewport top. With the section
   nav pinned at top: 0, the kicker would slide under the nav.
   scroll-margin-top pushes the jump down by the nav's height + the
   small breathing room above each kicker.
   2026-06-06: bumped from 64px to 88px because Spotlight + Today's
   Call were landing too early and showing preceding section content.
   The sticky nav is ~36-40px tall; 88px puts the kicker ~50px below
   the nav, which reads as "you arrived at the start of a section."
   The figure-share buttons rely on the same anchor offset. */
#editorial-section, #sift, #the-signal, #hero,
#seesaw-section, #rising-section, #mirror-section,
#where-this-comes-from {
  scroll-margin-top: 88px;
}
@media (max-width: 760px) {
  .ed-section-nav__inner {
    padding: 10px 18px 12px;
    gap: 14px;
    font-size: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
}

/* ─── STICKY HEADER CHROME ────────────────────────────────────────
   Restyle the existing `.header-wrap` row so the niche tabs and the
   "Sign in" affordance read as editorial — text + accent underline,
   not chip-with-pulse-dot dashboard chrome. */
.header-wrap {
  background: var(--ed-paper) !important;
  border-bottom: 1px solid var(--ed-rule) !important;
  box-shadow: none !important;
}
.header { padding: 12px 24px !important; }

.niche-tabs {
  display: flex;
  gap: 22px;
}
.niche-tab,
.niche-tabs a {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 4px 0 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .12s, border-color .12s;
}
.niche-tab:hover { color: var(--ed-ink) !important; }
.niche-tab.active {
  color: var(--ed-ink) !important;
  border-bottom-color: var(--ed-accent) !important;
  font-weight: 600 !important;
}
.niche-tab.disabled,
.niche-tab.disabled:hover { color: var(--ed-muted) !important; cursor: not-allowed; }
.niche-tab .pulse { display: none !important; }

.header-right { gap: 18px !important; }
.live-chip {
  font-family: var(--ed-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  color: var(--ed-ink-3) !important;
  padding: 0 !important;
}
.live-chip .dot {
  width: 6px !important; height: 6px !important;
  background: var(--ed-accent) !important;
}
.signin {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink) !important;
  background: transparent !important;
  border: 1px solid var(--ed-ink) !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.signin:hover { background: var(--ed-ink) !important; color: var(--ed-paper) !important; }

/* JUMP TO sticky section nav — strip down to mono text-only rule. */
.page-nav {
  background: var(--ed-paper) !important;
  border-bottom: 1px solid var(--ed-rule) !important;
  box-shadow: none !important;
}
.page-nav-inner {
  padding: 10px 24px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px !important;
  align-items: center;
}
.page-nav .nav-label {
  font-family: var(--ed-mono) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ed-muted) !important;
}
.page-nav a {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  color: var(--ed-ink-2) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 2px;
  background: transparent !important;
}
.page-nav a:hover {
  color: var(--ed-ink) !important;
  border-bottom-color: var(--ed-accent) !important;
}

/* ─── BRAND / LOGOMARK / WORDMARK ─────────────────────────────────────
   Overrides the existing sticky-header `.brand` link to use the new
   logomark SVG + the Sifting/Signal two-weight wordmark. */
.header-wrap { background: var(--ed-paper); border-bottom-color: var(--ed-rule); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ed-serif);
  text-decoration: none;
  letter-spacing: -.015em;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ed-ink);
}
.brand img { display: none; }                 /* hide the old PNG */
.brand .ed-mark { color: var(--ed-accent); flex-shrink: 0; display: block; }
.brand .ed-wm   { display: inline-block; }
.brand .ed-wm .sift   { font-weight: 400; color: var(--ed-ink-2); }
.brand .ed-wm .signal { font-weight: 700; color: var(--ed-ink); }
.brand .tld { display: none; }

/* ─── DATELINE STRIP ─────────────────────────────────────────────────
   Optional thin strip beneath the sticky header for issue metadata.
   Not sticky — scrolls with the page. */
.ed-dateline {
  text-align: center;
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  padding: 12px 0 14px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--ed-rule);
}
.ed-dateline b { color: var(--ed-ink); font-weight: 600; }
.ed-dateline .sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ed-accent);
  vertical-align: middle;
  margin: 0 12px 3px;
}
@media (max-width: 640px) {
  .ed-dateline { font-size: 10px; padding: 10px 8px 12px; }
  .ed-dateline .sep { margin: 0 8px 2px; }
}

/* ─── SECTION HEADER (kicker + serif headline + standfirst) ──────────
   Replaces the old `.ed-section-head` (num + label) + `.ed-label muted`
   standfirst pair. The new structure lives inside `.ed2-sechead` so
   the cascade stays clean. */
/* 2026-06-06: hierarchy rebuild. Five typographic levels share the
   masthead-top region (dateline, niche nav, section nav, section
   kicker, headline) — they were all 11px mono. The section kicker
   needs to read as "the start of a chapter," not a fourth nav strip.
   - num bumped to 22px tabular semibold accent
   - kicker label bumped to 13px, weight 600, wider letter-spacing
   - generous margin-top so the kicker breathes away from sticky nav
*/
.ed2-sechead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
  /* 2026-06-06: was 56px. Operator: "gap between nav and §01 too
     tall, lot of empty space." Brought down to 24px; the section
     kicker still reads as a chapter start because of the big numeral
     and bold mono label, without leaving a void above. */
  margin: 24px 0 24px;
}
.ed2-sechead__num {
  font-family: var(--ed-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ed-accent);
  line-height: 1;
}
.ed2-sechead__kicker {
  font-family: var(--ed-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink);
  line-height: 1.1;
}
.ed2-sechead__byline {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ed-ink-3);
}
.ed2-sechead__byline .avatar {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ed-accent-soft); vertical-align: middle; margin-right: 6px;
  border: 1px solid var(--ed-rule-strong);
}
@media (max-width: 760px) {
  .ed2-sechead { grid-template-columns: auto 1fr; gap: 12px; }
  .ed2-sechead__byline { grid-column: 1 / -1; }
}

.ed2-headline {
  font-family: var(--ed-serif);
  font-weight: 500;
  /* 50px / 22ch was tuned for the shortest section headlines
     ("Where this week landed.", "Coming up fast."). Longer headlines
     (§02 "Where experts and the crowd agree, and where they split.",
     §05 "Two stories — one the experts are talking about and the
     crowd isn't, one the crowd is talking about and the experts
     aren't.") hit that 22ch cap and wrapped to 3-5 lines at 50px,
     reading like a wall instead of a headline. Same sizing now as
     .sp-feature__headline — 42px / 36ch — which lets a 60-char
     headline land in two lines and a long Hi-Lo headline land in
     three instead of five. */
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ed-ink);
  margin-bottom: 12px;
  max-width: 36ch;
}
.ed2-headline em { font-style: italic; color: var(--ed-ink); font-weight: 500; }
@media (max-width: 760px) {
  .ed2-headline { font-size: 30px; max-width: 100%; }
}

.ed2-standfirst {
  font-family: var(--ed-serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ed-ink-2);
  max-width: 65ch;
  margin-bottom: 36px;
  font-weight: 400;
}
.ed2-standfirst em { font-style: italic; color: var(--ed-ink); }
.ed2-standfirst--with-cap::first-letter {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 4.2em;
  line-height: .85;
  float: left;
  padding: 6px 12px 0 0;
  margin-bottom: -6px;
  color: var(--ed-accent);
  shape-outside: margin-box;
}
@media (max-width: 760px) {
  .ed2-standfirst { font-size: 17.5px; margin-bottom: 28px; }
  .ed2-standfirst--with-cap::first-letter { font-size: 3.5em; padding: 4px 10px 0 0; }
}

/* ─── DEPRECATE THE OLD SECTION HEADER + LABEL ──────────────────────
   Once we've swapped a section's HTML to the new structure, hide the
   old `.ed-section-head` block to prevent stale markup leaking in if a
   build-script regression re-emits it. Scoped to sections that have
   the new sibling `.ed2-sechead` set. */
.section:has(> .ed2-sechead) > .ed-section-head,
.section:has(> .ed2-sechead) > .ed-label.muted {
  display: none;
}

/* ─── PRINT-LIKE LIVE TYPOGRAPHY OVERRIDE ───────────────────────────
   Restyle the existing `.hero h1` (Today's call statement) so the
   sticky-header niche line keeps working but the H1 itself reads as
   serif editorial. (Doesn't touch the renderer; just the type.) */
.hero h1 {
  font-family: var(--ed-serif);
  font-weight: 500;
  letter-spacing: -.018em;
}

/* ─── §01 SIFT — quadrant callouts (Phase 4) ────────────────────────
   The chart's right-side 2×2 grid of cards. viz.js used to inline-
   style every property; the renderer now emits class names only and
   the styling lives here. Each callout carries a tier colour as the
   `--qcol` custom property (set on the element by viz.js) so the
   accent rules below all read from one source of truth. */
.viz-worthmap { background: transparent; }

/* 2026-06-06 late — operator caught corner labels rendering as ink black
 * even though viz.js sets fill="#0F766E". Cause: the legacy
 * viz/viz.css rule `.viz text { fill: var(--ink) }` (line 33) wins the
 * cascade because every chart container also carries the `.viz` class
 * for the original Inter-sans typography. SVG `fill="..."` attribute
 * has 0 specificity vs the CSS rule.
 *
 * Fix: tell every text node inside `.viz-worthmap` to honor the SVG
 * `fill` attribute. We use `attr(fill)` so the inline SVG attribute
 * wins, and fall back to brand teal for any text element that
 * forgot to set fill. Each rule loaded after viz.css and inside a
 * more-specific descendant selector — wins on both axes. */
.viz-worthmap svg text { fill: var(--ed-teal); }
.viz-worthmap svg text[fill] { fill: attr(fill type(<color>), var(--ed-teal)); }
/* Safari/older browsers can't parse attr(fill type(<color>)). Belt + braces:
 * scope explicit fallbacks for each known label color used by renderWorthMap.
 * If the SVG attribute is one of these known hex values, the matching
 * descendant rule sets the same color so the result is identical to what
 * the SVG attribute alone would have produced. */
.viz-worthmap svg text[fill="#0F766E"] { fill: #0F766E; }
.viz-worthmap svg text[fill="#585B66"] { fill: #585B66; }
.viz-worthmap svg text[fill="#0F1014"] { fill: #0F1014; }

/* 2026-06-09: operator caught a blue square outline on clicked dots.
 * Browsers draw a default focus outline on focusable SVG elements
 * (the dots have tabindex="0" for keyboard accessibility), and the
 * outline follows the element's bounding rectangle, which on an SVG
 * <circle> is a SQUARE around it. Replace with a brand-correct focus
 * ring: hide on mouse focus, show a teal circle on keyboard focus. */
.viz-worthmap svg circle.dot:focus { outline: none; }
.viz-worthmap svg circle.dot:focus-visible {
  outline: 2px solid var(--ed-teal);
  outline-offset: 3px;
  /* Custom rounded outline so it matches the dot shape, not a square box. */
  border-radius: 999px;
}

/* No outer wrap border on the chart — matches the v4 mockup which
   floats the chart directly on the cream paper with only the soft
   quadrant tints inside. */
.viz-worthmap .wm-chart {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 2026-06-06 v2 reskin — operator caught coloured top-borders (`3px solid
 * var(--qcol)`) + redundant mono kicker ("TOP LEFT") as dashboard-y.
 * v2: hairline top, italic-serif quadrant name + ink-3 separator dot +
 * italic-serif tabular count, editorial gloss line beneath. Position
 * carries quadrant identity; chrome stays out of the way. */
.viz-quadrant-callout {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--ed-rule) !important;
  border-radius: 0 !important;
  padding: 16px 8px 10px !important;
  font-family: var(--ed-serif);
}
.viz-quadrant-callout .wm-callout-name {
  margin: 0 0 4px;
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--ed-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.viz-quadrant-callout .wm-callout-title {
  /* 2026-06-06 late: operator asked the quadrant names go brand teal so
   * they contrast against the navy dot ladder + match the chart's corner
   * labels. Same --ed-teal as the masthead nav. */
  color: var(--ed-teal);
}
.viz-quadrant-callout .wm-callout-sep {
  color: var(--ed-rule-strong);
  font-style: normal;
  font-weight: 400;
}
.viz-quadrant-callout .wm-callout-n {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ed-ink-3);
  font-variant-numeric: tabular-nums;
}
.viz-quadrant-callout .wm-callout-sub {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ed-ink-3);
  margin: 0 0 14px;
  text-transform: none;
  letter-spacing: 0;
}

.viz-quadrant-callout__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 7px 6px 7px 0;
  font-family: var(--ed-serif);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ed-ink-2);
  cursor: pointer;
  border-top: 1px dotted var(--ed-rule);
}
.wm-rows .viz-quadrant-callout__row:first-child { border-top: none; padding-top: 4px; }
.viz-quadrant-callout__row.is-hover,
.viz-quadrant-callout__row.wm-hl {
  background: var(--ed-paper-2);
  color: var(--ed-ink);
  font-weight: 500;
}
.viz-quadrant-callout__row .wm-row-text { white-space: normal; }
/* 2026-06-06 v2 — citation-chip percent per BRAND_GUIDE §12.10. Replaces
 * the bare-number `85%` floating in qcol with a paper-chip + hairline
 * border + 6px coloured leading dot. Reads as a citable derived value,
 * not a score field. The dot carries the quadrant accent so the rail
 * still cross-cues to its dot in the chart. */
.viz-quadrant-callout__row .wm-row-pct {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 8px;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  background: var(--ed-paper);
  border: 1px solid var(--ed-rule);
  border-radius: 999px;
  color: var(--ed-ink-2);
  white-space: nowrap;
}
.viz-quadrant-callout__row .wm-row-pct__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--qcol, var(--ed-accent));
  margin-right: 6px;
  transform: translateY(-1px);
}
.viz-quadrant-callout__row .wm-row-pct__u {
  font-weight: 400;
  color: var(--ed-ink-3);
  margin-left: 1px;
}

/* Caption beneath the chart. 2026-06-06 v2: FIGURE NOTE eyebrow + italic
 * serif gloss. Aligns vocab with the chart axes ("range of opinion →",
 * "well-sourced →") so legend + axes don't contradict each other. */
#landscape-caption,
.landscape-caption {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ed-ink-3);
  margin-top: 22px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.landscape-caption__eyebrow {
  display: inline-block;
  font-family: var(--ed-mono);
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--ed-rule);
}

/* ─── §02 SIGNAL — magazine grid + cleanup (matches v4 mockup) ─────
   Two-column grid: ledger on the left, sticky pull-quote aside on
   the right. Hides the legend bar, sub-bucket pills, and stance
   slider that don't appear in the mockup. */
.ed-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .ed-ledger-grid { grid-template-columns: 1fr; gap: 28px; }
}
.ed-ledger-grid__main { min-width: 0; }
.ed-ledger-grid__aside {
  position: sticky;
  top: 24px;
}
.ed-margin-quote {
  font-family: var(--ed-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  padding-left: 18px;
  margin: 0;
  border-left: 2px solid var(--ed-accent);
}
.ed-margin-quote em { font-style: italic; color: var(--ed-ink); font-weight: 500; }
.ed-margin-quote__cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

/* Suppress the parts of consensus-ledger.js output that aren't in the mockup */
#consensus-ledger .cl-head,
#consensus-ledger .cl-sub,
#consensus-ledger .cl-stance { display: none !important; }
#consensus-ledger .cl-card {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* Drop the vertical colored left border on each row and replace with
   a colored bullet dot in tier colour (uses the same `--c` var the
   row already carries inline). Matches the mockup row layout. */
#consensus-ledger .cl-row {
  border-left: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ed-rule) !important;
  background: transparent !important;
  padding: 14px 6px 14px 22px !important;
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 18px !important;
  align-items: baseline !important;
}
#consensus-ledger .cl-row::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--ed-ink));
}
#consensus-ledger .cl-row:hover { background: var(--ed-paper-2) !important; }
#consensus-ledger .cl-row:last-child { border-bottom: none !important; }

/* Bucket header layout: `▲ AGREEMENT  where everyone lands together         16 TOPICS` */
#consensus-ledger .cl-group {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 14px !important;
  align-items: baseline !important;
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink) !important;
  border-bottom: 1px solid var(--ed-ink) !important;
  padding: 22px 0 8px !important;
  margin-bottom: 0 !important;
}
#consensus-ledger .cl-group::after { order: 2; }
#consensus-ledger .cl-group .cl-n {
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 14.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ed-ink-2) !important;
  text-align: right !important;
}
#consensus-ledger .cl-group .cl-ln { display: none !important; }
/* The ::after content I added earlier provides "where everyone lands
   together" / "where the split is real" — keep it sitting between the
   bucket label and the count column. */
#consensus-ledger .cl-group::after {
  font-family: var(--ed-serif) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--ed-ink-2) !important;
  font-style: normal !important;
}

/* ─── §02 SIGNAL — consensus ledger (Phase 3) ──────────────────────
   consensus-ledger.js emits `.cl-card` containing alternating
   `.cl-group` (Agreement/Disagreement), `.cl-sub` (All aboard /
   People's choice / Nope / Critics' picks) and `.cl-row` topic rows.
   The component CSS in /components/consensus-ledger.css already
   handles structure; these rules override the typography so the
   ledger reads as serif editorial rather than a database table. */
#consensus-ledger {
  background: transparent;
}
#consensus-ledger .cl-head {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ed-rule);
  margin-bottom: 18px;
}
#consensus-ledger .cl-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
#consensus-ledger .cl-lg-note {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ed-ink-3);
  margin-left: auto;
}

#consensus-ledger .cl-card {
  background: transparent;
  border: none;
  padding: 0;
}

#consensus-ledger .cl-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ed-ink);
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink);
}
#consensus-ledger .cl-group::after {
  content: attr(data-gloss);
  font-family: var(--ed-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ed-ink-2);
  margin-left: 4px;
}
#consensus-ledger .cl-group.agree::after { content: "where everyone lands together"; }
/* 2026-06-06: the JS uses class `.split` (see GROUPS in consensus-ledger.js)
   not `.disagree`; the prior selector never matched, leaving the SPLIT
   header with just the bare count and no descriptive sub-line. */
#consensus-ledger .cl-group.split::after { content: "where the split is real"; }
#consensus-ledger .cl-group .cl-n {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ed-muted);
  margin-left: auto;
}
#consensus-ledger .cl-group .cl-ln { display: none; }

#consensus-ledger .cl-sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 6px;
  font-family: var(--ed-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.012em;
}
#consensus-ledger .cl-sub .cl-sd {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
#consensus-ledger .cl-sub .cl-n {
  font-family: var(--ed-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-muted);
  text-transform: none;
  margin-left: 6px;
}

#consensus-ledger .cl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px dotted var(--ed-rule);
}
#consensus-ledger .cl-row:first-of-type { border-top: none; }
#consensus-ledger .cl-q {
  font-family: var(--ed-serif);
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--ed-ink);
  font-weight: 400;
}

#consensus-ledger .cl-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#consensus-ledger .cl-chip {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-muted);
  white-space: nowrap;
}
#consensus-ledger .cl-chip-u {
  letter-spacing: .04em;
  color: var(--ed-muted);
}

/* ─── §03 SPOTLIGHT — feature article (matches v4 mockup) ───────────
   .sp-feature replaces the old .sp-card. The topic statement is the
   big article headline; byline carries the stats inline; two-column
   article body with drop-cap lede, pull quote, body paragraph, tier
   strip; sidebar with Drawing from / By the numbers / Filed under /
   Cited signals. */
#editorial-section .sp-feature {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 24px 0 0;
}
#editorial-section .sp-feature__headline {
  font-family: var(--ed-serif);
  font-weight: 500;
  /* 52px + 22ch was tuned for the short kicker-headlines elsewhere
     ("Where this week landed."). The Spotlight headline IS the full
     topic statement (typically 70-95 chars), so the 22ch cap pushed
     it to a 3-4 line wall. 42px + 36ch lets a 90-char headline land
     in two lines while still reading as the article's display type. */
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ed-ink);
  margin: 0 0 22px;
  max-width: 36ch;
}
#editorial-section .sp-feature__headline em { font-style: italic; font-weight: 500; }
@media (max-width: 760px) { #editorial-section .sp-feature__headline { font-size: 30px; max-width: 100%; } }

#editorial-section .sp-feature__byline {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ed-ink-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--ed-rule);
}
#editorial-section .sp-feature__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ed-paper-2);
  border: 1px solid var(--ed-rule-strong);
  flex-shrink: 0;
  margin-right: 6px;
}
#editorial-section .sp-feature__byline b {
  font-family: var(--ed-sans, var(--ed-serif));
  font-style: normal;
  font-weight: 600;
  color: var(--ed-ink);
}
#editorial-section .sp-feature__stats {
  font-family: var(--ed-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

#editorial-section .sp-feature__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 280px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 920px) {
  #editorial-section .sp-feature__cols { grid-template-columns: 1fr; gap: 32px; }
}
#editorial-section .sp-feature__main { min-width: 0; }

#editorial-section .sp-feature__lede {
  font-family: var(--ed-serif);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ed-ink);
  margin: 0 0 22px;
}
#editorial-section .sp-feature__lede::first-letter {
  font-family: var(--ed-serif);
  font-weight: 600;
  /* 4.4em was a magazine drop-cap that worked only when the lede
     was 3+ lines. The Spotlight lede is usually one sentence (the
     topic description's opening), which the dropcap dwarfed,
     leaving a tall empty shelf beside the lede that the pull-quote
     then awkwardly cleared past. 3em keeps the editorial feel but
     fits inside the lede + first body line. */
  font-size: 3em;
  line-height: .88;
  float: left;
  padding: 4px 12px 0 0;
  margin-bottom: -4px;
  color: var(--ed-accent);
}

#editorial-section .sp-pull {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ed-ink);
  /* Top margin needs to be tall enough to fully escape the dropcap
     shelf even when the lede is one sentence (single-line). The
     dropcap is 4.4em line-height .85 → ~78px tall against a 21px
     lede; `clear: left` puts our box past the float, but visually it
     still wants breathing room. */
  margin: 44px 0 36px;
  padding: 0 12px 0 24px;
  border-left: 3px solid var(--ed-accent);
  position: relative;
  clear: left;
}
/* The decorative ::before open-quote glyph was removed 2026-06-03 —
   even with clear:left on the box, top:-28px left:-4px painted the
   glyph back into the dropcap's vertical shelf. The left bar alone
   reads cleanly as a pull-quote in editorial typography; the giant
   quote-mark was decorative noise that fought the dropcap. */
#editorial-section .sp-pull::before {
  content: none;
  position: absolute;
  left: -4px;
  top: -28px;
  font-family: var(--ed-serif);
  font-size: 76px;
  line-height: 1;
  color: var(--ed-accent);
  opacity: .3;
}
#editorial-section .sp-pull .sp-pull__cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ed-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

#editorial-section .sp-body {
  font-family: var(--ed-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ed-ink-2);
  margin: 0 0 22px;
}

#editorial-section .sp-feature__strip {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule);
  padding: 18px 22px 16px;
  margin-top: 8px;
}

#editorial-section .sp-feature__side {
  position: sticky;
  top: 24px;
  font-size: 13px;
}

/* Cited Signals — full-width row beneath the main+sidebar grid so the
   article column doesn't end fifty rows before the sidebar does. Two
   columns on desktop, one on mobile. */
#editorial-section .sp-feature__cites {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ed-rule);
}
#editorial-section .sp-feature__cites .sp-side__lab {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 14px;
}
#editorial-section .sp-feature__cites .sp-cites-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
@media (max-width: 760px) {
  #editorial-section .sp-feature__cites .sp-cites-grid { grid-template-columns: 1fr; }
}
#editorial-section .sp-feature__cites .sp-cite {
  display: block;
  padding: 10px 0;
  border-top: 1px dotted var(--ed-rule);
  font-family: var(--ed-serif);
  font-size: 14.5px;
  line-height: 1.4;
}
#editorial-section .sp-feature__cites .sp-cite:nth-child(-n+2) {
  border-top: none;
  padding-top: 4px;
}
#editorial-section .sp-feature__cites .sp-cite .sp-src a {
  font-family: var(--ed-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-strong);
}
#editorial-section .sp-feature__cites .sp-cite .sp-src a:hover { border-color: var(--ed-accent); }
#editorial-section .sp-feature__cites .sp-cite .sp-lvl {
  display: block;
  margin-top: 4px;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-muted);
}
#editorial-section .sp-feature__side .sp-side__block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ed-rule);
}
#editorial-section .sp-feature__side .sp-side__block:last-child { border-bottom: none; }
#editorial-section .sp-feature__side .sp-side__lab {
  font-family: var(--ed-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 12px;
}
#editorial-section .sp-feature__side .sp-side__stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label  value"
    "gloss  gloss";
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  padding: 12px 0;
  border-top: 1px dotted var(--ed-rule);
}
#editorial-section .sp-feature__side .sp-side__stat:first-of-type { border-top: none; padding-top: 4px; }
#editorial-section .sp-feature__side .sp-side__stat-label {
  grid-area: label;
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
}
#editorial-section .sp-feature__side .sp-side__stat-value,
#editorial-section .sp-feature__side .sp-side__stat b {
  grid-area: value;
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ed-ink);
}
#editorial-section .sp-feature__side .sp-side__stat-gloss {
  grid-area: gloss;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ed-ink-3);
}
#editorial-section .sp-feature__side .sp-side__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#editorial-section .sp-feature__side .sp-side__chip {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  background: var(--ed-paper-2);
  color: var(--ed-ink-2);
  padding: 4px 9px;
}
#editorial-section .sp-feature__side .sp-df-row {
  display: block;
  padding: 8px 0;
  border-top: 1px dotted var(--ed-rule);
  font-family: var(--ed-serif);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ed-ink-2);
}
#editorial-section .sp-feature__side .sp-df-row:first-of-type { border-top: none; padding-top: 4px; }
#editorial-section .sp-feature__side .sp-df-lvl {
  display: block;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#editorial-section .sp-feature__side .sp-df-src {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ed-ink);
}
#editorial-section .sp-feature__side .sp-cite {
  display: block;
  padding: 8px 0;
  border-top: 1px dotted var(--ed-rule);
  font-family: var(--ed-serif);
  font-size: 14.5px;
  line-height: 1.4;
}
#editorial-section .sp-feature__side .sp-cite:first-of-type { border-top: none; padding-top: 4px; }
#editorial-section .sp-feature__side .sp-cite .sp-src a {
  font-family: var(--ed-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-strong);
}
#editorial-section .sp-feature__side .sp-cite .sp-src a:hover { border-color: var(--ed-accent); }
#editorial-section .sp-feature__side .sp-cite .sp-lvl {
  display: block;
  margin-top: 4px;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

/* ─── §03 SPOTLIGHT — magazine layout (Phase 2) ─────────────────────
   render_spotlight_html() in build_media_home.py emits .sp-card. We
   restyle from the outside in: the card becomes a two-column grid
   on desktop (article on the left, sidebar on the right), the takeaway
   leads with a drop cap, the source-level strip reads as editorial
   chrome rather than a bar chart, and the citation lists slot into
   the right rail. */
#editorial-section .sp-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  padding: 36px 40px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  grid-template-areas:
    "pick    side"
    "topic   side"
    "meta    side"
    "tldr    side"
    "strip   side"
    ;
  column-gap: 44px;
  row-gap: 14px;
}
@media (max-width: 880px) {
  #editorial-section .sp-card {
    grid-template-columns: 1fr;
    grid-template-areas: "pick" "topic" "meta" "tldr" "strip" "side";
    padding: 24px 22px 24px;
  }
}

#editorial-section .sp-pick {
  grid-area: pick;
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-accent);
  margin-bottom: 4px;
}

#editorial-section .sp-topic {
  grid-area: topic;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ed-ink);
  max-width: 24ch;
  margin-bottom: 4px;
}
@media (max-width: 880px) { #editorial-section .sp-topic { font-size: 26px; max-width: 100%; } }

#editorial-section .sp-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ed-rule);
  margin-bottom: 10px;
}
#editorial-section .sp-meta > span { display: inline-flex; align-items: center; }
#editorial-section .sp-meta > span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--ed-muted);
}
#editorial-section .sp-meta b {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ed-ink);
  margin-right: 4px;
}

#editorial-section .sp-tldr {
  grid-area: tldr;
}
#editorial-section .sp-tldr .sp-lab {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 8px;
}
#editorial-section .sp-tldr p {
  font-family: var(--ed-serif);
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--ed-ink);
  margin: 0 0 4px;
}
#editorial-section .sp-tldr p::first-letter {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 4.4em;
  line-height: .85;
  float: left;
  padding: 6px 12px 0 0;
  margin-bottom: -8px;
  color: var(--ed-accent);
  shape-outside: margin-box;
}

#editorial-section .sp-blk {
  grid-area: strip;
  padding-top: 6px;
}
#editorial-section .sp-block-lab {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 10px;
}
#editorial-section .sp-strip-axis {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  align-items: center;
  margin-bottom: 6px;
}
#editorial-section .sp-strip-axis .sp-ax {
  display: flex;
  justify-content: space-between;
  font-family: var(--ed-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ed-muted);
  padding: 0 2px;
}
#editorial-section .sp-lvl-row {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dotted var(--ed-rule);
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
#editorial-section .sp-lvl-row:first-of-type { border-top: none; }
#editorial-section .sp-lvl-name { color: var(--ed-ink-2); }
#editorial-section .sp-lvl-track {
  position: relative;
  height: 4px;
  background: var(--ed-rule);
}
#editorial-section .sp-lvl-dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#editorial-section .sp-lvl-pos {
  font-family: var(--ed-sans, var(--ed-serif));
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ed-ink-2);
}
#editorial-section .sp-lvl-row.sp-lvl-empty .sp-lvl-name,
#editorial-section .sp-lvl-row.sp-lvl-empty .sp-lvl-pos { color: var(--ed-muted); }

/* Clickable tier rows — match the worth-map / Hi-Lo affordance the
   reader already knows from §01 and §05. Rows with data-tier carry a
   sibling .sp-lvl-detail that toggles open on click. Empty/pad rows
   (no data) stay static so we don't fake an affordance. */
#editorial-section .sp-lvl-row[data-tier] {
  cursor: pointer;
  /* Kill the browser-default focus outline (the thick blue rectangle
     around `role=button` rows that the prod screenshot caught). Real
     focus indication is the .sp-lvl-pos underline below, which only
     paints on keyboard focus (:focus-visible), not mouse click. */
  outline: none;
  transition: color .12s ease;
}
/* Hover / expanded: shift only the text weight + tier-name brightness,
   no background block. The detail panel itself is the visual anchor
   when expanded; a second highlighted block on the row read as clunky
   in editorial type. */
#editorial-section .sp-lvl-row[data-tier]:hover .sp-lvl-pos,
#editorial-section .sp-lvl-row[data-tier][aria-expanded="true"] .sp-lvl-pos {
  color: var(--ed-ink);
}
#editorial-section .sp-lvl-row[data-tier][aria-expanded="true"] .sp-lvl-pos::after {
  content: " \25BC";  /* ▼ — points at the open detail panel */
  font-size: 8px;
  margin-left: 4px;
  color: var(--ed-accent);
}
#editorial-section .sp-lvl-row[data-tier]:not([aria-expanded="true"]) .sp-lvl-pos::after {
  content: " \25B8";  /* ▸ — collapsed disclosure marker */
  font-size: 8px;
  margin-left: 4px;
  color: var(--ed-ink-3);
  opacity: .55;
}
/* Keyboard focus only — a quiet underline on the position word.
   Mouse clicks don't paint a focus ring (outline: none above). */
#editorial-section .sp-lvl-row[data-tier]:focus-visible .sp-lvl-pos {
  text-decoration: underline;
  text-decoration-color: var(--ed-accent);
  text-underline-offset: 3px;
}
/* Detail panel: indented + thin accent rule on the left, transparent
   background. Reads as "this is more about the row above" without
   stamping a second cream-paper block on the cream-paper page. */
#editorial-section .sp-lvl-detail {
  display: none;
  padding: 10px 0 12px 24px;
  margin: 0 0 0 6px;
  border-left: 2px solid var(--ed-accent);
  background: transparent;
  font-family: var(--ed-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ed-ink);
}
#editorial-section .sp-lvl-detail[data-open="1"] { display: block; }
#editorial-section .sp-lvl-detail__claim {
  font-style: italic;
  margin: 0 0 8px;
}
#editorial-section .sp-lvl-detail__cite {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
  display: block;
}
#editorial-section .sp-lvl-detail__cite a { color: var(--ed-accent); }

/* Right rail — "Drawing from" + "Cited signals". The renderer
   wraps them in .sp-cols; we re-flow into the sidebar grid area. */
#editorial-section .sp-cols {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid var(--ed-rule);
  padding-left: 28px;
  align-self: start;
}
@media (max-width: 880px) {
  #editorial-section .sp-cols {
    border-left: none;
    border-top: 1px solid var(--ed-rule);
    padding-left: 0;
    padding-top: 20px;
  }
}
#editorial-section .sp-drawing,
#editorial-section .sp-cites { display: block; }

#editorial-section .sp-df-row,
#editorial-section .sp-cite {
  display: block;
  padding: 8px 0;
  border-top: 1px dotted var(--ed-rule);
  font-family: var(--ed-serif);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ed-ink-2);
}
#editorial-section .sp-drawing .sp-df-row:first-of-type,
#editorial-section .sp-cites .sp-cite:first-of-type { border-top: none; padding-top: 4px; }
#editorial-section .sp-df-lvl,
#editorial-section .sp-lvl {
  display: block;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#editorial-section .sp-df-src { color: var(--ed-ink); font-weight: 500; }
#editorial-section .sp-src a {
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-strong);
}
#editorial-section .sp-src a:hover { border-color: var(--ed-accent); }

/* ─── §04 TODAY'S CALL — poll card (Phase 5) ──────────────────────── */
#todays-poll .tq {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  padding: 28px 32px 26px;
}
#todays-poll .tq-meta-top {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 12px;
}
#todays-poll .tq-meta-top .tq-dot {
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ed-accent);
  vertical-align: middle;
  margin: 0 8px 3px;
}
#todays-poll .tq-meta-top .tq-reason {
  font-family: var(--ed-mono);
  font-weight: 500;
  color: var(--ed-accent);
  margin-left: 8px;
}
#todays-poll .tq-q {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ed-ink);
  margin: 4px 0 12px;
  max-width: 28ch;
}
#todays-poll .tq-claim {
  font-family: var(--ed-serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ed-ink-2);
  margin-bottom: 20px;
  max-width: 65ch;
}
#todays-poll .tq-card {
  /* 2026-06-05: drop the outer card border. The page chrome + the
     section's editorial typography is the container; we don't need a
     nested boxed widget. The bottom rule on .tq-cardhead is enough
     visual separation between header strip and chart. */
  background: transparent;
  border: none;
  padding: 14px 0 0;
}
#todays-poll .tq-cardhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#todays-poll .tq-cardlabel {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}
#todays-poll .tq-cardmeta {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-muted);
}
#todays-poll .tq-sub {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ed-ink-3);
  margin-bottom: 12px;
}

/* Pre-vote spectrum segments — turn the rounded chip-row into a flat
   editorial 5-cell scale on a paper-2 background. */
#todays-poll .tq-segs {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
}
#todays-poll .tq-seg {
  background: var(--ed-paper-2) !important;
  border: 1px solid var(--ed-rule) !important;
  border-radius: 0 !important;
  font-family: var(--ed-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-2) !important;
  padding: 14px 8px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .15s, border-color .15s !important;
}
#todays-poll .tq-seg + .tq-seg { border-left: none !important; }
#todays-poll .tq-seg:hover {
  background: var(--ed-paper) !important;
  border-color: var(--ed-rule-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}
#todays-poll .tq-seg.on {
  background: var(--ed-ink) !important;
  color: var(--ed-paper) !important;
  border-color: var(--ed-ink) !important;
  box-shadow: none !important;
}

/* Post-vote distribution — flat columns with thin ink-rule top, mono
   numerals in serif weight, no gradients or rounded tops. */
#todays-poll .tq-col {
  padding: 0 6px !important;
}
#todays-poll .tq-col-lab {
  font-family: var(--ed-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-3) !important;
  margin-top: 6px !important;
}
#todays-poll .tq-col-pct {
  font-family: var(--ed-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--ed-ink) !important;
  letter-spacing: -.01em !important;
  margin-top: 4px !important;
}
#todays-poll .tq-barzone {
  /* 2026-06-05: drop the barzone bottom rule. The 5 column labels
     ("STRONGLY DISAGREE" / "DISAGREE" / ...) act as the implicit
     baseline; an extra horizontal hairline under each column was
     stacking visual rules without adding information. */
  border-bottom: none !important;
  height: 140px !important;
}
#todays-poll .tq-bar {
  background: var(--ed-paper-2) !important;
  border: 1px solid var(--ed-rule-strong) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  left: 4px !important;
  right: 4px !important;
}
#todays-poll .tq-bar.empty {
  /* 2026-06-05: when no votes are in, render NOTHING — the column
     label + 0% pct already say "no votes." The pre-vote empty
     rectangles read as small mystery bars and stacked vertical
     edges against the surrounding chrome. */
  display: none !important;
}
#todays-poll .tq-col.you .tq-bar {
  background: var(--ed-ink) !important;
  border-color: var(--ed-ink) !important;
}
#todays-poll .tq-bars {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
}

/* Pole markers ("Critics" / "Crowd" above two columns) — make them
   serif italic so they read as editorial annotations, not chip labels. */
#todays-poll .tq-col [class*="pole"],
#todays-poll .tq-col [class*="marker"],
#todays-poll .tq-col [class*="mark"],
#todays-poll [class*="tq-pole"],
#todays-poll [class*="tq-mark"] {
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Reveal block (top "Where readers landed" heading + chart + bottom
   verdict line). 2026-06-05: dropped the paper-2 background AND the
   3px accent left-bar that were on both the header band and the
   verdict line. The italic serif type is enough to mark the verdict;
   the colored box + bar were stacking the third and fourth vertical
   accents on a column that already has the outer card border + the
   cardhead bottom rule. Reveal is now type-driven, not boxed. */
#todays-poll .tq-reveal,
#todays-poll [class*="tq-verdict"] {
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  color: var(--ed-ink) !important;
  padding: 14px 0 0 !important;
  background: transparent !important;
  border-left: none !important;
  margin-top: 18px !important;
}
/* The "Where readers landed" sub-line: italic serif kicker, no box,
   no accent bar. Just sits between the cardhead and the chart. */
#todays-poll .tq-sub {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ed-ink-3);
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: none;
}

#todays-poll .tq-cardhead {
  border-bottom: 1px solid var(--ed-rule) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}
#todays-poll .tq-cardlabel,
#todays-poll .tq-cardmeta {
  font-family: var(--ed-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
#todays-poll .tq-cardlabel { color: var(--ed-ink-3) !important; }
#todays-poll .tq-cardmeta  { color: var(--ed-muted) !important; }

/* ─── ENGAGEMENT LAYER (Phase 1) — discussion strip ─────────────────
   Two hooks on the page: §03 Spotlight + §04 Today's Call. The strip
   appears beneath the article / poll and either previews the thread
   (when one exists) or carries a visible 'be the first' empty state
   (rendered by discussion-mount.js on 404). Reuses .dsc-* classes
   from frontend/components/discussion.js. */
/* 2026-06-05: discussion mount now reads as the editorial continuation
   of the Spotlight piece, not a separate widget below it. Dropped the
   top horizontal rule that visually quarantined the comments from the
   article body. The serif-italic "Readers" kicker is the only marker
   that the section has shifted from editorial article to reader voices —
   same publication, same surface, next chapter. */
[data-discussion-mount] {
  margin-top: 26px;
  padding-top: 0;
  border-top: none;
}
[data-discussion-mount] .dsc {
  background: transparent;
  font-family: var(--ed-serif);
}
[data-discussion-mount] .dsc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: none;
}
[data-discussion-mount] .dsc-label {
  /* Serif italic kicker, not mono uppercase widget label. Reads as
     a chapter break inside the same publication. */
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ed-ink);
}
[data-discussion-mount] .dsc-meta {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ed-muted);
}
[data-discussion-mount] .dsc-anchor {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ed-ink-2);
  padding: 10px 14px;
  background: var(--ed-paper-2);
  border-left: 3px solid var(--ed-accent);
  margin-bottom: 14px;
}
[data-discussion-mount] .dsc-anchor-lab {
  font-family: var(--ed-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  display: block;
  margin-bottom: 4px;
}

/* Empty state (no thread yet) — the visible 'be the first' hook. */
[data-discussion-mount] .dsc--empty {
  padding-bottom: 4px;
}
[data-discussion-mount] .dsc-empty-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 24px;
  padding: 14px 0;
}
[data-discussion-mount] .dsc-empty-prompt {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ed-ink-2);
  margin: 0;
}
[data-discussion-mount] .dsc-empty-reactions {
  display: flex;
  gap: 10px;
  font-size: 22px;
  align-items: center;
  opacity: .65;
}
[data-discussion-mount] .dsc-rxb-stub {
  cursor: default;
  filter: grayscale(.3);
}
[data-discussion-mount] .dsc-empty-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--ed-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink);
  background: transparent;
  padding: 10px 18px;
  text-decoration: none;
  border: 1px solid var(--ed-ink);
  width: max-content;
  margin-top: 4px;
  transition: background .12s, color .12s;
}
[data-discussion-mount] .dsc-empty-cta:hover {
  background: var(--ed-ink);
  color: var(--ed-paper);
}
@media (max-width: 600px) {
  [data-discussion-mount] .dsc-empty-body { grid-template-columns: 1fr; }
}

/* Composer (signed-in) */
[data-discussion-mount] .dsc-composer {
  margin-bottom: 16px;
}
[data-discussion-mount] .dsc-ta {
  width: 100%;
  font-family: var(--ed-serif);
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  color: var(--ed-ink);
  resize: vertical;
  min-height: 64px;
}
[data-discussion-mount] .dsc-ta:focus {
  outline: 2px solid var(--ed-accent);
  outline-offset: -1px;
}
[data-discussion-mount] .dsc-comp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
[data-discussion-mount] .dsc-comp-hint {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ed-ink-3);
}
[data-discussion-mount] .dsc-post-btn {
  font-family: var(--ed-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-paper);
  background: var(--ed-ink);
  border: none;
  border-radius: 0;
  padding: 10px 18px;
  cursor: pointer;
}
[data-discussion-mount] .dsc-post-btn:hover { background: var(--ed-accent); }

/* Posts (when thread exists) */
[data-discussion-mount] .dsc-thread { display: block; }
[data-discussion-mount] .dsc-post {
  padding: 14px 0;
  border-top: 1px dotted var(--ed-rule);
}
[data-discussion-mount] .dsc-post:first-child { border-top: none; }
[data-discussion-mount] .dsc-handle {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
  margin-bottom: 4px;
}
[data-discussion-mount] .dsc-body {
  font-family: var(--ed-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-ink);
}
[data-discussion-mount] .dsc-sortbar {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
}
[data-discussion-mount] .dsc-sort {
  background: transparent;
  border: none;
  /* 2026-06-06: operator caught NEWEST text clipped by pill curve.
   * The discussion.css base sets border-radius: 999px; this rule
   * stripped horizontal padding (padding: 4px 0) without resetting
   * the radius, so the half-height curve ate the first/last letters.
   * Fix: nuke the pill radius — this surface uses underline-on-active,
   * not a pill — and give a tiny 2 px horizontal breath so the focus
   * ring (outline-offset: 2 px) sits clear of the letters. */
  border-radius: 0 !important;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
[data-discussion-mount] .dsc-sort.on {
  color: var(--ed-ink);
  border-bottom-color: var(--ed-accent);
}
/* Focus ring scoped to this surface: rectangular (matches the
 * underline-on-active style), not pill, since border-radius is now 0. */
[data-discussion-mount] .dsc-sort:focus-visible {
  outline: 2px solid var(--ed-teal);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-discussion-mount] .dsc-empty {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ed-muted);
  padding: 12px 0;
}

/* ─── ENGAGEMENT Phase 2: Today's Call sorted-by-stance preview ─────
   The Today's Call mount (#hero) renders a two-column structure:
     LEFT  — Readers with you (vote first to see your side gather)
     RIGHT — Readers across the line (the take pushing back)
   The two-column even-when-empty design is the differentiated move:
   readers see they will be in conversation with people who disagree,
   not just an echo chamber. Comments sorted by stance, not chronology. */
[data-discussion-mount] .dsc--call .dsc-call-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 28px;
  padding: 20px 0 4px;
  position: relative;
}
[data-discussion-mount] .dsc--call .dsc-call-grid::before {
  content: "";
  grid-column: 2;
  background: var(--ed-rule);
  width: 1px;
  height: 100%;
}
@media (max-width: 760px) {
  [data-discussion-mount] .dsc--call .dsc-call-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  [data-discussion-mount] .dsc--call .dsc-call-grid::before { display: none; }
}
[data-discussion-mount] .dsc--call .dsc-call-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-discussion-mount] .dsc--call .dsc-call-col:first-child  { grid-column: 1; }
[data-discussion-mount] .dsc--call .dsc-call-col:last-child   { grid-column: 3; }
@media (max-width: 760px) {
  [data-discussion-mount] .dsc--call .dsc-call-col:first-child,
  [data-discussion-mount] .dsc--call .dsc-call-col:last-child { grid-column: 1; }
}
[data-discussion-mount] .dsc--call .dsc-call-lab {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-accent);
}
[data-discussion-mount] .dsc--call .dsc-call-prompt {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  margin: 0;
}

/* Populated state — each comment snippet inside a stance column */
[data-discussion-mount] .dsc--call .dsc-call-post {
  padding: 12px 0;
  border-top: 1px dotted var(--ed-rule);
}
[data-discussion-mount] .dsc--call .dsc-call-col .dsc-call-post:first-of-type {
  border-top: none;
  padding-top: 4px;
}
[data-discussion-mount] .dsc--call .dsc-call-post-by {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
  margin-bottom: 4px;
}
[data-discussion-mount] .dsc--call .dsc-call-post-age {
  color: var(--ed-muted);
  margin-left: 4px;
}
[data-discussion-mount] .dsc--call .dsc-call-post-body {
  font-family: var(--ed-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ed-ink);
}
[data-discussion-mount] .dsc--call .dsc-call-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ed-rule);
  gap: 24px;
}
[data-discussion-mount] .dsc--call .dsc-call-foot-meta {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ed-ink-3);
  text-align: right;
  max-width: 38ch;
}
@media (max-width: 600px) {
  [data-discussion-mount] .dsc--call .dsc-call-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  [data-discussion-mount] .dsc--call .dsc-call-foot-meta { text-align: left; }
}

/* ─── §05 HI-LO — class-based reskin (Phase 8 polish) ─────────────
   The renderSeeSaw() function now emits .ss-* class names; visual
   styling lives entirely here, no inline style overrides needed. */
/* Hi-Lo lays out as two columns side-by-side on desktop (matches v4
   mockup), stacks on mobile. The two .ss-bucket children fill the
   columns directly. */
#seesaw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 760px) { #seesaw { grid-template-columns: 1fr; } }
#seesaw .ss-bucket { margin-bottom: 0; }
/* 2026-06-09 (Fable UI review §05): attention-gap butterfly. Sits above the
   Hi/Lo cards as a summary chart that SHOWS the asymmetry visually. */
#seesaw .ss-butterfly-wrap {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  padding: 18px 16px 12px;
  background: var(--ed-surface, #FBFAF5);
  border: 1px solid var(--ed-rule, #E5E1D6);
  border-radius: 4px;
}
#seesaw .ss-butterfly {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}
#seesaw .ss-bucket-lab {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-2);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ed-ink);
}
#seesaw .ss-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  padding: 22px 24px 18px;
  margin-bottom: 12px;
}
#seesaw .ss-card-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
#seesaw .ss-card-text { flex: 1; min-width: 0; }
#seesaw .ss-card-title {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -.017em;
  color: var(--ed-ink);
  margin: 0 0 8px;
}
#seesaw .ss-card-desc {
  font-family: var(--ed-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  margin: 0 0 12px;
}
#seesaw .ss-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#seesaw .ss-tier-chip {
  font-family: var(--ed-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  background: var(--ed-paper-2);
  color: var(--ed-ink-2);
  padding: 3px 9px;
}
#seesaw .ss-lean {
  font-family: var(--ed-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--ed-rule-strong);
  background: var(--ed-paper);
  color: var(--ed-ink-2);
  align-self: flex-start;
}
#seesaw .ss-lean-hi { border-color: #B4530940; color: #8C420C; }
#seesaw .ss-lean-lo { border-color: #0F766E40; color: #0F766E; }
#seesaw .ss-quote {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  margin: 10px 0;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--ed-rule-strong);
}
#seesaw .ss-quote-text { display: block; }
#seesaw .ss-quote-cite {
  display: block;
  margin-top: 8px;
  font-family: var(--ed-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  text-decoration: none;
}
#seesaw .ss-quote-cite:hover { color: var(--ed-accent); }
#seesaw .ss-empty {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ed-muted);
  padding: 12px 0;
}

/* ─── §06 RISING — momentum list ─────────────────────────────────── */
#rising .rm-list { display: block; }
/* 4 columns now (was 3). With 3 columns, the 4th child (.rm-mo
   velocity badge) auto-flowed onto a second row at column 1, indented
   under the rank, eating ~28px of vertical space per row for a single
   short chip. Now all four children share one row: rank · main
   (title+meta) · badge · spark. Also tightened padding 14→10 and
   shrank the sparkline (150×44 → 130×36) since it was decorative,
   not load-bearing. */
#rising .rm-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ed-rule);
}
#rising .rm-row:last-child { border-bottom: none; }
#rising .rm-rank {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ed-accent);
  width: 32px;
  letter-spacing: -.01em;
}
#rising .rm-main { min-width: 0; }
#rising .rm-title {
  font-family: var(--ed-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#rising .rm-title:hover { border-bottom-color: var(--ed-accent); }
#rising .rm-meta {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ed-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#rising .rm-meta .rm-src {
  font-weight: 500;
  color: var(--ed-ink-3);
}
#rising .rm-mo { flex-shrink: 0; }
#rising .rm-chip {
  display: inline-block;
  font-family: var(--ed-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #0F766E;
  background: rgba(15, 118, 110, .08);
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
#rising .rm-spark { flex-shrink: 0; line-height: 0; }
/* Mobile: 4-column row would overflow; collapse to a 2-row layout
   where rank + title + meta stack on row 1 and the badge sits inline
   with the meta on row 2. Sparkline drops on the narrowest viewports
   to keep the row compact. */
@media (max-width: 760px) {
  #rising .rm-row {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  #rising .rm-spark { display: none; }
}

/* ─── §07 MIRROR — sample spectrum / signed-in state ─────────────── */
#mirror-section .col-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  padding: 32px 36px;
}
#mirror-section .mi-sample-tag {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 14px;
}
#mirror-section .mi-dek {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ed-ink);
  margin-bottom: 20px;
}
#mirror-section .mi-poles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--ed-serif);
}
#mirror-section .mi-pole .mi-pn {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--ed-ink);
  letter-spacing: -.005em;
}
#mirror-section .mi-pole .mi-ps {
  display: block;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ed-muted);
  margin-top: 4px;
}
#mirror-section .mi-track {
  position: relative;
  height: 4px;
  background: var(--ed-rule);
  margin: 12px 0 18px;
}
#mirror-section .mi-mid {
  position: absolute;
  top: -4px; left: 50%;
  width: 1px; height: 12px;
  background: var(--ed-rule-strong);
}
#mirror-section .mi-you {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ed-accent);
  transform: translate(-50%, -50%);
}
#mirror-section .mi-you-tag {
  position: absolute;
  top: 14px;
  font-family: var(--ed-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-accent);
  transform: translateX(-50%);
}

/* ─── §08 SOURCES — tier ladder accordion ────────────────────────── */
#source-tiers .st-dek {
  font-family: var(--ed-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-ink-2);
  margin-bottom: 22px;
  max-width: 70ch;
}
#source-tiers .st-tier {
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule);
  border-left: 4px solid var(--tc, var(--ed-accent));
  border-radius: 0;
  margin-bottom: 10px;
}
#source-tiers .st-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--ed-serif);
}
#source-tiers .st-dot { display: none; }
#source-tiers .st-label {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.012em;
  color: var(--ed-ink);
  text-align: left;
}
#source-tiers .st-count {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ed-muted);
}
#source-tiers .st-influence-w {
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
  margin-left: 6px;
}
#source-tiers .st-influence-w b {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ed-ink);
  letter-spacing: -.01em;
}
#source-tiers .st-caret {
  font-family: var(--ed-mono);
  color: var(--ed-muted);
}
#source-tiers .st-body {
  padding: 6px 22px 22px;
  border-top: 1px solid var(--ed-rule);
}
#source-tiers .st-meaning {
  font-family: var(--ed-serif);
  font-size: 15.5px;
  font-style: italic;
  color: var(--ed-ink-2);
  margin: 12px 0 16px;
  line-height: 1.5;
}
#source-tiers .st-ev-row,
#source-tiers .st-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
#source-tiers .st-ev-lab {
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-right: 6px;
}
#source-tiers .st-ev {
  font-family: var(--ed-mono);
  font-size: 11px;
  background: var(--ed-paper-2);
  padding: 3px 9px;
  color: var(--ed-ink-2);
}
#source-tiers .st-src .st-src-nm {
  font-family: var(--ed-serif);
  font-size: 14px;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-strong);
}
#source-tiers .st-src .st-src-nm:hover { border-color: var(--ed-accent); }
#source-tiers .st-src .st-src-ty {
  font-family: var(--ed-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-muted);
  margin-left: 6px;
}

/* ─── FOOTER COLOPHON (Phase 6) ────────────────────────────────────
   Overrides the existing footer.site flex row with a three-column
   editorial colophon: brand promise + signature, masthead cameos,
   issue metadata. A signoff bar spans the full width beneath. */
footer.site.ed-colophon {
  margin-top: 80px;
  padding: 36px 24px 32px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid var(--ed-ink);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  grid-template-areas:
    "lede block1 block2 bench"
    "signoff signoff signoff signoff";
  column-gap: 36px;
  row-gap: 28px;
}
@media (max-width: 1000px) {
  footer.site.ed-colophon {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lede lede"
      "block1 block2"
      "bench bench"
      "signoff signoff";
  }
}
@media (max-width: 760px) {
  footer.site.ed-colophon {
    grid-template-columns: 1fr;
    grid-template-areas: "lede" "block1" "block2" "bench" "signoff";
    margin-top: 60px;
    padding: 28px 18px 24px;
  }
}
footer.site.ed-colophon .ed-colophon__lede { grid-area: lede; }
footer.site.ed-colophon .ed-colophon__block:nth-of-type(2) { grid-area: block1; }
footer.site.ed-colophon .ed-colophon__block:nth-of-type(3) { grid-area: block2; }
footer.site.ed-colophon .ed-colophon__bench { grid-area: bench; }
footer.site.ed-colophon .ed-colophon__signoff { grid-area: signoff; }

/* The Media bench list — the subscriber-pitch surface that names the
   12 active columnists. Each row: handle (mono small-caps) + angle
   (serif italic). The block reads as a magazine masthead "Staff" list. */
footer.site.ed-colophon .ed-bench-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
footer.site.ed-colophon .ed-bench-list li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--ed-rule);
}
footer.site.ed-colophon .ed-bench-list li:last-child { border-bottom: none; }
footer.site.ed-colophon .ed-bench-list b {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ed-ink);
  font-weight: 600;
  display: block;
  margin-bottom: 1px;
}
footer.site.ed-colophon .ed-bench-list .ed-bench-angle {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-ink-2);
  line-height: 1.35;
}
footer.site.ed-colophon .ed-bench-note {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ed-ink-3);
  margin-top: 8px;
}
footer.site.ed-colophon .ed-bench-note a {
  color: var(--ed-accent);
  border-bottom: 1px solid var(--ed-accent);
}

/* Nomination form — the lead-gen surface that captures
   self-nominations + "you should invite X" submissions. POST to
   /api/nominate writes to D1 and emails the operator. */
.ed-nominate-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dotted var(--ed-rule);
}
.ed-nominate-form__head {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 2px;
}
.ed-nominate-form__radio {
  display: flex;
  gap: 14px;
  font-family: var(--ed-serif);
  font-size: 13px;
  color: var(--ed-ink-2);
  margin-bottom: 2px;
}
.ed-nominate-form__radio label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.ed-nominate-form__input {
  font-family: var(--ed-serif);
  font-size: 13.5px;
  color: var(--ed-ink);
  background: var(--ed-paper);
  border: 1px solid var(--ed-rule-strong);
  padding: 8px 10px;
  border-radius: 0;
  width: 100%;
  resize: vertical;
}
.ed-nominate-form__input:focus {
  outline: none;
  border-color: var(--ed-accent);
}
.ed-nominate-form__submit {
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--ed-sans, var(--ed-serif));
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  margin-top: 2px;
}
.ed-nominate-form__submit:hover {
  background: var(--ed-accent);
}
.ed-nominate-form__submit:disabled {
  background: var(--ed-rule-strong);
  cursor: not-allowed;
}
.ed-nominate-form__status {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-ink-3);
  min-height: 18px;
  margin-top: 4px;
}
.ed-nominate-form__status--ok { color: var(--ed-accent); }
.ed-nominate-form__status--err { color: #9F3A1E; }

/* Privacy line — italic small caps below the email field so the
   no-tracking commitment reads as part of the form's own promise,
   not as legal boilerplate. */
.ed-nominate-form__privacy,
.ed-nominate-form__intro {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ed-muted);
  margin: -2px 0 4px;
}
.ed-nominate-form__intro { font-style: normal; color: var(--ed-ink-3); font-size: 12.5px; }

/* Subscribe form — the low-friction owned-audience CTA. Sits above
   the nominate form which is collapsed into a <details> by default. */
.ed-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dotted var(--ed-rule);
}
.ed-subscribe-form__head {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-ink);
  font-weight: 600;
}
.ed-subscribe-form__note {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ed-ink-3);
  margin: -4px 0 4px;
}
.ed-subscribe-form__input {
  font-family: var(--ed-serif);
  font-size: 13.5px;
  color: var(--ed-ink);
  background: var(--ed-paper);
  border: 1px solid var(--ed-rule-strong);
  padding: 8px 10px;
  border-radius: 0;
  width: 100%;
}
.ed-subscribe-form__input:focus {
  outline: none;
  border-color: var(--ed-accent);
}
.ed-subscribe-form__niches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ed-ink-2);
  align-items: center;
  margin: 2px 0;
}
.ed-subscribe-form__niche-label {
  text-transform: uppercase;
  color: var(--ed-ink-3);
  letter-spacing: .12em;
  margin-right: 4px;
}
.ed-subscribe-form__niches label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-transform: uppercase;
}
.ed-subscribe-form__submit {
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--ed-sans, var(--ed-serif));
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  margin-top: 2px;
}
.ed-subscribe-form__submit:hover { background: var(--ed-accent); }
.ed-subscribe-form__submit:disabled { background: var(--ed-rule-strong); cursor: not-allowed; }
.ed-subscribe-form__status {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-ink-3);
  min-height: 18px;
  margin-top: 4px;
}
.ed-subscribe-form__status--ok { color: var(--ed-accent); }
.ed-subscribe-form__status--err { color: #9F3A1E; }

/* The nominate form is collapsed by default behind a <details>
   summary so the colophon stays compact; the higher-intent CTA only
   expands for visitors who want it. */
.ed-nominate-toggle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dotted var(--ed-rule);
}
.ed-nominate-toggle > summary {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-accent);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.ed-nominate-toggle > summary::-webkit-details-marker { display: none; }
.ed-nominate-toggle[open] > summary { color: var(--ed-ink); }
.ed-nominate-toggle > .ed-nominate-form {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}
.ed-nominate-form select.ed-nominate-form__input {
  background: var(--ed-paper);
  appearance: none;
  -webkit-appearance: none;
}

/* The invite-only explainer banner — visible below the dateline so
   the model is legible immediately. Italic serif, low chrome. */
/* ─── TOP-OF-PAGE SIMPLE SUBSCRIBE ─────────────────────────────────
   Replaces the heavier "Read freely" panel. One inline form, hairline
   rules above and below, no fill, no thick left rule. The Letters
   digest pitch is a single italic line; the form does the conversion. */
.ed-top-subscribe {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 14px 32px 18px;
  border-top: 0;
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: transparent;
}
.ed-top-subscribe__pitch {
  font-family: var(--ed-serif);
  font-size: 15.5px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ed-ink-2);
  margin: 0;
  flex: 1 1 320px;
  min-width: 240px;
}
.ed-top-subscribe__pitch b {
  font-style: normal;
  font-weight: 600;
  color: var(--ed-ink);
}
.ed-top-subscribe__form {
  display: flex;
  gap: 10px;
  flex: 0 1 420px;
  min-width: 280px;
}
.ed-top-subscribe__form input[type="email"] {
  flex: 1;
  font-family: var(--ed-serif);
  font-size: 15px;
  padding: 9px 12px;
  border: 1px solid var(--ed-rule-strong, #C4C0B0);
  background: var(--ed-paper);
  color: var(--ed-ink);
  border-radius: 0;
}
.ed-top-subscribe__form input[type="email"]:focus {
  outline: none;
  border-color: var(--ed-accent);
}
.ed-top-subscribe__form button {
  font-family: var(--ed-sans, Inter, sans-serif);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 18px;
  background: var(--ed-ink);
  color: var(--ed-paper);
  border: none;
  cursor: pointer;
}
.ed-top-subscribe__form button:hover { background: var(--ed-accent); }
.ed-top-subscribe__status {
  width: 100%;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ed-ink-3);
  min-height: 0;
}
.ed-top-subscribe__status--ok { color: var(--ed-accent); }
.ed-top-subscribe__status--err { color: #9F3A1E; }
.ed-top-subscribe__meta {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-top: 6px;
}
.ed-top-subscribe__meta a {
  color: var(--ed-ink-3);
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
}
.ed-top-subscribe__meta a:hover { color: var(--ed-accent); border-bottom-color: var(--ed-accent); }
@media (max-width: 760px) {
  .ed-top-subscribe { padding: 14px 18px 16px; gap: 14px; }
  .ed-top-subscribe__pitch { font-size: 14.5px; }
  .ed-top-subscribe__form { flex: 1 1 100%; min-width: 0; }
}

/* Legacy class kept as alias so any cached HTML still degrades cleanly,
   but with no fill / no left rule. */
.ed-invite-explainer {
  max-width: 1180px;
  margin: 0 auto 24px;
  padding: 14px 32px;
  border-top: 1px solid var(--ed-rule, #D8D2C3);
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
  font-family: var(--ed-serif);
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ed-ink-2);
  background: transparent;
  border-left: 0;
}
.ed-invite-explainer p { margin: 0; }
.ed-invite-explainer b { color: var(--ed-ink); font-weight: 600; font-style: normal; }
.ed-invite-explainer a {
  color: var(--ed-accent);
  border-bottom: 1px solid var(--ed-accent);
  font-style: normal;
}

footer.site.ed-colophon .ed-colophon__wm {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 28px;
  color: var(--ed-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}
footer.site.ed-colophon .ed-colophon__wm svg { color: var(--ed-accent); flex-shrink: 0; }
footer.site.ed-colophon .ed-colophon__wm .sift  { font-weight: 400; color: var(--ed-ink-2); }
footer.site.ed-colophon .ed-colophon__wm .signal{ font-weight: 700; color: var(--ed-ink); }

footer.site.ed-colophon .ed-colophon__lede p {
  font-family: var(--ed-serif);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ed-ink-2);
  letter-spacing: -.003em;
  margin-bottom: 12px;
}
footer.site.ed-colophon .ed-colophon__lede p em { font-style: italic; color: var(--ed-ink); }
footer.site.ed-colophon .ed-colophon__sig {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

footer.site.ed-colophon h4 {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-bottom: 14px;
  font-weight: 600;
}
footer.site.ed-colophon ul {
  list-style: none;
  font-family: var(--ed-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ed-ink-2);
  margin: 0;
  padding: 0;
}
footer.site.ed-colophon ul a {
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule);
}
footer.site.ed-colophon ul a:hover { border-color: var(--ed-accent); }
footer.site.ed-colophon ul em { font-style: italic; color: var(--ed-ink); font-weight: 500; }

footer.site.ed-colophon .ed-colophon__cameos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
footer.site.ed-colophon .ed-cameo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  text-align: center;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ed-ink-3);
}
footer.site.ed-colophon .ed-cameo__face {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ed-paper-2);
  border: 1px solid var(--ed-rule-strong);
  margin-bottom: 4px;
}

footer.site.ed-colophon .ed-colophon__signoff {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ed-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-muted);
}
footer.site.ed-colophon .ed-colophon__signoff svg { color: var(--ed-accent); }
@media (max-width: 600px) {
  footer.site.ed-colophon .ed-colophon__signoff { flex-direction: column; gap: 8px; text-align: center; }
}

/* Override the old footer.site.row flex styling so it no longer fights.
   This footer no longer uses `.row` — the legacy rule still applies if
   the markup regresses. Force the children to ignore it. */
footer.site.ed-colophon .row { display: contents; }

/* ─── NICHE TEMPLATE — section header overrides (Phase 7) ─────────
   build_niche_home.py uses `.section-eyebrow` + `.section-title` +
   `.section-sub` for some sections and `.ed-section-head` +
   `.ed-section-sub` for others. We override the typography in place
   so the niche home pages pick up the editorial chrome without
   needing the full ed2-sechead rewrite. */
.section-eyebrow {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-2) !important;
  margin-bottom: 10px !important;
}
.section-title {
  font-family: var(--ed-serif) !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  color: var(--ed-ink) !important;
  margin-bottom: 12px !important;
  max-width: 24ch;
}
.section-sub,
.ed-section-sub {
  font-family: var(--ed-serif) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--ed-ink-2) !important;
  max-width: 65ch;
  margin-bottom: 28px !important;
}
.ed-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ed-ink);
  margin-bottom: 14px;
}
.ed-section-head .num {
  font-family: var(--ed-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--ed-accent) !important;
}
.ed-section-head .label {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-2) !important;
  font-weight: 500 !important;
}

/* Hero (niche tagline) — sits beneath the dateline. Reset the `.tagline`
   sub copy and the niche-line strip to serif/mono editorial. */
.hero .niche-line {
  font-family: var(--ed-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-3) !important;
}
.hero .niche-line b { color: var(--ed-ink) !important; }
.hero .tagline {
  font-family: var(--ed-serif) !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--ed-ink-2) !important;
  max-width: 60ch;
  margin-bottom: 22px !important;
  font-weight: 400 !important;
}
.hero h1 {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ed-ink);
  max-width: 22ch;
}
@media (max-width: 760px) { .hero h1 { font-size: 32px; max-width: 100%; } }

/* ─── EDITOR'S NOTE (Phase 6b) ─────────────────────────────────────
   Daily callout above §01. Content is generated by
   engines/editors_note.py (cached per niche per day). v2: no fill,
   no left rule — small-caps eyebrow + italic serif paragraph, sits
   on paper like a standfirst. */
.ed-eds-note {
  background: transparent;
  border-left: 0;
  padding: 4px 0 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 22px;
  align-items: baseline;
}
.ed-eds-note__lab {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-accent);
  font-weight: 600;
}
.ed-eds-note__byline {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ed-ink-3);
  align-self: center;
}
.ed-eds-note__body {
  grid-column: 1 / -1;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--ed-ink-2);
  margin-top: 4px;
}
.ed-eds-note__body em { font-style: normal; color: var(--ed-ink); font-weight: 500; }

/* ─── CHART SVG TYPOGRAPHY ────────────────────────────────────────
   The Sift quadrant chart inherits system sans-serif by default.
   Override so the quadrant labels read as italic Newsreader (matches
   v4 mockup) and axis labels stay JetBrains Mono small caps. */
.viz-topic-landscape .quad-text,
.viz-worthmap .quad-text,
.viz svg text.quad-text {
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
}
.viz-topic-landscape .axis-label,
.viz svg text.axis-label,
.viz-mirror-radar .axis-label {
  font-family: var(--ed-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Worth-map hover tooltip should match the editorial palette. */
.viz-quadrant-tip {
  font-family: var(--ed-sans, var(--ed-serif)) !important;
  background: var(--ed-ink) !important;
  font-size: 12px !important;
  border-radius: 0 !important;
}

/* ─── QUADRANT DRAWER (used by §01 Sift dots AND §02 Signal ledger
   rows — anything that calls _renderQuadrantDrawer in viz.js). ────
   2026-06-03 streamline: drawer markup is now fully class-driven
   (.qd-*). Operator review caught the previous version was too
   congested at the top — two chips, a prose gloss, a stats row, and
   a matrix label all stacked above the data. New top order:
     close · kicker (niche · quadrant) · headline · one prose meta
     line · matrix · CTA. */
.viz-quadrant-drawer {
  background: var(--ed-paper) !important;
  color: var(--ed-ink) !important;
  font-family: var(--ed-sans, var(--ed-serif)) !important;
  border-left: 1px solid var(--ed-rule-strong) !important;
  box-shadow: -12px 0 32px rgba(0,0,0,.06) !important;
  padding: 32px 32px 28px !important;
}
.viz-quadrant-drawer-scrim {
  background: rgba(15,16,20,.35) !important;
  backdrop-filter: blur(2px);
}
.viz-quadrant-drawer .qd-close {
  font-family: var(--ed-mono) !important;
  font-size: 16px !important;
  color: var(--ed-ink-2) !important;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  top: 14px;
  left: 14px;
}
.viz-quadrant-drawer .qd-kicker {
  font-family: var(--ed-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin: 8px 0 12px;
}
.viz-quadrant-drawer .qd-kicker-sep {
  color: var(--ed-rule-strong);
  margin: 0 4px;
  font-weight: 400;
}
.viz-quadrant-drawer .qd-headline {
  font-family: var(--ed-serif) !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
  color: var(--ed-ink) !important;
  margin: 0 0 14px !important;
}
.viz-quadrant-drawer .qd-meta {
  font-family: var(--ed-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ed-ink);
  margin: 0 0 18px;
}
.viz-quadrant-drawer .qd-meta b {
  font-weight: 600;
  color: var(--ed-ink);
}
.viz-quadrant-drawer .qd-meta-soft {
  color: var(--ed-ink-3);
  font-style: italic;
}
/* Tier matrix table (rendered into #viz-quadrant-fp-slot) */
.viz-quadrant-drawer table {
  background: transparent !important;
  border: none !important;
  margin-top: 6px !important;
}
.viz-quadrant-drawer th {
  font-family: var(--ed-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink-3) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ed-rule) !important;
  padding: 8px 6px !important;
}
.viz-quadrant-drawer td {
  background: transparent !important;
  border-bottom: 1px dotted var(--ed-rule) !important;
  padding: 10px 6px !important;
  font-family: var(--ed-serif) !important;
  font-size: 14.5px !important;
  color: var(--ed-ink) !important;
}
.viz-quadrant-drawer tr[style*="background"] td,
.viz-quadrant-drawer td[style*="background:#F"] {
  background: var(--ed-paper-2) !important;
}
/* "Join the conversation" CTA. Selector is .qd-cta now (was tied to
   the old /topic/<id> href which moved to /thread?id=<id>). */
.viz-quadrant-drawer .qd-cta {
  display: inline-block;
  margin-top: 22px;
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--ed-sans, var(--ed-serif));
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 12px 22px;
  text-decoration: none;
}
.viz-quadrant-drawer .qd-cta:hover {
  background: var(--ed-accent);
}
/* Comments block kept; the old inline-style overrides for "From the
   conversation" still match because that label is built with inline
   styles in viz.js. Same for the per-comment chip backgrounds. */
.viz-quadrant-drawer div[style*="color:#334155"] {
  color: var(--ed-ink-2) !important;
  font-family: var(--ed-serif) !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}
.viz-quadrant-drawer div[style*="font-family:'JetBrains Mono'"] {
  font-family: var(--ed-mono) !important;
  color: var(--ed-ink-3) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

/* Spotlight byline (article-style avatar + name line) — match
   v4 mockup: italic serif with mono name. */
#editorial-section .spotlight-byline {
  font-family: var(--ed-serif) !important;
  font-style: italic !important;
  font-size: 14.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ed-ink-3) !important;
}
#editorial-section .spotlight-byline b {
  font-family: var(--ed-sans, var(--ed-serif)) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  color: var(--ed-ink) !important;
}

/* ─── LOGOMARK IMAGE STYLING ──────────────────────────────────────
   Switched from currentColor SVG to a brand PNG. The PNG already
   carries the teal — we just need to scale it cleanly. */
img.ed-masthead__mark {
  flex-shrink: 0;
  display: block;
}
.ed-colophon__wm img {
  flex-shrink: 0;
  display: block;
}
@media (max-width: 760px) {
  .ed-eds-note { padding: 18px 18px 20px; margin-bottom: 36px; grid-template-columns: 1fr; gap: 8px; }
  .ed-eds-note__body { font-size: 18px; }
}

/* ─── FIGURE SHARE BUTTON (operator brief 2026-06-06) ─────────────
   Auto-injected by frontend/components/viz-share.js into every
   [data-share-figure] host. Sits in the bottom-right corner of the
   figure as a quiet ghost button; only shows on hover or focus so
   it doesn't compete with the chart itself. */
.viz-share-btn {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 8px;
  font-family: var(--ed-sans, Inter, system-ui, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ed-ink-3, #5C5F66);
  background: rgba(246, 244, 238, 0.86);
  border: 1px solid var(--ed-rule, #D8D2C3);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
  z-index: 2;
}
[data-share-figure]:hover > .viz-share-btn,
[data-share-figure]:focus-within > .viz-share-btn,
.viz-share-btn:focus,
.viz-share-btn:hover { opacity: 1; }
.viz-share-btn:hover {
  color: var(--ed-accent, #0E7D7D);
  border-color: var(--ed-accent, #0E7D7D);
}
.viz-share-btn svg {
  color: var(--ed-accent, #0E7D7D);
  flex-shrink: 0;
}
.viz-share-btn__arrow {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 12px;
  margin-left: 2px;
}
.viz-share-btn__status {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 6px;
  padding-left: 7px;
  border-left: 1px solid var(--ed-rule, #D8D2C3);
}
.viz-share-btn__status--ok { color: var(--ed-accent, #0E7D7D); }
.viz-share-btn__status--err { color: #9F3A1E; }

/* Touch / small screens: always show, sit below the figure not over it. */
@media (max-width: 760px) {
  .viz-share-btn {
    position: static;
    opacity: 1;
    margin: 8px 0 0 auto;
    width: max-content;
    display: flex;
  }
}

/* ─── LEAN COLOPHON (operator brief 2026-06-06) ───────────────────
   Replaces the wordy multi-block colophon. Brand mark + 1-line
   standfirst + minimal subscribe + nav links + issue stamp. */
.ed-colophon--lean {
  max-width: 1180px;
  margin: 64px auto 0;
  padding: 36px 32px 56px;
  border-top: 1px solid var(--ed-rule, #D8D2C3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  background: transparent;
  font-family: var(--ed-serif);
}
.ed-colophon--lean .ed-colophon__head {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ed-colophon--lean .ed-colophon__wm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.015em;
  color: var(--ed-ink);
}
.ed-colophon--lean .ed-colophon__lede-short {
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ed-ink-3, #5C5F66);
  margin: 0;
  max-width: 380px;
}
.ed-colophon--lean .ed-colophon__lede-short a {
  color: var(--ed-accent, #0E7D7D);
  border-bottom: 1px solid var(--ed-accent, #0E7D7D);
  font-style: normal;
}
.ed-colophon--lean .ed-colophon__subscribe {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
}
.ed-colophon--lean .ed-colophon__sub-lab {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}
.ed-colophon--lean .ed-colophon__sub-row {
  display: flex;
  gap: 8px;
}
.ed-colophon--lean .ed-colophon__sub-row input[type="email"] {
  flex: 1;
  font-family: var(--ed-serif);
  font-size: 14.5px;
  padding: 8px 12px;
  border: 1px solid var(--ed-rule-strong, #C4C0B0);
  background: var(--ed-paper, #F6F4EE);
  color: var(--ed-ink);
  border-radius: 0;
}
.ed-colophon--lean .ed-colophon__sub-row input[type="email"]:focus {
  outline: none; border-color: var(--ed-accent);
}
.ed-colophon--lean .ed-colophon__sub-row button {
  font-family: var(--ed-sans, Inter, sans-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 16px;
  background: var(--ed-ink);
  color: var(--ed-paper);
  border: none;
  cursor: pointer;
}
.ed-colophon--lean .ed-colophon__sub-row button:hover { background: var(--ed-accent); }
.ed-colophon--lean .ed-colophon__sub-meta {
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin: 0;
}
.ed-colophon--lean .ed-colophon__sub-meta a {
  color: var(--ed-ink-3);
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
}
.ed-colophon--lean .ed-colophon__sub-meta a:hover { color: var(--ed-accent); border-bottom-color: var(--ed-accent); }
.ed-colophon--lean .ed-colophon__nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--ed-rule, #D8D2C3);
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ed-colophon--lean .ed-colophon__nav a {
  color: var(--ed-ink-2, #2F313A);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.ed-colophon--lean .ed-colophon__nav a:hover {
  color: var(--ed-accent, #0E7D7D);
  border-bottom-color: var(--ed-accent, #0E7D7D);
}
.ed-colophon--lean .ed-colophon__nav-sep {
  color: var(--ed-rule-strong, #C4C0B0);
}
.ed-colophon--lean .ed-colophon__stamp {
  grid-column: 1 / -1;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3, #5C5F66);
  padding-top: 4px;
}
.ed-colophon--lean .ed-colophon__stamp em {
  font-family: var(--ed-serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.ed-colophon--lean .ed-colophon__stamp-sep { margin: 0 10px; color: var(--ed-rule-strong); }
@media (max-width: 760px) {
  .ed-colophon--lean {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 18px 48px;
  }
  .ed-colophon--lean .ed-colophon__head,
  .ed-colophon--lean .ed-colophon__subscribe { grid-column: 1 / -1; }
}

/* ─── PERSONA HOVER CARD (operator brief 2026-06-06) ──────────────
   Tooltip card surfaced on hover over any [data-persona-handle].
   Positioned absolute, dismissed on scroll / outside click. */
.ss-persona-handle {
  cursor: help;
  border-bottom: 1px dotted var(--ed-rule, #D8D2C3);
  transition: border-bottom-color 120ms ease, color 120ms ease;
}
.ss-persona-handle:hover {
  border-bottom-color: var(--ed-accent, #0E7D7D);
  color: var(--ed-accent, #0E7D7D);
}
.ss-persona-card {
  position: absolute;
  width: 240px;
  background: var(--ed-paper, #F6F4EE);
  border: 1px solid var(--ed-rule-strong, #C4C0B0);
  box-shadow: 0 12px 32px rgba(20, 18, 12, 0.12);
  padding: 12px 14px;
  z-index: 80;
  font-family: var(--ed-serif);
  color: var(--ed-ink);
  border-radius: 2px;
}
.ss-persona-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.ss-persona-card__handle {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ed-ink);
}
.ss-persona-card__niche {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-accent, #0E7D7D);
}
.ss-persona-card__archetype {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ed-ink-2, #2F313A);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ed-rule, #D8D2C3);
  padding-bottom: 8px;
}
.ss-persona-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
}
.ss-persona-card__stats > div { display: flex; flex-direction: column; gap: 2px; }
.ss-persona-card__stats dt {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-ink-3, #5C5F66);
}
.ss-persona-card__stats dd {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--ed-ink);
  margin: 0;
}
.ss-persona-card__loading {
  font-family: var(--ed-serif);
  font-style: italic;
  color: var(--ed-ink-3, #5C5F66);
  font-size: 13px;
}

/* ─── MOBILE-FIRST SWEEP (operator brief 2026-06-06) ──────────────
   Audit at 375×667 found: masthead grid target wrong (313px tall +
   wordmark cut), body font 15px triggers iOS zoom-to-input, tap
   targets on .dsc-rxb / .dsc-sort / .dsc-reply / .cl-more-btn all
   below 44px, Sift quadrant container 1493px tall, hover-only
   persona card unusable on touch.

   This block uses (max-width: 640px) to override the existing
   (max-width: 760px) blocks where they're already fighting. */

@media (max-width: 640px) {
  /* ── 1. Body type scale: 16px prevents iOS zoom-to-input. ── */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.5; }
  input, select, textarea { font-size: 16px !important; }

  /* ── 2. Masthead reflow — the bug was grid-template-columns on
     .ed-masthead instead of .ed-masthead__row. Fix + center. ── */
  .ed-masthead { padding: 18px 16px 14px; }
  .ed-masthead__row {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .ed-masthead__edition {
    order: 1;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .16em;
  }
  .ed-masthead__brandwrap { order: 2; }
  .ed-masthead__brand {
    font-size: 34px;
    gap: 10px;
    justify-content: center;
    line-height: 1;
  }
  .ed-masthead__mark { width: 28px; height: 28px; }
  /* Niche tabs row — wraps onto 2 lines if it must, never crops. */
  .ed-masthead__nav {
    order: 3;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 4px;
    font-size: 10.5px;
  }
  .ed-masthead__nav a { padding-bottom: 2px; }

  /* ── 3. Section nav: horizontal scroll + edge fade affordance. ── */
  .ed-section-nav__inner {
    padding: 10px 16px 12px;
    gap: 18px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade right edge to hint at scroll */
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .ed-section-nav__inner::-webkit-scrollbar { display: none; }
  .ed-section-nav__inner a {
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 10.5px;
  }

  /* ── 4. Dateline + Editor's Note + standfirsts: readable type. ── */
  .ed-dateline--standfirst {
    font-size: 14px !important;
    padding: 12px 16px 14px !important;
    text-align: center;
  }
  .ed-eds-note { padding: 8px 16px 0; margin-bottom: 28px; }
  .ed-eds-note__body { font-size: 17px; line-height: 1.5; }
  .ed-eds-note__lab { font-size: 10.5px; }
  .ed-eds-note__byline { font-size: 13px; }

  /* ── 5. Section kickers: stack the byline below the kicker. ── */
  .ed2-sechead {
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    padding: 0 16px 12px;
    margin-bottom: 20px;
  }
  .ed2-sechead__byline { grid-column: 1 / -1; font-size: 12.5px; margin-top: 2px; }
  .ed2-sechead__num { font-size: 12px; }
  .ed2-sechead__kicker { font-size: 10.5px; letter-spacing: .18em; }
  .ed2-headline { font-size: 28px !important; line-height: 1.1 !important; padding: 0 16px; }
  .ed2-standfirst { font-size: 15.5px !important; line-height: 1.5 !important; padding: 0 16px; }
  .ed-held-note { padding: 0 16px; font-size: 14.5px; }
  .section, .section.section-lede { padding-left: 0; padding-right: 0; }

  /* ── 6. Sift quadrant: cap height + scale SVG to fit. The viz
     fallback was stacking vertically and growing to 1493px. ── */
  #viz-landscape, .landscape-wrap {
    max-height: 460px;
    overflow: hidden;
    margin: 0 16px;
    position: relative;
  }
  #viz-landscape svg, .landscape-wrap svg {
    max-width: 100%;
    height: auto;
    max-height: 440px;
  }
  /* Inline contributor voices below the quadrant: stack, looser leading. */
  .sift-voices { padding: 0 16px; }
  .sift-voices > * { font-size: 14.5px; line-height: 1.5; }
  .landscape-caption { padding: 0 16px; font-size: 13.5px; }

  /* ── 7. Consensus ledger (§02 Signal): single-column rows.   ── */
  #consensus-ledger { padding: 0 16px; }
  .cl-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cl-more-btn {
    min-height: 44px; min-width: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ── 8. Spotlight (§03): full-width cards, no horizontal scroll. ── */
  #editorial-section { padding: 0 16px; }
  .sp-card, .sp-feature { padding: 18px 0; }
  .sp-lvl, .sp-lvl-name { font-size: 14px; }

  /* ── 9. Today's Call (§04): poll buttons full-width + tall. ── */
  #hero { padding: 0 16px; }
  .tq-bucket-btn, .tq-vote-btn {
    min-height: 48px;
    font-size: 15px;
    padding: 12px 16px;
  }

  /* ── 10. Hi·Lo (§05): cards stack. ── */
  #seesaw-section, #seesaw { padding: 0 16px; }
  .ss-grid { grid-template-columns: 1fr !important; }

  /* ── 11. Rising (§06): full-width items, larger touch areas. ── */
  #rising-section, #rising { padding: 0 16px; }
  .rs-item { padding: 14px 0; }

  /* ── 12. Mirror (§07): radar SVG scales; identity card readable. ── */
  #mirror-section { padding: 0 16px; }
  #mirror svg { max-width: 100%; height: auto; }

  /* ── 13. Sources (§08): tier ladder full-width accordion. ── */
  #where-this-comes-from, #source-tiers { padding: 0 16px; }

  /* ── 14. Outlet strip (niche pages): hide if it would push width. ── */
  .ed-outlet-strip {
    padding: 8px 16px 0 !important;
    font-size: 12.5px !important;
    text-align: center;
    margin-bottom: 4px;
  }

  /* ── 15. Discussion thread chrome — tap targets ≥ 44px. ── */
  .dsc { padding: 0 16px; }
  .dsc-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dsc-label { font-size: 22px; }
  .dsc-call-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .dsc-call-lab { font-size: 11px; }
  .dsc-call-post-by { font-size: 12.5px; }
  .dsc-call-post-body { font-size: 14.5px; line-height: 1.5; }
  .dsc-call-foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  .dsc-sortbar { gap: 6px; }
  .dsc-sort {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
  /* Reaction row buttons (Thoughtful / New to me / Fair point / Well-sourced) */
  .dsc-rxb {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 22px;
  }
  /* Reply button */
  .dsc-reply {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .dsc-row { padding: 14px 0; }
  .dsc-body { font-size: 15.5px; line-height: 1.55; }
  /* Sign-in gate: tappable button, copy stacks vertically */
  .dsc-gate {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    font-size: 14.5px;
  }
  .dsc-gate-btn {
    min-height: 48px;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14.5px;
  }

  /* ── 16. Figure share button: already shows-on-mobile per earlier
     CSS, but make the tap target taller. ── */
  .viz-share-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ── 17. Scroll-trigger / exit-intent overlay: full-width centered. ── */
  .ss-exit-overlay {
    padding: 16px;
  }
  .ss-exit-inner {
    max-width: 100%;
    padding: 18px;
  }
  .ss-exit-close {
    min-width: 44px;
    min-height: 44px;
    top: 4px;
    right: 4px;
  }
  .ss-gate__email,
  .ss-gate__submit {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
  }
  .ss-gate__submit { letter-spacing: 0.04em; }
  .ss-gate__skip {
    min-height: 44px;
    padding: 12px;
    width: 100%;
  }
  .ss-gate__niches { font-size: 13px; gap: 8px 14px; }

  /* ── 18. Persona hover card: act as a tap-sheet on touch.  ── */
  .ss-persona-card {
    /* Pin to bottom of viewport as a sheet — much friendlier than
       a tooltip near a tap target on a small screen. */
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    top: auto !important;
    width: auto;
    padding: 14px 16px;
    box-shadow: 0 -8px 24px rgba(20, 18, 12, 0.16);
    font-size: 15px;
  }
  .ss-persona-card__handle { font-size: 13px; }
  .ss-persona-card__archetype { font-size: 14.5px; }
  .ss-persona-card__stats dd { font-size: 15px; }

  /* ── 19. Lean colophon — already 1-col on mobile, just denser. ── */
  .ed-colophon--lean { padding: 24px 16px 96px; gap: 18px; }
  .ed-colophon--lean .ed-colophon__wm { font-size: 20px; }
  .ed-colophon--lean .ed-colophon__lede-short { font-size: 14px; }
  .ed-colophon--lean .ed-colophon__sub-row input[type="email"] {
    min-height: 48px;
    font-size: 16px;
  }
  .ed-colophon--lean .ed-colophon__sub-row button {
    min-height: 48px;
    padding: 0 14px;
    font-size: 12px;
  }
  .ed-colophon--lean .ed-colophon__nav {
    gap: 14px 18px;
    font-size: 10.5px;
  }
  .ed-colophon--lean .ed-colophon__nav a { min-height: 36px; display: inline-flex; align-items: center; }

  /* ── 20. Section borders: reduce padding to recover horizontal space. ── */
  .section { padding-left: 0; padding-right: 0; }
  hr.ed-rule { margin: 22px 16px; }

  /* ── 21. Bottom-nav clearance — extra padding so the bnav doesn't
     cover the last section / colophon CTA. ── */
  main, body > footer { padding-bottom: 0; }
  body { padding-bottom: 64px; }
}

/* Tablet pass: 641-900px — softer tunes for the in-between */
@media (min-width: 641px) and (max-width: 900px) {
  .ed-masthead__brand { font-size: 50px; }
  .ed-section-nav__inner { gap: 20px; font-size: 11px; padding: 12px 24px 14px; }
  .ed-colophon--lean { padding: 32px 24px 56px; }
}

/* ─── §01 SIFT COVERAGE STATS SUB-LINE (operator brief 2026-06-06) ─
   Coverage stats moved from the dropped dateline standfirst to a
   small mono sub-line directly under the §01 standfirst. Lets the
   page open straight on "Where this week landed." without the
   horizontal-bar strip above. */
.ed2-stats {
  font-family: var(--ed-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-ink-3, #5C5F66);
  margin: 14px 0 24px;
}
@media (max-width: 640px) {
  .ed2-stats { font-size: 10.5px; padding: 0 16px; margin: 10px 0 20px; }
}

/* ─── ROUNDED CARDS SWEEP (operator brief 2026-06-06 evening) ────
   Operator: "i like the rounded edges. can you apply to other boxes
   across entire site." The reply composer's 12px radius reads as
   modern. Standardise a card-radius scale and apply across every
   major surface. Scale:
     - small (8px):   chips, inputs, sub-cards inside larger cards
     - medium (12px): default card radius (composer, spotlight,
                       discussion, lean colophon subscribe row, etc.)
     - large (16px):  big modals + overlays (gate popup)
   The selectors below intentionally use !important sparingly — only
   to override component CSS files loaded after editorial.css. */

/* §03 Spotlight feature card — currently sharp-cornered */
#editorial-section .sp-feature,
#editorial-section .sp-card {
  border-radius: 12px;
}

/* §04 Today's Call poll card */
#todays-poll .tq-card,
#hero .tq-card {
  border-radius: 12px;
}

/* §05 Hi·Lo asymmetric cards */
#seesaw .ss-card,
#seesaw-section .ss-card,
.ss-card {
  border-radius: 12px;
}

/* §06 Rising momentum card-list — round outer wrap if present */
#rising-section #rising,
#rising .rm-card,
#rising .col-card {
  border-radius: 12px;
}

/* §07 Mirror card */
#mirror-section .col-card,
#mirror .col-card {
  border-radius: 12px;
}

/* §08 Sources tier ladder rows */
#source-tiers .st-row,
#where-this-comes-from .st-row {
  border-radius: 10px;
}

/* Discussion: the "reacting to" anchor + reaction surface */
[data-discussion-mount] .dsc-anchor {
  border-radius: 10px;
}

/* Landing-page niche tiles + preview cards + trust strip */
.ldg-niche { border-radius: 12px; }
.ldg-prev__viz { border-radius: 10px; }
.ldg-trust { border-radius: 0; }  /* keep the trust strip flat — it's a band, not a card */

/* Letters archive issue rows */
.letters-index ul li { border-radius: 8px; }

/* Lean colophon subscribe row inputs + button */
.ed-colophon--lean .ed-colophon__sub-row input[type="email"] { border-radius: 8px; }
.ed-colophon--lean .ed-colophon__sub-row button { border-radius: 999px; }

/* Top-of-page subscribe form (still present on legacy pages) */
.ed-top-subscribe__form input[type="email"] { border-radius: 8px; }
.ed-top-subscribe__form button { border-radius: 999px; }

/* Nominate + advertise forms */
.nom-form, .nom-form__field input, .nom-form__field select, .nom-form__field textarea { border-radius: 8px; }
.nom-form__submit { border-radius: 999px; }

/* Persona hover card (pop-up tooltip) */
.ss-persona-card { border-radius: 10px; }

/* Figure share button */
.viz-share-btn { border-radius: 999px; }

/* Sift-quadrant container — soften the inner frame */
.landscape-wrap, #viz-landscape { border-radius: 12px; overflow: hidden; }

/* Niche-home outlet strip (italic "Drawing from") */
.ed-outlet-strip { border-radius: 8px; }

/* ─── SURGICAL CARD ROUNDING (operator brief 2026-06-06 evening v3) ──
   The previous !important block forced cream backgrounds on every card,
   creating tone-on-tone NESTED cards (outer .sp-feature cream + inner
   sub-section cream = visual mush). Reverted to a more surgical sweep:
   ROUND THE CORNERS ONLY. Backgrounds keep their component defaults
   (white inner against cream outer = real contrast). The previous
   sweep was the wrong fix — operator wanted softer corners, not
   uniform color.

   Surfaces below get rounded corners + a hairline border. Their
   backgrounds are left to the component CSS so nested cards still
   contrast against the outer card. */

#editorial-section .sp-feature,
#editorial-section .sp-card,
#todays-poll .tq-card,
#hero .tq-card,
.tq-card,
#seesaw .ss-card,
#seesaw-section .ss-card,
.ss-card,
#rising .col-card,
#rising-section .col-card,
#mirror-section .col-card,
#mirror .col-card,
.col-card {
  border-radius: 14px !important;
}

#source-tiers .st-tier,
#where-this-comes-from .st-tier,
.st-tier {
  border-radius: 12px !important;
}

/* Sub-card surfaces (chips / evidence pills / outlet chips) — keep
   small radii; backgrounds unchanged. */
.st-tier .st-source,
.st-tier .st-evidence,
.st-tier .st-chip,
.st-source,
.st-evidence,
.st-chip {
  border-radius: 8px !important;
}

/* Consensus ledger sub-section header */
#consensus-ledger .cl-sub {
  border-radius: 8px !important;
}

/* Discussion: sign-in gate (rounded composer treatment) */
.dsc-gate { border-radius: 12px !important; }
.dsc-gate-btn { border-radius: 999px !important; }

/* Today's poll segmented buttons */
.tq-seg,
.tq-vote-btn,
.tq-bucket-btn { border-radius: 8px !important; }

/* Today's Call critics/crowd bars */
.tq-bar,
.tq-result-bar { border-radius: 999px !important; }

/* ─────────────────────────────────────────────────────────────────────
 * §20 — CARD-SYSTEM HARD-WIRE (added 2026-06-06)
 *
 * Operator caught the §04 Today's Call question card rendering as a
 * sharp-cornered pure-white box on cream paper, AGAIN, the third time
 * this kind of drift has shipped. The prior fix (§19 prose in
 * BRAND_GUIDE.md) was advisory — components kept inventing their own
 * background + radius, falling back to white when --surface wasn't set.
 *
 * This block makes the rule enforceable in CSS, not prose:
 *
 *   1. `.ed-card` — base class for new components. Use this instead of
 *      inventing `.foo-card` with bespoke padding/bg/radius. Inherits
 *      cream surface + main-card radius automatically.
 *   2. `.ed-card-sub` — sub-card scale (8px radius, denser padding).
 *      Use inside another card.
 *   3. `.ed-card-pill` — full pill (999px) for chips + buttons.
 *
 *   4. Defensive sweep: any element whose class ends in `-card`, `-box`,
 *      `-panel`, `-shell`, OR contains the word `card` AND has no
 *      explicit border-radius rule, gets the 14 px main-card radius
 *      and cream surface as a floor. This catches future drift from
 *      new components that forget the rules.
 *
 * If a component genuinely needs pure white (e.g., a screenshot frame
 * inside an article), it must opt in with `.ed-card--white` explicitly,
 * so the override is visible in code review.
 * ─────────────────────────────────────────────────────────────────── */

.ed-card {
  background: var(--ed-paper) !important;
  border: 1px solid var(--ed-rule);
  border-radius: 14px !important;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 16, 20, .04);
}

.ed-card-sub {
  background: var(--ed-paper) !important;
  border: 1px solid var(--ed-rule);
  border-radius: 8px !important;
  padding: 12px 14px;
}

.ed-card-pill {
  border-radius: 999px !important;
}

/* Explicit white-on-cream opt-in for the rare case it's actually wanted */
.ed-card--white {
  background: #FFFFFF !important;
}

/* Floor: any element whose class hints "card-like" gets the minimum
 * radius + cream background so a forgotten declaration can't render as
 * a flat white app-card again. Specific component rules with higher
 * specificity still win — this is only the safety net. */
[class$="-card"],
[class$=" card"],
[class*="-card "],
[class$="-box"],
[class*="-box "],
[class$="-panel"],
[class*="-panel "],
[class$="-shell"],
[class*="-shell "] {
  border-radius: 12px;
}

/* Hard floor on pure-white card surfaces. If a component sets
 * background:#fff or background:white on a card-like class, this
 * resets it to cream. The opt-in `.ed-card--white` class above
 * overrides this with !important + explicit intent. */
[class$="-card"]:not(.ed-card--white):not(.no-card-floor),
[class*="-card "]:not(.ed-card--white):not(.no-card-floor) {
  background-color: var(--ed-paper);
}