/* Keeps the supplied 3:1 artwork fully visible and all live text separate. */
.hero {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 82px;
  background: radial-gradient(circle at 50% 0, #3b0008 0, transparent 56%), #090405;
}
.hero-image {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 3 / 1;
  margin-top: 86px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #080506;
  transform: none;
  animation: cinemaReveal 1.1s ease-out both;
}
.hero-shade { display: none; }
.hero-content { padding-top: 46px; }
.hero h1 {
  font-size: clamp(72px, 9vw, 132px);
  line-height: .82;
  margin-bottom: 24px;
}
.hero .ticker { margin-top: 8px; }
.hero h2 { margin-top: 26px; }
.hero .cta-row { gap: 16px; margin-top: 32px; }
@keyframes cinemaReveal {
  from { opacity: .25; filter: saturate(.7) brightness(.3); }
  to { opacity: 1; filter: saturate(1.14) contrast(1.07); }
}
@media (max-width: 760px) {
  .hero { min-height: 0; padding-bottom: 68px; }
  .hero-image { margin-top: 70px; background-position: center; }
  .hero-content { padding-top: 38px; }
  .hero h1 { font-size: 20vw; line-height: .9; margin-bottom: 22px; }
  .hero .ticker { margin-top: 12px; }
  .hero h2 { line-height: 1.25; margin: 28px auto 14px; }
  .hero-content > p:not(.eyebrow) { line-height: 1.75; }
  .hero-content > p:not(.eyebrow) br { display: block; }
  .hero .cta-row { gap: 14px; margin-top: 30px; }
}

/* Roomier typography throughout the site. */
.brand,
nav,
.eyebrow,
.kicker,
h1,
h2,
.ticker,
.symbol,
.footer-brand,
.btn,
.scroll-cue,
.section-number,
.story-copy .lead,
.marquee > p,
.meaning,
.punchline,
.token-identity p,
dt,
dd,
.copy-icon,
.footer-links button,
.social-grid small,
.social-grid strong,
footer p,
.footer-links,
.toast {
  font-family: Inter, Arial, sans-serif;
}
.brand-mark { letter-spacing: .08em; line-height: 1.2; }
nav { letter-spacing: .2em; }
.section h2 { line-height: 1.02; letter-spacing: .015em; }
.hero h1 { line-height: .95; letter-spacing: .025em; }
.hero h2 { line-height: 1.35; letter-spacing: .13em; }
.story-copy .lead { line-height: 1.45; letter-spacing: .015em; }
.story-copy p { line-height: 1.85; }
.marquee h2 { line-height: 1.08; letter-spacing: .06em; }
.meaning { gap: 5%; line-height: 1.7; letter-spacing: .14em; }
.symbol { line-height: 1; letter-spacing: .015em; }
.punchline { line-height: 1.55; }
.btn { line-height: 1.35; letter-spacing: .16em; }
.social-grid strong { line-height: 1.35; letter-spacing: .035em; }
.footer-brand { line-height: 1.35; letter-spacing: .02em; }
@media (max-width: 760px) {
  .hero h1 { line-height: 1.02; }
  .section h2 { line-height: 1.08; }
  .meaning { gap: 14px; line-height: 1.8; }
  .social-grid strong { line-height: 1.45; }
}