/* Contract preview: only page counts 01–03. The runtime owns this scope so
   later pages keep their existing composition, grading and control sizes. */
#stage[data-opening-revision="true"] {
  --gold: #d7b44a;
}

/* Runtime geometry is shared by video and transition canvas: desktop uses
   the 65% source frame; mobile uses a full-viewport cover crop. Override the
   legacy 140% portrait box without concealing an edge with a source mask. */
#stage[data-opening-film="true"] .media > :is(video, canvas) {
  left: calc((1 - var(--film-span-x, 1)) * 50%);
  right: auto;
  top: calc((1 - var(--film-span-y, 1)) * 50%);
  bottom: auto;
  width: calc(var(--film-span-x, 1) * 100%);
  height: calc(var(--film-span-y, 1) * 100%);
  transform: translate(calc(var(--film-relative-x, 0) * 100%), calc(var(--film-relative-y, 0) * 100%)) scale(var(--film-scale, 1));
  transform-origin: center;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Edge/blank-space masking stays off. The 2026-10-12 user cue authorizes
   separate reflected/radial picture light in opening-light.css. */

/* Preserve the approved white lead / ink on gold hero hierarchy. Every gold
   accent, including the foreground graphics, uses the official token. */
#stage[data-opening-revision="true"] :is(#copy-one, #copy-two, #final-vision) {
  --gold: #d7b44a;
}
#stage[data-opening-revision="true"] :is(#copy-one, #copy-two, #final-vision) .scene-infographic {
  --graphic-gold: #d7b44a;
}

/* Reduce both visual elements by 20% from their existing desktop sizes.
   Placement, enabled/disabled appearance and navigation behavior remain. */
#stage[data-opening-revision="true"] .scene-navigation button {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  padding: 8.6px;
}
#stage[data-opening-revision="true"] .scene-navigation svg {
  width: 20.8px;
  height: 20.8px;
}
#stage[data-opening-revision="true"] .scene-navigation button:focus-visible {
  outline-color: var(--gold);
}

/* Portrait previously used 44px circles and 24px arrows. Apply the same
   requested 0.8 ratio, rather than inheriting the desktop result. */
@media (max-width: 760px) {
  #stage[data-opening-revision="true"] .scene-navigation button {
    width: 35.2px;
    height: 35.2px;
    flex-basis: 35.2px;
    padding: 7px;
  }
  #stage[data-opening-revision="true"] .scene-navigation svg {
    width: 19.2px;
    height: 19.2px;
  }
}