/* ============================================================
   /pre-order — five moments.
   Dark, minimal, dominated by typography, the object, and the
   people around it. Nothing on this page explains the book.
   ============================================================ */

/* ---------- 1. the reveal ---------- */
.rv{ position:relative; height:330vh; background:var(--stage); color:var(--on-stage) }
@media (max-width:47.99rem){ .rv{ height:260vh } }
.rv__stage{
  position:sticky; top:var(--masthead-h);
  height:calc(100dvh - var(--masthead-h));
  overflow:clip; contain:layout paint style;
  display:grid; place-items:center;
  perspective:1600px;
  --p:0;
}
/* ONE key light, upper-left-front. Every shadow on this page falls down-and-right; every highlight sits up-left.
   Phases, each finishing inside its beat band so reduced motion receives finished plates:
   dark 0–.04 · title .04–.45 · book .45–.78 · open .78–1 */
.rv [data-p]{
  --b:  clamp(0, (var(--p) - .05)  * 5,    1);   /* SURROGATE wipes in   (.05–.25) */
  --c:  clamp(0, (var(--p) - .22)  * 5,    1);   /* ENTREPRENEUR         (.22–.42) */
  --d:  clamp(0, (var(--p) - .46)  * 3.3,  1);   /* the book's beat master (.46–.76) */
  --de: calc(1 - (1 - var(--d)) * (1 - var(--d)));                          /* ease-out: the book decelerates into rest */
  --dl: clamp(0, (var(--p) - .46)  * 8.33, 1);   /* the lamp warms up    (.46–.58) */
  --dw: clamp(0, (var(--p) - .48)  * 4.55, 1);   /* the words make room  (.48–.70) */
  --dwe:calc(1 - (1 - var(--dw)) * (1 - var(--dw)) * (1 - var(--dw)));      /* cubic ease-out: a quick give, then settle */
  --dg: clamp(0, (var(--p) - .58)  * 5.05, 1);   /* they fall into the dark once the book has landed (.58–.78) */
  --e:  clamp(0, (var(--p) - .78)  * 6,    1);   /* the ask              (.78–.947) */
  --es: clamp(0, var(--e) * 1.6, 1);              /*   'Not out yet' first (done .884) */
  --ese:calc(1 - (1 - var(--es)) * (1 - var(--es)) * (1 - var(--es)));
  --ec: clamp(0, var(--e) * 1.25, 1);             /*   the button a beat later (done .913) */
  --ece:calc(1 - (1 - var(--ec)) * (1 - var(--ec)) * (1 - var(--ec)));
}
/* the title: two words, stacked, enormous. they part to make room for the book; letters arrive solid (the clip does the reveal) */
.rv__w{
  position:absolute; left:50%;
  font-family:var(--sans); font-weight:800; font-stretch:103%;
  font-size:clamp(3.2rem, 1rem + 11.6vw, 13rem);
  line-height:.84; letter-spacing:-.05em; white-space:nowrap;
  color:var(--on-stage); pointer-events:none;
  -webkit-user-select:none; user-select:none;
  will-change:transform, opacity;
}
/* recession as light falloff, not a dimmer: the letters nearest the pool stay lit, the far ends drop into the dark */
.rv__w--1{
  z-index:1; top:50%;
  translate:-50% calc(-100% - 1vh - 16vh * var(--dwe));
  opacity:calc(clamp(0, var(--b) * 6, 1) * (1 - .72 * var(--ese)));
  clip-path:inset(0 calc((1 - var(--b)) * 100%) 0 0);
  -webkit-mask-image:radial-gradient(ellipse 60% 400% at 50% 50%, #000 calc(42% - 30% * var(--dg)), rgba(0,0,0,calc(1 - .62 * var(--dg))) 100%);
          mask-image:radial-gradient(ellipse 60% 400% at 50% 50%, #000 calc(42% - 30% * var(--dg)), rgba(0,0,0,calc(1 - .62 * var(--dg))) 100%);
}
.rv__w--2{
  z-index:1; top:50%;
  translate:-50% calc(1vh + 16vh * var(--dwe));
  opacity:calc(clamp(0, var(--c) * 6, 1) * (1 - .72 * var(--ese)));
  clip-path:inset(0 calc((1 - var(--c)) * 100%) 0 0);
  -webkit-mask-image:radial-gradient(ellipse 60% 400% at 50% 50%, #000 calc(42% - 30% * var(--dg)), rgba(0,0,0,calc(1 - .48 * var(--dg))) 100%);
          mask-image:radial-gradient(ellipse 60% 400% at 50% 50%, #000 calc(42% - 30% * var(--dg)), rgba(0,0,0,calc(1 - .48 * var(--dg))) 100%);
}
/* the room: the lamp spills on the wall behind the book and pools on the floor under it */
.rv__room{
  position:absolute; left:50%; top:50%; z-index:2; pointer-events:none;
  width:calc(clamp(10rem, 26vw, 19rem) * 3); aspect-ratio:3/2.2;
  translate:-50% -38%;
  background:
    radial-gradient(ellipse 22% 7% at 52% 90%, rgba(244,241,234,.22), transparent 70%),
    radial-gradient(ellipse 34% 40% at 50% 46%, rgba(244,241,234,.10), transparent 70%);
  opacity:var(--dl);
  transform:translateY(calc((1 - var(--de)) * 4vh - 3vh * var(--ese))) scale(calc(.6 + .4 * var(--de)));
}
/* the book is found by the light: nothing of it exists until the pool reaches it (the mask is on the object, not on the world) */
.rv__book{
  position:relative; z-index:2;
  width:clamp(10rem, 26vw, 19rem);
  transform-style:preserve-3d;
  --block:9%;
  transform:
    translateY(calc((1 - var(--de)) * 4vh - 3vh * var(--ese)))
    rotateY(calc(-28deg + 28deg * var(--de)))
    scale(calc(.84 + .16 * var(--de)));
  opacity:clamp(0, var(--d) * 12, 1);          /* a 2.5% anti-pop ramp only; the light does the revealing */
  will-change:transform;
}
.rv__mask{
  margin:-32%; padding:32%;                    /* the masked box is wider than the cover so the cast shadow survives the mask */
  --r: calc(var(--dl) * var(--dl));            /* ease-in: a lamp warming up, not a curtain */
  -webkit-mask:radial-gradient(circle at 50% 44%, #000 calc(3% + 97% * var(--r)), transparent calc(9% + 97% * var(--r)));
          mask:radial-gradient(circle at 50% 44%, #000 calc(3% + 97% * var(--r)), transparent calc(9% + 97% * var(--r)));
  position:relative;
}
.rv__mask img{
  display:block; width:100%; height:auto; position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.5), 6px 26px 60px -22px rgba(0,0,0,.9);
}
/* the jacket as an object: a cut edge with a lit lip up-left, a hinge groove by the spine, the foot falling away from the lamp */
.rv__mask::after{
  /* the wrapper is padded 32% of the cover's width on every side; the cover is 800×1235, so the overlay sits at these insets */
  content:""; position:absolute; inset:14.65% 19.51%; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(0,0,0,.10) 1.2%, rgba(0,0,0,0) 2.4%, rgba(255,255,255,.10) 4.2%, rgba(0,0,0,.22) 5.4%, rgba(0,0,0,0) 8%),
    linear-gradient(180deg, rgba(13,12,11,0) 45%, rgba(13,12,11,.16) 100%);
  box-shadow:inset 0 0 0 1px rgba(13,12,11,.18), inset 1px 1px 0 rgba(255,255,255,.6);
}
/* the page block: a fore-edge face at the right, front-facing while the book is turned toward us, edge-on once it squares up */
.rv__book::after{
  content:""; position:absolute; top:.6%; bottom:.6%; left:100%; width:var(--block); pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    repeating-linear-gradient(180deg, #EFEAE0 0 1.5px, #D9D2C4 1.5px 3px);
  transform-origin:0 50%; transform:rotateY(90deg);
  backface-visibility:hidden;
  opacity:clamp(0, (var(--dl) - .55) * 3, 1);   /* it, too, waits for the light to reach the edge */
}
/* the ask lands: the status first, the button a beat later, each decelerating into place */
.rv__open{
  position:absolute; left:50%; bottom:clamp(2rem,6vh,4rem); translate:-50% 0; z-index:4;
  width:max-content; max-width:calc(100vw - 2rem);
  display:grid; justify-items:center; gap:var(--s-4); text-align:center;
}
.rv__status{ color:var(--accent-lift); letter-spacing:.3em; opacity:var(--ese); transform:translateY(calc((1 - var(--ese)) * 14px)) }
.rv__open > p:last-child{ opacity:var(--ece); transform:translateY(calc((1 - var(--ece)) * 22px)) }
.rv__stage[data-beat]:not([data-beat="open"]) .rv__open{ visibility:hidden }   /* nothing invisible is ever focusable (no data-beat = no JS = keep it) */
.rv__hint{
  position:absolute; left:50%; bottom:1.5rem; translate:-50% 0;
  color:var(--on-stage-dim); letter-spacing:.24em;
  opacity:calc(1 - clamp(0, (var(--p) - .04) * 8, 1));
}
@media (max-width:47.99rem){
  .rv__w{ font-size:min(clamp(2.4rem, 1rem + 13.5vw, 5.6rem), 15vw) }   /* 'Entrepreneur' is 6.06em wide: keep it inside the phone */
  /* phones have no room for the words beside the book: they part further and all but leave once the ask lands */
  .rv__w--1{ translate:-50% calc(-100% - 1vh - 22vh * var(--dwe)); opacity:calc(clamp(0, var(--b) * 6, 1) * (1 - var(--ese))) }
  .rv__w--2{ translate:-50% calc(1vh + 22vh * var(--dwe)); opacity:calc(clamp(0, var(--c) * 6, 1) * (1 - var(--ese))) }
  .rv__book{ width:min(56vw, 14rem); --block:8% }
  .rv__room{ width:calc(min(56vw, 14rem) * 3) }
  .rv__open .cta{ font-size:.9375rem; padding-inline:1.2rem }
}
/* short viewports (laptops at 768px tall included): the cover is sized from the stage, lifts and shrinks as the ask arrives, and the ghost title leaves */
@media (max-height:52rem){
  .rv__book{
    width:min(clamp(10rem, 26vw, 19rem), calc((100dvh - var(--masthead-h) - 13rem) * 800 / 1235));
    transform:
      translateY(calc((1 - var(--de)) * 4vh - 10vh * var(--ese)))
      rotateY(calc(-28deg + 28deg * var(--de)))
      scale(calc(.84 + .16 * var(--de) - .12 * var(--ese)));
  }
  .rv__room{ width:calc(min(clamp(10rem, 26vw, 19rem), calc((100dvh - var(--masthead-h) - 13rem) * 800 / 1235)) * 3) }
  .rv__w--1{ opacity:calc(clamp(0, var(--b) * 6, 1) * (1 - var(--ese))) }
  .rv__w--2{ opacity:calc(clamp(0, var(--c) * 6, 1) * (1 - var(--ese))) }
}

/* ---------- 2. the book of praise: closed, it opens; each spread is one reader ---------- */
/* The book's phase variables are REGISTERED, INHERITING numbers. Unregistered, their computed value is a
   fresh token stream every frame, so Blink restyled all 107 elements of the book on every frame (and the
   garbage from that showed up as GC pauses on phones). Typed, an unchanged value is unchanged, and the
   reading stretches restyle 17 elements instead of 107. (--d and --r are NOT registered: the homepage uses --d as a <time>.) */
@property --c    { syntax:"<number>"; inherits:true; initial-value:0 }
@property --cs   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --ce   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f0   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f1   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f2   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f3   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f    { syntax:"<number>"; inherits:true; initial-value:0 }
@property --fe   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --arc  { syntax:"<number>"; inherits:true; initial-value:0 }
@property --lift { syntax:"<number>"; inherits:true; initial-value:0 }
@property --edge { syntax:"<number>"; inherits:true; initial-value:0 }
@property --prev { syntax:"<number>"; inherits:true; initial-value:0 }
@property --next { syntax:"<number>"; inherits:true; initial-value:0 }
@property --pe   { syntax:"<number>"; inherits:true; initial-value:0 }
@property --ne   { syntax:"<number>"; inherits:true; initial-value:0 }
.bk{ position:relative; height:520vh; background:var(--paper-2); color:var(--ink) }
@media (max-width:47.99rem){ .bk{ height:450vh } }
.bk__stage{
  position:sticky; top:var(--masthead-h);
  height:calc(100dvh - var(--masthead-h));
  overflow:clip; contain:layout paint style;
  display:grid; grid-template-rows:auto 1fr auto; row-gap:clamp(.75rem, 2.5vh, 1.5rem); justify-items:center; align-items:center;
  padding:clamp(1rem,3vh,2rem) var(--gutter);
  --p:0;
}
.bk__kicker{ color:var(--muted); letter-spacing:.2em; text-align:center }
/* a board is slow (14% of the scroll), a sheet is a hand's flick (7%), and a spread is read for 11%.
   every turn finishes inside its own beat band, so reduced motion lands on finished spreads:
   cover .04–.18 · reframe .07–.21 · leaf0 .26–.33 · leaf1 .44–.51 · leaf2 .62–.69 · leaf3 .80–.87 */
.bk [data-p]{
  --c:  clamp(0, (var(--p) - .04) * 7.14,  1);
  --cs: clamp(0, (var(--p) - .07) * 7.14,  1);
  --f0: clamp(0, (var(--p) - .26) * 14.29, 1);
  --f1: clamp(0, (var(--p) - .44) * 14.29, 1);
  --f2: clamp(0, (var(--p) - .62) * 14.29, 1);
  --f3: clamp(0, (var(--p) - .80) * 14.29, 1);
  --ce: calc(var(--cs) * var(--cs) * (3 - 2 * var(--cs)));   /* the camera reframes just after the board moves, not with it */
}
/* trade format: each page 5.5 × 8.5. Sized from the stage height so a lifted sheet never crosses the label or the clip.
   Closed, the book is the right half alone, seen a little from above; it slides to centre and lies flat as it opens */
.bk__book{
  position:relative; width:min(100%, 58rem, calc((100dvh - var(--masthead-h) - 8rem) * .86 * 11 / 8.5)); aspect-ratio:11/8.5;
  perspective:4200px; perspective-origin:50% 40%; transform-style:preserve-3d;
  transform:translateX(calc(-25% * (1 - var(--ce)))) rotateX(calc(4deg * (1 - var(--ce)) + .02deg));   /* never exactly identity: no raster-path snap mid-scrub */
  transform-origin:50% 60%;
  pointer-events:none;
}
.bk__leaves{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none }
/* paper under one light: a 2–3% drift from the near corner to the far one, a faint mottle, a gutter that is deeper on the side the light does not reach */
.page{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(60% 45% at 82% 92%, rgba(22,19,15,.035), transparent 70%),
    radial-gradient(40% 30% at 70% 30%, rgba(22,19,15,.012), transparent 70%),
    var(--paper);
  color:var(--ink);
  display:grid; grid-template-rows:auto 1fr auto; gap:1rem; align-content:start;
  padding:clamp(1.1rem,3.2vw,2.6rem);
  overflow:clip;                                                    /* a sheet can never print past its own edge */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  pointer-events:auto;                                              /* only a visible face is ever hit */
}
.page--back{ left:0; border-radius:4px 0 0 4px; box-shadow:inset -10px 0 14px -12px rgba(22,19,15,.22), inset 1px 0 0 rgba(255,255,255,.4) }
.page--right, .page--front{ left:50%; border-radius:0 4px 4px 0; box-shadow:inset 22px 0 26px -18px rgba(22,19,15,.34), inset -1px 0 0 rgba(255,255,255,.4) }
.page--base{ transform:translateZ(-8px) }
/* the page block: the fore-edge shows a few sheets */
.page--base.page--right{ box-shadow:inset 22px 0 26px -18px rgba(22,19,15,.34), 1px 0 0 var(--paper-3), 3px 0 0 var(--paper), 4px 0 0 var(--paper-3), 6px 0 0 var(--paper), 7px 0 0 var(--paper-3) }
.bk__stage[data-beat]:not([data-beat="end"]) .page--base > *{ visibility:hidden }   /* page 10's contents exist only once exposed: no focus under a closed book; the sheet itself is always there */
/* the boards lie on the table: a 1px contact line, a tight ambient, a soft key shadow thrown down-right */
.bk__book::after{
  content:""; position:absolute; top:-.8rem; bottom:-.8rem; right:-.8rem; width:calc(50% + .8rem); pointer-events:none;
  background:linear-gradient(180deg, #2E2822, #241F1A); border-radius:2px 9px 9px 2px;
  box-shadow:inset 0 1px 0 rgba(244,241,234,.08), inset 6px 0 8px -6px rgba(0,0,0,.6),
    1px 1px 0 rgba(22,19,15,.35), 2px 3px 4px rgba(22,19,15,.22), 10px 22px 34px -14px rgba(22,19,15,.40);
  transform:translateZ(-10px);
}
/* the left board's shadow arrives once the cover has lain down */
.bk__book::before{
  content:""; position:absolute; top:-.8rem; bottom:-.8rem; left:-.8rem; width:calc(50% + .8rem); pointer-events:none;
  border-radius:9px 2px 2px 9px; background:rgba(22,19,15,.18);
  box-shadow:1px 1px 0 rgba(22,19,15,.35), 2px 3px 4px rgba(22,19,15,.22), 10px 22px 34px -14px rgba(22,19,15,.40);
  transform:translateZ(-12px);
  opacity:clamp(0, (var(--ce) - .55) * 2.3, 1);
}

/* ----- page contents ----- */
.page__no{ color:var(--muted); font-size:.6875rem; letter-spacing:.2em; font-variant-numeric:tabular-nums }
.page--back .page__no{ justify-self:start }
.page--right .page__no, .page--front .page__no{ justify-self:end }
/* left page: the person */
.page__who{ margin:0; align-self:center; display:grid; gap:.9rem; justify-items:start }
.page__face{ --face:clamp(4.5rem, 2.5rem + 7vw, 8.5rem); margin-bottom:.5rem }
.page--inside .page__face{ background:var(--stage-3); box-shadow:inset 0 0 0 1px rgba(244,241,234,.12) }
.page__faces{ align-self:end; margin-bottom:-.5rem }
.page__faces .face{ box-shadow:0 0 0 2px var(--paper), inset 0 0 0 1px rgba(22,19,15,.08) }
.page__idx{ color:var(--accent-deep); letter-spacing:.2em; font-size:.6875rem }
.page__name{ font-family:var(--sans); font-weight:800; font-stretch:104%; font-size:clamp(1.45rem, .8rem + 2.3vw, 3.1rem); line-height:1; letter-spacing:-.035em; text-wrap:balance }
.page__role{ color:var(--muted); font-size:.6875rem; letter-spacing:.09em; line-height:1.6; max-width:26ch }
/* inside the cover: the cloth board itself is the first left page, catching the key at its top-left */
.page--inside{
  background:radial-gradient(90% 60% at 20% 0%, rgba(244,241,234,.06), transparent 60%), linear-gradient(180deg, #2E2822, #241F1A);
  color:var(--on-stage); box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.6);
}
.page--inside .page__no{ visibility:hidden }
.page--inside .page__idx{ color:var(--accent-lift) }
.page--inside .page__role{ color:var(--on-stage-dim) }
/* right page: what they said */
.page__q{
  margin:0; align-self:center; position:relative;
  font-family:var(--serif); font-size:clamp(1rem, .7rem + 1.05vw, 1.75rem); line-height:1.3; letter-spacing:-.012em;
  text-wrap:pretty; hanging-punctuation:first; hyphens:manual;
  padding-top:1rem;
}
.page__q::before{ content:""; position:absolute; top:0; left:0; width:2.25rem; height:1px; background:var(--accent) }
.page__by{ color:var(--muted); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.9rem; border-top:1px solid var(--rule) }
.page__also{ margin:0; align-self:center; font-family:var(--serif); font-size:clamp(.95rem,.75rem + .7vw,1.35rem); line-height:1.35; color:var(--graphite) }
.page__also span{ color:var(--ink) }
.page__end{ margin:0; align-self:end; font-family:var(--serif); font-size:clamp(.95rem,.75rem + .7vw,1.35rem); line-height:1.35; color:var(--graphite) }
.page--right .link{ font-family:var(--serif); font-size:clamp(.9rem,.75rem + .5vw,1.15rem) }
/* the jacket wraps the board full-bleed; a hinge groove by the spine; a varnish sheen sweeps it as the board rises toward the light */
.page--jacket, .leaf--cover .page--jacket{ padding:0; display:block; background:var(--stage); overflow:hidden; border-radius:2px 9px 9px 2px; box-shadow:none }
.page--jacket img{ display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none }
.page--jacket::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(0,0,0,.10) 1.2%, rgba(0,0,0,0) 2.4%, rgba(255,255,255,.10) 4.2%, rgba(0,0,0,.22) 5.4%, rgba(0,0,0,0) 8%);
}
.page--jacket::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 62%, rgba(255,255,255,.10) 100%);
  opacity:clamp(0, var(--ce) * 2, 1);
}

/* ----- the turn ----- */
/* --f is the raw band progress. --fe is a hand's curve: the sheet answers the scroll at once, crosses vertical early, settles flat.
   --lift peaks in the first third and decays over the rest (paper is snatched up and drifts down); --arc is symmetric and drives the light.
   translateZ orders the stack — unturned leaves sit ahead of later ones, turned leaves land on top of earlier ones.
   --prev is the sheet above this one (it shades this front while it is over it); --next is the sheet that will come down on this back */
.leaf{
  margin:0; position:absolute; inset:0; transform-style:preserve-3d;
  --f: var(--f0); --prev: var(--c); --next: var(--f1);
  --fe: calc(.6 * var(--f) * var(--f) * (3 - 2 * var(--f)) + .4 * (1 - (1 - var(--f)) * (1 - var(--f))));
  --arc: calc(var(--fe) * (1 - var(--fe)) * 4);
  --lift: calc(6.75 * var(--fe) * (1 - var(--fe)) * (1 - var(--fe)));
  --edge: clamp(0, 1 - 40 * (var(--fe) - .5) * (var(--fe) - .5) * 4, 1);   /* ≈1 only within a few degrees of edge-on */
  transform:
    rotateY(calc(-180deg * var(--fe)))
    translateZ(calc(-1.5px * var(--k) + 18px * var(--lift)))
    rotateX(calc(-2.5deg * var(--lift)));
  transform-origin:50% 50%;
  will-change:transform;
  pointer-events:none;
}
.leaf[style*="--k:1"]{ --f:var(--f1); --prev:var(--f0); --next:var(--f2) }
.leaf[style*="--k:2"]{ --f:var(--f2); --prev:var(--f1); --next:var(--f3) }
.leaf[style*="--k:3"]{ --f:var(--f3); --prev:var(--f2); --next:0 }
.leaf .page--front{ transform:translateZ(.6px) }
.leaf .page--back{ left:50%; transform:rotateY(180deg) translateZ(.6px); border-radius:4px 0 0 4px }
/* a sheet has an edge: a 2px strip of paper standing at the fore-edge, so edge-on it is a clean line, not a broken hairline */
.leaf:not(.leaf--cover)::before{
  content:""; position:absolute; top:0; bottom:0; left:100%; width:2px; pointer-events:none;
  background:var(--paper-3);
  transform-origin:0 50%; transform:translateZ(-1px) rotateY(90deg);
}
/* and edge-on its ink is not a smear: fade the print (not the paper) within a few degrees of 90° */
.leaf:not(.leaf--cover) .page > *{ opacity:calc(1 - .85 * var(--edge)) }
/* the cover is a board: stiff, oversized, thick, no bow; it is the first and slowest thing to move */
.leaf--cover{
  --f:var(--c); --prev:0; --next:var(--f0);
  --board:clamp(5px, 1.2vw, 10px);
  inset:-.8rem; --arc:0; --lift:0; --edge:0;
  --fe: calc(var(--c) * var(--c) * (3 - 2 * var(--c)));        /* plain smoothstep: slow pull, gravity, damped landing */
  transform:rotateY(calc(-180deg * var(--fe) - .02deg)) translateZ(1px);
}
.leaf--cover .page{ width:50% }
.leaf--cover .page:not(.page--jacket){ padding:clamp(1.1rem,3.2vw,2.6rem) }
.leaf--cover .page--front{ left:50%; transform:translateZ(var(--board)) }        /* the board grows toward the jacket */
.leaf--cover .page--back{ left:50%; transform:rotateY(180deg) translateZ(.3px); border-radius:9px 2px 2px 9px }
/* the board's fore-edge: a face spanning pastedown → jacket; edge-on when closed and when open, a dark slab while it turns */
.leaf--cover::after{
  content:""; position:absolute; top:0; bottom:0; left:100%; width:var(--board); pointer-events:none;
  background:linear-gradient(90deg, #2A2520, #1A1613); border-radius:0 3px 3px 0;
  transform-origin:0 50%; transform:translateZ(var(--board)) rotateY(90deg);
  backface-visibility:hidden;
}
/* light across the turning sheet: the front brightens as it rises toward the key, the back is dark until it comes down */
.leaf:not(.leaf--cover) .page::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:2;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,.55) 100%);
  opacity:clamp(0, var(--fe) * 2, 1);
}
.leaf:not(.leaf--cover) .page--back::after{
  background:linear-gradient(270deg, rgba(22,19,15,.12) 0%, rgba(22,19,15,.42) 100%);
  opacity:calc(clamp(0, (1 - var(--fe)) * 2, 1) * .9);
}
/* the shadow a turning sheet throws: on the right page while it is over it (broad, then a narrowing band), then on the landing page as it comes down */
.leaf:not(.leaf--cover) .page--front::before, .page--base.page--right::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit;
  --pe: calc(var(--prev) * var(--prev) * (3 - 2 * var(--prev)));
  background:linear-gradient(90deg, rgba(22,19,15,.55), rgba(22,19,15,.20) 30%, rgba(22,19,15,0) 62%);
  opacity:calc(clamp(0, var(--pe) * 5, 1) * clamp(0, (.62 - var(--pe)) * 5, 1) * .75);
}
.page--base.page--right{ --prev:var(--f3) }
.leaf .page--back::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit;
  --ne: calc(var(--next) * var(--next) * (3 - 2 * var(--next)));
  background:linear-gradient(270deg, rgba(22,19,15,.50), rgba(22,19,15,.18) 30%, rgba(22,19,15,0) 62%);
  opacity:calc(clamp(0, (var(--ne) - .42) * 5, 1) * clamp(0, (1 - var(--ne)) * 3.5, 1) * .7);
}
.leaf--cover .page--back::before{ display:none }   /* the board's own shading is enough */
/* the gutter is a valley: the left curve turns from the light, a short dark trough, then a pale lip where the right page climbs out */
.bk__spine{
  position:absolute; left:50%; top:0; bottom:0; width:12%; translate:-50% 0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(22,19,15,0) 0%, rgba(22,19,15,.05) 22%, rgba(22,19,15,.16) 40%, rgba(22,19,15,.34) 49.4%,
    rgba(22,19,15,.30) 50.6%, rgba(22,19,15,.10) 56%, rgba(244,241,234,.55) 63%, rgba(244,241,234,0) 78%);
  transform:translateZ(7px);           /* in front of every landed leaf (≤ +5.1px), behind a lifting sheet */
  opacity:var(--ce);
}
.bk__hint{
  color:var(--muted); letter-spacing:.2em; text-align:center;
  opacity:calc(1 - clamp(0, (var(--p) - .04) * 20, 1));
}
@media (max-width:47.99rem){
  .bk__book{ aspect-ratio:11/9.5; width:calc(100% - 1.6rem) }
  .page{ padding:.9rem .8rem; gap:.6rem }
  .leaf--cover .page:not(.page--jacket){ padding:.9rem .8rem }
  .page__q{ font-size:.8125rem; line-height:1.32; padding-top:.6rem }
  .page__q::before{ width:1.5rem }
  .page__by{ padding-top:.5rem; font-size:.5625rem }
  .page__name{ font-size:1.25rem }
  .page__face{ --face:3.75rem; margin-bottom:0 }
  .page__role{ font-size:.625rem }
  .bk__kicker, .bk__hint{ font-size:.5625rem; letter-spacing:.12em }
}
@media (max-width:22.49rem){
  .bk__book{ aspect-ratio:11/11.5 }
  .page{ padding:.75rem .65rem; gap:.45rem }
  .page__q{ font-size:.75rem; line-height:1.3; padding-top:.5rem }
  .page__by{ padding-top:.4rem }
}

/* ---------- 3. fragments — one sentence a screen ---------- */
.fr{ background:var(--stage); color:var(--on-stage); padding-block:clamp(2rem,6vh,4rem) clamp(4rem,12vh,8rem) }
.fr__line{
  min-height:56vh; display:grid; place-content:center; text-align:center;
  padding-inline:var(--gutter);
  font-family:var(--serif); font-size:clamp(1.8rem, 1rem + 3.8vw, 4.8rem);
  line-height:1.12; letter-spacing:-.025em; max-width:none; text-wrap:balance;
}
/* the underlined phrase: a marker line drawn in after the sentence has arrived */
.fr__u{
  background:linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / 0% .1em;
  transition:background-size .9s var(--ease-out) .45s;
  padding-bottom:.02em;
}
.is-preorder [data-reveal="in"] .fr__u{ background-size:100% .1em }
.fr__src{ text-align:center; color:var(--on-stage-dim); margin-top:-2vh }
.fr__ask{ display:grid; justify-items:center; gap:var(--s-4); margin-top:clamp(3rem,10vh,6rem); text-align:center }
.fr__want{ font-family:var(--sans); font-weight:800; font-stretch:104%; font-size:clamp(1.6rem,1rem + 2.6vw,3.25rem); letter-spacing:-.03em }
.fr .cta{ background:var(--on-stage); color:var(--stage) }
.fr .cta:hover{ background:var(--accent-lift); color:var(--stage) }

/* ---------- 4. before the launch ---------- */
.early{ background:var(--paper-2); border-top:1px solid var(--rule); padding-block:clamp(4rem,14vh,9rem) }
.early__in{ display:grid; gap:.25em; justify-items:start }
/* wide screens: the claim on the left, the rail beside it as the diagram of that claim */
@media (min-width:64rem){
  .early__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(3rem,6vw,6rem); align-items:center }
  .early__l{ grid-column:1 }
  .early__queue{ grid-column:2; grid-row:1 / span 3; align-self:center; margin-top:0; max-width:none }
  .early__cta{ grid-column:2; grid-row:4; margin-top:.5rem }
}
.early__l{
  font-family:var(--sans); font-weight:800; font-stretch:104%;
  font-size:clamp(1.7rem, 1rem + 3.6vw, 4.6rem);
  line-height:1.02; letter-spacing:-.035em; color:var(--faint);
  text-wrap:balance; max-width:16ch;
}
.early__l--last{ color:var(--ink) }
/* the queue: three moments the reader gets ahead of */
/* the rail: three moments the reader gets ahead of. Drawn in on arrival — the line first,
   then the ticks in order, then the figure steps in and the head start fills in behind it */
.early__queue{
  position:relative; width:100%; max-width:56rem; height:clamp(7rem, 16vh, 9rem);
  margin-top:clamp(2rem,6vh,3.5rem);
  --rail:58%;                            /* where the line runs */
}
.early__line{
  position:absolute; left:0; right:0; top:var(--rail); height:2px; background:var(--ink); opacity:.28;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease-out) .1s;
}
.early__line::after{ content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:8px solid var(--ink) }
/* the head start: from you to the first shelf */
.early__lead{
  position:absolute; left:8%; width:32%; top:var(--rail); height:2px; background:var(--accent-solid);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--ease-out) 1.15s;
}
.early__tick{
  position:absolute; left:var(--x); top:var(--rail); translate:-50% 0;
  display:grid; justify-items:center; gap:.7rem;
  opacity:0; transform:translateY(4px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(.45s + var(--i) * .18s);
}
.early__tick i{ width:2px; height:1.1rem; background:var(--ink); opacity:.55; translate:0 calc(-100% + 1px); margin-bottom:-1.1rem }
.early__lab{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap }
.early__you{
  position:absolute; left:var(--x); top:var(--rail); translate:-50% 0;
  display:grid; justify-items:center; gap:.7rem;
  opacity:0; transform:translateX(-14px);
  transition:opacity .6s var(--ease-out) 1s, transform .7s var(--ease-out) 1s;
}
.early__you svg{ width:clamp(24px,4.4vh,36px); height:auto; fill:var(--accent-solid); translate:0 calc(-100% + 1px); margin-bottom:calc(-1 * clamp(24px,4.4vh,36px) * 46 / 24) }
.early__you .early__lab{ color:var(--accent-deep); font-weight:500 }
.is-preorder .early__queue[data-reveal="in"] .early__line, .is-preorder .early__queue[data-reveal="in"] .early__lead{ transform:scaleX(1) }
.is-preorder .early__queue[data-reveal="in"] .early__tick{ opacity:1; transform:none }
.is-preorder .early__queue[data-reveal="in"] .early__you{ opacity:1; transform:none }
@media (max-width:47.99rem){
  .early__lab{ font-size:.5625rem; letter-spacing:.08em }
  .early__tick:nth-child(4){ left:38% }
  .early__tick:nth-child(5){ left:64% }
  .early__tick:last-child{ left:96%; translate:-100% 0; justify-items:end }   /* the last label hangs left of its tick, inside the gutter */
  .early__tick:last-child .early__lab{ white-space:normal; width:min-content; text-align:right; line-height:1.4 }
  .early__queue{ height:6.5rem }
}
@media (prefers-reduced-motion:reduce){
  .early__line, .early__lead, .early__tick, .early__you{ transition:opacity .25s linear 0s; transform:none; opacity:1 }
}
html:not(.seq-ready) .early__line, html:not(.seq-ready) .early__lead{ transform:none }
html:not(.seq-ready) .early__tick, html:not(.seq-ready) .early__you{ opacity:1; transform:none }
.early__cta{ margin-top:clamp(1rem,3vh,1.75rem); display:grid; gap:.7rem; justify-items:start }
.early__ctanote{ color:var(--muted); letter-spacing:.14em; font-size:.625rem; text-transform:uppercase; padding-left:.15rem }

/* ---------- 5. the final moment ---------- */
.fin{ background:var(--paper); padding-block:clamp(3rem,9vh,6rem); scroll-margin-top:var(--masthead-h) }
.fin__in{ display:grid; justify-items:center; text-align:center; gap:var(--s-4) }
/* one place, drawn in outline, is open */
.fin__next{ margin:var(--s-5) 0 calc(-1 * var(--s-4)) }
.fin__next svg{ width:clamp(24px,4.4vh,36px); height:auto; fill:none; stroke:var(--accent-solid); stroke-width:1.4; stroke-dasharray:3 2.4; overflow:visible }
.fin__book{ position:relative; z-index:1 }
.fin__book{ width:min(58vw, 14.5rem); margin-bottom:clamp(.5rem,2vh,1.25rem) }
.fin__title{ font-size:clamp(2rem,1.1rem + 3.6vw,4.5rem); margin:0 }
.fin__by{ color:var(--muted); letter-spacing:.2em }
.fin__line{ font-size:clamp(1.25rem,.95rem + 1.4vw,2rem); color:var(--graphite); margin-top:var(--s-3) }
.fin__cta .cta{ min-height:60px; padding-inline:2.2rem; font-size:1.0625rem }
/* the one form on the site */
.fin__form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; width:min(100%, 30rem); margin-top:var(--s-3) }
.fin__input{
  min-height:60px; padding:0 1.2rem; font:inherit; font-size:1.0625rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(22,19,15,.06);
}
.fin__input::placeholder{ color:var(--muted) }
.fin__input:focus-visible{ outline:2px solid var(--accent-solid); outline-offset:2px; border-color:var(--accent-solid) }
.fin__btn{ min-height:60px; padding-inline:1.8rem; font-size:1.0625rem; border:0; cursor:pointer }
.fin__fine{ color:var(--muted); letter-spacing:.14em; font-size:.6875rem; margin-top:var(--s-2) }
.fin__honey{ position:absolute; left:-10000px; width:1px; height:1px; opacity:0; pointer-events:none }
.fin__msg{ grid-column:1 / -1; margin:0; min-height:1.2em; color:var(--muted); letter-spacing:.12em; font-size:.6875rem; text-align:left }
.fin__msg:empty{ display:none }
.fin__msg.is-bad{ color:var(--accent-deep) }
.fin__btn[disabled]{ opacity:.7; cursor:progress }
/* the thanks state, in the form's place */
.fin__done{ display:grid; gap:.6rem; justify-items:center; margin-top:var(--s-3); padding:1.4rem 1.6rem; width:min(100%, 30rem); border:1px solid var(--rule); border-radius:2px; background:var(--paper-2) }
.fin__doneline{ margin:0; font-family:var(--sans); font-weight:800; font-stretch:104%; font-size:clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing:-.03em }
.fin__donesub{ margin:0; color:var(--muted); letter-spacing:.12em; font-size:.6875rem; line-height:1.6 }
.fin__done[hidden], .fin__form[hidden], .fin__fine[hidden]{ display:none }
@media (max-width:31.99rem){ .fin__form{ grid-template-columns:1fr } .fin__btn{ width:100% } }
.fin__after{
  margin-top:var(--s-5);
  font-family:var(--serif); font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);
  line-height:1.4; color:var(--accent-deep);
}

/* ---------- reveals, reduced motion, no-JS ---------- */
.is-preorder [data-reveal]{ opacity:0; transform:translate3d(0,12px,0); transition:opacity .7s var(--ease-out), transform .8s var(--ease-out) }
.is-preorder [data-reveal="in"]{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .leaf{ will-change:auto }
  .rv [data-p]{ --b:1; --c:1 }   /* the first plate is the title, not a black screen */
  .is-preorder [data-reveal]{ transform:none; transition:opacity .25s linear }
  .rv__book, .rv__w{ will-change:auto }
}
html:not(.seq-ready) .is-preorder [data-reveal]{ opacity:1; transform:none }
html:not(.seq-ready) .rv{ height:auto }
html:not(.seq-ready) .rv__stage{ position:static; height:auto; padding-block:12vh 6vh; display:grid; gap:1.5rem; place-items:center }
html:not(.seq-ready) .rv [data-p]{ --b:1; --c:1; --d:1; --de:1; --dl:1; --dw:1; --dwe:1; --dg:1; --e:1; --es:1; --ese:1; --ec:1; --ece:1 }
html:not(.seq-ready) .rv__hint, html:not(.seq-ready) .rv__room, html:not(.seq-ready) .rv__book::after{ display:none }
html:not(.seq-ready) .rv__w{ position:static; translate:none; clip-path:none; -webkit-mask:none; mask:none; opacity:1; font-size:clamp(2.4rem, 1rem + 6vw, 6rem); line-height:1 }
html:not(.seq-ready) .rv__w--1{ margin-bottom:-1.5rem }
html:not(.seq-ready) .rv__open{ position:static; translate:none; visibility:visible; width:auto; max-width:none }
html:not(.seq-ready) .rv__status, html:not(.seq-ready) .rv__open > p:last-child{ opacity:1; transform:none }
html:not(.seq-ready) .rv__mask{ -webkit-mask:none; mask:none }
/* no JS: the book lies open as a list of spreads in reading order — who, then what they said */
html:not(.seq-ready) .bk{ height:auto }
html:not(.seq-ready) .bk__stage{ position:static; height:auto; display:grid; gap:1.5rem; padding-block:3rem }
html:not(.seq-ready) .bk__book{ aspect-ratio:auto; transform:none; width:min(100%, 62rem); display:grid; gap:1rem }
html:not(.seq-ready) .bk__leaves{ position:static; display:grid; gap:1rem }
html:not(.seq-ready) .leaf{ position:static; inset:auto; transform:none; display:grid; gap:1rem }
html:not(.seq-ready) .page{ position:static; width:auto; transform:none; border-radius:4px; box-shadow:0 1px 2px rgba(22,19,15,.1); visibility:visible }
html:not(.seq-ready) .leaf .page > *{ opacity:1 }
html:not(.seq-ready) .page::before, html:not(.seq-ready) .page::after, html:not(.seq-ready) .leaf::before, html:not(.seq-ready) .leaf::after{ display:none }
html:not(.seq-ready) .page--jacket, html:not(.seq-ready) .bk__spine, html:not(.seq-ready) .bk__hint, html:not(.seq-ready) .bk__book::before, html:not(.seq-ready) .bk__book::after{ display:none }