/* ============================================================================
   the406.news — main.css
   Ported from design/homepage-v4.html <style> block (Phase 3).
   This is the single source of truth for site styles. Editing the design
   HTML no longer affects production — change styles here.
   ============================================================================ */

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
/* Light is the default reading surface (matches every top-100 news site —
   NYT/WaPo/WSJ/Bloomberg/Politico/Axios all default light; dark-as-default
   is the outlier). Every value below is WCAG AA-verified (>=4.5:1) against
   its worst-case background — computed, not eyeballed. Dark stays available
   as an explicit opt-in via :root[data-theme="dark"] below, and the
   masthead/conditions-bar/primary-nav stay pinned dark in BOTH modes
   further down — that's the brand identity, not a reading-mode choice. */
:root {
  /* Core palette */
  /* --ink switched from the original cream #f7f6f0 to pure white -- mocked
     up live against /politics/, confirmed it reads closer to how top-100
     news sites (NYT/WaPo/WSJ) actually present light mode, and makes the
     gold/navy kicker accents pop instead of blending into a warm tint.
     --rule is cooled from its old tan-gray to a neutral gray to match (a
     warm border read muddy against pure white); --surface/--lift stay
     white, so .article-card's hover state (background: var(--surface))
     needed a dedicated --hover tint below to stay visible now that the
     card's resting background equals --surface. */
  --ink:      #ffffff;
  --deep:     #efede3;
  --surface:  #ffffff;
  --hover:    #f7f7f7;
  --lift:     #ffffff;
  --rule:     #e4e4e4;
  --rule-hi:  #ccc6b0;

  /* Text */
  --tx-max:   #16171e;
  --tx-hi:    #2b2c34;
  --tx-mid:   #52545f;
  --tx-low:   #5f616b;
  /* Darkened from #64666f -- confirmed live it read as washed-out/low-
     contrast at the 8-9px sizes it's used at (bylines, timestamps,
     kickers' neighboring meta text), especially once the background went
     white and had nothing warm left to visually prop it up. */
  --tx-ghost: #44464e;

  /* Brand accents */
  --gold:     #7f621a;
  --gold-d:   #6e5613;
  --gold-pale: rgba(150, 117, 28, .08);
  --pine:     #2d5a3d;
  --pine-hi:  #296b43;
  --pine-pale: rgba(45, 90, 61, .08);
  --river-hi: #146984;

  /* Channel colors — darkened from their dark-mode counterparts (below)
     so each still clears 4.5:1 as kicker/section-label text on a light
     background; ch-hunt/ch-con/ch-out dropped, they were unused leftovers
     from the outdoors-era brand. */
  --ch-yell:  #9a5410;  /* Energy — burnt orange, kept distinct from --gold */
  --ch-fish:  #106c8a;  /* Tech — teal */
  --ch-rod:   #a8392f;  /* Elections / Courts — brick red */
  --ch-land:  #266a35;  /* Public Lands / Housing — forest */
  --ch-biz:   #8a5a1f;  /* Business — copper */
  --ch-gov:   #3d5a99;  /* Politics — navy */

  /* Typography */
  --ff-d: 'Cormorant Garamond', Georgia, serif;
  --ff-c: 'Barlow Condensed', sans-serif;
  --ff-s: 'Barlow', sans-serif;
  --ff-m: 'DM Mono', monospace;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-s);
  background: var(--ink);
  color: var(--tx-hi);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.6;
}

/* Film grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fade-1 { animation: fadeUp .5s ease both; }
.fade-2 { animation: fadeUp .5s .1s ease both; }
.fade-3 { animation: fadeUp .5s .2s ease both; }
.fade-4 { animation: fadeUp .5s .3s ease both; }

/* ═══════════════════════════════════════
   CONDITIONS BAR (top strip)
═══════════════════════════════════════ */
.conditions-bar {
  background: var(--deep);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  overflow: hidden;
}
.conditions-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.cb-label {
  font-family: var(--ff-c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  padding-right: 18px;
  border-right: 1px solid var(--rule-hi);
  margin-right: 18px;
  flex-shrink: 0;
}
.conditions-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;   /* clip the marquee to its own box so it never overlaps the status/label */
}
.conditions-ticker {
  display: flex;
  gap: 0;
  animation: tickerMove 45s linear infinite;
  white-space: nowrap;
  width: max-content;
}
/* WCAG 2.2.2 (Pause, Stop, Hide): an auto-moving marquee needs a way to stop
   it. Hover covers mouse users, focus-within covers keyboard users tabbing
   into a headline link, and prefers-reduced-motion covers anyone who's told
   their OS they don't want animation at all. */
.conditions-viewport:hover .conditions-ticker,
.conditions-viewport:focus-within .conditions-ticker {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .conditions-ticker { animation: none; }
}
.ct-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-right: 1px solid var(--rule);
  font-family: var(--ff-c);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--tx-mid);
}
.ct-name { color: var(--tx-hi); }
.ct-item:hover { color: var(--tx-hi); }

/* ═══════════════════════════════════════
   MASTHEAD
═══════════════════════════════════════ */
.masthead {
  /* Fallback if the photo below fails to load — same gradient the SVG
     ridgeline backdrop sat on before this. */
  background: linear-gradient(180deg, #0c0e18 0%, #0e101c 55%, #11131e 100%);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 0;
  position: relative;
  overflow: hidden;
}
/* Storm light over the Bridgers, shot by Sam. Already pre-darkened and
   saturation-reduced at export time (not via a runtime CSS filter) so the
   shipped JPEG compresses smaller — this file loads on every single page.
   The scrim on top is still needed: WCAG-verified against the masthead's
   lowest-contrast text (edition-tag/date-line/logo-sub, all --tx-low) with
   real sampled pixels, not eyeballed — every one clears >=4.5:1. */
.mh-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/storm-peaks.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 38%;
  pointer-events: none;
}
.mh-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(9,11,20,.72) 0%, rgba(9,11,20,.68) 45%, rgba(9,11,20,.85) 100%);
  pointer-events: none;
}
.masthead-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.masthead-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 16px;
}
.masthead-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.edition-tag {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-low);
  border: 1px solid var(--rule-hi);
  padding: 3px 10px;
}
.date-line {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
  letter-spacing: 1px;
}
.masthead-logo {
  text-align: center;
}
.logo-num {
  font-family: var(--ff-d);
  font-size: clamp(48px, 7vw, 82px);
  font-weight: 700;
  color: var(--tx-max);
  letter-spacing: -2px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
/* The Numeral Mark: the zero in "406" redrawn as a ring + center dot. */
.logo-zero {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.74em;
  margin: 0 0.02em;
  top: 0.03em;
}
.logo-zero svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-the {
  font-family: var(--ff-c);
  font-weight: 700;
  font-size: 0.2em;
  letter-spacing: 0.14em;
  color: var(--tx-low);
  text-transform: uppercase;
  align-self: flex-start;
  margin-right: 0.14em;
  margin-top: 0.06em;
}
.logo-word {
  font-family: var(--ff-d);
  font-style: italic;
  font-weight: 600;
  font-size: 0.66em;
  color: var(--gold);
  margin-left: 0.16em;
  align-self: center;
}
.logo-sub {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--tx-low);
  margin-top: 2px;
  display: block;
}
.logo-explainer {
  font-family: var(--ff-d);
  font-style: italic;
  font-size: 11px;
  color: var(--tx-mid);
  margin-top: 2px;
  display: block;
}
.masthead-right {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.mh-btn {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  cursor: pointer;
  transition: all .15s;
  border: none;
}
.mh-btn-ghost {
  background: transparent;
  border: 1px solid var(--rule-hi);
  color: var(--tx-low);
}
.mh-btn-ghost:hover { border-color: var(--tx-mid); color: var(--tx-hi); }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; }
.mh-btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.mh-btn-gold:hover { background: #d9b85c; }

/* Ridge divider */
.ridge-divider {
  width: 100%;
  height: 18px;
  margin: 8px 0 0;
  overflow: hidden;
  opacity: .25;
}
.ridge-divider svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════
   PRIMARY NAV
═══════════════════════════════════════ */
.primary-nav {
  background: var(--deep);
  border-bottom: 2px solid var(--gold-d);
  /* position:relative (no z-index) puts nav in the same painting step as
     .mh-photo-bg/.mh-scrim, ordered after them by DOM order — without this,
     the backdrop (an absolutely-positioned sibling spanning the full
     .masthead height, nav included) paints over nav's own background,
     since a non-positioned block like nav paints earlier than any
     positioned sibling regardless of DOM order. Bled through and obscured
     the nav text in production (first with the SVG ridgeline, would have
     recurred with the photo) before this was caught. */
  position: relative;
}
.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 44px;
  font-family: var(--ff-c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-low);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
  white-space: nowrap;
}
.nav-item:hover { color: var(--tx-hi); border-bottom-color: var(--rule-hi); }
.nav-item.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   CHANNEL STRIP (horizontal scrolling beat pills)
═══════════════════════════════════════ */
.channel-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.channel-strip::-webkit-scrollbar { display: none; }
.channel-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 2px;
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ch-pill:hover { filter: brightness(1.15); }
.ch-pill.active { border-color: currentColor; }
.ch-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ═══════════════════════════════════════
   BREAKING BANNER
═══════════════════════════════════════ */
.breaking-banner {
  background: var(--gold);
  padding: 10px 0;
}
.breaking-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.breaking-label {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.breaking-text {
  font-family: var(--ff-s);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  text-decoration: none;
}
.breaking-text:hover { text-decoration: underline; }
.breaking-time {
  font-family: var(--ff-m);
  font-size: 9px;
  color: rgba(0,0,0,.5);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.breaking-close {
  font-family: var(--ff-s);
  font-size: 16px;
  line-height: 1;
  color: rgba(0,0,0,.55);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 0 2px 4px;
  flex-shrink: 0;
}
.breaking-close:hover { color: var(--ink); }

/* ═══════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════ */
.site-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero-main {
  background: var(--ink);
  padding: 32px 32px 32px 0;
  position: relative;
}
.hero-image {
  /* .hero-image is an <a> tag, inline by default -- without display:block,
     width/aspect-ratio/overflow below are silently ignored, the anchor
     collapses to zero size, and the absolutely-positioned .hero-image-bg
     span inside it (inset:0) has nothing to position against, so a real
     photo never becomes visible even though it loads fine. Same bug,
     same fix, as .ac-image below. */
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
/* Kicker/section-label text color. Bridger assigns each tag one of 7 fixed
   accent_color values (scripts/create_tags.py) meant to read on both a
   light and a dark reading surface — no single raw hue clears WCAG 4.5:1
   in both directions (e.g. the raw gold is 7.6:1 on dark but only 1.9:1 on
   light). Rather than bake two versions into Ghost content, blend the raw
   hue 50/50 with the current theme's own high-contrast text color at
   render time — verified >=5.3:1 in light mode and >=7.0:1 in dark mode
   for all 7 accent colors. Falls back to the flat color for browsers
   without color-mix(). */
.hero-kicker, .ss-kicker, .article-kicker, .ac-kicker {
  color: var(--beat-fg, var(--gold));
  color: color-mix(in srgb, var(--beat-fg, var(--gold)) 50%, var(--tx-hi) 50%);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero-kicker::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--ch-yell);
}
.hero-hed {
  font-family: var(--ff-d);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--tx-max);
  line-height: 1.08;
  letter-spacing: -.5px;
  margin-bottom: 14px;
}
.hero-hed em { font-style: italic; color: var(--gold); }
.hero-dek {
  font-family: var(--ff-s);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tx-mid);
  max-width: 580px;
  margin-bottom: 16px;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-byline {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-low);
}
.hero-ai-tag {
  font-family: var(--ff-m);
  font-size: 8px;
  color: var(--pine-hi);
  background: var(--pine-pale);
  padding: 2px 8px;
  border-radius: 2px;
}
.hero-time {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}

/* Hero sidebar */
.hero-sidebar {
  background: var(--ink);
  padding: 24px 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--rule);
}
.sidebar-label {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tx-ghost);
  margin-bottom: 14px;
}
.sidebar-story {
  /* An <a> wrapping block-level <div> children (ss-kicker/ss-hed/ss-meta)
     without display:block hits the "anonymous block box" quirk: the
     anchor's own padding/border-bottom don't wrap the stacked children
     as one box. .rail-item/.list-story already get this right. */
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.sidebar-story:last-child { border-bottom: none; }
.sidebar-story:hover .ss-hed { color: var(--gold); }
.ss-kicker {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ss-hed {
  font-family: var(--ff-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--tx-hi);
  line-height: 1.2;
  margin-bottom: 5px;
  transition: color .15s;
}
.ss-meta {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
.sh-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sh-line {
  width: 24px; height: 3px;
}
.sh-title {
  font-family: var(--ff-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--tx-max);
  letter-spacing: -.3px;
}
.sh-sub {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-low);
  margin-top: 2px;
}
.sh-more {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-low);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color .15s;
}
.sh-more:hover { color: var(--gold); }
.sh-more::after { content: '→'; }

/* ═══════════════════════════════════════
   ARTICLE CARDS
═══════════════════════════════════════ */
.article-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: 0 -24px 32px;
  padding: 0 24px;
}
.article-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: 0 -24px 32px;
  padding: 0 24px;
}
.article-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}
.article-card {
  background: var(--ink);
  padding: 20px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-card:hover { background: var(--hover); }
.article-card:hover .ac-hed { color: var(--gold); }
.ac-image {
  /* Same inline-<a> bug as .hero-image above: without display:block, a
     real photo loads but never becomes visible. */
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--surface);
  margin-bottom: 4px;
  overflow: hidden;
  position: relative;
}
.ac-image.tall { aspect-ratio: 4/3; }
.ac-image-bg {
  /* A <span> with no position:absolute stays display:inline, where
     width/height:100% are silently ignored — the element collapsed to
     zero visible size regardless of what background-image it carried.
     position:absolute forces block-level layout (same fix .hero-image-bg
     already relies on) and fills the parent .ac-image box directly. */
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Was plain "center" -- confirmed live that a tall headshot (official
     congressional portraits run ~4:5) forced into this 16:9 box lands the
     crop window mid-chest to mid-forehead, cutting off the top of the
     head. Biasing up to the same convention .mh-photo-bg already uses
     (50% 38%, see above) keeps full headroom; pushed further up than that
     one because a portrait-oriented source needs a stronger correction
     than a landscape one does to land in the same place. */
  background-position: 50% 20%;
  background-repeat: no-repeat;
  opacity: .6;
}

/* No-photo placeholder — a beat-tinted gradient plus the masthead's own
   ring/dot mark, used on hero/card/article-feature whenever a post has no
   feature_image. --beat is set inline per-post from the tag's accent_color
   (falls back to --gold). Replaces the old outdoors-era Yellowstone
   silhouette, which no longer fits the statewide identity and (a real bug)
   was rendering on every photo, real ones included, via .ac-image::after. */
.ac-image-empty,
.hero-image-empty,
.article-feature-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--surface); /* fallback for browsers without color-mix() */
  background: linear-gradient(155deg, color-mix(in srgb, var(--beat, var(--gold)) 16%, var(--surface)) 0%, var(--surface) 70%);
  /* --surface and the card/page background are now both pure white, so the
     placeholder would otherwise blend straight into its card with nothing
     to show where the image box ends -- confirmed live in the white-bg
     mockup. A hairline border restores that separation without affecting
     real photos, which fill the same box and cover it edge to edge. */
  border: 1px solid var(--rule);
}
.ac-image-empty::before,
.hero-image-empty::before,
.article-feature-empty::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--beat, var(--gold));
}
.hero-image-empty::before { height: 4px; }
.media-mark {
  width: 44%;
  opacity: .16;
  color: var(--beat, var(--gold));
}
.hero-image-empty .media-mark { width: 26%; }
.article-feature-empty .media-mark { width: 20%; }
.ac-kicker {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ac-kicker::before {
  content: '';
  width: 12px; height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.ac-hed {
  font-family: var(--ff-d);
  font-weight: 700;
  color: var(--tx-hi);
  line-height: 1.15;
  letter-spacing: -.2px;
  transition: color .15s;
}
.ac-hed.lg { font-size: 21px; }
.ac-hed.md { font-size: 17px; }
.ac-hed.sm { font-size: 14px; }
.ac-dek {
  font-family: var(--ff-s);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx-mid);
}
.ac-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.ac-time {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}
.ac-ai {
  font-family: var(--ff-m);
  font-size: 8px;
  color: var(--pine-hi);
}

/* ═══════════════════════════════════════
   YELLOWSTONE FEATURE BAND
═══════════════════════════════════════ */
.yell-band {
  background: linear-gradient(to right, #1a1200, #0c0d0b 60%);
  border-top: 1px solid var(--ch-yell);
  border-bottom: 1px solid var(--rule);
  margin: 0 -24px 32px;
  padding: 28px 24px;
}
.yell-band-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
}
.yb-label {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ch-yell);
  margin-bottom: 8px;
}
.yb-title {
  font-family: var(--ff-d);
  font-size: 28px;
  font-weight: 700;
  color: var(--tx-max);
  line-height: 1.1;
  letter-spacing: -.3px;
  margin-bottom: 8px;
}
.yb-body {
  font-family: var(--ff-s);
  font-size: 13px;
  line-height: 1.65;
  color: var(--tx-mid);
}
.yb-cta {
  display: inline-block;
  font-family: var(--ff-c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 11px 20px;
  margin-top: 16px;
  text-decoration: none;
  transition: background .15s;
}
.yb-cta:hover { background: #d9b85c; }
.yb-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ybs-item {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--rule-hi);
  padding: 12px 14px;
}
.ybs-label {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-ghost);
  margin-bottom: 5px;
}
.ybs-val {
  font-family: var(--ff-c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}
.ybs-open  { color: var(--pine-hi); }
.ybs-soon  { color: var(--ch-yell); }
.ybs-alert { color: var(--gold); }
.ybs-note {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
  margin-top: 3px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════
   HUNTING & FISHING SPLIT
═══════════════════════════════════════ */
.hunt-fish-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  margin: 0 -24px 32px;
  padding: 0 24px;
}
.split-col {
  background: var(--ink);
  padding: 24px 24px 24px 0;
}
.split-col + .split-col {
  padding: 24px 0 24px 24px;
  border-left: 1px solid var(--rule);
}

/* ═══════════════════════════════════════
   RODEO TICKER
═══════════════════════════════════════ */
.rodeo-section {
  background: var(--surface);
  border-top: 2px solid var(--ch-rod);
  border-bottom: 1px solid var(--rule);
  margin: 0 -24px 32px;
  padding: 20px 24px;
}
.rodeo-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.rodeo-head {
  flex-shrink: 0;
}
.rodeo-icon {
  font-size: 28px;
  margin-bottom: 6px;
}
.rodeo-title {
  font-family: var(--ff-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--tx-max);
  line-height: 1;
  margin-bottom: 4px;
}
.rodeo-sub {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ch-rod);
}
.rodeo-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rodeo-result-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.rodeo-result-item:last-child { border-bottom: none; }
.rr-event {
  font-family: var(--ff-c);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tx-low);
}
.rr-winner {
  font-family: var(--ff-s);
  font-size: 13px;
  color: var(--tx-hi);
  font-weight: 500;
}
.rr-loc {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}
.rr-score {
  font-family: var(--ff-m);
  font-size: 11px;
  color: var(--ch-rod);
  text-align: right;
}

/* ═══════════════════════════════════════
   PUBLIC LANDS + CONSERVATION ROW
═══════════════════════════════════════ */
.lands-con-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

/* ═══════════════════════════════════════
   LIST STORIES (compact)
═══════════════════════════════════════ */
.story-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.list-story {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.list-story:last-child { border-bottom: none; }
.list-story:hover .ls-hed { color: var(--gold); }
.ls-num {
  font-family: var(--ff-m);
  font-size: 11px;
  color: var(--tx-ghost);
  padding-top: 2px;
  min-width: 20px;
}
.ls-hed {
  font-family: var(--ff-d);
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-hi);
  line-height: 1.2;
  margin-bottom: 4px;
  transition: color .15s;
}
.ls-meta {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}

/* ═══════════════════════════════════════
   CONDITIONS SIDEBAR
═══════════════════════════════════════ */
.conditions-sidebar {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 18px;
}
.cs-title {
  font-family: var(--ff-d);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx-max);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

/* ═══════════════════════════════════════
   BUSINESS & GOVERNMENT ROW
═══════════════════════════════════════ */
.biz-gov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

/* ═══════════════════════════════════════
   NEWSLETTER BAND
═══════════════════════════════════════ */
.newsletter-band {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 -24px 32px;
  padding: 40px 24px;
}
.nl-inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: center;
}
.nl-label {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.nl-title {
  font-family: var(--ff-d);
  font-size: 32px;
  font-weight: 700;
  color: var(--tx-max);
  line-height: 1.1;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}
.nl-title em { font-style: italic; }
.nl-body {
  font-family: var(--ff-s);
  font-size: 14px;
  line-height: 1.7;
  color: var(--tx-mid);
}
.nl-perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.nl-perk {
  font-family: var(--ff-s);
  font-size: 12px;
  color: var(--tx-low);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nl-perk::before {
  content: '✓';
  color: var(--pine-hi);
  font-weight: 700;
  font-size: 11px;
}
.nl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nl-input {
  background: var(--lift);
  border: 1px solid var(--rule-hi);
  color: var(--tx-hi);
  font-family: var(--ff-s);
  font-size: 14px;
  padding: 13px 16px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.nl-input:focus { border-color: var(--gold); }
.nl-input::placeholder { color: var(--tx-ghost); }
.nl-submit {
  background: var(--gold);
  border: none;
  color: var(--ink);
  font-family: var(--ff-c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: background .15s;
}
.nl-submit:hover { background: #d9b85c; }
.nl-fine {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
  text-align: center;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: var(--deep);
  border-top: 1px solid var(--rule);
  padding: 48px 0 20px;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 260px repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.footer-brand .fb-logo {
  font-family: var(--ff-d);
  font-size: 28px;
  font-weight: 700;
  color: var(--tx-max);
  letter-spacing: -.5px;
  margin-bottom: 4px;
}
.footer-brand .fb-logo em { font-style: italic; color: var(--gold); }
.footer-brand .fb-tag {
  font-family: var(--ff-c);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.footer-brand p {
  font-family: var(--ff-s);
  font-size: 12px;
  line-height: 1.65;
  color: var(--tx-ghost);
  margin-bottom: 14px;
}
.footer-brand .fb-dba {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
  line-height: 1.6;
}
.footer-col h5 {
  font-family: var(--ff-c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tx-low);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-family: var(--ff-s);
  font-size: 12px;
  color: var(--tx-ghost);
  margin-bottom: 7px;
  transition: color .12s;
}
.footer-col a:hover { color: var(--tx-mid); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fb-copy {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}
.fb-legal {
  display: flex;
  gap: 16px;
}
.fb-legal a {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
  transition: color .12s;
}
.fb-legal a:hover { color: var(--tx-low); }
.fb-ai-note {
  font-family: var(--ff-m);
  font-size: 9px;
  color: var(--tx-ghost);
}

/* ═══════════════════════════════════════
   AD SLOTS
═══════════════════════════════════════ */
.ad-leaderboard {
  width: 100%;
  height: 90px;
  background: var(--surface);
  border: 1px dashed var(--rule-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}
.ad-label {
  font-family: var(--ff-c);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-ghost);
}

/* ═══════════════════════════════════════
   UTILITIES
═══════════════════════════════════════ */
.divider {
  height: 1px;
  background: var(--rule);
  margin: 28px 0;
}
.mt-0 { margin-top: 0; }
.mb-24 { margin-bottom: 24px; }
.col-gap { padding: 0 20px; }

/* ═══ AI ENGAGEMENT LAYER v4 ═══ */
.ai-strip{background:#080908;border-bottom:1px solid rgba(90,170,116,.15);padding:5px 0;}
.ai-strip-inner{max-width:1440px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.ai-live{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ai-pulse{width:6px;height:6px;border-radius:50%;background:var(--pine-hi);animation:aiPulse 2s ease-in-out infinite;}
@keyframes aiPulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.ai-live-label{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pine-hi);}
.ai-status-text{font-family:var(--ff-m);font-size:9px;color:var(--tx-ghost);}
.ai-status-text strong{color:rgba(90,170,116,.6);}
.ai-member-cta{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pine-hi);border:1px solid rgba(90,170,116,.25);padding:3px 10px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.ai-member-cta:hover{background:rgba(90,170,116,.08);}
.src-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--ff-c);font-size:7px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:1px 7px;border-radius:2px;}
/* Text colors below were originally tuned as light pastels for a dark
   background (2.2-3.6:1 against white — well under the 4.5:1 these tiny
   7px badges need as real text). Darkened every one that doesn't already
   use a theme-aware var(); backgrounds (already low-opacity tints) are
   untouched. */
.sb-nps{background:rgba(74,140,96,.1);color:var(--pine-hi);border:0.5px solid rgba(74,140,96,.2);}
.sb-fwp{background:rgba(74,176,208,.08);color:#1c78a3;border:0.5px solid rgba(74,176,208,.18);}
.sb-gvlt{background:rgba(58,107,42,.1);color:#2f7d3f;border:0.5px solid rgba(58,107,42,.2);}
.sb-prca{background:rgba(139,32,32,.1);color:#a8392f;border:0.5px solid rgba(139,32,32,.2);}
.sb-county{background:rgba(74,74,106,.1);color:#565296;border:0.5px solid rgba(74,74,106,.2);}
.sb-human{background:rgba(201,148,12,.1);color:var(--gold);border:0.5px solid rgba(201,148,12,.25);}
.sb-interview{background:rgba(90,170,116,.1);color:var(--pine-hi);border:0.5px solid rgba(90,170,116,.25);}
.sb-email{background:rgba(150,80,180,.1);color:#8140a8;border:0.5px solid rgba(150,80,180,.2);}
/* politics/business source badges */
.sb-fed{background:rgba(74,74,106,.12);color:#4c56a8;border:0.5px solid rgba(74,74,106,.25);}
.sb-state{background:rgba(201,168,76,.08);color:var(--gold);border:0.5px solid rgba(201,168,76,.2);}
.sb-leg{background:rgba(90,100,150,.12);color:#4d5a99;border:0.5px solid rgba(90,100,150,.25);}
.sb-copp{background:rgba(139,32,32,.1);color:#a03a3a;border:0.5px solid rgba(139,32,32,.22);}
.sb-court{background:rgba(90,80,110,.12);color:#6b5f80;border:0.5px solid rgba(90,80,110,.25);}
.sb-econ{background:rgba(58,107,42,.1);color:#2f7d3f;border:0.5px solid rgba(58,107,42,.2);}
.sb-biz{background:rgba(150,110,40,.1);color:#8a6a1f;border:0.5px solid rgba(150,110,40,.22);}
.sb-university{background:rgba(74,176,208,.08);color:#1c78a3;border:0.5px solid rgba(74,176,208,.2);}
.sb-conservation{background:rgba(74,140,96,.1);color:var(--pine-hi);border:0.5px solid rgba(74,140,96,.2);}
.sb-safety{background:rgba(184,98,42,.1);color:#9a5410;border:0.5px solid rgba(184,98,42,.22);}
/* Dark reading mode: the badges above were darkened for the new light
   default, so they'd fail contrast again in the other direction against a
   dark surface (2.5-3.5:1). Brighten back to values already verified
   >=4.9:1 against dark. */
:root[data-theme="dark"] .sb-fwp, :root[data-theme="dark"] .sb-university { color: #5aacdd; }
:root[data-theme="dark"] .sb-gvlt, :root[data-theme="dark"] .sb-econ      { color: #6aaa5a; }
:root[data-theme="dark"] .sb-prca    { color: #dd6060; }
:root[data-theme="dark"] .sb-county  { color: #9090cc; }
:root[data-theme="dark"] .sb-email   { color: #cc88ff; }
:root[data-theme="dark"] .sb-fed     { color: #9aa6e0; }
:root[data-theme="dark"] .sb-leg     { color: #98a4d8; }
:root[data-theme="dark"] .sb-copp    { color: #dd6a6a; }
:root[data-theme="dark"] .sb-court   { color: #b0a6c8; }
:root[data-theme="dark"] .sb-biz     { color: #d0a860; }
:root[data-theme="dark"] .sb-safety  { color: #d98a4a; }
.ai-label{font-family:var(--ff-m);font-size:8px;color:var(--pine-hi);background:rgba(74,140,96,.08);padding:1px 5px;border-radius:2px;display:inline-flex;align-items:center;gap:3px;}
.ai-dot{width:4px;height:4px;border-radius:50%;background:var(--pine-hi);display:inline-block;}
.ai-label.human{color:var(--gold);background:rgba(201,148,12,.08);}
.ai-dot.human{background:var(--gold);}
.ai-label.opinion{color:var(--river-hi);background:rgba(58,172,204,.08);}
.ai-dot.opinion{background:var(--river-hi);}
.source-chain{font-family:var(--ff-m);font-size:8px;color:var(--tx-ghost);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.sc-link{color:var(--pine-hi);}
.member-banner{background:var(--deep);border-bottom:1px solid var(--rule);display:none;}
.member-banner.visible{display:block;}
.mb-inner{max-width:1440px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:20px;}
.mb-greeting{font-family:var(--ff-c);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--pine-hi);flex-shrink:0;}
.mb-interests{display:flex;align-items:center;gap:6px;flex:1;overflow:hidden;}
.mb-tag{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;white-space:nowrap;}
.mb-cta{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx-low);cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:8px;}
.mb-divider{width:1px;height:14px;background:var(--rule-hi);}
.countdown-band{display:flex;align-items:center;gap:14px;background:rgba(200,120,32,.07);border:0.5px solid rgba(200,120,32,.2);padding:10px 16px;margin-bottom:14px;}
.cb-icon{font-size:14px;flex-shrink:0;}
.cb-text{font-family:var(--ff-c);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--gold);flex:1;}
.cb-days{font-family:var(--ff-m);font-size:11px;color:var(--gold);white-space:nowrap;}
.cb-action{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx-low);cursor:pointer;white-space:nowrap;}
.cb-action:hover{color:var(--gold);}
.flow-widget{background:rgba(42,122,154,.06);border:0.5px solid rgba(42,122,154,.2);padding:12px 14px;margin-bottom:14px;}
.fw-label{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ch-fish);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.fw-alert-badge{font-family:var(--ff-m);font-size:8px;color:var(--pine-hi);background:rgba(74,140,96,.12);padding:1px 7px;border-radius:2px;}
.fwr-set{font-family:var(--ff-m);font-size:8px;color:rgba(74,176,208,.5);cursor:pointer;margin-top:2px;}
.fwr-set:hover{color:var(--ch-fish);}
.alert-prompt{display:flex;align-items:center;gap:10px;background:rgba(74,140,96,.06);border:0.5px solid rgba(74,140,96,.2);padding:9px 14px;margin-top:10px;cursor:pointer;transition:background .12s;}
.alert-prompt:hover{background:rgba(74,140,96,.1);}
.ap-icon{font-size:13px;flex-shrink:0;}
.ap-text{font-family:var(--ff-s);font-size:12px;color:var(--tx-mid);flex:1;line-height:1.4;}
.ap-text strong{color:var(--pine-hi);font-weight:500;}
.ap-cta{font-family:var(--ff-c);font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pine-hi);white-space:nowrap;flex-shrink:0;}
.guide-float{position:fixed;bottom:28px;right:28px;z-index:8000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.guide-bubble{background:var(--pine);border:1px solid var(--pine-hi);width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .2s;box-shadow:0 4px 24px rgba(0,0,0,.4);position:relative;}
.guide-bubble:hover{transform:scale(1.05);background:#3a7050;}
.guide-unread{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--ff-m);font-size:8px;color:var(--ink);font-weight:700;}
.guide-tooltip{background:var(--surface);border:0.5px solid var(--rule-hi);padding:8px 14px;max-width:200px;display:none;pointer-events:none;}
.guide-float:hover .guide-tooltip{display:block;}
.gt-title{font-family:var(--ff-c);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--pine-hi);margin-bottom:3px;}
.gt-body{font-family:var(--ff-s);font-size:11px;color:var(--tx-mid);line-height:1.5;}
.guide-panel{position:fixed;bottom:96px;right:28px;width:360px;z-index:8000;background:var(--deep);border:0.5px solid var(--rule-hi);display:none;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.5);max-height:520px;}
.guide-panel.open{display:flex;}
.gp-header{background:var(--pine);padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.gp-icon{font-size:18px;}
.gp-title-wrap{flex:1;}
.gp-title{font-family:var(--ff-c);font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--tx-max);}
.gp-sub{font-family:var(--ff-m);font-size:8px;color:rgba(255,255,255,.4);}
.gp-close{font-family:var(--ff-m);font-size:14px;color:rgba(255,255,255,.4);cursor:pointer;padding:2px 6px;}
.gp-close:hover{color:var(--tx-max);}
.gp-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;}
.gp-msg{max-width:88%;}
.gp-msg.bot{align-self:flex-start;}
.gp-msg.user{align-self:flex-end;}
.gp-bubble{padding:9px 12px;font-family:var(--ff-s);font-size:12px;line-height:1.6;border-radius:2px;}
.gp-msg.bot .gp-bubble{background:var(--surface);color:var(--tx-hi);border-left:2px solid var(--pine-hi);}
.gp-msg.user .gp-bubble{background:var(--pine-pale);color:var(--tx-hi);}
.gp-meta{font-family:var(--ff-m);font-size:8px;color:var(--tx-ghost);margin-top:3px;padding:0 2px;}
.gp-suggestions{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:5px;}
.gp-suggest{font-family:var(--ff-m);font-size:8px;color:var(--pine-hi);background:rgba(74,140,96,.08);border:0.5px solid rgba(74,140,96,.2);padding:3px 9px;border-radius:2px;cursor:pointer;transition:all .12s;}
.gp-suggest:hover{background:rgba(74,140,96,.15);}
.gp-input-row{border-top:1px solid var(--rule);padding:10px 14px;display:flex;gap:8px;align-items:center;flex-shrink:0;}
.gp-input{flex:1;background:var(--lift);border:0.5px solid var(--rule-hi);color:var(--tx-hi);font-family:var(--ff-s);font-size:12px;padding:8px 10px;outline:none;}
.gp-input::placeholder{color:var(--tx-ghost);font-size:11px;}
.gp-send{background:var(--pine-hi);border:none;color:var(--ink);font-family:var(--ff-c);font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:8px 12px;cursor:pointer;transition:background .12s;}
.gp-send:hover{background:#6ac888;}
.gp-disclaimer{font-family:var(--ff-m);font-size:8px;color:var(--tx-ghost);text-align:center;padding:6px 14px 10px;}
.onboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;}
.onboard-overlay.show{display:flex;}
.onboard-modal{background:var(--deep);border:0.5px solid var(--rule-hi);max-width:480px;width:100%;overflow:hidden;}
.om-header{background:var(--pine);padding:24px 28px;border-bottom:1px solid rgba(255,255,255,.08);}
.om-logo{font-family:var(--ff-d);font-size:20px;font-weight:700;color:var(--tx-max);margin-bottom:4px;}
.om-logo em{font-style:italic;color:var(--gold);}
.om-tagline{font-family:var(--ff-c);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);}
.om-body{padding:24px 28px;}
.om-steps{display:flex;gap:4px;margin-bottom:20px;}
.om-step{height:2px;flex:1;background:var(--rule-hi);border-radius:1px;transition:background .3s;}
.om-step.active{background:var(--pine-hi);}
.om-question{font-family:var(--ff-d);font-size:20px;font-weight:700;color:var(--tx-max);line-height:1.2;margin-bottom:16px;}
.om-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}
.om-opt{background:var(--surface);border:1px solid var(--rule-hi);padding:10px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px;}
.om-opt:hover,.om-opt.selected{border-color:var(--pine-hi);background:var(--pine-pale);}
.om-opt-icon{font-size:16px;flex-shrink:0;}
.om-opt-label{font-family:var(--ff-c);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--tx-hi);}
.om-email-row{display:flex;gap:8px;margin-bottom:12px;}
.om-input{flex:1;background:var(--lift);border:0.5px solid var(--rule-hi);color:var(--tx-hi);font-family:var(--ff-s);font-size:13px;padding:11px 14px;outline:none;}
.om-input:focus{border-color:var(--pine-hi);}
.om-input::placeholder{color:var(--tx-ghost);}
.om-submit{background:var(--pine-hi);border:none;color:var(--ink);font-family:var(--ff-c);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:11px 18px;cursor:pointer;white-space:nowrap;transition:background .12s;}
.om-submit:hover{background:#6ac888;}
.om-perks{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;}
.om-perk{font-family:var(--ff-s);font-size:12px;color:var(--tx-mid);display:flex;align-items:center;gap:8px;}
.om-perk::before{content:'✓';color:var(--pine-hi);font-weight:700;font-size:11px;flex-shrink:0;}
.om-skip{font-family:var(--ff-m);font-size:9px;color:var(--tx-ghost);text-align:center;cursor:pointer;}
.om-skip:hover{color:var(--tx-low);}

/* ════════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — Ghost-rendered content (not in the static design file)
   Real post feeds, article body (Koenig), pagination, archive pages.
   Uses the same design tokens defined in :root above.
   ════════════════════════════════════════════════════════════════════════════ */

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Post feed grid */
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 32px 0; }
@media (max-width: 1024px) { .feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feed { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s; }
.card:hover { border-color: var(--rule-hi); }
.card-img { aspect-ratio: 16 / 9; background: var(--lift); object-fit: cover; object-position: 50% 20%; width: 100%; } /* same headshot-headroom fix as .ac-image-bg above */
.card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-kicker { font-family: var(--ff-c); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.card-hed { font-family: var(--ff-d); font-size: 22px; line-height: 1.15; color: var(--tx-max); }
.card-hed a { color: inherit; text-decoration: none; }
.card-hed a:hover { color: var(--gold); }
.card-dek { font-family: var(--ff-s); font-size: 13px; line-height: 1.5; color: var(--tx-mid); }
.card-meta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-time { font-family: var(--ff-m); font-size: 9px; color: var(--tx-ghost); }

/* Article page */
.article { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.article-kicker { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
/* Rule 14 — the news/opinion line stays bright and visible: a signed piece
   under the opinion or bridger-column tag gets this badge, never news copy. */
.opinion-badge { font-family: var(--ff-m); font-size: 11px; letter-spacing: 1.5px; color: var(--river-hi); border: 1px solid rgba(58,172,204,.4); background: rgba(58,172,204,.08); padding: 3px 10px; border-radius: 2px; text-transform: uppercase; display: block; width: fit-content; margin-bottom: 10px; }
.article-hed { font-family: var(--ff-d); font-size: 44px; line-height: 1.08; color: var(--tx-max); margin: 12px 0 16px; }
.article-dek { font-family: var(--ff-s); font-size: 19px; line-height: 1.5; color: var(--tx-mid); margin-bottom: 24px; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.article-feature { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 20%; margin-bottom: 8px; background: var(--lift); } /* same headshot-headroom fix as .ac-image-bg above */
.article-feature-cap { font-family: var(--ff-m); font-size: 10px; color: var(--tx-ghost); margin-bottom: 32px; }

.post-content { font-family: var(--ff-s); font-size: 17px; line-height: 1.7; color: var(--tx-hi); }
.post-content p { margin: 0 0 22px; }
.post-content a { color: var(--pine-hi); text-decoration: underline; text-underline-offset: 2px; }
.post-content h2 { font-family: var(--ff-d); font-size: 30px; color: var(--tx-max); margin: 40px 0 14px; }
.post-content h3 { font-family: var(--ff-d); font-size: 24px; color: var(--tx-max); margin: 32px 0 12px; }
.post-content img { max-width: 100%; height: auto; }
.post-content blockquote { border-left: 3px solid var(--gold); padding: 4px 0 4px 20px; margin: 24px 0; color: var(--tx-mid); font-style: italic; }
.post-content figcaption { font-family: var(--ff-m); font-size: 11px; color: var(--tx-ghost); text-align: center; margin-top: 6px; }

/* Guest opinion / reader-letter byline: theme/partials/byline.hbs suppresses
   "By {{authors}}" for these tags (Ghost's real author is always the site's
   own account, never the submitter), so this first paragraph -- the
   submitter's real "By <name>" line, written into the body itself by
   build_opinion_intake()'s payload builder -- is the only byline shown.
   Style it like one instead of a stray italic sentence. */
body.tag-opinion .post-content > p:first-child,
body.tag-letter-to-the-editor .post-content > p:first-child {
  font-family: var(--ff-c); font-size: 12px; font-weight: 600;
  letter-spacing: .5px; font-style: normal; color: var(--tx-low);
  margin-bottom: 28px;
}

/* Source chain row on article */
.article-sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* Archive / tag header */
.archive-head { max-width: 1440px; margin: 0 auto; padding: 48px 24px 8px; }
.archive-title { font-family: var(--ff-d); font-size: 40px; color: var(--tx-max); }
.archive-desc { font-family: var(--ff-s); font-size: 15px; color: var(--tx-mid); margin-top: 8px; max-width: 640px; }

/* ── Bill tracker (/bill-tracker/) ────────────────────────────────────────── */
/* Redesigned around Rule 19's headline/watch_next fields (docs/bill-tracker.md):
   each bill reads as a short dispatch led by its plain-English headline, not
   a spreadsheet row of number/title/status/date. "Everything explained" as a
   layout choice, not just a tagline. */
.bt-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px 64px; }
.bt-head { padding: 48px 0 4px; }
.bt-head-row { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 14px; }
.bt-mt-glyph { flex-shrink: 0; margin-bottom: 4px; }
.bt-title { font-family: var(--ff-d); font-weight: 700; font-size: 50px; line-height: 1.05; color: var(--tx-max); }
.bt-desc { font-family: var(--ff-s); font-size: 18px; line-height: 1.6; color: var(--tx-mid); max-width: 620px; }

.lt-status { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; }
.lt-source { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--ff-s); font-size: 13px; }
.lt-source-label { font-family: var(--ff-c); font-weight: 600; color: var(--tx-hi); }
.lt-source-note { color: var(--tx-ghost); font-size: 12.5px; }
.lt-source-pill { font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; flex-shrink: 0; min-width: 106px; text-align: center; }
.lt-source-live { background: var(--gold-pale); color: var(--gold); border: 1px solid rgba(201,168,76,.35); }
.lt-source-pending_setup { background: transparent; color: var(--tx-ghost); border: 1px solid var(--rule-hi); }
.bt-updated { font-family: var(--ff-m); font-size: 11px; color: var(--tx-ghost); margin: 6px 0 24px; }

.bt-chips { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 28px; }
.bt-chip { font-family: var(--ff-c); font-size: 13px; font-weight: 700; letter-spacing: .4px; padding: 8px 18px; border-radius: 16px; background: transparent; color: var(--tx-mid); border: 1px solid var(--rule-hi); cursor: pointer; transition: all .12s; }
.bt-chip:hover { border-color: var(--tx-ghost); }
.bt-chip.is-active { background: var(--tx-max); color: var(--ink); border-color: var(--tx-max); }

.bt-list { display: flex; flex-direction: column; gap: 18px; }
.bt-empty { font-family: var(--ff-s); font-size: 13px; color: var(--tx-ghost); padding: 16px 4px; }

.bt-card { background: var(--surface); border: 1px solid var(--rule); padding: 26px 28px 22px; transition: box-shadow .15s; }
.bt-card:hover { box-shadow: 0 2px 0 var(--rule-hi); }
.bt-dateline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.bt-place { font-family: var(--ff-m); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-ghost); }
.bt-place .bt-num { color: var(--gold); }
.bt-stage { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.bt-stage-dot { width: 16px; height: 4px; border-radius: 2px; background: var(--rule-hi); }
.bt-stage-dot.is-filled { background: var(--pine-hi); }
.bt-stage-dot.is-terminal { background: var(--ch-rod); }
.bt-stage-label { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tx-mid); margin-left: 6px; }
.bt-stage-label.is-terminal { color: var(--ch-rod); }

.bt-headline { font-family: var(--ff-d); font-weight: 600; font-size: 29px; line-height: 1.22; color: var(--tx-max); margin-bottom: 6px; }
.bt-headline a { color: inherit; text-decoration: none; }
.bt-headline a:hover { color: var(--gold); }
.bt-official { font-family: var(--ff-s); font-size: 13.5px; color: var(--tx-ghost); margin-bottom: 18px; }

.bt-pending { border: 1px dashed var(--rule-hi); padding: 14px 18px; display: flex; gap: 10px; align-items: flex-start; }
.bt-pending-mark { font-family: var(--ff-m); font-size: 16px; color: var(--tx-ghost); line-height: 1; }
.bt-pending-text { font-family: var(--ff-s); font-size: 14.5px; color: var(--tx-low); line-height: 1.6; }
.bt-pending-text strong { color: var(--tx-mid); }

.bt-card .local-impact { margin: 0; border-left: 3px solid var(--gold); }
.bt-zone-chip { font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: var(--pine-pale); color: var(--pine-hi); border: 1px solid rgba(45,90,61,.25); display: inline-block; }

.bt-mechanism { margin-top: 16px; padding: 16px 20px; background: rgba(0,0,0,.02); border: 1px solid var(--rule); font-family: var(--ff-s); font-size: 14.5px; line-height: 1.65; color: var(--tx-mid); }
.bt-mechanism strong { color: var(--tx-hi); }
.bt-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; flex-wrap: wrap; gap: 8px; }
.bt-expand-btn { cursor: pointer; background: none; border: none; font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); padding: 0; }
.bt-expand-btn:hover { color: var(--gold-d); }
.bt-official-link { font-family: var(--ff-m); font-size: 11px; color: var(--tx-ghost); text-decoration: none; }
.bt-official-link:hover { color: var(--ch-gov); }

@media (max-width: 640px) {
  .bt-title { font-size: 38px; }
  .bt-dateline { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bt-headline { font-size: 24px; }
}

/* ── Development / growth tracker map ─────────────────────────────────────── */
.devmap-wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px 48px; }
.devmap-status { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.devmap-jur { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--ff-s); font-size: 13px; }
.devmap-jur-name { font-family: var(--ff-c); font-weight: 600; color: var(--tx-hi); }
.devmap-jur-note { color: var(--tx-ghost); font-size: 12.5px; }
.devmap-pill { font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; flex-shrink: 0; }
.devmap-pill-live { background: var(--gold-pale); color: var(--gold); border: 1px solid rgba(201,168,76,.35); }
.devmap-pill-pending_verification { background: rgba(58,172,204,.1); color: var(--river-hi); border: 1px solid rgba(58,172,204,.3); }
.devmap-pill-coming_soon { background: transparent; color: var(--tx-ghost); border: 1px solid var(--rule-hi); }
.devmap-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.devmap-legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--ff-s); font-size: 12.5px; color: var(--tx-mid); }
.devmap-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.devmap-dot-commercial { background: var(--gold); }
.devmap-dot-residential { background: var(--river-hi); }
.devmap-dot-other { background: var(--tx-low); }
.devmap-updated { font-family: var(--ff-m); font-size: 11px; color: var(--tx-ghost); margin-left: auto; }
.devmap-subscribe { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); }
.devmap-subscribe span { font-family: var(--ff-s); font-size: 13px; color: var(--tx-mid); max-width: 60ch; }
.devmap-subscribe span strong { color: var(--tx-hi); }
.devmap-howto { font-family: var(--ff-s); font-size: 12.5px; color: var(--tx-ghost); margin: 0 0 14px; max-width: 72ch; }
.devmap-canvas { height: 560px; width: 100%; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }

/* Cluster badges for overlapping/near-coincident permits (see
   development-map.js). Fixed dark-tile colors, not theme tokens -- the map
   canvas always renders Esri's dark basemap underneath regardless of the
   page's own light/dark reading mode, so these need to read against that,
   not against --surface. */
.devmap-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(10,10,12,.55); color: #16151a; font-family: var(--ff-m); font-weight: 700; }
.devmap-cluster-s { width: 30px; height: 30px; font-size: 11px; background: rgba(201,168,76,.9); }
.devmap-cluster-m { width: 38px; height: 38px; font-size: 12.5px; background: rgba(201,168,76,.92); }
.devmap-cluster-l { width: 46px; height: 46px; font-size: 14px; background: rgba(201,168,76,.95); }
.devmap-footnote { font-family: var(--ff-s); font-size: 12px; color: var(--tx-ghost); margin-top: 14px; max-width: 72ch; }

/* Rolling valuation stat bar -- computed client-side from whatever permits
   are in the JSON (never baked into the data file), so it stays accurate as
   new permits land without a script change. Some permits carry no
   valuation at all (Missoula's feed has no valuation field; even Bozeman's
   own feed leaves it off plenty of individual permits), so the total is
   always paired with an honest coverage note rather than presented as a
   complete figure -- same disclosure instinct as the jurisdiction status
   panel above it. */
.devmap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 20px; }
.devmap-stat { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.devmap-stat-value { font-family: var(--ff-d); font-size: 26px; font-weight: 700; color: var(--tx-max); line-height: 1; }
.devmap-stat-label { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); }
.devmap-stats-note { font-family: var(--ff-s); font-size: 12px; color: var(--tx-ghost); margin: -10px 0 20px; max-width: 72ch; }

.devmap-top { margin-top: 28px; }
.devmap-top-head { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); margin-bottom: 10px; }
.devmap-top-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-family: var(--ff-s); font-size: 13.5px; }
.devmap-top-rank { font-family: var(--ff-m); font-size: 11px; color: var(--tx-ghost); flex-shrink: 0; width: 14px; }
.devmap-top-addr { color: var(--tx-hi); font-weight: 600; }
.devmap-top-meta { color: var(--tx-ghost); font-size: 12px; }
.devmap-top-val { font-family: var(--ff-m); font-size: 13px; color: var(--gold); margin-left: auto; flex-shrink: 0; white-space: nowrap; }
/* Leaflet ships its own popup chrome in light colors by default; retint for the dark theme. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--tx-mid); }
.leaflet-container a.leaflet-popup-close-button { color: var(--tx-ghost); }
.leaflet-control-attribution { background: rgba(23,25,38,.75) !important; color: var(--tx-ghost) !important; }
.leaflet-control-attribution a { color: var(--tx-low) !important; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 16px; padding: 24px 0 64px; }
.pagination a, .page-number { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-low); border: 1px solid var(--rule-hi); padding: 8px 18px; text-decoration: none; }
.pagination a:hover { color: var(--tx-hi); border-color: var(--tx-mid); }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: 64px; padding: 40px 0; background: var(--deep); }
.foot-inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-brand { font-family: var(--ff-c); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.foot-note { font-family: var(--ff-m); font-size: 10px; color: var(--tx-ghost); max-width: 480px; line-height: 1.6; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); text-decoration: none; }
.foot-links a:hover { color: var(--tx-hi); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--gold); color: var(--ink); padding: 8px 14px; z-index: 100; }

/* Zone strip */
.zone-strip { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.zone-link { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); text-decoration: none; }
.zone-link:hover, .zone-link.active { color: var(--gold); }

/* Ghost-generated nav lists render as <ul.nav>; flatten to inline row */
.primary-nav .nav, .channel-strip .nav, .foot-links .nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.primary-nav .nav a, .channel-strip .nav a { font-family: var(--ff-c); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); text-decoration: none; }
.primary-nav .nav a:hover { color: var(--tx-hi); }
.hero-text { padding: 20px 0; }

/* ── Koenig editor cards (required by Ghost/gscan) ──────────────────────────
   The article body is 720px wide; wide and full cards break out beyond it. */
.post-content :is(img, .kg-card, figure) { max-width: 100%; }
.post-content .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin-left: calc(50% - 42.5vw); transform: translateX(calc(0px)); }
.post-content .kg-width-wide img { width: 100%; }
.post-content .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; }
.post-content .kg-width-full img { width: 100%; }

/* Koenig gallery + bookmark basics */
.post-content .kg-gallery-container { display: flex; flex-direction: column; gap: 10px; }
.post-content .kg-gallery-row { display: flex; gap: 10px; }
.post-content .kg-bookmark-card a { color: inherit; text-decoration: none; display: block; border: 1px solid var(--rule); }
.post-content .kg-bookmark-title { font-family: var(--ff-s); color: var(--tx-hi); }

/* ── Ported chrome: newsroom-live status folded into the conditions bar ── */
.cb-status { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--rule-hi); white-space: nowrap; }
.cb-status-label { font-family: var(--ff-c); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pine-hi); }
.cb-status-time { font-family: var(--ff-m); font-size: 12px; color: var(--tx-ghost); }
@media (max-width: 720px) { .cb-status-time { display: none; } }

/* "Sample data" tag for the static widgets that have no live feed yet. */
.sample-tag { display: inline-block; font-family: var(--ff-c); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx-low); background: rgba(201,168,76,.08); border: 1px solid var(--rule-hi); padding: 2px 7px; border-radius: 2px; vertical-align: middle; }

/* Real feature-image fill for the hero (template uses a background span so the
   16:9 frame is preserved whether or not a post has a photo). */
.hero-image-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 20%; } /* same headshot-headroom fix as .ac-image-bg above */

/* ── Politics/business v2 components ───────────────────────────────────────── */
.logo-ed { font-family: var(--ff-c); font-size: 8px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-low); margin-top: 3px; display: block; }
.logo-ed b { color: var(--gold); font-weight: 700; }

.data-panel { background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px; margin: 0 0 12px; }
.dp-title { font-family: var(--ff-c); font-size: 8px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-low); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.delegation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.del-card { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--ch-gov); padding: 16px 18px; }
.del-name { font-family: var(--ff-d); font-size: 19px; font-weight: 700; color: var(--tx-max); line-height: 1.1; }
.del-role { font-family: var(--ff-c); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--river-hi); margin: 4px 0 12px; }
.del-latest { font-family: var(--ff-s); font-size: 12.5px; color: var(--tx-mid); line-height: 1.55; }

/* Honest "not yet connected" copy — same tone/typography as .del-latest,
   shared by every homepage widget that has no real data source wired yet.
   Replaces fabricated placeholder numbers (a credibility risk under a
   trust-focused masthead), matching the pattern .del-latest already used. */
.data-pending { font-family: var(--ff-s); font-size: 12.5px; color: var(--tx-mid); line-height: 1.6; margin: 0; }
.data-pending a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.data-pending a:hover { color: #d9b85c; }

.pro-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.tier { border: 1px solid var(--rule-hi); padding: 16px 18px; }
.tier.pro { border-color: var(--gold); background: var(--gold-pale); }
.tier-name { font-family: var(--ff-c); font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-hi); }
.tier.pro .tier-name { color: var(--gold); }
.tier-price { font-family: var(--ff-d); font-size: 26px; color: var(--tx-max); margin: 4px 0 8px; }
.tier-feat { font-family: var(--ff-s); font-size: 12px; color: var(--tx-mid); line-height: 1.7; }
@media (max-width: 900px) { .delegation-grid { grid-template-columns: 1fr 1fr; } .pro-tiers { grid-template-columns: 1fr; } }

/* ── Ads: GAM slots + native sponsor unit ─────────────────────────────────── */
.ad-slot { height: auto; min-height: 90px; }               /* real creatives set their own height */
/* .ad-leaderboard sets display:flex at the same (0,1,0) specificity as the
   browser's default [hidden] rule, and author styles beat the UA stylesheet
   at equal specificity — so [hidden] alone would NOT hide these without a
   higher-specificity rule forcing it. This is that rule (sponsors.js sets
   [hidden] on every .ad-slot during a sponsor takeover). */
.ad-slot[hidden] { display: none; }
.sponsor-strip { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 24px; background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--gold); }
.sponsor-strip-takeover { border-left-width: 3px; background: var(--gold-pale); }
.ss-pre { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-low); }
.ss-sponsor { font-family: var(--ff-d); font-size: 20px; font-weight: 700; color: var(--gold); }
.ss-sponsor:hover { color: var(--tx-max); }

/* ── Responsive video / podcast embeds inside article bodies ──────────────── */
.post-content iframe { width: 100%; max-width: 100%; }
.post-content iframe[src*="youtube"], .post-content iframe[src*="youtu.be"], .post-content iframe[src*="spotify"], .post-content iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }

/* ── Podcast section ──────────────────────────────────────────────────────── */
.podcast-intro { max-width: 1440px; margin: 0 auto 8px; padding: 0 24px; font-family: var(--ff-s); font-size: 15px; color: var(--tx-mid); line-height: 1.6; }
.podcast-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.podcast-links a { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--rule-hi); padding: 7px 14px; }
.podcast-links a:hover { color: var(--tx-max); border-color: var(--tx-mid); }

/* ── "What this means for you" — local-impact signature box ───────────────────
   Injected into the article body by the pipeline (Bridger's local_impact). --- */
.post-content .local-impact, .local-impact { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--gold); padding: 20px 22px; margin: 32px 0; }
.local-impact .li-head { font-family: var(--ff-c); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.local-impact .li-row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule); }
.local-impact .li-row:first-of-type { border-top: 0; }
.local-impact .li-tier { font-family: var(--ff-c); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tx-hi); }
.local-impact .li-text { font-family: var(--ff-s); font-size: 14px; color: var(--tx-mid); line-height: 1.55; margin: 0; }
.local-impact .li-none .li-text { color: var(--tx-low); font-style: italic; }
.local-impact .li-watch { border-top: 1px dashed var(--rule-hi); }
.local-impact .li-watch .li-tier { color: var(--gold); }
.local-impact .li-watch .li-text { color: var(--tx-hi); font-weight: 500; }
@media (max-width: 600px) { .local-impact .li-row { grid-template-columns: 1fr; gap: 3px; } }

/* ── Article page: two-column layout with rail, related coverage, in-article ad ─ */
.article-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 24px 64px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.article-layout .article { max-width: none; margin: 0; }
.article-time { font-family: var(--ff-m); font-size: 11px; color: var(--tx-low); }
.article-rail { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 16px; }
.rail-ad-slot { min-height: 250px; height: auto; }
.incontent-ad { margin: 28px 0; }
.rail-block { border-top: 2px solid var(--rule-hi); padding-top: 14px; }
.rail-title { font-family: var(--ff-c); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-low); margin-bottom: 8px; }
.rail-item { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.rail-hed { display: block; font-family: var(--ff-d); font-size: 16px; font-weight: 600; color: var(--tx-hi); line-height: 1.2; }
.rail-item:hover .rail-hed { color: var(--gold); }
.rail-pro { border-top-color: var(--gold); }
.rail-pro-k { font-family: var(--ff-c); font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.rail-pro-h { font-family: var(--ff-d); font-size: 18px; color: var(--tx-max); margin: 4px 0 10px; line-height: 1.15; }
.rail-pro-cta { font-family: var(--ff-c); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 9px 16px; display: inline-block; }
.article-tags { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.at-label { font-family: var(--ff-c); font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tx-low); }
.topic-chip { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tx-mid); border: 1px solid var(--rule-hi); padding: 5px 12px; text-decoration: none; }
.topic-chip:hover { color: var(--gold); border-color: var(--gold); }
.related-coverage { max-width: 1180px; margin: 6px auto 0; padding: 24px 24px 0; border-top: 1px solid var(--rule); }
.rc-head { font-family: var(--ff-c); font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--tx-hi); margin-bottom: 16px; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-rail { position: static; } }

/* ── Readability pass: enlarge the smallest labels and lift faint text ───────── */
.date-line { font-size: 10px; color: var(--tx-low); }
.edition-tag { font-size: 9px; }
.logo-ed { font-size: 9px; }
.logo-sub { font-size: 10px; }
.cb-label, .cb-status-label { font-size: 11px; }
.cb-status-time { font-size: 12px; color: var(--tx-low); }
.ct-item { font-size: 13px; }
.ad-label { font-size: 9px; color: var(--tx-low); }
.source-chain { font-size: 11px; color: var(--tx-low); }
.hero-byline { font-size: 12px; }
.hero-time, .ss-meta { font-size: 11px; color: var(--tx-low); }
.ss-kicker { font-size: 9px; }
.ac-time, .ac-ai, .card-time, .card-meta, .ls-meta { font-size: 11px; }
.article-time { font-size: 12px; }
.ai-label { font-size: 10px; }
.src-badge { font-size: 9px; }
.at-label { font-size: 10px; }
.fb-copy, .fb-ai-note, .fb-dba { font-size: 12px; color: var(--tx-low); }
.article-feature-cap, .article-hero-cap { font-size: 11px; color: var(--tx-low); }

/* Author page (E-E-A-T: named reporter, bio, link) */
.author-head .author-avatar { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--rule-hi); margin-bottom: 14px; }
.author-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--ff-c); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tx-low); }
.author-meta .author-link { color: var(--pine-hi); }
.author-meta .author-link:hover { color: var(--tx-hi); }

/* ─────────────────────────────────────────────────────────────
   Reader text-size control (accessibility)
   A− / A / A+ in the masthead sets html[data-textsize]; the choice
   is stored in localStorage by js/main.js. Scales the reading
   surfaces (article body, deks, card/list copy) — not chrome —
   so the layout holds while the words get larger.
   ───────────────────────────────────────────────────────────── */
:root { --tscale: 1; }
html[data-textsize="large"]  { --tscale: 1.16; }
html[data-textsize="xlarge"] { --tscale: 1.34; }

.post-content            { font-size: calc(17px * var(--tscale)); }
.post-content h2         { font-size: calc(30px * var(--tscale)); }
.post-content h3         { font-size: calc(24px * var(--tscale)); }
.post-content blockquote { font-size: calc(17px * var(--tscale)); }
.article-dek             { font-size: calc(19px * var(--tscale)); }
.hero-dek                { font-size: calc(15px * var(--tscale)); }
.card-dek                { font-size: calc(13px * var(--tscale)); }
.ac-dek                  { font-size: calc(13px * var(--tscale)); }
.yb-body                 { font-size: calc(13px * var(--tscale)); }
.nl-body                 { font-size: calc(14px * var(--tscale)); }
.li-body                 { font-size: calc(14px * var(--tscale)); }

/* The control itself */
.textsize-control { display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--rule-hi); border-radius: 3px; overflow: hidden; }
.textsize-control button { font-family: var(--ff-c); font-weight: 700; color: var(--tx-low); background: transparent; border: 0; cursor: pointer; padding: 5px 9px; line-height: 1; letter-spacing: .5px; transition: color .15s, background .15s; }
.textsize-control button:hover { color: var(--tx-hi); background: rgba(201,168,76,.10); }
.textsize-control button[aria-pressed="true"] { color: var(--ink); background: var(--gold); }
.textsize-control .ts-sm { font-size: 11px; }
.textsize-control .ts-md { font-size: 13px; }
.textsize-control .ts-lg { font-size: 15px; }

/* ─────────────────────────────────────────────────────────────
   Reader light/dark toggle
   Light is the default (see the :root comment above). Dark is an explicit
   opt-in via :root[data-theme="dark"] below — the same values the
   masthead/conditions-bar/primary nav are pinned to unconditionally,
   so a reader who opts into dark reading gets a seamless match with the
   chrome, and the chrome itself never changes with the reading-mode
   toggle: that's the brand identity, not a reading-surface choice.
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --ink:      #0c0e18;
  --deep:     #11131e;
  --surface:  #171926;
  --lift:     #1d2030;
  --rule:     #22253a;
  --rule-hi:  #2e3250;

  --tx-max:   #f8f5ee;
  --tx-hi:    #e8e4dc;
  --tx-mid:   #bcbcc4;
  --tx-low:   #a4a7b2;
  --tx-ghost: #838996;

  --gold:      #c9a84c;
  --gold-d:    #7a6328;
  --gold-pale: rgba(201, 168, 76, .07);
  --pine-hi:   #5aaa74;
  --pine-pale: rgba(74, 140, 96, .1);
  --river-hi:  #3aaccc;

  /* Brighter counterparts of the light-mode channel colors above — each
     independently verified >=4.5:1 against dark backgrounds. A single
     shared hue can't clear both; e.g. the light-mode navy at 5.7:1 on
     white falls to 2.6:1 on dark ink. */
  --ch-yell:  #e0883a;
  --ch-fish:  #33a0c2;
  --ch-rod:   #e08277;
  --ch-land:  #5aab6a;
  --ch-biz:   #d9a35a;
  --ch-gov:   #8a9cd9;
}
.conditions-bar, .masthead, .primary-nav, .yell-band {
  --ink:      #0c0e18;
  --deep:     #11131e;
  --surface:  #171926;
  --lift:     #1d2030;
  --rule:     #22253a;
  --rule-hi:  #2e3250;
  --tx-max:   #f8f5ee;
  --tx-hi:    #e8e4dc;
  --tx-mid:   #bcbcc4;
  --tx-low:   #a4a7b2;
  --tx-ghost: #838996;
  --gold:      #c9a84c;
  --gold-d:    #7a6328;
  --gold-pale: rgba(201, 168, 76, .07);
  --pine-hi:   #5aaa74;
  --pine-pale: rgba(74, 140, 96, .1);
  --river-hi:  #3aaccc;
  /* Same reasoning as :root[data-theme="dark"] above — this chrome is
     always dark regardless of reading-mode, so it always needs the
     dark-safe channel-color set too. */
  --ch-yell:  #e0883a;
  --ch-fish:  #33a0c2;
  --ch-rod:   #e08277;
  --ch-land:  #5aab6a;
  --ch-biz:   #d9a35a;
  --ch-gov:   #8a9cd9;
}

.theme-toggle { display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--rule-hi); border-radius: 3px; overflow: hidden; }
.theme-toggle button { font-family: var(--ff-c); font-weight: 700; font-size: 11px; letter-spacing: .5px; color: var(--tx-low); background: transparent; border: 0; cursor: pointer; padding: 5px 10px; line-height: 1; transition: color .15s, background .15s; }
.theme-toggle button:hover { color: var(--tx-hi); background: rgba(201,168,76,.10); }
.theme-toggle button[aria-pressed="true"] { color: var(--ink); background: var(--gold); }

/* Settings control — one icon button collapsing text-size + theme behind a
   small dropdown, instead of five always-visible buttons in the masthead. */
.settings-toggle { font-size: 12px; padding: 7px 13px; }
.settings-panel {
  /* Positioned relative to .masthead-right (not .settings-control) so its
     right edge lines up with the header's own right edge/content cluster
     instead of the small toggle button — keeps it on-screen even when
     masthead-right centers and wraps on narrow viewports. */
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background: var(--deep);
  border: 1px solid var(--rule-hi);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  z-index: 60;
}
.settings-panel.open { display: flex; }
.settings-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-label { font-family: var(--ff-c); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx-ghost); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   The layout is a desktop newspaper grid; these breakpoints fold it
   down to a single readable column on tablets and phones. Two stops:
   ≤960px (tablet: multi-col → 2-col) and ≤640px (phone: → 1-col,
   stacked masthead, tighter gutters). Nav already scrolls sideways.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 960px) {
  .hero            { grid-template-columns: 1fr; gap: 28px; }
  .yell-band-inner { grid-template-columns: 1fr; gap: 20px; }
  .lands-con-row   { grid-template-columns: 1fr; gap: 20px; }
  .biz-gov-row     { grid-template-columns: 1fr; gap: 0; }
  .nl-inner        { grid-template-columns: 1fr; gap: 20px; }
  .yb-status-grid  { grid-template-columns: 1fr 1fr; }
  .article-grid-3  { grid-template-columns: 1fr 1fr; }
  .article-grid-4  { grid-template-columns: 1fr 1fr; }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: 28px; }
  .split-col       { padding: 24px 0; }
  .split-col + .split-col { border-top: 1px solid var(--rule); }
}

/* ── Phone ── */
@media (max-width: 640px) {
  /* Gutters: reclaim side space */
  .masthead-inner, .nav-inner, .conditions-inner,
  .delegation-grid, .footer-inner, .container, .wrap { padding-left: 16px; padding-right: 16px; }
  .article, .article-wrap { padding-left: 16px; padding-right: 16px; }

  /* Masthead: stack logo over controls; drop the left date/edition block */
  .masthead-top   { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .masthead-left  { display: none; }
  .masthead-right { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .logo-num       { font-size: clamp(40px, 13vw, 58px); letter-spacing: -1px; }
  .logo-ed        { white-space: normal; }

  /* Every content grid → single column */
  .yb-status-grid, .article-grid-3, .article-grid-4,
  .footer-grid, .delegation-grid, .pro-tiers { grid-template-columns: 1fr; }

  /* Display type: rein in the biggest headings */
  .archive-title { font-size: 30px; }
  .nl-title      { font-size: 26px; }
  .yb-title      { font-size: 24px; }

  /* Never let a wide media card push the page sideways */
  .post-content .kg-width-wide,
  .post-content .kg-width-full { width: 100%; min-width: 0; margin-left: 0; left: auto; right: auto;
    margin-right: 0; transform: none; }

  /* Conditions ticker: keep it, but let the live-status label breathe */
  .cb-status-time { display: none; }
}

/* ── Guard against horizontal scroll on any narrow viewport ── */
html, body { overflow-x: hidden; }