/* ============================================================================
   Burg's Eye View — site styles.
   Built on top of tokens.css (Burg's Eye View brand theme, source of truth:
   brand-theme-spec.md). Load order in every page head: fonts.css, then
   tokens.css, then this file. This file adds no brand hues of its own and
   reads every color through the custom properties tokens.css defines.
   ========================================================================== */

:root {
  /* Layout scale — not part of the brand kit, purely spacing/measure helpers. */
  --s-2xs: .25rem; --s-xs: .5rem; --s-sm: .75rem; --s-md: 1rem;
  --s-lg: 1.5rem; --s-xl: 2.25rem; --s-2xl: 3.5rem; --s-3xl: 5rem;
  --measure: 70ch;
  --wrap: 1180px;

  /* The footer is a fixed "night" bookend in both themes (spec section 6):
     it does not follow the paper/field/ink tokens because it must look the
     same regardless of which theme is active. These four mirror the exact
     dark-mode hex values from brand-theme-spec.md sections 3b/3d so the
     bookend is always that palette, never a computed or invented color. */
  --footer-bg:    #0B2A31;
  --footer-ink:   #F3EBD9;
  --footer-muted: #9DB8BE;
  --footer-link:  #3BAABB;

  /* Emphasis ink for <strong>: a step past the body ink in each theme so
     bolded phrases read at a glance (Brad: bold must stick out). Light
     theme darkens toward near-black; dark theme lifts to pure white. */
  --ink-strong: #06242D;

  /* The construction banner is a fixed gold ribbon in both themes (same
     always-on rationale as the footer bookend): brand gold ramp with the
     dark night ink for text, so it stands apart from every other band. */
  --banner-from: #F6BC5B;
  --banner-to:   #E89A1F;
  --banner-ink:  #0B2A31;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-strong: #FFFFFF; }
}
:root[data-theme="dark"] { --ink-strong: #FFFFFF; }

/* ============================================================================
   SECTION HEADER SYSTEM (Brad, round 3): every section header reads the same
   way site-wide — ALL CAPS in the teal accent. h2 keeps the Fraunces display
   voice; h3 drops to a compact Franklin department label. Page titles (h1)
   and card headlines (h4) stay title-case ink.
   ========================================================================== */
h2 {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--teal);
}
h3 {
  font: 700 15px/1.4 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal);
}

/* ============================================================================
   RESET — supplementary to tokens.css's base (which already sets body/h1/h2/h3).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
p, figure, blockquote, dl, dd { margin: 0 0 var(--s-md); }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
input, button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }

/* Page background: a very subtle same-hue depth gradient over the paper
   token, both themes (Brad's explicit override of the brand spec's
   no-gradient rule). Plain var(--paper) first as a fallback for browsers
   without color-mix() support; the gradient declaration after it simply
   doesn't parse there, so the flat color stands. */
body {
  background: var(--paper);
  background: linear-gradient(180deg, var(--paper) 0%, color-mix(in oklch, var(--paper), var(--ink) 6%) 100%);
}
/* Long-form copy sits directly on the page gradient (Brad: no flat
   background rectangles behind general text; cards keep their fields). */

/* ============================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-lg); }

.prose { max-width: var(--measure); margin-inline: auto; }
.prose p, .prose li { font-size: 17px; }
/* Standout intro paragraph (Coming Soon lede): bold, no panel behind it. */
.prose p.lede { font-weight: 600; font-size: 18.5px; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 var(--s-md); padding-left: 1.3em; }
.prose li { margin-bottom: var(--s-xs); }
.prose > *:first-child { margin-top: 0; }

.wide { max-width: 900px; margin-inline: auto; }

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

/* Clipped to a 1px box (same technique as .visually-hidden) rather than
   pushed off-canvas with a negative offset, so it has no footprint to show
   up as a stray box in a full-page screenshot taken at rest. On keyboard
   focus it's unclipped and repositioned on-screen as a normal visible
   control. */
.skip-link {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  z-index: 300;
}
.skip-link:focus-visible {
  position: absolute; left: var(--s-md); top: var(--s-md);
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
  background: var(--ink); color: var(--paper);
  padding: var(--s-sm) var(--s-md); border-radius: var(--radius-sm);
}

/* ============================================================================
   HEADER / MASTHEAD
   ========================================================================== */
.site-header {
  background: var(--paper);
  padding-block: var(--s-md);
  border-bottom: 1px solid var(--line);
}
.site-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap;
}
.wordmark-wrap { margin: 0; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }

/* Logo theme swap — mirrors tokens.css's own dual dark-mode mechanism
   exactly (same order: system-preference media query first, then the
   explicit manual-toggle override second). The reverse (light-on-dark)
   lockup shows when the system prefers dark and the page hasn't been
   explicitly switched to light, OR when the page has been explicitly
   switched to dark regardless of system preference. */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }
.wordmark img { height: 62px; width: auto; }
.page-home .wordmark img { height: 76px; }
@media (max-width: 560px) {
  .wordmark img { height: 48px; }
  .page-home .wordmark img { height: 54px; }
}

/* Mobile masthead: the wrapped row was jamming the nav, theme toggle, and
   tagline together (Brad's report: overlapping). Stack it instead: logo
   centered, nav centered on its own line, tagline centered beneath with
   the desktop negative pull-up removed. */
@media (max-width: 700px) {
  .site-header { padding-block: var(--s-sm) var(--s-md); }
  .site-header-row { justify-content: center; row-gap: 2px; }
  .wordmark-wrap { width: 100%; display: flex; justify-content: center; }
  .site-nav { width: 100%; justify-content: center; gap: var(--s-md); }
  .site-nav a { min-height: 38px; white-space: nowrap; }
  .site-nav .theme-toggle { min-height: 38px; padding-block: 4px; }
  /* Brad: no tagline on phones — the lockup subtitle already carries it. */
  .site-tagline { display: none; }
}

.site-tagline {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--ink-muted);
  margin-top: -9px;
  margin-bottom: 0;
  padding-inline: var(--s-lg);
  max-width: var(--wrap);
  margin-inline: auto;
}
/* Muted ink still clears WCAG AA against the dark page, but small italic
   text reads soft there; step up to the full ink token in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-tagline { color: var(--ink); }
}
:root[data-theme="dark"] .site-tagline { color: var(--ink);
}

.site-nav {
  display: flex; align-items: center; gap: var(--s-lg);
}
.site-nav a {
  font: 500 15px var(--font-ui);
  color: var(--ink);
  text-decoration: none;
  padding: var(--s-xs) var(--s-2xs);
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); text-decoration: none; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--teal); }
.site-nav .theme-toggle { padding-block: var(--s-xs); }

/* ============================================================================
   UNDER-CONSTRUCTION BANNER (site-wide, sits directly under the header)
   ========================================================================== */
.construction-banner {
  background: linear-gradient(90deg, var(--banner-from) 0%, var(--banner-to) 100%);
}
.construction-banner p {
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--s-sm);
  text-align: center;
  font: 600 14.5px/1.5 var(--font-ui);
  color: var(--banner-ink);
}
.construction-banner a {
  color: var(--banner-ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .15em;
  margin-left: .3em;
  white-space: nowrap;
}
.construction-banner a:hover { text-decoration-thickness: 3px; }
/* The global focus ring is teal, which fails contrast on the gold ribbon;
   pin it to the banner's own ink, proven dark-on-gold. */
.construction-banner a:focus-visible { outline-color: var(--banner-ink); }

/* ============================================================================
   FOOTER — dark bookend in both themes (tokens.css supplies background/color/
   link color on .site-footer already); this adds the layout and the elements
   tokens.css doesn't define.
   ========================================================================== */
/* Subtle gradient depth, same fixed footer hue ramping a touch darker
   toward the bottom edge; overrides tokens.css's flat background only. */
.site-footer {
  background: linear-gradient(180deg, var(--footer-bg) 0%, color-mix(in oklch, var(--footer-bg), black 14%) 100%);
}
.footer-grid {
  display: flex; align-items: center; gap: var(--s-2xl);
  flex-wrap: wrap;
}
.footer-logo { height: 96px; width: auto; flex: none; }
.footer-copy { flex: 1 1 320px; min-width: 0; }
.site-footer p {
  font-size: 13.5px;
  max-width: 60ch;
  margin-bottom: var(--s-sm);
}
.footer-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center;
  font-size: 13.5px;
  margin-top: var(--s-sm);
}
.footer-nav a { color: var(--footer-link); font-weight: 600; text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { text-decoration: underline; }
/* Footer is a fixed dark palette in both themes (see --footer-* above); the
   global :focus-visible ring is --teal, which in the light theme equals
   --teal in light mode and only reaches ~2.9:1 on this background (fails
   the 3:1 non-text minimum). Pin the ring to the footer's own text color,
   already proven high-contrast here, so it holds in both themes. */
.footer-nav a:focus-visible { outline-color: var(--footer-ink); }
.footer-nav span[aria-hidden] { color: var(--footer-muted); }
.footer-note { margin-top: var(--s-sm); color: var(--footer-muted); font-size: 13px; }

/* ============================================================================
   BUTTONS — base recipe lives in tokens.css (.btn / .btn-primary / .btn-follow
   / .btn-secondary / .btn-danger). This adds touch-target sizing and the
   link-styled secondary action used next to the hero button.
   ========================================================================== */
.btn {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
}

/* Gentle top-to-bottom gradients on the two filled brand buttons, same hue
   lightened toward the top only (no new colors); flat on hover, matching
   the gradient's own bottom stop so there's no color jump. Animated cross-
   fade to flat is skipped under reduced motion, matching the chevron. */
.btn-primary {
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink), white 12%) 0%, var(--ink) 100%);
  transition: background .15s ease;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); }

.btn-follow {
  background: linear-gradient(180deg, color-mix(in oklch, var(--gold), white 18%) 0%, var(--gold) 100%);
  transition: background .15s ease;
}
.btn-follow:hover, .btn-follow:focus-visible { background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-follow { transition: none; }
}

.link-secondary {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 16px var(--font-ui);
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: .15em;
}
.link-secondary:hover, .link-secondary:focus-visible { color: var(--ink); }

/* ============================================================================
   HERO (home)
   ========================================================================== */
/* Centered composition (Brad: content must sit centered on the page, not
   hug the container's left edge on wide screens). */
.hero { padding-block: var(--s-2xl) var(--s-lg); text-align: center; }
.hero-lede {
  font: 400 18px/1.6 var(--font-ui);
  max-width: 46ch;
  margin-inline: auto;
  color: var(--ink-muted);
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-lg);
  margin-top: var(--s-lg);
}

.wave-divider { margin-block: var(--s-xl); }

/* ============================================================================
   CARDS (home: "What we're digging into")
   ========================================================================== */
.cards-section { padding-block: var(--s-xl); }
.cards-section > h2 { text-align: center; }
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-lg);
}
@media (min-width: 780px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
.card-grid-single { max-width: 560px; }

.cards-subsection { margin-top: var(--s-lg); }
.cards-subsection + .cards-subsection { margin-top: var(--s-2xl); }
.cards-subheading {
  font: 600 12px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--teal);
  text-align: center;
  margin: 0 0 var(--s-md);
}
.card-grid-single { margin-inline: auto; }
/* The single "coming soon" card keeps one full-width column at all
   widths (the two-column breakpoint above would otherwise park it in
   the left half of its centered box). */
.card-grid.card-grid-single { grid-template-columns: 1fr; }
/* Three teaser cards sit in one row on wide screens. */
@media (min-width: 1000px) {
  .card-grid.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card { display: block; text-decoration: none; color: var(--ink); }
.card-muted { opacity: .82; }

p.card-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-xs); flex-wrap: wrap;
  font: 600 11px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--teal);
  background: var(--teal-tint);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: var(--s-sm);
}
.card-muted .card-eyebrow { color: var(--ink-muted); background: var(--line); }

/* Series kicker on the open-investigation cards (Brad, round 3): the
   series name IS the card's title voice — bigger than before, no pill —
   while the long story headline steps down a size beneath it. */
p.card-kicker {
  display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap;
  font: 700 17px/1.2 var(--font-ui);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--teal);
  margin: 0 0 var(--s-sm);
}

.card-headline {
  font: 600 18.5px/1.35 var(--font-display);
  margin: 0 0 var(--s-sm);
}
.card-dek {
  font: 400 15px/1.55 var(--font-ui);
  color: var(--ink-muted);
  margin-bottom: var(--s-md);
}
.card-cta {
  display: inline-block; font-weight: 700; color: var(--teal);
}
.card-status {
  display: inline-block; font-weight: 600; font-style: italic; color: var(--ink-muted);
}

/* ============================================================================
   STATUS BADGE — "the spec's teal tint chip style" (same recipe as .tag),
   used inline in home card eyebrows and article eyebrows.
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal);
  vertical-align: middle;
}
.badge-closed { background: var(--line); color: var(--ink-muted); }

/* Live "pulsing light" on every open (non-closed) status badge, so an
   ONGOING case reads as active at a glance. Soft ripple + breathe in the
   badge's own color; stilled entirely under reduced motion. */
.status-badge:not(.badge-closed)::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: bev-pulse 1.8s ease-out infinite;
}
@keyframes bev-pulse {
  0%   { opacity: 1;   box-shadow: 0 0 0 0 color-mix(in oklch, currentColor, transparent 40%); }
  70%  { opacity: .65; box-shadow: 0 0 0 6px transparent; }
  100% { opacity: 1;   box-shadow: 0 0 0 0 transparent; }
}

/* Revolving-circle loader on the "In Progress" teaser card's eyebrow. */
.card-muted .card-eyebrow::before {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: bev-spin 1s linear infinite;
}
@keyframes bev-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .status-badge:not(.badge-closed)::before { animation: none; }
  .card-muted .card-eyebrow::before { animation: none; border-top-color: currentColor; }
}

/* ============================================================================
   SIGNUP COMPONENT
   ========================================================================== */
.signup-section {
  padding-block: var(--s-2xl);
  border-top: 1px solid var(--line);
  margin-top: var(--s-xl);
}
.signup-section .wide { text-align: center; }
.signup-section h2 { margin-top: 0; }
.signup-intro {
  font: 400 17px/1.6 var(--font-ui);
  max-width: 60ch;
  margin-inline: auto;
  color: var(--ink-muted);
}
form.signup {
  display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: flex-start;
  justify-content: center;
  max-width: 560px;
  margin-inline: auto;
  margin-top: var(--s-lg);
}
/* The popup card keeps its compact left-aligned layout. */
.signup-popup-card .signup-intro { text-align: left; }
.signup-popup-card form.signup { justify-content: flex-start; max-width: none; }
form.signup input[type="email"] {
  flex: 1 1 240px; min-height: 44px;
  padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: 400 16px var(--font-ui);
}
form.signup input[type="email"]::placeholder { color: var(--ink-muted); }
form.signup input[type="email"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
form.signup .cf-turnstile { flex-basis: 100%; }
.signup-msg { flex-basis: 100%; margin: 0; font-size: 13.5px; font-weight: 600; }
.signup-msg:empty { display: none; }
.signup-msg-error { color: var(--coral); }
.signup-success { font: 600 17px var(--font-ui); color: var(--teal); }
.fine-print { font-size: 13.5px; color: var(--ink-muted); margin-top: var(--s-sm); max-width: 60ch; }
.signup-section .fine-print { margin-inline: auto; }

/* ============================================================================
   SIGNUP POPUP — dismissible modal, shown once per browser session.
   Small corner card, not a full-screen takeover; the outer element is a
   transparent full-viewport click-catcher so an outside click can dismiss it.
   ========================================================================== */
.signup-popup { position: fixed; inset: 0; z-index: 200; }
.signup-popup[hidden] { display: none; }
.signup-popup-card {
  position: fixed; right: var(--s-lg); bottom: var(--s-lg);
  width: min(360px, calc(100vw - 2 * var(--s-lg)));
  max-height: calc(100vh - 2 * var(--s-lg));
  overflow-y: auto;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow);
  padding: var(--s-lg);
}
.signup-popup-card:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.signup-popup-close {
  position: absolute; top: var(--s-sm); right: var(--s-sm);
  width: 2.75rem; height: 2.75rem; min-height: unset;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  font-size: 1.4rem; line-height: 1; color: var(--ink-muted); cursor: pointer;
}
.signup-popup-close:hover { color: var(--ink); background: var(--line); }
.signup-popup-card h2 { font-size: 21px; margin: 0 var(--s-2xl) var(--s-xs) 0; }
.signup-popup-card .signup-intro { font-size: 14px; max-width: none; margin-bottom: 0; }
.signup-popup-card form.signup { margin-top: var(--s-md); }
.signup-popup-card .fine-print { font-size: 12.5px; }

@media (max-width: 480px) {
  .signup-popup-card {
    left: var(--s-sm); right: var(--s-sm); bottom: 0; width: auto;
    max-height: 80vh; border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: var(--s-lg);
  }
}

/* ============================================================================
   ARTICLE (investigation pages, about, privacy)
   ========================================================================== */
/* One reading spine: the article header narrows to the prose column's width
   and center position, so eyebrow, headline, and byline start on the same
   left edge as the article text below. Quick facts, charts, and tables
   break out wider but stay symmetrically centered. */
.article-header { padding-block: var(--s-2xl) var(--s-lg); max-width: calc(var(--measure) + 2 * var(--s-lg)); }
/* Long story headlines step down from the site's default h1 scale
   (Brad, round 3), making room for the series title above them. */
.article-header h1 { font-size: clamp(27px, 3.6vw, 38px); }
/* Series title: the investigation's brand line, large gold caps between
   the case-file eyebrow and the headline. Fixed-contrast golds per theme
   (brand gold fails contrast on the light cream, so light uses a deeper
   cut of the same hue). */
.series-title {
  font: 700 clamp(20px, 2.6vw, 25px)/1.15 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #A66A12;
  margin: 0 0 var(--s-xs);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .series-title { color: #F6BC5B; }
}
:root[data-theme="dark"] .series-title { color: #F6BC5B; }
.eyebrow {
  display: block;
  font: 600 12px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--teal);
  margin-bottom: var(--s-sm);
}
.eyebrow .status-badge { text-transform: uppercase; letter-spacing: .14em; margin-inline: .2em; }
.article-header h1 { max-width: 20ch; }

/* Coming Soon is a promo page, not a news article: center its title block
   over the two-column feature grid instead of anchoring it to the reading
   spine (Brad: the title alignment looked off). */
.page-coming-soon .article-header {
  max-width: var(--wrap);
  text-align: center;
  padding-block: var(--s-2xl) var(--s-md);
}
.page-coming-soon .article-header h1 { max-width: none; margin-inline: auto; }
.page-coming-soon .prose p.lede { text-align: center; }
.article-dek {
  font: 400 18px/1.55 var(--font-ui);
  color: var(--ink);
  max-width: 56ch;
  margin-top: var(--s-md);
}
.byline {
  font-family: var(--font-ui);
  font-style: italic;
  color: var(--ink-muted);
  margin-top: var(--s-md);
  font-size: 15px;
}

.disclosure-box {
  background: var(--field);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  padding: var(--s-md) var(--s-lg);
  margin-bottom: var(--s-xl);
  font-size: 13.5px;
  color: var(--ink);
}
.disclosure-box p { margin: 0; }

.quick-facts {
  background: var(--field);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-lg);
  margin-bottom: var(--s-2xl);
}
.quick-facts h2 { margin-top: 0; font-size: 21px; }
.quick-facts ul { list-style: none; padding: 0; margin: 0; }
.quick-facts li { padding-block: var(--s-sm); border-top: 1px solid var(--line); font-size: 16.5px; }
.quick-facts li:first-child { border-top: none; padding-top: 0; }
.quick-facts li:last-child { padding-bottom: 0; }
/* One emphasis style for every quick fact (Brad: leading mono figures
   read inconsistently next to the Franklin-bold facts; match everything
   to the plain bold style). .figure keeps only tabular numerals. */
.quick-facts li strong { font-family: var(--font-ui); font-weight: 700; color: var(--ink-strong); }
.quick-facts li strong.figure { font-variant-numeric: tabular-nums; }

/* Emphasis must be visible at a glance (Brad: hard to tell bold from body
   text, especially in the dark theme where cream-on-teal flattens weight
   differences): full 700 weight plus the stepped-up emphasis ink. */
.prose strong {
  font-weight: 700;
  color: var(--ink-strong);
}

.stat-line {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-md) var(--s-lg);
  font: 500 15px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- data tables ---------- */
/* Base cell styling (Franklin headers, mono tabular-nums figures, hairline
   rows) comes from tokens.css's table.data. This adds the site's specific
   table variants and scroll/sizing behavior. */
.table-scroll { margin-block: var(--s-lg); -webkit-overflow-scrolling: touch; }
table.data {
  min-width: 640px;
  background: var(--field);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data caption { text-align: left; padding: var(--s-sm) var(--s-md) 0; }
table.data th:not(:first-child), table.data td:not(:first-child) { text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { background: var(--line); }
table.data tr.table-total td { background: var(--line); font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: none; }

table.bonuses-table td:nth-child(2), table.bonuses-table th:nth-child(2),
table.timeline-table td:nth-child(2), table.timeline-table th:nth-child(2) {
  text-align: left;
}
table.timeline-table { min-width: 560px; }

.table-note { font-size: 13.5px; color: var(--ink-muted); margin-top: calc(-1 * var(--s-sm)); }

/* ---------- charts ---------- */
/* The inline chart SVGs draw their own text in fixed dark ink colors (not
   CSS tokens), so they only stay legible on a light ground. .chart-panel
   is a fixed light "paper" card, hard-set to the LIGHT palette's field/
   line/shadow values and deliberately NOT theme-reactive, so the chart
   reads as printed on paper in both themes. The caption lives outside the
   panel, in normal theme text color. */
.chart-figure { margin-block: var(--s-xl); }
.chart-panel {
  background: #F7F1E3;
  border: 1px solid rgba(14, 62, 71, .16);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(14, 62, 71, .06);
  padding: var(--s-lg);
}
.chart-panel svg { width: 100%; height: auto; }
.chart-figure figcaption { margin-top: var(--s-sm); color: var(--ink-muted); }

.sources { padding-left: 1.3em; }
.sources li { margin-bottom: var(--s-sm); }

/* ============================================================================
   TRANSPARENCY DETAILS — native <details>/<summary>, collapsed by default.
   The summary is styled as a full-width card bar that visually replaces the
   old section H2; a real <h2> still lives inside it (nested inside a plain
   span, not as summary's direct child, so it reads correctly as a heading
   for screen-reader heading navigation without fighting summary's own
   content-model/ARIA button semantics). Content always renders for print,
   even while collapsed on screen.
   ========================================================================== */
.transparency-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  box-shadow: var(--shadow);
  margin-bottom: var(--s-xl);
}
.transparency-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 44px;
  padding: var(--s-lg);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius);
}
.transparency-summary::marker { content: ""; }
.transparency-summary::-webkit-details-marker { display: none; }
.transparency-summary:hover { background: var(--line); }
.transparency-summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -3px;
}
.transparency-details[open] > .transparency-summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.transparency-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.transparency-summary-text h2 {
  margin: 0;
  font: 700 clamp(19px, 2.4vw, 22px)/1.3 var(--font-display);
  color: var(--teal);
}
.transparency-subtitle {
  font: 400 14px/1.4 var(--font-ui);
  color: var(--ink-muted);
}
.transparency-chevron {
  flex: none;
  color: var(--teal);
  transition: transform .2s ease;
}
.transparency-details[open] .transparency-chevron { transform: rotate(180deg); }

.transparency-content { padding: var(--s-xl) var(--s-lg) var(--s-lg); }

@media (prefers-reduced-motion: reduce) {
  .transparency-chevron { transition: none; }
}

@media print {
  /* Details content is hidden by the UA stylesheet when not [open]; force
     it to render so printed pages carry the full record regardless of the
     on-screen expand/collapse state. */
  .transparency-content { display: block !important; }
}

@media (max-width: 480px) {
  .transparency-summary { padding: var(--s-md); align-items: flex-start; }
  .transparency-summary-text h2 { font-size: 18px; }
  .transparency-subtitle { font-size: 13px; }
  .transparency-content { padding: var(--s-lg) var(--s-md) var(--s-md); }
}

/* ============================================================================
   COMING SOON — feature grid
   ========================================================================== */
.feature-grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-xl) var(--s-2xl);
  margin-block: var(--s-xl) var(--s-2xl);
}
.feature h2 { font-size: 21px; margin-top: 0; margin-bottom: var(--s-xs); }
.feature p { font: 400 17px/1.6 var(--font-ui); color: var(--ink); max-width: 46ch; }

@media (min-width: 760px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   UTILITY PAGES (404 / thanks)
   ========================================================================== */
.utility-page { padding-block: var(--s-3xl); text-align: center; }
.utility-page h1 { max-width: 16ch; margin-inline: auto; }
.utility-page p { font: 400 17px/1.6 var(--font-ui); max-width: 50ch; margin-inline: auto; }
.utility-page .btn { margin-top: var(--s-lg); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 900px) {
  .hero { padding-block: var(--s-3xl) var(--s-xl); }
  .article-header { padding-block: var(--s-3xl) var(--s-xl); }
}