/* css/about-shared.css
   Scope: about.html, BOTH breakpoints.

   css/about-desktop.css owns everything from 992px up and css/about-mobile.css
   everything below it. This file is for the third kind of rule: a fact about an
   artwork that both of them have to obey. There is exactly one such fact today,
   and it lives here rather than being written twice.

   stage-06-real-impact.webp (1920x1072) runs out mid-image. Its two small
   video-call cards begin at x=1645 and are cut off by the frame edge at
   x=1920 — the last pixel column is still photograph, not background. The main
   card with the couple ends at x=1611, leaving a 34px gutter between them, so
   the usable part of the frame ends at x=1628, which is 84.8% of its width.

   Both breakpoints draw this file as a background anchored towards the right,
   which is why both used to show the cut. The correction is the same in both
   cases — pull the window's right edge back to 84.8% of the frame — but the
   position value is not, because the two windows show different fractions of
   the frame. So the formula lives here once and each breakpoint contributes
   only the one number that describes its own window:

       X = (usable - window) / (1 - window)

   where `window` is the fraction of the artwork's width that breakpoint shows.
   Desktop shows 74.45% (a 4:3 block against 16:9 artwork) and resolves to
   40.51%; mobile shows 60.14% and resolves to 61.88%. Both land the window on
   24.7-10.4% .. 84.8% of the frame, at every viewport width, with the file's
   cut edge outside the container.
*/

.vca-d-page {
  --vca-s6-usable: 0.848;
}

.vca-d__row--s6 .vca-d__scene-art,
.vca-m__visual--s6 {
  background-position-x: calc(
    (var(--vca-s6-usable) - var(--vca-s6-window)) / (1 - var(--vca-s6-window)) * 100%
  );
}