/* Shelf W: the library as it sits in the page. One pinned stage; native scroll moves the field.
   System pass 2026-10-08: no site header or closing band (the assembled page owns them); one gutter and top with the other sections. */
:root {
  --gutter: clamp(20px, 5vw, 72px);                 /* the x of the assembled page bar: every headline starts here */
  --top: calc(60px + clamp(40px, 7vh, 64px));       /* clear of the 60 px bar */
}
@media (max-width: 760px) { :root { --top: 76px; } }
.w-shelf { position: relative; height: 240vh; height: 240svh; background: var(--white); }
.w-stage.living-field { position: sticky; top: 0; }
@media (max-width: 719px) { .w-shelf { height: 330vh; height: 330svh; } }

/* the Studio room behind an opened piece */
.w-stage .w-room.ws-room { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .9s var(--ease-out); background: transparent; }
.lf-is-open .w-room.ws-room { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .w-stage .w-room.ws-room { transition: none; } }

/* selection frame (the Studio design-tool frame: hairline + corner handles) around the piece that comes forward */
.w-sel { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; opacity: 0; border: 1px solid color-mix(in srgb, #1fbf72 55%, transparent);
  border-radius: 4px; transition: opacity var(--d-med) var(--ease-out); will-change: transform; }
.w-sel.show { opacity: 1; }
.w-sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--vs-green); border-radius: 2px; }
.w-sel i:nth-child(1) { left: -4px; top: -4px; } .w-sel i:nth-child(2) { right: -4px; top: -4px; }
.w-sel i:nth-child(3) { left: -4px; bottom: -4px; } .w-sel i:nth-child(4) { right: -4px; bottom: -4px; }
.lf-is-open .w-sel { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .w-sel { transition: none; } }