/* wip.css · the Lab's "Work is play" slides (index.html #lab, js/wip.js). Three slides in the deck's card style, each a
   picture that js/wip.js turns into a depth splat on a dark field. On wide screens they stack as you scroll, like a deck
   being dealt, and the words ride in each figcaption for screen readers only (the slide carries them, big). On narrow
   screens the slide's own type is too small to read, so the words show under the picture. */
.wip{display:grid;gap:clamp(28px,5vw,48px);margin:clamp(40px,6vw,72px) 0 0}
.wip-slide{margin:0;background:var(--paper);border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow)}
.wip-art{position:relative;aspect-ratio:1672/941;overflow:hidden;background:#0b0b0c}
.wip-art img{display:block;width:100%;height:100%;object-fit:cover}
.wip-art canvas{position:absolute;inset:0;display:none;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.wip-slide.on .wip-art canvas{display:block}
.wip-slide.on .wip-art img{visibility:hidden}
.wip-slide figcaption{padding:14px 16px 16px;border-top:2px solid var(--line)}
.wip-slide h3{margin:0 0 .35em;font-weight:900;font-size:clamp(24px,7vw,34px);line-height:1.02;letter-spacing:-.01em}
/* the slides' gradient (cyan → green → gold), as an underline so the word stays ink and keeps its contrast */
.wip-slide h3 em{font-style:normal;padding-bottom:.04em;background:linear-gradient(90deg,#27b8e0,#6fd35a 55%,#f2c230) 0 100%/100% .16em no-repeat}
.wip-slide p{margin:0;max-width:36em;font-size:15px;line-height:1.45}

@media (min-width:761px){
  .wip{gap:0}
  .wip-slide{position:sticky;top:calc(88px + var(--i) * 14px);width:min(100%,calc((100vh - 150px) * 1672 / 941));margin:0 auto 22vh}
  .wip-slide:last-child{margin-bottom:0}
  .wip-slide figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}