/* Chapters that continue the scroll story after the paper rip. Each .ch is tall; its .pin sticks while a scrubbed timeline plays. */
:root { --orange: #f2581b; --blue: #2f5fb3; --black: #111; --heavy: Archivo, "Arial Black", sans-serif; --display: Anton, "Arial Narrow", sans-serif; }
html { scroll-behavior: smooth; }
/* Chapters are full-screen layers inside the story's locked (sticky) stage; scroll wipes them in one after another. */
.ch { position: absolute; inset: 0; z-index: 5; background: #fbf8f2; clip-path: inset(100% 0 0 0); will-change: clip-path, transform; backface-visibility: hidden; }
.pin { position: absolute; inset: 0; overflow: hidden; }
.ch-num { position: absolute; left: 32px; top: 28px; font: 400 34px/1 "Instrument Serif", Georgia, serif; }
.ch-num::after { content: ""; display: block; width: 28px; height: 1px; background: var(--black); margin-top: 10px; }
.eyebrow { font: 600 12px/1 "Instrument Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #6f675c; }
.eyebrow::before { content: "\2733\FE0E  "; color: var(--orange); }
.btn { display: inline-flex; align-items: center; font: 600 16px/1 "Instrument Sans", sans-serif; text-decoration: none; padding: 16px 24px; border-radius: 999px;
  background: var(--black); color: #fbf8f2; border: 1px solid var(--black); transition: background .2s, transform .2s; }
.btn:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--black); }
.btn.ghost:hover { color: #fff; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { font-size: 14px; color: #6f675c; }

/* 05 — what */
.ch-what .waves { position: absolute; right: -4vw; top: -6vh; height: 112vh; opacity: .8; clip-path: inset(0 0 100% 0); }
.ch-what .blob2 { position: absolute; width: min(46vw, 640px); right: -10vw; bottom: -14vh; opacity: 0; }
.ch-what .big { position: absolute; left: 6vw; right: 6vw; top: 50%; transform: translateY(-58%); font: 900 clamp(48px, 10.5vw, 168px)/.92 var(--heavy); letter-spacing: -.045em; }
.ch-what .w { display: inline-block; opacity: 0; transform: translateY(.5em) scale(.9); filter: blur(8px); }
.ch-what .w.accent { font: italic 400 1.08em/1 "Instrument Serif", serif; letter-spacing: -.02em; color: var(--orange); }
.ch-what .kicker { position: absolute; left: 6vw; bottom: 9vh; max-width: 40ch; font: 500 clamp(17px, 1.6vw, 22px)/1.45 "Instrument Sans", sans-serif; opacity: 0; transform: translateY(16px); }

/* 06 — how */
.ch-how { background: #f1ebe0; }
.ch-how .eyebrow { position: absolute; left: 6vw; top: 22vh; }
.ch-how .mark { position: absolute; right: 6vw; top: 12vh; width: clamp(70px, 9vw, 140px); }
.ch-how .swap { position: absolute; left: 6vw; right: 6vw; top: 30vh; }
.ch-how .step { position: absolute; left: 0; top: 0; opacity: 0; }
.ch-how .giant { font: 900 clamp(72px, 16.5vw, 300px)/.84 var(--heavy); letter-spacing: -.06em; }
.ch-how .step p { margin-top: 3vh; max-width: 30ch; font: 500 clamp(18px, 1.9vw, 26px)/1.35 "Instrument Sans", sans-serif; }
.ch-how .swash { position: absolute; left: 5vw; top: calc(30vh + clamp(72px, 16.5vw, 300px) * .86); width: min(60vw, 780px); clip-path: inset(0 100% 0 0); }
.ch-how .dots { position: absolute; left: 6vw; bottom: 7vh; display: flex; gap: 10px; list-style: none; padding: 0; }
.ch-how .dots li { width: 34px; height: 4px; border-radius: 2px; background: rgba(17,17,17,.15); }
.ch-how .dots li.on { background: var(--black); }

/* 07 — extension */
.ch-ext .bison-walk { position: absolute; right: 4vw; top: 50%; width: min(44vw, 620px); transform: translate(70vw, -50%) rotate(8deg); }
.ch-ext .burst.small { position: absolute; right: calc(4vw + min(44vw, 620px) * .78); top: 22vh; width: min(14vw, 180px); opacity: 0; transform: scale(.4) rotate(-20deg); }
.ch-ext .ext-copy { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); max-width: min(46vw, 620px); }
.ch-ext .big { margin: 18px 0 22px; font: 900 clamp(46px, 7.4vw, 118px)/.92 var(--heavy); letter-spacing: -.045em; }
.ch-ext .big .line { display: block; opacity: 0; transform: translateY(.4em); }
.ch-ext .big em { font: italic 400 1.08em/1 "Instrument Serif", serif; letter-spacing: -.02em; color: var(--blue); }
.ch-ext p { font: 500 clamp(17px, 1.5vw, 21px)/1.45 "Instrument Sans", sans-serif; max-width: 38ch; margin-bottom: 26px; opacity: 0; }
.ch-ext .ctas { opacity: 0; }

/* 08 — herd */
.ch-herd .blob2.b { position: absolute; width: min(70vw, 900px); left: -18vw; bottom: -30vh; opacity: .95; }
.ch-herd .count { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); }
.ch-herd .huge { font: 900 clamp(64px, 13vw, 210px)/.86 var(--heavy); letter-spacing: -.055em; }
.ch-herd .huge .n, .ch-herd .huge .u { display: block; }
.ch-herd .huge .u { font-size: .62em; }
.ch-herd .huge { transform: scale(.4); opacity: 0; transform-origin: 0 50%; }
.ch-herd .swash.s2 { width: min(48vw, 620px); margin-top: -3vh; clip-path: inset(0 100% 0 0); }
.ch-herd .bison-roar { position: absolute; right: -2vw; bottom: -4vh; height: 92vh; transform: translateX(60vw); }
.ch-herd .burst.big { position: absolute; z-index: 2; left: calc(6vw + min(50vw, 640px)); top: 4vh; width: min(16vw, 220px); opacity: 0; transform: scale(.3) rotate(-30deg); }
.ch-herd .welcome { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); opacity: 0; }
.ch-herd .welcome h2 { font: 400 clamp(72px, 13vw, 210px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  background: #ece5d8; padding: .14em .2em .1em; display: inline-block; transform: rotate(-3deg); box-shadow: 0 18px 40px rgba(60,45,30,.18); }
.ch-herd .welcome .ctas { margin-top: 5vh; }

.foot-end-unused { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 36px 6vw; border-top: 1px solid rgba(17,17,17,.12); font: 15px "Instrument Sans", sans-serif; color: #4a443c; }
.foot-end img { width: 26px; }
.foot-end a { margin-left: auto; color: inherit; }

/* "Join other ___" — the word swaps on a timer */
.ch-herd .join { margin-top: 3vh; font: 600 clamp(24px, 3.2vw, 44px)/1.15 "Instrument Sans", sans-serif; letter-spacing: -.02em; }
.ch-herd .rot { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; height: 1.2em; padding-right: .1em; }
.ch-herd .rot-w { display: inline-block; font: italic 400 1.15em/1.05 "Instrument Serif", serif; color: var(--orange); }
.ch-herd .rot-w.out { animation: rot-out .32s ease-in forwards; }
.ch-herd .rot-w.in { animation: rot-in .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes rot-out { to { transform: translateY(-110%); opacity: 0; } }
@keyframes rot-in { from { transform: translateY(110%); opacity: 0; } }

/* sign-off sits on the last scene, so the art runs to the bottom edge */
.signoff { position: absolute; z-index: 4; left: 6vw; right: 6vw; bottom: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 13px/1.3 "Instrument Sans", sans-serif; color: #2a2620; pointer-events: auto; }
.signoff > * { background: rgba(251,248,242,.88); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.signoff img { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; }
.signoff a { margin-left: auto; color: inherit; }

/* phones */
@media (max-width: 760px) {
  .ch-num { left: 16px; top: 18px; font-size: 28px; }
  .ch-what .big { left: 16px; right: 16px; font-size: 15vw; }
  .ch-what .kicker { left: 16px; right: 16px; }
  /* 06: word, then swash directly under it, then the sentence; whole block sits mid-screen */
  .ch-how .eyebrow { left: 16px; top: 24vh; }
  .ch-how .mark { top: 10vh; right: 16px; width: 64px; }
  .ch-how .swap { left: 16px; right: 16px; top: 31vh; }
  .ch-how .giant { font-size: 19.5vw; }
  .ch-how .step p { margin-top: 10px; font-size: 20px; }
  .ch-how .swash { display: none; }
  .ch-how .giant::after { content: ""; display: block; width: 82vw; height: 22vw; margin: 4px 0 -6px -2vw; background: url(art/swash.webp) left center / 100% auto no-repeat; }
  .ch-how .dots { left: 16px; bottom: 9vh; }
  /* 07: print on top, copy below, no overlap */
  /* bison sits directly above the copy block (≈350px tall, 5vh from the bottom), as large as the space allows (image aspect ≈1.05) */
  /* --cb is measured from the bottom of the full-height (lvh) frame, so the free space above it is 100lvh - --cb.
     110px keeps the tape clear of the chapter number. */
  .ch-ext { --cb: calc(var(--tb) + 4svh + 372px); --bw: min(86vw, calc((100vh - var(--cb) - 110px) / 1.05)); }
  @supports (height: 100lvh) { .ch-ext { --bw: min(86vw, calc((100lvh - var(--cb) - 110px) / 1.05)); } }   /* svh: iOS toolbar-aware; 96px keeps the tape clear of the chapter number */
  .ch-ext .bison-walk { width: var(--bw); right: 3vw; top: auto; bottom: var(--cb); transform: translate(70vw, 0) rotate(8deg); }   /* no -50% y on phones: it's bottom-anchored */
  .ch-ext .burst.small { right: auto; width: 19vw; left: calc(97vw - var(--bw) * .82 - 19vw); top: auto; bottom: calc(var(--cb) + var(--bw) * .5); }   /* just left of the snout */
  .ch-ext .ext-copy { left: 16px; right: 16px; max-width: none; top: auto; bottom: calc(var(--tb) + 4svh); transform: none; }
  .ch-ext .eyebrow { font-size: 11px; letter-spacing: .18em; }
  .ch-ext .big { margin: 12px 0 14px; font-size: 13vw; }
  .ch-ext p { font-size: 17px; margin-bottom: 18px; }
  .ch-ext .note { display: block; margin-top: 4px; }
  /* 08: card + buttons up top, bison smaller and behind the buttons */
  .ch-herd .count, .ch-herd .welcome { left: 16px; right: 16px; top: 13vh; transform: none; }
  .ch-herd .welcome { z-index: 3; }
  .ch-herd .welcome h2 { font-size: 20vw; }
  .ch-herd .join { font-size: 7vw; }
  .ch-herd .welcome .ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4vh; max-width: 82vw; }
  .ch-herd .welcome .btn { justify-content: center; }
  .ch-herd .btn.ghost { background: #fbf8f2; }
  /* bison gets its own space bottom-right, under the buttons and above the sign-off */
  /* Laid out at the big (roar) size so it stays sharp; JS scales it DOWN to --roar-small for the corner. */
  .ch-herd { --roar-small: max(110px, min(34svh, 66vw, calc(100svh - 540px))); }
  .ch-herd .bison-roar { height: min(58svh, 118vw); right: 0; bottom: calc(var(--tb) + 60px); z-index: 1; transform-origin: 100% 100%; }
  .ch-herd .burst.big { left: auto; right: 4vw; top: 8vh; width: 24vw; }
  .ch-herd .blob2.b { width: 120vw; left: -40vw; bottom: -18vh; }
  .signoff { left: 12px; right: 12px; bottom: calc(var(--tb) + 14px); font-size: 12px; gap: 6px; }
  .signoff img { display: none; }
  .signoff a { margin-left: 0; }
}

/* reduced motion (.still, set by chapters.js): every chapter laid out statically, nothing hidden */
.still .story { height: auto !important; } .still .stage { position: relative; height: auto; overflow: visible; } .still canvas.scene { height: 100vh; }
.still .ch { position: relative; clip-path: none; }
.still .pin { position: relative; height: auto; min-height: 100svh; padding: 14vh 0 10vh; }
.still .ch-what .w, .still .ch-what .kicker, .still .ch-ext .big .line, .still .ch-ext p, .still .ch-ext .ctas,
.still .ch-herd .huge, .still .ch-what .blob2, .still .burst { opacity: 1 !important; transform: none !important; filter: none !important; }
.still .ch-what .waves, .still .swash { clip-path: none !important; }
.still .ch-what .big, .still .ch-what .kicker { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin: 0 6vw 4vh; }
.still .ch-how .eyebrow, .still .ch-how .swap { position: relative; left: auto; top: auto; display: block; margin: 0 6vw 4vh; }
.still .ch-how .step { position: relative; opacity: 1; margin-bottom: 8vh; }
.still .ch-how .swash, .still .ch-how .dots { display: none; }
.still .ch-ext .bison-walk { transform: translateY(-50%) rotate(-4deg); }
.still .ch-herd .bison-roar { transform: none; }
.still .ch-herd .count { position: relative; top: auto; transform: none; margin: 0 6vw 6vh; left: auto; }
.still .ch-herd .welcome { position: relative; top: auto; transform: none; opacity: 1; margin: 0 6vw; left: auto; }
.still .ch-herd .burst.big { display: none; }