/* ──────────────────────────────────────────────────────────
   View Transitions API — cross-document navigation morphs
   smoothly between pages. Default crossfade between the
   outgoing and incoming page roots; named transitions on
   specific elements (room cards, note cards) are layered
   in via view-transition-name as the rebuild progresses.

   Supported in Chrome 126+, Safari 18+, Edge 126+. Browsers
   without support fall back to instant standard navigation.
   No fallback work required.
   ────────────────────────────────────────────────────────── */
@view-transition {
  navigation: auto;
}

/* Honour reduced-motion preferences; suppress the crossfade
   entirely for users who request it. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   The Governance Library — design system
   curated by Matthew Doyle, a mæd partners production
   ------------------------------------------------------------
   Single source of truth. Every public page imports this file.
   Edit once, every page picks it up.

   Methodology: mobile-first. The base styles (no @media wrapper)
   target the phone viewport (≤ 599px). Larger viewports add
   complexity via min-width queries. Desktop selectors are the
   final tier, not the default.

   Palette and typography are the locked Library sub-brand
   per `standard_governance_library_chrome.md`. Do not reinvent.

   Sections:
     1. Reset
     2. Tokens (palette, type, spacing, breakpoints)
     3. Document base
     4. Typography
     5. Layout primitives (page frame, section)
     6. Components (nav, footer, room-card, note-card,
        currently-playing, library-map-feature, podcast-band)
     7. Accessibility primitives
     8. Print
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. Reset
   ────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ──────────────────────────────────────────────────────────
   2. Tokens
   ────────────────────────────────────────────────────────── */
:root {
  /* ── Palette: Library sub-brand (locked, see chrome standard) ── */
  --bg:        #FAF7F2;       /* Library cream */
  --bg-2:      #F2EEE5;
  --bg-3:      #E8E3D7;
  --paper:     #FFFFFF;
  --ink:       #1A1A1A;
  --ink-2:     #2A2A2A;
  --ink-dim:   #6A6A6A;
  --ink-faint: #A9A396;
  --rule:      rgba(196,163,90,0.22);
  --rule-soft: rgba(196,163,90,0.10);
  --gold:      #B8913F;       /* Library gold */
  --gold-2:    #C4A35A;
  --gold-dim:  #8A7334;

  /* ── Per-room accents (locked) ── */
  --room-strategy:      #2E5E66;
  --room-strategy-dim:  #234A50;
  --room-strategy-tint: #E5EFF2;

  --room-risk:          #A84A2E;
  --room-risk-dim:      #863A24;
  --room-risk-tint:     #F6EAE4;

  --room-ethics:        #5A6E3A;
  --room-ethics-dim:    #47592E;
  --room-ethics-tint:   #EDF0E3;

  --room-board:         #4A2A4E;
  --room-board-dim:     #39203C;
  --room-board-tint:    #F2EBF3;
  /* OKLCH-derived alternatives for the supporting variants kick
     in on browsers that support relative colour syntax. The hex
     canonicals above remain authoritative; only derivative tints
     and dim variants are recomputed. Locked accent values are
     never overridden. See @supports block at the end of section 2. */

  /* PESTLE segment colours (inherited from PESTLE Note production)
     Used by Strategy Room rail card seg-tags. */
  --c-P:  #D99B5B;   /* political amber */
  --c-E1: #6CB87E;   /* economic green */
  --c-S:  #C66BA4;   /* social rose */
  --c-T:  #5B8AC4;   /* tech blue */
  --c-L:  #B26B6B;   /* legal brick */
  --c-E2: #7A9D6B;   /* environmental sage */

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-hi:   0 2px 4px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.09);

  /* ── Spacing scale ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  /* ── Page gutters per tier (mobile-first defaults; overridden below) ── */
  --gutter: 16px;            /* phone */
  --max-page: 1440px;

  /* ── Breakpoints (documentary; CSS custom props cannot be used in
        @media queries, but kept here as the locked numbers) ── */
  --bp-tablet-portrait: 600px;
  --bp-tablet-landscape: 900px;
  --bp-desktop: 1200px;

  /* ── Type stack ── */
  --font-display: Georgia, 'EB Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ── Type scale (mobile-first base) ──
        Body and caption come UP on phone, not down: closer reading
        distance, iOS HIG minimum body size, Apple Books precedent. ── */
  --t-h1:        36px;
  --t-h2:        20px;
  --t-h3:        28px;
  --t-lede:      16px;
  --t-body:      15px;
  --t-eyebrow:   10.5px;
  --t-caption:   12px;

  /* ── Line heights ── */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
}

/* OKLCH partial palette derivation. Browsers that support relative
   colour syntax recompute the supporting tints and dim variants
   from the canonical accents in OKLCH (perceptually uniform).
   The locked hex canonicals above remain the source of truth and
   the fallback for browsers without support. Visual difference
   is small but produces more harmonious hover/focus states across
   the four-tier responsive surface. */
@supports (color: oklch(from red l c h)) {
  :root {
    --room-strategy-dim:  oklch(from var(--room-strategy)  calc(l * 0.78) c h);
    --room-strategy-tint: oklch(from var(--room-strategy)  0.94 calc(c * 0.30) h);
    --room-risk-dim:      oklch(from var(--room-risk)      calc(l * 0.78) c h);
    --room-risk-tint:     oklch(from var(--room-risk)      0.94 calc(c * 0.30) h);
    --room-ethics-dim:    oklch(from var(--room-ethics)    calc(l * 0.78) c h);
    --room-ethics-tint:   oklch(from var(--room-ethics)    0.94 calc(c * 0.30) h);
    --room-board-dim:     oklch(from var(--room-board)     calc(l * 0.78) c h);
    --room-board-tint:    oklch(from var(--room-board)     0.94 calc(c * 0.30) h);
  }
}

/* Tablet portrait scales gutter up. */
@media (min-width: 600px) {
  :root {
    --gutter: 20px;
    --t-h1:   44px;
    --t-h3:   32px;
  }
}

/* Tablet landscape scales further. */
@media (min-width: 900px) {
  :root {
    --gutter: 24px;
    --t-h1:   56px;
    --t-h2:   22px;
    --t-h3:   36px;
    --t-lede: 17px;
    --t-body: 15px;
  }
}

/* Desktop locks the largest tier. */
@media (min-width: 1200px) {
  :root {
    --gutter: 36px;
    --t-h1:   68px;
    --t-h2:   24px;
    --t-h3:   40px;
    --t-lede: 17px;
    --t-body: 15px;
    --t-caption: 11.5px;
  }
}

/* ──────────────────────────────────────────────────────────
   3. Document base
   ────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-3);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The page frame: cream paper centred up to 1440px on desktop,
   full-width on mobile. */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  max-width: var(--max-page);
  margin: 0 auto;
}
@media (min-width: 1200px) {
  .page {
    box-shadow: 0 0 80px rgba(0,0,0,0.05);
  }
}

/* ──────────────────────────────────────────────────────────
   4. Typography
   ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: var(--lh-tight);
  color: var(--ink);
}

h1 { font-size: var(--t-h1); letter-spacing: -0.4px; line-height: 1.05; }
h2 { font-size: var(--t-h2); letter-spacing: 0.1px; }
h3 { font-size: var(--t-h3); }

em { font-style: italic; color: var(--gold); }

p { font-size: var(--t-body); color: var(--ink); }
p.lede, .lede { font-size: var(--t-lede); color: var(--ink-dim); line-height: var(--lh-body); }
p.dim { color: var(--ink-dim); }

.eyebrow {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--gold-2);
}

.caption {
  font-size: var(--t-caption);
  color: var(--ink-faint);
  letter-spacing: 0.3px;
}

/* ──────────────────────────────────────────────────────────
   5. Layout primitives
   ────────────────────────────────────────────────────────── */
.section {
  padding: var(--s-7) var(--gutter);
}
.section + .section { border-top: 1px solid var(--rule-soft); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section-head h2 .count {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  color: var(--ink-faint);
  margin-left: 12px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.section-head .subnote {
  font-size: var(--t-caption);
  color: var(--ink-faint);
  letter-spacing: 0.3px;
}

/* Phone-tier always-visible affordance. The plan forbids hover-only
   affordances; every clickable card gets a chevron that is visible
   on every tier so the click target is obvious without hover. */
.chev {
  display: inline-block;
  transition: transform .25s ease;
}
a:hover .chev,
button:hover .chev { transform: translateX(4px); }

/* ──────────────────────────────────────────────────────────
   6. Components
   ──────────────────────────────────────────────────────── */

/* ── Concept banner (suppressed at GA, present during build) ── */
.concept-banner {
  background: var(--ink); color: var(--bg);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.4px;
  padding: var(--s-2) var(--gutter);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.concept-banner .tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 3px 8px; border-radius: 3px;
  background: var(--gold); color: var(--ink); font-weight: 600;
}
.concept-banner .dim { color: rgba(255,255,255,0.55); }

/* ── Sticky top nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav .brand { display: inline-flex; align-items: center; line-height: 0; }
.nav .brand img {
  height: 32px; width: auto; display: block;
  /* Named so the View Transitions API recognises it as the same
     element across page navigations and morphs it between pages
     rather than crossfading. Visual continuity at every link click. */
  view-transition-name: brand-mark;
}
.nav .divider { width: 1px; height: 22px; background: var(--rule); opacity: 0.7; }
.nav .label { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.nav .label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(184,145,63,0.15); }
.nav .spacer { flex: 1; }

/* "← Lobby" affordance — sits between the parent-brand logo
   and the room/page label. Conveys "here's how to get back
   into the Library home" since the logo now navigates to
   maedpartners.com. Hidden on the Lobby itself (template
   gates the include). */
.lobby-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-dim);
  border-radius: 6px;
  transition: color .15s, background .15s;
  min-height: 32px;
}
.lobby-link:hover,
.lobby-link:focus-visible {
  color: var(--ink);
  background: var(--bg-2);
}
.lobby-chev {
  font-size: 14px;
  line-height: 1;
  color: var(--gold-dim);
}
.lobby-link:hover .lobby-chev,
.lobby-link:focus-visible .lobby-chev { color: var(--gold); }
@media (max-width: 599px) {
  /* On phone keep the chevron + text both visible — it's the
     primary way back from a Note page once the user is deep. */
  .lobby-link { padding: 6px 8px; }
}

.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;             /* 44px tap target */
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  font-size: 12px; color: var(--ink-dim);
  font-family: inherit;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-btn:hover,
.nav-btn:focus-visible { color: var(--ink); border-color: var(--gold-2); background: var(--paper); }
.nav-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* On phone, the label and some buttons may collapse. */
@media (max-width: 599px) {
  .nav .label { display: none; }
  .nav { gap: var(--s-3); }
}

/* ── Footer ── */
.footer {
  padding: var(--s-7) var(--gutter) var(--s-8);
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: var(--s-3);
  font-size: var(--t-caption);
  color: var(--ink-faint);
  letter-spacing: 0.3px;
}
@media (min-width: 900px) {
  .footer { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer a { color: var(--gold); }
.footer a:hover { color: var(--gold-dim); }

/* ── Room card (the four "doors" on the Lobby) ── */
.room-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: var(--s-7) var(--s-7) var(--s-6);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.room-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent, var(--gold)); opacity: 0.85;
}
.room-card:hover,
.room-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hi);
  border-color: var(--accent, var(--gold));
}
.room-card.locked { cursor: default; opacity: 0.82; }
.room-card.locked:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--rule-soft); }

.room-card .head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.room-card .kind {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px;
  font-weight: 600; color: var(--accent, var(--gold));
}
.room-card .kind .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--accent, var(--gold)); }
.room-card .status {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--ink-faint); font-weight: 600;
  padding: 3px 9px; border-radius: 4px; background: var(--bg-2);
}
.room-card .status.live {
  color: var(--accent, var(--gold));
  background: transparent;
  border: 1px solid var(--accent, var(--gold));
}
.room-card h3 { font-size: var(--t-h3); }
.room-card p { font-size: var(--t-body); color: var(--ink-dim); }
.room-card .foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-caption);
  color: var(--ink-faint);
  letter-spacing: 0.3px;
}
.room-card .enter {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent, var(--gold));
  font-weight: 500; font-size: 13px;
}

.rooms-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  padding: 0 var(--gutter) var(--s-5);
}
@media (min-width: 600px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rooms-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
@media (min-width: 1200px) { .rooms-grid { gap: var(--s-5); } }

/* ── Lobby grid (Hero + Rooms + Podcast layout container) ──
   Phone / tablet portrait: stacked vertical, DOM order
   (hero → rooms → podcast). Tablet landscape and desktop:
   reflows so Hero and Podcast share the top row, Rooms span
   the full width beneath. CSS-grid-areas means no DOM
   duplication and the phone order stays correct. */
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hero"
    "rooms"
    "podcast";
  gap: var(--s-5);
}
.lobby-hero    { grid-area: hero; }
.lobby-rooms   { grid-area: rooms; }
.lobby-podcast { grid-area: podcast; }
@media (min-width: 900px) {
  .lobby-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "hero    podcast"
      "rooms   rooms";
    gap: var(--s-6) var(--s-5);
    align-items: start;
  }
}

/* Per-room accent assignments. Used on .room-card and elsewhere. */
.room-strategy { --accent: var(--room-strategy); --accent-dim: var(--room-strategy-dim); --accent-tint: var(--room-strategy-tint); }
.room-risk     { --accent: var(--room-risk);     --accent-dim: var(--room-risk-dim);     --accent-tint: var(--room-risk-tint); }
.room-ethics   { --accent: var(--room-ethics);   --accent-dim: var(--room-ethics-dim);   --accent-tint: var(--room-ethics-tint); }
.room-board    { --accent: var(--room-board);    --accent-dim: var(--room-board-dim);    --accent-tint: var(--room-board-tint); }

/* ── Note card (Room rails, Library Map preview, etc.)
      The card itself is a query container so its descendants can
      adapt to the card's actual width, not the viewport's. This
      keeps the same .note-card markup looking right whether it
      sits in a 5-up desktop rail (~250px wide) or in a single-card
      feature panel (~600px+). Container queries supersede the
      old viewport-only @media approach for component-internal
      sizing decisions. ── */
.note-card {
  container-type: inline-size;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.note-card:hover,
.note-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hi);
  border-color: var(--gold-2);
}
.note-card.featured {
  border-color: var(--accent, var(--gold-2));
  box-shadow: 0 0 0 1px rgba(46,94,102,0.18), var(--shadow-card);
}
.note-card.featured .thumb { background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%); }
.note-card.placeholder { opacity: 0.78; }
.note-card.placeholder .thumb {
  background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 8px, var(--bg-3) 8px, var(--bg-3) 16px);
}
/* When a placeholder is also a real link (its Show Notes page exists
   and shows pending state), preserve cursor and hover behaviour. The
   reduced opacity still communicates the placeholder status. */
a.note-card.placeholder:hover,
a.note-card.placeholder:focus-visible {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-2);
}
/* Non-link placeholders (no Show Notes page yet) remain non-interactive. */
div.note-card.placeholder { cursor: default; }
div.note-card.placeholder:hover { transform: none; box-shadow: none; border-color: var(--rule-soft); }

.note-card .thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.note-card .thumb::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(196,163,90,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.note-card .thumb-label {
  font-family: var(--font-display);
  font-size: 20px; color: var(--ink-2); font-weight: 400;
  text-align: center; line-height: 1.15;
  padding: 0 var(--s-4);
  position: relative; z-index: 2;
}
.note-card .thumb-label em { font-style: italic; color: var(--gold); }
.note-card .seg-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 4px;
  color: #fff; font-weight: 600;
  z-index: 3;
}
.note-card .play {
  position: absolute; left: 14px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(26,26,26,0.85); color: #fff;
  display: grid; place-items: center; font-size: 11px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 3;
}
.note-card .duration {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(26,26,26,0.85); color: #fff;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 4px;
  z-index: 3;
}
.note-card .body { padding: var(--s-3) var(--s-4) var(--s-5); }
.note-card .title { font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.35; margin-bottom: 4px; }
.note-card .sub { font-size: var(--t-caption); color: var(--ink-dim); }
.note-card .meta {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.note-card .meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }

/* Container-query-driven sizing inside note-card. Card scales
   its internal type up as its own container width grows. */
@container (min-width: 280px) {
  .note-card .thumb-label { font-size: 22px; }
  .note-card .title { font-size: 15px; }
}
@container (min-width: 360px) {
  .note-card .thumb-label { font-size: 26px; }
  .note-card .title { font-size: 16px; }
  .note-card .body { padding: var(--s-4) var(--s-5) var(--s-5); }
}
@container (min-width: 460px) {
  .note-card .thumb-label { font-size: 30px; }
  .note-card .title { font-size: 17px; line-height: 1.4; }
  .note-card .sub { font-size: 13px; }
}

/* Phone tier: rails scroll horizontally with snap (preserves the rail metaphor). */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 600px) {
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }
}
@media (min-width: 900px) { .rail { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .rail { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); } }

/* ── Currently playing card (Lobby feature) ── */
.cp-card {
  display: grid; grid-template-columns: 1fr; gap: var(--s-7);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .cp-card { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
}
.cp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
}
.cp-body { display: flex; flex-direction: column; justify-content: center; }
.cp-body .loc {
  font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--accent, var(--room-strategy));
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: var(--s-3);
}
.cp-body .loc .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--accent, var(--room-strategy)); }
.cp-body h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400; line-height: 1.1;
  margin-bottom: var(--s-2);
}
.cp-body .sub { font-size: var(--t-body); color: var(--ink-dim); margin-bottom: var(--s-5); }
.cp-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--accent, var(--room-strategy));
  color: #fff;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  width: fit-content;
  min-height: 44px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cp-cta:hover,
.cp-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46,94,102,0.22);
}

/* ── YouTube lite-embed (poster + click-to-load) ── */
.yt-lite {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity .2s; }
.yt-lite:hover img { opacity: 1; }
.yt-lite .play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.yt-lite .play::before {
  content: "▶";
  font-size: 32px; color: #fff;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(26,26,26,0.7);
  padding-left: 4px;
}

/* ──────────────────────────────────────────────────────────
   7. Accessibility primitives
   ────────────────────────────────────────────────────────── */

/* WCAG 2.1 AA focus indicator. */
*:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Screen-reader only utility. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link, visible on focus. */
.skip-link {
  position: absolute; top: -100px; left: var(--gutter);
  padding: 8px 14px;
  background: var(--ink); color: var(--bg);
  border-radius: 6px;
  font-size: 13px;
  z-index: 100;
}
.skip-link:focus { top: var(--s-3); }

/* Reduced motion: every transition and animation collapses. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Room identity strip (sits above the nav, sub-3px) ── */
.room-strip { height: 3px; background: var(--accent, var(--gold)); }

/* ── Room feature: video + side panel ── */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding: var(--s-7) var(--gutter) var(--s-8);
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 320px; gap: var(--s-7); }
}
@media (min-width: 1200px) {
  .feature { grid-template-columns: 1fr 360px; }
}

.video-wrap {
  position: relative;
  background: var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-hi);
  aspect-ratio: 16 / 9;
}
.video-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  color: var(--ink-dim);
}
.video-meta .pill {
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  font-size: 11px; color: var(--ink-2);
}

.side-panel {
  display: flex; flex-direction: column; gap: var(--s-5);
}
.panel-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}
.panel-card h3.panel-eyebrow {
  font-family: var(--font-body);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--gold); font-weight: 600;
  margin-bottom: var(--s-3);
}
.panel-card h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-2); line-height: 1.25;
}
.panel-card .desc {
  font-size: 13px; color: var(--ink-dim); margin-bottom: var(--s-4);
  line-height: 1.55;
}

.chapters, .pair-list { list-style: none; padding: 0; margin: 0; }
.chapters li {
  display: grid; grid-template-columns: 44px 14px 1fr;
  align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s, padding-left .15s;
}
.chapters li:first-child { border-top: none; }
.chapters li:hover, .chapters li:focus-visible { color: var(--gold-dim); padding-left: 3px; }
.chapters li.active { color: var(--ink); font-weight: 500; }
.chapters .time { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 11.5px; }
.chapters .swatch { width: 9px; height: 9px; border-radius: 2px; }

.pair-list li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
  transition: color .15s, padding-left .15s;
}
.pair-list li:first-child { border-top: none; }
.pair-list li:hover { color: var(--gold-dim); padding-left: 3px; }
.pair-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--rule-soft);
  display: grid; place-items: center;
  font-size: 11px; color: var(--gold); font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.pair-kind {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--ink-faint); font-weight: 600; margin-top: 2px;
}

/* ── Rail sections ── */
.rail-section {
  padding: var(--s-7) var(--gutter) var(--s-3);
}
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.rail-head h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  letter-spacing: 0.1px;
}
.rail-head h2 .count {
  font-family: var(--font-body);
  font-size: 11px; color: var(--ink-faint); margin-left: 10px;
  letter-spacing: 0.5px; font-weight: 500;
}

.view-toggles {
  display: inline-flex; gap: 4px;
  background: var(--bg-2);
  padding: 3px; border-radius: 999px;
  border: 1px solid var(--rule-soft);
  overflow-x: auto;
  max-width: 100%;
}
.view-toggle {
  padding: 8px 14px; border-radius: 999px;
  font-size: 11px; color: var(--ink-dim);
  background: transparent;
  border: 0; font-family: inherit;
  white-space: nowrap;
  transition: background .2s, color .2s;
  min-height: 32px;
}
.view-toggle.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* ── Spine section (case-anchor grouping inside a Room rail) ── */
.spine-section {
  margin-bottom: var(--s-5);
  padding-top: var(--s-3);
}
.spine-section + .spine-section {
  border-top: 1px dashed var(--rule-soft);
  padding-top: var(--s-5);
}
.spine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.spine-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 600px)  { .spine-name { font-size: 18px; } }
@media (min-width: 1200px) { .spine-name { font-size: 19px; } }
.spine-mk {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent, var(--gold));
}
.spine-mk--standalone { background: var(--gold); transform: rotate(45deg); border-radius: 1px; }
.spine-section--standalone .spine-name { font-style: italic; color: var(--ink-2); }
.spine-section--auto .spine-name::after {
  content: "auto";
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.spine-count {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  font-weight: 500;
  white-space: nowrap;
}
.spine-empty {
  font-size: var(--t-caption);
  color: var(--ink-dim);
  font-style: italic;
  padding: var(--s-3) 0;
  margin: 0;
}

/* ── Library Map feature card (Lobby promo for /map/) ── */
.lm-card {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.lm-card::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.lm-card:hover, .lm-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hi);
  border-color: var(--gold-2);
}
@media (min-width: 900px) {
  .lm-card { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
}
.lm-preview {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(74,42,78,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 25%, rgba(46,94,102,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(168,74,46,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(90,110,58,0.12) 0%, transparent 45%),
    var(--bg);
  border: 1px solid var(--rule-soft);
  display: grid;
  place-items: center;
  position: relative;
}
.lm-preview .dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 78%;
  padding: 14px;
}
.lm-preview .dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent, var(--gold));
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.lm-body {
  display: flex; flex-direction: column; justify-content: center;
}
.lm-body .loc {
  font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--gold-dim);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: var(--s-3);
}
.lm-body .loc .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.lm-body h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--s-2);
}
.lm-body .sub {
  font-size: var(--t-body);
  color: var(--ink-dim);
  margin-bottom: var(--s-5);
}
.lm-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  width: fit-content;
  min-height: 44px;
  border-top: 2px solid var(--gold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lm-cta:hover, .lm-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(26,26,26,0.22);
}

/* Phone shows the dot-grid preview; tablet+ shows the live SVG. */
.lm-preview--phone    { display: grid; }
.lm-preview--tabletup { display: none; }
@media (min-width: 600px) {
  .lm-preview--phone    { display: none; }
  .lm-preview--tabletup { display: grid; }
}

/* Tablet+ live preview — same nodes/positions as /map/, smaller. */
.lm-svg-mini { width: 100%; height: 100%; display: block; }
.lm-mini-link {
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  opacity: 0.45;
}
.lm-mini-link--reference { stroke: var(--gold-2); stroke-dasharray: 3 3; opacity: 0.55; }
.lm-mini-link--bp        { stroke: var(--gold);   stroke-width: 2; opacity: 0.7; }
.lm-mini-link--podcast   { stroke: var(--ink-2);  stroke-dasharray: 1 4; opacity: 0.5; }
.lm-mini-node {
  stroke: var(--paper);
  stroke-width: 2;
}
.lm-mini-node--board    { fill: var(--room-board);    }
.lm-mini-node--strategy { fill: var(--room-strategy); }
.lm-mini-node--risk     { fill: var(--room-risk);     }
.lm-mini-node--ethics   { fill: var(--room-ethics);   }
.lm-mini-node--podcast  { fill: var(--ink);           }

/* ──────────────────────────────────────────────────────────
   Reading Map page (/map/)
   ────────────────────────────────────────────────────────── */

.map-meta {
  font-size: var(--t-caption);
  color: var(--ink-dim);
  margin-top: var(--s-3);
}
.map-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}

/* ── Tablet+ stage (SVG + sticky controls) ── */
.map-stage {
  display: none; /* hidden on phone; outline takes over */
  position: relative;
  margin: var(--s-6) 0 var(--s-7);
  padding: 0 var(--gutter);
}
@media (min-width: 600px) {
  .map-stage { display: block; }
  .map-outline { display: none; }
}

/* ── Sticky control bar ── */
.map-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule-soft);
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--rule);
}
.map-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ml-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-dim);
  font-weight: 600;
  margin-right: 4px;
}
.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
  min-height: 28px;
}
.ml-chip:hover { border-color: var(--ink-dim); }
.ml-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ml-chip:not(.is-active) {
  opacity: 0.45;
  background: var(--bg-2);
  text-decoration: line-through;
}

.ml-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ml-swatch--board    { background: var(--room-board); }
.ml-swatch--strategy { background: var(--room-strategy); }
.ml-swatch--risk     { background: var(--room-risk); }
.ml-swatch--ethics   { background: var(--room-ethics); }
.ml-swatch--podcast  { background: var(--ink); }

.ml-line {
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--ink-2);
  flex-shrink: 0;
}
.ml-line--spine     { background: var(--ink-2); height: 2px; }
.ml-line--reference { background: var(--gold-2); height: 2px;
  background-image: linear-gradient(to right, var(--gold-2) 50%, transparent 50%);
  background-size: 6px 100%;
}
.ml-line--bp        { background: var(--gold); height: 3px; }
.ml-line--podcast   { background: var(--ink-2); height: 2px;
  background-image: linear-gradient(to right, var(--ink-2) 50%, transparent 50%);
  background-size: 4px 100%;
}

/* ── SVG canvas ── */
.map-svg-wrap {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.map-svg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: pan-x pan-y;
}

/* Links — base + per-type styling */
.map-link {
  stroke: var(--ink-2);
  stroke-width: 1.6;
  opacity: 0.55;
  transition: opacity .2s ease, stroke-width .2s ease;
}
.map-link--spine     { stroke: var(--ink-2); }
.map-link--reference { stroke: var(--gold-2); stroke-dasharray: 5 4; }
.map-link--bp        { stroke: var(--gold); stroke-width: 2.4; opacity: 0.85; }
.map-link--podcast   { stroke: var(--ink-2); stroke-dasharray: 2 5; opacity: 0.6; }

/* Within-Room spine links pick up the Room accent. */
.map-link--room-board    { stroke: var(--room-board); }
.map-link--room-strategy { stroke: var(--room-strategy); }
.map-link--room-risk     { stroke: var(--room-risk); }
.map-link--room-ethics   { stroke: var(--room-ethics); }

/* Nodes */
.map-node { cursor: pointer; outline: none; }
.map-node-bg {
  stroke: var(--paper);
  stroke-width: 2.5;
  transition: r 0.2s ease, stroke-width 0.2s ease;
}
.map-node-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: #fff;
  pointer-events: none;
  user-select: none;
}
.map-node--board    .map-node-bg { fill: var(--room-board); }
.map-node--strategy .map-node-bg { fill: var(--room-strategy); }
.map-node--risk     .map-node-bg { fill: var(--room-risk); }
.map-node--ethics   .map-node-bg { fill: var(--room-ethics); }
.map-node--podcast  .map-node-bg { fill: var(--ink); }

/* Pending Notes — slight desaturation to read as not-yet-live. */
.map-node.is-pending .map-node-bg { opacity: 0.55; }
.map-node.is-pending .map-node-label { opacity: 0.7; }

/* Hover/focus state — node pops, others dim. */
.map-svg:hover .map-link { opacity: 0.18; }
.map-svg:hover .map-node-bg { opacity: 0.30; }
.map-node:hover .map-node-bg,
.map-node:focus-visible .map-node-bg {
  opacity: 1;
  stroke: var(--gold);
  stroke-width: 3.5;
}
.map-node:focus-visible .map-node-bg {
  filter: drop-shadow(0 0 6px var(--gold-2));
}

/* Filter behaviour — data-room-<X>="off" hides that Room's nodes
   and the within-Room spine links coloured for that Room. */
.map-stage[data-room-board="off"]    .map-node--board,
.map-stage[data-room-board="off"]    .map-link--room-board    { display: none; }
.map-stage[data-room-strategy="off"] .map-node--strategy,
.map-stage[data-room-strategy="off"] .map-link--room-strategy { display: none; }
.map-stage[data-room-risk="off"]     .map-node--risk,
.map-stage[data-room-risk="off"]     .map-link--room-risk     { display: none; }
.map-stage[data-room-ethics="off"]   .map-node--ethics,
.map-stage[data-room-ethics="off"]   .map-link--room-ethics   { display: none; }
.map-stage[data-room-podcast="off"]  .map-node--podcast,
.map-stage[data-room-podcast="off"]  .map-link--podcast       { display: none; }

/* Filter behaviour — data-link-<type>="off" hides that link type. */
.map-stage[data-link-spine="off"]     .map-link--spine     { display: none; }
.map-stage[data-link-reference="off"] .map-link--reference { display: none; }
.map-stage[data-link-bp="off"]        .map-link--bp        { display: none; }
.map-stage[data-link-podcast="off"]   .map-link--podcast   { display: none; }

/* ── Tooltip ── */
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: var(--shadow-hi);
  min-width: 180px;
  max-width: 280px;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 4;
}
.map-tooltip.is-visible { opacity: 1; }
.map-tooltip[data-room="board"]    { border-top-color: var(--room-board); }
.map-tooltip[data-room="strategy"] { border-top-color: var(--room-strategy); }
.map-tooltip[data-room="risk"]     { border-top-color: var(--room-risk); }
.map-tooltip[data-room="ethics"]   { border-top-color: var(--room-ethics); }
.map-tooltip[data-room="podcast"]  { border-top-color: var(--ink); }
.mt-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--ink-dim);
  font-weight: 600;
}
.mt-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 2px 0 3px;
  line-height: 1.25;
}
.mt-meta {
  font-size: 11.5px;
  color: var(--ink-2);
}

/* ── How-to-read key grid (below the map) ── */
.map-key-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: 0 var(--gutter);
}
@media (min-width: 600px)  { .map-key-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .map-key-grid { grid-template-columns: repeat(4, 1fr); } }
.map-key-item {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: var(--s-4);
}
.map-key-item .ml-line { width: 32px; margin-bottom: var(--s-2); }
.map-key-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.map-key-item p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   Phone outline (< 600px, alternative to the SVG)
   ────────────────────────────────────────────────────────── */

.map-outline {
  display: block;
  padding: 0 var(--gutter);
  margin: var(--s-5) 0 var(--s-7);
}
.map-outline-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: var(--s-3) 0;
  font-size: 11.5px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--s-4);
}
.map-outline-legend > span:not(.ml-swatch) {
  margin-right: 6px;
}

.map-outline-room {
  margin-bottom: var(--s-6);
  padding-top: var(--s-2);
}
.map-outline-room-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-soft);
}
.map-outline-room-head .ml-swatch { width: 14px; height: 14px; }
.map-outline-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-dim);
  font-weight: 500;
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.map-outline-spine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--rule-soft);
}
.map-outline-spine-head:first-child { margin-top: 0; }
.map-outline-spine-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.1px;
}
.map-outline-spine-count {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.4px;
}

.map-outline-list { list-style: none; padding: 0; margin: 0; }
.map-outline-item {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--rule-soft);
}
.map-outline-item:last-child { border-bottom: none; }
.map-outline-item.is-pending { opacity: 0.65; }
.map-outline-item.is-pending .map-outline-num { background: var(--ink-faint); }

.map-outline-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
  min-height: 44px;
}
.map-outline-num {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent, var(--ink));
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.map-outline-room--board    { --accent: var(--room-board); }
.map-outline-room--strategy { --accent: var(--room-strategy); }
.map-outline-room--risk     { --accent: var(--room-risk); }
.map-outline-room--ethics   { --accent: var(--room-ethics); }
.map-outline-room--podcast  { --accent: var(--ink); }

.map-outline-body {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 6px;
}
.map-outline-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.map-outline-sub {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.4;
}

/* Cross-ref chips — small accent-coloured pills, keyed to chrome palette. */
.map-outline-chips {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 48px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.map-outline-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  max-width: 100%;
  min-height: 28px;
}
.map-outline-chip::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--chip-accent, var(--ink));
  flex-shrink: 0;
}
.map-outline-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.map-outline-chip--board    { --chip-accent: var(--room-board); }
.map-outline-chip--strategy { --chip-accent: var(--room-strategy); }
.map-outline-chip--risk     { --chip-accent: var(--room-risk); }
.map-outline-chip--ethics   { --chip-accent: var(--room-ethics); }
.map-outline-chip--podcast  { --chip-accent: var(--ink); }
/* Link-type variant: BP time-slice chips get a gold ring. */
.map-outline-chip--bp { box-shadow: inset 0 0 0 1.5px var(--gold); }
.map-outline-chip--podcast { background: var(--bg-2); }

/* Print: phone outline always renders, control bar hidden. */
@media print {
  .map-stage     { display: none !important; }
  .map-outline   { display: block !important; }
  .map-outline-legend { display: none; }
}

/* ── Podcast band (inverse-ground strip) ── */
.pod-band {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  padding: var(--s-7) var(--s-6);
  display: grid; grid-template-columns: 1fr; gap: var(--s-7);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pod-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gold); opacity: 0.9;
}
@media (min-width: 900px) {
  .pod-band { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); padding: var(--s-8); }
}

.pod-band .eyebrow-dark {
  font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gold-2); font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
}
.pod-band .eyebrow-dark::before {
  content: ""; width: 22px; height: 1px; background: var(--gold-2);
}
.pod-band h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: #fff;
  margin: var(--s-4) 0 var(--s-3);
}
@media (min-width: 900px) { .pod-band h3 { font-size: 40px; } }
.pod-band h3 em { font-style: italic; color: var(--gold-2); }
.pod-band p.sub {
  font-size: var(--t-lede);
  color: rgba(255,255,255,0.72);
  line-height: var(--lh-body);
  max-width: 460px;
  margin-bottom: var(--s-5);
}

.pod-band .subscribe { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pod-band .sub-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 12px; letter-spacing: 0.2px;
  min-height: 44px;
  transition: background .2s, border-color .2s;
}
.pod-band .sub-pill:hover, .pod-band .sub-pill:focus-visible {
  background: rgba(255,255,255,0.09);
  border-color: var(--gold-2);
}
.pod-band .sub-pill .mk {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2);
}

.pod-band .season-map {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: var(--t-caption);
  color: rgba(255,255,255,0.55);
}
.pod-band .sm-item { display: inline-flex; align-items: center; gap: 8px; }
.pod-band .sm-dot { width: 8px; height: 8px; border-radius: 2px; }
.pod-band .sm-item strong { color: rgba(255,255,255,0.9); font-weight: 500; }

.pod-band .latest {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center; gap: var(--s-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: var(--s-4) var(--s-5);
  transition: border-color .2s, background .2s;
  align-self: end;
}
.pod-band .latest:hover, .pod-band .latest:focus-visible {
  border-color: var(--gold-2);
  background: rgba(255,255,255,0.07);
}
.pod-band .latest .art {
  width: 56px; height: 56px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold-2));
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 26px; color: var(--ink); font-weight: 500;
  letter-spacing: -0.4px;
}
.pod-band .latest .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pod-band .latest .meta .ep-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--gold-2); font-weight: 600;
}
.pod-band .latest .meta .ep-title {
  font-family: var(--font-display);
  font-size: 16px; color: #fff; line-height: 1.25;
}
.pod-band .latest .meta .ep-dur {
  font-size: 11px; color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.pod-band .latest .play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center;
  font-size: 12px; padding-left: 2px;
  transition: transform .2s ease;
}
.pod-band .latest:hover .play { transform: scale(1.08); }

/* Pre-launch "Coming Summer 2026" badge — replaces the subscribe
   pills, season map, and latest-episode card while the podcast
   isn't yet on Apple/Spotify. When the podcast launches, restore
   the richer pod-band from git history. */
.pod-coming {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--s-4);
  padding: 7px 14px;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  background: rgba(196, 163, 90, 0.10);
  color: var(--gold-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
}
.pod-coming::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* Pod-band inside the lobby-grid — tightens slightly at >= 900px.
   The card is now much smaller (no subscribe pills / latest card)
   so the previous heavy override is dialled back. */
@media (min-width: 900px) {
  .lobby-grid .pod-band {
    padding: var(--s-5) var(--s-5);
    gap: var(--s-4);
    grid-template-columns: 1fr;
  }
  .lobby-grid .pod-band h3 {
    font-size: 26px;
    margin: var(--s-3) 0 var(--s-2);
    line-height: 1.1;
  }
  .lobby-grid .pod-band p.sub {
    font-size: var(--t-body);
    margin-bottom: var(--s-3);
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────
   8. Editorial pages (about, disclaimers, synthesis, case
      studies, whitepapers, future Show Notes).
      Mobile-first single-column reading experience. The
      measure stays narrow on every tier so line length
      respects the 60-75 character ideal.
   ────────────────────────────────────────────────────────── */
.editorial {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-9);
}
.editorial > section {
  padding-top: var(--s-7);
  padding-bottom: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.editorial > section:first-of-type { border-top: 0; }

.editorial h1 {
  font-size: var(--t-h1);
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
}
.editorial .subtitle {
  font-size: var(--t-lede);
  color: var(--ink-dim);
  line-height: var(--lh-body);
  margin-bottom: var(--s-5);
}
.editorial h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
  display: flex; align-items: baseline; gap: var(--s-3);
}
@media (min-width: 900px) { .editorial h2 { font-size: 28px; } }

.editorial h2 .num {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: var(--gold-dim);
  letter-spacing: 1.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.editorial h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  margin: var(--s-5) 0 var(--s-2);
}
@media (min-width: 900px) { .editorial h3 { font-size: 22px; } }

.editorial h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: var(--s-5) 0 var(--s-2);
  color: var(--ink-2);
  text-transform: uppercase;
}
.editorial p {
  font-size: var(--t-lede);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.editorial p.dim, .editorial p.scope-meta { color: var(--ink-dim); font-size: var(--t-body); }
.editorial p.scope-meta .lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gold-dim);
  margin-right: 8px;
}
.editorial p.status-line {
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--gold);
  padding: var(--s-4) var(--s-5);
  border-radius: 6px;
  font-size: var(--t-body);
}
.editorial ul, .editorial ol { padding-left: var(--s-5); margin-bottom: var(--s-4); }
.editorial li { font-size: var(--t-lede); line-height: var(--lh-body); margin-bottom: var(--s-2); color: var(--ink-2); }
.editorial li strong { color: var(--ink); }
.editorial blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--gold);
  background: var(--bg-2);
  border-radius: 6px;
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--t-body);
}
.editorial hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

/* Show Notes pages: per-Note hero + video frame + editorial body. */
.note-hero {
  padding: var(--s-7) var(--gutter) var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.note-hero-inner {
  max-width: 720px; margin: 0 auto;
}
.note-hero h1 {
  font-size: var(--t-h1); margin-top: var(--s-3); margin-bottom: var(--s-3);
}
.note-hero .note-meta {
  font-size: var(--t-lede); color: var(--ink-dim);
  line-height: var(--lh-body); margin-bottom: var(--s-4);
}
.note-hero .pills {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.note-hero .pill {
  padding: 4px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule-soft);
  font-size: var(--t-caption); color: var(--ink-2);
}
.note-hero .pill-status.live {
  background: rgba(46,153,103,0.10);
  border-color: rgba(46,153,103,0.30);
  color: #2a9d6e;
  font-weight: 600;
}
.note-hero .pill-status.scheduled {
  background: rgba(184,145,63,0.10);
  border-color: rgba(184,145,63,0.30);
  color: var(--gold-dim);
  font-weight: 600;
}

.note-video-wrap {
  max-width: 1024px; margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-5);
}
.note-video-wrap .yt-lite {
  border-radius: 12px;
  box-shadow: var(--shadow-hi);
}
.yt-lite-pending {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}
.yt-lite-pending .play::before {
  background: rgba(26,26,26,0.4);
}

.note-pair-with {
  max-width: 720px; margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-9);
  border-top: 1px solid var(--rule-soft);
  margin-top: var(--s-7);
}
.note-pair-with h3 {
  font-family: var(--font-body);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--gold-dim); font-weight: 600;
  margin-bottom: var(--s-4);
}
.note-pair-with .pair-list { list-style: none; padding: 0; margin: 0; }
.note-pair-with .pair-list li {
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-soft);
}
.note-pair-with .pair-list li:first-child { border-top: 0; }
.note-pair-with .pair-list a {
  display: flex; flex-direction: column; gap: 3px;
  color: var(--ink); text-decoration: none;
}
.note-pair-with .pair-list a:hover span:first-child { color: var(--gold-dim); }

.note-anchors {
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--t-body);
}

/* Editorial tables (whitepaper scorecard, briefing tables). */
.editorial table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  display: block;
  overflow-x: auto;
}
@media (min-width: 600px) { .editorial table { display: table; } }
.editorial table th {
  background: rgba(46,94,102,0.06);
  text-align: left;
  padding: var(--s-3);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.editorial table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.55;
}
.editorial table tr:last-child td { border-bottom: 0; }
.editorial table tr:nth-child(even) td { background: var(--bg-2); }
.editorial a { color: var(--gold-dim); text-decoration: underline; text-underline-offset: 3px; }
.editorial a:hover { color: var(--gold); }
.editorial .endmark {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-faint);
}

/* Editorial hero (the section preceding the article body) */
.editorial-hero {
  padding: var(--s-7) var(--gutter) var(--s-5);
}
.editorial-hero .pills {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-4);
}
.editorial-hero .pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.editorial-hero .pill.audience {
  background: var(--bg-2);
  border-color: var(--rule);
  color: var(--ink);
}

/* About-page room scope cards (custom, only used on about) */
.rooms-stack {
  display: grid; gap: var(--s-4); margin-top: var(--s-4);
}
.room-scope {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent, var(--gold));
  border-radius: 8px;
  padding: var(--s-5);
}
.room-scope .room-kind {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 1.3px;
  font-weight: 600;
  color: var(--accent, var(--gold));
  margin-bottom: var(--s-2);
}
.room-scope .room-kind .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--accent, var(--gold)); }
.room-scope h3 { margin-top: 4px; }

/* About-page principles grid */
.principles {
  display: grid; gap: var(--s-4); margin-top: var(--s-4);
}
@media (min-width: 600px) {
  .principles { grid-template-columns: repeat(2, 1fr); }
}
.principle {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: var(--s-5);
}
.principle h4 { margin-top: 0; }
.principle p { font-size: var(--t-body); }

/* About-page curator block */
.curator {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4);
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: var(--s-5);
  margin-top: var(--s-4);
}
.curator .badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px;
}
.curator h4 { margin-top: 0; text-transform: none; font-size: 18px; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.curator .role { font-size: var(--t-caption); color: var(--ink-faint); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: var(--s-3); }

/* ──────────────────────────────────────────────────────────
   9. Synthesis flow — strategy-method visualisations
      (Porter, Blue Ocean, Process, Scenario; case-study
      walkthroughs in /strategy/cases/...).

      Mobile-first: vertical stack of stages, each stage is a
      label strip + a framework card. From tablet landscape
      (≥ 900px) the label moves to a 160px column on the
      left, the card on the right. Connectors between stages
      become vertical chevrons on phone, SVG arrows on desktop.

      Editorial detail (the "tooltip" on the shipped pages) is
      always inline on every tier. No hover-only content.
   ────────────────────────────────────────────────────────── */

.synthesis-flow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-9);
}

.flow-intro {
  text-align: center;
  margin: 0 auto var(--s-7);
  max-width: 720px;
  padding: 0 var(--gutter);
}
.flow-intro .eyebrow { margin-bottom: var(--s-3); justify-content: center; }
.flow-intro h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
}
@media (min-width: 900px) { .flow-intro h2 { font-size: 28px; } }
.flow-intro p {
  font-size: var(--t-lede);
  color: var(--ink-dim);
  line-height: var(--lh-body);
}

.flow {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .flow { gap: var(--s-4); }
}

.flow-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .flow-stage {
    grid-template-columns: 160px 1fr;
    gap: var(--s-5);
    align-items: start;
  }
}

.flow-stage-label {
  display: flex; flex-direction: row; align-items: baseline; gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) 0;
}
@media (min-width: 900px) {
  .flow-stage-label {
    flex-direction: column; align-items: flex-start;
    padding: var(--s-3) 0;
    position: sticky; top: 80px;
  }
}

.flow-stage-num {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent, var(--gold));
}
.flow-stage-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
}
@media (min-width: 900px) { .flow-stage-name { font-size: 19px; margin-top: 2px; } }
.flow-stage-desc {
  font-size: var(--t-caption);
  color: var(--ink-dim);
  line-height: 1.4;
  flex-basis: 100%;
}
@media (min-width: 900px) { .flow-stage-desc { margin-top: 6px; } }

/* Framework card */
.framework-card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--accent-soft, var(--rule));
  border-radius: 12px;
  padding: var(--s-5);
  overflow: hidden;
}
.framework-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent, var(--gold));
}

.framework-card .card-header {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.framework-card .card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent, var(--gold));
  color: #fff;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.framework-card .card-title {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
}
.framework-card .card-subtitle {
  font-size: var(--t-caption);
  color: var(--ink-dim);
  margin-top: 2px;
}
.framework-card .card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.framework-card .card-body strong { color: var(--ink); }

.data-pills {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-3);
}
.data-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--accent-tint, rgba(184,145,63,0.10));
  color: var(--accent, var(--gold-dim));
}

/* Theme colours per stage. Verbatim from shipped Porter page.
   --accent drives the strip, card-icon background, card-title
   underline-on-hover, etc. --accent-soft is the card border at rest.
   --accent-tint backs data-pills. */
.theme-external {
  --accent: #5b8af5;
  --accent-soft: rgba(91,138,245,0.20);
  --accent-tint: rgba(91,138,245,0.10);
}
.theme-internal {
  --accent: #42dba5;
  --accent-soft: rgba(66,219,165,0.20);
  --accent-tint: rgba(66,219,165,0.10);
}
.theme-synthesis {
  --accent: #f59b42;
  --accent-soft: rgba(245,155,66,0.20);
  --accent-tint: rgba(245,155,66,0.10);
}
.theme-generation {
  --accent: #a66bf5;
  --accent-soft: rgba(166,107,245,0.20);
  --accent-tint: rgba(166,107,245,0.10);
}
.theme-output {
  --accent: #e05555;
  --accent-soft: rgba(224,85,85,0.20);
  --accent-tint: rgba(224,85,85,0.10);
}

/* Inline framework detail (replaces the desktop-only hover tooltip).
   Always present in the DOM; visible on every tier. Lives inside the
   framework-card. */
.framework-detail {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--accent-tint, rgba(46,94,102,0.04));
  border: 1px solid var(--accent-soft, var(--rule));
  border-radius: 8px;
}
.framework-detail h4 {
  font-family: var(--font-body);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent, var(--gold-dim));
  font-weight: 700;
  margin: 0 0 var(--s-2);
}
.framework-detail h4 + h4 { margin-top: var(--s-3); }
.framework-detail p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.framework-detail .detail-item {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: 5px 0;
}
.framework-detail .detail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.framework-detail .detail-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
}
.framework-detail .detail-text strong { color: var(--ink); }
.framework-detail .detail-note {
  background: rgba(46,94,102,0.05);
  border-left: 2px solid var(--accent, var(--gold));
  padding: var(--s-2) var(--s-3);
  border-radius: 0 6px 6px 0;
  margin-top: var(--s-2);
}
.framework-detail .detail-note p {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin: 0;
}

/* SWOT-style 4-cell grid (stage 3) */
.swot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: var(--s-3);
}
@media (min-width: 600px) {
  .swot-grid { grid-template-columns: 1fr 1fr; }
}
.swot-cell {
  padding: var(--s-3);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.swot-cell .swot-cell-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; margin-bottom: 4px;
}
.swot-cell.s { background: rgba(66,219,165,0.08); border: 1px solid rgba(66,219,165,0.2); }
.swot-cell.s .swot-cell-label { color: #2a9d6e; }
.swot-cell.w { background: rgba(224,85,85,0.06); border: 1px solid rgba(224,85,85,0.15); }
.swot-cell.w .swot-cell-label { color: #e05555; }
.swot-cell.o { background: rgba(91,138,245,0.06); border: 1px solid rgba(91,138,245,0.15); }
.swot-cell.o .swot-cell-label { color: #5b8af5; }
.swot-cell.t { background: rgba(245,155,66,0.06); border: 1px solid rgba(245,155,66,0.15); }
.swot-cell.t .swot-cell-label { color: #f59b42; }
.swot-cell .swot-items { color: var(--ink-2); font-size: 11.5px; }

/* TOWS matrix (stage 4) */
.tows-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0;
  margin-top: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  font-size: 11.5px;
}
.tows-cell {
  padding: var(--s-2) var(--s-3);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  background: var(--paper);
}
.tows-cell:nth-child(3n) { border-right: none; }
.tows-cell.tows-header {
  background: rgba(46,94,102,0.04);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
}
.tows-cell.tows-row-header {
  background: rgba(46,94,102,0.04);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  writing-mode: horizontal-tb;
}
.tows-cell strong { color: var(--accent, var(--ink)); display: block; margin-bottom: 2px; }
.tows-cell em { font-style: italic; color: var(--ink-dim); display: block; margin-top: 2px; font-size: 11px; }

/* Connector zone between stages — vertical chevron on phone,
   simple horizontal rule on desktop (kept light; the editorial
   intent is the stage cards, the connectors are punctuation). */
.flow-connector {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-2) 0;
  color: var(--accent, var(--ink-faint));
}
.flow-connector .connector-text {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.flow-connector .connector-arrow {
  font-size: 22px;
  line-height: 1;
  color: var(--accent, var(--ink-faint));
  opacity: 0.7;
}
@media (min-width: 900px) {
  .flow-connector {
    grid-column: 2;
    padding: var(--s-3) 0;
    flex-direction: row;
    gap: var(--s-3);
  }
  .flow-connector .connector-text { text-align: left; max-width: none; }
}

/* Traceability chain — 4 numbered steps showing how a recommendation
   traces back through the framework chain. Vertical on phone, wraps
   on desktop. */
.trace-chain {
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: rgba(46,94,102,0.03);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.trace-chain .trace-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--room-strategy);
  margin-bottom: var(--s-3);
}
.trace-chain h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.trace-steps {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .trace-steps { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); }
}
.trace-step {
  flex: 1; min-width: 180px;
  padding: var(--s-4);
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--accent-soft, var(--rule));
}
.trace-step .trace-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; margin-bottom: 6px;
  color: var(--accent, var(--gold-dim));
}
.trace-step .trace-body {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.trace-step .trace-body strong { color: var(--ink); }
.trace-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-size: 18px;
  padding: 0 var(--s-2);
}
@media (max-width: 899px) {
  .trace-arrow { transform: rotate(90deg); }
}

/* Synthesis principle insight box (the closing reflection).
   Used by both the synthesis explainer pages (single-paragraph
   short reflection) and the case-study pages (multi-paragraph
   extended reflection with sub-headed governance lesson). */
.synthesis-principle {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: rgba(46,94,102,0.05);
  border-left: 3px solid var(--room-strategy);
  border-radius: 0 10px 10px 0;
}
.synthesis-principle h4 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
}
.synthesis-principle p {
  font-size: 13px; color: var(--ink-2); line-height: 1.65;
}
.synthesis-principle p strong { color: var(--ink); }
.synthesis-principle p + p { margin-top: var(--s-3); }

/* Visual strategy canvas (case-study pages). The SVG line chart
   showing industry value curve vs the new value curve. The
   surrounding wrapper provides eyebrow + heading + caption +
   footnote; the SVG itself is fluid up to its viewBox. */
.value-canvas {
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: rgba(91,138,245,0.03);
  border: 1px solid rgba(91,138,245,0.12);
  border-radius: 14px;
}
.value-canvas .canvas-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #5b8af5;
  margin-bottom: var(--s-3);
}
.value-canvas h3 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.value-canvas .canvas-caption {
  font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.value-canvas svg {
  width: 100%; height: auto; max-height: 380px; display: block;
}
.value-canvas .canvas-footnote {
  font-size: 11.5px; color: var(--ink-faint);
  font-style: italic;
  margin-top: var(--s-3);
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────
   9b. Synthesis-flow hover-reveal (canonical, hover-capable
       devices only). Decided 9 May 2026 after Porter mock
       comparison: on devices that can hover (mouse, trackpad,
       pen-with-hover), the inline framework-detail block hides
       and a small "Hover for details" prompt takes its place.
       On hover, the detail panel reveals as a floating drop-down
       beneath the card. On no-hover devices (phones, touch-only
       tablets) nothing changes: the detail stays inline.

       This is the canonical behaviour for every synthesis-flow
       page (Porter and the visualisation pages that propagate
       in phase 3b/3c).
   ────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .synthesis-flow .framework-detail { display: none; }

  /* Override the default framework-card overflow:hidden so the
     hover-revealed detail panel can extend below the card without
     being clipped. */
  .synthesis-flow .framework-card {
    position: relative;
    overflow: visible;
  }
  .synthesis-flow .framework-card::after {
    content: "Hover for details";
    display: block;
    margin-top: var(--s-3);
    padding: 6px 10px;
    background: var(--accent-tint, rgba(184,145,63,0.10));
    color: var(--accent, var(--gold-dim));
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-radius: 4px;
    text-align: center;
    transition: opacity .15s ease;
  }
  .synthesis-flow .framework-card:hover::after { opacity: 0; }

  /* Detail panel reveals on hover. Sits flush against the card
     (no gap) so the mouse can travel into it without losing the
     :hover state. The panel is itself part of the card's DOM
     tree, so hovering over the panel keeps :hover active on the
     card and the panel stays open. */
  .synthesis-flow .framework-card:hover .framework-detail,
  .synthesis-flow .framework-card:focus-within .framework-detail {
    display: block;
    position: absolute;
    top: 100%;
    left: -1.5px;
    right: -1.5px;
    z-index: 30;
    box-shadow: var(--shadow-hi);
    background: var(--paper);
    border: 1.5px solid var(--accent, var(--rule));
    border-top: 0;
    border-radius: 0 0 12px 12px;
    margin-top: 0;
    padding: var(--s-4) var(--s-5);
  }
}

/* ──────────────────────────────────────────────────────────
   10. Print
       Print rendering is the static, paper-on-desk version of
       the page. Interactive affordances (sticky, hover-reveal)
       have no meaning on paper. This block forces every page
       into a calm, faithful flow that prints content first.
   ────────────────────────────────────────────────────────── */
@media print {
  .nav, .concept-banner, .footer, .skip-link { display: none; }
  .page { box-shadow: none; max-width: 100%; }
  body { background: white; color: black; }

  /* Sticky stage labels disengage on print so each stage is read
     in normal document flow. Avoids the sticky element printing
     once at its initial position with no anchor on subsequent
     pages. Applies regardless of the .no-sticky decision. */
  .flow-stage-label {
    position: static !important;
    top: auto !important;
  }

  /* Synthesis-flow normally hides .framework-detail on devices
     that can hover. In print there is no pointer, no hover, and
     no reason to hide editorial content. Force every detail block
     to print in full, in document flow, exactly as a non-hover
     reader would see it on screen. The "Hover for details"
     prompt is meaningless on paper, so it is suppressed. */
  .synthesis-flow .framework-detail {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: var(--s-4) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 8px !important;
    padding: var(--s-4) !important;
    box-shadow: none !important;
  }
  .synthesis-flow .framework-card::after { display: none !important; }
  .synthesis-flow .framework-card { overflow: visible !important; }

  /* Page-break hints. Stages are coherent units; never split a
     stage across two pages if it can be avoided. Same for
     trace-steps and the synthesis-principle insight box. */
  .flow-stage,
  .trace-step,
  .synthesis-principle,
  .framework-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Card hover/active backgrounds become noise on paper. Reset to
     plain paper-on-screen rendering. */
  .framework-card,
  .note-card { box-shadow: none !important; }
  .room-strip { display: none; }
}