/* ═══════════════════════════════════════════════════════════════
   THE AUGMENTED SCHOLAR — REDESIGN LAYER v3
   Loads after main.css and refinements.css.

   1. Brand mark (SVG) in the header, correct in both modes
   2. Wider prose + article header aligned to the body grid
   3. Pillar hero: legible numeral, per-pillar accent
   4. /posts/ hub + cards without 0001 dates
   5. Metadata as designed chips, not a printout
   6. Start Here: a routing page, not a wall of text
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. TOKENS ─── */
:root {
  /* Prose runs wider — 680px left too much dead margin either side */
  --width-prose: 748px;

  /* Brand mark */
  --logo-plate:      var(--blue-800);
  --logo-plate-edge: transparent;
  --logo-ink:        #FBFAF7;
  --logo-accent:     var(--gold);

  /* Discipline tracks — Okabe-Ito derived, colour-vision safe */
  --track-computational: #0072B2;
  --track-wetlab:        #067A5B;
  --track-humanities:    #B5490B;
  --track-social:        #A65784;
}

[data-theme="dark"] {
  --logo-plate:      #1D3A5C;
  --logo-plate-edge: #2E5A8A;
  --logo-ink:        #EAF1FA;
  --logo-accent:     #E3C35B;

  /* Pillar accents have to lift off a dark ground */
  --pillar-1-color: #6FA3DC;
  --pillar-2-color: #A78BFA;
  --pillar-3-color: #34D399;
  --pillar-4-color: #FBBF24;
  --pillar-5-color: #FB7185;

  --track-computational: #56B4E9;
  --track-wetlab:        #34D399;
  --track-humanities:    #F0A860;
  --track-social:        #E4A3C7;
}

/* ─── 1. BRAND MARK ─── */
.nav-logo { gap: 10px; }
.brand-mark {
  display: block; flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.nav-logo:hover .brand-mark { transform: translateY(-1px); }
.nav-logo .nav-logo-text { line-height: 1.15; }
@media (max-width: 560px) {
  .nav-logo-text { display: none; }
}

/* ─── 2. ARTICLE HEADER ALIGNED TO THE BODY GRID ───
   The header used .container--prose (centred on the viewport) while the body
   used a three-column grid (centred on the grid), so the title and the text
   sat on two different left edges. This mirrors the grid exactly. */
.article-header-inner {
  max-width: calc(220px + var(--width-prose) + 260px + var(--space-12) * 3);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 220px var(--width-prose) 260px;
  /* Column gap reproduces the body grid's geometry. Row gap must stay 0 —
     every child sits in column 2, so a row gap would add 48px between the
     title, lead, meta and everything else on top of their own margins. */
  column-gap: var(--space-12);
  row-gap: 0;
}
.article-header-inner > * { grid-column: 2; min-width: 0; }

@media (max-width: 1200px) {
  .article-header-inner { grid-template-columns: 180px minmax(0, 1fr) 240px; }
}
@media (max-width: 1024px) {
  .article-header-inner { grid-template-columns: minmax(0, 1fr); }
  .article-header-inner > * { grid-column: 1; }
}

/* ─── 3. METADATA CHIPS ─── */
.article-meta { margin: 14px 0 26px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 500; line-height: 1; letter-spacing: 0;
  padding: 6px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.meta-chip svg { width: 13px; height: 13px; opacity: 0.75; }
a.meta-chip {
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}
a.meta-chip:hover {
  text-decoration: none;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.meta-chip--pillar {
  background: var(--blue-50); border-color: var(--blue-100);
  color: var(--blue-800); font-weight: 600;
}
.meta-chip--pillar:hover { background: var(--blue-100); color: var(--blue-800); }
.meta-chip--track {
  background: transparent; border-style: dashed;
  color: var(--color-text-subtle);
}
.meta-chip--track:hover { border-style: solid; }

.meta-disclosure {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0;
  font-size: 0.8rem; line-height: 1.5;
  color: var(--color-text-subtle);
}
.meta-disclosure svg {
  width: 13px; height: 13px; margin-top: 3px;
  flex-shrink: 0; opacity: 0.8;
}
.meta-disclosure-label { font-weight: 600; color: var(--color-text-muted); }

/* ─── 4. PILLAR HERO ─── */
.pillar-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.pillar-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--pillar-accent, var(--blue-800));
}
.pillar-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10); align-items: center;
}
.pillar-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.pillar-eyebrow-num { color: var(--pillar-accent, var(--blue-800)); font-weight: 600; }
.pillar-eyebrow-rule {
  flex: 0 0 32px; height: 1px;
  background: var(--pillar-accent, var(--blue-800)); opacity: 0.45;
}
.pillar-eyebrow-count { color: var(--color-text-subtle); }
.pillar-title { font-size: clamp(2rem, 4.2vw, 2.85rem); margin-bottom: var(--space-4); }
.pillar-description { max-width: 62ch; margin-bottom: var(--space-6); }

/* The numeral is an outline on purpose — decorative by design, rather than a
   solid colour faded until it reads as a rendering fault. Full-strength
   accent stroke, so it is equally legible on paper and on ink. */
.pillar-hero-mark {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--pillar-accent, var(--blue-800));
}
.pillar-hero-mark .pillar-icon { opacity: 0.9; }
.pillar-hero-numeral {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 800; line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 2px var(--pillar-accent, var(--blue-800));
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 2px currentColor)) {
  .pillar-hero-numeral { color: var(--pillar-accent, var(--blue-800)); opacity: 0.4; }
}
@media (max-width: 720px) {
  .pillar-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .pillar-hero-mark { flex-direction: row; align-items: baseline; gap: var(--space-4); order: -1; }
  .pillar-hero-numeral { font-size: 3rem; }
}

/* ─── 5. /posts/ HUB ─── */
.hub-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.hub-hero-inner { max-width: 72ch; }
.hub-title {
  font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 800;
  letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4);
}
.hub-description {
  font-size: var(--text-lg); color: var(--color-text-muted);
  line-height: var(--leading-loose); margin-bottom: var(--space-6);
}
.hub-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  margin: 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
}
.hub-stats li { display: flex; flex-direction: column; gap: 2px; }
.hub-stats strong {
  font-family: var(--font-heading); font-size: var(--text-2xl);
  font-weight: 800; color: var(--color-text); line-height: 1;
}
.hub-stats span { font-size: var(--text-xs); color: var(--color-text-subtle); letter-spacing: 0.03em; }

.hub-pillars { padding: var(--space-12) 0 0; }
.pillar-route-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: var(--space-5);
}
.pillar-route {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none; overflow: hidden;
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.pillar-route::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--pillar-accent); opacity: 0.85;
}
.pillar-route:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--pillar-accent); box-shadow: var(--shadow-md);
}
.pillar-route-icon { color: var(--pillar-accent); margin-bottom: var(--space-3); }
.pillar-route-num {
  position: absolute; top: var(--space-4); right: var(--space-5);
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  color: var(--pillar-accent); opacity: 0.7;
}
.pillar-route-title {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  color: var(--color-text); margin: 0 0 var(--space-2); line-height: 1.3;
}
.pillar-route-desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: 1.55; margin: 0 0 var(--space-4); flex: 1;
}
.pillar-route-meta { font-size: var(--text-xs); font-weight: 600; color: var(--pillar-accent); }

/* Cards: section cards show a count and an arrow, never a 0001 date */
.card-article-meta { align-items: center; }
.card-article-go { margin-left: auto; color: var(--color-text-subtle); }
.card-article:hover .card-article-go { color: var(--color-accent); }

/* ─── 6. START HERE ─── */
.start-hero {
  padding: var(--space-20) 0 var(--space-16);
  background:
    radial-gradient(120% 120% at 12% 0%, var(--blue-50) 0%, transparent 58%),
    var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.start-hero-inner { max-width: 68ch; }
.start-eyebrow {
  display: inline-block; margin: 0 0 var(--space-4);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-deep);
  padding: 5px 12px; border-radius: 999px;
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.start-title {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 5vw, 3.15rem); font-weight: 800;
  line-height: 1.12; letter-spacing: var(--tracking-tight);
  color: var(--color-text); margin: 0 0 var(--space-5);
}
.start-lead {
  font-size: var(--text-lg); line-height: var(--leading-loose);
  color: var(--color-text-muted); margin: 0 0 var(--space-8);
}
.start-proof {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  margin: 0 0 var(--space-6); padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.start-proof li { display: flex; flex-direction: column; gap: 3px; }
.start-proof strong {
  font-family: var(--font-heading); font-size: var(--text-3xl);
  font-weight: 800; line-height: 1; color: var(--blue-800);
}
.start-proof span { font-size: var(--text-xs); color: var(--color-text-subtle); letter-spacing: 0.04em; }
.start-promise { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.start-promise em { color: var(--color-text); font-style: normal; font-weight: 600; }

.start-tracks, .start-steps, .start-popular, .start-pillars { padding: var(--space-16) 0; }
.start-steps, .start-pillars {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.start-cta { padding: var(--space-16) 0; }
.start-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text); margin: 0 0 var(--space-2);
}
.start-section-sub {
  font-size: var(--text-base); color: var(--color-text-muted);
  margin: 0 0 var(--space-8); max-width: 62ch;
}

/* Track selector — the main routing decision on the page */
.track-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--space-5);
}
.track-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none; overflow: hidden;
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.track-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--track-accent);
}
.track-card:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: var(--track-accent); box-shadow: var(--shadow-lg);
}
.track-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--track-accent);
  background: color-mix(in srgb, var(--track-accent) 13%, transparent);
}
.track-card-name {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-text); margin: 0 0 var(--space-1); line-height: 1.25;
}
.track-card-fields {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--track-accent); margin: 0 0 var(--space-3);
}
.track-card-blurb {
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-text-muted); margin: 0 0 var(--space-5); flex: 1;
}
.track-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--track-accent);
}
.track-card-cta span { transition: transform var(--transition-fast); }
.track-card:hover .track-card-cta span { transform: translateX(3px); }

/* First-steps ladder — concrete next actions, not a reading list */
.step-ladder {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  max-width: 920px; /* keep the line length readable in a full-width container */
}
.step-rung {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5); align-items: start;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.step-rung-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600;
  color: var(--blue-800);
  background: var(--blue-50); border: 1px solid var(--blue-100);
}
.step-rung-title {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  color: var(--color-text); margin: 0 0 var(--space-2);
}
.step-rung-detail {
  font-size: var(--text-sm); line-height: 1.65;
  color: var(--color-text-muted); margin: 0 0 var(--space-3);
}
.step-rung-link { font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.step-rung-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pillar chips — the secondary route */
.start-pillar-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.start-pillar-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text); text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.start-pillar-chip svg { color: var(--pillar-accent, var(--blue-800)); }
.start-pillar-chip:hover {
  text-decoration: none; transform: translateY(-1px);
  border-color: var(--pillar-accent, var(--color-border-strong));
}
.start-pillar-chip--tools svg { color: var(--gold-deep); }
.start-pillar-chip--tools:hover { border-color: var(--gold); }
.start-pillar-count {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--color-text-subtle);
  padding: 2px 7px; border-radius: 999px; background: var(--color-bg-alt);
}

@media (max-width: 640px) {
  .start-proof { gap: var(--space-6); }
  .step-rung { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .track-card, .pillar-route, .start-pillar-chip, .brand-mark,
  .track-card-cta span { transition: none; }
  .track-card:hover, .pillar-route:hover,
  .start-pillar-chip:hover, .nav-logo:hover .brand-mark { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   7. MOBILE — nav drawer, touch targets, overflow safety
   The drawer never opened at all: theme.js looked up `mobile-nav-toggle`
   while the button is `mobile-menu-toggle`. Fixed in theme.js; these rules
   make the drawer usable now that it opens.
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger: a real 44px touch target that becomes a close (X) when open */
.nav-mobile-toggle {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}
.site-header .nav-mobile-toggle:hover,
.site-header .nav-mobile-toggle:focus-visible { background: rgba(255,255,255,0.1); }

.hamburger,
.hamburger::before,
.hamburger::after {
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.nav-mobile-toggle.is-open .hamburger { background: transparent; }
.nav-mobile-toggle.is-open .hamburger::before { transform: translateY(6px) rotate(45deg); }
.nav-mobile-toggle.is-open .hamburger::after  { transform: translateY(-6px) rotate(-45deg); }

/* Drawer: scrollable, so a long menu on a short phone stays reachable */
.mobile-nav {
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav-link { min-height: 48px; display: flex; align-items: center; }
.mobile-nav li:last-child > .mobile-nav-link { border-bottom: 0; }
.mobile-nav-cta {
  display: flex; width: 100%;
  justify-content: center;
  margin-top: var(--space-5);
  min-height: 48px;
}

/* Lock the page behind the open drawer */
body.nav-open { overflow: hidden; }

@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
  body.nav-open { overflow: auto; }
}

/* ─── Header fits a 320px screen ─── */
@media (max-width: 768px) {
  .nav-container { gap: var(--space-3); padding-inline: var(--space-4); }
  .nav-actions { gap: var(--space-1); }
  .theme-toggle, .nav-search-btn { width: 44px; height: 44px; }
}

/* ─── Component overflow safety at phone widths ─── */
@media (max-width: 768px) {
  /* Long tool URLs and citation keys must not widen the page */
  .tool-meta-value, .card-article-title, .pillar-route-title { overflow-wrap: anywhere; }
  .meta-chip { white-space: normal; }

  .article-header-inner { padding-inline: var(--space-4); }
  .article-layout { padding-inline: var(--space-4); }

  /* Stacked, full-width cards read better than cramped columns */
  .track-grid, .pillar-route-grid { grid-template-columns: 1fr; }
  .start-proof, .hub-stats { gap: var(--space-5); }
  .start-hero { padding: var(--space-12) 0 var(--space-10); }
  .start-tracks, .start-steps, .start-popular, .start-pillars, .start-cta { padding: var(--space-12) 0; }
  .pillar-hero, .hub-hero { padding: var(--space-10) 0 var(--space-8); }

  /* The right sidebar drops below the article on mobile — sticky would
     otherwise pin it mid-scroll. */
  .article-right-sidebar .sidebar-sticky { position: static; }
}

@media (max-width: 480px) {
  .start-proof, .hub-stats { gap: var(--space-4) var(--space-6); }
  .start-proof strong { font-size: var(--text-2xl); }
  .step-rung { padding: var(--space-5); }
  .track-card { padding: var(--space-5); }
  .meta-chips { gap: 6px; }
  .meta-chip { font-size: 0.75rem; padding: 5px 9px; }
}

/* Nothing may cause a horizontal scrollbar on a phone */
html, body { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════════
   8. "LOCAL ONLY" RIBBON
   Only rendered in `hugo server` (see partials/unreleased-banner.html).
   Deliberately loud — it must be impossible to mistake an unreleased
   section for a live one.
   ═══════════════════════════════════════════════════════════════ */
.unreleased-banner {
  background: repeating-linear-gradient(
    135deg, #7A2E0E 0 14px, #8A3A14 14px 28px);
  color: #FFF3E6;
  border-bottom: 2px solid #C2410C;
}
.unreleased-banner-inner {
  max-width: var(--width-content);
  margin-inline: auto;
  padding: 12px var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
}
.unreleased-tag {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: #FFF3E6; color: #7A2E0E;
  padding: 5px 10px; border-radius: 4px;
}
.unreleased-text {
  margin: 0; font-size: 0.85rem; line-height: 1.45;
}
.unreleased-text strong { font-family: var(--font-mono); font-weight: 700; }
.unreleased-hint { display: block; opacity: 0.82; font-size: 0.8rem; }
.unreleased-hint code {
  font-family: var(--font-mono); font-size: 0.95em;
  background: rgba(255,255,255,0.14); padding: 1px 5px; border-radius: 4px;
}
@media (max-width: 640px) {
  .unreleased-banner-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-inline: var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════════
   9. RECOMMENDATIONS (affiliate pages)

   Deliberately plainer than the tool cards. An affiliate page that looks
   like an advert gets read like one, so there are no product images, no
   star ratings and no price-slash graphics — the visual weight sits on
   the "when not to buy it" line instead.
   ═══════════════════════════════════════════════════════════════════ */

.rec-container { max-width: 1080px; padding-block: var(--space-10) var(--space-12); }
.rec-header { background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%); }
.rec-title { color: var(--white); }
.rec-description { color: var(--blue-200); max-width: 60ch; }
.rec-header .section-label { color: var(--gold); }

.rec-intro {
  max-width: 68ch; margin-block: var(--space-8);
  font-size: 1.02rem; line-height: 1.72;
}
.rec-intro p { margin-bottom: var(--space-4); }

/* Disclosure — must read as a statement, not a legal footnote. */
.affiliate-disclosure {
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem; line-height: 1.6;
  max-width: 68ch; margin-block: var(--space-6);
}
[data-theme="dark"] .affiliate-disclosure {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* ── Category cards on the hub ── */
.rec-cat-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-block: var(--space-8);
}
.rec-cat-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); color: inherit; text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.rec-cat-card:hover {
  border-color: var(--blue-800); transform: translateY(-2px); text-decoration: none;
}
[data-theme="dark"] .rec-cat-card:hover { border-color: var(--gold); }
.rec-cat-card__icon { color: var(--blue-800); }
[data-theme="dark"] .rec-cat-card__icon { color: var(--gold); }
.rec-cat-card__title { font-size: 1.12rem; margin: 0; }
.rec-cat-card__desc { font-size: 0.87rem; color: var(--color-text-muted); margin: 0; line-height: 1.55; }
.rec-cat-card__count {
  margin-top: auto; padding-top: var(--space-3);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-800);
}
[data-theme="dark"] .rec-cat-card__count { color: var(--gold); }

/* ── Item cards ── */
.rec-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-block: var(--space-8);
}
.rec-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); padding: var(--space-6);
}
.rec-card__name { font-size: 1.15rem; margin: 0 0 2px; line-height: 1.3; }
.rec-card__author { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

.rec-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.rec-badge {
  font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 4px;
  background: var(--color-bg-subtle); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
/* Star count. Gold because it is the one number on the page that is
   externally verifiable — the identity colour is spent on it deliberately. */
.rec-badge--stars {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .rec-badge--stars { color: var(--gold); }
.rec-badge--free { background: #E7F5EE; color: #0B5E42; border-color: #BCE3D2; }
.rec-badge--nothing { background: #FFF3E6; color: #7A2E0E; border-color: #F0D2B4; }
[data-theme="dark"] .rec-badge--free { background: rgba(52,211,153,0.14); color: #6EE7B7; border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .rec-badge--nothing { background: rgba(251,146,60,0.14); color: #FDBA74; border-color: rgba(251,146,60,0.3); }

.rec-card__body { margin: 0; font-size: 0.9rem; line-height: 1.62; }
.rec-card__label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: var(--space-3);
}
.rec-card__label--warn { color: #A2440E; }
[data-theme="dark"] .rec-card__label--warn { color: #FDBA74; }
.rec-card__body dd { margin: 3px 0 0; }
.rec-card__audience { font-weight: 600; }
.rec-card__notfor { color: var(--color-text-muted); }

.rec-card__foot {
  margin-top: auto; padding-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.rec-card__review { font-size: 0.84rem; }
.rec-card__checked {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--color-text-muted); margin-left: auto;
}

/* Local-only editorial panel. Never rendered in a production build. */
.rec-card--unverified { border-style: dashed; }
.rec-card__editorial {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: 6px; background: #FFF3E6; color: #7A2E0E;
  font-size: 0.78rem; line-height: 1.5;
}
.rec-card__editorial p { margin: 0 0 4px; }
.rec-card__editorial p:last-child { margin-bottom: 0; }
.rec-card__editorial code { font-family: var(--font-mono); font-size: 0.95em; }
[data-theme="dark"] .rec-card__editorial { background: rgba(251,146,60,0.16); color: #FDBA74; }
.rec-withheld-note {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--color-text-muted); margin-block: var(--space-6);
}

/* ── Editorial rules block on the hub ── */
.rec-rules {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12); padding-top: var(--space-8); max-width: 72ch;
}
.rec-rules__title { font-size: 1.25rem; margin-bottom: var(--space-4); }
.rec-rules__list { padding-left: 1.2em; }
.rec-rules__list li { margin-bottom: var(--space-3); line-height: 1.65; font-size: 0.94rem; }
.rec-rules__foot { font-size: 0.88rem; color: var(--color-text-muted); margin-top: var(--space-5); }

/* ── Cross-links: the retention mechanism on every category page ── */
.rec-crosslinks {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12); padding-top: var(--space-8);
}
.rec-crosslinks__title { font-size: 1.2rem; margin-bottom: var(--space-5); }
.rec-crosslinks ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rec-crosslinks a {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border); border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: border-color var(--transition-fast);
}
.rec-crosslinks a:hover { border-color: var(--blue-800); text-decoration: none; }
[data-theme="dark"] .rec-crosslinks a:hover { border-color: var(--gold); }
.rec-crosslinks a span { font-size: 0.83rem; color: var(--color-text-muted); line-height: 1.5; }

@media (max-width: 640px) {
  .rec-grid, .rec-cat-grid { grid-template-columns: 1fr; }
  .rec-card { padding: var(--space-5); }
}