/* The photograph is the opening; typography sits quietly within the frame. */
.hero { min-height: 100vh; min-height: 100svh; background: #171318; }
.hero__frames { overflow: hidden; }
.hero__frame { opacity: 0; object-position: 50% 48%; transition: opacity 1800ms ease-in-out; }
.hero__frame.is-outgoing { opacity: 1; z-index: 1; }
.hero__frame.is-active { opacity: 1; z-index: 2; }
.hero__shade {
  background: linear-gradient(180deg, rgba(7,7,8,.35), transparent 28%, rgba(7,7,8,.12) 48%, rgba(7,7,8,.8)),
    radial-gradient(ellipse at 50% 56%, rgba(7,7,8,.22), transparent 70%);
}
.hero__content { width: 100%; padding: 110px var(--gutter) 150px; gap: 22px; }
.hero__title { width: min(66vw, 650px); }
.hero__logo { width: 100%; filter: drop-shadow(0 3px 22px #0008); }
.hero__line { font-size: clamp(1.45rem, 2.1vw, 2.1rem); letter-spacing: .015em; }
.hero__eyebrow { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .28em; color: #f2ece2cf; }
.hero__cue { bottom: max(32px, env(safe-area-inset-bottom)); gap: 14px; padding: 8px 16px; color: #f2ece2d9; font-size: .72rem; }
.hero__cue-line { height: 42px; }
.hero__edition { position: absolute; left: var(--gutter); bottom: 48px; color: #f2ece2b8; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.hero__pause { position: absolute; right: var(--gutter); bottom: 36px; min-height: 44px; padding: 10px 14px; border: 1px solid #f2ece250; background: #0b0b0c40; color: #f2ece2; border-radius: 0; font-size: .75rem; letter-spacing: .06em; }
.hero__pause:hover { background: #0b0b0caa; border-color: #f2ece2; }
@media (max-width: 699px) {
  .hero__title { width: min(86vw, 450px); }
  .hero__content { gap: 20px; padding-bottom: 165px; }
  .hero__eyebrow { font-size: .72rem; letter-spacing: .22em; }
  .hero__line { font-size: 1.4rem; }
  .hero__edition { display: none; }
  .hero__pause { bottom: 22px; right: 16px; font-size: .75rem; padding-inline: 10px; }
  .hero__cue { bottom: 29px; padding-inline: 2px; min-width: 44px; min-height: 44px; }
  .hero__cue-line { height: 30px; }
}
@media (max-height: 540px) and (min-width: 700px) {
  .hero__title { width: 330px; }
  .hero__content { gap: 8px; padding: 80px 24px 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__frame { transition: none; transform: none !important; }
  .hero__frame:not(:first-child) { opacity: 0 !important; }
  .hero__frame:first-child { opacity: 1 !important; }
}

.hero__pause.is-obscured { visibility: hidden; pointer-events: none; }