.chapter { position: relative; min-height: 100svh; padding: 7rem var(--gutter) 4rem; display: grid; align-content: center; gap: 0; }
.chapter .label { position: absolute; top: 5.5rem; left: var(--gutter); opacity: 0.8; }
[data-chapter="ignition"] { --rocket: min(52vw, 760px); grid-template-columns: 1fr; align-content: end; }
.rocket-box { position: relative; width: var(--rocket); aspect-ratio: 1; justify-self: end; }
.lede { margin: 1.25rem 0 0; max-width: 42ch; }
.rocket-box .poster { width: 100%; height: 100%; display: block; }
/* the rocket's nozzle is 25% up its box: row 2 is exactly that tall, the box spans both rows, so the headline (row 1) ends on the rule */
@media (min-width: 701px) { [data-chapter="ignition"] { grid-template-columns: 1.1fr 1fr; grid-template-rows: auto calc(var(--rocket) * 0.25); align-items: end; } [data-chapter="ignition"] .copy { grid-area: 1 / 1; } [data-chapter="ignition"] .rocket-box { grid-area: 1 / 2 / 3 / 3; } [data-chapter="ignition"] .lede { grid-area: 2 / 1; align-self: start; } }
@media (max-width: 700px) { [data-chapter="ignition"] { --rocket: 88vw; } .rocket-box { justify-self: center; order: -1; } }
[data-chapter="with-jeral"] { background: var(--cream); color: var(--ink); }
.jeral-static { margin: 2rem 0 0; } .jeral-static img { width: min(100%, 900px); height: auto; border-radius: 12px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .4); }
.flip-es { display: none; }
[data-chapter="gotbadnews"] { background: var(--ember-night); }
[data-chapter="gotgoodnews"] { background: var(--gold-paper); color: var(--ink); }
[data-chapter="voice-lab"] { background: var(--plum); }
/* the ending: editorial — the biggest type on the page, the brand signature (rocket + wordmark) standing on a hairline rule,
   the contact row under the rule */
[data-chapter="launch-pad"] { grid-template-columns: 1fr; }
[data-chapter="launch-pad"] .copy { max-width: none; }
[data-chapter="launch-pad"] h2 { font-size: clamp(2.4rem, min(8.5vw, 15svh), 9.5rem); max-width: 14ch; }
.sig { --sig: clamp(72px, 9vw, 128px); display: flex; align-items: flex-end; gap: 0.3em; margin-top: 2.5rem; font: 700 calc(var(--sig) * 0.5)/1 var(--font-display); letter-spacing: -0.02em; }
.land-box { position: relative; width: var(--sig); height: var(--sig); margin-bottom: calc(var(--sig) * -0.25); flex: none; }   /* the nozzle (25% up the box) sits on the rule */
.land-box .poster { position: absolute; left: 50%; bottom: 4.6%; height: 86.4%; width: auto; translate: -50% 0; }   /* the mark's body fills 66% of the box, its nozzle at 25%: same framing as the 3D rocket */
.sig .wordmark { padding-bottom: 0.08em; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--starlight) 35%, transparent); }
.contact p { margin: 0; }
[data-chapter="launch-pad"] .mail a { color: inherit; }
@media (max-width: 700px) { .sig { --sig: 64px; margin-top: 1.5rem; } .contact { padding-top: 1rem; gap: 0.6rem 1.25rem; } }
.chapter .badge.label { position: static; }   /* a badge, not the chapter's corner label */
.badge { display: inline-block; margin-top: 1rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid currentColor; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; margin-top: 3rem; list-style: none; padding: 0; }
.facts strong { display: block; font: 750 clamp(2.5rem, 6vw, 5rem)/1 var(--font-display); }
footer { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem var(--gutter); border-top: 1px solid color-mix(in oklab, var(--starlight) 15%, transparent); }
.seq-stage { display: none; }

/* ---------- call chapters (static flow: no-JS, reduced motion, fail-open) ---------- */
[data-chapter="gotbadnews"], [data-chapter="gotgoodnews"] { grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 701px) { [data-chapter="gotbadnews"], [data-chapter="gotgoodnews"] { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 34ch; }
.transcript li { padding: 0.7rem 1rem; border-radius: 16px 16px 16px 4px; background: color-mix(in oklab, currentColor 10%, transparent); line-height: 1.4; }
.transcript li.big { font: 750 1.4rem/1.1 var(--font-display); letter-spacing: -0.01em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.actions .grant { display: block; padding: 6px 0; }   /* 44px tap target */
.play { text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.1rem 0 0.9rem; border-radius: 999px; border: 1px solid color-mix(in oklab, currentColor 40%, transparent); background: color-mix(in oklab, currentColor 8%, transparent); color: inherit; font: 500 1rem/1 var(--font-body); cursor: pointer; }
.play svg { fill: currentColor; flex: none; width: 18px; height: 18px; }
.play .i-pause, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: inline; }
.play:focus-visible { outline: 2px solid var(--plasma); outline-offset: 3px; }