/* Restrike hero art: the ordered-dither panorama (js/hero-dither.js; source art-line/src/hero-dither.js, bundled by
   _rs/build-hero-dither.sh). One transparent canvas: the sky photo shows through, only the objects (and their
   dithered shadows) are drawn. The poster (_rs/poster/hero-dither*.webp, the scene's first frame) shows until the
   canvas has painted; with reduced motion the canvas paints that one frame and stops; without WebGL the poster stays.
   The palette ramp is read from the five --rs-dither-* variables at runtime: deep and the flag follow the accent, so a
   new logo colour is the accent token plus mid and pale here.
   The scene fits its height (a wider box shows more conveyor and sky, never a bigger vault), so the poster is scaled to
   the box height and centred: at the poster's own size it is the first live frame pixel for pixel. */
.rs-hero__art { container-type: size; display: grid; place-items: center; }
.rs-dither {
  --rs-dither-ink: var(--rs-text, #0b1726);
  --rs-dither-deep: var(--rs-accent, #1761f9);
  --rs-dither-mid: #6fa8e8;
  --rs-dither-pale: #cfe3f7;
  --rs-dither-white: #ffffff;
  --rs-dither-flag: var(--rs-accent, #1761f9);
  position: relative;
  width: min(920px, 92vw, 100cqw, 100cqh * 4 / 5);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 768px) {
  .rs-dither { width: min(920px, 92vw, 100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; }
}
.rs-dither__poster, .rs-dither__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-dither__poster img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); display: block; }
.rs-dither__canvas { opacity: 0; }
.rs-dither.is-live .rs-dither__canvas { opacity: 1; }
.rs-dither.is-live .rs-dither__poster { visibility: hidden; }

/* ---------- hero layout for the panorama (hero variant a, the default; 16 Oct, client: "expand the pixel animation").
   The art spans the hero edge to edge along its bottom; the copy block moves up (its top ~32 px under the header bar at
   900 px tall) and nothing else shrinks. Wide screens: the art takes every pixel under the copy (>= 28 px gap), at most
   56svh. Phones / portrait: full width, ~42 % of the screen, pinned to the hero's bottom. hero-dither.css loads before
   film.css + layout.css, so these selectors carry one extra element to win. ---------- */
html.rs body .rs-hero.rs-hero--a .rs-dither { width: 100%; height: 100%; aspect-ratio: auto; }
html.rs body .rs-hero.rs-hero--a.is-wide .rs-hero__stage { padding: calc(var(--rs-top) + clamp(20px, 3.6svh, 48px)) 0 0; }
html.rs body .rs-hero.rs-hero--a.is-wide .rs-hero__copy { margin-bottom: 28px; }
html.rs body .rs-hero.rs-hero--a.is-wide .rs-hero__art { flex: 1 1 0; min-height: 200px; max-height: 56svh; width: 100%; margin: auto 0 0; align-self: stretch; }
html.rs body .rs-hero.rs-hero--a:not(.is-wide) .rs-hero__head { margin-bottom: 24px; }
html.rs body .rs-hero.rs-hero--a:not(.is-wide) .rs-hero__art { flex: 1 1 0; min-height: 200px; max-height: 42svh; width: 100%; max-width: none; aspect-ratio: auto; margin: auto 0 0; align-self: stretch; }