/* ══════════════════════════════
   THE LAB — header, collage, six sections.
   Lives on brad-lab.html, its own page again. Only that page loads this file;
   the home page links in from the WORK / PROCESS gate under the bio.
   Assumes ASSETS/css/site.css is already loaded for the tokens, nav, .rule,
   .reveal and .vfacade this builds on.
══════════════════════════════ */
/* The header is built exactly like a section below it: same centred measure,
   text box with a still under it, loops in a deck on the right. */
.lab-head { position: relative; z-index: 2; padding: 10vh 44px 5vh; }
.lab-head .lab-kick,
.lab-head .lab-titlerow,
.lab-head .phase-body { max-width: 960px; margin-left: auto; margin-right: auto; }
/* The billing strip rides on the end of the wordmark. On its own it was an
   inline-flex box, and auto margins don't centre inline-level boxes — so it
   stayed pinned to the page's left padding while everything else lined up
   to the measure. In the row it inherits the alignment and gives back the
   vertical space it used to take on its own line. */
.lab-titlerow {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 10px 22px; margin-bottom: 24px;
}
/* Pinned to the end of the row rather than trailing the wordmark: the h1 is
   empty until the scramble resolves, so measuring from the title would let
   the strip jump right the moment the letters land. */
.lab-head .lab-meta { margin-left: auto; }
@media (max-width: 760px) { .lab-head .lab-meta { margin-left: 0; } }
.lab-kick {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(10,10,10,0.45);
  margin-bottom: 18px;
}
.lab-kick .blink { color: rgba(10,10,10,0.6); animation: hudblink 1.6s step-end infinite; }
/* lived in the home page's hero HUD block before the lab moved back out here */
@keyframes hudblink { 0%,100%{opacity:1} 50%{opacity:0.12} }
.lab-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(46px, 7vw, 96px); line-height: 0.86;
  letter-spacing: -0.02em; text-transform: uppercase; min-height: 1em;
}
/* yellow reads thin on cream, so the brackets carry a hairline ink outline */
.lab-title .hero-bracket { color: var(--yellow); -webkit-text-stroke: 2px var(--black); }
/* intro rides in a solid card so it stays readable over the dotted backdrop */
.lab-intro {
  margin: 0; max-width: none;
  background: var(--white); border: 2.5px solid var(--black);
  box-shadow: 8px 8px 0 var(--yellow);
  padding: 18px 22px; transform: rotate(-0.4deg);
  font-size: 12px; line-height: 1.8; color: rgba(10,10,10,0.8);
}
.lab-intro b { font-weight: 700; background: var(--yellow); padding: 0 4px; }
.lab-meta {
  display: inline-flex; gap: 24px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 9px 14px;
  background: var(--white); border: 1.5px solid var(--black);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(10,10,10,0.55);
}
.lab-meta .lab-billing { color: var(--black); }
/* the header's still takes the slot the "for example" film has below */
.lab-still { position: relative; border: 2px solid var(--black); background: var(--black); }
.lab-still img { display: block; width: 100%; }
.lab-still figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 14px 11px;
  background: linear-gradient(to top, rgba(10,10,10,0.82), transparent);
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,250,248,0.65); pointer-events: none;
}

/* ══ SECTIONS ══ */
.lab-phase { position: relative; z-index: 2; padding: 4vh 44px 4vh; }
.lab-phase .rule { margin-bottom: 18px; }
.lab-phase.dark { background: var(--black); color: var(--white); }

/* The numeral and the title only. The blurb has moved down into
   .phase-body so it can sit beside the example crate. */
.phase-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; align-items: center; margin-bottom: 20px; }
.phase-num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; line-height: 0.8;
  font-size: clamp(36px, 4.2vw, 64px); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(10,10,10,0.35);
}
/* on the cream sections the outlined numeral all but vanished — fill it yellow
   and keep a hairline of ink so it still reads against the paper */
.lab-phase:not(.dark) .phase-num { color: var(--yellow); -webkit-text-stroke: 2px var(--black); }
.lab-phase.dark .phase-num { -webkit-text-stroke: 1.5px rgba(255,224,0,0.4); }
.phase-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 48px); line-height: 0.92; letter-spacing: -0.02em;
}
.phase-title em { font-style: normal; }
/* ══ SECTION LAYOUT ══
   One measure for the whole lab, and every section built the same way: a
   wide text box with the "for example" film directly beneath it, and the
   loops from that shoot in a single deck down the right — one at a time,
   clicked through, rather than a row of towers of different heights. The
   deck stretches to whatever height the left column comes out at, so the
   two columns always finish flush and nothing is left ragged. */
.lab-phase .rule,
.lab-phase .phase-head,
.phase-body { max-width: 960px; margin-left: auto; margin-right: auto; }

.phase-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 30px; align-items: stretch;
}
/* The deck's 4:5 stage fixes the row height; space-between hands any slack
   to the gap between the text and its film rather than leaving it dangling
   under one column. */
.phase-main { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .phase-body { grid-template-columns: 1fr; gap: 26px; } }

/* blurbs get the same solid-card treatment — readable over any backdrop */
.phase-blurb {
  margin-top: 0; max-width: none;
  background: var(--white); border: 2.5px solid var(--black);
  box-shadow: 8px 8px 0 var(--yellow);
  padding: 16px 20px; transform: rotate(0.4deg);
  font-size: 11.5px; line-height: 1.75; color: rgba(10,10,10,0.8);
}
.lab-phase.dark .phase-blurb {
  background: #141414; border-color: rgba(255,224,0,0.6);
  box-shadow: 8px 8px 0 rgba(255,224,0,0.22);
  color: rgba(250,250,248,0.78); transform: rotate(-0.4deg);
}
.phase-blurb b { font-weight: 700; color: var(--black); background: var(--yellow); padding: 0 4px; }
.lab-phase.dark .phase-blurb b { color: var(--black); }
@media (max-width: 700px) {
  .lab-phase { padding: 8vh 22px 6vh; }
  .phase-head { grid-template-columns: 1fr; gap: 6px; }
  .phase-blurb { padding: 18px 20px; font-size: 12.5px; box-shadow: 5px 5px 0 var(--yellow); }
  .lab-phase.dark .phase-blurb { box-shadow: 5px 5px 0 rgba(255,224,0,0.22); }
}

/* ══ LOOP DECK — the shoot's own footage, one clip at a time ══ */
.loop-deck { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* Every loop but the previs is a 4:5 social crop, so the stage is 4:5 and
   twelve of the thirteen fill it exactly — contain, never cover, so nothing
   is trimmed. The 16:9 previs is the one that sits inside with bars. */
.loop-stage {
  position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden;
  border: 2px solid var(--black); background: var(--black);
}
.lab-phase.dark .loop-stage { border-color: rgba(255,224,0,0.35); }
.loop-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.loop-slide.on { opacity: 1; }
.loop-slide video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Controls sit ABOVE the stage so they're in view without scrolling past it. */
.loop-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; margin: 0 0 10px; }
.loop-btn {
  width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer; padding: 0;
  background: var(--yellow); border: 2px solid var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease-out);
}
.loop-btn:hover { transform: translateY(-2px); }
.loop-btn svg { width: 11px; height: 11px; fill: none; stroke: var(--black); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.loop-count { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(10,10,10,0.5); }
.lab-phase.dark .loop-count { color: rgba(255,224,0,0.45); }
.loop-dots { display: flex; gap: 7px; margin-left: auto; }
.loop-dot {
  width: 9px; height: 9px; padding: 0; cursor: pointer;
  background: transparent; border: 2px solid var(--black);
  transition: background 0.25s ease;
}
.loop-dot[aria-current="true"] { background: var(--yellow); }
.lab-phase.dark .loop-dot { border-color: rgba(255,224,0,0.6); }

@media (max-width: 900px) { .loop-deck { max-width: 400px; } }

/* little stamp chip on media */
.ph-stamp {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--yellow); color: var(--black); padding: 4px 8px;
  border: 1.5px solid var(--black);
}

/* ══ "FOR EXAMPLE" BOX ══
   Every section ends with one piece of real footage of the thing just
   described. It sits in a yellow crate with a hand-lettered sign taped above
   it, arrow pointing down at the video — so it reads as an aside, not as
   another item in the grid. */
/* The crate now fills the text column, directly under the box it belongs to. */
.example { position: relative; max-width: none; }
.ex-sign {
  display: inline-block; position: relative; z-index: 3;
  margin-left: 26px; margin-bottom: -10px;
  background: var(--white); border: 2.5px solid var(--black);
  box-shadow: 5px 5px 0 rgba(10,10,10,0.35);
  padding: 7px 13px 6px; transform: rotate(-2.4deg);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: 16px; letter-spacing: 0.06em; line-height: 1; color: var(--black);
}
/* the arrow: a rotated square peeking out of the sign's bottom edge, so the
   sign really does point at the crate underneath it */
.ex-sign::after {
  content: ''; position: absolute; left: 22px; bottom: -9px;
  width: 13px; height: 13px; background: var(--white);
  border-right: 2.5px solid var(--black); border-bottom: 2.5px solid var(--black);
  transform: rotate(45deg);
}
.ex-box {
  position: relative; z-index: 2;
  background: var(--yellow); border: 2.5px solid var(--black);
  box-shadow: 8px 9px 0 rgba(10,10,10,0.45);
  padding: 12px;
}
/* Every example film sits in the same 16:9 frame regardless of the source's
   own shape — six sections, one rhythm, no crate taller than the next. The
   poster crops to fill; a portrait source pillarboxes once the player loads. */
.ex-box .vfacade { padding-top: 56.25% !important; }
.lab-phase.dark .ex-box { box-shadow: 8px 9px 0 rgba(255,224,0,0.22); }
.ex-cap {
  margin-top: 10px; font-size: 8.5px; letter-spacing: 0.2em; line-height: 1.5;
  text-transform: uppercase; color: rgba(10,10,10,0.6);
}
@media (max-width: 700px) {
  .ex-box { padding: 12px; box-shadow: 6px 7px 0 rgba(10,10,10,0.45); }
  .lab-phase.dark .ex-box { box-shadow: 6px 7px 0 rgba(255,224,0,0.22); }
  .ex-sign { font-size: 16px; margin-left: 16px; }
}

/* Lite mode swaps the scroll-driven yellow fill for a flat one — see lab.js. */
.yr-static { color: var(--yellow); -webkit-text-stroke: 0.5px var(--black); }
.on-dark .yr-static, .yr-static.on-dark { -webkit-text-stroke: 0; }
.rule .yr-static { font-weight: 700; -webkit-text-stroke: 0.4px var(--black); }
html.lite .lab-intro,
html.lite .phase-blurb { transform: none; }

@media (max-width: 700px) {
  .lab-head { padding: 9vh 20px 3vh; }
  .lab-kick { gap: 12px; margin-bottom: 16px; font-size: 9px; letter-spacing: 0.3em; }
  .lab-title { font-size: clamp(44px, 15vw, 86px); }
  .lab-intro { padding: 16px 18px; font-size: 12px; box-shadow: 5px 5px 0 var(--yellow); }
  .lab-meta { gap: 12px 16px; margin: 0 0 4px; font-size: 8px; letter-spacing: 0.18em; }
  .lab-phase { padding: 7vh 20px 5vh; }
  .lab-phase .rule { margin-bottom: 4vh; }
  .phase-head { margin-bottom: 4vh; }
  .phase-num { font-size: clamp(54px, 17vw, 96px); }
  .phase-blurb { margin-top: 18px; padding: 16px 18px; box-shadow: 5px 5px 0 var(--yellow); }
  .lab-phase.dark .phase-blurb { box-shadow: 5px 5px 0 rgba(255,224,0,0.22); }
}
/* one column, one thing at a time */
@media (max-width: 560px) {
  .phase-media { grid-template-columns: 1fr; gap: 16px; }
  .pm-a, .pm-b, .pm-c, .pm-prev, .pm-p1, .pm-p2, .pm-solo { grid-column: auto; margin-top: 0; }
}