/* ==================================================
   BULLETIN PAGE — layout only; all colors via existing
   global.css tokens so light/dark (prefers-color-scheme)
   is inherited automatically, same as every other page.

   CHANGED 27 Jul 2026: pulled out of an inline <style> block
   in index.html into its own file, living in Cloudflare/news/
   alongside the page it styles — so it deploys (and can be
   worked on) independently of the rest of the Cloudflare repo.
   global.css itself stays reserved for genuinely shared chrome
   (header, footer, nav, design tokens) used across every page,
   not Bulletin-specific rules — see Synchrony's "Deploy Bulletin"
   button, which now only stages/pushes this news/ folder.
   ================================================== */

/* Added 28 Jul 2026: Bulletin-specific palette from a graphic
   designer's review — warmer page background, darker/higher-contrast
   headline and body text, and a deeper muted teal for header lines and
   interactive accents (was the same --color-brand-teal used site-wide,
   #007299). Deliberately scoped to prefers-color-scheme: light only —
   the site's existing dark-mode values (defined in global.css) are
   left untouched, so dark-mode visitors are unaffected by this. Also
   deliberately scoped to THIS stylesheet, not global.css itself — this
   is a Bulletin-page-specific look, not a site-wide rebrand, and
   bulletin.css is the one file that's only ever loaded on this page
   (per the note above), so overriding these shared tokens here can't
   leak onto any other page. */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg-page: #F7F6F3;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #333333;
    --color-text-muted: #6B6B6B;
    /* CHANGED 28 Jul 2026: the first pass (#2A6F7F) read as blue rather
       than teal/green in practice (e.g. on "Show more") — shifted
       toward green while staying in the same deep, muted family. */
    --color-brand-teal: #1B7A6B;
    --color-brand-teal-hover: #145F53;
  }
}

/* Narrows the top-bar hover-to-open-menu trigger to just the Menu
   label + dropdown (see the HTML comment around .bg-menu-hoverzone
   for why); display:flex + align-items:center here keeps the label
   centered in the bar exactly as it was as a direct flex child of
   .bg-brand-inner before this wrapper was introduced. */
.bg-menu-hoverzone {
  display: flex;
  align-items: center;
}

/* CHANGED 27 Jul 2026 (round 3): this used to read as another line of
   small muted blurb text, no heavier than the disclaimer beneath it —
   so the page had no clear "what is this site" statement at all.
   Bumped size/weight/color so it reads as an actual tagline, the first
   thing the eye lands on below the page title. */
.news-intro {
  max-width: 1280px;
  margin: 0 auto 0.6rem;
  padding: 0 1.5rem;
  text-align: left;
  color: var(--color-text-primary);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
}
/* CHANGED 27 Jul 2026 (round 4): the lead clause gets a touch heavier
   weight and a slightly larger size than the rest of the tagline, so
   it reads as the headline of the sentence — the "plus..." clause
   stays at the tagline's own base weight/size as a lighter follow-on. */
.news-intro__lead {
  font-weight: 700;
  font-size: 1.08em;
}

/* CHANGED 27 Jul 2026 (round 3): merged the two previously-separate
   disclaimer lines (the bolded "not an endorsement" sentence that used
   to live inside .news-intro, plus the old standalone rights-notice
   line) into this single small, muted, un-bolded line — still says
   everything either one said, just subordinate to the tagline above
   rather than competing with it. Tightened margin so "Latest" arrives
   sooner. */
.news-disclaimer {
  max-width: 1280px;
  margin: 0 auto 1.4rem;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--color-text-muted, #8a94a0);
  font-size: 0.78rem;
  line-height: 1.4;
  font-style: italic;
}
/* CHANGED 27 Jul 2026: the new "email us" line's mailto link needs to
   read as a link against the muted, italic disclaimer text around it
   — not italic itself, brand teal, underlined on hover only. */
.news-disclaimer a {
  font-style: normal;
  color: var(--color-brand-teal);
  text-decoration: none;
}
.news-disclaimer a:hover {
  text-decoration: underline;
}

/* CHANGED 27 Jul 2026 (round 4): moved from its own line near the top
   of the page into the Sections/Filter box itself, below the pills —
   a pill/box treatment here would compete with the region and thematic
   pills right above it, so this is now a plain, quiet closing line
   instead: small, muted, set off from the pills above by a thin top
   divider consistent with the thematic row's own divider.
   CHANGED 27 Jul 2026 (round 5): right-aligned instead of centered, at
   request, to read as distinct from the centered pills above it. Also
   now repeated a second time in a Bulletin-specific footer at the very
   bottom of the page (see .news-bulletin-footer) — that copy uses the
   --footer modifier below instead of this bordered/right-aligned
   treatment, since it already sits inside its own footer block. */
.news-email-cta {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border-default, rgba(0,0,0,0.08));
  text-align: right;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted, #8a94a0);
}
.news-email-cta a {
  font-weight: 600;
  color: var(--color-brand-teal);
  text-decoration: none;
}
.news-email-cta a:hover {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  .news-email-cta {
    border-top-color: rgba(255,255,255,0.1);
  }
}

/* CHANGED 27 Jul 2026: Bulletin-specific footer — separate from the
   site-wide .bg-footer further down the page. Sits below a fine
   divider line at the very end of the Bulletin's own content (after
   the last section block), repeating the disclaimers + email line from
   the top so a reader who's scrolled all the way down sees them again
   without scrolling back up. */
.news-bulletin-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 0;
  border-top: 1px solid var(--color-border-default, rgba(0,0,0,0.1));
}
.news-bulletin-footer .news-disclaimer {
  margin: 0 auto 0.6rem;
  text-align: center;
}
.news-email-cta--footer {
  margin: 0;
  padding-top: 0;
  border-top: none;
  text-align: center;
}

/* CHANGED 27 Jul 2026: the Sections pills jump to #news-section-<slug>
   (this element's own id) — with no scroll-margin, the browser lands
   the section flush against the very top edge of the viewport, so the
   heading itself ends up right at the fold with no breathing room and
   reads as cut off. scroll-margin-top adds clearance above the landing
   point so the heading is fully visible after the jump. */
.news-section {
  max-width: 1280px;
  margin: 0 auto 3.2rem;
  padding: 0 1.5rem;
  scroll-margin-top: 32px;
}

/* CHANGED 27 Jul 2026: these titles ("Latest", "North America", etc.)
   were a small bold uppercase label with a bottom border — easy to miss
   against the rest of the page. Switched to the same large, centered,
   fine-weight "eyebrow" treatment as the Sections band's own "Explore
   by Section" label (see .news-sections-band-label), just a touch
   smaller, with small fine divider lines flanking the text instead of
   a full-width bottom border — reads as its own section break without
   the earlier heavy/bold shout. */
.news-section-header {
  position: relative;
  margin: 0 0 1.2rem;
}
.news-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
/* CHANGED 28 Jul 2026: given a bit more presence per feedback — up in
   both weight (300 -> 500) and size (top of the clamp raised from
   19px to 21px), still restrained/uppercase/tracked-out rather than
   loud, just no longer reading as lighter-weight than the pills
   sitting right below it. */
.news-section-title__text {
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* CHANGED (2nd pass) 28 Jul 2026: lines lengthened (44px -> 60px, and
   24px -> 32px on mobile) to balance the now-larger/bolder title text,
   and the hardcoded rgba(0,102,102) teal swapped for the new
   Bulletin-page accent (#1B7A6B) so these actually match the "Show
   more" link and other accents on the page again. */
.news-section-title__line {
  flex: 0 0 auto;
  width: 60px;
  height: 1.5px;
}
.news-section-title__line:first-child {
  background: linear-gradient(to left, rgba(27,122,107,0.45), rgba(27,122,107,0));
}
.news-section-title__line:last-child {
  background: linear-gradient(to right, rgba(27,122,107,0.45), rgba(27,122,107,0));
}
@media (prefers-color-scheme: dark) {
  .news-section-title__line:first-child {
    background: linear-gradient(to left, rgba(111,218,218,0.5), rgba(111,218,218,0));
  }
  .news-section-title__line:last-child {
    background: linear-gradient(to right, rgba(111,218,218,0.5), rgba(111,218,218,0));
  }
}
@media (max-width: 520px) {
  .news-section-title__line { width: 32px; }
}

.news-section-header .news-showmore {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-brand-teal);
  text-decoration: none;
  white-space: nowrap;
}
.news-section-header .news-showmore:hover { text-decoration: underline; }

.news-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.4rem;
  align-items: start;
}

.news-hero-card { display: block; text-decoration: none; color: inherit; }
.news-hero-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  background: var(--color-bg-light-gray, #e8e8e6);
  box-shadow: var(--shadow-card);
}
/* Photo credit, added 30 Jul 2026 — sits directly under the hero image,
   small/muted so it reads as a caption, not part of the headline block
   below it. Hero-size images only (see heroCaptionHtml). */
.news-hero-image-caption {
  /* Made more diminutive per explicit request — smaller, tighter
     line-height, lighter color, less top margin, plus an italic
     treatment so it visually recedes as a small aside rather than
     competing with the headline right below it. */
  font-size: 0.66rem;
  line-height: 1.3;
  font-style: italic;
  color: var(--color-text-muted, #8a94a0);
  opacity: 0.85;
  margin: 0.3rem 0 0;
}
/* CHANGED 27 Jul 2026: a hero card with no feature_image (see
   heroImageHtml) gets this in place of the <img> above — same box
   (16/9, same radius/shadow), so the hero grid layout is identical
   either way, just filled with a soft brand-teal gradient, the site's
   own favicon mark dimmed in the center, and a small caption, rather
   than sitting empty/"barren". Deliberately restrained — a tint and a
   watermark, not a busy illustration. */
.news-hero-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  background: linear-gradient(135deg, rgba(0,114,153,0.12), rgba(0,114,153,0.03));
  border: 1px solid rgba(0,114,153,0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.news-hero-placeholder__mark {
  width: 56px;
  height: 42px;
  color: var(--color-brand-teal, #007299);
  opacity: 0.4;
}
.news-hero-placeholder__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8a94a0);
}
@media (prefers-color-scheme: dark) {
  .news-hero-placeholder {
    background: linear-gradient(135deg, rgba(111, 218, 218, 0.12), rgba(111, 218, 218, 0.03));
    border-color: rgba(111, 218, 218, 0.2);
  }
  .news-hero-placeholder__mark { color: #6fdada; opacity: 0.5; }
}
/* Inverted World hero cards get a plum accent stripe (see
   .news-hero-card--iw), so their placeholder should lean plum too,
   rather than teal fighting the accent right next to it. */
.news-hero-card--iw .news-hero-placeholder {
  background: linear-gradient(135deg, var(--ev-plum-bg), rgba(0,0,0,0));
  border-color: var(--ev-plum-border);
}
.news-hero-card--iw .news-hero-placeholder__mark { color: var(--ev-plum-text); }
.news-hero-card h2 {
  font-size: 1.5rem;
  line-height: 1.28;
  margin: 1rem 0 0.6rem;
  color: var(--color-text-primary);
  font-weight: 800;
}
.news-hero-card p {
  color: var(--color-text-secondary, #5b6670);
  line-height: 1.55;
  margin: 0 0 0.7rem;
}

/* Publication name pulled off "PUBLICATION: Headline" titles, plus a
   "Stephen's Take" badge for posts tagged #comment — both sit in a
   shared row above the headline in cards, or inline before it in the
   tighter archive rows (overridden below). */
.news-pub-pill,
.news-comment-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
/* CHANGED (3rd pass) 28 Jul 2026: designer-supplied palette — quiet,
   soft-filled pill (was a bold solid mid-blue, which read as loud next
   to the Counterpoint pill once that was also a solid fill). Regular
   source tags are meant to be calm background info; only Counterpoint
   should draw the eye. Dark-mode values are ours, not the designer's
   brief (which was light-mode only) — chosen to keep the same
   soft-tint-on-dark-surface treatment already used elsewhere on this
   page (e.g. .news-pub-date, .news-comment-badge's own dark variant). */
.news-pub-pill {
  color: #3A4A5C;
  background: #EEF1F6;
}
@media (prefers-color-scheme: dark) {
  .news-pub-pill {
    color: #c3ccd6;
    background: rgba(58, 74, 92, 0.32);
    border: 1px solid rgba(58, 74, 92, 0.5);
  }
}
.news-comment-badge {
  color: #b4342e;
  background: rgba(180,52,46,0.1);
}
/* CHANGED (3rd pass) 28 Jul 2026: renamed again, "Birthgap Backcheck"
   -> "Birthgap Counterpoint" (clearer: signals an opposing/critiquing
   view, not just a restatement) then to "+ Birthgap Counterpoint" (the
   "+" makes it read as an addition on top of the story, not a category
   of it). Design also reverted from the bordered/no-fill box back to a
   filled pill — designer's brief called for the SAME shape as the
   regular source tags (so both read as "one family of small labels"),
   just a distinguishing color, rather than a different shape carrying
   its own meaning. */
/* CHANGED (4th pass) 28 Jul 2026: back to outlined/no-fill (tried
   this once before with a blue-family accent; trying again now with
   the new deep teal so it matches the rest of the page's accent
   color instead of standing apart in its own blue). Kept the pill
   shape (border-radius 999px) so it still visually belongs to the
   same "small label" family as the source tags, just distinguished by
   having no fill rather than by shape. */
.news-breakdown-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  color: #1F5A68;
  background: transparent;
  border: 1px solid #1F5A68;
}
@media (prefers-color-scheme: dark) {
  /* CHANGED (2nd pass) 28 Jul 2026: still the loudest thing on the
     page even after the first dimming pass — the real issue is that
     an outline-only badge has nothing BUT its border/text to carry
     contrast, so against near-black even a moderately bright color
     reads as a sharp, glowing line. Dropped further into a properly
     muted grey-teal, AND added a faint background tint (something the
     light-mode version deliberately doesn't have) so the shape reads
     as a soft, filled-ish label like every other pill on the page,
     rather than a stark outline that pops by contrast alone. */
  .news-breakdown-badge {
    color: #8FB8B3;
    background: rgba(90, 140, 135, 0.1);
    border-color: rgba(90, 140, 135, 0.4);
  }
}
/* Inverted World wordmark badge — reuses the site's plum accent
   (same family as "Members only" on the Documentary page) and an
   italic treatment, echoing how the nav used to set the name in
   <em> before it was folded in here. */
.news-iw-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  color: var(--ev-plum-text);
  background: var(--ev-plum-bg);
  border: 1px solid var(--ev-plum-border);
}
@media (prefers-color-scheme: dark) {
  /* .news-pub-pill's own dark-mode override removed 28 Jul 2026 — now a
     solid fill (see above), which already has enough contrast in dark
     mode on its own, unlike the old light tint this replaced. */
  .news-comment-badge {
    color: #ff8f87;
    background: rgba(255, 143, 135, 0.16);
    border: 1px solid rgba(255, 143, 135, 0.35);
  }
}

/* Inverted World cards: same hero/mini layout as News, just set
   apart with a left accent stripe in the same plum as the badge
   above — differentiated without a second visual system. */
.news-hero-card--iw,
.news-mini-card--iw {
  position: relative;
  padding-left: 16px;
}
.news-hero-card--iw::before,
.news-mini-card--iw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--ev-plum-border);
}
/* Small "comments open" indicator — shown on any post carrying the
   internal #Allow Member Comments tag (see hasMemberComments()
   below), regardless of section/IW status. Deliberately subdued:
   an icon only, no count (Ghost's Content API doesn't expose
   comment counts at all, so a live number here isn't possible —
   see chat 23 Jul 2026), muted color rather than a bright pill
   like the badges above so it reads as a small affordance, not
   another tag. */
.news-comments-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--color-text-muted, #8a94a0);
  opacity: 0.75;
}
.news-comments-icon svg { display: block; }
@media (prefers-color-scheme: dark) {
  .news-comments-icon { color: rgba(255,255,255,0.55); }
}
.news-badge-row > * + * { margin-left: 0.4rem; }
/* Hero card: badge row on its own line above the headline (still
   embedded inside the <h2> — unchanged). */
.news-hero-card h2 .news-badge-row {
  display: block;
  margin: 0 0 0.4rem;
}
/* CHANGED 25 Jul 2026: mini cards now render the badge row as a
   direct child of .news-mini-card itself (see miniCardHtml/
   buildBadgeRow) rather than inside the <h3> — so it's always the
   card's own top row, flush left, in the same position whether or
   not the card has an image. Replaces the old
   ".news-mini-card h3 .news-badge-row" rule. */
.news-mini-card > .news-badge-row {
  display: block;
  margin: 0 0 0.5rem;
}
/* Archive rows are a tight single line — keep the badge row inline. */
.news-archive-row h4 .news-badge-row {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.55rem 0 0;
}

/* Original article's publish date, pulled from a trailing
   "[YYYY-MM-DD]" in the title. */
.news-pub-date {
  font-size: 0.72rem;
  color: var(--color-text-muted, #8a94a0);
  margin: -0.2rem 0 0.6rem;
}
.news-archive-row h4 .news-pub-date {
  display: inline;
  margin: 0 0 0 0.6rem;
  font-size: 0.76rem;
}

.news-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}

/* CHANGED 25 Jul 2026: the card itself is now a simple vertical
   stack — badge row on top (its own row, see the
   ".news-mini-card > .news-badge-row" rule above), then the
   image+heading body below it. The 92px/1fr image grid that used
   to live directly on .news-mini-card has moved to
   .news-mini-card-body (below), so it no longer competes with the
   badge row for column space. */
.news-mini-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.news-mini-card-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.9rem;
  /* CHANGED 23 Jul 2026: was align-items: start, which pinned the
     title flush to the image's top edge — looked cramped/lopsided
     next to a short 68px thumbnail. Centering balances the text
     block alongside the image instead. */
  align-items: center;
}
.news-mini-card img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-bg-light-gray, #e8e8e6);
}
/* CHANGED 23 Jul 2026: no feature_image on this post — collapse the
   92px image column entirely so the title stretches full-width
   instead of leaving a blank gap where a thumbnail would sit.
   CHANGED 25 Jul 2026: re-scoped to target the body wrapper (not
   the whole card, which is no longer a grid at all). */
.news-mini-card--no-image .news-mini-card-body {
  grid-template-columns: 1fr;
}
/* CHANGED 25 Jul 2026 (round 2): wraps the heading + its date so
   they're a single grid item sitting in the body's text column —
   keeps the date directly under the headline, to the right of the
   image, instead of the date auto-flowing under the image's own
   column (the bug from round 1's standalone full-width row). */
.news-mini-card-text {
  min-width: 0;
}
.news-mini-card h3 {
  font-size: 0.98rem;
  line-height: 1.32;
  margin: 0 0 0.15rem;
  color: var(--color-text-primary);
  font-weight: 700;
}
/* Tighter than the generic .news-pub-date spacing (tuned for hero/
   archive layouts) — mini cards sit the date right under a short
   heading with no room to spare. */
.news-mini-card-text .news-pub-date {
  margin: 0 0 0;
}

.news-grid-secondary {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-divider-subtle, rgba(0,0,0,0.08));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 2.4rem;
}

.news-empty {
  color: var(--color-text-muted, #8a94a0);
  font-size: 0.95rem;
  padding: 1.6rem 0;
}

html { scroll-behavior: smooth; }

/* Jump band between Latest and the section blocks — quick anchor
   links to whichever sections currently have stories. Same quiet
   panel treatment as #news-archive below, just shorter, so both
   read as "framing" rather than curated content blocks. */
/* CHANGED 23 Jul 2026: was a single flex row (label + pills + Filter
   all inline, wrapping together) — restructured to two stacked
   rows: the "Sections" label centered on its own row, then pills +
   Filter in a row below. Still grows naturally as more sections
   get pills (news-sections-band-row wraps, same as before) — this
   is a layout change, not a fixed-height one, so an eventual third
   or fourth row of pills just adds height rather than clipping. */
.news-sections-band {
  max-width: 1280px;
  margin: 0 auto 2.4rem;
  padding: 1rem 1.5rem;
  background: var(--color-bg-surface, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border-default, rgba(0,0,0,0.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* CHANGED 27 Jul 2026: Filter moved into this same row as the label,
   rather than sitting in its own row below the pills (saved the
   vertical space that row used to take). A 1fr/auto/1fr grid keeps the
   title mathematically centered across the row's full width — Filter
   in column 1 (left-aligned within it), the label in the auto-sized
   middle column, and an empty spacer in column 3 the same width as
   column 1, so the label isn't just centered in the leftover space
   beside the button. */
.news-sections-band-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}
.news-sections-band-header .news-filter-toggle {
  justify-self: end;
}
/* CHANGED 27 Jul 2026: italic wasn't rendering as intended (font/
   platform dependent) — dropped italic, and swapped the bold 800
   weight for a fine/light weight instead, same size and generous
   letter-spacing, for a more elegant eyebrow-style treatment rather
   than a bold shout. Still reads as a section divider, not competing
   with the pills below it for attention. */
.news-sections-band-label {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
}
.news-sections-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.news-sections-band-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.news-sections-band-pills a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  background: rgba(0,102,102,0.08);
  border: 1px solid rgba(0,102,102,0.18);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  transition: background 0.15s, border-color 0.15s;
}
.news-sections-band-pills a:hover {
  background: rgba(0,102,102,0.16);
  border-color: rgba(0,102,102,0.35);
}
/* Inverted World's pill in the jump band gets the same italic +
   plum treatment as its card badge, for the same reason — set apart
   from the press-clipping sections around it. */
.news-sections-band-pills a.news-pill--iw {
  font-style: italic;
  color: var(--ev-plum-text);
  background: var(--ev-plum-bg);
  border-color: var(--ev-plum-border);
}
.news-sections-band-pills a.news-pill--iw:hover {
  background: var(--ev-plum-bg);
  filter: brightness(0.95);
}
/* CHANGED 27 Jul 2026: thematic sections (World News, Culture, Research
   News, Latest Data — Inverted World keeps its own plum styling above,
   which still wins here on specificity) get their own row, set apart
   from the region pills above. First attempt used a grey-TEAL tint (too
   close to the region pills' own teal), then a plain neutral grey
   (which then matched the Filter button's own grey once that was
   scaled back) — settled on a warm amber/brass tint instead, a third
   distinct hue family from both the region pills' teal and the Filter
   button's grey. */
/* CHANGED 27 Jul 2026: removed the divider that used to sit between
   the region pills row and this thematic row — that line's now
   reserved for setting the email line apart from the pills as a whole
   (see .news-email-cta), not for separating the two pill rows from
   each other. */
.news-sections-band-row--thematic {
  margin-top: 0.2rem;
}
.news-sections-band-pills--thematic a {
  background: rgba(181, 136, 47, 0.12);
  border-color: rgba(181, 136, 47, 0.32);
  color: var(--color-text-secondary, #5b6670);
}
.news-sections-band-pills--thematic a:hover {
  background: rgba(181, 136, 47, 0.2);
  border-color: rgba(181, 136, 47, 0.45);
}
@media (prefers-color-scheme: dark) {
  .news-sections-band-pills a {
    background: rgba(111, 218, 218, 0.1);
    border-color: rgba(111, 218, 218, 0.3);
  }
  .news-sections-band-pills a:hover {
    background: rgba(111, 218, 218, 0.18);
    border-color: rgba(111, 218, 218, 0.45);
  }
  .news-sections-band-pills a.news-pill--iw,
  .news-sections-band-pills a.news-pill--iw:hover {
    background: var(--ev-plum-bg);
    border-color: var(--ev-plum-border);
  }
  /* CHANGED 28 Jul 2026: was var(--color-text-secondary) (~#a0a0a0
     grey) against this amber-tinted pill fill — read as muddy/low
     contrast ("brownish") rather than legible. A warm near-white
     reads clearly against the tint while staying in the same amber
     family, rather than a flat neutral grey that clashes with it. */
  .news-sections-band-pills--thematic a {
    background: rgba(214, 168, 84, 0.18);
    border-color: rgba(214, 168, 84, 0.4);
    color: #F0E9D8;
  }
  .news-sections-band-pills--thematic a:hover {
    background: rgba(214, 168, 84, 0.26);
    border-color: rgba(214, 168, 84, 0.55);
  }
}
@media (max-width: 820px) {
  .news-sections-band { padding: 1rem 1.2rem; }
  /* The 1fr/auto/1fr centering grid needs real side columns to balance
     against — too cramped once the button and title are both fighting
     for space on a narrow screen. Stack instead: title on its own
     centered row, Filter below it, left-aligned like every other
     control on the page. Flex + explicit order (rather than relying on
     DOM order) since the button comes first in the markup but should
     render second here. */
  .news-sections-band-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .news-sections-band-header .news-filter-toggle {
    order: 2;
    align-self: flex-start;
  }
  .news-sections-band-label { order: 1; }
  .news-sections-band-header-spacer { display: none; }
}

/* ---- Filterable archive list ---- */
/* Subtly set apart from the Latest/section blocks above it — a
   quieter surface panel makes clear this is the "browse everything"
   list rather than another curated block. */
/* CHANGED 23 Jul 2026: THIS is the rule that actually controls the
   box's padding — the element has both id="news-archive" and
   class="news-sections-wrap", and the ID selector's higher
   specificity was silently overriding every previous edit made to
   .news-sections-wrap's own padding further down this file (those
   edits were real CSS, just never the one actually applied — found
   via devtools computed styles showing 28.8px/35.2px, matching
   this rule's 1.8rem/2.2rem exactly, not the other one). Halved
   top and bottom again: 1.8rem/2.2rem -> 14.4px/17.6px. */
#news-archive {
  background: var(--color-bg-surface, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border-default, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 14.4px 2rem 17.6px;
}
.news-archive-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
.news-archive-controls select {
  font-family: var(--bg-font);
  font-size: 0.88rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--color-border-default, rgba(0,0,0,0.15));
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
.news-archive-count {
  font-size: 0.82rem;
  color: var(--color-text-muted, #8a94a0);
  margin-left: auto;
}
/* Fakes a thin divider line between continent-ish groups in the
   Region filter's <option> list (see the FILTER_REGIONS population
   loop) — plain <select> markup has no real separator element, so a
   disabled, unselectable option styled to read as a faint rule is
   the closest reliable cross-browser equivalent. */
.news-filter-divider {
  color: var(--color-text-muted, #8a94a0);
  opacity: 0.5;
}

.news-archive-list { display: flex; flex-direction: column; }
.news-archive-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-divider-subtle, rgba(0,0,0,0.08));
  text-decoration: none;
  color: inherit;
}
.news-archive-row:hover h4 { color: var(--color-brand-teal); }
.news-archive-row h4 {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.news-archive-row .news-archive-tags {
  font-size: 0.76rem;
  color: var(--color-text-muted, #8a94a0);
  white-space: nowrap;
}

/* CHANGED 23 Jul 2026: batched archive rendering — this button
   reveals the next batch of already-filtered, already-in-memory
   results (see ARCHIVE_BATCH_SIZE / renderArchive in the script
   below). It's the last child inside .news-archive-list itself,
   not a separate element, since the list is just a flex column. */
.news-archive-loadmore {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  font-family: var(--bg-font);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-primary);
  background: var(--color-bg-surface, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border-default, rgba(0,0,0,0.15));
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.news-archive-loadmore:hover {
  background: var(--color-bg-light-gray, rgba(0,0,0,0.05));
}

@media (max-width: 820px) {
  .news-hero-grid { grid-template-columns: 1fr; }
  .news-grid-secondary { grid-template-columns: 1fr; }
  .news-archive-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  #news-archive { padding: 0.7rem 1.2rem 0.9rem; }
}

/* Sections box + Filter Stories: the small "Filter" pill expands the
   same box downward to reveal the archive controls + full list,
   rather than a separate panel elsewhere on the page — keeps
   everything in one place instead of scattering it, and it doesn't
   get lost as more Latest/Sections content is added over time. */
/* CHANGED 23 Jul 2026: this element has both class="news-sections-wrap"
   and id="news-archive" — the ID selector further up this file wins
   on specificity, so padding/background/border are set THERE now,
   not here, to avoid two rules quietly fighting over the same box
   again. This rule only sets what #news-archive doesn't. */
.news-sections-wrap {
  max-width: 1280px;
  margin: 0 auto 2.4rem;
}
/* One box, not two — the band and the filter body below it share
   this single border/background; neither carries its own. */
.news-sections-wrap .news-sections-band {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
/* CHANGED 23 Jul 2026: was the same teal tint as the section pills
   (rgba(0,102,102,...)), which made it read as another section
   rather than a distinct control. Neutral dark grey instead, in
   both light and dark mode, plus a visibly bigger chevron.
   CHANGED 27 Jul 2026: that neutral pill still read as just another
   section pill once it sat on its own row -- tried a solid teal
   button, then a plain slate grey, then a solid mid grey-teal fill --
   every solid-fill version read as too dark/heavy/"dramatic" once it
   had its own visual weight in the header row. Scaled back to a light
   tonal treatment instead -- a soft tinted background with a border,
   same family as the pills' own tonal style, just rectangular (not
   fully-rounded) and a different tint so it still reads as a distinct
   control without shouting. */
.news-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: rgba(109, 127, 128, 0.12);
  border: 1px solid rgba(109, 127, 128, 0.32);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.news-filter-toggle:hover {
  background: rgba(109, 127, 128, 0.2);
  border-color: rgba(109, 127, 128, 0.45);
}
.news-filter-toggle__chevron {
  display: inline-block;
  font-size: 1.35em;
  line-height: 1;
  transition: transform 0.15s;
}
.news-filter-toggle[aria-expanded="true"] .news-filter-toggle__chevron {
  transform: rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  .news-filter-toggle {
    color: var(--color-text-primary);
    background: rgba(143, 163, 163, 0.16);
    border-color: rgba(143, 163, 163, 0.35);
  }
  .news-filter-toggle:hover {
    background: rgba(143, 163, 163, 0.24);
    border-color: rgba(143, 163, 163, 0.5);
  }
}
.news-filter-body {
  background: none;
  border: none;
  border-radius: 0;
  margin-top: 1.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-border-default, rgba(0,0,0,0.08));
}