/* ============================================================
   THE LAB, AS A STUDIO (gallery/studio.js)                   P, 2 November 2026
   The house's white atelier walked by the scroll: the six steps on one oak bench, a drying line of every
   print over it. The words are the house's glossy vinyl (black on the white), the figures on the wall polished metal.
   ============================================================ */
body[data-page="lab"]{ background:#F7F8FA; }
.sd{ position:relative; background:#F7F8FA; color:var(--ink, #0B0B0C); }
.sd-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; background:#F7F8FA; }
.sd-gl{ position:absolute; inset:0; opacity:0; transition:opacity var(--slowest, 1.6s) var(--settle, ease); }
.sd-stage.is-lit .sd-gl{ opacity:1; }
.sd-stage.is-over{ cursor:pointer; }
.sd-words{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:clip; }

/* each word arrives out of a breath of blur, and leaves at once */
.sd-say{ position:absolute; pointer-events:none; opacity:0; filter:blur(8px); transform:translate3d(0, 14px, 0);
  transition:opacity var(--slow, .6s) var(--lift, ease), filter var(--slow, .6s) var(--lift, ease), transform var(--slow, .6s) var(--lift, ease); }
.sd-say.is-here{ opacity:1; filter:none; transform:none; pointer-events:auto;
  transition:opacity var(--slower, 1.1s) var(--settle, ease), filter var(--slower, 1.1s) var(--settle, ease), transform var(--slower, 1.1s) var(--settle, ease);
  transition-delay:.12s; }

/* the first view: the room's one word, large */
.sd-open{ left:0; right:0; top:15%; display:flex; justify-content:center; }
.sd-title{ margin:0; font-size:clamp(96px, 15vw, 240px) !important; line-height:.9; }

/* at a station: its numeral and its name, low on the left; the whole is the way in */
.sd-station{ left:var(--margin, 5vw); bottom:clamp(28px, 8vh, 90px); }
.sd-a{ display:flex; align-items:baseline; gap:clamp(14px, 1.6vw, 26px); color:inherit; text-decoration:none; }
.sd-n{ font-size:clamp(84px, 11vw, 180px) !important; line-height:.86; }
.sd-name{ transition:transform var(--slow, .6s) var(--settle, ease); }
.sd-a:hover .sd-name, .sd-a:focus-visible .sd-name{ transform:translate3d(6px, 0, 0); }
.sd-a:focus-visible{ outline:none; }

.sd-end{ left:var(--margin, 5vw); bottom:clamp(28px, 8vh, 90px); }
.sd-way{ color:inherit; text-decoration:none; }

/* the record of a material set down on the table: its own fields, beside it, as if read off the plane it stands on */
.sd-card{ position:absolute; left:0; top:0; width:min(320px, 70vw); opacity:0; pointer-events:none; filter:blur(6px);
  transition:opacity var(--slow, .6s) var(--settle, ease), filter var(--slow, .6s) var(--settle, ease); }
.sd-card.is-on{ opacity:1; filter:none; pointer-events:auto; transition-delay:.35s; }
.sd-card p{ margin:0; }
.sd-card-id{ opacity:.6; margin-bottom:.5em !important; }
.sd-card-a{ color:inherit; text-decoration:none; }
.sd-card-maker{ margin-top:.5em !important; opacity:.75; }
.sd-card-note{ margin-top:.9em !important; max-width:30ch; }

/* the bridge: the room is left in white */
.sd-veil{ position:absolute; inset:0; z-index:3; background:#FBFCFC; opacity:0; pointer-events:none; transition:opacity .5s var(--settle, ease); }
.sd-veil.is-on{ opacity:1; }
.sd-veil.is-dark{ background:#030304; transition-duration:.7s; }

/* a print's number, under the hand */
.sd-tip{ position:absolute; left:0; top:0; opacity:0; transition:opacity var(--slow, .6s) var(--settle, ease); white-space:nowrap; }
.sd-tip.is-on{ opacity:.9; }

/* a print whose making is not recorded, large, on the white */
.sd-big{ position:fixed; inset:0; z-index:200; background:rgba(255,255,255,.97); display:flex; align-items:center; justify-content:center;
  padding:6vh 6vw; box-sizing:border-box; opacity:0; transition:opacity var(--slow, .6s) var(--settle, ease); outline:none; cursor:zoom-out; }
.sd-big.is-in{ opacity:1; }
.sd-big-img{ max-width:100%; max-height:100%; object-fit:contain; display:block; box-shadow:0 30px 60px -30px rgba(20,18,15,.38);
  transform:scale(.97); transition:transform var(--slower, 1.1s) var(--settle, ease); }
.sd-big.is-in .sd-big-img{ transform:none; }

@media (max-width:759px){
  .sd-station, .sd-end{ left:16px; bottom:clamp(24px, 7vh, 60px); }
  .sd-n{ font-size:clamp(72px, 22vw, 120px) !important; }
}