/* ═══════════════════════════════════════════════════════════════════════
   Sections: header, hero, the closing band, the footer, and the one
   page-load sequence they share.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────────────
   Over the first screen, not above it. It belongs to the hero and leaves
   with it, which is one less thing between the reel and the eye: a bar
   that stays puts a line across every act, and the reel already has a
   line of its own along the bottom of the card strand.

   Absolute rather than in the flow, because in the flow it pushed the
   pinned stage seventy pixels down the page — so the first screen, the
   only one the header is on, was the one screen where the stage ran past
   the fold and took the scroll cue with it. */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding-block:13px;
  background:transparent;
}
.head-in{display:flex;align-items:center;gap:16px}

/* What this is, said once, where somebody looks first. The header was the
   mark and a button with a gap between them, and the gap read as something
   missing rather than as room. */
.head-tag{
  margin-right:auto;
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:100px;
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-lit);
  background:var(--signal-dim);
  border:1px solid rgba(138,180,248,.26);
  white-space:nowrap;
}

/* ── the lit top ────────────────────────────────────────────────────
   The page is one black. This is that black with a light on it, fading

/* width:100% because an act's .wrap is a flex item: without it the box
   shrinks to its content and `margin:0 auto` then centres *that*, which
   set the headline to the right of every other section on the page. */
.act .wrap{position:relative;width:100%}

/* ── closing ────────────────────────────────────────────────────────
   This was a full-bleed blue band. The blue is still what you look at,
   but it is now light thrown onto the black rather than a block of paint
   interrupting it, and the page ends on the same ground it began on. */
.close{position:relative;overflow:hidden}
/* The wash the closing band arrives on. */
.band.close::before{
  content:"";position:absolute;pointer-events:none;
  left:50%;right:auto;top:-40%;
  width:min(1500px,160vw);height:min(1100px,120vh);
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 52% at 50% 46%,rgba(21,98,221,.32),transparent 70%);
}
.close .wrap{position:relative}
.close h2{
  color:var(--text);
  font-size:clamp(30px,4.6vw,50px);max-width:20ch;text-wrap:balance;
}
.close .lede{color:var(--text-2);max-width:44ch;margin-top:22px}
.close .fine{font-size:15px;color:var(--text-3);margin:26px 0 0;max-width:48ch}
/* What the page says, and what it asks you to do, side by side. */
.close-in{
  display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(32px,6vw,80px);align-items:center;
}

/* ── footer ─────────────────────────────────────────────────────────  */
.site-foot{padding-block:30px 44px;font-size:15px;color:var(--text-3)}
.foot-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  border-top:1px solid var(--line);padding-top:26px;
}
.foot-in .mark{margin-right:auto;color:var(--text-2)}
.foot-in .mark:hover{color:var(--text)}
.site-foot a{
  color:var(--text-3);text-decoration:none;
  padding:8px 0;min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--t-fast) ease;
}
.site-foot a:hover{color:var(--text)}
.foot-c{color:var(--text-4)}

/* ── one page-load sequence: the headline prints, then the rest ─────
   .tk-anim goes on <html> before the first paint, so nothing is ever
   hidden on a browser that will not animate it back. .tk-go starts the
   run once the webfont has landed, or 1.5s later, whichever comes first. */
@media (prefers-reduced-motion:no-preference){
  .tk-anim .act-hero h1{clip-path:inset(0 100% -18% 0)}
  .tk-anim .act-hero .lede,
  .tk-anim .cue,
  .tk-anim .head-tag{opacity:0;transform:translateY(12px)}

  .tk-go .act-hero h1{animation:tk-print .72s var(--ease-out) .06s forwards}
  .tk-go .act-hero .lede{animation:tk-settle .6s var(--ease) .48s forwards}
  .tk-go .head-tag{animation:tk-settle .6s var(--ease) .72s forwards}
  .tk-go .cue{animation:tk-settle .6s var(--ease) .95s forwards}

  /* Nothing animates an act in: the script holds every one of them from
     the first frame, and a CSS animation outranks the inline style it
     would be setting, so one would quietly take the layer from the other. */
}
@keyframes tk-print{to{clip-path:inset(0 0 -18% 0)}}
@keyframes tk-settle{to{opacity:1;transform:none}}

/* ── responsive ─────────────────────────────────────────────────────  */
@media (max-width:960px){
  .close-in{grid-template-columns:1fr;gap:40px}
  .notes-grid{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:1fr}
  .steps li{padding:22px 0 6px}
  .steps li + li{border-left:0}
  .steps li + li::before{left:0;width:40%}
}
/* The header is three things on one row and a phone has room for two. The
   tag goes: the button is the one that has to survive, and a button whose
   label wraps onto three lines takes a quarter of the stage with it,
   because every act on the reel is padded by the header's measured height. */
@media (max-width:620px){
  .head-tag{display:none}
  .mark{margin-right:auto}
}

@media (max-width:800px){
  .head-in{gap:14px}
  .ledger{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .note{--tilt:0deg!important}
}
@media (max-width:480px){
  body{font-size:16px}
}