/* ============================================================
   STATEMENTS — candidates (sections lab, group SM)
   Components under .stmt-*. Tokens only; every other value is a knob
   declared on its component. A statement is type and whitespace: no
   boxes, and a photo only where the sentence needs its person or place.
   ============================================================ */

/* Screen-reader text (the scrubbed figure in SM01 reads as its final value). */
.stmt-sr {
  position: absolute; width: 1px; height: 1px; overflow: clip;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- SM01 · pivot with its proof figure ----
   <section class="stmt-proof"><div class="wrap stmt-proof__grid">
     <h2 class="illuminate stmt-proof__h">Sentence. <span class="accent">Its turn.</span></h2>
     <div class="stmt-proof__fig">
       <p class="stmt-proof__value"><span class="stmt-proof__n" data-to="500" aria-hidden="true">500</span><span class="accent" aria-hidden="true">+</span><span class="stmt-sr">500+</span></p>
       <p class="stmt-proof__label">What was counted</p>
     </div>
   </div></section>
   The sentence on seven columns, the figure on the last four, both on one
   baseline. JS writes --proof-p (0…1) from the illumination's progress:
   the figure brightens with the words and lands as the last one lights. */
.stmt-proof {
  --proof-size: calc(var(--fs-display) * 1.7);   /* the figure */
  --proof-digits: 3;                             /* slot width, so the + never moves */
  --proof-dim: var(--illuminate-dim, .16);
}
.stmt-proof__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-5); align-items: end;
}
.stmt-proof__h { grid-column: 1 / span 7; text-wrap: balance; }
.stmt-proof__fig { grid-column: 9 / -1; padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.stmt-proof__value {
  display: flex; align-items: baseline; max-width: none;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--proof-size); line-height: .92;
  letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.stmt-proof__n { display: inline-block; min-width: calc(var(--proof-digits) * 1ch); text-align: right; }
.stmt-proof__value .accent { font-family: var(--font-accent, inherit); font-weight: var(--fw-accent, 400); font-synthesis: none; }
.stmt-proof__label { margin-top: var(--sp-4); max-width: 28ch; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.stmt-proof.is-armed .stmt-proof__fig {
  opacity: calc(var(--proof-dim) + (1 - var(--proof-dim)) * var(--proof-p, 0));
  transition: opacity .5s var(--ease-out);
}

/* ---- SM02 · paired contrast, continued ----
   <section class="stmt-pair"><div class="wrap">
     <p class="eyebrow">…</p>
     <h2 class="stmt-pair__h" data-reveal="lines" aria-label="Clause one, clause two.">
       <span class="stmt-pair__a reveal" data-reveal="lines" aria-hidden="true">Clause one,</span>
       <span class="stmt-pair__b reveal" data-reveal="lines" aria-hidden="true"><span class="accent">clause two.</span></span>
     </h2>
     <div class="stmt-pair__sides" data-reveal-group> 2 × .stmt-pair__side.reveal (.stmt-pair__k · p · .link) </div>
   </div></section>
   Each clause is its own line-mask block (the kit's split drops a <br>).
   JS sets --pair-indent to where clause one ends, so clause two's first
   line continues from there; text-indent makes the kit's split measure
   that first line short, and the padding re-applies it to the built line.
   The second side starts under the second clause. */
.stmt-pair {
  --pair-indent: 2em;      /* replaced by the measured end of clause one */
  --pair-beat: 260ms;      /* the pause before clause two rises */
}
.stmt-pair__h > span { display: block; }
.stmt-pair__b { text-indent: var(--pair-indent); }
/* Children (the kit's inline-block probes, then its .ln lines) must not
   inherit the indent, or every word would be pushed onto its own line. */
.stmt-pair__b > * { text-indent: 0; }
.stmt-pair__b .ln:first-child { padding-left: var(--pair-indent); }
.stmt-pair .stmt-pair__b.reveal.is-in .ln,
.stmt-pair .stmt-pair__b.reveal.is-in .ln__i {
  animation-delay: calc(var(--reveal-i, 0) * var(--heading-stagger) + var(--pair-beat));
}
.stmt-pair__sides {
  display: grid; grid-template-columns: max(var(--pair-indent), 40%) minmax(0, 1fr);
  margin-top: var(--sp-9);
}
.stmt-pair__side { padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.stmt-pair__side:first-child { padding-right: var(--sp-8); }
.stmt-pair__side > * + * { margin-top: var(--sp-3); }
.stmt-pair__side .link { margin-top: var(--sp-5); }
.stmt-pair__side > p:not(.stmt-pair__k) { max-width: 48ch; }
.stmt-pair__k {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.3; color: var(--fg);
}
.stmt-pair__k span {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums;
}

/* ---- SM03 · claim + consequence ledger ----
   <section class="stmt-claim"><div class="wrap stmt-claim__grid">
     <h2 class="reveal" data-reveal="lines">Claim. <span class="accent">Turn.</span></h2>
     <div class="stmt-claim__body" data-reveal-group>
       <p class="lead reveal">…</p>
       <dl class="stmt-claim__ledger"><div class="reveal"><dt>Key</dt><dd>What it means.</dd></div> × 2–4</dl>
       <a class="link reveal" href="…">…<span class="arrow"></span></a>
     </div>
   </div></section>
   The claim runs across nine columns; the ledger starts at the middle
   column, so the eye drops from the promise to how it is kept. */
.stmt-claim__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.stmt-claim__grid > h2 { grid-column: 1 / span 9; text-wrap: balance; }
.stmt-claim__body { grid-column: 7 / -1; margin-top: var(--sp-8); }
.stmt-claim__body .lead { max-width: 44ch; text-wrap: pretty; }
.stmt-claim__ledger { margin: var(--sp-6) 0 0; }
.stmt-claim__ledger > div {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.stmt-claim__ledger > div:last-child { border-bottom: 1px solid var(--hairline); }
.stmt-claim__ledger dt { font-size: var(--fs-small); font-weight: 600; line-height: 1.6; color: var(--fg); }
.stmt-claim__ledger dd { margin: 0; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.stmt-claim__body .link { margin-top: var(--sp-6); }

/* ---- SM04 · manifesto as signed clauses ----
   <section class="stmt-clauses"><div class="wrap stmt-clauses__grid">
     <div class="stmt-clauses__head"> .eyebrow · h2 </div>
     <ol class="stmt-clauses__list" data-reveal-group>
       <li class="reveal"><span class="stmt-clauses__n">§ 1</span><p class="stmt-clauses__s">Sentence.</p><p class="stmt-clauses__k">Where it is kept</p></li> × 3–5
     </ol>
     <p class="stmt-clauses__sign reveal"><span>Company</span><span>Place</span><span>Since</span></p>
   </div></section>
   The heading holds five columns; the clauses the other seven. Number,
   sentence and the place it is kept share a baseline, like a contract. */
.stmt-clauses { --clause-num: 4rem; --clause-key: 13rem; }
.stmt-clauses__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.stmt-clauses__head { grid-column: 1 / span 4; }
.stmt-clauses__head h2 { text-wrap: balance; }
.stmt-clauses__list { grid-column: 6 / -1; list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.stmt-clauses__list li {
  display: grid; grid-template-columns: var(--clause-num) minmax(0, 1fr) var(--clause-key);
  column-gap: var(--sp-4); align-items: baseline;
  padding-block: var(--sp-5); border-top: 1px solid var(--hairline);
}
.stmt-clauses__n { font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.stmt-clauses__s {
  font-family: var(--font-head); font-weight: 500; font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h2) * .42); line-height: 1.3; letter-spacing: -.012em;
  color: var(--fg); text-wrap: pretty;
}
.stmt-clauses__k { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-dim); text-align: right; }
.stmt-clauses__sign {
  grid-column: 6 / -1; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5);
  margin-top: 0; padding-top: var(--sp-4); border-top: 1px solid var(--fg);
  font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-muted);
}
.stmt-clauses__sign span:first-child { color: var(--fg); font-weight: 600; }

/* ---- SM05 · the silent question, answered ----
   <section class="stmt-ask"><div class="wrap stmt-ask__grid">
     <p class="eyebrow stmt-ask__eye">…</p>
     <h2 class="reveal" data-reveal="lines">Question <span class="accent">its turn?</span></h2>
     <div class="stmt-ask__answer reveal">
       <p class="stmt-ask__no">Nein.</p><p class="lead">…</p>
       <ol class="stmt-ask__phases"><li><span>01</span>Phase</li> × n</ol>
       <a class="link">…<span class="arrow"></span></a>
     </div>
   </div></section>
   The answer waits a beat (--ask-beat) and speaks in the accent face, in
   the text colour: the brand colour stays on the question's turn. */
.stmt-ask { --ask-beat: 420ms; }
.stmt-ask__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.stmt-ask__eye, .stmt-ask__grid > h2 { grid-column: 1 / span 9; }
.stmt-ask__grid > h2 { text-wrap: balance; }
.stmt-ask__answer { grid-column: 6 / -1; margin-top: var(--sp-8); }
.stmt-ask .stmt-ask__answer.reveal.is-in { animation-delay: var(--ask-beat); }
.stmt-ask__no {
  font-family: var(--font-accent, inherit); font-weight: var(--fw-accent, 400);
  font-size: calc(var(--fs-h2) * .8); line-height: 1; letter-spacing: var(--ls-accent, normal);
  color: var(--fg); font-synthesis: none;
}
.stmt-ask__answer .lead { margin-top: var(--sp-4); max-width: 46ch; text-wrap: pretty; }
.stmt-ask__phases {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4);
}
.stmt-ask__phases li {
  display: flex; gap: var(--sp-2); align-items: baseline;
  padding-block: var(--sp-2); border-top: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--fg);
}
.stmt-ask__phases span { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.stmt-ask__answer .link { margin-top: var(--sp-6); }

/* ---- SM06 · the pivot, signed by a person ----
   <section class="stmt-said"><div class="wrap stmt-said__grid">
     <figure class="stmt-said__fig">
       <blockquote class="stmt-said__q illuminate">Sentence, <span class="accent">its turn.</span></blockquote>
       <figcaption class="stmt-said__who"><div class="photo photo--people parallax">…</div><span class="stmt-said__name"><b>Name</b><span>Role</span></span></figcaption>
     </figure>
   </div></section>
   The quote is set as a heading (size and two voices) but stays a
   blockquote. JS adds .is-signed as the last word lights; until then the
   attribution waits below its place. */
.stmt-said { --said-rise: var(--sp-5); }
.stmt-said__fig {
  margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-5); align-items: end;
}
.stmt-said__q {
  grid-column: 1 / span 8; margin: 0;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h2); line-height: var(--lh-head);
  letter-spacing: var(--ls-head, var(--ls-display)); color: var(--head-1, var(--fg)); text-wrap: balance;
}
.stmt-said__q .accent {
  font-family: var(--font-accent, inherit); font-weight: var(--fw-accent, inherit);
  font-style: var(--accent-style, normal); font-size: calc(1em * var(--accent-scale, 1));
  letter-spacing: var(--ls-accent, inherit); font-synthesis: none;
}
.stmt-said__who { grid-column: 10 / -1; }
.stmt-said__name { display: grid; gap: 2px; margin-top: var(--sp-4); }
.stmt-said__name b { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.stmt-said__name span { font-size: var(--fs-small); color: var(--fg-dim); }
.stmt-said.is-armed .stmt-said__who {
  opacity: var(--illuminate-dim, .16); transform: translateY(var(--said-rise));
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-out);
}
.stmt-said.is-armed.is-signed .stmt-said__who { opacity: 1; transform: none; }

/* ---- SM07 · one sentence over a held photo ----
   <section class="stmt-held">
     <div class="stmt-held__bg"><img …></div>
     <div class="wrap stmt-held__track"><div class="stmt-held__panel"> .eyebrow · h2 · p · .link </div></div>
   </section>
   The photo is held by sticky (a viewport-filling crop, so no role
   ratio); the track overlaps it by one screen and the panel crosses it.
   JS writes --held-p (0…1); the scrim deepens with it. No scale. */
.stmt-held {
  --held-scrim: .2;        /* resting scrim */
  --held-deep: .35;        /* added by the time the panel has crossed */
  --held-lead: 72vh;       /* scroll before the panel arrives */
  --held-tail: 38vh;       /* after it */
  position: relative; padding-block: 0;
}
.stmt-held__bg { position: sticky; top: 0; height: 100vh; overflow: clip; }
.stmt-held__bg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); }
.stmt-held__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--bg); opacity: calc(var(--held-scrim) + var(--held-deep) * var(--held-p, .5));
}
.stmt-held__track { position: relative; margin-top: -100vh; padding-block: var(--held-lead) var(--held-tail); }
.stmt-held__panel {
  max-width: min(46rem, 100%); padding: var(--sp-7);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
}
.stmt-held__panel h2 { text-wrap: balance; }
.stmt-held__panel h2 + p { margin-top: var(--sp-5); max-width: 44ch; }
.stmt-held__panel .link { margin-top: var(--sp-5); }

/* ---- the group, reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stmt-proof.is-armed .stmt-proof__fig, .stmt-said.is-armed .stmt-said__who { transition: none; }
}

/* ---- the group on tablets ---- */
@media (max-width: 900px) {
  .stmt-proof__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); }
  .stmt-proof__h, .stmt-proof__fig { grid-column: 1; }
  .stmt-proof__fig { max-width: 26rem; }
  .stmt-pair__sides { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
  .stmt-pair__side:first-child { padding-right: 0; }
  .stmt-claim__grid > h2 { grid-column: 1 / -1; }
  .stmt-claim__body { grid-column: 3 / -1; margin-top: var(--sp-7); }
  .stmt-clauses__head, .stmt-clauses__list, .stmt-clauses__sign { grid-column: 1 / -1; }
  .stmt-clauses__list { margin-top: var(--sp-7); }
  .stmt-ask__eye, .stmt-ask__grid > h2 { grid-column: 1 / -1; }
  .stmt-ask__answer { grid-column: 3 / -1; margin-top: var(--sp-7); }
  .stmt-said__q { grid-column: 1 / -1; }
  .stmt-said__who {
    grid-column: 1 / -1; margin-top: var(--sp-7);
    display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-4); align-items: end;
  }
  .stmt-said__who .photo { border-radius: var(--img-radius-sm, 6px); --parallax-overscan: 0%; }
  .stmt-said__who .parallax img { transform: translate3d(0, -50%, 0); }
  .stmt-said__name { margin-top: 0; }
  .stmt-held { --held-lead: 58vh; --held-tail: 30vh; }
  .stmt-held__panel { padding: var(--sp-6); }
}

/* ---- the group on phones ---- */
@media (max-width: 640px) {
  .stmt-proof { --proof-size: calc(var(--fs-display) * 1.6); }
  .stmt-claim__body, .stmt-ask__answer { grid-column: 1 / -1; }
  .stmt-claim__ledger > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .stmt-clauses { --clause-num: 2.5rem; }
  .stmt-clauses__list li { grid-template-columns: var(--clause-num) minmax(0, 1fr); row-gap: var(--sp-2); }
  .stmt-clauses__s { font-size: var(--fs-lead); }
  .stmt-clauses__k { grid-column: 2; text-align: left; }
  .stmt-ask__grid > h2 { text-wrap: wrap; }   /* balance strands the accent's first word on phones */
  .stmt-ask__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stmt-said__who { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .stmt-held__panel { padding: var(--sp-5); }
}