@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/barlow-condensed-extrabold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #151318;
  color: #f1e7d8;
  font-family: Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 240px; min-height: 100%; }

body { background: #151318; }

.stage {
  isolation: isolate;
  position: relative;
  min-height: 600px;
  height: 100svh;
  overflow: hidden;
  background: #151318;
}

.stage__art, .stage__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__art { z-index: -2; }
.stage__art img { object-fit: cover; object-position: center; }

.stage__title {
  position: absolute;
  top: 24%;
  left: max(7.3vw, env(safe-area-inset-left));
  right: 4vw;
}

h1 {
  margin: 0;
  font-family: "Barlow Condensed", Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(90px, 16vw, 320px);
  font-weight: 800;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: nowrap;
}

@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .stage { min-height: 560px; }
  .stage__art {
    inset: auto 0 0;
    height: 72%;
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }
  .stage__art img { object-position: center bottom; }
  .stage__title {
    top: max(11.8svh, calc(env(safe-area-inset-top) + 48px));
    left: max(8vw, env(safe-area-inset-left));
    right: max(8vw, env(safe-area-inset-right));
  }
  h1 { font-size: clamp(42px, 23.5vw, 180px); letter-spacing: 0; }
}

@media (max-height: 540px) and (min-width: 701px) {
  .stage { min-height: 360px; }
  .stage__title { top: 20%; }
  h1 { font-size: 12vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .stage__art { animation: stage-reveal 1000ms ease-out both; }
  .stage__title { animation: title-reveal 700ms 100ms ease-out both; }
  @keyframes stage-reveal { from { opacity: 0; } to { opacity: 1; } }
  @keyframes title-reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
}