/* The film is the entire hero surface; typography sits in its open right side. */
.hero { background: #080619; }
.hero-pin { height: 100svh; min-height: 0; max-height: none; }
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 35% center;
  z-index: 0;
  pointer-events: none;
}
.hero-particle-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .7;
  mix-blend-mode: screen;
}
.hero-particle-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.site-nav:not(.is-scrolled) { background: transparent; text-shadow: 0 2px 18px #080619; }
.hero-topline, .hero-margin-note { z-index: 1; }
.hero-title {
  left: 56%;
  right: .8%;
  top: 17.5%;
  font-size: min(9.6vw, 20svh, 280px);
  line-height: 1.12;
  letter-spacing: -.06em;
  text-shadow: 0 3px 28px #080619;
}
.hero-title-first > span:last-child { font-size: .935em; line-height: 1.198; }
.hero-title-next > span:first-child { font-size: .81em; line-height: 1.383; white-space: nowrap; }
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .hero-title-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .hero-title-next > span { display: block; min-width: 0; white-space: normal; }
}
.hero-topline, .hero-bottom, .hero-margin-note { text-shadow: 0 2px 14px #080619, 0 1px 4px #080619; }
.hero-bottom { bottom: max(4%, env(safe-area-inset-bottom)); }
.hero-margin-note { display: none; }
@media (max-width: 800px) {
  .hero { height: 100svh; min-height: 0; }
  .hero-pin { height: 100svh; min-height: 0; }
  .hero-film { object-position: 31% center; }
  .hero-topline { top: 13%; }
  .hero-title {
    top: 18%;
    left: var(--gutter);
    right: var(--gutter);
    font-size: clamp(36px, 12.2vw, 88px);
    line-height: 1.05;
    letter-spacing: -.055em;
  }
  .hero-title-next { font-size: .56em; margin-top: 10px !important; }
  .hero-title-first > span:nth-child(2), .hero-title-first > span:last-child { display: inline; font-size: 1em; line-height: inherit; }
  .hero-title-first > span:last-child::before { content: ' '; }
  .hero-title-next > span:first-child { font-size: 1em; line-height: inherit; }
  .hero-bottom { bottom: max(4%, env(safe-area-inset-bottom)); }
  .hero-bottom p { font-size: 14px; }
}
@media (max-width: 800px) and (max-height: 650px) {
  .hero-topline { display: none; }
  .hero-title { top: 15%; font-size: 10.4vw; }
  .hero-bottom { gap: 8px; bottom: 3%; }
  .hero-bottom p { font-size: 13px; }
}
@media (min-width: 801px) and (max-aspect-ratio: 6/5) {
  .hero-film { object-position: 31% center; }
  .hero-title { left: var(--gutter); top: 18%; font-size: 10.5vw; }
  .hero-title-first > span:nth-child(2), .hero-title-first > span:last-child { display: inline; font-size: 1em; line-height: inherit; }
  .hero-title-first > span:last-child::before { content: ' '; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero-pin { height: 100svh; min-height: 0; }
  .hero-title-next > span:first-child { font-size: 1em; line-height: inherit; }
  .hero-particle-layer { display: none; }
}