/* The home page: the vigil in 3D, then the story on a pinned stage. */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header));
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.vigil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; touch-action: pan-y; }
.hero-text { text-align: center; padding: 0 var(--gutter); }
.hero-mark {
  font: 600 clamp(6rem, 3rem + 16vw, 15rem)/.9 var(--serif);
  letter-spacing: -.04em;
  background: var(--title-ink); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 .18em;
}
/* With the 3D numerals drawn, the text 333 stays for readers and machines and steps out of sight. */
.has-3d .hero-mark { opacity: 0; height: clamp(11rem, 7rem + 18vw, 19rem); }
.hero-line { font: 400 var(--caption)/1.25 var(--serif); max-width: 20em; margin: 0 auto 1.4em; color: var(--ink); text-wrap: balance; }
.hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; margin: 0;
  text-align: center; font-size: var(--small); color: var(--faint);
}
.hero-foot span { color: var(--dim); }

.band.first { padding-top: clamp(40px, 6vw, 80px); }
.below { margin: 18px 0 26px; }
.small-gap { margin-top: .8em; }
.band h3 { text-align: left; }
.band .lede { margin-bottom: 1.1em; }

/* The story. Without a script it is a list of sentences; with one, a pinned stage that the
   scroll position drives, one sentence over its picture at a time. */
.story { position: relative; }
.story .captions { list-style: none; margin: 0 auto; padding: 48px var(--gutter); max-width: 36rem; }
.story .captions li { font: 400 var(--caption)/1.3 var(--serif); margin: 0 0 1.2em; text-align: center; text-wrap: balance; }
.story .stage { display: none; }

.story.live { height: calc(var(--beats, 6) * 85svh + 100svh); }
.story.live .story-pin {
  position: sticky; top: var(--header);
  height: calc(100svh - var(--header));
  display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center;
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(16px, 4vh, 40px);
}
.story.live .captions { display: grid; padding: 0; width: min(100%, 24em); max-width: none; min-height: 3.9em; font-size: var(--caption); }
.story.live .captions li {
  grid-area: 1 / 1; margin: 0; font-size: 1em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.story.live .captions li.now { opacity: 1; transform: none; }
.story.live .stage { display: block; width: min(100%, 1120px); height: min(40svh, 360px); margin-top: clamp(16px, 4vh, 40px); }

.progress { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.progress i { width: 18px; height: 2px; background: var(--edge-strong); border-radius: 2px; }
.progress i.on { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .story.live .captions li { transition: none; transform: none; }
}
.hero-foot .line-epoch { display: inline; margin: 0; font: inherit; color: var(--faint); }
.hero-foot .line-epoch:not(:empty)::before { content: " · "; }