/* Interior scene layout, responsive pinning and motion fallbacks. */

.inner-runway {
  --film: 1;
  --header: var(--header-height-default);
  --stage: calc(100svh - var(--header));
  background: var(--new-ground);
  color: var(--new-ink);
}

.inner-runway .inner-stage {
  min-height: var(--stage);
  margin: 0;
  display: grid;
  align-content: center;
  padding-block: clamp(2.5rem, 5.4vw, 5.75rem);
  background: var(--new-ground);
  color: var(--new-ink);
  overflow: clip;
}

.inner-runway.is-pinned {
  min-height: calc(var(--stage) + 42svh);
}

.inner-runway.is-pinned .inner-stage {
  position: sticky;
  top: var(--header);
}

.inner-runway .inner-stage > .inner-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(1.7rem, 5vw, 6rem);
  min-width: 0;
}

.inner-runway .inner-grid > * {
  min-width: 0;
}

.inner-runway .inner-grid :is(.hero-text, .route-hero__copy) {
  order: unset;
  z-index: 1;
}

.inner-runway .inner-grid h1 {
  letter-spacing: var(--tracking-heading-tight);
  line-height: 1.04;
  text-wrap: balance;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: min(clamp(2.45rem, 4.65vw, 5.3rem), 12.6cqi);
}

.inner-runway .inner-grid :is(h1, p, .eyebrow, .v5-hero-label, .case-overline) {
  color: inherit;
}

.inner-runway .inner-grid :is(.hero-deck, .route-hero__copy > p) {
  max-width: 48ch;
}

.inner-runway .inner-grid .button-quiet {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.inner-runway .inner-grid .v5-interior-hero__text-link {
  color: inherit;
}

.inner-runway .inner-grid .button-primary,
.inner-runway .inner-grid .button--primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-white);
}

.inner-runway .inner-grid :is(.button-primary, .button--primary):hover {
  background: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
}

.inner-runway .inner-grid .inner-next {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-top: 0.85rem;
  border-bottom: 2px solid currentColor;
  color: inherit;
  font-weight: var(--font-weight-bold);
}

.inner-film {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 7 / 5;
  padding: clamp(var(--space-text), 3.8vw, 3rem);
  overflow: hidden;
  perspective: 920px;
  background: color-mix(in srgb, var(--new-ground) 74%, var(--new-paper-ink));
  border: 1px solid color-mix(in srgb, var(--new-accent) 55%, transparent);
  color: var(--new-ink);
}

.inner-film__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(calc(var(--film) * -17px)) scale(1.07);
}

.inner-film__ground,
.inner-film__trace {
  fill: none;
  stroke: var(--new-accent);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.inner-film__ground {
  opacity: 0.22;
}

.inner-film__trace {
  opacity: 0.64;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--film));
}

.inner-film__subject {
  position: relative;
  width: 84%;
  margin: 0 auto;
  transform-origin: center;
  transform: translateY(calc(12px - var(--film) * 32px))
    rotateY(calc((1 - var(--film)) * var(--film-turn, -14deg)))
    scale(calc(0.94 + var(--film) * 0.1));
}

.inner-film__subject :is(.folio-art, .route-hero__figure) {
  margin: 0;
}

.inner-film__subject .folio-art {
  min-height: 0;
  aspect-ratio: 1.65;
  box-shadow: 0 24px 45px #12172555;
}

.inner-film__subject .route-hero__view {
  aspect-ratio: 1.65;
}

.inner-film__subject .route-hero__figure figcaption {
  display: none;
}

.inner-film__label {
  position: absolute;
  z-index: 2;
  inset: auto auto 0.7rem 0.75rem;
  padding: 0.37rem 0.62rem;
  background: var(--new-paper);
  color: var(--new-paper-ink);
  font: 750 0.74rem/1.3 var(--new-body);
  letter-spacing: 0.045em;
  transform: translateY(calc((1 - var(--film)) * 5px));
}

.inner-map .inner-film {
  border-radius: 0 42px 0 0;
}

.inner-editorial .inner-film {
  background: var(--new-paper);
}

.inner-editorial .inner-film__subject {
  --film-turn: 14deg;
}

.inner-editorial .inner-film__label {
  border-bottom: 1px solid currentColor;
}

.inner-evidence .inner-film__subject {
  --film-turn: 4deg;
  width: 91%;
}

.inner-lens .inner-film {
  border-radius: 48% 48% 12px 12px / 18% 18% 12px 12px;
}

.inner-doorway .inner-film {
  border-radius: 45% 45% 0 0 / 25% 25% 0 0;
}

.inner-signal .inner-film__plate {
  transform: translateX(calc(var(--film) * -25px)) scale(1.08);
}

.inner-structure .inner-film__subject {
  --film-turn: 18deg;
}

.inner-release .inner-film__subject {
  transform: translate(0, calc(22px - var(--film) * 47px)) scale(calc(0.92 + var(--film) * 0.13));
}

.inner-path .inner-film__subject {
  transform: translateX(calc((1 - var(--film)) * -23px));
}

.inner-path .inner-film {
  border-radius: 24px;
}

.inner-runway .inner-grid .inner-recovery-art {
  min-height: 0;
}

.redesign-midnight .inner-runway {
  --header: 84px;
}

@media (min-width: 980px) {
  .inner-editorial .inner-film,
  .inner-lens .inner-film {
    grid-column: 1;
    grid-row: 1;
  }
  .inner-editorial .inner-grid > :first-child,
  .inner-lens .inner-grid > :first-child {
    grid-column: 2;
    grid-row: 1;
  }
  .inner-map .inner-stage > .inner-grid {
    grid-template-columns: minmax(0, 0.87fr) minmax(0, 1.13fr);
  }
  .inner-evidence .inner-stage > .inner-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (max-width: 760px) {
  .inner-runway {
    --header: var(--header-height-mobile);
  }
  .inner-runway .inner-stage > .inner-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .inner-runway .inner-stage {
    padding-block: 1.8rem 2.2rem;
  }
  .inner-film {
    aspect-ratio: 16 / 10;
  }
  .inner-film__subject {
    width: 74%;
  }
  .inner-film__subject .folio-art {
    aspect-ratio: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-runway.is-pinned {
    min-height: 0;
  }
  .inner-runway.is-pinned .inner-stage {
    position: static;
  }
  .inner-film :is(.inner-film__plate, .inner-film__subject, .inner-film__label) {
    transform: none;
  }
  .inner-film__trace {
    stroke-dashoffset: 0;
  }
}

@media (min-width: 761px) and (max-width: 979px) {
  .inner-runway .inner-stage {
    align-content: start;
    padding-block-start: clamp(3rem, 12svh, 8rem);
  }
}

.inner-runway .inner-grid > :first-child:not(.inner-film) {
  container-type: inline-size;
}

@media (max-width: 760px) {
  .inner-runway .inner-grid h1 {
    font-size: min(clamp(2.1rem, 8.6vw, 3.7rem), 11.8cqi);
  }
}