/*
 * news.css — the shared stylesheet for RegulatoryNews's standalone pages
 * (front page, topic hubs, about, corrections, 404).
 *
 * Deliberately NOT the article shell. Articles are rendered by the content engine from
 * templates/shell.html, which carries its own inline CSS — that is the engine's contract and this
 * file must not fight it. What this file does is hold the SAME tokens, the same type, and the same
 * chrome, so the two surfaces read as one publication.
 *
 * If a token here and a token in the shell ever disagree, the shell wins: it is what a reader sees
 * on the page they actually arrived on.
 *
 * THE FRONT PAGE LANGUAGE (2026-07-17 redesign — REDESIGN.md §6):
 * a publication, not a website. White ground, hairline rules, one accent used sparingly, and the
 * serif carrying every story headline. No gradients, no glass, no card shadows: hierarchy comes
 * from type scale and whitespace, and anything that is not a story earns its place or goes.
 */

:root {
  --ink: #33373f;
  --ink-light: #454a54;
  --ink-deep: #23262b;
  --accent: #106d37;
  --accent-hover: #0d592d;
  --amber: #946938;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-section: #fafbfd;
  --text: #1a202c;
  --text-muted: #4a5568;
  --text-light: #687489;
  --border: #e2e8f0;
  --border-strong: #cbd5e0;
  /* The headline face. Weight 400 only — no other weight exists (BRAND-STYLE-GUIDE §3). */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-serif-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-serif-display-400-italic.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/*
 * 1320px, matching the article shell's container exactly. These two stylesheets render the same
 * nav and the same footer, so a different container width means the masthead physically jumps
 * sideways as a reader moves from the front page into a story. The shell wins (BRAND-STYLE-GUIDE
 * §4), so this follows it.
 */
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ── masthead ─────────────────────────────────────────────────────────────────────────────── */
/*
 * Structure and spacing are the article shell's nav, which is Regulatory Events' nav: 26px of
 * vertical padding rather than a min-height, links centred in their own .nav-center between the
 * brand and the container edge, and a hamburger below 768px. A reader moving between the front
 * page, a story, and the sibling site must not see the chrome shift.
 */
nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 26px 0;
}
nav .container { display: flex; align-items: center; justify-content: space-between; position: relative; }
/*
 * The family pull, matching RL and Events exactly: the brand sits outside the container so the R
 * monogram optically aligns to the viewport edge. The article shell carries the identical rule.
 */
.brand-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  line-height: 0;
  margin-left: min(-8px, calc((1320px - 100vw) / 2 + 16px));
}
/* Mirrors the article shell's .brand-r exactly — same icon, same size, on both surfaces. */
.brand-r {
  height: 57.6px;
  width: 57.6px;
  flex: none;
  display: block;
  border-radius: 12px;
  transform: translateY(-2px);
}
/*
 * The masthead is the artwork. REGULATORY is a custom serif with no font file, so the mark is an
 * image in every surface — 51.15px tall, which is the height the article shell already uses, so the
 * two surfaces render the identical mark at the identical size.
 */
.brand-img { height: 51.15px; width: auto; display: block; }

/* Centres the links on wide screens, exactly as the shell does. */
.nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px;
}
.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { opacity: 1; transform: scaleX(1); }

/* Header search — the same pill Events and the Academy carry. Submits ?q= to THE INDEX on the
   front page, which restores it on load. Focus ring lives on the container (:focus-within),
   never on the input inside. */
.nav-search { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-soft); color: var(--text-light); transition: border-color 0.15s ease; }
.nav-search:focus-within { border-color: var(--accent); color: var(--accent); }
.nav-search svg { flex: none; }
.nav-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); width: 244px; min-width: 0; }
.nav-search input::placeholder { color: var(--text-light); }
.nav-search input:focus-visible { outline: none; box-shadow: none; }
.nav-search-item { display: flex; }

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── the strap ────────────────────────────────────────────────────────────────────────────────
   One quiet line under the masthead: today's date (written by a two-line script; empty without
   JS, and nothing depends on it) and the publication's standing promise. This is the daily-brief
   signal — a newspaper knows what day it is — and it replaces the old marketing lede outright. */
.strap { border-bottom: 1px solid var(--border); }
.strap .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.strap-date {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  min-height: 1em;
}
.strap-motto {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ── shared editorial atoms ───────────────────────────────────────────────────────────────── */
.kicker {
  display: inline-block;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-meta { font-size: 13.5px; color: var(--text-light); margin: 0; }
.story-meta .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); margin: 0 9px 3px; }
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* Section furniture: a small-caps label on a hairline, with an optional "View all" opposite.
   The label is deliberately quiet — the serif is reserved for the stories themselves. */
.home-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
  margin: 0 0 6px;
}
.home-sec-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.home-sec-head h2 a { color: inherit; text-decoration: none; }
.home-sec-head h2 a:hover { color: var(--accent); }
.sec-viewall {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.sec-viewall:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── the front-page grid ──────────────────────────────────────────────────────────────────────
   Three columns, modelled on STAT's front page (2026-07-19 — REDESIGN.md §10): the LATEST rail on
   the left, TOP STORIES in the centre, DON'T MISS on the right, with vertical hairlines framing
   the centre. Every story entry on the page carries its thumbnail — no imageless lists. */
.stories { padding: 0 0 40px; }
.home-grid {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 288px;
  grid-template-areas: "latest main right";
  gap: 0 clamp(22px, 2vw, 32px);
  padding-top: 34px;
}
.rail-left { grid-area: latest; min-width: 0; }
.rail-right { grid-area: right; min-width: 0; }
.home-main {
  grid-area: main;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 clamp(22px, 2vw, 32px);
}

/* Left rail — the chronological river. Headline left, thumbnail right. */
.rail-feed { display: grid; }
.rail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.rail-feed .rail-item:first-child { padding-top: 6px; }
.rail-date {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.rail-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.003em;
  margin: 0;
}
.rail-item h3 a, .rail-card h3 a, .top-card h3 a {
  color: var(--ink-deep);
  text-decoration: none;
  transition: color 0.18s ease;
}
.rail-item h3 a:hover, .rail-card h3 a:hover, .top-card h3 a:hover { color: var(--accent); }
.rail-thumb { display: block; line-height: 0; margin-top: 4px; }
.rail-thumb img, .rail-card-thumb img, .top-thumb img, .topic-item-thumb img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}
.rail-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease;
}
.rail-more svg { transition: transform 0.2s ease; }
.rail-more:hover { color: var(--accent); }
.rail-more:hover svg { transform: translateX(4px); }

/* Centre — the hero. Photo first, the category notched into its bottom-left corner (the white
   tab is the page ground cutting into the image), then the serif headline. */
.hero { padding: 4px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.hero-media { position: relative; display: block; line-height: 0; }
.hero-media img { width: 100%; height: auto; border-radius: 2px; display: block; }
.hero-notch {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--bg);
  padding: 10px 18px 0 0;
  border-radius: 0 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 14px 0 12px;
  color: var(--ink-deep);
}
.hero h1 a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
.hero h1 a:hover { color: var(--accent); }
.hero-dek {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 62ch;
}

/* Centre — the two-up card grid beneath the hero. */
.top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(22px, 2vw, 32px);
}
.top-thumb { display: block; line-height: 0; margin-bottom: 13px; }
.top-card .kicker { margin-bottom: 7px; }
.top-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.004em;
  margin: 0 0 8px;
}
.top-dek {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right rail — image cards, then the newsletter promo. */
.rail-card { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.rail-card-thumb { display: block; line-height: 0; margin-bottom: 12px; }
.rail-card .kicker { margin-bottom: 6px; font-size: 11px; }
.rail-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18.5px;
  line-height: 1.28;
  margin: 0 0 7px;
}
.rail-nl {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 22px 22px 24px;
}
.rail-nl .kicker { margin-bottom: 10px; }
.rail-nl-copy { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.rail-nl-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.rail-nl-cta svg { transition: transform 0.2s ease; }
.rail-nl-cta:hover { color: var(--accent-hover); }
.rail-nl-cta:hover svg { transform: translateX(4px); }

/* ── topic sections ───────────────────────────────────────────────────────────────────────────
   One section per topic that has EARNED a coverage hub (>= hubs.threshold stories — the same gate
   as the hub pages, so "View all" always has a real page behind it). Generated by surfaces.js;
   sections appear on their own as coverage accumulates. */
.topic-secs { padding: 40px 0 0; }
.topic-sec { margin-bottom: 56px; }
.topic-sec:last-child { margin-bottom: 0; }
.topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px clamp(32px, 4vw, 56px);
  padding-top: 12px;
}
.topic-lead .topic-thumb { display: block; line-height: 0; margin-bottom: 16px; }
.topic-lead img { width: 100%; height: auto; border-radius: 2px; display: block; }
.topic-lead h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.22;
  margin: 0 0 8px;
}
.topic-lead h3 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
.topic-lead h3 a:hover { color: var(--accent); }
.topic-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 3vw, 48px); align-content: start; }
.topic-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--border);
}
.topic-item-thumb { display: block; line-height: 0; margin-top: 3px; }
.topic-item h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.28;
  margin: 0 0 6px;
}
.topic-item h4 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
.topic-item h4 a:hover { color: var(--accent); }

/* The nav's "Search" and "Topics" anchors land here; keep the target clear of the sticky bar. */
#search, #topics, #latest, #newsletter { scroll-margin-top: 120px; }

/* THE INDEX's own rules are extracted from the shell into index.html and must not be copied here
   (the shell is the single source). This is an OVERRIDE, not a copy: the shell's 1140px index
   container suits an article page, but on the front page every other section runs 1320px, and the
   indented left edge read as a mistake. Front page only — articles never load this file. */
.article-index .container { max-width: 1320px; }

/* ── hub + prose pages ────────────────────────────────────────────────────────────────────── */
.lede { padding: 56px 0 12px; }
.lede h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--ink-deep);
}
.lede h1 em { font-style: italic; color: var(--accent); }
.lede p { font-size: 19px; color: var(--text-muted); margin: 0; max-width: 62ch; }

/* The hub story list (lib-hubs.js renders .story-row) and any future archive list. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 54px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.section-head h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; color: var(--ink); }
.section-head span { font-size: 13px; color: var(--text-light); }
.story-list { display: grid; gap: 0; }
.story-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.story-row:last-child { border-bottom: 0; }
.story-row-thumb img { width: 100%; height: auto; border-radius: 2px; display: block; }
.story-row h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.24; letter-spacing: -0.005em; margin: 0 0 10px; }
.story-row h3 a { color: var(--ink-deep); text-decoration: none; transition: color 0.18s ease; }
.story-row h3 a:hover { color: var(--accent); }
.story-row .story-tag { margin-bottom: 8px; }
.story-row .story-meta { margin: 0; }
.story-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.empty-note {
  padding: 34px 0 8px;
  color: var(--text-light);
  font-size: 15.5px;
  max-width: 64ch;
}

/* ── prose pages (about, corrections, 404) ────────────────────────────────────────────────── */
.page { padding: 64px 0 84px; max-width: 760px; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 20px; color: var(--ink-deep); }
.page h2 { font-size: 24px; letter-spacing: -0.01em; margin: 44px 0 12px; color: var(--ink); }
.page p, .page li { color: var(--text-muted); }
.page .standfirst { font-size: 20px; color: var(--text); }
.page ul { padding-left: 22px; }
.page li { margin: 9px 0; }
.rule { height: 1px; background: var(--border); border: 0; margin: 40px 0; }
.note {
  background: rgba(16, 109, 55, 0.05);
  border: 1px solid rgba(16, 109, 55, 0.16);
  border-radius: 3px;
  padding: 20px 24px;
  color: var(--text);
}
.note strong { color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
/*
 * STAT-modelled (2026-07-19, at Connor's direction — supersedes the 2026-07-16 unified green
 * footer on this site): light ground, a compact brand block on the left, hairline-separated link
 * columns, and one small legal row under a top hairline. Quiet, like the rest of the page.
 */
footer { background: #f3f9f5; /* brand-green tint of white (~5% #106d37) — matches Academy's cream footer, owner request 2026-07-19 */ border-top: 1px solid var(--border); margin-top: 96px; }
footer > .container { padding-top: 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) 1fr 1.1fr 1.2fr;
  gap: 36px;
  padding-bottom: 42px;
}
.footer-col { border-left: 1px solid var(--border); padding-left: clamp(22px, 2.2vw, 34px); }
/* Footer lockup matches Events/Academy: icon 46px, wordmark 228px, gap 16px. */
.footer-brand-link { display: inline-flex; align-items: center; gap: 16px; line-height: 0; text-decoration: none; margin-bottom: 18px; }
.footer-mark-img { width: 46px; height: 46px; display: block; border-radius: 10px; }
.footer-brand-img { width: 228px; max-width: 100%; height: auto; display: block; }
.footer-tag { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 36ch; }
.footer-social-row { display: flex; gap: 10px; }
.footer-social { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-muted); text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease; }
.footer-social:hover { color: var(--accent); border-color: var(--accent); }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 14px; color: var(--ink); }
.footer-col-links { display: grid; gap: 9px; justify-items: start; }
.footer-col-links a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; transition: color 0.15s ease; }
.footer-col-links a:hover { color: var(--accent); }
.footer-legal {
  border-top: 1px solid var(--border);
  padding: 16px 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  flex-wrap: wrap;
}
.footer-legal p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-light); }
.footer-legal a { color: var(--text-light); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--accent); }
.footer-legal-dot { margin: 0 10px; }
@media (max-width: 1020px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
  .footer-legal { flex-direction: column; }
}

/* The grid steps down: three columns → centre + right with the river beneath → one column. */
@media (max-width: 1180px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "main right" "latest latest";
  }
  .home-main { border-left: 0; padding-left: 0; }
  .rail-left { margin-top: 48px; }
  .rail-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 44px); }
}
@media (max-width: 860px) {
  .home-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "right" "latest";
  }
  .home-main { border-right: 0; padding-right: 0; }
  .rail-right { margin-top: 44px; }
  .rail-left { margin-top: 44px; }
  .rail-feed { grid-template-columns: 1fr; }
  .top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .topic-grid { grid-template-columns: 1fr; }
  /* Stacked, the lead thumb must not stretch past its native 520px — cap it near that. */
  .topic-lead .topic-thumb img { max-width: 560px; }
}
@media (max-width: 640px) {
  .topic-rest { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .story-row { grid-template-columns: 120px 1fr; gap: 18px; }
  .story-row h3 { font-size: 19px; }
  .strap-motto { display: none; }
}

/* Brand steps down at the shell's breakpoints, not at News's own. */
@media (max-width: 1360px) {
  .brand-r { height: 47.7px; width: 47.7px; }
}

/*
 * Phones. The wordmark plus the links do not fit on one 390px row, so the links move behind a
 * hamburger and the wordmark centres itself in the bar — the shell's behaviour, and Events'.
 */
@media (max-width: 768px) {
  /* The nav's backdrop-filter is a containing block for position:fixed children, which traps the
     menu panel inside the ~97px bar and collapses it to nothing. Events strips it here for exactly
     this reason; so does this. */
  nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }
  nav .container { justify-content: space-between; gap: 12px; }
  .brand-link { order: 1; gap: 0; }
  .nav-center { order: 2; justify-content: flex-start; margin: 0; }
  .mobile-menu-toggle { order: 3; display: inline-flex; margin-left: auto; }
  .brand-r { height: 41.4px; width: 41.4px; border-radius: 9px; }
  .brand-img {
    height: 41.3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    /* Below the bar itself: 26px padding × 2, the 44px toggle, and the 1px border. */
    top: 97px;
    padding: 28px 24px 24px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    /* Opaque, not 0.98 — the page ghosts through behind the links otherwise. Events' panel is #fff. */
    background: #ffffff;
    overflow-y: auto;
    z-index: 200;
  }
  .nav-links.show-mobile { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 16px 14px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.4;
  }
  .nav-links a:hover { background: var(--bg-soft); }
  .nav-links a::after { content: none; }
}

/* ── Newsletter ─────────────────────────────────────────────────────────────────────────────────
   One quiet band above the footer. The register is the site's: no urgency, no exclamation mark,
   and the small print says plainly what happens to the address. Posts to Netlify Forms (the host),
   which keeps the CSP's form-action 'self' honest — no third-party endpoint. */
.newsletter {
  border-top: 1px solid var(--border);
  background: var(--bg-section);
  padding: 80px 0 88px;
}
.newsletter .container { max-width: 720px; text-align: center; }
.newsletter h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-deep);
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.newsletter h2 em { font-style: italic; color: var(--accent); }
.newsletter .nl-sub {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto 30px;
}
.nl-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 14px;
}
.nl-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  transition: border-color 0.18s ease;
}
.nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.nl-form input[type="email"]::placeholder { color: var(--text-light); }
.nl-form button {
  flex: none;
  height: 52px;
  padding: 0 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.nl-form button:hover { background: var(--accent-hover); }
.nl-fine {
  font-size: 13.5px;
  color: var(--text-light);
  margin: 0;
}
.nl-fine a { color: var(--text-light); text-decoration: underline; }
.nl-fine a:hover { color: var(--accent); }

@media (max-width: 560px) {
  .nl-form { flex-direction: column; }
  .nl-form button { width: 100%; }
}

/* Global keyboard focus ring — BRAND-STYLE-GUIDE §8. The article shell has carried this since the
   2026-07-12 retrofit. Same rule, verbatim. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .lede { padding-top: 40px; }
  .page { padding: 44px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}