/* The Lab. One authored moment: the Impossible objects group becomes a pinned lateral track on
   wide, pointer-driven screens (JS adds .is-track). Everywhere else every group is an editorial grid. */

.p-lab .lab-jump { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: 1.5rem; }
.p-lab .lab-jump a { text-decoration: none; font-weight: 600; padding: .45rem .95rem; border: 2px solid var(--sand-deep); border-radius: 999px; font-size: .95rem; }
.p-lab .lab-jump a:hover { border-color: var(--copper); color: var(--copper); }

.p-lab .lab-group-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.p-lab .lab-group-head h2 { margin-bottom: .35em; }
.p-lab .lab-group-head p { margin: 0; max-width: 34rem; }

/* editorial grid: varied slot sizes, not uniform cards */
.p-lab .lab-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
.p-lab .piece { grid-column: span 6; margin: 0; }
@media (min-width: 42rem) {
  .p-lab .s-full { grid-column: span 6; }
  .p-lab .s-big { grid-column: span 6; }
  .p-lab .s-half { grid-column: span 3; }
  .p-lab .s-third { grid-column: span 3; }
  .p-lab .s-offset { grid-column: 4 / span 3; }
}
@media (min-width: 64rem) {
  .p-lab .s-full { grid-column: span 6; }
  .p-lab .s-big { grid-column: span 4; }
  .p-lab .s-half { grid-column: span 3; }
  .p-lab .s-third { grid-column: span 2; }
  .p-lab .s-offset { grid-column: 2 / span 2; }
  .p-lab .s-big .ph, .p-lab .s-big .art { aspect-ratio: 16/9; }
  .p-lab .s-full .ph, .p-lab .s-full .art { aspect-ratio: 21/9; }
}
.p-lab .piece-media { position: relative; }
.p-lab .lab-zoom { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; border-radius: var(--radius); color: transparent; font-size: 0; cursor: zoom-in; display: none; }
.p-lab.is-js .lab-zoom { display: block; }
.p-lab .lab-zoom:focus-visible { outline-offset: -3px; }

/* hover lifts the caption only; media stays put */
.p-lab figcaption { padding-top: .9rem; transition: transform .35s var(--ease-out); }
.p-lab .piece:hover figcaption, .p-lab .piece:focus-within figcaption { transform: translateY(-6px); }
.p-lab figcaption h3 { margin-bottom: .35em; }
.p-lab figcaption p { margin: 0 0 .35em; font-size: .98rem; line-height: 1.45; }
.p-lab figcaption .around { color: var(--ink-soft); }
.dark.p-lab figcaption .around { color: var(--bone-soft); }
.p-lab figcaption .around::before, .p-lab .lb-text .around::before { content: ""; display: inline-block; width: .9rem; height: 2px; background: var(--copper); vertical-align: middle; margin-right: .45rem; }

/* impossible objects: horizontal track when allowed */
.p-lab.lab-horizontal { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }
.p-lab.lab-horizontal .lab-track { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.p-lab.lab-horizontal.is-track { height: 100vh; height: 100svh; overflow: hidden; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.p-lab.is-track .lab-group-head { padding-top: 6.5rem; margin: 0; width: 100%; max-width: none; }
.p-lab.is-track .lab-track { display: flex; flex-wrap: nowrap; gap: clamp(2rem, 4vw, 4rem); max-width: none; margin: 0; padding: 0 var(--gutter) 3rem; will-change: transform; }
.p-lab.is-track .piece { flex: 0 0 auto; width: min(60vw, 720px); }
.p-lab.is-track .piece:last-child { margin-right: var(--gutter); }
.p-lab.is-track .piece .ph, .p-lab.is-track .piece .art { aspect-ratio: auto; height: 42vh; min-height: 240px; }
.p-lab.is-track .piece figcaption { max-width: 34rem; }
.p-lab .track-hint { display: none; }
.p-lab.is-track .track-hint { display: block; position: absolute; right: var(--gutter); top: 6.9rem; font-size: .9rem; color: var(--ink-soft); }

/* foot */
.p-lab.lab-foot { overflow: hidden; padding-bottom: calc(max(46vh, 260px) + 2.5rem); }

/* lightbox */
.p-lab.lab-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 68rem); width: 100%; margin: auto; color: var(--bone); }
.p-lab.lab-lightbox::backdrop { background: rgba(20, 26, 34, .88); }
.p-lab .lb-inner { position: relative; display: grid; gap: 1.25rem; padding: clamp(1rem, 3vw, 2rem); }
.p-lab .lb-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 2; color: var(--bone); background: var(--night-2); border-color: var(--night-2); padding: .6rem 1.1rem; }
.p-lab .lb-media .ph { aspect-ratio: 4/3; max-height: 60vh; background: linear-gradient(160deg, var(--night-2), #2d2219); color: var(--bone); }
.p-lab .lb-text h3 { color: #fff; }
.p-lab .lb-text p { max-width: 52rem; }
.p-lab .lb-text .around { color: var(--bone-soft); }
@media (min-width: 52rem) { .p-lab .lb-inner { grid-template-columns: 1.4fr 1fr; align-items: end; } .p-lab .lb-text { padding-bottom: .5rem; } }
.p-lab.lab-foot .ridges svg { overflow: visible; } /* paths run to y=800: the fill continues below the box so the parallax lift never shows a gap */

.p-lab .lb-media .art { aspect-ratio: auto; max-height: 72vh; background: transparent; }
.p-lab .lb-media .art img { width: auto; max-width: 100%; max-height: 72vh; height: auto; object-fit: contain; margin: 0 auto; }