/* ============================================================
   Tariff.news — "Cool Slate" design system
   Source of truth: reference/design_handoff_tariff_news_slate/
   ============================================================ */

:root {
  --bg: #F7F8FB;
  --surface: #EDF0F5;
  --surface-white: #FFFFFF;
  --border: #DFE4EC;
  --hairline: #E7EBF1;
  --border-input: #D4DAE4;
  --rule-heavy: #CCD3DE;
  --rule-strong: #BFC7D4;
  --ink: #16202E;
  --body: #46505E;
  --body-serif: #2A3340;
  --secondary: #5F6975;
  --muted: #7A8492;
  --faint: #8E97A3;
  --accent: #2E5E9E;
  --accent-tint: rgba(46,94,158,.06);
  --accent-b30: rgba(46,94,158,.3);
  --accent-b35: rgba(46,94,158,.35);
  --accent-b40: rgba(46,94,158,.4);
  --accent-dotted: rgba(46,94,158,.5);
  --urgent: #CF2E2E;
  --urgent-tint: rgba(207,46,46,.06);
  --urgent-border: rgba(207,46,46,.28);
  --navy: #141B26;
  --navy-border: #232C3B;
  --band-values: #F2F3F5;
  --band-labels: #96A0AE; /* lightened from the handoff's #565D68 for legibility on navy */
  --band-links: #B6BCC6;
  --ticker-time: #7EA9DD;
  --ticker-up: #3DA875;
  --wordmark-red-navy: #E23B3B;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --gutter: 36px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  border-top: 3px solid var(--accent); /* signature rule */
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
h1, h2, h3, .headline { text-wrap: pretty; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Wordmark ---------- */
.wordmark { display: flex; align-items: baseline; gap: 2px; font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.wordmark .wm-a { color: var(--ink); }
.wordmark .wm-b { color: var(--urgent); }
.wordmark--navy .wm-a { color: var(--band-values); }
.wordmark--navy .wm-b { color: var(--wordmark-red-navy); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: 64px; background: var(--bg); border-bottom: 1px solid var(--border); }
.nav .wordmark { font-size: 24px; }
.nav-links { display: flex; gap: 8px; margin-left: 8px; }
.nav-links a { font-size: 12.5px; font-weight: 500; color: var(--body); border: 1px solid var(--border-input); border-radius: 999px; padding: 6px 13px; line-height: 1; transition: border-color .12s, color .12s, background .12s; }
.nav-links a:hover { border-color: var(--accent); color: var(--accent); }
.nav-links a.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nav-links a.active:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-digest { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.nav-podcast { font-size: 13.5px; font-weight: 500; color: var(--body); }
.nav-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-input); border-radius: 6px; padding: 6px 10px; color: var(--faint); background: var(--surface-white); }
.nav-search input { border: 0; outline: 0; font-size: 12px; font-family: var(--sans); width: 72px; color: var(--body); background: transparent; }
.nav-search input::placeholder { color: var(--faint); }
.nav-search kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--border-input); border-radius: 3px; padding: 1px 4px; }
.nav-burger { display: none; }
.nav-strip { display: none; }
.nav-menu { display: none; }

/* ---------- Data ticker ---------- */
.ticker { display: flex; align-items: center; height: 34px; background: var(--navy); font-family: var(--mono); font-size: 11px; color: var(--band-labels); overflow: hidden; white-space: nowrap; }
.ticker .t-label { color: var(--band-labels); }
.ticker .t-value { color: var(--band-values); margin: 0 6px; }
.ticker .t-up { color: var(--ticker-up); }
.ticker .t-sep { margin: 0 16px; color: #2C323C; }
.ticker .t-src { margin-left: auto; color: var(--band-labels); }
.ticker .t-time { color: var(--ticker-time); }

/* ---------- Breaking banner ---------- */
.breaking { display: flex; align-items: center; gap: 14px; padding: 10px var(--gutter); background: var(--urgent-tint); border-bottom: 1px solid var(--urgent-border); }
.breaking-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: #fff; background: var(--urgent); border-radius: 3px; padding: 3px 8px; }
.breaking-head { font-size: 14px; font-weight: 500; color: var(--ink); }
.breaking-time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--urgent); display: flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--red { background: var(--urgent); }
.dot--accent { background: var(--accent); }

/* ---------- Type utilities ---------- */
.overline { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.overline--accent { color: var(--accent); }
.overline--muted { color: var(--faint); }
.mono-time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ---------- Source-type pills (semantic — do not theme) ---------- */
.pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.pill-news       { color: #667080; border-color: rgba(102,112,128,.45); }
.pill-legal      { color: #5D52C8; border-color: rgba(93,82,200,.4); }
.pill-government { color: #257A55; border-color: rgba(37,122,85,.4); }
.pill-advisory   { color: #A3781C; border-color: rgba(163,120,28,.45); }
.pill-other      { color: #667080; border-color: rgba(102,112,128,.45); }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 6px; border: 0; cursor: pointer; text-align: center; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--bg); }
.btn-secondary { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sponsored { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-size: 13px; padding: 10px 18px; white-space: nowrap; }
.btn-sponsored:hover { background: var(--accent); color: var(--bg); }
.btn-urgent { background: var(--urgent); color: #fff; }
.textlink { font-family: var(--mono); font-size: 11px; color: var(--accent); border-bottom: 1px dotted var(--accent-dotted); }
.dek-more { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--accent); white-space: nowrap; border-bottom: 1px dotted var(--accent-dotted); }
.dek-more:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Slim subscribe bar (homepage top) ---------- */
.subbar { display: flex; align-items: center; gap: 16px; padding: 10px var(--gutter); border-bottom: 1px solid var(--border); background: rgba(46,94,158,.04); }
.subbar-pitch { font-size: 13px; color: var(--secondary); }
.subbar-form { display: flex; gap: 8px; margin-left: auto; }
.subbar-form .input { width: 210px; padding: 7px 12px; font-size: 12.5px; flex: none; }
.subbar-form .btn { padding: 8px 16px; font-size: 12.5px; }

/* ---------- Lead story (B) + headline wire (A) ---------- */
.lead { display: grid; grid-template-columns: 460px 1fr; gap: 36px; padding: 26px var(--gutter) 8px; }
.lead-head { font-family: var(--serif); font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--ink); margin-top: 10px; letter-spacing: -.01em; display: block; }
.lead-head:hover { color: var(--accent); }
.lead-dek { font-size: 14px; line-height: 1.6; color: var(--secondary); margin-top: 8px; }
.lead-cta { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; }
.mini-ledger { border-top: 1px solid var(--hairline); padding-top: 4px; }
.mini-ledger .ledger-row { grid-template-columns: 24px 1fr auto; padding: 8px 0; }
.mini-ledger .ledger-head { font-size: 15px; }

.wire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; padding: 0 var(--gutter) 8px; }
.wire-group-head { display: flex; align-items: baseline; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule-strong); padding: 18px 0 8px; text-transform: uppercase; }
.wire .ledger-row { grid-template-columns: 26px 1fr auto; }
.wire .ledger-head { font-size: 15.5px; }

/* ---------- Hero: Daily Briefing ---------- */
.hero { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--border); }
.hero-left { padding: 36px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.hero-head { font-family: var(--serif); font-size: 34px; line-height: 1.18; font-weight: 700; color: var(--ink); margin: 16px 0 0; letter-spacing: -.01em; }
.hero-teaser { font-size: 15px; line-height: 1.65; color: var(--body); margin: 14px 0 0; }
.hero-cta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; }
.hero-right { padding: 22px 36px 26px; }
.ledger-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--faint); padding-bottom: 6px; }
.ledger-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.ledger-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.ledger-head { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ledger-head:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-dotted); text-underline-offset: 3px; }
.ledger-head .go { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--rule-strong); margin-left: 5px; text-decoration: none; display: inline-block; transition: transform .12s ease, color .12s ease; }
.ledger-head:hover .go { transform: translateX(2px); }
.ledger-head:hover .go { color: var(--accent); }
.ledger-row .pill { margin-left: 10px; position: relative; top: -2px; }
.ledger-meta { display: none; }

/* ---------- Sponsored banner units ---------- */
.sponsored-wrap { margin: 36px var(--gutter); }
.sponsored-cap { text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--faint); margin-bottom: 8px; }
.sponsored { display: flex; align-items: center; gap: 28px; padding: 22px 26px; border-radius: 8px; }
.sponsored--tint { background: var(--accent-tint); border: 1px solid var(--accent-b30); }
.sponsored--neutral { background: var(--surface); border: 1px solid var(--border); }
.sponsored-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--accent); border: 1px solid var(--accent-b40); border-radius: 3px; padding: 3px 7px; flex: none; }
.sponsored-body { flex: 1; min-width: 0; }
.sponsored-head { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.sponsored-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.sponsored--neutral .btn-sponsored { border-color: var(--rule-strong); color: var(--ink); }
.sponsored--neutral .btn-sponsored:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* ---------- Section headers + cards ---------- */
.section { padding: 26px var(--gutter) 4px; }
.section--featured { padding-top: 30px; }
.section-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--rule-strong); padding-bottom: 10px; }
.section-name { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.section-kicker { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.section-viewall { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.section-viewall:hover { color: var(--accent); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding-top: 22px; }

.card-featured { display: flex; flex-direction: column; gap: 12px; }
.card-featured .card-head { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -.005em; }
.card-featured .card-head:hover { color: var(--accent); }
.card-featured .card-dek { font-size: 13.5px; line-height: 1.6; color: var(--secondary); }

.card-section { display: flex; flex-direction: column; gap: 9px; border-top: 2px solid var(--rule-heavy); padding-top: 14px; }
.card-section .card-head { font-family: var(--serif); font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.card-section .card-head:hover { color: var(--accent); }
.card-section .card-dek { font-size: 13px; line-height: 1.55; color: var(--secondary); }

.card-meta { display: flex; align-items: center; gap: 10px; }

/* Story artwork: 3:2, bordered, striped placeholder while empty */
.art { aspect-ratio: 3/2; border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(45deg, #EFF1F6 0 12px, #E9EDF3 12px 24px); display: grid; place-items: center; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art-label { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* ---------- Digest capture band ---------- */
.digest-band { margin: 36px var(--gutter) 0; padding: 36px 40px; border: 1px solid var(--accent-b30); border-radius: 8px; background: linear-gradient(180deg, var(--surface), var(--bg)); display: flex; align-items: center; gap: 40px; }
.digest-band-head { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 8px; letter-spacing: -.01em; }
.digest-band-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.digest-band-form { display: flex; gap: 10px; min-width: 400px; }
.input { flex: 1; border: 1px solid var(--border-input); border-radius: 6px; padding: 12px 14px; font-size: 13.5px; font-family: var(--sans); color: var(--body); background: var(--surface-white); outline: none; }
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); }

/* ---------- Footer ---------- */
.footer { margin-top: 40px; background: var(--navy); padding: 36px var(--gutter); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer .wordmark { font-size: 20px; }
.footer-blurb { font-size: 12.5px; line-height: 1.6; color: #8B93A0; margin-top: 10px; max-width: 300px; }
.footer-mono { font-family: var(--mono); font-size: 10px; color: var(--band-labels); margin-top: 14px; text-transform: uppercase; letter-spacing: .06em; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.footer-col-head { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--band-labels); margin-bottom: 4px; text-transform: uppercase; }
.footer-col a { color: var(--band-links); }
.footer-col a:hover { color: #fff; }
.footer-bar { border-top: 1px solid var(--navy-border); background: var(--navy); padding: 14px var(--gutter); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--band-labels); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Article page ---------- */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; padding: 34px var(--gutter) 48px; }
.breadcrumb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.breadcrumb .bc-sep { color: var(--rule-strong); }
.breadcrumb a { color: var(--accent); }
.article-h1 { font-family: var(--serif); font-size: 42px; line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -.015em; margin: 16px 0 0; max-width: 20ch; }
.article-meta { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; flex-wrap: wrap; }
.article-via { font-size: 12.5px; color: var(--muted); }
.article-via strong { color: var(--body); font-weight: 500; }
.article-fresh { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: auto; display: flex; align-items: center; gap: 7px; text-transform: uppercase; }
.article-hero { margin: 26px 0 8px; }
.article-credit { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-bottom: 26px; text-transform: uppercase; }
.article-body { max-width: 66ch; font-family: var(--serif); font-size: 17.5px; line-height: 1.75; color: var(--body-serif); }
.article-body p { margin: 0 0 22px; }
.article-body > p:first-of-type::first-letter { float: left; font-size: 56px; line-height: .85; font-weight: 700; color: var(--accent); padding: 6px 10px 0 0; font-family: var(--serif); }
.article-body a { color: var(--accent); }
.article-body h2, .article-body h3, .article-body h4 { font-family: var(--serif); color: var(--ink); line-height: 1.3; margin: 28px 0 12px; }
.article-body h2 { font-size: 26px; } .article-body h3 { font-size: 21px; } .article-body h4 { font-size: 18px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 1.4em; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid var(--accent); margin: 0 0 22px; padding: 2px 0 2px 18px; color: var(--secondary); font-style: italic; }
.article-body strong { color: var(--ink); }
.article-body code { font-family: var(--mono); font-size: .85em; background: var(--surface); border-radius: 3px; padding: 1px 5px; }

.tags { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; border: 1px solid var(--rule-heavy); color: var(--secondary); border-radius: 4px; padding: 5px 10px; text-transform: uppercase; }

.sidebar { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.sidebar-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule-strong); padding-bottom: 9px; text-transform: uppercase; }
.related-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 7px; }
.related-head { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.related-head:hover { color: var(--accent); }
.resources { border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; background: var(--surface); }
.resources-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--accent); margin-bottom: 12px; text-transform: uppercase; }
.resources a { color: var(--body-serif); display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 11px; }
.resources a:last-child { margin-bottom: 0; }
.resources a span { color: var(--faint); }
.sidebar-digest { border: 1px solid var(--accent-b35); border-radius: 8px; padding: 20px; background: linear-gradient(180deg, rgba(46,94,158,.07), transparent); }
.sidebar-digest-head { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin: 8px 0 12px; line-height: 1.35; }
.sidebar-digest .input { width: 100%; margin-bottom: 8px; padding: 10px 12px; font-size: 12.5px; }
.sidebar-digest .btn { display: block; width: 100%; font-size: 13px; padding: 10px; }

/* ---------- Generic content pages (digest, profile, auth, podcast…) ---------- */
.page { max-width: 720px; margin: 0 auto; padding: 40px var(--gutter) 56px; }
.page--wide { max-width: 1000px; }
.page-title { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin: 10px 0 0; }
.panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-white); padding: 26px 28px; margin-top: 22px; }
.panel--surface { background: var(--surface); }
.panel--accent { border-color: var(--accent-b35); background: linear-gradient(180deg, rgba(46,94,158,.07), transparent); }
.notice { border-radius: 6px; padding: 13px 16px; font-size: 13.5px; margin-top: 18px; }
.notice--ok { background: rgba(61,168,117,.08); border: 1px solid rgba(61,168,117,.35); color: #257A55; }
.notice--err { background: var(--urgent-tint); border: 1px solid var(--urgent-border); color: var(--urgent); }
.notice--info { background: var(--accent-tint); border: 1px solid var(--accent-b30); color: var(--accent); }

/* Long-read (digest page body) */
.longread { font-family: var(--serif); font-size: 17px; line-height: 1.75; color: var(--body-serif); }
.longread p { margin: 0 0 18px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 28px 0 0; font-family: var(--mono); font-size: 11px; }
.pagination a, .pagination span { padding: 7px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--secondary); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ============================================================
   Responsive — 375 spec (applies < 900px)
   ============================================================ */
@media (max-width: 900px) {
  :root { --gutter: 16px; }

  .nav { height: 52px; gap: 12px; }
  .nav .wordmark { font-size: 19px; }
  .nav-links, .nav-podcast, .nav-digest { display: none; }
  .nav-search { border: 0; background: transparent; padding: 6px; }
  .nav-search input, .nav-search kbd, .nav-search .nav-search-txt { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; width: 18px; background: none; border: 0; padding: 10px 4px; cursor: pointer; min-height: 44px; justify-content: center; }
  .nav-burger span { height: 2px; background: var(--body); border-radius: 1px; display: block; }
  .nav-strip { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--gutter); height: 38px; align-items: center; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 500; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-strip::-webkit-scrollbar { display: none; }
  .nav-strip a { color: var(--body); padding: 10px 0; }
  .nav-strip a.active { color: var(--accent); }
  .nav-menu { display: none; border-bottom: 1px solid var(--border); background: var(--bg); padding: 8px var(--gutter) 14px; }
  .nav-menu.open { display: block; }
  .nav-menu a { display: block; padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--body); border-bottom: 1px solid var(--hairline); min-height: 44px; }

  .ticker { display: none; }

  .breaking { padding: 9px var(--gutter); align-items: flex-start; gap: 10px; }
  .breaking-head { font-size: 12.5px; line-height: 1.45; }
  .breaking-time { display: none; }

  .subbar { flex-wrap: wrap; gap: 8px; }
  .subbar-form { margin-left: 0; width: 100%; }
  .subbar-form .input { flex: 1; width: auto; }
  .lead { grid-template-columns: 1fr; gap: 18px; padding: 18px var(--gutter) 4px; }
  .lead-head { font-size: 24px; }
  .wire { grid-template-columns: 1fr; gap: 0; }

  .hero { grid-template-columns: 1fr; }
  .hero-left { padding: 22px var(--gutter); border-right: 0; }
  .hero-head { font-size: 25px; line-height: 1.2; margin-top: 10px; }
  .hero-teaser { font-size: 13.5px; margin-top: 10px; }
  .hero-cta { padding-top: 16px; }
  .hero-cta .btn { display: block; width: 100%; padding: 13px; }
  .hero-cta .mono-note { display: none; }
  .hero-right { padding: 6px var(--gutter) 2px; }
  .ledger-label { display: none; }
  .ledger-row { grid-template-columns: 24px 1fr; gap: 10px; padding: 13px 0; }
  .ledger-row > .mono-time { display: none; }
  .ledger-row .pill { display: none; }
  .ledger-head { font-size: 15.5px; line-height: 1.4; }
  .ledger-meta { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 5px; text-transform: uppercase; }

  .sponsored-wrap { margin: 22px var(--gutter); }
  .sponsored { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
  .sponsored-head { font-size: 16px; line-height: 1.35; }

  .grid3 { grid-template-columns: 1fr; gap: 24px; }

  .digest-band { flex-direction: column; align-items: stretch; gap: 0; margin: 24px var(--gutter); padding: 22px 20px; }
  .digest-band-head { font-size: 19px; line-height: 1.3; }
  .digest-band-form { min-width: 0; flex-direction: column; gap: 8px; margin-top: 14px; }
  .digest-band-form .btn { padding: 13px; }

  .footer { grid-template-columns: 1fr; gap: 24px; padding: 24px var(--gutter); }
  .footer-bar { flex-direction: column; gap: 6px; text-align: center; }

  .article-layout { grid-template-columns: 1fr; gap: 36px; padding: 22px var(--gutter) 40px; }
  .article-h1 { font-size: 29px; }
  .article-fresh { margin-left: 0; }
  .article-body { font-size: 16.5px; }
}