:root { --ab-color-gold: #BB9572; color-scheme: dark; background: #030405; color: #f6f2ea; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; }
body { background: #030405; }
.hero { position: relative; isolation: isolate; width: 100%; min-height: 100svh; height: 100dvh; overflow: hidden; }
.scene { position: absolute; z-index: -1; inset: 0; display: block; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 100%; }
.announcement { position: absolute; top: max(8.5svh, 28px); left: max(5vw, env(safe-area-inset-left)); width: 50vw; text-align: right; }
h1 { margin: 0; padding: 0; line-height: 0; }
.wordmark { display: block; width: 100%; height: auto; opacity: 1; }
.status { margin: clamp(20px, 2.6vh, 38px) -.12em 0 0; color: var(--ab-color-gold); font-size: clamp(22px, 2vw, 40px); line-height: 1.25; font-weight: 400; letter-spacing: .12em; }
@media (max-aspect-ratio: 3/4) {
  .announcement { top: max(6svh, 28px); left: max(4vw, env(safe-area-inset-left)); width: 92vw; text-align: center; }
  .status { margin: clamp(18px, 2.5svh, 28px) 0 0; font-size: clamp(22px, 5.8vw, 30px); }
  .premiere-year { display: block; margin-top: 7px; font-size: 1.5em; letter-spacing: .16em; padding-left: .16em; }
  .scene { inset: 0; width: 100%; height: 100%; }
  .scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}
@media (max-height: 500px) and (min-aspect-ratio: 3/4) {
  .announcement { top: max(7svh, env(safe-area-inset-top)); }
  .status { margin-top: 12px; font-size: 20px; }
}