/* ============================================================
   THEATRE — Lifted Fundraising Playbook design system
   ============================================================
   Architecture (read this before changing anything):

   1. TOKENS         — :root variables below. Colors, spacing,
                       type, borders. Change here = system-wide.
   2. PRIMITIVES     — components (Cue, Lede, Pull, Video, BeatsGrid,
                       ActMarker, Warning, Callout, ExampleCards…)
                       defined in this file + theatre-components.jsx.
                       Change here = every chapter that uses the
                       primitive.
   3. LAYOUT         — patterns in playbook-extras.css
                       (.sub-split, .groups, .tiers, .cta-strip,
                       .tip, .sub-act-card). Change here = every
                       page using the pattern.
   4. CHAPTER MODULES — ch-intro.jsx, ch-target-list.jsx, etc.
                       Page-specific content that uses primitives +
                       layout patterns.

   How to make a change consistent:
   - Color / spacing / type    → edit TOKENS (this file, :root)
   - Primitive shape / props   → edit theatre-components.jsx + this file
   - Layout pattern            → edit playbook-extras.css
   - Page-specific content     → edit chapter module
   - Avoid inline styles in JSX. They bypass the layers and break
     consistency.

   Brand: paper white, saffron yellow as primary accent (was molten
   orange), dark teal as utility/chrome accent (was cobalt blue),
   sage / sky / coral as supporting category accents.
   ============================================================ */

:root {
  --font-display: "Inter Tight", "Inter", -apple-system, sans-serif;
  --font-body: "Inter Tight", "Inter", -apple-system, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --paper: #ffffff;
  --paper-2: #faf7ef;            /* faintly warm cream — for subtle accent surfaces */
  --paper-3: #f3f1ea;
  --ink: #0a0a0a;                /* pure black — body text, headings, structural */
  --ink-2: #2a2a2a;
  --ink-3: #6a6a66;
  --ink-4: #a8a6a0;
  --rule: #e9e8e3;

  /* Primary accent — saffron yellow (was molten orange). Variable name kept
     for backwards-compat with existing references; meaning is now "gold". */
  --molten: #edb300;             /* saffron yellow */
  --molten-deep: #c89500;        /* darker saffron */
  --molten-tint: #fbe9a8;        /* pale yellow */

  /* Utility / chrome accent — dark teal (was cobalt blue). Used for utility
     bars, pill buttons, and other "navigation/action" surfaces. */
  --cobalt: #3d5c66;             /* dark teal */
  --cobalt-deep: #2a4048;        /* darker teal */
  --cobalt-tint: #e7eced;        /* very pale teal */

  /* Brand wordmark — deep navy-indigo from the Lifted logo. Used for the
     "Lifted" wordmark in the topbar so it matches the actual brand color. */
  --brand-purple: #2a1f5d;
  --brand-purple-deep: #1f1645;

  /* Supporting accents — full palette with deep + tint variants so each color
     can do real work (backgrounds, borders, text) not just thin category bars.
     Use these to vary the look across primitives that would otherwise all be yellow. */
  --sage: #a4c0af;
  --sage-deep: #4f7960;        /* readable on white, usable for text/borders */
  --sage-tint: #ebf2ed;        /* card backgrounds / soft fills */

  --sky: #b3d4e5;
  --sky-deep: #3d6e8a;
  --sky-tint: #ebf3f8;

  --coral: #e5a6a6;
  --coral-deep: #a64a4a;
  --coral-tint: #f7e7e7;

  /* Spacing scale — 4px base. Use these everywhere instead of magic numbers
     so a global "tighten spacing" tweak is one variable change. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Border / radius scale */
  --border-thin: 1px solid var(--rule);
  --border-strong: 1.5px solid var(--ink);
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* Container widths — bump --max-content to widen everything in one place. */
  --max-content: 1440px;
  --max-prose:   1040px;   /* reading-column content */

  --topbar-h: 80px;
  --footer-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

/* ============================================================
   Top scene-bar — the score
   ============================================================ */
.th-topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 280px 1fr 240px;
  align-items: center;
  /* Aligns to the same content edge as .sub-split below — outer 0.5in
     extra padding plus the original 48px content gutter. */
  padding: 0 calc(var(--space-7) * 2);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.th-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none; border: 0; padding: 0;
}
.th-brand__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.th-brand__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.th-brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-purple);
}
.th-brand__sub {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 4px;
}
/* Chevron only renders when the brand is inside the chapter-wrap (i.e. has
   a dropdown). Home brand has no .th-brand-wrap, so no chevron. */
.th-brand-wrap .th-brand__sub::after {
  content: " ▾";
  display: inline-block;
  margin-left: 6px;
  color: var(--cobalt);
  font-size: 11px;
  letter-spacing: 0;
  transition: transform 0.2s ease, color 0.15s ease;
  vertical-align: 1px;
}
.th-brand-wrap:hover .th-brand__sub {
  color: var(--cobalt-deep);
}
.th-brand-wrap:hover .th-brand__sub::after {
  transform: rotate(180deg);
  color: var(--cobalt-deep);
}

.th-scenebar {
  display: flex; align-items: stretch;
  height: 100%;
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.th-scenebar::-webkit-scrollbar { display: none; }

.th-scene {
  flex: 1 0 auto; min-width: 88px;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
  padding: 0 6px;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: background 120ms ease;
}
.th-scene:first-child { margin-left: var(--space-5); border-left: 1px solid var(--rule); }
.th-scene:last-child  { margin-right: var(--space-5); }
.th-scene:hover { background: var(--paper-2); }
.th-scene__num {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.th-scene__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11.5px; letter-spacing: -0.01em;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
/* Visited subs get a cobalt marker — "you've passed through here". */
.th-scene.done .th-scene__num { color: var(--cobalt); }
.th-scene.done .th-scene__name { color: var(--ink); }
.th-scene.done::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--cobalt);
}
/* Current sub uses sage — "you are here". */
.th-scene.cur .th-scene__num { color: var(--sage-deep); }
.th-scene.cur .th-scene__name { color: var(--ink); font-weight: 700; }
.th-scene.cur::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--sage-deep);
}
.th-scene.cur::before {
  content: ""; position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--sage-deep);
  z-index: 2;
}

.th-topbar__right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3);
}
.th-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.th-search:hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}
.th-search kbd {
  background: var(--paper-3); padding: 2px 5px; font-family: var(--font-mono);
  font-size: 9.5px; border-radius: 2px;
}
.th-ask {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  background: var(--cobalt);
  color: white;
  border: 1px solid var(--cobalt);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.th-ask:hover {
  background: var(--cobalt-deep);
  border-color: var(--cobalt-deep);
}

/* ============================================================
   Stage — the reading area
   ============================================================ */
.th-stage {
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h));
  padding: 0 0 60px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,77,31,0.04), transparent 70%),
    var(--paper);
}

/* Cue — oversized act numeral + name */
.cue {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 64px 48px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: end;
}
.cue__num {
  font-family: var(--font-display);
  /* Half the title size — quiet wayfinding numeral, not a focal element. */
  font-size: clamp(20px, 2.5vw, 35px);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--molten);
  margin: 0;
}
.cue__meta {
  padding-bottom: 16px;
}
.cue__crumb {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.cue__name {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 70px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.cue__name .accent {
  color: inherit;
}
.cue__chips {
  padding-bottom: 22px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
.cue__chip {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
  padding: 4px 8px;
  border: 1px solid var(--rule);
}
.cue__chip.cur { background: var(--molten); color: white; border-color: var(--molten); }

.lede {
  max-width: min(56ch, calc(var(--max-content) - 96px));
  margin: 0 auto;
  padding: 0 48px 24px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--ink-2);
}
.lede em {
  font-style: normal;
  background: linear-gradient(0deg, var(--molten-tint) 38%, transparent 38%);
  padding: 0 3px;
}

/* Reading column for prose */
.read,
.prose {
  max-width: calc(var(--max-prose) + 96px);
  margin: 0 auto;
  padding: 0 48px;
}
.prose {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 24px;
  margin-bottom: 24px;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--cobalt);
  font-weight: 600;
  text-decoration: none;
}
.prose a:hover {
  color: var(--cobalt-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose + .prose { margin-top: -8px; }

/* .prose--note — small quiet caption line. Use for inline asides that sit
   close to a framework element (e.g. "works in any database — Crunchbase, …"). */
.prose--note {
  font-size: 16px;
  color: var(--ink-3);
  margin-top: -8px;
  margin-bottom: 24px;
  max-width: 880px;
}

/* Section opener */
.act-marker {
  max-width: var(--max-content);
  margin: 72px auto 28px;
  padding: 0 48px;
  display: flex; align-items: baseline; gap: 18px;
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.act-marker__num {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--molten); font-weight: 600;
  white-space: nowrap;
}
.act-marker__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
.act-marker__name em { font-style: normal; color: var(--molten); }
.act-marker__meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
}

/* Beats grid — 3-up framework */
.beats {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.beats--4 { grid-template-columns: repeat(4, 1fr); }
.beats--2 { grid-template-columns: repeat(2, 1fr); }

.beat {
  --beat-accent: var(--molten);
  padding: 28px 28px 36px;
  border-right: 1px solid var(--rule);
  position: relative;
  background: var(--paper);
}
.beat:last-child { border-right: 0; }
/* 3-color cycle: molten / sky / sage. Coral is reserved for warnings and stop
   points — never used as a neutral cycle color. */
.beat:nth-child(3n+1) { --beat-accent: var(--molten); }
.beat:nth-child(3n+2) { --beat-accent: var(--sky-deep); }
.beat:nth-child(3n+3) { --beat-accent: var(--sage-deep); }
/* Colored bottom stripe slides in from the left on hover. */
.beat::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 4px;
  background: var(--beat-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.beat:hover::after {
  transform: scaleX(1);
}
.beat__num {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
  display: block;
}
.beat__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.018em;
  margin: 0 0 12px;
  line-height: 1.1;
}
.beat__desc {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.beat__desc a {
  color: var(--cobalt);
  font-weight: 600;
  text-decoration: none;
}
.beat__desc a:hover {
  color: var(--cobalt-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.beat__example {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-3); line-height: 1.55;
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
  margin-top: 8px;
}
.beat__example b { color: var(--ink); font-weight: 600; }

.beat--cur {
  background: var(--molten); color: white;
  border-right-color: var(--molten);
  margin: -1px -1px;
  z-index: 2;
}
.beat--cur .beat__num { color: rgba(255,255,255,0.85); }
.beat--cur .beat__title { color: white; }
.beat--cur .beat__desc { color: rgba(255,255,255,0.92); }
.beat--cur .beat__example {
  border-top-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}
.beat--cur .beat__example b { color: white; }

/* ============================================================
   Carousel — Best Practices habits
   ============================================================ */
.carousel {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
}
.carousel__head {
  display: flex; align-items: center;
  margin-bottom: 14px;
  gap: 14px;
}
.carousel__count {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
}
.carousel__count b { color: var(--molten); font-weight: 700; }
.carousel__progress {
  flex: 1;
  height: 2px;
  background: var(--rule);
  position: relative;
}
.carousel__progress span {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--molten);
  transition: width 240ms ease;
}
.carousel__nav { display: flex; gap: 6px; }
.carousel__nav-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  background: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-mono);
}
.carousel__nav-btn:hover { background: var(--ink); color: white; }
.carousel__nav-btn:disabled { opacity: 0.3; cursor: default; }
.carousel__nav-btn:disabled:hover { background: var(--paper); color: inherit; }

.carousel__viewport {
  overflow: hidden;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.carousel__track {
  display: flex;
  transition: transform 360ms cubic-bezier(0.6, 0, 0.2, 1);
}
.carousel__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.habit {
  padding: 28px 28px 32px;
  border-right: 1px solid var(--rule);
  position: relative;
  background: var(--paper);
}
.habit:last-child { border-right: 0; }
/* "Curtain." closing slot — shown when a carousel slide has only one habit. */
.habit--curtain {
  display: grid;
  place-items: center;
  color: var(--ink-4);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
}
.habit__num {
  position: absolute;
  top: 22px; right: 24px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 1;
  letter-spacing: -0.06em;
  color: var(--molten-tint);
  z-index: 0;
}
.habit__head {
  position: relative; z-index: 1;
  margin-bottom: 12px;
}
.habit__hno {
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600;
  color: var(--molten);
  text-transform: uppercase; letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.habit__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.05;
  position: relative; z-index: 1;
}
.habit__desc {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
  margin: 12px 0 18px;
  position: relative; z-index: 1;
}

/* Weak / strong */
.ws {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  position: relative; z-index: 1;
}
.ws__item {
  padding: 10px 12px 12px;
  font-family: var(--font-serif);
  font-size: 13px; line-height: 1.5;
  border-left: 3px solid var(--rule);
}
.ws__item--weak {
  border-left-color: var(--ink-4);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
  text-decoration-thickness: 1px;
}
.ws__item--strong {
  border-left-color: var(--molten);
  color: var(--ink);
  background: var(--molten-tint);
}
.ws__label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  margin-bottom: 4px;
  text-decoration: none;
  color: inherit;
}
.ws__item--weak .ws__label { color: var(--ink-4); }
.ws__item--strong .ws__label { color: var(--molten-deep); }
.ws__text { display: block; }

/* ============================================================
   Video module
   ============================================================ */
.video {
  max-width: var(--max-content);
  margin: 24px auto 0;
  padding: 0 48px;
}
.video__inner {
  display: block;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.video__poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 70% 80% at 30% 30%, rgba(255,77,31,0.5), transparent 60%),
    radial-gradient(ellipse 60% 70% at 80% 80%, rgba(31,61,255,0.35), transparent 60%),
    #1a1612;
  position: relative;
  cursor: pointer;
  display: grid; place-items: center;
}
.video__play {
  width: 80px; height: 80px;
  background: white; color: var(--ink);
  display: grid; place-items: center;
  border-radius: 50%;
  transition: transform 200ms ease;
}
.video__poster:hover .video__play { transform: scale(1.06); }
.video__poster-tag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
}
.video__poster-runtime {
  position: absolute;
  bottom: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 11px;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
}
.video__body {
  border-top: 1px solid var(--rule);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.video__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--molten); font-weight: 600;
}
.video__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.01em;
  margin: 0; line-height: 1.3;
}
.video__sub {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.video__meta {
  display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
  flex-shrink: 0;
}

/* ============================================================
   Examples (modal triggers)
   ============================================================ */
.examples {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1.5px solid var(--ink);
}
.example-card {
  padding: 28px 28px 28px;
  border-right: 1px solid var(--rule);
  text-align: left;
  display: flex; flex-direction: column;
  cursor: pointer;
  background: var(--paper);
  transition: background 160ms ease;
}
.example-card:last-child { border-right: 0; }
.example-card:hover { background: var(--paper-2); }
.example-card__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--cobalt); font-weight: 600;
  margin-bottom: 10px;
}
.example-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.05;
}
.example-card__desc {
  font-family: var(--font-serif);
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
  margin-bottom: 18px;
}
.example-card__open {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink);
  font-weight: 600;
}
.example-card__open .arr {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--ink); color: white;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed; inset: 0; z-index: 101;
  display: grid; place-items: center;
  pointer-events: none;
}
.modal__panel {
  background: var(--paper);
  width: min(800px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  pointer-events: auto;
  border: 1.5px solid var(--ink);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 220ms ease, opacity 200ms ease;
}
.modal.open .modal__panel {
  transform: translateY(0);
  opacity: 1;
}
.modal__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--cobalt); color: white;
}
.modal__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.modal__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em;
  margin: 0; line-height: 1.05;
}
.modal__close {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.15); color: white;
}
.modal__body {
  padding: 22px 28px 28px;
  overflow-y: auto;
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.65;
  color: var(--ink);
}
.modal__body p {
  margin: 0 0 14px;
  position: relative;
  padding-left: 124px;
}
.modal__body p .marker {
  position: absolute; left: 0; top: 4px;
  width: 110px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--cobalt); font-weight: 700;
}

/* ============================================================
   Warning panel (failure modes)
   ============================================================ */
.warning {
  max-width: var(--max-content);
  margin: var(--space-2) auto var(--space-6);
  padding: 0 var(--space-7);
}
/* Single-paragraph variant (e.g. a "heads up" callout that isn't a list).
   Use <p class="warning__body"> inside .warning__inner. */
.warning__body {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--ink-2);
}
.warning__inner {
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.warning__head {
  background: var(--ink); color: white;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 14px;
}
.warning__icon {
  width: 30px; height: 30px;
  background: var(--molten); color: white;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
}
.warning__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.warning__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em;
  margin: 0; line-height: 1.1;
}
.warning__list {
  list-style: none; margin: 0; padding: 0;
}
.warning__item {
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
}
.warning__item:last-child { border-bottom: 0; }
.warning__item-num {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  color: var(--molten);
  letter-spacing: 0.06em;
}
.warning__item-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.warning__item-body {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
}

/* ============================================================
   Stacking demo
   ============================================================ */
.stack {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
}
.stack__head {
  margin-bottom: 24px;
}
.stack__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--molten); font-weight: 600;
  margin-bottom: 6px;
}
.stack__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 22px;
}
.stack__step {
  padding: 14px 18px 16px;
  border-right: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  transition: background 140ms ease;
}
.stack__step:last-child { border-right: 0; }
.stack__step:hover { background: var(--paper-2); }
.stack__step__no {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.stack__step__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.stack__step.active {
  background: var(--molten); color: white;
  margin: -1px;
  border-right-color: var(--molten);
}
.stack__step.active .stack__step__no,
.stack__step.active .stack__step__name {
  color: white;
}
.stack__step.active .stack__step__no { color: rgba(255,255,255,0.85); }

.stack__layer {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 24px 28px 26px;
  margin-bottom: -1px;
  position: relative;
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stack__layer.is-active {
  background: var(--molten); color: white;
}
.stack__layer-row {
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
}
.stack__layer.is-active .stack__layer-row {
  border-bottom-color: rgba(255,255,255,0.3);
}
.stack__layer-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3);
  padding: 3px 7px;
  background: var(--paper-3);
}
.stack__layer.is-active .stack__layer-tag {
  background: rgba(255,255,255,0.18);
  color: white;
}
.stack__layer-state {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em;
}
.stack__layer-statement {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 500;
  margin-bottom: 16px;
}
.stack__layer-reaction {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.55;
  font-style: italic;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
}
.stack__layer-reaction-tag {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--molten);
  font-style: normal;
  padding-top: 3px;
}
.stack__layer.is-active .stack__layer-reaction-tag {
  color: rgba(255,255,255,0.95);
}

/* ============================================================
   Wizard / template
   ============================================================ */
.wizard {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  border: 1.5px solid var(--ink);
}
.wizard__pane {
  padding: 28px 30px 30px;
  background: var(--paper);
}
.wizard__pane--cta {
  background: var(--cobalt); color: white;
}
.wizard__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 12px;
}
.wizard__pane--cta .wizard__eyebrow { color: rgba(255,255,255,0.85); }
.wizard__pane:not(.wizard__pane--cta) .wizard__eyebrow { color: var(--cobalt); }
.wizard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; letter-spacing: -0.03em;
  margin: 0 0 12px;
  line-height: 1.0;
}
.wizard__desc {
  font-family: var(--font-serif);
  font-size: 14.5px; line-height: 1.6;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.92);
}
.wizard__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--molten); color: white;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700;
}
.wizard__btn .arr {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: white; color: var(--molten);
}

.template {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.85;
  color: var(--ink-2);
}
.template__blank {
  display: inline-block;
  padding: 1px 7px;
  background: var(--cobalt-tint);
  color: var(--cobalt-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 1px;
  vertical-align: 1px;
}

/* ============================================================
   Callout (skipped vs lands)
   ============================================================ */
.callout {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1.5px solid var(--ink);
}
.callout__col {
  padding: 22px 24px 24px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.callout__col:last-child { border-right: 0; }
.callout__label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.callout__col--bad .callout__label { color: var(--ink-4); }
.callout__col--good { background: var(--molten); color: white; }
.callout__col--good .callout__label { color: rgba(255,255,255,0.85); }
.callout__quote {
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.35; letter-spacing: -0.015em;
  margin: 0;
  font-weight: 500;
}
.callout__col--bad .callout__quote {
  color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ============================================================
   Pull quote + sources
   ============================================================ */
.pull {
  max-width: calc(var(--max-prose) + 96px);
  margin: 56px auto;
  padding: 0 48px;
}
.pull__inner {
  background: var(--molten-tint);
  border-left: 4px solid var(--molten);
  padding: 24px 32px 26px;
}
.pull__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--molten-deep);
  margin-bottom: 12px;
}
.pull__quote {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.34;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.pull__quote strong {
  font-weight: 800;
  color: var(--ink);
}
.pull__attr {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 14px;
}

.sources {
  max-width: var(--max-content);
  margin: 28px auto 0;
  padding: 0 48px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ============================================================
   Hero / chapter overview
   ============================================================ */
.hero {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 80px 48px 24px;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px;
}
.hero__chapter {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--molten); font-weight: 700;
  background: var(--molten-tint);
  padding: 4px 8px;
}
.hero__crumb {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.05em;
  margin: 0 0 26px;
}
.hero__title .accent { color: var(--molten); }
.hero__lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 36px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 0;
}
.hero__meta-item {
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}
.hero__meta-item:last-child { border-right: 0; }
.hero__meta-label {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.hero__meta-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.hero__meta-value small {
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  margin-left: 6px;
  letter-spacing: 0;
}

/* Sub-chapter index — the act list */
.sub-index {
  max-width: var(--max-content);
  margin: 56px auto 80px;
  padding: 0 48px;
}
.sub-index__head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 18px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.sub-index__head-num {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--molten); font-weight: 600;
}
.sub-index__head-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; letter-spacing: -0.025em;
  margin: 0;
}
.sub-index__list {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.sub-index__row {
  display: grid;
  grid-template-columns: 80px 220px 1fr 100px 60px;
  gap: 22px;
  padding: 18px 14px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: var(--paper);
  transition: background 140ms ease;
  position: relative;
}
.sub-index__row:last-child { border-bottom: 0; }
.sub-index__row:hover { background: var(--paper-2); }
.sub-index__row.cur {
  background: var(--molten); color: white;
  margin: -1px;
}
.sub-index__row.cur:hover { background: var(--molten); }
.sub-index__row.done .sub-index__num { color: var(--ink); }
.sub-index__num {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3); font-weight: 600;
}
.sub-index__row.cur .sub-index__num { color: rgba(255,255,255,0.85); }
.sub-index__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.025em;
}
.sub-index__teaser {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}
.sub-index__row.cur .sub-index__teaser { color: rgba(255,255,255,0.92); }
.sub-index__duration {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3);
}
.sub-index__row.cur .sub-index__duration { color: rgba(255,255,255,0.85); }
.sub-index__arrow {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  margin-left: auto;
}
.sub-index__row.cur .sub-index__arrow {
  background: white; color: var(--molten);
  border-color: white;
}

/* ============================================================
   Bottom transport
   ============================================================ */
.transport {
  position: sticky; bottom: 0; z-index: 40;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
/* Inner container aligns to the same content edge as .sub-split above —
   max-width var(--max-content), padding 0.5in extra on each side. */
.transport__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 calc(var(--space-7) * 2);
  height: var(--footer-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}
.transport__btn {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
  text-align: left;
}
.transport__btn--prev .arr {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.transport__btn .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.transport__btn .name {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-transform: none;
}
.transport__center {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3);
}
.transport__btn--next {
  justify-self: end;
  flex-direction: row-reverse;
  text-align: right;
}
.transport__btn--next .arr {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--molten);
  color: white;
}

/* ============================================================
   Stub (sub-chapters 4-10)
   ============================================================ */
.stub {
  max-width: var(--max-content);
  margin: 24px auto 0;
  padding: 0 48px;
}
.stub__panel {
  border: 1.5px dashed var(--ink-4);
  padding: 36px 32px;
  background: var(--paper-2);
  text-align: center;
}
.stub__icon {
  width: 36px; height: 36px;
  background: var(--cobalt); color: white;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  font-family: var(--font-display); font-weight: 700;
}
.stub__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.stub__desc {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0 auto;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .th-topbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: 56px 56px;
    height: auto;
    padding: 0 18px;
  }
  .th-scenebar {
    grid-column: 1 / 3; grid-row: 2;
    border-top: 1px solid var(--rule);
    overflow-x: auto;
  }
  .th-topbar__right { gap: 8px; }
  .th-search { display: none; }
  .th-runtime { font-size: 10px; }
  .cue {
    grid-template-columns: 1fr;
    padding: 36px 22px 18px;
  }
  .cue__chips { display: none; }
  .lede, .read, .video, .examples, .beats, .warning, .stack, .wizard, .callout, .sub-index, .hero, .sources, .pull, .stub {
    padding-left: 22px; padding-right: 22px;
  }
  .hero { padding-top: 48px; }
  .beats, .beats--4 { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
  .beat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .carousel__slide { grid-template-columns: 1fr; }
  .habit { border-right: 0; border-bottom: 1px solid var(--rule); }
  .video__inner { grid-template-columns: 1fr; }
  .examples { grid-template-columns: 1fr; }
  .example-card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stack__steps { grid-template-columns: 1fr; }
  .stack__step { border-right: 0; border-bottom: 1px solid var(--rule); }
  .wizard { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; }
  .callout__col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
  .hero__meta-item:nth-child(2n) { border-right: 0; }
  .sub-index__row { grid-template-columns: 60px 1fr 40px; }
  .sub-index__teaser, .sub-index__duration { display: none; }
  .modal__body p { padding-left: 0; padding-top: 22px; }
  .modal__body p .marker { position: relative; left: 0; top: 0; display: block; margin-bottom: 4px; width: auto; }
  .stack__layer-reaction { grid-template-columns: 1fr; }
}

/* .fade-in is intentionally a no-op class. Keep it on sub-chapter roots
   as a routing hook; do not animate it (CSS keyframes stalled in some
   browsers when paired with display: none toggles, leaving content blank). */
.fade-in { opacity: 1; }