/* THE BEDROOM'S MARBLE SKIN, 28 October 2026 (her words: "let's get the cube in place, by making a copy").
   ONE STRUCTURE, MANY SKINS: room.css is the structure and never changes for a look. This skin dresses the cube's six
   faces with a 360 panorama of the room she made in Marble, dropped under art/room/ as wall-n, wall-e, wall-s, wall-w,
   floor and ceiling. The copy of the page as it was before this skin is in private/site-before-marble-2026-10-28/.
   30 OCTOBER, YOU STAND IN THE MIDDLE OF IT: the faces are an ordinary cube map cut by private/tools/stand_room.py from her
   everything hung panorama (her pieces in every frame but the mirrors, hung by the specs in D:/temp/film/specs), and you
   stand where Marble's camera stood, so every corner is where it is in her picture. Facing the vanity, the door wall is on
   your right (face e) and the bed wall on your left (face w), as in her Marble world. To change a picture: edit its spec,
   run D:/temp/film/chain.py, then stand_room.py, frames.py and gallery.py, then bump ?v= below. */

/* YOU STAND IN THE MIDDLE (30 October, her choice: "We'll do the stand in the middle for the prize"; her words before it:
   "how do we make the room fill the screen? ... you only need to be able to see what's in your field of view ... the room
   should move around that"). The room fills the screen and the eye stands at the middle of the cube, where Marble's camera
   stood, so what you see is her picture as it is: no box edges, no plum, every corner where it is in the picture. The
   faces are an ordinary cube map (private/tools/stand_room.py). --s is the cube's side, --p the eye's distance from the
   screen (the same as half the side, so nothing is bent; --zoom brings things nearer), --tilt looks a little down, toward
   the furniture. room.css stays as it is for the plain skin; everything here only overrides it in the Marble room. */
[data-skin="marble"] main { max-width: none; padding: 0; }
/* Ship's juror walk, 30 October: things in the room behind the eye project thousands of pixels sideways, and a phone laid the
   page out 1500 wide and showed its top left corner. The room fills the screen here, so main clips what spills (the old
   trap, a clip painting a wall black, was the framed room's; this room was turned all the way round with it, no black) */
[data-skin="marble"] main { overflow: clip; }
[data-skin="marble"] .room { aspect-ratio: auto; width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0;
  --s: calc(max(var(--w), var(--h)) * .66); --d: calc(var(--s) / 2); --floor: calc(var(--s) / 2); --q: .5;
  --p: calc(var(--s) / 2 * var(--zoom, 1)); perspective: var(--p); perspective-origin: 50% 50%; }
[data-skin="marble"] .cube { transform: translateZ(var(--p)) rotateX(var(--tilt, -4deg)) rotateY(var(--turn, 0deg)); }
/* 31 OCTOBER, THE REAL WALLS (her words: "it doesn't make any sense for the cube's sides to be cut in the middle of a
   wall"). The room is no longer a cube round the eye: it is her room's four real walls, each a flat plane where it really
   stands (the camera stood near the vanity wall), meeting at the room's own corners, with the floor and the ceiling
   between them. private/hang/real_walls.py makes each wall's picture straight on, with her placing from hang.json, cut
   into tiles (finer where you look straight at a wall) and places every tile in room-walls.css. The eye is the middle of
   .cube, so only the directions matter: the picture is the same however big the room is drawn. Each .face is now a
   clear sheet laid just in front of its wall, carrying that wall's touch spots (index.html, the SPOTS and FRAMES blocks,
   placed by real_walls.py); its size and place are on the element itself. */
[data-skin="marble"] .tile { position: absolute; left: 50%; top: 50%; display: block; transform-origin: 0 0;
  background-repeat: no-repeat; backface-visibility: visible; pointer-events: none; }
[data-skin="marble"] .face { inset: auto; left: 50%; top: 50%; margin: 0; transform-origin: 0 0; background: none;
  box-shadow: none; overflow: visible; pointer-events: none; }
[data-skin="marble"] .ground, [data-skin="marble"] .ceiling { display: none; }
[data-skin="marble"] .stage > .frame { display: none; }
/* the plum bars covered what the box spilled past its frame; the room you stand in fills the screen, so they go (on a phone
   the bottom one showed as a plum square behind the purse, her walk of 30 October) */
[data-skin="marble"] .bar { display: none; }
[data-skin="marble"] .stage { touch-action: none; }   /* a finger up or down tilts your head here, it does not scroll the page */

/* the six faces. inset -4px: the walls sit inside the room's 4px border but the cube's depth is half the full width, so each
   corner had a 4px gap that showed the page through it as a dark band (visible on the plain room too, 2026-10-28); the
   walls now overlap at the corners instead */
[data-skin="marble"] .face::before, [data-skin="marble"] .face::after { display: none; }   /* the painted room has its own skirting and cornice */
/* (until 31 October the six cube faces were art/room/wall-n.webp ... ceiling.webp here; the walls' pictures are now
   art/room/real/*.webp, in room-walls.css) */

/* the plain shapes step back: the pieces and the plain room's flat things vanish (a link that is not shown gets no hotspot),
   and the SPOT links in each face take their places, laid over the things in the picture in shares of the wall (index.html,
   the MARBLE blocks; the door wall's frames are written by private/tools/frames.py). The room the right way round since
   30 October: the door wall is on your right (face e), the bed wall on your left (face w), as in her Marble world.
   TRAP (README, "the room turns"): opacity on a thing inside a wall makes Chrome paint the LEFT wall black; visibility and
   display do not. */
[data-skin="marble"] .piece { visibility: hidden; }
[data-skin="marble"] a.piece, [data-skin="marble"] .face a:not(.spot), [data-skin="marble"] .scrap { display: none; }
[data-skin="marble"] .mirror, [data-skin="marble"] .window, [data-skin="marble"] .corkwall, [data-skin="marble"] .wallcal,
[data-skin="marble"] .wallpics { visibility: hidden; }
.spot { display: none; }
[data-skin="marble"] .spot { display: block; position: absolute; visibility: hidden; }
/* the door is a spot here; the plain door's shape and colour stay off it */
[data-skin="marble"] .spot.exit { bottom: auto; background: transparent; border: 0; border-radius: 0; }
/* her note, 30 October: the door has pictures on it, so you leave by its handle, and it has to be plain that the door
   opens. The handle glints, softly, now and then. 31 October: an endless loop here kept the door wall redrawing every
   frame even while it looked still (Ship found the same in the purse's ring, the likely cause of her TV squares), so the
   glint runs once and frames.js starts it again every 3.2 seconds, the same rhythm as before */
[data-skin="marble"] .spot.exit { visibility: visible; border-radius: 50%; }
[data-skin="marble"] .spot.exit.glint { animation: knob-glint .96s ease-in-out 1; }
@keyframes knob-glint { 0%, 100% { box-shadow: 0 0 0 0 #f3d37a00; } 40% { box-shadow: 0 0 10px 5px #f3d37acc, inset 0 0 6px 2px #fff3c4aa; } }
@media (prefers-reduced-motion: reduce) { [data-skin="marble"] .spot.exit { animation: none; box-shadow: 0 0 8px 3px #f3d37a99; } }

/* a thing answers a mouse or the keyboard with a faint warm light inside its own touch shape (room.css .hot.lit), never an
   edge: her word, 30 October, the gold outlines "don't match what's actually there" */

/* the frame and the arrows keep the house gold */
[data-skin="marble"] .frame { border-color: #c9a24b; }



/* her ask through Film, 30 October: the film ends on a blurry, sparkly look round the room, so the room arrives the same
   way: one small shake back and forth, settling out of a blur and up from the film's last dim frame (about half bright, Film measured it),
   and you cannot tell where the film stops and the working room starts; then
   the arrows come up, the first sign you can do things here. Any way in gets it, as the room loads */
@keyframes arrive {      /* her word: "back and forth once", just enough to smudge the join */
  0%   { filter: blur(7px) brightness(.55); transform: scale(1.03) translateX(-6px); }
  40%  { filter: blur(3px) brightness(.8); transform: scale(1.02) translateX(6px); }
  100% { filter: none; transform: none; }
}
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
[data-skin="marble"] .room { animation: arrive 1.1s cubic-bezier(.3, .5, .3, 1) both; }
[data-skin="marble"] .turn { animation: rise .7s ease-out 1s both; }
@media (prefers-reduced-motion: reduce) { [data-skin="marble"] .room, [data-skin="marble"] .turn { animation: none; } }