/*
 * Cuba Global 2050 — design system (Phase 1 implementation of docs/design/DESIGN_SYSTEM.md).
 *
 * This file makes the Phase 1 visual choices that DESIGN_SYSTEM.md §4 explicitly deferred to
 * "owner-reserved... made separately, when the owner authorizes it" (PROJECT_CHARTER.md §6) — the
 * owner's 2026-08-13 staging-buildout task is that authorization. Every rule below exists to serve
 * one of DESIGN_SYSTEM.md §1's five principles; the mapping is noted inline where non-obvious.
 *
 * NOT loaded in low-bandwidth mode (see templates/base.html) — that mode keeps its own small
 * inline stylesheet, unchanged, so the 150KB low-bandwidth budget (D-126/D-127) is untouched by
 * anything in this file. This file is the *normal*-mode experience only.
 *
 * No web fonts, no external requests of any kind: every typeface below is a system-font stack.
 * This isn't just a low-bandwidth nicety here — DESIGN_SYSTEM.md §3's "degrade-gracefully
 * typography" rule applies to normal mode too, and a platform that markets itself on resilience
 * (D-1xx-series decisions on portability/no vendor lock-in) shouldn't hairline-depend on a
 * third-party font CDN being reachable.
 */

/* ---------------------------------------------------------------------------------------------
   1. DESIGN TOKENS
   Palette rationale (DESIGN_SYSTEM.md §1.2 "calm, not alarmist" + §2.3a "must not imitate Cuban,
   American, international, military, weather-service, civil-defense, or government emergency
   color conventions, and must not rely on red/green alone"): a deep teal/slate family for brand
   and affirmative states, a warm muted ochre for archival/historical accents, and — critically —
   only ONE genuinely red-family color in the entire system, reserved for "False or misleading"
   (§2.2), never used decoratively. Every color pairing below has been checked to meet WCAG AA
   (4.5:1 body text / 3:1 large text and UI) against its actual usage background.
   ------------------------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Ink / surface */
  --ink: #16202b;
  --ink-muted: #4b5a68;
  --ink-on-brand: #f3f7f7;
  --surface: #ffffff;
  --surface-alt: #f2f5f6;
  --surface-raised: #ffffff;
  --surface-inverse: #0d1b22;
  --surface-inverse-alt: #14262f;
  --border: #d6dde1;
  --border-strong: #aab7bd;

  /* Brand */
  --brand: #0d5c63;
  --brand-dark: #093f44;
  --brand-tint: #e4f0ef;
  --accent: #a8783a;
  --accent-tint: #f4ead9;

  /* Status family (DESIGN_SYSTEM.md §2.2 / §2.3a) — icon+text always, color is secondary */
  --status-affirmative: #1c7a5e;
  --status-affirmative-tint: #e2f3ec;
  --status-neutral: #3f5872;
  --status-neutral-tint: #e7ecf2;
  --status-provisional: #93691c;
  --status-provisional-tint: #f6ecd9;
  --status-disputed: #62508f;
  --status-disputed-tint: #ece8f6;
  --status-negative: #8a3729;
  --status-negative-tint: #f7e6e2;
  --status-outdated: #5f6b72;
  --status-outdated-tint: #eaedee;

  /* Focus — a color used nowhere else, so a focus ring is never mistaken for anything else */
  --focus: #1568a3;

  /* Type */
  --font-display: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Space (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --radius: 0.5rem;
  --radius-sm: 0.3rem;
  --shadow-card: 0 1px 2px rgba(13, 27, 34, 0.06), 0 4px 16px rgba(13, 27, 34, 0.06);
  --content-width: 76rem;

  /* Minimum tap target, DESIGN_SYSTEM.md §3 */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef0;
    --ink-muted: #a9b7bd;
    --surface: #0d1b22;
    --surface-alt: #132530;
    --surface-raised: #16303b;
    --surface-inverse: #071115;
    --surface-inverse-alt: #0c1a20;
    --border: #24404b;
    --border-strong: #33545f;
    --brand: #4fb3ac;
    --brand-dark: #2c7d78;
    --brand-tint: #123330;
    --accent: #d8ab6c;
    --accent-tint: #2c2318;
    --status-affirmative: #4fbf95;
    --status-affirmative-tint: #122b22;
    --status-neutral: #8fa8c4;
    --status-neutral-tint: #1a2632;
    --status-provisional: #d9ab52;
    --status-provisional-tint: #2c2313;
    --status-disputed: #a996d9;
    --status-disputed-tint: #241f33;
    --status-negative: #de8a78;
    --status-negative-tint: #2e1712;
    --status-outdated: #9aa4a9;
    --status-outdated-tint: #1b2225;
    --focus: #6cc0ee;
  }
}

/* ---------------------------------------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 1rem;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--sp-4); color: var(--ink); max-width: 68ch; }
main p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.15em; }
a:hover { color: var(--brand-dark); }

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

/* Never rely on :focus alone in older engines that don't support :focus-visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: var(--ink-on-brand);
  padding: var(--sp-2) var(--sp-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.stack > * + * { margin-top: var(--sp-5); }

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.section {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--border);
}
.section:first-of-type { border-top: none; }
.section--alt { background: var(--surface-alt); }
.section--inverse { background: var(--surface-inverse); color: var(--ink-on-brand); border-top: none; }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: #fff; }
.section--inverse p { color: #cfe0e2; }
.section--inverse a { color: #9fe0d8; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-2);
}
.section--inverse .eyebrow { color: #9fe0d8; }

.section__lede { color: var(--ink-muted); max-width: 56ch; }

/* ---------------------------------------------------------------------------------------------
   4. SITE HEADER / NAVIGATION
   ------------------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--border);
}
/* Visual Pass 3 — a thin two-tone rule under the masthead (print-institution nameplate cue), not
   a second heavy border; reinforces "serious editorial/data institution" without adding weight. */
.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 38%, var(--accent) 62%, var(--accent) 100%);
  opacity: 0.55;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--brand); }
.brand__wordmark { display: flex; flex-direction: column; line-height: 1.08; }
.brand__wordmark small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.1em;
}
.brand__wordmark span { font-size: 1.28rem; letter-spacing: -0.01em; }
/* Visual Pass 2/3 — original waypoint/coordinate mark, not a circular initials badge. A rotated
   square ("diamond") with a concentric ring and a fixed center point reads as a map
   waypoint/survey marker — evidence tied to a specific place — without borrowing Cuban, American,
   military, or partisan iconography (owner's explicit constraint). Visual Pass 3 gives it more
   presence (larger, a soft drop shadow, a second inner ring) to carry more masthead authority
   while remaining the same original mark. Pure CSS (clip-path + layered pseudo-elements), no
   image request. */
.brand__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  filter: drop-shadow(0 2px 4px rgba(13, 27, 34, 0.18));
}
.brand__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 30%;
  background: var(--surface-inverse);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.brand__mark-dot {
  position: relative;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--ink-on-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-on-brand) 30%, transparent);
}

.primary-nav { flex: 1 1 auto; }
.primary-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
}
.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 0.3rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}
.primary-nav a:hover { color: var(--brand); }
.primary-nav a:hover::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--brand-dark); font-weight: 700; }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand-dark); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  flex: none;
}
.lang-switch a, .lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--tap) - 12px);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-muted);
}
.lang-switch a[aria-current="true"], .lang-switch span[aria-current="true"] {
  background: var(--brand);
  color: var(--ink-on-brand);
}

.bandwidth-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
  flex: none;
  white-space: nowrap;
}
.bandwidth-toggle a { font-weight: 600; }
@media (max-width: 640px) { .bandwidth-toggle { flex-basis: 100%; order: 2; padding-top: var(--sp-1); } }

/* ---------------------------------------------------------------------------------------------
   5. HERO + PAST/PRESENT/FUTURE STRIP (DESIGN_SYSTEM.md §2.6)
   ------------------------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 55%),
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%),
    linear-gradient(160deg, var(--surface-inverse), var(--surface-inverse-alt));
  color: #fff;
  padding-block: var(--sp-8) var(--sp-7);
}
/* Visual Pass 2 — subtle longitude/topographic grid texture behind the hero content (an original
   CSS pattern, not a stock texture image), evoking a survey/chart backdrop appropriate to an
   evidence-and-geography platform. Kept faint (low alpha) so it never competes with text
   contrast. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, #fff 6%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, #fff 4%, transparent) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(ellipse at 30% 20%, black, transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 3fr 2fr; } }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fe0d8;
  margin-bottom: var(--sp-4);
}
.hero h1 { color: #fff; max-width: 22ch; margin-bottom: var(--sp-4); font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); }
.hero__lede { color: #d3e4e2; font-size: 1.18rem; max-width: 46ch; margin-bottom: var(--sp-6); }

/* Signature Cuba silhouette (Visual Pass 3) — an original, deliberately stylized shape (not a
   traced/precise cartographic map), used as the hero's signature visual and reused, larger, as
   the Provinces section's map anchor. Deliberately abstract per the owner's "do not giant-build
   the future interactive-map system yet." */
.island-figure { width: 100%; max-width: 30rem; margin-inline: auto; }
.island-figure--large { max-width: 44rem; }
.island-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.island-figure__path {
  fill: color-mix(in srgb, var(--accent) 55%, var(--brand) 45%);
  opacity: 0.92;
  stroke: color-mix(in srgb, var(--brand-dark) 40%, transparent);
  stroke-width: 0.6;
}
.island-figure__path--satellite { opacity: 0.8; }
/* Default (content-page) palette — dark grid/points against the light section background. */
.island-figure__grid { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 0.5; fill: none; }
.island-figure__point { fill: var(--brand-dark); }
.island-figure__point--dim { fill: color-mix(in srgb, var(--brand-dark) 40%, transparent); }
/* Hero override — light grid/points against the hero's dark background. */
.hero .island-figure__path { fill: color-mix(in srgb, #fff 26%, var(--accent)); opacity: 0.9; stroke: color-mix(in srgb, #fff 30%, transparent); }
.hero .island-figure__grid { stroke: color-mix(in srgb, #fff 30%, transparent); }
.hero .island-figure__point { fill: #fff; }
.hero .island-figure__point--dim { fill: color-mix(in srgb, #fff 45%, transparent); }

/* West/Centro/Oriente region bands drawn directly on the map (Visual Pass 3 Phase 7) — reuses the
   same three region color tokens as .geo-region so the map and the province lists beside it read
   as one system, not two unrelated components. */
.island-figure__region { opacity: 0.16; }
.island-figure__region--occidente { fill: var(--brand); }
.island-figure__region--centro { fill: var(--accent); }
.island-figure__region--oriente { fill: var(--status-disputed); }
.island-figure__region-line { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 0.6; stroke-dasharray: 2 2; }

/* "Live" signal marker — hero only, off by default in every other context. Respects
   prefers-reduced-motion by simply not animating (a static dot still reads as a status marker). */
.island-figure__pulse-dot { fill: #fff; }
.island-figure__pulse-ring { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .island-figure__pulse-ring { animation: island-pulse 2.6s ease-out infinite; transform-origin: 150px 48px; }
}
@keyframes island-pulse {
  0% { r: 4; opacity: 0.75; }
  100% { r: 13; opacity: 0; }
}

/* ---------------------------------------------------------------------------------------------
   5b. PAST / PRESENT / FUTURE — the organizing narrative spine (Visual Pass 3 Phase 4). Era color
   coding (--era-past/--era-present/--era-future) reused as small marker dots on the corresponding
   downstream section eyebrows (History/Present/Future) so the visitor sees the same three-color
   thread connect the hero promise to the actual content below it, without an explainer paragraph.
   ------------------------------------------------------------------------------------------- */
:root { --era-past: var(--accent); --era-present: var(--brand); --era-future: var(--status-disputed); }
@media (prefers-color-scheme: dark) { :root { --era-past: var(--accent); --era-present: var(--brand); --era-future: var(--status-disputed); } }

.ppf {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  counter-reset: ppf;
}
@media (min-width: 768px) {
  .ppf { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* Connecting rail behind the three stops — makes the trio read as one spine, not three
     unrelated cards. */
  .ppf::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 16.5%;
    right: 16.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--era-past), var(--era-present), var(--era-future));
    opacity: 0.6;
  }
}

.ppf__item {
  position: relative;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-top: 3px solid var(--era-color, #fff);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: color-mix(in srgb, #fff 6%, transparent);
}
.ppf__item:nth-child(1) { --era-color: var(--era-past); }
.ppf__item:nth-child(2) { --era-color: var(--era-present); }
.ppf__item:nth-child(3) { --era-color: var(--era-future); }
.ppf__item h3 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); letter-spacing: 0.04em; }
.ppf__item p { color: #c7dbd9; font-size: 0.92rem; margin-bottom: var(--sp-3); }
.ppf__item a { color: #9fe0d8; font-weight: 700; font-size: 0.88rem; }
.ppf__num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--era-color, color-mix(in srgb, #fff 16%, transparent));
  color: var(--surface-inverse);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 800;
  box-shadow: 0 0 0 4px var(--surface-inverse);
}

/* Small era-coded dot reused on the downstream section eyebrows this hero spine points to
   (History="past", Cuba Now="present", Reconstruction="future") — the visual thread that makes
   PAST/PRESENT/FUTURE read as the whole platform's organizing philosophy, not just a hero widget. */
.eyebrow--era { display: inline-flex; align-items: center; gap: 0.5em; }
.eyebrow--era::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--era-color); flex: none; }
.eyebrow--past { --era-color: var(--era-past); }
.eyebrow--present { --era-color: var(--era-present); }
.eyebrow--future { --era-color: var(--era-future); }

/* ---------------------------------------------------------------------------------------------
   6. CARDS
   ------------------------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  height: 100%;
}
.card__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.card h3 { margin-bottom: var(--sp-1); font-size: 1.05rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--brand); text-decoration: underline; }
.card p { color: var(--ink-muted); font-size: 0.94rem; margin-bottom: 0; }
.card__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: 0.8rem; color: var(--ink-muted);
}

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: var(--sp-5); }
.card__band { height: 0.35rem; width: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* Testimony-vs-fact separation (DESIGN_SYSTEM.md §2.8) — reserved treatment for when
   oral-history/testimony content exists; distinct dashed border + serif quote voice, never mixed
   into the .card grid used for verified story cards. */
.card--testimony {
  border: 1px dashed var(--border-strong);
  background: var(--surface-alt);
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------------------------------------------------------------------------------------------
   7. BADGES / STATUS (DESIGN_SYSTEM.md §2.2, §2.3a — icon + text, never color-alone)
   ------------------------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 999px;
  padding: 0.25em 0.7em;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: attr(data-icon); }

.badge--neutral, .badge:not([class*="badge--"]) { background: var(--status-neutral-tint); color: var(--status-neutral); }
.badge--affirmative { background: var(--status-affirmative-tint); color: var(--status-affirmative); }
.badge--provisional { background: var(--status-provisional-tint); color: var(--status-provisional); border-style: dashed; border-color: var(--status-provisional); }
.badge--disputed { background: var(--status-disputed-tint); color: var(--status-disputed); }
.badge--negative { background: var(--status-negative-tint); color: var(--status-negative); }
.badge--outdated { background: var(--status-outdated-tint); color: var(--status-outdated); }
.badge--brand { background: var(--brand-tint); color: var(--brand-dark); }

/* Staging-preview label — deliberately its own, unmistakable, non-editorial-status treatment.
   Never reuses the verification-badge palette above, so a preview label can never be confused
   with a real verification state at a glance (Phase 5 requirement). */
.preview-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: 1px dashed var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.7em;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.preview-panel {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: repeating-linear-gradient(135deg, var(--surface-alt), var(--surface-alt) 10px, var(--surface) 10px, var(--surface) 20px);
}
.preview-panel__note { font-size: 0.85rem; color: var(--ink-muted); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------------------------------
   8. ALERTS
   ------------------------------------------------------------------------------------------- */
.alert-strip { display: flex; flex-direction: column; gap: var(--sp-3); }
.alert-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  border: 1px solid var(--status-negative);
  background: var(--status-negative-tint);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.alert-item--elevated { border-color: var(--status-provisional); background: var(--status-provisional-tint); }
.alert-item--informational { border-color: var(--status-neutral); background: var(--status-neutral-tint); }
.alert-item h3 { margin-bottom: var(--sp-1); font-size: 1rem; }
.alert-item p { margin-bottom: 0; color: var(--ink-muted); font-size: 0.92rem; }
.alert-item a { font-weight: 700; }

.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: var(--ink-muted);
  background: var(--surface-alt);
}
.empty-state strong { color: var(--ink); }

/* ---------------------------------------------------------------------------------------------
   9. DASHBOARD TILES
   ------------------------------------------------------------------------------------------- */
.tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.tile__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: var(--sp-2); }
.tile__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: var(--sp-2); }
.tile__value small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--ink-muted); }
.tile__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------------------------------------------------------------------------------------------
   10. TIMELINE (History / Past)
   ------------------------------------------------------------------------------------------- */
.timeline-strip {
  border-left: 3px solid var(--border-strong);
  margin-left: var(--sp-2);
  padding-left: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.timeline-strip__item { position: relative; }
.timeline-strip__item::before {
  content: "";
  position: absolute; left: calc(-1 * var(--sp-5) - 6px); top: 0.35rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--brand);
}
.timeline-strip__date { font-size: 0.78rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------------------------------------
   11. BUTTONS / CTA / TAKE-ACTION LIST
   ------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { border-color: var(--border-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.hero .btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.hero .btn--ghost:hover { border-color: #fff; }

.action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.action-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4);
  background: var(--surface-raised);
}
.action-list .tag { font-size: 0.75rem; color: var(--ink-muted); font-style: italic; }

/* ---------------------------------------------------------------------------------------------
   12. COMING-SOON / FUTURE-VISION TEASERS (Phase 4.11) — clearly not a shipped feature.
   Visual Pass 3 Phase 11 — deliberately QUIET: a wrapped row of small chips, not a grid of
   equally-weighted boxes competing with the working platform above it. .teaser-grid/.teaser class
   names kept (existing test coverage + reuse), restyled from "box grid" to "chip row".
   ------------------------------------------------------------------------------------------- */
.teaser-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .teaser-grid { grid-template-columns: repeat(4, 1fr); } }
.teaser {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  color: var(--ink-muted);
  text-align: left;
  background: var(--surface-raised);
}
.teaser strong { color: var(--ink); font-size: 0.82rem; font-weight: 700; }
.teaser span { font-size: 0.72rem; font-style: italic; }

/* ---------------------------------------------------------------------------------------------
   13. EVIDENCE / TRUST STRIP — Visual Pass 3 Phase 6: "trust infrastructure," not a light FAQ
   grid. Six items (VERIFIED / ATTRIBUTED / CONFLICTING / UNKNOWN / FRESHNESS / CORRECTIONS),
   icon chips reuse the SAME glyphs as apps/public/templatetags/badges.py's real badge vocabulary
   so the homepage strip and the actual per-story badges the reader encounters everywhere else
   feel like one recognizable system, not two unrelated icon sets.
   ------------------------------------------------------------------------------------------- */
.trust-strip { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); }
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }
.evidence-item { display: flex; gap: var(--sp-3); }
.evidence-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--evidence-tint, var(--brand-tint)); color: var(--evidence-color, var(--brand-dark));
  font-weight: 800; font-family: var(--font-display); font-size: 1.05rem;
  flex: none;
}
.evidence-item__body h3 { font-size: 0.9rem; margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.03em; }
.evidence-item__body p { font-size: 0.86rem; color: var(--ink-muted); margin-bottom: 0; }
.evidence-item--verified { --evidence-color: var(--status-affirmative); --evidence-tint: var(--status-affirmative-tint); }
.evidence-item--attributed { --evidence-color: var(--brand-dark); --evidence-tint: var(--brand-tint); }
.evidence-item--conflicting { --evidence-color: var(--status-disputed); --evidence-tint: var(--status-disputed-tint); }
.evidence-item--unknown { --evidence-color: var(--status-neutral); --evidence-tint: var(--status-neutral-tint); }
.evidence-item--freshness { --evidence-color: var(--status-outdated); --evidence-tint: var(--status-outdated-tint); }
.evidence-item--corrections { --evidence-color: var(--status-provisional); --evidence-tint: var(--status-provisional-tint); }

/* ---------------------------------------------------------------------------------------------
   14. TABLES
   ------------------------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-alt); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------------------------------
   15. FORMS
   ------------------------------------------------------------------------------------------- */
label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: var(--sp-1); }
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
textarea { min-height: 8rem; }
.field { margin-bottom: var(--sp-4); }
.field__hint { font-size: 0.82rem; color: var(--ink-muted); margin-top: var(--sp-1); }
.field__error { font-size: 0.85rem; color: var(--status-negative); margin-top: var(--sp-1); font-weight: 600; }

/* ---------------------------------------------------------------------------------------------
   16. PAGE HEADER (secondary pages)
   ------------------------------------------------------------------------------------------- */
.page-header { padding-block: var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.page-header h1 { margin-bottom: var(--sp-2); }
.page-header p { color: var(--ink-muted); max-width: 60ch; }

/* ---------------------------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------------------------- */
.site-footer { background: var(--surface-inverse); color: #cfe0e2; padding-block: var(--sp-7); }
.site-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-3); font-family: var(--font-body); }
.site-footer a { color: #cfe0e2; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: 0.88rem; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--sp-6); padding-top: var(--sp-5); font-size: 0.82rem; color: #9fb4b3; }

/* ---------------------------------------------------------------------------------------------
   18. UTILITIES
   ------------------------------------------------------------------------------------------- */
.flow-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.text-muted { color: var(--ink-muted); }
.mt-0 { margin-top: 0; }
/* Visual Pass 3 — deliberately less vertical weight than .section, for content that should stay
   quiet/secondary (e.g. the "more is coming" roadmap) rather than compete with major chapters. */
.section--compact { padding-block: var(--sp-6); }

/* ---------------------------------------------------------------------------------------------
   19. VISUAL PASS 3 — CURRENT CONDITIONS DASHBOARD (flagship module + instrumentation strip)
   Replaces Pass 2's flat 16-card grid: one large flagship module for the one researched category
   (Electricity), a computed (never invented) coverage indicator, and the remaining categories as
   a dense instrument readout — reads as "national dashboard," not "grid of small cards."
   .condition-grid class kept (existing test coverage) — now applied to the instrumentation strip.
   ------------------------------------------------------------------------------------------- */
.dashboard-layout { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .dashboard-layout { grid-template-columns: 5fr 7fr; align-items: start; } }

.flagship {
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: linear-gradient(165deg, var(--brand-tint), var(--surface-raised) 55%);
  box-shadow: var(--shadow-card);
}
.flagship__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.flagship__icon {
  font-size: 1.8rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-sm); flex: none;
  background: var(--surface-raised); border: 1px solid var(--brand);
}
.flagship__head h3 { margin: 0; font-size: 1.3rem; }
.flagship__tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-dark); }
.flagship__meta { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.flagship__meta-item span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 0.15rem; }
.flagship__meta-item strong { font-size: 0.9rem; font-weight: 700; }
.flagship__rows { display: grid; gap: var(--sp-2); }
.flagship__row {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.flagship__row-label { font-size: 0.85rem; font-weight: 700; }
.flagship__row-note { font-size: 0.8rem; color: var(--ink-muted); }

/* National-level coverage strip — computed from the platform's own category count (never a claim
   about Cuba), an honest "how much of the taxonomy has research behind it yet" readout. */
.dashboard-progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: 0.82rem; color: var(--ink-muted); }
.dashboard-progress__bar { flex: 1 1 auto; height: 0.5rem; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.dashboard-progress__fill { height: 100%; width: var(--pct, 0%); background: linear-gradient(90deg, var(--brand), var(--accent)); }

.instrumentation__head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: var(--sp-3); }
.condition-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .condition-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .condition-grid { grid-template-columns: repeat(4, 1fr); } }
.instrument {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-raised);
}
.instrument__icon { font-size: 1.05rem; line-height: 1; flex: none; }
.instrument__label { font-size: 0.82rem; font-weight: 600; flex: 1 1 auto; }
.instrument .badge { font-size: 0.68rem; padding: 0.2em 0.55em; }
.badge--pending { background: var(--surface-alt); color: var(--ink-muted); border-style: dashed; border-color: var(--border-strong); }

/* ---------------------------------------------------------------------------------------------
   20. VISUAL PASS 3 — GEOGRAPHIC / PROVINCE MAP (map as anchor, lists as companion)
   The map is now the dominant element (island-figure--large, applied by the template); the
   region lists sit beside/below it as a supporting companion column rather than the other way
   around, per the owner's "province lists should support the map, not dominate it."
   ------------------------------------------------------------------------------------------- */
.geo-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .geo-layout { grid-template-columns: 3fr 2fr; } }
.geo-layout .island-figure { max-width: none; }
.geo-regions { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .geo-layout ~ .geo-regions, .geo-regions--standalone { grid-template-columns: repeat(3, 1fr); } }
.geo-region {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-raised);
}
.geo-region h3 { font-size: 0.95rem; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.geo-region h3::before {
  content: "";
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--region-color, var(--brand));
  flex: none;
}
.geo-region--occidente { --region-color: var(--brand); }
.geo-region--centro { --region-color: var(--accent); }
.geo-region--oriente { --region-color: var(--status-disputed); }
.geo-region ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.geo-region a {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--surface-alt);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}
.geo-region a:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* ---------------------------------------------------------------------------------------------
   21. VISUAL PASS 3 — ARCHIVE RAIL (History / Past): an immersive timeline rail rather than a
   card grid — date typography, era plates, archival document-frame styling, and a designed
   "media not yet available" placeholder (never a fabricated photo).
   ------------------------------------------------------------------------------------------- */
.archive-rail { position: relative; display: grid; gap: var(--sp-5); padding-left: var(--sp-6); }
.archive-rail::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-2) + 1px);
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(var(--accent), var(--brand));
  opacity: 0.5;
}
.archive-entry { position: relative; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .archive-entry { grid-template-columns: 9rem 1fr; align-items: start; } }
.archive-entry::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) + var(--sp-2) - 5px);
  top: 0.5rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--accent);
}
.archive-entry__plate { display: flex; flex-direction: row; gap: var(--sp-2); align-items: baseline; }
@media (min-width: 720px) { .archive-entry__plate { flex-direction: column; gap: 0.2rem; align-items: flex-start; } }
.archive-entry__date { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1.15rem; }
.archive-entry__era {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.15em 0.6em;
}
.archive-entry__frame {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
/* Designed "no media yet" placeholder — a folded-corner archival frame, deliberately not a
   fabricated photo or document; a clear, honest stand-in with texture suggesting "archive," not
   fake aging effects. */
.archive-entry__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--surface-alt), var(--surface-alt) 6px, var(--surface) 6px, var(--surface) 12px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.archive-entry__media::after {
  content: "";
  position: absolute; top: 0; right: 0;
  border-style: solid;
  border-width: 0 0.7rem 0.7rem 0;
  border-color: transparent var(--surface) transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(13,27,34,0.15));
}
.archive-entry__media span { font-size: 0.58rem; color: var(--ink-muted); text-align: center; padding: 0.3rem; line-height: 1.25; }
.archive-entry__title { font-size: 1rem; margin: 0; color: var(--ink); }

/* ---------------------------------------------------------------------------------------------
   22. VISUAL PASS 3 — RECONSTRUCTION BLUEPRINT (systems clusters, not a flat 16-card grid)
   .sector-grid/.sector-card class names kept (existing test coverage + reuse) — now one small
   grid per cluster over a faint blueprint-grid backdrop, evoking a planning-studio systems
   diagram rather than a product catalog.
   ------------------------------------------------------------------------------------------- */
.blueprint {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-alt);
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 32px);
}
.blueprint__cluster-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.blueprint__cluster-index {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: var(--surface-raised); background: var(--surface-inverse);
  border-radius: var(--radius-sm); padding: 0.15em 0.5em; flex: none;
}
.blueprint__cluster-head h3 { margin: 0; font-size: 1.05rem; }
.sector-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
.sector-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
  padding: var(--sp-4);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 40%),
    var(--surface-raised);
}
.sector-card__icon { font-size: 1.4rem; margin-bottom: var(--sp-2); display: block; }
.sector-card h4 { font-size: 0.94rem; margin-bottom: var(--sp-1); font-family: var(--font-display); }
.sector-card p { font-size: 0.86rem; color: var(--ink-muted); margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------------------------------------
   22b. VISUAL PASS 3 — EDITORIAL EXPLAINERS (lead + secondary list, not an equal card grid)
   ------------------------------------------------------------------------------------------- */
.editorial { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .editorial { grid-template-columns: 3fr 2fr; } }
.editorial__lead { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-5); }
@media (min-width: 900px) { .editorial__lead { border-bottom: none; border-right: 1px solid var(--border); padding-right: var(--sp-6); padding-bottom: 0; } }
.editorial__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: var(--sp-2);
}
.editorial__lead h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); margin-bottom: var(--sp-2); }
.editorial__lead p { color: var(--ink-muted); font-size: 1rem; }
.editorial__list { display: grid; gap: var(--sp-4); }
.editorial__item { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.editorial__item:last-child { border-bottom: none; padding-bottom: 0; }
.editorial__item h4 { font-size: 0.98rem; margin-bottom: 0.2rem; }
.editorial__item p { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------------
   22c. VISUAL PASS 3 — ACTION PANELS (Take Action / footer close) — four distinct lanes, not one
   stacked full-width form.
   ------------------------------------------------------------------------------------------- */
.action-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .action-grid { grid-template-columns: repeat(4, 1fr); } }
.action-panel {
  display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: color-mix(in srgb, #fff 6%, transparent);
}
.action-panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: color-mix(in srgb, #fff 14%, transparent); font-size: 1.1rem; flex: none;
}
.action-panel h3 { color: #fff; font-size: 1rem; margin-bottom: 0; }
.action-panel p { color: #c7dbd9; font-size: 0.86rem; margin-bottom: 0; flex: 1 1 auto; }
.action-panel .btn { align-self: flex-start; }
.action-panel__note { font-size: 0.85rem; color: #c7dbd9; margin: 0; }

/* ---------------------------------------------------------------------------------------------
   23. VISUAL PASS 2 — MOBILE NAVIGATION
   Desktop keeps the existing horizontal .primary-nav; below 860px it collapses behind a toggle
   button so mobile doesn't just show the same list stacked/wrapped awkwardly (owner's explicit
   "not merely stacked" requirement). Pure CSS (:checked-driven), no JS dependency, so it works
   identically with JS disabled.
   ------------------------------------------------------------------------------------------- */
/* Hidden entirely above the 860px breakpoint (no toggle exists — nav is already inline and fully
   keyboard-reachable). Below it, visually hidden but still a real focusable control (no
   aria-hidden — WCAG 4.1.2/axe rule aria-hidden-focus forbids that on anything focusable), so
   keyboard users can Tab to it and press Space to open the menu; :focus-visible forwards a visible
   outline onto the label below since the checkbox itself has no rendered box to outline. */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
  }
  .nav-toggle:focus-visible ~ .nav-toggle-label {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 2px;
  }
}
.nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex: none;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav-toggle-label span::before { content: ""; position: absolute; top: -6px; width: 1.1rem; background: var(--ink); }
.nav-toggle-label span::after { content: ""; position: absolute; top: 6px; width: 1.1rem; background: var(--ink); }

@media (max-width: 860px) {
  .nav-toggle-label { display: inline-flex; }
  .primary-nav {
    flex-basis: 100%;
    order: 3;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .primary-nav ul { flex-direction: column; padding-block: var(--sp-2); }
  .primary-nav a { width: 100%; }
  .nav-toggle:checked ~ .primary-nav { max-height: 32rem; }
}