:root {
  /* Ground, ink and rules from the shared ecosystem tokens with pre-adoption
     fallbacks. The rust/teal/blue/gold deck accents stay local. */
  --ink: var(--mjm-ink, #17232d);
  --ink-soft: var(--mjm-muted, #34434e);
  --paper: var(--mjm-bg, #f3efe6);
  --paper-deep: #e8e0d2;
  --white: var(--mjm-surface, #fffdf8);
  --rust: #91462f;
  --rust-dark: #6f3324;
  --teal: #2f6970;
  --teal-dark: #1f5057;
  --blue: #315f7c;
  --gold: #b58127;
  --line: var(--mjm-line, rgba(23, 35, 45, .18));
  --mjm-accent: var(--mjm-rust, #91462f);
  --line-light: rgba(255, 253, 248, .22);
  --shadow: 0 22px 70px rgba(18, 28, 36, .22);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--ink);
  font-family: var(--sans);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f5c86a;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  transform: translateY(-180%);
  transition: transform .16s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.presentation-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr) 74px;
  background:
    radial-gradient(circle at 50% -20%, rgba(74, 112, 126, .32), transparent 42%),
    #111b23;
}

.presentation-bar,
.control-dock {
  position: relative;
  z-index: 20;
  display: grid;
  align-items: center;
  color: rgba(255, 253, 248, .88);
  background: rgba(17, 27, 35, .94);
  backdrop-filter: blur(16px);
}

.presentation-bar {
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  gap: 22px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.presentation-brand {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 253, 248, .4);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
}

.presentation-brand strong,
.presentation-brand small {
  display: block;
}

.presentation-brand strong {
  color: var(--white);
  font-size: .86rem;
}

.presentation-brand small {
  margin-top: 2px;
  color: rgba(255, 253, 248, .58);
  font-size: .7rem;
}

.presentation-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.presentation-status p {
  margin: 0;
}

.presentation-status p + p {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 253, 248, .24);
  color: rgba(255, 253, 248, .62);
}

.presentation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.presentation-actions button,
.control-dock button,
.notes-header button,
.keyboard-help button {
  min-height: 40px;
  border: 1px solid rgba(255, 253, 248, .16);
  color: rgba(255, 253, 248, .84);
  background: rgba(255, 253, 248, .06);
  cursor: pointer;
}

.presentation-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: .72rem;
}

.presentation-actions button:hover,
.presentation-actions button[aria-pressed="true"],
.control-dock button:hover {
  color: var(--white);
  background: rgba(255, 253, 248, .12);
}

.stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px 34px;
}

.deck {
  position: relative;
  width: min(calc(100vw - 68px), calc(177.778vh - 305.778px));
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.slide {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  padding: 5.2cqw 6.25cqw 4.8cqw;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(23, 35, 45, .035) 6% calc(6% + 1px), transparent calc(6% + 1px)),
    var(--paper);
  isolation: isolate;
}

.slide.active {
  display: block;
  animation: slide-in .32s ease both;
}

.slide::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -13cqw;
  bottom: -24cqw;
  width: 41cqw;
  height: 41cqw;
  border: 1px solid rgba(23, 35, 45, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 3.6cqw rgba(23, 35, 45, .025),
    0 0 0 7.2cqw rgba(23, 35, 45, .018);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(1.2%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-field {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eyebrow {
  margin: 0 0 1.1cqw;
  color: var(--rust);
  font-size: clamp(.68rem, .9cqw, .98rem);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.slide h1,
.slide h2,
.slide h3,
.slide p,
.slide blockquote {
  overflow-wrap: break-word;
}

.slide h1,
.slide h2 {
  margin: 0;
  max-width: 17em;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.04;
  text-wrap: balance;
}

.slide h1 {
  font-size: clamp(2rem, 4.45cqw, 4.8rem);
}

.slide h2 {
  font-size: clamp(1.9rem, 4.2cqw, 4.5rem);
  text-wrap: pretty;
}

/* Length-aware title treatments. Short titles can stay tight and large;
   long titles need looser tracking and leading before any size reduction. */
.slide[data-title="short"] h1,
.slide[data-title="short"] h2 {
  max-width: 12em;
  font-size: clamp(2.2rem, 5.4cqw, 5.9rem);
  letter-spacing: -.03em;
  line-height: .99;
}

.slide[data-title="long"] h1,
.slide[data-title="long"] h2 {
  max-width: 23em;
  font-size: clamp(1.6rem, 3.2cqw, 3.5rem);
  letter-spacing: -.014em;
  line-height: 1.09;
}

/* In-title hierarchy: a title is a reading sequence, not a uniform block. */
.slide h1 .t-lead,
.slide h2 .t-lead {
  display: block;
}

.slide h1 .t-quiet,
.slide h2 .t-quiet {
  display: block;
  color: rgba(255, 253, 248, .62);
  font-size: .58em;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.16;
}

.slide-light h1 .t-quiet,
.slide-light h2 .t-quiet {
  color: rgba(23, 35, 45, .58);
}

.slide h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(.92rem, 1.65cqw, 1.7rem);
  line-height: 1.05;
}

.slide p,
.slide li {
  font-size: clamp(.72rem, 1.35cqw, 1.28rem);
  line-height: 1.43;
}

.slide p {
  margin: 0;
}

.subtitle {
  max-width: 39em;
  margin-top: 1.65cqw !important;
  color: var(--ink-soft);
  font-size: clamp(.88rem, 1.6cqw, 1.5rem) !important;
}

.slide-coda {
  margin-top: auto !important;
  padding-top: 1.4cqw;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(.85rem, 1.5cqw, 1.5rem) !important;
  font-style: italic;
}

.source-line {
  margin-top: auto !important;
  color: rgba(23, 35, 45, .68);
  font-size: clamp(.62rem, .9cqw, .9rem) !important;
  line-height: 1.35 !important;
}

.slide-title {
  color: var(--white);
  background:
    linear-gradient(112deg, rgba(10, 20, 28, .96), rgba(22, 39, 50, .88)),
    var(--ink);
}

/* Aperture: concentric rings converging on an opening, so the right-hand
   negative space frames the title instead of sitting inert. */
.slide-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -9cqw;
  width: 54cqw;
  height: 54cqw;
  border: 1px solid rgba(255, 253, 248, .16);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow:
    0 0 0 5cqw rgba(255, 253, 248, .028),
    0 0 0 10cqw rgba(255, 253, 248, .02),
    0 0 0 15cqw rgba(255, 253, 248, .013);
}

.slide-title::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 6cqw;
  width: 24cqw;
  height: 24cqw;
  border: 1px solid rgba(224, 180, 96, .38);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 38% 34%,
    rgba(224, 180, 96, .20),
    rgba(224, 180, 96, .05) 56%,
    transparent 74%);
}

.slide-title .slide-field {
  max-width: 63%;
  justify-content: center;
}

.slide-title .eyebrow {
  color: #e0b460;
}

.slide-title h1 {
  max-width: 15em;
  letter-spacing: -.03em;
  line-height: 1;
}

.slide-title h1 .t-lead {
  font-size: 1.3em;
  letter-spacing: -.036em;
  line-height: .95;
}

.slide-title h1 .t-quiet {
  margin-top: 1.15cqw;
  font-size: .5em;
  line-height: 1.2;
}

.slide-title .subtitle {
  color: rgba(255, 253, 248, .72);
}

.title-meta {
  margin-top: auto;
  padding-top: 1.5cqw;
  border-top: 1px solid var(--line-light);
}

.title-meta p {
  color: rgba(255, 253, 248, .7);
  font-size: clamp(.65rem, 1.02cqw, .98rem);
  line-height: 1.55;
}

.title-meta strong {
  color: var(--white);
}

.title-index {
  position: absolute;
  right: 4.4cqw;
  bottom: 4.4cqw;
  display: grid;
  grid-template-columns: auto 5.5cqw auto;
  align-items: center;
  gap: .8cqw;
  color: rgba(255, 253, 248, .64);
  font-size: clamp(.6rem, .82cqw, .82rem);
  letter-spacing: .12em;
}

.title-index div {
  height: 1px;
  background: rgba(255, 253, 248, .34);
}

.slide-statement {
  color: var(--white);
  background: var(--rust-dark);
}

.slide-statement::after {
  border-color: rgba(255, 253, 248, .15);
  box-shadow:
    0 0 0 3.6cqw rgba(255, 253, 248, .025),
    0 0 0 7.2cqw rgba(255, 253, 248, .018);
}

.slide-statement .eyebrow {
  color: #f0c477;
}

.slide-statement h2 {
  max-width: 10.5em;
}

.slide-statement .slide-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26cqw, .95fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 4.4cqw;
}

.slide-statement .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.slide-statement h2 {
  grid-column: 1;
  grid-row: 2;
}

/* Trace: two artifacts drawn identically above a line of visibility, with
   wildly different amounts of process below it. The claim is not that product
   differs from learning, which was always true; it is that the product carries
   no record of which case it is. The asymmetry has to sit under the line, and
   the two documents above it have to be pixel-identical, or the point inverts. */
.trace-field {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1.05cqw;
}

/* Both pairs share this track definition so the columns register across the
   horizon line. Changing one without the other breaks the read. */
.trace-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5cqw;
  align-items: start;
}

.trace-cap {
  color: rgba(255, 253, 248, .72);
  font-size: clamp(.6rem, .82cqw, .88rem) !important;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Sits immediately under the horizon so each half reads caption-then-content. */
.trace-cap-under {
  margin-top: -.25cqw !important;
}

/* The finished surface: identical markup, no per-column overrides. */
.trace-doc {
  display: flex;
  flex-direction: column;
  gap: .62cqw;
  padding: 1cqw .95cqw;
  border: 1px solid rgba(255, 253, 248, .45);
  border-radius: .3cqw;
  background: rgba(255, 253, 248, .07);
}

.trace-doc i {
  height: .62cqw;
  border-radius: .31cqw;
  background: rgba(255, 253, 248, .92);
}

.trace-doc i:nth-child(4) { width: 84%; }
.trace-doc i:nth-child(5) { width: 46%; }

/* The evidence horizon. Dashed rather than solid because it is a limit of
   what can be seen, not a boundary in the work itself. */
.trace-horizon {
  display: flex;
  align-items: center;
  gap: .8cqw;
  margin: .15cqw 0 !important;
}

.trace-horizon::before,
.trace-horizon::after {
  content: "";
  flex: 1;
  border-top: 1px dashed rgba(245, 217, 168, .72);
}

/* #f0c274 is only 4.05:1 on rust, which passes as large text for a glyph but
   not for a caption this size. #f5d9a8 clears AA at 4.93:1. */
.trace-horizon span {
  color: #f5d9a8;
  font-family: var(--serif);
  font-size: clamp(.6rem, .95cqw, .95rem);
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}

/* The route below the line. Stacked bars were tried here first and read as a
   second paragraph of text, which is the misreading this slide has to avoid.
   A switchback against a straight line carries the friction argument directly:
   same destination, different distance travelled, and the distance is the part
   that does not survive into the product. */
.trace-pair-routes {
  align-items: stretch;
}

.trace-route {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55cqw;
}

.trace-route svg {
  width: 100%;
  height: auto;
  fill: none;
  overflow: visible;
}

.route-line {
  stroke: rgba(255, 253, 248, .82);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-start {
  fill: #f5d9a8;
  stroke: none;
}

.route-label {
  color: rgba(255, 253, 248, .72);
  font-family: var(--serif);
  font-size: clamp(.58rem, .92cqw, .95rem);
  font-style: italic;
  line-height: 1.2;
  text-align: center;
}

.slide-statement .slide-coda {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  color: rgba(255, 253, 248, .78);
  border-color: rgba(255, 253, 248, .24);
}

.number-story {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 4cqw;
  align-items: center;
  margin: 2.8cqw 0 1.4cqw;
}

.number-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.number {
  color: var(--teal-dark);
  font-family: var(--serif);
  font-size: clamp(3.4rem, 8.2cqw, 8.6rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .85;
}

.number-rust {
  color: var(--rust);
}

.number-block p {
  max-width: 27em;
  margin-top: 1.6cqw;
  color: var(--ink-soft);
}

.number-divider {
  height: 65%;
  background: var(--line);
}

.boundary-axis {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(7.5cqw, .35fr) 1fr;
  align-items: stretch;
  margin-top: 2.4cqw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.boundary-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.7cqw 2cqw;
}

.boundary-side > span,
.framework-columns article > span,
.framework-foundation > span,
.contribution-lines span,
.evidence-lines span {
  margin-bottom: .7cqw;
  font-size: clamp(.6rem, .8cqw, .82rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.boundary-side p {
  margin-top: .75cqw;
  color: var(--ink-soft);
}

.productive {
  background: rgba(47, 105, 112, .09);
}

.productive > span {
  color: var(--teal-dark);
}

.exclusionary {
  background: rgba(145, 70, 47, .08);
}

.exclusionary > span {
  color: var(--rust);
}

.boundary-marker {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--ink);
}

.boundary-marker span {
  width: 18cqw;
  font-size: clamp(.58rem, .84cqw, .84rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-90deg);
}

.media-timeline {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 2.2cqw 0 1.4cqw;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The cell keeps its position, border, and stage background classes; the
   button inside carries the layout the cell used to have. strong, small, and
   span are all phrasing content, so nothing had to change element type. */
.media-timeline li {
  position: relative;
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.stage-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 1.4cqw 1.15cqw;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.stage-button:hover {
  background: rgba(23, 35, 45, .06);
}

.stage-button.selected {
  background: rgba(47, 105, 112, .15);
  box-shadow: inset 0 0 0 1px rgba(31, 80, 87, .55);
}

/* The current-stage cell is teal with light text, so it needs its own pair. */
.timeline-current .stage-button:hover {
  background: rgba(255, 253, 248, .09);
}

.timeline-current .stage-button.selected {
  background: rgba(255, 253, 248, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .55);
}

.media-timeline li:last-child {
  border-right: 0;
}

.media-timeline strong,
.media-timeline small {
  display: block;
}

.media-timeline strong {
  font-family: var(--serif);
  font-size: clamp(.75rem, 1.25cqw, 1.3rem);
  line-height: 1.08;
}

.media-timeline small {
  margin-top: .7cqw;
  color: var(--ink-soft);
  font-size: clamp(.55rem, .78cqw, .8rem);
  line-height: 1.35;
}

.timeline-number {
  position: absolute;
  top: 1.15cqw;
  left: 1.05cqw;
  margin: 0;
  color: rgba(23, 35, 45, .52);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.8cqw, 4.8rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
}

/* Resting line and the five stage panels share one reserved block, so
   selecting a stage never resizes the timeline above it. */
.timeline-aside {
  display: grid;
  align-content: center;
  min-height: 8.8cqw;
  margin-top: .2cqw;
}

.timeline-rest {
  margin: 0;
}

.stage-detail {
  display: grid;
  gap: .3cqw;
  padding-left: 1.1cqw;
  border-left: .22cqw solid var(--teal-dark);
}

.stage-detail[hidden] {
  display: none;
}

.stage-kicker {
  color: var(--teal-dark);
  font-size: .84cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stage-body {
  max-width: 68em;
  font-size: 1.18cqw;
  line-height: 1.34;
}

.stage-note {
  max-width: 74em;
  color: var(--ink-soft);
  font-size: .95cqw;
  line-height: 1.3;
}

.timeline-original {
  background: rgba(49, 95, 124, .08);
}

.timeline-current {
  color: var(--white);
  background: var(--teal-dark);
}

.timeline-current small {
  color: rgba(255, 253, 248, .7);
}

.timeline-current .timeline-number {
  color: rgba(255, 253, 248, .55);
}

.bypass-map {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  align-items: center;
  margin-top: 1.7cqw;
  padding-bottom: 4.5cqw;
}

.process-step {
  position: relative;
  z-index: 2;
  min-height: 11cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4cqw;
  border-top: .5cqw solid var(--teal);
  background: rgba(255, 253, 248, .7);
  box-shadow: 0 10px 24px rgba(23, 35, 45, .08);
}

.process-step.bypassed {
  border-top-color: var(--gold);
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 16px 34px rgba(23, 35, 45, .13);
  transform: translateY(-.65cqw);
}

.process-step span {
  color: var(--rust);
  font-size: clamp(.55rem, .75cqw, .76rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.process-step strong {
  margin-top: .8cqw;
  font-family: var(--serif);
  font-size: clamp(.8rem, 1.3cqw, 1.35rem);
  line-height: 1.12;
}

.pressure-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2cqw;
  margin: 0 0 .4cqw;
  padding: 0;
  list-style: none;
}

.pressure-row li {
  padding: .85cqw 1.05cqw;
  border-left: .3cqw solid var(--gold);
  background: rgba(181, 129, 39, .09);
}

.pressure-row strong {
  display: block;
  color: var(--rust-dark);
  font-family: var(--serif);
  font-size: clamp(.7rem, 1.1cqw, 1.12rem);
  line-height: 1.14;
}

.pressure-row small {
  display: block;
  margin-top: .35cqw;
  color: var(--ink-soft);
  font-size: clamp(.52rem, .74cqw, .74rem);
  line-height: 1.3;
}

.bypass-arc {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: .6cqw;
  left: 5%;
  height: 6.5cqw;
  border: .28cqw solid var(--rust);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.bypass-arc::before,
.bypass-arc::after {
  content: "";
  position: absolute;
  top: -.15cqw;
  width: 0;
  height: 0;
  border-top: .65cqw solid transparent;
  border-bottom: .65cqw solid transparent;
}

.bypass-arc::before {
  left: -.25cqw;
  border-right: .9cqw solid var(--rust);
}

.bypass-arc::after {
  right: -.25cqw;
  border-left: .9cqw solid var(--rust);
}

.bypass-arc span {
  position: absolute;
  bottom: -1cqw;
  left: 50%;
  padding: .2cqw .8cqw;
  color: var(--rust-dark);
  background: var(--paper);
  font-size: clamp(.58rem, .82cqw, .82rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.slide-framework {
  color: var(--white);
  background: var(--ink);
}

.slide-framework::after {
  border-color: rgba(255, 253, 248, .12);
  box-shadow:
    0 0 0 3.6cqw rgba(255, 253, 248, .02),
    0 0 0 7.2cqw rgba(255, 253, 248, .014);
}

.slide-framework .eyebrow {
  color: #e0b460;
}

.slide-framework .source-line {
  color: rgba(255, 253, 248, .62);
}

.framework-field {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 1.4cqw;
  padding: 1.5cqw 2cqw 1.3cqw;
  border: 1px dashed rgba(181, 129, 39, .55);
  border-radius: 1.6cqw;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(181, 129, 39, .10), transparent 62%),
    rgba(181, 129, 39, .045);
}

.field-label {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(.78rem, 1.28cqw, 1.3rem);
  font-weight: 700;
}

.field-label span {
  margin-right: .7cqw;
  padding: .18cqw .6cqw;
  border: 1px solid rgba(181, 129, 39, .5);
  border-radius: .3cqw;
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Three learner-facing relations arranged around the learning event.
   The field contains them; it is not a fourth peer node. */
.framework-constellation {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: .9cqw 2.2cqw;
  margin: .9cqw 0 .6cqw;
}

.constellation-core {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border: 1px solid rgba(255, 253, 248, .34);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, rgba(255, 253, 248, .16), rgba(255, 253, 248, .03) 68%);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(.6rem, .95cqw, .96rem);
  line-height: 1.2;
  text-align: center;
}

/* Each learner-facing form is a control. Selecting one names the pressure it
   answers and lights the infrastructural field it depends on, which is the
   dependency this slide asserts. Emphasis is added to the selected node rather
   than removed from the others: dimming unselected cards would drop their text
   contrast, the failure already recorded for progressive reveals on 2026-08-02. */
/* Block, not flex, and the kicker stays inline: that reproduces the article's
   box model exactly, including the taller line box the inline kicker sat on.
   A flex column shortened every card by about 10px. */
.framework-constellation .node {
  position: relative;
  display: block;
  padding: .9cqw 1.15cqw;
  border: 0;
  border-left: .28cqw solid var(--gold);
  color: inherit;
  background: rgba(255, 253, 248, .05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.framework-constellation .node:hover {
  background: rgba(255, 253, 248, .11);
}

/* box-shadow, not a wider border: the node is a fixed grid cell, and changing
   its border width would rewrap the text and change the row height. */
.framework-constellation .node.selected {
  background: rgba(181, 129, 39, .22);
  box-shadow: inset 0 0 0 1px rgba(181, 129, 39, .6);
}

.node-head  { grid-column: 1; grid-row: 1; }
.node-room  { grid-column: 3; grid-row: 1; }
.node-world { grid-column: 1; grid-row: 2; }

.node-kicker {
  color: var(--gold);
  font-size: clamp(.5rem, .72cqw, .74rem);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Reproduces the h3 this replaced: `.slide h3` supplied the serif face and
   1.05 leading, `.framework-constellation h3` the size and margins, and the
   UA sheet the bold weight. Overview and narrow-screen sizes are restated
   below, since those rules keyed on the element name. */
.node-title {
  display: block;
  margin: .25cqw 0 .3cqw;
  font-family: var(--serif);
  font-size: clamp(.85rem, 1.5cqw, 1.55rem);
  font-weight: 700;
  line-height: 1.05;
}

.deck.overview .slide .node-title {
  font-size: 1.65cqw;
}

.deck.overview .slide .node-desc {
  font-size: 1.35cqw;
}

@media (max-width: 820px) {
  .slide .node-title {
    font-size: 1.65cqw;
  }

  .slide .node-desc {
    font-size: 1.35cqw;
  }
}

.node-desc {
  display: block;
  color: rgba(255, 253, 248, .82);
  font-size: clamp(.58rem, .88cqw, .9rem);
  line-height: 1.32;
}

.node-small {
  display: block;
  margin-top: .35cqw;
  color: rgba(255, 253, 248, .55);
  font-size: clamp(.48rem, .68cqw, .7rem);
}

.framework-constellation p {
  margin: 0;
  color: rgba(255, 253, 248, .82);
  font-size: clamp(.58rem, .88cqw, .9rem);
  line-height: 1.32;
}

.framework-constellation small {
  display: block;
  margin-top: .35cqw;
  color: rgba(255, 253, 248, .55);
  font-size: clamp(.48rem, .68cqw, .7rem);
}

/* Resting note and the three detail panels share one cell, at a reserved
   height, so selecting a node never moves the constellation. */
.field-aside {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  align-content: center;
  align-self: center;
  min-height: 9.6cqw;
}

.field-note {
  margin: 0;
  color: rgba(255, 253, 248, .72);
  font-size: clamp(.55rem, .82cqw, .84rem);
  line-height: 1.34;
}

.node-detail {
  display: flex;
  flex-direction: column;
  gap: .2cqw;
  padding-left: 1.05cqw;
  border-left: .28cqw solid var(--gold);
}

.node-detail[hidden] {
  display: none;
}

.detail-kicker {
  color: var(--gold);
  font-size: clamp(.5rem, .72cqw, .74rem);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.detail-pressure {
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(.8rem, 1.35cqw, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Second kicker inside a panel. Dimmer than the "Answers" kicker so the
   pressure link still reads first and the instance reads as illustration. */
.detail-kicker-sub {
  margin-top: .34cqw;
  color: rgba(217, 164, 65, .82);
}

.detail-body {
  color: rgba(255, 253, 248, .82);
  font-size: clamp(.58rem, .88cqw, .9rem);
  line-height: 1.32;
}

.detail-depends {
  margin-top: .2cqw;
  color: rgba(255, 253, 248, .65);
  font-size: clamp(.48rem, .7cqw, .72rem);
  line-height: 1.3;
}

/* The dependency the slide claims, made visible while a node is selected. */
.framework-field.node-active {
  border-color: rgba(181, 129, 39, .95);
}

.framework-field.node-active .field-label {
  color: #d9a441;
}


.question-sequence {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  margin: 2cqw 0 1.1cqw;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.question-sequence li {
  display: grid;
  border-bottom: 1px solid var(--line);
}

/* Each question is a control. The three stay on the slide at all times; the
   button only swaps the evidence panel underneath, so selecting one never
   removes a question from view or from the accessibility tree. */
.rq-button {
  display: grid;
  grid-template-columns: 6cqw 1fr auto;
  gap: 1.4cqw;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: .3cqw .8cqw .3cqw 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}

.rq-tag {
  color: var(--rust);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.8cqw, 1.8rem);
  font-weight: 700;
}

.rq-text {
  max-width: 56em;
}

.rq-cue {
  padding: .34cqw .8cqw;
  border: 1px solid rgba(145, 70, 47, .45);
  color: var(--rust);
  font-size: .92cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}

.rq-button:hover,
.rq-button:focus-visible {
  background: rgba(145, 70, 47, .07);
}

.rq-button.selected {
  background: rgba(145, 70, 47, .12);
}

.rq-button:hover .rq-cue,
.rq-button.selected .rq-cue {
  color: var(--white);
  background: var(--rust);
  border-color: var(--rust);
}

/* Fixed height so swapping panels never reflows the slide. */
.rq-evidence {
  display: flex;
  align-items: center;
  min-height: 11.4cqw;
  padding: 1cqw 1.3cqw;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  background: rgba(255, 253, 248, .6);
}

.rq-rest {
  margin: 0;
}

.rq-hint {
  color: var(--rust);
  font-weight: 700;
}

.rq-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5cqw;
  width: 100%;
}

.rq-panel[hidden] {
  display: none;
}

.rq-panel span {
  display: block;
  margin-bottom: .45cqw;
  color: var(--teal-dark);
  font-size: .95cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rq-panel p {
  font-size: 1.3cqw;
}

.rq-panel-tie {
  padding-left: 1.5cqw;
  border-left: 1px solid var(--line);
}

.rq-panel-tie span {
  color: var(--rust);
}

.design-balance {
  flex: 1;
  display: grid;
  grid-template-columns: 1.45fr auto 1fr;
  gap: 2.2cqw;
  align-items: center;
  margin: 1.8cqw 0 1.2cqw;
}

.qual-side,
.quan-side {
  min-height: 16cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.7cqw;
}

.qual-side {
  color: var(--white);
  background: var(--teal-dark);
}

.quan-side {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, .56);
}

.notation {
  display: block;
  margin-bottom: 1cqw;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.6cqw, 3.7rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}

.qual-side p,
.quan-side p {
  margin-top: .8cqw;
  font-size: clamp(.68rem, 1.12cqw, 1.1rem);
}

.qual-side p {
  color: rgba(255, 253, 248, .78);
}

.plus {
  color: var(--rust);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3cqw, 3rem);
}

.design-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.design-flow span {
  position: relative;
  padding: 1cqw .8cqw .2cqw;
  font-size: clamp(.58rem, .84cqw, .86rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.design-flow span:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -.5cqw;
  color: var(--rust);
}

.role-spectrum {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2cqw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.role-spectrum article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.25cqw;
  border-right: 1px solid var(--line);
}

.role-spectrum article:last-child {
  border-right: 0;
}

.role-count {
  display: block;
  margin-bottom: 1cqw;
  color: var(--rust);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3cqw, 3rem);
  font-weight: 700;
  letter-spacing: -.05em;
}

.role-spectrum p {
  margin-top: .7cqw;
  color: var(--ink-soft);
  font-size: clamp(.58rem, .88cqw, .86rem);
}

.survey-callout {
  margin-top: 1cqw !important;
  color: var(--ink-soft);
  font-size: clamp(.62rem, .94cqw, .94rem) !important;
}

.evidence-lines {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  margin-top: 1.8cqw;
  border-top: 1px solid var(--line);
}

.evidence-lines > div {
  display: grid;
  grid-template-columns: 19cqw 1fr;
  gap: 2cqw;
  align-items: center;
  padding: 1cqw 1.4cqw;
  border-bottom: 1px solid var(--line);
}

.evidence-lines span {
  margin: 0;
}

.evidence-primary {
  background: rgba(47, 105, 112, .1);
}

.evidence-primary span {
  color: var(--teal-dark);
}

.evidence-supporting span {
  color: var(--blue);
}

.evidence-comparison {
  background: rgba(145, 70, 47, .07);
}

.evidence-comparison span {
  color: var(--rust);
}

.integration-flow {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  grid-template-rows: 1fr auto;
  gap: 1.2cqw;
  align-items: stretch;
  margin-top: 1.8cqw;
}

.analysis-source,
.analysis-join {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5cqw;
}

.analysis-source {
  border-top: .35cqw solid var(--teal);
  background: rgba(255, 253, 248, .62);
}

.analysis-source:nth-child(2) {
  border-top-color: var(--blue);
}

.analysis-source span,
.analysis-join span {
  color: var(--rust);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.1cqw, 2.1rem);
  font-weight: 700;
}

.analysis-source p,
.analysis-join p {
  margin-top: .8cqw;
  color: var(--ink-soft);
  font-size: clamp(.64rem, 1cqw, 1rem);
}

.analysis-join {
  color: var(--white);
  background: var(--ink);
}

.analysis-join span {
  color: var(--white);
}

.analysis-outcomes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.analysis-outcomes span {
  padding: .8cqw;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: clamp(.58rem, .86cqw, .86rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.analysis-outcomes span:last-child {
  border-right: 0;
}

.slide-rigor {
  color: var(--white);
  background: var(--teal-dark);
}

.slide-rigor::after {
  border-color: rgba(255, 253, 248, .13);
  box-shadow:
    0 0 0 3.6cqw rgba(255, 253, 248, .022),
    0 0 0 7.2cqw rgba(255, 253, 248, .016);
}

.slide-rigor .eyebrow {
  color: #f0c477;
}

/* Audit spine: the researcher's position anchors one side, and the safeguards
   form a traceable chain of challenge rather than a floating checklist. */
.rigor-composition {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 4.4cqw;
  margin-top: 1.8cqw;
  padding-bottom: .6cqw;
}

.rigor-composition blockquote {
  margin: 0;
  padding-left: 1.5cqw;
  border-left: .34cqw solid var(--gold);
  align-self: center;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.86cqw, 1.9rem);
  font-style: italic;
  line-height: 1.32;
}

.rigor-list {
  position: relative;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: .2cqw 0 .2cqw 4cqw;
  list-style: none;
}

/* the spine itself */
.rigor-list::before {
  content: "";
  position: absolute;
  top: 1cqw;
  bottom: 1cqw;
  left: 1.13cqw;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 253, 248, .12),
    rgba(181, 129, 39, .75) 18%,
    rgba(181, 129, 39, .75) 82%,
    rgba(255, 253, 248, .12));
}

.rigor-list li {
  position: relative;
  padding: .62cqw 0;
  counter-increment: step;
  color: rgba(255, 253, 248, .88);
  font-size: clamp(.6rem, .93cqw, .95rem);
  line-height: 1.36;
}

.rigor-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: -4cqw;
  width: 2.3cqw;
  height: 2.3cqw;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181, 129, 39, .8);
  border-radius: 50%;
  background: var(--teal-dark);
  color: var(--gold);
  font-family: var(--sans);
  font-size: clamp(.44rem, .64cqw, .66rem);
  font-weight: 800;
  letter-spacing: .04em;
  transform: translateY(-50%);
}


.agentic-rule {
  margin-top: 2cqw;
  padding: 1.6cqw 2cqw;
  color: var(--white);
  background: var(--ink);
}

.agentic-rule p {
  font-family: var(--serif);
  font-size: clamp(.86rem, 1.55cqw, 1.5rem);
  line-height: 1.3;
}

.boundary-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5cqw;
  margin: 1.5cqw 0 1cqw;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.slide-agentic .boundary-list {
  flex: 1;
  grid-template-rows: repeat(3, 1fr);
}

.boundary-list li {
  position: relative;
  display: flex;
  align-items: center;
  padding: .85cqw .5cqw .85cqw 1.5cqw;
  border-bottom: 1px solid var(--line);
  font-size: clamp(.6rem, .93cqw, .92rem);
}

.boundary-list li::before {
  content: "✓";
  position: absolute;
  left: .2cqw;
  color: var(--teal-dark);
  font-weight: 800;
}

.slide-test {
  color: var(--white);
  background: var(--rust-dark);
}

.slide-test .eyebrow {
  color: #f0c477;
}

.slide-test::after {
  border-color: rgba(255, 253, 248, .15);
  box-shadow:
    0 0 0 3.6cqw rgba(255, 253, 248, .025),
    0 0 0 7.2cqw rgba(255, 253, 248, .018);
}

.contribution-lines {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.2cqw;
  border-top: 1px solid rgba(255, 253, 248, .24);
  border-bottom: 1px solid rgba(255, 253, 248, .24);
}

.contribution-lines > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4cqw;
  border-right: 1px solid rgba(255, 253, 248, .24);
}

.contribution-lines > div:last-child {
  border-right: 0;
}

.contribution-lines span {
  color: #f0c477;
}

.contribution-lines p {
  color: rgba(255, 253, 248, .82);
}

.test-line {
  margin-top: 1.4cqw !important;
  font-family: var(--serif);
  font-size: clamp(.82rem, 1.35cqw, 1.3rem) !important;
  font-style: italic;
}

.slide-close {
  color: var(--white);
  background:
    linear-gradient(115deg, rgba(15, 27, 35, .98), rgba(31, 80, 87, .88)),
    var(--ink);
}

.slide-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22cqw;
  right: -20cqw;
  width: 65cqw;
  height: 65cqw;
  border: 1px solid rgba(255, 253, 248, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 6cqw rgba(255, 253, 248, .02),
    0 0 0 12cqw rgba(255, 253, 248, .014);
}

.slide-close::after {
  display: none;
}

.slide-close .eyebrow {
  color: #f0c477;
}

.slide-close h2 {
  max-width: 12.5em;
}

.closing-criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3cqw;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.closing-criteria p {
  padding: 1.2cqw;
  border-right: 1px solid var(--line-light);
  color: rgba(255, 253, 248, .82);
  font-size: clamp(.66rem, 1.05cqw, 1rem);
}

.closing-criteria p:last-child {
  border-right: 0;
}

.closing-criteria span {
  display: block;
  margin-bottom: .7cqw;
  color: #f0c477;
  font-size: .75em;
  font-weight: 800;
  letter-spacing: .12em;
}

.closing-line {
  max-width: 52em;
  margin-top: 1.5cqw !important;
  color: rgba(255, 253, 248, .75);
}

.closing-footer {
  position: absolute;
  right: 6.25cqw;
  bottom: 3cqw;
  left: 6.25cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1cqw;
  border-top: 1px solid var(--line-light);
  font-size: clamp(.58rem, .76cqw, .76rem);
}

.closing-footer p {
  color: rgba(255, 253, 248, .56);
  font-size: inherit;
}

.closing-footer a {
  color: var(--white);
  text-underline-offset: 3px;
}

.closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6cqw 1.4cqw;
  justify-content: flex-end;
}

.control-dock {
  grid-template-columns: 140px minmax(0, 1fr) 140px;
  gap: 24px;
  padding: 10px 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.control-dock button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: .78rem;
}

.control-dock button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.progress-wrap {
  min-width: 0;
}

/* Section rail. Replaces the flat progress bar: it shows where the argument
   is, names the part, and gives Q&A a way back to the right slide. Segment
   width is proportional to the number of slides the section holds. */
.section-rail {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.rail-segment {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: 5px 4px 6px;
  border: 0;
  border-top: 2px solid rgba(255, 253, 248, .22);
  color: rgba(255, 253, 248, .58);
  background: transparent;
  font: inherit;
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.rail-fill {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e0b460;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

.rail-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-segment:hover,
.rail-segment:focus-visible {
  color: var(--white);
}

.rail-segment.active {
  color: var(--white);
  font-weight: 700;
}

.progress-wrap p {
  max-width: 62ch;
  margin: 8px auto 0;
  overflow: hidden;
  color: rgba(255, 253, 248, .64);
  font-size: .68rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-drawer {
  position: fixed;
  z-index: 60;
  top: 66px;
  right: 0;
  bottom: 74px;
  width: min(430px, 92vw);
  overflow: auto;
  padding: 22px;
  color: var(--ink);
  background: var(--white);
  box-shadow: -18px 0 50px rgba(7, 14, 20, .3);
  transform: translateX(105%);
  transition: transform .22s ease;
}

.notes-drawer.open {
  transform: translateX(0);
}

.notes-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.notes-header p {
  margin: 0 0 4px;
  color: var(--rust);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.notes-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
}

.notes-header button {
  width: 40px;
  min-width: 40px;
  padding: 0;
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  font-size: 1.5rem;
}

.notes-content {
  padding: 20px 2px 40px;
}

.notes-content h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.3rem;
}

.notes-content p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.keyboard-help[hidden] {
  display: none;
}

.keyboard-help {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 12, 17, .78);
}

.keyboard-help-panel {
  position: relative;
  width: min(650px, 100%);
  padding: 34px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.keyboard-help-panel > button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  min-width: 40px;
  padding: 0;
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  font-size: 1.5rem;
}

.keyboard-help-panel h2 {
  margin: 0;
  max-width: 14em;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.05;
}

.keyboard-help-panel dl {
  margin: 26px 0 0;
}

.keyboard-help-panel dl div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.keyboard-help-panel dt {
  font-weight: 800;
}

.keyboard-help-panel dd {
  margin: 0;
  color: var(--ink-soft);
}

.overview-mode {
  grid-template-rows: 66px minmax(0, 1fr);
}

.overview-mode .stage {
  display: block;
  overflow: auto;
  padding: 28px;
}

.overview-mode .control-dock {
  display: none;
}

.deck.overview {
  width: 100%;
  max-width: 1800px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 auto;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
}

.deck.overview .slide {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  padding: 5.2cqw 6.25cqw 4.8cqw;
  aspect-ratio: 16 / 9;
  border: 2px solid transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  cursor: pointer;
  animation: none;
}

.deck.overview .slide.active {
  border-color: #f5c86a;
}

.deck.overview .slide:hover {
  border-color: rgba(245, 200, 106, .72);
  transform: translateY(-2px);
}

.deck.overview .slide h1 {
  font-size: 4.45cqw;
}

.deck.overview .slide h2 {
  font-size: 4cqw;
}

.deck.overview .slide h3 {
  font-size: 1.65cqw;
}

.deck.overview .slide p,
.deck.overview .slide li {
  font-size: 1.35cqw;
}

.deck.overview .slide .eyebrow {
  font-size: .9cqw;
}

.deck.overview .slide .source-line {
  font-size: .9cqw !important;
}

.deck.overview .slide .slide-coda {
  font-size: 1.5cqw !important;
}

.deck.overview .slide .role-count {
  font-size: 3cqw;
}

.deck.overview .slide .notation {
  font-size: 3.6cqw;
}

.deck.overview .closing-footer {
  display: none;
}

.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;
}

body.fullscreen .presentation-bar,
body.fullscreen .control-dock {
  opacity: 0;
  transition: opacity .2s ease;
}

body.fullscreen .presentation-bar:hover,
body.fullscreen .control-dock:hover,
body.fullscreen:focus-within .presentation-bar,
body.fullscreen:focus-within .control-dock {
  opacity: 1;
}

body.fullscreen .presentation-shell {
  grid-template-rows: 0 minmax(0, 1fr) 0;
}

body.fullscreen .stage {
  padding: 0;
}

body.fullscreen .deck {
  width: min(100vw, 177.778vh);
  max-width: none;
}

body.fullscreen .notes-drawer {
  top: 0;
  bottom: 0;
}

@media (max-width: 820px) {
  body {
    overflow: auto;
  }

  .presentation-shell {
    min-height: 100svh;
    grid-template-rows: 58px minmax(0, 1fr) 64px;
  }

  .presentation-bar {
    grid-template-columns: 1fr auto;
    padding: 8px 12px;
  }

  .presentation-status {
    display: none;
  }

  .presentation-brand small,
  .action-label {
    display: none;
  }

  .presentation-actions button {
    min-width: 38px;
    justify-content: center;
    padding: 7px;
  }

  .stage {
    padding: 10px;
  }

  .deck {
    width: 100%;
  }

  .slide h1 {
    font-size: 4.45cqw;
  }

  .slide h2 {
    font-size: 4cqw;
  }

  .slide h3 {
    font-size: 1.65cqw;
  }

  .slide p,
  .slide li {
    font-size: 1.35cqw;
  }

  .slide .eyebrow {
    font-size: .9cqw;
  }

  .slide .subtitle {
    font-size: 1.6cqw !important;
  }

  .slide .title-meta p {
    font-size: 1.02cqw;
  }

  .slide .title-index {
    font-size: .82cqw;
  }

  .slide .source-line {
    font-size: .9cqw !important;
  }

  .slide .slide-coda {
    font-size: 1.5cqw !important;
  }

  .slide .artifact-equation span {
    font-size: 2.15cqw;
  }

  .slide .artifact-equation strong {
    font-size: 6.8cqw;
  }

  .slide .number {
    font-size: 8.2cqw;
  }

  .slide .boundary-side > span,
  .slide .framework-columns article > span,
  .slide .framework-foundation > span,
  .slide .contribution-lines span,
  .slide .evidence-lines span {
    font-size: .8cqw;
  }

  .slide .boundary-marker span {
    font-size: .84cqw;
  }

  .slide .media-timeline strong {
    font-size: 1.25cqw;
  }

  .slide .media-timeline small {
    font-size: .78cqw;
  }

  .slide .timeline-number {
    font-size: 4.2cqw;
  }

  .slide .process-step span {
    font-size: .75cqw;
  }

  .slide .process-step strong {
    font-size: 1.3cqw;
  }

  .slide .bypass-arc span {
    font-size: .82cqw;
  }

  .slide .framework-columns p,
  .slide .framework-foundation p {
    font-size: 1.05cqw;
  }

  .slide .framework-columns small {
    font-size: .72cqw;
  }

  .slide .rq-tag {
    font-size: 1.8cqw;
  }

  .slide .notation {
    font-size: 3.6cqw;
  }

  .slide .qual-side p,
  .slide .quan-side p {
    font-size: 1.12cqw;
  }

  .slide .plus {
    font-size: 3cqw;
  }

  .slide .design-flow span {
    font-size: .84cqw;
  }

  .slide .role-count {
    font-size: 3cqw;
  }

  .slide .role-spectrum p {
    font-size: .88cqw;
  }

  .slide .survey-callout {
    font-size: .94cqw !important;
  }

  .slide .analysis-source span,
  .slide .analysis-join span {
    font-size: 2.1cqw;
  }

  .slide .analysis-source p,
  .slide .analysis-join p {
    font-size: 1cqw;
  }

  .slide .analysis-outcomes span {
    font-size: .86cqw;
  }

  .slide .rigor-composition blockquote {
    font-size: 2.35cqw;
  }

  .slide .rigor-list li {
    font-size: .94cqw;
  }

  .slide .agentic-rule p {
    font-size: 1.55cqw;
  }

  .slide .boundary-list li {
    font-size: .93cqw;
  }

  .slide .test-line {
    font-size: 1.35cqw !important;
  }

  .slide .closing-criteria p {
    font-size: 1.05cqw;
  }

  .slide .closing-footer {
    font-size: .76cqw;
  }

  .control-dock {
    grid-template-columns: 48px 1fr 48px;
    gap: 10px;
    padding: 8px 12px;
  }

  .control-dock button {
    min-width: 44px;
    padding: 8px;
  }

  .control-dock button span:not([aria-hidden="true"]) {
    display: none;
  }

  .progress-wrap p {
    font-size: .62rem;
  }

  .notes-drawer {
    top: 58px;
    bottom: 64px;
  }

  .deck.overview {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) and (min-width: 821px) {
  .presentation-shell {
    grid-template-rows: 52px minmax(0, 1fr) 58px;
  }

  .presentation-bar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .stage {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .notes-drawer {
    top: 52px;
    bottom: 58px;
  }
}

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

@media print {
  @page {
    size: 13.333in 7.5in;
    margin: 0;
  }

  body {
    overflow: visible;
    color: var(--ink);
    background: #fff;
  }

  .presentation-shell {
    display: block;
    background: #fff;
  }

  .presentation-bar,
  .control-dock,
  .notes-drawer,
  .keyboard-help,
  .skip-link {
    display: none !important;
  }

  .stage {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .deck {
    width: auto;
    max-width: none;
    height: auto;
    overflow: visible;
    background: #fff;
    box-shadow: none;
    aspect-ratio: auto;
  }

  .slide,
  .slide.active {
    position: relative;
    display: block;
    width: 13.333in;
    height: 7.5in;
    padding: .69in .83in .64in;
    break-after: page;
    page-break-after: always;
    animation: none;
  }

  .slide:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

/* ============================================================
   Visual storytelling pass — remaining slides.
   Each block targets a storyboard job. Existing markup reused;
   no wording changes.
   ============================================================ */

/* s3 — widening clarity gap, not two isolated statistics. */
.number-divider {
  align-self: stretch;
  width: 0;
  border: 0;
  border-left: 1px dashed rgba(23, 35, 45, .28);
  position: relative;
}

.number-divider::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 5.5cqw;
  background: linear-gradient(100deg, transparent, rgba(145, 70, 47, .13));
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
}

.number-block:last-of-type .number {
  color: var(--rust);
}

/* s4 / s16 — authorship hinge and approval gate.
   The rupture between stages is the point, so mark it. */
.timeline-current {
  position: relative;
}

.timeline-current::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: -1.15cqw;
  width: .22cqw;
  border-radius: .11cqw;
  background: var(--gold);
  box-shadow: 0 0 0 .5cqw rgba(181, 129, 39, .16);
}

/* s7 — threshold rather than two boxes: the marker is the hinge
   the judgment passes through. */
.boundary-marker {
  position: relative;
  z-index: 2;
}

.boundary-marker::before,
.boundary-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 2.4cqw;
  background: linear-gradient(180deg, transparent, rgba(181, 129, 39, .8));
  transform: translateX(-50%);
}

.boundary-marker::before { top: -2.6cqw; }
.boundary-marker::after {
  bottom: -2.6cqw;
  background: linear-gradient(0deg, transparent, rgba(181, 129, 39, .8));
}

.boundary-side.productive { border-top-color: var(--teal); }
.boundary-side.exclusionary { border-top-color: var(--rust); }

/* s8 — inquiry as movement from experience to institutional action. */
.question-sequence li {
  position: relative;
}

.question-sequence li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05cqw;
  bottom: -1.1cqw;
  width: 1px;
  height: 1.1cqw;
  background: rgba(145, 70, 47, .45);
}

/* s9 — the qualitative stream must visibly dominate, not sit as an
   equal card beside the quantitative one. */
.qual-side { transform: scale(1); }

.quan-side {
  align-self: center;
  padding-top: .8cqw;
  padding-bottom: .8cqw;
  opacity: .88;
}

.quan-side .notation,
.quan-side h3 { opacity: .92; }

.quan-side p { font-size: clamp(.6rem, .92cqw, .94rem) !important; }

/* s10 — four vantage points on one phenomenon, not four equal columns. */
.role-spectrum article:nth-child(odd) { transform: translateY(-.9cqw); }
.role-spectrum article:nth-child(even) { transform: translateY(.9cqw); }
.role-spectrum article:last-child {
  border-top-style: dashed;
  border-top-color: var(--blue);
}

/* s11 — evidence ecology with a clear weight order, not three equal bands. */
.evidence-primary { border-left: .34cqw solid var(--teal); }
.evidence-supporting { border-left: .34cqw solid var(--blue); opacity: .93; }
/* Held back from the two participant-evidence rows, but .86 put its rust label
   at 4.41:1, under AA. .90 clears it at 4.78:1 and stays visibly secondary. */
.evidence-comparison {
  border-left: .34cqw dashed var(--rust);
  opacity: .90;
}

/* s12 — weave: the two strands overlap only at integration. */
.analysis-join { position: relative; }

.analysis-join::before {
  content: "";
  position: absolute;
  top: -1.5cqw;
  left: 12%;
  right: 12%;
  height: 1.5cqw;
  border: 1px solid rgba(47, 105, 112, .5);
  border-bottom: 0;
  border-radius: .9cqw .9cqw 0 0;
}

/* s14 — bounded execution track: entry condition, then guardrails. */
.agentic-rule {
  position: relative;
  border-left: .34cqw solid var(--gold);
}

/* The first guardrail used to be forced to var(--white). Slide 14 is cream, so
   that rendered the whole line invisible; the dark background it was written
   for never landed, and the .agentic-rule box above now carries the "entry
   condition" role the storyboard assigned it. The line keeps its <strong>
   weight, which is what marked it out in the first place. */

/* s15 — contribution as a constellation tied to contradiction testing. */
.contribution-lines > div:nth-child(2) { transform: translateY(1.1cqw); }

.test-line {
  border-top: 1px solid rgba(181, 129, 39, .5);
  padding-top: 1.1cqw;
}

/* s17 — the decision is the focus; links become a quiet utility layer. */
.closing-links a {
  color: rgba(255, 253, 248, .58);
  font-size: .92em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 253, 248, .2);
}

.closing-links a:hover,
.closing-links a:focus-visible { color: var(--white); }

.closing-criteria span { color: var(--gold); }

/* ============================================================
   Progressive reveals.
   Opacity-only so revealing never reflows a slide that clips.
   Pending steps remain readable at presentation scale while the
   fully revealed step still receives a visible emphasis change.
   Content stays in the DOM and in the accessibility tree, so no
   claim is hidden from assistive technology; the reveal is a
   pacing device for the presenter, not a content gate.
   ============================================================ */
.slide[data-steps] [data-step] {
  opacity: .78;
  transition: opacity .34s ease;
}

.slide[data-steps] [data-step].revealed {
  opacity: 1;
}

/* Overview, print, and reduced-motion all show the final state. */
.deck.overview .slide [data-step],
.slide:not(.active) [data-step] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slide[data-steps] [data-step] {
    transition: none;
  }
}

@media print {
  .slide[data-steps] [data-step] {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   Presenter affordances added for the defense: a standing link
   back to the Proposal Defense Studio, a talk timer, the
   companion-materials dialog, and the section-aware entrance.
   ============================================================ */

.studio-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(224, 180, 96, .55);
  color: #f0d9a8;
  background: rgba(224, 180, 96, .12);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.studio-link:hover,
.studio-link:focus-visible {
  color: #17232d;
  background: #e0b460;
  border-color: #e0b460;
}

.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.timer-chip.running {
  color: #f0d9a8;
  border-color: rgba(224, 180, 96, .5);
  background: rgba(224, 180, 96, .14);
}

/* Companion materials. The Studio is the primary destination; everything
   else is a direct jump for a question already on the table. */
.materials-panel {
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.materials-primary {
  display: block;
  margin: 22px 0 18px;
  padding: 18px 20px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.materials-primary:hover,
.materials-primary:focus-visible {
  background: var(--paper-deep);
  transform: translateX(3px);
}

.materials-kicker {
  display: block;
  color: var(--rust);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.materials-primary strong {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.materials-primary small,
.materials-grid small {
  display: block;
  color: var(--ink-soft);
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px;
}

.materials-grid a {
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.materials-grid a:hover,
.materials-grid a:focus-visible {
  background: var(--paper-deep);
  border-color: var(--rust);
}

.materials-grid small {
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 400;
}

/* Entrance. Opacity and a short rise only, on the slide wrapper, so no
   slide-internal layout is touched and nothing reflows mid-talk. */
@keyframes slideEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deck:not(.overview) .slide.active.is-entering {
  animation: slideEnter .38s cubic-bezier(.22, .68, .3, 1) both;
}

/* The shell's ambient wash shifts with the section, so the movement of the
   argument registers before the section label is read. Atmospheric only.
   This recolors the shell's own gradient rather than layering an overlay,
   which would paint over the unpositioned stage. */
.presentation-shell {
  background:
    radial-gradient(circle at 50% -20%, var(--section-wash, rgba(74, 112, 126, .32)), transparent 42%),
    #111b23;
}

.presentation-shell[data-section="opening"] { --section-wash: rgba(74, 112, 126, .32); }
.presentation-shell[data-section="problem"] { --section-wash: rgba(145, 70, 47, .34); }
.presentation-shell[data-section="framework"] { --section-wash: rgba(47, 105, 112, .36); }
.presentation-shell[data-section="questions"] { --section-wash: rgba(181, 129, 39, .3); }
.presentation-shell[data-section="design"] { --section-wash: rgba(49, 95, 124, .34); }
.presentation-shell[data-section="analysis"] { --section-wash: rgba(49, 95, 124, .3); }
.presentation-shell[data-section="rigor"] { --section-wash: rgba(47, 105, 112, .3); }
.presentation-shell[data-section="boundaries"] { --section-wash: rgba(145, 70, 47, .26); }
.presentation-shell[data-section="contribution"] { --section-wash: rgba(181, 129, 39, .28); }
.presentation-shell[data-section="decision"] { --section-wash: rgba(74, 112, 126, .38); }

/* Narrow screens cannot show ten section names legibly. The rail keeps its
   full accessible names and stays tappable; only the visible text drops. */
@media (max-width: 820px) {
  .studio-link {
    min-width: 38px;
    justify-content: center;
    padding: 7px;
  }

  .rail-name {
    display: none;
  }

  .rail-segment {
    min-height: 22px;
    padding: 0;
    border-top-width: 3px;
  }

  .rail-fill {
    top: -3px;
    height: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck:not(.overview) .slide.active.is-entering {
    animation: none;
  }

  .rail-fill {
    transition: none;
  }
}

@media print {
  .studio-link,
  .timer-chip,
  .section-rail,
  .keyboard-help {
    display: none !important;
  }
}