/* ============================================================
   XXVI — Round 15 · the shell
   Mobile first at 390 px. The desktop block re-composes only.

   Three phases, held by the shared runtime rather than by taste:
     · ARRIVAL   (~0–2s)   a system with real energy
     · DISCOVERY (~2–8s)   it slows, organises, and XXVI is found
       inside it — a peak, never a plateau
     · RESTRAINT (~8–13s)  XXVI recedes to a quiet resting level
       and blends back into the system; the sentence finishes
       resolving over the same span
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;   /* task 004 (I15): the small viewport wins where it is known (the order was reversed, so 100vh won) */
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(50px + 26px) 22px 26px;
}
.hero canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;
}

/* ---------- the sentence -----------------------------------
   Present from early, at a trace of itself; resolves alongside
   discovery and stays resolved through restraint. */

.type{position:relative;z-index:2;align-self:end;padding-bottom:40px}

.type h1{
  margin:0;
  font-size:37px;
  line-height:1.1;
  letter-spacing:-.028em;
  font-weight:400;
  color:var(--ink);
}
.type h1 b{font-weight:600}
.type h1 em{font-style:normal;color:var(--gold)}
.type h1 .ln{display:block;white-space:nowrap;will-change:opacity,letter-spacing,transform,color}

.type .lede{
  margin:22px 0 0;
  font-size:15.5px;
  line-height:1.52;
  letter-spacing:-.004em;
  color:var(--ink-2);
  font-weight:400;
}
.type .aud{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
  line-height:1.6;
  color:var(--ink-3);
  display:flex;align-items:center;gap:10px;
}
/* the one place gold reaches the lower text: a short measured
   tick, the same material as the mark's V, never the words
   themselves -- the copy stays exactly the approved copy */
.type .aud .tick{
  flex:0 0 auto;display:block;width:14px;height:1px;
  background:var(--gold);opacity:.85;
}
.res{opacity:0}

/* units created by H.splitChars / H.splitWords -- inline-block so
   opacity/transform/filter actually animate per unit; a concept's
   own <style> sets the rest */
.type h1 .ch,.type h1 .wd{display:inline-block;will-change:opacity,transform,filter}

/* task 077: the hero's "Again" button (.replay) is removed, with its rules */

@media(min-width:821px){
  .hero{
    padding:calc(56px + 52px) clamp(30px,4.4vw,86px) 52px;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .type{align-self:stretch;padding-bottom:0}
  .type h1{font-size:clamp(46px,5.2vw,74px);line-height:1.06;letter-spacing:-.032em}
  .type .lede{font-size:17px;margin-top:30px;max-width:36ch}
  .type .aud{font-size:12px;margin-top:16px}
}

@media(max-width:820px) and (max-height:520px){
  .hero{padding-top:58px}
  .type h1{font-size:27px}
  .type .lede{font-size:14px;margin-top:14px}
  .type .aud{display:none}
}