/* African Bulletin 24 — site stylesheet v7 overnight polish (pass 7 perf/a11y/SEO)
   Bloomberg-dense newsroom shell. Original AB24 brand; no third-party trademarks.
   Markets strip = topic labels only (no fake prices).
   Pass 7: skip-link, focus rings, contrast tweaks, sample-banner removed. */

:root {
  --ink: #0a0a0a;
  --ink-soft: #222;
  --muted: #4a4a4a;
  --line: #e5e5e5;
  --line-strong: #ccc;
  --bg: #fff;
  --bg-soft: #f6f6f6;
  --bg-rail: #fafafa;
  --accent: #c41200;
  --accent-dark: #9a0e00;
  --live: #c41200;
  --mast: #000;
  --mast-text: #fff;
  --max: 1180px;
  --serif: "Libre Baskerville", "Baskerville Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --header-sticky-h: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip avoids breaking position:sticky */
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible,
.share-bar button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.skip-link {
  position: absolute !important;
  left: 12px;
  top: 12px;
  z-index: 1000;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  color: #fff;
}
#main-content:focus { outline: none; }
#main-content:focus-visible { outline: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.topbar {
  background: #111;
  color: #bbb;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-bottom: 1px solid #222;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar a { color: #bbb; }
.topbar a:hover { color: #fff; }
.topbar .desk-note { color: #bbb; }

.site-header {
  position: relative;
  z-index: 40;
  background: var(--mast);
}
.site-header.is-sticky {
  position: sticky;
  top: 0;
}
.site-header.is-compact {
  /* Total chrome ≤52px while reading (border included) */
}
.site-header.is-compact .masthead {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 #222;
}
.site-header.is-compact .masthead .wrap {
  padding: 0;
  min-height: 51px;
  max-height: 51px;
  height: 51px;
}
.site-header.is-compact .nav-toggle {
  width: 44px;
  height: 44px;
}
.site-header.is-compact .brand {
  justify-content: center;
}
.site-header.is-compact .brand-tag,
.site-header.is-compact .mast-meta { display: none; }
.site-header.is-compact .brand-mark { display: none; }
.site-header.is-compact .brand-mark-compact { display: inline; }

.masthead {
  background: var(--mast);
  color: var(--mast-text);
  border-bottom: 1px solid #222;
}
.masthead-inner,
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  gap: 1rem;
  min-height: 64px;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  min-width: 0;
}
.brand:hover { color: #fff; }
.brand-mark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.brand-mark span,
.brand-mark-compact span { color: var(--accent); }
.brand-mark-compact {
  display: none;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  font-weight: 500;
}
.mast-meta {
  text-align: right;
  font-size: 12px;
  color: #aaa;
  flex: 0 0 auto;
}
.mast-meta strong { color: #fff; display: block; font-weight: 600; }

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 35;
}
.nav-overlay.is-visible { display: block; }

.nav {
  background: #0a0a0a;
  border-top: 1px solid #222;
  border-bottom: 2px solid var(--accent);
}
.nav-inner,
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav a {
  color: #ddd;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--accent);
}
.nav .nav-home { padding-left: 0; }
.nav-drawer-extra { display: none; }

.wrap {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}
.section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.section:last-of-type { border-bottom: 0; }
.section-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.section-label a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.section-label a:hover { color: var(--accent); }

.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.kicker.neutral { color: var(--muted); }
.meta {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
.meta time { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11px; }

.markets-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.markets-strip .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.markets-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.markets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.markets-note {
  margin-left: auto;
  font-size: 11px;
  color: #999;
  font-style: italic;
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 5px 10px;
  line-height: 1.2;
}
.chip:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff;
}
.chip[aria-current="true"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.just-in {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.just-in .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.just-in-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--live);
}
.just-in-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(196, 18, 0, 0.2);
}
.just-in-list {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  padding-bottom: 2px;
}
.just-in-list a {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.just-in-list a:hover { color: var(--accent); }
.just-in-list .t {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.just-in-more {
  display: none;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  padding: 10px 0;
  min-height: 44px;
  align-items: center;
}
.just-in-more:hover { color: var(--accent-dark); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.95fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-main,
.hero-mid,
.hero-side { padding: 22px 20px; }
.hero-main { padding-left: 0; border-right: 1px solid var(--line); }
.hero-mid { border-right: 1px solid var(--line); }
.hero-side { padding-right: 0; background: var(--bg-rail); }
.hero-main h1 {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  margin: 0 0 12px;
}
.hero-main h1 a:hover { color: var(--accent); }
.hero-main .dek {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 10px;
}
.hero-art {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 50%, #1f2a24 100%);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.hero-art::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 12px 12px auto;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  font-weight: 600;
}
.hero-mid article + article {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hero-mid h2 { font-size: 1.15rem; margin: 0 0 6px; }
.hero-mid .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(120deg, #222 0%, #445 100%);
  margin-bottom: 10px;
}
.latest-head {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.latest-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 8px;
  align-items: start;
}
.latest-list li:last-child { border-bottom: 0; }
.latest-list .t {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  line-height: 1.4;
  padding-top: 1px;
}
.latest-list a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  font-family: var(--serif);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.story-card {
  padding: 0 16px;
  border-right: 1px solid var(--line);
}
.story-card:first-child { padding-left: 0; }
.story-card:last-child { border-right: 0; padding-right: 0; }
.story-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.story-card .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #2a2a2a, #4a5560);
  margin-bottom: 10px;
}
.story-card p { font-size: 14px; color: var(--muted); margin: 0; }

.dual-rail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
}
.dual-rail-main {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.dual-rail-side { padding-left: 24px; }
.energy-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.energy-list li:last-child { border-bottom: 0; }
.energy-list h3 { font-size: 1.1rem; margin: 0 0 4px; }
.energy-list .dek-sm { font-size: 14px; color: var(--muted); margin: 0; }

.region-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.region-col {
  padding: 0 14px;
  border-right: 1px solid var(--line);
}
.region-col:first-child { padding-left: 0; }
.region-col:last-child { border-right: 0; padding-right: 0; }
.region-col h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.region-col li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.region-col li:last-child { border-bottom: 0; }
.region-col a {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.strip-col {
  padding: 0 20px;
  border-right: 1px solid var(--line);
}
.strip-col:first-child { padding-left: 0; }
.strip-col:last-child { border-right: 0; padding-right: 0; }
.strip-col h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.strip-col article + article {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.strip-col h4 { font-size: 1.05rem; margin: 0 0 4px; }

.opinion-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.opinion-card {
  padding: 0 18px;
  border-right: 1px solid var(--line);
}
.opinion-card:first-child { padding-left: 0; }
.opinion-card:last-child { border-right: 0; padding-right: 0; }
.opinion-card h3 { font-size: 1.1rem; margin: 0 0 6px; }

.share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.share-bar .share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.share-bar a,
.share-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  line-height: 1;
}
.share-bar a:hover,
.share-bar button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff;
}
.share-bar a.share-wa {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.share-bar a.share-wa:hover {
  background: #1ebe57;
  border-color: #1ebe57;
  color: #fff;
}


.story-page {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: 40px;
  padding: 28px 0 48px;
  align-items: start;
}
.story-body .byline-block {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.story-body .byline-block strong { color: var(--ink); }
.story-body h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.45rem);
  margin: 0 0 12px;
}
.story-body .dek {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.45;
}
.story-body .prose p { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
.story-body .prose .source {
  font-size: 0.92rem;
  color: var(--muted);
  border-left: 3px solid var(--line-strong);
  padding-left: 12px;
  margin: 1.25em 0;
}
.related {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.related h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.related li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.related a { font-family: var(--serif); font-weight: 700; font-size: 1rem; }
.story-rail .box {
  background: var(--bg-rail);
  border: 1px solid var(--line);
  padding: 16px;
  margin-bottom: 20px;
}
.story-rail h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.story-rail li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.story-rail li:last-child { border-bottom: 0; }
.story-rail a { font-size: 14px; font-weight: 600; line-height: 1.35; font-family: var(--serif); }

.page-hero {
  padding: 28px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.page-hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.page-hero .lede { color: var(--muted); max-width: 52ch; margin: 0 0 14px; }
.opinion-flag {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-bottom: 10px;
}
.section-list { padding: 20px 0 40px; }
.section-list article {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
}
.section-list .thumb {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #2a2a2a, #555);
}
.section-list h2 { font-size: 1.25rem; margin: 0 0 6px; }
.section-list p { color: var(--muted); margin: 0; font-size: 15px; }
.prose-page {
  max-width: 720px;
  padding: 28px 0 48px;
}
.prose-page h1 { margin-bottom: 12px; }
.prose-page h2 {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 1.75em 0 0.6em;
}
.prose-page p, .prose-page li { font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft); }
.prose-page ul { list-style: disc; padding-left: 1.25em; margin-bottom: 1em; }
.prose-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 24px 0 40px;
  border-top: 1px solid var(--line);
}
.roster-card {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.roster-card:nth-child(2n) { border-right: 0; }
.roster-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.roster-card .beat {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.roster-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.site-footer {
  background: #0a0a0a;
  color: #bbb;
  padding: 36px 0 28px;
  margin-top: 20px;
  font-size: 13px;
}
.site-footer a { color: #ddd; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 28px;
}
.footer-brand .brand-mark {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 8px;
}
.footer-brand p { color: #b0b0b0; margin: 0; max-width: 40ch; line-height: 1.5; }
.footer-col h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.footer-col li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid #222;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: #b0b0b0;
  font-size: 12px;
}
.footer-bureaux {
  color: #a0a0a0;
  font-size: 12px;
  margin-top: 10px;
  max-width: 52ch;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .masthead-inner,
  .masthead .wrap {
    justify-content: flex-start;
    gap: 10px;
  }
  .brand { flex: 1; min-width: 0; }
  .mast-meta { margin-left: auto; }
  .site-header.is-sticky {
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  }
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: 100%;
    z-index: 50;
    background: #0a0a0a;
    border-bottom: 0;
    border-right: 1px solid #222;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 64px 0 32px;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }
  .nav-inner,
  .nav .wrap {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    width: 100%;
    padding: 0 8px;
  }
  .nav a {
    padding: 14px 16px;
    border-bottom: 1px solid #1a1a1a;
    margin: 0;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav a[aria-current="page"] {
    border-bottom-color: #1a1a1a;
    border-left: 3px solid var(--accent);
    padding-left: 13px;
  }
  .nav .nav-home { padding-left: 16px; }
  .nav-drawer-extra {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #222;
  }
  .nav-drawer-extra a {
    display: flex;
    align-items: center;
    color: #aaa;
    font-weight: 500;
    font-size: 14px;
    min-height: 48px;
  }
  .nav-drawer-bureaux {
    margin-top: 16px;
    padding: 0 16px 8px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
  }
  .nav-drawer-bureaux strong {
    display: block;
    color: #bbb;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-side {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
    background: transparent;
  }
  .hero-main { border-right: 1px solid var(--line); padding-right: 16px; }
  .hero-mid { padding-left: 16px; padding-right: 0; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card:nth-child(2n) { border-right: 0; padding-right: 0; }
  .story-card:nth-child(2n+1) { padding-left: 0; }
  .story-card:nth-child(n+3) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .region-grid { grid-template-columns: 1fr 1fr; }
  .region-col:nth-child(2n) { border-right: 0; padding-right: 0; }
  .region-col:nth-child(2n+1) { padding-left: 0; }
  .region-col:nth-child(n+3) {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  /* 5th region column spans full when odd last row */
  .region-col:nth-child(5) {
    grid-column: 1 / -1;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .dual-rail { grid-template-columns: 1fr; }
  .dual-rail-main {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
  }
  .dual-rail-side { padding-left: 0; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-col {
    border-right: 0;
    padding: 0 0 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .strip-col:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .opinion-row { grid-template-columns: 1fr; }
  .opinion-card {
    border-right: 0;
    padding: 0 0 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .opinion-card:last-child { border-bottom: 0; }
  .story-page { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  .roster-grid { grid-template-columns: 1fr; }
  .roster-card { border-right: 0; }
  .markets-note { margin-left: 0; width: 100%; }
  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
  }
  .topbar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}

@media (max-width: 640px) {
  .wrap { width: min(100% - 32px, var(--max)); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-main, .hero-mid {
    border-right: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-main { padding-right: 0; }
  .hero-mid { padding-left: 0; }
  .hero-side { padding-top: 14px; }
  .hero-main h1 {
    font-size: clamp(1.4rem, 6.5vw, 1.85rem);
  }
  .story-grid { grid-template-columns: 1fr; }
  .story-card {
    border-right: 0;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .story-card:last-child { border-bottom: 0; margin-bottom: 0; }
  .region-grid { grid-template-columns: 1fr; }
  .region-col {
    border-right: 0;
    padding: 0 0 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .region-col:nth-child(5) { grid-column: auto; }
  .section-list article { grid-template-columns: 1fr; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .mast-meta { display: none; }
  .topbar .desk-note { max-width: 100%; }
  .topbar-links { display: none; } /* available in drawer */
  .just-in .wrap {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
  .just-in-list {
    gap: 16px;
  }
  .just-in-list a {
    white-space: normal;
    max-width: 42ch;
    line-height: 1.35;
  }
  .just-in-list a:nth-child(n+3) { display: none; }
  .just-in-more {
    display: inline-flex;
  }
  .story-body .prose p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
  }
  .story-body h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
  .story-body .dek { font-size: 1.05rem; }
  .prose-page {
    padding: 20px 0 40px;
  }
  .prose-page p, .prose-page li {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  .section { padding: 22px 0; }
  .markets-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    max-width: 100%;
  }
  .markets-chips .chip { flex: 0 0 auto; }
  .brand-mark {
    font-size: clamp(1.1rem, 4.8vw, 1.45rem);
  }
  .brand-tag {
    font-size: 9px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .wrap { width: min(100% - 28px, var(--max)); }
  .hero-main h1 {
    font-size: clamp(1.3rem, 6.2vw, 1.65rem);
  }
  .just-in .wrap {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .just-in-list {
    flex: 1 1 calc(100% - 90px);
    min-width: 0;
  }
  .just-in-list a:nth-child(n+2) { display: none; }
  .just-in-list a {
    white-space: normal;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .just-in-more {
    flex: 1 1 100%;
    padding: 4px 0 2px;
    min-height: 40px;
    justify-content: flex-start;
  }
  .brand-tag { display: none; } /* save masthead height at phone-S */
  .latest-list a { font-size: 13px; }
  .section-label { font-size: 11px; }
  .page-hero { padding: 20px 0 6px; }
  .page-hero h1 { font-size: clamp(1.4rem, 6.5vw, 1.85rem); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav { transition: none; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}


/* Overnight polish: density + consistent placeholder tones */
.hero-main, .hero-mid, .hero-side { padding: 16px 14px; }
.hero-main { padding-left: 0; }
.hero-side { padding-right: 0; }
.hero-main h1 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin: 0 0 8px; }
.hero-main .dek { font-size: 0.98rem; margin-bottom: 8px; }
.hero-art { margin-bottom: 10px; }
.hero-mid article + article { margin-top: 12px; padding-top: 12px; }
.hero-mid h2 { font-size: 1.05rem; }
.latest-list li { padding: 7px 0; }
.latest-list a { font-size: 13px; }
.section { margin-top: 28px; }
.story-card { padding: 0 12px; }
.story-card h3 { font-size: 0.98rem; margin: 0 0 6px; }
.story-card .thumb, .hero-mid .thumb, .section-list .thumb {
  background: linear-gradient(145deg, #2a2a2a, #4a5560);
}
.thumb-tone-politics { background: linear-gradient(145deg, #1a1a2a, #404060) !important; }
.thumb-tone-business { background: linear-gradient(145deg, #1a2a22, #3a5548) !important; }
.thumb-tone-security { background: linear-gradient(145deg, #2a1a1a, #554030) !important; }
.thumb-tone-east { background: linear-gradient(145deg, #1a222a, #305060) !important; }
.thumb-tone-energy { background: linear-gradient(145deg, #1a2a1a, #3a5540) !important; }
.thumb-tone-sport { background: linear-gradient(145deg, #1a2a2a, #2a5548) !important; }
.thumb-tone-culture { background: linear-gradient(145deg, #2a1a2a, #553050) !important; }
.hero-art.thumb-tone-politics { background: linear-gradient(135deg, #12121c 0%, #2a2a44 50%, #1a2430 100%); }
.energy-list li { padding: 12px 0; }
.region-col ul li { padding: 5px 0; font-size: 13.5px; }
.just-in-list a { font-size: 12.5px; }
.thumb-tone-tech{background:linear-gradient(135deg,#0f3d3e,#2a9d8f);}


/* ========== PASS 5 — institutional Bloomberg UX polish ========== */

/* Typography rhythm */
body { font-size: 16px; line-height: 1.55; }
.story-body .prose {
  font-feature-settings: "kern" 1, "liga" 1;
}
.story-body .prose p {
  margin: 0 0 1.15em;
}
.story-body .prose h2 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  margin: 1.55em 0 0.55em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.story-body .prose h2:first-child { margin-top: 0.4em; }
.story-body .dek {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.story-body .byline-block {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 14px;
  padding-bottom: 14px;
}
.story-body .byline-block time {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #777;
}
.share-bar {
  margin: 0 0 26px;
  padding: 0 0 14px;
  gap: 6px;
}

/* Section rules — double rule institutional */
.section-label {
  border-bottom: 0;
  padding-bottom: 10px;
  margin-bottom: 18px;
  position: relative;
  box-shadow:
    0 1px 0 var(--ink),
    0 3px 0 var(--ink);
}
.region-col h3,
.strip-col h3,
.latest-head,
.story-rail h2 {
  box-shadow:
    0 1px 0 var(--ink),
    0 3px 0 var(--ink);
  border-bottom: 0;
  padding-bottom: 10px;
}

/* Hero image treatment — reserved aspect + vignette, avoids CLS */
.hero-art,
.story-card .thumb,
.hero-mid .thumb,
.section-list .thumb {
  min-height: 0;
  background-color: #1a1a1a; /* solid fallback before gradient paints */
  contain: layout paint;
}
.hero-art {
  aspect-ratio: 16 / 10;
  min-height: 180px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%);
  pointer-events: none;
}
.hero-art::after {
  /* keep label on top of vignette */
  z-index: 1;
}
.hero-mid .thumb,
.story-card .thumb {
  min-height: 96px;
  border: 1px solid rgba(0,0,0,0.06);
}
.section-list .thumb {
  min-height: 72px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Markets topic chips — ticker feel, still not live prices */
.markets-strip {
  background: #fafafa;
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 0;
}
.markets-strip .wrap {
  gap: 10px;
}
.markets-label {
  padding: 4px 8px 4px 0;
  border-right: 2px solid var(--ink);
  margin-right: 2px;
  color: var(--ink);
  font-size: 10px;
}
.markets-chips .chip {
  background: #fff;
  border-color: #d8d8d8;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 0;
}
.markets-chips .chip:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.markets-note {
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* Key facts + pull quote */
.key-facts {
  background: var(--bg-rail);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  padding: 14px 16px 12px;
  margin: 0 0 1.4em;
  max-width: 68ch;
}
.key-facts h2 {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  color: var(--ink);
}
.key-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.key-facts li {
  position: relative;
  padding: 6px 0 6px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.key-facts li:last-child { border-bottom: 0; }
.key-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.pull-quote {
  margin: 1.5em 0 1.6em;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  max-width: 62ch;
}
.pull-quote p {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px !important;
  max-width: none !important;
}
.pull-quote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Related footers */
.related {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.related ul {
  display: grid;
  gap: 0;
}
.related li {
  padding: 10px 0;
}
.related a {
  font-size: 1.02rem;
  line-height: 1.3;
}
.related a:hover { color: var(--accent); }

/* Story page spacing */
.story-page {
  padding: 32px 0 56px;
  gap: 44px;
}

/* Homepage density rhythm */
.section { padding: 26px 0; }
.hero-grid { border-top-width: 2px; }

/* Print-friendly story CSS */
@media print {
  .topbar,
  .site-header,
  .nav,
  .nav-overlay,
  .nav-toggle,
  .markets-strip,
  .just-in,
  .share-bar,
  .story-rail,
  .site-footer,
  .related,
  .nav-drawer-extra {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    line-height: 1.45;
  }
  .wrap { width: 100%; max-width: none; }
  .story-page {
    display: block;
    padding: 0;
  }
  .story-body h1 {
    font-size: 22pt;
    margin-bottom: 8pt;
  }
  .story-body .dek {
    font-size: 12pt;
    color: #222;
  }
  .story-body .prose p {
    font-size: 11pt;
    max-width: none;
    orphans: 3;
    widows: 3;
  }
  .story-body .prose h2 {
    font-size: 14pt;
    page-break-after: avoid;
  }
  .key-facts, .pull-quote {
    break-inside: avoid;
    border-color: #000;
  }
  .byline-block {
    border-bottom: 1px solid #000;
    color: #000;
  }
  a { color: #000; text-decoration: none; }
  .story-body .prose .source {
    border-left-color: #000;
  }
}

@media (max-width: 640px) {
  .hero-art { min-height: 140px; }
  .key-facts { padding: 12px 12px 10px; }
  .pull-quote p { font-size: 1.15rem; }
  .markets-label {
    border-right: 0;
    padding-right: 0;
    width: 100%;
  }
}

/* ab24-pass8-archive */
.archive-page .archive-lead { max-width: 42rem; color: var(--muted, #4a4a4a); }
.archive-controls { margin: 1.25rem 0 1.5rem; }
.archive-search-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.archive-q {
  width: 100%;
  max-width: 36rem;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font: inherit;
  font-size: 1rem;
  background: #fff;
}
.archive-q:focus {
  outline: 2px solid #0a0a0a;
  outline-offset: 2px;
  border-color: #0a0a0a;
}
.archive-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 8px;
}
.archive-chip {
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
}
.archive-chip:hover { border-color: #0a0a0a; }
.archive-chip.is-active {
  background: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}
.archive-chip:focus-visible {
  outline: 2px solid #c41200;
  outline-offset: 2px;
}
.archive-count {
  font-size: 12px;
  color: var(--muted, #4a4a4a);
  font-variant-numeric: tabular-nums;
  margin: 0 0 8px;
}
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid #0a0a0a;
}
.archive-item { border-bottom: 1px solid #e2e2e2; }
.archive-link {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
}
.archive-link:hover .archive-title { color: #c41200; }
.archive-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c41200;
  margin-bottom: 4px;
}
.archive-title {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #0a0a0a;
}
.archive-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #4a4a4a);
  font-family: var(--mono, ui-monospace, monospace);
}
.archive-dek {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: #333;
  max-width: 42rem;
}
.archive-empty { color: var(--muted, #4a4a4a); font-style: italic; }
.archive-foot { margin-top: 2rem; font-size: 0.95rem; }
@media (max-width: 640px) {
  .archive-title { font-size: 1.05rem; }
  .archive-chip { min-height: 44px; }
}

/* Photo pass */
.photo{margin:0 0 10px;}
.photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1a1a2a;}
.photo figcaption{font-size:11px;line-height:1.35;color:#6b6b6b;margin-top:4px;}
.photo figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.photo-thumb figcaption{font-size:10px;}
.photo-story{margin:14px 0 18px;}
.photo-story figcaption{font-size:12px;}
figure.photo{margin:0 0 10px !important;width:100%;max-width:none;}
figure.photo figcaption{font-size:11px !important;line-height:1.35;color:#6b6b6b;font-family:inherit;}
figure.photo-thumb figcaption{font-size:10px !important;}

/* ab24-logo1: image brand (banner on homepage, wordmark elsewhere) */
.brand-mark { line-height: 0; }
.brand-mark picture { display: block; }
.brand-logo { display: block; max-width: 100%; height: auto; }
.brand-logo-wordmark { width: 252px; aspect-ratio: 945 / 120; }
.brand-home .brand-logo-banner { width: 640px; aspect-ratio: 1024 / 341; }
.brand-home .brand-tag { display: none; }
.masthead:has(.brand-home) .masthead-inner { padding: 6px 0; }
.brand-mark-compact { line-height: 0; }
.site-header.is-compact .brand-mark-compact { display: inline-block; }
.brand-logo-compact-img { display: block; height: 20px; width: auto; aspect-ratio: 472 / 60; }
@media (max-width: 960px) {
  .brand-home .brand-logo-banner { width: min(420px, 100%); }
  .brand-logo-wordmark { width: min(210px, 100%); }
}
@media (max-width: 600px) {
  .brand-home .brand-logo-banner { width: min(240px, 100%); aspect-ratio: 945 / 120; }
  .brand-logo-wordmark { width: min(200px, 100%); }
  .masthead:has(.brand-home) .masthead-inner { padding: 12px 0 10px; }
}

/* (legacy election-chart rules replaced by MOBILE1 block below) */

/* ========== MOBILE1 — responsive election viz + sitewide phone polish ========== */

/* Election: HTML-first charts (SVG is desktop/download only) */
.election-chart figcaption{font-size:.9rem;color:#555;margin:0 0 .6rem;line-height:1.45}
.election-chart { margin: 1.5rem 0 2rem; padding: 0; border: 0; max-width: 100%; }
.election-viz {
  background: #0b0d10;
  color: #f2f2f2;
  border-radius: 8px;
  padding: 14px 14px 16px;
  max-width: 100%;
}
.election-viz-note {
  margin: 0 0 14px;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.45;
  color: #b8b8b8;
}
.party-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.party-row { min-width: 0; }
.party-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.party-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.party-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--mono);
}
.party-track {
  height: 12px;
  background: #1c2128;
  border-radius: 999px;
  overflow: hidden;
}
.party-fill {
  display: block;
  height: 100%;
  width: calc(var(--pct) * 1%);
  max-width: 100%;
  background: var(--party, #c41200);
  border-radius: 999px;
}
.party-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #a8a8a8;
  font-variant-numeric: tabular-nums;
}

.outcome-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.outcome-card {
  background: #14181e;
  border: 1px solid #2a313a;
  border-radius: 8px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.outcome-num {
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  line-height: 1.1;
  color: #fff;
}
.outcome-label { font-weight: 700; font-size: 1rem; }
.outcome-hint { font-size: 0.8125rem; color: #a8a8a8; line-height: 1.4; }
.outcome-hung { border-left: 4px solid #e8a317; }
.outcome-majority { border-left: 4px solid #2ecc71; }
.outcome-pending { border-left: 4px solid #7aa2c7; }

.metro-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.metro-card {
  background: #14181e;
  border: 1px solid #2a313a;
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}
.metro-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.metro-name {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  line-height: 1.25;
}
.metro-status {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: #2a313a;
  color: #ddd;
}
.status-hung .metro-status { background: #5a3d08; color: #ffd27a; }
.status-pending .metro-status { background: #1e3a52; color: #9ec9ef; }
.metro-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 10px;
}
.metro-stats dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8e8e8e;
  margin: 0 0 2px;
}
.metro-stats dd {
  margin: 0;
  font-size: 0.9375rem;
  color: #f0f0f0;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.metro-gap {
  display: block;
  margin: 0 0 10px;
  font-size: 0.875rem;
  color: #ffd27a;
}
.metro-gap--uncertain { color: #9ec9ef; }
.metro-progress-track {
  position: relative;
  height: 10px;
  background: #1c2128;
  border-radius: 999px;
  overflow: hidden;
}
.metro-progress-track.is-uncertain .metro-progress-fill {
  background: repeating-linear-gradient(
    -45deg,
    #3d7ea6,
    #3d7ea6 6px,
    #2a5f80 6px,
    #2a5f80 12px
  );
  opacity: 0.9;
}
.metro-progress-fill {
  display: block;
  height: 100%;
  background: #e8a317;
  border-radius: 999px;
  max-width: 100%;
}
.status-hung .metro-progress-fill { background: #e8a317; }
.metro-progress-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #fff;
  opacity: 0.85;
  transform: translateX(-1px);
}
.metro-progress-caption {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #a8a8a8;
  line-height: 1.4;
}

/* Desktop SVG share asset — hidden on phone; shown from tablet up */
.election-chart-desktop { display: none; margin-top: 12px; }
.election-chart-desktop img {
  width: 100%;
  height: auto;
  display: block;
  background: #0a0a0a;
  border-radius: 6px;
}
.election-chart-download {
  margin: 8px 0 0;
  font-size: 0.8125rem;
}
.election-chart-download a { color: #9ec9ef; text-decoration: underline; text-underline-offset: 2px; }

.election-table-details {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
  background: #fff;
}
.election-table-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 12px 14px;
  min-height: 44px;
  list-style: none;
  display: flex;
  align-items: center;
}
.election-table-details > summary::-webkit-details-marker { display: none; }
.election-table-details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
}
.election-table-details[open] > summary::before { content: "▾"; }
.election-table-details .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 12px 14px;
  margin: 0;
  max-width: 100%;
}
.election-table-details .table-wrap::before {
  content: "Swipe sideways to see all columns →";
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  margin: 0 0 8px;
}
.election-table-details table {
  width: max-content;
  min-width: 280px;
  max-width: none;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.875rem;
}
.election-table-details .table-wrap--wide table {
  min-width: 650px;
}
.election-table-details .table-wrap:not(.table-wrap--wide)::before {
  content: none;
  display: none;
}
.election-table-details th,
.election-table-details td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.election-table-details caption {
  text-align: left;
  font-weight: 600;
  margin: 0 0 0.5rem;
  padding: 0 2px;
}
.election-faq h3 { margin-top: 1.2rem; font-size: 1.05rem; }

@media (min-width: 480px) {
  .outcome-cards { grid-template-columns: repeat(3, 1fr); }
  .metro-stats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .election-viz { padding: 18px 18px 20px; }
  .metro-cards { grid-template-columns: 1fr 1fr; }
  .election-chart-desktop { display: block; }
}

/* Sitewide mobile polish */
html { overflow-x: clip; }
.wrap { max-width: var(--max); }
img, svg, video, iframe { max-width: 100%; height: auto; }
.story-body, .story-body .prose, .election-chart, .photo {
  min-width: 0;
  max-width: 100%;
}
.story-body .prose > * { max-width: 100%; }
.story-body .prose table { display: block; max-width: 100%; overflow-x: auto; }

/* Visible Menu label beside hamburger on small screens */
.nav-toggle {
  gap: 0;
  width: 44px;
}
.nav-toggle-label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 960px) {
  .nav-toggle {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    gap: 8px;
  }
  .nav-toggle-label { display: inline; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-label::after { content: none; }
}

@media (max-width: 430px) {
  .wrap { width: min(100% - 24px, var(--max)); }
  .brand-logo-wordmark { width: min(168px, 58vw); }
  .brand-home .brand-logo-banner { width: min(200px, 70vw); }
  .story-body h1 {
    font-size: clamp(1.4rem, 6.8vw, 1.85rem);
    
  }
  .story-body .dek { font-size: 1.02rem; line-height: 1.45; }
  .share-bar a, .share-bar button { font-size: 12px; padding: 0 12px; }
}

@media (max-width: 360px) {
  .wrap { width: min(100% - 20px, var(--max)); }
  .party-meta { font-size: 0.7rem; }
  .metro-stats { grid-template-columns: 1fr; }
}

/* Prefer stacked story rail earlier so article gets full width on tablets */
@media (max-width: 900px) {
  .story-page { grid-template-columns: 1fr; gap: 24px; }
  .story-rail { order: 2; }
}

/* Avoid first-screen nav overwhelm: sticky header stays compact */
@media (max-width: 960px) {
  .site-header.is-sticky .masthead-inner,
  .site-header.is-sticky .masthead .wrap {
    min-height: 48px;
  }
}

/* ========== EXPLORE1 — clickable election infographics (native HTML+JS) ========== */
.election-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.election-toolbar-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e8e;
  margin-right: 2px;
}
.election-toolbar button {
  appearance: none;
  border: 1px solid #3a4450;
  background: #1a1f26;
  color: #f0f0f0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
}
.election-toolbar button[aria-pressed="true"] {
  background: #c41200;
  border-color: #c41200;
  color: #fff;
}
.election-toolbar button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.election-toolbar .election-clear {
  margin-left: auto;
  background: transparent;
  border-color: #555;
}

.party-row.is-interactive,
.outcome-card.is-interactive,
.metro-card.is-interactive {
  position: relative;
}
.election-expand {
  margin: 0;
  border: 0;
}
.election-expand > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
  outline-offset: 2px;
}
.election-expand > summary::-webkit-details-marker { display: none; }
.party-summary,
.outcome-summary,
.metro-summary {
  display: block;
  position: relative;
  padding-right: 4.5rem; /* room for Details hint */
  min-height: 44px;
}
.election-tap-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b0d10;
  background: #ffd27a;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}
.election-expand[open] > summary .election-tap-hint {
  background: #fff;
  color: #0b0d10;
}
.election-expand > summary:focus-visible {
  outline: 2px solid #ffd27a;
  outline-offset: 2px;
}
.election-expand[open] > summary {
  background: rgba(255,255,255,0.04);
}
.party-summary-main { display: block; }
.party-summary .party-row-top { display: flex; }
.party-summary .party-track { display: block; margin-top: 4px; }
.party-summary .party-meta { display: flex; }

.election-panel {
  margin: 10px 0 4px;
  padding: 12px 12px 10px;
  background: #10141a;
  border: 1px solid #2a313a;
  border-left: 3px solid #ffd27a;
  border-radius: 0 6px 6px 0;
  color: #e8e8e8;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.election-panel p { margin: 0 0 0.75em; }
.election-panel p:last-child { margin-bottom: 0; }
.election-panel-facts {
  list-style: disc;
  margin: 0 0 0.75em;
  padding-left: 1.2rem;
}
.election-panel-facts li { margin: 0 0 0.35em; }
.election-panel-caveat {
  font-size: 0.75rem;
  color: #9a9a9a;
  line-height: 1.4;
}
.outcome-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4.5rem 4px 0;
}
.metro-summary .metro-card-head { padding-right: 0; }
.metro-card.is-interactive[hidden] { display: none !important; }

/* Desktop hover affordance (optional); all actions work on click/tap/keyboard */
@media (hover: hover) and (pointer: fine) {
  .election-expand > summary:hover {
    background: rgba(255,255,255,0.06);
  }
}
@media (max-width: 430px) {
  .election-toolbar button { font-size: 0.75rem; padding: 0 10px; }
  .party-summary,
  .outcome-summary,
  .metro-summary { padding-right: 4.25rem; }
}


/* ========== HEADLINE-HYPHENS + HERO SHARE (browser QA 390) ========== */
.story-body h1,
.hero-main h1,
.page-hero h1,
h1 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.story-body h1 {
  font-size: clamp(1.45rem, 5.2vw, 2.35rem);
  line-height: 1.22;
}

/* Phone: hide tiny OG share graphic as primary explainer; show key-number jump card */
.election-hero-share { margin: 14px 0 18px; }
.election-hero-share .photo-story { margin: 0; }
.election-phone-keynums {
  display: none;
  background: #0b0d10;
  color: #f2f2f2;
  border-radius: 8px;
  padding: 16px 14px 14px;
  margin: 14px 0 18px;
}
.election-phone-keynums .ekn-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8b8b8;
  margin: 0 0 10px;
}
.election-phone-keynums .ekn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
  list-style: none;
  padding: 0;
}
.election-phone-keynums .ekn-grid li {
  background: #14181e;
  border: 1px solid #2a313a;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.election-phone-keynums .ekn-num {
  display: block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #fff;
}
.election-phone-keynums .ekn-cap {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #a8a8a8;
  line-height: 1.35;
}
.election-phone-keynums .ekn-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 0 14px;
  border-radius: 6px;
  background: #c41200;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  text-align: center;
}
.election-phone-keynums .ekn-jump:hover { background: #9a0e00; color: #fff !important; }
.election-share-expand {
  display: none;
  margin-top: 8px;
  font-size: 0.8125rem;
}
.election-share-expand a { color: #9ec9ef; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .election-hero-share { display: none; } /* tiny OG text unreadable as primary */
  .election-phone-keynums { display: block; }
  .election-share-expand { display: block; }
}
@media (min-width: 641px) {
  .election-phone-keynums { display: none !important; }
}
@media (max-width: 640px) {
  .election-table-details .table-wrap::before { content: "Swipe sideways to see all columns →"; }
}
@media (min-width: 700px) {
  .election-table-details .table-wrap::before { content: none; display: none; }
}


/* MORI product hero — portrait contain, no weird crop */
.photo.photo-product img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  background: #d6c7b5;
  width: 100%;
  height: auto;
  max-height: min(72vh, 860px);
}
.photo.photo-product { margin: 14px 0 18px; }
@media (max-width: 640px) {
  .photo.photo-product img { max-height: min(70vh, 640px); }
}

/* ========== GEO1 — national→province→municipality explorer ========== */
.geo-explorer {
  margin: 1.75rem 0 2rem;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
  max-width: 100%;
}
.geo-explorer-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0 0 6px;
}
.geo-explorer-note,
.geo-status-line {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
}
.geo-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
  min-width: 0;
  max-width: 100%;
}
.geo-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  min-width: 0;
}
.geo-trail-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
}
.geo-trail-item:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: #888;
  font-weight: 600;
}
.geo-trail-item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #0b57d0;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.geo-trail-item.is-current span {
  font-weight: 750;
  color: #111;
  overflow-wrap: anywhere;
}
.geo-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.geo-nav-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.35;
}
.geo-switchers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}
@media (min-width: 640px) {
  .geo-switchers { grid-template-columns: 1fr 1fr; }
}
.geo-switch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.geo-switch-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
}
.geo-select {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 0 36px 0 12px;
  border: 1px solid #c5ced8;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
  color: #111;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.geo-select:disabled {
  color: #777;
  background-color: #f3f5f7;
}
.geo-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.geo-btn {
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.geo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.geo-btn--link { background: #0b0d10; color: #fff; border-color: #0b0d10; }
.geo-head h3 { margin: 0 0 6px; font-size: 1.2rem; }
.geo-lede { margin: 0 0 12px; color: #444; font-size: 0.95rem; line-height: 1.45; }
.geo-sub { margin: 18px 0 10px; font-size: 1.05rem; }
.geo-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
.geo-progress-item { min-width: 0; }
@container geo-details (min-width: 360px) {
  .geo-progress { grid-template-columns: 1fr 1fr; }
}
.geo-progress-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 10px 12px;
}
.geo-k { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: #777; margin-bottom: 2px; }
.geo-v { font-size: 0.9375rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; }
.geo-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@container geo-details (min-width: 420px) {
  .geo-card-list { grid-template-columns: 1fr 1fr; }
}
.geo-card {
  width: 100%;
  text-align: left;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
}
.geo-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.geo-card:hover { border-color: #111; }
.geo-card-title { font-weight: 700; font-size: 1rem; }
.geo-card-meta { font-size: 0.8125rem; color: #555; line-height: 1.35; }
.geo-card-hint {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c41200;
}
.geo-status {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eee;
}
.geo-status--hung { background: #5a3d08; color: #ffd27a; }
.geo-status--maj { background: #1e4d2b; color: #b6f0c4; }
.geo-status--pending { background: #1e3a52; color: #9ec9ef; }
.geo-details,
.geo-shell,
.geo-chrome,
.geo-nav,
.geo-switchers,
.geo-map-viewport,
.geo-names-panel,
.geo-explorer [data-geo-view] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.geo-details {
  container-type: inline-size;
  container-name: geo-details;
}
.geo-details .table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
}
.geo-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
  table-layout: fixed;
}
.geo-table th,
.geo-table td {
  padding: 0.5rem 0.45rem;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.geo-table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.4rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Narrow default: Party + Support only so % stays fully visible */
.geo-table th:nth-child(n+3),
.geo-table td:nth-child(n+3) {
  display: none;
}
.geo-table th:nth-child(1),
.geo-table td:nth-child(1) {
  width: auto;
}
.geo-table th:nth-child(2),
.geo-table td:nth-child(2) {
  width: 4.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
@container geo-details (min-width: 520px) {
  .geo-table th:nth-child(3),
  .geo-table td:nth-child(3) {
    display: table-cell;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: right;
    width: 5.75rem;
    overflow-wrap: normal;
    word-break: normal;
  }
  .geo-table th:nth-child(2),
  .geo-table td:nth-child(2) {
    width: 4.5rem;
  }
}
/* Full 5-col only when details pane is truly wide enough */
@container geo-details (min-width: 700px) {
  .geo-table th:nth-child(n+3),
  .geo-table td:nth-child(n+3) {
    display: table-cell;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: normal;
  }
  .geo-table th:nth-child(3),
  .geo-table td:nth-child(3),
  .geo-table th:nth-child(4),
  .geo-table td:nth-child(4),
  .geo-table th:nth-child(5),
  .geo-table td:nth-child(5) {
    text-align: right;
    width: auto;
  }
}
.geo-callout {
  background: #fff8e8;
  border-left: 3px solid #e8a317;
  padding: 10px 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.geo-empty { color: #666; font-size: 0.95rem; }
/* GEO1 MAP1b — IEC MapData SVG (WebMercator, munic mosaic, no permanent labels) */
.geo-map-stage {
  min-height: 280px;
  margin: 0 0 14px;
}
.geo-map-stage--detail {
  min-height: 0;
  padding: 10px 12px;
  background: #f4f6f8;
  border: 1px solid #dde3ea;
  border-radius: 8px;
}
.geo-map-stage-note {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.4;
}
.geo-explorer {
  container-type: inline-size;
  container-name: geo;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  scroll-margin-top: 56px;
}
.geo-map-wrap {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}
.geo-map-figure { margin: 0; }
.geo-map-caption {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #222;
  margin: 0 0 8px;
  font-weight: 500;
}
.geo-map-focus {
  margin: 0 0 8px;
  min-height: 1.35em;
  padding: 8px 10px;
  background: #0b0d10;
  color: #fff;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.35;
}
.geo-map {
  display: block;
  aspect-ratio: 1000 / 880;
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  background: #9fd9ea;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  touch-action: manipulation;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.geo-map--province { max-width: 680px; }
.geo-map-sea { pointer-events: none; }
.geo-map-hit { cursor: pointer; outline: none; }
.geo-map-hit--province .geo-map-province-outline {
  fill: #fff;
  fill-opacity: 0;
  stroke: #111;
  stroke-width: 1.7;
  pointer-events: all;
}
.geo-map-mosaic .geo-map-munic {
  pointer-events: none;
}
.geo-map-hit--province:hover .geo-map-province-outline,
.geo-map-hit--province:focus .geo-map-province-outline,
.geo-map-hit--province:focus-visible .geo-map-province-outline,
.geo-map-hit.is-focus .geo-map-province-outline {
  stroke: #0047ba;
  stroke-width: 3;
  fill: #0047ba;
  fill-opacity: 0.08;
}
.geo-map-hit--munic:hover .geo-map-region,
.geo-map-hit--munic:focus .geo-map-region,
.geo-map-hit--munic:focus-visible .geo-map-region,
.geo-map-hit.is-focus .geo-map-region {
  stroke: #0047ba;
  stroke-width: 2.2;
  filter: brightness(1.06);
}
.geo-map-attr {
  margin: 6px 0 0;
  font-size: 0.6875rem;
  color: #666;
  line-height: 1.4;
}
.geo-map-legend {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.8125rem;
  align-items: center;
  background: #f4f7fa;
  border: 1px solid #d5dde6;
  border-radius: 6px;
}
.geo-map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.geo-swatch {
  width: 14px; height: 14px; border-radius: 2px;
  border: 1px solid #222; flex-shrink: 0;
}
.geo-map-legend-note {
  flex-basis: 100%;
  color: #555;
  font-size: 0.75rem;
  margin-top: 2px;
}
.geo-map-names-title {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}
.geo-map-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 6px;
}
.geo-map-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.geo-map-name:hover, .geo-map-name:focus-visible {
  border-color: #0047ba;
  outline: 2px solid #0047ba;
  outline-offset: 1px;
}
.geo-map-name-label { font-weight: 650; font-size: 0.8125rem; line-height: 1.25; }
.geo-map-name-meta { font-size: 0.6875rem; color: #555; line-height: 1.3; }
@media (max-width: 520px) {
  .geo-map { border-radius: 4px; }
  .geo-map-names { grid-template-columns: 1fr 1fr; }
  .geo-map-focus { font-size: 0.8125rem; }
}



.geo-shell { display: flex; flex-direction: column; gap: 10px; }
.geo-chrome { background: #fff; padding: 2px 0 6px; }
.geo-explorer-title { margin: 0 0 4px; font-size: 1.15rem; }
.geo-explorer-note { margin: 0 0 6px; font-size: 0.875rem; line-height: 1.4; color: #444; }
/* Mobile/default: map is normal-flow persistent DOM — scroll to results without overlay */
.geo-map-viewport {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: 10px;
  padding: 8px 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.geo-map-viewport .geo-map {
  width: 100%;
  max-height: min(48vh, 380px);
  height: auto;
  aspect-ratio: auto;
  display: block;
}
.geo-btn--up { background: #fff; }
.geo-map-region--selected {
  filter: drop-shadow(0 0 1px #000);
}
.geo-map-hit--context .geo-map-region--context { cursor: pointer; }
.geo-map-hit.is-selected { outline: none; }
.geo-names-panel { margin-top: 4px; }
.geo-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.geo-lede { margin: 0; font-size: 0.875rem; color: #555; line-height: 1.35; }
.geo-nav { margin-bottom: 8px; }
/* Side-by-side only when explorer content width is enough (not viewport). */
@container geo (min-width: 900px) {
  .geo-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "chrome chrome"
      "map details"
      "names details";
    column-gap: 16px;
    align-items: start;
  }
  .geo-chrome { grid-area: chrome; }
  .geo-map-viewport {
    grid-area: map;
    position: sticky;
    top: 64px;
    align-self: start;
  }
  .geo-map-viewport .geo-map { max-height: min(62vh, 520px); }
  .geo-names-panel { grid-area: names; }
  .geo-details { grid-area: details; min-width: 0; }
}