/* slides.css
 * Slide layout patterns + reusable components.
 *
 * Three slide treatments per the schematic:
 *   .slide.dark   — full-bleed image-led, coal background
 *   .slide.light  — paper background, type-led
 *   .slide.header — section break, generous white space, single line of type
 *
 * Components used across slides:
 *   .kicker        — mono caps eyebrow
 *   .hero-title    — Fraunces italic large
 *   .quote-block   — pull quote + attribution
 *   .doctrine-list — sidebar of named terms
 *   .image-pair    — image + caption tile
 *   .caption-strip — footer line
 */

/* ── slide base ───────────────────────────────────────── */
.slide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  overflow: hidden;
  isolation: isolate;
}

/* heat shimmer — applied only while the SVG turbulence filter is "live".
 * The displacement-map scale is lerped from 0 → target → 0 in JS, so the
 * effect grows and decays steadily rather than snapping on/off.
 *
 * Filter is applied to .slide__inner (NOT .slide) so the displacement
 * stays inside the typographic content region — slide edges and the
 * dark-mode atmospheric gradient never get bent, eliminating edge leak.
 */
/* Heat shimmer is scoped to dark / atmospheric slides only — the slides
 * carrying the ember-orange ground tone where fire is visually present.
 * Light paper slides stay perfectly still during scroll. */
body.is-shimmering .slide.dark .slide__inner {
  filter: url(#heat-shimmer);
}

/* (.shimmer-soft is preserved as an opt-in for any future dark slide
 *  that wants the subdued amplitude, but it has no effect on light
 *  slides since the parent rule above gates on .dark.) */
body.is-shimmering .slide.dark.shimmer-soft .slide__inner {
  filter: url(#heat-shimmer-soft);
}

/* the inline SVG filter element itself takes no layout space */
.heat-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── reveal stagger ("tent-pole assembly") ────────────────
 * Direct children of .slide__inner start invisible + blurred,
 * then rise + un-blur in sequence when the slide becomes current.
 * Nested clusters (quote-cards, brand-read-blocks, footer cols)
 * carry their own nested stagger so they assemble after the title.
 */
.slide__inner > *,
.slide-cover__footer > div,
.slide-stated__main > *,
.slide-stated__quotes > .quote-card,
.brand-read-grid > .brand-read-block,
.doctrine-list ul > li {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out),
    filter 720ms var(--ease-out);
}

/* assemble when the slide is current */
.slide.is-entered .slide__inner > *,
.slide.is-entered .slide-cover__footer > div,
.slide.is-entered .slide-stated__main > *,
.slide.is-entered .slide-stated__quotes > .quote-card,
.slide.is-entered .brand-read-grid > .brand-read-block,
.slide.is-entered .doctrine-list ul > li {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* outer stagger — direct children of slide__inner */
.slide.is-entered .slide__inner > *:nth-child(1) { transition-delay:  80ms; }
.slide.is-entered .slide__inner > *:nth-child(2) { transition-delay: 200ms; }
.slide.is-entered .slide__inner > *:nth-child(3) { transition-delay: 320ms; }
.slide.is-entered .slide__inner > *:nth-child(4) { transition-delay: 440ms; }
.slide.is-entered .slide__inner > *:nth-child(5) { transition-delay: 560ms; }
.slide.is-entered .slide__inner > *:nth-child(6) { transition-delay: 680ms; }

/* inner stagger — quote cards on slide 04 (after the head lands) */
.slide.is-entered .slide-stated__quotes > .quote-card:nth-child(1) { transition-delay: 320ms; }
.slide.is-entered .slide-stated__quotes > .quote-card:nth-child(2) { transition-delay: 440ms; }
.slide.is-entered .slide-stated__quotes > .quote-card:nth-child(3) { transition-delay: 560ms; }
.slide.is-entered .slide-stated__quotes > .quote-card:nth-child(4) { transition-delay: 680ms; }

/* doctrine sidebar list slots in like tent-pole segments */
.slide.is-entered .doctrine-list ul > li:nth-child(1) { transition-delay: 480ms; }
.slide.is-entered .doctrine-list ul > li:nth-child(2) { transition-delay: 560ms; }
.slide.is-entered .doctrine-list ul > li:nth-child(3) { transition-delay: 640ms; }
.slide.is-entered .doctrine-list ul > li:nth-child(4) { transition-delay: 720ms; }
.slide.is-entered .doctrine-list ul > li:nth-child(5) { transition-delay: 800ms; }
.slide.is-entered .doctrine-list ul > li:nth-child(6) { transition-delay: 880ms; }

/* inner stagger — brand-read blocks on slide 05 */
.slide.is-entered .brand-read-grid > .brand-read-block:nth-child(1) { transition-delay: 320ms; }
.slide.is-entered .brand-read-grid > .brand-read-block:nth-child(2) { transition-delay: 440ms; }
.slide.is-entered .brand-read-grid > .brand-read-block:nth-child(3) { transition-delay: 560ms; }
.slide.is-entered .brand-read-grid > .brand-read-block:nth-child(4) { transition-delay: 680ms; }

/* cover footer: the three columns slot in left-to-right */
.slide.is-entered .slide-cover__footer > div:nth-child(1) { transition-delay: 360ms; }
.slide.is-entered .slide-cover__footer > div:nth-child(2) { transition-delay: 480ms; }
.slide.is-entered .slide-cover__footer > div:nth-child(3) { transition-delay: 600ms; }

/* respect reduced-motion: skip the assembly entirely */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide__inner > *,
  .slide-cover__footer > div,
  .slide-stated__main > *,
  .slide-stated__quotes > .quote-card,
  .brand-read-grid > .brand-read-block,
  .doctrine-list ul > li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  body.is-shimmering .slide__inner { filter: none !important; }
}

.slide + .slide { /* sibling separation */ }

.slide__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-6);
  align-content: center;
}

/* slide number — bottom-right of every slide, for orientation */
.slide__num {
  position: absolute;
  right: var(--slide-pad-x);
  bottom: calc(var(--chrome-bottom) + var(--sp-3));
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 5;
}
.slide.dark .slide__num { color: var(--paper-mute); }

/* ── treatment: light ────────────────────────────────── */
.slide.light {
  background: var(--paper);
  color: var(--ink);
}

/* ── treatment: dark ─────────────────────────────────── */
.slide.dark {
  background: var(--coal);
  color: var(--paper);
}
.slide.dark .u-soft { color: var(--paper-soft); }
.slide.dark .u-mute { color: var(--paper-mute); }

/* dark: subtle vignette + smoke gradient for cover-style slides */
.slide.dark.atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 78%,
      rgba(184, 102, 46, 0.18) 0%,
      rgba(184, 102, 46, 0.06) 22%,
      rgba(17, 16, 13, 0.0) 48%),
    radial-gradient(ellipse at 50% 12%,
      rgba(69, 105, 122, 0.10) 0%,
      rgba(17, 16, 13, 0.0) 55%),
    linear-gradient(180deg,
      #0a0907 0%,
      #131210 35%,
      #1a1814 60%,
      #100f0c 100%);
  z-index: -1;
}
/* a low band of warmth at the horizon line */
.slide.dark.atmosphere::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(184, 102, 46, 0.22) 0%,
      rgba(184, 102, 46, 0.04) 28%,
      rgba(0, 0, 0, 0.0) 60%);
  z-index: -1;
  pointer-events: none;
}

/* ── treatment: header ───────────────────────────────── */
.slide.header {
  background: var(--paper);
  color: var(--ink);
  align-items: center;
}
.slide.header .slide__inner {
  gap: var(--sp-9);
}

/* ── component: kicker (mono caps eyebrow) ───────────── */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  font-weight: 500;
}
.slide.dark .kicker { color: var(--paper-soft); }

.kicker--ember { color: var(--ember); }

/* ── component: hero title ───────────────────────────────
 * Default: clean sans, light weight, lowercase, tight tracking.
 * Fraunces italic is used sparingly — only on actual quotes.
 */
.hero-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 300;
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin: 0;
  color: inherit;
}
.hero-title.display { font-size: var(--t-display); }
.hero-title.center  { text-align: center; }

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--measure-mid);
}
.slide.dark .hero-subtitle { color: var(--paper-soft); }

/* ── component: section header rule ──────────────────── */
.act-rule {
  display: inline-block;
  width: 64px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  margin: 0 var(--sp-3);
  vertical-align: middle;
}

/* ── component: quote block ──────────────────────────── */
.quote-block {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  text-align: center;
  text-wrap: balance;
  color: inherit;
}
.quote-block--small {
  font-size: var(--t-xl);
}
.quote-block::before { content: "\201C"; }
.quote-block::after  { content: "\201D"; }
.quote-block.unquoted::before,
.quote-block.unquoted::after { content: ""; }

.attribution {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  margin: 0;
}
.attribution em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.slide.dark .attribution { color: var(--paper-soft); }

/* ── component: caption strip (footer line) ──────────── */
.caption-strip {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: lowercase;
  letter-spacing: var(--tr-mono-tight);
  color: var(--ink-soft);
  border-top: 1px solid var(--ink-mute);
  padding-top: var(--sp-3);
}
.slide.dark .caption-strip {
  color: var(--paper-soft);
  border-top-color: var(--paper-mute);
}
.caption-strip.italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
}

/* ── slide 01: cover layout ───────────────────────────── */
.slide-cover .slide__inner {
  grid-template-rows: 1fr auto;
  height: 100%;
  align-content: stretch;
  gap: var(--sp-7);
}
.slide-cover__title {
  align-self: center;
  display: grid;
  gap: var(--sp-5);
  max-width: none;
}
/* Cover title — display size variant. */
.slide-cover__title .hero-title {
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.slide-cover__title .hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  color: var(--paper-soft);
  max-width: 64ch;
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.slide-cover__footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: lowercase;
  letter-spacing: var(--tr-mono-tight);
  color: var(--paper-soft);
  border-top: 1px solid var(--paper-mute);
  padding-top: var(--sp-4);
}
.slide-cover__footer .label {
  display: block;
  color: var(--paper-mute);
  margin-bottom: 4px;
}

/* ── slide 02: tohru quote layout ─────────────────────── */
.slide-tohru .slide__inner {
  max-width: 1080px;
  text-align: center;
  gap: var(--sp-7);
  padding-block: var(--sp-9);
}
.slide-tohru .quote-block {
  font-size: clamp(28px, 3.6vw, 56px);
}

/* ── slide 03: act header layout ─────────────────────── */
.slide-act-header .slide__inner {
  grid-template-rows: auto 1fr auto;
  height: 100%;
  align-content: stretch;
  gap: 0;
}
.slide-act-header__top { padding-top: var(--sp-4); }
.slide-act-header__center {
  align-self: center;
  text-align: center;
  display: grid;
  gap: var(--sp-5);
}
/* Section-header title — display size variant. */
.slide-act-header__center .hero-title {
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.slide-act-header__bottom {
  align-self: end;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: lowercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-mute);
}
/* dark act dividers: bottom text picks up copper as the spark mark */
.slide.dark .slide-act-header__bottom { color: var(--copper); }
.slide.dark .slide-act-header__top .kicker { color: var(--copper); }

/* ── slide 04: stated positioning layout ─────────────── */
.slide-stated .slide__inner {
  grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr);
  gap: var(--sp-9);
  align-items: start;
  align-content: start;
  padding-top: var(--sp-7);
}
.slide-stated__main { display: grid; gap: var(--sp-6); }
.slide-stated__head .hero-title {
  font-size: var(--t-2xl);
  text-transform: lowercase;
}
.slide-stated__quotes {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}
.quote-card {
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--ink-mute);
}
.quote-card__index {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quote-card__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.32;
  letter-spacing: 0;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.quote-card__attribution {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
}

/* sidebar: doctrine vocabulary */
.doctrine-list {
  list-style: none;
  margin: 0;
  padding: var(--sp-5) 0 0 var(--sp-5);
  border-left: 1px solid var(--ink-mute);
  display: grid;
  gap: var(--sp-3);
}
.doctrine-list__heading {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.doctrine-list li {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-tight);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doctrine-list .term {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink);
}
.doctrine-list .gloss {
  color: var(--ink-soft);
  font-weight: 400;
}

/* ── slide 05: brand read layout ─────────────────────── */
.slide-brand-read {
  height: auto;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
}
.slide-brand-read .slide__inner {
  height: auto;
  justify-content: flex-start;
  max-width: 1440px;
  gap: var(--sp-7);
  align-content: start;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.slide-brand-read__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 60ch;
}
.brand-read-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-9);
}
/* Each block: image on top, prose below. Text gets the full column width. */
.brand-read-block {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--sp-4);
  align-items: start;
}
.brand-read-block__image {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--paper-3);
  border: 1px solid var(--paper-2);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
/* placeholder pattern — replaced with real photography on iteration */
.brand-read-block__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(54, 70, 45, 0.18) 0%,
      rgba(69, 105, 122, 0.10) 55%,
      rgba(168, 184, 194, 0.10) 100%),
    repeating-linear-gradient(
      135deg,
      transparent 0 6px,
      rgba(23, 20, 16, 0.04) 6px 7px);
}
.brand-read-block__image .img-cap {
  position: relative;
  z-index: 2;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 6px 10px;
  margin: var(--sp-3);
  border: 1px solid var(--ink-mute);
}
.brand-read-block__body { display: grid; gap: var(--sp-3); }
.brand-read-block__title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.brand-read-block__body p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-prose);
  color: var(--ink);
  max-width: none;       /* let the column govern width */
}

/* ──────────────────────────────────────────────────────────
 *  SLIDE 06 — How Snow Peak is read
 *  Two halves on one canvas: catalog (top) + register (bottom).
 * ────────────────────────────────────────────────────────── */
.slide-work-read .slide__inner {
  max-width: 1440px;
  gap: var(--sp-4);
  align-content: start;
  padding-top: var(--sp-2);
}
.slide-work-read__head { display: grid; gap: var(--sp-2); max-width: 58ch; }
.slide-work-read .hero-title { font-size: clamp(28px, 2.6vw, 38px); }

.work-read-half { display: grid; gap: var(--sp-5); }

.work-read-subhead {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  margin: 0;
}
.work-read-subcap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0;
}

/* 6-tile catalog grid */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-5);
}
.catalog-tile { display: grid; gap: var(--sp-2); }
.catalog-tile__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper-3);
  border: 1px solid var(--paper-2);
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.catalog-tile__image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(54, 70, 45, 0.18) 0%,
      rgba(69, 105, 122, 0.10) 55%,
      rgba(168, 184, 194, 0.10) 100%),
    repeating-linear-gradient(135deg,
      transparent 0 6px,
      rgba(23, 20, 16, 0.04) 6px 7px);
}
.catalog-tile__image .img-cap {
  position: relative; z-index: 2;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 5px 8px;
  margin: var(--sp-3);
  border: 1px solid var(--ink-mute);
}
.catalog-tile__title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.catalog-tile__note {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  margin: 0;
}

.slide-work-read .catalog-tile__image {
  aspect-ratio: 16 / 6.8;
}

/* 3-column register */
.register-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
}
.register-col { display: grid; gap: var(--sp-3); align-content: start; }
.register-col__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.register-col__body {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--ink);
  max-width: none;
  margin: 0;
}
.register-col__body em {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────
 *  SLIDE 07 — Audience receptivity
 *  Five-number band + two-column listings.
 * ────────────────────────────────────────────────────────── */
.slide-receptivity .slide__inner {
  max-width: 1440px;
  gap: var(--sp-7);
  align-content: start;
  padding-top: var(--sp-7);
}
.slide-receptivity__head { display: grid; gap: var(--sp-3); max-width: 64ch; }

/* 5-number horizontal band */
.number-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-mute);
  border-block: 1px solid var(--ink-mute);
}
.number-band__cell {
  background: var(--paper);
  padding: var(--sp-5) var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: center;
}
.number-band__figure {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.number-band__cell--accent .number-band__figure { color: var(--ember); }
.number-band__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

/* two-column receptivity body */
.receptivity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-9);
}
.receptivity-subhead {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4) 0;
}
.receptivity-subcap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: var(--sp-4) 0 0 0;
}

.top-four,
.recent-aspirational { display: grid; align-content: start; }

.top-four__list,
.recent-aspirational__list {
  display: grid;
  gap: 1px;
  background: var(--ink-mute);
  border-block: 1px solid var(--ink-mute);
}

.top-four__row {
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--sp-4);
  row-gap: 4px;
  padding: var(--sp-4);
  align-items: baseline;
}
.top-four__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  color: var(--ink);
  grid-column: 1 / 2;
}
.top-four__views {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-md);
  color: var(--ink);
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  text-align: right;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 6ch;
}
.top-four__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono-tight);
  text-transform: uppercase;
  color: var(--ink-soft);
  grid-column: 1 / -1;
}
.top-four__meta em {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.recent-row {
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  align-items: baseline;
}
.recent-row__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--ink);
}
.recent-row__views {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 5ch;
}
.recent-row__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ──────────────────────────────────────────────────────────
 *  SLIDE 08 — The gap
 *  Type-led hinge slide. Generous white space.
 * ────────────────────────────────────────────────────────── */
.slide-gap .slide__inner {
  max-width: 1180px;
  text-align: left;
  gap: var(--sp-7);
  align-content: center;
  padding-block: var(--sp-7);
}
.slide-gap__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 740px;
}
.slide-gap__headline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.slide-gap__body {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: var(--lh-prose);
  color: var(--ink);
  max-width: 54ch;
  margin: 0;
}
.slide-gap__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: balance;
}

/* ──────────────────────────────────────────────────────────
 *  Reveal stagger — extension for new act 1 slides
 * ────────────────────────────────────────────────────────── */
.slide.is-entered .catalog-grid > .catalog-tile,
.slide.is-entered .register-grid > .register-col,
.slide.is-entered .number-band > .number-band__cell,
.slide.is-entered .top-four__list > .top-four__row,
.slide.is-entered .recent-aspirational__list > .recent-row {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.catalog-grid > .catalog-tile,
.register-grid > .register-col,
.number-band > .number-band__cell,
.top-four__list > .top-four__row,
.recent-aspirational__list > .recent-row {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out),
    filter 720ms var(--ease-out);
}

/* slide 06 — catalog tiles slot in 1..6 */
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(1) { transition-delay: 320ms; }
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(2) { transition-delay: 400ms; }
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(3) { transition-delay: 480ms; }
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(4) { transition-delay: 560ms; }
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(5) { transition-delay: 640ms; }
.slide.is-entered .catalog-grid > .catalog-tile:nth-child(6) { transition-delay: 720ms; }

/* slide 06 — register columns assemble after catalog */
.slide.is-entered .register-grid > .register-col:nth-child(1) { transition-delay: 880ms; }
.slide.is-entered .register-grid > .register-col:nth-child(2) { transition-delay: 980ms; }
.slide.is-entered .register-grid > .register-col:nth-child(3) { transition-delay: 1080ms; }

/* slide 07 — number band cells slot in 1..5 */
.slide.is-entered .number-band > .number-band__cell:nth-child(1) { transition-delay: 280ms; }
.slide.is-entered .number-band > .number-band__cell:nth-child(2) { transition-delay: 360ms; }
.slide.is-entered .number-band > .number-band__cell:nth-child(3) { transition-delay: 440ms; }
.slide.is-entered .number-band > .number-band__cell:nth-child(4) { transition-delay: 520ms; }
.slide.is-entered .number-band > .number-band__cell:nth-child(5) { transition-delay: 600ms; }

/* slide 07 — top-4 rows */
.slide.is-entered .top-four__list > .top-four__row:nth-child(1) { transition-delay: 700ms; }
.slide.is-entered .top-four__list > .top-four__row:nth-child(2) { transition-delay: 780ms; }
.slide.is-entered .top-four__list > .top-four__row:nth-child(3) { transition-delay: 860ms; }
.slide.is-entered .top-four__list > .top-four__row:nth-child(4) { transition-delay: 940ms; }

/* slide 07 — recent rows */
.slide.is-entered .recent-aspirational__list > .recent-row:nth-child(1) { transition-delay: 760ms; }
.slide.is-entered .recent-aspirational__list > .recent-row:nth-child(2) { transition-delay: 820ms; }
.slide.is-entered .recent-aspirational__list > .recent-row:nth-child(3) { transition-delay: 880ms; }
.slide.is-entered .recent-aspirational__list > .recent-row:nth-child(4) { transition-delay: 940ms; }
.slide.is-entered .recent-aspirational__list > .recent-row:nth-child(5) { transition-delay: 1000ms; }

/* extend reduced-motion bypass to the new selectors */
@media (prefers-reduced-motion: reduce) {
  .catalog-grid > .catalog-tile,
  .register-grid > .register-col,
  .number-band > .number-band__cell,
  .top-four__list > .top-four__row,
  .recent-aspirational__list > .recent-row {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── real photography ─────────────────────────────────────────────────
 * Replaces the placeholder gradient patterns with actual images.
 * Added when photo assets are present. Works alongside the dashed-border
 * placeholder so slides without photos degrade gracefully.
 */

/* Full-bleed background photo on dark slides (cover, chapter headers) */
.slide__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;           /* behind ::before gradient (z-index: -1) */
  opacity: 0.55;         /* photo shows through; atmosphere gradient does the darkening */
}

/* Brand-read tile images */
.brand-read-block__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}
.brand-read-block__image:has(img)::before { display: none; }
.brand-read-block__image:has(img) .img-cap { z-index: 2; }

/* Catalog tile images (how-work-is-read grid) */
.catalog-tile__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}
.catalog-tile__image:has(img)::before { display: none; }
.catalog-tile__image:has(img) .img-cap { z-index: 2; }

/* Concept hero placeholder images (offering slides) */
.slide-concept__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}
.slide-concept__hero:has(img)::before { display: none; } /* hide "hero image" label */
.slide-concept__hero:has(img) .slide-concept__hero-cap {
  position: relative;
  z-index: 2;
  background: rgba(26, 24, 22, 0.52);
  border-radius: 2px;
  padding: 6px 12px;
}

/* ── narrow viewport ──────────────────────────────────── */
@media (max-width: 880px) {
  .slide-stated .slide__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .doctrine-list {
    border-left: 0;
    border-top: 1px solid var(--ink-mute);
    padding: var(--sp-5) 0 0 0;
  }
  .brand-read-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .brand-read-block__image { aspect-ratio: 16 / 9; max-width: 100%; }

  .catalog-grid { grid-template-columns: 1fr 1fr; }
  .register-grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  .number-band {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .receptivity-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .slide-cover__footer { grid-template-columns: 1fr; gap: var(--sp-3); }
}