/*
 * Final UI polish pass.
 * Keeps the existing Crossroad art direction while clarifying hierarchy:
 * TODAY first, launch countdown second, timeline content third.
 */

/* Palette experiment: confirmed information is silver; prediction is ice blue. */
:root {
  --actual: #dfe5e9;
  --actual-soft: rgba(223, 229, 233, .12);
  --prediction: #82cdfc;
  --prediction-soft: rgba(130, 205, 252, .13);
  --prediction-muted: color-mix(in srgb, var(--prediction) 58%, var(--muted));
  --prediction-border: rgba(130, 205, 252, .34);
}

/* PREP represents preparing for the future, so it belongs to prediction. */
.brand strong,
.intro-copy em {
  color: var(--prediction);
  text-shadow: 0 0 9px color-mix(in srgb, var(--prediction) 24%, transparent);
}

/* Match the launch marker to TODAY: both are fixed temporal anchors. */
.surface-launch {
  color: rgba(255, 255, 255, .98);
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, .18),
    0 0 5px rgba(255, 255, 255, .16);
}

.surface-launch span {
  color: rgba(231, 241, 247, .68);
  text-shadow: 0 0 10px rgba(255, 255, 255, .12);
}

/* Give the OFFICIAL LAUNCH label a small breathing space from the stage edge. */
@media (min-width: 761px) {
  .surface-launch {
    right: calc(100% - var(--axis-x) + 20px);
  }
}

.surface-launch:hover,
.surface-launch:focus-visible {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .34),
    0 0 20px rgba(225, 244, 255, .16);
}

/* Remove residual semantic blue from the official lane while retaining blue water light. */
.actual-spine {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(223, 229, 233, .012) 24%,
    rgba(223, 229, 233, .038) 50%,
    rgba(223, 229, 233, .012) 76%,
    transparent
  );
}

.official-badge {
  color: color-mix(in srgb, var(--actual) 92%, #fff);
  text-shadow: 0 0 14px color-mix(in srgb, var(--actual) 24%, transparent);
}

.brand-site.vfcr::before {
  text-shadow: 0 0 12px color-mix(in srgb, var(--actual) 24%, transparent);
}

.crossroad-hero > .trailer-archive,
.crossroad-hero > .trailer-archive.has-projection,
.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  --archive-accent: var(--actual) !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item,
.crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-rail-item {
  --item-accent: var(--actual) !important;
  --wall-signal: var(--actual);
}

/* Keep ACTUAL-axis dates clear of the fixed left rail as the desktop viewport narrows. */
@media (min-width: 761px) {
  :root {
    --axis-x: calc(
      max(0px, (100vw - var(--rail-w) - var(--stage-max)) / 4)
      + clamp(152px, 12vw, 220px)
    );
  }
}

/* Left rail: one centered module width and one consistent group rhythm. */
@media (min-width: 761px) {
  header {
    --rail-module-width: 46px;
    --rail-control-height: 58px;
  }

  .brand-sites {
    width: var(--rail-module-width);
    gap: 16px;
  }

  .brand-site {
    width: var(--rail-module-width);
    height: var(--rail-module-width);
    flex: 0 0 var(--rail-module-width);
  }

  header > .lang-toggle {
    width: var(--rail-module-width);
    height: var(--rail-control-height);
    min-height: var(--rail-control-height);
    margin-top: auto;
    padding: 6px 5px;
    row-gap: 5px;
  }

  .header-actions {
    width: var(--rail-module-width);
    align-items: center;
    gap: 0;
    margin-top: 16px;
  }

  .header-menu-toggle {
    width: var(--rail-module-width);
    height: var(--rail-control-height);
    min-height: var(--rail-control-height);
  }
}

/* 1. Give the junction a quiet, readable exclusion zone. */
html[data-crossroad-phase="prelaunch"] .intersection-sanctuary {
  display: none;
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-today {
  right: calc(50% + 22px);
  bottom: calc(50% + 20px);
  transform: translateZ(26px) scaleX(.78);
  transform-origin: right bottom;
  filter: none;
}

html[data-crossroad-phase="prelaunch"] .present-marker .axis-sector-prediction {
  left: calc(50% + 30px);
  top: 50%;
  translate: 0 -100%;
}

/* Historical predictions remain on the rail and fade by distance from TODAY. */

/* The PREDICTION sign doubles as a return-to-default control. */
.present-marker .axis-sector-prediction {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
}

.present-marker .axis-sector-prediction:hover,
.present-marker .axis-sector-prediction:focus-visible {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--prediction) 42%, transparent));
  outline: none;
}

.present-marker .axis-sector-prediction:focus-visible svg {
  outline: 1px solid color-mix(in srgb, var(--prediction) 74%, transparent);
  outline-offset: 3px;
}

html[data-crossroad-phase="prelaunch"] .present-marker .axis-sector-official {
  right: 50%;
  left: auto;
  top: calc(50% + 30px);
  translate: 0 0;
}

html[data-crossroad-phase="prelaunch"] .present-marker #official-authoring-trigger.axis-sector-official {
  right: -8px;
}

html[data-crossroad-phase="prelaunch"] .present-marker::before {
  width: 64px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--prediction) 24%, transparent) 28%,
    #fff 50%,
    color-mix(in srgb, var(--prediction) 24%, transparent) 72%,
    transparent
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--prediction) 18%, transparent);
}

html[data-crossroad-phase="prelaunch"] .present-marker::after {
  height: 70px;
  background: linear-gradient(
    transparent,
    rgba(130, 205, 252, .3) 28%,
    #fff 50%,
    rgba(130, 205, 252, .3) 72%,
    transparent
  );
  box-shadow: 0 0 11px rgba(130, 205, 252, .2);
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-core {
  width: 6px;
  height: 6px;
  opacity: .94;
  box-shadow:
    0 0 5px 1px rgba(255, 255, 255, .88),
    0 0 16px rgba(226, 244, 255, .3),
    0 0 36px rgba(130, 205, 252, .1);
  animation: junctionQuietBreath 7.2s cubic-bezier(.37, 0, .63, 1) infinite;
}

/* TODAY is the brightest instant, not a third timeline colour. */
html[data-crossroad-phase="prelaunch"] .present-marker .origin-today {
  color: rgba(255, 255, 255, .98);
  font-weight: 650;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, .18),
    0 0 5px rgba(255, 255, 255, .16);
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-today::before {
  color: rgba(231, 241, 247, .68);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: .22em;
  text-shadow: 0 0 10px rgba(255, 255, 255, .12);
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-today::after {
  display: none;
  border: 0;
  background: none;
  box-shadow: none;
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-today:hover,
html[data-crossroad-phase="prelaunch"] .present-marker .origin-today:focus-visible {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .34),
    0 0 20px rgba(225, 244, 255, .16);
}

/* A soft optical junction: no expanding rings or starburst flash. */
html[data-crossroad-phase="prelaunch"] .present-marker::before,
html[data-crossroad-phase="prelaunch"] .present-marker::after {
  animation: junctionLineBreathe 7.2s cubic-bezier(.37, 0, .63, 1) infinite;
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-core::before {
  width: 16px;
  height: 66px;
  border: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, .2) 0,
    rgba(225, 244, 255, .08) 30%,
    rgba(130, 205, 252, .025) 58%,
    transparent 78%
  );
  box-shadow: none;
  filter: blur(4px);
  opacity: .28;
  animation: junctionLensBreathe 7.2s cubic-bezier(.37, 0, .63, 1) infinite;
}

html[data-crossroad-phase="prelaunch"] .present-marker .origin-core::after {
  display: none;
}

html[data-crossroad-phase="prelaunch"] .rail-origin.is-light-hit .origin-core {
  animation: junctionImpactCore .86s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-light-hit::before {
  animation: junctionHorizontalTransfer .86s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-light-hit::after {
  animation: junctionVerticalPass .86s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  display: block;
  width: 200vw;
  height: 72px;
  translate: -50% -100%;
  overflow: visible;
  border-bottom: 1px solid rgba(164, 225, 253, .76);
  background: none;
  box-shadow:
    0 1px 0 rgba(74, 177, 229, .26),
    0 5px 20px rgba(61, 160, 220, .09);
  filter: drop-shadow(0 0 8px rgba(103, 203, 255, .2));
  pointer-events: none;
  animation: junctionFarHorizontalFlow 1.58s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::before,
html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::after {
  content: "";
  position: absolute;
  inset: 4px 0 2px;
  border-bottom: 1px solid rgba(117, 207, 247, .34);
  background: none;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::before {
  bottom: 8px;
  border-color: rgba(139, 220, 255, .48);
  animation: junctionFarRippleA 1.58s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::after {
  bottom: 14px;
  border-color: rgba(223, 247, 255, .32);
  animation: junctionFarRippleB 1.58s cubic-bezier(.16, .78, .22, 1) both;
}

html[data-crossroad-phase="prelaunch"] .rail-origin.is-snapped .origin-core {
  animation: junctionSettle .9s cubic-bezier(.22, 1, .36, 1);
}

html[data-crossroad-phase="prelaunch"] .rail-origin.is-snapped .origin-core::before {
  animation: junctionLensSettle .9s cubic-bezier(.22, 1, .36, 1);
}

@keyframes junctionQuietBreath {
  0%, 100% {
    opacity: .88;
    scale: .96;
    box-shadow: 0 0 5px rgba(255, 255, 255, .82), 0 0 14px rgba(226, 244, 255, .24), 0 0 32px rgba(130, 205, 252, .08);
  }
  52% {
    opacity: 1;
    scale: 1;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, .92), 0 0 18px rgba(226, 244, 255, .32), 0 0 40px rgba(130, 205, 252, .11);
  }
}

@keyframes junctionLineBreathe {
  0%, 100% { opacity: .68; }
  52% { opacity: .86; }
}

@keyframes junctionLensBreathe {
  0%, 100% { opacity: .2; transform: scaleY(.94); }
  52% { opacity: .32; transform: scaleY(1.04); }
}

@keyframes junctionLightWash {
  0% { filter: blur(1.2px); }
  46% { filter: blur(.15px); }
  100% { filter: none; }
}

@keyframes junctionHorizontalTransfer {
  0% { opacity: .66; transform: scaleX(.82); filter: brightness(1); box-shadow: 0 0 8px color-mix(in srgb, var(--prediction) 18%, transparent); }
  14% { opacity: 1; transform: scaleX(1.16); filter: brightness(1.78); box-shadow: 0 0 5px 1px rgba(248, 253, 255, .68), 0 0 26px 3px rgba(130, 205, 252, .42); }
  42% { opacity: .92; transform: scaleX(1.72); filter: brightness(1.28); box-shadow: 0 0 13px rgba(130, 205, 252, .3); }
  72% { opacity: .76; transform: scaleX(1.28); filter: brightness(1.08); box-shadow: 0 0 16px rgba(130, 205, 252, .16); }
  100% { opacity: .68; transform: scaleX(1); filter: none; box-shadow: 0 0 8px color-mix(in srgb, var(--prediction) 18%, transparent); }
}

@keyframes junctionFarHorizontalFlow {
  0% {
    opacity: 0;
    clip-path: inset(0 50%);
    filter: brightness(1.7) drop-shadow(0 0 2px rgba(214, 246, 255, .5));
  }
  13% {
    opacity: 1;
    clip-path: inset(0 44%);
    filter: brightness(2.05) drop-shadow(0 0 11px rgba(103, 203, 255, .46));
  }
  54% {
    opacity: .92;
    clip-path: inset(0 2%);
    filter: brightness(1.24) drop-shadow(0 0 15px rgba(103, 203, 255, .28));
  }
  76% {
    opacity: .48;
    clip-path: inset(0);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    clip-path: inset(0);
    filter: none;
  }
}

@keyframes junctionFarRippleA {
  0% { opacity: 0; clip-path: inset(0 50%); transform: translateY(0) scaleY(.55); }
  18% { opacity: .8; clip-path: inset(0 38%); transform: translateY(-1px) scaleY(.8); }
  58% { opacity: .68; clip-path: inset(0); transform: translateY(2px) scaleY(1.16); }
  100% { opacity: 0; clip-path: inset(0); transform: translateY(-2px) scaleY(.72); }
}

@keyframes junctionFarRippleB {
  0% { opacity: 0; clip-path: inset(0 50%); transform: translateY(0) scaleY(.5); }
  24% { opacity: .55; clip-path: inset(0 32%); transform: translateY(2px) scaleY(.9); }
  66% { opacity: .44; clip-path: inset(0); transform: translateY(-2px) scaleY(1.2); }
  100% { opacity: 0; clip-path: inset(0); transform: translateY(1px) scaleY(.7); }
}

@keyframes junctionVerticalPass {
  0% { opacity: .68; transform: scaleY(.88); filter: brightness(1); }
  14% { opacity: 1; transform: scaleY(1.12); filter: brightness(1.58); box-shadow: 0 0 8px rgba(245, 252, 255, .44), 0 0 22px rgba(130, 205, 252, .3); }
  48% { opacity: .84; transform: scaleY(1.04); filter: brightness(1.16); box-shadow: 0 0 12px rgba(130, 205, 252, .2); }
  100% { opacity: .68; transform: scaleY(1); }
}

@keyframes junctionImpactCore {
  0% {
    opacity: .94;
    scale: 1;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, .88), 0 0 16px rgba(226, 244, 255, .3), 0 0 36px rgba(130, 205, 252, .1);
  }
  12% {
    opacity: 1;
    scale: 1.38;
    box-shadow: 0 0 7px 2px rgba(255, 255, 255, .98), 0 0 22px 5px rgba(226, 244, 255, .48), 0 0 58px 12px rgba(130, 205, 252, .22);
  }
  38% {
    opacity: .98;
    scale: 1.08;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, .94), 0 0 25px rgba(226, 244, 255, .38), 0 0 48px rgba(130, 205, 252, .16);
  }
  100% {
    opacity: .94;
    scale: 1;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, .88), 0 0 16px rgba(226, 244, 255, .3), 0 0 36px rgba(130, 205, 252, .1);
  }
}

@keyframes junctionSettle {
  0% { opacity: .72; scale: .94; filter: blur(1.4px); }
  62% { opacity: 1; scale: 1.02; filter: blur(0); }
  100% { opacity: .94; scale: 1; filter: none; }
}

@keyframes junctionLensSettle {
  0% { opacity: .16; transform: scaleY(.86); filter: blur(5px); }
  62% { opacity: .34; transform: scaleY(1.04); filter: blur(3.5px); }
  100% { opacity: .28; transform: scaleY(1); filter: blur(4px); }
}

/* 2. Keep the launch counter monumental without overpowering the junction.
   The value is a distance read through water, so it scales with the viewport
   rather than with its own box. Bound to `cqi` it stayed at ~101px no matter
   how wide the display grew, which read as small rather than as far away. */
.countdown-deck {
  /* Published as a variable so the question mark can be placed against the
     numeral's own height rather than against its small parent. */
  --launch-numeral: clamp(74px, 13vw, 240px);
  width: min(640px, calc(100% - var(--axis-x) - 140px));
}

.countdown-deck .featured-panel .launch-countdown-button {
  font-size: var(--launch-numeral);
}

.countdown-deck .count-kicker .prediction-badge {
  opacity: .84;
}

.countdown-deck .featured-panel .launch-countdown-button b {
  color: color-mix(in srgb, var(--prediction) 82%, #10283a 18%);
  -webkit-text-fill-color: color-mix(in srgb, var(--prediction) 82%, #10283a 18%);
  -webkit-text-stroke: 0;
}

/* Remove the legacy passing-light glyph overlay; it reads as a white block in 4. */
.countdown-deck .cutout-light-overlay {
  display: none !important;
}

.count-question {
  font-size: 3.45em;
}

/* 3. Distinguish the speculative rail by rhythm, not another accent color. */
.prediction-line {
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--prediction) 30%, transparent) 0 8px,
    transparent 8px 15px
  );
  box-shadow: none;
  opacity: .72;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.future-official-full {
  border-left: 2px solid color-mix(in srgb, var(--actual) 48%, transparent);
}

/* 4. Let only the selected/near cards carry strong light. */
.prediction-card.lod-uniform:not(.add-card) {
  --lod-card-border: color-mix(in srgb, var(--prediction) 12%, transparent);
  --lod-card-bg: color-mix(in srgb, var(--bg) 91%, transparent);
  --lod-card-copy: color-mix(in srgb, var(--text) 72%, var(--muted));
  --lod-card-meta: color-mix(in srgb, var(--prediction) 34%, var(--muted));
  --lod-card-accent: color-mix(in srgb, var(--prediction) 58%, var(--text));
  border-color: transparent;
  border-top-color: var(--lod-card-border);
  top: 89px;
  translate: none !important;
  will-change: auto;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--prediction) 4%, transparent),
    0 12px 26px rgba(0, 0, 0, .2);
}

.prediction-card.lod-uniform.is-light-near:not(.add-card) {
  --lod-card-meta: color-mix(in srgb, var(--prediction) 48%, var(--text));
  --lod-card-accent: color-mix(in srgb, var(--prediction) 72%, var(--text));
  border-top-color: color-mix(in srgb, var(--prediction) 28%, transparent);
}

.prediction-card.lod-uniform.is-light-primary:not(.add-card),
.prediction-card.lod-uniform:not(.add-card):hover,
.prediction-card.lod-uniform:not(.add-card):focus-visible {
  --lod-card-meta: color-mix(in srgb, var(--prediction) 68%, var(--text));
  --lod-card-accent: color-mix(in srgb, var(--prediction) 88%, var(--text));
  border-color: color-mix(in srgb, var(--prediction) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--prediction) 68%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--prediction) 18%, transparent),
    0 13px 30px rgba(0, 0, 0, .28),
    0 0 18px color-mix(in srgb, var(--prediction) 12%, transparent);
}

.prediction-card.lod-uniform.is-light-primary::before {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--prediction) 30%, transparent));
}

.prediction-card.lod-uniform.is-light-primary .prediction-days-ahead {
  text-shadow: 0 0 12px color-mix(in srgb, var(--prediction) 22%, transparent);
}

.rail .prediction-card.lod-uniform.is-past-position:not(.add-card),
.rail .prediction-card.lod-uniform.is-past-position:not(.add-card):hover,
.rail .prediction-card.lod-uniform.is-past-position:not(.add-card):focus-visible {
  opacity: .26;
}

.rail .prediction-card.lod-uniform.is-axis-overlap:not(.add-card),
.rail .prediction-card.lod-uniform.is-axis-overlap:not(.add-card):hover,
.rail .prediction-card.lod-uniform.is-axis-overlap:not(.add-card):focus-visible {
  opacity: .09;
}

/* Give the first upcoming prediction more air after the junction sign. */
@media (min-width: 761px) {
  .rail-anchor {
    margin-right: 110px;
  }
}

/* 5. Make the scheduled stack read as one compact component. */
html[data-crossroad-phase="prelaunch"] .future-official-stack {
  height: calc(48px + (var(--future-stack-size, 1) - 1) * 4px);
}

html[data-crossroad-phase="prelaunch"] .future-official-chip {
  left: calc(var(--stack-depth, 0) * 4px);
  right: calc(var(--stack-depth, 0) * 4px);
  bottom: calc(var(--stack-depth, 0) * 4px);
}

/* Rear glass plates expose their top edge, not a rule through the front plate. */
html[data-crossroad-phase="prelaunch"]
  .future-official-zone:not(.is-expanded)
  .future-official-card:not([data-stack-depth="0"]) {
  border-bottom-color: transparent;
  clip-path: inset(-1px -1px calc(100% - 11px) -1px);
}

html[data-crossroad-phase="prelaunch"] .future-official-card[data-stack-depth="0"] {
  padding-right: 72px;
}

html[data-crossroad-phase="prelaunch"] .future-official-stack-toggle {
  right: 10px;
  bottom: 9px;
  min-width: 48px;
  height: 32px;
  border: 0;
  border-top: 0;
  background: transparent;
  padding: 6px 0 0;
  font-size: 12px;
}

html[data-crossroad-phase="prelaunch"] .future-official-stack-toggle:hover,
html[data-crossroad-phase="prelaunch"] .future-official-stack-toggle:focus-visible {
  background: transparent;
}

html[data-crossroad-phase="prelaunch"] .future-official-zone.is-expanded:not(.is-all-expanded) .future-official-stack-toggle {
  top: 35px;
}

html[data-crossroad-phase="prelaunch"] .future-official-zone.is-all-expanded .future-official-stack-toggle {
  top: 2px;
}

html[data-crossroad-phase="prelaunch"] .future-official-zone:not(.is-all-expanded) .future-official-card.is-future-overflow,
html[data-crossroad-phase="prelaunch"] .future-official-zone.is-all-expanded .future-official-more {
  display: none;
}

/* 6. Lift long-form official copy one step without flattening the depth. */
.future-official-full p {
  color: color-mix(in srgb, var(--text) 25%, var(--muted));
}

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .intersection-sanctuary {
    width: 164px;
    height: 144px;
  }

  html[data-crossroad-phase="prelaunch"] .present-marker .origin-today {
    right: calc(50% + 18px);
    bottom: calc(50% + 17px);
    transform: translateZ(18px) scaleX(.78);
  }

  html[data-crossroad-phase="prelaunch"] .present-marker .axis-sector-prediction {
    left: calc(50% + 20px);
    top: 50%;
  }

  /* Keep the 44px touch target without stretching the visible sign. */
  html[data-crossroad-phase="prelaunch"] .present-marker .axis-sector-prediction svg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 25px;
  }

  html[data-crossroad-phase="prelaunch"] .present-marker .axis-sector-official {
    top: calc(50% + 20px);
  }


  html[data-crossroad-phase="prelaunch"] .present-marker #official-authoring-trigger.axis-sector-official {
    right: -9.5px;
  }

  .countdown-deck {
    --launch-numeral: clamp(50px, 18vw, 66px);
    width: auto;
  }

  .countdown-deck .featured-panel .launch-countdown-button {
    font-size: var(--launch-numeral);
  }

  .count-question {
    font-size: 3em;
  }

  .prediction-card.lod-uniform:not(.add-card) {
    top: 82px;
  }

  .rail-anchor {
    margin-right: 114px;
  }

  html[data-crossroad-phase="prelaunch"] .future-official-stack-toggle {
    font-size: 11px;
  }
}

.rail .prediction-card:not(.add-card)::before {
  background: linear-gradient(
    color-mix(in srgb, var(--prediction) 68%, transparent),
    color-mix(in srgb, var(--prediction) 24%, transparent) 68%,
    color-mix(in srgb, var(--prediction) 9%, transparent)
  ) 50% 0 / 1px 100% no-repeat;
}

/* When the launch counter brings its card forward, complete the connector as
   an L: descend from the axis, then run toward the card's foreground edge. */
.rail .prediction-card.launch-projection-source:focus::before {
  left: 0;
  top: -41px;
  width: var(--prediction-anchor-x);
  height: 42px;
  background:
    linear-gradient(
      color-mix(in srgb, var(--prediction) 72%, transparent),
      color-mix(in srgb, var(--prediction) 28%, transparent)
    ) right top / 1px calc(100% - 1px) no-repeat,
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--prediction) 62%, transparent) 0 4px,
      transparent 4px 9px
    ) left bottom / 100% 1px no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--prediction) 18%, transparent));
}

@media (max-width: 760px) {
  .rail .prediction-card.launch-projection-source:focus::before {
    top: -37px;
    height: 38px;
  }
}

/* Medium-density timeline: show more items without turning them into tiny labels. */
.rail {
  --lod-card-width: clamp(220px, 18vw, 245px);
  gap: clamp(18px, 2.8vw, 38px);
}

.prediction-card.lod-uniform:not(.add-card) {
  min-height: 96px !important;
  max-height: 96px;
  padding: 11px 14px 12px !important;
}

.prediction-card.lod-uniform:not(.add-card) .prediction-title {
  min-height: calc(2 * 1.32em);
  font-size: 14px !important;
  line-height: 1.32 !important;
}

.prediction-card.lod-uniform:not(.add-card) .prediction-date {
  font-size: 11px !important;
}

.official-event {
  margin-bottom: 100px;
}

.latest-head .official-date,
.official-event > .official-date,
.future-official-card > .official-date {
  height: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.official-date-main {
  display: block;
}

.official-date-offset {
  display: block;
  color: color-mix(in srgb, var(--actual) 32%, transparent);
  font: 600 12px/1 var(--mono);
  letter-spacing: .14em;
  text-shadow: none;
}

@media (max-width: 760px) {
  .rail {
    --lod-card-width: min(250px, calc(78vw - 12px));
    gap: 16px;
  }

  .prediction-card.lod-uniform:not(.add-card) {
    min-height: 92px !important;
    max-height: 92px;
  }

  .official-event {
    margin-bottom: 82px;
  }
}

/* Thumbnail launcher: the bundle is the icon and stays pinned beside WDK. */
.crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-collapsed {
  width: 132px !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner {
  width: 132px !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle {
  width: 132px !important;
  min-height: 74px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive .trailer-collapsed-preview {
  display: block !important;
  width: 132px !important;
  height: 74px !important;
  margin: 0 !important;
  transition: filter .22s ease, translate .22s cubic-bezier(.2, .7, .25, 1);
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle:hover .trailer-collapsed-preview,
.crossroad-hero > .trailer-archive .trailer-archive-toggle:focus-visible .trailer-collapsed-preview {
  translate: 0 -3px;
  filter: brightness(1.07);
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  width: 450px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  width: 450px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 308px) 132px !important;
  column-gap: 10px !important;
  align-items: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-body {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  animation: trailerChoicesSpread .3s cubic-bezier(.2, .75, .25, 1) both !important;
  transform-origin: right bottom;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-float {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-float {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  top: -7px !important;
  left: calc(100% - 21px) !important;
  padding: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-gear {
  font-size: 18px !important;
}

@keyframes trailerChoicesSpread {
  from { opacity: .04; translate: 15px 0; clip-path: inset(0 0 0 18%); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-collapsed,
  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner,
  .crossroad-hero > .trailer-archive .trailer-archive-toggle,
  .crossroad-hero > .trailer-archive .trailer-collapsed-preview {
    width: 108px !important;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle,
  .crossroad-hero > .trailer-archive .trailer-collapsed-preview {
    min-height: 61px !important;
    height: 61px !important;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) {
    width: min(330px, calc(100vw - 72px)) !important;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 108px !important;
  }
}

/* Final interaction layer: keep these after all trailer placement variants. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: 90deg !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-archive-toggle-mark,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-archive-toggle-mark {
  translate: -50% 2px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  margin-left: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: -90deg !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-1,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-1 {
  translate: 4px 2px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-2,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-2 {
  translate: 8px 4px;
}

/* Final thumbnail-launcher geometry. Keep this last. */
.crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-collapsed,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner {
  width: 132px !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle {
  width: 132px !important;
  min-height: 74px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive .trailer-collapsed-preview {
  display: block !important;
  width: 132px !important;
  height: 74px !important;
  margin: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  width: 450px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  width: 450px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 308px) 132px !important;
  column-gap: 10px !important;
  align-items: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-body {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  animation: trailerChoicesSpread .3s cubic-bezier(.2, .75, .25, 1) both !important;
  transform-origin: right bottom;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-float {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-float {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  top: -7px !important;
  left: calc(100% - 21px) !important;
  padding: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-gear {
  font-size: 18px !important;
}

/* Trailer clip: the sign remains fixed; only the thumbnail bundle unfolds. */
.crossroad-hero > .trailer-archive .trailer-archive-toggle-mark {
  display: none !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
  position: relative !important;
  width: 42px !important;
  min-width: 42px !important;
  min-height: 102px !important;
  padding: 0 !important;
  display: block !important;
  clip-path: polygon(50% 0, 100% 15px, 100% 100%, 0 100%, 0 15px) !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-copy {
  position: absolute !important;
  left: 50% !important;
  top: 53% !important;
  width: max-content !important;
  translate: -50% -50% !important;
  rotate: -90deg !important;
  font-size: 14px !important;
  letter-spacing: 1.8px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  width: min(360px, calc(100vw - 176px)) !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  grid-column: 1;
  grid-row: 1;
  width: 42px !important;
  min-height: 102px !important;
  margin: 0 !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-collapsed-preview {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-body {
  grid-column: 2;
  grid-row: 1;
  margin-top: 14px;
  animation: trailerBundleUnfold .32s cubic-bezier(.2, .75, .25, 1) both !important;
  transform-origin: left top;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-float {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image {
  transition: translate .24s cubic-bezier(.2, .7, .25, 1), filter .24s ease;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image {
  translate: 0 0 !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-0,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-0 {
  translate: 0 -3px !important;
  filter: brightness(1.06);
}

@keyframes trailerBundleUnfold {
  from { opacity: .05; translate: -10px 5px; clip-path: inset(0 10% 0 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle:focus-visible {
  outline: none !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle:focus-visible .trailer-archive-toggle-heading {
  box-shadow: 0 0 0 1px rgba(223, 229, 233, .42), 0 0 22px rgba(223, 229, 233, .18) !important;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 84px !important;
    clip-path: polygon(50% 0, 100% 12px, 100% 100%, 0 100%, 0 12px) !important;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle-copy {
    font-size: 12px !important;
    letter-spacing: 1.35px !important;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) {
    width: min(330px, calc(100vw - 72px)) !important;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
    width: 34px !important;
    min-height: 84px !important;
  }
}

@media (min-width: 761px) and (max-width: 1400px) {
  html[data-crossroad-phase="prelaunch"] .present-marker .origin-today {
    right: calc(50% + 20px);
    bottom: calc(50% + 18px);
    font-size: 21px;
    letter-spacing: .06em;
    transform: translateZ(22px) scaleX(.7);
  }
}

/* VIDEO and COLLECTION share the same restrained media-tool treatment. */
.header-tool-panel .video-add-open {
  color: var(--prediction);
  border-color: rgba(221, 230, 236, .2);
  background: rgba(5, 10, 17, .72);
}

.header-tool-panel .video-add-open:hover,
.header-tool-panel .video-add-open:focus-visible {
  color: var(--prediction);
  border-color: color-mix(in srgb, var(--prediction) 66%, transparent);
  background: color-mix(in srgb, var(--prediction) 9%, rgba(5, 10, 17, .86));
}

/* Keep the shared media baseline stable rather than letting two items drift. */
.countdown-deck .featured-panel,
.wdk-signature {
  animation: none !important;
}

.vfprep-signature {
  top: calc(var(--media-row-screen-bottom, 210px) - 122px);
}

.wdk-signature {
  top: calc(var(--media-row-screen-bottom, 210px) - 52px);
}

/* The outer tag points to the surface; the inner chevron shows the action. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: 90deg;
  transition: translate .2s ease, rotate .24s ease;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-archive-toggle-mark,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-archive-toggle-mark {
  translate: -50% 2px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  margin-left: 0;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: -90deg;
}

/* A restrained fan-out: enough to reveal depth without a springy card trick. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-1,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-1 {
  translate: 4px 2px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-2,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-2 {
  translate: 8px 4px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection) .trailer-archive-body {
  animation: trailerDrawerReveal .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes trailerDrawerReveal {
  from { opacity: .01; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intersection-sanctuary,
  .prediction-line,
  .prediction-card,
  .future-official-stack,
  .future-official-chip,
  .future-official-stack-toggle {
    transition: none !important;
  }

  html[data-crossroad-phase="prelaunch"] .present-marker::before,
  html[data-crossroad-phase="prelaunch"] .present-marker::after,
  html[data-crossroad-phase="prelaunch"] .present-marker .origin-core,
  html[data-crossroad-phase="prelaunch"] .present-marker .origin-core::before {
    animation: none !important;
  }

  html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary {
    opacity: .34;
    clip-path: none;
    animation: none !important;
  }

  html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::before,
  html[data-crossroad-phase="prelaunch"] .present-marker.is-junction-flow .intersection-sanctuary::after {
    display: none;
  }
}

/* Video room v2: one clear stage, one control row, one filmstrip. */
.trailer-embed-note {
  display: none;
  margin: 0;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
  width: min(1180px, calc(100vw - var(--rail-w, 80px) - 56px)) !important;
  height: min(780px, calc(100svh - 32px)) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall {
  display: block !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  width: min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px)) !important;
  margin: 58px auto 0 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media {
  aspect-ratio: 16 / 9 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 12px !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-embed-note {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: rgba(190, 215, 228, .54);
  font: 600 9px/1.35 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .07em;
  white-space: nowrap;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-embed-note::before {
  content: "YT";
  display: grid;
  width: 25px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(190, 215, 228, .25);
  color: rgba(220, 237, 246, .72);
  font-size: 8px;
  letter-spacing: .06em;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
  grid-column: 2 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
  right: max(32px, calc((100% - min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px))) / 2)) !important;
  bottom: 10px !important;
  left: max(32px, calc((100% - min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px))) / 2)) !important;
  grid-auto-columns: 118px !important;
  gap: 8px !important;
  height: 72px !important;
  padding: 4px 0 5px !important;
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent) !important;
}

.trailer-depth-index-item {
  width: 118px;
  height: 66px;
  opacity: .56;
}

.trailer-depth-index-item[aria-current="true"] {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
    width: calc(100vw - 20px) !important;
    height: calc(100svh - 20px) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
    width: calc(100vw - 36px) !important;
    margin-top: max(76px, calc((100svh - 560px) / 2)) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline,
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed).has-visible-player .trailer-media-topline {
    top: -56px !important;
    padding-right: 104px;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-embed-note {
    font-size: 8px;
    white-space: normal;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
    grid-column: 1 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 2px !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    grid-auto-columns: 88px !important;
    height: 58px !important;
  }

  .trailer-depth-index-item {
    width: 88px;
    height: 50px;
  }
}

/* IF is the premise of the launch estimate; LAUNCH and its date are the
   compact specification directly beneath it. */
.countdown-deck .count-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.countdown-deck .count-kicker::after {
  width: clamp(32px, 7cqi, 68px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--prediction), transparent);
  opacity: .48;
}

.countdown-deck .count-kicker .prediction-badge {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--prediction);
  font-family: "Bahnschrift Condensed", "Arial Narrow", var(--mono);
  font-size: clamp(23px, 5.6cqi, 34px);
  font-style: italic;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.035em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--prediction) 22%, transparent);
  transform: skewX(-7deg);
}

.countdown-deck .count-kicker .prediction-badge::before,
.countdown-deck .count-kicker .prediction-badge::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.countdown-deck .count-kicker .prediction-badge::before {
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(245, 253, 255, .96) 49%, rgba(245, 253, 255, .96) 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(183, 231, 255, .82) 49%, rgba(183, 231, 255, .82) 51%, transparent 53%);
  transform: translate(-50%, -50%) scale(.2) rotate(0deg);
  filter: drop-shadow(0 0 8px rgba(113, 207, 250, .76));
}

.countdown-deck .count-kicker .prediction-badge::after {
  left: calc(100% + 4px);
  top: calc(50% - 1px);
  width: clamp(300px, 58cqi, 470px);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(224, 247, 255, .92) 0 9px,
    rgba(105, 202, 248, .5) 9px 14px,
    transparent 14px 21px
  );
  box-shadow: 0 0 5px rgba(196, 238, 255, .72), 0 0 16px rgba(91, 191, 240, .38);
  -webkit-mask-image: linear-gradient(90deg, #000 0 76%, rgba(0, 0, 0, .72) 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 76%, rgba(0, 0, 0, .72) 86%, transparent 100%);
  transform-origin: left center;
}

.countdown-deck .count-kicker.is-orb-if-pass .prediction-badge {
  animation: launchIfRefraction 1.12s cubic-bezier(.16, .76, .16, 1) both;
}

.countdown-deck .count-kicker.is-orb-if-pass .prediction-badge::before {
  animation: launchIfGlint .72s cubic-bezier(.18, .78, .18, 1) both;
}

.countdown-deck .count-kicker.is-orb-if-pass .prediction-badge::after {
  animation: launchIfAxisSurge 1.34s linear both;
}

.countdown-deck .count-kicker.is-orb-if-pass::after {
  animation: launchIfPremiseLine 1.34s ease-in both;
}

.countdown-deck .featured-panel.is-orb-number-pass .cutout-light-overlay {
  animation: launchNumberDepthPass 1.24s cubic-bezier(.18, .72, .2, 1) both;
}

.countdown-deck .featured-panel.is-orb-number-pass .launch-countdown-button b {
  animation: launchNumberEdgeAnswer 1.24s cubic-bezier(.18, .72, .2, 1) both;
}

@keyframes launchIfRefraction {
  0%, 100% {
    color: var(--prediction);
    filter: none;
    text-shadow: 0 0 16px color-mix(in srgb, var(--prediction) 22%, transparent);
  }
  18% {
    color: rgba(244, 252, 255, .98);
    filter: brightness(1.8) saturate(1.2);
    text-shadow: 0 0 5px rgba(255, 255, 255, .88), 0 0 24px rgba(100, 200, 248, .78), 0 0 58px rgba(74, 176, 236, .52);
  }
  56% {
    color: color-mix(in srgb, var(--prediction) 74%, #fff 26%);
    filter: brightness(1.14);
    text-shadow: 0 0 19px rgba(100, 200, 248, .28);
  }
}

@keyframes launchIfGlint {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16) rotate(0deg); filter: blur(2px); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(.62) rotate(16deg); filter: drop-shadow(0 0 9px rgba(198, 241, 255, .92)); }
  52% { opacity: .84; transform: translate(-50%, -50%) scale(1.08) rotate(31deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48) rotate(43deg); filter: blur(1px); }
}

@keyframes launchIfAxisSurge {
  0% { opacity: 0; transform: translateX(0) scaleX(.015); filter: blur(2px); }
  18% { opacity: .62; transform: translateX(0) scaleX(.035); filter: blur(.8px); }
  36% { opacity: .96; transform: translateX(0) scaleX(.1); filter: blur(.2px); }
  58% { opacity: 1; transform: translateX(0) scaleX(.34); filter: none; }
  78% { opacity: .9; transform: translateX(0) scaleX(.74); filter: brightness(1.28); }
  91% { opacity: .62; transform: translateX(7px) scaleX(1); filter: brightness(1.48); }
  100% { opacity: 0; transform: translateX(22px) scaleX(1.045); filter: blur(1.2px); }
}

@keyframes launchIfPremiseLine {
  0%, 100% { opacity: .48; transform: scaleX(1); filter: none; }
  22% { opacity: 1; transform: scaleX(.32); filter: brightness(2.2); }
  74% { opacity: .82; transform: scaleX(1.42); filter: drop-shadow(0 0 7px rgba(104, 202, 250, .5)); }
}

@keyframes launchNumberDepthPass {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(-10px);
    filter: blur(4px);
  }
  16% {
    opacity: .88;
    clip-path: inset(0 68% 0 0);
    transform: translateY(-5px);
    filter: blur(1px) drop-shadow(0 0 10px rgba(155, 226, 255, .46));
  }
  42% {
    opacity: .76;
    clip-path: inset(0 34% 0 0);
    transform: translateY(0);
    filter: blur(.35px) drop-shadow(0 0 14px rgba(103, 203, 255, .38));
  }
  68% {
    opacity: .64;
    clip-path: inset(0);
    transform: translateY(4px);
    filter: drop-shadow(0 0 11px rgba(103, 203, 255, .28));
  }
  100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translateY(9px);
    filter: blur(2px);
  }
}

@keyframes launchNumberEdgeAnswer {
  0%, 100% {
    filter: none;
    text-shadow: 0 0 20px color-mix(in srgb, var(--prediction) 10%, transparent);
  }
  20% {
    filter: brightness(1.32);
    text-shadow: 0 0 7px rgba(229, 248, 255, .38), 0 0 28px rgba(103, 203, 255, .22);
  }
  72% {
    filter: brightness(1.08);
    text-shadow: 0 7px 20px rgba(103, 203, 255, .16);
  }
}

.countdown-deck .launch-count-meta {
  gap: 6px;
}

.countdown-deck .launch-count-target {
  color: color-mix(in srgb, var(--prediction) 70%, var(--text));
}

.countdown-deck .featured-panel .launch-countdown-button {
  align-items: baseline;
}

.countdown-deck .featured-panel .launch-countdown-button small {
  align-self: baseline;
  margin-bottom: 0;
}

.countdown-deck .launch-count-meta {
  align-self: flex-end;
}

@media (max-width: 760px) {
  .countdown-deck .count-kicker {
    gap: 7px;
  }

  .countdown-deck .count-kicker .prediction-badge {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-deck .count-kicker.is-orb-if-pass .prediction-badge,
  .countdown-deck .count-kicker.is-orb-if-pass .prediction-badge::before,
  .countdown-deck .count-kicker.is-orb-if-pass .prediction-badge::after,
  .countdown-deck .count-kicker.is-orb-if-pass::after,
  .countdown-deck .featured-panel.is-orb-number-pass .cutout-light-overlay,
  .countdown-deck .featured-panel.is-orb-number-pass .launch-countdown-button b {
    animation: none !important;
  }

  .countdown-deck .count-kicker.is-orb-if-pass .prediction-badge {
    filter: brightness(1.16);
  }

  .countdown-deck .featured-panel.is-orb-number-pass .cutout-light-overlay {
    opacity: .22;
  }
}

/* Detach the depth room from the compact bundle's containing block and grid. */
.crossroad-hero.is-trailer-depth {
  perspective: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-body {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  height: auto !important;
  grid-template-columns: 1fr !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media {
  width: 100% !important;
  height: auto !important;
}

/* Trailer archive: an independent media catch suspended from the lit surface. */
.crossroad-hero > .trailer-archive {
  --trailer-dock-top: clamp(86px, 9svh, 112px);
  --countdown-dock-left: calc(var(--rail-w) + clamp(176px, 16vw, 328px));
  --trailer-dock-right: clamp(150px, 9vw, 190px);
  --trailer-expanded-width: clamp(
    330px,
    calc(100% - var(--trailer-dock-right) - var(--countdown-dock-left) - 420px),
    720px
  );
  top: var(--trailer-dock-top);
  right: var(--trailer-dock-right);
  left: auto;
  width: var(--trailer-expanded-width);
}

.crossroad-hero > .trailer-archive.is-collapsed {
  right: var(--trailer-dock-right);
  left: auto;
  width: 206px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  margin-left: calc(100% - 206px);
}

@media (min-width: 761px) {
  /* Anchor is deliberately unchanged: the deck grows to the right from here,
     so the wider box never crosses back over the official axis. */
  .countdown-deck {
    left: calc(var(--axis-x) - 83px) !important;
    right: auto !important;
    top: clamp(42px, 6svh, 72px) !important;
    bottom: auto !important;
  }

  .countdown-deck .count-kicker,
  .countdown-deck .featured-panel .launch-countdown-button {
    width: auto;
    margin-left: 0;
  }

  .countdown-deck .launch-count-meta,
  .countdown-deck .launch-count-label,
  .countdown-deck .launch-count-target {
    align-self: flex-start;
    text-align: left;
  }

  .crossroad-hero:has(> .trailer-archive:not(.is-collapsed)) .countdown-deck {
    transform: none;
    opacity: 1;
  }

  .crossroad-hero:has(> .trailer-archive:not(.is-collapsed)) .countdown-deck .launch-countdown-button {
    pointer-events: auto;
  }

  .crossroad-hero:has(> .trailer-archive:not(.is-collapsed)) .launch-edge-banner {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 6px));
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    left: calc(100% - 10px);
  }
}

/* The large 428 DAYS and the launch card's +428 DAYS are the same date.
   Draw one dotted L-route between those two readings. */
.launch-projection-layer.is-remote {
  opacity: 0;
}

.launch-projection-line {
  display: block;
  opacity: .92;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--prediction) 28%, transparent));
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--prediction) 92%, transparent) 0 3px,
      transparent 3px 8px
    ) left top / 100% 2px no-repeat,
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--prediction) 92%, transparent) 0 3px,
      transparent 3px 8px
    ) right top / 2px 100% no-repeat;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Retire the former blue branch and node that implied a timeline attachment. */
.crossroad-hero > .trailer-archive .trailer-archive-inner::before,
.crossroad-hero > .trailer-archive .trailer-archive-inner::after {
  display: none !important;
}

.crossroad-hero > .trailer-archive .trailer-suspension {
  position: absolute;
  z-index: 10;
  left: calc(100% - 112px);
  bottom: 100%;
  width: 20px;
  height: var(--trailer-dock-top);
  translate: -10px 0;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive .trailer-suspension svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crossroad-hero > .trailer-archive .trailer-wire-haze,
.crossroad-hero > .trailer-archive .trailer-wire-core {
  fill: none;
  stroke: url(#trailer-wire-gradient);
  vector-effect: non-scaling-stroke;
}

.crossroad-hero > .trailer-archive .trailer-wire-haze {
  stroke-width: 4.5px;
  opacity: .42;
  filter: url(#trailer-wire-soft);
}

.crossroad-hero > .trailer-archive .trailer-wire-core {
  stroke-width: .85px;
  opacity: .9;
}

.crossroad-hero > .trailer-archive .trailer-suspension::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  width: 78px;
  height: 34px;
  border-radius: 50%;
  translate: -50% 0;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 252, 222, .98) 0 5%, rgba(255, 223, 145, .82) 11%, rgba(255, 158, 57, .46) 25%, transparent 62%),
    radial-gradient(ellipse at 50% 8%, rgba(255, 182, 79, .44), transparent 70%);
  filter: blur(4px);
  mix-blend-mode: screen;
}

.crossroad-hero > .trailer-archive .trailer-suspension::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 5px;
  border: 0;
  border-radius: 45% 45% 35% 35%;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(116, 62, 39, .9), rgba(20, 15, 17, .96));
  box-shadow:
    inset 0 1px rgba(222, 133, 70, .32),
    0 2px 5px rgba(0, 0, 0, .48);
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  animation: trailerLoadSettle .52s cubic-bezier(.2, .78, .25, 1) both;
}

@keyframes trailerLoadSettle {
  0% { translate: 0 -3px; }
  42% { translate: 1px 1px; }
  72% { translate: -1px 0; }
  100% { translate: 0; }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive {
    --trailer-dock-top: 82px;
    --trailer-dock-left: calc(50% - 87px);
    --trailer-dock-right: auto;
  }

  .crossroad-hero > .trailer-archive.is-collapsed {
    right: auto;
    left: var(--trailer-dock-left);
    width: 174px;
  }

  .crossroad-hero > .trailer-archive.has-projection,
  .crossroad-hero > .trailer-archive.has-visible-player,
  .crossroad-hero > .trailer-archive:not(.is-collapsed) {
    right: 10px;
    left: 10px;
    width: auto;
  }

  .crossroad-hero > .trailer-archive .trailer-suspension {
    left: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
    animation: none !important;
  }
}

/* Surface media entry: no hanging wire; the upward sign sits left of the bundle. */
.crossroad-hero > .trailer-archive {
  --trailer-dock-top: clamp(64px, 8svh, 96px);
}

.crossroad-hero > .trailer-archive .trailer-suspension {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-collapsed {
  width: 250px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner {
  animation: none;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle {
  width: 250px;
  min-height: 102px;
  grid-template-columns: 42px 198px;
  align-items: start;
  gap: 10px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-heading {
  position: relative;
  width: 42px;
  min-height: 102px;
  padding: 0;
  display: block;
  clip-path: polygon(50% 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-copy {
  position: absolute;
  left: 50%;
  top: 58%;
  width: max-content;
  translate: -50% -50%;
  rotate: -90deg;
  font-size: 14px;
  letter-spacing: 1.8px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-mark {
  position: absolute;
  left: 50%;
  top: 4px;
  translate: -50% 0;
  rotate: -90deg;
  font-size: 17px;
  line-height: 1;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-collapsed-preview {
  width: 198px;
  height: 102px;
  margin-left: 0;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
  top: 34px;
  left: calc(100% + 8px);
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive {
    --trailer-dock-top: 18px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed {
    width: 204px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle {
    width: 204px;
    min-height: 84px;
    grid-template-columns: 34px 162px;
    gap: 8px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-heading {
    width: 34px;
    min-height: 84px;
    clip-path: polygon(50% 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-copy {
    font-size: 12px;
    letter-spacing: 1.35px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-collapsed-preview {
    width: 162px;
    height: 84px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    top: 26px;
    left: calc(100% + 6px);
  }
}

/* Final interaction layer: placed last so the placement variants cannot override it. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: 90deg !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-archive-toggle-mark,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-archive-toggle-mark {
  translate: -50% 2px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  margin-left: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle-mark {
  transform: none !important;
  rotate: -90deg !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-1,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-1 {
  translate: 4px 2px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-2,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-2 {
  translate: 8px 4px;
}

/* Final thumbnail-launcher geometry. Keep this last. */
.crossroad-hero > .trailer-archive .trailer-archive-toggle-heading { display: none !important; }

.crossroad-hero > .trailer-archive.is-collapsed,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner { width: 132px !important; }

.crossroad-hero > .trailer-archive .trailer-archive-toggle {
  width: 132px !important;
  min-height: 74px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive .trailer-collapsed-preview {
  display: block !important;
  width: 132px !important;
  height: 74px !important;
  margin: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) { width: 450px !important; }

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  width: 450px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 308px) 132px !important;
  column-gap: 10px !important;
  align-items: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-body {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  animation: trailerChoicesSpread .3s cubic-bezier(.2, .75, .25, 1) both !important;
  transform-origin: right bottom;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-float { display: none !important; }

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-float {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  top: -7px !important;
  left: calc(100% - 21px) !important;
  padding: 0 !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-gear { font-size: 18px !important; }

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  width: 132px !important;
  min-width: 132px !important;
  min-height: 74px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-collapsed-preview {
  display: block !important;
  width: 132px !important;
  height: 74px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-feature {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall {
  display: block !important;
  height: auto !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-rail {
  width: 308px !important;
  height: 102px !important;
  margin: 0 !important;
  grid-auto-columns: 150px !important;
  gap: 8px !important;
}

/* Compact launcher reset: contain every visual inside measured geometry. */
.crossroad-hero > .trailer-archive.is-collapsed,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner {
  width: 120px !important;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle,
.crossroad-hero > .trailer-archive .trailer-collapsed-preview {
  width: 120px !important;
  min-width: 120px !important;
  height: 68px !important;
  min-height: 68px !important;
  overflow: hidden !important;
}

.crossroad-hero > .trailer-archive .trailer-collapsed-preview,
.crossroad-hero > .trailer-archive .trailer-preview-stack {
  position: relative !important;
}

.crossroad-hero > .trailer-archive .trailer-preview-stack {
  display: block !important;
  width: 120px !important;
  height: 68px !important;
  overflow: hidden !important;
}

.crossroad-hero > .trailer-archive .trailer-preview-image {
  width: 108px !important;
  height: 61px !important;
}

.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-0 { inset: 0 auto auto 0 !important; }
.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-1 { inset: 4px auto auto 6px !important; }
.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-2 { inset: 7px auto auto 12px !important; }

.crossroad-hero > .trailer-archive:not(.is-collapsed) { width: 360px !important; }

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  width: 360px !important;
  grid-template-columns: minmax(0, 230px) 120px !important;
  column-gap: 10px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle,
.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-collapsed-preview {
  width: 120px !important;
  min-width: 120px !important;
  height: 68px !important;
  min-height: 68px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-rail {
  width: 230px !important;
  height: 80px !important;
  grid-auto-columns: 111px !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item {
  width: 111px !important;
  min-width: 111px !important;
  height: 76px !important;
  min-height: 76px !important;
  grid-template: 52px 24px / 32px 1fr !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item img {
  width: 109px !important;
  height: 52px !important;
  min-height: 52px !important;
}

.crossroad-hero > .trailer-archive .trailer-settings-float {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed).has-projection .trailer-wall .trailer-feature,
.crossroad-hero > .trailer-archive:not(.is-collapsed).has-visible-player .trailer-wall .trailer-feature,
.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-feature {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
  display: none !important;
}

/* Match the collapsed video bundle to the full height of the two right-side icons. */
.crossroad-hero > .trailer-archive.is-collapsed,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-collapsed-preview,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-stack {
  width: var(--trailer-collapsed-w, 217px) !important;
  min-width: var(--trailer-collapsed-w, 217px) !important;
  height: var(--trailer-collapsed-h, 122px) !important;
  min-height: var(--trailer-collapsed-h, 122px) !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-motion {
  width: var(--trailer-preview-w, 195px) !important;
  height: var(--trailer-preview-h, 110px) !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image.is-depth-1 { inset: var(--trailer-depth-1-y, 6px) auto auto var(--trailer-depth-1-x, 10px) !important; }
.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image.is-depth-2 { inset: var(--trailer-depth-2-y, 12px) auto auto var(--trailer-depth-2-x, 20px) !important; }

/* A restrained underwater skin on the art at the surface of the bundle. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-stack::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 auto auto 0;
  width: var(--trailer-preview-w, 195px);
  height: var(--trailer-preview-h, 110px);
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 28% -8%, rgba(183, 229, 248, .18), transparent 62%),
    repeating-linear-gradient(174deg, transparent 0 15px, rgba(126, 205, 239, .055) 16px, transparent 20px),
    linear-gradient(180deg, rgba(22, 79, 110, .10), rgba(3, 31, 50, .22));
  background-size: 130% 125%, 145% 120%, 100% 100%;
  opacity: .52;
  animation: trailerBundleUnderwaterSkin 8s ease-in-out infinite alternate;
}

@keyframes trailerBundleUnderwaterSkin {
  from { background-position: 18% 0, 0 0, 0 0; }
  to { background-position: 82% 14%, 18px -7px, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-stack::after {
    animation: none;
  }
}

/* Adaptive trailer fan: the bundle stays pinned to WDK while choices unfold left. */
.crossroad-hero > .trailer-focus-veil {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgba(7, 27, 43, 0.04), rgba(2, 10, 18, 0.32) 52%, rgba(1, 7, 13, 0.44)),
    rgba(2, 9, 16, 0.12);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.22, .61, .36, 1);
}

.crossroad-hero:has(> .trailer-archive:not(.is-collapsed)) > .trailer-focus-veil {
  opacity: 1;
}

.crossroad-hero > .trailer-archive {
  z-index: 30 !important;
}

.vfprep-signature,
.wdk-signature {
  z-index: 31 !important;
}

.vfprep-signature .signature-tooltip {
  position: absolute;
  z-index: 2;
  right: calc(100% + 17px);
  top: 50%;
  translate: 7px -50%;
  width: max-content;
  max-width: min(260px, calc(100vw - 120px));
  padding: 7px 11px 8px;
  border: 1px solid color-mix(in srgb, var(--actual) 78%, transparent);
  background: rgba(5, 10, 17, .96);
  color: color-mix(in srgb, var(--actual) 94%, #fff);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .34);
  font: 500 14px/1.2 var(--jp);
  letter-spacing: .035em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, translate .16s ease, visibility 0s linear .16s;
}

.vfprep-signature:hover .signature-tooltip,
.vfprep-signature:focus-visible .signature-tooltip {
  translate: 0 -50%;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Footer belongs to the same depth layer as official history. */
.actual-history > footer {
  margin-left: 0;
  background: transparent;
}

/* A compact square entry point; the plus remains the primary signal. */
.rail .prediction-card.add-card {
  flex: 0 0 112px !important;
  width: 112px;
  height: 112px;
  min-height: 112px !important;
  max-height: 112px;
  padding: 13px 10px 14px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  aspect-ratio: 1;
}

.rail .prediction-card.add-card .add-mark {
  font: 200 42px/.72 var(--mono);
  color: color-mix(in srgb, var(--prediction) 94%, #fff);
  text-shadow: 0 0 13px color-mix(in srgb, var(--prediction) 28%, transparent);
}

.rail .prediction-card.add-card .prediction-title {
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .rail .prediction-card.add-card {
    flex-basis: 96px !important;
    width: 96px;
    height: 96px;
    min-height: 96px !important;
    max-height: 96px;
  }
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  width: var(--trailer-open-width, 360px) !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-inner {
  width: var(--trailer-open-width, 360px) !important;
  grid-template-columns: minmax(0, var(--trailer-rail-width, 230px)) 120px !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-rail {
  width: var(--trailer-rail-width, 230px) !important;
  grid-auto-columns: var(--trailer-card-width, 111px) !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 218, 238, .34) transparent;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed).is-fan-scroll .trailer-archive-rail {
  overflow-x: auto !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item,
.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-fan-summary {
  width: var(--trailer-card-width, 111px) !important;
  min-width: var(--trailer-card-width, 111px) !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item img {
  width: calc(var(--trailer-card-width, 111px) - 2px) !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-rail-item.is-fan-hidden {
  display: none !important;
}

.trailer-fan-summary {
  position: relative;
  order: 0;
  height: 76px;
  min-height: 76px;
  border: 1px solid rgba(192, 220, 236, .28);
  color: rgba(226, 241, 249, .92);
  background:
    linear-gradient(135deg, rgba(127, 188, 222, .12), rgba(4, 15, 24, .5)),
    rgba(3, 12, 20, .78);
  font: 700 17px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
}

.trailer-fan-summary::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(167, 210, 234, .12);
}

.trailer-fan-summary:hover,
.trailer-fan-summary:focus-visible {
  border-color: rgba(202, 231, 246, .58);
  background-color: rgba(12, 34, 49, .9);
  outline: none;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-rail-item,
.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-fan-summary {
  animation: trailerFanIn 310ms cubic-bezier(.16, .78, .24, 1) both;
  animation-delay: calc(var(--fan-index, 0) * 28ms);
}

@keyframes trailerFanIn {
  from { opacity: 0; transform: translateX(12px); filter: blur(2px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-rail-item,
  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-fan-summary {
    animation: none !important;
  }
  .crossroad-hero > .trailer-focus-veil { transition: none; }
}

/* Z-depth trailer room: Crossroad passes the viewer; the selected bundle becomes the screen. */
html.is-trailer-depth {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html.is-trailer-depth body > header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.crossroad-hero.is-trailer-depth {
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

.crossroad-hero.is-trailer-depth > .trailer-focus-veil {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: auto;
  opacity: 1;
  background:
    radial-gradient(ellipse 68% 62% at 55% 44%, rgba(15, 45, 65, .2), rgba(2, 10, 18, .76) 64%, rgba(1, 6, 11, .94)),
    rgba(1, 7, 12, .7);
  backdrop-filter: blur(1.5px) saturate(.72);
}

html.is-trailer-depth .vfprep-signature {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.crossroad-hero.is-trailer-depth > .prediction-zone,
.crossroad-hero.is-trailer-depth > .present-marker,
.crossroad-hero.is-trailer-depth > .latest-official,
.crossroad-hero.is-trailer-depth > .countdown-deck,
.crossroad-hero.is-trailer-depth > .surface,
.crossroad-hero.is-trailer-depth > .launch-edge-banner {
  pointer-events: none !important;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

html.is-trailer-depth .actual-spine {
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
  position: fixed !important;
  z-index: 45 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% + var(--rail-w, 40px) / 2) !important;
  width: min(980px, calc(100vw - var(--rail-w, 80px) - 72px)) !important;
  height: min(680px, calc(100svh - 44px)) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
  animation: trailerDepthRoomIn 520ms cubic-bezier(.16, .78, .24, 1) both;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-ambient-glow {
  display: block !important;
  position: fixed !important;
  inset: -18vh -12vw !important;
  opacity: .13 !important;
  filter: blur(80px) saturate(.55) !important;
  background-position: center !important;
  background-size: cover !important;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-inner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-inner::before,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-inner::after,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-suspension {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle {
  position: absolute !important;
  z-index: 12;
  top: 0 !important;
  right: 16px !important;
  left: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: hidden !important;
  border: 1px solid #536b7a !important;
  background: #030d15 !important;
  color: #e2f0f8;
  clip-path: none !important;
}

@media (min-width: 761px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle {
    top: calc(clamp(18px, 2.5svh, 26px) + 5px) !important;
  }
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle::before,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle::after {
  content: "";
  position: absolute;
  display: block !important;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
  box-shadow: none;
  transform-origin: center;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle:focus-visible {
  border-color: #d5edf9 !important;
  background: #0c1f2b !important;
  outline: none;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-toggle > * {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-body {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-head,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-rail-head {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center;
  overflow: visible !important;
  perspective: 1100px;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  width: min(760px, calc(100vw - var(--rail-w, 80px) - 250px)) !important;
  margin: 0 auto !important;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity 210ms ease 40ms, transform 420ms cubic-bezier(.16,.78,.24,1);
}

.crossroad-hero > .trailer-archive.is-depth-mode.is-depth-entering .trailer-wall .trailer-feature {
  opacity: .06 !important;
  transform: translateZ(0) scale(1);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media {
  border-color: rgba(177, 217, 238, .42) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .58), 0 0 58px rgba(94, 174, 216, .08) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-poster {
  opacity: 1;
  filter: saturate(.78) brightness(.78) contrast(1.06);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
  margin-top: 14px;
  padding: 0 2px;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-title-block h3 {
  max-width: 580px;
  font-size: clamp(15px, 1.55vw, 22px);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-rail {
  position: absolute !important;
  z-index: 3;
  inset: 50% 0 auto !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none;
  transform-style: preserve-3d;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item {
  position: absolute !important;
  top: -64px !important;
  display: none !important;
  width: 190px !important;
  min-width: 190px !important;
  height: 108px !important;
  min-height: 108px !important;
  grid-template: 82px 26px / 38px 1fr !important;
  pointer-events: auto;
  opacity: .5;
  border-color: rgba(167, 205, 226, .22) !important;
  background: rgba(2, 9, 15, .88) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .42) !important;
  transition: opacity 180ms ease, border-color 180ms ease, transform 320ms cubic-bezier(.16,.78,.24,1) !important;
  animation: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item img {
  width: 188px !important;
  height: 82px !important;
  min-height: 82px !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-prev {
  left: -78px !important;
  display: grid !important;
  transform: translate3d(0, 0, -120px) rotateY(13deg) scale(.9) !important;
  transform-origin: right center;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-next {
  right: -78px !important;
  left: auto !important;
  display: grid !important;
  transform: translate3d(0, 0, -120px) rotateY(-13deg) scale(.9) !important;
  transform-origin: left center;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-prev:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-prev:focus-visible,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-next:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-next:focus-visible {
  opacity: .86;
  border-color: rgba(190, 224, 241, .55) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-prev:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-prev:focus-visible {
  transform: translate3d(8px, 0, -70px) rotateY(8deg) scale(.92) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-next:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item.is-carousel-next:focus-visible {
  transform: translate3d(-8px, 0, -70px) rotateY(-8deg) scale(.92) !important;
}

.trailer-depth-ghost {
  position: fixed;
  z-index: 70;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(190, 224, 241, .28);
  pointer-events: none;
  object-fit: cover;
  transform-origin: top left;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .5);
  will-change: transform, opacity, filter;
}

@keyframes trailerDepthRoomIn {
  from { opacity: 0; filter: blur(4px); }
  58% { opacity: .25; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    height: calc(100svh - 28px) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
    width: calc(100vw - 40px) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item {
    top: 88px !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 64px !important;
    min-height: 64px !important;
    grid-template: 62px / 1fr !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-rail-item img {
    width: 110px !important;
    height: 62px !important;
    min-height: 62px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-trailer-depth body > header {
    transition: none;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
    animation: none !important;
  }
}

/* Final depth-room isolation from the compact archive cascade. */
.crossroad-hero.is-trailer-depth {
  perspective: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
  position: absolute !important;
  top: 50vh !important;
  left: calc(50vw - var(--rail-w, 80px) / 2) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-body {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-area: auto !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-area: auto !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  height: auto !important;
  grid-template-columns: 1fr !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-standby,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-empty {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-poster {
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(.86) brightness(.88) contrast(1.05) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-title-block,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-title-block h3,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-title-block time,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
  visibility: visible !important;
  opacity: 1 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
  display: flex !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline {
  display: flex !important;
  opacity: .72 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-state {
  opacity: .52;
}

/* Depth-room controls: play in place, keep the collection visible, and edit it here. */
.trailer-depth-play,
.trailer-depth-index {
  display: none;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-inner {
  position: relative !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  color: rgba(237, 248, 253, .94);
  background: radial-gradient(circle at center, rgba(2, 10, 17, .14), transparent 28%);
  cursor: pointer;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play-icon {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(221, 241, 251, .62);
  border-radius: 50%;
  background: rgba(2, 11, 18, .42);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .34), inset 0 0 24px rgba(141, 207, 241, .08);
  backdrop-filter: blur(5px);
  opacity: .84;
  transform: scale(1);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.16,.78,.24,1), border-color 180ms ease;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play.is-playing .trailer-depth-play-icon::before {
  width: 12px;
  height: 18px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play.is-pending .trailer-depth-play-icon::before {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(226, 243, 252, .2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: trailerDepthAcquire .8s linear infinite;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play-label {
  font: 700 9px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .22em;
  text-shadow: 0 2px 12px #000;
  opacity: .72;
  transition: opacity 180ms ease;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play:hover .trailer-depth-play-icon,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play:focus-visible .trailer-depth-play-icon {
  opacity: 1;
  border-color: rgba(235, 248, 255, .92);
  transform: scale(1.06);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play:focus-visible {
  outline: 1px solid rgba(188, 225, 244, .55);
  outline-offset: -5px;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play {
  background: transparent;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play-icon,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play-label {
  opacity: 0;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play:hover .trailer-depth-play-icon,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play:hover .trailer-depth-play-label,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play:focus-visible .trailer-depth-play-icon,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-depth-play:focus-visible .trailer-depth-play-label {
  opacity: .88;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media.is-playing .trailer-poster {
  visibility: hidden !important;
  opacity: 0 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
  position: absolute;
  z-index: 10;
  right: 96px;
  bottom: 24px;
  left: 96px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86px;
  gap: 7px;
  align-items: end;
  height: 56px;
  padding: 4px 10px 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(191, 222, 238, .28) transparent;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.trailer-depth-index-item {
  position: relative;
  width: 86px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(176, 208, 226, .2);
  background: rgba(2, 9, 15, .82);
  opacity: .42;
  cursor: pointer;
  transition: opacity 160ms ease, border-color 160ms ease, transform 220ms cubic-bezier(.16,.78,.24,1);
}

.trailer-depth-index-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.6) brightness(.66);
}

.trailer-depth-index-item span {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgba(232, 246, 253, .9);
  font: 700 8px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 7px #000, 0 1px 2px #000;
}

.trailer-depth-index-item:hover,
.trailer-depth-index-item:focus-visible {
  opacity: .8;
  border-color: rgba(202, 231, 246, .58);
  outline: none;
  transform: translateY(-2px);
}

.trailer-depth-index-item[aria-current="true"] {
  opacity: 1;
  border-color: rgba(218, 239, 250, .78);
  box-shadow: 0 0 18px rgba(117, 198, 239, .13);
}

.trailer-depth-index-item[aria-current="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #dcecf4;
  box-shadow: 0 0 10px rgba(184, 229, 251, .55);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
  position: absolute !important;
  z-index: 13 !important;
  top: 0 !important;
  right: 56px !important;
  left: auto !important;
  display: grid !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid rgba(190, 220, 237, .3) !important;
  background: rgba(3, 13, 21, .68) !important;
  color: rgba(226, 240, 248, .82);
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float:hover,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float:focus-visible {
  border-color: rgba(213, 237, 249, .7) !important;
  background: rgba(12, 31, 43, .9) !important;
  outline: none;
}

@keyframes trailerDepthAcquire {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
    right: 8px;
    left: 8px;
    grid-auto-columns: 72px;
  }

  .trailer-depth-index-item {
    width: 72px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play.is-pending .trailer-depth-play-icon::before {
    animation: none;
  }
}

/* Creative-respect pass: only the play mark may sit on the artwork. */
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-archive-rail {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  overflow: visible !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline,
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed).has-visible-player .trailer-media-topline {
  position: absolute !important;
  z-index: 7 !important;
  top: -48px !important;
  right: 0 !important;
  left: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(218, 237, 247, .78) !important;
  font-size: 8px !important;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline time {
  color: rgba(229, 242, 249, .62);
  font: inherit;
  letter-spacing: .16em;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-top-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-top-copy h3 {
  max-width: min(600px, 72vw);
  margin: 0;
  color: rgba(229, 241, 248, .88);
  font: 700 clamp(13px, 1.25vw, 17px)/1.25 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  text-wrap: balance;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) #trailer-count {
  opacity: .58;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline .trailer-media-state {
  display: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: end !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-title-block {
  position: static !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  grid-column: 1 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-play-label {
  display: none !important;
}

.trailer-volume-control {
  display: inline-flex;
  height: 34px;
  align-items: center;
  gap: 8px;
  margin-left: 5px;
  padding: 0 10px 0 0;
  border: 1px solid rgba(180, 211, 228, .3);
  background: rgba(2, 10, 17, .42);
  color: rgba(218, 237, 247, .84);
  pointer-events: auto;
}

.trailer-volume-toggle {
  align-self: stretch;
  min-width: 48px;
  padding: 0 9px;
  border: 0;
  border-right: 1px solid rgba(180, 211, 228, .2);
  color: inherit;
  background: rgba(134, 199, 232, .04);
  font: 700 9px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  cursor: pointer;
}

.trailer-volume-toggle:hover,
.trailer-volume-toggle:focus-visible {
  color: #f1f9fd;
  background: rgba(134, 199, 232, .12);
  outline: none;
}

.trailer-volume-control input[type="range"] {
  --volume-progress: 0%;
  width: 104px;
  height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.trailer-volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, #d9ebf4 var(--volume-progress), rgba(179, 211, 228, .24) var(--volume-progress));
}

.trailer-volume-control input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4.5px;
  appearance: none;
  border: 1px solid rgba(235, 248, 254, .9);
  border-radius: 50%;
  background: #0b1b26;
  box-shadow: 0 0 9px rgba(154, 217, 248, .35);
}

.trailer-volume-control input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(179, 211, 228, .24);
}

.trailer-volume-control input[type="range"]::-moz-range-progress {
  height: 2px;
  background: #d9ebf4;
}

.trailer-volume-control input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(235, 248, 254, .9);
  border-radius: 50%;
  background: #0b1b26;
}

.trailer-volume-control output {
  min-width: 19px;
  text-align: right;
  font: 700 8px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  opacity: .72;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media-topline,
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed).has-visible-player .trailer-media-topline {
    top: -42px !important;
  }

  .trailer-volume-control {
    margin-left: 0;
  }

  .trailer-volume-control input[type="range"] {
    width: 82px;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
    justify-self: end !important;
  }
}

/* Final video-room composition. Keep this after the historical depth cascade. */
.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
  width: min(1180px, calc(100vw - var(--rail-w, 80px) - 56px)) !important;
  height: min(780px, calc(100svh - 32px)) !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall {
  display: block !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
  width: min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px)) !important;
  margin: 58px auto 0 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-media {
  aspect-ratio: 16 / 9 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 12px !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
  grid-column: 2 !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
  right: max(32px, calc((100% - min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px))) / 2)) !important;
  bottom: 10px !important;
  left: max(32px, calc((100% - min(980px, calc((100svh - 260px) * 1.7778), calc(100vw - var(--rail-w, 80px) - 210px))) / 2)) !important;
  grid-auto-columns: 118px !important;
  gap: 8px !important;
  height: 72px !important;
  padding: 4px 0 5px !important;
}

.trailer-depth-index-item {
  width: 118px;
  height: 66px;
  opacity: .56;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) {
    width: calc(100vw - 20px) !important;
    height: calc(100svh - 20px) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-wall .trailer-feature {
    width: calc(100vw - 36px) !important;
    margin-top: max(76px, calc((100svh - 560px) / 2)) !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-feature-actions {
    grid-column: 1 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode:not(.is-collapsed) .trailer-depth-index {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    grid-auto-columns: 88px !important;
    height: 58px !important;
  }

  .trailer-depth-index-item {
    width: 88px;
    height: 50px;
  }
}