/* ============================================================
   Quote 01 — section 02

   Below 900px this markup renders as its own static section (.q1).
   At 900px+ the section hides — the *same* three lines render again
   inside .wcov__pan--a (work-cover.css) as the Cover transition's
   Panel A, left-aligned there the same way Quote 02 is (alignment
   override lives in work-cover.css, scoped to the panel). Each
   sentence forces a manual <br> at a balanced point so it always
   reads as exactly two lines.

   Owner request Aug 2026: scroll-driven character fill is back —
   reverses the earlier "fully static, matches Quote 02" decision.
   Timing ported from refer/scroll-text-fill_1.html's third example
   ("slower reveal, custom start and end": feather 6, start 0.95, end
   0.25) — not its code (see quote-fill.js for why). Mobile (.q1)
   drives it the normal way, off real scroll position. Desktop (inside
   the pinned Cover panel, which doesn't scroll past the viewport the
   way a normal paragraph does) is driven instead by the Cover's own
   hold-phase progress — see work-cover.js. Both write the same --t
   custom property per character; this file only defines how --t
   becomes colour, once, for both cases.
   ============================================================ */

.q1{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:.5em;
  padding-block:var(--sp-9); padding-inline:var(--pad-inline);
}
@media (min-width:900px){
  .q1{ display:none; }
}

.q1__line{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-d2);
  line-height:1.16; letter-spacing:-.014em; margin:0;
  color:var(--fill-dim);
}
.q1__line [data-ch]{
  color:color-mix(in oklab, var(--fill-bright) calc(var(--t, 0) * 100%), var(--fill-dim));
}

.wcov__pan--a{ gap:.5em; }

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