/* Layer classes are st- prefixed: css/cinema.css owns .room (a review found it sizing the studio room to 100svh).
   The studio world (16 Oct 2026, approved by David): the home view sits inside a design studio at dusk, in depth
   (js/studio.js drives --walk, --night, --mx and --my). The home view takes warm dark tokens so the type reads on the
   room; the case studies keep their own approved worlds and never show the studio. Contrast: ink #F3ECDF and ink-2
   #E2DACB sit on the veiled room (darkest under text, left and bottom); labels use ink-3 #B9B09F. */

html[data-view="home"] {
  --paper: #1B1916; --paper-2: #26221E; --paper-3: #3A352E;
  --ink: #F3ECDF; --ink-2: #E2DACB; --ink-3: #CFC6B6;
  --hair: rgba(241, 234, 220, 0.24); --grid: rgba(241, 234, 220, 0.045);
  --focus: #F3ECDF;   /* the focus ring in light ink on the room */
}
html[data-view="home"] .leaders line { stroke: rgba(243, 236, 223, 0.5); }
/* on the room, the opening's project names and the Work count read in full ink (measured, qa/restructure.cjs) */
html[data-view="home"] .legend a .t, html[data-view="home"] .wx-head > p.label { color: var(--ink); }
html[data-view="home"] body { background-color: var(--paper); background-image: none; }
html[data-boot="case"] #view-home { visibility: hidden; }   /* a project shell: no flash of the home view before the router */

.studio { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --walk: 0; --night: 0; --mx: 0; --my: 0; }
html:not([data-view="home"]) .studio { display: none; }
.studio i { position: absolute; display: block; }
.studio .st-room { inset: -8vh -6vw; background: url("/assets/studio/room-dusk.webp") 50% 45% / cover no-repeat; will-change: transform;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px + var(--walk) * -3vh), 0) scale(calc(1.04 + var(--walk) * 0.16));
  transform-origin: 52% 48%; }
/* depth of field: as the reader walks in and the work arrives, the room falls softly out of focus (a pre-blurred copy
   fades in, so nothing is re-blurred while scrolling), then night comes in, already soft */
.studio .st-soft { background-image: url("/assets/studio/room-dusk-soft.webp"); opacity: var(--walk); }
.studio .st-night { background-image: url("/assets/studio/room-night-soft.webp"); opacity: clamp(0, calc((var(--night) - 0.25) * 2.2), 1); }
.studio .st-pool { inset: 0; background: radial-gradient(40vw 30vw at 50% 30%, rgba(255, 196, 120, 0.10), transparent 70%); mix-blend-mode: screen; }
.studio .st-near { bottom: -4vh; height: 70vh; width: 44vw; background: 0 100% / contain no-repeat; filter: blur(2.2px) brightness(0.62); will-change: transform; }
.studio .st-near-l { left: -6vw; background-image: url("/assets/studio/near-left.webp"); background-position: 0 100%; transform-origin: 0 100%;
  transform: translate3d(calc(var(--mx) * -42px - var(--walk) * 30vw), calc(var(--my) * -24px + var(--walk) * 40vh), 0) scale(calc(1 + var(--walk) * 0.5)); }
.studio .st-near-r { right: -8vw; width: 46vw; height: 56vh; background-image: url("/assets/studio/near-right.webp"); background-position: 100% 100%;
  transform-origin: 100% 100%;
  transform: translate3d(calc(var(--mx) * -48px + var(--walk) * 32vw), calc(var(--my) * -26px + var(--walk) * 44vh), 0) scale(calc(1 + var(--walk) * 0.5)); }
.studio .st-veil { inset: 0; opacity: calc(0.78 + var(--walk) * 0.22); background:
  linear-gradient(90deg, rgba(16, 14, 12, 0.68), rgba(16, 14, 12, 0.30) 45%, rgba(16, 14, 12, 0.48)),
  linear-gradient(180deg, rgba(16, 14, 12, 0.24), rgba(16, 14, 12, 0.16) 40%, rgba(16, 14, 12, 0.64)); }

/* "Before the interface." (16 Oct 2026): the night gallery (css/art.css). The section is the gallery's own dark,
   matched to the edges of its room plates (#211D1A at their tops, #0E0F0E at their side walls), so the rooms fade
   into it; the home's light ink stays. */
html[data-view="home"] #before-the-interface { color: var(--ink); background: #161412; overflow-x: clip;
  box-shadow: 0 50px 90px -30px rgba(8, 7, 6, 0.6); }
html[data-view="home"] #before-the-interface .rule-h { display: none; }

/* the home view's own furniture on the room: the cross marks and the grid lines in light ink */
html[data-view="home"] .cross::before, html[data-view="home"] .cross::after { background: rgba(241, 234, 220, 0.34); }

@media (max-width: 819px) {
  .studio .st-room { background-position: 64% 50%; }   /* phones frame the lit artwork and the desk with its pinned screens */
  .studio .st-near { width: 70vw; height: 40vh; }
  .studio .st-near-r { width: 72vw; height: 32vh; }
}
@media (prefers-reduced-motion: reduce) { .studio .st-room, .studio .st-near { transform: none; } }
@media (forced-colors: active) { .studio { display: none; } }