/* =============================================================
   THE GLOBAL DECIPHER — Editorial Light (Reuters / Economist)
   ============================================================= */

:root {
  color-scheme: light;
  --paper: #fafaf7;
  --paper-2: #f3efe6;
  --paper-3: #ebe6d8;
  --ink: #0d1b2a;
  --ink-2: #1a2a3a;
  --ink-3: #2a3a4a;

  --text: #1a1a1a;
  --text-soft: #3a3a3a;
  --muted: #6b6b66;
  --dim: #9a9a93;

  --line: #d8d3c5;
  --line-2: #c0baa9;
  --line-3: #948e7e;

  --red: #b91c2c;
  --red-dark: #8b1420;
  --red-soft: rgba(185, 28, 44, 0.08);
  --gold: #a17328;
  --green: #14532d;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --serif-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 2px;
  --radius-lg: 6px;
  --shadow-1: 0 1px 3px rgba(13, 27, 42, 0.05);
  --shadow-2: 0 12px 40px rgba(13, 27, 42, 0.12);
  --shadow-3: 0 24px 60px rgba(13, 27, 42, 0.18);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--ease);
}
a:hover { color: var(--red); }
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(185, 28, 44, 0.38);
  outline-offset: 3px;
}

.container {
  position: relative;
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
}

::selection { background: var(--red); color: #fff; }

/* ============ skip link ============ */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff;
  padding: 10px 14px; border-radius: var(--radius);
  font-weight: 700; font-size: 0.85rem;
}
.skip-link:focus { top: 16px; }

/* ============ DATELINE STRIP ============ */
.dateline-strip {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dateline-row {
  min-height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.dateline-row .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  margin-right: 6px;
  display: inline-block;
  animation: pulse-dot 1.8s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(185, 28, 44, 0.55);
}
.dateline-row span { display: inline-flex; align-items: center; gap: 4px; }
.dateline-row .sep { color: rgba(250,250,247,0.3); margin: 0 6px; }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(185, 28, 44, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(185,28,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(185,28,44,0); }
}

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 250, 247, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition: box-shadow 220ms var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }

.header-grid {
  min-height: 84px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.brand, .footer-brand {
  display: inline-flex; align-items: center;
  color: inherit; text-decoration: none;
}
.brand:hover, .footer-brand:hover { color: inherit; }
.brand-picture { display: inline-flex; align-items: center; }
.brand-logo-dark { display: none; }

.brand-logo {
  height: 140px;
  width: auto;
  display: block;
  transition: height 260ms var(--ease), transform 320ms var(--ease);
}
.brand-picture .brand-logo-dark { display: none; }
.brand:hover .brand-logo { transform: scale(1.03); }
.site-header.is-scrolled .brand-logo { height: 84px; }
.site-header-centered { transition: padding 260ms var(--ease); }
.site-header.is-scrolled.site-header-centered { padding: 4px 0 0; }
.header-date { transition: max-height 260ms var(--ease), opacity 200ms var(--ease), padding 260ms var(--ease); overflow: hidden; max-height: 40px; }
.site-header.is-scrolled .header-date { max-height: 0; opacity: 0; padding: 0; }
.site-header.is-scrolled .brand-center { margin: 0; }
.site-header.is-scrolled .site-nav-centered { padding: 4px 0; }

.footer-brand .brand-logo { height: 128px; }

/* Centered header layout */
.site-header-centered { padding: 12px 0 8px; }
.header-stack {
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 6px;
  position: relative;
}
.header-utility {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand-center { margin: 4px 0 0; }
.header-date {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #6a6a6a);
  padding: 4px 0 8px;
}
.site-nav-centered {
  justify-content: center !important;
  border-top: 1px solid var(--rule, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
  width: 100%;
  padding: 6px 0;
  gap: 8px;
}

.site-nav {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 4px;
}
.site-nav a {
  position: relative;
  min-height: 36px;
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.site-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: inline-flex; align-items: center; gap: 12px; }
.search-btn,
.theme-toggle {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.search-btn:hover { color: var(--red); border-color: var(--red); }
.theme-toggle:hover { color: var(--red); border-color: var(--red); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .theme-sun { display: none; }
.theme-toggle[data-current-theme="dark"] .theme-sun { display: inline-grid; }
.theme-toggle[data-current-theme="dark"] .theme-moon { display: none; }

.pitch-cta {
  display: inline-flex; align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 180ms var(--ease);
}
.pitch-cta:hover { background: var(--red-dark); color: #fff; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: currentColor; margin: 0 auto;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.site-search-panel {
  border-top: 1px solid var(--line);
  background: rgba(250,250,247,0.98);
  box-shadow: var(--shadow-2);
}
.site-search-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 28px;
}
.site-search-panel label span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.site-search-panel input {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.04rem;
}
.site-search-panel input:focus {
  outline: none;
  border-color: var(--red);
}
.site-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.site-search-results a {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.site-search-results a span,
.site-search-results a small,
.site-search-results p {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-search-results a strong {
  display: block;
  margin: 5px 0;
  font-family: var(--serif-display);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--ink);
}
.site-search-results a:hover strong { color: var(--red); }
.site-search-results a small {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}

/* ============ TICKER ============ */
.ticker-bar {
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ticker-bar::before, .ticker-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2;
  pointer-events: none;
}
.ticker-bar::before { left: 0; background: linear-gradient(90deg, var(--paper-2), transparent); }
.ticker-bar::after { right: 0; background: linear-gradient(270deg, var(--paper-2), transparent); }

.ticker-row { display: flex; align-items: center; gap: 18px; min-height: 40px; }
.ticker-label {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
  padding-right: 14px;
  border-right: 1px solid var(--line-2);
}
.ticker-label .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  animation: pulse-dot 1.6s ease-out infinite;
}
.ticker-track { flex: 1; overflow: hidden; position: relative; }
.ticker-strip {
  display: inline-flex; gap: 36px; align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 50s linear infinite;
  font-family: var(--sans);
  font-size: 0.82rem; color: var(--text);
  letter-spacing: 0;
}
.ticker-strip:hover { animation-play-state: paused; }
.ticker-strip a,
.ticker-copy-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
}
.ticker-copy { display: contents; }
.ticker-strip a strong,
.ticker-copy-item strong {
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.ticker-strip a:hover strong { color: var(--red); border-color: var(--red); }
.ticker-strip .region {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
  gap: 56px;
  align-items: start;
}
/* When the lead story has a picture, the hero flips to text-left / image-right
   so the headline stays where it always was and the picture takes the empty
   space that used to sit beside it. */
.hero-has-media .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.hero-media {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  background: var(--line-1, rgba(0, 0, 0, 0.04));
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.hero-media:hover img { transform: scale(1.03); }
@media (max-width: 860px) {
  .hero-has-media .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { aspect-ratio: 3 / 2; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
}
.hero-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--red);
}

.hero h1 {
  margin: 0 0 22px;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.hero h1 a {
  background: linear-gradient(transparent 92%, var(--red) 92%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 600ms var(--ease);
}
.hero h1 a:hover {
  background-size: 100% 100%;
  color: var(--ink);
}
.hero h1 em { font-style: italic; color: var(--red); font-weight: 500; }

.hero-lead {
  max-width: 660px;
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin: 0 0 28px;
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.hero-meta .byline {
  color: var(--ink); font-weight: 700; letter-spacing: 0.08em;
}
.hero-meta span + span::before {
  content: "·"; margin-right: 14px; color: var(--line-2);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.button .arrow { transition: transform 200ms var(--ease); }
.button:hover .arrow { transform: translateX(4px); }

.button.primary {
  background: var(--ink); color: var(--paper);
}
.button.primary:hover { background: var(--red); color: #fff; }

.button.secondary {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
}
.button.secondary:hover { background: var(--ink); color: var(--paper); }

/* hero rail (lead's continued briefings) */
.hero-rail {
  position: relative;
  padding: 0 0 0 32px;
  border-left: 1px solid var(--line);
}
.hero-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.hero-rail-head .title {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--ink); text-transform: uppercase; font-weight: 700;
}
.hero-rail-head .status {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.12em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-rail-head .status .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: pulse-dot 1.6s ease-out infinite;
}

.rail-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: inherit;
}
.rail-item:first-of-type { border-top: 0; padding-top: 0; }
.rail-item .num {
  font-family: var(--mono);
  font-size: 0.7rem; color: var(--muted);
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.rail-item .meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.16em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
  margin-bottom: 4px;
}
.rail-item strong {
  display: block;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.25;
  color: var(--ink);
  transition: color 180ms var(--ease);
}
.rail-item:hover strong { color: var(--red); }

.rail-cta {
  display: block;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.84rem; font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  position: relative;
  transition: background 200ms var(--ease);
}
.rail-cta::after {
  content: "→"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  transition: transform 200ms var(--ease);
}
.rail-cta:hover { background: var(--red); color: #fff; }
.rail-cta:hover::after { transform: translate(4px, -50%); }

/* ============ HOMEPAGE SNAPSHOT ============ */
.snapshot-strip {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid rgba(255,255,255,0.12);
}
.snapshot-card {
  min-height: 132px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.snapshot-card span,
.snapshot-card small {
  display: block;
  font-family: var(--mono);
  text-transform: uppercase;
  color: rgba(250,250,247,0.64);
}
.snapshot-card span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.snapshot-card strong {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  line-height: 0.95;
  color: #fff;
}
.snapshot-card small {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.gateway-card {
  display: block;
  min-height: 260px;
  padding: 30px;
  border-top: 4px solid var(--ink);
  background: var(--paper);
  color: inherit;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.gateway-card:hover {
  border-top-color: var(--red);
  color: inherit;
  transform: translateY(-3px);
}
.gateway-kicker {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.gateway-card strong {
  display: block;
  max-width: 660px;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.gateway-card p {
  max-width: 560px;
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ============ PILLAR / SOCIAL BAR ============ */
.pillar-strip {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  color: inherit;
  border-right: 1px solid var(--line);
  transition: background 200ms var(--ease);
}
.pillar:last-child { border-right: 0; }
.pillar:hover { background: var(--paper-2); }
.pillar .icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--red);
}
.pillar .icon svg { width: 26px; height: 26px; }
.pillar .num {
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1;
}
.pillar .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase; font-weight: 600;
  margin-top: 4px;
}
.pillar .go {
  font-family: var(--mono);
  font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.08em;
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.pillar:hover .go { color: var(--red); transform: translateX(3px); }

/* ============ SECTION ELEMENTS ============ */
.band {
  padding: 88px 0;
  position: relative;
}
.band.muted { background: var(--paper-2); }
.band.muted + .band.muted { border-top: 1px solid var(--line); }

.eyebrow, .band-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.2em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
}
.eyebrow::before, .band-eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--red);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.split-heading h2 {
  margin: 8px 0 0;
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 820px;
}
.split-heading h2 em { font-style: italic; color: var(--red); font-weight: 500; }
.split-heading > a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--ink);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.split-heading > a:hover { color: var(--red); border-color: var(--red); }
.split-heading > a::after { content: "→"; transition: transform 200ms var(--ease); }
.split-heading > a:hover::after { transform: translateX(4px); }

/* ============ CARDS ============ */
.card-grid, .listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px;
}
.feature-grid .content-card:nth-child(1),
.feature-grid .content-card:nth-child(2) { grid-column: span 3; min-height: 320px; }
.feature-grid .content-card:nth-child(3),
.feature-grid .content-card:nth-child(4),
.feature-grid .content-card:nth-child(5) { grid-column: span 2; }

.content-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
  text-decoration: none; color: inherit;
  transition: border-color 280ms var(--ease);
}
.content-card:hover { border-top-color: var(--red); }

/* ============ CARD MEDIA ============ */
/* The picture sits above the kicker so the eye lands on it first, and holds a
   fixed 3:2 frame so a mixed bag of Word-import uploads still lines up. */
.card-media {
  margin: 0 0 18px;
  overflow: hidden;
  background: var(--line-1, rgba(0, 0, 0, 0.04));
  border-radius: 2px;
  aspect-ratio: 3 / 2;
  /* Backstop for any layout that hands a card more room than expected — a card
     picture should never grow taller than the text beside it. */
  max-height: 440px;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.content-card:hover .card-media img,
.lead-story:hover .card-media img { transform: scale(1.03); }
.content-card.has-media { padding-top: 20px; }

/* Placeholder for image-less cards — an editorial-style cover with a radar
   motif, keeping mixed-media rows visually consistent without going bland.
   The cover stays dark in both themes so it reads like a thumbnail (an image
   wouldn't flip in dark mode either). */
.card-media-placeholder {
  --placeholder-accent: #b91c2c;
  --placeholder-base: #0d1b2a;
  position: relative;
  display: block;
  color: var(--placeholder-accent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--placeholder-accent) 30%, var(--placeholder-base)) 0%,
      color-mix(in srgb, var(--placeholder-base) 92%, var(--placeholder-accent)) 100%);
  overflow: hidden;
  isolation: isolate;
}
.card-media-placeholder .placeholder-motif {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: color-mix(in srgb, #fff 88%, var(--placeholder-accent));
  z-index: 0;
}
.card-media-placeholder::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.25) 100%);
  z-index: 1;
  pointer-events: none;
}
.card-media-placeholder .placeholder-content {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
.card-media-placeholder .placeholder-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  color: #fff;
  background: color-mix(in srgb, var(--placeholder-accent) 78%, transparent);
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.card-media-placeholder .placeholder-region {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}
.card-media-placeholder .placeholder-mark {
  position: absolute;
  bottom: 14px; right: 18px;
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}
.content-card.accent-opinion .card-media-placeholder,
.content-card.accent-policy .card-media-placeholder,
.content-card.accent-research .card-media-placeholder {
  --placeholder-accent: #c8901f;
}
.content-card.accent-reports .card-media-placeholder,
.content-card.accent-monthly .card-media-placeholder,
.content-card.accent-counterterrorism .card-media-placeholder {
  --placeholder-accent: #1f7a3f;
}
.content-card.accent-monitoring .card-media-placeholder,
.content-card.accent-digital-propaganda .card-media-placeholder,
.content-card.accent-narratives .card-media-placeholder {
  --placeholder-accent: #3a4b5c;
}

/* ============ LEAD STORY ============ */
.lead-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  border-top: 2px solid var(--red);
  padding-top: 28px;
}
.lead-story:not(.has-media) { grid-template-columns: minmax(0, 1fr); }
.lead-story .card-media-wide { margin: 0; aspect-ratio: 16 / 10; }
.lead-story-body { min-width: 0; display: flex; flex-direction: column; }
.lead-story h2 {
  margin: 0 0 14px;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  color: var(--ink);
  /* The column already sets the measure. Capping the headline further only
     forces avoidable orphan lines. */
  text-wrap: balance;
}
.lead-story h2 a { transition: color 180ms var(--ease); }
.lead-story h2 a:hover { color: var(--red); }
.lead-story-summary {
  margin: 0;
  /* The one measure that matters: prose stops at a readable line length even
     though the story block spans the full container. */
  max-width: 58ch;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
}
.lead-story .card-meta { margin-top: 22px; }
@media (max-width: 860px) {
  .lead-story { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lead-story .card-media-wide { aspect-ratio: 3 / 2; }
}

.card-kicker {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); font-weight: 700;
}

.content-card h2 {
  margin: 0 0 12px;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
}
.content-card h2 a {
  transition: color 180ms var(--ease);
}
.content-card h2 a:hover { color: var(--red); }
.content-card p {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}

.card-meta {
  margin-top: auto;
  padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-family: var(--mono);
  font-size: 0.74rem; color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-meta span + span::before { content: "·"; margin-right: 14px; color: var(--line-2); }

.tag-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px;
}
.tag-row span {
  display: inline-flex; align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.badge, .badge-free, .badge-premium, .badge-research { display: none !important; }

/* ============ HUB PAGES (organisations / regions) ============ */
.hub-snapshot { padding-top: 0; padding-bottom: 0; }
.hub-snapshot .snapshot-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hub-region-band { padding: 24px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.hub-region-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 18px;
}
.hub-region-row .band-eyebrow { margin: 0; }
.hub-region-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hub-region-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.hub-region-chip:hover {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-soft);
}

/* Tag chips in card-grid / sidebar — make linked tags look interactive */
.tag-row a, .side-tags a {
  display: inline-flex; align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.tag-row a:hover, .side-tags a:hover { color: var(--red); border-color: var(--red); }

/* ============ STATUS CHIPS (profile cards) ============ */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  color: var(--muted);
  background: var(--paper-2);
}
.status-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.status-chip.status-active,
.status-chip.status-wanted { color: var(--red); background: var(--red-soft); }
.status-chip.status-in-custody { color: var(--gold); background: rgba(161, 115, 40, 0.12); }
.status-chip.status-deceased { color: var(--muted); background: var(--paper-3); }

.content-card.status-active,
.content-card.status-wanted { border-top: 2px solid var(--red); }
.content-card.status-in-custody { border-top: 2px solid var(--gold); }
.content-card.status-deceased { border-top: 2px solid var(--line-3); }

/* ============ HERO MAP BACKDROP ============ */
.hero { overflow: hidden; }
.hero-map {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(ellipse at 56% 50%, rgba(0,0,0,0.55) 0, rgba(0,0,0,0.4) 28%, transparent 62%);
          mask-image: radial-gradient(ellipse at 56% 50%, rgba(0,0,0,0.55) 0, rgba(0,0,0,0.4) 28%, transparent 62%);
}
.hero-map svg { width: 100%; height: 100%; display: block; }
.hero .hero-grid { position: relative; z-index: 1; }
.hero-rail { position: relative; background: var(--paper); }
.hero-rail::before {
  content: ""; position: absolute; inset: -18px -24px; z-index: -1;
  background: var(--paper);
  border-radius: 4px;
  opacity: 0.92;
}
.map-dot { fill: var(--ink); opacity: 0.18; }
.map-pulse .dot { fill: var(--red); }
.map-pulse .ring {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-ring 2.8s ease-out infinite;
}
.map-pulse.amber .dot { fill: var(--gold); }
.map-pulse.amber .ring { stroke: var(--gold); }
.map-pulse.cyan .dot { fill: var(--green); }
.map-pulse.cyan .ring { stroke: var(--green); }
@keyframes map-ring {
  0% { transform: scale(0.5); opacity: 0.85; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (max-width: 1080px) {
  .hero-map { opacity: 0.3; }
}

/* ============ INTELLIGENCE TOOLS BAND ============ */
.tools-band { background: var(--paper); }
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.tool-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  color: inherit;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.tool-card:hover {
  border-top-color: var(--red);
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
.tool-visual {
  display: grid;
  place-items: center;
  min-width: 0;
}
.tool-visual svg { width: 100%; height: auto; display: block; }
.tool-map-preview {
  position: relative;
  display: block;
  width: min(190px, 100%);
  aspect-ratio: 1 / 1;
  padding: 5px;
  background: linear-gradient(135deg, rgba(161, 115, 40, 0.08), transparent 58%);
}
.tool-map-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.78) contrast(1.05);
}
.tool-map-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tool-map-marker i {
  width: 7px;
  height: 7px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 0 0 5px rgba(185, 28, 44, 0.13);
}
.tool-map-marker b { font: inherit; }
.tool-map-marker.marker-kp { top: 28%; left: 61%; }
.tool-map-marker.marker-balochistan { top: 61%; left: 20%; }
.tool-map-marker.marker-sindh { top: 78%; left: 50%; }
.tool-map-window {
  position: absolute;
  right: 0;
  bottom: 3px;
  display: grid;
  min-width: 61px;
  padding: 7px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.tool-card .tool-map-window strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}
.tool-card .tool-map-window small {
  margin-top: 3px;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tool-network { overflow: visible; }
.net-links path {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.net-link-weak {
  stroke-dasharray: 3 6;
  opacity: 0.5;
}
.net-node {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.6;
  transition: fill 320ms var(--ease), stroke 320ms var(--ease), r 320ms var(--ease);
}
.net-node-core {
  fill: var(--red);
  stroke: var(--red-dark);
}
.net-node-major {
  fill: var(--ink-3);
  stroke: var(--ink);
}
.net-node-minor {
  fill: var(--gold);
  stroke: #79551d;
}
.net-labels text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-anchor: middle;
}
.net-labels text:first-child {
  fill: #fff;
  font-size: 8.5px;
}
/* The two hub nodes are white-on-dark, so their labels invert too. */
.net-labels text:nth-child(2),
.net-labels text:nth-child(3) { fill: #fff; }
.tool-card:hover .net-node-core { fill: var(--red-dark); }
.tool-card:hover .net-links path { stroke: var(--ink-3); }
.tool-body { display: block; min-width: 0; }
.tool-card strong {
  display: block;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.08;
  color: var(--ink);
}
.tool-card p {
  margin: 12px 0 14px;
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.tool-cta {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
@media (max-width: 1080px) {
  .tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tool-card { grid-template-columns: 1fr; gap: 18px; }
  .tool-visual { width: 100%; max-width: 230px; justify-self: center; }
}

/* ============ THREAT BOARD ============ */
.threat-board {
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.threat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.region-card {
  position: relative;
  display: block;
  padding: 28px 28px 28px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 260ms var(--ease);
}
.region-card:nth-child(4n) { border-right: 0; }
.region-card:hover { background: var(--paper-2); padding-left: 12px; }
.region-card .region-coord {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 8px;
}
.region-card .region-name {
  display: block;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 8px;
}
.region-card .region-note {
  display: block;
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
.threat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.threat-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.threat-pill.elevated { color: var(--gold); }
.threat-pill.high { color: var(--red); }
.threat-pill.watch { color: var(--ink); }

/* ============ MONITORING DESK ============ */
.desk-section {
  padding: 96px 0;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.desk-section .band-eyebrow,
.desk-section .eyebrow { color: #fff; }
.desk-section .band-eyebrow::before,
.desk-section .eyebrow::before { background: var(--red); }
.desk-grid-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr);
  gap: 56px; align-items: start;
}
.desk-grid-pro h2 {
  margin: 0 0 22px;
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1; letter-spacing: 0;
  color: #fff;
}
.desk-grid-pro h2 em { font-style: italic; color: var(--red); font-weight: 500; }
.desk-grid-pro p {
  max-width: 540px;
  color: #d5d2c8;
  font-family: var(--serif);
  font-size: 1.06rem; line-height: 1.6;
  margin: 0 0 26px;
}
.desk-section .button.primary {
  background: var(--paper); color: var(--ink);
}
.desk-section .button.primary:hover { background: var(--red); color: #fff; }

.desk-list {
  border-top: 1px solid rgba(255,255,255,0.18);
}
.desk-list a {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px; align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--paper);
  transition: padding 220ms var(--ease);
}
.desk-list a:hover { padding-left: 8px; color: var(--paper); }
.desk-list a .num {
  font-family: var(--mono);
  font-size: 0.78rem; color: rgba(250,250,247,0.5);
  letter-spacing: 0.08em;
}
.desk-list a .body span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.16em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
  margin-bottom: 6px;
}
.desk-list a .body strong {
  display: block;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.14rem; line-height: 1.3;
  color: var(--paper);
}
.desk-list a .arrow {
  font-family: var(--mono);
  font-size: 0.9rem; color: rgba(250,250,247,0.4);
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.desk-list a:hover .arrow { color: var(--red); transform: translateX(4px); }

/* ============ METHODOLOGY ============ */
.method-band {
  padding: 96px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px; align-items: start;
}
.method-grid h2 {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: 0;
  color: var(--ink);
}
.method-grid h2 em { font-style: italic; color: var(--red); font-weight: 500; }
.method-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  counter-reset: m;
  border-top: 1px solid var(--line);
}
.method-steps span {
  counter-increment: m;
  position: relative;
  display: block;
  padding: 28px 22px 28px 70px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  transition: background 220ms var(--ease);
}
.method-steps span:nth-child(odd) { border-right: 1px solid var(--line); }
.method-steps span::before {
  content: "0" counter(m);
  position: absolute; left: 22px; top: 28px;
  font-family: var(--mono);
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--red);
}
.method-steps span:hover { background: var(--paper-2); }

/* ============ PITCH BAND ============ */
.pitch-band {
  padding: 96px 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.pitch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 56px; align-items: center;
}
.pitch-grid h2 {
  margin: 0 0 22px;
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.pitch-grid h2 em { font-style: italic; color: var(--red); font-weight: 500; }
.pitch-grid p {
  margin: 0 0 26px;
  max-width: 560px;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.pitch-card {
  position: relative;
  padding: 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.pitch-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--red);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pitch-card .label {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
  margin: 0 0 12px;
}
.pitch-card .email {
  display: block;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 18px;
  word-break: break-all;
  transition: color 180ms var(--ease);
}
.pitch-card .email:hover { color: var(--red); }
.pitch-card ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pitch-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 0.96rem; line-height: 1.5;
  color: var(--text);
}
.pitch-card li::before {
  content: "→"; color: var(--red); font-family: var(--mono); font-weight: 700;
}

/* ============ LISTING / SECTION HERO ============ */
.section-hero, .article-hero {
  padding: 80px 0 52px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.section-hero h1, .article-head h1 {
  max-width: 1000px;
  margin: 14px 0 18px;
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.02; letter-spacing: 0;
  color: var(--ink);
}
.section-hero p, .article-head p {
  max-width: 760px;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ============ STATIC PAGE SHELL (about / contact / methodology / policy) ============ */
.static-page-shell {
  display: block;
  max-width: 780px;
}
.static-page-body {
  min-width: 0;
}

/* ============ FEATURED ARTICLE (sparse listings, 1 item) ============ */
.layout-feature { display: block; }
.layout-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.layout-duo .duo-rail {
  display: grid;
  gap: 24px;
}
.layout-duo .content-card { padding-top: 18px; }

.featured-article {
  position: relative;
  display: block;
  padding: 36px 0 8px;
  border-top: 4px solid var(--red);
  max-width: 920px;
}
.featured-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.featured-kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.featured-article h2 {
  margin: 0 0 18px;
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 880px;
}
.featured-article h2 a {
  background: linear-gradient(transparent 92%, var(--red) 92%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 600ms var(--ease);
}
.featured-article h2 a:hover { background-size: 100% 100%; color: var(--ink); }
.featured-summary {
  margin: 0 0 22px;
  max-width: 760px;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.featured-byline {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.featured-byline .byline { color: var(--ink); font-weight: 700; }
.featured-byline span + span::before {
  content: "·"; margin-right: 14px; color: var(--line-2);
}
.featured-cta { margin-top: 14px; }
@media (max-width: 860px) {
  .layout-duo { grid-template-columns: 1fr; gap: 28px; }
  .featured-article { padding-top: 24px; }
  .featured-article h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}

/* ============ CATEGORY / REGION ACCENT BORDERS ============ */
.content-card.accent-news,
.content-card.accent-pakistan,
.content-card.accent-south-asia { border-top: 2px solid var(--red); }
.content-card.accent-opinion,
.content-card.accent-policy,
.content-card.accent-research { border-top: 2px solid var(--gold); }
.content-card.accent-monitoring,
.content-card.accent-digital-propaganda,
.content-card.accent-narratives { border-top: 2px solid var(--ink-3); }
.content-card.accent-reports,
.content-card.accent-monthly,
.content-card.accent-counterterrorism { border-top: 2px solid var(--green); }
.content-card.accent-middle-east { border-top: 2px solid var(--gold); }
.content-card.accent-horn-of-africa,
.content-card.accent-west-africa { border-top: 2px solid var(--green); }
.content-card.accent-europe,
.content-card.accent-north-america { border-top: 2px solid var(--ink-3); }

/* ============ RAIL STATUS DOT ============ */
.rail-item { position: relative; }
.rail-item .rail-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rail-item.rail-status-wanted .meta .rail-status,
.rail-item.rail-status-active .meta .rail-status { color: var(--red); }
.rail-item.rail-status-in-custody .meta .rail-status { color: var(--gold); }
.rail-item.rail-status-deceased .meta .rail-status { color: var(--muted); }

/* ============ TOOLBAR ============ */
.content-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.content-toolbar label span {
  display: block; margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em;
  color: var(--muted); text-transform: uppercase; font-weight: 700;
}
.content-toolbar input {
  width: 100%; min-height: 48px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  padding: 10px 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 180ms var(--ease);
}
.content-toolbar input::placeholder { color: var(--muted); }
.content-toolbar input:focus { outline: none; border-color: var(--red); }

.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-buttons button {
  min-height: 36px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}
.filter-buttons button:hover { background: var(--paper-2); }
.filter-buttons button.active {
  color: #fff; background: var(--ink); border-color: var(--ink);
}

.empty-state {
  margin: 24px 0 0;
  padding: 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  color: var(--muted);
  font-family: var(--mono); font-size: 0.88rem;
}

.listing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 42px;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.listing-cta span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.listing-cta strong {
  display: block;
  font-family: var(--serif-display);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink);
}
.listing-cta p {
  max-width: 660px;
  margin: 10px 0 0;
  font-family: var(--serif);
  color: var(--text-soft);
}
.listing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ============ ARTICLE ============ */
.article-band { padding: 64px 0 96px; }
.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 740px) minmax(280px, 320px);
  gap: 72px; align-items: start;
}
.article-sidebar {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 18px;
}
.article-side-panel {
  padding: 18px 0 0;
  border-top: 1px solid var(--line-2);
}
.article-side-panel h2 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.article-side-panel p {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.article-toc {
  display: grid;
  gap: 8px;
}
.article-toc a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.article-toc a:hover { color: var(--red); }
.side-stats,
.side-facts {
  margin: 0;
}
.side-stats div,
.side-facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.side-stats dt,
.side-facts dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-stats dd,
.side-facts dd {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}
.side-stats dd { font-size: 1.45rem; }
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.side-tags span {
  display: inline-flex;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.file-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 700;
}
.file-link:hover { background: var(--ink); color: #fff; }
.copy-link {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.copy-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.article-body {
  font-family: var(--serif);
  color: var(--text);
  min-width: 0;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-size: 4.6rem;
  line-height: 0.86;
  font-weight: 900;
  float: left;
  color: var(--red);
  padding: 8px 12px 0 0;
}
.article-body h2, .article-body h3, .article-body h4 {
  margin: 44px 0 14px;
  font-family: var(--serif-display);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}
.article-body h2 {
  font-size: 1.7rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.article-body h3 { font-size: 1.34rem; }
.article-body p, .article-body li {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--text);
}
.article-body p { margin: 0 0 20px; }
.article-body ul { padding-left: 22px; margin: 0 0 22px; }
.article-body li { margin: 8px 0; }
.article-body a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.article-body blockquote {
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--red);
  font-style: italic;
  font-size: 1.22rem;
  color: var(--ink);
}
.article-body code {
  font-family: var(--mono);
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

/* ============ ARTICLE FIGURES / IMAGES ============ */
.article-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 28px 0;
  border-radius: var(--radius-lg);
}
.article-figure {
  margin: 36px 0;
  padding: 0;
}
.article-figure img {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.article-figure figcaption {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 14px;
  border-left: 2px solid var(--red);
  line-height: 1.5;
}

/* Wide figure breakout — for big charts that should extend beyond the column. */
.article-figure.wide,
.article-body figure.wide {
  margin-left: -80px;
  margin-right: -80px;
}
@media (max-width: 900px) {
  .article-figure.wide,
  .article-body figure.wide { margin-left: 0; margin-right: 0; }
}

/* ============ ARTICLE TABLES ============ */
.article-table-wrap {
  margin: 32px 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.96rem;
}
.article-table thead {
  background: var(--paper-2);
}
.article-table th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.article-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  line-height: 1.5;
}
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody tr:hover td { background: var(--paper-2); }

/* ============ EMBEDS (iframe / video / chart widgets) ============ */
.article-embed {
  margin: 32px 0;
  padding: 0;
}
.article-embed iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.article-embed video {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
}

/* ============ DOWNLOAD CARD (PDF / dataset links) ============ */
.article-body a[href$=".pdf"],
.article-body a[href$=".xlsx"],
.article-body a[href$=".csv"],
.article-body a[href$=".zip"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 6px 4px 6px 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.94rem;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.article-body a[href$=".pdf"]:hover,
.article-body a[href$=".xlsx"]:hover,
.article-body a[href$=".csv"]:hover,
.article-body a[href$=".zip"]:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.article-body a[href$=".pdf"]::before { content: "PDF"; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 6px; background: var(--red); color: #fff; border-radius: 2px; }
.article-body a[href$=".xlsx"]::before { content: "XLS"; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 6px; background: var(--green); color: #fff; border-radius: 2px; }
.article-body a[href$=".csv"]::before { content: "CSV"; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 6px; background: var(--ink); color: #fff; border-radius: 2px; }
.article-body a[href$=".zip"]::before { content: "ZIP"; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 6px; background: var(--gold); color: #fff; border-radius: 2px; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.76rem; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.article-meta .byline {
  color: var(--ink); font-weight: 700;
}
.article-meta span + span::before { content: "·"; margin-right: 14px; color: var(--line-2); }

.premium-cta {
  position: sticky; top: 110px;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg);
}
.premium-cta h2 {
  margin: 0 0 10px;
  font-family: var(--serif-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.4rem;
}
.premium-cta p {
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: 1rem;
  margin: 0 0 18px;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-strip { animation: none !important; }
  .dateline-row .dot, .live-dot, .ticker-label .live-dot, .hero-rail-head .live-dot { animation: none !important; }
}

/* ============ FOOTER ============ */
.site-footer {
  padding: 80px 0 36px;
  background: var(--ink);
  color: #d5d2c8;
  border-top: 1px solid var(--line);
}
.site-footer .footer-brand .brand-mark { color: var(--red); }
.site-footer .footer-brand .brand-text .b1 { color: rgba(255,255,255,0.55); }
.site-footer .footer-brand .brand-text .b2 { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 56px;
}
.footer-grid > div > p {
  font-family: var(--serif);
  color: #d5d2c8;
  font-size: 1rem;
  max-width: 320px;
  margin-top: 18px;
}
.site-footer h2 {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase; font-weight: 700;
}
.site-footer a {
  display: block;
  margin: 10px 0;
  color: #d5d2c8;
  font-family: var(--sans);
  font-size: 0.92rem;
  transition: color 180ms var(--ease);
}
.site-footer a:hover { color: #fff; }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: rgba(213,210,200,0.7); text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1318;
    --paper-2: #171d24;
    --paper-3: #202832;
    --ink: #f2f0ea;
    --ink-2: #e5e0d5;
    --ink-3: #cfc7b8;
    --text: #ede9df;
    --text-soft: #cac2b4;
    --muted: #9e9588;
    --dim: #756f66;
    --line: #303843;
    --line-2: #46505c;
    --line-3: #69727c;
    --red: #ff6b7a;
    --red-dark: #e5485b;
    --red-soft: rgba(255, 107, 122, 0.14);
    --gold: #d4a852;
    --green: #57c785;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.36);
    --shadow-2: 0 18px 42px rgba(0, 0, 0, 0.42);
    --shadow-3: 0 26px 70px rgba(0, 0, 0, 0.52);
  }

  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }

  :root:not([data-theme="light"]) .site-header,
  :root:not([data-theme="light"]) .site-header.is-scrolled,
  :root:not([data-theme="light"]) .site-search-panel {
    background: rgba(15, 19, 24, 0.94);
  }

  :root:not([data-theme="light"]) .snapshot-strip,
  :root:not([data-theme="light"]) .site-footer,
  :root:not([data-theme="light"]) .desk-section {
    background: #090c10;
  }

  :root:not([data-theme="light"]) .button.primary,
  :root:not([data-theme="light"]) .rail-cta,
  :root:not([data-theme="light"]) .filter-buttons button.active,
  :root:not([data-theme="light"]) .copy-link {
    background: #f2f0ea;
    color: #0f1318;
    border-color: #f2f0ea;
  }

  :root:not([data-theme="light"]) .button.primary:hover,
  :root:not([data-theme="light"]) .rail-cta:hover,
  :root:not([data-theme="light"]) .copy-link:hover {
    background: var(--red);
    border-color: var(--red);
    color: #090c10;
  }

  :root:not([data-theme="light"]) .pitch-cta,
  :root:not([data-theme="light"]) .file-link {
    color: #090c10;
  }

  :root:not([data-theme="light"]) .ticker-bar::before { background: linear-gradient(90deg, var(--paper-2), transparent); }
  :root:not([data-theme="light"]) .ticker-bar::after { background: linear-gradient(270deg, var(--paper-2), transparent); }
  :root:not([data-theme="light"]) .article-table thead,
  :root:not([data-theme="light"]) .article-table tbody tr:hover td,
  :root:not([data-theme="light"]) .article-body code,
  :root:not([data-theme="light"]) .article-body a[href$=".pdf"],
  :root:not([data-theme="light"]) .article-body a[href$=".xlsx"],
  :root:not([data-theme="light"]) .article-body a[href$=".csv"],
  :root:not([data-theme="light"]) .article-body a[href$=".zip"] {
    background: var(--paper-3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1318;
  --paper-2: #171d24;
  --paper-3: #202832;
  --ink: #f2f0ea;
  --ink-2: #e5e0d5;
  --ink-3: #cfc7b8;
  --text: #ede9df;
  --text-soft: #cac2b4;
  --muted: #9e9588;
  --dim: #756f66;
  --line: #303843;
  --line-2: #46505c;
  --line-3: #69727c;
  --red: #ff6b7a;
  --red-dark: #e5485b;
  --red-soft: rgba(255, 107, 122, 0.14);
  --gold: #d4a852;
  --green: #57c785;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.36);
  --shadow-2: 0 18px 42px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, 0.52);
}

:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] .site-search-panel { background: rgba(15, 19, 24, 0.94); }
:root[data-theme="dark"] .snapshot-strip,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .desk-section { background: #090c10; }
:root[data-theme="dark"] .button.primary,
:root[data-theme="dark"] .rail-cta,
:root[data-theme="dark"] .filter-buttons button.active,
:root[data-theme="dark"] .copy-link {
  background: #f2f0ea;
  color: #0f1318;
  border-color: #f2f0ea;
}
:root[data-theme="dark"] .button.primary:hover,
:root[data-theme="dark"] .rail-cta:hover,
:root[data-theme="dark"] .copy-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #090c10;
}
:root[data-theme="dark"] .pitch-cta,
:root[data-theme="dark"] .file-link { color: #090c10; }
:root[data-theme="dark"] .ticker-bar::before { background: linear-gradient(90deg, var(--paper-2), transparent); }
:root[data-theme="dark"] .ticker-bar::after { background: linear-gradient(270deg, var(--paper-2), transparent); }
:root[data-theme="dark"] .article-table thead,
:root[data-theme="dark"] .article-table tbody tr:hover td,
:root[data-theme="dark"] .article-body code,
:root[data-theme="dark"] .article-body a[href$=".pdf"],
:root[data-theme="dark"] .article-body a[href$=".xlsx"],
:root[data-theme="dark"] .article-body a[href$=".csv"],
:root[data-theme="dark"] .article-body a[href$=".zip"] { background: var(--paper-3); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-rail { padding: 32px 0 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .snapshot-card { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .desk-grid-pro, .method-grid, .pitch-grid { grid-template-columns: 1fr; gap: 36px; }
  .threat-grid { grid-template-columns: repeat(2, 1fr); }
  .region-card { border-right: 1px solid var(--line); }
  .region-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .region-card:nth-child(2n) { border-right: 0; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid .content-card { grid-column: span 1 !important; min-height: 0; }
  .article-shell { grid-template-columns: 1fr; gap: 36px; }
  .article-sidebar { position: static; }
  .premium-cta { position: static; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .container { width: min(100% - 32px, 1260px); }
  .header-grid { grid-template-columns: auto 1fr auto; gap: 12px; min-height: 64px; }
  .brand-logo { height: 104px; }
  .site-header.is-scrolled .brand-logo { height: 72px; }
  .site-header.is-scrolled .header-date { max-height: 0; opacity: 0; padding: 0; margin: 0; }
  .site-header.is-scrolled.site-header-centered { padding: 4px 0 0; }
  .header-cta { display: inline-flex; justify-self: end; }
  .pitch-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    grid-column: 1 / -1;
    display: none; flex-direction: column; align-items: stretch;
    padding-bottom: 18px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
  .site-nav a::after { display: none; }
  .site-search-inner { grid-template-columns: 1fr; gap: 20px; }
  .site-search-results { grid-template-columns: 1fr; }

  .dateline-row span:nth-child(2) { display: none; }
  .card-grid, .listing-grid { grid-template-columns: 1fr; gap: 0; }
  .content-card { padding: 22px 0 0; border-top: 1px solid var(--line-2); }
  .content-card + .content-card { margin-top: 22px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .snapshot-grid, .gateway-grid { grid-template-columns: 1fr; }
  .snapshot-card { min-height: 112px; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: 0; }
  .threat-grid { grid-template-columns: 1fr; }
  .region-card { border-right: 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 0; }
  .feature-grid .content-card { border-top: 1px solid var(--line-2); padding-top: 22px; margin-top: 22px; }
  .content-toolbar { grid-template-columns: 1fr; }
  .listing-cta { grid-template-columns: 1fr; align-items: start; }
  .listing-cta-actions { justify-content: flex-start; }
  .article-sidebar { gap: 14px; }
  .split-heading { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .split-heading > a { justify-self: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .band, .article-band, .desk-section, .method-band, .pitch-band, .threat-board { padding: 64px 0; }
  .section-hero, .article-hero { padding: 52px 0 36px; }
  .article-body { font-size: 1.04rem; }
  .article-body > p:first-of-type::first-letter { font-size: 3.4rem; }
  .method-steps { grid-template-columns: 1fr; }
  .method-steps span { border-right: 0 !important; }
}

@media (max-width: 560px) {
  .brand-logo { height: 84px; }
  .site-header.is-scrolled .brand-logo { height: 60px; }
  .header-grid { min-height: 56px; }
  .footer-brand .brand-logo { height: 96px; }
  .footer-grid { grid-template-columns: 1fr; }
  .pitch-card { padding: 24px; }
}

/* ============ SCROLL-DRIVEN INTERACTION ============ */
/* Modern browsers only. Falls back gracefully where unsupported. */
@supports (animation-timeline: view()) {
  /* Neutralize the JS-driven .reveal opacity:0 so scroll-driven animations
     (which apply to ancestor sections) aren't blocked by child elements
     stuck at opacity:0 from the IntersectionObserver fallback path. */
  .reveal { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: no-preference) {
    /* Each major section zooms in slightly + fades as it enters the viewport. */
    .band,
    .threat-board,
    .desk-section,
    .pitch-band,
    .article-band {
      animation: section-zoom-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
      transform-origin: center top;
      will-change: transform, opacity;
    }
    @keyframes section-zoom-in {
      from { opacity: 0; transform: scale(0.94) translateY(40px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Hero text gets a gentle parallax/scale-out on the way past. */
    .hero h1,
    .hero-lead {
      animation: hero-fade-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
      will-change: transform, opacity;
    }
    @keyframes hero-fade-out {
      to { opacity: 0.4; transform: scale(0.96) translateY(-40px); }
    }

    /* Subtle parallax lift for headline serifs inside sections. */
    .split-heading h2,
    .desk-grid-pro h2,
    .pitch-grid h2 {
      animation: heading-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    @keyframes heading-rise {
      from { opacity: 0; transform: translateY(28px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Cards in viewport get a clean lift-in. */
    .content-card,
    .region-card,
    .desk-list a {
      animation: card-lift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    @keyframes card-lift {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Header tweak: sticky shadow becomes more visible on scroll */
.site-header.is-scrolled { background: rgba(250, 250, 247, 0.97); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header.is-scrolled { background: rgba(15, 19, 24, 0.97); }
}

:root[data-theme="dark"] .site-header.is-scrolled { background: rgba(15, 19, 24, 0.97); }

/* ====================================================================
   TGD — CINEMATIC INTERACTIVE LAYER
   (Appended. All elements injected via main.js — non-breaking.)
   ==================================================================== */

/* ---------- 1. Cinematic intro overlay (editorial · on-brand) ---------- */
.tgd-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: stretch; justify-items: stretch;
  color: #f2efe6;
  font-family: var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(185, 28, 44, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 90%, rgba(212, 168, 82, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #0d1318 0%, #0a0e13 60%, #05080c 100%);
  opacity: 1;
  overflow: hidden;
  transition: opacity 600ms var(--ease), visibility 0s linear 0s;
}
.tgd-intro.is-leaving { opacity: 0; visibility: hidden; transition-delay: 0s, 600ms; }

/* dot-grid background */
.tgd-intro-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(242, 239, 230, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 40%, transparent 78%);
  opacity: 0.55;
}
/* scanline */
.tgd-intro-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 107, 122, 0.05) 50%, transparent 100%);
  animation: tgd-intro-scan 3.6s linear infinite;
  pointer-events: none;
}
@keyframes tgd-intro-scan {
  0% { transform: translateY(-30%); }
  100% { transform: translateY(110vh); }
}

/* top bar */
.tgd-intro-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px;
  font-size: 0.62rem;
  color: rgba(242, 239, 230, 0.55);
  border-bottom: 1px solid rgba(242, 239, 230, 0.08);
  position: relative; z-index: 2;
}
.tgd-intro-corner { display: inline-flex; align-items: center; gap: 8px; }
.tgd-intro-corner-mid .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff6b7a;
  box-shadow: 0 0 0 0 rgba(255, 107, 122, 0.7);
  animation: tgd-intro-pulse 1.6s ease-out infinite;
}
.tgd-intro-skip {
  border: 1px solid rgba(242, 239, 230, 0.25);
  background: transparent;
  color: rgba(242, 239, 230, 0.85);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.18em;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.tgd-intro-skip:hover {
  background: rgba(185, 28, 44, 0.85);
  color: #fff;
  border-color: rgba(185, 28, 44, 0.85);
}
.tgd-intro-skip span { transition: transform 200ms var(--ease); display: inline-block; }
.tgd-intro-skip:hover span { transform: translateX(3px); }

/* center stage */
.tgd-intro-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 28px;
  text-align: center;
  position: relative; z-index: 2;
}

/* radar */
.tgd-intro-radar {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.tgd-intro-radar .ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(185, 28, 44, 0.55);
  border-radius: 50%;
  opacity: 0.55;
}
.tgd-intro-radar .r2 { inset: 14px; opacity: 0.35; }
.tgd-intro-radar .r3 { inset: 28px; opacity: 0.22; }
.tgd-intro-radar .sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(185, 28, 44, 0.45) 0deg,
    rgba(185, 28, 44, 0.25) 18deg,
    rgba(185, 28, 44, 0.08) 36deg,
    transparent 56deg,
    transparent 360deg);
  mix-blend-mode: screen;
  animation: tgd-intro-sweep 2.8s linear infinite;
}
@keyframes tgd-intro-sweep { to { transform: rotate(360deg); } }

.tgd-intro-mark {
  position: relative; z-index: 2;
  width: 76px; height: 76px;
  background: linear-gradient(180deg, #c4202f, #8b1420);
  border-radius: 16px;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(185, 28, 44, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  animation: tgd-intro-mark-in 700ms var(--ease) both;
}
.tgd-intro-mark span {
  font-family: var(--serif-display); font-weight: 900;
  font-size: 1.55rem; letter-spacing: 0.02em;
  color: #fafaf7; line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.tgd-intro-radar .blip {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: #d4a852;
  box-shadow: 0 0 12px rgba(212, 168, 82, 0.75);
  animation: tgd-intro-blip 2.4s ease-out infinite;
}
.tgd-intro-radar .b1 { top: 8px; right: 22px; }
.tgd-intro-radar .b2 { bottom: 18px; left: 12px; animation-delay: 0.6s; background: #ff6b7a; box-shadow: 0 0 12px rgba(255, 107, 122, 0.7); }
.tgd-intro-radar .b3 { top: 50%; right: 4px; animation-delay: 1.4s; }
@keyframes tgd-intro-blip {
  0%, 60%, 100% { opacity: 0.45; transform: scale(1); }
  20% { opacity: 1; transform: scale(1.4); }
}

.tgd-intro-eyebrow {
  margin: 0; font-size: 0.62rem;
  color: rgba(212, 168, 82, 0.9);
  letter-spacing: 0.24em;
  opacity: 0;
  animation: tgd-intro-text-in 500ms var(--ease) 120ms forwards;
}
.tgd-intro-title {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em; text-transform: none;
  color: #fafaf7;
  opacity: 0;
  animation: tgd-intro-text-in 600ms var(--ease) 220ms forwards;
}
.tgd-intro-sub {
  margin: 0; max-width: 56ch;
  font-family: var(--sans);
  text-transform: none; letter-spacing: 0;
  font-size: 0.92rem;
  color: rgba(242, 239, 230, 0.68);
  opacity: 0;
  animation: tgd-intro-text-in 600ms var(--ease) 360ms forwards;
}

.tgd-intro-stats {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(242, 239, 230, 0.1);
  background: rgba(13, 19, 24, 0.55);
  border-radius: 4px;
  font-size: 0.6rem; letter-spacing: 0.12em;
  color: rgba(242, 239, 230, 0.55);
  opacity: 0;
  animation: tgd-intro-text-in 600ms var(--ease) 480ms forwards;
}
.tgd-intro-stats span:not(.dotsep) { display: inline-flex; align-items: baseline; gap: 6px; }
.tgd-intro-stats strong {
  font-family: var(--serif-display);
  color: #fafaf7;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tgd-intro-stats small {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 239, 230, 0.5);
}
.tgd-intro-stats .dotsep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(212, 168, 82, 0.6);
}

/* bottom */
.tgd-intro-bottom {
  padding: 16px 28px 22px;
  border-top: 1px solid rgba(242, 239, 230, 0.08);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 2;
}
.tgd-intro-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.62rem; color: rgba(242, 239, 230, 0.7);
}
.tgd-intro-status .cursor {
  width: 8px; height: 12px;
  background: #ff6b7a;
  animation: tgd-intro-cursor 0.8s steps(2) infinite;
}
@keyframes tgd-intro-cursor { 50% { opacity: 0; } }

.tgd-intro-bar {
  height: 2px;
  background: rgba(242, 239, 230, 0.08);
  border-radius: 99px; overflow: hidden;
}
.tgd-intro-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), #d4a852);
  box-shadow: 0 0 12px rgba(185, 28, 44, 0.5);
  animation: tgd-intro-bar 2300ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms forwards;
}
.tgd-intro-foot {
  font-size: 0.58rem;
  color: rgba(242, 239, 230, 0.4);
  letter-spacing: 0.22em;
}

@keyframes tgd-intro-mark-in {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes tgd-intro-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 122, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 122, 0); }
}
@keyframes tgd-intro-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tgd-intro-bar {
  from { width: 0%; }
  to { width: 100%; }
}

@media (max-width: 560px) {
  .tgd-intro-top { padding: 14px 16px; }
  .tgd-intro-bottom { padding: 14px 16px 18px; }
  .tgd-intro-corner-mid { display: none; }
  .tgd-intro-stats { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 12px; }
  .tgd-intro-stats .dotsep { display: none; }
  .tgd-intro-radar { width: 108px; height: 108px; }
}

/* ---------- 2. Scroll progress bar ---------- */
.tgd-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 998;
  background: transparent;
  pointer-events: none;
}
.tgd-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  box-shadow: 0 0 12px rgba(185, 28, 44, 0.45);
  transition: width 80ms linear;
}

/* ---------- 3. Floating ops console ---------- */
.tgd-ops {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 90;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  min-width: 200px;
  background: rgba(13, 19, 24, 0.78);
  color: #f2f0ea;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 38px rgba(0,0,0,0.35);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; transform: translateY(20px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.tgd-ops.is-visible { opacity: 1; transform: translateY(0); }
.tgd-ops-head {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 7px; margin-bottom: 2px;
}
.tgd-ops-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff6b7a;
  box-shadow: 0 0 0 0 rgba(255,107,122,0.6);
  animation: tgd-intro-pulse 1.6s ease-out infinite;
}
.tgd-ops-head strong { color: #fff; letter-spacing: 0.14em; font-weight: 700; }
.tgd-ops-row {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline;
}
.tgd-ops-row span:first-child { color: rgba(255,255,255,0.48); }
.tgd-ops-row span:last-child { color: #fff; font-variant-numeric: tabular-nums; }
.tgd-ops-toggle {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-family: var(--mono); font-size: 0.85rem; line-height: 1;
  display: grid; place-items: center; border-radius: 4px;
}
.tgd-ops-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }
.tgd-ops.is-collapsed { min-width: 0; padding: 8px 12px; }
.tgd-ops.is-collapsed .tgd-ops-row,
.tgd-ops.is-collapsed .tgd-ops-head strong { display: none; }
@media (max-width: 720px) {
  .tgd-ops { left: 10px; bottom: 10px; min-width: 0; font-size: 0.58rem; padding: 8px 10px; }
  .tgd-ops .tgd-ops-row span:first-child { display: none; }
  .tgd-totop { right: 10px; bottom: 10px; width: 34px; height: 34px; }
}

/* ---------- 4. Hero map: parallax + tooltip ---------- */
.hero { perspective: 1200px; }
.hero-map {
  transition: transform 320ms var(--ease);
  will-change: transform;
}
.map-pulse {
  cursor: pointer;
  pointer-events: auto;
  transition: filter 200ms var(--ease);
}
.map-pulse:hover .dot { filter: drop-shadow(0 0 8px currentColor); }
.map-pulse:hover .ring { animation-duration: 1.6s; }
.tgd-map-tip {
  position: absolute;
  z-index: 4;
  padding: 8px 12px;
  background: rgba(13, 19, 24, 0.94);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -120%) translateY(6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.tgd-map-tip.is-visible {
  opacity: 1; transform: translate(-50%, -120%) translateY(0);
}
.tgd-map-tip strong { color: #ff6b7a; display: block; font-size: 0.7rem; letter-spacing: 0.14em; }
.tgd-map-tip small { display: block; margin-top: 2px; color: rgba(255,255,255,0.65); font-size: 0.62rem; text-transform: none; letter-spacing: 0.04em; }

/* ---------- 5. Card 3D tilt ---------- */
.content-card,
.tool-card,
.gateway-card,
.snapshot-card,
.rail-item {
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.content-card.is-tilting,
.tool-card.is-tilting,
.gateway-card.is-tilting,
.rail-item.is-tilting {
  transition: transform 80ms linear, box-shadow 240ms var(--ease);
}

/* ---------- 6. Magnetic CTA shine ---------- */
.button.primary {
  position: relative;
  overflow: hidden;
  transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.button.primary::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}
.button.primary:hover::after {
  animation: tgd-shine 900ms var(--ease) forwards;
}
@keyframes tgd-shine {
  from { left: -120%; }
  to { left: 140%; }
}

/* ---------- 7. Ticker pause-on-hover ---------- */
.ticker-row:hover .ticker-strip { animation-play-state: paused; }
.ticker-strip a {
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.ticker-strip a:hover {
  color: var(--red);
}

/* ---------- 8. Snapshot card animated bars ---------- */
.snapshot-card { position: relative; overflow: hidden; }
.snapshot-card .tgd-bar {
  position: absolute; left: 20px; right: 20px; bottom: 14px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.snapshot-card .tgd-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 99px;
  transition: width 1200ms cubic-bezier(0.18, 0.8, 0.2, 1);
}

/* ---------- 9. Threat-level gauge (hero rail) ---------- */
.tgd-threat-gauge {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 10px;
}
.tgd-threat-gauge-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.tgd-threat-gauge-head strong { color: var(--text); font-size: 0.7rem; }
.tgd-threat-level {
  font-family: var(--serif-display);
  font-weight: 700; font-size: 1.65rem; line-height: 1;
  color: var(--red);
  letter-spacing: 0.02em;
}
.tgd-threat-bar {
  position: relative;
  height: 8px;
  background: rgba(185, 28, 44, 0.08);
  border-radius: 99px; overflow: hidden;
}
.tgd-threat-bar i {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0;
  background: linear-gradient(90deg, #14532d 0%, #d4a852 55%, var(--red) 100%);
  border-radius: 99px;
  transition: width 1400ms cubic-bezier(0.18, 0.8, 0.2, 1);
}
.tgd-threat-bar::after {
  content: ""; position: absolute; top: -3px; bottom: -3px;
  left: var(--tgd-marker, 70%);
  width: 2px; background: var(--ink);
  opacity: 0.7;
}
.tgd-threat-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- 10. Back-to-top floater ---------- */
.tgd-totop {
  position: fixed; right: 18px; bottom: 18px;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(13, 19, 24, 0.86);
  color: #f2f0ea;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.9rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), background 200ms var(--ease);
  z-index: 90;
}
.tgd-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tgd-totop:hover { background: var(--red); border-color: var(--red); }

/* ---------- 11. Ambient orbs (hero atmosphere) ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: 0;
  width: 460px; height: 460px; border-radius: 50%;
  filter: blur(80px);
  opacity: 0.32;
  pointer-events: none;
  animation: tgd-orb 18s ease-in-out infinite alternate;
}
.hero::before {
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(185,28,44,0.32) 0%, transparent 70%);
}
.hero::after {
  bottom: -180px; left: -100px;
  background: radial-gradient(circle, rgba(212,168,82,0.22) 0%, transparent 70%);
  animation-delay: -6s;
}
@keyframes tgd-orb {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(28px, -22px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* ---------- 12. Dark mode tuning for new pieces ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tgd-threat-gauge {
    background: var(--paper-2);
    border-color: var(--line);
  }
}
:root[data-theme="dark"] .tgd-threat-gauge {
  background: var(--paper-2);
  border-color: var(--line);
}
:root[data-theme="light"] .tgd-ops {
  background: rgba(13, 27, 42, 0.92);
}

/* ---------- 13. Hover lift accent for cards ---------- */
.content-card, .tool-card, .gateway-card, .rail-item {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.content-card:hover {
  box-shadow: 0 18px 44px rgba(13, 27, 42, 0.14);
}
.tool-card:hover {
  box-shadow: 0 24px 60px rgba(13, 27, 42, 0.18);
}

/* ---------- 14. Reveal class polish (works alongside existing) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 15. Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .tgd-intro,
  .tgd-progress span,
  .tgd-ops,
  .tgd-totop,
  .button.primary::after,
  .snapshot-card .tgd-bar i,
  .tgd-threat-bar i {
    transition: none !important;
    animation: none !important;
  }
  .hero-map { transform: none !important; }
}


/* ============ HOMEPAGE REFINEMENT — quieter, roomier, more deliberate ============ */

/* Give the lead story room to breathe. */
.hero { padding: 96px 0 104px; }
.hero-grid { gap: 80px; align-items: start; }
.hero h1 {
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero-lead {
  font-size: 1.26rem;
  line-height: 1.62;
  max-width: 620px;
  margin-bottom: 32px;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero-meta { margin-bottom: 36px; }

/* The map behind the hero should whisper, not shout. */
.hero-map { opacity: 0.28; }

/* Snapshot strip: fewer, larger figures instead of a dense six-across grid. */
.snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snapshot-card { min-height: 148px; padding: 32px 28px; }
.snapshot-card:nth-child(n+4) { display: none; }
.snapshot-card strong { font-size: 2.4rem; letter-spacing: -0.02em; }

/* Content sections get consistent vertical rhythm. */
.section, .tools-band, .snapshot-strip + section { padding-block: 88px; }

/* Reveal sections as they enter the viewport. The hidden state is scoped to
   .js-reveal, which main.js sets, so the content stays visible without JS. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { gap: 44px; }
  .snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snapshot-card:nth-child(n+3) { display: none; }
  .section, .tools-band { padding-block: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The two data tools now lead the page, so they get more presence. */
.tools-band .tool-grid { gap: 28px; }
.tools-band .tool-card { padding: 28px; }
.tools-band .tool-visual { margin-bottom: 20px; }
.tools-band .tool-card strong { font-size: 1.5rem; }

/* Network preview reads on the dark theme too. */
:root[data-theme="dark"] .net-node,
:root:not([data-theme="light"]) .net-node { fill: var(--ink-3); stroke: var(--line-3); }
:root[data-theme="dark"] .net-node-core,
:root:not([data-theme="light"]) .net-node-core { fill: var(--red); stroke: var(--red); }
:root[data-theme="dark"] .net-labels text,
:root:not([data-theme="light"]) .net-labels text { fill: var(--paper); }

/* A short desk day leaves one or two cards in a three-column grid, which reads
   as a broken row. Match the column count to what actually published. */
.card-grid:has(> :last-child:nth-child(1)),
.listing-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr); }
.card-grid:has(> :last-child:nth-child(2)),
.listing-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Widening the column must not widen the prose with it. Past roughly 70
   characters the eye loses the start of the next line, so the summary keeps a
   reading measure no matter how much room the card is given. */
.card-grid:has(> :last-child:nth-child(1)) .content-card > p,
.listing-grid:has(> :last-child:nth-child(1)) .content-card > p { max-width: 68ch; }
.card-grid:has(> :last-child:nth-child(1)) .content-card h2,
.listing-grid:has(> :last-child:nth-child(1)) .content-card h2 { max-width: 24ch; }
.card-grid:has(> :last-child:nth-child(2)) .content-card > p,
.listing-grid:has(> :last-child:nth-child(2)) .content-card > p { max-width: 62ch; }

/* A picture in a full-width card would stand 800px tall on a 3:2 frame. Set the
   lone card side by side instead, so the image stays a picture rather than a
   billboard and the text keeps its measure. */
.card-grid:has(> :last-child:nth-child(1)) .content-card.has-media,
.listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 44px;
}
.card-grid:has(> :last-child:nth-child(1)) .content-card.has-media > .card-media,
.listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media > .card-media {
  grid-column: 1;
  grid-row: 1 / span 10;
  align-self: start;
  margin-bottom: 0;
}
.card-grid:has(> :last-child:nth-child(1)) .content-card.has-media > :not(.card-media),
.listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media > :not(.card-media) {
  grid-column: 2;
}
@media (max-width: 860px) {
  .card-grid:has(> :last-child:nth-child(1)) .content-card.has-media,
  .listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-grid:has(> :last-child:nth-child(1)) .content-card.has-media > .card-media,
  .listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media > .card-media {
    grid-row: auto;
    margin-bottom: 18px;
  }
  .card-grid:has(> :last-child:nth-child(1)) .content-card.has-media > :not(.card-media),
  .listing-grid:has(> :last-child:nth-child(1)) .content-card.has-media > :not(.card-media) {
    grid-column: 1;
  }
}

/* The hero lost its side rail, so it is a single column now. The measure is
   capped so the lead paragraph stays readable instead of running edge to edge. */
.hero-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr); }
/* The headline runs the full measure; only the lead paragraph is held to a
   comfortable reading width. */
.hero-grid:has(> :last-child:nth-child(1)) h1 { max-width: 26ch; }
.hero-grid:has(> :last-child:nth-child(1)) .hero-lead { max-width: 62ch; }

/* ============ AUTHOR NOTE ============ */
/* Set as a quiet italic standfirst, the way a print desk signs off a piece. */
.author-note {
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* =============================================================
   URDU / PASHTO EDITIONS — language switch and right-to-left
   =============================================================
   The Urdu and Pashto trees reuse every layout rule above. Only the
   things that are genuinely directional are restated here: the reading
   direction itself, the typefaces (no Latin face can shape Arabic
   script), and the handful of decorations that assume text starts on
   the left. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.lang-option {
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: 1px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.lang-option:hover { color: var(--red); }
.lang-option.is-current {
  color: var(--paper);
  background: var(--ink);
}
/* Urdu and Pashto names have to render in their own script even inside
   the English header, where the page font is Latin-only. */
.lang-option[lang="ur"] { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; font-size: 0.78rem; }
.lang-option[lang="ps"] { font-family: "Noto Naskh Arabic", serif; font-size: 0.8rem; }

@media (max-width: 640px) {
  .lang-option { padding: 4px 6px; font-size: 0.68rem; }
}

/* --- Script and direction ------------------------------------------------ */

/* Nastaliq is what an Urdu reader expects for a headline, but it is slow to
   read at body size and its steep descenders collide in long paragraphs. So
   headlines are set in Nastaliq and running text in Naskh — the split every
   major Urdu newsroom uses. Pashto is conventionally Naskh throughout. */
html[lang="ur"] {
  --sans: "Noto Naskh Arabic", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --serif: "Noto Naskh Arabic", "Noto Nastaliq Urdu", serif;
  --serif-display: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --mono: "Noto Naskh Arabic", var(--mono);
}
html[lang="ps"] {
  --sans: "Noto Naskh Arabic", serif;
  --serif: "Noto Naskh Arabic", serif;
  --serif-display: "Noto Naskh Arabic", serif;
  --mono: "Noto Naskh Arabic", var(--mono);
}

html[lang="ur"] h1,
html[lang="ur"] .lead-story h2,
html[lang="ur"] .content-card h2 {
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  line-height: 1.95;
}

/* Nastaliq is a far taller face than the Latin display serif: at the headline
   sizes tuned for English it overflows its block and swallows the page. The
   scale below is set so an Urdu headline occupies roughly the same area as the
   English one it replaces. */
html[lang="ur"] .article-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
html[lang="ur"] .section-hero h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
html[lang="ur"] .content-card h2 { font-size: 1.05rem; }
html[lang="ur"] .lead-story h2 { font-size: 1.4rem; }
html[lang="ps"] .article-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
html[lang="ps"] .section-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

/* Arabic-script letters join. Tracking pulls the joins apart and the
   uppercase transform does nothing but break the cascade, so both are
   switched off wholesale rather than rule by rule. */
[dir="rtl"] body,
[dir="rtl"] .eyebrow,
[dir="rtl"] .band-eyebrow,
[dir="rtl"] .card-kicker,
[dir="rtl"] .card-meta,
[dir="rtl"] .badge,
[dir="rtl"] .header-date,
[dir="rtl"] .site-nav a,
[dir="rtl"] .button,
[dir="rtl"] .filter-buttons button,
[dir="rtl"] .article-meta,
[dir="rtl"] .article-side-panel h2,
[dir="rtl"] .site-footer h2 {
  letter-spacing: normal;
  text-transform: none;
}

/* Arabic script sits lower in its em box and needs more leading than the
   Latin defaults give it. */
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] .article-body p,
[dir="rtl"] .article-body li { line-height: 2.15; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.7; }

/* --- Mirrored layout ----------------------------------------------------- */

[dir="rtl"] .header-utility { right: auto; left: 0; }

[dir="rtl"] .article-body,
[dir="rtl"] .article-side-panel,
[dir="rtl"] .content-card,
[dir="rtl"] .lead-story-body,
[dir="rtl"] .section-hero,
[dir="rtl"] .listing-cta,
[dir="rtl"] .site-footer .footer-grid > div {
  text-align: right;
}

[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol { padding-right: 1.3em; padding-left: 0; }

/* A drop cap floated left lands in the middle of a right-to-left paragraph. */
[dir="rtl"] .article-body > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}

[dir="rtl"] blockquote,
[dir="rtl"] .article-body blockquote {
  border-left: none;
  border-right: 3px solid var(--red);
  padding-left: 0;
  padding-right: 18px;
}

[dir="rtl"] .eyebrow::before,
[dir="rtl"] .band-eyebrow::before { margin-left: 8px; margin-right: 0; }

[dir="rtl"] table { text-align: right; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }

/* Numerals, dates, acronyms and source links stay in Latin script and must
   not be reordered by the surrounding right-to-left run. */
[dir="rtl"] .article-body code,
[dir="rtl"] .file-link,
[dir="rtl"] [data-copy-link] { direction: ltr; unicode-bidi: isolate; text-align: left; }

/* --- Machine-translation notice ------------------------------------------ */

.translation-notice {
  display: block;
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  background: var(--paper-2);
  border-radius: var(--radius);
  font-family: var(--sans);
}
.translation-notice strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.translation-notice p {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--text-soft);
}
.translation-notice a {
  font-size: 0.82rem;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === SEO Crawler Fallback === */
/* Ensure content is visible for search engine crawlers that don't execute scroll JS */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-reveal],
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Fallback: ensure reveal content is accessible via noscript */
html:not(.js-reveal) [data-reveal],
html:not(.js-reveal) .reveal {
  opacity: 1 !important;
  transform: none !important;
}