/* ============================================================
   Quote 02 — section 04
   Ported from refer/quote-02_2.html.

   Owner request Aug 2026: scroll-driven character fill (see
   quote-fill.js and quote01.css for the full reasoning). Reverses
   this file's own earlier "deliberately static" decision.

   Second correction, same day: the screen should hold still — even
   while still scrolling — for the fill to play out, then release into
   Method once it's done, the same "lock, then fill, then move on"
   feel Quote 01's Cover panel already has. #q2-stage pins .q2 via
   position:sticky (200vh tall; the extra 100vh is the scroll budget
   the hold spends before releasing), and quote-fill.js drives the
   fill from that pin's own scroll progress instead of a normal
   getBoundingClientRect-based one — same pattern as work-cover.js's
   Panel A, not the ordinary Fill class mobile Quote 1 uses.
   ============================================================ */

#q2-stage{ position:relative; height:200vh; }
.q2{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
  padding-block:var(--sp-9); padding-inline:var(--pad-inline);
}

@media (prefers-reduced-motion:reduce){
  #q2-stage{ height:auto; }
  .q2{ position:static; height:auto; min-height:100vh; }
}

.q2__line{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-d2);
  line-height:1.16; letter-spacing:-.014em; margin:0;
  /* em, not ch — a ch is the width of a zero, and Anton's zero is far
     narrower than its average letter. 9.8em is sized off the real
     advance of the longest line, 22 characters. */
  max-width:9.8em;
  text-wrap:balance;
  color:var(--fill-dim);
}
.q2__line [data-ch]{
  color:color-mix(in oklab, var(--fill-bright) calc(var(--t, 0) * 100%), var(--fill-dim));
}

/* Forced only where there is room for it to help; below 900px the
   browser's own wrap produces a better rag than a forced break would. */
.q2__brk{ display:none; }
@media (min-width:900px){ .q2__brk{ display:inline; } }

@media (prefers-reduced-motion:reduce){
  .q2__line{ color:var(--fill-bright); }
  .q2__line [data-ch]{ color:inherit; }
}