/* Raw.Space — artwork frame (mount + holders). Shared across the framed pulse pieces.
   Mount: double 1px-ink keyline + ground mat (the keyline weight matches the tb2 title-block).
   Holders run off the viewport edges, so their ends terminate level at the screen edge (the
   viewport clip gives "level tops" for free). --tilt drives the angle (0 = straight; e.g. 5deg
   for screwed horizon); suspension wires counter-rotate by -tilt so they stay plumb. */

.stage{
  height:100vh; min-height:100svh; overflow:hidden;
  position:relative; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; padding:24px 24px 9vh;   /* extra bottom padding sits the piece a little above centre */
}

.artframe{ --tilt:0deg; position:relative; display:inline-block; }

.artframe .mount{
  position:relative;
  border:1px solid var(--ink,#1A1A1A);
  padding:clamp(10px,1.6vw,20px);
  background:var(--ground,#f5f5f4);
  transform:rotate(var(--tilt)); transform-origin:center;
}
.artframe .keyline{ border:1px solid var(--ink,#1A1A1A); display:block; }
.artframe .art{
  position:relative; overflow:hidden; background:var(--ground,#f5f5f4);
  width:min(74vw,680px);              /* per-piece overridable; aspect-ratio set inline */
}
.artframe .art > canvas,
.artframe .art > img,
.artframe .art > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* holder — side rails: full-height verticals at the frame edges, off top + bottom of the viewport */
.artframe--rails .rail{ position:absolute; top:-150vh; bottom:-150vh; width:1px; background:var(--ink,#1A1A1A); }
.artframe--rails .rail-l{ left:0; }
.artframe--rails .rail-r{ right:0; }

/* holder — plumb suspension: verticals off the top of the viewport. Children of .mount, so they
   inherit the tilt, then counter-rotate by -tilt to read plumb. */
.artframe--suspend .wire{
  position:absolute; bottom:100%; width:1px; height:150vh; background:var(--ink,#1A1A1A);
  transform-origin:bottom center; transform:rotate(calc(-1 * var(--tilt)));
}
.artframe--suspend .wire-l{ left:25%; }
.artframe--suspend .wire-r{ left:75%; }

/* full-bleed chute (e.g. entropy): suspension from the top, full viewport width, open sides
   (no left/right keylines), tall enough for the falling figures to pile. */
.stage--full{ padding-left:0; padding-right:0; }
.artframe--chute{ display:block; width:100%; }
.artframe--chute .mount{ border-left:0; border-right:0; padding-left:0; padding-right:0; }
.artframe--chute .keyline{ border-left:0; border-right:0; }
.artframe--chute .art{ width:100%; height:72vh; aspect-ratio:auto; background:#fff; }

/* Pulse pages lead with the piece: minimise the title block to its mark by default; tap to expand.
   (Applies the mobile-collapse treatment at all widths — every frame.css page is a single-view piece.) */
aside.tb2:not(.tb2--open){ width:auto !important; background:none !important; border:0 !important; box-shadow:none !important; }
aside.tb2:not(.tb2--open) > *:not(.tb2-glyph){ display:none !important; }
aside.tb2 .tb2-glyph{
  display:flex !important; align-items:center; justify-content:center;
  width:40px; height:40px; box-sizing:border-box; padding:0; cursor:pointer;
  background:var(--ground,#f5f5f4); border:1px solid var(--ink,#1A1A1A);
  -webkit-appearance:none; appearance:none;
}
aside.tb2.tb2--open .tb2-glyph{ display:none !important; }
aside.tb2.tb2--open .tb2-collapse-head{ display:flex; }