/* NARST CALI deck */
:root {
  --bg: #0f1319;
  --bg-deep: #080b10;
  --fg: rgba(232,238,245,0.94);
  --muted: rgba(196,206,220,0.72);
  --accent: #8aa8c7;
  --accent-warm: #d9b48c;
  --accent-bright: #8fd5c3;
  --part: #97a8c1;
  --card: rgba(180,200,220,0.055);
  --stroke: rgba(180,200,220,0.13);
  --hairline: rgba(218,225,232,0.14);
  --rule: rgba(218,225,232,0.10);
  --header-h: 76px;
  --footer-h: 84px;
  --stage-min: 260px;
  --body-copy: clamp(24px, 2.2vw, 34px);
  --caption-copy: clamp(16px, 1.4vw, 24px);
  --font-display: 'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --accent-luke:   #a8c4b5;
  --accent-laurie: #c9d5e8;
  --accent-zach:   #e8c89f;
  --accent-sule:   #c9a6cf;
  --accent-rgb: 138, 168, 199;
  /* Type scale — single source of truth. Breakpoints toggle layout, never size.
     Any `font-size: clamp(...)` in this file that is NOT one of these tokens is
     a drift bug. Add a token, don't inline a new clamp. */
  --fs-display:      clamp(28px, 3.0vw, 48px);
  --fs-title:        clamp(36px, 5.6vw, 120px);
  --fs-heading:      clamp(24px, 2.9vw, 44px);
  --fs-subhead:      clamp(18px, 1.6vw, 26px);
  --fs-body:         clamp(22px, 2.1vw, 32px);
  --fs-body-lead:    clamp(26px, 2.45vw, 38px);
  --fs-body-compact: clamp(18px, 1.7vw, 26px);
  --fs-quote:        clamp(19px, 1.8vw, 28px);
  --fs-quote-tight:  clamp(17px, 1.55vw, 23px);
  --fs-quote-dense:  clamp(15px, 1.35vw, 21px);
  --fs-label:        clamp(13px, 1.1vw, 18px);
  --fs-caption:      clamp(13px, 1.1vw, 20px);
  --fs-cite:         clamp(10px, 0.85vw, 13px);
  --fs-meta:         clamp(10px, 0.9vw, 14px);
  --fs-dense-h2:     clamp(18px, 1.7vw, 26px);
  --fs-dense-li:     clamp(17px, 1.35vw, 26px);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.content:focus-visible { outline-offset: -4px; }
#slide-scrubber:focus-visible { outline: none; opacity: 0.001; }
#slide-scrubber:focus-visible ~ .slider-thumb { box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px rgba(var(--accent-rgb), 0.25); width: 14px; height: 14px; top: -6px; }
.slider-track:has(#slide-scrubber:focus-visible) { background: rgba(var(--accent-rgb), 0.28); }
body.blanked > *:not(#slide-announcer) { visibility: hidden; }
body.blanked { background: #000; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; touch-action: manipulation; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 21px; font-feature-settings: "ss01", "cv01", "cv11"; }
a { color: var(--accent); }

.lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(8,11,16,0.92); backdrop-filter: blur(10px); }
.lightbox.open { display: flex; }
.lightbox-figure { max-width: min(96vw, 1500px); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.lightbox img { max-width: 100%; max-height: calc(92vh - 80px); object-fit: contain; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.45); }
.lightbox-caption { font-size: var(--fs-caption); color: rgba(218,225,232,0.92); text-align: center; }
.lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid rgba(180,200,220,0.16); border-radius: 999px; background: rgba(15,19,25,0.8); color: var(--fg); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; cursor: pointer; }
body.lightbox-open header, body.lightbox-open .sticky-footer { opacity: 0; pointer-events: none; }

.skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 8px 16px; background: var(--accent); color: #000; border-radius: 6px; font-size: 14px; font-weight: 600; }
.skip-link:focus { top: 12px; }

header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: linear-gradient(to bottom, rgba(15,19,25,.78), rgba(15,19,25,0) 90%); z-index: 20; pointer-events: none; }
.header-logo-link {
  display: inline-flex;
  pointer-events: auto;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.header-logo-link:hover { opacity: 1; }
.header-logo {
  height: clamp(34px, 4.5vw, 52px);
  width: auto;
  display: block;
  opacity: 0.88;
  filter: invert(1) hue-rotate(180deg);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.header-logo-link:hover .header-logo { opacity: 1; }
header .bar { pointer-events: auto; display: flex; align-items: center; gap: 8px; }
.header-deck-link { margin-left: auto; }
.kbd { font-family: var(--font-mono); border: 1px solid rgba(199,215,234,0.18); background: rgba(15,19,25,0.52); padding: 2px 7px; border-radius: 6px; font-size: var(--fs-meta); opacity: 0.92; color: rgba(218,225,232,0.9); letter-spacing: 0.02em; }

.sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: linear-gradient(to top, rgba(8,11,16,.96) 0%, rgba(8,11,16,.65) 55%, transparent 100%); padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)) clamp(90px, 9vw, 130px); pointer-events: none; backdrop-filter: blur(14px) saturate(1.1); }
.sticky-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,180,140,0.18) 25%, rgba(199,215,234,0.16) 50%, rgba(217,180,140,0.18) 75%, transparent);
}
.footer-slider { max-width: 1280px; margin: 0 auto; pointer-events: auto; display: flex; gap: 14px; align-items: center; }
.footer-logo-link {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: inline-flex;
  line-height: 0;
  z-index: 1;
  transition: opacity 0.2s ease;
}
.footer-logo { height: clamp(34px, 4.5vw, 52px); width: auto; flex-shrink: 0; opacity: 0.7; object-fit: contain; transition: opacity 0.2s ease; }
.footer-logo-link:hover .footer-logo,
.footer-logo:hover { opacity: 1; }
.footer-arrow { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; border-radius: 2px; border: 1px solid rgba(180,200,220,0.14); background: rgba(180,200,220,0.04); color: rgba(218,225,232,0.7); cursor: pointer; align-items: center; justify-content: center; font-size: 14px; opacity: 0.8; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.footer-arrow:hover { background: rgba(180,200,220,0.08); color: var(--accent-bright); border-color: rgba(143,213,195,0.35); opacity: 1; }
.footer-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: rgba(199,215,234,0.78); font-variant-numeric: tabular-nums; }
.footer-meta .kbd { font-size: var(--fs-meta); padding: 1px 6px; opacity: 1; }
#slider-counter { color: rgba(232,238,245,0.78); }
.footer-deck-link, .header-deck-link { font-family: var(--font-mono); font-size: var(--fs-meta); color: rgba(218,225,232,0.7); opacity: 0.9; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.18s; }
.footer-deck-link:hover, .header-deck-link:hover { color: var(--accent-warm); }
.header-deck-link { display: none; pointer-events: auto; }
.slider-track { position: relative; flex: 1; height: 2px; background: rgba(180,200,220,0.10); border-radius: 0; overflow: visible; }
.slider-progress { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(to right, rgba(199,215,234,0.45), var(--accent-bright)); width: 5%; transition: width 0.25s ease; border-radius: 0; }
.slider-thumb { position: absolute; top: -4px; width: 10px; height: 10px; left: calc(5% - 5px); border-radius: 999px; pointer-events: none; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(143,213,195,0.18); transition: left 0.25s ease; }
#slide-scrubber { position: absolute; top: -10px; left: 0; width: 100%; height: 23px; opacity: 0; cursor: grab; margin: 0; -webkit-appearance: none; appearance: none; }

main { height: 100%; position: relative; }
section.slide { display: none; position: absolute; inset: 0; flex-direction: column; padding: var(--header-h) 12px calc(28px + var(--footer-h) + env(safe-area-inset-bottom, 0px)); gap: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
section.slide.active { display: flex; }

.content { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(28px,4vw,48px) clamp(24px,3.5vw,42px); border-radius: 16px; border: 1px solid rgba(180,200,220,0.05); background: rgba(180,200,220,0.025); backdrop-filter: blur(6px); min-height: 120px; }
.content:focus { outline: none; }
.stage { flex: 0 0 auto; position: relative; width: 100%; min-height: var(--stage-min); border-radius: 16px; border: 1px solid rgba(180,200,220,0.05); background: #080b10; overflow: hidden; }
.figure-stage { display: flex; flex-direction: column; }
.figure-stage > :not(.media-caption) { flex: 1 1 auto; min-height: 0; }
.figure-stage > img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

.content h1 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 48; font-size: var(--fs-display); letter-spacing: -0.015em; line-height: 1.08; margin-bottom: 10px; text-align: left; text-wrap: balance; }
.content h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-heading); color: var(--muted); line-height: 1.24; margin-bottom: 14px; text-align: left; text-wrap: balance; letter-spacing: 0; }
.content h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-subhead); color: rgba(232,238,245,0.88); line-height: 1.22; margin: 0.6em 0 0.3em; letter-spacing: 0.005em; text-align: left; }
.content .label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--part); font-weight: 500; margin-bottom: 14px; text-align: left; display: inline-flex; align-items: center; gap: 10px; }
.content .label::before { content: ''; display: inline-block; width: 22px; height: 1px; background: currentColor; opacity: 0.55; }
.content ul { padding-left: 1.2em; }
.content li { font-size: var(--fs-body); color: rgba(218,225,232,0.82); line-height: 1.42; margin-bottom: 10px; }

/* Dense slides (5+ bullets OR wrappy bullet text) — shrink further so overflow can't occur */
.placeholder-slide.dense .content h1 { margin-bottom: 6px; }
.placeholder-slide.dense .content h2 { font-size: var(--fs-dense-h2); margin-bottom: 10px; }
.placeholder-slide.dense .content li { font-size: var(--fs-dense-li); line-height: 1.36; margin-bottom: 7px; }
/* LW2 "About CALI" — nested sub-bullets inflate the dense count to 6, but the list is short enough
   that full body size matches LW1's scale. Restore --fs-body for both levels on this slide. */
.placeholder-slide.lw2.dense .content li { font-size: var(--fs-body); line-height: 1.42; margin-bottom: 10px; }
.parallel-points li { margin-bottom: 7px; }
.arrow-bullets { list-style: none; padding-left: 0; }
.arrow-bullets li { position: relative; padding-left: 1.6em; list-style: none; }
.arrow-bullets li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--accent, rgba(138,168,199,0.85)); font-family: var(--font-mono); font-weight: 500; line-height: inherit; }
.placeholder-slide .content { overflow: hidden; min-width: 0; }
.placeholder-slide .content ul { overflow: visible; min-width: 0; }
.placeholder-slide .content h1,
.placeholder-slide .content h2,
.placeholder-slide .content h3,
.placeholder-slide .content li,
.placeholder-slide .content p { overflow-wrap: break-word; hyphens: auto; }

/* When a figure.stage is aria-hidden (no real visual), drop it and let .content fill the row. */
section.slide > figure.stage[aria-hidden="true"] { display: none !important; }
@media (min-width: 900px) {
  section.slide:has(> figure.stage[aria-hidden="true"]) .content { flex: 1 1 100%; max-width: 100%; }
  section.slide.placeholder-slide:has(> figure.stage[aria-hidden="true"]):not(.ladder-slide) .content h1 { max-width: 28ch; }
  section.slide.placeholder-slide:has(> figure.stage[aria-hidden="true"]):not(.ladder-slide) .content h2,
  section.slide.placeholder-slide:has(> figure.stage[aria-hidden="true"]):not(.ladder-slide) .content ul { max-width: 52ch; }
}

.frag { opacity: 0; transform: translateY(5px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.frag.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

section.slide.slide-title { padding: var(--header-h) 0 calc(0px + var(--footer-h)); }
.title-map-wrap {
  width: 100%;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  min-height: calc(100dvh - var(--header-h) - var(--footer-h));
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.map-mount { width: 100%; height: 100%; min-height: 320px; }
.map-stage .map-mount,
.slide-map .map-mount {
  min-height: clamp(320px, 46vh, 520px);
  min-height: clamp(320px, 46dvh, 520px);
}
/* Offline / tile-fetch failure fallback: paint a muted geographic gradient so the
   slide still reads as a map even when vendored tiles 404. */
.map-mount.tiles-unavailable .leaflet-tile-pane { display: none; }
.map-mount.tiles-unavailable {
  background:
    radial-gradient(ellipse 120% 90% at 58% 52%, rgba(61, 83, 112, 0.36) 0%, rgba(15,19,25,0.92) 75%),
    linear-gradient(180deg, rgba(22,30,44,0.95) 0%, rgba(8,11,16,0.98) 100%);
}
.map-mount.tiles-unavailable::after {
  content: 'MAP TILES OFFLINE';
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.24em;
  color: rgba(217,180,140,0.72);
  pointer-events: none;
  z-index: 1000;
}
.campus-tooltip {
  background: rgba(8,11,16,0.94);
  border: 1px solid rgba(199,215,234,0.22);
  border-radius: 2px;
  color: rgba(232,238,245,0.94);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.campus-tooltip:before { border-top-color: rgba(8,11,16,0.94) !important; }

.campus-label-permanent {
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(244,226,196,0.98);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 rgba(8,10,14,0.95),
    1px -1px 0 rgba(8,10,14,0.95),
    -1px 1px 0 rgba(8,10,14,0.95),
    1px 1px 0 rgba(8,10,14,0.95),
    0 0 6px rgba(8,10,14,0.85);
}
.campus-label-permanent::before { display: none !important; }
.leaflet-tooltip.campus-label-permanent { pointer-events: none; }

.campus-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(8,11,16,0.96);
  color: rgba(232,238,245,0.96);
  border: 1px solid rgba(199,215,234,0.20);
  border-radius: 2px;
  padding: 0;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
}
.campus-popup-wrap .leaflet-popup-tip { background: rgba(8,11,16,0.96); border: 1px solid rgba(199,215,234,0.20); }
.campus-popup-wrap .leaflet-popup-content { margin: 0; padding: 12px 14px 11px; min-width: 180px; }
.campus-popup { display: flex; flex-direction: column; gap: 8px; }
.campus-popup-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: rgba(244,248,253,0.97);
}
.campus-popup-meta { display: flex; align-items: baseline; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(199,215,234,0.12); }
.campus-popup-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-bright);
  letter-spacing: -0.02em;
}
.campus-popup-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.6);
}

.leaflet-control-zoom { border: none !important; box-shadow: none !important; }
.leaflet-control-zoom a {
  background: rgba(8,11,16,0.92);
  color: rgba(232,238,245,0.94);
  border: 1px solid rgba(199,215,234,0.18) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono);
  font-weight: 400;
  width: 28px; height: 28px; line-height: 26px;
  margin-bottom: 4px;
}
.leaflet-control-zoom a:hover { background: rgba(15,19,25,0.98); color: var(--accent-bright); }
.leaflet-control-attribution {
  background: rgba(8,11,16,0.78) !important;
  color: rgba(199,215,234,0.5) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em;
  padding: 2px 6px !important;
  border-radius: 2px;
  margin: 0 !important;
}
.leaflet-control-attribution a { color: rgba(199,215,234,0.78) !important; text-decoration: none; }

.campus-legend {
  background: rgba(8,11,16,0.92);
  border: 1px solid rgba(199,215,234,0.18);
  border-radius: 2px;
  padding: 12px 14px 11px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  margin: 0 !important;
  min-width: 180px;
  backdrop-filter: blur(8px);
}
.campus-legend-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.campus-legend-title::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.campus-legend-stats { display: flex; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(199,215,234,0.12); margin-bottom: 10px; }
.campus-legend-stats > div { display: flex; flex-direction: column; gap: 2px; }
.campus-legend-stats .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: rgba(244,248,253,0.96);
  letter-spacing: -0.02em;
}
.campus-legend-stats .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.55);
}
.campus-legend-scale { display: flex; align-items: center; gap: 6px; }
.campus-legend-scale .dot {
  display: inline-block;
  border-radius: 999px;
  background: #9bbcd9;
  border: 1px solid rgba(232,238,245,0.6);
  opacity: 0.92;
}
.campus-legend-scale .s1 { width: 6px;  height: 6px; }
.campus-legend-scale .s2 { width: 9px;  height: 9px; }
.campus-legend-scale .s3 { width: 12px; height: 12px; }
.campus-legend-scale .s4 { width: 15px; height: 15px; }
.campus-legend-scale .lbl {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.6);
}

.title-map-wrap .leaflet-pane,
.title-map-wrap .leaflet-control-container { filter: saturate(0.55) brightness(0.65) contrast(0.95); }
.title-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 56px);
  background:
    radial-gradient(ellipse 100% 80% at center, rgba(12,16,22,0.20), rgba(12,16,22,0.52) 75%, rgba(8,11,16,0.62) 100%);
}
.title-overlay::before,
.title-overlay::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  height: 1px;
  background: rgba(217,180,140,0.28);
}
.title-overlay::before { top: clamp(20px, 3vw, 36px); left: clamp(20px, 3vw, 36px); width: clamp(40px, 5vw, 64px); }
.title-overlay::after  { bottom: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); width: clamp(40px, 5vw, 64px); }
.title-art-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070b;
}
.title-art-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,10,16,0.22) 0%, rgba(7,10,16,0.42) 50%, rgba(7,10,16,0.78) 100%),
    radial-gradient(ellipse 70% 55% at center, rgba(143,213,195,0.06), transparent 60%);
  pointer-events: none;
}
.title-card {
  position: relative;
  width: min(1100px, calc(100vw - 2 * clamp(18px, 4vw, 56px)));
  max-width: none;
  padding: clamp(28px, 3.4vw, 64px) clamp(28px, 3.4vw, 60px) clamp(28px, 3vw, 56px);
  border-radius: 2px;
  background: rgba(8,11,16,0.66);
  backdrop-filter: blur(16px) saturate(1.05);
  border: 1px solid rgba(217,180,140,0.14);
  box-shadow: 0 24px 80px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(8,11,16,0.4);
}
.title-card::before,
.title-card::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--accent-warm);
  border-style: solid;
  border-width: 0;
  opacity: 0.68;
}
.title-card::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.title-card::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.title-card-contrast { color: rgba(242,246,251,0.98); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--accent-warm); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.title-card h1 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 72; font-size: var(--fs-title); line-height: 1.02; letter-spacing: -0.028em; margin-bottom: 18px; text-shadow: 0 4px 24px rgba(0,0,0,0.42); }
.title-card h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 60; font-size: clamp(22px, 2.6vw, 52px); color: rgba(236,242,248,0.92); line-height: 1.18; margin-bottom: 26px; letter-spacing: -0.005em; max-width: 30ch; }
.panelists { font-family: var(--font-body); font-weight: 500; font-size: clamp(15px, 1.5vw, 26px); color: rgba(236,242,248,0.92); letter-spacing: 0.01em; margin-bottom: 6px; }
.institution { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(14px, 1.3vw, 22px); color: rgba(236,242,248,0.78); letter-spacing: 0; }
.title-domainwarp {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.title-art-shell iframe {
  width: 100%; height: 100%; border: none; display: block; filter: saturate(0.92) brightness(0.7) contrast(1.06);
}

.slide-break.active {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: var(--header-h) clamp(20px,5vw,80px) calc(var(--footer-h) + 20px);
  background:
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(138,168,199,0.06), transparent 60%),
    linear-gradient(140deg, #131a24 0%, #0c1018 60%, var(--bg-deep) 100%);
}
.slide-break .content {
  background: transparent;
  border: none;
  min-height: unset;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(140px, 16%) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 2.6vw, 38px) clamp(24px, 3.2vw, 56px);
  width: 100%;
  height: 100%;
  align-items: start;
  overflow: hidden;
}
.slide-break .content::before {
  content: attr(data-numeral);
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(72px, 9vw, 140px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: transparent;
  -webkit-text-stroke: 1px var(--break-accent, var(--accent));
  text-stroke: 1px var(--break-accent, var(--accent));
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: start;
  opacity: 0.7;
  pointer-events: none;
}
.slide-break .content .break-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--break-accent, var(--accent));
  font-weight: 500;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.slide-break .content .break-tag::before {
  content: 'Panelist ' attr(data-panelist-num);
  color: rgba(236,242,248,0.55);
  letter-spacing: 0.18em;
  font-weight: 400;
}
.slide-break .content .break-tag::after {
  content: '';
  flex: 0 0 64px;
  height: 1px;
  background: var(--break-accent, var(--accent));
  opacity: 0.55;
  margin-left: 4px;
}
.slide-break .content h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 60;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  max-width: 18ch;
  color: rgba(244,248,253,0.97);
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  text-wrap: balance;
}
.slide-break .content h1::after {
  content: '';
  display: block;
  width: clamp(80px, 12vw, 160px);
  height: 2px;
  margin-top: clamp(20px, 2vw, 32px);
  background: var(--break-accent, var(--accent));
  opacity: 0.65;
}
.break-note {
  font-family: var(--font-mono);
  margin-top: 0;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(218,225,232,0.5);
  grid-column: 2;
  grid-row: 3;
  align-self: end;
}

.media-caption { flex: 0 0 auto; padding: 9px 14px 11px; font-size: clamp(11px, 0.85vw, 14px); color: rgba(199,215,234,0.7); background: rgba(8,11,16,0.94); border-top: 1px solid rgba(180,200,220,0.08); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Per-presenter accent threading ── */
[data-slide="break-luke"]   { --break-accent: var(--accent-luke); }
[data-slide="break-laurie"] { --break-accent: var(--accent-laurie); }
[data-slide="break-zach"]   { --break-accent: var(--accent-zach); }
[data-slide="break-sule"]   { --break-accent: var(--accent-sule); }

[data-slide^="luke-"]   .content .label { color: var(--accent-luke); }
[data-slide^="laurie-"] .content .label { color: var(--accent-laurie); }
[data-slide^="zach-"]   .content .label { color: var(--accent-zach); }
[data-slide^="sule-"]   .content .label { color: var(--accent-sule); }

[data-slide^="luke-"]   .content { box-shadow: inset 3px 0 0 0 color-mix(in oklab, var(--accent-luke) 75%, transparent); }
[data-slide^="laurie-"] .content { box-shadow: inset 3px 0 0 0 color-mix(in oklab, var(--accent-laurie) 75%, transparent); }
[data-slide^="zach-"]   .content { box-shadow: inset 3px 0 0 0 color-mix(in oklab, var(--accent-zach) 75%, transparent); }
[data-slide^="sule-"]   .content { box-shadow: inset 3px 0 0 0 color-mix(in oklab, var(--accent-sule) 75%, transparent); }

.diagram-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(18px, 3vw, 32px); }
.content blockquote {
  margin-top: 1.1em;
  padding: 0.85em 1em;
  border-left: 3px solid rgba(138,168,199,0.5);
  background: rgba(180,200,220,0.04);
  color: rgba(236,242,248,0.88);
  font-size: var(--fs-quote);
  line-height: 1.45;
}
.content em {
  font-style: italic;
  color: rgba(236,242,248,0.92);
}
/* .diagram-card / .diagram-* utility CSS shapes were removed 2026-04-21.
   None of them render in the current deck (all `figure.diagram-stage`
   elements are aria-hidden="true" and collapsed via the
   `section.slide > figure.stage[aria-hidden="true"] { display: none }`
   rule above). Reintroduce only if a slide needs a pure-CSS diagram. */

/* ── ZM4: Infrastructure & Instructional Design — numbered list card ── */
[data-slide="zach-talk-4"] .zm4-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
}

.zm4-list {
  list-style: none;
  margin: 0;
  padding: clamp(10px, 1.4vw, 20px) clamp(18px, 2.4vw, 34px);
  width: 100%;
  max-width: 58ch;
  border: 1px solid rgba(170, 186, 210, 0.12);
  border-radius: 18px;
  background: rgba(16, 22, 32, 0.58);
  display: flex;
  flex-direction: column;
}

.zm4-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid rgba(170, 186, 210, 0.08);
}
.zm4-item:last-child { border-bottom: none; }

.zm4-item__num {
  flex: 0 0 auto;
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1em;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  color: rgba(22, 30, 46, 0.98);
  background: #b6c3d8;
  line-height: 1;
}

.zm4-item__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-compact);
  line-height: 1.45;
  color: rgba(216, 224, 236, 0.88);
}
.zm4-item__text strong {
  font-weight: 600;
  color: rgba(242, 246, 252, 1);
}

@media (max-width: 900px) {
  .zm4-list { max-width: none; padding: clamp(6px, 1.2vw, 14px) clamp(14px, 3vw, 22px); }
  .zm4-item { padding: clamp(12px, 2.6vw, 20px) 0; gap: clamp(12px, 2.4vw, 18px); }
}

@media (min-width: 720px) {
  section.slide { flex-direction: row; align-items: stretch; overflow: hidden; padding: var(--header-h) clamp(16px,2.5vw,32px) calc(16px + var(--footer-h)); gap: clamp(14px,1.7vw,22px); }
  section.slide.slide-title { padding: var(--header-h) 0 calc(0px + var(--footer-h)); }
  .slide-title, .slide-break { flex-direction: column; }
  .slide-title .stage, .slide-break .content { flex: 1 1 auto; }
  .slide-map .content { flex: 0 1 34%; }
  .slide-map .stage { flex: 1 1 66%; }
  .placeholder-slide.even-layout .content { flex: 0 1 33%; }
  .placeholder-slide.even-layout .stage { flex: 1 1 67%; }
  .placeholder-slide.odd-layout .content { flex: 0 1 50%; }
  .placeholder-slide.odd-layout .stage { flex: 1 1 50%; }
  .placeholder-slide.crowded .content { flex-basis: 100%; }
  .placeholder-slide.crowded .stage { display: none; }
  #kbdSwipe { display: none; }
}
@media (max-width: 900px) {
  .footer-deck-link { display: none; }
  .header-deck-link { display: block; }
}
@media (max-width: 720px) {
  .placeholder-slide .diagram-stage { display: none; }
  .placeholder-slide.crowded .stage { display: none; }
  .placeholder-slide.crowded .content {
    min-height: calc(100vh - var(--header-h) - var(--footer-h) - 44px);
    min-height: calc(100dvh - var(--header-h) - var(--footer-h) - 44px);
  }
  /* Type sizes removed from this media query — tokens' clamp() floors handle mobile.
     Drift-bug cleanup per typography contract (CLAUDE.md). */
}
@media (max-width: 720px) {
  .title-overlay {
    align-items: flex-end;
    padding: 16px 14px 18px;
  }
  .title-card {
    width: calc(100vw - 28px);
  }
}
@media (max-width: 480px) {
  :root { --footer-h: 108px; }
  .content { padding: 14px 12px; }
  .content h2 { margin-bottom: 4px; }
  .content .label { margin-bottom: 6px; }
  .footer-slider { gap: 8px; }
  .footer-logo { height: 32px; }
  /* Section-divider eyebrow tag: prevent horizontal overflow at narrow widths.
     Wide letter-spacing + the inline-flex 64px terminator line push the tag
     past the right grid column on phones. Wrap the inline-flex to permit
     line breaks; collapse the terminator line into a thin trailing rule. */
  .slide-break .content .break-tag {
    letter-spacing: 0.08em;
    word-spacing: -0.02em;
    max-width: 100%;
    overflow-wrap: anywhere;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .slide-break .content .break-tag::after { flex: 0 0 24px; }
  /* Long single words (e.g. "Reconfiguration", "Inevitability") expand the 1fr
     grid column to their min-content width, overflowing the content card.
     Collapse to single column at phone widths and shrink h1 so words fit
     intact rather than mid-word breaking. */
  .slide-break .content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 14px 0;
  }
  .slide-break .content::before {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(48px, 11vw, 64px);
    align-self: start;
    margin-bottom: -12px;
  }
  .slide-break .content > * { min-width: 0; grid-column: 1; }
  .slide-break .content h1,
  .slide-break .content .presenter-role,
  .slide-break .content .affiliation { overflow-wrap: break-word; hyphens: auto; }
  .slide-break[data-variant="paper-title"] .content h1 {
    font-size: clamp(22px, 5.5vw, 30px);
    line-height: 1.12;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

body.overview { overflow: auto; }
body.overview header { position: sticky; background: var(--bg); }
body.overview main { position: static; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px; }
body.overview section.slide { display: flex !important; position: relative; inset: auto; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 2px solid var(--stroke); background: var(--card); cursor: pointer; padding: 14px; gap: 4px; }
body.overview section.slide::after { content: attr(data-slide-num); position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 700; color: var(--muted); opacity: 0.5; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.overview .content { flex: 0 0 auto; padding: 4px 0 0; border: none; background: transparent; backdrop-filter: none; min-height: 0; overflow: visible; }
body.overview section.slide .content h1,
body.overview section.slide.slide-break .content h1,
body.overview section.slide.slide-title .title-card h1 {
  font-size: 14px !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
  text-shadow: none !important;
  max-width: none !important;
  color: var(--fg) !important;
}
body.overview section.slide .content h2,
body.overview section.slide .content ul,
body.overview section.slide .content p,
body.overview section.slide .content blockquote,
body.overview section.slide .content cite,
body.overview section.slide .content .quote-stack,
body.overview section.slide .content figure,
body.overview section.slide .content figcaption,
body.overview section.slide .content .card,
body.overview section.slide .content .break-note,
body.overview section.slide .panelists,
body.overview section.slide .institution,
body.overview section.slide .eyebrow,
body.overview section.slide .stage,
body.overview section.slide .title-overlay::before,
body.overview section.slide .title-overlay::after,
body.overview section.slide .title-card h2,
body.overview section.slide .title-card::before,
body.overview section.slide .title-card::after,
body.overview section.slide .title-map-wrap { display: none !important; }
body.overview section.slide.slide-break .content::before,
body.overview section.slide.slide-break .content h1::after,
body.overview section.slide.slide-break .content .break-tag::after { display: none !important; }
body.overview section.slide.slide-break .content,
body.overview section.slide.slide-title .title-card {
  display: block !important;
  padding: 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  backdrop-filter: none !important;
}
body.overview section.slide.slide-break { background: var(--card) !important; padding: 14px !important; }
body.overview section.slide.slide-title { padding: 14px !important; background: var(--card) !important; }
body.overview section.slide.slide-title .title-overlay { position: static !important; display: block !important; padding: 0 !important; background: transparent !important; inset: auto !important; }

/* ── Overview-mode cleanup: strip all per-slide accent strokes + leader rules; keep only a top-edge presenter color ── */
body.overview section.slide .content,
body.overview section.slide .content * { box-shadow: none !important; outline: none !important; }
body.overview section.slide .content { border-radius: 0 !important; border: none !important; }
body.overview section.slide .content .label { display: block !important; }
body.overview section.slide .content .label::before,
body.overview section.slide .content .label::after,
body.overview section.slide .content h1::before,
body.overview section.slide .content h1::after,
body.overview section.slide .break-tag::before,
body.overview section.slide .break-tag::after,
body.overview section.slide .eyebrow::before,
body.overview section.slide .eyebrow::after { display: none !important; content: none !important; }
body.overview section.slide[data-slide^="luke-"],
body.overview section.slide[data-slide="break-luke"]   { border-top: 2px solid var(--accent-luke) !important; }
body.overview section.slide[data-slide^="laurie-"],
body.overview section.slide[data-slide="break-laurie"] { border-top: 2px solid var(--accent-laurie) !important; }
body.overview section.slide[data-slide^="zach-"],
body.overview section.slide[data-slide="break-zach"]   { border-top: 2px solid var(--accent-zach) !important; }
body.overview section.slide[data-slide^="sule-"],
body.overview section.slide[data-slide="break-sule"]   { border-top: 2px solid var(--accent-sule) !important; }

/* ── NARST port additions ── */

/* Single-column testimonial slide: full-width content + stacked block quotes revealed by .frag */
.slide-testimonial .content { flex-basis: 100%; max-width: none; }
.slide-testimonial .stage { display: none; }
@media (min-width: 720px) {
  .slide-testimonial .content { flex: 1 1 100%; max-width: none; }
  .slide-testimonial .stage { display: none; }
  /* SA9 (Frame #4, sa9-viz.js) and SA10 (Frame #5, sule-gif.gif) each carry a
     right-rail visual. Override the testimonial full-width rule so content
     yields a 45% rail to figure.stage. */
  section.slide[data-slide="sule-9"].slide-testimonial .content,
  section.slide[data-slide="sule-10"].slide-testimonial .content { flex: 0 1 55%; max-width: 55%; }
  section.slide[data-slide="sule-9"].slide-testimonial .stage,
  section.slide[data-slide="sule-10"].slide-testimonial .stage { display: flex; flex: 1 1 45%; position: relative; }
  section.slide[data-slide="sule-10"].slide-testimonial .stage img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block;
  }
}
.quote-stack { display: flex; flex-direction: column; gap: 0.9em; margin-top: 1.1em; }
.quote-stack blockquote {
  margin: 0;
  padding: 0.75em 1.05em;
  border-left: 3px solid var(--break-accent, rgba(138,168,199,0.5));
  background: rgba(180,200,220,0.04);
  color: rgba(236,242,248,0.92);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.45;
  text-wrap: pretty;
}
.quote-stack blockquote p + p { margin-top: 0.55em; }
.quote-stack cite {
  display: block;
  margin-top: 0.55em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-cite);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.62);
}
.slide-testimonial.tall .quote-stack blockquote { font-size: var(--fs-quote-tight); line-height: 1.4; }

/* Slide-scoped: dense quote stack used on LH11 Collective World-building
   (3 stacked quotes + 4 takeaway bullets). Tighter type and gap so the takeaway
   list clears the sticky footer at 1024+ widths. */
.slide-testimonial.dense-quotes .content { gap: 4px; }
.slide-testimonial.dense-quotes .quote-stack { gap: 0.55em; margin-top: 0.7em; }
.slide-testimonial.dense-quotes .quote-stack blockquote { font-size: var(--fs-quote-dense); line-height: 1.32; padding: 0.55em 0.85em; }
.slide-testimonial.dense-quotes .quote-stack cite { margin-top: 0.35em; font-size: var(--fs-cite); }
.slide-testimonial.dense-quotes .parallel-points { margin-top: 0.65em !important; }
.slide-testimonial.dense-quotes .parallel-points li { font-size: var(--fs-body-compact); line-height: 1.32; }

/* Şule testimonials (SA5-7 themes, SA9-10 conclusions) — bump blockquote
   from --fs-quote-dense (15-21px) to --fs-quote-tight (17-23px) so faculty
   reflections read at a comfortable audience distance. Scoped to sule slides
   so LH9/LH10/LH11 Laurie testimonials stay on their own scale. */
section.slide[data-slide^="sule-"].slide-testimonial.dense-quotes .quote-stack blockquote {
  font-size: var(--fs-quote-tight);
  line-height: 1.34;
}

/* SA5-7 (the three theme slides, deck positions 37-39) — full-width testimonial
   with only 2 quotes each and no right-rail, so there's room to step up from
   --fs-quote-tight to --fs-quote (19-28px) per presenter request. SA9/10 keep
   the tighter scale because they share the slide with a figure rail. */
section.slide[data-slide="sule-5"].slide-testimonial.dense-quotes .quote-stack blockquote,
section.slide[data-slide="sule-6"].slide-testimonial.dense-quotes .quote-stack blockquote,
section.slide[data-slide="sule-7"].slide-testimonial.dense-quotes .quote-stack blockquote {
  font-size: var(--fs-quote);
  line-height: 1.38;
}

/* Two-column content slide (no stage): left + right columns of content */
.slide-two-col-text .content { flex-basis: 100%; max-width: none; }
.slide-two-col-text .stage { display: none; }
.two-col-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 36px); margin-top: 1em; }
.two-col-inner .col h3 {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.0vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--break-accent, var(--accent));
  margin-bottom: 12px;
}
.two-col-inner .col ol, .two-col-inner .col ul { padding-left: 1.2em; }
.two-col-inner .col ol li, .two-col-inner .col ul li { margin-bottom: 0.5em; font-size: var(--fs-body-compact); }
.two-col-inner .col blockquote { margin: 0; }

/* Consolidated references slide — single flat alphabetical list, balanced
   across 2 columns by the browser's multi-column layout. All font-sizes
   flow through the --fs-* tokens; no inline clamps. */
.slide-references .reference-list {
  list-style: none;
  padding: 0;
  column-count: 2;
  column-gap: clamp(24px, 3.2vw, 48px);
  column-rule: 1px solid rgba(180,200,220,0.10);
  margin-top: 0.6em;
}
.slide-references .reference-list li {
  font-family: var(--font-display);
  font-size: var(--fs-quote-dense);
  line-height: 1.26;
  margin: 0 0 0.28em;
  color: rgba(232,238,245,0.88);
  text-wrap: pretty;
  break-inside: avoid;
}
.slide-references .reference-list li em {
  font-style: italic;
  color: rgba(218,225,232,0.82);
}
@media (max-width: 900px) {
  .slide-references .reference-list { column-count: 1; }
}

/* References carousel — paginated alphabetical reference list, autoforwards
   every 10s via data-autoforward. Lives inside .slide-references .content
   (.stage is display:none on .slide-two-col-text). Each .gallery-item is a
   two-column balanced page; dots pin to the bottom of the carousel. All
   typography flows through the existing .slide-references .reference-list
   rules above so spacing stays consistent across pages. */
/* Let the references content panel grow to fill the slide so the carousel
   can cap itself exactly at the remaining height (instead of overflowing
   past the sticky footer). */
.slide-references .content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.slide-references .stage-gallery.references-carousel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.4em;
  padding-bottom: 28px;
  overflow: hidden;
}
.slide-references .stage-gallery.references-carousel .gallery-item {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.slide-references .stage-gallery.references-carousel .reference-list {
  margin-top: 0;
}
.slide-references .stage-gallery.references-carousel .reference-list li {
  font-size: var(--fs-body-compact);
  line-height: 1.3;
  margin: 0 0 0.35em;
}
.slide-references .stage-gallery.references-carousel .gallery-dots {
  bottom: 4px;
}

/* Closing slide — echoes the title card over the Domain Warping canvas. 2-col
   grid (contact block + QR). Font-sizes flow through --fs-* tokens. */
.slide-closing .closing-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
  width: min(1200px, calc(100vw - 2 * clamp(18px, 4vw, 56px)));
}
.slide-closing .closing-card h1 {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.42);
}
.slide-closing .closing-card h2 {
  font-size: var(--fs-subhead);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.24;
  color: rgba(236,242,248,0.86);
  margin-bottom: clamp(16px, 2vw, 28px);
  max-width: 36ch;
}
.slide-closing .closing-links {
  margin-bottom: clamp(12px, 1.4vw, 20px);
}
.slide-closing .closing-links p {
  font-family: var(--font-body);
  font-size: var(--fs-body-compact);
  line-height: 1.5;
  color: rgba(236,242,248,0.90);
  margin: 0;
}
.slide-closing .closing-links a {
  color: rgba(236,242,248,0.92);
  text-decoration: underline;
  text-decoration-color: rgba(217,180,140,0.45);
  text-underline-offset: 3px;
}
.slide-closing .closing-links a:hover { color: var(--accent-warm); }
.slide-closing .closing-key {
  display: inline-block;
  min-width: 5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  text-transform: uppercase;
  margin-right: 8px;
}
.slide-closing .closing-emails {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.7;
  color: rgba(218,225,232,0.82);
  letter-spacing: 0.02em;
  margin: 0;
}
.slide-closing .closing-emails a {
  color: rgba(236,242,248,0.90);
  text-decoration: none;
}
.slide-closing .closing-emails a:hover { color: var(--accent-warm); }
.slide-closing .closing-sep {
  color: rgba(217,180,140,0.55);
  margin: 0 6px;
}
.slide-closing .closing-qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.slide-closing .closing-qr img {
  width: clamp(140px, 14vw, 220px);
  height: auto;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
  display: block;
}
.slide-closing .closing-qr figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-cite);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(218,225,232,0.72);
}

@media (max-width: 720px) {
  .two-col-inner { grid-template-columns: 1fr; gap: 16px; }
  .slide-testimonial .quote-stack blockquote { font-size: 16px; line-height: 1.4; }
  .slide-closing .closing-card { grid-template-columns: 1fr; }
  .slide-closing .closing-qr { flex-direction: row; justify-content: flex-start; }
  .slide-closing .closing-qr img { width: min(160px, 45vw); }
  .slide-closing .closing-emails { line-height: 2.1; }
}

/* Presenter paper-title slide (replaces section divider; uses .slide-break scaffold + paper-title variant) */
.slide-break[data-variant="paper-title"] .content { grid-template-rows: auto auto 1fr auto; }
.slide-break[data-variant="paper-title"] .content h1 {
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.08;
  max-width: 24ch;
}
.slide-break[data-variant="paper-title"] .presenter-role {
  grid-column: 2;
  grid-row: 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 24px);
  color: rgba(236,242,248,0.82);
  max-width: 38ch;
  align-self: start;
  margin-top: 12px;
}
.slide-break[data-variant="paper-title"] .affiliation {
  grid-column: 2;
  grid-row: 4;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(218,225,232,0.55);
  align-self: end;
}
.slide-break[data-variant="paper-title"] .break-tag { grid-row: 1; }
.slide-break[data-variant="paper-title"] .content h1 { grid-row: 2; align-self: start; margin-top: 4px; }

/* Two-col text split inside a presenter-titled slide (used for LH1 overview, LH5 syllabus) */
.content .outline-list { padding-left: 1.1em; }
.content .outline-list li { margin-bottom: 0.45em; font-size: var(--fs-body-compact); color: rgba(232,238,245,0.9); }
.content .outline-list li.frag { line-height: 1.35; }

/* Borough-step strip for LW5 map slide — small pill list of 5 boroughs below/beside the map */
.borough-steps {
  list-style: none;
  padding: 0;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.borough-steps li {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(199,215,234,0.18);
  border-radius: 999px;
  color: rgba(199,215,234,0.52);
  background: rgba(15,19,25,0.55);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.borough-steps li.visible {
  color: var(--accent-warm);
  border-color: rgba(217,180,140,0.55);
  background: rgba(217,180,140,0.08);
}

/* Compact legend variant used on LW5 */
.campus-legend.compact {
  min-width: 150px;
  padding: 9px 11px 9px;
}
.campus-legend.compact .campus-legend-title {
  font-size: 9px;
  letter-spacing: 0.2em;
  margin-bottom: 7px;
}
.campus-legend.compact .campus-legend-stats { gap: 12px; padding-bottom: 7px; margin-bottom: 7px; }
.campus-legend.compact .campus-legend-stats .num { font-size: 17px; }
.campus-legend.compact .campus-legend-stats .lbl { font-size: 8px; letter-spacing: 0.14em; }
.campus-legend.compact .campus-legend-key { display: flex; flex-direction: column; gap: 5px; }
.campus-legend.compact .campus-legend-key .row { display: flex; align-items: center; gap: 7px; }
.campus-legend.compact .campus-legend-key .swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(8,10,14,0.9);
  box-shadow: 0 0 0 1px rgba(232,238,245,0.35);
}
.campus-legend.compact .campus-legend-key .swatch.participating { background: #e5b36a; }
.campus-legend.compact .campus-legend-key .swatch.non-participating { background: #6b7480; box-shadow: 0 0 0 1px rgba(232,238,245,0.22); }
.campus-legend.compact .campus-legend-key .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.7);
}

/* Non-participating campus label appearance, hidden by default; borough reveal toggles per-borough */
.campus-label-permanent.non-participating { color: rgba(199,215,234,0.78); font-weight: 500; }
.campus-label-permanent.hidden-until-reveal { opacity: 0; transition: opacity 0.35s ease; }
.campus-label-permanent.hidden-until-reveal.revealed { opacity: 1; }

/* LW5 map layout: map fills stage, borough pills sit in content column */
[data-slide="luke-5"] .content { gap: 0.6em; }
[data-slide="luke-5"] .map-mount { min-height: clamp(340px, 55vh, 560px); min-height: clamp(340px, 55dvh, 560px); }

/* Slim visual header above numbered syllabus lists (LH5 right column) */
.syllabus-list { list-style: none; padding: 0; counter-reset: syllabus; }
.syllabus-list li {
  counter-increment: syllabus;
  padding-left: 2em;
  position: relative;
  margin-bottom: 0.55em;
  font-size: var(--fs-body-compact);
}
.syllabus-list li::before {
  content: counter(syllabus, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--break-accent, var(--accent));
  letter-spacing: 0.05em;
}

/* Presenter paper-title slide gets the panelist's accent thread on the heading rule */
.slide-break[data-variant="paper-title"] .content h1::after {
  background: var(--break-accent, var(--accent));
  opacity: 0.8;
}

/* .content cite fallback (inline cite after a bullet testimonial) */
.content cite {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-cite);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.55);
}

/* ── Stage gallery (carousel on .stage) — drives images or quote cards via .active on .gallery-item ── */
.stage-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.stage-gallery .gallery-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.stage-gallery .gallery-item.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms ease, visibility 0s;
}
.stage-gallery .gallery-item > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.stage-gallery .gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
  pointer-events: auto;
}
.stage-gallery .gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(199,215,234,0.35);
  background: rgba(199,215,234,0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.stage-gallery .gallery-dot.active {
  background: var(--break-accent, rgba(229,179,106,0.95));
  border-color: var(--break-accent, rgba(229,179,106,0.95));
  transform: scale(1.1);
}

/* Quote-carousel variant — same mechanic, typographic presentation instead of image contain */
.stage-gallery.quote-carousel {
  padding: clamp(18px, 2.4vw, 40px);
  background: rgba(10,13,18,0.55);
}
.stage-gallery.quote-carousel .gallery-item {
  padding: 0;
}
.stage-gallery.quote-carousel blockquote {
  margin: 0;
  padding: 0.8em 1.1em;
  border-left: 3px solid var(--break-accent, rgba(138,168,199,0.5));
  background: rgba(180,200,220,0.04);
  color: rgba(236,242,248,0.94);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.45;
  max-width: 44ch;
  text-wrap: pretty;
}
.stage-gallery.quote-carousel blockquote p + p { margin-top: 0.55em; }
.stage-gallery.quote-carousel cite {
  display: block;
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-cite);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,215,234,0.62);
}
@media (max-width: 720px) {
  .stage-gallery.quote-carousel { padding: 14px; }
  .stage-gallery.quote-carousel blockquote { font-size: 15px; line-height: 1.4; }
}

/* Subtle tick mark on bullets that cue a quote change, so presenter knows this bullet advances the right panel */
.parallel-points.quote-cue li.frag[data-gallery-idx]::marker {
  color: var(--break-accent, rgba(229,179,106,0.9));
}

/* Sandbox gallery (ZM9) — image + figcaption stacked. Captions explain each anatomy view. */
.stage-gallery.sandbox-gallery .gallery-item {
  flex-direction: column;
  gap: 0.55em;
  padding-bottom: 26px;
}
.stage-gallery.sandbox-gallery .gallery-item > img {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}
.stage-gallery.sandbox-gallery .gallery-item > figcaption {
  flex: 0 0 auto;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(218,225,232,0.82);
  text-align: center;
  line-height: 1.4;
  padding: 0 0.6em;
  letter-spacing: 0.01em;
}
.stage-gallery.sandbox-gallery .gallery-item > figcaption strong {
  color: rgba(232,200,159,0.95);
  font-weight: 600;
}
.stage-gallery.sandbox-gallery .gallery-dots { bottom: 4px; }

/* ZM9 CUNY AI Lab badge — sits below the bulleted text in the left column. */
.zm9-lab-badge {
  margin-top: 1.1em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.zm9-lab-badge img {
  width: clamp(150px, 18vw, 240px);
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 24px rgba(0,0,0,0.25);
}

/* LW6 "Our Goals" — editorial manifesto arrayed diagonally.
   Three goals distributed across the full content height, anchored to a 116° sage
   thread. Each goal is numbered (01 / 02 / 03) and the numeral doubles as an
   index mark where the item meets the diagonal. Per SLIDES.md: one frame — no
   step reveal. */
.placeholder-slide.ladder-slide .content {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}
.placeholder-slide.ladder-slide .content ul.ladder-list {
  list-style: none;
  padding-left: 0;
  margin-top: clamp(1.2em, 3vw, 2.4em);
  margin-bottom: clamp(0.4em, 1.2vw, 1em);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
  overflow: visible;
  position: relative;
  isolation: isolate;
}
.placeholder-slide.ladder-slide .content ul.ladder-list::before {
  content: none;
}
.placeholder-slide.ladder-slide .content ul.ladder-list::after {
  content: none;
}
.placeholder-slide.ladder-slide .content ul.ladder-list li {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.22em, 0.6vw, 0.45em);
  max-width: none;
  position: relative;
}
.placeholder-slide.ladder-slide .content ul.ladder-list .ladder-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  color: var(--accent-luke);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: none;
}
.placeholder-slide.ladder-slide .content ul.ladder-list .ladder-num::before {
  content: "";
  display: inline-block;
  width: clamp(22px, 2.4vw, 36px);
  height: 1px;
  background: color-mix(in oklab, var(--accent-luke) 70%, transparent);
  opacity: 0.8;
}
.placeholder-slide.ladder-slide .content ul.ladder-list .ladder-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 60;
  font-size: clamp(28px, 3.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: rgba(238,244,250,0.98);
  text-wrap: balance;
  white-space: nowrap;
}
.placeholder-slide.ladder-slide .content ul.ladder-list .ladder-arrow {
  display: inline-block;
  color: color-mix(in oklab, var(--accent-luke) 95%, transparent);
  padding: 0 0.12em;
  font-style: normal;
  opacity: 0.9;
}
.placeholder-slide.ladder-slide .content ul.ladder-list li:nth-child(1) { margin-left: 0; align-self: flex-start; }
.placeholder-slide.ladder-slide .content ul.ladder-list li:nth-child(2) { margin-left: clamp(2rem, 14vw, 12rem); align-self: flex-start; }
.placeholder-slide.ladder-slide .content ul.ladder-list li:nth-child(3) { margin-left: clamp(4rem, 28vw, 24rem); align-self: flex-start; }
@media (max-width: 720px) {
  .placeholder-slide.ladder-slide .content ul.ladder-list .ladder-text { white-space: normal; }
  .placeholder-slide.ladder-slide .content ul.ladder-list li:nth-child(2) { margin-left: 8%; }
  .placeholder-slide.ladder-slide .content ul.ladder-list li:nth-child(3) { margin-left: 16%; }
}

/* ------------------------------------------------------------------ */
/* Laurie section font normalization (2026-04-21)                    */
/* All LH1–LH11 body bullets resolve to --fs-body-compact so the     */
/* reading rhythm stays coherent across the block regardless of      */
/* whether a slide trips the auto-dense (5-bullet) rule or carries   */
/* the default --fs-body. Dense-quotes (LH11) has its own tighter    */
/* li rule and is excluded. LH8's blockquote keeps --fs-quote-tight. */
/* ------------------------------------------------------------------ */
section.slide[data-slide^="laurie-"]:not(.dense-quotes) .content li,
section.slide[data-slide^="laurie-"]:not(.dense-quotes) .content .parallel-points li,
section.slide[data-slide^="laurie-"]:not(.dense-quotes) .content .outline-list li {
  font-size: var(--fs-body-compact);
  line-height: 1.4;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ */
/* Zach + Şule body normalization (2026-04-21, ZM+SA focus)          */
/* Mirrors the Laurie block for zach-talk-* and sule-* so ZM1–ZM10  */
/* and SA1–SA4 / SA8 bullets resolve to --fs-body-compact regardless */
/* of the auto-dense classifier. Testimonials SA5/6/7/9/10 carry     */
/* .dense-quotes and are handled by the existing                     */
/* .slide-testimonial.dense-quotes rules above. The SA1/2/4/8        */
/* "bigger font" override below re-upgrades those four slides to     */
/* --fs-body per the presenter's source notes.                       */
/* ------------------------------------------------------------------ */
section.slide[data-slide^="zach-talk-"]:not(.dense-quotes) .content li,
section.slide[data-slide^="zach-talk-"]:not(.dense-quotes) .content .parallel-points li,
section.slide[data-slide^="zach-talk-"]:not(.dense-quotes) .content .outline-list li,
section.slide[data-slide^="sule-"]:not(.dense-quotes) .content li,
section.slide[data-slide^="sule-"]:not(.dense-quotes) .content .parallel-points li,
section.slide[data-slide^="sule-"]:not(.dense-quotes) .content .outline-list li {
  font-size: var(--fs-body-compact);
  line-height: 1.34;
  margin-bottom: 6px;
}

/* Şule — SA1/SA2/SA4/SA8 marked "bigger font please" in source notes.
   Upgraded twice: first from --fs-body-compact to --fs-body, then to the
   dedicated --fs-body-lead tier after the presenter asked for another bump. */
section.slide[data-slide="sule-1"] .content .parallel-points li,
section.slide[data-slide="sule-2"] .content .parallel-points li,
section.slide[data-slide="sule-4"] .content .parallel-points li,
section.slide[data-slide="sule-8"] .content .parallel-points li {
  font-size: var(--fs-body-lead);
  line-height: 1.38;
  margin-bottom: 12px;
}

/* ZM1 (deck pos 24) + ZM8 (deck pos 30): slight bump from the default
   zach-talk --fs-body-compact up to --fs-body. Short bullets + right-rail
   viz, so the column has room to carry the larger scale. */
section.slide[data-slide="zach-talk-1"] .content .parallel-points li,
section.slide[data-slide="zach-talk-8"] .content .parallel-points li {
  font-size: var(--fs-body);
  line-height: 1.38;
  margin-bottom: 10px;
}

/* LH3 — Summer Institute: wider text column (2/3) + narrower image (1/3).
   Overrides the default odd-layout 50/50 split for this slide only. */
@media (min-width: 720px) {
  section.slide[data-slide="laurie-3"].placeholder-slide.odd-layout .content {
    flex: 0 1 66.666%;
    max-width: 66.666%;
  }
  section.slide[data-slide="laurie-3"].placeholder-slide.odd-layout .stage {
    flex: 1 1 33.333%;
    max-width: 33.333%;
  }
}

/* ZM1 — Tinkering as Critical AI Literacy (absorbed bricolage content
   2026-04-21): wider text column (2/3) + narrower Langton's Ant viz (1/3).
   Overrides the default odd-layout 50/50 split for this slide only. */
@media (min-width: 720px) {
  section.slide[data-slide="zach-talk-1"].placeholder-slide.odd-layout .content {
    flex: 0 1 66.666%;
    max-width: 66.666%;
  }
  section.slide[data-slide="zach-talk-1"].placeholder-slide.odd-layout .stage {
    flex: 1 1 33.333%;
    max-width: 33.333%;
  }
}

/* LH9 — Interventions for Teaching Critical AI Literacy: half-and-half.
   Overrides the default even-layout 33/67 split for this slide only. */
@media (min-width: 720px) {
  section.slide[data-slide="laurie-9"].placeholder-slide.even-layout .content {
    flex: 0 1 50%;
    max-width: 50%;
  }
  section.slide[data-slide="laurie-9"].placeholder-slide.even-layout .stage {
    flex: 1 1 50%;
    max-width: 50%;
  }
  /* SA2 (Conceptual Background) + SA4 (Data analysis) carry citation-dense
     bullets that need more column width than the default 33/67 allows. */
  section.slide[data-slide="sule-2"].placeholder-slide.even-layout .content,
  section.slide[data-slide="sule-4"].placeholder-slide.even-layout .content {
    flex: 0 1 50%;
    max-width: 50%;
  }
  section.slide[data-slide="sule-2"].placeholder-slide.even-layout .stage,
  section.slide[data-slide="sule-4"].placeholder-slide.even-layout .stage {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

/* LH5 — Research and Information: give left column more room.
   Guarded at 720+ so the base mobile rule (.two-col-inner → 1fr at <=720px)
   wins on phones and the list doesn't cram into two narrow columns. */
@media (min-width: 720px) {
  section.slide[data-slide="laurie-5"] .two-col-inner {
    grid-template-columns: 1.4fr 1fr;
  }
}
section.slide[data-slide="laurie-5"] .two-col-inner .col ol li,
section.slide[data-slide="laurie-5"] .two-col-inner .col ul li {
  line-height: 1.34;
  margin-bottom: 0.38em;
}

/* LH10 — Student Agency: show full NARST banner inside the right-panel stage */
section.slide[data-slide="laurie-10"] .stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080b10;
}
section.slide[data-slide="laurie-10"] .stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* LH11 — Collective World-building: pure testimonial, 3 quotes + 4 bullets.
   Tightened gaps/margins so the whole card clears the sticky footer at
   laptop-panel heights (~768h) without needing to shrink the readable body. */
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .quote-stack {
  gap: 0.42em;
  margin-top: 0.5em;
}
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .quote-stack blockquote {
  font-size: clamp(22px, 2.05vw, 31px);
  line-height: 1.3;
  padding: 0.4em 0.8em;
}
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .quote-stack cite {
  margin-top: 0.25em;
}
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .parallel-points {
  margin-top: 0.5em !important;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0;
}
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .parallel-points li {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 0;
}
section.slide[data-slide="laurie-11"].slide-testimonial.dense-quotes .parallel-points li:not(:last-child)::after {
  content: "|";
  margin: 0 0.75em;
  opacity: 0.38;
  font-weight: 300;
}

/* ZM8 — Tinkering with System Prompts: Frappe grouped-bar chart.
   Renders three institutional signatures (Baruch SPAN 105, Hunter
   Espanol, six Brooklyn College HF Spaces) across five modalities:
   prompt rewrites, token tuning, temperature tuning, distinct personas,
   model swaps. Captions below carry one takeaway per institution.
   Palette: amber (Baruch) + teal (Hunter) + mauve (Brooklyn). */
.zm8-stage { padding: 1.1em 1.1em 0.9em; gap: 0.25em; }
.zm8-chart { width: 100%; height: 320px; min-height: 240px; }
.zm8-chart .chart-legend { display: none !important; }
.zm8-chart svg { background: transparent; }
.zm8-chart .chart-container { color: rgba(218,225,232,0.92); }
.zm8-chart .title { fill: rgba(236,242,248,0.95); font-family: var(--font-display); }
.zm8-chart svg text,
.zm8-chart .chart-label,
.zm8-chart .y-axis text,
.zm8-chart .x-axis text,
.zm8-chart text.y-value-text,
.zm8-chart text.specific-value {
  fill: rgba(245,250,255,1) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font-mono, "IBM Plex Mono", monospace) !important;
}
.zm8-chart .y-regions line,
.zm8-chart .chart-stats line { stroke: rgba(199,215,234,0.20); }
.zm8-chart .graph-svg-tip {
  font-size: 14px !important;
  font-family: var(--font-mono, "IBM Plex Mono", monospace) !important;
  color: rgba(245,250,255,1) !important;
  background: rgba(10,16,24,0.96) !important;
  border: 1px solid rgba(199,215,234,0.35) !important;
  padding: 8px 12px !important;
}
.zm8-chart .graph-svg-tip .title {
  color: rgba(255,255,255,1) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.zm8-chart .graph-svg-tip ul,
.zm8-chart .graph-svg-tip li { color: rgba(245,250,255,0.96) !important; }
.zm8-chart .graph-svg-tip .data-point-list .label {
  color: rgba(245,250,255,0.96) !important;
}
.zm8-chart .legend-dataset-text { font-size: 16px !important; fill: rgba(232,240,250,0.95) !important; }
.zm8-chart-caption {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: var(--fs-caption);
  color: rgba(218,225,232,0.92);
  line-height: 1.4;
  padding: 0 0.2em;
}
.zm8-chart-caption p { margin: 0; }
.zm8-chart-caption strong { color: rgba(236,242,248,0.98); font-weight: 600; margin-right: 0.25em; }
.zm8-chart-caption .zm8-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 999px;
  vertical-align: baseline;
  margin-right: 0.45em;
  transform: translateY(0.05em);
}

/* ── ZM3 · Bricolage pullquote ─────────────────────────────────────────────
   The Resnick/bricoleur definition is pulled out of the parallel-points list
   on ZM3 ("Tinkering as Bricolage") and rendered as a block quote so the
   citation reads as a discrete unit rather than a fourth item. Left-ruled
   in the zach amber accent; display font, italic. */
.zm3-pullquote {
  margin: clamp(0.9em, 1.4vw, 1.4em) 0 0;
  padding: clamp(0.5em, 0.9vw, 0.9em) 0 clamp(0.4em, 0.8vw, 0.7em) clamp(0.9em, 1.4vw, 1.3em);
  border-left: 2px solid color-mix(in oklab, var(--accent-zach) 70%, transparent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-body-compact, clamp(15px, 1.15vw, 20px));
  line-height: 1.42;
  color: rgba(236, 241, 247, 0.9);
  text-wrap: pretty;
}
.zm3-pullquote p { margin: 0; }
.zm3-pullquote em {
  font-style: italic;
  color: var(--accent-zach);
  font-weight: 500;
}

/* ── ZM2 · Tinkering components grid ───────────────────────────────────────
   Eight tinkering components laid out as a 4×2 grid of ladder entries
   spanning the whole slide. Each cell has a monospace numeric cap, a
   display-font header, and a short body line. Base ladder diagonal cascade
   offsets are reset; items sit flush in their grid cells. */

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: clamp(1.4rem, 3vw, 2.8rem);
  row-gap: clamp(1.2rem, 2.6vw, 2.4rem);
  margin-top: clamp(1.2rem, 2.8vw, 2.4rem);
  padding: 0;
  flex: 0 1 auto;
  max-width: none;
  width: 100%;
}

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li,
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(1),
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(2),
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(3) {
  margin-left: 0;
  align-self: start;
  padding-top: clamp(0.55rem, 1.3vw, 1rem);
  gap: clamp(0.35rem, 0.8vw, 0.6rem);
  position: relative;
}

/* Staggered cascade — each column drops further than the last, creating a
   diagonal sweep across the grid. Row 2 inherits the same column offsets so
   the two rows mirror each other. Magnitudes kept modest so the bottom row
   doesn't press into the sticky footer. */
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(4n+1) {
  transform: translateY(0);
}
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(4n+2) {
  transform: translateY(clamp(0.4rem, 0.9vw, 0.8rem));
}
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(4n+3) {
  transform: translateY(clamp(0.8rem, 1.8vw, 1.6rem));
}
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li:nth-child(4n) {
  transform: translateY(clamp(1.2rem, 2.7vw, 2.4rem));
}

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(22px, 2vw, 30px);
  height: 1px;
  background: color-mix(in oklab, var(--accent-zach) 75%, transparent);
  opacity: 0.85;
}

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list .ladder-num {
  color: var(--accent-zach);
  letter-spacing: 0.22em;
}
section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list .ladder-num::before {
  content: none;
}

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list .ladder-text {
  white-space: normal;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.12;
  max-width: 14ch;
  hyphens: manual;
  text-wrap: balance;
}

section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list .ladder-body {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.32;
  color: rgba(218,225,232,0.72);
  max-width: 22ch;
  margin-top: clamp(0.25rem, 0.6vw, 0.45rem);
  text-wrap: pretty;
}

@media (max-width: 960px) {
  section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
  }
}
@media (max-width: 560px) {
  section.slide[data-slide="zach-talk-2"].ladder-slide .content ul.ladder-list {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
  }
}

/* ── SA3 · Horizontal ladder (CALI as evidence) ────────────────────────────
   Variant of the LW6/ZM10 ladder laid sideways. The three rungs become
   columns arrayed between a faint top + bottom rail that span the full
   content width. Accent swaps to Şule's lilac. The diagonal cascade offsets
   inherited from the base rules are reset; text wraps within each column. */

section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list {
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(1.4rem, 3.2vw, 3.2rem);
  margin-top: clamp(2rem, 5vw, 3.8rem);
  padding: clamp(1.5rem, 3.2vw, 2.8rem) 0 clamp(1.2rem, 2.6vw, 2.2rem);
  flex: 0 1 auto;
  position: relative;
  max-width: none;
  width: 100%;
}

section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::before,
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-sule) 70%, transparent) 12%,
    color-mix(in oklab, var(--accent-sule) 70%, transparent) 88%,
    transparent 100%
  );
  opacity: 0.75;
}
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::before { top: 0; }
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::after  { bottom: 0; }

section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li,
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(1),
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(2),
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(3) {
  flex: 1 1 0;
  margin-left: 0;
  align-self: stretch;
  padding-top: clamp(0.7rem, 1.6vw, 1.2rem);
  gap: clamp(0.55rem, 1.3vw, 1rem);
  position: relative;
}
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: clamp(16px, 1.8vw, 26px);
  background: color-mix(in oklab, var(--accent-sule) 85%, transparent);
  opacity: 0.9;
}

section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list .ladder-num {
  color: var(--accent-sule);
}
section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list .ladder-num::before {
  background: color-mix(in oklab, var(--accent-sule) 70%, transparent);
}

section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list .ladder-text {
  white-space: normal;
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.22;
  max-width: 18ch;
  hyphens: manual;
  text-wrap: balance;
}

@media (max-width: 720px) {
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.4rem, 5vw, 2.2rem);
    padding: clamp(1rem, 4vw, 1.6rem) 0;
  }
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::before,
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list::after {
    background: color-mix(in oklab, var(--accent-sule) 60%, transparent);
  }
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li,
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(1),
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(2),
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li:nth-child(3) {
    margin-left: 0;
    padding-top: 0;
    padding-left: clamp(1rem, 4vw, 1.6rem);
  }
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list li::before {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
  }
  section.slide[data-slide="sule-3"].ladder-slide .content ul.ladder-list .ladder-text {
    max-width: none;
  }
}