:root {
  color-scheme: light;
}

body {
  margin: 0;
}

.caption-effects {
  position: absolute;
}

main {
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: grid;
  place-items: center;
}

.film {
  --film-aspect-ratio: .5625;
  position: relative;
  container-type: inline-size;
  inline-size: min(100%, calc(100vh * var(--film-aspect-ratio)));
  inline-size: min(100%, calc(100svh * var(--film-aspect-ratio)));
  margin: 0;
  color-scheme: dark;
}

video {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

figcaption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

figcaption p {
  position: absolute;
  max-inline-size: 83%;
  margin: 0;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.84rem, 4.69cqi, 1.4rem);
  line-height: 1.05;
  filter: url("#caption-strokes");
  opacity: 0;
}

.opening-line {
  inset-block-start: 42%;
}

.upper-left {
  inset-block-start: 8%;
}

.upper-right {
  inset-block-start: 18%;
}

.lower-left,
.lower-right {
  inset-block-end: 13%;
}

.opening-line,
.upper-left,
.lower-left {
  inset-inline-start: 7%;
}

.upper-right,
.lower-right {
  inset-inline-end: 7%;
  text-align: end;
}

.above-title {
  inset-block-start: 36%;
  inset-inline: 6%;
  max-inline-size: none;
  text-align: center;
}

.playback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.playback:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

.playback[data-paused]::before,
.playback[data-paused]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
}

.playback[data-paused]::before {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: #0009;
}

.playback[data-paused]::after {
  border-block: .42rem solid transparent;
  border-inline-start: .72rem solid #fff;
  margin-inline-start: .12rem;
}

@media (max-width: 767px) and (orientation: portrait) {
  .film {
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100dvh;
    overflow: hidden;
  }

  .film video {
    block-size: 100%;
    object-fit: cover;
  }

  figcaption {
    inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
}

@media (max-width: 767px) and (max-aspect-ratio: 1/2) {
  /* Keep the lettering inside the frame on especially tall screens. */
  .film video {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: clamp(100%, calc(100vh * var(--film-aspect-ratio)), 116%);
    inline-size: clamp(100%, calc(100dvh * var(--film-aspect-ratio)), 116%);
    translate: -50% 0;
    object-fit: fill;
  }
}