/* Phase 1 teaser layout. Replaced by full-site styles in Milestone 2. */
.teaser {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  text-align: center;
  background: var(--ink);
  overflow: hidden;
}
/* Hero media is a real <img> (LCP-optimizable), not a CSS background */
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.teaser > *:not(.hero-media):not(.masthead) { position: relative; z-index: 1; } /* above scrim; masthead keeps its own absolute positioning */

.masthead {
  position: absolute;
  z-index: 1;
  top: clamp(1rem, 3vh, 2rem);
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  color: var(--ivory);
}
.masthead small { display: block; letter-spacing: 0.24em; color: var(--champagne); }
.masthead span:first-child { text-align: left; }
.masthead span:last-child { text-align: right; }

.names { display: grid; line-height: 1.18; } /* script descenders paint ~0.35em below the box — 0.9 collides */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--size-hero-script);
  color: var(--ivory);
}
.script.amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(var(--size-hero-script) * 0.5);
  color: var(--champagne);
}

.dateline { color: var(--ivory); }

.trailer { width: min(52rem, 100%); }
.trailer video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(201,169,97,0.35);
}
.trailer figcaption { margin-top: 0.75rem; }

.cta p { max-width: 32ch; margin-inline: auto; margin-bottom: 1.25rem; color: var(--ivory); }

.lockup { margin-top: clamp(1rem, 4vh, 2rem); }
.lockup .caps {
  font-family: var(--font-caps);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}
.lockup hr {
  width: 8rem; margin: 0.6rem auto;
  border: 0; border-top: 1px solid var(--gold);
}

@media (max-width: 640px) {
  .masthead { font-size: 0.5625rem; }
}