/* The Orbit Post — original editorial stylesheet. Dark default (#0D100A), light toggle. */
/* Brand wordmark face only (masthead + footer brand). Playfair Display,
   SIL Open Font License 1.1 (see assets/fonts/PlayfairDisplay-OFL.txt). */
@font-face{
  font-family:'Playfair Display';
  src:url(../fonts/PlayfairDisplay.ttf) format('truetype');
  font-weight:400 900;font-style:normal;font-display:swap;
}
:root{
  color-scheme:dark;
  --bg:#0D100A;
  --surface:#141810;
  --surface-2:#1B2114;
  --ink:#F0F2E4;
  --ink-dim:#B9BFA6;
  --ink-faint:#8A9077;
  --volt:#E5322D;
  --volt-ink:#FFFFFF;
  --red:#BB1919;
  --gold:#E3B94E;
  --gold-bright:#E3B94E;
  --hairline:rgba(240,242,228,.14);
  --hairline-strong:rgba(240,242,228,.28);
  --link:#FF7A72;
  --card:#12160E;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',Times,serif;
  --brand-serif:'Playfair Display',Georgia,'Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --radius:10px;
  /* Design tokens v2 (pass 2, 2026-10-14): one type scale, one spacing
     rhythm, named surfaces. Components consume these, not ad hoc px. */
  --t-display:clamp(40px,5.4vw,64px);
  --t-h1:clamp(33px,4.6vw,50px);
  --t-h2:27px;
  --t-h3:20px;
  --t-lede:20px;
  --t-prose:18.5px;
  --t-body:17px;
  --t-small:14px;
  --t-caption:13px;
  --track-display:-.03em;
  --track-tight:-.015em;
  --lh-display:1.04;
  --lh-head:1.15;
  --lh-body:1.62;
  --lh-prose:1.78;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --surface-3:#232B18;
  --accent-ink:#FF7A72;
  --volt-deep:#CE2421;
  --overlay:rgba(6,8,5,.72);
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#F6F7F2;
  --surface-2:#EDEFE4;
  --ink:#141810;
  --ink-dim:#4A5040;
  --ink-faint:#7A8070;
  --volt:#BB1919;
  --volt-ink:#FFFFFF;
  --red:#BB1919;
  --gold:#8C6D1F;
  --gold-bright:#E3B94E;
  --hairline:rgba(20,24,16,.14);
  --hairline-strong:rgba(20,24,16,.3);
  --link:#A51219;
  --card:#FFFFFF;
  --shadow:0 18px 50px rgba(20,24,16,.12);
  --surface-3:#E2E5D2;
  --accent-ink:#A51219;
  --volt-deep:#A51219;
  --overlay:rgba(18,20,14,.55);
}
/* Brand mark: the emblem is transparent art drawn for dark ground. On the
   light theme a soft radial glow sits behind it so the dark sphere and
   rings keep their contrast. The gradient reaches full transparency well
   before the img box edge, so it reads as a glow, never a tile or border. */
[data-theme="light"] .brand img,
[data-theme="light"] .foot-brand img{
  background:radial-gradient(circle at 50% 50%, rgba(13,16,10,.94) 46%, rgba(13,16,10,.5) 58%, rgba(13,16,10,0) 70%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:4px}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;line-height:var(--lh-head);letter-spacing:var(--track-tight)}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Breaking ticker ---------- */
.ticker{
  background:var(--red);color:#fff;
  border-bottom:3px solid var(--gold);
  overflow:hidden;position:relative;
}
.ticker-latest{
  background:var(--surface);color:var(--ink);
  border-bottom:1px solid var(--hairline);
}
.ticker-inner{display:flex;align-items:stretch;min-height:44px}
.ticker-tag{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  background:#0B0B0B;color:#fff;
  font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:0 14px;min-height:44px;z-index:2;
}
.ticker-latest .ticker-tag{background:var(--ink);color:var(--bg)}
.ticker-tag .pulse{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.ticker-viewport{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;align-items:center;
  animation:tick 46s linear infinite;will-change:transform;
}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-track a{
  color:#fff;font-weight:600;font-size:14.5px;padding:10px 34px 10px 18px;position:relative;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.ticker-latest .ticker-track a{color:var(--ink);font-weight:500}
.ticker-track a::after{content:"";position:absolute;right:16px;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--gold-bright);transform:translateY(-50%)}
.ticker-latest .ticker-track a::after{background:var(--gold)}
.ticker-track a:hover{text-decoration:underline}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;white-space:normal}
  .ticker-tag .pulse{animation:none}
}

/* ---------- Masthead ---------- */
.masthead{border-bottom:1px solid var(--hairline)}
.masthead-top{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:46px;height:46px;flex:0 0 auto}
.brand-name{font-family:var(--brand-serif);font-size:31px;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.brand-tag{font-size:12.5px;color:var(--ink-dim);font-style:italic;margin-top:2px}
.masthead-tools{display:flex;align-items:center;gap:10px}
.icon-btn{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--hairline-strong);border-radius:10px;color:var(--ink);
  cursor:pointer;font-size:15px;padding:0 10px;
}
.icon-btn:hover{border-color:var(--volt);color:var(--volt)}
.lang-switch{display:flex;border:1px solid var(--hairline-strong);border-radius:10px;overflow:hidden}
.lang-switch a,.lang-switch span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-dim);padding:0 8px;text-decoration:none;
}
.lang-switch a:hover{color:var(--volt)}
.lang-switch .on{background:var(--volt-deep);color:var(--volt-ink)}
.dateline{font-size:12.5px;color:var(--ink-faint);padding:0 0 10px}

/* ---------- Nav ---------- */
.mainnav{border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:55;
  background:var(--bg);box-shadow:0 8px 22px rgba(0,0,0,.22)}
[data-theme="light"] .mainnav{box-shadow:0 8px 22px rgba(20,24,16,.10)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
.mainnav a{
  display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;
  color:var(--ink);font-weight:700;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;border-bottom:3px solid transparent;
}
.mainnav a:hover{color:var(--volt);border-bottom-color:var(--volt)}
.mainnav a[aria-current="page"]{color:var(--volt);border-bottom-color:var(--volt)}
.hamburger{display:none}

/* ---------- Ad slots ---------- */
.ad-slot{margin:18px 0;text-align:center}
.ad-label{
  display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
.ad-unit{
  border:1px dashed var(--hairline-strong);border-radius:8px;color:var(--ink-faint);
  font-size:13px;display:flex;align-items:center;justify-content:center;
  min-height:90px;background:var(--surface);
}
.ad-leaderboard .ad-unit{max-width:970px;margin:0 auto}
.ad-inarticle .ad-unit{max-width:728px;margin:0 auto}
.ad-rectangle{margin:24px 0}
.ad-rectangle .ad-unit{max-width:336px;margin:0 auto;min-height:280px}
.ad-footer-banner .ad-unit{max-width:970px;margin:0 auto}
/* AdSense readiness: hide a slot whose real unit went unfilled or was blocked,
   so no broken or empty box is ever visible. Placeholders (no ins unit)
   are unaffected and keep rendering. */
.ad-slot:has(> ins.adsbygoogle:empty){display:none}
.ad-slot ins.adsbygoogle{background:transparent}

/* ---------- Homepage layout ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;margin-top:4px}
@media (max-width:980px){.home-grid{grid-template-columns:1fr}}
.hero{border-bottom:1px solid var(--hairline);padding:26px 0 30px}
.hero-art{border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.hero-art img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:10px;
}
.hero h1{font-size:clamp(30px,4.6vw,52px);margin:0 0 12px}
.hero h1 a{color:var(--ink)}
.hero .dek{font-size:var(--t-lede);color:var(--ink-dim);max-width:60ch;margin:0 0 16px}
.keypoints{list-style:none;margin:0 0 18px;padding:0;max-width:62ch}
.keypoints li{padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--hairline);font-size:15.5px}
.keypoints li::before{content:"";position:absolute;left:4px;top:17px;width:8px;height:8px;
  border-radius:50%;background:var(--volt)}
.byline{font-size:13.5px;color:var(--ink-faint);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.byline .author{color:var(--ink);font-weight:700}
.badge-new{
  display:inline-block;background:var(--volt-deep);color:var(--volt-ink);font-size:10.5px;font-weight:800;
  letter-spacing:.1em;padding:3px 8px;border-radius:4px;vertical-align:2px;margin-left:8px;
}
.sec-heroes{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--hairline)}
@media (max-width:640px){.sec-heroes{grid-template-columns:1fr}}
.story-card h2,.story-card h3{margin:10px 0 8px;font-size:22px}
.story-card h2 a,.story-card h3 a{color:var(--ink)}
.thumb{border-radius:8px;overflow:hidden;margin-bottom:12px}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story-card .dek{color:var(--ink-dim);font-size:15px;margin:0 0 10px}
time.ts{font-size:var(--t-caption);color:var(--ink-faint)}

/* ---------- Latest list / category sections ---------- */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:2px solid var(--ink);padding:26px 0 10px;margin-bottom:4px;
}
.section-head h2{margin:0;font-size:24px;letter-spacing:.02em;text-transform:uppercase;font-family:var(--sans);font-weight:800}
.section-head a{font-size:13.5px;font-weight:700;white-space:nowrap}
.latest-list{list-style:none;margin:0;padding:0}
.latest-list li{border-bottom:1px solid var(--hairline);padding:16px 0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
@media (max-width:560px){.latest-list li{grid-template-columns:96px 1fr;gap:12px}}
.latest-list .thumb{margin:0}
.latest-list h3{margin:0 0 6px;font-size:19px}
.latest-list h3 a{color:var(--ink)}
.latest-list .dek{margin:0 0 8px;color:var(--ink-dim);font-size:14.5px}
.cat-band{padding-bottom:10px}
.cat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:18px 0 8px}
@media (max-width:980px){.cat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cat-cards{grid-template-columns:1fr}}
.cat-cards .story-card{border-bottom:none;padding-bottom:0}
.cat-cards h3{font-size:18px}

/* ---------- Sidebar: most read ---------- */
.sidebar{padding-top:28px}
.side-module{border:1px solid var(--hairline);border-radius:var(--radius);padding:20px;background:var(--card);margin-bottom:20px}
.side-module h2{margin:0 0 6px;font-size:19px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--sans);font-weight:800}
.mostread{list-style:none;margin:0;padding:0;counter-reset:mr}
.mostread li{counter-increment:mr;display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.mostread li:last-child{border-bottom:none}
.mostread li::before{
  content:counter(mr);font-family:var(--serif);font-size:32px;font-weight:700;color:var(--gold);
  min-width:36px;line-height:1;
}
.mostread a{color:var(--ink);font-size:15px;font-weight:600}
.empty-note{color:var(--ink-faint);font-size:14.5px;padding:24px 0}

/* ---------- Article page ---------- */
.article{max-width:760px;margin:0 auto;padding:26px 0 10px}
.crumbs{font-size:13.5px;color:var(--ink-faint);margin-bottom:14px}
.crumbs a{color:var(--ink-dim)}
.article h1{font-size:var(--t-h1);line-height:1.06;margin:6px 0 14px}
.article .dek{font-size:var(--t-lede);color:var(--ink-dim);margin:0 0 18px;font-weight:400}
.article .byline{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:12px 0;margin-bottom:18px}
.article-art{border-radius:var(--radius);overflow:hidden;margin:6px 0 8px}
.article-art img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.art-cap{font-size:13px;color:var(--ink-faint);margin:0 0 22px}
.prose{font-size:var(--t-prose);line-height:var(--lh-prose);color:var(--ink)}
.prose p{margin:0 0 1.35em}
.prose h2{font-size:var(--t-h2);letter-spacing:var(--track-tight);line-height:var(--lh-head);margin:1.6em 0 .6em}
.prose h3{font-size:var(--t-h3);margin:1.4em 0 .5em}
.prose ul{margin:0 0 1.35em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--volt);
  font-family:var(--serif);font-size:21px;font-style:italic;color:var(--ink);
}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.share-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0;padding:14px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.share-label{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-right:4px}
.share-btn{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--hairline-strong);border-radius:10px;background:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:700;cursor:pointer;padding:0 12px;text-decoration:none;
}
.share-btn:hover{border-color:var(--volt);color:var(--volt)}
.share-btn svg{width:18px;height:18px;fill:currentColor}
.lang-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0;font-size:14px}
.lang-row .lab{color:var(--ink-faint);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.lang-pill{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);border-radius:999px;padding:0 14px;font-weight:700;font-size:13px;
  color:var(--ink);text-decoration:none}
.lang-pill:hover{border-color:var(--volt)}
.lang-pill.on{background:var(--volt-deep);color:var(--volt-ink);border-color:var(--volt-deep)}
.lang-pill.off{opacity:.35;cursor:not-allowed}
.sources{margin:30px 0;padding:20px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card)}
.sources h2{font-size:19px;margin:0 0 10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em}
.sources ul{margin:0;padding-left:1.2em}
.sources li{margin-bottom:8px;font-size:15.5px}
.related{margin:34px 0 10px}
.related h2{font-size:23px;margin:0 0 6px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:14px}
@media (max-width:640px){.related-grid{grid-template-columns:1fr}}
.related-grid h3{font-size:17.5px;margin:8px 0 6px}
.related-grid h3 a{color:var(--ink)}

/* ---------- Search / archive / 404 ---------- */
.search-hero{padding:30px 0 10px;max-width:680px}
.search-hero h1{font-size:34px;margin:0 0 12px}
.search-box{display:flex;gap:10px;margin:16px 0}
.search-box input{
  flex:1;min-height:48px;font-size:16px;padding:10px 14px;border:1px solid var(--hairline-strong);
  border-radius:10px;background:var(--surface);color:var(--ink);
}
.search-box button{
  min-height:48px;min-width:48px;padding:0 22px;border:none;border-radius:10px;cursor:pointer;
  background:var(--volt-deep);color:var(--volt-ink);font-weight:800;font-size:15px;
}
.search-results{list-style:none;margin:10px 0 30px;padding:0}
.search-results li{border-bottom:1px solid var(--hairline);padding:16px 0}
.search-results h3{margin:0 0 6px;font-size:20px}
.search-results h3 a{color:var(--ink)}
.search-results .dek{margin:0 0 6px;color:var(--ink-dim);font-size:15px}
.search-meta{font-size:13px;color:var(--ink-faint)}
.archive-day{margin:26px 0}
.archive-day h2{font-size:21px;margin:0 0 4px;font-family:var(--sans)}
.archive-list{list-style:none;margin:0;padding:0}
.archive-list li{border-bottom:1px solid var(--hairline);padding:12px 0;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cat-chip{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  border:1px solid var(--accent-ink);border-radius:4px;padding:2px 8px;white-space:nowrap;
}
.archive-list a{color:var(--ink);font-weight:600;font-size:16.5px}
.notfound{max-width:640px;margin:60px auto;text-align:center;padding:0 18px}
.notfound h1{font-size:52px;margin:0 0 10px}

/* ---------- Footer ---------- */
footer.site{border-top:2px solid var(--ink);margin-top:44px;padding:30px 0 46px;background:var(--surface)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;margin-bottom:24px}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.foot-brand img{width:34px;height:34px}
.foot-brand span{font-family:var(--brand-serif);font-size:23px;font-weight:700;color:var(--ink)}
footer.site p{font-size:14px;color:var(--ink-dim);margin:0 0 10px;max-width:52ch}
footer.site h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px;font-family:var(--sans)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site ul a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink-dim);font-size:14.5px}
.foot-bottom{border-top:1px solid var(--hairline);padding-top:16px;font-size:13px;color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Drawer (mobile nav, glass overlay) ---------- */
.drawer-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:60;
}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(320px,84vw);z-index:61;
  background:rgba(20,24,16,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--hairline-strong);
  transform:translateX(-102%);transition:transform .28s ease;padding:18px;overflow-y:auto;
}
[data-theme="light"] .drawer{background:rgba(255,255,255,.94)}
.drawer.open{transform:translateX(0)}
.drawer ul{list-style:none;margin:14px 0;padding:0}
.drawer a{
  display:flex;align-items:center;min-height:52px;padding:8px 12px;border-radius:8px;
  color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;
}
.drawer a:hover{background:var(--surface-2);color:var(--volt)}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer .lang-switch{margin-top:16px}

/* ---------- Nameplate (Concept A: The Orbit O, approved 2026-10-21) ----------
   The wordmark ships as assets/img/nameplate.svg: white UnifrakturCook
   blackletter on its own black band, with the ring woven through the O.
   The masthead band is black in both themes, matching the approved
   previews; the utilbar keeps its own surface background above it. */
.masthead{background:#000;border-bottom:2px solid #000}
.masthead .icon-btn{color:#fff;border-color:rgba(255,255,255,.35)}
.masthead .icon-btn:hover{color:#fff;border-color:#fff}
.masthead .follow-btn{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.masthead .brand{padding:4px 0}
.masthead .brand img.np-logo{display:block;width:auto;height:58px;max-width:100%;background:none;flex:0 1 auto}
footer.site .foot-brand img.np-logo{display:block;width:auto;height:42px;max-width:100%;background:none}
.drawer-head img.np-logo{display:block;width:auto;height:35px;max-width:82%;background:none}
@media (max-width:700px){.masthead .brand img.np-logo{height:42px}}
@media (max-width:480px){.masthead .brand img.np-logo{height:32px}.drawer-head img.np-logo{height:30px}}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .mainnav{display:none}
  .mainnav ul{display:none}
  .hamburger{display:inline-flex}
  .brand-name{font-size:24px}
  .brand img{width:38px;height:38px}
  .brand-tag{display:none}
  .masthead-top{padding:10px 0}
  .home-grid{gap:0}
  .sidebar{padding-top:6px}
}
@media (min-width:721px){.drawer,.drawer-scrim{display:none}}
/* ---------- Narrow mobile: brand gets its own row, tools wrap below ---------- */
@media (max-width:520px){
  .masthead-top{flex-wrap:wrap;row-gap:10px}
  .brand{order:1;flex:1 1 auto;min-width:0}
  .brand-name{white-space:nowrap;font-size:22px}
  .brand img{width:36px;height:36px}
  .masthead-tools{order:2;flex:1 1 100%;justify-content:flex-end}
  .lang-pill{min-width:40px;min-height:40px}
  .lang-switch a,.lang-switch span{padding:9px 10px}
}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--volt-deep);color:var(--volt-ink);font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:80;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media print{.ticker,.mainnav,.share-row,.ad-slot,.drawer,.drawer-scrim,footer.site .foot-grid{display:none}.reveal{opacity:1 !important;transform:none !important}}

/* Newsroom control board (unlisted). Same dark editorial language, volt accents. */
.nr-sec{margin:34px 0}
.nr-note{background:var(--surface);border-left:3px solid var(--volt);padding:12px 14px;border-radius:0 8px 8px 0;margin:14px 0;font-size:15px;color:var(--ink-dim)}
.nr-note strong{color:var(--ink)}
.nr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.nr-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:14px}
.nr-card .num{font-size:28px;font-weight:800;color:var(--volt);line-height:1.2}
.nr-card .lab{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.nr-list{list-style:none;margin:0;padding:0}
.nr-list>li{padding:10px 0;border-bottom:1px solid var(--hairline);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.nr-list code{font-size:13px;color:var(--ink-dim);word-break:break-all}
.nr-lang{display:inline-block;font-size:11px;font-weight:800;border:1px solid var(--hairline-strong);border-radius:6px;padding:1px 7px;margin:0 2px;color:var(--ink-dim)}
.nr-badge{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap}
.nr-ok{background:var(--volt-deep);color:var(--volt-ink)}
.nr-warn{background:var(--surface-2);color:var(--ink-dim);border:1px solid var(--hairline-strong)}
.nr-run{display:block !important}
.nr-runhead{margin-bottom:6px}
.nr-heads{margin:6px 0 6px 18px;padding:0;font-size:14.5px;color:var(--ink-dim)}
.nr-note-sm{font-size:14px;color:var(--ink-dim)}
.nr-links a{font-weight:700}
.nr-form{margin-top:16px}
.nr-form label{display:block;font-weight:700;margin:16px 0 6px;font-size:15px}
.nr-form input,.nr-form textarea,.nr-form select{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--hairline-strong);border-radius:8px;padding:10px 12px;font:inherit}
.nr-form textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.nr-form input:focus,.nr-form textarea:focus,.nr-form select:focus{border-color:var(--volt);outline:none}
.nr-err{color:#FF7A7A;font-weight:700}
.nr-btn{background:var(--volt-deep);color:var(--volt-ink);border:0;border-radius:8px;padding:11px 20px;font-weight:800;font-size:15.5px;cursor:pointer;margin-top:16px}
.nr-btn:hover{filter:brightness(1.06)}
.nr-btn-ghost{background:none;border:1px solid var(--hairline-strong);color:var(--ink)}
.nr-btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Article page: newspaper two-column (kills the desktop margin desert) ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
/* A long unbroken token (e.g. a photo-credit URL) must never widen the
   article column past the phone screen: grid items may shrink below
   min-content, and credit/body/source text wraps instead of overflowing. */
.article-grid>*{min-width:0}
.media-credit{overflow-wrap:anywhere}
.article .prose,.article .sources{overflow-wrap:anywhere}
@media (min-width:1024px){
  .article-grid{grid-template-columns:minmax(0,1fr) 336px;gap:48px;align-items:start}
  .article-grid .article{max-width:none;margin:0}
}
.rail{min-width:0;display:flex;flex-direction:column}
.rail .ad-rectangle{margin:0 0 26px}
.rail .side-module{margin-bottom:26px}
.rail-items{display:flex;flex-direction:column}
a.rail-item{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding:14px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink);
}
a.rail-item:last-child{border-bottom:none;padding-bottom:2px}
a.rail-item:first-child{padding-top:6px}
.rail-item .thumb{margin:0}
.rail-item .kicker{margin-bottom:5px;font-size:11px}
.rail-item h3{margin:0 0 6px;font-size:16.5px;line-height:1.32}
a.rail-item:hover h3{color:var(--volt)}
a.rail-item:hover{text-decoration:none}
@media (max-width:560px){a.rail-item{grid-template-columns:104px minmax(0,1fr);gap:12px}}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--volt-deep);color:var(--volt-ink);
  font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}

/* ================= Redesign pass 2026-10-09: premium editorial ================= */
.hero h1{font-size:var(--t-display);letter-spacing:var(--track-display);line-height:var(--lh-display)}
.article h1{letter-spacing:var(--track-display)}
.section-head h2{display:flex;align-items:center;font-size:25px}
.section-head h2::before{
  content:"";width:9px;height:9px;background:var(--volt);margin-right:12px;flex:0 0 auto;
  transform:rotate(45deg);
}
.story-card .thumb img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .story-card:hover .thumb img{transform:scale(1.045)}
  .latest-list li{transition:background-color .25s ease;border-radius:8px}
  .latest-list li:hover{background:var(--surface)}
  .cat-cards .story-card:hover h3 a{color:var(--volt)}
}
.ticker-tag{clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);padding-right:26px}
.ticker-viewport{
  -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 93%,transparent 100%);
}
.hero-art{position:relative;box-shadow:var(--shadow)}
.prose>p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:700;font-size:3.3em;float:left;
  line-height:.88;padding:6px 10px 0 0;color:var(--volt);
}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.article .byline{gap:12px}
.byline .author{letter-spacing:.01em}

/* ================= BBC/Fox standards audit 2026-10-09 ================= */
/* Key-points summary box (article "at a glance") */
.kp-box{margin:26px 0;padding:20px 22px;border:1px solid var(--hairline);
  border-left:4px solid var(--volt);border-radius:var(--radius);background:var(--card)}
.kp-box h2{font-size:17px;margin:0 0 10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink)}
.kp-box ul{margin:0;padding-left:1.2em}
.kp-box li{margin-bottom:8px;font-size:16px}
.kp-box li::marker{color:var(--volt)}
/* Timeline block for developing stories */
.timeline{margin:30px 0}
.timeline h2{font-size:21px;margin:0 0 14px}
.timeline ol{list-style:none;margin:0;padding:0;position:relative}
.timeline ol::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--hairline-strong)}
.timeline li{position:relative;padding:0 0 18px 30px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:1px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:3px solid var(--volt)}
.tl-date{display:block;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.tl-text{font-size:16px;color:var(--ink)}
/* Related-topics chips */
.tag-chips{margin:26px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tag-chips .tag-label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.tag-chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag-chips a{display:inline-block;border:1px solid var(--hairline-strong);border-radius:999px;
  padding:6px 14px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.tag-chips a:hover{border-color:var(--volt);color:var(--volt);text-decoration:none}
/* Author bio block */
.author-box{margin:34px 0;padding:22px;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--card);display:flex;gap:16px;align-items:flex-start}
.avatar.lg{width:56px;height:56px;font-size:19px}
.author-box h2{font-size:15px;margin:0 0 2px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.author-box .author-name{font-size:18px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.author-box p:last-child{margin:0;font-size:15.5px;color:var(--ink-dim)}
/* Category lead story */
.cat-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;
  margin:6px 0 26px;padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.cat-lead-art img{border-radius:var(--radius);width:100%}
.cat-lead-text .kicker{margin-bottom:8px}
.cat-lead-text h2{font-size:clamp(24px,3.4vw,36px);margin:0 0 10px;letter-spacing:-.02em}
.cat-lead-text h2 a{color:var(--ink)}
.cat-lead-text .dek{color:var(--ink-dim);font-size:16px;margin:0 0 10px}
@media (max-width:640px){.cat-lead{grid-template-columns:1fr}}

/* ---------- Follow / push notifications ---------- */
.follow-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--hairline-strong);border-radius:999px;background:transparent;color:var(--ink);font:600 13px/1 var(--sans);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.follow-btn:hover{border-color:var(--volt);color:var(--volt)}
.follow-btn .follow-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);transition:background .15s}
.follow-btn.on{background:var(--volt-deep);border-color:var(--volt-deep);color:var(--volt-ink)}
.follow-btn.on .follow-dot{background:var(--volt-ink)}
.follow-btn.on:hover{color:var(--volt-ink)}
.follow-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0;padding:14px 16px;border:1px solid var(--hairline-strong);border-radius:var(--radius);background:var(--surface)}
.follow-card-text{display:flex;flex-direction:column;gap:4px}
.follow-card-text strong{font:700 15px/1.3 var(--sans);color:var(--ink)}
.follow-card-text span{font:400 13px/1.4 var(--sans);color:var(--ink-dim)}
.follow-guide{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.follow-guide.open{display:flex}
.follow-guide-box{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:14px;padding:24px;max-width:340px;width:100%;box-shadow:var(--shadow)}
.follow-guide-box h2{font:700 17px/1.3 var(--sans);color:var(--ink);margin:0 0 12px}
.follow-guide-box ol{margin:0 0 18px;padding-left:20px;color:var(--ink-dim);font:400 14px/1.7 var(--sans)}
.follow-guide-close{width:100%;padding:11px;border:0;border-radius:10px;background:var(--volt-deep);color:var(--volt-ink);font:700 14px var(--sans);cursor:pointer}
@media(max-width:560px){.follow-card{flex-direction:column;align-items:flex-start}.masthead-tools .follow-btn .follow-label{display:none}.masthead-tools .follow-btn{padding:8px 10px}}
.watch{margin:22px 0 6px;padding:22px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface)}
.watch h2{font-size:17px;margin:0 0 16px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink)}
.watch-item{margin:0 0 20px}
.watch-item:last-child{margin-bottom:0}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-mute{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(8,10,8,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.vid-mute[hidden]{display:none}
.vid-mute .ic-sound{display:none}
.video-wrap.unmuted .vid-mute .ic-sound{display:block}
.video-wrap.unmuted .vid-mute .ic-muted{display:none}
.vid-mute:active{transform:scale(.94)}
.media-credit{display:block;margin-top:8px;font:400 12.5px/1.5 var(--sans);color:var(--ink-faint)}
.media-credit a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}

/* ================= Brand pass 2026-10-14: black, red, gold =================
   Palette migrated from the old volt green to the approved newsroom brand
   (signal red accent, BBC red #BB1919 bars, gold furniture), matching the
   broadcast reel design. Flat color and type only, no glows. */
/* Homepage hero package: lead story + top stories beside it (BBC/Reuters) */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:38px;
  border-bottom:1px solid var(--hairline);padding:24px 0 20px}
.hero-grid .hero{border-bottom:none;padding:0}
.hero-side{display:flex;flex-direction:column;min-width:0}
.hero-side-item{padding:15px 0;border-bottom:1px solid var(--hairline)}
.hero-side-item:first-child{padding-top:2px}
.hero-side-item:last-child{border-bottom:none;padding-bottom:0}
.hero-side-item h3{font-size:21px;margin:0 0 7px;line-height:1.25}
.hero-side-item h3 a{color:var(--ink)}
@media (hover:hover){.hero-side-item:hover h3 a{color:var(--volt)}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:4px}
  .hero-side-item h3{font-size:19px}}
/* Section header bars: black bar, white name, red marker, gold rule */
.section-head{
  background:#0B0B0B;border-bottom:3px solid var(--gold);border-radius:8px 8px 0 0;
  padding:11px 16px;margin:24px 0 8px;align-items:center;
}
.section-head h2{color:#fff;font-size:22px}
.section-head a{color:var(--gold-bright)}
.section-head a:hover{color:#fff}
/* Most read: gold numerals, category + freshness under each title */
.mostread .mr-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mostread .kicker{font-size:10.5px;margin-bottom:1px}
.mostread .ts{font-size:12px}
/* Pull quotes: bigger serif voice, red rule */
.prose blockquote{font-size:22.5px;line-height:1.45;padding:6px 0 6px 24px}
/* Footer: four columns + follow chips */
.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
.foot-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.foot-social a{
  display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;
  border:1px solid var(--hairline-strong);border-radius:999px;
  color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none;
}
.foot-social a:hover{border-color:var(--gold);color:var(--gold)}

/* ================= Pass 2, 2026-10-14: 2026 design system =================
   Tokens v2 in :root above drive this layer: masthead v2, trending rail,
   search overlay, Latest river, Markets and Sports modules, Watch band,
   reading progress, share rail, next story, back to top. Flat brand
   color and type only, motion restrained and CSS-only. */
/* ---------- Masthead v2: utility strip + one calm brand row ---------- */
.utilbar{border-bottom:1px solid var(--hairline);background:var(--surface)}
.utilbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px}
.util-date{font-size:12.5px;color:var(--ink-dim);letter-spacing:.02em;white-space:nowrap}
.util-ed{display:flex;align-items:center;gap:8px}
.util-ed-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.utilbar .lang-switch{border:none;border-radius:0;overflow:visible}
.utilbar .lang-switch a,.utilbar .lang-switch span{min-width:36px;min-height:32px;font-size:12px;padding:0 6px}
.utilbar .lang-switch .on{background:transparent;color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--accent-ink)}
.masthead-top{padding:10px 0}
.brand-name{font-size:27px}
@media (max-width:520px){
  .util-date{display:none}
  .utilbar-in{justify-content:flex-end}
}
/* ---------- Trending rail ---------- */
.trendbar{border-bottom:1px solid var(--hairline);background:var(--surface)}
.trendbar-in{display:flex;align-items:center;gap:12px;min-height:44px}
.trend-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);flex:0 0 auto}
.trend-items{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.trend-items::-webkit-scrollbar{display:none}
.trend-item{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;
  font-size:13.5px;font-weight:600;color:var(--ink-dim);white-space:nowrap;border-radius:6px}
.trend-item:hover{color:var(--accent-ink);background:var(--surface-2);text-decoration:none}
/* ---------- Search overlay ---------- */
.search-overlay{position:fixed;inset:0;z-index:90;background:var(--overlay);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px}
.search-overlay[hidden]{display:none}
.search-panel{background:var(--bg);border:1px solid var(--hairline-strong);border-radius:14px;
  box-shadow:var(--shadow);width:min(680px,100%);max-height:80vh;overflow-y:auto;padding:20px}
.search-panel .search-box{margin:0 0 6px}
.search-panel .search-results{margin:6px 0 0}
.search-foot{margin:10px 0 0;font-size:13.5px}
/* ---------- Latest river: time, chip, headline ---------- */
.river-list{list-style:none;margin:0;padding:0}
.river-row{display:grid;grid-template-columns:62px auto minmax(0,1fr);gap:14px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--hairline)}
.river-time{font-size:13px;font-weight:700;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.river-row h3{margin:0;font-size:17.5px;line-height:1.3}
.river-row h3 a{color:var(--ink)}
@media (hover:hover){.river-row:hover h3 a{color:var(--volt)}}
@media (max-width:560px){
  .river-row{grid-template-columns:50px auto minmax(0,1fr);gap:9px}
  .river-row h3{font-size:16px}
  .river-row .cat-chip{font-size:10px;padding:2px 6px}
}
/* ---------- Markets module (sidebar) ---------- */
.markets-module{border-top:3px solid var(--gold)}
.markets-list{list-style:none;margin:0;padding:0}
.markets-list li{padding:10px 0;border-bottom:1px solid var(--hairline)}
.markets-list li:last-child{border-bottom:none;padding-bottom:0}
.markets-list a{color:var(--ink);font-weight:600;font-size:15px;display:block;margin-bottom:2px}
@media (hover:hover){.markets-list a:hover{color:var(--volt)}}
/* ---------- Sports module: lead + results list ---------- */
.sports-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;padding-top:16px}
@media (max-width:720px){.sports-grid{grid-template-columns:1fr}}
.sports-lead h3{font-size:24px}
.sports-list{list-style:none;margin:0;padding:0}
.sports-list li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;
  padding:11px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.sports-list li:first-child{padding-top:2px}
.sports-list h3{margin:0;font-size:16.5px;line-height:1.35}
.sports-list h3 a{color:var(--ink)}
@media (hover:hover){.sports-list li:hover h3 a{color:var(--volt)}}
/* ---------- Watch band ---------- */
.watch-card .thumb{position:relative}
.watch-card .thumb a{display:block}
.play-badge{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border-radius:50%;
  background:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.play-badge::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;
  border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
/* ---------- Hero image settle (matches card zoom language) ---------- */
.hero-art img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.hero-art:hover img{transform:scale(1.03)}}
/* ---------- Reading progress ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:85;background:transparent}
.read-progress span{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%}
/* ---------- Next story card ---------- */
.next-story{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center;
  margin:34px 0 8px;padding:18px;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--card)}
.next-story .next-thumb{display:block;min-width:0}
.next-story .next-thumb img{border-radius:8px;width:100%;aspect-ratio:16/9;object-fit:cover}
.next-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
[data-theme="light"] .next-label{color:var(--accent-ink)}
.next-story .kicker{margin:4px 0 2px}
.next-story h2{margin:0;font-size:23px;line-height:1.2}
.next-story h2 a{color:var(--ink)}
@media (hover:hover){.next-story:hover h2 a{color:var(--volt)}}
@media (max-width:560px){
  .next-story{grid-template-columns:108px minmax(0,1fr);gap:12px;padding:12px}
  .next-story h2{font-size:17.5px}
}
/* ---------- Back to top ---------- */
.to-top{position:fixed;right:18px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);
  font-size:19px;cursor:pointer;box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center}
.to-top:hover{border-color:var(--volt);color:var(--volt)}
.to-top[hidden]{display:none}
@media print{.read-progress,.to-top,.search-overlay,.trendbar{display:none}}

/* ---------- Markets board: fetched figures, delayed, sources labeled.
   Strip under the trending bar, sidebar board, and the /markets/ page.
   Bars and chips are ours; green up, red down, tabular numbers. ---------- */
.mkt-strip{border-bottom:1px solid var(--hairline);background:var(--surface)}
.mkt-strip-in{display:flex;align-items:center;gap:18px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.mkt-strip-in::-webkit-scrollbar{display:none}
.mkt-strip-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--ink-dim);font-size:13.5px}
.mkt-strip-item b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
@media (hover:hover){.mkt-strip-item:hover{color:var(--ink);text-decoration:none}}
.mkt-strip-note{margin-left:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap;padding-left:10px}
.mkt-chip{display:inline-block;font-size:12px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mkt-chip.up{color:#2F9E5F;background:rgba(47,158,95,.14)}
.mkt-chip.dn{color:#E05A4E;background:rgba(224,90,78,.13)}
.mkt-chip.na{color:var(--ink-faint);background:var(--surface-2)}
[data-theme="light"] .mkt-chip.up{color:#177245}
[data-theme="light"] .mkt-chip.dn{color:#B02A35}
.mm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mm-head a{font-size:12.5px;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.mkt-table{width:100%;border-collapse:collapse;font-size:14px}
.mkt-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);text-align:right;padding:4px 0;border-bottom:1px solid var(--hairline);font-weight:700}
.mkt-table th:first-child{text-align:left}
.mkt-table td{padding:6px 0;border-bottom:1px solid var(--hairline);text-align:right}
.mkt-table tr:last-child td{border-bottom:none}
.mkt-table td.mkt-name{text-align:left;font-weight:600;color:var(--ink)}
.mkt-table td.mkt-val{font-variant-numeric:tabular-nums;color:var(--ink)}
.mkt-chart{width:100%;height:auto;display:block;margin:10px 0 4px}
.mkt-axis{stroke:var(--hairline-strong);stroke-width:1}
.mkt-bar-up{fill:#2E9E5B}
.mkt-bar-dn{fill:#C62F3B}
.mkt-svg-name{font:600 12px var(--sans);fill:var(--ink-dim)}
.mkt-svg-pct{font:700 12px var(--sans);fill:var(--ink)}
.markets-module .mkt-svg-name{font-size:11px}
.markets-module .mkt-svg-pct{font-size:11px}
.mkt-h{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin:16px 0 6px;font-family:var(--sans);font-weight:800}
.mkt-24h{font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.mkt-cpi{margin-top:16px;border:1px solid var(--hairline);border-radius:8px;padding:12px 14px;background:var(--surface)}
.markets-module .mkt-cpi{border:none;border-top:1px solid var(--hairline);border-radius:0;background:transparent;padding:12px 0 0}
.mkt-cpi-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.mkt-cpi-yoy{font-size:30px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.mkt-cpi-sub{font-size:13px;color:var(--ink-dim)}
.mkt-cpi-rows{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-dim);margin-top:6px}
.mkt-cpi-rows b{color:var(--ink);font-variant-numeric:tabular-nums}
.mkt-cpi-src{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.mkt-note{font-size:11.5px;color:var(--ink-faint);margin:10px 0 0;line-height:1.5}
.mkt-page{padding:8px 0 12px}
.mkt-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
@media (max-width:760px){.mkt-cols{grid-template-columns:1fr}}

/* ================= Gas prices board (EIA weekly averages) =================
   Reuses the markets table/chip system. For fuel the chip colors follow
   the reader's wallet, not the market: up is red, down is green. */
.mkt-chip.gas-up{color:#E05A4E;background:rgba(224,90,78,.13)}
.mkt-chip.gas-dn{color:#2F9E5F;background:rgba(47,158,95,.14)}
[data-theme="light"] .mkt-chip.gas-up{color:#B02A35}
[data-theme="light"] .mkt-chip.gas-dn{color:#177245}
.gas-hero{border:1px solid var(--hairline);border-radius:8px;padding:16px 18px;background:var(--surface);margin:12px 0 4px}
.gas-hero-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.gas-hero-price{font-size:42px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.gas-hero-unit{font-size:15px;font-weight:600;color:var(--ink-dim)}
.gas-hero-chg{margin-top:6px;font-size:13px;color:var(--ink-dim);display:flex;gap:8px;align-items:center}
.gas-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 4px}
@media (max-width:760px){.gas-grades{grid-template-columns:repeat(2,1fr)}}
.gas-grade{border:1px solid var(--hairline);border-radius:8px;padding:10px 12px;background:var(--surface)}
.gas-grade-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.gas-grade-p{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin:2px 0 6px}
.gas-mod-hero{font-size:15px;color:var(--ink-dim);margin:4px 0 2px}
.gas-mod-hero b{color:var(--ink);font-size:19px;font-variant-numeric:tabular-nums}

/* ============ Exchange rates + gold/silver boards ============
   Reuses the markets table system and the gas hero/grade cards.
   The converter and the currency filter follow the same flat,
   hairline-bordered furniture as the rest of the boards. */
.fx-heroes{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.fx-heroes{grid-template-columns:1fr}}
.fx-hero-name{font-size:13px;color:var(--ink-dim);margin-top:2px}
.fx-conv{border:1px solid var(--hairline);border-radius:8px;padding:14px 16px;background:var(--surface);margin:10px 0 4px}
.fx-conv-row{display:flex;flex-wrap:wrap;gap:12px}
.fx-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);flex:1 1 150px}
.fx-field input,.fx-field select{font-size:16px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--hairline);border-radius:6px;padding:8px 10px;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.fx-result{margin-top:12px;font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.fx-filter{margin:10px 0 4px}
.fx-filter input{width:100%;max-width:420px;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:8px 10px}
.mt-any .fx-field{max-width:320px;margin:10px 0 4px}

/* ================= Card polish 2026-10-14 (UI crew weekly) =================
   One job: story cards read as one system on every surface they appear
   (homepage category rows, section pages, related stories, Watch).
   Before this pass a long dek made the row ragged, timestamps landed at
   different heights, and headline hover feedback only existed in some
   grids. Cards are now a flex column: category furniture is uniform,
   the dek is held to three lines, and the timestamp is pinned to the
   bottom of the card so every row lines up. Flat brand color and type
   only, no decoration added. Original code, written for this site. */
.story-card{display:flex;flex-direction:column;height:100%;min-width:0}
.story-card .kicker{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.story-card .kicker::before{content:"";width:14px;height:3px;background:var(--red);flex:0 0 auto}
.story-card h2,.story-card h3{line-height:1.28}
.story-card .dek{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.story-card time.ts{margin-top:auto;padding-top:4px}
@media (hover:hover){
  .story-card:hover h2 a,.story-card:hover h3 a{color:var(--volt)}
}
.story-card h2 a:hover,.story-card h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.related-grid .story-card .dek{-webkit-line-clamp:2}
@media (max-width:560px){
  .story-card h2,.story-card h3{line-height:1.3}
}