/* ============================================================
   SECTION 2 — THE ROOM
   The founder does not move and does not change size.
   Everything else does.
   ============================================================ */
.room{ position:relative; height:260vh; background:var(--paper) }
@media (max-width:47.99rem){ .room{ height:220vh } }

.room__stage{
  position:sticky; top:var(--masthead-h);
  height:calc(100dvh - var(--masthead-h));
  overflow:clip; contain:layout paint style;
  --p:0; --parallax:1; --disperse:1; --drift:1; --xfade:1;
}

.room__field{ position:absolute; inset:0; max-width:92rem; margin-inline:auto }

/* Absolutely-positioned decorative layers are excluded from text selection.
   They are aria-hidden, and copying them concatenates into nonsense; the
   visually-hidden narration in each section is the real, copyable text. */
.room__field, .room__hud, .travel__field{
  -webkit-user-select:none; user-select:none;
}

/* the floor the room stands on. it arrives with the room and never moves. */
.room__floor{
  position:absolute; left:0; right:0; top:74%;
  margin-top:clamp(9px, 1.3vh, 16px);
  height:1px; background:var(--ink);
  opacity:calc(.05 + clamp(0, var(--p) * .18, .1));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

/* --- a figure. one symbol, instanced. position is authored, never computed. --- */
/* Two states per place, so the room reads as a room rather than as dots
   arriving: the PLACE appears first as a faint silhouette, and the PERSON
   fills it a moment later. There is always a ring of empty places just
   ahead of the crowd, which is what makes "filling up" legible. */
/* PERFORMANCE CONTRACT for the room.
   --p is written on the stage once per frame. Only the seven ROW containers
   and five WORD GROUPS read it; the 46 figures and 13 words inside read
   nothing, so a frame costs ~12 style recalculations instead of ~110.
   Rows arrive continuously — each finishes landing exactly at its stage's
   beat, so the readout is honest at every boundary and something is always
   in motion between them. */
.row, .wordgroup{
  position:absolute; inset:0;
  --near:clamp(0, (var(--p) - var(--in) + .10) * 8, 1);   /* the places */
  --on:  clamp(0, (var(--p) - var(--in)) * 8, 1);         /* the people */
  opacity:calc((var(--near) * .18 + var(--on) * .62) * var(--tone, 1));
  will-change:opacity;
  pointer-events:none;
}
.wordgroup{ --near:0; opacity:calc(var(--on) * .9) }

/* a figure is static geometry now: position and size only */
.fig{
  position:absolute; left:var(--x); top:var(--y);
  translate:-50% -50%;
  transform:scale(var(--s, 1));
}
.fig svg{ width:clamp(19px, 3vh, 36px); height:auto; fill:var(--graphite) }
.fig--founder{ transform:scale(1); z-index:3 }
.fig--founder svg{ fill:var(--ink); width:clamp(23px, 3.6vh, 42px) }

/* the whole room breathes very slightly across the track, so no stretch of
   scroll is ever completely still — one transform, one layer */
.room__field{
  transform:scale(calc(.985 + var(--p) * .03));
  transform-origin:50% 74%;
  will-change:transform;
}

/* the mark the founder stands on. it is the same mark from the hero. */
.mark{
  position:absolute; left:50%; top:74%; z-index:4;
  translate:-50% 0;
  margin-top:clamp(9px, 1.3vh, 16px);
  width:clamp(2.8rem, 5.4vw, 5rem); height:1px;
  background:var(--ink); opacity:.55; z-index:3;
}
.mark__label{
  position:absolute; left:50%; top:74%;
  translate:-50% 0;
  margin-top:clamp(15px, 2.2vh, 26px);
  font-family:var(--mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; z-index:3;
}

/* --- the words. gains and asks get identical treatment.
       the point is quantity, not virtue. --- */
.word{
  position:absolute; left:var(--x); top:var(--y);
  translate:-50% -50%;
  /* words sitting in the margins anchor to the frame instead of centring on
     their point, so a long word never clips off the edge on small screens */
  font-family:var(--mono); font-size:clamp(.5625rem,.5rem + .22vw,.75rem);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  /* the outer band of the crowd reaches these margins, so the words carry a
     paper halo and stay readable when a figure passes behind them */
  text-shadow:0 0 5px var(--paper), 0 0 10px var(--paper), 0 0 16px var(--paper);
}
.word[data-anchor="l"]{ left:var(--gutter); translate:0 -50% }
.word[data-anchor="r"]{ left:auto; right:var(--gutter); translate:0 -50% }

/* --- HUD --- */
.room__hud{
  position:absolute; left:max(var(--gutter), calc(50% - 46rem)); top:clamp(1.5rem,5vh,3.5rem);
  display:flex; flex-direction:column; gap:.35rem;
}
.room__stagename{
  display:grid;
  font-family:var(--sans); font-weight:800; font-stretch:104%;
  font-size:clamp(1.5rem,.9rem + 2.6vw,3.25rem);
  line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.room__stagename span{ grid-area:1/1; opacity:0; transition:opacity .45s var(--ease-io) }
.room__count{
  display:flex; align-items:baseline; gap:.5rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.room__countnum{ display:grid; min-width:2.2ch; color:var(--ink) }
.room__countnum span{ grid-area:1/1; opacity:0; transition:opacity .45s var(--ease-io); font-variant-numeric:tabular-nums }

/* stage readout — these keys must track the section's data-beats exactly */
[data-beat="idea"]      [data-for="idea"],
[data-beat="believers"] [data-for="believers"],
[data-beat="team"]      [data-for="team"],
[data-beat="momentum"]  [data-for="momentum"],
[data-beat="growth"]    [data-for="growth"],
[data-beat="scale"]     [data-for="scale"],
[data-beat="question"]  [data-for="scale"]{ opacity:1 }

/* --- the question. it is not answered. --- */
.room__q{
  position:absolute; inset:0; z-index:5;
  display:grid; place-content:center; text-align:center;
  padding-inline:var(--gutter);
  background:var(--paper);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1rem + 3vw,3.75rem);
  line-height:1.16; letter-spacing:-.022em; color:var(--ink);
  text-wrap:balance;
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease-io);
}
[data-beat="question"] .room__q{ opacity:1 }

@media (max-width:47.99rem){
  .row[data-m="0"], .word[data-m="0"]{ display:none }
  /* a crowd of 86 needs smaller bodies at phone width */
  .fig svg{ width:clamp(14px, 2.3vh, 22px) }
  .fig--founder svg{ width:clamp(19px, 3vh, 30px) }
  /* the six surviving words move to slots that cannot collide at this width */
  .word{ left:var(--mx, var(--x)); top:var(--my, var(--y)) }
  .room__hud{ top:1.25rem }
  .room__q br{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .row, .wordgroup, .room__field{ will-change:auto }
  .room__field{ transform:none }
}

html:not(.seq-ready) .room{ height:auto }
html:not(.seq-ready) .room__stage{ position:static; height:auto; min-height:70vh; padding-block:12vh }
html:not(.seq-ready) .row,
html:not(.seq-ready) .wordgroup{ opacity:1 }
html:not(.seq-ready) .room__field{ transform:none }
html:not(.seq-ready) .room__q{ position:static; opacity:1; background:none; padding-block:4rem }

/* ============================================================
   Entry reveals — authored time, fires once, never runs backwards
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal="in"]{ opacity:1; transform:none }
html:not(.seq-ready) [data-reveal]{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ transform:none; transition:opacity .3s linear }
}

/* ============================================================
   ACT 3 — THE DECISION TRAVELS FARTHER
   The decision holds still. Only its radius grows.
   ============================================================ */
.travel{ position:relative; height:170vh; background:var(--paper) }
@media (max-width:47.99rem){ .travel{ height:155vh } }

.travel__stage{
  position:sticky; top:var(--masthead-h);
  height:calc(100dvh - var(--masthead-h));
  overflow:clip; contain:layout paint style;
  display:grid; place-items:center;
  --p:0; --parallax:1; --disperse:1; --drift:1; --xfade:1;
}
.travel__field{ position:absolute; inset:0; max-width:92rem; margin-inline:auto }

/* each ring is one composited transform, nothing else */
.ring{
  position:absolute; left:50%; top:50%;
  width:calc(var(--r) * 2 * 1.55%); aspect-ratio:1.55 / 1;
  translate:-50% -50%;
  border:1px solid var(--ink);
  border-radius:50%;
  --on:clamp(0, (var(--p) - var(--in)) * 20, 1);
  opacity:calc(var(--on) * .2);
  transform:scale(calc(.72 + .28 * var(--on)));
  will-change:transform;
}

/* the decision itself never changes size */
.travel__core{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
  font-family:var(--sans); font-weight:800; font-stretch:104%;
  font-size:clamp(1.5rem,.95rem + 2.4vw,3rem);
  line-height:1.02; letter-spacing:-.032em; color:var(--ink);
  text-align:center; white-space:nowrap;
}
.travel__core::after{
  content:""; position:absolute; left:50%; bottom:-1.1rem; translate:-50% 0;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--accent);
}

.conseq{
  position:absolute; left:var(--x); top:var(--y); translate:-50% -50%;
  font-family:var(--mono); font-size:clamp(.5625rem,.5rem + .25vw,.75rem);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--graphite); white-space:nowrap;
  --on:clamp(0, (var(--p) - var(--in)) * 22, 1);
  opacity:var(--on);
  transform:translate3d(0, calc(6px * (1 - var(--on))), 0);
}

.travel__q{
  position:absolute; inset:0; z-index:5;
  display:grid; place-content:center; text-align:center;
  padding-inline:var(--gutter); background:var(--paper);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.8vw,3.5rem);
  line-height:1.16; letter-spacing:-.022em; color:var(--ink);
  text-wrap:balance; opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease-io);
}
[data-beat="ask"] .travel__q{ opacity:1 }

@media (max-width:47.99rem){
  .conseq[data-m="0"]{ display:none }
  .travel__q br{ display:none }
}
html:not(.seq-ready) .travel{ height:auto }
html:not(.seq-ready) .travel__stage{ position:static; height:auto; min-height:70vh; padding-block:12vh }
html:not(.seq-ready) .ring{ opacity:.2; transform:none }
html:not(.seq-ready) .conseq{ opacity:1; transform:none }
html:not(.seq-ready) .travel__q{ position:static; opacity:1; background:none; padding-block:4rem }

/* ============================================================
   ACT 5 — THE LANGUAGE CHANGES
   ============================================================ */
.lang{ background:var(--paper) }
.lang__arc{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem clamp(.75rem,2.5vw,2rem);
  font-family:var(--sans); font-weight:800; font-stretch:104%;
  font-size:clamp(1.9rem,1rem + 4.4vw,4.75rem);
  line-height:1; letter-spacing:-.035em; color:var(--ink);
  margin-bottom:clamp(2.5rem,7vh,5rem);
}
.lang__arc i{ font-style:normal; color:var(--accent); font-size:.42em; transform:translateY(-.18em) }
.lang__arc span:last-of-type{ color:var(--accent-deep) }

.lang__pairs{ display:grid; gap:0; border-top:1px solid var(--rule) }
.pair{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(.75rem,3vw,2.5rem);
  padding-block:clamp(1.1rem,3.2vh,2rem);
  border-bottom:1px solid var(--rule-soft);
}
/* ::before is generated as the FIRST grid item, so every column is placed
   explicitly — otherwise the arrow leads the pair instead of joining it. */
/* ::before is generated first, so without an explicit row the auto-placement
   cursor pushes dt and dd onto a second row and the arrow floats above them. */
.pair dt{ grid-column:1; grid-row:1 }
.pair::before{ grid-column:2; grid-row:1 }
.pair dd{ grid-column:3; grid-row:1 }
.pair dt,.pair dd{
  font-family:var(--sans); font-weight:800; font-stretch:102%;
  font-size:clamp(1.05rem,.72rem + 1.6vw,2.25rem);
  line-height:1.05; letter-spacing:-.026em; margin:0;
}
.pair dt{ color:var(--muted) }
.pair dd{ color:var(--ink); text-align:right }
.pair::before{
  content:"\2192"; color:var(--faint); font-family:var(--mono);
  font-size:clamp(.8rem,.7rem + .5vw,1.1rem); align-self:center;
}

/* ============================================================
   SECTION 6 — ADVANCE PRAISE (home)
   ============================================================ */
.proof{ background:var(--paper-2); border-top:1px solid var(--rule) }
.proof__more{
  margin-top:clamp(1.5rem,4vh,2.5rem); margin-bottom:var(--s-6);
  display:grid; gap:.9rem; justify-items:start;
}
.proof__more p{ font-family:var(--serif); font-size:var(--t-body); color:var(--graphite); max-width:36rem }
.proof__more span{ color:var(--ink) }
.praisehome{ background:var(--paper); border-top:1px solid var(--rule) }
.praisehome__title{
  font-size:clamp(2rem,1.1rem + 4.2vw,4.75rem);
  margin-bottom:clamp(2.5rem,7vh,5rem);
}
.pulls{ display:grid; gap:0; border-top:1px solid var(--rule) }
.pull{
  margin:0; padding-block:clamp(2.2rem,6vh,4.5rem);
  border-bottom:1px solid var(--rule-soft);
  display:grid; gap:clamp(1rem,3vw,2.5rem);
}
@media (min-width:56rem){
  .pull{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); align-items:end }
}
.pull__q{
  font-size:clamp(1.7rem,1rem + 3.4vw,3.75rem);
  letter-spacing:-.032em; color:var(--ink); margin:0;
}
.pull__by{ display:grid; gap:.4rem; align-content:end; grid-template-columns:auto minmax(0,1fr); column-gap:1.25rem }
.pull__by .face{ --face:clamp(4.5rem, 3rem + 3vw, 6rem); grid-row:1 / span 2; align-self:center }
.pull__name{
  font-family:var(--sans); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.005em; color:var(--ink);
}
.pull__role{ color:var(--muted); line-height:1.65; letter-spacing:.09em; text-wrap:balance }
.praisehome__more{
  margin-top:clamp(2rem,5vh,3.5rem); margin-bottom:var(--s-6);
  font-family:var(--serif); font-size:var(--t-md); color:var(--graphite); max-width:34rem;
}
.praisehome__names{ color:var(--ink) }

/* ============================================================
   ACT 6 — THE BOOK. The cover is the destination object.
   ============================================================ */
.bookshow{
  background:var(--paper);
  padding-block:clamp(3.25rem,10vh,7rem);
  border-top:1px solid var(--rule);
}
.bookshow__in{
  display:grid; gap:clamp(2.5rem,7vw,6rem); align-items:center;
  justify-items:center; text-align:center;
}
@media (min-width:56rem){
  .bookshow__in{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); justify-items:start; text-align:left }
}
.bookshow__art{ width:min(100%, 26rem); justify-self:center }

.bookshow__title{
  font-size:clamp(2rem,1.1rem + 3.6vw,4.25rem);
  margin-block:.3rem .8rem;
}
.bookshow__sub{
  font-family:var(--serif); font-size:clamp(1.1rem,.9rem + .9vw,1.6rem);
  color:var(--accent-deep); line-height:1.3; margin-bottom:clamp(1.25rem,3.5vh,2rem);
}
.bookshow__line{
  font-family:var(--serif); font-size:var(--t-md); line-height:1.5;
  color:var(--graphite); max-width:34ch; margin-bottom:var(--s-6); text-wrap:pretty;
}

/* ============================================================
   AUTHOR
   ============================================================ */
.authorhome{ background:var(--paper) }
.authorhome__alt{ display:inline-block; font-family:var(--sans); font-size:.9375rem }
.authorhome__in{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (min-width:48rem){
  .authorhome__in{ grid-template-columns:minmax(0,4fr) minmax(0,8fr) }
}
.authorhome__img{
  width:min(100%,17rem); height:auto; justify-self:start;
  background:var(--paper-2);
}
.authorhome__name{ font-size:clamp(1.9rem,1.1rem + 3vw,3.5rem); margin-bottom:var(--s-5) }
.authorhome__bio{
  font-size:var(--t-md); line-height:1.5; color:var(--graphite);
  max-width:38rem; margin-bottom:var(--s-6); text-wrap:pretty;
}

/* ============================================================
   FINAL
   ============================================================ */
.final{
  background:var(--paper);
  padding-block:clamp(4.5rem,14vh,9rem);
  border-top:1px solid var(--rule);
}
.final__in{ display:grid; justify-items:center; text-align:center; gap:var(--s-6) }
.final__fig{ display:grid; justify-items:center; gap:.85rem; margin-bottom:clamp(2rem,6vh,4rem) }
.final__fig svg{ fill:var(--ink) }
.final__line{
  font-size:clamp(1.5rem,.95rem + 2.5vw,3rem); max-width:34ch; margin:0;
  text-wrap:balance;
}
@media (max-width:33rem){ .final__line br{ display:none } }
.final__book{ color:var(--muted); letter-spacing:.16em; line-height:2 }



/* ============================================================
   Homepage sections + the figure system
   ============================================================ */

/* ---- the figure. one symbol, instanced. never redrawn. ---- */



/* the mark the founder stands on. it never moves again. */