/*
Theme Name: Shurman Gazette
Theme URI: https://shurman.ca
Author: Mike Shurman, 2Tech Computing Inc.
Description: Shurman Media editorial theme, derived from the gazette-template. Navy/near-black dominant with a gold-sheen Newsreader wordmark; red quarantined to breaking-news only. Newsreader (serif, voice) / Archivo (sans, body) / IBM Plex Mono (metadata). Four sections with subcategories, AI-disclosure line, sources block.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: shurman
*/

/* =========================================================
   0. Self-hosted fonts (Phase 2 requirement — no Google Fonts CDN)
   Variable fonts: Google serves one file across the declared
   weight range, browsers auto-map font-weight to the instance.
   ========================================================= */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/newsreader-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/newsreader-italic-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/archivo-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Shurman Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/shurman-hand.woff2') format('woff2');
}

/* =========================================================
   1. Design tokens — ported verbatim from the Phase 1 prototype.
   Do not reinterpret; see prototypes/claude-code-handoff.md §1.
   ========================================================= */
:root {
  --paper: #FAF9F6;
  --paper-raised: #FFFFFF;
  --ink: #181B22;
  --ink-soft: #4B5163;
  --navy: #1B3A6B;
  --navy-deep: #12294D;
  --navy-bright: #2F5FA8;
  --signal: #9C4A3E;        /* muted brick-red — "breaking" indicators ONLY, never decorative */
  --hairline: #DEDAD0;
  --gold: #C2A155;
  --pillar-news: #2F5FA8;      /* News (fallback; real value comes from term meta) */
  --pillar-tech: #4E747A;      /* Technology */
  --pillar-science: #B59145;   /* Science */
  --pillar-globalism: #D19A2B; /* Globalism */
  --radius: 2px;
  --maxw: 1180px;
}
[data-theme="dark"] {
  --paper: #14171D;
  --paper-raised: #1B1F27;
  --ink: #EDEBE4;
  --ink-soft: #A8ACB8;
  --navy: #4A76B8;
  --navy-deep: #2F5FA8;
  --navy-bright: #6E9BE0;
  --signal: #C4756A;
  --hairline: #2E323C;
  --gold: #A8926B;
  --pillar-news: #6E9BE0;
  --pillar-tech: #5CC8E3;
  --pillar-science: #E0846A;
  --pillar-globalism: #E8B95A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
:focus-visible { outline: 2px solid var(--navy-bright); outline-offset: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 18px; font-family: 'Archivo', sans-serif; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
hr.hairline { border: none; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- Utility bar ---------- */
.utility-bar {
  border-bottom: 1px solid var(--hairline);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
}
.utility-bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; color: var(--ink-soft);
}
.utility-bar .actions { display: flex; align-items: center; gap: 16px; }
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  display: flex; align-items: center; gap: 6px; padding: 6px 4px;
  min-height: 44px;
}
.icon-btn:hover { color: var(--pillar, var(--navy-bright)); }

/* ---------- Masthead ---------- */
.masthead { padding: 28px 0 18px; text-align: center; }
.masthead .logo-mark {
  display: inline-block;
  margin: 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: #0E0E0C;
}
[data-theme="dark"] .masthead .logo-mark { color: #D8D4C8; }
.masthead .logo-mark .big { font-size: 1.265em; }
.masthead .logo-mark img { height: clamp(34px, 6vw, 54px); width: auto; }
.masthead .wordmark-link { display: inline-block; color: inherit; }

/* Inline SVG wordmark (assets/brand/wordmark.svg): italic glyph outlines
   filled with a diagonal gold sheen (gold band, white core) that glides
   left to right and repeats every 5 seconds. The animation is SMIL inside
   the SVG; these rules only set the colours so dark mode can swap them. */
.masthead svg.wordmark { height: clamp(56px, 8vw, 86px); width: auto; overflow: visible; display: block; margin: 0 auto; }
.wm-stop-base   { stop-color: #0E0E0C; }
.wm-stop-copper { stop-color: #8F5A2E; }
.wm-stop-gold   { stop-color: #B8964A; }
.wm-stop-white  { stop-color: #FFF6DC; }
[data-theme="dark"] .wm-stop-base   { stop-color: #D8D4C8; }
[data-theme="dark"] .wm-stop-copper { stop-color: #8A5B32; }
[data-theme="dark"] .wm-stop-gold   { stop-color: #B39552; }
[data-theme="dark"] .wm-stop-white  { stop-color: #FFFBEE; }
.wm-media path { fill: #7a6b4a; }
[data-theme="dark"] .wm-media path { fill: #A8ACB8; }
/* --wm-c0.. are set per page load in header.php from the live, ordered pillar list (see the
   comment there); the hex fallbacks here are only for the rare case that block did not run
   (e.g. a static preview). Same colour in both themes, same as every other pillar accent on
   the site (the nav dot, a story's left rule): these are brand colours, not theme-aware ones. */
.wm-thread-0 { fill: var(--wm-c0, #2F5FA8); } .wm-thread-1 { fill: var(--wm-c1, #2F9E5F); } .wm-thread-2 { fill: var(--wm-c2, #69556F); }
.wm-thread-3 { fill: var(--wm-c3, #B59145); } .wm-thread-4 { fill: var(--wm-c4, #4E747A); } .wm-thread-5 { fill: var(--wm-c5, #B75D32); }

@media (prefers-reduced-motion: reduce) {
  .wordmark animateTransform { display: none; }
}
.masthead .tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---------- Primary nav (traditional) ----------
   Labels in the headline serif with a small pillar dot. On a pillar page
   the dot lights up and the matching thread in the logo lights with it
   while the other threads soften. */
.primary-nav {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 40; background: var(--paper);
  transition: box-shadow 0.25s ease;
}
.primary-nav .wrap { display: flex; align-items: center; justify-content: center; gap: 18px; height: 50px; }
.primary-nav .nav-brand { display: none; flex: 0 0 auto; color: var(--ink); }
.primary-nav .nav-brand img { height: 26px; width: auto; display: block; }
.primary-nav .nav-brand img.nav-brand-dark { display: none; }
[data-theme="dark"] .primary-nav .nav-brand img.nav-brand-light { display: none; }
[data-theme="dark"] .primary-nav .nav-brand img.nav-brand-dark { display: block; }
.primary-nav .nav-theme { display: none; }
/* Plain three-line hamburger. All three bars sit in plain ink at rest -- the middle
   one just a touch thicker -- and only pick up the current pillar's color (falling
   back to navy-bright off a pillar page) once the menu is actually open, so arriving
   at the page stays quiet and color only appears once navigation starts. */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
}
.nav-burger span {
  display: block; width: 24px; height: 2.5px; border-radius: 1.5px;
  background: var(--ink); transition: opacity 0.2s ease, background-color 0.2s ease;
}
.nav-burger span:nth-child(2) {
  height: 4px;
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  background: var(--pillar, var(--navy-bright));
}
.nav-burger[aria-expanded="true"] span { opacity: 0.85; }
.primary-nav.is-stuck { box-shadow: 0 4px 18px -14px rgba(0,0,0,0.3); }
.primary-nav.is-stuck .wrap { justify-content: space-between; }
.primary-nav.is-stuck .nav-brand { display: block; }
.primary-nav.is-stuck .nav-theme { display: flex; }

.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links li { position: relative; display: flex; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; letter-spacing: 0.005em;
  height: 50px; color: var(--ink-soft); white-space: nowrap; position: relative;
  transition: color 0.2s ease;
}
.nav-dot {
  width: 7px; height: 7px; border-radius: 999px; opacity: 0.6;
  background: radial-gradient(circle at 35% 30%, #fff 0%, color-mix(in srgb, var(--pillar) 55%, #fff) 22%, var(--pillar) 60%, color-mix(in srgb, var(--pillar) 75%, #000) 100%);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.nav-links a:hover { color: var(--ink); opacity: 1; }
.nav-links a:hover .nav-dot { opacity: 1; transform: scale(1.2); }
.nav-links li.is-current a { color: var(--ink); }
.nav-links li.is-current .nav-dot {
  opacity: 1; transform: scale(1.45); filter: brightness(1.15) saturate(1.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pillar) 26%, transparent), 0 0 12px 2px color-mix(in srgb, var(--pillar) 65%, transparent);
}
.nav-toggle { display: none; }

/* the logo's threads answer the nav: matching thread lit and glowing, the rest softened;
   the sheen's band also rides over the lit thread (glint overlay, hidden otherwise) */
.masthead .wm-glint { opacity: 0.95; }           /* homepage: the band sweeps the whole bar */
.masthead.has-current .wm-glint { opacity: 0; }  /* pillar page: only the lit thread */
.masthead .wm-flare { opacity: 0; mix-blend-mode: screen; }
.masthead:not(.has-current) .wm-flare-all { opacity: 0.85; }
.masthead.lit-0 .wm-flare-0, .masthead.lit-1 .wm-flare-1, .masthead.lit-2 .wm-flare-2,
.masthead.lit-3 .wm-flare-3, .masthead.lit-4 .wm-flare-4, .masthead.lit-5 .wm-flare-5 { opacity: 0.9; }
[data-theme="dark"] .masthead .wm-flare { mix-blend-mode: normal; }
.masthead.lit-0 .wm-glint-0, .masthead.lit-1 .wm-glint-1, .masthead.lit-2 .wm-glint-2,
.masthead.lit-3 .wm-glint-3, .masthead.lit-4 .wm-glint-4, .masthead.lit-5 .wm-glint-5 { opacity: 1; }
.masthead .wm-thread { transition: opacity 0.35s ease, filter 0.35s ease; }
.masthead.has-current .wm-thread { opacity: 0.22; }
.masthead.lit-0 .wm-thread-0, .masthead.lit-1 .wm-thread-1, .masthead.lit-2 .wm-thread-2,
.masthead.lit-3 .wm-thread-3, .masthead.lit-4 .wm-thread-4, .masthead.lit-5 .wm-thread-5 {
  opacity: 1; filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 1.5px currentColor);
}
/* currentColor above reads from the same --wm-cN set in header.php, so the enlarged thread is
   always the real colour of the pillar the reader is actually on. */
.masthead.lit-0 .wm-thread-0 { color: var(--wm-c0, #2F5FA8); } .masthead.lit-1 .wm-thread-1 { color: var(--wm-c1, #2F9E5F); }
.masthead.lit-2 .wm-thread-2 { color: var(--wm-c2, #69556F); } .masthead.lit-3 .wm-thread-3 { color: var(--wm-c3, #B59145); }
.masthead.lit-4 .wm-thread-4 { color: var(--wm-c4, #4E747A); } .masthead.lit-5 .wm-thread-5 { color: var(--wm-c5, #B75D32); }

/* ---------- Ticker: one story at a time, crossfaded ----------
   Items are stacked; JS moves .is-active every 7s and the CSS crossfades
   (opacity + a 6px drift). The band's colouring is one of four treatments
   chosen in the Customizer (sm_ticker_style): pillar (the band takes a soft
   wash of the current story's pillar colour), navy, ink, paper. */
.ticker-band { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease; }
.ticker-band .wrap { display: flex; align-items: center; height: 42px; }
.ticker-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding-right: 14px; margin-right: 14px; height: 100%; display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; border-right: 1px solid currentColor; opacity: 0.85;
}
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: ticker-pulse 3s ease-in-out infinite; }
@keyframes ticker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ticker-rotator { flex: 1; height: 42px; position: relative; overflow: hidden; }
.ticker-list { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; }
/* one story at a time: the active item enters from the right edge and glides
   left across the band at a steady, slow pace (JS sets --dist and --dur from
   the measured widths so speed is constant regardless of headline length) */
.ticker-list li {
  position: absolute; top: 0; bottom: 0; left: 100%; display: flex; align-items: center; white-space: nowrap;
  opacity: 0; pointer-events: none; will-change: transform;
}
.ticker-list li.is-active { opacity: 1; pointer-events: auto; animation: ticker-glide var(--dur, 30s) linear forwards; }
@keyframes ticker-glide { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--dist, 2000px))); } }
.ticker-list a { display: inline-flex; align-items: baseline; gap: 12px; max-width: 100%; color: inherit; }
.ticker-list a:hover .ticker-title { text-decoration: underline; text-underline-offset: 3px; }
.ticker-pillar { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; }
.ticker-title { font-family: 'Archivo', sans-serif; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

/* treatments */
.ticker--navy  { background: var(--navy-deep); color: #EDEBE4; border-color: rgba(255,255,255,0.08); }
.ticker--navy .ticker-tag, .ticker--navy .ticker-pillar { color: var(--gold); }
.ticker--ink   { background: #14171D; color: #EDEBE4; border-color: rgba(255,255,255,0.08); }
.ticker--ink .ticker-tag { color: var(--gold); }
.ticker--ink .ticker-pillar { color: var(--pillar); filter: brightness(1.35); }
.ticker--paper { background: var(--paper-raised); color: var(--ink); }
.ticker--paper .ticker-tag { color: var(--ink-soft); }
.ticker--paper .ticker-pillar { color: var(--pillar); }
.ticker--pillar { background: color-mix(in srgb, var(--pillar) 9%, var(--paper)); color: var(--ink); border-color: color-mix(in srgb, var(--pillar) 30%, var(--hairline)); }
.ticker--pillar .ticker-tag { color: var(--pillar); }
.ticker--pillar .ticker-pillar { color: var(--pillar); }
[data-theme="dark"] .ticker--pillar { background: color-mix(in srgb, var(--pillar) 16%, var(--paper)); }
[data-theme="dark"] .ticker--paper { background: var(--paper-raised); }

/* ---------- Reveals: soft fade-up as sections enter the viewport ----------
   Applied by theme.js; anything not observed stays visible. */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
img.fade-in { opacity: 0; transition: opacity 0.3s ease; }
img.fade-in.is-loaded { opacity: 1; }
.story h2 a, .most-read a, .hero-lead h1 a { transition: color 0.2s ease; }
.story:hover h2 a, .hero-lead:hover h1 a { color: var(--pillar, var(--navy-bright)); }
.story .story-thumb img, .hero-image img, .thumb img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.story:hover .story-thumb img, .hero-lead:hover .hero-image img, .story:hover .thumb img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  img.fade-in { opacity: 1; transition: none; }
  
}

/* ---------- Hero ---------- */
.hero-section { padding-top: 36px; padding-bottom: 8px; }
.hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; }
.hero-lead .eyebrow { color: var(--pillar-news); }
.hero-lead h1 {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08; margin: 10px 0 14px; letter-spacing: -0.01em;
}
.hero-lead h1 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-lead .deck {
  font-family: 'Newsreader', serif; font-style: italic; font-size: 18px;
  color: var(--ink-soft); line-height: 1.45; margin: 0 0 14px; max-width: 46em;
}
.hero-lead .byline { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); }
.hero-image { aspect-ratio: 16/10; border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

.hero-secondary { display: flex; flex-direction: column; gap: 22px; }
.hero-secondary .story + .story { border-top: 1px solid var(--hairline); padding-top: 22px; }
.story .eyebrow { margin-bottom: 6px; }
.story h2 {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 6px;
}
.story h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story p.dek { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* ---------- Placeholder editorial art (fallback when no featured image) ---------- */
.art-mark { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.art-mark svg { width: 30%; height: 30%; color: var(--tint-fg, var(--ink-soft)); }
.art-mark .art-label {
  position: absolute; bottom: 8px; left: 10px; font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-soft); opacity: 0.75;
}
.thumb .art-mark svg { width: 42%; height: 42%; }
.story-thumb { aspect-ratio: 21/9; border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-thumb .art-mark svg { width: 22%; height: 22%; }
[data-theme="dark"] .tint { filter: brightness(0.55); }

/* ---------- Main split: article list + most read ---------- */
.main-split { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding-top: 44px; padding-bottom: 44px; }
.section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 20px;
}
.article-list { display: flex; flex-direction: column; gap: 24px; }
.article-list .story { display: grid; grid-template-columns: 100px 1fr; gap: 16px; }
.article-list .thumb { aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; }
.article-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-list .story + .story { border-top: 1px solid var(--hairline); padding-top: 24px; }
.article-list h2 { font-size: 18px; }
.pagination { display: flex; gap: 10px; margin-top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.pagination a, .pagination span { padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

.most-read { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.most-read li { display: flex; gap: 14px; padding: 14px 0; counter-increment: rank; }
.most-read li + li { border-top: 1px solid var(--hairline); }
.most-read li::before {
  content: counter(rank);
  font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; color: var(--hairline);
  line-height: 1; flex-shrink: 0; width: 28px;
}
.most-read h3 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.35; margin: 0; }
.most-read a:hover { text-decoration: underline; }

/* ---------- Section bands (homepage, one per section) ---------- */
.section-band { padding-top: 8px; padding-bottom: 40px; }
.section-band .section-label { display: flex; justify-content: space-between; align-items: baseline; }
.section-band .section-label a.more { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); }
.section-band .section-label a.more:hover { color: var(--pillar, var(--navy-bright)); }
.section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ---------- Article: disclosure + sources ---------- */
.article-meta .disclosure { color: var(--ink-soft); border-left: 1px solid var(--hairline); padding-left: 16px; }
.article-sources { max-width: 46em; margin: 0 auto 40px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-sources .sources-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px 4px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-soft); background: var(--paper-raised); }
.src-chip img { width: 16px; height: 16px; border-radius: 3px; display: block; }
.src-chip:hover { border-color: var(--pillar, var(--navy-bright)); color: var(--pillar, var(--navy-bright)); }
.article-body .framing-contrast { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 32px 0; }
.article-body .framing-contrast .eyebrow { color: var(--gold); margin-bottom: 8px; }

/* ---------- About band ---------- */
.action-band { background: color-mix(in srgb, var(--pillar, var(--navy)) 70%, black); color: #fff; padding: 30px 0; transition: background 0.4s ease; }
[data-theme="dark"] .action-band { background: color-mix(in srgb, var(--pillar, #1B1F27) 22%, #1B1F27); border-top: 1px solid var(--hairline); }
[data-theme="dark"] .action-copy .eyebrow { color: var(--gold); }
[data-theme="dark"] .btn-primary { background: var(--gold); color: #14171D; }
[data-theme="dark"] .btn-primary:hover { background: #E3BE4F; }
.action-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.action-copy .eyebrow { color: #B9CCEA; }
.action-copy h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 24px; margin: 8px 0 4px; }
.action-copy p { margin: 0; color: #D8E2F2; font-size: 14px; }
.action-side { display: flex; align-items: center; gap: 18px; }
.counter { font-family: 'IBM Plex Mono', monospace; text-align: right; }
.counter .num { font-size: 22px; font-weight: 600; display: block; }
.counter .label { font-size: 11px; color: #B9CCEA; }
.btn-primary {
  background: #fff; color: var(--navy-deep); border: none; border-radius: var(--radius);
  padding: 14px 22px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
  cursor: pointer; min-height: 44px; white-space: nowrap;
}
.btn-primary:hover { background: #EAF0FA; }
.btn-primary:disabled { opacity: 0.7; cursor: default; }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--hairline); padding: 36px 0 60px; margin-top: 8px; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 12.5px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--pillar, var(--navy-bright)); }
.footer-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-soft); margin-top: 18px; }

/* ---------- Sticky mobile action bar ---------- */
.mobile-action-bar { display: none; }

/* =========================================================
   2. Article template ("experience" version)
   ========================================================= */
.article-header { padding-top: 40px; padding-bottom: 24px; max-width: 46em; margin: 0 auto; }
.article-header .pillar-bar { width: 56px; height: 4px; border-radius: 2px; background: var(--pillar, var(--navy)); margin-bottom: 14px; }
.article-header .eyebrow a:hover { text-decoration: underline; }
.article-header h1 {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(32px, 5vw, 50px);
  line-height: 1.08; letter-spacing: -0.01em; margin: 14px 0 16px;
}
.article-header .deck {
  font-family: 'Newsreader', serif; font-style: italic; font-size: 20px; color: var(--ink-soft);
  line-height: 1.5; margin: 0 0 20px;
}
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.article-hero-image { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; max-width: var(--maxw); margin: 24px auto; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-image figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-soft); padding-top: 8px; }

.article-body { max-width: 46em; margin: 0 auto; padding-top: 8px; padding-bottom: 40px; font-size: 18px; line-height: 1.7; }
.article-body p { margin: 0 0 24px; }
.article-body > p:first-of-type::first-letter {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 4.6em; line-height: 0.82;
  float: left; padding: 4px 8px 0 0; color: var(--navy);
}
.article-body h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 28px; margin: 44px 0 18px; line-height: 1.2; }
.article-body h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 22px; margin: 36px 0 14px; }
.article-body a { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--pillar, var(--navy-bright)); }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 24px; }
.article-body img { border-radius: var(--radius); margin: 8px 0; }
.article-body figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-soft); padding-top: 8px; }
.article-body blockquote.pull-quote {
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 28px;
  line-height: 1.35; color: var(--ink); border: none; margin: 40px -8px; padding: 0 8px;
  position: relative;
}
.article-body blockquote.pull-quote::before {
  content: "\201C"; color: var(--navy-bright); font-size: 1.4em; line-height: 0; display: block; margin-bottom: 8px;
}
.article-body blockquote.pull-quote cite { display: block; font-family: 'IBM Plex Mono', monospace; font-style: normal; font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

.article-tags { display: flex; gap: 10px; flex-wrap: wrap; max-width: 46em; margin: 0 auto 40px; }
.article-tags a {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; color: var(--ink-soft);
}
.article-tags a:hover { border-color: var(--pillar, var(--navy-bright)); color: var(--pillar, var(--navy-bright)); }

.article-share { display: flex; gap: 12px; max-width: 46em; margin: 0 auto 44px; }
.article-share a { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.article-share a:hover { border-color: var(--pillar, var(--navy-bright)); color: var(--pillar, var(--navy-bright)); }

.author-box { max-width: 46em; margin: 0 auto 44px; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--radius); display: flex; gap: 18px; align-items: flex-start; }
.author-box img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.author-box h3 { font-family: 'Newsreader', serif; font-size: 18px; margin: 0 0 6px; }
.author-box p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.where-next { background: var(--paper-raised); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 44px 0; }
.where-next .section-label { border-bottom-color: var(--ink); }
.where-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ---------- Subsection chips on pillar pages ---------- */
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.sub-nav a { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px; color: var(--ink-soft); }
.sub-nav a:hover, .sub-nav a.is-current { border-color: var(--pillar); color: var(--pillar); }
.sub-nav a.is-current { background: color-mix(in srgb, var(--pillar) 10%, transparent); }

/* ---------- Pillar wash + reading progress ---------- */
.hub-header.has-wash { position: relative; }
.hub-header.has-wash::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pillar) 8%, var(--paper)) 0%, var(--paper) 100%);
}
.read-progress { position: sticky; top: 50px; z-index: 39; height: 3px; background: transparent; }
.read-progress-bar { height: 100%; width: 0; background: var(--pillar); transition: width 0.1s linear; }
@media (max-width: 780px) { .read-progress { top: 44px; } }

/* =========================================================
   3. Archive / hub pages
   ========================================================= */
.hub-header { padding-top: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); }
.hub-header .eyebrow { font-size: 13px; }
.hub-header h1 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(32px, 5vw, 48px); margin: 10px 0 12px; }
.hub-header .hub-desc { font-family: 'Newsreader', serif; font-style: italic; font-size: 18px; color: var(--ink-soft); max-width: 46em; margin: 0; line-height: 1.5; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 40px 0; }
.hub-grid .thumb { aspect-ratio: 3/2; margin-bottom: 12px; }

/* =========================================================
   4. Generic page / search / 404
   ========================================================= */
.page-header { padding-top: 40px; padding-bottom: 20px; max-width: 46em; margin: 0 auto; }
.page-header h1 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(30px, 4.5vw, 44px); margin: 0; }
.page-body { max-width: 46em; margin: 0 auto; padding-top: 8px; padding-bottom: 60px; font-size: 17px; line-height: 1.7; }
.page-body .deck { font-family: 'Newsreader', serif; font-style: italic; font-size: 20px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 28px; }
.page-body ul { padding-left: 1.3em; }
.page-body li { margin: 0 0 10px; }
.page-body h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 26px; margin: 36px 0 16px; }
.page-body p { margin: 0 0 20px; }

.search-form { display: flex; gap: 10px; max-width: 46em; margin: 20px auto 0; }
.search-form input[type="search"] {
  flex: 1; font-family: 'Archivo', sans-serif; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink);
  min-height: 44px;
}
.search-form button {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12.5px; text-transform: uppercase;
  background: var(--navy); color: #fff; border: none; border-radius: var(--radius); padding: 0 20px; cursor: pointer; min-height: 44px;
}
.no-results { max-width: 46em; margin: 40px auto; text-align: center; }
.no-results h1 { font-family: 'Newsreader', serif; font-size: 36px; margin-bottom: 12px; }

/* =========================================================
   5. Mobile
   ========================================================= */
@media (max-width: 780px) {
  .primary-nav .wrap { justify-content: flex-start; height: 44px; padding: 0 12px; gap: 10px; }
  .primary-nav.is-stuck .nav-brand img { height: 24px; }
  .nav-links {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 4px; padding: 0 4px; mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links { gap: 18px; }
  .nav-links a { height: 46px; font-size: 15px; }
  .hero-grid, .main-split, .where-next-grid, .hub-grid, .section-grid { grid-template-columns: 1fr; }
  /* Phone: the scrolling row above stops being reachable (the row runs wider than the
     items a thumb can comfortably reveal), so swap it for a real menu — tap to open a
     plain vertical list of every section instead of relying on a horizontal swipe. */
  @media (max-width: 560px) {
    .nav-burger { display: flex; }
    .primary-nav .wrap { position: relative; }
    .nav-links {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; overflow-x: visible; mask-image: none;
      background: var(--paper); border-bottom: 1px solid var(--hairline);
      box-shadow: 0 12px 20px -12px rgba(0,0,0,0.25); gap: 0; padding: 4px 0;
    }
    .nav-links.is-open { display: flex; }
    .nav-links li { display: block; width: 100%; }
    /* Each row keeps a breath of its pillar's own color, the same restrained wash used for
       the ticker's pillar treatment elsewhere -- a cue to tell sections apart at a glance,
       not a bright block of color. Large type and tall rows: this menu has to work for
       someone who doesn't want to squint or aim carefully. */
    .nav-links li { background: color-mix(in srgb, var(--pillar) 7%, var(--paper)); }
    [data-theme="dark"] .nav-links li { background: color-mix(in srgb, var(--pillar) 13%, var(--paper)); }
    .nav-links a {
      height: auto; font-size: 18px; padding: 16px 20px; min-height: 52px;
      width: 100%; box-sizing: border-box;
    }
    .nav-links .nav-dot { width: 10px; height: 10px; opacity: 1; }
    .nav-links li + li a { border-top: 1px solid var(--hairline); }
  }
  .article-list .story { grid-template-columns: 72px 1fr; }
  .action-band .action-grid { flex-direction: column; align-items: flex-start; }
  .mobile-action-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: var(--navy); color: #fff; padding: 10px 16px; align-items: center;
    justify-content: space-between; gap: 12px; border-top: 1px solid var(--navy-deep);
  }
  .mobile-action-bar .btn-primary { flex-shrink: 0; }
  .mobile-action-bar .mobile-sig-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
  .author-box { flex-direction: column; }
}

@media (max-width: 480px) {
  .utility-bar .wrap > span:first-child { display: none; }
  .utility-bar .actions { width: 100%; justify-content: space-between; }
  .icon-btn { white-space: nowrap; }
  .masthead svg.wordmark { height: 40px; }
  .masthead .tagline { font-size: 10px; letter-spacing: 0.1em; }
}

/* Brand: uploaded logo and text wordmark (Brand screen in the console) */
.masthead .logo-img-dark { display: none; }
[data-theme="dark"] .masthead .logo-img-light + .logo-img-dark { display: inline-block; }
[data-theme="dark"] .masthead .logo-img-light:not(:last-child) { display: none; }
.masthead .wordmark-text { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: clamp(34px, 7vw, 64px); letter-spacing: .01em; line-height: 1.05; text-decoration: none; }
.primary-nav .nav-brand-text { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 20px; line-height: 26px; }

/* ---------------------------------------------------------------------------
   Page and section transitions. Native browser feature (View Transitions API),
   no JavaScript, no library. Unsupported browsers just keep today's plain load;
   this only adds polish where the browser can do it. Off entirely for anyone
   who asked their OS for less motion.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The masthead and nav read as one persistent object across a page change,
     instead of flashing out and back in with the rest of the page. */
  .masthead { view-transition-name: sm-masthead; }
  .primary-nav { view-transition-name: sm-nav; }

  /* The incoming page washes in with a tint of the section you're entering
     (--pillar is already set per-section by the nav), then settles to plain. */
  ::view-transition-old(root) { animation: sm-vt-out 180ms ease-out both; }
  ::view-transition-new(root) { animation: sm-vt-in 320ms ease-out both; }
  @keyframes sm-vt-out { to { opacity: 0; } }
  @keyframes sm-vt-in {
    from { opacity: 0; transform: translateY(6px); filter: saturate(1) drop-shadow(0 0 0 transparent); }
    35%  { filter: saturate(1.15); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  ::view-transition-old(sm-masthead), ::view-transition-new(sm-masthead),
  ::view-transition-old(sm-nav), ::view-transition-new(sm-nav) { animation: none; }

  /* Cards on a listing page settle in with a short stagger instead of appearing
     all at once. Pure CSS: each card's own position in the DOM sets its delay,
     so no JavaScript has to count them. */
  /* No "both"/backwards fill: a card is fully visible by default and stays that way if the
     animation never runs for any reason. During its delay it shows that same visible resting
     state, not the animation's opacity:0 start frame, so nothing is ever left invisible waiting
     on an animation that may not fire (slow devices, an engine quirk, a tab that was backgrounded). */
  .story, .hero-lead { animation: sm-card-in 420ms ease-out; }
  .story:nth-child(n+9) { animation: none; } /* only the first screenful staggers */
  .story:nth-child(1) { animation-delay: 0ms; }
  .story:nth-child(2) { animation-delay: 40ms; }
  .story:nth-child(3) { animation-delay: 80ms; }
  .story:nth-child(4) { animation-delay: 120ms; }
  .story:nth-child(5) { animation-delay: 160ms; }
  .story:nth-child(6) { animation-delay: 200ms; }
  .story:nth-child(7) { animation-delay: 240ms; }
  .story:nth-child(8) { animation-delay: 280ms; }
  @keyframes sm-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------------
   Opinion boxes. A story flagged as opinion, on a pillar that still allows
   opinion pieces, gets a coloured rule down its own left edge and an
   "Opinion" tag ahead of its eyebrow, using --pillar set inline per card.
   ------------------------------------------------------------------------- */
.story.is-opinion, .hero-lead.is-opinion {
  border-left: 3px solid var(--pillar, #4B5163);
  padding-left: 14px;
  background: color-mix(in srgb, var(--pillar, #4B5163) 6%, transparent);
}
.story.is-opinion .eyebrow, .hero-lead.is-opinion .eyebrow { display: flex; align-items: center; gap: 6px; }
.opinion-flag {
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 12px; letter-spacing: normal; text-transform: none;
  padding: 1px 7px; border-radius: 3px; color: #fff; background: var(--pillar, #4B5163);
}

/* ---------------------------------------------------------------------------
   Reader accounts: vote buttons, comments, the account page.
   ------------------------------------------------------------------------- */
.vote-btn {
  border: 1px solid var(--hairline); background: var(--paper-raised); color: var(--ink);
  border-radius: 4px; width: 26px; height: 22px; line-height: 1; cursor: pointer; font-size: 11px;
}
.vote-btn:hover { border-color: var(--pillar, var(--ink)); }
.vote-btn.is-active { background: var(--pillar, var(--ink)); border-color: var(--pillar, var(--ink)); color: #fff; }
.vote-score { font-family: 'IBM Plex Mono', monospace; font-size: 13px; min-width: 1.6em; text-align: center; display: inline-block; }
.story-votes form { margin: 0; }

.comments-block { max-width: 46em; margin: 0 auto; }
.comment-list { list-style: none; margin: 20px 0; padding: 0; }
.comment-row { padding: 14px 0; border-top: 1px solid var(--hairline); }
.comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.comment-author { font-weight: 600; }
.comment-body p { margin: 4px 0; }
.comment-votes { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
#respond textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--hairline); border-radius: 4px; font: inherit; background: var(--paper-raised); color: var(--ink); }

.account-wrap { max-width: 26em; margin: 30px auto 60px; }
.account-wrap form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 22px; }
.account-wrap input[type="text"], .account-wrap input[type="email"], .account-wrap input[type="password"] {
  padding: 9px 10px; border: 1px solid var(--hairline); border-radius: 4px; font: inherit; background: var(--paper-raised); color: var(--ink);
}
.account-wrap label { font-size: 13px; }
.account-notice { padding: 10px 12px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.account-notice.ok { background: color-mix(in srgb, #2F9E5F 14%, transparent); }
.account-notice.err { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.account-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.account-tabs a { flex: 1; text-align: center; padding: 8px; border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); font-size: 13px; }
.account-tabs a.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sm-website-field { position: absolute; left: -9999px; }