/* stage3d.css - shared 3D stage band (design M002.P024.T037). One band per site, own full-width block right after the hero.
   The band never overlaps the photo or the text: it is a normal-flow block with a fixed height, 280px below 1024 and 360px from 1024.
   Site hooks (custom properties, set inline by stage3d.py or in the site css): --s3d-bg (site background colour variable), --s3d-accent (hairline colour).
   Markup: <section class="s3d" data-stage3d data-module="..." aria-label="..."><div class="s3d-box"><img ...></div></section> */
.s3d { position: relative; isolation: isolate; display: block; height: 280px; margin: 0; padding: 0; overflow: hidden; background: var(--s3d-bg, transparent); }
.s3d::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--s3d-accent, currentColor) 30%, var(--s3d-accent, currentColor) 70%, transparent); opacity: .55; }
/* the box is a square the height of the band, centred; the 3D canvas fills it, so the poster and the canvas share one frame (layout change 0) */
.s3d-box { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; pointer-events: none; }
.s3d-box img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.s3d-box canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 1024px) { .s3d { height: 360px; } }
@media (prefers-reduced-motion: reduce) { .s3d-box canvas { display: none; } }