@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --base: #04060a;
  --ink: #e8eef5;
  --muted: #b2bfcb;
  --accent: #57d4f0;
  --rule: #233140;
  --gutter: clamp(1.25rem, 5.4vw, 6rem);
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--base);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 0.23em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.masthead, .credits {
  max-width: 105rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.series, .eyebrow, .credits-link {
  font: 500 0.75rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.series { color: var(--ink); }
.credits-link { color: var(--muted); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  max-width: 105rem;
  min-height: clamp(35rem, 50vw, 46rem);
  margin-inline: auto;
  border-block: 1px solid var(--rule);
  background: #0b1119;
}

.hero-art, .hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-art {
  z-index: -2;
  object-fit: cover;
  object-position: right 20%;
}

.hero::after {
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, #04060a 0%, #04060aeb 21%, #04060a95 42%, transparent 68%);
}

.hero-copy {
  max-width: 37rem;
  padding: 3rem 0 3rem var(--gutter);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
}

h1 {
  margin: 0.22em 0 0.28em;
  font-size: clamp(3.7rem, 7vw, 7.25rem);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.065em;
}

.premise {
  max-width: 25rem;
  margin: 0;
  color: #d1dbe4;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.58;
}

.play-link {
  display: inline-flex;
  gap: 1.4rem;
  align-items: center;
  min-height: 3.25rem;
  margin-top: 1.75rem;
  padding: 0.75rem 1.15rem;
  background: var(--accent);
  color: var(--base);
  font-weight: 700;
  text-decoration: none;
}

.play-link:hover {
  background: #a6edfc;
  color: var(--base);
}

.play-link span { font-size: 1.25rem; line-height: 1; }

.credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  padding-block: 1.5rem 2.25rem;
}

.credits p { margin: 0; line-height: 1.6; }
.credits .track-list { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 46rem) {
  .masthead { min-height: 3.5rem; }
  .series, .credits-link { font-size: 0.65rem; letter-spacing: 0.09em; }

  .hero {
    display: block;
    min-height: 0;
    background: var(--base);
  }

  .hero-art {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 5 / 4;
    object-position: 91% center;
  }

  .hero::after { content: none; }

  .hero-copy {
    position: relative;
    margin-top: -3.4rem;
    padding: 2.5rem var(--gutter) 2.25rem;
    background: linear-gradient(180deg, transparent 0, var(--base) 3.4rem);
  }

  h1 { font-size: clamp(3.5rem, 11vw, 5rem); }
}