/* The Replica — a long-form film page that keeps the existing site shell intact. */
body[data-route="the-replica"] {
  background: #000;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-route="the-replica"] .site-shell {
  --nav-idle: #7d7d7d;
  --nav-current: #fff;
  --nav-hover: #fff;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100dvh;
}

body[data-route="the-replica"] .site-header {
  background: #000;
  flex: 0 0 var(--bar);
  padding-left: var(--home-gutter);
  padding-right: clamp(20px, 2.14vw, 37px);
  position: sticky;
  top: 0;
  z-index: 50;
}

body[data-route="the-replica"] #app {
  flex: 1 0 auto;
  overflow: visible;
}

body[data-route="the-replica"] .identity-line,
body[data-route="the-replica"] .wordmark {
  font-family: "Autoscape Round", monospace;
}

body[data-route="the-replica"] .wordmark {
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 700;
  letter-spacing: 0;
}

body[data-route="the-replica"] .site-footer {
  background: #000;
  flex: 0 0 var(--bar);
  padding-left: var(--home-gutter);
  padding-right: clamp(20px, 2.14vw, 37px);
}

.replica-page {
  background: #000;
  color: #fff;
  display: block;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  transform: none;
}

.replica-page.is-ready { transform: none; }

.replica-page button { cursor: pointer; }

.replica-hero {
  height: min(82vh, 920px);
  min-height: 600px;
  overflow: hidden;
  position: relative;
}

.replica-hero-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  width: 100%;
}

.replica-hero-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .04) 32%, rgba(0, 0, 0, .82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .44), transparent 56%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.replica-hero-copy {
  bottom: clamp(26px, 4.2vw, 72px);
  left: var(--home-gutter);
  position: absolute;
  right: var(--home-gutter);
}

.replica-kicker,
.replica-section-label,
.replica-section-head,
.replica-asset-caption,
.replica-still span,
.replica-credit-group li,
.replica-lightbox-header,
.replica-lightbox-external,
.replica-play-link {
  font-family: "Autoscape Round", monospace;
}

.replica-kicker,
.replica-section-label {
  font-size: clamp(10px, .81vw, 14px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.replica-hero h1 {
  font: 400 clamp(62px, 8.4vw, 145px)/.84 "Inter Display", Arial, sans-serif;
  letter-spacing: -.055em;
  margin: 18px 0 24px -.06em;
}

.replica-play-link {
  align-items: center;
  display: inline-flex;
  font-size: clamp(11px, .93vw, 16px);
  gap: 10px;
  text-transform: uppercase;
}

.replica-play-link > :first-child {
  font-size: .8em;
  transform: translateY(-1px);
}

.replica-play-link > :last-child,
.replica-lightbox-external { border-bottom: 1px solid currentColor; }

.replica-story,
.replica-primary-assets,
.replica-stills,
.replica-credits {
  border-top: 1px solid #383838;
  margin-inline: var(--home-gutter);
  padding-block: clamp(72px, 9vw, 154px);
}

.replica-story {
  display: grid;
  gap: clamp(40px, 7vw, 126px);
  grid-template-columns: minmax(110px, .55fr) minmax(0, 2.45fr);
}

.replica-story-copy {
  max-width: 1160px;
}

.replica-story-copy p {
  font: 400 clamp(28px, 3.15vw, 54px)/1.08 "Inter Display", Arial, sans-serif;
  letter-spacing: -.035em;
  margin: 0 0 1.1em;
}

.replica-story-copy p:last-child { margin-bottom: 0; }

.replica-section-head {
  align-items: baseline;
  display: flex;
  font-size: clamp(10px, .81vw, 14px);
  justify-content: space-between;
  margin-bottom: clamp(24px, 2.4vw, 42px);
  text-transform: uppercase;
}

.replica-section-head p { margin: 0; }

.replica-section-head > :last-child {
  color: #858585;
  font-weight: 400;
}

.replica-asset-grid {
  display: grid;
  gap: clamp(10px, 1vw, 18px);
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, .55fr);
  grid-template-rows: auto auto;
}

.replica-asset-card,
.replica-still {
  color: #fff;
  display: block;
  min-width: 0;
  text-align: left;
  width: 100%;
}

.replica-asset-card--trailer { grid-column: 1; grid-row: 1; }
.replica-asset-card--poster { grid-column: 2; grid-row: 1 / span 2; }
.replica-asset-card--treatment { grid-column: 1; grid-row: 2; }

.replica-asset-image {
  background: #101010;
  display: block;
  overflow: hidden;
  position: relative;
}

.replica-asset-card--trailer .replica-asset-image,
.replica-asset-card--treatment .replica-asset-image { aspect-ratio: 16 / 8.5; }

.replica-asset-card--poster .replica-asset-image { height: calc(100% - 29px); }

.replica-asset-image img,
.replica-still img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: filter 280ms ease, transform 600ms var(--ease-out);
  width: 100%;
}

.replica-asset-card--poster img { object-position: center; }
.replica-asset-card--treatment img { object-fit: cover; object-position: top center; }

.replica-asset-card:is(:hover, :focus-visible) img,
.replica-still:is(:hover, :focus-visible) img {
  filter: brightness(.78);
  transform: scale(1.012);
}

.replica-play-disc {
  align-items: center;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  display: flex;
  font: 400 clamp(13px, 1.2vw, 21px)/1 "Autoscape Round", monospace;
  height: clamp(46px, 5vw, 86px);
  justify-content: center;
  left: 50%;
  padding-left: .12em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(46px, 5vw, 86px);
}

.replica-asset-caption {
  align-items: center;
  border-top: 1px solid #fff;
  display: flex;
  font-size: clamp(9px, .75vw, 13px);
  justify-content: space-between;
  min-height: 29px;
  padding-top: 3px;
  text-transform: uppercase;
}

.replica-asset-caption > :last-child { color: #999; }

.replica-stills-grid {
  display: grid;
  gap: clamp(10px, 1vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.replica-still img { aspect-ratio: 1500 / 748; }

.replica-still span {
  border-top: 1px solid #fff;
  display: block;
  font-size: clamp(9px, .75vw, 13px);
  min-height: 25px;
  padding-top: 5px;
  text-transform: uppercase;
}

.replica-credits {
  display: grid;
  gap: clamp(50px, 8vw, 150px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.replica-credit-group ul {
  list-style: none;
  margin: clamp(28px, 3vw, 52px) 0 0;
  padding: 0;
}

.replica-credit-group li {
  align-items: baseline;
  border-top: 1px solid #383838;
  display: grid;
  font-size: clamp(10px, .82vw, 14px);
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 13px 0 11px;
}

.replica-credit-group li:last-child { border-bottom: 1px solid #383838; }

.replica-credit-group li > :last-child {
  color: #858585;
  text-align: right;
}

.replica-lightbox {
  background: #000;
  border: 0;
  color: #fff;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  width: 100vw;
}

.replica-lightbox::backdrop { background: #000; }

.replica-lightbox-shell {
  display: grid;
  grid-template-rows: var(--bar) minmax(0, 1fr) auto;
  height: 100%;
}

.replica-lightbox-header {
  align-items: center;
  display: flex;
  font-size: clamp(10px, .81vw, 14px);
  justify-content: space-between;
  padding-inline: var(--home-gutter);
  text-transform: uppercase;
}

.replica-lightbox-title { margin: 0; }

.replica-lightbox-close {
  align-items: center;
  display: flex;
  gap: 10px;
  text-transform: uppercase;
}

.replica-lightbox-dot {
  background: #fff;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}

.replica-lightbox-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--home-gutter) 20px;
}

.replica-lightbox-image {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.replica-lightbox-pdf {
  background: #fff;
  border: 0;
  height: 100%;
  width: 100%;
}

.replica-lightbox-external {
  font-size: clamp(10px, .81vw, 14px);
  justify-self: end;
  margin: 0 var(--home-gutter) 18px;
  padding-bottom: 2px;
  text-transform: uppercase;
}

body.replica-lightbox-open { overflow: hidden; }

@media (max-width: 900px), (hover: none) and (max-width: 1200px) {
  body[data-route="the-replica"] { background: #000; }

  body[data-route="the-replica"] .site-shell {
    --compact-surface: #000;
    background: #000;
  }

  body[data-route="the-replica"] .site-header {
    flex-basis: var(--compact-header);
    padding-left: var(--compact-left);
    padding-right: var(--compact-right);
  }

  body[data-route="the-replica"] .site-footer { display: none; }

  .replica-hero {
    height: calc(100svh - var(--compact-header));
    min-height: 600px;
  }

  .replica-hero-image { object-position: 50% 52%; }

  .replica-hero-copy {
    bottom: max(28px, env(safe-area-inset-bottom));
    left: var(--compact-left);
    right: var(--compact-right);
  }

  .replica-kicker,
  .replica-section-label,
  .replica-section-head,
  .replica-lightbox-header { font-size: 10px; }

  .replica-hero h1 {
    font-size: clamp(54px, 15.5vw, 78px);
    line-height: .88;
    margin: 13px 0 21px -.05em;
  }

  .replica-play-link { font-size: 12px; }

  .replica-story,
  .replica-primary-assets,
  .replica-stills,
  .replica-credits {
    margin-inline: var(--compact-left) var(--compact-right);
    padding-block: 68px;
  }

  .replica-story {
    display: block;
  }

  .replica-story > .replica-section-label { margin-bottom: 30px; }

  .replica-story-copy p {
    font-size: clamp(23px, 6.55vw, 31px);
    line-height: 1.12;
    margin-bottom: 1.25em;
  }

  .replica-section-head {
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
  }

  .replica-section-head > :last-child {
    max-width: 46%;
    text-align: right;
  }

  .replica-asset-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .replica-asset-card--poster { width: min(78vw, 420px); }
  .replica-asset-card--poster .replica-asset-image { aspect-ratio: 2 / 3; height: auto; }

  .replica-asset-caption,
  .replica-still span {
    font-size: 10px;
  }

  .replica-stills-grid { grid-template-columns: 1fr; }

  .replica-credits {
    display: block;
  }

  .replica-credit-group + .replica-credit-group { margin-top: 68px; }

  .replica-credit-group ul { margin-top: 25px; }

  .replica-credit-group li {
    font-size: 11px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    padding: 12px 0 10px;
  }

  .replica-lightbox-shell {
    grid-template-rows: calc(64px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
  }

  .replica-lightbox-header {
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }

  .replica-lightbox-dot { height: 17px; width: 17px; }

  .replica-lightbox-stage {
    padding: 0 max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  }

  .replica-lightbox-external {
    font-size: 10px;
    margin: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .replica-asset-image img,
  .replica-still img { transition: none; }
}