/* ═══ Wildlight ═══ */
:root{
  --ink:#050505;
  --paper:#F7F4EE;
  --pad:20px;
  --ease:cubic-bezier(.22,.61,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--paper);
  font-family:'Instrument Sans',system-ui,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── the scroll runway ── */
/* a runway long enough to teleport within — the piece never ends */
.space{height:900vh;pointer-events:none}

/* ── the field ── */
/* One canvas, nothing stacked on it. Every atmospheric pass — bloom,
   radial defocus, haze, glare, vignette, grain — used to be its own fixed
   full-screen layer, three of them with mix-blend-mode. A blended layer
   forces the compositor to read back everything beneath it into a blend
   group, which defeats tile caching, and it has to redo that every frame
   because the canvas underneath invalidates every frame. Drawing the same
   passes inside the canvas costs a few small blits instead. */
.fld{position:fixed;inset:0;z-index:0;background:var(--ink);overflow:hidden}
.fld canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ── header ── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:12;
  height:76px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
}
.mark{
  font-weight:700;font-size:26px;letter-spacing:-.035em;
  line-height:1;pointer-events:auto;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 22px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  pointer-events:auto;transition:transform .4s var(--ease),background .3s linear;
}
.pill-dark{background:rgba(18,18,18,.82);color:var(--paper)}
.pill-light{background:var(--paper);color:#0B0B0B;height:52px;padding:0 30px;font-size:17px}
.pill:active{transform:scale(.96)}
.rosette{width:34px;height:34px;display:block;opacity:.95;animation:spin 26s linear infinite}
.rosette svg{width:100%;height:100%;display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── headlines ── */
.heads{
  position:fixed;left:0;right:0;top:50%;z-index:11;
  transform:translateY(-58%);
  padding:0 22px;text-align:center;pointer-events:none;
}
.hd{
  position:absolute;left:22px;right:22px;top:0;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(34px,10.2vw,64px);line-height:1.06;letter-spacing:-.012em;
  opacity:0;transition:opacity .55s linear;
}
.hd em{font-style:italic}
.hd.is-on{opacity:1}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln i{
  display:block;font-style:normal;
  transform:translateY(112%);
  transition:transform .95s var(--ease);
}
.hd.is-on .ln i{transform:translateY(0)}
.hd.is-on .ln:nth-child(2) i{transition-delay:.08s}

/* ── station rail ── */
.rail{
  opacity:0;transition:opacity .8s linear;
  position:fixed;right:var(--pad);top:50%;z-index:11;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  pointer-events:none;
}
body.go .rail{opacity:1}
.rl-lab{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;writing-mode:vertical-rl;
  transition:opacity .4s linear;
}
.rl-track{
  position:relative;width:1px;height:132px;
  background:rgba(247,244,238,.16);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.rl-track i{width:3px;height:3px;border-radius:50%;background:rgba(247,244,238,.34);margin-left:-1px}
.rl-track em{
  position:absolute;left:0;top:0;width:1px;background:var(--paper);
  height:132px;transform:scaleY(0);transform-origin:top;will-change:transform;
}

/* ── foot ── */
.foot{
  position:fixed;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));
  z-index:12;display:flex;flex-direction:column;align-items:center;gap:22px;
  pointer-events:none;
}
.aud{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;gap:2.5px;
  pointer-events:auto;
}
.aud s{
  width:2px;height:12px;background:var(--paper);border-radius:2px;
  animation:eq 1.1s ease-in-out infinite;
}
.aud s:nth-child(1){animation-delay:0s}   .aud s:nth-child(2){animation-delay:.18s}
.aud s:nth-child(3){animation-delay:.36s} .aud s:nth-child(4){animation-delay:.54s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.aud.off s{animation-play-state:paused;transform:scaleY(.35)}

/* ── boot ──
   Not a fade. The wordmark rises out of a mask, the black lifts to show
   the meadow sprouting behind it, then the wordmark rises back out and
   the first headline takes its place. Same masked-line language as the
   headlines, so the intro and the page read as one piece. */
.boot{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;pointer-events:none;
  transition:opacity .5s linear,visibility 0s .5s;
}
.boot-bg{
  position:absolute;inset:0;background:var(--ink);
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1);
}
.boot-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.boot-ln{display:block;overflow:hidden;padding:0 .08em}
.boot-ln>b,.boot-ln>i{
  display:block;font-style:normal;
  transform:translateY(118%);
  transition:transform 1s var(--ease);
}
.boot-ln>b{font-weight:700;font-size:38px;letter-spacing:-.035em;line-height:1.08}
.boot-sub>i{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;line-height:1.4}
.boot-ln:nth-child(2)>i{transition-delay:.1s}

.boot.in  .boot-ln>b,.boot.in  .boot-ln>i{transform:translateY(0)}
.boot.clear .boot-bg{opacity:0}
.boot.out .boot-ln>b,.boot.out .boot-ln>i{
  transform:translateY(-118%);
  transition:transform .8s cubic-bezier(.6,0,.3,1);
}
.boot.out .boot-ln:nth-child(2)>i{transition-delay:0s}
.boot.gone{opacity:0;visibility:hidden}

@media (min-width:760px){
  :root{--pad:34px}
  .hd{font-size:clamp(52px,5.6vw,86px);left:8vw;right:8vw}
  .mark{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .rosette,.aud s{animation:none}
}