/* The Lab: a screening room (#01, full-bleed video) followed by a numbered index of experiments. */
body[data-material="lab"] { --bg: #101212; --ink: #eeeae2; --muted: #a7aaa5; --accent: #dda884; --accent-line: #dda884; --line: #343a39; --screen: #13161d; }

.crumbs { display: flex; gap: 8px; font: 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.lab-label, .lab-meta { margin: 0; font: 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lab-label { color: var(--accent); }

/* Opening: the title crosses the top edge of the screen. The frame's own dark margin sits under it, so it never covers the run. */
.lab-open-head { position: relative; z-index: 2; display: grid; gap: 18px; padding: clamp(128px, 14vw, 180px) var(--pad) 0; pointer-events: none; }
.lab-open-head a { pointer-events: auto; }
.lab-title { font: 400 clamp(92px, 15vw, 232px)/.8 var(--serif); letter-spacing: -.035em; margin-bottom: -.24em; }
.lab-title em { font-style: italic; color: var(--accent); }

.lab-screen { background: var(--screen); display: grid; place-items: center; }
.lab-video { display: block; height: auto; background: var(--screen); }
.lab-video--wide { width: min(100%, calc(86svh * 16 / 9)); aspect-ratio: 16 / 9; }
.lab-video--tall { display: none; width: min(100%, calc(84svh * 9 / 16)); aspect-ratio: 9 / 16; }

/* Rows: 5/7 split, dashed rules, one hairline in the piece's own tint. */
.lab-piece { position: relative; --tint: var(--accent); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(40px, 6vw, 88px) var(--pad); border-top: 1px dashed var(--line); }
.lab-piece::before { content: ""; position: absolute; top: -1px; left: var(--pad); right: var(--pad); height: 1px; background: var(--tint); transform-origin: left; opacity: .8; }
.lab-piece--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 0; }
.lab-piece--lead::before { display: none; }
.lab-piece--lead .lab-meta { grid-column: 1; align-self: start; }
.lab-piece--lead .lab-copy { grid-column: 2; grid-row: 1 / span 3; }
.lab-fine { grid-column: 1; font: 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.lab-lede { grid-column: 1; max-width: 34ch; color: var(--muted); font-size: 15px; line-height: 1.6; }

.lab-index { list-style: none; margin: 0; padding: 0; }
.lab-plate { display: block; overflow: hidden; border-radius: 2px; background: var(--screen); }
.lab-plate img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; filter: brightness(.86) saturate(.92); transition: filter .35s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.lab-piece:hover .lab-plate img, .lab-piece:focus-within .lab-plate img { filter: none; transform: scale(1.02); }

.lab-copy { display: grid; gap: 16px; max-width: 62ch; }
.lab-meta { display: flex; justify-content: space-between; gap: 16px; }
.lab-meta span:first-child { color: var(--tint, var(--accent)); }
.lab-name { font: 400 clamp(30px, 3.4vw, 50px)/1.02 var(--serif); letter-spacing: -.02em; }
.lab-what { display: block; margin-top: 10px; font: 400 16px/1.5 var(--sans); letter-spacing: 0; color: var(--muted); }
.lab-why { font: italic 400 clamp(19px, 1.6vw, 23px)/1.45 var(--serif); color: var(--ink); }
.lab-why-k { display: block; margin-bottom: 6px; font: normal 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lab-go { justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 14px; border-bottom: 1px solid var(--tint); }
.lab-go span { transition: transform .25s; }
.lab-go:hover { color: var(--tint); }
.lab-go:hover span { transform: translate(3px, -1px); }

.lab-close { display: grid; gap: 18px; padding: clamp(64px, 9vw, 128px) var(--pad); border-top: 1px dashed var(--line); }
.lab-close h2 { max-width: 16ch; font: 400 clamp(40px, 5.4vw, 80px)/.98 var(--serif); letter-spacing: -.02em; }
.lab-close > p:not(.lab-label) { max-width: 52ch; color: var(--muted); }
.lab-close .text-link { justify-self: start; border-bottom: 1px solid var(--accent); }

/* The one motion idea: each row's tint line draws across as it scrolls in. No JS; browsers without scroll timelines show it drawn. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lab-piece::before { animation: lab-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes lab-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .lab-plate img, .lab-go span { transition: none; } .lab-piece:hover .lab-plate img { transform: none; } }

@media (max-width: 860px) {
  .lab-piece, .lab-piece--lead { grid-template-columns: minmax(0, 1fr); }
  .lab-piece--lead .lab-meta, .lab-piece--lead .lab-copy, .lab-fine { grid-column: 1; font: 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.lab-lede { grid-column: 1; grid-row: auto; }
  .lab-lede { max-width: none; }
}
@media (max-width: 640px) {
  .lab-video--wide { display: none; }
  .lab-video--tall { display: block; }
  .lab-title { margin-bottom: -.2em; }
}