/* ============================================================================
   OPENING — the first breath. Mostly darkness, a single enormous sentence,
   his name arriving quietly and late.
   ============================================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(6rem, 16vh, 11rem) clamp(2rem, 6vh, 3.5rem);
  overflow: hidden;
}

/* A near-black frame drifting behind the type — the room, not a picture. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg-frame { position: absolute; inset: -8% -4%; opacity: 0.9; transform: scale(1.04); }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,8,0.4) 0%, transparent 30%, rgba(6,7,8,0.85) 100%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  color: var(--c-ink-dim);
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}
.hero__eyebrow span { position: relative; }
.hero__eyebrow span + span::before {
  content: "";
  position: absolute; left: -0.9rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--c-accent); transform: translateY(-50%);
}

.hero__title {
  font-size: var(--fs-mega);
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  max-width: 16ch;
}
.hero__line { display: block; overflow: hidden; }

.hero__lede { color: var(--c-ink-dim); }

/* Scroll cue — a word and a line that breathes downward. In normal flow at the
   foot of the hero column, so it can never collide with the copy above it. */
.hero__scroll {
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 6vh, 4rem);
  align-self: flex-end;
  padding-right: var(--gutter);
  color: var(--c-ink-dim);
}
.hero__scroll-word { }
.hero__scroll-line { position: relative; width: 1px; height: clamp(3rem, 8vh, 5rem); background: var(--c-line); overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--c-accent);
  animation: hero-drip 2.6s var(--e-inout) infinite;
}
@keyframes hero-drip { 0% { transform: translateY(0); } 100% { transform: translateY(200%); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { display: none; } }
@media (max-width: 40rem) {
  .hero__scroll { align-self: flex-start; justify-items: start; padding-right: 0; padding-left: var(--gutter); }
}