:root {
  --black: #000000;
  --white: #ffffff;
  --ash: #9a9a9a;
  --graphite: #262626;

  --gutter: clamp(16px, 3vw, 40px);
  --shutter: cubic-bezier(.7, 0, .2, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--black); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:is(a, button):focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Subtitles: every word the studio says is spoken this way. */
.subtitle {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 86%;
  margin: 0;
  text-align: center;
  font-size: clamp(15px, 1.45vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 0 2px var(--black), 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}

.subtitle:empty { display: none; }

/* Hero: the reel in a 2.39:1 frame, centred like a projection. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--gutter) * 3) var(--gutter);
}

.masthead {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--gutter);
}

.logotype {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.masthead a {
  font-size: 14px;
  color: var(--ash);
  text-decoration: none;
  transition: color .3s ease;
}

.masthead a:hover { color: var(--white); }

.stage {
  position: relative;
  width: min(100%, 1280px, calc((100svh - 12rem) * 2.39));
}

.frame {
  position: relative;
  margin: 0;
  aspect-ratio: 2.39 / 1;
  background: var(--black);
}

.frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The one orchestrated moment: a projector line opens into the frame. */
@media (prefers-reduced-motion: no-preference) {
  .stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--white);
    transform: scaleX(0);
    animation: line 1.7s var(--shutter) .2s both;
    pointer-events: none;
  }

  .frame { animation: shutter 1.2s var(--shutter) .85s both; }

  .masthead { animation: appear 1s ease 1.8s both; }
}

@keyframes line {
  0%   { transform: scaleX(0); opacity: 1; }
  40%  { transform: scaleX(1); opacity: 1; }
  75%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes shutter {
  from { clip-path: inset(calc(50% - .5px) 0); }
  to   { clip-path: inset(0); }
}

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Film: grey until you ask for it. */
.film {
  display: grid;
  justify-items: center;
  padding: 16vh var(--gutter) 8vh;
}

.film-inner { width: min(100%, 1120px); }

.film-head { margin-bottom: clamp(24px, 4vw, 48px); }

.film-title {
  margin: 0;
  font-size: clamp(44px, 8.6vw, 136px);
  font-weight: 300;
  font-stretch: 125%;
  line-height: .95;
  letter-spacing: -.035em;
}

.film-alt {
  margin: .9em 0 0;
  font-size: 15px;
  font-style: italic;
  color: var(--ash);
}

.film-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--graphite);
}

.film-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08);
  transition: filter 1s ease;
}

.film-frame .subtitle { opacity: 0; }

.film-frame.is-live video { filter: none; }

.film-frame.is-live .subtitle {
  opacity: 1;
  transition: opacity 0s .6s;
}

.film-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  margin-top: 20px;
}

.film-foot p {
  margin: 0;
  font-size: 15px;
  color: var(--ash);
}

.watch {
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

/* Contact: one line in the dark. */
.contact {
  min-height: 70svh;
  display: grid;
  place-content: center;
  padding: 10vh var(--gutter);
  text-align: center;
}

.email {
  font-size: clamp(18px, 4vw, 52px);
  font-weight: 300;
  font-stretch: 125%;
  letter-spacing: -.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--shutter);
}

.email:hover { background-size: 100% 1px; }

.colophon {
  padding: var(--gutter);
  font-size: 13px;
  color: var(--ash);
}

.colophon p { margin: 0; }

/* Player */
.player {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: var(--black);
  color: var(--white);
}

.player[open] {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--gutter);
}

.player::backdrop { background: var(--black); }

.close {
  justify-self: end;
  font-size: 14px;
  color: var(--ash);
  transition: color .3s ease;
}

.close:hover { color: var(--white); }

.player video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 700px) {
  .frame { aspect-ratio: 16 / 9; }

  .stage .subtitle {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin-top: 16px;
    text-shadow: none;
  }

  .stage .subtitle:empty {
    display: block;
    min-height: 1.3em;
  }
}