@font-face {
  font-family: "Attic Antique";
  src: local("Attic Antique"), local("Attic Antique Regular"), local("AtticAntique");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Attic Antique Italic";
  src: local("Attic Antique Italic"), local("AtticAntique-Italic"), local("Attic Antique");
  font-style: italic;
  font-weight: 400;
}

:root {
  --app-height: 100vh;
  --bg-dark: #464646;
  --font-attic: "Attic Antique", "Attic Antique Regular", "IM Fell English SC", "Times New Roman", serif;
  --font-attic-italic: "Attic Antique Italic", "Attic Antique", "IM Fell English SC", "Times New Roman", serif;
  --bg-rose: #ffffff;
  --bg-magenta: #b733e2;
  --bg-blue: #3945bc;
  --bg-black: #0d0d0f;
  --text: #f5f1ef;
  --text-soft: rgba(245, 241, 239, 0.76);
  --line: rgba(255, 255, 255, 0.2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html, body {
  overscroll-behavior-y: auto;
}

.panel-wrap,
.panel-layer,
.reveal-bg-media,
.reveal-bg-image {
  touch-action: pan-y;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-black);
  color: var(--text);
  overflow-x: hidden;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

.stack-site {
  position: relative;
  width: 100%;
}

.panel-wrap {
  --section-enter: 0;
  --section-focus: 0;
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: clip;
}

.has-reveal-bg {
  isolation: isolate;
}

.reveal-bg-media {
  position: absolute;
  inset: 0;
  height: calc(100% + 200vh);
  min-height: calc(100% + 200vh);
  margin-top: -100vh;
  margin-top: -100vh;
  overflow: clip;
  isolation: isolate;
  pointer-events: none;
}

.reveal-bg-image {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.synopsis-bg-image {
  background-image: url("media/synopsis-bg.jpg");
}

.visuals-bg-image {
  background-image: url("media/visuals-bg.jpg");
}

.cast-bg-image {
  background-image: url("media/cast-bg.jpg");
}

.connect-bg-image {
  background-image: url("media/connect-bg.jpg");
}

.poster-wrap {
  height: 100vh;
  min-height: 100vh;
}

.connect-wrap {
  height: 100vh;
  min-height: 100vh;
}

.panel-layer {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.poster-wrap .panel-layer { z-index: 1; }
.trailer-wrap .panel-layer { z-index: 2; }
.actor-wrap-richard .panel-layer { z-index: 3; }
.actor-wrap-emma .panel-layer { z-index: 4; }
.actor-wrap-trinity .panel-layer { z-index: 5; }
.actor-wrap-joe .panel-layer { z-index: 6; }
.actor-wrap-robert .panel-layer { z-index: 7; }
.ensemble-wrap .panel-layer { z-index: 8; }
.synopsis-wrap .panel-layer { z-index: 9; }
.visuals-wrap .panel-layer { z-index: 10; }
.cast-wrap .panel-layer { z-index: 11; }
.connect-wrap .panel-layer { z-index: 12; }

.panel-wrap + .panel-wrap .panel-layer {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.has-reveal-bg .panel-layer {
  background-clip: padding-box;
}

.panel-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.04));
  opacity: calc(0.12 + var(--section-enter) * 0.06);
  pointer-events: none;
}

.parallax {
  transform: translate3d(0, calc(var(--parallax-shift, 0px) + (1 - var(--section-focus)) * 0.75rem), 0) scale(calc(1.006 - var(--section-focus) * 0.006));
  opacity: calc(0.64 + var(--section-enter) * 0.36);
  transition: transform 180ms linear, opacity 240ms ease-out;
  will-change: transform, opacity;
}

.dot-nav {
  position: fixed;
  top: 1.2rem;
  right: 0.9rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
}

.dot-link {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: transform 260ms ease, background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.dot-link:hover,
.dot-link:focus-visible,
.dot-link.is-active {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.96);
  transform: scale(1.1);
  box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.1);
  outline: none;
}

.scrollbar-shell {
  position: fixed;
  top: 4.9rem;
  right: 0.32rem;
  width: 0.22rem;
  height: calc(100vh - 6rem);
  z-index: 29;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

body.is-scrolling .scrollbar-shell {
  opacity: 1;
}

.scrollbar-track {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.scrollbar-thumb {
  width: 100%;
  height: 5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0.65rem rgba(255, 255, 255, 0.14);
}

.draw-line path {
  stroke-dasharray: 1200;
  stroke-dashoffset: calc(1200 - var(--section-enter) * 1200);
  transition: stroke-dashoffset 220ms linear;
}

.poster-panel {
  background: var(--bg-dark);
}

.poster-stage {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-dark);
}

.trailer-panel {
  --video-frame-gap: clamp(1.4rem, 3.25vw, 2.4rem);
  display: grid;
  place-items: center;
  padding: var(--video-frame-gap);
  background: #000;
  box-sizing: border-box;
}

.trailer-card {
  width: min(100%, calc((100vh - 16rem) * 16 / 9), 78rem);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(1rem, 1.85vw, 1.55rem);
  background: #000;
  display: grid;
  grid-template-rows: auto auto;
  overflow: clip;
}

.trailer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.96) 10%,
    rgba(255, 255, 255, 0.5) 24%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(0, 0, 0, 0) 56%);
  opacity: clamp(0, calc(1.05 - var(--section-enter) * 1.45), 1);
  pointer-events: none;
  z-index: 1;
}

.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.98);
}

.trailer-copy {
  margin-top: clamp(0.95rem, 1.8vw, 1.45rem);
  padding: 0 0.15rem 0;
  background: transparent;
  text-align: center;
}

.trailer-kicker,
.trailer-text {
  margin: 0;
}

.trailer-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.trailer-text {
  margin-top: 0.28rem;
  font-size: 0.96rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.98);
}

.teaser-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity 320ms ease;
}

.video-shell.is-started .teaser-video {
  opacity: 1;
}

.video-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

.video-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(6.2rem, 9vw, 8.8rem);
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  z-index: 3;
  transition: transform 220ms ease, opacity 220ms ease;
}

.video-toggle:hover,
.video-toggle:focus-visible {
  transform: translate(-50%, -50%) scale(1.04);
  outline: none;
}

.octopus-mark,
.triangle {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.octopus-mark {
  width: clamp(2rem, 3vw, 2.8rem);
  height: clamp(1.7rem, 2.5vw, 2.35rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 96'%3E%3Cpath fill='rgba(0,0,0,0.98)' d='M64 6c-20.4 0-36 14.7-36 34 0 7.5 2.3 14.3 6.5 19.8-1.6 2.4-4 6.8-5.4 11.3-1.9 5.9 6 8.1 8.7 3.7 1.7-2.8 3.8-6.9 6.1-10.2 2.2 1.4 4.5 2.5 6.9 3.4l-5.3 16.4c-1.4 4.4 4.7 7.5 7.5 3.4L64 70l11 17.8c2.8 4.1 8.9 1 7.5-3.4l-5.3-16.4c2.4-.9 4.7-2 6.9-3.4 2.3 3.3 4.4 7.4 6.1 10.2 2.7 4.4 10.6 2.2 8.7-3.7-1.4-4.5-3.8-8.9-5.4-11.3 4.2-5.5 6.5-12.3 6.5-19.8 0-19.3-15.6-34-36-34zm-14 36c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm28 0c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(calc(-50% - 0.12rem), -50%);
  filter: drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.16));
  z-index: 2;
}

.triangle {
  width: 0;
  height: 0;
  border-top: clamp(1.35rem, 2.7vw, 2.2rem) solid transparent;
  border-bottom: clamp(1.35rem, 2.7vw, 2.2rem) solid transparent;
  border-left: clamp(2.5rem, 4.5vw, 3.9rem) solid rgba(255, 255, 255, 0.98);
  transform: translate(-42%, -50%);
  z-index: 1;
}

.video-shell.is-playing .video-toggle {
  opacity: 0;
  pointer-events: none;
}

.video-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.15rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.52));
  z-index: 3;
}

.control-button {
  border: 0;
  padding: 0.48rem 0.82rem;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.14);
  transition: transform 180ms ease, background-color 180ms ease;
}

.control-button:hover,
.control-button:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.control-button-icon {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border-radius: 0.5rem;
  display: inline-grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
}


.fullscreen-icon::before {
  content: "⛶";
  display: block;
  color: rgba(255, 255, 255, 0.98);
  font-size: 1.1rem;
  line-height: 1;
}

.mute-icon {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
}

.mute-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath fill='white' d='M15.5 8.4a1 1 0 0 1 1.4 0A6.5 6.5 0 0 1 19 13a6.5 6.5 0 0 1-2.1 4.6a1 1 0 1 1-1.4-1.5A4.5 4.5 0 0 0 17 13a4.5 4.5 0 0 0-1.5-3.1a1 1 0 0 1 0-1.5z'/%3E%3C/svg%3E");
}

.js-mute.is-muted .mute-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath fill='white' d='M15.1 9.7a1 1 0 0 1 1.4 0L19 12.2l2.5-2.5a1 1 0 1 1 1.4 1.4L20.4 13.6l2.5 2.5a1 1 0 1 1-1.4 1.4L19 15l-2.5 2.5a1 1 0 1 1-1.4-1.4l2.5-2.5l-2.5-2.5a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
}

.progress-wrap {
  display: block;
  width: 100%;
}

.progress-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.88rem;
  height: 0.88rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
}

.progress-bar::-moz-range-thumb {
  width: 0.88rem;
  height: 0.88rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
}

.time-readout {
  white-space: nowrap;
  font-size: 0.94rem;
}


.richard-bg-image {
  background-image: url("media/richard.png");
  background-position: center center;
}

.emma-bg-image {
  background-image: url("media/emma.png");
  background-position: center center;
}

.trinity-bg-image {
  background-image: url("media/trinity.png");
  background-position: center center;
}

.joe-bg-image {
  background-image: url("media/joe.png");
  background-position: center center;
}

.robert-bg-image {
  background-image: url("media/robert.png");
  background-position: center center;
}

.actor-panel {
  background: transparent;
}

.actor-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.actor-overlay-right::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.66) 78%, rgba(0, 0, 0, 0.82) 100%);
}

.actor-overlay-left::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.64) 28%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.08) 100%);
}

.actor-overlay-left-light::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.48) 28%, rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0) 100%);
}

.actor-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 6vw, 5.2rem);
}

.actor-stage-left {
  justify-content: flex-start;
}

.actor-stage-right {
  justify-content: flex-end;
}

.actor-copy {
  width: min(42rem, 44vw);
  max-width: 100%;
  padding-bottom: clamp(2.2rem, 7vh, 5rem);
  transition: opacity 240ms ease-out, transform 260ms ease-out;
}

.actor-copy-fade {
  opacity: calc(0.06 + var(--section-enter) * 1.06);
  transform: translate3d(0, calc((1 - var(--section-focus)) * 2.5rem), 0);
}

.actor-copy-white {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0.08rem 1.4rem rgba(0, 0, 0, 0.4);
}

.actor-copy-black {
  color: rgba(0, 0, 0, 0.94);
  text-shadow: 0 0.08rem 1.3rem rgba(255, 255, 255, 0.18);
}

.actor-name,
.actor-subtext {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
}

.actor-lockup {
  display: block;
  width: 100%;
  height: auto;
}

.actor-stage-right .actor-lockup {
  margin-left: auto;
}

.actor-name {
  font-family: var(--font-attic);
  font-size: clamp(2rem, 2.2vw + 1.1rem, 4.25rem);
  line-height: 0.96;
  letter-spacing: 0.03em;
}

.actor-subtext {
  margin-top: 0.9rem;
  font-family: var(--font-attic-italic);
  font-style: italic;
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.7rem);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.92;
}


.ensemble-panel {
  background: #000;
}

.ensemble-panel::after {
  content: none;
}

.ensemble-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.ensemble-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.ensemble-image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.ensemble-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ensemble-copy {
  position: absolute;
  left: clamp(0.75rem, 1.5vw, 1.4rem);
  right: clamp(0.75rem, 1.5vw, 1.4rem);
  bottom: clamp(0.75rem, 1.6vw, 1.35rem);
  z-index: 2;
}

.ensemble-copy-white {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0.08rem 1.2rem rgba(0, 0, 0, 0.55);
}

.ensemble-name,
.ensemble-role {
  margin: 0;
  font-weight: 400;
}

.ensemble-name {
  font-family: var(--font-attic);
  font-size: clamp(1.05rem, 1vw + 0.6rem, 2rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ensemble-role {
  margin-top: 0.5rem;
  font-family: var(--font-attic-italic);
  font-size: clamp(0.85rem, 0.48vw + 0.6rem, 1.2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.ensemble-synopsis-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.8rem);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(8, 8, 9, 1));
}

.ensemble-synopsis-copy {
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.96);
}

.ensemble-synopsis-kicker,
.ensemble-synopsis-text {
  margin: 0;
}

.ensemble-synopsis-kicker {
  font-family: var(--font-attic);
  font-size: clamp(1.2rem, 1vw + 0.7rem, 2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ensemble-synopsis-text {
  margin-top: 0.85rem;
  font-size: clamp(0.9rem, 0.55vw + 0.72rem, 1.15rem);
  line-height: 1.32;
}
.synopsis-panel {
  background: transparent;
}

.synopsis-panel::before,
.synopsis-panel::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.synopsis-panel::before {
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  background:
    linear-gradient(180deg, rgba(92, 14, 119, 0.14), rgba(42, 6, 55, 0.26)),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.09), transparent 24%);
  border-radius: 0;
  animation: none;
}

.synopsis-panel::after {
  width: 16rem;
  height: 16rem;
  left: -2rem;
  bottom: -4rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
  animation: softBloom 16s ease-in-out infinite reverse;
}

.synopsis-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 8vw, 6rem);
}

.synopsis-stage p {
  margin: 0;
  max-width: 58rem;

  line-height: 1.5;
  font-weight: 350;
  letter-spacing: -0.035em;
}

.synopsis-stage span {
  font-weight: 400;
}

.visuals-panel {
  background:
    linear-gradient(180deg, rgba(14, 26, 57, 0.16) 0%, rgba(14, 26, 57, 0.28) 100%);
}

.visual-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.visual-noise,
.visual-line,
.visual-orb {
  position: absolute;
  pointer-events: none;
}

.noise-a,
.noise-b {
  inset: -8%;
}

.noise-a {
  background:
    radial-gradient(circle at 18% 34%, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 78% 64%, rgba(255, 255, 255, 0.06), transparent 18%);
  animation: veilDrift 15s ease-in-out infinite;
}

.noise-b {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.05));
  animation: veilPulse 10s ease-in-out infinite;
}

.visual-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
  opacity: 0.28;
}

.line-a {
  width: 42%;
  left: 9%;
  top: 34%;
  transform: rotate(-7deg);
  animation: lineDriftA 12s ease-in-out infinite;
}

.line-b {
  width: 30%;
  right: 13%;
  top: 57%;
  transform: rotate(9deg);
  animation: lineDriftB 14s ease-in-out infinite;
}

.line-c {
  width: 24%;
  left: 43%;
  top: 70%;
  transform: rotate(-3deg);
  animation: lineDriftC 16s ease-in-out infinite;
}

.visual-orb {
  border-radius: 999px;
  filter: blur(0.8px);
  opacity: 0.18;
}

.orb-a {
  width: 18rem;
  height: 18rem;
  left: -3rem;
  bottom: -5rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 68%);
  animation: orbShift 16s ease-in-out infinite;
}

.orb-b {
  width: 20rem;
  height: 20rem;
  right: -4rem;
  top: -6rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 68%);
  animation: orbShift 18s ease-in-out infinite reverse;
}

.cast-panel {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.76));
}

.cast-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 49%, transparent 50%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.015) 8px 9px);
  opacity: 0.18;
  pointer-events: none;
}

.cast-credits {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  transform: translate3d(0, calc((1 - var(--section-focus)) * 2rem), 0);
}

.credit-kicker {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.credit-kicker-spaced {
  margin-top: 2.35rem;
}

.credit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credit-list-cast li {
  font-size: clamp(1.55rem, 1.2vw + 1.1rem, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.045em;
  font-weight: 400;
}

.credit-list-cast li + li {
  margin-top: 0.55rem;
}

.credit-list-small li {
  font-size: clamp(0.95rem, 0.45vw + 0.9rem, 1.15rem);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.connect-panel {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.54), rgba(8, 8, 10, 0.72));
}

.connect-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  backdrop-filter: blur(0.4px);
}

.connect-icons {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.25rem);
  align-items: center;
}

.social-square {
  min-width: clamp(5.2rem, 8vw, 6.75rem);
  min-height: clamp(2.6rem, 4vw, 3.25rem);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-attic);
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.25rem);
  letter-spacing: 0.04em;
  line-height: 1;
  transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease, color 180ms ease;
}

.social-square:hover,
.social-square:focus-visible {
  transform: translateY(-2px);
  opacity: 1;
  background: rgba(255, 255, 255, 0.94);
  color: #0d0d10;
  outline: none;
}

.connect-stage p {
  margin: 0;
  font-family: var(--font-attic);
  font-size: clamp(1.25rem, 1.9vw, 2.1rem);
  letter-spacing: 0.03em;
  line-height: 1;
}

@keyframes softBloom {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1rem, -1rem, 0) scale(1.05); }
}

@keyframes veilDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.94; }
  50% { transform: translate3d(1rem, -0.7rem, 0) scale(1.03); opacity: 1; }
}

@keyframes veilPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes lineDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); opacity: 0.24; }
  50% { transform: translate3d(1.8rem, -0.7rem, 0) rotate(-5deg); opacity: 0.46; }
}

@keyframes lineDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(9deg); opacity: 0.24; }
  50% { transform: translate3d(-1.4rem, 0.8rem, 0) rotate(11deg); opacity: 0.46; }
}

@keyframes lineDriftC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); opacity: 0.22; }
  50% { transform: translate3d(1rem, -0.4rem, 0) rotate(-1deg); opacity: 0.42; }
}

@keyframes orbShift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.1rem, -0.8rem, 0) scale(1.05); }
}



@media (max-width: 900px) {
  .poster-stage {
    display: block;
  }

  .video-ui {
    grid-template-columns: auto 1fr auto;
  }

  .video-ui .js-mute {
    grid-column: 3;
  }

  .time-readout {
    grid-column: 1 / -1;
    order: 5;
  }

  .connect-stage {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .connect-icons {
    gap: 0.7rem;
  }

  .social-square {
    min-width: 4.75rem;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
  }
}

@media (max-width: 640px) {
  .dot-nav {
    top: 0.85rem;
    right: 0.72rem;
    gap: 0.48rem;
  }

  .dot-link {
    width: 0.82rem;
    height: 0.82rem;
  }

  .scrollbar-shell {
    top: 4.2rem;
    right: 0.22rem;
    height: calc(100vh - 5rem);
  }

  .poster-banner {
    object-position: 56% center;
  }

  .video-ui {
    gap: 0.72rem;
    padding: 0.8rem 0.85rem 0.9rem;
  }

  .control-button {
    padding: 0.42rem 0.7rem;
  }

  .synopsis-stage {
    padding: 1.5rem 1.25rem 2rem;
    align-items: center;
  }

  .synopsis-stage p {
    max-width: 22rem;
    font-size: clamp(1.08rem, 4vw, 1.45rem);
  }

  .credit-list-cast li {
    font-size: clamp(1.3rem, 5vw, 1.9rem);
  }

  .credit-list-small li {
    font-size: 0.9rem;
    letter-spacing: 0.09em;
  }

  .connect-stage {
    padding: 1.4rem 1.25rem 1.8rem;
  }
}


@media (max-width: 900px) {
  .ensemble-name {
    font-size: clamp(0.82rem, 1.35vw + 0.45rem, 1.25rem);
  }

  .ensemble-role {
    font-size: clamp(0.72rem, 0.75vw + 0.46rem, 0.98rem);
  }

  .ensemble-synopsis-text {
    font-size: clamp(0.78rem, 0.6vw + 0.54rem, 0.94rem);
  }

  .actor-stage {
    align-items: flex-end;
    padding: clamp(1.4rem, 5vw, 2rem);
  }

  .actor-stage-left,
  .actor-stage-right {
    justify-content: flex-start;
  }

  .actor-copy {
    width: min(32rem, 100%);
    padding-bottom: clamp(1.6rem, 6vh, 3rem);
  }

  .actor-name {
    font-size: clamp(1.8rem, 6.7vw, 3.05rem);
  }

  .actor-subtext {
    font-size: clamp(0.95rem, 3.5vw, 1.35rem);
  }
}



@media (max-width: 700px) {
  .video-toggle {
    width: clamp(8.4rem, 33vw, 11rem);
  }

  .octopus-mark {
    width: clamp(2.7rem, 10vw, 3.6rem);
    height: clamp(2.25rem, 8.4vw, 3rem);
    transform: translate(calc(-50% - 0.12rem), -50%);
  }

  .triangle {
    border-top: clamp(1.85rem, 7.2vw, 2.55rem) solid transparent;
    border-bottom: clamp(1.85rem, 7.2vw, 2.55rem) solid transparent;
    border-left: clamp(3.15rem, 11.5vw, 4.45rem) solid rgba(255, 255, 255, 0.98);
  }

  .video-ui {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "play mute time fullscreen"
      "progress progress progress progress";
    gap: 0.52rem 0.58rem;
    padding: 0.78rem 0.72rem calc(0.84rem + env(safe-area-inset-bottom));
    align-items: center;
  }

  .js-playpause {
    grid-area: play;
    min-width: 3.35rem;
    padding: 0.46rem 0.7rem;
    font-size: 0.84rem;
  }

  .js-mute {
    grid-area: mute;
  }

  .js-fullscreen {
    grid-area: fullscreen;
  }

  .progress-wrap {
    grid-area: progress;
    grid-column: auto;
    order: 0;
  }

  .time-readout {
    grid-area: time;
    grid-column: auto;
    order: 0;
    min-width: 0;
    font-size: 0.78rem;
    text-align: right;
    justify-self: end;
  }

  .control-button-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
  }

  .mute-icon,
  .fullscreen-icon::before {
    transform: none;
  }

  .actor-wrap .reveal-bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
  }

  .richard-bg-image {
    background-size: auto 122%;
    background-position: 32% 28%;
  }

  .emma-bg-image {
    background-size: auto 120%;
    background-position: 64% 30%;
  }

  .trinity-bg-image {
    background-size: auto 140%;
    background-position: 64% 28%;
  }

  .joe-bg-image {
    background-size: auto 128%;
    background-position: 64% 24%;
  }

  .robert-bg-image {
    background-size: auto 126%;
    background-position: 30% 23%;
  }

  .actor-stage,
  .actor-stage-left,
  .actor-stage-right {
    justify-content: center;
    align-items: flex-end;
    padding: 1.25rem 0.9rem 1.9rem;
  }

  .actor-copy {
    width: min(88vw, 22rem);
    padding-bottom: 0.1rem;
    margin: 0 auto;
    position: relative;
  }

  .actor-stage-right .actor-lockup,
  .actor-stage-left .actor-lockup {
    margin: 0 auto;
  }

  .actor-copy::before {
    content: none;
    display: none;
  }

  .actor-lockup {
    width: 100%;
    max-width: min(82vw, 19rem);
    filter: drop-shadow(0 0.2rem 1.2rem rgba(0, 0, 0, 0.44));
  }

  .actor-overlay-right::before,
  .actor-overlay-left::before,
  .actor-overlay-left-light::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 44%, rgba(0, 0, 0, 0.52) 100%);
  }

  .actor-overlay-left-light::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0.34) 100%);
  }
}

@media (max-width: 442px) and (orientation: portrait) {
  .poster-panel,
  .poster-stage,
  .poster-banner {
    background: #000;
  }


  .poster-stage {
    position: relative;
    isolation: isolate;
  }

  .poster-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.18) 7%,
        rgba(0, 0, 0, 0) 14%,
        rgba(0, 0, 0, 0) 86%,
        rgba(0, 0, 0, 0.18) 93%,
        rgba(0, 0, 0, 0.82) 100%),
      linear-gradient(90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.16) 6%,
        rgba(0, 0, 0, 0) 12%,
        rgba(0, 0, 0, 0) 88%,
        rgba(0, 0, 0, 0.16) 94%,
        rgba(0, 0, 0, 0.78) 100%);
  }

  .poster-banner {
    object-position: center center;
    object-fit: contain;
  }

  .joe-bg-image {
    background-size: auto 102%;
    background-position: 74% 20%;
  }

  .robert-bg-image {
    background-size: auto 100%;
    background-position: 20% 20%;
  }

  .ensemble-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .ensemble-name {
    font-size: clamp(0.92rem, 3.2vw, 1.15rem);
  }

  .ensemble-role {
    font-size: clamp(0.75rem, 2.6vw, 0.94rem);
  }

  .ensemble-copy {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
  }

  .ensemble-synopsis-tile {
    padding: 0.9rem;
  }

  .ensemble-synopsis-kicker {
    font-size: clamp(1rem, 3.2vw, 1.2rem);
  }

  .ensemble-synopsis-text {
    font-size: clamp(0.76rem, 2.5vw, 0.9rem);
    line-height: 1.22;
  }
}

.youtube-stage {
  position: absolute;
  inset: 0;
  background: #000;
}

.youtube-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-shell.is-started .youtube-stage {
  opacity: 1;
}

.video-shell.is-started .video-toggle {
  opacity: 0;
  pointer-events: none;
}

.actor-wrap-joe .actor-lockup {
  filter: brightness(0) invert(1) drop-shadow(0 0.08rem 1.4rem rgba(0, 0, 0, 0.45));
}

.video-ui, .teaser-video { display: none !important; }

.trailer-wrap .panel-layer::after {
  opacity: 0;
}


/* merged bottom-section overrides from v8i */
@font-face {
  font-family: "Attic Antique";
  src: url("media/atticantique_demibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Attic Antique Italic";
  src: url("media/atticantique_demibold.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
}

.synopsis-bg-image {
  background-image: url("media/synopsis.png");
}

.ensemble-synopsis-copy {
  text-align: left;
}

.ensemble-synopsis-text {
  font-family: var(--font-attic);
  font-size: clamp(0.78rem, 0.34vw + 0.66rem, 0.96rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.synopsis-panel {
  background: transparent;
}

.synopsis-panel::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.54));
  border-radius: 0;
  animation: none;
}

.synopsis-panel::after {
  width: 20rem;
  height: 20rem;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 72%);
  animation: softBloom 18s ease-in-out infinite reverse;
}

.synopsis-stage {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 7vw, 5rem);
}

.synopsis-copy {
  position: relative;
  z-index: 2;
  max-width: min(52rem, 78vw);
  text-align: center;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.65);
}

.synopsis-kicker,
.synopsis-text {
  margin: 0;
}

.synopsis-kicker {
  font-family: var(--font-attic);
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2.4rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.synopsis-text {
  margin-top: 0;
  font-family: var(--font-attic);
  font-size: clamp(0.98rem, 0.62vw + 0.82rem, 21px);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .synopsis-stage {
    padding: 1.5rem 1.25rem 2rem;
  }
  .synopsis-copy {
    max-width: 22rem;
  }
  .synopsis-kicker {
    font-size: clamp(1.1rem, 4vw, 1.55rem);
  }
  .synopsis-text {
    font-size: clamp(0.95rem, 3.5vw, 1.2rem);
  }
}

.ensemble-name, .ensemble-role, .ensemble-synopsis-kicker, .ensemble-synopsis-text, .synopsis-kicker, .synopsis-text {
  font-family: var(--font-attic);
}


@media (max-width: 700px) and (orientation: portrait) {
  .actor-stage,
  .actor-stage-left,
  .actor-stage-right {
    padding: 1rem 1.4rem 0.35rem;
  }

  .actor-copy {
    width: min(44rem, 97vw);
    padding-bottom: 0;
  }

  .actor-copy .actor-lockup {
    width: 100%;
    max-width: none;
  }

  .trailer-panel {
    --video-frame-gap: 1.35rem;
  }

  .trailer-card {
    width: min(calc(100vw - (var(--video-frame-gap) * 2)), 42rem);
    max-width: none;
    padding: 1rem;
  }

  .video-shell {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .trailer-copy {
    margin-top: 0.95rem;
    padding: 0;
  }

  .trailer-kicker {
    font-size: 0.72rem;
  }

  .trailer-text {
    font-size: 0.88rem;
  }
}


@media (max-width: 900px) and (orientation: landscape) {
  .trailer-panel {
    --video-frame-gap: 0.9rem;
    padding: var(--video-frame-gap);
  }

  .trailer-card {
    width: min(calc(100vw - (var(--video-frame-gap) * 2)), calc((100vh - 4.75rem) * 16 / 9), 64rem);
    max-width: none;
    padding: 0.65rem;
  }

  .video-shell {
    width: 100%;
  }

  .trailer-copy {
    margin-top: 1.35rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
  }

  .trailer-kicker {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.42rem;
    font-size: 0.72rem;
    line-height: 1.18;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .actor-stage,
  .actor-stage-left,
  .actor-stage-right {
    padding: 1.1rem 1.15rem 1.1rem;
  }

  .actor-copy {
    width: min(94vw, 24rem);
    max-width: 24rem;
  }

  .actor-lockup {
    max-width: min(90vw, 22rem);
  }
}

/* v13 mobile landscape cleanup */
@media (max-width: 900px) and (orientation: landscape) {
  .actor-stage {
    padding: 0.7rem 1.5rem 0.05rem;
    align-items: flex-end;
  }

  .actor-stage-left {
    justify-content: flex-start;
  }

  .actor-stage-right {
    justify-content: flex-end;
  }

  .actor-copy {
    width: min(42vw, 18rem);
    padding-bottom: 0;
  }

  .actor-lockup {
    max-width: 100%;
  }

  .trailer-panel {
    --video-frame-gap: 0.7rem;
    padding: var(--video-frame-gap);
  }

  .trailer-card {
    width: min(
      calc(100vw - (var(--video-frame-gap) * 2)),
      calc((100vh - 8.9rem) * 16 / 9),
      56rem
    );
    max-width: none;
    padding: 0;
    align-content: start;
  }

  .video-shell {
    width: 100%;
  }

  .trailer-copy {
    margin-top: 1.2rem;
    width: min(78vw, 34rem);
    max-width: none;
    padding: 0 0.45rem 0.25rem;
  }

  .trailer-kicker {
    font-size: 0.46rem;
    letter-spacing: 0.17em;
  }

  .trailer-text {
    margin-top: 0.5rem;
    font-size: 0.50rem;
    line-height: 1.14;
  }
}


/* mobile landscape hard overrides for short-height devices */
@media (max-height: 500px) and (orientation: landscape) {
  .actor-stage {
    position: relative;
    display: block;
    padding: 0;
  }

  .actor-copy {
    position: absolute;
    bottom: 0.7rem;
    width: min(36vw, 16.5rem);
    max-width: none;
    padding-bottom: 0;
  }

  .actor-stage-left .actor-copy {
    left: 1.3rem;
    right: auto;
    margin: 0;
  }

  .actor-stage-right .actor-copy {
    right: 1.3rem;
    left: auto;
    margin: 0;
  }

  .actor-lockup {
    width: 100%;
    max-width: 100%;
  }

  .trailer-panel {
    --video-frame-gap: 0.7rem;
    padding: var(--video-frame-gap);
  }

  .trailer-card {
    width: min(
      calc(100vw - (var(--video-frame-gap) * 2)),
      calc((100vh - 8.4rem) * 16 / 9),
      52rem
    );
    max-width: none;
    padding: 0;
    align-content: start;
    overflow: visible;
  }

  .trailer-copy {
    margin-top: 1.25rem;
    width: min(76vw, 30rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.25rem 0.55rem;
  }

  .trailer-kicker {
    font-size: 0.46rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.42rem;
    font-size: 0.50rem;
    line-height: 1.12;
  }
}


/* v18 landscape-mobile trailer recenter fix */
@media (max-width: 900px) and (orientation: landscape) {
  .trailer-panel {
    --video-frame-gap: 1.15rem;
    padding: var(--video-frame-gap);
    align-content: center;
    justify-items: center;
  }

  .trailer-card {
    width: min(
      calc((100vh - 10.75rem) * 16 / 9),
      calc(100vw - 11.5rem),
      34rem
    );
    max-width: none;
    margin-inline: auto;
    padding: 0;
    align-content: start;
    justify-self: center;
  }

  .video-shell {
    width: 100%;
    max-width: 100%;
  }

  .trailer-copy {
    margin-top: 1rem;
    width: min(54vw, 19rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.25rem 0.45rem;
  }

  .trailer-kicker {
    font-size: 0.48rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.38rem;
    font-size: 0.54rem;
    line-height: 1.14;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .trailer-panel {
    --video-frame-gap: 1rem;
    padding: var(--video-frame-gap);
    align-content: center;
    justify-items: center;
  }

  .trailer-card {
    width: min(
      calc((100vh - 10.5rem) * 16 / 9),
      calc(100vw - 10.75rem),
      32rem
    );
    max-width: none;
    margin-inline: auto;
    padding: 0;
    align-content: start;
    justify-self: center;
    overflow: visible;
  }

  .video-shell {
    width: 100%;
    max-width: 100%;
  }

  .trailer-copy {
    margin-top: 0.95rem;
    width: min(54vw, 18rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.2rem 0.45rem;
  }

  .trailer-kicker {
    font-size: 0.46rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.36rem;
    font-size: 0.52rem;
    line-height: 1.13;
  }
}

/* v20 landscape-mobile trailer recenter restore */
@media (max-width: 900px) and (orientation: landscape) {
  .trailer-panel {
    --video-frame-gap: 0.9rem;
    padding: var(--video-frame-gap);
    align-content: center;
    justify-items: center;
  }

  .trailer-card {
    width: min(52vw, calc((100vh - 8.6rem) * 16 / 9), 34rem);
    max-width: none;
    margin-inline: auto;
    padding: 0;
    align-content: start;
    justify-self: center;
    overflow: visible;
  }

  .video-shell {
    width: 100%;
    max-width: 100%;
  }

  .trailer-copy {
    margin-top: 1.05rem;
    width: min(50vw, 24rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.2rem 0.45rem;
    text-align: center;
  }

  .trailer-kicker {
    font-size: 0.48rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.34rem;
    font-size: 0.58rem;
    line-height: 1.14;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .trailer-panel {
    --video-frame-gap: 0.9rem;
    padding: var(--video-frame-gap);
    align-content: center;
    justify-items: center;
  }

  .trailer-card {
    width: min(52vw, calc((100vh - 8.6rem) * 16 / 9), 33rem);
    max-width: none;
    margin-inline: auto;
    padding: 0;
    align-content: start;
    justify-self: center;
    overflow: visible;
  }

  .trailer-copy {
    margin-top: 1rem;
    width: min(50vw, 23rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.2rem 0.45rem;
    text-align: center;
  }

  .trailer-kicker {
    font-size: 0.47rem;
    letter-spacing: 0.16em;
  }

  .trailer-text {
    margin-top: 0.32rem;
    font-size: 0.57rem;
    line-height: 1.12;
  }
}


/* Trailer section matched to other.zip */
.trailer-panel {
  background: #000 !important;
  display: block !important;
  padding: 0 !important;
}

.trailer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.96) 10%,
    rgba(255, 255, 255, 0.5) 24%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(0, 0, 0, 0) 56%) !important;
  opacity: clamp(0, calc(1.05 - var(--section-enter) * 1.45), 1) !important;
  pointer-events: none;
  z-index: 1;
}

.trailer-wrap .panel-layer::after {
  opacity: 0 !important;
}

.trailer-panel .video-shell {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.trailer-panel .youtube-stage {
  position: absolute;
  inset: 0;
  background: #000;
}

.trailer-panel .youtube-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


.synopsis-copy > .synopsis-text:only-child { margin-top: 0; }


@media (max-width: 442px) and (orientation: portrait) {
  .ensemble-grid .ensemble-image-tile:nth-child(2) .ensemble-photo {
    object-position: 38% center;
  }

  .ensemble-grid .ensemble-image-tile:nth-child(4) .ensemble-photo {
    object-position: 74% center;
  }
}

/* synopsis mobile landscape fit */
@media (max-width: 900px) and (orientation: landscape) {
  .synopsis-text {
    font-size: clamp(0.8rem, 1.55vw, 0.95rem);
    line-height: 1.08;
  }
}

@media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
  .synopsis-text {
    font-size: clamp(0.68rem, 1.4vw, 0.82rem);
    line-height: 1.03;
  }
}


.ensemble-grid .ensemble-image-tile:nth-child(6) .ensemble-photo {
  object-position: center 34%;
}