:root {
  --night: #17213d;
  --paper: #faf5ec;
  --amber: #b45309;
  --amber-deep: #92400e;
  --teal: #0f6e68;
  --cardinal: #b21e35;
  --slate: #5b6670;
  --ink: #201d1a;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Source Sans 3", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090d18; }
body { color: var(--ink); font-family: var(--sans); }
#viewport { width: 100%; height: 100%; }
#stage {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--paper);
}
#scenes { position: absolute; inset: 0; }
.scene {
  position: absolute;
  inset: 0;
  display: none;
  padding: 92px 116px;
  overflow: hidden;
  background: var(--paper);
}
.scene.is-active { display: block; }
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: repeating-linear-gradient(17deg, transparent 0 17px, rgba(23,33,61,.16) 18px 19px);
}
.scene > * { position: relative; z-index: 2; }
.layout-prototype { padding: 0; }
.layout-prototype::after { display: none; }
.layout-prototype > .eyebrow,
.layout-prototype > .scene-title,
.layout-prototype > .scene-body { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.prototype-frame { position: absolute; inset: 0; z-index: 5; width: 1920px; height: 1080px; border: 0; background: var(--paper); pointer-events: none; }
.theme-night { color: var(--paper); background: var(--night); }
.theme-teal { color: var(--paper); background: var(--teal); }
.theme-amber { color: var(--paper); background: var(--amber-deep); }
.eyebrow {
  margin: 0 0 44px;
  color: var(--amber-deep);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.theme-night .eyebrow, .theme-teal .eyebrow, .theme-amber .eyebrow { color: #f2be83; }
.scene-title {
  max-width: 1580px;
  margin: 0;
  font-family: var(--serif);
  font-size: 104px;
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.018em;
}
.scene-body {
  max-width: 1420px;
  margin: 42px 0 0;
  font-size: 48px;
  line-height: 1.24;
  color: #4c443c;
}
.theme-night .scene-body, .theme-teal .scene-body, .theme-amber .scene-body { color: #eee7dc; }
/* Pending reveals stay clearly VISIBLE as blurred text — present but
   illegible — and come into focus on the presenter's click. */
[data-reveal] { opacity: .5; filter: blur(14px); transform: translateY(18px); }
[data-reveal].is-revealed { opacity: 1; filter: blur(0); transform: none; }
[data-reveal] { transition: opacity .38s ease, transform .38s ease, filter .45s ease; }
.layout-moment .scene-title, .layout-question .scene-title, .layout-definition .scene-title {
  margin-top: 130px;
  font-size: 124px;
}
.layout-definition .scene-body { max-width: 1550px; font-size: 54px; }
.layout-title .scene-title { margin-top: 150px; font-size: 190px; }
.layout-title .scene-body { font-family: var(--serif); font-size: 70px; }
.layout-holding {
  background: linear-gradient(125deg, rgba(23,33,61,.97), rgba(15,110,104,.86)), var(--night);
}
.layout-holding .scene-title { margin-top: 90px; font-size: 160px; }
.layout-holding .scene-body { max-width: 1600px; margin-top: 24px; font-family: var(--serif); font-size: 60px; line-height: 1.2; }
.join-card {
  position: absolute;
  top: 720px;
  left: 116px;
  right: 116px;
  width: auto;
  height: 220px;
  padding: 26px 34px;
  border: 2px solid rgba(250,245,236,.55);
  border-radius: 22px;
  background: rgba(8,18,30,.42);
  font-size: 42px;
  line-height: 1.15;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 44px;
  row-gap: 16px;
  align-content: center;
}
.join-card strong { display: block; margin: 0; font-size: 42px; overflow-wrap: anywhere; }
.holding-resource { grid-column: 1 / -1; overflow-wrap: anywhere; }
.layout-opening { background: var(--night) url("/library/media/opening/posters/Opening_Chapter_01_Poster.png") center / cover no-repeat; }
.layout-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,25,.94) 0 42%, rgba(8,12,25,.28) 72%, rgba(8,12,25,.5));
}
.layout-opening .scene-title { margin-top: 235px; max-width: 760px; font-size: 134px; }
.layout-opening .scene-body { max-width: 660px; }
.source-fallback-image[data-reveal] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: none; transition: none; }
.source-fallback-image[data-reveal].is-revealed { opacity: 1; }
.artifact-grid, .boundary-grid, .layer-grid, .comparison-grid, .support-grid {
  display: grid;
  gap: 30px;
  margin-top: 70px;
}
.artifact-grid { grid-template-columns: 1fr 1fr; }
.artifact-card {
  min-height: 400px;
  padding: 48px;
  border: 4px solid currentColor;
  border-radius: 24px;
  background: rgba(250,245,236,.92);
}
.artifact-card h3 { margin: 0; font-family: var(--serif); font-size: 64px; }
.artifact-lines { margin-top: 40px; }
.artifact-lines i { display: block; width: 92%; height: 8px; margin: 22px 0; background: var(--slate); opacity: .42; }
.artifact-lines i:nth-child(2) { width: 78%; }
.artifact-lines i:nth-child(3) { width: 88%; }
.history-line {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 610px;
  height: 8px;
  border-radius: 99px;
  background: var(--amber);
}
.history-nodes, .capacity-trail { display: flex; justify-content: space-between; gap: 24px; margin-top: 170px; }
.history-node, .capacity-node {
  display: grid;
  place-items: center;
  width: 300px;
  min-height: 190px;
  padding: 30px 20px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}
.history-node.is-revealed, .capacity-node.is-revealed { border-color: var(--amber-deep); background: #f4d4b0; }
.layout-source .source-slate {
  display: flex;
  gap: 52px;
  align-items: center;
  margin-top: 120px;
  padding: 55px;
  border: 3px solid rgba(250,245,236,.55);
  border-radius: 26px;
}
.source-fallback-image { z-index: 6; background: var(--paper); }
.source-mark { font-family: var(--serif); font-size: 150px; color: #f2be83; }
.layout-framework .scene-title { text-align: center; }
.capacity-trail { position: relative; margin-top: 150px; }
.capacity-trail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 76px; height: 8px; background: var(--amber); z-index: -1; }
.capacity-node { width: 300px; border-radius: 28px; }
.layout-capacity .capacity-index { position: absolute; right: 90px; top: 40px; font: 700 480px/1 var(--serif); opacity: .07; }
.layout-capacity .scene-title { margin-top: 110px; max-width: 1480px; }
.demo-poster { display: block; width: 100%; height: 585px; margin-top: 30px; object-fit: contain; object-position: center; border: 4px solid var(--night); border-radius: 22px; background: #fff; }
.poll-panel { max-width: 1500px; margin-top: 30px; }
.poll-prompt { margin: 0; font: 700 82px/1.12 var(--serif); }
.poll-options { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 60px; }
.poll-option { padding: 24px 34px; border: 3px solid currentColor; border-radius: 999px; font-size: 42px; font-weight: 700; line-height: 1.15; }
.poll-results { display: grid; gap: 18px; margin-top: 52px; max-width: 1280px; }
.result-row { display: grid; grid-template-columns: minmax(340px, 1.5fr) 3fr auto; align-items: center; gap: 24px; font-size: 42px; line-height: 1.12; }
.result-row progress { width: 100%; height: 28px; accent-color: #f5c98d; }
.result-count { min-width: 120px; font-variant-numeric: tabular-nums; text-align: right; }
.poll-meta { margin-top: 18px; font-size: 42px; font-weight: 700; }
.poll-status { margin-top: 24px; font-size: 42px; font-weight: 700; }
.offline-line { margin-top: 34px; padding-left: 28px; border-left: 8px solid #f5c98d; font: 700 42px/1.25 var(--serif); }
.support-grid { grid-template-columns: repeat(5, 1fr); align-items: end; height: 430px; }
.support { display: flex; align-items: center; justify-content: center; height: 380px; padding: 24px; border: 5px solid var(--night); font-weight: 700; font-size: 42px; line-height: 1.12; text-align: center; }
.support.missing.is-revealed { border-style: dashed; opacity: .22; }
.boundary-grid { grid-template-columns: repeat(3, 1fr); }
.boundary-card, .layer-card { min-height: 350px; padding: 38px; border: 4px solid var(--slate); border-radius: 22px; }
.boundary-card h3, .layer-card h3 { margin: 0; font: 700 50px var(--serif); }
.boundary-card p, .layer-card p { font-size: 42px; line-height: 1.2; }
.boundary-card.is-revealed { border-color: var(--amber-deep); background: #f8e5cf; }
.layer-grid { grid-template-columns: repeat(3, 1fr); }
.comparison-grid { grid-template-columns: 1fr 1fr; margin-top: 48px; }
.comparison-card { min-height: 580px; overflow: hidden; border: 3px solid rgba(250,245,236,.45); border-radius: 24px; background: rgba(0,0,0,.16); }
.comparison-card img { display: block; width: 100%; height: 410px; object-fit: cover; }
.comparison-card p { margin: 20px 28px; font-size: 42px; line-height: 1.18; font-weight: 700; }
.layout-path .scene-title { max-width: none; margin-top: 8px; font-size: 112px; text-align: center; }
.layout-path .scene-body {
  position: absolute;
  right: 116px;
  bottom: 82px;
  left: 116px;
  max-width: none;
  margin: 0;
  color: var(--amber-deep);
  font: 700 66px/1.08 var(--serif);
  text-align: center;
}
.path-visual { position: relative; height: 320px; margin-top: 132px; }
.path-line {
  position: absolute;
  top: 47px;
  right: 52px;
  left: 52px;
  height: 10px;
  border-radius: 99px;
  background: var(--amber);
}
.path-stops { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.path-stop { display: grid; grid-template-rows: 104px auto; justify-items: center; gap: 32px; min-width: 0; text-align: center; }
.path-number {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 6px solid var(--night);
  border-radius: 50%;
  background: var(--paper);
  color: var(--night);
  font: 700 46px/1 var(--serif);
}
.path-meaning {
  max-width: 310px;
  color: var(--slate);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.layout-return { background: var(--night); }
.layout-return::after { display: none; }
.layout-return .scene-title { max-width: 980px; margin-top: 150px; font-size: 94px; line-height: 1.02; }
.layout-return .scene-body { max-width: 940px; margin-top: 48px; color: #f2be83; font: 700 64px/1.1 var(--serif); }
.return-visual { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; }
.return-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,14,31,.98) 0 43%, rgba(6,14,31,.64) 62%, rgba(6,14,31,.24) 100%),
    linear-gradient(0deg, rgba(6,14,31,.88) 0 36%, rgba(6,14,31,.16) 68%, rgba(6,14,31,.12) 100%);
}
.return-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.return-artifacts {
  position: absolute;
  top: 720px;
  left: 116px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 452px);
  gap: 26px;
}
.return-artifact-card {
  width: 452px;
  height: 230px;
  padding: 28px 30px;
  border: 4px solid rgba(250,245,236,.92);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.return-artifact-label { margin: 0; color: var(--night); font: 700 42px/1.05 var(--sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.return-artifact-lines { display: grid; gap: 15px; margin-top: 25px; }
.return-artifact-line { display: block; width: 100%; height: 7px; border-radius: 99px; background: var(--slate); opacity: .44; }
.return-artifact-line:nth-child(2) { width: 82%; }
.return-artifact-line:nth-child(3) { width: 92%; }
.commitment-lines { display: grid; gap: 52px; margin-top: 48px; }
.commitment-instruction { margin: 0; color: var(--slate); font-size: 42px; font-weight: 700; line-height: 1.18; }
.commitment-line { font: 700 58px var(--serif); border-bottom: 5px solid var(--night); padding-bottom: 25px; }
.resource-card { display: grid; grid-template-columns: 1fr 360px; gap: 70px; align-items: center; margin-top: 70px; }
.qr-placeholder { display: grid; place-items: center; width: 330px; height: 330px; padding: 28px; border: 8px solid var(--paper); font-size: 42px; line-height: 1.15; text-align: center; }
.layout-closing > .scene-title { max-width: 1700px; margin: 190px auto 0; font-size: 132px; text-align: center; }
.layout-closing > .scene-body { max-width: 1500px; margin: 70px auto 0; color: #f2be83; font: 700 96px/1.12 var(--serif); text-align: center; }
.layout-closing .resource-state { display: none; opacity: 1; transform: none; }
.layout-closing .resource-state.is-revealed { display: block; }
.layout-closing:has(.resource-state.is-revealed) > .eyebrow,
.layout-closing:has(.resource-state.is-revealed) > .scene-title,
.layout-closing:has(.resource-state.is-revealed) > .scene-body { display: none; }
#media-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: transparent; }
.stage-video, .stage-still { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--night); }
.stage-audio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.next-media-preload { display: none; }

html.static *, html.reduced-motion * { animation: none !important; transition: none !important; }
html.static [data-reveal] { transform: none; }

/* r13 additive layouts: film set pieces (S01A/S12A), StarTalk clip slate (S10), show-of-hands (S24A) */
.layout-film .film-poster { height: 540px; margin-top: 24px; background: var(--night); border-color: rgba(250,245,236,.4); }
.clip-slate { display: block; }
.layout-clip .scene-title { font-size: 72px; }
.layout-clip .scene-body { font-size: 42px; margin-top: 24px; }
.layout-clip .film-poster { height: 400px; margin-top: 22px; background: var(--night); border-color: rgba(250,245,236,.4); }
.clip-credit { max-width: 1700px; margin: 20px 0 0; font-size: 42px; line-height: 1.25; font-weight: 700; color: #f2be83; }
.layout-show-of-hands .scene-body { font-size: 42px; margin-top: 20px; }
.hands-wrap { margin-top: 14px; }
.hands-grid { display: grid; }
.hands-card { grid-area: 1 / 1; height: 100%; padding: 18px 30px; border: 4px solid rgba(250,245,236,.45); border-radius: 22px; background: #10233a; }
.hands-card[data-reveal] { opacity: 0; }
.hands-card[data-reveal].is-revealed { opacity: 1; z-index: 1; }
.hands-label { margin: 0; font: 700 44px var(--serif); }
.hands-options { display: grid; gap: 12px; margin-top: 14px; }
.hands-option { margin: 0; font-size: 42px; line-height: 1.18; }
.hands-handoff { margin-top: 16px; padding-left: 28px; border-left: 8px solid #f5c98d; font: 700 42px/1.25 var(--serif); }


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── r14 opening layouts (CP1, 2026-07-26) ─────────────────────────── */
.rollcall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 40px; margin-top: 48px; max-width: 1560px; }
.rollcall-chip { padding: 30px 38px; border: 4px solid rgba(250, 245, 236, .32); border-radius: 16px; background: rgba(250, 245, 236, .04); }
.rollcall-chip.is-revealed { border-color: var(--amber); background: rgba(180, 83, 9, .16); }
.rollcall-label { margin: 0; font: 700 48px/1.05 var(--sans); letter-spacing: .04em; color: var(--paper); }
.rollcall-note { margin: 8px 0 0; font: 600 28px/1.2 var(--sans); letter-spacing: .02em; color: var(--paper); opacity: .68; }
.rollcall-everyone { grid-column: 1 / -1; margin: 20px 0 0; font: 700 46px/1.18 var(--serif); color: #f2be83; white-space: nowrap; }

.fineprint-card { max-width: 1420px; margin-top: 90px; padding: 56px 64px; border: 4px solid var(--ink); border-radius: 14px; background: #fffdf7; box-shadow: 0 16px 40px rgba(32, 29, 26, .12); }
.fineprint-lead { margin: 0; font: 700 40px/1.2 var(--sans); color: var(--ink); }
.fineprint-text { margin: 34px 0 0; font: 600 34px/1.5 var(--sans); letter-spacing: .01em; color: var(--slate); text-transform: uppercase; }

.spectrum-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 54px; align-items: stretch; }
.spectrum-stop { padding: 24px 26px 30px; border: 4px solid rgba(250, 245, 236, .35); border-radius: 16px; background: rgba(23, 33, 61, .28); }
.spectrum-art { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 22px; border-radius: 10px; object-fit: cover; }
.spectrum-stop.is-revealed { border-color: var(--paper); background: rgba(23, 33, 61, .55); }
.spectrum-stop:last-child.is-revealed { border-color: #f2be83; }
.spectrum-label { margin: 0; font: 700 34px/1.1 var(--sans); letter-spacing: .03em; color: var(--paper); }
.spectrum-note { margin: 10px 0 0; font: 600 28px/1.25 var(--sans); color: var(--paper); opacity: .72; }

.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 100px; max-width: 1680px; }
.stat-card { padding: 52px 50px 44px; border: 4px solid rgba(250, 245, 236, .32); border-radius: 18px; background: rgba(250, 245, 236, .05); }
.stat-card.is-revealed { border-color: var(--amber); }
.stat-figure { font: 700 128px/1 var(--serif); color: #f2be83; }
.stat-claim { margin: 26px 0 0; font: 600 34px/1.3 var(--sans); color: var(--paper); }
.stat-source { margin: 28px 0 0; font: 700 28px/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--paper); opacity: .55; }

/* ── r14 Shortcut thought experiment (CP2, 2026-07-26) ─────────────── */
.te-panel { display: grid; gap: 24px; margin-top: 44px; max-width: 1560px; }
.te-beat { padding: 28px 48px; border-left: 10px solid var(--amber); background: rgba(250, 245, 236, .05); border-radius: 0 16px 16px 0; }
.te-kicker { margin: 0; font: 700 28px/1 var(--sans); letter-spacing: .18em; color: #f2be83; }
.te-text { margin: 12px 0 0; font: 700 42px/1.2 var(--serif); color: var(--paper); }
.te-beat[data-reveal="question"] .te-text { font-size: 56px; color: #f2be83; }

.choice-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 90px; }
.choice-card { padding: 56px 48px; border: 4px solid rgba(250, 245, 236, .38); border-radius: 20px; background: rgba(23, 33, 61, .3); }
.choice-card.is-revealed { border-color: var(--paper); background: rgba(23, 33, 61, .55); }
.choice-num { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 4px solid #f2be83; font: 700 30px/1 var(--sans); color: #f2be83; }
.choice-lead { margin: 18px 0 0; font: 700 50px/1.08 var(--serif); color: var(--paper); }
.choice-text { margin: 22px 0 0; font: 600 34px/1.3 var(--sans); color: var(--paper); opacity: .8; }

/* r14 experience layout (Shortcut Experience host) */
.layout-experience { padding: 0; }
.layout-experience::after { display: none; }
.layout-experience > .eyebrow,
.layout-experience > .scene-title,
.layout-experience > .scene-body { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.theme-paper .choice-card { border-color: rgba(32, 29, 26, .35); background: #fffdf7; }
.theme-paper .choice-card.is-revealed { border-color: var(--amber-deep); background: #fff; }
.theme-paper .choice-lead { color: var(--ink); }
.theme-paper .choice-text { color: var(--slate); opacity: 1; }
.theme-paper .choice-num { border-color: var(--amber-deep); color: var(--amber-deep); }

/* r14 K-5 section (CP7, 2026-07-27) */
.research-wrap { margin-top: 56px; max-width: 1600px; }
.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.research-card { padding: 44px 48px; border: 4px solid rgba(250, 245, 236, .32); border-radius: 18px; background: rgba(250, 245, 236, .05); }
.research-card.is-revealed { border-color: var(--amber); }
.research-who { margin: 0; font: 700 28px/1 var(--sans); letter-spacing: .14em; color: #f2be83; }
.research-finding { margin: 20px 0 0; font: 600 34px/1.35 var(--sans); color: var(--paper); }
.research-source { margin: 20px 0 0; font: 700 28px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); opacity: .5; }
.research-claim { max-width: 1520px; margin: 44px 0 0; font: 700 40px/1.25 var(--serif); color: #f2be83; }

.roles-wrap { margin-top: 70px; max-width: 1640px; display: grid; gap: 46px; }
.role-line { margin: 0; font: 700 62px/1.15 var(--serif); color: var(--paper); }
.role-line.is-revealed { color: #f2be83; }
.role-line.is-revealed ~ .role-line.is-revealed { color: var(--paper); }
.roles-credit { margin: 22px 0 0; font: 700 28px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); opacity: .5; }

/* r14 upstream + teachers scenes (CP9/CP10, 2026-07-27) */
.lesson-doc { max-width: 1560px; margin-top: 30px; padding: 32px 56px 26px; border: 4px solid var(--ink); border-radius: 16px; background: #fffdf7; box-shadow: 0 16px 40px rgba(32, 29, 26, .12); }
.lesson-row { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: baseline; padding: 18px 0; border-bottom: 3px solid rgba(32, 29, 26, .12); }
.lesson-row:last-of-type { border-bottom: 0; }
.lesson-tag { font: 700 28px/1 var(--sans); letter-spacing: .14em; color: var(--amber-deep); }
.lesson-text { margin: 0; font: 600 34px/1.3 var(--sans); color: var(--ink); }
.lesson-socrates { margin: 26px 0 0; font: 700 36px/1.3 var(--serif); color: var(--amber-deep); }

.evidence-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 80px; max-width: 1688px; }
.evidence-card { padding: 48px 44px; border: 4px solid rgba(250, 245, 236, .32); border-radius: 18px; background: rgba(250, 245, 236, .05); }
.evidence-card.is-revealed { border-color: var(--amber); }
.evidence-quote { margin: 0; font: 700 36px/1.32 var(--serif); color: var(--paper); }
.evidence-source { margin: 26px 0 0; font: 700 28px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); opacity: .55; }

/* r14 close: S31 "2036" (CP11, Matt's Option 1) */
.layout-close-lines .scene-title { margin-top: 110px; font-size: 210px; }
.close-lines { margin-top: 64px; max-width: 1640px; display: grid; gap: 40px; }
.close-line { margin: 0; font: 700 54px/1.2 var(--serif); color: var(--ink); }
.close-line:last-child.is-revealed { color: var(--amber-deep); }

/* r14.2 WS4 — audit guide (S22A), rigor ladder (S22B), conversation turn (S24C).
   Type sizes follow the tiered projection floor: body >= 36px, attribution >= 28px. */
.audit-wrap { margin-top: 44px; max-width: 1640px; }
.audit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.audit-step { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 28px; padding: 20px 28px; border-left: 8px solid rgba(180, 83, 9, .5); background: rgba(91, 102, 112, .07); border-radius: 0 14px 14px 0; }
.audit-index { font: 700 40px/1 var(--sans); letter-spacing: .04em; color: #b45309; }
.audit-prompt { margin: 0; font: 600 44px/1.24 var(--sans); color: var(--ink); }
.audit-note { margin: 34px 0 0; font: 700 30px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #5b6670; }

.ladder-wrap { margin-top: 44px; max-width: 1600px; }
.ladder { display: grid; gap: 20px; }
.ladder-rung { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 30px 40px; border: 4px solid rgba(250, 245, 236, .3); border-radius: 18px; background: rgba(250, 245, 236, .05); }
.ladder-rung:first-child { border-color: #f2be83; background: rgba(242, 190, 131, .12); }
.ladder-name { margin: 0; font: 700 54px/1 var(--serif); color: var(--paper); }
.ladder-gloss { margin: 8px 0 0; grid-column: 1; font: 500 36px/1.25 var(--sans); color: var(--paper); opacity: .78; }
.ladder-free { margin: 0; grid-column: 2; grid-row: 1 / span 2; font: 700 28px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: right; color: #f2be83; max-width: 300px; }
.ladder-rail { margin: 34px 0 0; font: 600 40px/1.3 var(--serif); color: #f2be83; }

.turn-wrap { margin-top: 40px; max-width: 1660px; display: grid; gap: 24px; }
.turn-line { display: grid; grid-template-columns: 240px 1fr; align-items: baseline; gap: 32px; }
.turn-kicker { margin: 0; font: 700 28px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #b45309; }
.turn-text { margin: 0; font: 500 42px/1.28 var(--sans); color: var(--ink); }
.turn-close { margin: 20px 0 0; font: 700 62px/1.16 var(--serif); color: #92400e; }

/* r14.2 WS4 — per-layout fits so every scene lands inside the 1080 safe zone.
   The body line is suppressed where the title + built content already carry it;
   the manifest body still feeds the screen-reader announcement. */
.layout-audit-guide .scene-title { font-size: 92px; }
.layout-audit-guide .scene-body { display: none; }
.layout-audit-guide .audit-step { padding: 16px 28px; }
.layout-audit-guide .audit-prompt { font-size: 42px; }
.layout-audit-guide .audit-list { gap: 18px; }

.layout-rigor-ladder .scene-title { font-size: 80px; }
.layout-rigor-ladder .scene-body { display: none; }
.layout-rigor-ladder .ladder { gap: 16px; }
.layout-rigor-ladder .ladder-rung { padding: 20px 36px; }
.layout-rigor-ladder .ladder-name { font-size: 46px; }
.layout-rigor-ladder .ladder-gloss { font-size: 34px; }

.layout-conversation-turn .scene-title { font-size: 88px; }
.layout-conversation-turn .scene-body { display: none; }

/* S22 capacity reference — appears with the 90-second timer (Matt, 2026-07-28).
   The question compresses so all five rows sit clear of the replay's timer
   panel; sizes respect the projection tiers (34 secondary / 28 attribution). */
/* visibility, not just opacity: before the timer cue the grid must be out of
   the accessibility tree and hit-testing too, or it reads ahead of the room. */
.capacity-reference { margin-top: 48px; max-width: 1050px; display: grid; gap: 24px; visibility: hidden; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.layout-question[data-cue-index="1"] .capacity-reference { visibility: visible; opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.layout-question[data-cue-index="1"] .scene-title { margin-top: 84px; font-size: 68px; }
.layout-question[data-cue-index="1"] .scene-body { font-size: 36px; }
.capref-line { margin: 0; }
.capref-name { font: 700 34px/1.2 var(--sans); letter-spacing: .05em; color: var(--amber); text-transform: uppercase; }
.capref-pillar { font: 700 34px/1.25 var(--serif); }
.capref-why { margin: 6px 0 0; font: 600 28px/1.3 var(--sans); color: #5b6670; }
/* Audience-replay controls and privacy-safe Pulse treatment. */
html, body { background: #090d18; }
/* The control bar is position:fixed, so body padding reserved nothing it did
   not already overlay. With `* { box-sizing: border-box }` and
   `body { height: 100% }` that padding only shrank body's CONTENT height —
   exactly what the calc() below resolves against — subtracting the bar twice
   (windowH - 168 for an 84px bar, windowH - 264 at <=900px). #viewport is now
   the single reservation, and --player-controls-height is measured from the
   live bar by player.mjs; the literal is only the value before the module runs. */
#viewport {
  position: relative;
  overflow: hidden;
  height: calc(100% - var(--player-controls-height, 84px));
}
#media-layer { pointer-events: none; }
#media-layer[data-populated="true"] { pointer-events: auto; }

.player-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 300;
  padding: .7rem 1rem;
  border-radius: .5rem;
  background: #faf5ec;
  color: #17213d;
  font: 700 1rem/1.2 var(--sans);
  transform: translateY(-180%);
}
.player-skip-link:focus { transform: none; }

.player-controls {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border-top: 1px solid rgba(250,245,236,.22);
  background: rgba(9,13,24,.97);
  color: #faf5ec;
  font-family: var(--sans);
}
.player-controls button,
.player-controls input {
  min-height: 48px;
  border: 2px solid rgba(250,245,236,.42);
  border-radius: .65rem;
  background: rgba(250,245,236,.08);
  color: #faf5ec;
  font: 700 1rem/1.1 var(--sans);
}
.player-controls button { padding: .75rem 1rem; cursor: pointer; }
.player-controls button:hover { border-color: #f2be83; background: rgba(180,83,9,.28); }
.player-controls button:disabled,
.player-controls button[aria-disabled="true"] { cursor: default; opacity: .42; }

.public-pause-actions button[aria-disabled="true"] { cursor: default; opacity: .45; }
.public-pause-panel.is-complete { border-color: #72d2c9; }
.public-pause-panel.is-complete .public-pause-time { color: #72d2c9; }
.player-controls button[aria-pressed="true"] { border-color: #72d2c9; background: rgba(15,110,104,.44); }
.player-controls input { width: 4.2rem; padding: .55rem; text-align: center; }
.player-controls :focus-visible,
.local-poll-option:focus-visible {
  outline: 4px solid #f2be83;
  outline-offset: 3px;
}
#position-status { min-width: 17rem; color: #f2be83; font-weight: 700; text-align: center; }
#scene-jump { display: flex; align-items: center; gap: .4rem; }
#scene-jump label { font-size: .9rem; font-weight: 700; }
/* ---- S01, the pre-show hold (Matt, 2026-07-28) ----------------------------
   The title-card illustration, alive. The scene defeats the stage's night
   gradient and takes the card's paper ground; the live eyebrow/title/question
   are typeset like the card, and the vector scenery below cycles forever:
   the waypoint trail draws in, canopies sway, the shortcut line cuts across
   and evaporates, the card settles, the cycle re-begins (48s master loop).
   Base (unanimated) styles ARE the settled card — trail and waypoints on,
   shortcut and drifting seeds off — so the static/reduced-motion animation
   kills below render the finished still for free. */
.scene.layout-holding { background: #f5efe2; color: #23201a; }
.scene.layout-holding .eyebrow { color: #b45309; letter-spacing: .14em; }
.scene.layout-holding .scene-title { color: #23201a; }
.scene.layout-holding .scene-body {
  max-width: 860px;
  color: #0f6e68;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 54px;
  line-height: 1.18;
  letter-spacing: .04em;
}
.layout-holding .opening-loop { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.opening-loop svg { display: block; width: 100%; height: 100%; }

.ol-wp, .ol-wp-ring, .ol-drift-bob, .ol-compass-needle { transform-box: fill-box; transform-origin: center; }
.ol-canopy { transform-box: fill-box; transform-origin: 50% 100%; }
.ol-trail-wipe, .ol-shortcut-line, .ol-shortcut-head, .ol-drift-a, .ol-drift-b { opacity: 0; }
.ol-shortcut-line { stroke-dashoffset: 100; }

.ol-trail { animation: ol-trail-cycle 48s linear infinite; }
.ol-trail-dots { animation: ol-trail-drift 36s linear infinite; }
/* No rule-level opacity here: the reveal keyframes set opacity at every
   segment, and the base opacity-0 above must win when animations are killed
   (static/reduced-motion) so the wipe never covers the settled trail. */
.ol-trail-wipe { animation: ol-trail-reveal 48s linear infinite; }
.ol-trail-tail { animation: ol-tail-in 48s linear infinite; }
.ol-wp1 { animation: ol-wp-pop-1 48s linear infinite; }
.ol-wp2 { animation: ol-wp-pop-2 48s linear infinite; }
.ol-wp3 { animation: ol-wp-pop-3 48s linear infinite; }
.ol-wp4 { animation: ol-wp-pop-4 48s linear infinite; }
.ol-wp5 { animation: ol-wp-pop-5 48s linear infinite; }
.ol-wp-ring { animation: ol-wp-pulse 6s ease-in-out infinite; }
.ol-wp2 .ol-wp-ring { animation-delay: -1.2s; }
.ol-wp3 .ol-wp-ring { animation-delay: -2.4s; }
.ol-wp4 .ol-wp-ring { animation-delay: -3.6s; }
.ol-wp5 .ol-wp-ring { animation-delay: -4.8s; }
.ol-acacia-a .ol-canopy { animation: ol-sway 9s ease-in-out -2s infinite alternate; }
.ol-acacia-b .ol-canopy { animation: ol-sway 7s ease-in-out -5s infinite alternate; }
.ol-acacia-c .ol-canopy { animation: ol-sway 11s ease-in-out -8s infinite alternate; }
.ol-shortcut-line { animation: ol-shortcut-draw 48s linear infinite; }
.ol-shortcut-head { animation: ol-shortcut-head-pop 48s linear infinite; }
.ol-compass-needle { animation: ol-wobble 13s ease-in-out infinite alternate; }
.ol-drift-a { animation: ol-drift-x 41s linear infinite; }
.ol-drift-b { animation: ol-drift-x 53s linear -19s infinite; }
.ol-drift-bob { animation: ol-drift-y 5s ease-in-out infinite alternate; }
.ol-drift-b .ol-drift-bob { animation-duration: 6.4s; animation-delay: -3s; }

@keyframes ol-trail-cycle {
  0%, 2% { opacity: 0; }
  6%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes ol-trail-reveal {
  0%, 2% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-out; }
  14% { stroke-dashoffset: -100; opacity: 1; }
  16%, 96% { stroke-dashoffset: -100; opacity: 0; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ol-trail-drift {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -252; }
}
@keyframes ol-tail-in {
  0%, 15% { opacity: 0; }
  18%, 88% { opacity: .8; }
  94%, 100% { opacity: 0; }
}
@keyframes ol-wp-pop-1 {
  0%, 5% { opacity: 0; transform: scale(.6); }
  6%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ol-wp-pop-2 {
  0%, 7.5% { opacity: 0; transform: scale(.6); }
  8.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ol-wp-pop-3 {
  0%, 10% { opacity: 0; transform: scale(.6); }
  11%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ol-wp-pop-4 {
  0%, 12.5% { opacity: 0; transform: scale(.6); }
  13.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ol-wp-pop-5 {
  0%, 15% { opacity: 0; transform: scale(.6); }
  16%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ol-wp-pulse {
  0%, 100% { transform: scale(1); stroke-opacity: .75; }
  50% { transform: scale(1.1); stroke-opacity: 1; }
}
@keyframes ol-sway {
  from { transform: rotate(-1.1deg); }
  to { transform: rotate(1.1deg); }
}
@keyframes ol-shortcut-draw {
  0%, 58% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  61%, 70% { stroke-dashoffset: 0; opacity: 1; }
  75% { stroke-dashoffset: 0; opacity: 0; }
  75.5%, 100% { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes ol-shortcut-head-pop {
  0%, 60.5% { opacity: 0; }
  62%, 70% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes ol-wobble {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
@keyframes ol-drift-x {
  0% { transform: translateX(-60px); opacity: 0; }
  8% { opacity: .3; }
  92% { opacity: .3; }
  100% { transform: translateX(2040px); opacity: 0; }
}
@keyframes ol-drift-y {
  from { transform: translateY(-12px); }
  to { transform: translateY(12px); }
}

.local-poll-options {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 54px;
}
.local-poll-option {
  min-height: 82px;
  padding: 20px 30px;
  border: 4px solid rgba(250,245,236,.68);
  border-radius: 999px;
  background: rgba(250,245,236,.08);
  color: inherit;
  cursor: pointer;
  font: 700 40px/1.12 var(--sans);
}
.local-poll-option:hover,
.local-poll-option[aria-pressed="true"] {
  border-color: #f2be83;
  background: rgba(23,33,61,.34);
  box-shadow: inset 0 0 0 4px rgba(242,190,131,.25);
}
.local-poll-status {
  margin-top: 32px;
  color: #f8dfbd;
  font: 700 36px/1.2 var(--sans);
}
.local-poll-privacy {
  margin-top: 18px;
  color: rgba(250,245,236,.78);
  font: 600 28px/1.25 var(--sans);
}

.choice-path-summary {
  position: absolute;
  top: 250px;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.layout-path .path-visual { height: 420px; }
.choice-path-summary p {
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  border: 2px solid rgba(23,33,61,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  color: var(--night);
  font: 700 25px/1.15 var(--sans);
  text-align: center;
}

.public-media-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #080d18;
}
.public-media-shell video,
.public-media-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080d18;
}
/* The media label overlay was removed on 2026-07-20: it sat opaque on top of
   the film. The description survives on the video's aria-label, the caption
   track, and the cue-0 film poster's alt text. */

/* Shown only when a policy refusal blocks the gesture-started playback.
   .public-media-shell is display:grid/place-items:center, so this must be
   absolute — an in-flow child would create a second track and shrink the video. */
.public-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  min-height: 96px;
  padding: 22px 40px;
  border: 4px solid #f2be83;
  border-radius: 999px;
  background: rgba(8,13,24,.92);
  color: #faf5ec;
  cursor: pointer;
  font: 700 44px/1.1 var(--sans);
}
.public-media-play:focus-visible { outline: 5px solid #f2be83; outline-offset: 6px; }

/* The pinned r13 stylesheet sizes .layout-film .film-poster (height/margin/
   background/border-color) but never set display/width/object-fit, and
   player.mjs never built the element at all — leaving ~64% of film scenes
   empty at cue 0. Completing both halves fills that gap. */
.layout-film .film-poster,
.layout-clip .film-poster {
  display: block;
  width: 100%;
  object-fit: contain;
  object-position: center;
  border: 4px solid rgba(250,245,236,.4);
  border-radius: 22px;
}

#pause-layer { position: absolute; inset: 0; z-index: 24; pointer-events: none; }
.public-pause-panel {
  position: absolute;
  right: 72px;
  bottom: 70px;
  width: min(620px, calc(100% - 144px));
  padding: 30px 34px;
  border: 4px solid var(--amber);
  border-radius: 24px;
  background: rgba(23,33,61,.96);
  color: var(--paper);
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
  pointer-events: auto;
}
.layout-question[data-pause-active="true"] .scene-title,
.layout-question[data-pause-active="true"] .scene-body { max-width: 1000px; }
.public-pause-panel[data-pause-scene="S34"] { top: 72px; bottom: auto; width: 560px; }
.public-pause-panel h2 { margin: 0; font: 700 42px/1.08 var(--serif); }
.public-pause-panel p { margin: 14px 0 0; font: 600 27px/1.3 var(--sans); }
.public-pause-time { display: block; margin-top: 18px; color: #f2be83; font: 700 68px/1 var(--sans); font-variant-numeric: tabular-nums; }
.public-pause-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.public-pause-actions button {
  min-height: 54px;
  padding: 12px 18px;
  border: 3px solid rgba(250,245,236,.56);
  border-radius: 10px;
  background: rgba(250,245,236,.08);
  color: var(--paper);
  cursor: pointer;
  font: 700 24px/1.1 var(--sans);
}
.public-pause-actions button:hover { border-color: #f2be83; }
.public-pause-actions button:focus-visible { outline: 4px solid #f2be83; outline-offset: 3px; }

.layout-closing .resource-state .qr-placeholder {
  width: auto;
  height: auto;
  border: 0;
  color: #f2be83;
  font-size: 36px;
}
.resource-link { color: #f2be83; text-decoration-thickness: 5px; text-underline-offset: 10px; }
.resource-link:focus-visible { outline: 5px solid #f2be83; outline-offset: 8px; }

ul.hands-options {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

html.static *, html.reduced-motion * { animation: none !important; transition: none !important; }
html.static [data-reveal] { transform: none; }

@media (max-width: 900px) {
  #viewport { height: calc(100% - var(--player-controls-height, 132px)); }
  .player-controls { min-height: 132px; flex-wrap: wrap; gap: .45rem; }
  #position-status { order: -1; width: 100%; min-width: 0; }
    .player-controls button { padding: .65rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* S02's backdrop is the Chapter-01 poster, and that poster carries the film's
   own burned-in title card ("TUESDAY NIGHT / 9:40 PM / THE HOUSE IS QUIET.")
   in exactly the column where the scene sets its live heading. At the stage
   scrim's .94 the lettering ghosts through behind "Submission 23 of 47." like
   a double exposure. Full black over the text column, easing to the same
   photo reveal on the right, keeps the kitchen visible and buries the type. */
.layout-opening::before {
  background: linear-gradient(90deg, rgba(8,12,25,1) 0 46%, rgba(8,12,25,.32) 74%, rgba(8,12,25,.5));
}

/* The experience frame is the one interactive embed: the visitor clicks the
   choices. The generic prototype-frame rule turns pointer events off. */
.experience-frame { pointer-events: auto; }
.layout-stills .stills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.layout-stills .stills-grid img { width: 100%; height: auto; border-radius: 14px; border: 3px solid rgba(23,33,61,.18); }
.layout-stills .stills-note { margin-top: 30px; font: 600 28px/1.35 var(--sans); color: #5b6670; }