/* ============================================================================
   CANANews (Foundry child) — brand presentation
   ----------------------------------------------------------------------------
   Two jobs theme.json can't express:
   1. Map the brand-neutral Editorial module tokens (--foundry-editorial-*) onto
      the CANA palette. The `editorial` module ships neutral fallbacks in its own
      assets/editorial.css (handle: foundry-editorial); this file is enqueued AS A
      DEPENDENT of that handle, so these :root overrides win the cascade.
   2. The Signature Masthead header (.foundry-masthead, Chrome preset) + footer
      (.cn-footer, via [cn_footer]) site chrome. Editorial *block* styling now
      lives in the module — only site chrome remains here.

   FONTS (Handoff Standard): Source Serif 4 / Inter / Archivo Black / JetBrains
   Mono are self-hosted — Latin-subset woff2 in assets/fonts/, declared via
   theme.json fontFace.src (font-display: swap). No external font dependency.
   The stacks below keep system fallbacks only as graceful degradation.
   ========================================================================== */

:root {
  /* Editorial module brand mapping — CANA cn-* values */
  --foundry-editorial-accent:      #D62828; /* CN Red — kickers, glyphs, ribbons */
  --foundry-editorial-accent-deep: #A11F1F; /* CN Red Deep — hover/active */
  --foundry-editorial-ink:         #1A1A1A; /* CN Black — headlines */
  --foundry-editorial-text:        #212121; /* CN Text — body copy */
  --foundry-editorial-muted:       #595959; /* CN Text Muted — bylines, meta */
  --foundry-editorial-rule:        #E5E5E5; /* CN Rule — hairlines, borders */
  --foundry-editorial-bg:          #FFFFFF; /* CN Background */
  --foundry-editorial-surface:     #FAFAF7; /* CN Surface — cards/callouts */
  --foundry-editorial-link:        #1976B8; /* CN Sea — links / institutional UI */
  --foundry-editorial-link-deep:   #0E5A8C; /* CN Sea Deep — link hover */

  --foundry-editorial-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --foundry-editorial-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --foundry-editorial-font-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
  --foundry-editorial-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* === Base typography === */
body {
  font-family: var(--foundry-editorial-font-body);
  color: #212121;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  letter-spacing: -0.005em;
}
::selection { background-color: #D62828; color: #fff; }

/* === Root block-gap reset: kill the nav↔first-section gap ===
   Block-theme root layout applies margin-block-start: var(--wp--style--block-gap)
   to every top-level child after the first; with a header part first, the next
   full-bleed section opens a gap. WP emits it via a :where() rule (zero
   specificity), so this plain selector wins without !important. */
.wp-site-blocks > * { margin-block-start: 0; }
/* Logged-in only: WP reserves html margin-top for the fixed admin bar, but the
   root leaves an extra ~24px above the header — a white band between the admin
   bar and the masthead's dark utility strip. Pull the site blocks flush under
   the admin bar. Scoped to .admin-bar so the logged-out front-end is unaffected. */
body.admin-bar .wp-site-blocks { margin-top: -24px; }

/* Shared content-grid constraint for the Signature Masthead tiers.
   parts/header.html applies `cn-head__grid` to each tier's inner wrapper
   (foundry-util__in / foundry-mast__in / foundry-secnav__in) to hold them to the
   1320px content column — this is what fixes the old 1200px-vs-1320px masthead
   misalignment. Retained from the retired [cn_header] block: the only old .cn-*
   rule the block-composed Signature Masthead still depends on. */
.cn-head__grid { max-width: 1320px; margin: 0 auto; padding-inline: 1.25rem; }

/* Breathing room below the sticky header's underline (the .foundry-secnav bottom
   rule). Articles (.cn-article*) and pages (.cn-page) already carry a 40px top
   pad; the homepage, archives, search, and 404 mains were flattened to 0 by the
   `.wp-site-blocks > * { margin-block-start: 0 }` reset above — give them the
   same top gutter so content doesn't butt the black line. */
.cn-home,
.cn-archive,
.cn-404,
body.search .wp-site-blocks > main { padding-top: 2.5rem; }

/* === Header — Signature Masthead (Chrome preset) — CANA skin ===
   The block-composed successor to [cn_header]: parts/header.html composes the
   foundry-theme "Signature Masthead" structure (foundry-util / foundry-mast /
   foundry-secnav) and the Foundry Chrome module supplies behavior (per-section
   data-sec color, the foundry/dateline block, condense-on-scroll via the theme's
   chrome.js). This section maps the CANA broadsheet skin onto that structure —
   a faithful port of the retired .cn-* tier rules (the [cn_header] shortcode
   block, deleted 2026-07-24 after the pilot was accepted; only .cn-head__grid
   above survives, still referenced by parts/header.html).
   Every rule is prefixed .foundry-masthead so it outranks the module's neutral
   chrome.css regardless of stylesheet order (the editorial token precedent:
   outrank, don't !important-war). */

.foundry-masthead { --cn-red: #D62828; --cn-red-h: #A11F1F; --cn-sea: #1976B8; --cn-gold: #B07E00; --cn-ink: #1A1A1A;
  --foundry-chrome-accent: var(--cn-red);
  --foundry-chrome-cta-bg: var(--cn-red);
  --foundry-chrome-cta-bg-hover: var(--cn-red-h);
}
/* per-section color: the Chrome filter stamps data-sec; slugs map here */
.foundry-masthead [data-sec="politics"],
.foundry-masthead [data-sec="press-releases"] { --foundry-chrome-sec: var(--cn-sea); }
.foundry-masthead [data-sec="business"] { --foundry-chrome-sec: var(--cn-gold); }

/* block-default resets inside the masthead (paragraph margins, figure margins,
   and the flow-layout margin-block-start WP injects between sibling groups —
   without this every tier gains a phantom 24px of height) */
.foundry-masthead p { margin: 0; }
.foundry-masthead .wp-block-image { margin: 0; }
.foundry-masthead .wp-block-group { margin-block-start: 0; }

/* shared CTA pill (masthead + condensed nav) — port of .cn-cta */
.foundry-masthead .foundry-cta-pill {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--cn-red);
  color: #FFFFFF !important;
  padding: 0.6rem 1.15rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
  display: inline-block;
}
.foundry-masthead .foundry-cta-pill:hover,
.foundry-masthead .foundry-cta-pill:focus-visible { background: var(--cn-red-h); }

/* Tier 1 — dark utility strip (port of .cn-util) */
.foundry-masthead .foundry-util { background: #141414; color: #C7C7C7; font-size: 0.8rem; }
/* wrap is the floor under the breakpoints below, not a layout choice: at a large
   browser default font the links alone approach the full row width, so no
   breakpoint can keep one line and an ellipsis would DROP the date (WCAG 1.4.4
   wants text resizable to 200% without loss). Flex only wraps when the content
   genuinely cannot fit, so at a 16px default this changes nothing anywhere —
   the strip stays the single broadsheet line. Row-gap is tightened from the
   1rem column gap so a wrapped second line sits close rather than gapping. */
.foundry-masthead .foundry-util__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.2rem 1rem; padding-block: 0.45rem; }
.foundry-masthead .foundry-util__date { display: flex; align-items: center; letter-spacing: 0.01em; min-width: 0; overflow: hidden; white-space: nowrap; }
.foundry-masthead .foundry-util__date .foundry-dateline { color: #EDEDED; font-weight: 600; font-size: inherit; }
/* the strip clips (min-width:0 + overflow:hidden + nowrap on __date), so the
   text children carry the ellipsis themselves — text-overflow does nothing on
   a flex CONTAINER's overflowing children. Belt-and-braces only: the
   breakpoints below are sized so it should never engage above ~355px. */
.foundry-masthead .foundry-util__date .foundry-dateline,
.foundry-masthead .foundry-util__loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* two datelines, one visible: the block's `format` attr is a single global
   value, so a responsive string means two instances toggled by breakpoint.
   display:none keeps the hidden one out of the a11y tree. */
.foundry-masthead .foundry-util__date-short { display: none; }
/* __date is a block-group with FLOW layout, so WP hands every non-first child
   a `margin-block-start: var(--wp--style--block-gap)` (24px) — and flexing the
   container does NOT clear it (same phantom margin the condensed secnav fights
   further down). Harmless while the only later sibling was the location
   paragraph; the moment a second dateline joined, it dropped 24px below the
   strip's centreline and doubled the bar height. */
.foundry-masthead .foundry-util__date > * { margin-block-start: 0; }
.foundry-masthead .foundry-util__loc { color: #C7C7C7; }
.foundry-masthead .foundry-util__links { display: flex; align-items: center; gap: 1.15rem; white-space: nowrap; }
.foundry-masthead .foundry-util__links a { color: #C7C7C7; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.foundry-masthead .foundry-util__links a:hover,
.foundry-masthead .foundry-util__links a:focus-visible { color: #FFFFFF; }
.foundry-masthead .foundry-util__sep { width: 1px; height: 14px; background: #3A3A3A; display: inline-block; }
.foundry-masthead .foundry-ic { flex: none; }

/* Tier 2 — masthead (port of .cn-mast) */
.foundry-masthead .foundry-mast { background: #FFFFFF; border-bottom: 1px solid #ECECEC; }
.foundry-masthead .foundry-mast__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 1.15rem 1rem; }
.foundry-masthead .foundry-mast__tag { font-size: 0.8rem; color: #8A8A8A; }
.foundry-masthead .foundry-mast__logo { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.foundry-masthead .foundry-mast__logo a { display: flex; line-height: 0; }
/* max-width:none: WP's img { max-width:100% } letterboxes the SVG when a grid
   column squeezes it, and this SVG's viewBox crop leaks its baked strapline
   paths into the letterbox gap — lock the box to the aspect instead */
.foundry-masthead .foundry-mast__logo img { height: 44px; width: auto; max-width: none; display: block; }
.foundry-masthead .foundry-mast__strap {
  display: block;
  font-family: var(--foundry-editorial-font-heading);
  font-style: italic; font-size: 0.82rem; color: #8A8A8A;
  margin: 0; letter-spacing: 0.01em;
}
.foundry-masthead .foundry-mast__right { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }

/* Tier 3 — sticky section nav (port of .cn-secnav onto the core Navigation) */
.foundry-masthead .foundry-secnav {
  background: #FFFFFF;
  border-bottom: 2px solid var(--cn-ink);
  box-shadow: none;
}
.foundry-masthead .foundry-secnav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.foundry-masthead .foundry-sections { flex: 1; min-width: 0; }
/* core renders the nav children as [ul links][form search][ul subscribe] inside
   __responsive-container-content — flex the CONTENT row and let the search
   form's margin-left:auto push it (and everything after) to the right edge */
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container-content { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; }
.foundry-masthead .foundry-sections .wp-block-navigation__container { display: flex; align-items: center; gap: 0.25rem; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.foundry-masthead .foundry-sections .wp-block-navigation-item__content {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cn-ink);
  text-decoration: none;
  padding: 0.85rem 0.9rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.foundry-masthead .foundry-sections .wp-block-navigation-item__content:hover,
.foundry-masthead .foundry-sections .wp-block-navigation-item__content:focus-visible {
  color: var(--foundry-chrome-sec, var(--cn-red));
}
.foundry-masthead .foundry-sections .wp-block-navigation-item__content.is-active {
  color: var(--foundry-chrome-sec, var(--cn-red));
  border-bottom-color: var(--foundry-chrome-sec, var(--cn-red));
}

/* the in-nav search (wp:search) — port of .cn-secnav__search pill */
.foundry-masthead .foundry-sections form.wp-block-search { margin-left: auto; flex: none; }
/* row-reverse puts the (button-inside) icon on the LEFT of the input, matching
   the old pill's leading magnifier; slim paddings match the old 30px pill */
.foundry-masthead .foundry-secnav__search .wp-block-search__inside-wrapper {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 0.5rem;
  border: 1px solid #E1E1E1; border-radius: 20px; padding: 0.3rem 0.8rem;
  transition: border-color 0.15s ease;
}
.foundry-masthead .foundry-secnav__search .wp-block-search__inside-wrapper:focus-within { border-color: #C9C9C9; }
.foundry-masthead .foundry-secnav__search .wp-block-search__input {
  border: 0; outline: 0; background: transparent;
  font-family: var(--foundry-editorial-font-body); font-size: 0.85rem; color: var(--cn-ink);
  width: 11rem; padding: 0.2rem 0; min-width: 0; height: auto; line-height: 1.4;
}
.foundry-masthead .foundry-secnav__search .wp-block-search__input::placeholder { color: #8A8A8A; }
.foundry-masthead .foundry-secnav__search .wp-block-search__button {
  background: transparent; border: 0; padding: 0; margin: 0; color: #8A8A8A; cursor: pointer; display: flex;
}
.foundry-masthead .foundry-secnav__search .wp-block-search__button svg { width: 16px; height: 16px; }

/* in-nav Subscribe (condensed-only on desktop; always in the mobile overlay) */
.foundry-masthead .foundry-secnav__cta { display: none; }
.foundry-masthead .foundry-secnav__cta .wp-block-navigation-item__content {
  background: var(--cn-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border-radius: 6px;
  border-bottom: 0;
  margin-bottom: 0;
}
.foundry-masthead .foundry-secnav__cta .wp-block-navigation-item__content:hover,
.foundry-masthead .foundry-secnav__cta .wp-block-navigation-item__content:focus-visible { background: var(--cn-red-h); color: #FFFFFF; }

/* condensed-only elements — revealed when chrome.js adds .is-condensed */
.foundry-masthead .foundry-secnav__wm { display: none; }
.foundry-masthead .foundry-secnav__wm a { display: flex; line-height: 0; }
.foundry-masthead .foundry-secnav__wm img { height: 26px; width: auto; display: block; }
.foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__wm { display: inline-flex; align-items: center; flex: none; }
.foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__cta { display: inline-flex; }
.foundry-masthead .foundry-secnav.is-condensed .foundry-sections .wp-block-navigation__container { flex: 0 1 auto; justify-content: center; }

/* …but not below 1100px. The condensed row wants ~1010px (wordmark 188 + five
   section links 481 + search 236 + Subscribe 98 + gutters) in a content column
   only (viewport - 40px) wide, so from 760–1050 it is over-subscribed. Nothing
   clips the overflow: the <ul> is `flex: 0 1 auto` with `min-width: 0` AND
   `justify-content: center`, so once it is squeezed under its min-content width
   the nowrap links spill out BOTH sides of its box — the wordmark paints over
   "News" on the left and "Press Releases" paints over the search pill on the
   right (search→Subscribe gap measured -6px at 900, -14.5px at 800).
   [Figures above are from the 2026-07-30 Archivo wordmark. The 2026-08-25
   rebuild onto the legacy Arial letterforms narrowed it 188→166px, so the row
   now wants ~988px — still over-subscribed below ~1050. This rule stands.]
   The wordmark is the cheapest ~166px to reclaim, but it must not simply be
   dropped: this bar is sticky for the whole scroll, and its <a href="/"> is the
   only route home in the row (parts/header.html:54), so hiding it leaves every
   viewport from 760–1100 — laptops included — with no identity and no way home.
   Swap it for a compact mark instead. cananews-mark-cn.svg is the CN monogram:
   the wordmark's own C (Arial Black, red) and N (Arial Bold, black) set 4 units
   apart, generated from the same fonts by scripts/build-logos.py. Same
   letterforms as the masthead, #D40A00/#000000, no font dependency.
   (Do NOT use cananews-mark.svg here: it is a 128×128 app tile carrying its own
   background and 20px corner radius, which is wrong inline in this bar. The old
   warning here — that mark.svg and logo-mono.svg drew live <text> with a Google
   Fonts @import — was fixed 2026-07-30 and applies to no asset in the kit now.)
   The mark renders 36.5px at the bar's 26px height inside the 45px anchor. The
   anchor stays 45px deliberately (2026-08-25): the ~8px of slack is a buffer,
   and since the mark only ever got narrower it cannot re-open the overlap. The
   anchor keeps its aria-label, so identity and the only route home survive at
   every width.
   45px is the ceiling here: a 97px crop of the whole word "CANA" was measured
   and does NOT seat below ~960 — at 901 the link list spilled 31px past the
   gutter and search overlapped Subscribe by 2.3px, and closing that needed the
   search at 4rem plus a tighter mark gutter plus a shorter mark. */
@media (max-width: 1099.98px) and (min-width: 760px) {
  .foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__wm img { width: 0; visibility: hidden; }
  .foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__wm a {
    width: 45px; height: 26px;
    background: url(../logos/cananews-mark-cn.svg) left center / auto 26px no-repeat;
  }
}

/* The mark alone is not enough at the bottom of the band. The five links need
   481px; below ~900 the column (viewport - 40) can't seat mark 97 + links 481 +
   search + Subscribe 98 + gutters, and the <ul> is squeezed under min-content
   again — which does NOT clip, it spills both ways: measured with the wordmark
   merely hidden, at 780 "News" started at x=6, 14px past the left gutter and not
   scrollable (left-side overflow adds no scroll width), while "Press Releases"
   ran ~10px into the search pill. Trading an overlap for an off-screen clip is
   not a fix, so buy the width from the links' own 0.9rem side padding instead of
   hiding anything: 0.5rem returns 64px across five links. Text size is untouched;
   the only visible change is a slightly tighter hover underline.
   Gated at 900 because that is where the search input already steps down, so the
   two reductions share a boundary instead of introducing a third. */
@media (max-width: 900px) and (min-width: 760px) {
  .foundry-masthead .foundry-secnav.is-condensed .foundry-sections li:not(.foundry-secnav__cta) > .wp-block-navigation-item__content {
    padding-inline: 0.5rem;
  }
}

/* --- condensed bar: one shared centreline -----------------------------------
   The row (.foundry-secnav__in) is a block-group with FLOW layout, so WP hands
   its second child — the <nav> — a `margin-block-start: var(--wp--style--block-gap)`
   (24px). Flexing the row doesn't clear that margin: with align-items:center the
   nav's MARGIN box is what gets centred, so the whole nav row (links, search,
   Subscribe) lands ~12px below the condensed wordmark and jams against the 2px
   bottom rule. Trade the phantom top margin for symmetric padding — identical
   bar height, but wordmark / links / search / Subscribe now share a centreline.

   The section links are the one thing that must NOT centre: their hover/active
   underline is meant to sit on the bar's bottom rule (hence the -2px pull on the
   base rule). They grow back through the row's bottom padding to get there.

   Desktop-only: below 760px chrome.css collapses this bar to height 0 and the
   nav becomes the mobile overlay, which sets its own column geometry — these
   rules out-specify it, so keep them out of its way entirely. */
@media (min-width: 760px) {
  .foundry-masthead .foundry-secnav.is-condensed { --cn-secnav-pad: 0.75rem; }
  .foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__in { padding-block: var(--cn-secnav-pad); }
  .foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__in > * { margin-block-start: 0; }
  .foundry-masthead .foundry-secnav.is-condensed .foundry-sections li:not(.foundry-secnav__cta) > .wp-block-navigation-item__content {
    padding-block: 0.7rem calc(0.7rem + var(--cn-secnav-pad));
    margin-bottom: calc(-1 * var(--cn-secnav-pad) - 2px);
  }
  /* `.is-condensed … .wp-block-navigation-item__content` (0,4,0) used to catch
     the Subscribe pill too and overwrite its 0.45rem block padding with the
     links' 0.7rem — a 45px-tall button in a bar with 1.9px of clearance under
     it. The :not() above hands the pill back its own padding; it now matches
     the search pill's height and sits on the same centreline. */
}

/* The two HORIZONTAL gutters are gated higher than the alignment fixes above,
   because they cost row width and the condensed row is already over-subscribed
   below ~1050px: wordmark + five section links + search + Subscribe need ~1010px
   of a content column that is only (viewport - 40px) wide, so from 760–1050 the
   centred link list already overlaps the search pill. That is a pre-existing
   defect (unchanged by this pass); widening the gutters there would deepen it
   and, at 800px, tip the document into horizontal overflow. Above 1100px the row
   has 200px+ of slack and both gutters are free. */
@media (min-width: 1100px) {
  /* the wordmark is masthead chrome, not a section link — at the row's 1rem
     default it sits the same distance from "News" as the links sit from each
     other, so it reads as the first nav item. Widen the gutter to separate it. */
  .foundry-masthead .foundry-secnav.is-condensed .foundry-secnav__in { gap: 2.25rem; }
  /* 0.25rem left the Subscribe pill 4px off the search pill */
  .foundry-masthead .foundry-secnav.is-condensed .foundry-sections .wp-block-navigation__responsive-container-content { gap: 0.75rem; }
}

/* hamburger + mobile overlay (core wp:navigation overlayMenu:"mobile") */
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container-open { margin-left: auto; color: var(--cn-ink); }
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open {
  background: #FFFFFF; color: var(--cn-ink); padding: 1.5rem 1.25rem;
}
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex-wrap: nowrap;
}
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 0.6rem 0; border-bottom: 0; margin-bottom: 0; font-size: 1.15rem;
}
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open form.wp-block-search { margin-left: 0; margin-top: 1rem; width: 100%; align-self: stretch; }
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .foundry-secnav__search .wp-block-search__input { width: 100%; }
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .foundry-secnav__cta { display: block; margin-top: 1rem; }
/* the generic overlay link color (ink) must not bleed into the Subscribe pill */
.foundry-masthead .foundry-sections .wp-block-navigation__responsive-container.is-menu-open .foundry-secnav__cta .wp-block-navigation-item__content { color: #FFFFFF; font-size: 0.95rem; padding: 0.6rem 1.15rem; }

@media (max-width: 900px) {
  .foundry-masthead .foundry-secnav__search .wp-block-search__input { width: 8rem; }
}
/* One last step. With the 45px mark back in the row the bottom of the band is
   short again: at 785 the link list had eaten its whole gutter and was closing
   on the mark. 6rem returns 32px, which restores the full 16px mark gutter from
   785 down to the 760 floor. The input keeps its magnifier, its pill and a
   usable field; its placeholder was already truncating at 8rem below 900, so
   this is a change of degree, not of kind. */
@media (max-width: 800px) and (min-width: 760px) {
  .foundry-masthead .foundry-secnav__search .wp-block-search__input { width: 6rem; }
}
@media (max-width: 760px) {
  .foundry-masthead .foundry-mast__in { grid-template-columns: auto 1fr auto; align-items: start; }
  .foundry-masthead .foundry-mast__tag { display: none; }
  .foundry-masthead .foundry-mast__logo { justify-self: start; text-align: left; align-items: flex-start; }
  .foundry-masthead .foundry-mast__logo img { height: 40px; }
  /* merged mobile row (chrome.css collapses the nav band and drops the burger
     in absolutely): compact aspect-locked logo + slim pill + burger all fit
     one row at 375px; strap stays one line (nowrap, overflows the grid col
     harmlessly); the old band's border is gone — the mast border is the
     header's bottom edge */
  .foundry-masthead { --foundry-chrome-burger-top: 3.9rem; --foundry-chrome-burger-right: 1.25rem; }
  .foundry-masthead .foundry-mast__logo img { height: 28px; }
  /* one-line strap that paints past its grid column WITHOUT widening it:
     width:0 keeps the column's min-content at the logo's width (a nowrap
     strap otherwise inflates the track and shoves the CTA off-grid) */
  .foundry-masthead .foundry-mast__strap { white-space: nowrap; width: 0; }
  .foundry-masthead .foundry-mast__right { margin-right: 2.4rem; margin-top: 0; }
  .foundry-masthead .foundry-mast__right .foundry-cta-pill { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
  .foundry-masthead .foundry-secnav { border-bottom: none; }
}
/* Utility-strip space budget (measured on the live render, 0.8rem strip font):
   row padding 40px + flex gap 16px + __links 243.5px = 299.5px of non-date
   chrome, and __links is nowrap and does not shrink — so every px of pressure
   lands on the date. Worst-case strings (not today's):
     "Wednesday, September 30, 2026"  211px -> needs >= 510.5px
     " ·  Bridgetown, Barbados"       155px -> full+loc needs >= 665.5px
     "Wed, Sep 30"                     81px -> needs >= 380.5px, or >= 352px
                                              once the link gaps tighten below.
   Hence 680px (not 560) for the location and 530px for the short date.

   Expressed in `em`, NOT px, because the thing being measured is text: the
   strip font, the flex gap and the link gaps are all rem, so raising the
   browser's default font size inflates the date and the links while a px
   breakpoint holds still — the swap arrives too late and it clips again. An
   `em` media query resolves against that same browser default (it ignores
   `html{font-size}`, so page zoom is unaffected — zoom already scales the
   viewport), which makes the two sides move together. Values are the exact
   equivalents at a 16px default, so behaviour there is unchanged:
     42.5em = 680px   33.125em = 530px */
@media (max-width: 42.5em) {
  .foundry-masthead .foundry-util__loc { display: none; }
}
@media (max-width: 33.125em) {
  .foundry-masthead .foundry-util__date-full { display: none; }
  .foundry-masthead .foundry-util__date-short { display: block; }
  /* buys ~29px back from the four inter-link gaps; the rules still separate
     Search / Log in / CaribVision so nothing reads as run together */
  .foundry-masthead .foundry-util__links { gap: 0.7rem; }
}

/* === Footer — enhanced 4-column (brand+contact / Sections / Company / news) ===
   Rendered by [cn_footer] (mu-plugins/cananews/footer.php). Dark charcoal ground
   with red section rules, sea-blue nav bullets, gold contact glyphs; the fourth
   column is a MailPoet newsletter capture (posts to MP v1 → CANANews Daily). */
.cn-footer {
  --cn-f-red: #E63A3A; --cn-f-sea: #4AA3DD; --cn-f-gold: #E0A800;
  --cn-f-ink: #C7C7C7; --cn-f-rule: #2F2F2F;
  background: #141414; color: #EDEDED; margin-top: 4rem; padding: 3.25rem 1.25rem 1.5rem;
}
.cn-footer a { color: var(--cn-f-ink); text-decoration: none; transition: color .15s; }
.cn-footer a:hover { color: #FFFFFF; }
.cn-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}

/* Col 1 — brand + contact */
.cn-footer__brand { display: inline-block; }
.cn-footer__brand img { display: block; height: 46px; width: auto; }
.cn-footer__blurb {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 1rem; line-height: 1.5; color: var(--cn-f-ink);
  margin: 1.15rem 0 1.35rem; max-width: 34ch;
}
.cn-footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; color: var(--cn-f-ink); }
.cn-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.cn-footer__ic { color: var(--cn-f-gold); flex: 0 0 auto; margin-top: 1px; }

/* Nav columns (Sections / Company) */
.cn-footer__heading {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #FFFFFF; margin: 0 0 1.15rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--cn-f-red); display: inline-block;
}
.cn-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.cn-footer__nav a { font-family: var(--foundry-editorial-font-body); font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; }
.cn-footer__nav li a::before { content: "\203A"; color: var(--cn-f-sea); font-weight: 700; }

/* Col 4 — newsletter (MailPoet) */
.cn-footer__news .cn-footer__heading { border-bottom-color: var(--cn-f-sea); }
.cn-footer__news-blurb { font-size: .9rem; line-height: 1.5; color: var(--cn-f-ink); margin: 0 0 1rem; }
.cn-news-form { display: flex; flex-direction: column; gap: .55rem; }
.cn-news-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cn-news-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cn-news-form input {
  font-family: var(--foundry-editorial-font-body); font-size: .875rem; padding: .65rem .8rem;
  border: 1px solid #3A3A3A; border-radius: 6px; background: #1E1E1E; color: #EDEDED; width: 100%; box-sizing: border-box;
}
.cn-news-form input::placeholder { color: #8A8A8A; }
.cn-news-form input:focus { outline: 2px solid var(--cn-f-sea); outline-offset: 1px; border-color: var(--cn-f-sea); }
.cn-news-form button {
  font-family: var(--foundry-editorial-font-body); font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  background: var(--cn-f-red); color: #FFFFFF; border: 0; border-radius: 6px; padding: .75rem 1rem; cursor: pointer; margin-top: .15rem;
}
.cn-news-form button:hover { background: #C81E1E; }
.cn-news-form button:disabled { opacity: .6; cursor: default; }
.cn-news-form__msg { font-size: .8rem; margin: .2rem 0 0; min-height: 1em; color: var(--cn-f-ink); }
.cn-news-form__msg.is-ok { color: #6FD08C; }
.cn-news-form__msg.is-error { color: #F08A8A; }
.cn-footer__fineprint { font-size: .74rem; color: #8A8A8A; margin: .7rem 0 0; line-height: 1.4; }
.cn-footer__fineprint a { color: #A9A9A9; text-decoration: underline; }

/* Bottom bar */
.cn-footer__bottom {
  max-width: 1240px; margin: 2.75rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--cn-f-rule);
}
.cn-footer__legal { font-family: var(--foundry-editorial-font-body); font-size: .8rem; color: #8A8A8A; margin: 0; }
.cn-footer__tag { font-family: var(--foundry-editorial-font-heading); font-style: italic; color: #A9A9A9; margin-left: .5rem; }
.cn-footer__credit { font-family: var(--foundry-editorial-font-body); font-size: .74rem; color: #8A8A8A; margin: .45rem 0 0; }
.cn-footer__credit a { color: #A9A9A9; text-decoration: underline; text-underline-offset: 2px; }
.cn-footer__credit a:hover { color: #FFFFFF; }

@media (max-width: 900px) {
  .cn-footer__inner { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .cn-footer__news { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cn-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* === Homepage above-the-fold: BROADSHEET / news-desk model ====================
   The Reuters / Boston Globe hierarchy: one dominant lead (big image on top,
   large headline below) on the left, a cross-section "Top Stories" headline
   stack + homepage MPU on the right, and Most Read demoted out of the fold to a
   full-width horizontal strip below (.cn-home__most-read).

   Markup: front-page.html / home.html wrap the hero in .cn-home__hero-col and
   [cn_top_stories] + [cn_ad_zone cg-side-hp] in .cn-home__rail-col, inside an
   alignwide .cn-home__above-fold.

   This block OVERRIDES the foundry editorial module's hero--standard (which
   ships as a small image-LEFT / text-right card) — brand.css is enqueued after
   foundry-editorial so these win. The lead media goes full column width on top.

   Outer width: the parent .cn-home main is flow layout, so the block's alignwide
   applies no max-width here; we contain to 1240px to line up with the editorial
   bands below (which self-contain via their __inner). */
/* === Desktop content width — widened to a news-desk measure ==================
   The shared foundry parent (wideSize) + module bands ship at 1200px content;
   we widen cananews ONLY — here + via the child theme.json wideSize (1320px) —
   never the shared parent or module. Article reading width (single.html measure,
   720px) is deliberately left alone. Every band container that hard-caps at
   1200 is bumped so alignwide bands and their inners line up at the new width;
   the above-fold + most-read carry a +40px padding offset to align with them. */
.foundry-editorial-section-band__inner,
.foundry-editorial-latest-strip,
.foundry-editorial-press-release-strip__inner,
.foundry-editorial-archive-feed,
.foundry-editorial-archive-feed--features .foundry-editorial-archive-feed__grid,
.foundry-editorial-geo-facts__inner { max-width: 1320px; }

.cn-home__above-fold {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 1360px;
  margin: 2rem auto 0;
  padding-inline: 1.25rem;
}
.cn-home__hero-col,
.cn-home__rail-col { min-width: 0; }
.cn-home__rail-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* hairline separating the lead column from the secondary stack */
  border-left: 1px solid var(--cn-rule, #E5E5E5);
  padding-left: 2.5rem;
}

/* --- Lead hero: image-on-top, headline below (override the module card) --- */
.cn-home__hero-col .foundry-editorial-hero__inner {
  display: block; /* was image-left flex/grid → stack media over body */
}
.cn-home__hero-col .foundry-editorial-hero__media {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
}
.cn-home__hero-col .foundry-editorial-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* crop, never distort — forgiving of small wire images */
  border-radius: 2px;
  background: #e9e9e9;
}
.cn-home__hero-col .foundry-editorial-hero__title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.1rem + 2.1vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0.65rem 0 0;
}
.cn-home__hero-col .foundry-editorial-hero__title a { color: var(--cn-black, #1A1A1A); }
.cn-home__hero-col .foundry-editorial-hero__dek {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: none; /* fill the lead column — a capped dek looked narrow vs the wide image */
}

/* --- Sub-leads: image-top cards UNDER the hero, in the left column ---
   The broadsheet "lead + sub-leads" row. Fills the lead column so it balances
   the taller Top Stories + ad rail instead of leaving dead space. Cards are the
   module's md/thumb-top renderer; we own the 2-up grid + the rule above it. */
.cn-sub-leads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cn-rule, #E5E5E5);
}
.cn-sub-leads .foundry-editorial-card__dek {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* --- Secondary "Top Stories" stack (right column) --- */
.cn-top-stories__heading {
  font-family: var(--foundry-editorial-font-display);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cn-black, #1A1A1A);
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--cn-red, #D62828);
}
/* Cards are the editorial module's own foundry_editorial_render_card() output
   (size=sm, thumb-right) — already brand-mapped by the module (red section
   eyebrow, serif title, square 96px thumb). We only own the vertical-stack
   rhythm: stack them with hairline dividers, slightly larger title than the
   module's sm default since this is a fold rail, not a dense grid cell. */
.cn-top-stories__list { display: flex; flex-direction: column; }
.cn-top-stories .foundry-editorial-card {
  padding: 0.95rem 0;
  border-top: 1px solid var(--cn-rule, #E5E5E5);
}
.cn-top-stories .foundry-editorial-card:first-child { padding-top: 0; border-top: 0; }
.cn-top-stories .foundry-editorial-card--sm .foundry-editorial-card__title {
  font-size: 1.02rem;
  line-height: 1.24;
}
/* Vertically center the body against the square thumb so a short headline
   doesn't leave a gap beneath it (the module default is top-aligned). */
.cn-top-stories .foundry-editorial-card--thumb-right { align-items: center; }

/* Sidebar ad unit (cg-side-hp) — capped to a 300px-wide MPU column. Applies in
   BOTH sidebar rails that carry this slug: the homepage right rail
   (.cn-home__rail-col) and the single-article rail (.cn-article-layout__rail,
   320px column). The creative renders at its NATURAL aspect ratio (no forced
   300×250 crop): interim demo creatives are landscape banners, and unconstrained
   they overflow the column (the 781×361 Sugar Bay creative bled off the article
   page). width:300 + height:auto shows them whole; the max-height cap still
   prevents a stray tall/half-page creative from dominating. Launch ad-ops target
   remains 300×250 MPUs trafficked to cg-side-hp; this degrades gracefully. */
.cn-home__rail-col .cn-ad-zone--cg-side-hp,
.cn-article-layout__rail .cn-ad-zone--cg-side-hp {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  margin: 0.25rem auto 0;
}
.cn-home__rail-col .cn-ad-zone--cg-side-hp .cn-ad-zone__slot,
.cn-article-layout__rail .cn-ad-zone--cg-side-hp .cn-ad-zone__slot { width: 300px; max-width: 100%; }
.cn-home__rail-col .cn-ad-zone--cg-side-hp .cn-ad-zone__slot img,
.cn-article-layout__rail .cn-ad-zone--cg-side-hp .cn-ad-zone__slot img {
  width: 300px;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  display: block;
}

/* AdSense fill behind direct ads (2026-09-28, #906489). A responsive unit
   AdSense answers "unfilled" keeps the height Google reserved for it (~400px on
   desktop, ~500px on a phone), so the zone showed a tall blank "Sponsored" box
   above the headline. Google's documented collapse is the first rule; the
   second drops the zone's eyebrow and margins along with it. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.cn-ad-zone:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Ad zones stay closed until they hold an ad (2026-10-10,
   docs/top-slot-shift-2026-10-10.md, fix option 1). Before AdSense answers,
   the responsive unit reserves 280px (desktop) or 390px (phone) and the zone
   showed a blank "Sponsored" box that pushed the page down, then collapsed
   about a second later on "unfilled"; with the AdSense script blocked it
   stayed for good. A zone now opens only for a direct image or a unit Google
   reports as filled. The clip keeps the zone's full width: display:none would
   make AdSense measure width 0 and refuse the unit. Browsers without :has()
   drop this rule and keep the behaviour above. */
.cn-ad-zone:not(:has(.cn-ad-zone__slot img, ins.adsbygoogle[data-ad-status="filled"])) {
  max-height: 0 !important;
  overflow: hidden !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  border-block-width: 0 !important;
}
.cn-ad-zone__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cn-text-muted, #595959);
}
.cn-ad-zone__eyebrow-extra { text-transform: none; letter-spacing: 0; }

/* --- Most Read: demoted to a full-width horizontal strip below the fold --- */
.cn-home__most-read {
  max-width: 1360px;
  margin: 1.25rem auto 0;
  padding: 1.1rem 1.25rem 0;
}
.cn-home__most-read .foundry-editorial-recirc-rail {
  border-top: 3px solid var(--cn-red, #D62828);
  padding-top: 0.9rem;
}
.cn-home__most-read .foundry-editorial-recirc-rail__title {
  font-family: var(--foundry-editorial-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.cn-home__most-read .foundry-editorial-recirc-rail__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-home__most-read .foundry-editorial-recirc-rail__item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.cn-home__most-read .foundry-editorial-recirc-rail__num {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 0.9;
  color: var(--cn-red, #D62828);
}
.cn-home__most-read .foundry-editorial-recirc-rail__hdl {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.24;
  margin: 0.1rem 0 0;
}
.cn-home__most-read .foundry-editorial-recirc-rail__hdl a { color: var(--cn-black, #1A1A1A); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cn-home__above-fold { grid-template-columns: 1fr; gap: 1.75rem; }
  .cn-home__rail-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--cn-rule, #E5E5E5); padding-top: 1.5rem; }
  /* Stacked: the Top Stories rail goes full width, so a thumb-right list leaves
     a big headline-to-thumb gap. Switch to a 2-up grid (gaps, no dividers) so
     each card is narrow enough to read tight. */
  .cn-top-stories__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .cn-top-stories .foundry-editorial-card { border-top: 0; padding: 0; }
  .cn-home__most-read .foundry-editorial-recirc-rail__list { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }
}
@media (max-width: 600px) {
  .cn-sub-leads { grid-template-columns: 1fr; gap: 1.25rem; }
  .cn-top-stories__list { grid-template-columns: 1fr; }
  .cn-home__most-read .foundry-editorial-recirc-rail__list { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ARTICLE (single) — chrome for the refined reading experience
   The brand structural marks (kicker, byline, hero, measure) per brand-spec.
   Editorial-module blocks (recirc-rail, section-recirc-footer, author-strip,
   callout, pull-quote, register-prompt) bring their own styling from
   editorial.css, already brand-mapped via the --foundry-editorial-* override.
   ========================================================================== */
.cn-article-layout { padding: 2.5rem 1.25rem 0; }
.cn-article-layout__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 3.5rem;
}
.cn-article { max-width: 720px; }

/* Kicker — post-terms (category) styled as the brand kicker line */
.cn-kicker { margin-bottom: 1rem; }
.cn-kicker, .cn-kicker a {
  font-family: var(--foundry-editorial-font-display);
  font-size: .8125rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cn-red, #D62828);
  text-decoration: none;
}
.cn-kicker a:hover { color: var(--cn-red-deep, #A11F1F); }

/* Headline */
.cn-article .cn-article__title,
.cn-article h1.wp-block-post-title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--cn-black, #1A1A1A);
  margin: 0 0 1.25rem;
}

/* Byline row — elevated: sea-blue author, muted caps, hairline */
.cn-meta {
  align-items: center;
  gap: .75rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cn-text-muted, #595959);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cn-rule, #E5E5E5);
  margin-bottom: 1.75rem;
}
.cn-meta .wp-block-post-author__name { color: var(--cn-sea, #1976B8); font-weight: 700; }
.cn-meta .wp-block-post-author__byline { color: var(--cn-text-muted, #595959); margin-right: .25rem; }
.cn-meta a { color: inherit; text-decoration: none; }

/* Hero */
.cn-article__hero { margin: 0 0 2rem; }
.cn-article__hero img { width: 100%; height: auto; border-radius: 4px; }
/* Featured image caption (mu-plugin hero-caption.php): body-caption look from
   the figcaption rule below, held to three lines so a long carried-over caption
   cannot push the story down. */
.cn-article .cn-article__hero figcaption.cn-article__hero-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Body typography + the measure */
.cn-article .wp-block-post-content { font-size: 1.125rem; line-height: 1.65; color: var(--cn-text, #212121); }
.cn-article .wp-block-post-content p { margin: 0 0 1.4rem; }
.cn-article .wp-block-post-content h2 { font-family: var(--foundry-editorial-font-heading); font-size: 1.7rem; line-height: 1.2; margin: 2.25rem 0 .9rem; }
.cn-article .wp-block-post-content h3 { font-family: var(--foundry-editorial-font-heading); font-size: 1.35rem; margin: 1.9rem 0 .75rem; }
.cn-article .wp-block-post-content a { color: var(--cn-sea, #1976B8); }
/* Register-prompt CTA: the shared foundry `register-prompt` module ships the button as
   white-on-red (background:#D62828; color:#FFF, single-class specificity). But the injected
   <aside> lands inside the article body, where the sea-blue body-link rule directly above
   outranks it (0,2,1 > 0,1,0) and bleeds blue text onto the red button — the clash. Re-assert
   the module's intended white text at matching specificity (same fix class as the subscribe-card
   CTA below). White works on both the default red bg and the `--free` variant's blue bg; the
   `__alt` text link stays sea-blue, which is correct. */
.cn-article .wp-block-post-content a.foundry-editorial-register-prompt__btn,
.cn-article .wp-block-post-content a.foundry-editorial-register-prompt__btn:hover { color: #FFFFFF; text-decoration: none; }

/* Body image captions — italic Inter + sea-blue left rule (the wsws.org bar) */
.cn-article figure figcaption,
.cn-article .wp-block-image figcaption {
  font-style: italic;
  font-size: .875rem;
  color: var(--cn-text-muted, #595959);
  padding: .65rem 0 0 .9rem;
  border-left: 3px solid var(--cn-sea, #1976B8);
  margin-top: .85rem;
  line-height: 1.45;
}

/* Byline read-time + dot separators between byline items */
.cn-meta__rt { color: var(--cn-text-muted, #595959); }
.cn-meta > * + *::before { content: "·"; color: #c4c4c4; margin-right: .75rem; font-weight: 700; }

/* === Named brand marks in the article body === */

/* Pull-quote — red mark, left-aligned, serif (concept .pq). Overrides the
   module's centered italic default for the CANA article context. */
.cn-article .foundry-editorial-pullquote {
  text-align: left;
  max-width: 720px;
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  position: relative;
}
.cn-article .foundry-editorial-pullquote__text {
  font-style: normal;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--cn-black, #1A1A1A);
}
.cn-article .foundry-editorial-pullquote__text::before {
  content: "\201C";
  position: absolute;
  left: -.15rem;
  top: -.35rem;
  margin: 0;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--cn-red, #D62828);
}
.cn-article .foundry-editorial-pullquote__text::after { content: none; }

/* Diaspora callout — "What this means for the region" (concept .wtm):
   warm surface, sea-blue left rule, uppercase deep-sea eyebrow, serif-italic body. */
.cn-article .foundry-editorial-callout {
  background: var(--cn-surface, #FAFAF7);
  border-left: 4px solid var(--cn-sea, #1976B8);
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
}
.cn-article .foundry-editorial-callout-eyebrow {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cn-sea-deep, #0E5A8C);
  margin: 0 0 .6rem;
}
.cn-article .foundry-editorial-callout-body {
  font-family: var(--foundry-editorial-font-heading);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: #2a2a2a;
  margin: 0;
}

/* Right rail */
.cn-article-layout__rail { align-self: start; position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 1.75rem; }

@media (max-width: 1100px) {
  .cn-article-layout__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .cn-article-layout__rail { position: static; }
}
@media (max-width: 768px) {
  .cn-article-layout { padding-top: 1.75rem; }
  .cn-article .cn-article__title,
  .cn-article h1.wp-block-post-title { font-size: 2.1rem; }
  .cn-article .wp-block-post-content { font-size: 1.0625rem; }
}

/* ===========================================================================
   HOMEPAGE SECTION BANDS — CANA notes on top of the Editorial module chrome
   The module ships the band + card geometry and reads the --foundry-editorial-*
   tokens (mapped above), so the ribbon (CN Red square + Archivo Black label),
   black head rule, serif headlines, red/sea/ muted card eyebrows, and the warm
   `.alt` band background all render automatically. Only two CANA touches remain.
   ========================================================================== */

/* "More from X →" link → CANA Sea (the module defaults it to accent red and the
   heavy display face; CANA wants the lighter sea treatment from the concept).

   Foundry >= 0.5.0 ships this rule as `color: var(--foundry-editorial-accent) !important`
   (CTA-hardening so module colours survive a host's greedy content-link rule). !important
   beats load order, so a plain `color` override here loses on 0.5.x and the link would
   render CN Red — and the :hover darken would die with it. Per the module's own guidance
   ("retarget the token, not the cascade") we ALSO rebind --foundry-editorial-accent on this
   element, which makes the module's own !important resolve to CN Sea. Additive and correct
   on BOTH versions: on 0.4.x the `color` line still wins and the token line is inert; on
   0.5.x the token line carries it. Scoped to this element only, so ribbons/kickers keep
   accent red, and the video-panel's own (0,2,0)!important #EDEDED still outranks both. */
.foundry-editorial-section-band__more {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 600;
  color: var(--foundry-editorial-link);
  --foundry-editorial-accent: var(--foundry-editorial-link);
}
.foundry-editorial-section-band__more:hover {
  color: var(--foundry-editorial-link-deep);
  --foundry-editorial-accent: var(--foundry-editorial-link-deep);
}

/* Section ribbon label uses Archivo Black at a hair tighter size than the module
   default so the masthead and band heads share one display rhythm. */
.foundry-editorial-section-band__ribbon { font-size: 1rem; letter-spacing: 0.03em; }

/* ===========================================================================
   SUBSCRIBE PAGE — [cn_subscribe_grid] tier comparison + GF form chrome
   The shortcode (mu-plugins/cananews/subscribe-grid.php) emits .cn-subscribe-grid
   / .cn-subscribe-card*; this styling lived only in the GreenLight theme and was
   not ported when the Foundry child went active, so the grid rendered unstyled
   (and the shortcode itself was dead until ported). Ported verbatim from the
   GreenLight build. The .cn-subscribe-page__* / form-wrap rules are inert unless
   the page wraps its content/form in those shells.
   ========================================================================== */
.cn-subscribe-page {
  max-width: 1080px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.25rem;
}
.cn-subscribe-page__intro {
  text-align: center;
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E5E5E5;
}
.cn-subscribe-page__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D62828;
  margin: 0 0 0.5rem;
}
.cn-subscribe-page__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: #1A1A1A;
}
.cn-subscribe-page__lede {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #444;
  margin: 0 auto;
  max-width: 56ch;
}

.cn-subscribe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}
@media (min-width: 880px) {
  .cn-subscribe-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
}

.cn-subscribe-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-top: 3px solid #1A1A1A;
  border-radius: 4px;
}
.cn-subscribe-card--premium { border-top-color: #1976B8; }
.cn-subscribe-card--investor {
  border-top-color: #E0A800;
  box-shadow: 0 4px 16px rgba(224, 168, 0, 0.12);
}
.cn-subscribe-card__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #595959;
  margin: 0 0 0.5rem;
}
.cn-subscribe-card--premium .cn-subscribe-card__eyebrow { color: #1976B8; }
.cn-subscribe-card--investor .cn-subscribe-card__eyebrow { color: #B88600; }
.cn-subscribe-card__name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: #1A1A1A;
}
/* The three price rules below style markup that [cn_subscribe_grid] no longer
   emits: CMC does not publish rates on the site (Lori, 2026-08-05), so the
   cards route to /contact/ instead. KEPT ON PURPOSE, not dead code — the
   shortcode's docblock notes pricing may be published again, and this is the
   styling it would need. Delete both together or neither. */
.cn-subscribe-card__price {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: #1A1A1A;
  margin: 0 0 1.25rem;
}
.cn-subscribe-card__cents {
  font-size: 1.125rem;
  font-weight: 700;
  vertical-align: top;
  margin-left: 0.125rem;
}
.cn-subscribe-card__period {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #595959;
  margin-left: 0.375rem;
}
.cn-subscribe-card__feats {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #1A1A1A;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.cn-subscribe-card__feats li {
  position: relative;
  padding-left: 1.375rem;
  margin: 0 0 0.5rem;
}
.cn-subscribe-card__feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1976B8;
  font-weight: 700;
}
.cn-subscribe-card--investor .cn-subscribe-card__feats li::before { color: #E0A800; }
.cn-subscribe-card__cta {
  display: inline-block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  background: #1976B8;
  color: #FFFFFF;
  padding: 0.8125rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
}
.cn-subscribe-card__cta:hover { background: #0E5A8C; color: #FFFFFF; }
.cn-subscribe-card--investor .cn-subscribe-card__cta { background: #E0A800; color: #1A1A1A; }
.cn-subscribe-card--investor .cn-subscribe-card__cta:hover { background: #B88600; color: #1A1A1A; }
.cn-subscribe-card__cta--current,
.cn-subscribe-card__cta--ghost {
  background: transparent;
  color: #595959;
  border: 1px solid #E5E5E5;
}
.cn-subscribe-card__cta--current { cursor: default; }
.cn-subscribe-card__cta--current:hover,
.cn-subscribe-card__cta--ghost:hover {
  background: transparent;
  color: #1A1A1A;
  border-color: #1A1A1A;
}

/* GF native markup, scoped inside the subscribe form-wrap shell. */
.cn-subscribe-page__form-wrap {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  padding: 2rem 1.75rem;
  background: #FAFAF7;
  border-top: 3px solid #D62828;
  border-bottom: 1px solid #E5E5E5;
}
.cn-subscribe-page__form-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.375rem;
  margin: 0 0 1rem;
  text-align: center;
  color: #1A1A1A;
}
.cn-subscribe-page__form-wrap .gform_wrapper { font-family: 'Inter', sans-serif; }
.cn-subscribe-page__form-wrap .gfield_label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1A1A1A;
}
.cn-subscribe-page__form-wrap input[type=text],
.cn-subscribe-page__form-wrap input[type=email] {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  width: 100%;
  background: #FFFFFF;
  box-sizing: border-box;
}
.cn-subscribe-page__form-wrap input:focus {
  outline: 2px solid #1976B8;
  outline-offset: 1px;
  border-color: #1976B8;
}
.cn-subscribe-page__form-wrap .gform_button {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  background: #D62828;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  padding: 0.8125rem 1.625rem;
  cursor: pointer;
  width: 100%;
}
.cn-subscribe-page__form-wrap .gform_button:hover { background: #A11F1F; }
.cn-subscribe-page__fineprint {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #595959;
  text-align: center;
  max-width: 56ch;
  margin: 1rem auto 0;
}

/* === Archive head (archive.html, category-*.html, taxonomy-country.html) ======
   Ported from the GreenLight CANA child (old style.css .cn-archive__head/__title/
   __desc). Never carried over to the Foundry child, so wp:query-title rendered as
   an unstyled default H1 — a tiny heading floating top-left of every archive.
   Slugs mapped to the live categories (news/politics/business/sports/
   press-releases/features) + the country taxonomy. The archive FEED cards below
   the head are styled by the editorial module (foundry-editorial-archive-feed). */
.cn-archive__head {
  max-width: 1320px; /* matches the widened cananews band measure */
  margin: 0 auto 1.25rem; /* top gap comes from the main's gutter (above) so it's
                             uniform + not eaten by margin-collapse through the reset */
  padding: 0 1.25rem 1rem;
  border-bottom: 2px solid #1A1A1A;
}
.cn-archive__title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: #1A1A1A;
}
.cn-archive__desc {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #595959;
  margin: 0;
  max-width: 60ch;
}
/* Section-colored left rule on the title (mirrors the old GreenLight mapping,
   remapped to the live category slugs). Features stays rule-less (soft section). */
body.category .cn-archive__title { border-left: 4px solid #D62828; padding-left: 0.875rem; }
body.category-politics       .cn-archive__title { border-left-color: #1976B8; }
body.category-business       .cn-archive__title { border-left-color: #E0A800; }
body.category-sports         .cn-archive__title { border-left-color: #D62828; }
body.category-press-releases .cn-archive__title { border-left-color: #1976B8; }
body.category-features       .cn-archive__title { border-left: 0; padding-left: 0; color: #1A1A1A; }
body.tax-country             .cn-archive__title { border-left-color: #1976B8; }
body.search                  .cn-archive__title { border-left: 4px solid #D62828; padding-left: 0.875rem; }

/* Search results (search.html → [cn_search_results]). The head + feed reuse the
   .cn-archive__* + foundry-editorial-archive-feed styling; only the empty state
   is search-specific. */
.cn-search__empty {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}
.cn-search__empty p {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 1.0625rem;
  color: #595959;
  margin: 0;
}

/* === Content pages (page.html: cn-page / cn-page__title) =====================
   About / Privacy / Terms / Contact render through page.html at a 720px measure.
   cn-page + cn-page__title shipped unstyled (same port gap as the archive head),
   so page titles rendered at base size with no vertical rhythm. This gives the
   title a proper article-grade treatment and the body clean prose defaults.
   (The subscribe page supplies its own cn-subscribe-page chrome and is unaffected.) */
.cn-page { padding-block: 2.5rem 3.5rem; }
.cn-page__title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw + 1rem, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #1A1A1A;
}
/* Prose defaults for the page body (paragraphs, sub-heads, lists, links). */
.cn-page .wp-block-post-content { margin-top: 1.75rem; }
.cn-page .wp-block-post-content > * { margin-block: 0 1.15rem; }
.cn-page .wp-block-post-content p {
  font-family: var(--foundry-editorial-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #212121;
}
.cn-page .wp-block-post-content h2 {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: 2.25rem;
  color: #1A1A1A;
}
.cn-page .wp-block-post-content h3 {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 1.2rem;
  line-height: 1.25;
  margin-top: 1.75rem;
  color: #1A1A1A;
}
.cn-page .wp-block-post-content ul,
.cn-page .wp-block-post-content ol {
  padding-left: 1.35rem;
  font-family: var(--foundry-editorial-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #212121;
}
.cn-page .wp-block-post-content li { margin-bottom: 0.5rem; }
.cn-page .wp-block-post-content a { color: #1976B8; text-decoration: underline; }
/* Subscribe-tier CTAs render inside .cn-page .wp-block-post-content, so the
   generic content-link rule above (blue + underline) was overriding their
   label colour — which made the blue "Choose Premium" button's text invisible
   and left "Choose Investor" as blue-underlined on gold. Re-assert per variant
   at higher specificity. */
.cn-page .wp-block-post-content a.cn-subscribe-card__cta { color: #FFFFFF; text-decoration: none; }
.cn-page .wp-block-post-content .cn-subscribe-card--investor a.cn-subscribe-card__cta { color: #1A1A1A; }
.cn-page .wp-block-post-content a.cn-subscribe-card__cta--ghost { color: #595959; text-decoration: none; }
.cn-page .wp-block-post-content a.cn-subscribe-card__cta--ghost:hover { color: #1A1A1A; }
.cn-page .wp-block-post-content a:hover { color: #0E5A8C; }
.cn-page .wp-block-post-content strong { font-weight: 700; }
/* Gravity Forms contact form on the Contact page — align to the subscribe form. */
.cn-page .gform_wrapper { margin-top: 1.75rem; }
.cn-page .gform_wrapper .gfield_label {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1A1A1A;
}
.cn-page .gform_wrapper input[type=text],
.cn-page .gform_wrapper input[type=email],
.cn-page .gform_wrapper textarea {
  font-family: var(--foundry-editorial-font-body);
  font-size: 0.9375rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  width: 100%;
  background: #FFFFFF;
  box-sizing: border-box;
}
.cn-page .gform_wrapper input:focus,
.cn-page .gform_wrapper textarea:focus {
  outline: 2px solid #1976B8;
  outline-offset: 1px;
  border-color: #1976B8;
}
.cn-page .gform_wrapper .gform_button {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: 1rem;
  background: #D62828;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  padding: 0.8125rem 1.625rem;
  cursor: pointer;
}
.cn-page .gform_wrapper .gform_button:hover { background: #A11F1F; }


/* ===========================================================================
   ARCHIVE LAYOUT, ADDED 2026-09-10. Two independent blocks, kept separate on
   purpose: the first defines a new section layout, the second changes how the
   existing News and Business layouts behave on a narrow screen. Neither can
   reach the other's selectors.
   =========================================================================== */

/* === Archive feed: the `brief` variant =====================================
   The treatment for a section that is SHORT, FREQUENT and MOSTLY IMAGELESS.

   Weather holds 17 posts and exactly 1 of them has a featured image. Because
   the slug was absent from the archive-feed block's layout map it fell through
   to `news`, an image-led 3-up grid, so the section page rendered 10 cards with
   1 photo between them (measured live 2026-09-10). The grid sizes each row off
   whichever cell holds a picture, which left roughly 300px of empty column
   under the two text-only cards beside it. Nothing was broken. The layout was
   never chosen for the content: it was the default for "not on the list".

   Press Releases is deliberately NOT on this variant. Its `news` assignment is
   explicit in the block's own map rather than a fallback, and page one of that
   archive carries a photo on 10 of 10 cards.

   `brief` is a single-column wire list: text first, hairline dividers, and a
   small right-aligned thumbnail WHERE ONE EXISTS. A card with no thumbnail is
   the normal case here, not a degraded one, so the row simply fills the column
   and the rhythm stays even. Nearest sibling is the `politics` variant (flex
   column, hairlines, 96px right thumb), which is also the one look the client
   said she prefers. Deliberately NOT sharing its selectors: politics gets its
   right-thumb geometry from the card's own `--thumb-right` modifier, and brief
   cannot, so the two need different rules even where they agree visually.

   THE CONSTRAINT THAT SHAPES ALL OF THIS: the variant's card args are not
   filterable from the site, so every card arrives as `--thumb-top` (base card
   is `display:flex; flex-direction:column`, thumb anchor first, body second).
   The compact right-thumb relationship therefore has to be rebuilt here with
   `order`, not inherited from `--thumb-right`.

   MEASURE: the grid caps at 860px and stays LEFT-ALIGNED inside the 1320px
   cananews band rather than centring. Centring floats the list about 210px
   clear of the archive title's left edge at 1440 and reads unmoored (tested).
   Capping the pagination to match keeps its rule tied to the column instead of
   dangling across the empty right half.

   Every rule is scoped to `.foundry-editorial-archive-feed--brief`. Nothing
   here can reach news, business, sports, features or politics.
   ========================================================================== */

/* Grid -> single column, no gap. Dividers do the separating (see card). */
.foundry-editorial-archive-feed--brief .foundry-editorial-archive-feed__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px; /* left-aligned in the band, NOT centred - see header */
}

/* Card -> a list row. `--thumb-top` ships as a flex COLUMN; force the row and
   re-order below, since the PHP cannot hand us `--thumb-right`. */
.foundry-editorial-archive-feed--brief .foundry-editorial-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--foundry-editorial-rule, #E5E5E5);
}
.foundry-editorial-archive-feed--brief .foundry-editorial-card:first-child { padding-top: 0; }
.foundry-editorial-archive-feed--brief .foundry-editorial-card:last-child  { border-bottom: 0; }

/* Text first. `min-width: 0` is what lets a long headline wrap instead of
   forcing the row wider than the column and shoving the thumb off the edge. */
.foundry-editorial-archive-feed--brief .foundry-editorial-card__body {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Thumb second, pinned to the column's right edge. The anchor is ABSENT from
   the markup when the post has no featured image, so these rules simply do not
   apply on a text-only row and nothing reserves space for a picture that is
   not coming. That is the whole reason the list does not read gap-toothed. */
.foundry-editorial-archive-feed--brief .foundry-editorial-card__thumb {
  order: 2;
  flex: 0 0 112px;
  margin-left: auto;
}
/* 4:3, not the base 16:9 and not the politics 1:1. At 112px wide a 16:9 crop
   is a 63px letterbox strip that reads as a smudge, and 1:1 throws away too
   much of a wire photo. 112x84 holds a recognisable subject. */
.foundry-editorial-archive-feed--brief .foundry-editorial-card__thumb img {
  aspect-ratio: 4 / 3;
}

/* The headline carries the scan in a list this dense, so it steps up a little
   from the `--md` default (1.125rem). */
.foundry-editorial-archive-feed--brief .foundry-editorial-card__title {
  font-size: 1.1875rem;
}

/* Deks are already trimmed to 22 words server-side; the clamp is the backstop
   that keeps one long one from breaking the row rhythm. */
.foundry-editorial-archive-feed--brief .foundry-editorial-card__dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination tracks the column, not the band. */
.foundry-editorial-archive-feed--brief .foundry-editorial-archive-feed__pagination {
  max-width: 860px;
}
@media (min-width: 900px) {
  /* Only left-align while the column is actually narrower than the band. Below
     that the column IS the band, and left-aligning just orphans a wrapped
     "Next" against the edge. */
  .foundry-editorial-archive-feed--brief .foundry-editorial-archive-feed__pagination .page-numbers {
    justify-content: flex-start;
  }
}

/* Below ~760px the fixed thumb starts eating the headline's measure, so it
   steps down twice rather than once: at 375 a 112px thumb leaves the body just
   199px and titles wrap to six or seven lines. */
@media (max-width: 760px) {
  .foundry-editorial-archive-feed--brief .foundry-editorial-card { gap: 1rem; }
  .foundry-editorial-archive-feed--brief .foundry-editorial-card__thumb { flex-basis: 96px; }
}
@media (max-width: 520px) {
  .foundry-editorial-archive-feed--brief .foundry-editorial-card { gap: 0.875rem; padding: 1rem 0; }
  .foundry-editorial-archive-feed--brief .foundry-editorial-card__thumb { flex-basis: 76px; }
  .foundry-editorial-archive-feed--brief .foundry-editorial-card__title { font-size: 1.0625rem; }
}

/* =====================================================================
   Narrow-screen compact cards: News + Business archives
   ---------------------------------------------------------------------
   Foundry Editorial's archive-feed collapses News and Business to a
   single full-width column at max-width 640px. Every story then leads
   with a 16:9 image the full width of the content column, which is the
   "big feature images taking the full page" the client reported. Below
   that same 640px breakpoint we give these two sections the compact
   right-hand thumbnail reading she asked for: headline and lead line on
   the left, small square image on the right, hairline between stories.
   That is the treatment the Politics feed already uses at every width,
   so the two now agree once the grid is gone.

   Scope notes, deliberate:
   - Everything sits inside one `max-width: 640px` block, so desktop and
     tablet rendering is untouched. At 641px and up the stock rules are
     the only ones in play.
   - Selectors require BOTH the feed variant (`--news` / `--business`)
     AND the card's own `--thumb-top` modifier. Politics cards carry
     `--thumb-right`, so they cannot be reached from here even though
     the visual result is intentionally similar. Sports and Features
     keep their own narrow treatment.
   - The `> ` child combinator keeps these off any nested card that a
     future module might render inside a card body.
   - Specificity is 0,2,0 and 0,3,0 against Foundry's 0,1,0 and 0,1,1
     base rules, so no `!important` is needed. brand.css is enqueued as
     a dependent of the `foundry-editorial` handle, so it also loads
     after the rules it is overriding.

   Missing featured image: Foundry omits the `__thumb` anchor entirely
   when a post has no featured image (`foundry_editorial_render_card`
   only prints it when a thumb URL resolves, and this site registers no
   `foundry/editorial/placeholder_thumb` filter). The body is then the
   only flex child, and `flex: 1 1 auto` lets it fill the whole row.
   `gap` applies only between items, so there is no orphan gutter.
   Verified live on the News archive, which carries a thumbless
   schedule post.
   ===================================================================== */

@media (max-width: 640px) {

  /* Row layout: body first, thumbnail second. The thumb anchor is the
     first child in the markup, so this is done with `order` rather than
     `row-reverse`, matching the house `--thumb-right` pattern and
     keeping DOM order (and therefore tab order) unchanged. */
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  /* 96px matches the Politics thumbnail exactly. It is the smallest of
     the three feed widths this has to survive (335px of content at
     375px viewport, 600px at 640px), and at the narrow end it still
     leaves 223px for the headline, which is what Politics runs on
     today. */
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top > .foundry-editorial-card__thumb,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top > .foundry-editorial-card__thumb {
    order: 2;
    flex: 0 0 96px;
  }

  /* `min-width: 0` overrides the flex default of `auto`, which would
     otherwise let a long unbreakable headline word push the thumbnail
     off the row at 375px. */
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top > .foundry-editorial-card__body,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top > .foundry-editorial-card__body {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Square crop, as on `--thumb-right`. The base rule is 16:9, which in
     a 96px column would render a 54px-tall sliver. */
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top > .foundry-editorial-card__thumb img,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top > .foundry-editorial-card__thumb img {
    aspect-ratio: 1 / 1;
  }

  /* Once the cards are short, the stock 2rem row gap reads as floating
     tiles rather than a list. Tighten it and separate with a hairline,
     the way the Politics feed does. Only `row-gap` is touched, so an
     injected native ad slot keeps its own spacing, and the border is on
     the card modifier so an ad slot never picks one up. */
  .foundry-editorial-archive-feed--news     .foundry-editorial-archive-feed__grid,
  .foundry-editorial-archive-feed--business .foundry-editorial-archive-feed__grid {
    row-gap: 1rem;
  }
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--foundry-editorial-rule, #E5E5E5);
  }
  .foundry-editorial-archive-feed--news     .foundry-editorial-card--thumb-top:last-child,
  .foundry-editorial-archive-feed--business .foundry-editorial-card--thumb-top:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* === Press Releases: band, promo box, landing page (cutover build 2026-09-12) === */
/* Markup: mu-plugin/cananews/press-releases.php. The band reuses the Editorial
   module's geo-grid classes, so the module CSS already lays out the columns,
   lead cards and bulleted lists; only what geo-grid does not have is styled here. */

/* Band head: two links (about the service + the archive) instead of one. */
.cn-press-releases-band .cn-pr-band__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.25rem;
}
/* List items carry their own small "Press Release · date" label above the headline. */
.cn-press-releases-band .cn-pr-band__label {
  display: block;
  font-family: var(--foundry-editorial-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foundry-editorial-muted);
  margin-bottom: 0.1rem;
}
.cn-press-releases-band .cn-pr-band__label .cn-pr-label { color: var(--foundry-editorial-accent); }
@media (max-width: 600px) {
  .cn-press-releases-band .foundry-editorial-section-band__head { flex-wrap: wrap; }
  .cn-press-releases-band .cn-pr-band__links { justify-content: flex-start; }
}

/* Promo box: a house promo in the news flow. Sea-tinted panel with a sea rule,
   so it reads as neither an editorial card (bare, red eyebrows) nor an ad zone. */
.cn-pr-promo {
  box-sizing: border-box;
  max-width: 1320px;
  margin: 0 auto 2.5rem;
  padding-inline: 1.25rem;
}
.cn-pr-promo__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2.5rem;
  background: #EEF5FB;
  border: 1px solid #CFE1F0;
  border-left: 4px solid var(--foundry-editorial-link);
  border-radius: 4px;
  padding: 1.25rem 1.75rem;
}
.cn-pr-promo__eyebrow {
  display: block;
  font-family: var(--foundry-editorial-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foundry-editorial-link-deep);
  margin-bottom: 0.35rem;
}
.cn-pr-promo .cn-pr-promo__title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--foundry-editorial-ink);
  margin: 0 0 0.3rem;
}
.cn-pr-promo__text {
  display: block;
  font-family: var(--foundry-editorial-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foundry-editorial-text);
}
.cn-pr-promo__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cn-pr-promo a.cn-pr-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--foundry-editorial-link);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cn-pr-promo a.cn-pr-promo__btn--primary { background: var(--foundry-editorial-link); color: #FFFFFF; }
.cn-pr-promo a.cn-pr-promo__btn--primary:hover,
.cn-pr-promo a.cn-pr-promo__btn--primary:focus-visible {
  background: var(--foundry-editorial-link-deep);
  border-color: var(--foundry-editorial-link-deep);
  color: #FFFFFF;
}
.cn-pr-promo a.cn-pr-promo__btn--ghost { background: #FFFFFF; color: var(--foundry-editorial-link-deep); }
.cn-pr-promo a.cn-pr-promo__btn--ghost:hover,
.cn-pr-promo a.cn-pr-promo__btn--ghost:focus-visible {
  border-color: var(--foundry-editorial-link-deep);
  color: var(--foundry-editorial-link-deep);
  text-decoration: underline;
}
@media (max-width: 760px) {
  .cn-pr-promo__box { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.1rem 1.25rem; }
  .cn-pr-promo .cn-pr-promo__title { font-size: 1.2rem; }
  .cn-pr-promo .cn-pr-promo__actions a.cn-pr-promo__btn { flex: 1 1 0; }
}

/* Landing page (templates/page-press-releases.html). The pitch is CMC-editable
   block content, so style the core blocks it is likely to hold rather than
   bespoke classes. Buttons: the page's `.cn-page .wp-block-post-content a` link
   rule (0,2,1) would paint them sea + underlined; editor-set colours are left alone. */
.cn-pr-landing .wp-block-post-content .wp-block-buttons { margin-top: 1.75rem; }
.cn-pr-landing .wp-block-post-content a.wp-block-button__link:not(.has-background):not(.has-text-color) {
  background: #D62828;
  color: #FFFFFF;
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
}
.cn-pr-landing .wp-block-post-content a.wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.cn-pr-landing .wp-block-post-content a.wp-block-button__link:not(.has-background):not(.has-text-color):focus-visible {
  background: #A11F1F;
  color: #FFFFFF;
}

/* Nav: the Press Releases item links to the landing PAGE, which the Chrome module
   does not stamp with data-sec (term links only). Its className carries the sea
   colour instead; press-releases.php adds .is-active, which the existing
   `.foundry-sections … .is-active` rule turns into the coloured underline. */
.foundry-masthead .cn-nav-press-releases { --foundry-chrome-sec: var(--cn-sea); }