/* ============================================================
   THE LAB (gallery/lab.js)                                   P, 28 October 2026
   The ledger of makings: the works by process, each a line of its prints, image first. A print's number
   under it, its six steps as six small numerals that run when a hand is on it. Platinum keeps two blank
   sheets until P's prints are on file. /vault/lab/CL-#### is the Process room's making, with Lab and
   Replay over it.
   ============================================================ */

/* the two words that join the Viewing room and the Lab */
.lab-tabs{ display:flex; gap:1.5em; align-items:baseline; }
.lab-tab{ color:var(--fg, #0B0B0C); opacity:.36; transition:opacity var(--slow) var(--settle); text-decoration:none; }
.lab-tab:hover, .lab-tab:focus-visible, .lab-tab.is-here{ opacity:1; }

/* ---------- the ledger ---------- */
.lab{
  position:relative; min-height:100vh; min-height:100svh; background:#FFFFFF; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(220px, 24vw) 1fr; column-gap:clamp(24px, 4vw, 72px);
  padding:calc(var(--nav-h, 72px) + 7vh) var(--margin, 5vw) 14vh;
}
.lab-head{ position:sticky; top:calc(var(--nav-h, 72px) + 7vh); align-self:start; display:flex; flex-direction:column; gap:clamp(14px, 3vh, 34px); }
.lab-title{ margin:0; font-size:clamp(64px, 8vw, 132px) !important; line-height:.9; }
.lab-book{ display:flex; flex-direction:column; gap:clamp(40px, 8vh, 96px); padding-top:.4em; }
.lab-line{ display:flex; flex-direction:column; gap:clamp(12px, 2vh, 20px); }
.lab-line-name{ margin:0; opacity:.5; }
.lab-prints{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(18px, 2.4vw, 40px) clamp(16px, 2vw, 34px); --ph:clamp(120px, 22vh, 230px); }

.lab-print{ opacity:0; transform:translate3d(0, 16px, 0); transition:opacity var(--slower, 1.1s) var(--settle), transform var(--slower, 1.1s) var(--settle); }
.lab-print.is-in{ opacity:1; transform:none; }
.lab-a{ display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; cursor:pointer; }
.lab-print.is-still .lab-a{ cursor:default; }
.lab-plate{ display:block; position:relative; transition:transform var(--slow) var(--settle); }
.lab-img{
  display:block; height:var(--ph); width:auto; max-width:min(46vw, 420px); object-fit:cover; background:#F2F1EE;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 14px 26px -16px rgba(20,18,15,.34);
  transition:box-shadow var(--slow) var(--settle);
}
.lab-a:hover .lab-plate, .lab-a:focus-visible .lab-plate{ transform:translate3d(0, -6px, 0); }
.lab-a:hover .lab-img, .lab-a:focus-visible .lab-img{ box-shadow:0 1px 0 rgba(0,0,0,.04), 0 26px 40px -18px rgba(20,18,15,.42); }
.lab-a:focus-visible{ outline:none; }

/* under the print: its number, and its six steps */
.lab-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:1.2em; }
.lab-no{ opacity:.7; }
.lab-ticks{ display:flex; gap:.5em; font-size:9px; letter-spacing:.04em; }
.lab-tick{ font-style:normal; opacity:.18; transition:opacity var(--slow) var(--settle); }
.lab-a:hover .lab-tick, .lab-a:focus-visible .lab-tick{ animation:lab-tick 2.4s var(--settle, ease) both infinite; }
.lab-a .lab-tick:nth-child(2){ animation-delay:.22s; }
.lab-a .lab-tick:nth-child(3){ animation-delay:.44s; }
.lab-a .lab-tick:nth-child(4){ animation-delay:.66s; }
.lab-a .lab-tick:nth-child(5){ animation-delay:.88s; }
.lab-a .lab-tick:nth-child(6){ animation-delay:1.1s; }
@keyframes lab-tick{ 0%{ opacity:.18; } 14%{ opacity:1; } 60%{ opacity:1; } 100%{ opacity:.18; } }

/* Platinum's blank sheets: cotton paper waiting for its print */
.lab-sheet{
  display:block; height:var(--ph); aspect-ratio:.78; background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), 0 14px 26px -18px rgba(20,18,15,.22);
  background-image:radial-gradient(rgba(0,0,0,.018) 1px, transparent 1.2px); background-size:5px 5px;
}
.lab-print.is-blank{ padding-bottom:calc(1.2em + 10px); }

@media (min-width:760px) and (max-aspect-ratio:1/1){
  .lab{ grid-template-columns:1fr; }
  .lab-head{ position:relative; top:auto; margin-bottom:5vh; }
  .lab-prints{ --ph:clamp(140px, 17vh, 220px); }
}
@media (max-width:759px){
  .lab{ grid-template-columns:1fr; padding:calc(var(--nav-h, 64px) + 3vh) 16px 12vh; }
  .lab-head{ position:relative; top:auto; gap:10px; margin-bottom:5vh; }
  .lab-title{ font-size:clamp(56px, 17vw, 92px) !important; }
  .lab-prints{ --ph:clamp(110px, 36vw, 180px); gap:22px 14px; }
  .lab-img{ max-width:calc(100vw - 32px); }
  .lab-ticks{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lab-print{ transform:none; transition:opacity .3s linear; }
  .lab-a:hover .lab-tick{ animation:none; opacity:1; }
}

/* ---------- a work in the Lab: the Process room's making, with the Lab's ways over it ---------- */
body[data-page="lab"] #push-dark{ opacity:0 !important; visibility:hidden; transition:none; }
.lab-bench .mk-choose, .lab-bench .mk-list, .lab-bench .mk-way-choose{ display:none !important; }
.lab-bar{
  position:fixed; z-index:30; left:var(--margin, 5vw); bottom:clamp(18px, 4vh, 36px);
  display:flex; gap:1.8em; align-items:baseline;
}
.lab-way{ color:var(--fg, #0B0B0C); opacity:.5; background:none; border:0; padding:6px 0; cursor:pointer; text-decoration:none; transition:opacity var(--slow) var(--settle); }
.lab-way:hover, .lab-way:focus-visible{ opacity:1; }
.lab-bar.is-playing .lab-replay{ opacity:1; }
@media (max-width:759px){
  .lab-bar{ left:16px; bottom:14px; }
}

/* Platinum's prints (28 October): no number yet; a hand opens one large, on the white */
button.lab-a{ background:none; border:0; padding:0; font:inherit; text-align:left; cursor:zoom-in; }
.lab-print.is-still .lab-a{ cursor:zoom-in; }
.lab-big{
  position:fixed; inset:0; z-index:200; background:#FFFFFF; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h, 72px) + 2vh) var(--margin, 5vw) 4vh; box-sizing:border-box; cursor:zoom-out;
  opacity:0; transition:opacity var(--slow, .6s) var(--settle, ease); outline:none;
}
.lab-big.is-in{ opacity:1; }
.lab-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);
}
.lab-big.is-in .lab-big-img{ transform:none; }

/* ---------- 28 October, later: the Lab as a room (the Gallery's walk, fitted as a lab) ---------- */
.lab-float{ position:fixed; z-index:20; left:var(--margin, 5vw); top:calc(var(--nav-h, 72px) + 6px); }
.wk.is-lab .wk-room .wk-r-title{ font-size:clamp(44px, 5vw, 84px) !important; }
@media (max-width:759px){ .lab-float{ left:16px; } }