/* ====================================================================
   THE HYBRID EARNER — Site Stylesheet
   Version 1.0 — Built from Ingrid's brand system
   Brand Direction 01 Refined: Fraunces + Dark Navy + Gold
   ==================================================================== */

/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* iOS Safari pinch-zoom defense (2026-06-02 zoom-fix):
   The primary defense against the "white band on pinch-zoom-out" symptom is
   the viewport meta tag (minimum-scale=1.0) on every HTML page. This rule is
   the belt-and-suspenders layer — if a future iOS Safari build changes the
   semantics of minimum-scale, or a new page ships without the meta directive,
   the canvas exposed past the layout viewport is navy (matching the site's
   chrome) instead of white. Visually this dissolves the broken-looking
   exposed-background state into the chrome.
   `-webkit-text-size-adjust: 100%` stays — controls iOS text-rendering on
   orientation/zoom transitions independently of the canvas color. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--navy);
}
body {
  font-family: var(--ff-body);
  color: var(--navy);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Brand tokens ─── */
:root {
  --navy:    #0f172a;
  --navy-90: rgba(15, 23, 42, 0.92);
  --navy-80: rgba(15, 23, 42, 0.80);
  --gold:    #c4a265;
  --cream:   #F8F4ED;
  --white:   #ffffff;
  --muted:   #64748b;
  --muted-2: #94a3b8;
  --surface: #f8fafc;
  --border:  #e2e8f0;
  --error:   #dc2626;

  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono:    'SF Mono', Menlo, 'Consolas', monospace;

  --max-content: 1120px;
  --max-article: 680px;
  --max-narrow:  560px;
  --nav-height:  88px;

  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;
}

/* ─── Typography defaults ─── */
h1, h2, h3, h4, h5 { font-family: var(--ff-display); font-weight: 400; color: var(--navy); line-height: 1.2; }
p { line-height: 1.65; }
small { font-size: 13px; color: var(--muted); }

/* ─── Container ─── */
.container { width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 720px; padding: 0 32px; margin: 0 auto; }
.container-article { max-width: var(--max-article); padding: 0 24px; margin: 0 auto; }

/* ====================================================================
   BRAND STRIP (above nav)
   ==================================================================== */
.brand-strip {
  background: var(--navy);
  color: white;
  padding: 11px 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-strip-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 32px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}
.brand-strip-tagline { color: rgba(255, 255, 255, 0.88); }
.brand-strip-sep {
  color: var(--gold);
  margin: 0 14px;
  font-weight: 400;
  font-style: italic;
  display: inline-block;
}
.brand-strip-manifesto {
  color: var(--gold);
  font-style: italic;
}
@media (max-width: 700px) {
  .brand-strip { padding: 8px 16px; font-size: 12px; }
  .brand-strip-inner { display: flex; flex-direction: column; gap: 2px; }
  .brand-strip-sep { display: none; }
}

/* ====================================================================
   NAVIGATION
   ==================================================================== */
/* Stacking-context note: position:sticky + z-index here creates a stacking
   context for everything inside .site-nav (.nav-links, .nav-toggle, etc.).
   Any z-index set on a descendant is LOCAL to this stacking context — it does
   NOT compete with root-level elements like .nav-scrim (z 65) or .progress-bar
   (z 70). The whole .site-nav layer is what competes at the root level.

   Therefore: z-index here must be HIGHER than any root-level overlay that the
   nav (bar + mobile dropdown) needs to paint above — specifically the scrim
   (65) and the reading progress bar (70). Set to 80. Stays below the skip
   link (100) so keyboard a11y still wins on focus, and well below the search
   modal (1000) so the modal still wins when invoked. */
/* Navy header (Andrew-ratified 2026-06-01, Ingrid Option B): the top bar stays
   navy throughout scroll — no scroll-transition logic, no opacity changes. White
   wordmark + gold accents inverse the prior navy-on-light treatment so the nav
   sits coherently between the brand strip (navy) above and the article canvas
   (cream/white) below. Tagline lifts to ~18.5:1 contrast (white@0.7 on navy)
   from ~4.54:1 at AA-floor in the prior light treatment. backdrop-filter is
   removed because a near-opaque navy background does no visible saturation work
   and the filter still creates an iOS-WebKit containing-block trap for
   position:fixed descendants — the same trap the mobile breakpoint already
   patched around on the prior light nav. */
.site-nav {
  position: sticky; top: 0; z-index: 80;
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-nav.scrolled { border-bottom-color: rgba(255, 255, 255, 0.08); }
.nav-inner {
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 32px;
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
}
/* New nav-brand: slash mark + stacked wordmark + tagline */
.nav-brand { display: flex; align-items: center; gap: 14px; }
.nav-mark { display: block; height: 52px; width: auto; flex-shrink: 0; }
.nav-brand img.nav-logo { display: block; height: 52px; width: auto; }
.nav-brand-text { display: flex; flex-direction: column; gap: 2px; }
.nav-brand-the {
  font-family: var(--ff-display); font-size: 10px; line-height: 1;
  color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.35em; font-weight: 400;
}
.nav-brand-name {
  font-family: var(--ff-display); font-size: 20px; line-height: 1;
  color: #ffffff; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400;
}
.nav-brand-tagline {
  font-family: var(--ff-display); font-size: 12px; line-height: 1.2;
  color: rgba(255, 255, 255, 0.7); font-style: italic; font-weight: 300; letter-spacing: 0.01em;
  margin-top: 2px;
}
/* Legacy markup retained */
.nav-brand-bar { width: 3px; height: 24px; background: var(--gold); border-radius: 1px; flex-shrink: 0; margin-right: 9px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) {
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--gold); }
.nav-toggle {
  display: none;
  background: none; border: none; padding: 8px;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: #ffffff; }

/* Subscribe CTA on the navy nav (desktop). The base .btn-primary is navy-on-navy
   here, which would vanish — so the nav-cta variant flips to gold-on-navy
   (Ingrid §5 question 3 option (a): on-brand accent, loud affordance). Border
   set to gold to match; hover inverts the relationship (navy fill + gold border
   + gold text) so the interactive state still reads as a deliberate state
   change. Specificity (0,2,0) wins over .btn-primary (0,1,0); source order
   places it after .btn-primary for a tie-break safety margin. */
.site-nav .btn-nav-cta {
  background: var(--gold); color: var(--navy);
  border: 1.5px solid var(--gold);
}
.site-nav .btn-nav-cta:hover {
  background: transparent; color: var(--gold); border-color: var(--gold);
}

/* Mobile nav */
@media (max-width: 720px) {
  :root { --nav-height: 68px; }
  .nav-mark { height: 40px; }
  /* Mobile wordmark: show "THE" as a small typographic kicker above "HYBRID EARNER"
     to match the footer's vertical lockup and the brand's full name. Tagline stays
     hidden — sub-readable at this scale. Stack height (~26px: 9px + 2px gap + 15px)
     centers cleanly inside the 68px nav bar via .nav-inner's align-items: center. */
  .nav-brand-the { font-size: 9px; letter-spacing: 0.3em; }
  .nav-brand-name { font-size: 15px; }
  .nav-brand-tagline { display: none; }
  /* Containing-block defense (preserved from prior light-header fix, still
     applies on the navy header): the historical backdrop-filter on .site-nav
     created an iOS-WebKit containing block for position:fixed descendants,
     collapsing the .nav-links dropdown to a zero region inside the 68px nav.
     The desktop rule above already drops backdrop-filter outright (no opacity
     work to do on solid navy), so this mobile rule is now a redundant
     belt-and-suspenders re-assertion against any future re-introduction.
     Background re-stated as navy here for cascade clarity (the descendant
     dropdown panel below keeps its white surface to act as a clear menu
     affordance against the dark bar above — see .nav-links rule). */
  .site-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--navy); }
  /* Mobile dropdown: content-height white panel below the header, navy text.
     Sizes to its menu items (auto height) with a max-height ceiling so a future
     overflowing menu still scrolls inside the panel rather than off-screen.
     width: 100vw and the fixed positioning defend against any future ancestor
     that creates a containing block (filter, transform, will-change, perspective).
     The full-viewport scrim behind it (.nav-scrim) mutes the underlying content. */
  /* Padding note: bottom padding is intentionally heavier than top (40px vs
     24px) for two reasons. (1) The Subscribe CTA at the bottom of the menu is
     a bordered rectangle; its bottom border must clear the panel's bottom
     edge with visible breathing room — flush-to-edge reads as clipped to the
     eye and on iOS Safari can literally clip a sub-pixel of the border. (2)
     `overflow-y: auto` flex containers have a well-documented Safari/iOS
     quirk where `padding-bottom` on the scroll container is sometimes
     collapsed when the inner content is close to (but not over) the
     max-height. Generous bottom padding defends against both. */
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height); left: 0;
    width: 100vw;
    height: auto;
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    background: #ffffff;
    flex-direction: column; align-items: stretch;
    padding: 24px 24px 40px; gap: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    z-index: 70;
    overflow-y: auto;
  }
  /* Internal z-index inside the .site-nav stacking context. .nav-links.open
     just needs to win against its siblings inside .site-nav (.nav-toggle,
     .nav-brand). It does NOT compete with .nav-scrim at the root — that
     comparison is decided by .site-nav's z-index (80) vs .nav-scrim's (65).
     See the stacking-context note on .site-nav above. */
  .nav-links.open { display: flex; z-index: 75; }
  /* Specificity-collision fix (2026-06-02): the desktop rule
     `.nav-links a:not(.btn)` (line 162) sets `color: rgba(255,255,255,0.85)` —
     white-on-navy for the navy header bar. Its specificity is (0,2,1). The
     prior mobile rule `.nav-links a` was (0,1,1), which LOST the cascade tie
     to the desktop rule even inside this media query. Result: white link
     text painted on the white mobile dropdown panel → invisible labels
     (hamburger-menu-fix-notes-2026-06-02). Matching the desktop selector
     with `:not(.btn)` here brings this rule to (0,2,1) — equal specificity,
     later source order, wins. `:not(.btn)` is also semantically correct: the
     Subscribe button gets its own dedicated rule below (`.nav-links
     .btn-nav-cta`) and must not be folded into the link styling. */
  .nav-links a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 18px; color: var(--navy); background: transparent; }
  /* Mobile-panel search-button override: the desktop rule paints the search
     icon white-on-navy. Inside the open dropdown panel (white background) the
     icon must flip back to navy to remain visible. Padding/alignment also
     adjust so the search button reads as a menu row, not a tight desktop icon. */
  .nav-links .nav-search-btn {
    color: var(--navy);
    padding: 16px 0;
    margin-right: 0;
    border-bottom: 1px solid var(--border);
    justify-content: flex-start;
    width: 100%;
  }
  .nav-links .nav-search-btn:hover { color: var(--gold); }
  /* Cascade-override defense for the Subscribe CTA — HISTORICAL NOTE
     (2026-06-02): the prior rule above was `.nav-links a` (no :not), which
     matched the Subscribe button (it's an `<a class="btn ...">`) and applied
     `border-bottom: 1px solid var(--border)` over its navy 1.5px bottom
     border — producing the near-invisible bottom border bug in IMG_0493.
     With the 2026-06-02 fix the selector is `.nav-links a:not(.btn)`, so
     the Subscribe button is no longer matched by that rule at all and the
     historical override is unnecessary. The explicit re-assertion below is
     retained as defense-in-depth: if a future edit re-broadens the link
     selector, the Subscribe button still renders correctly. */
  /* Mobile-panel re-assertion: the open dropdown is a WHITE surface (light
     menu affordance against the navy nav bar above — Ingrid §5 question 4),
     so the Subscribe CTA inside it stays navy-on-white. This overrides the
     desktop `.site-nav .btn-nav-cta` rule (gold-on-navy, specificity 0,2,0)
     because this selector is also 0,2,0 AND lives later in source order AND
     inside the mobile media query — wins on the tie-break. Navy stroke
     re-asserted on all four sides for parity with prior mobile fix. */
  .nav-links .btn-nav-cta {
    margin-top: 16px;
    background: var(--navy);
    color: #ffffff;
    border: 1.5px solid var(--navy);
    padding: 9px 18px;
  }
  .nav-links .btn-nav-cta:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
  }
  .nav-toggle { display: block; }
  /* Scrim: full-viewport semi-transparent navy layer that mutes page content
     behind the open menu. Injected by site.js as a direct child of <body>, so
     it lives at the ROOT stacking context (not inside .site-nav).

     The scrim's z-index (65) only competes with other ROOT-level elements:
       - Page content (default z 0/auto): scrim ABOVE → muted. Correct.
       - .progress-bar (z 70): progress bar ABOVE scrim by 5 → acceptable;
         it's a 3px non-interactive sliver at the top edge.
       - .site-nav (z 80): nav layer ABOVE scrim by 15 → the entire nav layer
         (bar + dropdown contained within) paints clear, on top of the scrim.
         This is exactly the visual we want: scrim mutes the world; the nav +
         open dropdown read crisply on top.

     Pointer-events:auto in .active state intercepts clicks so a tap on the
     scrim closes the menu rather than activating a link beneath it.

     Visibility note: the closed state is BOTH `opacity: 0` AND
     `visibility: hidden`. The visibility transition is delayed 0.2s so the
     element stays painted (visible) through the opacity fade-out, then
     becomes structurally hidden at the end of the transition. Why this
     belt-and-suspenders: on iOS Safari, a `position: fixed; inset: 0`
     element with `opacity: 0` can leave a residual sub-pixel band at the
     viewport's bottom edge after a URL-bar height transition (the dynamic
     viewport changes the scrim's computed `bottom` mid-frame and the GPU-
     composited layer doesn't always invalidate cleanly). `visibility:
     hidden` forces the element out of the rendered layer tree at the
     end of close, so no compositor leak can survive past it. On open we
     flip visibility to visible immediately (no delay) so the opacity fade-
     in is visible. */
  .nav-scrim {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: 65;
  }
  .nav-scrim.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
}

/* ====================================================================
   BUTTONS
   ==================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 2px; border: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--navy); color: white;
  border: 1.5px solid var(--navy);
  padding: 10.5px 22.5px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 10.5px 22.5px; }
.btn-secondary:hover { background: var(--navy); color: white; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { opacity: 0.9; }
.btn-ghost-dark { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.4); padding: 10.5px 22.5px; }
.btn-ghost-dark:hover { background: white; color: var(--navy); border-color: white; }
.btn-sm { padding: 9px 18px; font-size: 12px; }

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
  background: var(--navy); position: relative;
  padding: 80px 0 72px;
}
.hero-inner {
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 32px;
  display: flex;
}
.hero-bar {
  width: 3px; background: var(--gold); flex-shrink: 0;
  margin-right: 36px; border-radius: 1px;
}
.hero-content { flex: 1; max-width: 720px; }
.hero-category {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.18; color: white; margin-bottom: 20px;
  max-width: 680px;
}
.hero-deck {
  font-family: var(--ff-body); font-size: 17px;
  color: rgba(255, 255, 255, 0.75); line-height: 1.6;
  margin-bottom: 36px; max-width: 540px;
}

/* Hero email signup */
.hero-signup { display: flex; max-width: 440px; }
.hero-signup input {
  flex: 1; padding: 12px 16px; min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white; font-family: var(--ff-body); font-size: 14px;
  outline: none; border-radius: 2px 0 0 2px;
}
.hero-signup input::placeholder { color: rgba(255, 255, 255, 0.4); }
.hero-signup input:focus { border-color: var(--gold); }
.hero-signup button {
  background: var(--gold); color: var(--navy); border: none;
  padding: 12px 20px; font-family: var(--ff-body); font-size: 12px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; border-radius: 0 2px 2px 0; cursor: pointer;
}
.hero-signup button:hover { opacity: 0.92; }
.hero-signup-note {
  font-size: 12px; color: rgba(255, 255, 255, 0.45);
  margin-top: 12px; max-width: 440px;
}

@media (max-width: 720px) {
  .hero { padding: 56px 0 56px; }
  .hero-inner { flex-direction: column; }
  .hero-bar { width: 100%; height: 3px; margin: 0 0 28px; max-width: 80px; }
  .hero-signup { flex-direction: column; gap: 8px; }
  .hero-signup input { border-radius: 2px; }
  .hero-signup button { border-radius: 2px; padding: 14px 20px; }
}

/* ====================================================================
   SECTION HEADERS
   ==================================================================== */
.section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
.section-label {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--ff-display); font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 400; color: var(--navy); margin-bottom: 40px;
  line-height: 1.25;
}
.section-rule { height: 1px; background: var(--border); }

/* ====================================================================
   ARTICLE CARD GRID
   ==================================================================== */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.card-grid-2 { grid-template-columns: 1fr 1fr; }
@media (min-width: 901px) {
  /* Featured-card pattern at 1024+ desktop (3-col grid): first card spans
     all three columns so the remaining 12 cards form a clean 4-row × 3-col
     grid. Mirror of the 2-col span pattern in the 900px max-width block
     below. Scoped to #article-grid only — the archive page — so related-
     articles grids on individual article pages (which also use .card-grid)
     are unaffected. Static for the current 13-card count; see audit-trail
     (grid-orphan-fix-extension-1024-2026-05-31.md) for the future-phases
     note on dynamic odd/mod-count handling required before article 14. */
  #article-grid.card-grid > :first-child { grid-column: span 3; }
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
  /* Featured-card pattern at iPad-portrait (768px) and other 2-col widths:
     first card spans both columns so the remaining 12 cards form a clean
     6-row × 2-col grid. Scoped to #article-grid only — the archive page —
     so related-articles grids on individual article pages (which also use
     .card-grid) are unaffected. Static for the current 13-card count; see
     audit-trail (grid-orphan-fix-extension-1024-2026-05-31.md) for the
     future-phases note on dynamic odd/mod-count handling required before
     article 14. */
  #article-grid.card-grid > :first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .card-grid, .card-grid-2 { grid-template-columns: 1fr; }
}

.article-card {
  background: white; padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: background 0.15s;
}
.article-card:hover { background: var(--surface); }
.article-card a { display: contents; }
.card-category {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.card-headline {
  font-family: var(--ff-display); font-size: 20px; font-weight: 400;
  line-height: 1.3; color: var(--navy); margin-bottom: 12px;
}
.card-deck {
  font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px;
  flex-grow: 1;
}
.card-meta { font-size: 12px; color: var(--muted); }
.card-meta-sep { margin: 0 8px; opacity: 0.5; }

/* Featured (larger) card */
.article-card-featured {
  padding: 48px 40px;
}
.article-card-featured .card-headline { font-size: 28px; line-height: 1.25; }
.article-card-featured .card-deck { font-size: 16px; }

/* ====================================================================
   ARTICLE PAGE
   ==================================================================== */
.article-header {
  padding: 72px 0 48px;
  background: white;
}
.article-header-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.article-category {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.article-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.15; color: var(--navy); margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.article-deck {
  font-family: var(--ff-body); font-size: 19px;
  color: var(--muted); line-height: 1.55; margin-bottom: 32px;
  max-width: 700px;
}
.article-byline {
  font-size: 13px; color: var(--muted); display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px;
}
.article-byline strong { color: var(--navy); font-weight: 500; }
.article-byline .sep { color: var(--muted-2); margin: 0 8px; }

.article-hero {
  max-width: var(--max-content); margin: 0 auto 56px; padding: 0 24px;
}
.article-hero img { width: 100%; border-radius: 0; }
.article-hero-placeholder {
  width: 100%; height: 360px; background: var(--navy); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.article-hero-placeholder::before {
  content: ''; position: absolute; left: 32px; top: 32px; bottom: 32px;
  width: 3px; background: var(--gold);
}

.article-body { max-width: var(--max-article); margin: 0 auto; padding: 0 24px 56px; }
.article-body p {
  font-family: var(--ff-body); font-size: 18px; line-height: 1.7;
  color: var(--navy); margin-bottom: 24px;
}
.article-body p:first-of-type::first-letter { /* No drop cap; clean reading surface */ }
.article-body h2 {
  font-family: var(--ff-display); font-size: 28px; font-weight: 300;
  line-height: 1.3; margin: 56px 0 20px;
}
.article-body h3 {
  font-family: var(--ff-display); font-size: 22px; font-weight: 300;
  line-height: 1.35; margin: 40px 0 16px;
}
.article-body ul, .article-body ol { margin: 0 0 24px 0; padding-left: 24px; }
.article-body li { font-size: 18px; line-height: 1.7; color: var(--navy); margin-bottom: 8px; }
.article-body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article-body a:hover { color: var(--gold); }
.article-body strong { font-weight: 600; }
.article-body em { font-style: italic; }
.article-body blockquote {
  display: flex; gap: 28px; margin: 40px 0;
}
.article-body blockquote::before {
  content: ''; width: 3px; background: var(--gold); flex-shrink: 0;
  border-radius: 1px;
}
.article-body blockquote p {
  font-family: var(--ff-display); font-size: 24px; font-weight: 300;
  font-style: italic; line-height: 1.45; color: var(--navy); margin: 0;
}
.article-body code {
  font-family: var(--ff-mono); font-size: 16px; background: var(--surface);
  padding: 2px 6px; border-radius: 2px;
}
.article-body table {
  width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15px;
}
.article-body table caption {
  caption-side: bottom; text-align: left; font-style: italic;
  color: var(--muted); padding-top: 10px; font-size: 13px; line-height: 1.45;
}
.article-body th, .article-body td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border);
}
.article-body th { font-weight: 600; color: var(--navy); background: var(--surface); }
.article-body td { color: var(--navy); }
/* Honor inline color/background set on parent <tr>, <thead>, or <tbody>.
   Direct color/background rules on <th>/<td> otherwise block inheritance
   from inline-styled parent rows. This restores cascade for those cases.
   Fixes WCAG-AA dark-row contrast defect identified 2026-06-01:
   .article-body td was overriding inline color:white on dark-navy summary
   rows, producing dark-navy text on dark-navy background (invisible). */
.article-body tr[style*="color"] > td,
.article-body tr[style*="color"] > th,
.article-body thead[style*="color"] > tr > th,
.article-body thead[style*="color"] > tr > td,
.article-body tbody[style*="color"] > tr > td,
.article-body tbody[style*="color"] > tr > th { color: inherit; }
.article-body tr[style*="background"] > td,
.article-body tr[style*="background"] > th,
.article-body thead[style*="background"] > tr > th,
.article-body thead[style*="background"] > tr > td,
.article-body tbody[style*="background"] > tr > td,
.article-body tbody[style*="background"] > tr > th { background: transparent; }

/* Figure captions and graph descriptions also go below their content */
.article-body figure { margin: 32px 0; }
.article-body figcaption {
  text-align: left; font-style: italic; color: var(--muted);
  padding-top: 10px; font-size: 13px; line-height: 1.45;
}
.article-body hr { border: none; height: 1px; background: var(--border); margin: 56px 0; }

/* Inline article signup */
.inline-signup {
  background: var(--surface); padding: 40px 32px;
  margin: 56px auto; max-width: var(--max-article);
  border-left: 3px solid var(--gold);
}
.inline-signup-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.inline-signup-title {
  font-family: var(--ff-display); font-size: 22px; font-weight: 400;
  line-height: 1.3; color: var(--navy); margin-bottom: 12px;
}
.inline-signup-deck { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.inline-signup form { display: flex; gap: 0; max-width: 440px; }
.inline-signup input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--border);
  font-family: var(--ff-body); font-size: 14px; outline: none;
  border-radius: 2px 0 0 2px; min-width: 0;
}
.inline-signup input:focus { border-color: var(--navy); }
.inline-signup button {
  background: var(--navy); color: white; border: none; padding: 11px 18px;
  font-family: var(--ff-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  border-radius: 0 2px 2px 0; white-space: nowrap;
}
.inline-signup button:hover { opacity: 0.88; }
@media (max-width: 600px) {
  .inline-signup form { flex-direction: column; gap: 8px; }
  .inline-signup input, .inline-signup button { border-radius: 2px; padding: 13px 16px; }
}

/* Author block */
.author-block {
  background: var(--surface); padding: 32px;
  display: flex; gap: 24px; align-items: flex-start;
  max-width: var(--max-article); margin: 40px auto;
}
.author-photo {
  width: 80px; height: 80px; background: var(--navy);
  border-radius: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.author-photo span { font-family: var(--ff-display); font-size: 28px; color: white; }
.author-name { font-family: var(--ff-display); font-size: 20px; font-weight: 400; color: var(--navy); margin-bottom: 8px; }
.author-bio { font-size: 14px; color: var(--muted); line-height: 1.65; }
.author-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }

/* Related articles */
.related-articles { background: var(--surface); padding: 64px 0; }
.related-articles .section-label { text-align: center; }
.related-articles .section-title { text-align: center; font-size: 28px; }

/* ====================================================================
   ARTICLE INDEX
   ==================================================================== */
.archive-header {
  padding: 80px 0 48px; background: white;
}
.archive-title { font-family: var(--ff-display); font-size: clamp(34px, 5vw, 48px); font-weight: 300; margin-bottom: 12px; }
.archive-subtitle { font-size: 16px; color: var(--muted); max-width: 640px; }
.archive-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 0;
}
.filter-chip {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border: 1.5px solid var(--border);
  background: white; color: var(--navy); cursor: pointer;
  border-radius: 2px; transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--navy); }
.filter-chip.active { background: var(--navy); border-color: var(--navy); color: var(--gold); }

/* ====================================================================
   ABOUT & NEWSLETTER PAGES
   ==================================================================== */
.page-hero { padding: 96px 0 56px; }
.page-hero h1 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(36px, 5vw, 52px); margin-bottom: 24px; line-height: 1.15; }
.page-hero .deck { font-size: 19px; color: var(--muted); line-height: 1.6; max-width: 680px; }

/* About-page typographic hero (replaces the old .about-portrait initials block).
   Base block is mobile-first at 375px; breakpoints follow below. */
.page-hero.about-hero {
  padding: 56px 0 32px;
}
.about-hero-inner {
  max-width: 720px;
}
.about-hero-kicker {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  line-height: 1;
}
.about-hero-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 24px 0;
}
.about-hero-deck {
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 32px 0;
  max-width: 60ch;
}
.about-hero-rule {
  border: 0;
  border-top: 1px solid var(--gold);
  width: 64px;
  margin: 0;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .page-hero.about-hero {
    padding: 80px 0 40px;
  }
  .about-hero-title {
    font-size: 48px;
    letter-spacing: -0.015em;
  }
  .about-hero-deck {
    font-size: 19px;
    line-height: 1.6;
  }
  .about-hero-rule {
    width: 80px;
  }
}

@media (min-width: 1280px) {
  .page-hero.about-hero {
    padding: 104px 0 48px;
  }
  .about-hero-inner {
    max-width: 760px;
  }
  .about-hero-title {
    font-size: 56px;
    letter-spacing: -0.02em;
  }
  .about-hero-kicker {
    margin-bottom: 24px;
  }
  .about-hero-rule {
    width: 96px;
  }
}

/* .about-body: section padding promoted from inline style (Vera Nit 1 from
   about-hero gate). Top padding (24px) is the gap between the hero rule and
   the byline label; bottom padding (80px) closes the long-form section before
   the navy newsletter band. */
.about-body { max-width: var(--max-article); margin: 0 auto; padding: 24px 24px 80px; }
.about-body p { font-size: 19px; line-height: 1.7; margin-bottom: 24px; color: var(--navy); }
.about-pullquote { display: flex; gap: 28px; margin: 48px 0; }
.about-pullquote::before { content: ''; width: 3px; background: var(--gold); border-radius: 1px; flex-shrink: 0; }
.about-pullquote p { font-family: var(--ff-display); font-size: 26px; font-weight: 300; font-style: italic; line-height: 1.4; color: var(--navy); margin: 0; }

/* Inline-style absorption — Vera Nit 2 from about-hero gate. The original
   markup carried six inline style attributes on .about-body children; lifting
   them to CSS classes keeps the rhythm set in one place and matches the
   class-styled cleanliness of the new byline block. Values match the prior
   inline declarations verbatim — no visual change. */
.about-pullquote-caption {
  font-size: 14px;
  color: var(--muted);
  margin-top: -32px;
  margin-bottom: 32px;
  font-style: italic;
}
.about-section-heading {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 300;
  margin: 48px 0 16px;
}
.about-body a.about-link {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.about-body p.about-link-row {
  margin-top: 0;
}
.about-body p.about-closing {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gold);
}

/* About-page author byline (sits at the top of .about-body, just under the
   typographic hero, framing the long-form copy as Andrew's own writing). */
.about-byline {
  margin: 0 0 40px 0;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--gold);
}
.about-byline-label {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  line-height: 1;
}
.about-byline-name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 12px;
}
.about-byline-bio {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}
@media (min-width: 768px) {
  .about-byline-name {
    font-size: 28px;
  }
  .about-byline-bio {
    font-size: 16px;
  }
}

/* Newsletter page lead magnet */
.lead-magnet-hero {
  background: var(--navy); padding: 88px 0 80px;
}
.lead-magnet-inner {
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center;
}
.lm-preview {
  background: var(--surface); aspect-ratio: 3/4;
  display: flex; flex-direction: column; padding: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.lm-preview::before {
  content: ''; position: absolute; left: 24px; top: 32px; bottom: 32px;
  width: 3px; background: var(--gold);
}
.lm-preview-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
  margin-left: 18px;
}
.lm-preview-title {
  font-family: var(--ff-display); font-size: 26px; font-weight: 400;
  line-height: 1.2; color: var(--navy); margin-left: 18px;
}
.lm-preview-list { margin-left: 18px; margin-top: 24px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.lm-content h1 { font-family: var(--ff-display); font-size: clamp(32px, 4.5vw, 44px); font-weight: 400; color: white; line-height: 1.18; margin-bottom: 20px; }
.lm-content .deck { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 32px; }
.lm-content .what-you-get { margin: 24px 0 32px; }
.lm-content .what-you-get-item { font-size: 14px; color: rgba(255,255,255,0.75); padding: 4px 0; }
.lm-content .what-you-get-item::before { content: '— '; color: var(--gold); }
.lm-form { display: flex; max-width: 460px; }
.lm-form input { flex: 1; padding: 14px 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; font-family: var(--ff-body); font-size: 15px; outline: none; border-radius: 2px 0 0 2px; min-width: 0; }
.lm-form input::placeholder { color: rgba(255,255,255,0.4); }
.lm-form button { background: var(--gold); color: var(--navy); border: none; padding: 14px 24px; font-family: var(--ff-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border-radius: 0 2px 2px 0; white-space: nowrap; }
.lm-form-note { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 12px; }
@media (max-width: 900px) {
  .lead-magnet-inner { grid-template-columns: 1fr; gap: 40px; }
  .lm-preview { max-width: 320px; }
  .lm-form { flex-direction: column; gap: 8px; }
  .lm-form input, .lm-form button { border-radius: 2px; }
}

/* ====================================================================
   LEGAL PAGES
   ==================================================================== */
.legal-page { padding: 80px 0; }
.legal-page h1 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(34px, 5vw, 44px); margin-bottom: 16px; }
.legal-page .updated { font-size: 13px; color: var(--muted); margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.legal-page h2 { font-family: var(--ff-display); font-size: 24px; font-weight: 400; margin: 40px 0 16px; }
.legal-page h3 { font-family: var(--ff-body); font-size: 16px; font-weight: 600; margin: 28px 0 12px; color: var(--navy); }
.legal-page p { font-size: 16px; line-height: 1.7; color: var(--navy); margin-bottom: 16px; }
.legal-page ul { margin: 0 0 20px 24px; }
.legal-page li { font-size: 16px; line-height: 1.7; margin-bottom: 6px; }
.legal-page a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.site-footer {
  background: var(--navy); color: rgba(255, 255, 255, 0.7);
  padding: 72px 0 40px; margin-top: 0;
}
.footer-inner {
  max-width: var(--max-content); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px;
}
.footer-brand { display: flex; align-items: flex-start; margin-bottom: 24px; }
.footer-brand img.footer-logo { display: block; height: 44px; width: auto; }
/* Legacy footer-brand markup retained for any page still using it */
.footer-brand-bar { width: 3px; height: 32px; background: var(--gold); border-radius: 1px; flex-shrink: 0; margin-right: 12px; }
.footer-brand-text .the { font-family: var(--ff-display); font-size: 8px; text-transform: uppercase; letter-spacing: 0.35em; color: rgba(255,255,255,0.5); line-height: 1.3; }
.footer-brand-text .name { font-family: var(--ff-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; color: white; line-height: 1.3; font-weight: 400; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.65; max-width: 320px; margin-bottom: 24px; }
.footer-col h4 {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.15s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: var(--max-content); margin: 56px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.footer-disclaimer { max-width: 720px; margin: 24px auto 0; padding: 0 32px; font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.7; text-align: center; }
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 500px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ====================================================================
   COOKIE CONSENT BANNER
   ==================================================================== */
.consent-banner {
  position: fixed; bottom: 24px; right: 24px;
  max-width: 380px; z-index: 9999;
  background: var(--navy); color: white;
  padding: 24px 28px;
  border-left: 3px solid var(--gold);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  font-family: var(--ff-body);
  transform: translateY(120%); transition: transform 0.4s ease;
}
.consent-banner.visible { transform: translateY(0); }
.consent-banner h3 {
  font-family: var(--ff-display); font-size: 18px; font-weight: 400;
  color: white; margin-bottom: 10px;
}
.consent-banner p {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.7); margin-bottom: 18px;
}
.consent-banner p a { color: var(--gold); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; }
.consent-actions button {
  font-family: var(--ff-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px; border: none; cursor: pointer;
  border-radius: 2px;
}
.consent-accept { background: var(--gold); color: var(--navy); }
.consent-reject { background: transparent; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.2); }
.consent-reject:hover { color: white; border-color: white; }
@media (max-width: 500px) {
  .consent-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ====================================================================
   404 / Utility
   ==================================================================== */
.error-page { padding: 120px 0; text-align: center; }
.error-page .code { font-family: var(--ff-display); font-size: 96px; font-weight: 300; color: var(--gold); margin-bottom: 16px; line-height: 1; }
.error-page h1 { font-family: var(--ff-display); font-size: 36px; font-weight: 400; margin-bottom: 16px; }
.error-page p { font-size: 17px; color: var(--muted); max-width: 480px; margin: 0 auto 32px; line-height: 1.65; }

/* ─── Utility ─── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.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;
}
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--navy); color: white; padding: 8px 16px;
  text-decoration: none; z-index: 100; border-radius: 2px;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* Focus states */
:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Selection */
::selection { background: var(--gold); color: var(--navy); }

/* ====================================================================
   V2 — SIDEBAR LAYOUT
   ==================================================================== */
.layout-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 300px; gap: 64px;
}
.layout-main { min-width: 0; }
.layout-aside { min-width: 0; }

@media (max-width: 1000px) {
  .layout-grid { grid-template-columns: 1fr; gap: 56px; padding: 0 24px; }
  .layout-aside { border-top: 1px solid var(--border); padding-top: 56px; }
}

/* ─── Sidebar components ─── */
.sb-block { margin-bottom: 40px; }
.sb-block:last-child { margin-bottom: 0; }
.sb-header {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

/* Author card */
.sb-author {
  display: flex; gap: 14px; align-items: flex-start;
}
.sb-author-photo {
  width: 56px; height: 56px; background: var(--navy);
  border-radius: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.sb-author-photo::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 2px; background: var(--gold);
}
.sb-author-photo span {
  font-family: var(--ff-display); font-size: 16px; color: white;
  position: relative; padding-left: 4px;
}
.sb-author-name {
  font-family: var(--ff-display); font-size: 17px; font-weight: 400;
  color: var(--navy); line-height: 1.3; margin-bottom: 4px;
}
.sb-author-bio {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  margin-bottom: 8px;
}
.sb-author-link {
  font-size: 12px; color: var(--navy); text-decoration: underline;
  text-decoration-color: var(--gold); text-underline-offset: 3px;
}

/* Sidebar About block (trust-building tail of Option A reorder). Restrained
   typographic treatment so it doesn't compete with the signup CTA above;
   sits at the bottom of the sidebar as a quiet publication-context cue for
   readers who scanned to the end. */
.sb-about-text {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin-bottom: 10px;
}
.sb-about-link {
  font-size: 12px; color: var(--navy); text-decoration: underline;
  text-decoration-color: var(--gold); text-underline-offset: 3px;
}
.sb-about-link:hover { color: var(--gold); }

/* Sidebar newsletter signup */
.sb-signup {
  background: var(--surface); padding: 24px 20px;
  border-left: 3px solid var(--gold);
}
.sb-signup-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.sb-signup-title {
  font-family: var(--ff-display); font-size: 18px; font-weight: 400;
  line-height: 1.3; color: var(--navy); margin-bottom: 8px;
}
.sb-signup-deck {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 14px;
}
.sb-signup-form { display: flex; flex-direction: column; gap: 8px; }
.sb-signup-form input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  font-family: var(--ff-body); font-size: 13px; outline: none;
  border-radius: 2px; background: white;
}
.sb-signup-form input:focus { border-color: var(--navy); }
.sb-signup-form button {
  background: var(--navy); color: white; border: none; padding: 11px 16px;
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px;
}
.sb-signup-form button:hover { opacity: 0.9; }
.sb-signup-note { font-size: 10px; color: var(--muted-2); margin-top: 8px; line-height: 1.5; }

/* Sidebar search */
.sb-search { position: relative; }
.sb-search input {
  width: 100%; padding: 11px 12px 11px 36px;
  border: 1px solid var(--border);
  font-family: var(--ff-body); font-size: 13px; outline: none;
  border-radius: 2px; background: white;
}
.sb-search input:focus { border-color: var(--navy); }
.sb-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted-2); pointer-events: none;
}

/* Sidebar categories */
.sb-cats { list-style: none; padding: 0; margin: 0; }
.sb-cats li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.sb-cats li:last-child { border-bottom: none; }
.sb-cats a { font-size: 13px; color: var(--navy); flex: 1; }
.sb-cats a:hover { color: var(--gold); }
.sb-cats .count {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Sidebar recent posts */
.sb-recent { list-style: none; padding: 0; margin: 0; }
.sb-recent li {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.sb-recent li:last-child { border-bottom: none; }
.sb-recent .cat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.sb-recent .ttl {
  font-family: var(--ff-display); font-size: 15px; font-weight: 400;
  color: var(--navy); line-height: 1.3; margin-bottom: 4px;
}
.sb-recent .ttl:hover { color: var(--gold); }
.sb-recent .dt { font-size: 11px; color: var(--muted); }

/* ─── Sidebar Related Articles (dynamic, by category) ─── */
/* Inserted by site.js renderSidebarRelated() — matches .sb-recent visual rhythm. */
.sb-related-list { list-style: none; padding: 0; margin: 0; }
.sb-related-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.sb-related-item:last-child { border-bottom: none; }
.sb-related-item a { display: block; }
.sb-related-category {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.sb-related-title {
  font-family: var(--ff-display); font-size: 15px; font-weight: 400;
  color: var(--navy); line-height: 1.3;
}
.sb-related-item a:hover .sb-related-title { color: var(--gold); }

/* ─── Sidebar "About this publication" anchor ─── */
.sidebar-about-deck {
  font-family: var(--ff-body); font-size: 13px; line-height: 1.5;
  color: var(--navy); margin: 0 0 12px;
}
.sidebar-about-link {
  font-family: var(--ff-ui); font-size: 12px; font-weight: 600;
  color: var(--gold); text-decoration: none;
  letter-spacing: 0.02em;
}
.sidebar-about-link:hover { color: var(--navy); }

/* ─── Sidebar Recommended block (affiliate inventory — currently disabled) ─── */
/* Inserted by site.js from recommendations.json. Matches .sb-block spacing.
   Renders up to maxVisible items. Placeholder URLs render as non-clickable .recommended-link-placeholder. */
.sidebar-recommended { /* inherits .sb-block margin-bottom */ }
.sidebar-recommended .sidebar-block-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-recommended .sidebar-block-title {
  /* .sb-header already provides the gold uppercase eyebrow treatment */
  margin-bottom: 6px;
  padding-bottom: 0;
  border-bottom: none;
}
.sidebar-block-disclosure {
  font-family: var(--ff-body);
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.recommended-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recommended-item {
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.recommended-item:last-child { border-bottom: none; }
.recommended-link,
.recommended-link-placeholder {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  text-decoration: none;
  color: var(--navy);
  transition: background 0.15s ease, padding 0.15s ease;
  border-radius: 2px;
}
.recommended-link:hover {
  background: var(--surface);
  padding-left: 8px;
  padding-right: 8px;
}
.recommended-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.recommended-link-placeholder { cursor: default; opacity: 0.72; }
.recommended-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recommended-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.recommended-logo-fallback {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
}
.recommended-content { min-width: 0; flex: 1; }
.recommended-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 4px;
}
.recommended-link:hover .recommended-name { color: var(--gold); }
.recommended-tagline {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 4px;
}
.recommended-category {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.recommended-coming-soon {
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Sidebar social */
.sb-social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sb-social a {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--navy);
  border-radius: 2px; transition: all 0.15s;
}
.sb-social a:hover { background: var(--navy); color: var(--gold); }
.sb-social svg { width: 16px; height: 16px; fill: currentColor; }

/* ====================================================================
   V2 — HOMEPAGE: BY CATEGORY SECTIONS
   ==================================================================== */
.cat-section { margin-bottom: 64px; }
.cat-section:last-child { margin-bottom: 0; }
.cat-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px; margin-bottom: 28px;
}
.cat-section-title {
  font-family: var(--ff-display); font-size: 24px; font-weight: 400;
  color: var(--navy);
}
.cat-section-link {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
}
.cat-section-link:hover { text-decoration: underline; }

.cat-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 32px;
}
.cat-feature {
  display: flex; flex-direction: column;
}
.cat-feature-cat {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.cat-feature-title {
  font-family: var(--ff-display); font-size: 26px; font-weight: 400;
  line-height: 1.22; color: var(--navy); margin-bottom: 12px;
}
.cat-feature-title:hover { color: var(--gold); }
.cat-feature-deck {
  font-size: 14px; color: var(--muted); line-height: 1.6;
  margin-bottom: 14px;
}
.cat-feature-meta { font-size: 12px; color: var(--muted); margin-top: auto; }

.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-list li {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.cat-list li:first-child { padding-top: 0; }
.cat-list li:last-child { border-bottom: none; }
.cat-list .ttl {
  font-family: var(--ff-display); font-size: 15px; font-weight: 400;
  color: var(--navy); line-height: 1.3; margin-bottom: 4px; display: block;
}
.cat-list .ttl:hover { color: var(--gold); }
.cat-list .dt { font-size: 11px; color: var(--muted); }

@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ====================================================================
   V2 — LATEST GRID (homepage)
   ==================================================================== */
.latest-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); margin-bottom: 64px;
}
.latest-card {
  background: white; padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: background 0.15s;
}
.latest-card:hover { background: var(--surface); }
.latest-card a { display: contents; }
.latest-card .cat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.latest-card .ttl {
  font-family: var(--ff-display); font-size: 19px; font-weight: 400;
  line-height: 1.3; color: var(--navy); margin-bottom: 10px;
}
.latest-card .deck {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin-bottom: 16px; flex-grow: 1;
}
.latest-card .meta { font-size: 11px; color: var(--muted); }

@media (max-width: 700px) {
  .latest-grid { grid-template-columns: 1fr; }
}

/* First card is featured (2-col span) */
.latest-grid .latest-card-feature {
  grid-column: 1 / -1;
  padding: 40px 32px;
  background: var(--navy);
  color: white;
  position: relative;
}
.latest-grid .latest-card-feature::before {
  content: ''; position: absolute; left: 16px; top: 32px; bottom: 32px;
  width: 3px; background: var(--gold);
}
.latest-grid .latest-card-feature .cat { color: var(--gold); margin-left: 20px; }
.latest-grid .latest-card-feature .ttl { color: white; font-size: 28px; line-height: 1.2; margin-left: 20px; max-width: 600px; }
.latest-grid .latest-card-feature .deck { color: rgba(255,255,255,0.72); margin-left: 20px; font-size: 14px; max-width: 580px; }
.latest-grid .latest-card-feature .meta { color: rgba(255,255,255,0.5); margin-left: 20px; }
.latest-grid .latest-card-feature:hover { background: var(--navy); }

/* ====================================================================
   V2 — NAV SEARCH ICON
   ==================================================================== */
.nav-search-btn {
  background: none; border: none; padding: 8px; margin-right: -8px;
  color: rgba(255, 255, 255, 0.85); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.nav-search-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-search-btn:hover { color: var(--gold); }

/* Search modal */
.search-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 96px;
}
.search-modal.open { display: flex; }
.search-modal-box {
  width: 100%; max-width: 640px; background: white;
  padding: 32px; border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
  margin: 0 24px;
}
.search-modal-input {
  width: 100%; padding: 12px 0;
  font-family: var(--ff-display); font-size: 28px; font-weight: 300;
  border: none; border-bottom: 2px solid var(--navy); outline: none;
  color: var(--navy); background: transparent;
}
.search-modal-input::placeholder { color: var(--muted-2); font-style: italic; }
.search-results { margin-top: 24px; max-height: 60vh; overflow-y: auto; }
.search-result {
  display: block; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.search-result:hover { background: var(--surface); margin: 0 -16px; padding: 16px; }
.search-result .cat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px;
}
.search-result .ttl {
  font-family: var(--ff-display); font-size: 17px; font-weight: 400;
  color: var(--navy); line-height: 1.3;
}
.search-empty {
  padding: 40px 0; text-align: center; color: var(--muted);
  font-size: 14px;
}
.search-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; padding: 12px; color: rgba(255,255,255,0.7);
  cursor: pointer; font-size: 14px;
}
.search-close:hover { color: white; }

/* ====================================================================
   V2 — READING PROGRESS BAR
   ==================================================================== */
/* Position: anchored to the bottom edge of the sticky .site-nav (top:
   var(--nav-height)) rather than top:0. The prior top:0 placement painted a
   gold 3px sliver across the top edge of the nav bar and relied on z-index
   70 > nav's 60 to win. The 2026-05-31 stacking-context audit raised .site-nav
   to z-80 (to paint above .nav-scrim z-65), which would have buried a top:0
   progress bar UNDER the nav and made it invisible. Anchoring below the nav
   instead keeps the bar always visible, makes it visually attached to the
   nav's bottom edge (cleaner read), and removes the z-index race entirely.
   When the mobile menu is open, the dropdown panel (inside the nav stacking
   context) covers the bar — desirable; reading progress is not relevant while
   navigating. */
.progress-bar {
  position: fixed; top: var(--nav-height); left: 0; height: 3px;
  background: var(--gold); z-index: 70;
  width: 0; transition: width 0.05s linear;
}

/* ====================================================================
   V2 — TABLE OF CONTENTS
   ==================================================================== */
.toc {
  background: var(--surface); padding: 24px 28px;
  border-left: 3px solid var(--gold);
  max-width: var(--max-article); margin: 0 auto 40px;
}
.toc-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { padding: 4px 0; }
.toc a {
  font-size: 14px; color: var(--navy); line-height: 1.5;
  display: inline-block; padding: 2px 0;
}
.toc a:hover { color: var(--gold); }
.toc li.toc-sub a { padding-left: 16px; font-size: 13px; color: var(--muted); }

/* ====================================================================
   V2 — SHARE ROW
   ==================================================================== */
.share-row {
  max-width: var(--max-article); margin: 56px auto 24px;
  padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.share-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
.share-links { display: flex; gap: 16px; }
.share-links a {
  font-size: 13px; color: var(--navy);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 2px;
  transition: all 0.15s;
}
.share-links a:hover { background: var(--navy); color: white; border-color: var(--navy); }
.share-links svg { width: 14px; height: 14px; fill: currentColor; }

/* ====================================================================
   V2 — FOOTER SOCIAL ICONS
   ==================================================================== */
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
  border-radius: 2px; transition: all 0.15s;
}
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* ====================================================================
   V2 — ARTICLE BODY (with sidebar variant)
   ==================================================================== */
.article-with-sidebar {
  max-width: 1200px; margin: 0 auto; padding: 0 32px 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px;
}
.article-with-sidebar > .article-main { min-width: 0; }
.article-with-sidebar > .article-main .article-body {
  max-width: var(--max-article); margin: 0; padding: 0;
}
.article-with-sidebar > .article-main .inline-signup,
.article-with-sidebar > .article-main .author-block,
.article-with-sidebar > .article-main .share-row,
.article-with-sidebar > .article-main .toc {
  max-width: var(--max-article); margin-left: 0; margin-right: 0;
}

@media (max-width: 1000px) {
  .article-with-sidebar { grid-template-columns: 1fr; gap: 56px; padding: 0 24px 64px; }
  .article-with-sidebar > .article-main .article-body,
  .article-with-sidebar > .article-main .inline-signup,
  .article-with-sidebar > .article-main .author-block,
  .article-with-sidebar > .article-main .share-row,
  .article-with-sidebar > .article-main .toc { max-width: var(--max-article); margin-left: auto; margin-right: auto; }
}

/* Make sidebar sticky on large screens for article reading */
@media (min-width: 1001px) {
  .article-sidebar { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 8px; }
  .article-sidebar::-webkit-scrollbar { width: 6px; }
  .article-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
}

/* ====================================================================
   BOTTOM LINE — "The Hybrid Earner Take" signature closing
   Locked treatment per Brand/bottom-line-signature-v2.md (2026-05-18)
   ==================================================================== */
.bottom-line {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  padding: 32px 28px;
  margin: 48px 0 32px;
  max-width: var(--max-article);
  position: relative;
}
.bottom-line::before {
  content: "";
  display: block;
  width: 80px;
  border-top: 1px solid var(--gold);
  margin-bottom: 20px;
}
.bottom-line-label {
  display: block;
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 16px 0;
  text-transform: none;
}
.bottom-line-body {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--navy-80);
}
.bottom-line-body p { margin: 0 0 12px; line-height: 1.6; }
.bottom-line-body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .bottom-line {
    border-left-width: 1px;
    padding: 24px 20px;
    margin: 40px 0 24px;
  }
  .bottom-line::before { width: 64px; margin-bottom: 16px; }
  .bottom-line-label { font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
  .bottom-line-body { font-size: 17.5px; }
}

/* ====================================================================
   AFFILIATE DISCLOSURE BANNER
   Rendered only on articles whose body contains affiliate links.
   Insertion point: top of .article-main, above .toc — satisfies the
   "top of the article" promise in /disclaimer.html#affiliate-disclosure
   without interrupting the title/hero editorial moment. The banner is
   a utility band (body font, not display) deliberately quieter than
   .bottom-line so it reads as disclosure, not editorial.
   ==================================================================== */
.affiliate-banner {
  background: var(--cream, #F8F4ED);
  border-left: 1px solid var(--gold, #c4a265);
  padding: 14px 20px;
  margin: 0 0 32px 0;
  max-width: var(--max-article);
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy-80, #2C3A4E);
}
.affiliate-banner-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #c4a265);
  margin-bottom: 6px;
}
.affiliate-banner p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy-80, #2C3A4E);
}
.affiliate-banner a {
  color: var(--navy, #0E1B2C);
  text-decoration: underline;
  text-decoration-color: var(--gold, #c4a265);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.affiliate-banner a:hover { color: var(--gold, #c4a265); }

@media (max-width: 700px) {
  .affiliate-banner {
    padding: 12px 16px;
    margin-bottom: 28px;
    font-size: 14px;
  }
  .affiliate-banner p { font-size: 14px; }
}