/* ============================================================
   dayone — shared stylesheet
   ============================================================
   IndigoPress reference design. All pages in the site share this
   one file — re-skinning a fork is mostly an exercise in
   overriding the design tokens in §1 below.

   Token override paths, in order of increasing friction:
     1. design.json → "palette" / "typography" keys.
        The builder emits a <style>:root { … }</style> block
        that wins via cascade order. See README.md.
     2. Edit the :root block directly in this file.
     3. Fork style.css wholesale for a bespoke look.

   Used by every page the builder emits: index.html, article.html,
   page.html, search/, author/, 404/.
   ============================================================ */


/* ============================================================
   1. Design tokens
   ============================================================
   DayOne is a blue-palette editorial skin. Colour lives in two
   layers: the semantic tokens a component uses (--bg, --ink,
   --accent, …) and the two brand shades used only by the
   IndigoPress wordmark (--brand-a, --brand-b). The dark-mode
   block at §99 redefines the same tokens, so every component
   inherits the new palette without per-rule edits.
   ============================================================ */
:root, [data-theme="light"] {
  /* Surface */
  --bg:          #FFFFFF;
  --bg-alt:      #F9F7F5;
  --rule:        #D9D1C8;

  /* Ink */
  --ink:         #0f0e0c;   /* almost black with brown lean */
  --ink-muted:   #3a3530;   /* dark brownish gray */

  /* Accent — links, kickers, hover */
  --accent-hot:  #7A3E1F;   /* darker brown */

  /* Wordmark — the two shades used for "Blue" / "Press".
     Blue is the darker of the pair, Press is the brighter. */
  --brand-a:     #8B4513;   /* warm brown */
  --brand-b:     #A0522D;   /* sienna brown */

  /* Inverse block — newsletter widget etc. Kept as dedicated
     tokens so the block can change shape in dark mode without
     each rule caring. */
  --inverse-bg:  #2a2420;
  --inverse-ink: #F9F7F5;

  /* Type — OrbitDigest editorial set.

     Four serif voices and one sans, doing strictly different jobs:
       --font-masthead   Cinzel — masthead wordmark only.
                         Trajan-inspired inscriptional caps; no
                         lowercase glyphs by design. Renders the
                         publication name as if it were carved.
                         Use at 600 weight; 500 is too thin for
                         the wordmark to hold the page, 700 is
                         imposing in a way the brief actively
                         pushes back on.
       --font-display    Cormorant Garamond — article headlines,
                         deks, section h2/h3 inside articles.
                         Designed at weight 500; bumping to 600/700
                         is available when a piece needs more bite.
       --font-body       Source Serif 4 — running text, deks, post
                         body. Wider counters than Cormorant so it
                         doesn't fatigue at length.
       --font-smallcaps  Cormorant SC — editorial chrome:
                         section nav, breadcrumbs, kickers,
                         bylines, sponsored/ad disclosures,
                         table-of-contents, footer, legal-page
                         meta. Inscriptional feel without
                         shouting in ALL CAPS — matches the
                         brief ("timeless, authoritative, with
                         a whiff of ancient stonework").
       --font-sans       Inter — strictly interactive UI
                         (forms, buttons, theme toggle, comment
                         widget, newsletter signup, spoiler
                         summaries). Small caps don't read at
                         input-field sizes. The split rule:
                         "things you click and type into" use
                         sans; "things that label and frame
                         editorial content" use small caps.

     Two derived tokens save us from sprinkling magic values across
     every kicker rule:
       --font-display-weight  Default editorial weight for serif
                              headlines. Cormorant reads thin at
                              700; 500 is the editorial sweet spot.
       --tracking-smallcaps   Letter-spacing for small-caps labels.
                              Wider than the upper-case sans
                              tracking we used to use, so the
                              inscriptional rhythm comes through. */
  --font-masthead:       'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display:        'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:           'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-smallcaps:      'Cormorant SC', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display-weight: 500;
  --tracking-smallcaps:  0.14em;

  /* Layout */
  --max-width: 1280px;
  --gutter:    1.25rem;

  /* Font sizes — all font-size declarations in this file reference these tokens. */
  --fs-11: 0.91rem;
  --fs-12: 1.0rem;
  --fs-12-48: 1.04rem;
  --fs-12-5: 1.04rem;
  --fs-13: 1.08rem;
  --fs-14: 1.0rem;
  --fs-14-4: 1.0rem;
  --fs-15: 1.0rem;
  --fs-15-2: 1.1rem;
  --fs-16: 1.2rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-19: 1.1875rem;
  --fs-20: 1.25rem;
  --fs-21: 1.3125rem;
  --fs-22: 1.375rem;
  --fs-23: 1.4375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-72: 4.5rem;

  --fs-em-85: 1.13em;
  --fs-em-87-5: 1.16em;
  --fs-em-90: 1.20em;
  --fs-em-115: 1.15em;

  --fs-14px: 14px;
  --fs-16px: 16px;

  --fs-11pt: 11pt;

  --fs-pct-90: 120%;

  --fs-fluid-1: clamp(2.25rem, 6vw, 3.5rem);
  --fs-fluid-2: clamp(1.5rem, 4.5vw, 3rem);
  --fs-fluid-3: clamp(2rem, 4.5vw, 3rem);
  --fs-fluid-4: clamp(2.25rem, 5.5vw, 3.25rem);
  --fs-fluid-5: clamp(2rem, 4.75vw, 3.375rem);
}


/* ============================================================
   2. Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-16px);
  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; }
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Skip-to-content: visually off-screen until it receives keyboard
   focus, at which point it slides into view. A sighted keyboard
   user gets an escape hatch past the masthead + nav, screen
   readers get it as the first link in document order. */
.skip-link {
  position: absolute;
  top: -44px;
  left: 0;
  z-index: 10000;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-14px);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent-hot);
  outline-offset: 2px;
}


/* ============================================================
   3. Layout container
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============================================================
   4. Masthead
   ============================================================ */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.25rem;
}
.masthead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.masthead-meta {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;     /* fallback when Cormorant SC fails to load */
  font-size: 1.15625rem;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
}
.masthead-title {
  /* Cinzel is a Trajan-inspired inscriptional all-caps face —
     no lowercase glyphs by design. The wordmark renders as
     "ORBIT DIGEST" regardless of input casing, which is exactly
     the "ancient stonework, timeless authority" register the
     brief asks for. Slight positive tracking gives the carved-
     stone rhythm; -0.005em (the previous setting) was tightening
     for Cormorant's narrow forms and would crowd Cinzel. */
  font-family: var(--font-masthead);
  font-weight: 600;
  font-size: clamp(3.0875rem, 8.0vw, 4.525rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin: 0;
}
.masthead-title a { color: inherit; text-decoration: none; }

/* Theme toggle — pinned to the top-right of the viewport.
   Fixed (not absolute) for two reasons: it stays reachable
   as the reader scrolls, and it never collides with the
   masthead's flex layout regardless of viewport width. */
.theme-toggle {
  position: fixed;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(11, 30, 63, 0.06);
}
.theme-toggle:hover {
  color: var(--accent-hot);
  border-color: var(--accent-hot);
  background: var(--bg-alt);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 2px;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


/* ============================================================
   5. Section navigation
   ============================================================ */
.section-nav {
  border-bottom: 1px solid var(--rule);
}
.section-nav-inner {
  display: flex;
  gap: 1.5rem;
  padding-block: 0.85rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Cormorant SC for inscriptional, timeless register —
     matches the editorial set rather than fighting it with Inter. */
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: var(--tracking-smallcaps);
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav-inner a {
  white-space: nowrap;
  padding-block: 0.25rem;
  transition: color 150ms ease;
}
.section-nav-inner a.is-active { color: var(--accent-hot); }
.section-nav-inner a:hover { color: var(--accent-hot); text-decoration: none; }


/* ============================================================
   5b. Breadcrumbs
   Separator is drawn via CSS ::before on each non-first <li>
   so it doesn't end up in screen-reader output. Kept subdued
   so it reads as orientation, not as a headline element. */
.breadcrumbs {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  color: var(--ink-muted);
  font-weight: 700;
  margin-block: 1.25rem 0.5rem;
  letter-spacing: var(--tracking-smallcaps);
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbs li {
  display: inline;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 0.5em;
  color: var(--rule);
}
.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--accent-hot);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: var(--ink);
}


/* ============================================================
   5c. Table of contents (long articles only — injected when
   the article crosses the word-count threshold in INGP_Builder).
   ============================================================ */
.toc {
  border-left: 3px solid var(--accent-hot);
  background: var(--bg-alt);
  padding: 1rem 1.25rem;
  margin-block: 1.75rem 2rem;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
}
.toc-title {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}
.toc ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}
.toc ol ol {
  list-style: lower-alpha;
  margin-block: 0.25rem;
  padding-left: 1.25rem;
}
.toc li {
  margin-block: 0.2rem;
}
.toc a {
  color: var(--ink);
  text-decoration: none;
}
.toc a:hover {
  color: var(--accent-hot);
  text-decoration: underline;
}


/* ============================================================
   6. Section label (shared — used above grids and widgets)
   ============================================================ */
.section-label {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
  margin: 0 0 1.5rem;
}


/* ============================================================
   7. Hero — text overlaid on image (index.html)
   ============================================================ */
.hero {
  position: relative;
  margin-block: 1.75rem 2.5rem;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 5;
  background: #222;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.40) 60%,
    rgba(0,0,0,0.85) 100%
  );
  pointer-events: none;
}
.hero-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.25rem;
  color: #fff;
  z-index: 1;
}
.hero-category {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--fs-15);
  letter-spacing: var(--tracking-smallcaps);
  color: #BFDBFE;
  margin: 0 0 0.65rem;
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  /* Bumped from the old Playfair sizing — Cormorant @500 is lighter
     so the headline needs more pixels to dominate the hero block. */
  font-size: var(--fs-fluid-2);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 0.8rem;
  color: #fff;
}
.hero-headline a { color: #fff; text-decoration: none; }
.hero-headline a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }
.hero-dek {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.92);
}
.hero-meta {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}
.hero-meta .dot { margin-inline: 0.45rem; opacity: 0.55; }


/* ============================================================
   8. Card grid — text below image (index.html)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
}
.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
}
.card-category {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0.85rem 0 0.4rem;
}
.card-headline {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-24);
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 0.55rem;
  color: var(--ink);
}
.card-headline a { color: var(--ink); text-decoration: none; }
.card-headline a:hover { color: var(--accent-hot); }
.card-dek {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.55;
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
}
.card-meta {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-13);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ── Tier-3 quad grid + tier-4 earlier-list (index.html) ──
   The homepage feed runs in four tiers:
     1. Hero                  — post 1
     2. Headline grid (.grid) — posts 2-7   (1/2/3 cols by viewport)
     3. Compact quad-grid     — posts 8-19  (2/3/4 cols by viewport)
     4. Earlier-list          — posts 20+   (text-only, no thumbnails)
   Tiers 3 + 4 only appear when the site has enough posts; they're
   silent on a young site that hasn't filled tier 2 yet. */

.grid-quad {
  display: grid;
  grid-template-columns: 1fr;          /* mobile baseline; bumped up at breakpoints */
  gap: 1.75rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--rule);
}
/* Compact card variant — smaller headline + thumbnail height for the
   tier-3 quad so 4 across at desktop reads as a denser secondary band
   rather than a clone of tier 2. */
.card-compact .card-headline { font-size: var(--fs-17); line-height: 1.18; }
.card-compact .card-dek      { font-size: var(--fs-14); line-height: 1.5; }
.card-compact img            { aspect-ratio: 16 / 10; }

/* Tier-4 — text-only, one row per post. By the time the reader is
   here they're browsing the back-catalogue; imagery stops earning
   its space. Two columns on tablet+, single on phones. */
.earlier-section {
  margin-top: 2rem;
  padding-top: 1.75rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--rule);
}
.text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 1;
  column-gap: 2rem;
}
.text-row {
  break-inside: avoid;
  display: flex;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.45;
}
.text-row:last-child { border-bottom: 0; }
.text-row time {
  flex: 0 0 auto;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-12-5);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 0.1em;
}
.text-row a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.text-row a:hover { color: var(--accent-hot); }


/* ============================================================
   9. Two-column layout (feed.html)
   ============================================================ */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 2rem 3rem;
}


/* ============================================================
   10. Feed column — horizontal article rows (feed.html)
   ============================================================ */
.feed-col {
  min-width: 0;
}

.row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.row:first-of-type { padding-top: 0.5rem; }
.row:last-of-type { border-bottom: none; }

.row-image {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-alt);
}
.row-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 350ms ease;
}
.row:hover .row-image img { transform: scale(1.03); }

.row-text { min-width: 0; }

.row-category {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.35rem;
}
.row-headline {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-20);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.row-dek {
  /* Hidden on mobile, revealed at ≥768px */
  display: none;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}
.row-meta {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-13);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}


/* ============================================================
   11. Sidebar (feed.html)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.widget-label {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  margin: 0 0 1rem;
}

/* --- Advertisement --- */
.ad {
  background: var(--bg-alt);
  border: 1px dashed #CFC8B7;
  padding: 1.25rem;
  text-align: center;
  border-radius: 2px;
}
.ad-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}
.ad-body {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin: 0;
  padding-block: 2rem;
}
.ad-large .ad-body { padding-block: 4rem; }

/* --- Most Read --- */
.most-read {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mr;
}
.most-read li {
  counter-increment: mr;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.most-read li:last-child { border-bottom: none; padding-bottom: 0; }
.most-read li::before {
  content: counter(mr);
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-28);
  line-height: 1;
  color: var(--accent-hot);
}
.most-read a {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-16);
  line-height: 1.3;
  color: var(--ink);
}

/* --- Newsletter ---
   Uses --inverse-bg / --inverse-ink so the block can re-skin
   itself in dark mode without each nested rule needing an
   override. The rgba() alphas still hardcode a warm-white for
   the input chrome; dark mode overrides them at §99. */
.newsletter {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding: 1.5rem 1.25rem;
  border-radius: 2px;
}
.newsletter h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-22);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--inverse-ink);
}
.newsletter p {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.5;
  margin: 0 0 1rem;
  color: rgba(244, 241, 234, 0.78);
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.newsletter input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(244, 241, 234, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: var(--inverse-ink);
  border-radius: 2px;
}
.newsletter input[type="email"]::placeholder { color: rgba(244, 241, 234, 0.5); }
.newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-hot);
  background: rgba(255, 255, 255, 0.08);
}
.newsletter button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  background: var(--accent-hot);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 150ms ease;
}
.newsletter button:hover { background: var(--accent-hot); }

/* --- Trending tags --- */
.trending {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.trending a {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  background: var(--bg-alt);
  border-radius: 999px;
  color: var(--ink-muted);
  transition: all 150ms ease;
}
.trending a:hover {
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}


/* ============================================================
   12. Author pages
   ============================================================ */

.author-header {
  border-top: 3px solid var(--ink);
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.author-kicker {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.4rem;
}
.author-name {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-3);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.author-bio {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 0.5rem;
}

/* Feed: one article per row */
.author-feed .cat-story {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.author-feed .cat-story:first-child { border-top: 1px solid var(--rule); }
.author-feed .cat-story:last-child  { border-bottom: none; }

.author-feed .cat-story img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}
.author-feed .cat-story h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-18);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 0.3rem;
}
.author-feed .cat-story h2 a { color: var(--ink); text-decoration: none; }
.author-feed .cat-story h2 a:hover { color: var(--accent-hot); }
.author-feed .cat-story p {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.author-feed .cat-byline {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-13);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* No-image fallback: full width text */
.author-feed .cat-story:not(:has(img)) {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .author-feed .cat-story { grid-template-columns: 160px 1fr; gap: 1.5rem; }
  .author-feed .cat-story img { width: 160px; height: 105px; }
}


/* ============================================================
   13. Search results
   ============================================================ */

.result-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.result-item:first-child { border-top: 1px solid var(--rule); }
.result-item:nth-child(even) { background: var(--bg-alt); padding-inline: 0.75rem; margin-inline: -0.75rem; border-radius: 3px; }

.result-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}
.result-title a { color: var(--ink); text-decoration: none; }
.result-title a:hover { color: var(--accent-hot); }

.result-excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-14-4);
  color: var(--ink-muted);
  line-height: 1.55;
}

.result-item mark {
  background: rgba(37, 99, 235, 0.14);
  color: var(--accent-hot);
  font-style: normal;
  border-radius: 2px;
  padding: 0 2px;
}

.empty-state {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--ink-muted);
  padding: 2rem 0;
}

/* ============================================================
   13. Page template — static pages and category listings
   ============================================================ */

.page-main { padding-block: 2rem 4rem; }

.page-header {
  border-top: 3px solid var(--ink);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Kicker label — shown for category pages, empty for static */
.page-kicker {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.4rem;
  min-height: 0;           /* collapses to nothing when empty */
}
.page-kicker:empty { display: none; }

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-3);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.1;
}

/* Static page body */
.page-body {
  font-family: var(--font-body);
  font-size: var(--fs-17);
  line-height: 1.8;
  max-width: 680px;
}
.page-body:empty { display: none; }
.page-body h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--fs-26); margin-top: 2rem; line-height: 1.2; letter-spacing: -0.005em; }
.page-body h3 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--fs-21); margin-top: 1.5rem; line-height: 1.25; }
.page-body a  { color: var(--accent-hot); text-decoration: underline; }
.page-body p  { margin-block: 1rem; }
.page-body ul, .page-body ol { padding-left: 1.5rem; }

/* Category grid — hidden when empty (static pages) */
.cat-grid:empty { display: none; }


/* ============================================================
   14. Archive pages (category listings)
   ============================================================ */

.cat-header {
  border-top: 3px solid var(--ink);
  padding-top: 1.25rem;
  margin-block: 2rem 1.5rem;
}
.cat-kicker {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.4rem;
}
.cat-title {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-3);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.author-bio {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--ink-muted);
  max-width: 60ch;
  margin-top: 0.5rem;
}

.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.cat-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.cat-story:last-child { border-bottom: none; }
.cat-story img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.cat-story h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-24);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0;
}
.cat-story h2 a { color: var(--ink); text-decoration: none; }
.cat-story h2 a:hover { color: var(--accent-hot); }
.cat-story p {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0;
}
.cat-byline {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}


/* ============================================================
   13. Legal pages (privacy, terms, imprint)
   ============================================================ */

.legal-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 5rem;
}

.legal-header {
  border-top: 3px solid var(--ink);
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.legal-kicker {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.5rem;
}

.legal-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-4);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.legal-meta {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
  margin: 0;
}
.legal-meta a { color: var(--ink-muted); text-decoration: underline; text-decoration-thickness: 1px; }

.legal-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--ink);
}
.legal-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  margin: 2.5rem 0 0.6rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--rule);
  line-height: 1.2;
}
.legal-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--font-display-weight);
  margin: 1.75rem 0 0.4rem;
  line-height: 1.25;
}
.legal-body p { margin: 0.9rem 0; }
.legal-body ul, .legal-body ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.legal-body li { margin-bottom: 0.4rem; }
.legal-body a { color: var(--accent-hot); text-decoration: underline; text-decoration-thickness: 1px; }
.legal-body strong { font-weight: 700; }

/* Imprint-specific: address block */
.legal-body address {
  font-style: normal;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-hot);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.7;
}

/* Callout-style blocks for [BRACKETED] placeholder text */
.legal-body em {
  font-style: normal;
  background: rgba(37, 99, 235, 0.07);
  border: 1px dashed rgba(37, 99, 235, 0.35);
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-em-90);
  color: var(--accent-hot);
}


/* ============================================================
   15. Article page
   ============================================================ */

.article-wrap { padding-top: 2rem; padding-bottom: 4rem; }

.article-header {
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.article-kicker {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--accent-hot);
  margin: 0 0 0.6rem;
}

.article-title {
  font-family: var(--font-display);
  /* Cormorant @500 wants more pixels than Playfair @700 — bumped
     both ends of the clamp to keep the title commanding. */
  font-size: var(--fs-fluid-5);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
  font-weight: var(--font-display-weight);
}

.article-byline {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-15);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
/* The byline-author selector is emitted by the template engine when
   {{author}} expands to an <a>. Match it to the .article-author span
   in the static template so both code paths get the same emphasis. */
.byline-author,
.article-byline .article-author {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.byline-author:hover { color: var(--accent-hot); text-decoration: underline; }

.modified-badge {
  font-size: var(--fs-12);
  background: var(--bg-alt);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  color: var(--ink-muted);
}

/* Featured image and inline figures share the 720px body column so the
   lead art doesn't tower over the text it illustrates. */
.article-wrap .featured-image,
.article-wrap figure {
  max-width: 720px;
  margin: 1.5rem auto 2rem;
}
.article-wrap .featured-image img,
.article-wrap figure img {
  width: 100%;
  height: auto;
  display: block;
}
.article-wrap figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin-top: 0.4rem;
}

.post-content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-17);
  line-height: 1.8;
  /* Editorial justification — body copy is set flush both
     edges, with hyphenation enabled so the line-spacing
     stays even rather than developing rivers of white.
     Headings + captions opt out below. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Headings stay left-aligned — short lines justified produce
   awkwardly wide tracking, especially at H2 sizes. */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Captions stay left so they read as a separate voice from the
   body, not a continuation. */
.post-content figcaption,
.article-wrap figcaption {
  text-align: left;
  hyphens: manual;
}
.post-content h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-28);
  letter-spacing: -0.005em;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.18;
}
.post-content h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-23);
  margin-top: 2rem;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}
.post-content p { margin-block: 1.1rem; }
.post-content a { color: var(--accent-hot); text-decoration: underline; text-decoration-thickness: 1px; }
.post-content blockquote {
  border-left: 3px solid var(--accent-hot);
  margin: 1.5rem 0 1.5rem 1rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--ink-muted);
  font-style: italic;
}
.post-content img { max-width: 100%; height: auto; margin: 1.5rem auto; display: block; }
.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content li { margin-block: 0.4rem; }
.post-content hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.post-content pre { background: var(--bg-alt); padding: 1rem; overflow-x: auto; font-size: var(--fs-14); border-radius: 4px; }
.post-content code { font-size: var(--fs-em-87-5); background: var(--bg-alt); padding: 0.1em 0.35em; border-radius: 3px; }

/* Related stories — centered under the 720px body column. The emitted
   markup is <aside class="related"> with .related-heading and
   .related-list, so it needs its own column rule (the aside sits outside
   .post-content, so it doesn't inherit the body's max-width). */
.article-wrap .related {
  max-width: 720px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.article-wrap .related-heading {
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
  margin: 0 0 1rem;
}
.article-wrap .related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-wrap .related-list li {
  margin: 0.5rem 0;
}
.article-wrap .related-list a {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-18);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.article-wrap .related-list a:hover {
  color: var(--accent-hot);
  text-decoration: underline;
}

/* In-article ad slot — same 720px column as the body. Invisible when the
   operator hasn't configured an ad; when configured, framed with an
   "Advertisement" kicker so readers can tell paid content from editorial. */
.article-wrap .ingp-da-slot {
  max-width: 720px;
  margin: 2.5rem auto;
  text-align: center;
}
.article-wrap .ingp-da-slot:empty { display: none; }
.article-wrap .ingp-da-slot:not(:empty) {
  padding: 1.5rem 1rem;
  background: var(--bg-alt);
  border-radius: 4px;
}
.article-wrap .ingp-da-slot:not(:empty)::before {
  content: "Advertisement";
  display: block;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------
   Two-column article layout
   ------------------------------------------------------------
   The grid-wrap IS the two-column grid: body column (720px) and
   sidebar column (280px). Putting the WHOLE article (header, image,
   body, related) in column 1 means the sidebar has the full article
   height to stick against — not just the short post-body row. Short
   posts no longer push the sidebar down into the middle of the page.

   Below 1080px the grid collapses to a single column and the sidebar
   stacks below the body.
   ------------------------------------------------------------ */
.article-wrap .article-grid-wrap {
  max-width: 1048px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 720px 280px;
  gap: 3rem;
  align-items: start;
}

/* Body column — all the per-article content stacks here. min-width:0
   prevents long code blocks / images from blowing out the track. */
.article-body {
  min-width: 0;
}

/* Body-column children no longer need their own max-width + auto margins —
   the 720px grid track already caps them. Reset the old 720px-centering
   rules so they fill their column. */
.article-body .article-header,
.article-body .featured-image,
.article-body > figure,
.article-body .toc,
.article-body > .ingp-da-slot,
.article-body .related {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.article-sidebar {
  position: sticky;
  top: 2rem;
  /* align-self: start keeps the sidebar anchored to the top of its
     grid track regardless of how tall the body column grows. */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--font-sans);
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-da-slot {
  max-width: none;
  margin: 0;
  text-align: center;
}
/* Sidebar ad keeps the "Advertisement" kicker from the shared rule but
   loses the 720px cap and auto-margin, since the column is already 280. */

/* Sidebar chrome — shared between article and page (category/static) sidebars.
   :is() lets one rule cover both .article-sidebar and .page-sidebar without
   repeating the comma list for every descendant. */
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-signup,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 1.25rem;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-signup-heading,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact-heading {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-21);
  letter-spacing: -0.005em;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-signup-lede {
  font-size: var(--fs-15);
  color: var(--ink-muted);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter-label,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact form label {
  /* Field labels are self-explanatory from the placeholder; hide visually
     but keep in the DOM for screen readers. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter input[type="email"],
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact input,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
  font-size: var(--fs-16);
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact textarea {
  min-height: 90px;
  resize: vertical;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter-btn,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact button {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--accent-hot);
  color: #fff;
  border: none;
  border-radius: 3px;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter-btn:hover,
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-contact button:hover {
  filter: brightness(0.92);
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-newsletter-msg {
  margin: 0.25rem 0 0;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  min-height: 1em;
}
:is(.article-sidebar, .page-sidebar, .orbit-side) .ingp-privacy-note,
:is(.article-sidebar, .page-sidebar, .orbit-side) .privacy-consent {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0.5rem 0 0;
}

@media (max-width: 1080px) {
  .article-wrap .article-grid-wrap {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .article-sidebar {
    position: static;
    margin-top: 2rem;
  }
}

/* ============================================================
   Page grid — static pages and category listings
   ============================================================

   Mirror of the article-grid pattern: body column on the left,
   sticky sidebar with the same signup/contact/ad chrome on the
   right. Below 1024px the grid collapses to one column and the
   sidebar stacks below the body.
   ------------------------------------------------------------ */
.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.page-body-col {
  min-width: 0;
}

.page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--font-sans);
}

@media (min-width: 1024px) {
  .page-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 3rem;
    align-items: start;
  }
  .page-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
  /* The body column is narrower than the full container once the 280px
     sidebar + 3rem gap are taken out. Step the cat-grid down from 3 to
     2 columns so cards don't get too cramped. */
  .page-grid .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Sponsored content
   ============================================================

   Four touch-points:
     1. `.sponsored-badge`   — small pill on cards + lead kicker
     2. `.lead-kicker`       — wraps the badge above a lead story;
                               must be inline-block width, not full row
     3. `.sponsored-notice`  — compliance bar above a sponsored article
     4. `body.sponsored`     — subtle tint on the article page so
                               readers notice they're in paid territory
   ------------------------------------------------------------ */

.sponsored-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #8B6914;
  color: #fff;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-smallcaps);
  border-radius: 2px;
  line-height: 1.3;
}

.lead-kicker {
  /* Shrink-wrap so the badge doesn't stretch across the full lead
     column — without this the kicker <div> takes 100% width and the
     badge floats alone at the left edge. */
  display: block;
  margin-bottom: 0.5rem;
}
.lead-kicker .sponsored-badge {
  /* No extra styling needed — the badge rule above handles it. */
}

/* Badge on stream/side cards — nudge it to sit beside the category
   kicker rather than below the headline. */
.card .sponsored-badge,
.sponsored-card .sponsored-badge {
  margin-right: 0.4rem;
  vertical-align: middle;
}

.sponsored-notice {
  /* Sits inside .container, so it aligns with the article body.
     Pale parchment + goldenrod rule so it reads as "disclosure"
     not "warning". */
  max-width: 1048px;
  margin: 1.5rem auto 0;
  padding: 0.6rem 0.9rem;
  background: #FAF5E6;
  border-left: 3px solid #8B6914;
  color: #5A4410;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.45;
  border-radius: 2px;
}

body.sponsored .article-wrap {
  /* Subtle parchment wash on the entire article canvas so the reader
     has a persistent visual cue they're in paid content. Kept very
     light — the sponsored-notice bar carries the explicit disclosure. */
  background: linear-gradient(to bottom, #FDFBF3 0, #FDFBF3 400px, transparent 800px);
}

[data-theme="dark"] .sponsored-notice {
  background: #2A2416;
  border-left-color: #C9A34A;
  color: #E8D9A8;
}
[data-theme="dark"] body.sponsored .article-wrap {
  background: linear-gradient(to bottom, #1A1608 0, #15120A 400px, transparent 800px);
}

/* Comments */
.comments-section {
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
  margin-top: 2rem;
  max-width: 720px;
}
.comments-section h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-26);
  letter-spacing: -0.005em;
  margin-bottom: 1.5rem;
}
/* Comment list — separator on every comment after the first, plus
   a small Reply affordance and an "in reply to" line for threaded
   replies. Tree-ordered render in script.js attaches a depth-N class
   (0..3, capped) so we can indent replies under their parent visually.
   Cap matches WP's default threading sweet spot — past three levels,
   the "↳ in reply to {name}" pill carries the rest of the structure. */
.comment + .comment {
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}
.comment.depth-1 { margin-left: 1.5rem; }
.comment.depth-2 { margin-left: 3rem;   }
.comment.depth-3 { margin-left: 4.5rem; }
.comment-reply-to {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-dim);
  margin-bottom: 0.4rem;
}
.comment-reply-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-dim);
  cursor: pointer;
}
.comment-reply-btn:hover { color: var(--ink); text-decoration: underline; }
.reply-hint {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}
.reply-hint-cancel {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.comment-form h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: 600;
  margin-bottom: 1rem;
}
.form-cols { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form-row label { font-family: var(--font-sans); font-size: var(--fs-16); display: block; margin-bottom: 0.3rem; }
.form-row input, .form-row textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
}
.form-row textarea { min-height: 120px; resize: vertical; margin-bottom: 1rem; }
.btn-comment {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-comment:hover { background: var(--accent-hot); }


/* ============================================================
   12b. Shortcodes
   ============================================================

   Styles for classes emitted by ingp/lib/_shortcodes.php when it
   converts [caption], [gallery], [youtube], [su_*] and the
   INGP-native {{...}} equivalents into inline HTML at build time.
   Scoped inside .article-body so article content is styled, but
   category / static pages get the same treatment via .page-body.

   Kept together so the conversion behaviour and its visual rules
   live side-by-side — touching one pair reads cleanly next to
   the other.
   ------------------------------------------------------------ */

/* [caption] → <figure class="ingp-figure"> */
.ingp-figure {
  margin: 2rem 0;
}
.ingp-figure img { display: block; width: 100%; height: auto; }
.ingp-figure figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  padding-top: 0.5rem;
  line-height: 1.45;
}
.ingp-figure.alignleft  { float: left;  margin-right: 1.5rem; max-width: 50%; }
.ingp-figure.alignright { float: right; margin-left:  1.5rem; max-width: 50%; }
.ingp-figure.aligncenter { text-align: center; }

/* [gallery] */
.ingp-gallery {
  display: grid;
  gap: 0.5rem;
  margin: 2rem 0;
  grid-template-columns: repeat(3, 1fr);
}
.ingp-gallery-cols-1 { grid-template-columns: 1fr; }
.ingp-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ingp-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ingp-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ingp-gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ingp-gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }
.ingp-gallery img { width: 100%; height: auto; display: block; }

/* [audio], [video] */
.ingp-audio, .ingp-video { display: block; width: 100%; margin: 1.5rem 0; }

/* [youtube], [vimeo], [embed] */
.ingp-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 2rem 0;
  background: var(--bg-alt);
}
.ingp-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* [su_quote], [su_pullquote] */
.ingp-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-22);
  font-style: italic;
  line-height: 1.45;
  border-left: 3px solid var(--accent-hot);
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--ink);
}
.ingp-quote cite {
  display: block;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-14);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}
.ingp-pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-26);
  font-style: italic;
  line-height: 1.3;
  max-width: 28ch;
  margin: 1.5rem auto;
  padding: 0.5rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  color: var(--ink);
}
.ingp-pullquote-left  { float: left;  margin: 0.5rem 2rem 1rem 0; }
.ingp-pullquote-right { float: right; margin: 0.5rem 0 1rem 2rem; }

/* [su_highlight] */
.ingp-highlight { background: #fff4a3; padding: 0.1em 0.25em; }

/* [su_dropcap] — Cormorant's high-contrast capitals are made for
   the lapidary drop-cap moment; bumped slightly larger and dropped
   to display-weight so the inscriptional quality reads through. */
.ingp-dropcap {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  font-weight: var(--font-display-weight);
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.1em 0 0;
  color: var(--accent-hot);
}

/* [su_divider] */
.ingp-divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* [su_spacer], [su_spacing] */
.ingp-spacer { width: 100%; }

/* [su_button] */
.ingp-btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: var(--accent-hot);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  border-radius: 3px;
  margin: 0.5rem 0;
}
.ingp-btn:hover { filter: brightness(0.9); }

/* [su_note], [su_box] */
.ingp-note, .ingp-box {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-hot);
  border-radius: 3px;
  font-family: var(--font-body);
}
.ingp-box-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-18);
  letter-spacing: -0.005em;
  margin: 0 0 0.35rem;
}

/* [su_heading] */
.ingp-heading {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  margin-top: 1.75rem;
}

/* [su_list] */
.ingp-list ul, .ingp-list ol { padding-left: 1.5rem; }

/* [su_spoiler] (HTML5 <details>) */
.ingp-spoiler {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border-radius: 3px;
}
.ingp-spoiler summary {
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.ingp-spoiler-body { margin-top: 0.75rem; }

/* Dark mode — tune the surfaces that were hard-coded light. */
@media (prefers-color-scheme: dark) {
  body.dark .ingp-highlight { background: #6b5800; color: #fff4a3; }
}
body.dark .ingp-highlight { background: #6b5800; color: #fff4a3; }


/* ============================================================
   13. Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem;
  text-align: center;
  font-family: var(--font-smallcaps);
  font-variant: small-caps;
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-smallcaps);
  color: var(--ink-muted);
}


/* ============================================================
   14. RESPONSIVE
   ============================================================
   Base (above)   = mobile  < 768px
   Tablet         ≥ 768px   (iPad portrait & up)
   Desktop        ≥ 1024px  (2-col feed layout activates here)
   Wide           ≥ 1440px
   ============================================================ */

/* --- iPad ≥ 768px --- */
@media (min-width: 768px) {
  :root { --gutter: 2rem; }

  .masthead-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Archive grid — 2 cols on tablet */
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-story { grid-template-columns: 1fr; }

  /* Front grid — two side columns appear */
  .front-grid {
    grid-template-columns: 1fr 1px 2fr 1px 1fr;
    gap: 0 2rem;
  }
  .col-divider { display: block; background: var(--rule); }
  .lead-story, .side-col { padding-inline: 0; }
  .body-preview { display: block; }

  /* Category grid — 2 cols */
  .category-grid { grid-template-columns: 2fr 1fr 1fr; }

  /* Form cols */
  .form-cols { grid-template-columns: 1fr 1fr; }

  /* Hero (index) */
  .hero {
    aspect-ratio: 16 / 9;
    margin-block: 2.25rem 3rem;
  }
  .hero-text { padding: 2.25rem; max-width: 720px; }

  /* Card grid (index) */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
  .card-headline { font-size: var(--fs-23); }
  /* Tier-3 quad grid — 3 cols on tablet */
  .grid-quad { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; }
  .card-compact .card-headline { font-size: var(--fs-18); }
  /* Tier-4 list — split into 2 columns */
  .text-list { columns: 2; }

  /* Feed rows (feed) */
  .row {
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    padding-block: 1.75rem;
  }
  .row-headline { font-size: var(--fs-21); }
  .row-dek { display: block; }
}

/* --- Desktop ≥ 1024px --- */
@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }

  /* Archive grid — 3 cols on desktop */
  .cat-grid { grid-template-columns: repeat(3, 1fr); }

  /* Front grid — widen lead column */
  .front-grid { gap: 0 2.5rem; }
  .lead-story h2 { font-size: var(--fs-36); }

  /* Hero (index) */
  .hero { aspect-ratio: 21 / 9; }
  .hero-text { padding: 3rem; }

  /* Card grid (index) */
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
  }
  .card-headline { font-size: var(--fs-24); }
  /* Tier-3 quad grid — 4 cols on desktop, the design target */
  .grid-quad { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
  .card-compact .card-headline { font-size: var(--fs-19); }

  /* Two-column split activates (feed) */
  .layout {
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
  }

  /* Feed rows (feed) */
  .row {
    grid-template-columns: 240px 1fr;
    gap: 1.75rem;
    padding-block: 2rem;
  }
  .row-headline { font-size: var(--fs-23); }
}

/* --- Wide ≥ 1440px --- */
@media (min-width: 1440px) {
  .hero-text { padding: 3.5rem; }

  .layout { gap: 4rem; }
  .row { grid-template-columns: 280px 1fr; }
  .row-headline { font-size: var(--fs-24); }
}

/* ============================================================
   Print stylesheet
   ============================================================
   Readers print articles for offline reading, clippings, or
   archival. Goal: one continuous readable column, black on
   white, no chrome. The printed page should be the article
   itself, its byline, and its body — nothing else.
   External link URLs are exposed after anchors so a printed
   reference still resolves back to the source. */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: var(--fs-11pt);
    line-height: 1.5;
  }

  /* Strip chrome: nav, ads, comments, footer, forms, signup. */
  .masthead,
  .section-nav,
  .breadcrumbs,
  .toc,
  .ingp-da-slot,
  .ingp-signup,
  .article-sidebar,
  .orbit-side,
  .comments-section,
  .comment-form,
  .footer,
  .sponsored-notice,
  .privacy-banner,
  .related,
  button,
  form,
  .skip-link {
    display: none !important;
  }

  /* Collapse the grid back to a single column for print. */
  .article-grid-wrap { display: block; max-width: none; }

  .container,
  .article-wrap,
  main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .featured-image img,
  .post-content img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .article-kicker,
  .article-byline {
    color: #333 !important;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
    color: #000 !important;
  }
  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Expose external link destinations. Skip in-page (#…) and
     same-origin (/…) links to avoid noisy "(#comments)" trails. */
  a[href]:not([href^="#"]):not([href^="/"])::after {
    content: " (" attr(href) ")";
    font-size: var(--fs-pct-90);
    color: #555;
    word-break: break-all;
  }

  blockquote, figure, .pull-quote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}


/* ============================================================
   99. Dark mode
   ============================================================
   Activated by theme.js which sets data-theme on <html> from
   localStorage or (first visit) from prefers-color-scheme. The
   dark palette is the same blue skin pushed down into navy-
   near-black surfaces, with the accent lightened so it still
   has bite against the darker ground.

   Because the palette is tokens-only, every component inherits
   the new colours without per-rule edits. The exceptions —
   newsletter chrome and the featured-image gradient — live in
   this block.
   ============================================================ */
[data-theme="dark"] {
  --bg:          #0A1422;
  --bg-alt:      #132036;
  --rule:        #1F2D47;

  --ink:         #E8ECF5;
  --ink-muted:   #A9B3C7;
  --ink-subtle:  #6A7690;

  --accent:      #60A5FA;   /* blue-400 — reads against dark bg */
  --accent-hot:  #93C5FD;

  --brand-a:     #2563EB;   /* "Blue" — saturated mid-blue, reads dark against the near-black bg */
  --brand-b:     #93C5FD;   /* "Press" — pale blue-300, lifts off the bg */

  --inverse-bg:  #1D4ED8;   /* newsletter = saturated blue block */
  --inverse-ink: #FFFFFF;
}

/* No-JS dark fallback — honour OS preference when theme.js hasn't run.
   The :not([data-theme]) guard makes this a strict fallback: once JS
   sets data-theme on <html>, the [data-theme="dark"] block above wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:          #0A1422;
    --bg-alt:      #132036;
    --rule:        #1F2D47;
    --ink:         #E8ECF5;
    --ink-muted:   #A9B3C7;
    --ink-subtle:  #6A7690;
    --accent:      #60A5FA;
    --accent-hot:  #93C5FD;
    --brand-a:     #2563EB;
    --brand-b:     #93C5FD;
    --inverse-bg:  #1D4ED8;
    --inverse-ink: #FFFFFF;
  }
}

/* The theme toggle button is JS-driven — hide it when JS hasn't run,
   surface a tiny inline hint via the sibling <noscript> instead. */
:root:not([data-theme]) .theme-toggle { display: none; }
.theme-noscript {
  display: inline-flex; align-items: center;
  font-size: var(--fs-12-48); font-style: italic;
  color: var(--ink-muted); padding: 0 8px;
  white-space: nowrap;
}

/* Search-match highlight needs a dark-mode alpha — the light
   rgba() gets lost against the dark bg. */
[data-theme="dark"] .result-item mark {
  background: rgba(96, 165, 250, 0.22);
}

/* Legal [BRACKETED] callouts — same story. */
[data-theme="dark"] .legal-body em {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.4);
}

/* Newsletter form chrome — the rgba(244,241,234,…) alphas above
   are warm-white and stop reading against the bright-blue dark
   newsletter block. Push them to plain white at matching alpha. */
[data-theme="dark"] .newsletter p {
  color: rgba(255, 255, 255, 0.82);
}
[data-theme="dark"] .newsletter input[type="email"] {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .newsletter button {
  background: #0B1E3F;
  color: #fff;
}
[data-theme="dark"] .newsletter button:hover {
  background: #09182F;
}

/* ── Privacy consent banner ────────────────────────────────────
   Emitted by {{privacy-banner}} when analytics_mode=full or the
   operator has pasted third-party trackers. Centered card docked
   at the viewport bottom; collapses to a full-width bar on small
   screens. Themed via semantic tokens so each design adapts. */
.ingp-privacy-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: #EAB308;
  color: #111;
  border: 1px solid #A16207;
  border-radius: 6px;
  box-shadow: 0 14px 48px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14);
  font-size: var(--fs-14-4);
  line-height: 1.45;
  z-index: 9999;
}
.ingp-privacy-banner-msg  { flex: 1; }
.ingp-privacy-banner-msg a { color: #111; text-decoration: underline; }
.ingp-privacy-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ingp-privacy-banner button {
  font: inherit;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.ingp-privacy-accept {
  background: #111;
  color: #fff;
  border-color: #111;
}
.ingp-privacy-accept:hover {
  background: #000;
}
.ingp-privacy-decline {
  background: transparent;
  color: #111;
  border-color: #111;
}
.ingp-privacy-decline:hover {
  background: rgba(0,0,0,0.08);
  color: #000;
  border-color: #000;
}
/* Phones: flatten to a full-width bar. Removes the floating-card
   feel when there's no room for it and keeps the buttons easy to
   tap. */
@media (max-width: 600px) {
  .ingp-privacy-banner {
    flex-direction: column;
    align-items: stretch;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .ingp-privacy-banner-actions { justify-content: flex-end; }
}

/* ────────────── Standfirst + share row (between headline and byline) ────────────── */
.article-standfirst {
    font-size: var(--fs-em-115);
    line-height: 1.5;
    color: var(--mid, #555);
    font-style: italic;
    margin: 0.5rem 0 0.85rem;
    max-width: 38em;
}
/* ============================================================
   Share row — three palette modes × three mark compositions.
   ============================================================
   Markup is identical regardless of operator choice; visual
   decisions live entirely in this stylesheet. Two data attrs
   on the wrapper drive everything:
     data-share-style: mono | mono-hover | colour
     data-share-marks: icon | icon-label | label
   See ingp/lib/_share.php for the render side.
   ============================================================ */
.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.5rem 0 1rem;
    font-size: var(--fs-em-85);
}
.article-share-label {
    color: var(--ink-muted, var(--ink-soft, var(--ink-subtle, var(--mid, #666))));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.article-share-link,
.article-share-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--ink, #111);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.15em 0.1em;
    font: inherit;
    line-height: 1;
    transition: color 120ms ease;
}
.article-share-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.article-share-text { display: inline; }

.article-share-link:hover .article-share-text,
.article-share-copy:hover .article-share-text,
.article-share-link:focus-visible .article-share-text,
.article-share-copy:focus-visible .article-share-text {
    text-decoration: underline;
}

.article-share[data-share-marks="icon"]  .article-share-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.article-share[data-share-marks="label"] .article-share-icon { display: none; }

.article-share[data-share-style="mono"] .article-share-link,
.article-share[data-share-style="mono"] .article-share-copy {
    color: var(--ink-muted, var(--ink-soft, var(--ink-subtle, var(--mid, #555))));
}
.article-share[data-share-style="mono"] .article-share-link:hover,
.article-share[data-share-style="mono"] .article-share-copy:hover,
.article-share[data-share-style="mono"] .article-share-link:focus-visible,
.article-share[data-share-style="mono"] .article-share-copy:focus-visible {
    color: var(--ink, #111);
}

.article-share[data-share-style="mono-hover"] .article-share-link,
.article-share[data-share-style="mono-hover"] .article-share-copy {
    color: var(--ink-muted, var(--ink-soft, var(--ink-subtle, var(--mid, #555))));
}
.article-share[data-share-style="mono-hover"] [data-share-platform="x"]:hover,
.article-share[data-share-style="mono-hover"] [data-share-platform="x"]:focus-visible        { color: #000; }
.article-share[data-share-style="mono-hover"] [data-share-platform="facebook"]:hover,
.article-share[data-share-style="mono-hover"] [data-share-platform="facebook"]:focus-visible { color: #1877F2; }
.article-share[data-share-style="mono-hover"] [data-share-platform="linkedin"]:hover,
.article-share[data-share-style="mono-hover"] [data-share-platform="linkedin"]:focus-visible { color: #0A66C2; }
.article-share[data-share-style="mono-hover"] [data-share-platform="email"]:hover,
.article-share[data-share-style="mono-hover"] [data-share-platform="email"]:focus-visible,
.article-share[data-share-style="mono-hover"] [data-share-platform="copy"]:hover,
.article-share[data-share-style="mono-hover"] [data-share-platform="copy"]:focus-visible    { color: var(--accent, #1D4ED8); }

.article-share[data-share-style="colour"] [data-share-platform="x"]        { color: #000; }
.article-share[data-share-style="colour"] [data-share-platform="facebook"] { color: #1877F2; }
.article-share[data-share-style="colour"] [data-share-platform="linkedin"] { color: #0A66C2; }
.article-share[data-share-style="colour"] [data-share-platform="email"]    { color: var(--accent, #1D4ED8); }
.article-share[data-share-style="colour"] [data-share-platform="copy"]     { color: var(--accent, #1D4ED8); }
.article-share[data-share-style="colour"] [data-share-platform]:hover,
.article-share[data-share-style="colour"] [data-share-platform]:focus-visible { filter: brightness(0.85); }

/* ── Layout: menu (toggle + collapsible) ───────────────────────── */
.article-share[data-share-layout="menu"] .article-share-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--ink-muted, var(--ink-soft, var(--ink-subtle, var(--mid, #555))));
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.15em 0.1em;
    font: inherit;
    line-height: 1;
}
.article-share[data-share-layout="menu"] .article-share-toggle::after {
    content: "▾";
    display: inline-block;
    font-size: var(--fs-em-85);
    line-height: 1;
    transition: transform 120ms ease;
}
.article-share[data-share-layout="menu"] .article-share-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.article-share[data-share-layout="menu"] .article-share-menu {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}
.article-share[data-share-layout="menu"] .article-share-toggle[aria-expanded="true"] + .article-share-menu {
    display: inline-flex;
}


/* ============================================================
   §100. OrbitDigest homepage two-column scaffolding
   ============================================================
   Mirrors the article two-column shape (.article-grid-wrap) but
   wider — the left column hosts a hero plus 3-up and 4-up card
   grids and needs more horizontal room than a single article
   body column would.

   Layout: left = pure-news flow (.orbit-news), right = sticky
   sidebar (.orbit-side) carrying the top ad, Chronicles (longer
   form pieces from a dedicated category), and the newsletter
   signup.
   ============================================================ */
.orbit-index .orbit-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
}

.orbit-news {
  min-width: 0;
}

.orbit-side {
  position: sticky;
  top: 2rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--font-sans);
}

/* The sidebar form / signup chrome (.ingp-signup, .ingp-newsletter,
   .ingp-privacy-note, etc.) is fully covered by the shared
   :is(.article-sidebar, .page-sidebar, .orbit-side) rules earlier
   in this file — .orbit-side is added to that list so the homepage
   sidebar picks up the article-page styling automatically. */

.orbit-chronicles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.orbit-chronicles-heading {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-19);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}

/* {{category:chronicles:5}} emits .ingp-post-list > .ingp-post-card —
   the placeholder renderer's generic markup. In the sidebar context
   we hide the thumbnail (no room at 300px) and present a tight
   title + date list. */
.orbit-side .ingp-post-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.orbit-side .ingp-post-card {
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}
.orbit-side .ingp-post-card:first-child {
  border-top: 0;
  padding-top: 0;
}
.orbit-side .ingp-post-card-img {
  display: none;
}
.orbit-side .ingp-post-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-15-2);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.25rem;
}
.orbit-side .ingp-post-card-title a {
  color: var(--ink);
  text-decoration: none;
}
.orbit-side .ingp-post-card-title a:hover {
  color: var(--accent-hot);
}
.orbit-side .ingp-post-card-date {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  font-family: var(--font-sans);
}

/* Below 1024px the sidebar stacks under the news flow. */
@media (max-width: 1024px) {
  .orbit-index .orbit-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .orbit-side {
    position: static;
  }
}


/* ============================================================
   §101. Story-thumb rows — sidebar "more from this section" rail
   ============================================================
   Emitted by {{stories:thumb:N-M}}. Used in OrbitDigest's
   page.html right column as a list of 20 further articles from
   the current category. The markup is design-agnostic; the
   styling below assumes a sidebar context (column ≤ 300px).
   ============================================================ */
.page-sidebar-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-sidebar-thumbs:empty { display: none; }

.story-thumb {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.story-thumb:first-child {
  border-top: 0;
  padding-top: 0;
}
.story-thumb-img {
  flex: 0 0 96px;
  display: block;
  width: 96px;
  height: 72px;
  overflow: hidden;
  border-radius: 3px;
}
.story-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-thumb-body {
  flex: 1 1 auto;
  min-width: 0;
}
.story-thumb-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-14-4);
  line-height: 1.3;
  margin: 0 0 0.25rem;
}
.story-thumb-title a {
  color: var(--ink);
  text-decoration: none;
}
.story-thumb-title a:hover {
  color: var(--accent-hot);
}
.story-thumb-date {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  font-family: var(--font-sans);
}

/* Heading above a sidebar thumb-list ("More like this" / "More in
   this section"). Same chrome as the .ingp-signup-heading so the
   sidebar reads as a stack of consistent labelled cards. */
.sidebar-list-heading {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-18);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* Collapse the whole sidebar list when its thumb-list is empty —
   keeps the sidebar tidy on articles that have no similar or
   same-category candidates yet. */
.sidebar-list:has(.page-sidebar-thumbs:empty) {
  display: none;
}

/* Article tag chips — visible, linked topic hubs (/p/tag/{slug}/). */
.article-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0;}
.article-tag{display:inline-block;padding:.18rem .6rem;border:1px solid;border-radius:999px;font-size:.8rem;line-height:1.4;text-decoration:none;color:inherit;opacity:.8;}
.article-tag:hover{opacity:1;}
/* Two-level section nav: dropdown on desktop, section-page fallback on mobile.
   The nav is an overflow-x scroll box (clips absolute children), so the
   dropdown is enabled only at >=768px where the row fits and overflow can be
   made visible. On narrow screens .nav-sub stays hidden and tapping a section
   goes to its archive page, which lists the sub-sections. */
.nav-item { display: inline-flex; align-items: center; }
.nav-sub { display: none; }
@media (min-width: 768px) {
  .section-nav-inner { overflow: visible; }
  .nav-item { position: relative; }
  .nav-item > a::after { content: " \25BE"; opacity: .5; font-size: .85em; }
  .nav-sub {
    position: absolute; top: 100%; left: 0; z-index: 60;
    display: flex; flex-direction: column; min-width: 12rem;
    padding: .35rem 0; margin-top: .4rem;
    background: var(--bg-alt, #fff);
    border: 1px solid var(--rule, rgba(0,0,0,.15));
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
  }
  .nav-item:hover > .nav-sub,
  .nav-item:focus-within > .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
  }
  .nav-sub a { padding: .5rem 1rem; white-space: nowrap; text-transform: none; letter-spacing: normal; }
}
/* Section sub-nav — child sections listed at the top of a section archive. */
.section-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.section-subnav a {
  display: inline-block; padding: .25rem .75rem;
  border: 1px solid var(--rule, rgba(0,0,0,.15)); border-radius: 999px;
  font-size: .85rem; text-decoration: none; color: inherit;
}
.section-subnav a:hover { border-color: var(--accent, currentColor); color: var(--accent, inherit); }