/* HERO LAB. Four heroes on the same page, Dale, 8 September. Everything below the fold is the live page;
   only the first screen changes. Each variant is a .hero.lab-x; the shared engine is hero-lab.js. */
.lab-switch{position:fixed;left:18px;bottom:18px;z-index:80;display:flex;gap:6px;align-items:center;padding:6px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--clip);font:500 12px/1 var(--body);color:var(--muted)}
.lab-switch a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;text-decoration:none;color:var(--soft);font-family:var(--display);font-weight:600}
.lab-switch a:hover{background:var(--bg)}
.lab-switch a[aria-current]{background:var(--blue);color:#fff}
.lab-switch span{padding:0 6px 0 4px}
.lab-src{display:none}

/* ---- A. the photograph lives in the words ----
   One headline across the whole measure. The ink half is ink; the blue half is the room at Westlake seen
   through the letters, blue laid over it flat (multiply, not a gradient), drifting up as the page scrolls
   and sideways under the hand. A small honest print of the same photo sits at the end of the row so nobody
   mistakes the texture for a pattern. Editorial move, Riangle restraint: no object, just type. */
.lab-a .wrap{display:grid;gap:clamp(36px,4vw,64px)}
.lab-a-h1{font-size:clamp(44px,5.7vw,86px);line-height:1;letter-spacing:-.03em;max-width:none}
.lab-fill{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(rgba(0,66,228,.76),rgba(0,66,228,.76)),url(/assets/img/will-westlake-mono.jpg);
  background-blend-mode:normal;background-size:cover,cover;background-position:calc(50% + var(--bx,0%)) var(--bp,40%);
  -webkit-box-decoration-break:slice;box-decoration-break:slice}
@supports not (background-clip:text){.lab-fill{color:var(--blue);background:none}}
.lab-a-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.lab-a .hero-copy{max-width:520px}
.lab-a-thumb{display:grid;gap:10px;width:clamp(180px,17vw,240px)}
.lab-a-thumb img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--clip)}
.lab-a-thumb figcaption{display:grid;gap:2px;font-size:12px;line-height:1.35;color:var(--muted)}
.lab-a-thumb figcaption strong{color:var(--soft);font-weight:500}

/* ---- P. the portrait frame (E and F): a four-by-five photograph with a caption; a hole under the hand shows
   the dots beneath; on scroll the hole swallows the picture and the dots let go past the frame. ---- */
.lab-p .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,96px);align-items:center}
.lab-p .hero-copy{position:relative;z-index:2;max-width:640px}
.lab-p .lab-a-fig{justify-self:end;display:grid;gap:14px;width:min(100%,clamp(300px,30vw,440px))}
.lab-p .hero-visual{aspect-ratio:4/5;height:auto;min-height:0;max-height:none;width:100%;transform-origin:center}
.lab-p .lab-photo-cut{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--clip);object-fit:cover;object-position:50% 50%;filter:saturate(.9);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent calc(var(--mr,0px) - 34px),#000 var(--mr,0px));
  mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent calc(var(--mr,0px) - 34px),#000 var(--mr,0px))}
.lab-p .hero-visual canvas{position:absolute;inset:-160px;width:calc(100% + 320px);height:calc(100% + 320px);pointer-events:none}
/* still under the hand: the hole opens from the centre of the picture on scroll, not from the pointer */
.hero-still .lab-photo-cut{--mx:50%;--my:50%}
.lab-p figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding-inline:2px}
.lab-p figcaption strong{color:var(--soft);font-weight:500}
/* every lab canvas is out of flow, whatever else happens. A canvas in flow that sizes itself to its own box
   grows without end; that is what took E and F down on 8 September. */
canvas[data-halftone],canvas[data-mosaic]{position:absolute}

/* ---- B. the mosaic: the photograph cut into circles that answer the hand and fall on scroll ---- */
.lab-b .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,96px);align-items:center}
.lab-b .hero-copy{position:relative;z-index:2;max-width:640px}
.lab-b .lab-a-fig{justify-self:end;display:grid;gap:14px;width:min(100%,clamp(300px,30vw,440px))}
.lab-b .hero-visual{aspect-ratio:4/5;height:auto;min-height:0;max-height:none;width:100%;transform-origin:center}
.lab-b .hero-visual img{display:none}
.lab-b .hero-visual canvas{position:absolute;inset:-160px;width:calc(100% + 320px);height:calc(100% + 320px);pointer-events:none}
.lab-b figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding-inline:2px}
.lab-b figcaption strong{color:var(--soft);font-weight:500}

/* ---- C. the room ---- */
.lab-c{display:block;min-height:0;height:190vh;padding:0;overflow:visible}
.lab-c .lab-c-stick{position:sticky;top:var(--header);height:calc(100svh - var(--header));overflow:hidden}
.lab-c .lab-photo,.lab-c canvas{position:absolute;inset:0;width:100%;height:100%}
.lab-c .lab-photo{object-fit:cover;object-position:52% 40%;filter:grayscale(1) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--k,0) * 150% - 12%),#000 calc(var(--k,0) * 150%));mask-image:linear-gradient(90deg,transparent calc(var(--k,0) * 150% - 12%),#000 calc(var(--k,0) * 150%))}
.lab-c .lab-c-media{position:absolute;inset:0;transform:scale(1.06);transform-origin:30% 45%}
.lab-c .lab-photo{display:none}
/* the copy panel: the first one, a cream box floating on the room, narrow enough to leave the speaker clear */
.lab-c .hero-copy{position:absolute;left:var(--gutter);bottom:clamp(28px,5vh,64px);max-width:560px;background:var(--bg);padding:clamp(24px,3vw,40px);border-radius:var(--clip)}
.lab-c .hero-copy h1{font-size:clamp(30px,3.1vw,44px)}
.lab-c .hero-copy .hero-lede{font-size:clamp(16px,1.2vw,19px)}
.lab-c .lab-fx{position:absolute;right:var(--gutter);bottom:calc(clamp(28px,5vh,64px) + 52px);display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:var(--clip)}
.lab-c .lab-fx button{border:0;background:none;padding:8px 12px;border-radius:6px;font:500 13px/1 var(--body);color:var(--soft)}
.lab-c .lab-fx button:hover{color:var(--ink)}
.lab-c .lab-fx button[aria-pressed="true"]{background:var(--blue);color:#fff}
.lab-c .lab-c-progress{position:absolute;right:var(--gutter);bottom:clamp(28px,5vh,64px);font:500 13px/1.4 var(--body);color:var(--muted);background:var(--bg);padding:10px 14px;border-radius:var(--clip)}

/* ---- D. the seam ---- */
.lab-d .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;align-items:center}
.lab-d .hero-copy{position:relative;z-index:2;max-width:640px;margin-right:-160px}
.lab-d .hero-visual{aspect-ratio:600/853;height:min(80svh,780px);min-height:0;max-height:none;width:auto;justify-self:end}
.lab-d .hero-visual img,.lab-d .hero-visual canvas{position:absolute;inset:0;width:100%;height:100%}
.lab-d .hero-visual img{object-fit:cover;filter:saturate(.85);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(12% + var(--k,0) * 50%),#000 calc(34% + var(--k,0) * 50%)),linear-gradient(180deg,#000 calc(74% - var(--k,0) * 50%),transparent calc(100% - var(--k,0) * 50%));-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent calc(12% + var(--k,0) * 50%),#000 calc(34% + var(--k,0) * 50%)),linear-gradient(180deg,#000 calc(74% - var(--k,0) * 50%),transparent calc(100% - var(--k,0) * 50%));mask-composite:intersect}

@media(max-width:900px){
  .lab-d .hero-grid{grid-template-columns:1fr;gap:32px}
  .lab-d .hero-copy{margin-right:0}
  .lab-a-row{grid-template-columns:1fr}
  .lab-a-thumb{width:min(60%,240px)}
  .lab-p .hero-grid,.lab-b .hero-grid{grid-template-columns:1fr;gap:28px}
  /* the phone: the picture first, full width, the way Riangle leads with the object */
  .lab-p .lab-a-fig,.lab-b .lab-a-fig{order:-1;justify-self:stretch;width:100%}
  .lab-p .hero-visual,.lab-b .hero-visual{aspect-ratio:1}
  .lab-d .hero-visual{height:auto;width:min(100%,420px);justify-self:start}
  .lab-b .hero-grid{grid-template-columns:1fr;gap:32px}
  .lab-b .lab-a-fig{justify-self:start;width:min(100%,360px)}
  .lab-c{height:auto}.lab-c .lab-c-stick{position:static;height:auto}
  .lab-c .lab-photo{display:block;position:static;height:56vw;width:100%;object-fit:cover}
  .lab-c canvas{display:none}
  .lab-c .lab-fx{display:none}
  .lab-c .hero-copy{position:static;background:none;padding:var(--gutter) var(--gutter) 0;max-width:none}
  .lab-c .lab-c-media{position:static;transform:none}
  .lab-c .lab-c-progress{display:none}
}
@media(prefers-reduced-motion:reduce){
}