/* ═══════════════════════════════════════════════════════════════════════════
   Deen Dunya Dilemma — scroll-driven book landing page

   Scroll scenes: a `[data-scene]` section is taller than the viewport and
   holds one sticky panel. site.js writes the section's scroll progress to
   `--p` (0→1) and marks the active `[data-step]` child. Everything visual is
   derived from those two things, so with JavaScript off (or reduced motion on)
   the scenes flatten into ordinary stacked sections and stay readable.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:          #14120E;
  --ink-deep:     #0D0C09;
  --ink-raise:    #1C1811;
  --cream:        #FBF4E8;
  --gold:         #E0A040;
  --gold-bright:  #F0BC63;
  --bronze:       #B87418;
  --bronze-dark:  #8A5510;

  --on-dark:      rgba(251, 244, 232, 0.72);
  --on-dark-soft: rgba(251, 244, 232, 0.52);
  --on-dark-mute: rgba(251, 244, 232, 0.26);
  --rule-dark:    rgba(224, 160, 64, 0.22);
  --rule-light:   rgba(20, 18, 14, 0.12);

  --sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --shell:  1240px;
  --gutter: 32px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Scene progress, overwritten per-section by site.js. */
  --p: 0;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, blockquote, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; transition: color 200ms ease; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 12px 20px; font-family: var(--sans); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Shared type ─────────────────────────────────────────────────────────── */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.tag--gold { color: var(--gold); }

.section-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-top: 20px;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn--ghost { color: rgba(251, 244, 232, 0.82); border-color: rgba(224, 160, 64, 0.42); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.band { padding: clamp(80px, 10vw, 140px) 0; }
.band--dark { background: var(--ink); }

/* ── Chrome ──────────────────────────────────────────────────────────────── */

.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter) 34px;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

/* A scrim rather than a blend mode: the chrome floats over both cream and ink
   sections, and without something behind it the wordmark collides illegibly
   with whatever text is scrolling underneath. site.js flips `is-light` from
   the section currently under the bar. */
.chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(20, 18, 14, 0.92) 0%, rgba(20, 18, 14, 0.62) 52%, rgba(20, 18, 14, 0) 100%);
  transition: background 320ms ease;
}
.chrome.is-light::before {
  background: linear-gradient(180deg,
    rgba(251, 244, 232, 0.94) 0%, rgba(251, 244, 232, 0.66) 52%, rgba(251, 244, 232, 0) 100%);
}
.chrome__mark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 320ms ease;
}
.chrome__menu {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(251, 244, 232, 0.5);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background-color 200ms ease, color 320ms ease, border-color 320ms ease;
}
.chrome__menu:hover { background: rgba(251, 244, 232, 0.14); }
.chrome.is-light .chrome__mark { color: var(--ink); }
.chrome.is-light .chrome__menu { color: var(--ink); border-color: rgba(20, 18, 14, 0.35); }
.chrome.is-light .chrome__menu:hover { background: rgba(20, 18, 14, 0.08); }

/* The menu sits above the blend-mode chrome, so its own label is painted here. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 120px var(--gutter) 48px;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so the
   closed overlay would otherwise sit invisible over the page and eat every
   click. Restore the hiding explicitly. */
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__nav { display: flex; flex-direction: column; gap: 6px; max-width: var(--shell); margin-inline: auto; width: 100%; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 68px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--on-dark);
  transition: color 240ms ease;
}
.menu__nav a:hover { color: var(--gold); }
.menu__nav .tag { flex: 0 0 auto; }
.menu__foot {
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--rule-dark);
}
.menu__foot a { font-family: var(--mono); font-size: 12px; color: var(--gold); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 120px 0 96px;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 72% 42%,
    rgba(224, 160, 64, 0.30) 0%, rgba(224, 160, 64, 0.07) 42%, rgba(20, 18, 14, 0) 70%);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.hero__kicker { margin-bottom: 26px; }
.hero__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(48px, 7.4vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hero__title span { display: block; animation: rise 900ms var(--ease) both; }
.hero__title span:nth-child(2) { animation-delay: 90ms; }
.hero__title span:nth-child(3) { animation-delay: 180ms; }
.hero__byline {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(251, 244, 232, 0.78);
  margin-top: 26px;
}
.hero__lede {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.55;
  color: rgba(251, 244, 232, 0.74);
  max-width: 44ch;
  margin-top: 28px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__copy > *:not(.hero__title) { animation: rise 900ms var(--ease) both; }
.hero__copy > .hero__byline { animation-delay: 260ms; }
.hero__copy > .hero__lede   { animation-delay: 320ms; }
.hero__copy > .hero__actions{ animation-delay: 380ms; }

.hero__book { display: flex; justify-content: center; animation: rise 1100ms var(--ease) 200ms both; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--on-dark-soft);
}
.scroll-cue:hover { color: var(--gold); }
.scroll-cue__rail {
  display: block;
  width: 1px;
  height: 46px;
  background: var(--on-dark-mute);
  overflow: hidden;
}
.scroll-cue__rail span {
  display: block;
  width: 1px;
  height: 46px;
  background: var(--gold);
  transform: translateY(-100%);
  animation: cue 2.4s ease-in-out infinite;
}

/* ── The 3D book ─────────────────────────────────────────────────────────── */

.book { perspective: 2400px; perspective-origin: 50% 45%; width: 100%; max-width: 400px; }
.book--hero .book__body,
.book--turn .book__body { animation: float 7s ease-in-out infinite; }
.book__body { transform-style: preserve-3d; position: relative; }

.book__body::after {
  content: '';
  position: relative;
  display: block;
  padding-top: 150%;
}
.book__face, .book__spine, .book__pages { position: absolute; }

/* All three faces turn together: the rotation lives on .book__body, and each
   face only carries its own offset within that box. */
.book__body {
  transform: rotateY(var(--rot, 21deg)) rotateX(4deg) rotateZ(-1deg);
  transition: transform 900ms var(--ease);
}
.book__face {
  inset: 0;
  transform: translateZ(19px);
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.book--hero:hover .book__body { transform: rotateY(6deg) rotateX(1deg) rotateZ(0deg); }

.book__cover { width: 100%; height: 100%; object-fit: cover; }
.book__gloss {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.05) 14%,
    rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.16) 100%);
  pointer-events: none;
}
.book__sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  filter: blur(10px);
  animation: sheen 9s ease-in-out infinite 2s;
  pointer-events: none;
}
.book__spine {
  left: 0; top: 0; width: 38px; height: 100%;
  transform-origin: left center;
  transform: translateZ(-19px) rotateY(-90deg);
  backface-visibility: hidden;
  background: linear-gradient(180deg, #F3D08C 0%, var(--gold) 38%, #C9862A 100%);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.book__spine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.22) 100%);
}
.book__spine span {
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-weight: 800;
  /* The spine text runs the full height of the cover, so it has to shrink with
     the book — at a flat 13px it overran a 168px cover and cropped at both ends. */
  font-size: clamp(7px, 1.05vw, 13px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.book__pages {
  right: 0; top: 0; width: 38px; height: 100%;
  transform-origin: right center;
  transform: translateZ(-19px) rotateY(90deg);
  backface-visibility: hidden;
  background: repeating-linear-gradient(90deg, #F3E7D2 0px, #F3E7D2 0.6px, #DCCBAE 0.6px, #DCCBAE 1.6px);
  box-shadow: inset 12px 0 22px -10px rgba(0,0,0,0.55), inset -8px 0 16px -8px rgba(0,0,0,0.4);
  border-radius: 1px;
}
.book__shadow { height: 0; position: relative; }
.book__shadow span {
  position: absolute; left: 6%; right: 0; top: 10px; height: 46px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
  filter: blur(16px);
  animation: book-shadow 7s ease-in-out infinite;
}

/* The scene-2 book turns with scroll progress instead of on hover. */
.book--turn { max-width: min(420px, 100%); }
.book--turn .book__body { transform: rotateY(21deg) rotateX(4deg) rotateZ(-1deg); }
.js-scenes .book--turn .book__body {
  transform: rotateY(calc(33deg - var(--p) * 22deg)) rotateX(4deg) rotateZ(-1deg);
  transition: none;
}

/* ── Scenes ──────────────────────────────────────────────────────────────── */

.scene { position: relative; }

/* Default (no JS, or reduced motion): an ordinary stacked section. The pinned
   behaviour is added only once site.js confirms it can drive it. */
.scene__sticky {
  display: flex;
  align-items: center;
  padding: clamp(72px, 9vw, 120px) 0;
}
.js-scenes .scene__sticky,
.js-scenes .wash__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* Clear the fixed chrome at the top and the progress rail at the bottom. */
  padding: 92px 0 76px;
}
/* Scene frames run the full height so the running head sits at the top of the
   page and the body centres under it. The wash has no running head, so it
   stays a plain centred block. */
.js-scenes .scene__sticky { align-items: stretch; }
.js-scenes .scene--question { height: 560svh; }
.js-scenes .scene--book     { height: 340svh; }
.js-scenes .scene--levels   { height: 620svh; }
.js-scenes .wash            { height: 260svh; }

/* Scroll-progress chrome means nothing when nothing is being driven. */
.scene__rail, .dots { display: none; }
.js-scenes .scene__rail { display: block; }
.js-scenes .dots { display: flex; }
.scene__pad {
  margin-block: auto;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* A page rather than a padded box: the running head rules across the full
   measure, and the columns hang off that rule. */
.scene__frame {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 52px);
}
.scene__frame .scene__split { flex: 1 1 auto; align-content: center; }
.running-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.running-head b { font-weight: 500; color: var(--gold); margin-right: 8px; }
.running-head__title { color: var(--on-dark-soft); }
.running-head__folio { font-variant-numeric: tabular-nums; }

.scene__split {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.scene__label { margin-bottom: clamp(28px, 4vw, 48px); }

.scene__rail {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: 40px;
  height: 1px;
  background: rgba(251, 244, 232, 0.14);
}
.scene__rail-fill {
  display: block; height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

/* Scene 1 — the question, one line lit at a time */
.scene--question .scene__sticky { background: var(--cream); color: var(--ink); }
.scene--question .tag { color: rgba(20, 18, 14, 0.45); }
.scene--question .scene__rail { background: rgba(20, 18, 14, 0.12); }

/* Sized against viewport height as well as width: all seven lines have to sit
   inside one sticky screen at any window shape. */
.lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1.5vh, 18px);
}
.scene--question .scene__pad { text-align: center; }
/* `ch` has to sit on .line, not .lines — on the parent it would resolve against
   the inherited 18px body size rather than the display size below. */
.line {
  max-width: 24ch;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(21px, min(3.6vw, 4.4vh), 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 500ms var(--ease), transform 700ms var(--ease), opacity 500ms ease;
  text-wrap: balance;
}
.line--turn { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.js-scenes .line { color: rgba(20, 18, 14, 0.16); opacity: 0.34; transform: translateY(14px); }
.js-scenes .line.is-active { opacity: 1; transform: none; color: var(--ink); }
.js-scenes .line.is-past { opacity: 0.5; transform: none; color: rgba(20, 18, 14, 0.3); }

/* The ayah — a held breath between scenes */
.ayah {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(90px, 14vw, 180px) var(--gutter);
  border-top: 1px solid var(--rule-light);
}
.ayah__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.ayah blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.42;
  text-wrap: pretty;
}
.js-scenes .ayah blockquote {
  opacity: calc(0.25 + var(--p) * 1.4);
  transform: translateY(calc((1 - var(--p)) * 24px));
}
.ayah cite { display: block; margin-top: 30px; font-style: normal; color: var(--bronze); }

/* Scene 2 — the book turning */
.scene--book .scene__sticky { background: var(--ink); }
.scene__media { display: flex; justify-content: center; }

.panels { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.js-scenes .panels { display: block; position: relative; min-height: clamp(300px, 38vh, 380px); }
.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: min(560px, 100%);
}
/* Was a second gold micro-label stacked above the headline; hung in the margin
   it reads as a side-note instead of a third label to scroll past. */
.panel__note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 16px;
  border-left: 1px solid rgba(224, 160, 64, 0.5);
}
.js-scenes .panel {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  pointer-events: none;
}
.js-scenes .panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.panel h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.panel p:last-child { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.66; color: var(--on-dark); text-wrap: pretty; }

.dots { gap: 8px; margin-top: 40px; }
.dots[hidden] { display: none; }
.dots span {
  width: 26px; height: 2px;
  background: rgba(251, 244, 232, 0.18);
  transition: background-color 400ms ease;
}
.dots span.is-active { background: var(--gold); }

/* Scene 3 — six levels */
.scene--levels .scene__sticky { background: var(--ink); }
.scene__split--levels {
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
/* The index is a contents column with a real rule between it and the page. */
.levels__index {
  padding-right: clamp(20px, 3vw, 44px);
  border-right: 1px solid rgba(251, 244, 232, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.levels__list { display: flex; flex-direction: column; }
.levels__list li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  border-bottom: 1px solid rgba(251, 244, 232, 0.08);
  transition: color 380ms ease;
}
.levels__list li b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--on-dark-mute);
  transition: color 380ms ease;
}
.js-scenes .levels__list li { color: var(--on-dark-mute); }
.levels__list li.is-active { color: var(--cream); }
.levels__list li.is-active b { color: var(--gold); }
/* A marker in the gutter rather than a nudge to the right — the rule stays
   straight and the eye still finds the current level. */
.levels__list li.is-active::after {
  content: '';
  position: absolute;
  right: calc(clamp(20px, 3vw, 44px) * -1 - 1px);
  top: 50%;
  width: 1px;
  height: 26px;
  margin-top: -13px;
  background: var(--gold);
}
.levels__note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  max-width: 24ch;
  text-wrap: pretty;
}

.levels__stage {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: clamp(28px, 5vw, 72px);
  overflow: hidden;
}
/* The chapter number as a folio bled off the corner — structure where the
   radial gradient used to be. */
.levels__folio {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(18%, 30%);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(180px, 34vh, 400px);
  line-height: 0.72;
  letter-spacing: -0.05em;
  color: rgba(251, 244, 232, 0.05);
  pointer-events: none;
  user-select: none;
}
.levels__panels { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 76px); }
.js-scenes .levels__panels { display: block; position: relative; width: 100%; min-height: clamp(280px, 40vh, 420px); }
.level { max-width: min(620px, 100%); }
.js-scenes .level {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js-scenes .level.is-active { opacity: 1; transform: none; }
.level h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.level p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--on-dark);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 244, 232, 0.14);
  max-width: 32ch;
  text-wrap: pretty;
}

/* ── Extras ──────────────────────────────────────────────────────────────── */

.extras-band { border-top: 1px solid var(--rule-dark); }
.extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.extras dt { margin-bottom: 12px; }
.extras dd { font-size: 17px; line-height: 1.62; color: var(--on-dark-soft); text-wrap: pretty; }

/* ── Thesis wash ─────────────────────────────────────────────────────────── */

.wash { position: relative; }
.wash__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}
/* Cream → gold → ink, pulled through by scroll progress. The 74% stop holds the
   text band inside the cream→gold range at every point of the scroll, so the
   type stays ink on a light field and needs nothing painted behind it; only the
   lower quarter falls to ink, which is what carries into the authors section. */
.js-scenes .wash__sticky {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--cream) calc((1 - var(--p)) * 100%), var(--gold)) 0%,
      color-mix(in oklab, var(--cream) calc((1 - var(--p)) * 100%), var(--gold)) 74%,
      color-mix(in oklab, var(--gold) calc((1 - var(--p)) * 100%), var(--ink)) 100%);
}
.wash__inner {
  margin-block: auto;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.wash__line {
  font-family: var(--serif);
  font-size: clamp(28px, 4.6vw, 60px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.js-scenes .wash__line { transform: translateY(calc((0.5 - var(--p)) * 60px)); }
.wash__sub {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.7;
  max-width: 60ch;
  margin: 34px auto 0;
  text-wrap: pretty;
}
.js-scenes .wash__sub { opacity: calc(var(--p) * 2.6); }

/* ── Authors ─────────────────────────────────────────────────────────────── */

.authors__head { text-align: center; margin-bottom: clamp(48px, 7vw, 84px); }
.authors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 64px);
}
.author { display: flex; flex-direction: column; gap: 24px; }
.author__portrait {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(224, 160, 64, 0.35);
  background: #0B0A08;
  object-fit: contain;
  object-position: center bottom;
}
.author__portrait--fill { object-fit: cover; object-position: center 18%; }
.author h3 {
  font-family: var(--sans);
  font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em;
}
.author__role { margin-top: 10px; }
.author p:not(.author__role) { font-size: 17px; line-height: 1.68; color: var(--on-dark); text-wrap: pretty; }
.author__link {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(224, 160, 64, 0.4);
  padding-bottom: 4px;
}
.author__link:hover { color: var(--gold-bright); }

/* ── Endorsement ─────────────────────────────────────────────────────────── */

.endorse {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(80px, 11vw, 150px) var(--gutter);
}
.endorse__inner {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}
.endorse img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule-light); }
.endorse blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 32px);
  line-height: 1.5;
  text-wrap: pretty;
}
.endorse__name {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze);
}
.endorse__title { margin-top: 8px; color: rgba(20, 18, 14, 0.45); }

/* ── Waitlist ────────────────────────────────────────────────────────────── */

.waitlist { position: relative; overflow: hidden; padding: clamp(84px, 11vw, 140px) 0; }
.waitlist__glow {
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 22% 8%, rgba(224, 160, 64, 0.20) 0%, rgba(20, 18, 14, 0) 60%);
}
.waitlist__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(44px, 6vw, 72px);
  align-items: center;
}
.waitlist__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-top: 20px;
}
.waitlist__lede {
  font-size: 19px; line-height: 1.68;
  color: var(--on-dark);
  max-width: 38ch; margin-top: 24px;
  text-wrap: pretty;
}
.promises {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 36px; padding-top: 30px;
  border-top: 1px solid var(--rule-dark);
  counter-reset: promise;
}
.promises li {
  display: flex; align-items: baseline; gap: 16px;
  font-size: 17px; line-height: 1.55;
  color: var(--on-dark);
  counter-increment: promise;
}
.promises li::before {
  content: '0' counter(promise);
  flex: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.form-card { position: relative; }
.form-card::before {
  content: '';
  position: absolute; inset: 14px 10px -10px 10px;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(34px);
  border-radius: 14px;
}
.form-card__frame {
  position: relative;
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.form-card iframe { display: block; width: 100%; height: 760px; border: none; background: #FFFFFF; }
.form-card__fallback {
  padding: 22px 24px 26px;
  font-family: var(--sans);
  font-size: 14px; line-height: 1.6;
  color: rgba(20, 18, 14, 0.7);
  background: #FFFFFF;
  border-top: 1px solid var(--rule-light);
}
.form-card__fallback a { color: var(--bronze); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer { background: var(--ink-deep); padding: 48px 0; }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.site-footer .chrome__mark { color: rgba(251, 244, 232, 0.7); font-size: 12px; }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.site-footer__meta a { font-family: var(--mono); font-size: 12px; color: var(--on-dark-soft); }
.site-footer__meta a:hover { color: var(--gold); }

/* ── Reveals ─────────────────────────────────────────────────────────────── */

.reveal.is-armed {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-armed.is-visible { opacity: 1; transform: none; }

/* ── Motion ──────────────────────────────────────────────────────────────── */

@keyframes rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes sheen  { 0%, 100% { opacity: 0; transform: translateX(-30%); } 45% { opacity: 0.5; } 90% { opacity: 0; transform: translateX(115%); } }
@keyframes cue    { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@keyframes book-shadow { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(0.9); opacity: 0.35; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .scene__split { grid-template-columns: 1fr; gap: 28px; }
  /* Contents column keeps its own rule but lies down above the page. */
  .scene__split--levels { grid-template-columns: 1fr; gap: 26px; }
  .levels__index {
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(251, 244, 232, 0.14);
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .levels__list { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  .levels__list li { border-bottom: 0; padding: 4px 0; font-size: 13px; }
  .levels__list li.is-active::after { right: auto; left: 0; top: auto; bottom: -2px; width: 100%; height: 1px; margin: 0; }
  .levels__stage { padding-left: 0; }
  .levels__folio { transform: translate(22%, 34%); font-size: clamp(150px, 26vh, 260px); }
}

@media (max-width: 900px) {
  .js-scenes .scene--book { height: 300svh; }
  .js-scenes .scene--levels { height: 560svh; }
  .levels__note { display: none; }
  .levels__list { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 26px; }
  .levels__list li { font-size: 13px; }

  /* The cover still leads scene 2 on a narrow screen — dropping it left the
     sticky panel two-thirds empty. */
  /* Stacked above the copy, so it needs a cover-sized figure, not a hero one. */
  .book--turn { max-width: 200px; }
  .scene__media { justify-content: center; }

  /* Reserve only what the tallest step actually needs, so the centred block
     does not float in a half-empty screen. */
  .js-scenes .panels { min-height: clamp(210px, 30vh, 280px); }
  .js-scenes .levels__panels { min-height: clamp(180px, 25vh, 240px); }
  .scene__label { margin-bottom: 20px; }
  .scene__frame { gap: clamp(20px, 3.5vh, 40px); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .js-scenes .scene--question { height: 460svh; }
  .lines { max-width: none; }
  .menu { justify-content: flex-start; padding-top: 108px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }

  /* The hero has to land inside one phone screen: at full desktop scale it ran
     to ~1290px against an 844px viewport, so the cover and both buttons fell
     below the fold and the copy scrolled up under the fixed header. */
  .hero { padding: 88px 0 40px; }
  /* Cover first on a phone: it is the strongest thing on the page and reads
     better above the title than stranded under the buttons. */
  .hero__book { order: -1; }
  .book--hero, .book--turn { max-width: 168px; }
  .hero__inner { gap: 20px; }
  .hero__kicker { margin-bottom: 16px; }
  .hero__title { font-size: clamp(38px, 11.5vw, 52px); }
  .hero__byline { font-size: 11px; margin-top: 16px; }
  .hero__lede { font-size: 16px; line-height: 1.5; margin-top: 16px; }
  .hero__actions { gap: 10px; margin-top: 22px; flex-wrap: nowrap; }
  .hero__actions .btn { padding: 13px 16px; font-size: 11px; letter-spacing: 0.08em; }
  .scroll-cue { display: none; }

  .levels__note { display: none; }
  .levels__index { align-items: center; }
  .running-head__folio { display: none; }
  .chrome { padding: 16px var(--gutter) 30px; }
  .chrome__mark { font-size: 11px; letter-spacing: 0.1em; }
  .chrome__menu { padding: 8px 14px; }
}

/* ── Reduced motion: scenes flatten into ordinary stacked sections ───────── */

@media (prefers-reduced-motion: reduce) {
  /* site.js withholds `js-scenes` here, so the flattened base layout above is
     already in force; all that is left is to stop things moving. */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal.is-armed { opacity: 1; transform: none; }
}