@font-face {
  font-family: Condensed;
  src: url('/assets/barlow-condensed-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Plex;
  src: url('/assets/ibm-plex-mono.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --content-width: calc(100vw - var(--safe-left) - var(--safe-right));
  --stable-content-height: calc(100svh - var(--safe-top) - var(--safe-bottom));
}

body {
  margin: 0;
  background: #ef5636;
  color: #22211e;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #abafa7; color: #111; }

main {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* Keep the logo and wordmark inside the display's safe area. */
.content {
  position: absolute;
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

header {
  position: absolute;
  top: clamp(22px, 3.5svh, 40px);
  left: 40px;
  z-index: 3;
}

.logo {
  display: block;
  width: clamp(44px, 7.2svh, 72px);
  height: auto;
  transform: rotate(-6deg);
}

.poster-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.poster-title {
  position: absolute;
  top: 50%;
  left: 4.1%;
  z-index: 2;
  width: max-content;
  margin: 0;
  font: 700 min(calc(var(--content-width) * .255), calc(var(--stable-content-height) * .46), 460px)/.735 Condensed, Impact, sans-serif;
  letter-spacing: -.035em;
  pointer-events: none;
  /* Compensate for the font's ink sitting below its line-box centre. */
  transform: translateY(calc(-50% - .23em));
}

.poster-title > span { display: block; }
.poster-title > span + span { margin-left: .31em; }

.period {
  display: inline-block;
  width: .125em;
  height: .125em;
  margin-left: .05em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: baseline;
}

.plot-label {
  font: 9px Plex, monospace;
  letter-spacing: .12em;
  fill: #22211e;
}

@media (max-width: 700px) {
  header { left: 24px; }
  .logo { width: 56px; }
  .poster-title {
    left: 5%;
    font-size: min(calc(var(--content-width) * .45), calc(var(--stable-content-height) * .46));
    line-height: .78;
  }
  .poster-title > span + span { margin-left: .11em; }
}

@media (max-height: 420px) {
  header { top: 18px; }
  .logo { width: 38px; }
}

/* Frame the mobile poster inside the safe area and browser chrome. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  :root {
    --frame-x: 18px;
    --frame-y: 22px;
    --content-width: calc(100vw - var(--safe-left) - var(--safe-right) - 2 * var(--frame-x));
    --stable-content-height: calc(100svh - var(--safe-top) - var(--safe-bottom) - 2 * var(--frame-y));
  }

  body {
    background: #22211e;
    padding: calc(var(--safe-top) + var(--frame-y))
      calc(var(--safe-right) + var(--frame-x))
      calc(var(--safe-bottom) + var(--frame-y))
      calc(var(--safe-left) + var(--frame-x));
  }

  main {
    background: #ef5636;
    height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 2 * var(--frame-y));
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 2 * var(--frame-y));
    border-radius: 18px;
    outline: 1px solid #22211e;
  }

  .content { inset: 0; }
  header { top: 24px; left: 20px; }
  .logo { width: 48px; }
}

@media (max-height: 420px) and (hover: none) and (pointer: coarse) {
  :root { --frame-y: 12px; }
  header { top: 16px; }
  .logo { width: 34px; }
}