@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("jost-latin-300.woff2") format("woff2");
}

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
  --font-display: "Futura LT BT Light", "Futura Lt BT Light", "Futura Light", "Futura LT BT", Futura, Jost, sans-serif;
  --text-poster: clamp(1.45rem, 3.25vw + 1.4vh, 9.5rem);
  --leading-poster: 1.08;
  --tracking-poster: 0.06em;
  --gap-poster: clamp(1rem, 3.6vh, 4.25rem);
  --pad-poster-x: clamp(1.15rem, 4.2vw, 5.5rem);
  --pad-poster-y: clamp(1rem, 4vh, 4rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
}

body {
  overflow: hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.poster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: max(var(--pad-poster-y), env(safe-area-inset-top))
    max(var(--pad-poster-x), env(safe-area-inset-right))
    max(var(--pad-poster-y), env(safe-area-inset-bottom))
    max(var(--pad-poster-x), env(safe-area-inset-left));
  background: var(--color-bg);
  color: var(--color-fg);
  overflow: hidden;
  position: relative;
}

.poster-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  gap: var(--gap-poster);
  font-family: var(--font-display);
  font-size: var(--text-poster);
  font-weight: 300;
  font-synthesis: none;
  line-height: var(--leading-poster);
  letter-spacing: var(--tracking-poster);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.poster-line { display: block; max-width: 100%; }

.word { display: inline-block; white-space: nowrap; }

.letter {
  display: inline-block;
  opacity: 0;
  animation: letter-in 0.75s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.corner {
  position: absolute;
  right: max(var(--pad-poster-x), env(safe-area-inset-right));
  bottom: max(var(--pad-poster-y), env(safe-area-inset-bottom));
  max-width: min(92%, 36rem);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.05vw + 0.45vh, 1.35rem);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}

@keyframes letter-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .poster-lines {
    font-size: clamp(1.55rem, 7.15vw, 2.7rem);
    gap: clamp(1.2rem, 3.4vh, 2.25rem);
    letter-spacing: 0.03em;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .poster-lines {
    font-size: clamp(1.2rem, 2.55vw + 2.1vh, 3.75rem);
    gap: clamp(0.65rem, 2.6vh, 1.5rem);
    letter-spacing: 0.028em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter { opacity: 1; animation: none; }
}