/* ═══════════════════════════════════════════════════════════════════════
   Layout: the measures the whole page is set on, and the one reveal
   every band shares.
   ═══════════════════════════════════════════════════════════════════════ */

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--gut);
}

.band{
  position:relative;
  padding-block:clamp(56px,9vw,104px);
}

.measure{max-width:var(--measure)}

.lede{
  font-size:var(--lede);
  line-height:1.58;
  color:var(--text-2);
  text-wrap:pretty;
}

.band h2,
.act h2{
  font-size:var(--title);
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
  /* Lit from the top, the way the headline is, so the page reads as one
     surface with a light on it rather than as six screens of white text. */
  background:linear-gradient(172deg,#ffffff 0%,#ffffff 52%,#cbd3d7 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* A heading has a line-height tight enough that the paragraph under it
   needs to be told to stand off, or the two run together. */
.act h2 + .lede,
.act .notes-grid .lede{margin-top:22px}
.band > .wrap > .lede,
.band .lede{margin-top:18px}

/* ── an act's parts ─────────────────────────────────────────────────
   The act itself is faded and drifted by the script. Its parts are
   staggered on top of that, each one a little behind the last, which is
   what makes an act read as being assembled rather than switched on. The
   script sets --t per element; the offsets live here. */
.reel.is-live [data-step]{
  opacity:var(--in,1);
  transform:translate3d(0,var(--rise,0px),0);
}

/* ── reveal ─────────────────────────────────────────────────────────
   Set only while .tk-anim is on <html>, which an inline head script adds
   before the first paint and takes back off if the module never arrives.
   Scripting off, motion off, or a module that 404s all end with the page
   simply visible. */
.tk-anim [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  will-change:opacity,transform;
}
.tk-anim [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:auto;
}
/* Items in a row arrive one after another rather than all at once. */
.tk-anim [data-reveal].is-in{transition-delay:calc(var(--i,0) * 90ms)}