/* ============================================================
   The Watchtower — News section for CDO.me
   Two modes: default (light) + batman (dark HUD).
   IMPORTANT: Batman tokens are scoped to .wt-shell ONLY.
   The primary CDO.me nav and the main cdo-footer never change,
   regardless of mode. Accessibility is the design goal; WCAG AA
   contrast is the minimum floor on text + interactive UI.
   ============================================================ */

/* Fonts are loaded via <link> in each news page head (preconnect +
   stylesheet) instead of @import here. Reason: @import is render-
   blocking and serializes after the CSS bytes finish downloading,
   while a parallel <link> can start the font request earlier and
   the preconnect hint can warm the gstatic connection sooner.
   Required faces: Playfair Display ital,wght 0/1×{400,700,900/400,700}
   and Source Serif 4 ital,opsz,wght 0/1×8..60×{400,600,700/400,600}. */

/* ------------------------------------------------------------
   1. Token layer — scoped to .wt-shell. Nothing here leaks out.
   ------------------------------------------------------------ */

/* Mini masthead lives OUTSIDE .wt-shell on article pages, so it needs its
   own scope for --wt-logo-fill. Same default/batman values as the shell. */
.wt-mini,
.wt-shell {
  --wt-logo-fill: #141414;
}
html[data-mode="batman"] .wt-mini,
html[data-mode="batman"] .wt-shell {
  --wt-logo-fill: #dbeafe;
}
/* Prevent browser visited-link purple from leaking into the logo <a>. */
.wt-mini__logo,
.wt-mini__logo:visited,
.wt-masthead__logo a,
.wt-masthead__logo a:visited {
  color: var(--wt-logo-fill);
}

.wt-shell {
  /* Neutral system (default mode) */
  --wt-page-bg:       #f7f7f7;
  --wt-surface:       #ffffff;
  --wt-rule:          #d6d6d6;
  --wt-rule-strong:   #141414;
  --wt-ink:           #141414;
  --wt-ink-soft:      #424242;
  --wt-ink-quiet:     #6e6e6e;     /* 4.78:1 on #f7f7f7, 5.07:1 on #fff — passes AA small text */
  --wt-eyebrow:       #6e6e6e;     /* same scale; was #737373 (4.43:1, fails AA) */
  --wt-link:          #0a3a8f;     /* deep navy link — 7.1:1 on white */
  --wt-link-hover:    #052273;
  --wt-accent:        #052273;
  --wt-chip-bg:       #f0f2f6;
  --wt-chip-border:   #d6d9e0;
  --wt-chip-ink:      #1a1a1a;
  --wt-logo-fill:     #141414;
  --wt-toggle-fill:   #141414;
  --wt-toggle-bg:     transparent;
  --wt-img-filter:    none;
  --wt-btn-bg:        #0a3a8f;
  --wt-btn-bg-hover:  #052273;
  --wt-btn-ink:       #ffffff;
  --wt-panel-bg:      #f0f4fb;
  --wt-panel-border:  #c9d6ec;

  /* Typography */
  --wt-font-display: "Playfair Display", "Old Standard TT", Georgia, "Times New Roman", serif;
  --wt-font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --wt-font-ui:      var(--font-family-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  /* Aliases used by the layout=c (NYT-style) rules. Without these the
     `font:` shorthands containing var(--cdo-sans) become invalid and
     font-family falls through to the body serif — which is why eyebrows
     and meta rendered in serif instead of Inter. */
  --cdo-sans:        var(--wt-font-ui);
  --cdo-serif:       var(--wt-font-body);
}

/* ---- Batman mode tokens, scoped to the shell ---- */
html[data-mode="batman"] .wt-shell {
  --wt-page-bg:       #05080f;
  --wt-surface:       #0a1220;
  --wt-rule:          #1a2d48;
  --wt-rule-strong:   #a9c8e8;   /* paper-blue — the hue from the user's reference */
  --wt-ink:           #dbeafe;   /* body — 12.1:1 on #05080f */
  --wt-ink-soft:      #a9c8e8;   /* secondary — 7.9:1 */
  --wt-ink-quiet:     #7e9cc0;   /* quiet — 4.9:1 */
  --wt-eyebrow:       #a9c8e8;   /* meets WCAG AA as small text */
  --wt-link:          #cfe2fa;   /* 10.9:1 — links clearly readable */
  --wt-link-hover:    #ffffff;
  --wt-accent:        #a9c8e8;
  --wt-chip-bg:       rgba(169, 200, 232, 0.10);
  --wt-chip-border:   rgba(169, 200, 232, 0.35);
  --wt-chip-ink:      #cfe2fa;
  --wt-logo-fill:     #dbeafe;
  --wt-toggle-fill:   #a9c8e8;
  --wt-toggle-bg:     rgba(169, 200, 232, 0.08);
  /* Dark Knight image tone: aim for a newsprint-cyanotype blue wash.
     Strategy: brightness + contrast set the mood, then saturate low to
     strip original color, then a small sepia + hue-rotate to paint blue,
     then a modest final saturate to keep the blue readable without
     amplifying reds into the magenta bleed the old formula produced. */
  --wt-img-filter:    brightness(0.78) contrast(1.06) saturate(0.20) sepia(0.22) hue-rotate(192deg) saturate(1.25);
  --wt-btn-bg:        #cfe2fa;   /* soft paper-blue button */
  --wt-btn-bg-hover:  #ffffff;
  --wt-btn-ink:       #05080f;   /* dark on soft-blue — 12:1 */
  --wt-panel-bg:      rgba(169, 200, 232, 0.06);
  --wt-panel-border:  rgba(169, 200, 232, 0.28);
}

/* ------------------------------------------------------------
   1a. CLS reservation — every JS-rendered <main> on the news
   surface is empty until JS lands content (homepage, pulse,
   open category pages). Without a min-height the footer paints
   inside the viewport during the ~500ms loading window, then
   shifts ~3000px when content lands. Reserves ~1 viewport so
   the shift happens below the fold.
   Excludes gated mains (current-customers, target-customers,
   competitors) — those stay empty until unlock, and reserving
   80vh would create awkward whitespace.
   ------------------------------------------------------------ */
main[data-wt-home],
main[data-wt-pulse],
main[data-wt-category]:not([data-wt-requires-unlock]) {
  min-height: 80vh;
}

/* ------------------------------------------------------------
   1b. Skip link — WCAG 2.4.1 Bypass Blocks. First focusable
   element on the page; jumps over the nav/masthead to <main>.
   ------------------------------------------------------------ */
.wt-skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--wt-ink);
  color: var(--wt-btn-ink, #fff);
  padding: 10px 16px;
  border-radius: 4px;
  font: 600 14px/1 var(--wt-font-ui);
  text-decoration: none;
  z-index: 100;
  transition: top 120ms ease;
}
.wt-skip-link:focus {
  top: 12px;
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
}

/* Visually-hidden utility — content stays in the AT tree (screen
   readers, search engines, no-JS fallback) but disappears from the
   visual layout. Used on the static <h1> placeholder inside each
   <main>: if JS renders, it overwrites the placeholder; if JS fails,
   the SR-only heading still gives the page a top-level outline.
   WCAG 1.3.1, 2.4.6. */
.wt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   2. Primary nav + main cdo-footer — locked to light brand.
   Explicit resets so nothing inherits Batman-mode anything.
   ------------------------------------------------------------ */

/* Force sans stack so body.watchtower-body serif doesn't bleed. */
.cdo-nav, .cdo-nav *,
.cdo-footer, .cdo-footer * {
  font-family: var(--font-family-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Hard reset: primary nav is completely unaffected by [data-mode="batman"]. */
html[data-mode="batman"] .cdo-nav-wrapper,
html[data-mode="batman"] .cdo-nav,
html[data-mode="batman"] .cdo-nav *,
html[data-mode="batman"] .cdo-footer,
html[data-mode="batman"] .cdo-footer * {
  /* Intentionally no rules — inherits from cdo-me.css unchanged. */
}

/* The watchtower-body class: light by default.
   In Batman mode the ENTIRE body goes dark so the Watchtower canvas
   feels like a full blackout — only the primary nav and footer remain
   visually light (both have their own opaque backgrounds below). */
body.watchtower-body {
  background: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
  transition: background-color 220ms ease;
}

/* On news pages the primary CDO nav is NOT sticky — it scrolls off and
   the mini Watchtower header takes over as the sticky element. */
body.watchtower-body .cdo-nav-wrapper {
  position: static;
}

html[data-mode="batman"] body.watchtower-body {
  background: #05080f;
}

/* The primary nav sits on rgba white-with-blur so in Batman mode the dark
   body would bleed through and darken the nav. Hold the nav fully opaque
   in Batman mode so the brand header never flickers dark. */
html[data-mode="batman"] .cdo-nav-wrapper {
  background: #ffffff;
}

/* ------------------------------------------------------------
   3. The Watchtower canvas
   ------------------------------------------------------------ */

.wt-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 8px;
  background: var(--wt-page-bg);
  color: var(--wt-ink);
  transition: background-color 220ms ease, color 220ms ease;
  /* Give the shell some breathing room from the page edge so
     the light nav + light footer frame it visually. */
}

html[data-mode="batman"] .wt-shell {
  background: transparent;   /* body paints the dark; shell stays a content rail */
  color: var(--wt-ink);
  box-shadow: none;
}

/* Serif body inside the shell only. */
.wt-shell {
  font-family: var(--wt-font-body);
}

/* ------------------------------------------------------------
   4. Masthead
   ------------------------------------------------------------ */

.wt-masthead {
  border-bottom: 1px solid var(--wt-rule);
  padding: 20px 0 10px;
  position: relative;
}

.wt-masthead__utility {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  font-family: var(--wt-font-ui);
  color: var(--wt-ink-quiet);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wt-masthead__search {
  justify-self: start;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.wt-masthead__search:hover { color: var(--wt-ink); }
.wt-masthead__search:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
  border-radius: 2px;
}

.wt-masthead__search svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.wt-masthead__date {
  justify-self: center;
  white-space: nowrap;
}

.wt-batmode {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wt-toggle-bg);
  border: 1px solid var(--wt-rule);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  cursor: pointer;
  font: inherit;
  font-family: var(--wt-font-ui);
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--wt-ink-soft);
  transition: background 160ms ease, border-color 160ms ease;
}

.wt-batmode:hover { border-color: var(--wt-rule-strong); }
.wt-batmode:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
}

.wt-batmode svg {
  width: 28px;
  height: auto;
  fill: var(--wt-toggle-fill);
  transition: fill 200ms ease;
}

html[data-mode="batman"] .wt-batmode svg {
  filter: drop-shadow(0 0 5px rgba(169, 200, 232, 0.45));
}

.wt-batmode__label::before { content: "Dark Knight mode: "; color: var(--wt-ink-quiet); }
.wt-batmode__label::after  { content: "Off"; }
html[data-mode="batman"] .wt-batmode__label::after { content: "On"; color: var(--wt-eyebrow); }

/* Logo row */
.wt-masthead__logo {
  display: flex;
  justify-content: center;
  padding: 8px 0 6px;
}

.wt-masthead__logo a {
  display: inline-block;
  text-decoration: none;
}

/* Inline SVG injected by cdo-watchtower.js. We set `color` so the <svg>
   inherits fill via currentColor. `height` sizes the SVG (viewBox scales). */
.wt-logo {
  display: inline-block;
  line-height: 0;
  color: var(--wt-logo-fill);
  transition: color 240ms ease;
}
.wt-logo svg {
  height: 52px;
  width: auto;
  max-width: 80vw;
  display: block;
}

.wt-logo--gotham { display: none; }
html[data-mode="batman"] .wt-logo--watchtower { display: none; }
html[data-mode="batman"] .wt-logo--gotham { display: inline-block; }

@media (min-width: 900px) {
  .wt-logo svg { height: 68px; }
}

/* ------------------------------------------------------------
   5. Sub-navigation
   ------------------------------------------------------------ */

.wt-subnav {
  border-top: 1px solid var(--wt-rule);
  border-bottom: 1px solid var(--wt-rule);
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-family: var(--wt-font-ui);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.wt-subnav__item {
  color: var(--wt-ink);
  text-decoration: none;
  padding: 6px 4px;
  position: relative;
  white-space: nowrap;
  transition: color 140ms ease;
}

.wt-subnav__item:hover { color: var(--wt-link); }
.wt-subnav__item:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
  border-radius: 2px;
}

.wt-subnav__item[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--wt-ink);
}

html[data-mode="batman"] .wt-subnav__item[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--wt-ink);
}

.wt-subnav__gated { display: none; }
.wt-subnav[data-unlocked="true"] .wt-subnav__gated {
  display: inline-flex;
  align-items: center;
}

/* Lock */
.wt-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wt-chip-bg);
  border: 1px solid var(--wt-chip-border);
  color: var(--wt-chip-ink);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-family: var(--wt-font-ui);
  transition: background 140ms ease, border-color 140ms ease;
}

.wt-lock:hover { border-color: var(--wt-rule-strong); }
.wt-lock:focus-visible { outline: 2px solid var(--wt-link); outline-offset: 2px; }

.wt-lock svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.wt-subnav[data-unlocked="true"] .wt-lock { display: none; }

.wt-passwd {
  display: none;
  align-items: center;
  gap: 6px;
}

.wt-subnav[data-passwd-open="true"] .wt-passwd { display: inline-flex; }
.wt-subnav[data-passwd-open="true"] .wt-lock { display: none; }

.wt-passwd__input {
  border: none;
  border-bottom: 1px solid var(--wt-ink);
  background: transparent;
  padding: 4px 28px 4px 6px;
  color: var(--wt-ink);
  font: inherit;
  font-family: var(--wt-font-ui);
  min-width: 160px;
}
.wt-passwd__input:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Unlock modal — opened by the mini lock button on pages without the
   big masthead (article detail) or when the big masthead has scrolled
   off. Same focus-trap + aria-modal rigging as the search overlay.
   ------------------------------------------------------------ */
.wt-unlock {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1400;
}
.wt-unlock[data-open="true"] { display: flex; }
.wt-unlock__panel {
  background: #ffffff;
  border-radius: 10px;
  padding: 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--wt-font-ui);
}
html[data-mode="batman"] .wt-unlock__panel {
  background: #0a1220;
  color: #dbeafe;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.wt-unlock__title {
  font-family: var(--wt-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #141414;
}
html[data-mode="batman"] .wt-unlock__title { color: #ffffff; }
.wt-unlock__copy {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 18px;
  line-height: 1.45;
}
html[data-mode="batman"] .wt-unlock__copy { color: #a9c8e8; }
.wt-unlock__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  padding: 2px;
  background: #fff;
}
html[data-mode="batman"] .wt-unlock__row {
  background: rgba(169, 200, 232, 0.06);
  border-color: rgba(169, 200, 232, 0.28);
}
.wt-unlock__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: inherit;
}
.wt-unlock__input:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
  border-radius: 4px;
}
.wt-unlock__toggle {
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  color: #6b7280;
}
.wt-unlock__toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.wt-unlock__toggle .eye-off { display: none; }
.wt-unlock__toggle[data-shown="true"] .eye-on { display: none; }
.wt-unlock__toggle[data-shown="true"] .eye-off { display: inline; }
.wt-unlock__error {
  font-size: 13px;
  color: #b42318;
  margin: 10px 0 0;
  display: none;
}
.wt-unlock__error[data-visible="true"] { display: block; }
.wt-unlock__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.wt-unlock__cancel,
.wt-unlock__submit {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.wt-unlock__cancel {
  background: transparent;
  color: #4b5563;
  border-color: #d6d6d6;
}
.wt-unlock__submit {
  background: #141414;
  color: #fff;
}
html[data-mode="batman"] .wt-unlock__cancel {
  color: #a9c8e8;
  border-color: rgba(169, 200, 232, 0.4);
}
html[data-mode="batman"] .wt-unlock__submit {
  background: #cfe2fa;
  color: #05080f;
}
.wt-unlock__cancel:focus-visible,
.wt-unlock__submit:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 3px;
}

/* Show/hide toggle inside the subnav popover password input */
.wt-passwd__wrap { position: relative; display: inline-block; }
.wt-passwd__toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--wt-ink-quiet);
  line-height: 1;
}
.wt-passwd__toggle:hover { color: var(--wt-ink); }
.wt-passwd__toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.wt-passwd__toggle .eye-off { display: none; }
.wt-passwd__toggle[data-shown="true"] .eye-on { display: none; }
.wt-passwd__toggle[data-shown="true"] .eye-off { display: inline; }

.wt-passwd__input:focus { border-color: var(--wt-link); }
.wt-passwd[data-state="error"] .wt-passwd__input {
  border-color: #c81e1e;
  color: #c81e1e;
}
html[data-mode="batman"] .wt-passwd[data-state="error"] .wt-passwd__input {
  border-color: #ffb3b3;
  color: #ffb3b3;
}

.wt-passwd__cancel {
  background: none;
  border: none;
  color: var(--wt-ink-quiet);
  cursor: pointer;
  font: inherit;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  padding: 2px 4px;
}
.wt-passwd__cancel:hover { color: var(--wt-ink); }

/* ------------------------------------------------------------
   6. Search overlay (new — functional)
   ------------------------------------------------------------ */

/* Overlay: a solid scrim so page content behind is fully dimmed.
   In both modes we want the search to be the ONLY thing the eye reads. */
.wt-search {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1200;    /* above primary nav sticky wrapper */
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 24px;
}
html[data-mode="batman"] .wt-search {
  background: rgba(0, 0, 0, 0.88);
}
.wt-search[data-open="true"] { display: flex; }

.wt-search__panel {
  width: min(720px, 100%);
  background: #ffffff;
  color: #141414;
  border: 1px solid #141414;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
}
html[data-mode="batman"] .wt-search__panel {
  background: #0a1220;
  color: #dbeafe;
  border-color: #a9c8e8;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(169, 200, 232, 0.35);
}

.wt-search__input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #141414;
}
html[data-mode="batman"] .wt-search__input-row {
  border-bottom-color: #a9c8e8;
}

.wt-search__input-row svg {
  width: 20px; height: 20px;
  stroke: #141414;
  fill: none; stroke-width: 2;
  flex-shrink: 0;
}
html[data-mode="batman"] .wt-search__input-row svg {
  stroke: #a9c8e8;
}

.wt-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--wt-font-ui);
  font-size: 20px;
  font-weight: 500;
  color: #141414;
}
.wt-search__input::placeholder {
  color: #737373;
  font-weight: 400;
}
html[data-mode="batman"] .wt-search__input { color: #ffffff; }
html[data-mode="batman"] .wt-search__input::placeholder { color: #7e9cc0; }

.wt-search__close {
  background: #141414;
  border: 1px solid #141414;
  border-radius: 4px;
  font: inherit;
  font-family: var(--wt-font-ui);
  color: #ffffff;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.wt-search__close:hover { background: #000; border-color: #000; }
html[data-mode="batman"] .wt-search__close {
  background: #cfe2fa;
  border-color: #cfe2fa;
  color: #05080f;
}
html[data-mode="batman"] .wt-search__close:hover {
  background: #ffffff;
  border-color: #ffffff;
}

.wt-search__results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
}

.wt-search__result {
  display: block;
  padding: 16px 20px;
  text-decoration: none;
  color: #141414;
  border-bottom: 1px solid #e6e6e6;
}
html[data-mode="batman"] .wt-search__result {
  color: #dbeafe;
  border-bottom-color: rgba(169, 200, 232, 0.22);
}
.wt-search__result:last-child { border-bottom: none; }
.wt-search__result:hover { background: #f5f7fb; }
.wt-search__result:focus-visible {
  background: #f5f7fb;
  outline: 2px solid var(--wt-link);
  outline-offset: -2px;
}
html[data-mode="batman"] .wt-search__result:hover,
html[data-mode="batman"] .wt-search__result:focus { background: rgba(169, 200, 232, 0.10); }

.wt-search__result-kicker {
  display: inline-block;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #424242;
  margin-bottom: 6px;
}
html[data-mode="batman"] .wt-search__result-kicker { color: #a9c8e8; }

.wt-search__result-headline {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  margin: 0 0 6px;
  color: inherit;
}

.wt-search__result-dek {
  font-size: 14px;
  color: #424242;
  margin: 0;
  line-height: 1.45;
}
html[data-mode="batman"] .wt-search__result-dek { color: #cfe2fa; }

.wt-search__empty {
  padding: 36px 20px;
  text-align: center;
  color: #737373;
  font-family: var(--wt-font-ui);
  font-size: 14px;
}
html[data-mode="batman"] .wt-search__empty { color: #a9c8e8; }

/* ------------------------------------------------------------
   7. Article grid (unchanged structure; palette via tokens)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Home page modules (NYT-style mixed rhythm).
   Every module is a self-contained section. align-items:start on the
   hero prevents dead whitespace under a short lead when the right column
   is taller.
   ------------------------------------------------------------ */

.wt-mod { padding: 32px 0; border-bottom: 1px solid var(--wt-rule); }
.wt-mod:last-child { border-bottom: 0; }
.wt-mod__hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 20px;
  border-top: 2px solid var(--wt-rule-strong);
  padding-top: 10px;
}
.wt-mod__label {
  font-family: var(--wt-font-ui);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--wt-ink);
}
.wt-mod__more {
  font-family: var(--wt-font-ui);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--wt-link); text-decoration: none;
}
.wt-mod__more:hover { text-decoration: underline; }

/* --- Hero: 3-column, lead left doesn't stretch --- */
.wt-mod--hero {
  display: grid; grid-template-columns: 1fr;
  gap: 28px 40px; padding: 28px 0 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .wt-mod--hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  /* Row 1: lead | rail | rail-b.  Row 2: lead-sub | tertiary | quaternary.
     Every cell carries a card so no empty space opens under the lead. */
  .wt-mod--hero > .wt-card--lead {
    grid-column: 1 / 2; grid-row: 1 / 2;
    border-right: 1px solid var(--wt-rule);
    border-bottom: 1px solid var(--wt-rule);
    padding-right: 40px;
    padding-bottom: 24px;
    align-self: start;
  }
  .wt-mod--hero > .wt-card--lead-sub {
    grid-column: 1 / 2; grid-row: 2 / 3;
    border-right: 1px solid var(--wt-rule);
    padding-right: 40px;
    padding-top: 24px;
    align-self: start;
  }
  .wt-mod--hero > .wt-card--rail {
    grid-column: 2 / 3;
    border-bottom: 1px solid var(--wt-rule);
    padding-bottom: 24px;
  }
  .wt-mod--hero > .wt-card--rail-b {
    grid-column: 3 / 4;
    border-bottom: 1px solid var(--wt-rule);
    border-left: 1px solid var(--wt-rule);
    padding-left: 40px;
    padding-bottom: 24px;
  }
  .wt-mod--hero > .wt-card--tertiary { grid-column: 2 / 3; grid-row: 2 / 3; padding-top: 24px; }
  .wt-mod--hero > .wt-card--quaternary {
    grid-column: 3 / 4; grid-row: 2 / 3;
    border-left: 1px solid var(--wt-rule);
    padding-left: 40px; padding-top: 24px;
  }
}

/* --- Doubled feature: 2-up big image cards --- */
.wt-mod--doubled {
  display: grid; grid-template-columns: 1fr;
  gap: 28px 40px;
}
@media (min-width: 720px) {
  .wt-mod--doubled { grid-template-columns: 1fr 1fr; }
  .wt-mod--doubled > *:nth-child(2) { border-left: 1px solid var(--wt-rule); padding-left: 40px; }
}

/* --- Latest strip: 4-up (or 2-up mobile) --- */
.wt-mod__strip { display: grid; gap: 28px 32px; }
.wt-mod__strip--four { grid-template-columns: 1fr; }
.wt-mod__strip--three { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .wt-mod__strip--four { grid-template-columns: repeat(2, 1fr); }
  .wt-mod__strip--three { grid-template-columns: repeat(3, 1fr); }
  .wt-mod__strip--three > *:not(:first-child) {
    border-left: 1px solid var(--wt-rule); padding-left: 32px;
  }
}
@media (min-width: 1000px) {
  .wt-mod__strip--four { grid-template-columns: repeat(4, 1fr); }
  .wt-mod__strip--four > *:not(:first-child) {
    border-left: 1px solid var(--wt-rule); padding-left: 28px;
  }
}

/* --- Homepage Pulse + Trending modules: social tiles and topic chips
   wired into the NYT-style article grid so the page doesn't look
   sparse when the article pool is small. --- */
.wt-mod--pulse { padding: 28px 0; border-top: 1px solid var(--wt-rule); }
.wt-mod__pulse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .wt-mod__pulse-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .wt-mod__pulse-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Per-category full-width section. NYT-like "Arts" block real
   estate: eyebrow header + featured article (left, big image) +
   secondary rail (right, 2-3 compact articles) + topic-matched
   Pulse sidebar below. Each category gets its own dedicated module
   down the home page. --- */
.wt-mod--cat-section {
  padding: 36px 0;
  border-top: 2px solid var(--wt-ink);
}
.wt-cat-sec__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.wt-cat-sec__label {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  color: var(--wt-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wt-cat-sec__label:hover { color: var(--wt-link-hover); }
.wt-cat-sec__more {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wt-ink-soft);
  text-decoration: none;
}
.wt-cat-sec__more:hover { color: var(--wt-ink); }
.wt-cat-sec__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 36px;
}
@media (min-width: 900px) {
  .wt-cat-sec__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
  .wt-cat-sec__grid > .wt-card--cat-featured { grid-column: 1; grid-row: 1 / span 2; }
  .wt-cat-sec__rail { grid-column: 2; grid-row: 1; }
  .wt-cat-sec__pulse { grid-column: 2; grid-row: 2; }
}
.wt-cat-sec__rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 0;
}
@media (min-width: 900px) {
  .wt-cat-sec__rail {
    border-left: 1px solid var(--wt-rule);
    padding-left: 36px;
  }
}
.wt-card--cat-featured .wt-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
  background: var(--wt-chip-bg);
  filter: var(--wt-img-filter);
}
.wt-card--cat-featured .wt-card__headline {
  font-family: var(--wt-font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.wt-card--cat-rail {
  display: block;
}
.wt-card--cat-rail + .wt-card--cat-rail {
  border-top: 1px solid var(--wt-rule);
  padding-top: 16px;
}
.wt-card--cat-rail .wt-card__media { display: none; }
.wt-card--cat-rail .wt-card__headline {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  margin: 4px 0 6px;
}
.wt-card--cat-rail .wt-card__dek {
  font-size: 14px;
  line-height: 1.4;
  color: var(--wt-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wt-cat-sec__pulse {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--wt-rule);
}
@media (min-width: 900px) {
  .wt-cat-sec__pulse {
    padding-top: 0;
    padding-left: 36px;
    border-top: 0;
    border-left: 1px solid var(--wt-rule);
  }
}
.wt-cat-sec__pulse-label {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  font-weight: 700;
}

/* --- NYT-style section column. Image + lead headline + stacked
   plain-text secondary headlines. Packs 4-5 articles into one
   narrow column. Multi-column row stacks 3 of these side-by-side. --- */
.wt-mod--sec-row { padding: 28px 0 36px; border-top: 1px solid var(--wt-rule); }
.wt-sec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
}
@media (min-width: 720px) {
  .wt-sec-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .wt-sec-row { grid-template-columns: repeat(3, 1fr); }
  .wt-sec-row > .wt-sec-col:not(:first-child) {
    border-left: 1px solid var(--wt-rule);
    padding-left: 24px;
  }
}
.wt-sec-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wt-sec-col__label {
  display: inline-block;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wt-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--wt-ink);
  align-self: flex-start;
  margin-bottom: 6px;
}
.wt-sec-col__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--wt-ink);
}
.wt-sec-col__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--wt-chip-bg);
  filter: var(--wt-img-filter);
}
.wt-sec-col__headline {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  color: var(--wt-ink);
  margin: 0;
}
.wt-sec-col__lead:hover .wt-sec-col__headline { color: var(--wt-link-hover); }
.wt-sec-col__item {
  display: block;
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--wt-ink);
  text-decoration: none;
  padding: 8px 0;
  border-top: 1px solid var(--wt-rule);
}
.wt-sec-col__item:hover { color: var(--wt-link-hover); }

/* --- Dense text list row — NYT "Politics/Opinion" feel. 3 columns
   of 5-6 plain headline links each, kicker eyebrow per link. --- */
.wt-mod--text-lists { padding: 28px 0 36px; border-top: 1px solid var(--wt-rule); }
.wt-text-list-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 36px;
}
@media (min-width: 720px) {
  .wt-text-list-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .wt-text-list-row { grid-template-columns: repeat(3, 1fr); }
  .wt-text-list-row > .wt-text-list:not(:first-child) {
    border-left: 1px solid var(--wt-rule);
    padding-left: 28px;
  }
}
.wt-text-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wt-text-list__label {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wt-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wt-ink);
  padding-bottom: 4px;
  margin-bottom: 6px;
  align-self: flex-start;
}
.wt-text-list ul { list-style: none; padding: 0; margin: 0; }
.wt-text-list__item { border-top: 1px solid var(--wt-rule); }
.wt-text-list__item:first-child { border-top: 0; }
.wt-text-list__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--wt-ink);
}
.wt-text-list__link:hover .wt-text-list__headline { color: var(--wt-link-hover); }
.wt-text-list__kicker {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-text-list__headline {
  font-family: var(--wt-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.28;
  color: var(--wt-ink);
}

.wt-mod--trending { padding: 20px 0 8px; }
.wt-trend__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}
.wt-trend__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--wt-rule);
  border-radius: 999px;
  text-decoration: none;
  color: var(--wt-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.wt-trend__chip:hover {
  border-color: var(--wt-ink);
  background: var(--wt-chip-bg);
}
.wt-trend__chip[aria-expanded="true"] {
  background: var(--wt-ink);
  border-color: var(--wt-ink);
  color: var(--wt-paper, #fff);
}
html[data-mode="batman"] .wt-trend__chip[aria-expanded="true"] {
  background: var(--wt-ink);
  color: var(--wt-surface);
}
.wt-trend__chip[aria-expanded="true"] .wt-trend__meta {
  color: inherit;
  opacity: 0.82;
}

/* Expansion drawer — renders the clicked topic's top_posts inline. */
.wt-trend__expansion {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--wt-rule);
  border-radius: 12px;
  background: var(--wt-chip-bg);
}
html[data-mode="batman"] .wt-trend__expansion {
  background: var(--wt-surface);
  border-color: var(--wt-rule);
}
.wt-trend__expansion[hidden] { display: none; }
.wt-trend__expansion-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--wt-rule);
}
.wt-trend__expansion-label {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--wt-ink);
}
.wt-trend__expansion-kw {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-soft);
  letter-spacing: 0.02em;
}
.wt-trend__expansion-meta {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  color: var(--wt-ink-quiet);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
}
.wt-trend__expansion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .wt-trend__expansion-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .wt-trend__expansion-grid { grid-template-columns: repeat(3, 1fr); }
}
.wt-trend__label {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.wt-trend__meta {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  color: var(--wt-ink-quiet);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Category hero: NYT Business-style, one clearly-featured lead + a
   secondary middle with image + a stacked text column on the right. The
   featured card is the only one with a big image. --- */
.wt-mod--category-hero {
  display: grid; grid-template-columns: 1fr;
  gap: 28px 40px; padding: 28px 0 40px;
  align-items: start;
}
@media (min-width: 720px) {
  .wt-mod--category-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wt-mod--category-hero > .wt-card--featured { grid-column: 1 / 2; grid-row: 1 / 3; }
  .wt-mod--category-hero > .wt-card--secondary { grid-column: 2 / 3; grid-row: 1 / 2; padding-left: 32px; border-left: 1px solid var(--wt-rule); }
  .wt-mod--category-hero > .wt-mod__stack--cat { grid-column: 2 / 3; grid-row: 2 / 3; padding-left: 32px; border-left: 1px solid var(--wt-rule); padding-top: 24px; border-top: 1px solid var(--wt-rule); }
}
@media (min-width: 1000px) {
  .wt-mod--category-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .wt-mod--category-hero > .wt-card--featured  { grid-column: 1 / 2; grid-row: 1 / 3; border-right: 1px solid var(--wt-rule); padding-right: 40px; }
  .wt-mod--category-hero > .wt-card--secondary { grid-column: 2 / 3; grid-row: 1 / 3; padding-left: 40px; padding-right: 32px; border-left: none; border-right: 1px solid var(--wt-rule); }
  .wt-mod--category-hero > .wt-mod__stack--cat { grid-column: 3 / 4; grid-row: 1 / 3; padding-left: 32px; padding-top: 0; border-left: none; border-top: none; }
}

/* Featured card: oversized image + big headline + dek. The biggest thing
   on the page — NYT always has ONE clearly featured story at the top. */
.wt-card--featured .wt-card__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
}
.wt-card--featured .wt-card__headline {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
}
.wt-card--featured .wt-card__dek {
  font-size: 17px; line-height: 1.5; margin-top: 10px;
}

/* Secondary card: medium image + medium headline + dek. */
.wt-card--secondary .wt-card__media {
  aspect-ratio: 3 / 2;
  margin-bottom: 14px;
}
.wt-card--secondary .wt-card__headline {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.15;
}

/* The stacked right column's items are text-only (media already hidden
   by .wt-card--stack rule below). */
.wt-mod__stack--cat > * + * {
  border-top: 1px solid var(--wt-rule);
  padding-top: 20px;
}

/* --- Asymmetric split: tall image left, 3 text stacked right --- */
.wt-mod--asym {
  display: grid; grid-template-columns: 1fr;
  gap: 28px 40px;
}
@media (min-width: 900px) {
  .wt-mod--asym { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.wt-mod__stack {
  display: grid; grid-auto-rows: max-content; gap: 24px 0;
}
.wt-mod__stack > * + * {
  border-top: 1px solid var(--wt-rule); padding-top: 24px;
}

/* --- Back-compat aliases for category pages that still use wt-hero-grid --- */
.wt-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px 40px;
  padding: 28px 0 40px; border-bottom: 1px solid var(--wt-rule);
  align-items: start;
}
@media (min-width: 900px) {
  .wt-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .wt-hero-grid > .wt-card--lead {
    grid-column: 1 / 2; grid-row: 1 / 3;
    border-right: 1px solid var(--wt-rule); padding-right: 40px;
    align-self: start;
  }
  .wt-hero-grid > .wt-card--rail {
    grid-column: 2 / 4;
    border-bottom: 1px solid var(--wt-rule); padding-bottom: 24px;
  }
  .wt-hero-grid > .wt-card--tertiary { grid-column: 2 / 3; }
  .wt-hero-grid > .wt-card--quaternary {
    grid-column: 3 / 4;
    border-left: 1px solid var(--wt-rule); padding-left: 40px;
  }
}

.wt-row {
  display: grid; grid-template-columns: 1fr; gap: 32px 40px;
  padding: 32px 0; border-bottom: 1px solid var(--wt-rule);
}
@media (min-width: 720px) {
  .wt-row { grid-template-columns: 1fr 1fr 1fr; }
  .wt-row > *:not(:first-child) {
    border-left: 1px solid var(--wt-rule); padding-left: 40px;
  }
}

/* ------------------------------------------------------------
   8. Article card
   ------------------------------------------------------------ */

.wt-card { display: block; color: var(--wt-ink); text-decoration: none; }
.wt-card:focus-visible { outline: 2px solid var(--wt-link); outline-offset: 4px; border-radius: 2px; }

.wt-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--wt-chip-bg);
  margin-bottom: 12px;
  filter: var(--wt-img-filter);
  transition: filter 300ms ease;
}

.wt-card__kicker {
  display: inline-block;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
  margin-bottom: 8px;
}

.wt-card__headline {
  font-family: var(--wt-font-display);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--wt-ink);
}

.wt-card--lead       .wt-card__headline { font-size: clamp(28px, 3.4vw, 44px); }
.wt-card--rail       .wt-card__headline,
.wt-card--rail-b     .wt-card__headline { font-size: clamp(22px, 2.4vw, 30px); }
.wt-card--tertiary   .wt-card__headline,
.wt-card--quaternary .wt-card__headline { font-size: 20px; }
.wt-card--lead-sub   .wt-card__headline { font-size: 22px; line-height: 1.22; }
.wt-card--feature    .wt-card__headline { font-size: clamp(24px, 2.8vw, 34px); }
.wt-card--compact    .wt-card__headline { font-size: 17px; }
.wt-card--tall       .wt-card__headline { font-size: clamp(24px, 2.6vw, 32px); }
.wt-card--stack      .wt-card__headline { font-size: 20px; }
.wt-card--grid       .wt-card__headline { font-size: 20px; }
.wt-row              .wt-card__headline { font-size: 22px; }

/* Lead keeps its image so the left column has natural height parity with the
   right rail. The image is large; the headline stays oversized underneath. */
.wt-card--lead .wt-card__media {
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
}

/* Rail / rail-b / tertiary / quaternary keep their media but sized tighter. */
.wt-card--rail      .wt-card__media,
.wt-card--rail-b    .wt-card__media { aspect-ratio: 16/9; margin-bottom: 10px; }
.wt-card--tertiary  .wt-card__media,
.wt-card--quaternary .wt-card__media,
.wt-card--lead-sub  .wt-card__media { display: none; }

/* Feature (doubled module): big hero image + generous dek. */
.wt-card--feature .wt-card__media { aspect-ratio: 3 / 2; margin-bottom: 14px; }

/* Compact (latest strip): small square-ish thumb above tight headline. */
.wt-card--compact .wt-card__media { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.wt-card--compact .wt-card__dek   { display: none; }
.wt-card--compact .wt-card__byline { display: none; }

/* Tall (asym module): tall portrait-ish image with just a kicker underneath. */
.wt-card--tall .wt-card__media { aspect-ratio: 4 / 5; margin-bottom: 14px; }

/* Stack (asym right column): text-only stacked rows with small thumb. */
.wt-card--stack .wt-card__media { display: none; }

/* Grid (3-up image strip): square image, headline + short dek. */
.wt-card--grid .wt-card__media { aspect-ratio: 1 / 1; margin-bottom: 12px; }

.wt-card__dek {
  font-size: 15px;
  line-height: 1.5;
  color: var(--wt-ink-soft);
  margin: 0 0 12px;
}

.wt-card__byline {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}

/* Card meta row: BY THE SENTINEL    9 MIN READ — NYT-style small-caps. */
.wt-card__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
}
.wt-card__meta .wt-card__byline { margin: 0; }
.wt-card__ttr {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  white-space: nowrap;
}
.wt-card__ttr::before {
  content: "·";
  margin-right: 10px;
  color: var(--wt-rule);
}

.wt-card:hover .wt-card__headline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   9. Article detail
   ------------------------------------------------------------ */

.wt-article {
  padding: 40px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.wt-article__kicker {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
  margin: 0 0 16px;
}

.wt-article__headline {
  font-family: var(--wt-font-display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-size: clamp(32px, 5vw, 60px);
  margin: 0 0 20px;
  color: var(--wt-ink);
}

.wt-article__dek {
  font-family: var(--wt-font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--wt-ink-soft);
  margin: 0 0 28px;
  max-width: 740px;
}

.wt-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  padding: 16px 0;
  border-top: 1px solid var(--wt-rule);
  border-bottom: 1px solid var(--wt-rule);
  margin-bottom: 28px;
}

.wt-article__byline a { color: var(--wt-link); text-decoration: underline; text-underline-offset: 3px; }
.wt-article__byline a:hover { color: var(--wt-link-hover); }

/* Time-to-read pill inside the byline row (X MIN READ) — same typographic
   tier as the rest of the meta line; the surrounding flex-gap handles spacing. */
.wt-article__ttr {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}

.wt-article__hero {
  width: 100%;
  /* height: auto neutralizes the HTML height attribute we set for CLS
     reservation. The browser uses the width/height attrs as an
     intrinsic-ratio hint at parse time, then CSS aspect-ratio takes
     over once styles apply. Without height: auto, the explicit
     height="900" attr would force a 4:3 box once the article fits a
     1200px column. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 12px;
  background: var(--wt-chip-bg);
  filter: var(--wt-img-filter);
  transition: filter 300ms ease;
}

.wt-article__hero-caption {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  max-width: 740px;
  margin: 0 0 32px;
  line-height: 1.4;
}

/* Right-rail sidebar on all article layouts that have one.
   Rule: ALWAYS on the right. Only drops below on true mobile (≤720px).
   Tablets and up keep the sidebar parked to the right of the body. */
.wt-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
}

@media (max-width: 720px) {
  .wt-article__layout { grid-template-columns: 1fr; gap: 28px; }
}

.wt-article__body {
  max-width: 720px;
  font-family: var(--wt-font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--wt-ink);
}

.wt-article__body p { margin: 0 0 1.2em; }

.wt-article__body p:first-of-type::first-letter {
  font-family: var(--wt-font-display);
  font-weight: 900;
  float: left;
  font-size: 3.4em;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--wt-ink);
}

.wt-article__body h2 {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  margin: 40px 0 16px;
  color: var(--wt-ink);
}

.wt-article__body h3 {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 32px 0 12px;
}

.wt-article__body blockquote {
  border-left: 3px solid var(--wt-rule-strong);
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  font-family: var(--wt-font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--wt-ink);
}

.wt-article__body a { color: var(--wt-link); text-decoration: underline; text-underline-offset: 3px; }
.wt-article__body a:hover { color: var(--wt-link-hover); }

/* "More on this story" related-coverage block appended after the body.
   Modeled on the NYT "Related" rail — strong horizontal rule, uppercase
   eyebrow, bulleted serif list. */
.wt-article__related {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 2px solid var(--wt-ink);
}
.wt-article__related-title {
  margin: 0 0 16px;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wt-ink);
}
.wt-article__related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wt-article__related-list li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wt-rule);
}
.wt-article__related-list a {
  font-family: var(--wt-font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--wt-ink);
  text-decoration: none;
}
.wt-article__related-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wt-pullquote {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--wt-ink);
  border-top: 1px solid var(--wt-rule-strong);
  border-bottom: 1px solid var(--wt-rule-strong);
  padding: 22px 0;
  margin: 36px 0;
}

.wt-article__body figure { margin: 28px 0; }
.wt-article__body figure img { width: 100%; display: block; filter: var(--wt-img-filter); }
.wt-article__body figcaption {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  margin-top: 8px;
  line-height: 1.4;
}

/* Longform variant — bigger headline, taller 4:3 hero, slightly more lede room. */
.wt-article--longform .wt-article__headline,
.wt-article--b .wt-article__headline {
  font-size: clamp(40px, 6.8vw, 88px);
  letter-spacing: -0.02em;
}
.wt-article--longform .wt-article__hero,
.wt-article--b .wt-article__hero,
.wt-article--longform .wt-article__hero-tall img,
.wt-article--b .wt-article__hero-tall img {
  aspect-ratio: 4 / 3;
  max-height: 80vh;
  width: 100%;
  object-fit: cover;
  filter: var(--wt-img-filter);
}
.wt-article--longform .wt-article__dek,
.wt-article--b .wt-article__dek {
  font-size: clamp(20px, 1.8vw, 26px);
  max-width: 780px;
}

/* Opinion variant — italic dek, accent rule. The kicker is authored
   directly on the article (e.g. "Opinion · Identity") rather than
   auto-prepended via ::before — prepending stacked on kickers that
   already had a category prefix ("Opinion · TARGET · STATE DMVs"). */
.wt-article--opinion .wt-article__dek,
.wt-article--c .wt-article__dek {
  font-style: italic;
  border-left: 3px solid var(--wt-rule-strong);
  padding-left: 18px;
  max-width: 680px;
}
.wt-article--opinion .wt-article__headline,
.wt-article--c .wt-article__headline {
  max-width: 18ch;
}

/* Visual variant */
.wt-article--visual .wt-article__hero,
.wt-article--d .wt-article__hero {
  aspect-ratio: 21 / 9;
  max-height: 72vh;
}
.wt-article--visual .wt-article__headline,
.wt-article--d .wt-article__headline {
  font-size: clamp(36px, 5.5vw, 64px);
}

/* ===========================================================
   Template gallery layouts (E–N) — user can preview via
   /news/templates/ and pick favorites.
   =========================================================== */

/* E — Full-bleed hero: hero truly spans the browser viewport, breaking out
   of both .wt-article (1200px cap) and .wt-shell (1280px cap). Body/sidebar
   below return to the normal constrained grid. */
.wt-article--fullbleed .wt-article__hero-fullbleed,
.wt-article--e .wt-article__hero-fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 12px;
  margin-bottom: 32px;
}
.wt-article--fullbleed .wt-article__hero-fullbleed img,
.wt-article--e .wt-article__hero-fullbleed img {
  width: 100%;
  max-height: 84vh;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  filter: var(--wt-img-filter);
}
.wt-article--fullbleed .wt-article__hero-fullbleed p,
.wt-article--e .wt-article__hero-fullbleed p {
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 0 24px;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
}

/* O — Split-dark: mirror of F (split) but inverted to black. Left column
   is black with red eyebrow + white serif headline; right column is
   floor-to-ceiling image. Stays dark in both default and Dark Knight mode
   (the dark treatment IS the design, not a mode toggle). */
.wt-article--splitdark,
.wt-article--o {
  padding-top: 0;
  max-width: none;
}
.wt-article--splitdark .wt-article__split,
.wt-article--o .wt-article__split {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000000;
  color: #f4f4f4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}
@media (min-width: 900px) {
  .wt-article--splitdark .wt-article__split,
  .wt-article--o .wt-article__split {
    grid-template-columns: 1fr 1fr;
  }
}
.wt-article--splitdark .wt-article__split-col,
.wt-article--o .wt-article__split-col {
  background: #000000;
  color: #f4f4f4;
  padding: 12vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.wt-article--splitdark .wt-article__split-col .wt-article__kicker,
.wt-article--o .wt-article__split-col .wt-article__kicker {
  color: #d63b3b;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.wt-article--splitdark .wt-article__split-col .wt-article__headline,
.wt-article--o .wt-article__split-col .wt-article__headline {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 15ch;
  margin: 0 auto 24px;
}
.wt-article--splitdark .wt-article__split-col .wt-article__dek,
.wt-article--o .wt-article__split-col .wt-article__dek {
  font-family: var(--wt-font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.55;
  color: #c9c9c9;
  max-width: 40ch;
  margin: 0 auto;
}
.wt-article--splitdark .wt-article__split-byline,
.wt-article--o .wt-article__split-byline {
  margin-top: 32px;
  color: #9a9a9a;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wt-article--splitdark .wt-article__split-image,
.wt-article--o .wt-article__split-image {
  position: relative;
  min-height: 50vh;
  background: #000;
  overflow: hidden;
}
.wt-article--splitdark .wt-article__split-image img,
.wt-article--o .wt-article__split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.wt-article--splitdark .wt-article__split-after,
.wt-article--o .wt-article__split-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding: 48px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .wt-article--splitdark .wt-article__split-after,
  .wt-article--o .wt-article__split-after {
    grid-template-columns: 1fr;
  }
}
.wt-article--splitdark .wt-article__split-after .wt-article__hero-caption,
.wt-article--o .wt-article__split-after .wt-article__hero-caption {
  grid-column: 1 / -1;
  margin: 0 0 8px;
}

/* F — NYT "Street Fishing" split: white left column with centered headline +
   full-bleed right image. Edge-to-edge (breaks out of .wt-shell padding) and
   forces white even in Dark Knight mode. */
.wt-article--split,
.wt-article--f {
  padding-top: 0;
  max-width: none;
}
.wt-article--split .wt-article__split,
.wt-article--f .wt-article__split {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #ffffff;
  color: #111111;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}
@media (min-width: 900px) {
  .wt-article--split .wt-article__split,
  .wt-article--f .wt-article__split {
    grid-template-columns: 1fr 1fr;
  }
}
.wt-article--split .wt-article__split-col,
.wt-article--f .wt-article__split-col {
  background: #ffffff;
  color: #111111;
  padding: 12vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.wt-article--split .wt-article__split-col .wt-article__headline,
.wt-article--f .wt-article__split-col .wt-article__headline {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #111111;
  max-width: 15ch;
  margin: 0 auto 24px;
}
.wt-article--split .wt-article__split-col .wt-article__dek,
.wt-article--f .wt-article__split-col .wt-article__dek {
  font-family: var(--wt-font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.55;
  color: #333333;
  max-width: 40ch;
  margin: 0 auto;
}
.wt-article--split .wt-article__split-byline,
.wt-article--f .wt-article__split-byline {
  margin-top: 32px;
  color: #555555;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wt-article--split .wt-article__split-image,
.wt-article--f .wt-article__split-image {
  position: relative;
  min-height: 50vh;
  background: #000;
  overflow: hidden;
}
.wt-article--split .wt-article__split-image img,
.wt-article--f .wt-article__split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.wt-article--split .wt-article__split-after,
.wt-article--f .wt-article__split-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding: 48px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .wt-article--split .wt-article__split-after,
  .wt-article--f .wt-article__split-after {
    grid-template-columns: 1fr;
  }
}
.wt-article--split .wt-article__split-after .wt-article__hero-caption,
.wt-article--f .wt-article__split-after .wt-article__hero-caption {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  color: var(--wt-ink-quiet);
  font-family: var(--wt-font-ui);
  font-size: 12px;
}

/* G — Panorama: extra-wide hero, headline above */
.wt-article--panorama .wt-article__hero-pano,
.wt-article--g .wt-article__hero-pano {
  margin: 12px -24px 8px;
}
.wt-article--panorama .wt-article__hero-pano img,
.wt-article--g .wt-article__hero-pano img {
  width: 100%;
  aspect-ratio: 32 / 9;
  max-height: 56vh;
  object-fit: cover;
  display: block;
  filter: var(--wt-img-filter);
}

/* H — end-of-article rail: when there is no side column (essay, cover,
   and similar treatments), the sidebar panel goes below the body. It looks
   like a chapter-end summary rather than a shoved-in rail. */
.wt-article__end-rail {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 2px solid var(--wt-rule-strong);
  max-width: 100%;
}
.wt-article__end-rail .wt-panel {
  background: var(--wt-panel-bg);
  border: 1px solid var(--wt-panel-border);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 0;
}
@media (min-width: 720px) {
  .wt-article__end-rail .wt-panel {
    padding: 24px 28px;
  }
}

/* H — Essay: no sidebar, centered narrow reading column */
.wt-article--essay,
.wt-article--h {
  max-width: 760px;
}
.wt-article--essay .wt-article--essay-inner,
.wt-article--h .wt-article--essay-inner {
  max-width: 680px;
  margin: 0 auto;
}
.wt-article--essay .wt-article--essay-inner .wt-article__body,
.wt-article--h .wt-article--essay-inner .wt-article__body {
  max-width: 100%;
}
.wt-article--essay .wt-article__hero,
.wt-article--h .wt-article__hero { aspect-ratio: 3 / 2; max-height: 54vh; }

/* I — Photo essay: lead figure with caption built-in */
.wt-article--photoessay .wt-article__photo-lead,
.wt-article--i .wt-article__photo-lead {
  margin: 18px -24px 28px;
  padding: 0;
}
.wt-article--photoessay .wt-article__photo-lead img,
.wt-article--i .wt-article__photo-lead img {
  width: 100%; aspect-ratio: 4 / 3; max-height: 88vh;
  object-fit: cover;
  filter: var(--wt-img-filter);
}
.wt-article--photoessay .wt-article__photo-lead figcaption,
.wt-article--i .wt-article__photo-lead figcaption {
  padding: 10px 24px 0;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
}

/* J — Magazine cover: title overlay on hero.
   Legibility is handled by a bottom-weighted gradient scrim (not a flat
   brightness filter) so the top of the image reads at full fidelity and
   only the text zone gets darkened. */
.wt-article--cover .wt-article__cover,
.wt-article--j .wt-article__cover {
  position: relative;
  margin: 0 -24px 20px;
  overflow: hidden;
}
.wt-article--cover .wt-article__cover img,
.wt-article--j .wt-article__cover img {
  width: 100%; aspect-ratio: 4 / 3; max-height: 78vh;
  object-fit: cover;
  display: block;
  filter: none;
  margin: 0;
}
.wt-article--cover .wt-article__cover::after,
.wt-article--j .wt-article__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.55) 20%,
    rgba(0, 0, 0, 0.48) 42%,
    rgba(0, 0, 0, 0.28) 62%,
    rgba(0, 0, 0, 0.08) 82%,
    rgba(0, 0, 0, 0) 100%
  );
}
.wt-article--cover .wt-article__cover-text,
.wt-article--j .wt-article__cover-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 48px 36px;
  color: #ffffff;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.wt-article--cover .wt-article__cover-text .wt-article__kicker,
.wt-article--j .wt-article__cover-text .wt-article__kicker { color: #ffffff; margin-bottom: 8px; }
.wt-article--cover .wt-article__cover-text .wt-article__headline,
.wt-article--j .wt-article__cover-text .wt-article__headline {
  color: #ffffff;
  font-size: clamp(36px, 5vw, 72px);
  max-width: 22ch;
}
.wt-article--cover .wt-article__cover-text .wt-article__dek,
.wt-article--j .wt-article__cover-text .wt-article__dek {
  color: #f0f0f0;
  max-width: 60ch;
}

/* P — NYT "The Interview" editorial cover: floor-to-ceiling hero spanning
   100vw with italic-serif kicker + headline anchored in the bottom-left
   corner. The dark wash is a left-weighted corner gradient (not a full
   bottom bar) so the right side of the image reads at natural fidelity. */
.wt-article--interview,
.wt-article--p {
  padding-top: 0;
  max-width: none;
}
.wt-article--interview .wt-article__cover--interview,
.wt-article--p .wt-article__cover--interview {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 32px;
  overflow: hidden;
}
.wt-article--interview .wt-article__cover--interview img,
.wt-article--p .wt-article__cover--interview img {
  width: 100%;
  height: min(92vh, 960px);
  object-fit: cover;
  display: block;
  filter: none;
  margin: 0;
}
.wt-article--interview .wt-article__cover--interview::after,
.wt-article--p .wt-article__cover--interview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 48%, rgba(0,0,0,0) 78%),
    linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 48%, rgba(0,0,0,0) 72%);
}
.wt-article--interview .wt-article__cover--interview .wt-article__cover-text,
.wt-article--p .wt-article__cover--interview .wt-article__cover-text {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(32px, 6vh, 72px);
  max-width: 640px;
  color: #ffffff;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.wt-article--interview .wt-article__cover--interview .wt-article__kicker,
.wt-article--p .wt-article__cover--interview .wt-article__kicker {
  font-family: var(--wt-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  margin: 0 0 8px;
}
.wt-article--interview .wt-article__cover--interview .wt-article__headline,
.wt-article--p .wt-article__cover--interview .wt-article__headline {
  font-family: var(--wt-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #ffffff;
  max-width: 22ch;
  margin: 0;
}
.wt-article--interview .wt-article__cover-credit,
.wt-article--p .wt-article__cover-credit {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  max-width: 1200px;
  margin: -16px auto 28px;
  padding: 0 24px;
}

/* K — Classic newspaper two-column body */
.wt-article--columns .wt-article__body--columns,
.wt-article--k .wt-article__body--columns {
  columns: 2;
  column-gap: 38px;
  max-width: none;
}
.wt-article--columns .wt-article__body--columns p:first-of-type::first-letter,
.wt-article--k .wt-article__body--columns p:first-of-type::first-letter {
  /* drop cap already inherits */
}
@media (max-width: 900px) {
  .wt-article--columns .wt-article__body--columns,
  .wt-article--k .wt-article__body--columns { columns: 1; }
}

/* L — Dashboard: stat strip above body */
.wt-article--dashboard .wt-article__stats,
.wt-article--l .wt-article__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--wt-rule);
  border: 1px solid var(--wt-rule);
  margin: 18px 0 24px;
}
.wt-article--dashboard .wt-article__stat,
.wt-article--l .wt-article__stat {
  background: var(--wt-surface);
  padding: 18px 22px;
}
.wt-article--dashboard .wt-article__stat-label,
.wt-article--l .wt-article__stat-label {
  display: block;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-ink-soft);
  font-weight: 600;
}

/* M — Poster: huge title, tiny everything else */
.wt-article--poster .wt-article__poster,
.wt-article--m .wt-article__poster {
  padding: 40px 0 24px;
  border-bottom: 2px solid var(--wt-rule-strong);
  margin-bottom: 24px;
}
.wt-article--poster .wt-article__headline--poster,
.wt-article--m .wt-article__headline--poster {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.wt-article--poster .wt-article__hero,
.wt-article--m .wt-article__hero { aspect-ratio: 16 / 9; max-height: 50vh; }
.wt-article--poster .wt-article__dek,
.wt-article--m .wt-article__dek {
  font-size: 17px;
  max-width: 55ch;
}

/* N — Diptych: headline left, dek right, hero full-width below */
.wt-article--diptych .wt-article__diptych,
.wt-article--n .wt-article__diptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--wt-rule);
}
@media (min-width: 820px) {
  .wt-article--diptych .wt-article__diptych,
  .wt-article--n .wt-article__diptych {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}
.wt-article--diptych .wt-article__diptych .wt-article__headline,
.wt-article--n .wt-article__diptych .wt-article__headline {
  font-size: clamp(34px, 4.2vw, 56px);
  margin: 0;
}
.wt-article--diptych .wt-article__diptych .wt-article__dek,
.wt-article--n .wt-article__diptych .wt-article__dek { margin-top: 12px; }

/* ===========================================================
   Template gallery page (/news/templates/)
   =========================================================== */
.wt-tpl-gallery {
  padding: 36px 0 80px;
  max-width: 1120px;
  margin: 0 auto;
}
.wt-tpl-gallery h1 {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  margin: 0 0 12px;
  color: var(--wt-ink);
}
.wt-tpl-gallery p.lede {
  font-family: var(--wt-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--wt-ink-soft);
  max-width: 720px;
  margin: 0 0 32px;
}
.wt-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.wt-tpl-card {
  background: var(--wt-surface);
  border: 1px solid var(--wt-rule);
  border-radius: 6px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 140ms ease;
}
.wt-tpl-card:hover,
.wt-tpl-card:focus-visible {
  border-color: var(--wt-ink);
  transform: translateY(-2px);
}
.wt-tpl-card:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 3px;
}
.wt-tpl-card__letter {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  color: var(--wt-ink);
}
.wt-tpl-card__preview {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--wt-chip-bg);
  border: 1px solid var(--wt-rule);
  position: relative;
  overflow: hidden;
}
.wt-tpl-card__preview::before,
.wt-tpl-card__preview::after {
  content: "";
  position: absolute;
  background: var(--wt-ink);
  opacity: 0.85;
}
.wt-tpl-card__name {
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  color: var(--wt-ink);
}
.wt-tpl-card__desc {
  font-family: var(--wt-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--wt-ink-soft);
  margin: 0;
}
.wt-tpl-card__cta {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wt-link);
  margin-top: auto;
}

/* Mini preview compositions per template */
/* A — Standard: headline bar + full-width hero + body/rail below. The
   hero always runs the full width of the 1200px article rail; it is never
   an inset panel. */
.wt-tpl-preview--a::before { top: 10%; left: 10%; right: 30%; height: 7px; }
.wt-tpl-preview--a::after  { top: 24%; left: 10%; right: 10%; height: 48%; opacity: 0.55; }

.wt-tpl-preview--b::before { top: 10%; left: 10%; right: 28%; height: 8px; }
.wt-tpl-preview--b::after  { top: 28%; left: 10%; right: 10%; bottom: 14%; opacity: 0.55; }

.wt-tpl-preview--c::before { top: 16%; left: 50%; transform: translateX(-50%); width: 36%; height: 5px; opacity: 0.6; }
.wt-tpl-preview--c::after  { top: 28%; left: 50%; transform: translateX(-50%); width: 48%; height: 4px; }

/* D — Visual: full-width headline bar on top, panoramic 21:9 hero band
   below. Same stack order as A; the only difference is the hero band is
   thinner (panoramic) so D reads as "when the image is the point." */
.wt-tpl-preview--d::before { top: 12%; left: 10%; right: 10%; height: 7px; }
.wt-tpl-preview--d::after  { top: 26%; left: 10%; right: 10%; height: 26%; opacity: 0.55; }

.wt-tpl-preview--e::before { top: 12%; left: 12%; right: 38%; height: 6px; }
.wt-tpl-preview--e::after  { top: 34%; left: 0; right: 0; height: 52%; opacity: 0.65; }

.wt-tpl-preview--f::before { top: 28%; left: 8%; width: 32%; height: 6px; }
.wt-tpl-preview--f::after  { top: 0; right: 0; width: 50%; height: 100%; opacity: 0.65; }

.wt-tpl-preview--g::before { top: 12%; left: 10%; right: 34%; height: 7px; }
.wt-tpl-preview--g::after  { top: 40%; left: 0; right: 0; height: 28%; opacity: 0.65; }

.wt-tpl-preview--h::before { top: 20%; left: 28%; right: 28%; height: 5px; }
.wt-tpl-preview--h::after  { top: 34%; left: 28%; right: 28%; bottom: 18%; opacity: 0.3; }

.wt-tpl-preview--i::before { top: 10%; left: 10%; right: 40%; height: 5px; }
.wt-tpl-preview--i::after  { top: 26%; left: 0; right: 0; height: 44%; opacity: 0.65; }

.wt-tpl-preview--j::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 0.55; }
.wt-tpl-preview--j::after  { bottom: 14%; left: 10%; right: 20%; height: 8px; }

.wt-tpl-preview--k::before { top: 12%; left: 10%; width: 38%; bottom: 14%; opacity: 0.25; }
.wt-tpl-preview--k::after  { top: 12%; right: 10%; width: 38%; bottom: 14%; opacity: 0.25; }

.wt-tpl-preview--l::before { top: 12%; left: 10%; right: 40%; height: 6px; }
.wt-tpl-preview--l::after  { top: 26%; left: 10%; right: 10%; height: 14%; opacity: 0.45; }

.wt-tpl-preview--m::before { top: 22%; left: 8%; right: 8%; height: 34%; opacity: 0.9; }
.wt-tpl-preview--m::after  { top: 66%; left: 8%; width: 40%; height: 5px; }

.wt-tpl-preview--n::before { top: 14%; left: 10%; width: 40%; height: 8px; }
.wt-tpl-preview--n::after  { top: 14%; right: 10%; width: 30%; height: 4px; opacity: 0.55; }

/* O — split-dark: left slab is black with a red kicker bar + white headline,
   right slab is a full-bleed image. The preview slab itself gets a black
   background so the black column reads in thumbnail scale. */
.wt-tpl-preview--o { background: #0d0d0d; border-color: #0d0d0d; }
.wt-tpl-preview--o::before { top: 32%; left: 8%; width: 32%; height: 6px; background: #ffffff; opacity: 1; }
.wt-tpl-preview--o::after  { top: 0; right: 0; width: 50%; height: 100%; background: #c9c9c9; opacity: 0.9; }

/* P — NYT interview cover: full-bleed image with italic headline
   anchored in the bottom-left corner. Preview shows a filled slab with
   a headline bar in the lower-left quadrant. */
.wt-tpl-preview--p { background: #6a6a6a; border-color: #6a6a6a; }
.wt-tpl-preview--p::before { bottom: 18%; left: 8%; width: 42%; height: 4px; background: #ffffff; opacity: 1; }
.wt-tpl-preview--p::after  { bottom: 10%; left: 8%; width: 34%; height: 5px; background: #ffffff; opacity: 0.85; }

/* ------------------------------------------------------------
   10. Sidebar — two variants:
       .wt-panel--signal   (public articles: Signal)
       .wt-panel--internal (gated articles: Why this matters to ID.me)
   Both live on the right; both collapse to bottom on mobile.
   ------------------------------------------------------------ */

.wt-panel {
  background: var(--wt-panel-bg);
  border: 1px solid var(--wt-panel-border);
  border-radius: 4px;
  padding: 22px 24px;
  font-family: var(--wt-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wt-ink);
  align-self: start;
  /* Intentionally NOT sticky — scrolls with the rest of the article. */
}

.wt-panel__eyebrow {
  margin: 0 0 4px;
  font-family: var(--wt-font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
}

.wt-panel__title {
  margin: 0 0 14px;
  font-family: var(--wt-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--wt-ink);
}

.wt-panel h4 {
  margin: 18px 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wt-ink-quiet);
}

/* Sidebar lede paragraph for the neutralized "Why this matters" rewrite —
   slightly larger body text than the default panel copy to give the why a
   touch more weight than the People-to-Watch roster that follows. */
.wt-panel__lede {
  font-family: var(--wt-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wt-ink);
  margin: 0 0 20px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--wt-rule);
}

/* Subtitle between sidebar sections (People to Watch → The source → Related) */
.wt-panel__subtitle {
  margin: 22px 0 8px;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wt-ink-quiet);
  border-top: 1px solid var(--wt-rule);
  padding-top: 16px;
}
.wt-panel__subtitle:first-of-type { border-top: 0; padding-top: 0; }

.wt-panel p { margin: 0 0 10px; }
.wt-panel ul { margin: 6px 0 10px; padding-left: 18px; }
.wt-panel li { margin-bottom: 6px; }

.wt-panel a { color: var(--wt-link); text-decoration: underline; text-underline-offset: 2px; }
.wt-panel a:hover { color: var(--wt-link-hover); }

/* Person entry (named decision-maker) */
.wt-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--wt-rule);
}
.wt-person:first-of-type { border-top: none; padding-top: 0; }

.wt-person__head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.wt-person__name {
  font-weight: 600;
  color: var(--wt-ink);
  font-size: 14px;
}

.wt-person__title {
  color: var(--wt-ink-soft);
  font-size: 12px;
}

.wt-person__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--wt-rule);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--wt-link);
  white-space: nowrap;
  background: var(--wt-surface);
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.wt-person__link:hover {
  border-color: var(--wt-link);
  color: var(--wt-link-hover);
  background: var(--wt-panel-bg);
}
.wt-person__link:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
}
.wt-person__link svg { flex: 0 0 auto; }
.wt-person__link-label { font-weight: 600; }

.wt-person__rationale {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--wt-ink-quiet);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Confidence chip — with explanation tooltip */
.wt-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.wt-confidence[data-level="high"]   { background: #d7f4e4; color: #0f5a33; border-color: #8ad7ac; }
.wt-confidence[data-level="medium"] { background: #fbecc7; color: #7a4a07; border-color: #e4bf77; }
.wt-confidence[data-level="low"]    { background: #fbd7d3; color: #7a1a10; border-color: #e49890; }

html[data-mode="batman"] .wt-confidence[data-level="high"]   { background: rgba(169,200,232,0.15); color: #cfe2fa; border-color: rgba(169,200,232,0.45); }
html[data-mode="batman"] .wt-confidence[data-level="medium"] { background: rgba(247,200,120,0.12); color: #f7c878; border-color: rgba(247,200,120,0.4); }
html[data-mode="batman"] .wt-confidence[data-level="low"]    { background: rgba(255,150,150,0.10); color: #ffb3ad; border-color: rgba(255,150,150,0.35); }

.wt-confidence__help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: currentColor; color: var(--wt-panel-bg);
  font-size: 9px; font-weight: 700;
  text-decoration: none;
  cursor: help;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   11. Gated screen
   ------------------------------------------------------------ */

.wt-gate {
  max-width: 560px;
  margin: 80px auto;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid var(--wt-rule);
  border-radius: 4px;
  background: var(--wt-surface);
  font-family: var(--wt-font-body);
}

.wt-gate h2 {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: 28px;
  margin: 12px 0 8px;
}

.wt-gate p { color: var(--wt-ink-soft); margin: 0 0 24px; }

.wt-gate__field {
  position: relative;
  margin-bottom: 12px;
}
.wt-gate__input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--wt-rule);
  background: var(--wt-page-bg);
  color: var(--wt-ink);
  font: inherit;
  font-family: var(--wt-font-ui);
  border-radius: 4px;
}
.wt-gate__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--wt-ink-quiet);
}
.wt-gate__toggle:hover { color: var(--wt-ink); }
.wt-gate__toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.wt-gate__toggle .eye-off { display: none; }
.wt-gate__toggle[data-shown="true"] .eye-on { display: none; }
.wt-gate__toggle[data-shown="true"] .eye-off { display: inline; }

.wt-gate__input:focus {
  outline: 2px solid var(--wt-link);
  outline-offset: 1px;
  border-color: var(--wt-link);
}

.wt-gate__btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--wt-btn-bg);
  color: var(--wt-btn-ink);
  border: none;
  border-radius: 999px;
  font-family: var(--wt-font-ui);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.wt-gate__btn:hover { background: var(--wt-btn-bg-hover); }
.wt-gate__btn:focus-visible { outline: 2px solid var(--wt-link); outline-offset: 2px; }

.wt-gate[data-state="error"] .wt-gate__input {
  border-color: #c81e1e;
  color: #c81e1e;
}

/* ------------------------------------------------------------
   12b. Mini sticky masthead
        - News list pages: hidden until user scrolls past the big
          masthead; then fixed-to-top.
        - Article detail pages: always visible, position: sticky.
   ------------------------------------------------------------ */

.wt-mini {
  display: none;
  background: #ffffff;
  color: #141414;
  border-bottom: 1px solid #d6d6d6;
  font-family: var(--wt-font-ui);
  z-index: 1100;
}
html[data-mode="batman"] .wt-mini {
  background: #05080f;
  color: #dbeafe;
  border-bottom-color: rgba(169, 200, 232, 0.28);
}

/* News-list variant: appears only on scroll, fixed overlay */
body[data-wt-mini="true"] .wt-mini--scroll {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  animation: wt-mini-slide-down 180ms ease;
}

/* Article-detail variant: always pinned, takes up layout flow */
.wt-mini--always {
  display: block;
  position: sticky;
  top: 0;
}

@keyframes wt-mini-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.wt-mini__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 14px;
}

/* The menu button is ALWAYS visible so readers can always get back to the
   main CDO.me nav (Home, I'm hiring, etc.) from inside Watchtower pages. */
.wt-mini__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  color: inherit;
  cursor: pointer;
  grid-column: 1;
}
.wt-mini__menu-btn svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2;
}

.wt-mini__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  grid-column: 2;
  justify-self: start;
}
/* Logo sits inside the mini at a legible size. SVG is the visible element
   (inlined by JS) — size via the child svg so viewBox scales the paths. */
.wt-mini__logo .wt-logo svg {
  height: 28px;
  width: auto;
  max-width: 240px;
}
@media (min-width: 900px) {
  .wt-mini__logo .wt-logo svg {
    height: 32px;
    max-width: 280px;
  }
}
.wt-mini__inner { padding: 8px 24px; }

.wt-mini__subnav {
  grid-column: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.wt-mini__subnav a {
  color: inherit;
  text-decoration: none;
  padding: 4px 2px;
}
.wt-mini__subnav a:hover { color: var(--wt-link); }
html[data-mode="batman"] .wt-mini__subnav a:hover { color: #ffffff; }
.wt-mini__subnav a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 currentColor;
}
.wt-mini__subnav .wt-mini__gated { display: none; }
body[data-wt-unlocked="true"] .wt-mini__subnav .wt-mini__gated { display: inline-block; }

.wt-mini__search,
.wt-mini__batmode {
  background: none;
  border: 1px solid transparent;
  padding: 6px 10px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-family: inherit;
  border-radius: 999px;
  transition: border-color 120ms ease;
}
.wt-mini__lock { grid-column: 4; }
.wt-mini__search { grid-column: 5; }
.wt-mini__batmode { grid-column: 6; }

/* Mini lock button mirrors the masthead lock but scaled to the mini bar.
   Icon swap: padlock (locked default) vs unlocked padlock (when unlocked). */
.wt-mini__lock {
  background: none;
  border: 1px solid transparent;
  padding: 6px 8px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  transition: border-color 120ms ease;
}
.wt-mini__lock:hover { border-color: currentColor; opacity: 0.85; }
.wt-mini__lock svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
}
.wt-mini__lock .wt-mini__lock-icon--unlocked { display: none; }
.wt-mini__lock[data-unlocked="true"] .wt-mini__lock-icon--locked { display: none; }
.wt-mini__lock[data-unlocked="true"] .wt-mini__lock-icon--unlocked { display: inline; }
.wt-mini__lock[data-unlocked="true"] { color: var(--wt-link); }

.wt-mini__search svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2;
}
.wt-mini__batmode svg {
  width: 26px; height: auto; fill: currentColor;
}
.wt-mini__search:hover, .wt-mini__batmode:hover {
  border-color: currentColor;
  opacity: 0.85;
}

/* Focus-visible parity for the mini-masthead controls and the subnav
   links (WCAG 2.4.7). Match the focus treatment used elsewhere
   (.wt-card, .wt-skip-link): a 2px link-color outline with offset. */
.wt-mini__menu-btn:focus-visible,
.wt-mini__search:focus-visible,
.wt-mini__batmode:focus-visible,
.wt-mini__lock:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 2px;
  border-radius: 999px;
}
.wt-mini__menu-btn:focus-visible {
  border-radius: 4px;
}
.wt-mini__subnav a:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 3px;
  border-radius: 2px;
}
.wt-mini__logo:focus-visible {
  outline: 2px solid var(--wt-link);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 820px) {
  .wt-mini__subnav { display: none; }
  .wt-mini__menu-btn { display: inline-flex; }
  .wt-mini__logo { grid-column: 2; justify-self: center; }
  .wt-mini__lock { grid-column: 3; }
  .wt-mini__search { grid-column: 4; }
  .wt-mini__batmode { grid-column: 5; }
  .wt-mini__inner {
    grid-template-columns: auto 1fr auto auto auto;
    gap: 6px;
    padding: 8px 14px;
  }
  .wt-mini__logo .wt-logo svg { height: 22px; max-width: 160px; }
}

/* Mini drawer: mobile menu, main nav + nested news subnav */
.wt-mini__drawer {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1250;
  display: none;
}
.wt-mini__drawer[data-open="true"] { display: block; }

/* NYT-style drawer: X on the left, Home row with the Watchtower logomark
   next to it, everything else stacked below with a hover underline treatment. */
.wt-mini__drawer-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #ffffff;
  color: #141414;
  padding: 18px 20px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.25);
}
html[data-mode="batman"] .wt-mini__drawer-panel {
  background: #0a1220;
  color: #dbeafe;
}
.wt-mini__drawer-close {
  align-self: flex-start;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  margin-bottom: 4px;
}
.wt-mini__drawer-close svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2;
}
/* Drawer link rows — default is no underline; hover / focus-visible add one.
   Mirrors the NYT drawer treatment. */
.wt-mini__drawer-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  color: inherit;
  text-decoration: none;
  font-family: var(--wt-font-ui);
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
html[data-mode="batman"] .wt-mini__drawer-panel a {
  border-bottom-color: rgba(169, 200, 232, 0.15);
}
.wt-mini__drawer-panel a.wt-mini__drawer-section {
  font-weight: 700;
  margin-top: 10px;
}
.wt-mini__drawer-sub {
  padding-left: 14px;
  border-left: 2px solid #d6d6d6;
  margin: 4px 0 10px 2px;
}
html[data-mode="batman"] .wt-mini__drawer-sub {
  border-left-color: rgba(169, 200, 232, 0.35);
}
.wt-mini__drawer-sub a {
  font-size: 14px;
  padding: 8px 2px;
  border-bottom: none;
}
.wt-mini__drawer-sub a.wt-mini__drawer-gated { display: none; }
body[data-wt-unlocked="true"] .wt-mini__drawer-sub a.wt-mini__drawer-gated { display: flex; }

/* Hover + focus underline treatment — matches the NYT drawer. */
.wt-mini__drawer-panel a:hover .wt-mini__drawer-label,
.wt-mini__drawer-panel a:focus-visible .wt-mini__drawer-label { text-decoration: underline; text-underline-offset: 3px; }
.wt-mini__drawer-panel a:focus-visible { outline: 2px solid var(--wt-link); outline-offset: 2px; border-radius: 2px; }

/* Home row carries the Watchtower logomark to the right of the label. */
.wt-mini__drawer-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wt-mini__drawer-home__mark {
  display: inline-flex;
  align-items: center;
  height: 22px;
  color: currentColor;
}
.wt-mini__drawer-home__mark svg { height: 20px; width: auto; display: block; }

/* Chevron rendered after every top-level drawer row except Home. */
.wt-mini__drawer-chev {
  display: inline-block;
  color: currentColor;
  opacity: 0.55;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.wt-mini__drawer-label {
  display: inline-block;
}

/* ------------------------------------------------------------
   12. Mobile
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .wt-masthead__utility { font-size: 11px; }
  .wt-logo svg { height: 42px; max-width: 90vw; }
  .wt-subnav { gap: 4px 18px; font-size: 12px; }
  .wt-batmode__label { display: none; }
  .wt-hero-grid > .wt-card--rail,
  .wt-hero-grid > .wt-card--quaternary { border: none; padding: 0; }
  .wt-article__body { font-size: 18px; }
}

/* ------------------------------------------------------------
   Pulse — Today's Executive Summary + social pulse grid
   Distinct visual identity from the other section pages:
   big serif numerals (1-10), two-link per-item row (our article +
   source), gated/ungated chip in the subtitle, empty-state social
   grid below for Phase 3/4.
   ------------------------------------------------------------ */

.wt-pulse {
  padding: 40px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.wt-pulse__hd {
  border-top: 2px solid var(--wt-ink);
  border-bottom: 1px solid var(--wt-rule);
  padding: 28px 0 32px;
  margin-bottom: 40px;
}
.wt-pulse__eyebrow {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  margin: 0 0 12px;
}
.wt-pulse__title {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--wt-ink);
}
.wt-pulse__subtitle {
  font-family: var(--wt-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wt-ink-soft);
  margin: 0;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wt-pulse__chip {
  display: inline-block;
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wt-ink);
  background: var(--wt-chip-bg, #f2f0eb);
  padding: 5px 10px;
  border-radius: 999px;
}
.wt-pulse__chip--unlocked {
  background: var(--wt-ink);
  color: var(--wt-paper, #fff);
}

/* Top-10 list — each item is a grid of [big numeral | content column]. */
.wt-pulse__list {
  list-style: none;
  margin: 0 0 72px;
  padding: 0;
  counter-reset: pulse;
}

.wt-pulse__item {
  display: grid;
  grid-template-columns: minmax(96px, 140px) 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--wt-rule);
}
.wt-pulse__item:first-child { border-top: 1px solid var(--wt-rule); }

/* The playful, oversized numeral. Italic display serif for a bit of
   editorial warmth; line-height crushed so the number hangs at top-
   baseline with the headline. */
.wt-pulse__num {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--wt-ink);
  text-align: right;
  padding-top: 8px;
  user-select: none;
}
/* Alternate colour on every odd rank so the list reads as a rhythm,
   not a wall. Subtle — we're not shouting. */
.wt-pulse__item[data-rank="1"] .wt-pulse__num,
.wt-pulse__item[data-rank="4"] .wt-pulse__num,
.wt-pulse__item[data-rank="7"] .wt-pulse__num,
.wt-pulse__item[data-rank="10"] .wt-pulse__num {
  color: var(--wt-accent, #c0392b);
}

.wt-pulse__content {
  min-width: 0;
}

.wt-pulse__kicker {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  margin: 0 0 10px;
}

.wt-pulse__headline {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--wt-ink);
  margin: 0 0 12px;
}
.wt-pulse__headline a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.wt-pulse__headline a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wt-pulse__dek {
  font-family: var(--wt-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--wt-ink-soft);
  margin: 0 0 14px;
  max-width: 680px;
}

.wt-pulse__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.wt-pulse__link {
  color: var(--wt-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 200ms ease;
}
.wt-pulse__link:hover { color: var(--wt-link-hover); }
.wt-pulse__link--source { color: var(--wt-ink-quiet); }
.wt-pulse__link--source:hover { color: var(--wt-ink); }

.wt-pulse__empty {
  font-family: var(--wt-font-body);
  font-style: italic;
  color: var(--wt-ink-quiet);
  text-align: center;
  padding: 60px 0;
}

/* Social pulse — second section below the Top 10. Phase 3/4 placeholder. */
.wt-pulse__social {
  border-top: 2px solid var(--wt-ink);
  padding-top: 32px;
}
.wt-pulse__social-hd {
  margin-bottom: 24px;
}
.wt-pulse__social-title {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--wt-ink);
}
.wt-pulse__social-subtitle {
  font-family: var(--wt-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--wt-ink-soft);
  margin: 0;
  max-width: 720px;
}
.wt-pulse__social-grid {
  min-height: 200px;
}
.wt-pulse__social-grid--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed var(--wt-rule);
  border-radius: 6px;
  background: var(--wt-chip-bg, #fafaf8);
}
.wt-pulse__social-placeholder {
  font-family: var(--wt-font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wt-ink-quiet);
  margin: 0;
  max-width: 520px;
}

/* Mobile — collapse the num column below the content for readability. */
@media (max-width: 640px) {
  .wt-pulse__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wt-pulse__num {
    text-align: left;
    font-size: clamp(56px, 14vw, 84px);
    padding-top: 0;
    line-height: 0.9;
  }
}

/* ============================================================
   Pulse layout variants — shared tile + per-layout containers
   Sample-content mockups at /news/pulse/?layout=a|b|c
   ============================================================ */

/* Variant-note chip in the header so the user can see which mockup
   they're looking at. */
.wt-pulse__variant-note {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-accent, #c0392b);
}

/* --- Social tile: used in every variant's "What's hot" grid --- */
.wt-pulse-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--wt-paper, #fff);
  border: 1px solid var(--wt-rule);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  min-height: 0;
  transition: border-color 180ms ease, transform 180ms ease;
}
.wt-pulse-tile:hover {
  border-color: var(--wt-ink);
  transform: translateY(-1px);
}
.wt-pulse-tile:focus-visible,
.wt-native-tile:focus-visible {
  outline: 2px solid var(--wt-link, #0a66c2);
  outline-offset: 2px;
  border-color: var(--wt-link, #0a66c2);
}
/* Honor reduced-motion preference: disable hover lift + transitions on
   the social tiles. The motion is decorative — the tile is fully usable
   without it. */
@media (prefers-reduced-motion: reduce) {
  .wt-pulse-tile,
  .wt-native-tile,
  .wt-native-tile--alt,
  .wt-tpl-card,
  .wt-pulse-chiclet {
    transition: none;
  }
  .wt-pulse-tile:hover,
  .wt-native-tile:hover,
  .wt-native-tile--alt:hover,
  .wt-tpl-card:hover,
  .wt-tpl-card:focus-visible,
  .wt-pulse-chiclet:hover {
    transform: none;
  }
}
.wt-pulse-tile__hd {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
/* Legacy .wt-pulse-tile__avatar selectors — the structured-ALT
   variant still uses them. Shared sizing lives here. */
.wt-pulse-tile__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-pulse-tile__avatar--platform svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Shared author-avatar component. Variants set the size per context
   so a structured tile's avatar (36px) sits right next to a native
   tile's (40px) using the same markup. */
.wt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--wt-chip-bg);
}
.wt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wt-avatar--initials {
  color: var(--wt-ink);
  font-family: var(--wt-font-ui);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wt-avatar--tile       { width: 36px; height: 36px; font-size: 13px; }
.wt-avatar--native-x   { width: 40px; height: 40px; font-size: 14px; }
.wt-avatar--native-alt { width: 40px; height: 40px; font-size: 14px; }
/* Real avatars get the same subtle DKM blue tint as other imagery
   so they don't stand out against the pale-blue UI. */
html[data-mode="batman"] .wt-avatar--img img {
  filter: var(--wt-img-filter);
}
/* Outline platform icon sitting on the right of the header. Uses
   currentColor so DKM can retint it pale blue without touching the
   per-platform rules. */
.wt-pulse-tile__platform--outline {
  width: 20px;
  height: 20px;
  color: var(--wt-ink-quiet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-pulse-tile__platform--outline svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wt-pulse-tile__author {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wt-pulse-tile__name {
  font-family: var(--wt-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--wt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-pulse-tile__handle {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  color: var(--wt-ink-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-pulse-tile__platform {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  color: var(--wt-ink-quiet);
}
.wt-pulse-tile__platform svg { width: 100%; height: 100%; }
.wt-pulse-tile[data-platform="x"]         .wt-pulse-tile__platform { color: #000; }
.wt-pulse-tile[data-platform="linkedin"]  .wt-pulse-tile__platform { color: #0a66c2; }
.wt-pulse-tile[data-platform="youtube"]   .wt-pulse-tile__platform { color: #ff0000; }
.wt-pulse-tile[data-platform="instagram"] .wt-pulse-tile__platform { color: #e4405f; }
.wt-pulse-tile[data-platform="tiktok"]    .wt-pulse-tile__platform { color: #000; }

.wt-pulse-tile__thumb {
  background: var(--wt-chip-bg, #f2f0eb);
  color: var(--wt-ink-quiet);
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 22px 12px;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
}
.wt-pulse-tile[data-platform="youtube"] .wt-pulse-tile__thumb {
  background: linear-gradient(135deg, #2a2a2a, #555);
  color: #fff;
}
.wt-pulse-tile[data-platform="tiktok"] .wt-pulse-tile__thumb {
  background: linear-gradient(135deg, #000, #333);
  color: #fff;
}
.wt-pulse-tile[data-platform="instagram"] .wt-pulse-tile__thumb {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
}

.wt-pulse-tile__text {
  font-family: var(--wt-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.wt-pulse-tile__stats {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--wt-ink-quiet);
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--wt-rule);
}

/* Social grid — default (stacked Phase 1 variant) */
.wt-pulse__social-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.wt-pulse__social-grid--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  border: 1px dashed var(--wt-rule);
  border-radius: 6px;
  background: var(--wt-chip-bg, #fafaf8);
}

/* ============================================================
   Layout A — Carousel
   Crossfade between slides, dots, 7s auto-advance
   ============================================================ */
.wt-pulse--a .wt-pulse__hd { padding-bottom: 20px; }
.wt-pulse-carousel {
  position: relative;
  margin-bottom: 56px;
}
.wt-pulse-carousel__stage {
  position: relative;
  min-height: 380px;
}
.wt-pulse-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  display: block;
}
.wt-pulse-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.wt-pulse-carousel__slide .wt-pulse__item {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 36px;
  align-items: start;
  padding: 16px 0 0;
  border: 0;
}
.wt-pulse-carousel__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}
.wt-pulse-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--wt-ink);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease;
}
.wt-pulse-carousel__dot.is-active {
  background: var(--wt-ink);
}

/* ============================================================
   Layout B — Split hero (compact Top 10 | social grid)
   ============================================================ */
.wt-pulse-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: start;
}
.wt-pulse-split__left { min-width: 0; }
.wt-pulse-split__right { min-width: 0; }
.wt-pulse-split__label {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink);
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--wt-ink);
}

/* Compact Top-10 list (used inside Layout B left column) */
.wt-pulse-compact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wt-pulse-compact__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--wt-rule);
}
.wt-pulse-compact__item:last-child { border-bottom: 0; }
.wt-pulse-compact__num {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 38px;
  line-height: 1;
  color: var(--wt-ink);
  text-align: right;
}
.wt-pulse-compact__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wt-pulse-compact__kicker {
  font-family: var(--wt-font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-pulse-compact__headline {
  font-family: var(--wt-font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--wt-ink);
  text-decoration: none;
}
.wt-pulse-compact__dek {
  font-family: var(--wt-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--wt-ink-soft);
  margin-top: 4px;
}
.wt-pulse-compact__headline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Layout B: pared-down title (no eyebrow, no subtitle, no top rule) */
.wt-pulse--b .wt-pulse__title--bare {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  color: var(--wt-ink);
}

/* Right-rail social grid — single column, narrow, matches Top 10 height */
.wt-pulse__social-grid--b {
  grid-template-columns: 1fr;
  gap: 12px;
}
.wt-pulse__social-grid--b .wt-pulse-tile {
  padding: 14px;
}
.wt-pulse__social-grid--b .wt-pulse-tile__text {
  -webkit-line-clamp: 3;
  font-size: 13px;
}

/* Full-width continuation grid — appears below the split once the right
   rail has rendered its tiles. This is the overflow of "What's hot" that
   didn't fit alongside the Top 10. */
.wt-pulse__social-grid--wide {
  margin-top: 32px;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


/* ============================================================
   Layout C — Horizontal chiclet ticker
   ============================================================ */
/* Base ticker styles (superseded by the layout-C block below, which
   turns .wt-pulse-ticker into a flex row so the nav arrows can sit
   outside the scrolling viewport). Left here for legacy non-C callers. */
/* Layout C: pared-down title, matching Layout B */
.wt-pulse--c .wt-pulse__title--bare {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  color: var(--wt-ink);
}
.wt-pulse--c .wt-pulse__social {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--wt-rule);
}
.wt-pulse--c .wt-pulse__social-title {
  margin-bottom: 24px;
}

.wt-pulse-chiclet {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  background: var(--wt-paper, #fff);
  border: 1px solid var(--wt-rule);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  min-height: 280px;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.wt-pulse-chiclet:hover {
  border-color: var(--wt-ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.wt-pulse-chiclet__num {
  font-family: var(--wt-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 60px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--wt-ink);         /* All ranks black — no accent */
  margin-bottom: 4px;
}
.wt-pulse-chiclet__kicker {
  font-family: var(--wt-font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-pulse-chiclet__headline {
  font-family: var(--wt-font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.22;
  color: var(--wt-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wt-pulse-chiclet__dek {
  font-family: var(--wt-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--wt-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Ticker container — flex row: [prev arrow] [scrolling viewport] [next arrow]
   The viewport holds the track and clips it; arrows are flex siblings
   that sit outside the carousel and never overlap the chiclets. */
.wt-pulse-ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}
.wt-pulse-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;                 /* allow flex child to shrink below intrinsic width */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wt-pulse-ticker__viewport::-webkit-scrollbar { display: none; }
.wt-pulse-ticker__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 16px;
  padding: 4px;                 /* Prevent hover shadow from clipping */
}
.wt-pulse-ticker__nav {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--wt-rule);
  background: var(--wt-paper, #fff);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  color: var(--wt-ink);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.wt-pulse-ticker__nav:hover {
  border-color: var(--wt-ink);
  background: var(--wt-ink);
  color: var(--wt-paper, #fff);
}

.wt-pulse__social-grid--c,
.wt-pulse__social-grid--a {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .wt-pulse__social-grid--c,
  .wt-pulse__social-grid--a {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .wt-pulse-split { grid-template-columns: 1fr; }
  .wt-pulse-ticker__nav { display: none; }
  .wt-pulse__social-grid,
  .wt-pulse__social-grid--a,
  .wt-pulse__social-grid--b,
  .wt-pulse__social-grid--c { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Dark Knight mode: flip card surfaces so they read as dark
   cards on dark background, not glowing white rectangles. Text
   colors already use ink tokens that remap for batman, so once
   the surface flips the contrast math checks out.
   ------------------------------------------------------------ */
html[data-mode="batman"] .wt-pulse-chiclet,
html[data-mode="batman"] .wt-pulse-tile {
  background: var(--wt-surface);
  border-color: var(--wt-rule);
}
html[data-mode="batman"] .wt-pulse-chiclet:hover,
html[data-mode="batman"] .wt-pulse-tile:hover {
  border-color: var(--wt-rule-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
html[data-mode="batman"] .wt-pulse-ticker__nav {
  background: var(--wt-surface);
  border-color: var(--wt-rule);
  color: var(--wt-ink);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
html[data-mode="batman"] .wt-pulse-ticker__nav:hover {
  background: var(--wt-ink);
  color: var(--wt-surface);
  border-color: var(--wt-ink);
}
/* The chip-style thumbnail on tiles without a per-platform
   gradient (generic, reddit). Stays subtle in dark mode. */
html[data-mode="batman"] .wt-pulse-tile__thumb {
  background: var(--wt-chip-bg);
  color: var(--wt-ink-soft);
}
/* Stats strip separator — the default --wt-rule maps for batman,
   but the top-border is the only thing keeping it visible; ensure
   it reads at comfortable contrast. */
html[data-mode="batman"] .wt-pulse-tile__stats {
  border-top-color: var(--wt-rule);
}

/* ------------------------------------------------------------
   Pulse — "native view" tiles. Parallel to the structured grid
   but each card is framed to evoke the platform it came from:
   YouTube → thumbnail + play overlay; X → tweet card;
   Reddit → reddit-row; generic for LinkedIn/TikTok/IG.
   ------------------------------------------------------------ */

.wt-pulse__social-sub {
  margin: 4px 0 20px;
  font-family: var(--wt-font-ui);
  font-size: 13px;
  color: var(--wt-ink-quiet);
}
.wt-pulse__social--native {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--wt-rule);
}
.wt-pulse__native-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) {
  .wt-pulse__native-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wt-pulse__native-grid { grid-template-columns: 1fr; }
}

.wt-native-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--wt-paper, #fff);
  border: 1px solid var(--wt-rule);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.wt-native-tile:hover {
  border-color: var(--wt-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ----- YouTube ----- */
.wt-native-tile--youtube { padding: 0; }
.wt-native-yt__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.wt-native-yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wt-native-yt__thumb--placeholder {
  background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
}
.wt-native-yt__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 42px;
  background: rgba(0,0,0,0.82);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, transform 160ms ease;
}
.wt-native-yt__play svg { width: 22px; height: 22px; }
.wt-native-tile--youtube:hover .wt-native-yt__play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.05);
}
.wt-native-yt__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wt-native-yt__title {
  font-family: var(--wt-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wt-native-yt__meta {
  font-family: var(--wt-font-ui);
  font-size: 12.5px;
  color: var(--wt-ink-quiet);
  margin: 0;
}

/* ----- X (tweet card) ----- */
.wt-native-tile--x { padding: 16px 16px 14px; gap: 10px; }
.wt-native-x__hd {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
}
.wt-native-x__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-native-x__avatar svg { width: 20px; height: 20px; }
.wt-native-x__author { display: flex; flex-direction: column; min-width: 0; }
.wt-native-x__name {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--wt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-native-x__handle {
  font-family: var(--wt-font-ui);
  font-size: 13px;
  color: var(--wt-ink-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-native-x__mark {
  display: inline-flex;
  width: 18px; height: 18px;
  color: var(--wt-ink);
}
.wt-native-x__mark svg { width: 100%; height: 100%; }
.wt-native-x__text {
  font-family: var(--wt-font-ui);
  font-size: 15px;
  line-height: 1.42;
  color: var(--wt-ink);
  margin: 0;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.wt-native-x__stats {
  display: flex;
  gap: 18px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--wt-rule);
  font-family: var(--wt-font-ui);
  font-size: 12.5px;
  color: var(--wt-ink-quiet);
}

/* ----- Reddit ----- */
.wt-native-tile--reddit {
  flex-direction: row;
  padding: 0;
}
.wt-native-rd__votes {
  flex: 0 0 44px;
  background: var(--wt-chip-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 4px;
  gap: 4px;
}
.wt-native-rd__arrow {
  color: #ff4500;
  font-size: 14px;
  line-height: 1;
}
.wt-native-rd__score {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--wt-ink);
}
.wt-native-rd__body {
  flex: 1 1 auto;
  padding: 14px 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.wt-native-rd__sub {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--wt-ink);
  margin: 0;
}
.wt-native-rd__dot { color: var(--wt-ink-quiet); font-weight: 400; margin: 0 2px; }
.wt-native-rd__title {
  font-family: var(--wt-font-ui);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wt-native-rd__text {
  font-family: var(--wt-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--wt-ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wt-native-rd__stats {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  margin: 4px 0 0;
}

/* ----- Generic (LinkedIn / TikTok / IG placeholders) ----- */
.wt-native-tile--generic { padding: 16px; gap: 10px; }
.wt-native-gen__hd {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
}
.wt-native-gen__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-native-gen__avatar svg { width: 20px; height: 20px; }
.wt-native-gen__author { display: flex; flex-direction: column; min-width: 0; }
.wt-native-gen__name {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--wt-ink);
}
.wt-native-gen__meta {
  font-family: var(--wt-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--wt-ink-quiet);
}
.wt-native-gen__text {
  font-family: var(--wt-font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* ----- Reddit, taller to match YT ----- */
.wt-native-tile--reddit {
  flex-direction: row;
  padding: 0;
  min-height: 260px;            /* parity with YouTube card height */
}
.wt-native-rd__arrow--down {
  color: var(--wt-ink-quiet);
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
}
.wt-native-rd__stats {
  display: flex;
  gap: 14px;
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--wt-rule);
}

/* ----- Native ALT ----- Platform-specific body under a unified
   author + platform header. Compromise layout between "structured"
   (consistent card) and "native" (platform-flavored body). */
.wt-native-tile--alt { padding: 14px 16px 16px; gap: 12px; }
.wt-native-alt__hd {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
}
.wt-native-alt__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wt-chip-bg);
  color: var(--wt-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.wt-native-alt__author {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wt-native-alt__name {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--wt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-native-alt__meta {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
}
/* Platform marker — outline-bordered circle with a single-color
   glyph. Matches the CDO.me footer treatment: monochrome ink, not
   brand colors. DKM retints the glyph + border to pale blue. */
.wt-native-alt__platform {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wt-rule);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--wt-ink);
}
.wt-native-alt__platform svg { width: 20px; height: 20px; display: block; }
html[data-mode="batman"] .wt-native-alt__platform {
  color: var(--wt-ink-soft);
  border-color: var(--wt-rule);
}

.wt-native-alt__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wt-native-alt__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.wt-native-alt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wt-native-alt__thumb--placeholder {
  background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
}
.wt-native-alt__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 36px;
  background: rgba(0,0,0,0.82);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-native-alt__play svg { width: 20px; height: 20px; }
.wt-native-tile--alt[data-platform="youtube"]:hover .wt-native-alt__play {
  background: #ff0000;
}
/* Instagram thumbnails are typically square or 4/5 portrait — crop the
   media frame to a square so we don't widen IG photos into a YouTube-like
   strip and lose the composition. Reels keep the same square crop and
   show a play affordance on top. */
.wt-native-tile--alt[data-platform="instagram"] .wt-native-alt__media {
  aspect-ratio: 1 / 1;
}
.wt-native-tile--alt[data-platform="instagram"]:hover .wt-native-alt__play {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}
/* LinkedIn tiles never have media in the schema today — give the body
   a tight, Open-Sans-feeling treatment that mirrors the LI feed card.
   The first line is bolded as a pseudo-title; the rest is body text. */
.wt-native-tile--alt[data-platform="linkedin"] .wt-native-alt__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.wt-native-alt__title {
  font-family: var(--wt-font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.32;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wt-native-alt__text {
  font-family: var(--wt-font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--wt-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.wt-native-alt__stats {
  font-family: var(--wt-font-ui);
  font-size: 12px;
  color: var(--wt-ink-quiet);
  padding-top: 10px;
  border-top: 1px solid var(--wt-rule);
}

/* Batman-mode overrides for native tiles — same surface flip as
   the structured grid cards. */
html[data-mode="batman"] .wt-native-tile {
  background: var(--wt-surface);
  border-color: var(--wt-rule);
}
html[data-mode="batman"] .wt-native-tile:hover {
  border-color: var(--wt-rule-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
html[data-mode="batman"] .wt-native-rd__votes {
  background: rgba(169, 200, 232, 0.05);
}
html[data-mode="batman"] .wt-native-x__stats,
html[data-mode="batman"] .wt-native-alt__stats,
html[data-mode="batman"] .wt-native-rd__stats {
  border-top-color: var(--wt-rule);
}

/* Outline platform icons + alt-tile platform marks take a pale-blue
   tint in DKM so they harmonize with the rest of the aesthetic. */
html[data-mode="batman"] .wt-pulse-tile__platform--outline,
html[data-mode="batman"] .wt-native-alt__platform,
html[data-mode="batman"] .wt-native-x__mark {
  color: var(--wt-ink-soft);
}
/* Platform-logo avatars in DKM — swap the bright brand colors
   for a neutral dark surface + pale-blue glyph. */
html[data-mode="batman"] .wt-pulse-tile__avatar--platform,
html[data-mode="batman"] .wt-native-x__avatar,
html[data-mode="batman"] .wt-native-gen__avatar {
  background: var(--wt-chip-bg) !important;
  color: var(--wt-ink-soft) !important;
}
html[data-mode="batman"] .wt-pulse-tile__avatar--initials,
html[data-mode="batman"] .wt-native-alt__avatar {
  background: var(--wt-chip-bg);
  color: var(--wt-ink);
}

/* Four article hero layouts (interview, split, splitdark, cover)
   explicitly set filter:none in light mode so the photography stays
   vivid. In Dark Knight mode that's wrong — the hero stays full-
   color while everything else blues out. Re-apply the token so these
   heroes match the rest of the site's DKM treatment. */
html[data-mode="batman"] .wt-article--interview .wt-article__cover--interview img,
html[data-mode="batman"] .wt-article--p          .wt-article__cover--interview img,
html[data-mode="batman"] .wt-article--split      .wt-article__split-image img,
html[data-mode="batman"] .wt-article--f          .wt-article__split-image img,
html[data-mode="batman"] .wt-article--splitdark  .wt-article__split-image img,
html[data-mode="batman"] .wt-article--o          .wt-article__split-image img,
html[data-mode="batman"] .wt-article--cover      .wt-article__cover img,
html[data-mode="batman"] .wt-article--j          .wt-article__cover img {
  filter: var(--wt-img-filter);
}

/* =====================================================================
   Layout switcher (A / B / C). Tucked above the home grid; only renders
   on /news/ where [data-wt-home] exists. Inert outside that page.
   ===================================================================== */
.wt-layout-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 18px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--wt-rule);
  font: 12px/1 var(--cdo-sans, system-ui, sans-serif);
}
.wt-layout-switch__label {
  color: var(--wt-ink-quiet);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.wt-layout-switch button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--wt-rule);
  color: var(--wt-ink-soft);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.wt-layout-switch button:hover { border-color: var(--wt-rule-strong); color: var(--wt-ink); }
.wt-layout-switch button[aria-current="true"] {
  background: var(--wt-ink);
  color: var(--wt-paper, #fff);
  border-color: var(--wt-ink);
}

/* =====================================================================
   Version C — NYT-inspired modules
   --------------------------------------------------------------------- */

/* Generic vertical rhythm for C modules. */
.wt-c-mod { padding: 28px 0; border-top: 1px solid var(--wt-rule); }
.wt-c-mod:first-child { border-top: 0; padding-top: 12px; }

/* ---- Hero package (C) ---- */
.wt-c-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  border-top: 0;
  padding-top: 18px;
}
@media (min-width: 740px) {
  .wt-c-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
  }
}
.wt-c-hero__lead { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.wt-c-hero__media {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--wt-rule);
}
.wt-c-hero__kicker {
  font: 600 11px/1 var(--cdo-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-c-hero__headline {
  font: 700 30px/1.1 var(--cdo-serif, "nyt-cheltenham", georgia, serif);
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--wt-ink);
}
@media (min-width: 740px) {
  .wt-c-hero__headline { font-size: 38px; line-height: 1.08; }
}
.wt-c-hero__dek {
  margin: 0;
  font: 400 16px/1.45 var(--cdo-serif);
  color: var(--wt-ink-soft);
}
.wt-c-hero__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wt-rule);
  padding-top: 12px;
  display: grid;
  gap: 6px;
}
.wt-c-hero__bullets li {
  position: relative;
  padding-left: 14px;
  font: 400 14px/1.4 var(--cdo-serif);
  color: var(--wt-ink-soft);
}
.wt-c-hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wt-ink-quiet);
}

.wt-c-hero__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 0;
  padding-left: 0;
}
@media (min-width: 740px) {
  .wt-c-hero__rail { border-left: 1px solid var(--wt-rule); padding-left: 24px; }
}
.wt-c-hero__sec {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wt-rule);
}
.wt-c-hero__sec:last-child { border-bottom: 0; padding-bottom: 0; }
.wt-c-hero__sec-kicker {
  display: block;
  font: 600 10px/1 var(--cdo-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  margin-bottom: 6px;
}
.wt-c-hero__sec-headline {
  font: 700 18px/1.2 var(--cdo-serif);
  margin: 0 0 6px;
  color: var(--wt-ink);
}
.wt-c-hero__sec-dek {
  margin: 0;
  font: 400 14px/1.4 var(--cdo-serif);
  color: var(--wt-ink-soft);
}

/* ---- Sidebar nav row (C) — NYT "War in the Middle East" pattern ---- */
.wt-c-navrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 0 16px;
  border-top: 1px solid var(--wt-rule);
}
@media (min-width: 740px) {
  .wt-c-navrow { flex-direction: row; align-items: center; gap: 18px; }
}
.wt-c-navrow__label {
  font: 700 16px/1 var(--cdo-sans);
  letter-spacing: 0.02em;
  color: var(--wt-ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.wt-c-navrow__chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.wt-c-navrow__chip {
  font: 500 13px/1 var(--cdo-sans);
  color: var(--wt-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.wt-c-navrow__chip:hover {
  color: var(--wt-ink);
  border-bottom-color: var(--wt-ink);
}

/* ---- Story package (C) — featured + rail + pulse strip ---- */
.wt-c-pkg {}
.wt-c-pkg__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wt-c-pkg__label {
  font: 700 18px/1 var(--cdo-sans);
  color: var(--wt-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wt-c-pkg__more {
  font: 500 12px/1 var(--cdo-sans);
  color: var(--wt-ink-quiet);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.wt-c-pkg__more:hover { color: var(--wt-ink); }

.wt-c-pkg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 740px) {
  .wt-c-pkg__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
  }
}

.wt-c-pkg__featured {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.wt-c-pkg__media {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--wt-rule);
  margin-bottom: 4px;
}
.wt-c-pkg__kicker {
  font: 600 11px/1 var(--cdo-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-c-pkg__headline {
  font: 700 26px/1.12 var(--cdo-serif);
  margin: 0;
  color: var(--wt-ink);
  letter-spacing: -0.005em;
}
@media (min-width: 740px) {
  .wt-c-pkg__headline { font-size: 30px; }
}
.wt-c-pkg__dek {
  margin: 0;
  font: 400 15px/1.45 var(--cdo-serif);
  color: var(--wt-ink-soft);
}

.wt-c-pkg__rail {
  display: flex;
  flex-direction: column;
  border-left: 0;
  padding-left: 0;
}
@media (min-width: 740px) {
  .wt-c-pkg__rail { border-left: 1px solid var(--wt-rule); padding-left: 24px; }
}
.wt-c-pkg__rail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wt-rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
}
.wt-c-pkg__rail-item:first-child { padding-top: 0; }
.wt-c-pkg__rail-item:last-child { border-bottom: 0; }
.wt-c-pkg__rail-item:has(:not(.wt-c-pkg__rail-thumb)) { grid-template-columns: 1fr; }
.wt-c-pkg__rail-thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  background: var(--wt-rule);
  display: block;
}
.wt-c-pkg__rail-text { display: flex; flex-direction: column; gap: 4px; }
.wt-c-pkg__rail-kicker {
  font: 600 10px/1 var(--cdo-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
}
.wt-c-pkg__rail-headline {
  font: 700 16px/1.22 var(--cdo-serif);
  margin: 0;
  color: var(--wt-ink);
}

.wt-c-pkg__pulse {
  margin-top: 18px;
  border-top: 1px solid var(--wt-rule);
  padding-top: 16px;
}
.wt-c-pkg__pulse-label {
  display: block;
  font: 600 10px/1 var(--cdo-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wt-ink-quiet);
  margin-bottom: 12px;
}
.wt-c-pkg__pulse-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 739px) {
  .wt-c-pkg__pulse-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wt-c-pkg__pulse-tiles > *:nth-child(3) { display: none; }
}

/* ---- Pulse feed strip (horizontal scroll, NYT Watch Today's analog) ---- */
.wt-c-feedstrip {}
.wt-c-feedstrip__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wt-c-feedstrip__title {
  margin: 0;
  font: 700 18px/1 var(--cdo-sans);
  color: var(--wt-ink);
}
.wt-c-feedstrip__more {
  font: 500 12px/1 var(--cdo-sans);
  color: var(--wt-ink-quiet);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.wt-c-feedstrip__more:hover { color: var(--wt-ink); }
.wt-c-feedstrip__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.wt-c-feedstrip__rail::-webkit-scrollbar { display: none; }
.wt-c-feedstrip__rail > * { scroll-snap-align: start; min-width: 0; }

/* =====================================================================
   Version C — NYT-style two-level grid
   ---------------------------------------------------------------------
   Outer:  main column (~70%)  +  right rail (~30%) — runs full height
   Inner per package: 2-col grid
     row 1: kicker spans both cols
     row 2: big serif headline spans both cols
     row 3: col 1 narrow text  +  col 2 wide image
     row 4: 2-up secondary articles, spans both cols
   Right rail accumulates 3+ standalone stories alongside packages.
   ===================================================================== */

/* ---- Outer two-level grid ---- */
.wt-c-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 12px;
}
@media (min-width: 740px) {
  .wt-c-news {
    grid-template-columns: minmax(0, 14fr) minmax(0, 6fr);
    column-gap: 32px;
  }
}
.wt-c-news__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wt-c-news__rail {
  min-width: 0;
  border-top: 1px solid var(--wt-rule);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 740px) {
  .wt-c-news__rail {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--wt-rule);
    padding-left: 24px;
  }
}

/* ---- Package (wt-c-pkg3) — 2-col internal grid ---- */
.wt-c-pkg3 {
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--wt-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
}
.wt-c-pkg3:first-child { padding-top: 8px; }
@media (min-width: 740px) {
  .wt-c-pkg3 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
    column-gap: 24px;
    row-gap: 14px;
  }
}

/* Kicker eyebrow — spans both cols, small uppercase. */
.wt-c-pkg3__kicker-link { text-decoration: none; color: inherit; display: block; }
.wt-c-pkg3__kicker {
  display: block;
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
}
@media (min-width: 740px) {
  .wt-c-pkg3__kicker-link { grid-column: 1 / -1; }
}

/* Big serif headline — spans both cols. First package on the page gets
   a heavier treatment so the top of the home reads as a clear lead. */
.wt-c-pkg3__hed { text-decoration: none; color: inherit; display: block; }
.wt-c-pkg3__hed h2 {
  margin: 0;
  font: 700 30px/1.06 var(--cdo-serif);
  letter-spacing: -0.005em;
  color: var(--wt-ink);
}
@media (min-width: 740px) {
  .wt-c-pkg3__hed { grid-column: 1 / -1; }
  .wt-c-pkg3__hed h2 { font-size: 38px; line-height: 1.04; }
}
.wt-c-news__main .wt-c-pkg3:first-child .wt-c-pkg3__hed h2 { font-size: 36px; line-height: 1.04; }
@media (min-width: 740px) {
  .wt-c-news__main .wt-c-pkg3:first-child .wt-c-pkg3__hed h2 {
    font-size: 44px; line-height: 1.02;
  }
}

/* Lead text col (col 1, row 3). */
.wt-c-pkg3__lead-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 740px) {
  .wt-c-pkg3__lead-text { grid-column: 1 / 2; padding-right: 4px; }
}
.wt-c-pkg3__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.wt-c-pkg3__bullets li {
  position: relative;
  padding-left: 14px;
  font: 400 15px/1.42 var(--cdo-serif);
  color: var(--wt-ink-soft);
}
.wt-c-pkg3__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wt-ink-quiet);
}
.wt-c-pkg3__dek {
  margin: 0;
  font: 400 16px/1.42 var(--cdo-serif);
  color: var(--wt-ink-soft);
}
.wt-c-pkg3__more-link {
  font: 400 13px/1 var(--wt-font-ui);
  color: var(--wt-eyebrow);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
}
.wt-c-pkg3__more-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Wide image col (col 2, row 3). */
.wt-c-pkg3__media-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 740px) {
  .wt-c-pkg3__media-wrap { grid-column: 2 / 3; }
}
.wt-c-pkg3__media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  background: var(--wt-rule);
  display: block;
}

/* 2-up secondary row (cols 1+2, row 4). */
.wt-c-pkg3__sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px solid var(--wt-rule);
}
@media (min-width: 740px) {
  .wt-c-pkg3__sub {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
.wt-c-pkg3__sub-item { text-decoration: none; color: inherit; display: block; }
.wt-c-pkg3__sub-headline {
  margin: 0 0 6px;
  font: 700 17px/1.22 var(--cdo-serif);
  color: var(--wt-ink);
}
.wt-c-pkg3__sub-dek {
  margin: 0;
  font: 400 14px/1.4 var(--cdo-serif);
  color: var(--wt-ink-soft);
}

/* ---- Right-rail story (wt-c-rail__item) ---- */
.wt-c-rail__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wt-rule);
}
.wt-c-rail__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wt-c-rail__media {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wt-rule);
  display: block;
  margin-bottom: 4px;
}
.wt-c-rail__kicker {
  display: block;
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
}
.wt-c-rail__headline {
  margin: 0;
  font: 700 20px/1.18 var(--cdo-serif);
  color: var(--wt-ink);
  letter-spacing: -0.005em;
}
.wt-c-rail__dek {
  margin: 0;
  font: 400 15px/1.42 var(--cdo-serif);
  color: var(--wt-ink-soft);
}

/* ---- Sidebar nav row inside main column ---- */
/* Already styled by the earlier .wt-c-navrow block. We just bolt on
   border behavior so the nav row sits flush with packages. */
.wt-c-news__main .wt-c-navrow {
  border-top: 0;
  border-bottom: 1px solid var(--wt-rule);
  padding: 14px 0 16px;
}
.wt-c-news__main .wt-c-pkg3 + .wt-c-navrow {
  border-top: 0;
}

/* ---- Below-news supplementary blocks ---- */
.wt-c-cirow {
  padding: 28px 0 36px;
  border-top: 1px solid var(--wt-rule);
}
.wt-c-cirow .wt-c-cirow__hint {
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
}
.wt-c-cirow__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 740px) {
  .wt-c-cirow__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .wt-c-cirow__grid > .wt-c-cicol:not(:first-child) {
    border-left: 1px solid var(--wt-rule);
    padding-left: 24px;
  }
}
.wt-c-cicol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wt-c-cicol__label {
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
  text-decoration: none;
  margin-bottom: 4px;
}
.wt-c-cicol__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
}
.wt-c-cicol__media {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--wt-rule);
  display: block;
}
.wt-c-cicol__headline {
  margin: 0;
  font: 700 17px/1.2 var(--cdo-serif);
  color: var(--wt-ink);
}
.wt-c-cicol__item {
  display: block;
  font: 500 14px/1.3 var(--cdo-sans);
  color: var(--wt-ink-soft);
  text-decoration: none;
  padding: 8px 0;
  border-top: 1px solid var(--wt-rule);
}
.wt-c-cicol__item:hover { color: var(--wt-ink); }

/* Density eyebrow above bullets in col 1 — date + read time. */
.wt-c-pkg3__meta {
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wt-c-pkg3__meta-dot { color: var(--wt-eyebrow); }

/* Bold sub-headline in col 1 — elevates the article dek to NYT
   sub-article weight (acts as a separate-headline analog). */
.wt-c-pkg3__subhed {
  margin: 0;
  font: 700 18px/1.25 var(--cdo-serif);
  color: var(--wt-ink);
  letter-spacing: -0.005em;
}
@media (min-width: 740px) {
  .wt-c-pkg3__subhed { font-size: 19px; }
}

/* 2-up secondary "X MIN READ" tag — NYT-style small uppercase tag. */
.wt-c-pkg3__sub-meta {
  display: block;
  margin-top: 8px;
  font: 400 11px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-eyebrow);
}

/* =====================================================================
   Layout C — Option C polish (Editorial Rhythm First).
   See news/_pipeline/LAYOUT-C-ROADMAP.md for the design rationale.
   ---------------------------------------------------------------------
   - N7  Headline clamp on package heds — keeps lead at <=4 lines and
         secondary <=3 lines so the rhythm reads tight, not loose.
   - N9  "More in [section] →" stitch link — render-template addition
         in cdo-watchtower.js renderHomeC; this only styles it.
   - N12 Pipe separator on chip rows — NYT masthead convention.
   - Lead hierarchy bump — first package's hed 44 → 48px, dek 16 → 17px,
         and inter-package boundaries get rule-strong instead of rule.
   ===================================================================== */

/* N7 — clamp package heds. Keeps long headlines from sprawling and
   forces editorial to cut tight, NYT-style. -webkit-line-clamp is
   widely supported (Chrome/Safari/Firefox/Edge all current). */
.wt-c-pkg3__hed h2 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wt-c-news__main .wt-c-pkg3:first-child .wt-c-pkg3__hed h2 {
  -webkit-line-clamp: 4;
}

/* N9 — "More in <section> →" stitch under each package's lead text.
   Pure-styled; the JS renderer drops the <a class="wt-c-pkg3__more-section">
   below the dek when the package has a known category. */
.wt-c-pkg3__more-section {
  font: 400 11px/1 var(--wt-font-ui);
  color: var(--wt-eyebrow);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--wt-rule);
  padding-top: 12px;
  margin-top: 4px;
  align-self: flex-start;
}
.wt-c-pkg3__more-section:hover {
  color: var(--wt-ink);
  border-top-color: var(--wt-ink);
}

/* N12 — pipe separator between chip-row items. Uses rule color so it
   reads as structural, not decorative. */
.wt-c-navrow__chip:not(:last-child)::after {
  content: " | ";
  margin-left: 14px;
  color: var(--wt-rule);
  pointer-events: none;
}
.wt-c-navrow__chip:not(:last-child) {
  margin-right: -14px; /* gap from .wt-c-navrow__chips already gives breathing room; pull back so " | " replaces the gap visually */
  padding-right: 0;
}

/* Lead hierarchy bump — the first package on the page should read as the
   day's lead. Was 44px desktop; bump to 48px. Was 16px dek; bump to 17px. */
@media (min-width: 740px) {
  .wt-c-news__main .wt-c-pkg3:first-child .wt-c-pkg3__hed h2 {
    font-size: 48px;
    line-height: 1.02;
  }
  .wt-c-news__main .wt-c-pkg3:first-child .wt-c-pkg3__dek {
    font-size: 17px;
    line-height: 1.45;
  }
}

/* Inter-package boundary — switch the existing pkg3 bottom-rule from
   --wt-rule (light) to --wt-rule-strong (full ink) ONLY between
   packages, so the page reads "this is a new story-set" rather than
   "this is just another column." Last package keeps the lighter rule
   (or has no trailing strong rule running into the navrow). */
.wt-c-news__main .wt-c-pkg3:not(:last-of-type) {
  border-bottom-color: var(--wt-rule-strong);
}

/* N5 — author byline emphasis on opinion pieces. The JS renderer
   adds class `is-opinion` to `.wt-c-rail__card` (or to a card wrapper)
   when the article is flagged. Author renders large + caps; story
   title smaller + serif beneath. Falls back gracefully if the JS
   doesn't apply the class. */
.wt-c-rail__card.is-opinion .wt-c-rail__byline,
.wt-c-pkg3__lead-text .is-opinion-byline {
  display: block;
  font: 600 12px/1 var(--wt-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-ink);
  margin-bottom: 6px;
}
.wt-c-rail__card.is-opinion .wt-card__headline {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
}