:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ink: #1a1a1a;
  --ink-2: #333333;
  --ink-3: #555555;
  --ink-muted: #686868;
  --paper: #ffffff;
  --cream: #faf6ed;
  --cream-dark: #f0ead6;
  --warm-bg: #f8f5ee;
  --border: #e8e4d9;
  --border-light: #f0ece3;
  --accent: #c9963a;
  --accent-dark: #a87a2a;
  --accent-soft: #f5edda;
  --accent-tag: #8b6914;
  --sage: #6f8f6a;
  --brick: #a85d4f;
  --max-w: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--ink); background: var(--warm-bg); line-height: 1.5; font-size: 16px; }
a { color: inherit; text-decoration: none; }

/* Utility bar */
.utility-inner { display: flex; justify-content: space-between; align-items: center; }
.utility-left { color: var(--ink-3); letter-spacing: 0.03em; }
.utility-right a { color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; font-size: 11px; }

/* Masthead — flanking city-clock layout + hover-preview now lives in
   chrome.css (every page, not homepage-only — see renderHeader.js).
   Homepage keeps its own deliberate bigger-logo/taller-padding
   treatment, per chrome.css's own note. */
.masthead { padding: 16px 0 8px; }
.masthead-logo-img { height: 46px; }

/* Nav */
.nav-link { padding: 10px 15px; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; }

/* Signal ticker — scrolling marquee (publisher feedback, 13 Sep 2026:
   see renderHomepage.js's renderTickerTrack comment for why — a fixed
   nowrap/overflow:hidden bar silently truncated any message longer than
   the viewport instead of showing it in full, which read as "cropped"
   on mobile especially. */
.signal-ticker { background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 11px; padding: 7px 0; overflow: hidden; letter-spacing: 0.02em; }
.signal-ticker .container { overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 28s linear infinite; }
.ticker-track-inner { display: flex; gap: 32px; padding-right: 32px; white-space: nowrap; flex-shrink: 0; }
.signal-ticker:hover .ticker-track, .signal-ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}
.ticker-item { color: var(--cream); }
.ticker-item b { color: var(--accent); font-weight: 600; }
.ticker-up { color: #9fc99a; }
.ticker-down { color: #d99a8c; }

/* Hero */
/* FIXED (publisher feedback, 13+17 Sep 2026 — "Left sidebar... likely to
   get cropped on some devices"): confirmed via pixel-diff of the
   publisher's own With/Without-bleed reference screenshots. .hero is
   never wrapped in .container (unlike every other section on this
   page) and had zero horizontal padding, so .hero-col.left's text sat
   flush against the viewport edge with no gutter at all. The right
   side only ever looked fine by accident — the OS/browser scrollbar
   eats ~15-17px on the right, which happened to read as a small
   margin in testing, not a real one. Matches .container's own
   max-width/centering/24px gutter (chrome.css) so the hero stops
   being the one full-bleed section on an otherwise-contained page. */
.hero { max-width: var(--max-w); margin: 0 auto; padding: 24px 24px; }
/* Hero narrowed (publisher, 10 Sep 2026 — "Make hero card/article
   smaller to accommodate left & right sidebars. Keep the bleeds on
   both sides"): both rails widened slightly (220/280 → 250/300),
   giving the real Crosscurrents sidebar (left) and Upside Recommends
   (right) genuine room instead of a hero that visually dominated a
   pair of thin rails. .hero-col.left/.right below keep the existing
   border+padding bleed treatment on both sides, unchanged.
   grid-template-areas puts the ad slot (now a 4th grid item, moved in
   from a separate sibling block) on its own full-width row below the
   3 columns — same visual as before, just reachable by "order" logic
   for the mobile collapse below. */
.hero-grid { display: grid; grid-template-columns: 250px 1fr 300px; grid-template-areas: "left center right" "ad ad ad"; gap: 28px; }
.hero-col.left { grid-area: left; }
.hero-col.center { grid-area: center; }
.hero-col.right { grid-area: right; }
.hero-ad-slot { grid-area: ad; }
.hero-col.left { border-right: 1px solid var(--border); padding-right: 28px; }
.hero-col.right { border-left: 1px solid var(--border); padding-left: 28px; }
.panel-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
/* FIXED (publisher feedback, 13 Sep 2026 — "Upside Recommends...
   None still clickable/linked"): .recommend-item is now the <a> itself
   (renderHomepage.js's renderUpsideRecommends), not a plain <div> a
   nested link was meant to go inside — reset to block-level link
   styling, matching the same at-rest underline+color convention used
   for Related Reading/External References links this same round. */
.recommend-item { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.recommend-item:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
.lead-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 8px; }
.lead-headline { font-family: var(--serif); font-size: 2rem; font-weight: 800; line-height: 1.12; margin-bottom: 10px; }
.lead-dek { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px; }
.lead-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

/* Signal widget */
.signal-widget { background: var(--paper); border: 1px solid var(--border); border-radius: 2px; padding: 14px; margin-bottom: 16px; }
.signal-widget-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.signal-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.signal-row:last-child { border-bottom: none; }
.signal-val { font-family: var(--mono); font-weight: 600; }
.signal-val.up { color: var(--sage); }
.signal-val.down { color: var(--brick); }

/* Sticky segment-jump nav */
.jump-nav { background: rgba(250,246,237,0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); position: sticky; top: 39px; z-index: 90; }
.jump-scroll { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; -ms-overflow-style: none; scrollbar-width: none; }
.jump-scroll::-webkit-scrollbar { display: none; }
.jump-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; border: 1px solid transparent; }
.jump-link:hover { background: var(--cream-dark); }
.jump-link.active { background: var(--ink); color: var(--cream); }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Section shared */
.story-section { padding: 28px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.section-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; }
.section-sub { font-size: 12px; color: var(--ink-muted); }
.story-card { background: var(--paper); border: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.story-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-3); }
.story-title { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; line-height: 1.28; margin-bottom: 8px; }
.story-dek { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-bottom: 8px; }
.story-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); margin-top: auto; display: flex; justify-content: space-between; }
.story-card-img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 2px; margin-bottom: 10px; background: var(--cream-dark); }

/* Latest Stories carousel (kept — high volume, recency-driven) */
.carousel-wrap { position: relative; }
.carousel-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .story-card { min-width: 300px; scroll-snap-align: start; }
.carousel-track .story-card .story-title { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-track .story-card .story-dek { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--ink-2); z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.carousel-arrow:hover { background: var(--ink); color: var(--cream); }
.carousel-arrow.prev { left: -14px; }
.carousel-arrow.next { right: -14px; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer; }
.carousel-dot.active { background: var(--accent); width: 16px; border-radius: 3px; }

/* Segment section shell */
.segment-section { padding: 26px 0; border-top: 1px solid var(--border-light); scroll-margin-top: 90px; }
.segment-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.segment-section-title { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.3rem; font-weight: 800; }
.segment-see-all { font-size: 12px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }

/* ── Pattern A: Lead + Flanking Lists ── */
.grid-a { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 24px; }
.flank-list { display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
/* flank-item/lead-card/grid-b-lead are now <a> (were <div>, see
   renderHomepage.js — cards had no href at all before, nothing on the
   homepage was clickable): <a> defaults to inline, these need block
   explicitly to keep the same layout they had as divs. */
/* Flank items (10 Sep 2026): now carry a real cover thumbnail — was
   text-only. "Uncropped full image in a restricted image container
   compact for that space" = object-fit: contain inside a fixed-size
   frame (not cover/crop), same idea as Pattern C's .ranked-thumb but
   its own compact size for this narrower column. Headline font-size
   reduced (0.92rem → 0.82rem) per publisher direction. */
.flank-item { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.flank-item:last-child { border-bottom: none; padding-bottom: 0; }
.flank-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: var(--cream-dark); display: flex; align-items: center; justify-content: center; }
.flank-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.flank-body { flex: 1; min-width: 0; }
.flank-title { font-family: var(--serif); font-weight: 700; font-size: 0.82rem; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.flank-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
/* min-width: 0 — same CSS Grid intrinsic-size floor bug fixed in
   column.css's .column-card-img: the <img> inside carries real HTML
   width/height attributes (e.g. 1536x1024, for CLS prevention), and a
   grid item's default min-width:auto uses that as a floor regardless
   of any CSS width/aspect-ratio applied to it. */
.lead-card { display: block; color: inherit; text-decoration: none; min-width: 0; }
.grid-a .lead-card { display: block; text-align: center; }
.grid-a .lead-card .story-card-img { height: 170px; }
.grid-a .lead-card .story-title { font-size: 1.25rem; }
.grid-a .lead-card .story-dek { font-size: 13px; }

/* Standalone hero card (§9 reorder) — same .lead-card markup Pattern A
   produces, rendered alone in .hero-grid's center column, so it needs
   its own (left-aligned, larger) sizing rather than grid-a's centered
   flanked-layout sizing. */
.hero-lead-card .l-tag { justify-content: flex-start; }
.hero-lead-card .l-title { font-size: 1.5rem; }

/* ── Pattern B: Big Story + Row of 3 ── */
.grid-b-lead { display: block; margin-bottom: 20px; color: inherit; text-decoration: none; }
.grid-b-lead .story-card-img { height: 220px; }
.grid-b-lead .story-title { font-size: 1.4rem; }
.grid-b-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-b-row .story-card-img { height: 110px; }
.grid-b-row .story-dek { display: none; }

/* ── Pattern C: Ranked List ── */
.ranked-list { display: flex; flex-direction: column; }
.ranked-item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.ranked-item:last-child { border-bottom: none; }
.ranked-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 800; color: var(--border); width: 34px; flex-shrink: 0; }
.ranked-thumb { width: 96px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: var(--cream-dark); }
/* FIXED (publisher feedback, 13 Sep 2026 — "Left sidebar, seems like
   it's likely to get cropped on some devices"): flex:1 with no
   min-width:0 refuses to shrink below its content's intrinsic width —
   a long unbroken headline word (or a longer real Crosscurrents title
   than whatever happened to be in the test data) forces the whole
   .ranked-item flex row, and therefore .hero-col.left, past its 250px
   rail width instead of wrapping — the classic flexbox overflow bug.
   Right sidebar (Upside Recommends) is a plain block list, not a flex
   row, so it was never exposed to this. */
.ranked-body { flex: 1; min-width: 0; }
.ranked-body .story-title { overflow-wrap: break-word; }
.ranked-body .story-title { font-size: 0.96rem; margin-bottom: 3px; }
.ranked-body .story-meta { justify-content: flex-start; gap: 12px; }

/* Urgent Brief, Section 3 Item 8 — root cause found by direct visual
   inspection, not the z-index/overflow guess: this is the same
   .ranked-item/.ranked-num/.ranked-thumb markup Pattern C uses on the
   full-width (1280px) column archive page, reused as-is for the
   Crosscurrents rail in .hero-col.left, a 250px-wide sidebar (~222px
   after its own border-right padding). 34px num + 96px thumb + 2×16px
   gaps = 162px of fixed-width chrome alone in a column with ~222px
   total — only ~60px left for the actual headline, which is what read
   as "cropped." Not a design call: this component was sized for a
   much wider context and never adjusted for the narrow rail it also
   got dropped into. Drop the thumbnail here specifically (the sibling
   Upside Recommends panel is text-only at this same width already —
   consistent, not a new pattern) and give the number back its width. */
.hero-col.left .ranked-thumb { display: none; }
.hero-col.left .ranked-num { width: auto; font-size: 1.3rem; }

/* Verdict Chips (Crosscurrents) */
.verdict-chip { margin-top: 8px; padding: 8px 10px; background: var(--accent-soft); border-left: 2px solid var(--accent); border-radius: 2px; cursor: pointer; position: relative; }
.verdict-chip-label { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-dark); }
.verdict-chip-text { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink); line-height: 1.4; margin-top: 3px; filter: blur(5px); user-select: none; transition: filter 0.2s; }
.verdict-chip.revealed .verdict-chip-text { filter: blur(0); user-select: text; }
.verdict-chip:not(.revealed)::after { content: 'Tap to reveal verdict'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: rgba(245,237,218,0.55); }
.verdict-chip.revealed::after { display: none; }

/* Cluster link preview demo */
.cluster-demo { background: var(--paper); border: 1px solid var(--border); padding: 20px; margin: 24px 0; position: relative; }
.cluster-demo p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.cluster-link { border-bottom: 1px dotted var(--accent-dark); color: var(--accent-dark); font-weight: 600; cursor: pointer; position: relative; }
.cluster-preview { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; width: 260px; background: var(--ink); color: var(--cream); padding: 12px 14px; font-size: 12px; line-height: 1.5; border-radius: 2px; z-index: 10; }
.cluster-link:hover .cluster-preview { display: block; }
.cluster-badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* Verdict box demo */
.verdict-box { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; margin: 20px 0; }
.verdict-box p { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink); line-height: 1.5; }

/* Native ad slot */
.ad-native { background: var(--cream-dark); border: 1px dashed var(--border); border-radius: 3px; padding: 20px; margin: 8px 0 30px; display: flex; align-items: center; gap: 20px; position: relative; }
.ad-native-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); position: absolute; top: -18px; left: 0; }
.ad-native-img { width: 100px; height: 66px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.ad-native-copy h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 4px; }
.ad-native-copy p { font-size: 12px; color: var(--ink-3); }
.ad-banner { background: var(--cream-dark); border: 1px dashed var(--border); border-radius: 3px; height: 90px; display: flex; align-items: center; justify-content: center; margin: 10px 0 30px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* Briefing Catalogue — inline (homepage) */
.briefing-inline { background: var(--paper); border: 1px solid var(--border); border-radius: 3px; padding: 22px; margin: 10px 0 30px; }
.briefing-inline-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.briefing-inline-head h3 { font-family: var(--serif); font-size: 1.2rem; }
.briefing-inline-head a { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); }
.briefing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.briefing-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.briefing-check:hover { background: var(--cream-dark); }
.briefing-check input { accent-color: var(--accent-dark); }
.briefing-cadence { font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); margin-left: auto; }
.briefing-submit-row { display: flex; gap: 10px; }
.briefing-email { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; font-family: var(--sans); }

/* Newsletter strip */
/* border-bottom: same var(--ink) background as .site-footer right below
   it — with no separator the two read as one accidental merged block
   (publisher screenshot, 6 Sep 2026), not two distinct sections. */
.newsletter-strip { background: var(--ink); color: var(--cream); padding: 26px 0; margin-top: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.newsletter-inner { display: flex; justify-content: space-between; align-items: center; }
.newsletter-inner h3 { font-family: var(--serif); font-size: 1.3rem; }
.newsletter-inner p { font-size: 13px; color: #c9c5b8; margin-top: 3px; }
.nl-btn { background: var(--accent); color: var(--ink); font-weight: 700; font-size: 13px; padding: 10px 22px; border-radius: 2px; white-space: nowrap; }

/* Footer — shared chrome (chrome.css), one page-specific override here */
.site-footer { margin-top: 10px; }

/* Honesty-protocol note styling (dev annotation, not shipped copy) */
.dev-note { font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); background: var(--cream-dark); display: inline-block; padding: 2px 6px; border-radius: 2px; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   COMPATIBILITY PATCH — added when reconciling this CSS (extracted
   from the locked mockup) against renderHomepage.js's ACTUAL output.
   The mockup used generic .story-title/.story-dek/.story-meta/
   .story-card-img classes inside grid-a/grid-b-lead/grid-b-row; the
   render function emits shorthand variants (.l-title/.b-title/.r-title
   etc.) and bare <img> tags with no class at all inside those same
   containers. Both are real, this block reconciles them rather than
   silently leaving the render output unstyled.
   ══════════════════════════════════════════════════════════════ */

/* Pattern A: lead-card inner elements */
.lead-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; background: var(--cream-dark); }
.l-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dark); display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 8px; }
.l-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin-bottom: 6px; }
.l-dek { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.l-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

/* Pattern B: grid-b-lead and grid-b-row inner elements */
.grid-b-lead img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; background: var(--cream-dark); }
.grid-b-row > a { display: block; color: inherit; text-decoration: none; min-width: 0; }
.grid-b-row > a img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); margin-bottom: 8px; background: var(--cream-dark); }
.b-title { font-family: var(--serif); font-size: 1rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.b-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); }

/* Pattern C: ranked-body inner elements (render uses r-title/r-meta,
   not the mockup's story-title/story-meta, inside .ranked-body) */
/* Clamped to 3 lines — the Crosscurrents sidebar (10 Sep 2026 addition)
   reuses this ranked-list style in a narrower 250px rail, and real
   Crosscurrents headlines run long (full-sentence style); without a
   clamp a long one blew the whole row's height out, pushing the
   thumbnail/number out of vertical alignment. */
.r-title { font-family: var(--serif); font-size: 0.96rem; font-weight: 700; line-height: 1.3; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.r-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); }

/* Ad slot base CSS (.ad-slot/.ad-slot-desktop/.ad-slot-mobile) now
   lives in chrome.css — shared, not homepage-only. */

/* Segments wrapper — simple vertical container for all 9 segment sections */
.segments { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* Contract-gap stub styling (signal ticker / Upside Recommends / Market
   Lens) — visually distinct so a pending-contract placeholder is never
   mistaken for finished content during QA */
[data-pending-contract] { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   MOBILE PARITY — was entirely missing (0 @media rules in this file
   prior to this pass). Every other page's CSS had at least one
   breakpoint; Homepage, the flagship/most complex page, had none.
   Collapses the 3-column hero, and all 3 grid patterns, matching the
   layouts already validated in homepage-mobile-v2-mockup.html.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Publisher caught this (6 Sep 2026): .hero had zero horizontal
     padding of its own and isn't wrapped in .container, so on mobile
     the hero card's image AND text sat flush against both screen
     edges — the only block on the page with no inset at all, unlike
     .segments right below it (padding: 0 16px, same rule further
     down). Matching that same 16px gutter here, not a new value. */
  .hero.hero-grid { padding: 24px 16px; }
  /* Mobile stack order (publisher, 10 Sep 2026): Hero → Crosscurrents
     sidebar → ad space → Upside Recommends → columns below. Desktop's
     "left center right" + "ad ad ad" areas collapse to one column
     here, reordered to match — same 4 grid items, no DOM change. */
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "center" "left" "ad" "right"; gap: 16px; }
  .hero-col.left, .hero-col.right { border: none; padding: 0; }
  .grid-a { grid-template-columns: 1fr; gap: 16px; }
  .grid-b-row { grid-template-columns: 1fr; gap: 16px; }
  .grid-b-row .story-dek { display: block; }
  .segments { padding: 0 16px; }
}

/* "Latest" panel (27 Sep 2026): newest headlines, no covers or deks */
.latest-list { display: flex; flex-direction: column; }
.latest-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.latest-item:first-child { padding-top: 0; }
.latest-item:last-child { border-bottom: 0; }
.latest-tag { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.latest-title { display: block; font-family: var(--serif); font-size: 14px; line-height: 1.35; font-weight: 600; }
.latest-item:hover .latest-title { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.latest-date { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }