:root {
  color-scheme: dark;
  background: #0b0d10;
  color: #eee7d9;
  font: 1rem/1.5 system-ui, sans-serif;
  --gold: #d5b47d;
  --gutter: clamp(24px, 6vw, 108px);
}

* { box-sizing: border-box; }
body { margin: 0; }
a, button { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #f1d6a3; outline-offset: 5px; }

.teaser {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(72px, 12vh, 128px) var(--gutter) 110px;
}

.scene, .scene::after, .scene img, .scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene { z-index: -1; overflow: hidden; }
.scene img, .scene video { object-fit: cover; object-position: 71% 50%; }
.scene video { visibility: hidden; }
.scene video.is-ready { visibility: visible; }
.scene::after {
  content: "";
  background: linear-gradient(90deg, #090b0edc 0%, #090b0e9c 36%, #090b0e1a 63%, transparent 80%),
              linear-gradient(0deg, #090b0ee8 0%, transparent 27%);
}

.hero { width: min(100%, 590px); }
.genre, footer p {
  margin: 0;
  color: #e8d4b1;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.genre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.genre::before { content: ""; width: 25px; height: 1px; background: var(--gold); }
h1 { margin: 0; }
h1 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 24px #0009); }
.details { margin-top: clamp(24px, 5vh, 48px); }
.announcement { margin: 0 0 6px; font-family: Georgia, serif; font-size: clamp(1.4rem, 2.4vw, 2.15rem); }
.details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #e5c997;
  font-size: 1rem;
  text-underline-offset: 5px;
  text-decoration-color: #bb9860;
}
.details a:hover { color: #fff0d2; }

footer {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 4vh, 42px);
  left: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
}
footer p { color: #d2c6b3; }
button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #d5b47d70;
  border-radius: 2px;
  background: #0b0d10cc;
  color: #f2e5cd;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
button:hover { border-color: var(--gold); }

@media (max-width: 760px) {
  .teaser { align-items: end; padding-top: min(45svh, 400px); padding-bottom: 100px; }
  .scene img, .scene video { object-position: 72% 45%; }
  .scene::after {
    background: linear-gradient(0deg, #090b0e 0%, #090b0edb 30%, #090b0e30 67%, transparent 88%);
  }
  .hero { width: min(100%, 470px); }
  .genre { margin-bottom: 18px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .teaser { padding-top: 30px; padding-bottom: 76px; }
  .hero { width: min(60%, 450px); }
  .details { margin-top: 20px; }
}