/* =========================================================================
   Cyber Investigation Services (CIS) — shared design system
   Direction A "Evidence Ledger". Loaded by every page; page-unique rules stay
   in that page's own <style> block, which is parsed after this file and wins
   on ties. Font URLs are relative to this file (assets/css/), so they resolve
   from the site root and from articles/ alike.
   ========================================================================= */

/* ---- Fonts (self-hosted) ------------------------------------------------ */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --ink: #101C2C;
  --ink-soft: #2A3949;
  --paper: #FBFBF9;
  --paper-shade: #F1F2EE;
  --accent: #163663;
  --accent-ink: #0F2647;
  --evidence: #E8B33A;
  --rule: rgba(16, 28, 44, 0.14);
  --rule-strong: rgba(16, 28, 44, 0.30);
  --rule-light: rgba(251, 251, 249, 0.16);
  /* Control boundaries. Separate from --rule/--rule-strong, which are divider
     tokens: when a border IS the whole affordance it must clear 3:1 (WCAG
     1.4.11), which a divider tint never does. */
  --control-line: rgba(16, 28, 44, 0.50);
  --control-line-strong: rgba(16, 28, 44, 0.55);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: min(1520px, 92vw);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --good: #5F8A6B;
  --bad: #B23A2E;
  --edge: #C7C0B2;
  --retail: #2E4A6B;

  /* z-index scale — every layered rule references these, never a bare number */
  --z-raised: 1;
  --z-scene-mid: 2;
  --z-scene: 3;
  --z-sticky: 60;
  --z-header: 100;
  --z-nav: 120;
  --z-modal: 200;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

strong {
  font-weight: 600;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: var(--z-modal);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  border-radius: 2px;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* Dual-tone focus ring. A single-colour ring cannot clear 3:1 on both the ink
   hero and the paper pages, so the ring carries two layers: a paper inner
   outline and an accent outer halo. On ink the inner layer carries the
   contrast; on paper the outer one does. The halo is !important because
   component :hover rules also set box-shadow and would otherwise erase half the
   ring for a keyboard user whose pointer happens to rest on the control. */
:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--accent) !important;
  border-radius: 1px;
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: rgba(251, 251, 249, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.35s var(--ease-out);
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.78;
  padding: 0.4rem 0;
  position: relative;
  transition: opacity 0.2s var(--ease-out);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--evidence);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}

.nav-links a:hover {
  opacity: 1;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-quiet {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  opacity: 0.82;
  padding: 0.4rem 0;
  transition: opacity 0.2s var(--ease-out), border-color 0.35s var(--ease-out);
}

.nav-quiet:hover {
  opacity: 1;
}

.nav-quiet--join {
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.4rem 0.85rem;
}

.nav-quiet--join:hover {
  border-color: var(--accent-ink);
}

.site-header.scrolled {
  box-shadow: 0 6px 24px -18px rgba(16, 28, 44, 0.45);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

/* Mobile panel — a full-bleed paper sheet under the header. Rows are block
   boxes with their own gutter padding, so any rule that separates them spans
   the full width instead of hugging the text. */
.nav-panel {
  display: none;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

/* The sheet is the same paper as most page bodies, so it needs its own bottom
   edge to sit above the content rather than merge into it. */
.nav-panel.open {
  display: block;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px -16px rgba(16, 28, 44, 0.45);
}

.nav-panel .nav-links {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.35rem 0 0.75rem;
}

.nav-panel .nav-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--gutter);
  color: var(--ink);
  opacity: 0.88;
  font-size: 0.9rem;
}

.nav-panel .nav-links a:hover,
.nav-panel .nav-links a:active {
  opacity: 1;
  background: var(--paper-shade);
}

.nav-panel .nav-links a::after {
  display: none;
}

/* ---- Controls ----------------------------------------------------------- *
   One control system for everything that means "act now": body CTA, hero CTA,
   header pill, filter chip. Shared base = 2px radius, IBM Plex Mono 500, and a
   fixed line box so the same class renders the same height on every page (the
   old drift came from the line box, not the padding). Two sizes only, 48px
   default and 44px compact. Surface is a modifier below, never a new family. */
.btn,
.hero-btn,
.seg-chip,
.site-header a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

/* Compact — header pill and filter chips. Still a 44px hit area. */
.seg-chip,
.site-header a.nav-cta {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  font-size: 0.8rem;
}

.btn:active,
.hero-btn:active,
.seg-chip:active,
.site-header a.nav-cta:active {
  transform: translateY(1px);
}

/* Surface: solid accent. */
.btn-primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  box-shadow: 0 6px 22px -8px rgba(22, 54, 99, 0.55);
}

/* Surface: the Watch List button. One button, one look, on every page (Chris, 2026-10-06). */
.btn-watch {
  background: var(--evidence);
  color: var(--ink);
  border-color: var(--evidence);
  text-decoration: none;
}
/* Section link colors (dark bands, prose) must never repaint the button. */
a.btn.btn-watch,
a.btn.btn-watch:visited,
a.btn.btn-watch:hover {
  color: var(--ink);
  text-decoration: none;
}
.btn-watch:hover {
  background: #F0C25A;
  border-color: #F0C25A;
  box-shadow: 0 8px 26px -10px rgba(16, 28, 44, 0.45);
}
/* Same look on every page, including a form button waiting for its fields. */
.btn.btn-watch:disabled,
.rp-actions .btn.btn-watch:disabled {
  background: var(--evidence);
  border-color: var(--evidence);
  color: var(--ink);
  opacity: 1;
  box-shadow: none;
}
@media (min-width: 600px) {
  .btn-watch { white-space: nowrap; }
}
.btn-watch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Surface: inverse — a paper fill for use on ink/accent panels. */
.btn-invert {
  background: var(--paper);
  color: var(--accent-ink);
  border-color: var(--paper);
}

.btn-invert:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 26px -10px rgba(16, 28, 44, 0.5);
}

/* Surface: ghost — the border carries the whole affordance, so it uses the
   control-boundary token rather than a divider tint. */
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--control-line-strong);
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(22, 54, 99, 0.04);
}

/* Hero CTAs. Primary is a paper fill, not amber: BRIEF.md reserves --evidence
   for evidence marks and rules out large amber fills. */
.hero-btn {
  padding: 0 1.6rem;
  white-space: nowrap;
}

.hero-btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.hero-btn--primary:hover {
  background: #fff;
  border-color: #fff;
}

/* Surface: on-dark outline. */
.hero-btn--secondary {
  color: var(--paper);
  border-color: rgba(251, 251, 249, 0.45);
}

.hero-btn--secondary:hover {
  border-color: rgba(251, 251, 249, 0.8);
  background: rgba(251, 251, 249, 0.12);
}

/* Filter chips. */
.seg-chip {
  color: var(--ink);
  letter-spacing: 0.04em;
  border-color: var(--control-line);
}

.seg-chip:hover {
  background: var(--paper-shade);
  border-color: var(--accent);
  color: var(--accent);
}

.seg-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.js .reveal-row {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-row.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

a.ev-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding-block: clamp(0.95rem, 1.5vw, 1.25rem);
  border-top: 1px solid var(--rule);
  align-items: baseline;
  color: var(--ink);
  transition: background 0.2s var(--ease-out);
}

a.ev-row:hover {
  background: rgba(22, 54, 99, 0.045);
}

a.ev-row:focus-visible {
  outline-offset: -3px;
}

.ev-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ev-date {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.ev-source {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.ev-content {
  min-width: 0;
}

.ev-head {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.32rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a.ev-row:hover .ev-head {
  box-shadow: inset 0 -0.5em 0 rgba(22, 54, 99, 0.08);
}

.site-footer-min {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer-min .foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
}

.site-footer-min .brand {
  color: var(--paper);
}

/* inline-flex + min-height gives the footer links a 44px hit area (WCAG 2.5.5)
   without changing where the text sits on the baseline. */
.foot-legal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(251, 251, 249, 0.66);
}

/* Visually-hidden utility. Content stays in the accessibility tree. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.foot-proto {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 251, 249, 0.5);
}

@media (max-width: 1180px) {
  .nav-links.nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* visibility:hidden takes the collapsed panel's links out of the tab order.
     It transitions discretely at the end of the collapse, so the open
     animation is unaffected. */
  .nav-panel {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    visibility: hidden;
    transition: grid-template-rows 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  }

  .nav-panel > * {
    min-height: 0;
    overflow: hidden;
  }

  .nav-panel.open {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    visibility: visible;
  }

  /* The primary CTA sits outside the collapsing list, so it survives at every
     width rather than disappearing behind the hamburger. */
  .nav-actions .nav-cta {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .nav-quiet {
    display: none;
  }
}

@media (max-width: 560px) {
  .site-footer-min .foot-proto {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.14rem;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

.brand-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.has-submenu {
  position: relative;
}

.nav-sub-toggle {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.4rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  opacity: 0.78;
  position: relative;
  transition: opacity 0.2s var(--ease-out), color 0.35s var(--ease-out);
}

.nav-sub-toggle:hover {
  opacity: 1;
}

.caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.75;
  transition: transform 0.2s var(--ease-out);
}

.has-submenu:hover .caret, .nav-sub-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* Desktop dropdown — one paper panel, identical on all 23 pages including
   home-v2's dark transparent header. Items carry no rules of their own; the
   panel's own padding keeps the first and last rows off its edges. */
.submenu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 15.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(16, 28, 44, 0.12);
  padding: 0.4rem 0;
  display: none;
  flex-direction: column;
  z-index: var(--z-nav);
}

.has-submenu:hover .submenu, .submenu.open {
  display: flex;
}

.submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--ink);
  opacity: 0.82;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.submenu a::after {
  display: none;
}

.submenu a:hover {
  opacity: 1;
  background: var(--paper-shade);
  color: var(--accent);
}

.submenu a:focus-visible {
  opacity: 1;
  background: var(--paper-shade);
  color: var(--accent);
  outline-offset: -2px;
}

/* Mobile "Who we help" — a group header over its indented audience rows,
   still a real disclosure button, open on load. */
.nav-panel .m-sub {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
}

.nav-panel .m-sub-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.5;
  min-height: 40px;
  padding: 0 var(--gutter);
  font-size: 0.68rem;
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-panel .m-submenu {
  display: none;
}

.nav-panel .m-submenu.open {
  display: block;
}

.nav-panel .m-submenu a {
  padding-left: calc(var(--gutter) + 1rem);
  opacity: 0.8;
}

.m-sub-toggle .caret {
  border-top-color: currentColor;
  opacity: 0.85;
}

.m-sub-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.nav-sub-toggle {
  color: var(--ink);
}

/* The CTA now sits in .nav-actions, outside .nav-links, so it no longer
   inherits the nav link type. Geometry and type come from the shared compact
   control; only the nowrap is header-specific. */
.site-header .nav-actions a.nav-cta {
  white-space: nowrap;
}

.site-header .nav-links a.nav-cta, .site-header.scrolled .nav-links a.nav-cta,
.site-header .nav-actions a.nav-cta, .site-header.scrolled .nav-actions a.nav-cta {
  background: var(--accent);
  color: var(--paper);
  opacity: 1;
  border-color: var(--accent);
}

.site-header .nav-links a.nav-cta::after, .site-header.scrolled .nav-links a.nav-cta::after,
.site-header .nav-actions a.nav-cta::after, .site-header.scrolled .nav-actions a.nav-cta::after {
  display: none;
}

.site-header .nav-links a.nav-cta:hover, .site-header.scrolled .nav-links a.nav-cta:hover,
.site-header .nav-actions a.nav-cta:hover, .site-header.scrolled .nav-actions a.nav-cta:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--paper);
  opacity: 1;
  box-shadow: 0 6px 20px -8px rgba(22, 54, 99, 0.55);
}

.site-header .nav-links a.nav-cta[aria-current="page"], .site-header.scrolled .nav-links a.nav-cta[aria-current="page"],
.site-header .nav-actions a.nav-cta[aria-current="page"], .site-header.scrolled .nav-actions a.nav-cta[aria-current="page"] {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--paper);
}

.nav-links a[aria-current="page"] {
  opacity: 1;
  color: var(--accent);
}

.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Current page, everywhere it can appear in the nav. One colour: accent.
   Amber is the evidence tone and has no business marking a nav item. */
.submenu a[aria-current="page"] {
  color: var(--accent);
  opacity: 1;
  background: var(--paper-shade);
}

.nav-panel .nav-links a[aria-current="page"],
.nav-panel .m-submenu a[aria-current="page"] {
  color: var(--accent);
  opacity: 1;
}

.bluf {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(6.5rem, 10vw, 9.5rem) clamp(3rem, 6vw, 5rem);
}

.bluf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
}

.bluf-kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--evidence);
  transform: rotate(45deg);
  flex: none;
}

.bluf-h1 {
  margin-top: 1.4rem;
  max-width: 20ch;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(2.15rem, 1.3rem + 3.6vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.bluf-dek {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.32rem);
  line-height: 1.55;
  color: rgba(251, 251, 249, 0.82);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.35rem;
}

.field-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field-help {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-row {
    opacity: 1 !important;
    transform: none !important;
  }
}

.sec {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.sec-intro {
  max-width: 46ch;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 34;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.block {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.block-head {
  max-width: 34ch;
}

.block-h2 {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.block-logic {
  margin-top: 1.1rem;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.fig {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--paper-shade);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.fig-caption {
  margin-top: 1.3rem;
  max-width: 62ch;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.fig-caption b {
  color: var(--ink);
  font-weight: 500;
}

.ledger-rows {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.ledger-cap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ledger-cap::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--rule);
}

a.ev-row:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.case-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: rgba(232, 179, 58, 0.08);
  border: 1px solid rgba(232, 179, 58, 0.45);
  border-radius: 3px;
}

.case-tick {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.45rem;
  background: var(--evidence);
  transform: rotate(45deg);
  flex: none;
}

.case-text {
  font-family: var(--serif);
  font-style: italic;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 22;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.42;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.case-text .cw-lead {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

.case-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  border-bottom: 1px solid rgba(22, 54, 99, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease-out);
}

.case-link:hover {
  border-color: var(--accent);
}

.fixable {
  background: var(--paper-shade);
  border-block: 1px solid var(--rule);
}

.fixable-inner {
  max-width: 40ch;
}

.fixable-h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.fixable-body {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
}

.do-today-h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;
}

.ledger {
  max-width: 640px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 20px 50px -34px rgba(16, 28, 44, 0.5);
  overflow: hidden;
}

.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-shade);
}

.ledger-head .lh-title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.ledger-form {
  padding: clamp(1.4rem, 3.2vw, 2.2rem) clamp(1.25rem, 3vw, 2rem) clamp(1.6rem, 3.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.ledger-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 0.35rem;
}

.ledger-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.62;
}

.tell {
  background: var(--ink);
  color: var(--paper);
}

.tell-inner {
  max-width: min(44ch, var(--measure));
}

.tell-h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.tell-body {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.55;
  color: rgba(251, 251, 249, 0.85);
}

/* Links on the dark band take the band's own text color (paper in the body, gold in the
   closing line), not the navy link color, which is unreadable on ink. */
.tell a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tell-final {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-light);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--evidence);
}

@media (max-width: 720px) {
  a.ev-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .ev-meta {
    flex-direction: row;
    gap: 0.7rem;
    align-items: baseline;
  }
}

.reading {
  width: 100%;
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.article-intro {
  padding-block: clamp(6.5rem, 9vw, 9rem) clamp(1.4rem, 3vw, 2.2rem);
}

.article-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.article-h1 {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.article-lead {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 30;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

.article-meta {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.prose {
  padding-bottom: clamp(3rem, 6vw, 5rem);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 16;
  font-size: 1.2rem;
  line-height: 1.72;
  color: var(--ink);
}

.prose > p {
  margin-top: 1.15rem;
}

.prose > p:first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.prose h2 + p {
  margin-top: 0.9rem;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(22, 54, 99, 0.35);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s var(--ease-out);
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose strong {
  font-weight: 600;
}

.prose figure {
  width: min(58rem, 94vw);
  margin: 2.4rem 0 2.4rem 50%;
  transform: translateX(-50%);
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.prose figure img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.prose figcaption {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.prose .table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.92rem;
}

.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.prose thead th {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose h2.sources-title {
  margin-top: 2.8rem;
}

.prose .sources {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prose .sources li {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  position: relative;
}

.prose .sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--evidence);
  border-radius: 50%;
}

.prose .sources a {
  color: var(--accent);
}

.hub-intro {
  padding-block: clamp(6.5rem, 9vw, 9rem) clamp(1.6rem, 3vw, 2.4rem);
}

.hub-h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(2.55rem, 1.6rem + 4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hub-sub {
  margin-top: 1.2rem;
  max-width: 52ch;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.tablist {
  display: none;
  gap: 0.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

.js .tablist {
  display: flex;
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.85rem 1.1rem;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease-out);
}

.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease-out);
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  color: var(--accent);
}

.tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tabpanel {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.js .tabpanel {
  display: none;
}

.js .tabpanel.is-active {
  display: block;
}

.panel-label {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2.6rem 0 1.2rem;
}

/* Visually hidden, but kept in the accessibility tree. The tabs already name
   each panel visually, so the h2 is redundant on screen but load-bearing for
   the heading outline. */
.js .panel-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.series-group {
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.series-group + .series-group {
  border-top: 1px solid var(--rule);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.series-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

.series-group-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.series-group-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.entry-list {
  display: flex;
  flex-direction: column;
}

.entry {
  display: block;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  transition: background 0.2s var(--ease-out);
}

.entry:first-child {
  border-top: 0;
}

.entry-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.entry-title {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}

.entry:hover .entry-title {
  color: var(--accent);
}

.entry-desc {
  margin-top: 0.45rem;
  max-width: 60ch;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.entry-more {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.entry:hover .entry-more {
  opacity: 0.9;
  transform: none;
}

/* Touch screens have no hover, so the card's "Read" cue is always shown there. */
@media (hover: none), (max-width: 720px) {
  .entry-more {
    opacity: 0.9;
    transform: none;
  }
}

.alert-empty {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
}

.article-onward {
  margin-top: 2.6rem;
}

.prose a.btn {
  text-decoration: none;
}

.prose a.btn-primary, .prose a.btn-primary:hover {
  color: var(--paper);
}

/* ---- Print -------------------------------------------------------------- *
   Reveal animations are driven by IntersectionObserver, which never fires for
   content the reader has not scrolled past. Printing does not scroll, so those
   sections would come out blank. Force them visible on paper. */
@media print {
  .reveal, .reveal-row {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .site-header .nav {
    gap: 0.5rem;
  }

  /* Keeps the pill clear of the 44px hamburger. */
  .site-header .nav-actions {
    gap: 0.6rem;
  }

  /* Compact controls hold a 12px type floor; the pill gives back width in
     padding instead. */
  .site-header .nav-actions a.nav-cta {
    font-size: 0.75rem;
    padding: 0.5rem 0.6rem;
  }

  /* The CTA is permanent chrome, so on a phone the wordmark yields room by
     setting smaller and dropping its tagline. It stays on one line. */
  .site-header .brand {
    line-height: 1.15;
  }

  .site-header .brand-name {
    font-size: 0.74rem;
    letter-spacing: 0;
  }

  .site-header .brand-tag {
    display: none;
  }
}

/* Phones: keep the header controls and the footer wordmark inside the right gutter,
   the same width as the left. At 440px and below the header "Report a tip" pill gives way
   and the same link appears at the foot of the mobile menu instead. */
.nav-panel .nav-panel-tip {
  display: none;
}

@media (max-width: 560px) {
  .site-header .nav {
    gap: 0.6rem;
  }

  .site-header .nav-actions {
    gap: 0.35rem;
  }

  .site-header .nav-actions a.nav-cta {
    padding: 0.45rem 0.5rem;
  }

  .site-header .brand-name {
    font-size: 0.7rem;
  }

  .site-footer-min .brand,
  .site-footer-min .brand-tag {
    white-space: normal;
  }
}

@media (max-width: 440px) {
  .site-header .nav-actions a.nav-cta {
    display: none;
  }

  .nav-panel .nav-panel-tip {
    display: block;
  }
}

/* Articles: one line under a series title saying what the series is. */
.series-group-dek { margin: 0.4rem 0 1.2rem; max-width: 62ch; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }