/* Live slab cross-section (Below the surface). Poster first; canvas fades in. */
.slab-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 38%, #34322f 0%, #1c1b1a 55%, #121212 100%); }
.cross-section-visual .slab-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border: 0; box-shadow: none; background: transparent; transition: opacity .6s ease; }
.slab-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.slab-live .slab-stage canvas { opacity: 1; }
.slab-live .slab-stage img { opacity: 0; }
.slab-label { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px;
  font-size: 12px; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; color: #fff; background: #121212d9; border-radius: 3px;
  box-shadow: 0 2px 10px #0006; pointer-events: none; will-change: transform, opacity; }
.slab-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c81f2b; box-shadow: 0 0 0 3px #c81f2b40; flex: none; }
.slab-captions { padding: 0; margin: 18px 0 0; list-style: none; display: grid; gap: 7px; }
.slab-captions li { font-size: 14px; line-height: 1.4; color: #ffffffd9; padding-left: 12px; border-left: 2px solid #73787f; }
.slab-captions strong { color: #fff; }
@media (max-width: 600px) { .slab-stage { aspect-ratio: 4 / 5; } .slab-label { font-size: 10.5px; padding: 2px 6px 2px 5px; } .slab-captions { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .slab-stage { aspect-ratio: 1 / 1; } .slab-stage canvas, .slab-label { display: none; } .cross-section-visual .slab-stage img { opacity: 1; transition: none; } }
/* Sticky pin (added by slab-3d.js only when the live scene can run). */
.slab-pin .cross-section-layout { align-items: start; }
/* The spacer must be content (not padding): sticky is constrained to the track's content box. */
.slab-pin .slab-track::after { content: ""; display: block; height: 170vh; height: 170svh; }
.slab-pin .slab-stage { position: sticky; top: var(--slab-top, 96px); transform-origin: 50% 35%; will-change: transform, opacity; }
.slab-pin-copy .cross-section-copy { position: sticky; top: var(--slab-copy-top, 96px); margin-bottom: var(--slab-copy-mb, 0px); }
@media (max-width: 600px) { .slab-pin .slab-track::after { height: 150vh; height: 150svh; } }
@media (prefers-reduced-motion: reduce) { .slab-pin .slab-track::after { display: none; } .slab-pin .slab-stage, .slab-pin-copy .cross-section-copy { position: relative; top: auto; } }