/* SYNTAX — lab page */

/* one legibility token for every HUD row on this page: a dark, backdrop-filtered plate sized to the text it carries,
   so a label never sits straight on glyphs, noise or footage — and nothing else in the frame is dimmed */
.labpage {
  --hud-plate: rgba(5, 5, 6, .64);
  --hud-plate-filter: blur(10px) saturate(1.15);
  --exp-pad: clamp(56px, 5.6vw, 92px);
}

/* ---------- hero: the claim, the index, and — directly under it — 01 running edge to edge ---------- */
.lab-hero { padding: calc(var(--nav-h) + clamp(40px, 4.6vw, 88px)) 0 clamp(32px, 2.8vw, 48px); }
.lab-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.lab-hero h1 { margin-top: 22px; font-size: var(--t-hero); line-height: .92; letter-spacing: -.04em; }
.lab-hero .lede { margin-top: clamp(26px, 3vw, 40px); }
.lab-index { margin-top: clamp(32px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); border-top: 1px solid var(--line); }
.lab-index li { border-bottom: 1px solid var(--line); min-width: 0; }
.lab-index a { display: flex; gap: .9em; padding: 11px 0; font-size: 11px; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, padding .4s var(--ease-out); }
.lab-index a b { font-weight: 450; color: var(--bone-3); transition: color .3s; }
.lab-index a:hover, .lab-index a:focus-visible { color: var(--bone); padding-left: 6px; }
.lab-index a:hover b, .lab-index a:focus-visible b { color: var(--signal); }
/* wide screens: the headline and the lede share a row, the index runs as a 7 × 2 table under both */
@media (min-width: 1180px) {
  .lab-hero-in { grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "k k" "h l" "i i"; column-gap: clamp(48px, 5vw, 96px); align-items: end; }
  .lab-hero .k { grid-area: k; justify-self: start; }
  .lab-hero h1 { grid-area: h; font-size: clamp(54px, 6.5vw, 116px); }
  .lab-hero .lede { grid-area: l; margin: 0 0 .3em; max-width: 52ch; }
  .lab-index { grid-area: i; grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
/* tablets and small laptops: the headline, then the lede and a two-column index side by side, so the fluid still shows */
@media (min-width: 641px) and (max-width: 1179px) {
  .lab-hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "k k" "h h" "l i"; column-gap: clamp(32px, 5vw, 64px); align-items: start; }
  .lab-hero .k { grid-area: k; justify-self: start; }
  .lab-hero h1 { grid-area: h; }
  .lab-hero .lede { grid-area: l; }
  .lab-index { grid-area: i; margin-top: clamp(26px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-index a { padding: 8px 0; }
}
/* phones: the index gives way to the experiment chip (bottom of the screen), so the fluid starts on the first screen */
@media (max-width: 640px) {
  .lab-hero { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 28px; }
  .lab-hero h1 { margin-top: 20px; }
  .lab-hero .lede { margin-top: 22px; font-size: 17px; }
  .lab-index { display: none; }
}

/* ---------- experiments ---------- */
.exp { padding: var(--exp-pad) 0; scroll-margin-top: 8px; }
/* hairlines mark chapters, not every item: one above each full-width experiment */
.exp.full { border-top: 1px solid var(--line); padding-top: calc(var(--exp-pad) * 1.25); }
.exp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.exp.alt .exp-copy { order: 2; }
.exp.alt .exp-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.exp-copy h2 { margin-top: 24px; font-size: clamp(40px, 4.6vw, 72px); }
.exp-copy > p.body-2 { margin-top: 22px; max-width: 42ch; }
.exp-dl { margin: 30px 0 0; border-top: 1px solid var(--line); }
.exp-dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.exp-dl dt { padding-top: 3px; font-size: 10px; }
.exp-dl dd { margin: 0; font-size: 14.5px; color: var(--bone-2); line-height: 1.5; }
.exp-frame { height: clamp(460px, 44vw, 640px); border: 1px solid var(--line); }
.k .num { color: var(--signal); }

/* HUD rows: the plate token. The label hugs its text (it no longer stretches), the readout keeps the right edge */
.exp-frame .hud .hud-l { flex: 0 1 auto; }
.exp-frame .hud > span:not(:empty), .exp-frame .hud-b > span:not(:empty) {
  padding: 3px 7px; margin: -3px -7px; border-radius: 2px;
  background: var(--hud-plate); -webkit-backdrop-filter: var(--hud-plate-filter); backdrop-filter: var(--hud-plate-filter);
}

/* ---------- desktop rhythm: the catalogue breaks its own template ---------- */
@media (min-width: 1001px) {
  /* full-width experiments: a header row (title | text + specs), then the frame across the whole measure */
  .exp.full .exp-grid, .exp.bleed .exp-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 4.4vw, 68px); }
  .exp.full .exp-copy, .exp.bleed .exp-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
  .exp.full .exp-copy > .k, .exp.bleed .exp-copy > .k { grid-column: 1; grid-row: 1; }
  .exp.full .exp-copy > h2, .exp.bleed .exp-copy > h2 { grid-column: 1; grid-row: 2 / span 2; }
  .exp.full .exp-copy > p.body-2, .exp.bleed .exp-copy > p.body-2 { grid-column: 2; grid-row: 2; margin-top: 30px; max-width: 58ch; }
  .exp.full .exp-dl, .exp.bleed .exp-dl { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 44px); border-top: 0; margin-top: 26px; }
  .exp.full .exp-dl > div, .exp.bleed .exp-dl > div { grid-template-columns: 1fr; gap: 8px; border-top: 1px solid var(--line); }
  .exp.full .exp-frame { height: clamp(600px, 50vw, 760px); }

  /* frames are not one size: each is cut to what it shows */
  #x02 .exp-frame { height: clamp(480px, 46vw, 680px); }                     /* the plate, close to square */
  #x03 .exp-frame { height: clamp(460px, 40vw, 580px); }
  #x05 .exp-frame { height: clamp(520px, 50vw, 740px); }                     /* tall sky for the flock */
  #x06 .exp-frame { height: clamp(480px, 42vw, 600px); }
  #x08 .exp-frame { height: clamp(500px, 46vw, 680px); }
  #x10 .exp-frame { height: clamp(580px, 54vw, 780px); }                     /* the sheet hangs: a portrait-leaning cut */
  #x12 .exp-frame { height: clamp(420px, 36vw, 540px); }                     /* the flyover: a wide, low strip */
  #x13 .exp-frame { height: clamp(560px, 52vw, 760px); }
}

/* column proportions vary too, where there is room for it */
@media (min-width: 1280px) {
  #x02 .exp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  #x05 .exp-grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); }
  #x10 .exp-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  #x12 .exp-grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); }
  #x13 .exp-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* ---------- full-bleed experiments (01, 09, 14): the frame runs edge to edge and changes the pace ---------- */
.exp.bleed > .exp-frame { width: 100%; border-width: 1px 0; }
.exp.bleed > .exp-frame + .wrap { margin-top: clamp(40px, 4.4vw, 68px); }
.exp.bleed > .wrap + .exp-frame { margin-top: clamp(44px, 4.4vw, 68px); }
.exp.bleed.lead { padding-top: 0; }
#x01 > .exp-frame { height: clamp(500px, 68vh, 780px); }
#x09 > .exp-frame { height: clamp(560px, 90vh, 980px); }
#x14 > .exp-frame { height: clamp(560px, 86vh, 940px); }

/* phones and tablets: title and text, then the experiment, then its specs */
@media (max-width: 1000px) {
  .exp-grid, .exp.alt .exp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .exp-copy { display: contents; }
  .exp-grid > .exp-frame { order: 1; margin-top: 34px; height: clamp(480px, 62vw, 600px); }
  .exp-dl { order: 2; }
  .exp-copy > p.body-2 { max-width: 60ch; }
  #x04 .exp-frame { height: clamp(640px, 80vw, 720px); }
  #x07 .exp-frame, #x11 .exp-frame { height: 680px; }
  #x10 .exp-frame { height: clamp(520px, 72vw, 640px); }
  #x12 .exp-frame { height: clamp(440px, 56vw, 540px); }
  #x01 > .exp-frame { height: clamp(500px, 64vh, 640px); }
  #x09 > .exp-frame { height: clamp(520px, 74vh, 700px); }
  #x14 > .exp-frame { height: clamp(500px, 70vh, 660px); }
}
@media (max-width: 1000px) and (min-width: 641px) {
  .exp-dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 0; }
  .exp-dl > div { grid-template-columns: 1fr; gap: 8px; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .labpage { --exp-pad: 52px; }
  .hud-x { display: none; }                                            /* "Exp.01" — the title is right there in the copy */
}
@media (max-width: 480px) { .exp-dl > div { grid-template-columns: 92px 1fr; gap: 12px; } }

/* EXP.01: the constraint the solver enforces, standing in the stream as a solid body */
.exp-eq { position: absolute; z-index: 3; left: clamp(28px, 11%, 120px); top: 50%; transform: translateY(-50%); margin: 0; pointer-events: none;
  font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-opsz); font-size: clamp(64px, 8.4vw, 136px); letter-spacing: -.02em; line-height: 1; color: var(--bone); white-space: nowrap; }
.exp-eq em { font-style: italic; padding-right: .04em; }
.exp-eq .op { font-family: var(--f-mono); font-weight: 200; font-size: .74em; letter-spacing: -.06em; margin-right: .06em; }
.exp-eq-k { position: absolute; z-index: 3; left: clamp(28px, 11%, 120px); top: calc(50% + clamp(36px, 4.6vw, 74px)); margin: 0; pointer-events: none; font-size: 10px; letter-spacing: .14em; color: var(--bone-3); white-space: nowrap; }
/* edge to edge, the body stands on the page's text column, so the wake has the whole width to roll up in */
#x01 .exp-eq, #x01 .exp-eq-k { left: calc(max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter)) + 3%); }
/* a portrait frame runs the water bottom → top, so the body sits low and the wake rises through the frame */
@media (max-width: 560px) {
  #x01 .exp-eq { left: 50%; top: 66%; transform: translate(-50%, -50%); }
  #x01 .exp-eq-k { left: 50%; top: calc(66% + 40px); transform: translateX(-50%); font-size: 9.5px; letter-spacing: .12em; }
}

/* the caption under the equation is a label like any other HUD row: a plate, so contour lines never run through its letters */
.exp-eq-k { padding: 3px 8px; margin-left: -8px; border-radius: 2px; background: var(--hud-plate); -webkit-backdrop-filter: var(--hud-plate-filter); backdrop-filter: var(--hud-plate-filter); }
@media (max-width: 560px) { .exp-eq-k { margin-left: 0; } }

/* EXP.01 and EXP.14 carry a control strip (the layer key, the camera button): it stands on the page's text column, like the equation and the HUD */
#x01 > .exp-frame, #x14 > .exp-frame {
  --fh-key-x: calc(max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter)));
  --fh-key-r: var(--fh-key-x);
  --lc-x: var(--fh-key-x);
  --lc-r: var(--fh-key-x);
  --fh-key-y: 24px; --lc-y: 24px;
}
@media (max-width: 640px) { #x01 > .exp-frame, #x14 > .exp-frame { --fh-key-y: 22px; --lc-y: 22px; } }

/* ---------- wayfinding: a slim rail on desktop, a chip on phones; lab-page.js builds it from the hero index ---------- */
.lab-way { position: fixed; z-index: 90; visibility: hidden; opacity: 0; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s; }
.lab-way.on { visibility: visible; opacity: 1; transition-delay: 0s; }
.lab-way ol { margin: 0; }
.lab-way a { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); font-variant-numeric: tabular-nums; }
.lab-way a .n { color: var(--bone-3); }
.lab-way a[aria-current] { color: var(--bone); }
.lab-way a[aria-current] .n { color: var(--signal); }
.lab-way-btn, .lab-way-count { display: none; }
@media (min-width: 1001px) {
  .lab-way { right: clamp(8px, 1.1vw, 20px); top: 50%; transform: translate(10px, -50%); width: 30px; padding: 10px 0 8px; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(5, 5, 6, .5); -webkit-backdrop-filter: var(--hud-plate-filter); backdrop-filter: var(--hud-plate-filter); }
  .lab-way.on { transform: translate(0, -50%); }
  .lab-way.on.aside { visibility: hidden; opacity: 0; transform: translate(10px, -50%); transition-delay: 0s, 0s, .6s; }
  .lab-way-count { display: block; margin: 0 6px 7px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); text-align: center; font-family: var(--f-mono); font-size: 10px; line-height: 1.25; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--bone-3); }
  .lab-way-count b { display: block; font-weight: 450; color: var(--signal); }
  .lab-way ol { display: flex; flex-direction: column; align-items: center; }
  .lab-way a { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 17px; }
  .lab-way a i { width: 7px; height: 1px; background: var(--bone-4); transition: width .45s var(--ease-out), background .3s; }
  .lab-way a[aria-current] i { width: 14px; background: var(--signal); }
  .lab-way a:hover i, .lab-way a:focus-visible i { background: var(--bone); }
  /* hover or focus: the pill opens leftwards into one solid panel, and every entry reads number and name */
  .lab-way > * { position: relative; z-index: 1; }
  .lab-way::before { content: ""; position: absolute; z-index: 0; top: -1px; bottom: -1px; right: -1px; width: calc(100% + 2px); border: 1px solid var(--line-2); border-radius: 16px;
    background: var(--ink-1); box-shadow: -18px 0 40px rgba(5, 5, 6, .6); opacity: 0; transition: width .45s var(--ease-out), opacity .3s; }
  .lab-way:hover::before, .lab-way:focus-within::before { width: 200px; opacity: 1; }
  .lab-way a .lbl { position: absolute; right: calc(100% + 6px); top: 50%; transform: translate(8px, -50%); padding: 0 6px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .25s, transform .45s var(--ease-out); }
  .lab-way a .lbl .n { margin-right: .5em; }
  .lab-way:hover a .lbl, .lab-way:focus-within a .lbl { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  .lab-way a:hover .lbl, .lab-way a:focus-visible .lbl { color: var(--bone); }
}
@media (max-width: 1000px) {
  .lab-way { left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 14px); }
  .lab-way.on { transform: translate(-50%, 0); }
  .lab-way.on.hush:not(.open) { visibility: hidden; opacity: 0; transform: translate(-50%, 14px); transition-delay: 0s, 0s, .6s; }   /* out of the way while you scroll on */
  .lab-way-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 15px; border-radius: 999px; border: 1px solid var(--line-2);
    background: rgba(9, 9, 11, .74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  .lab-way-btn .n b { font-weight: 450; color: var(--signal); }
  .lab-way-btn .t { color: var(--bone); }
  .lab-way-btn .car { width: 7px; height: 7px; margin-left: 2px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateY(2px) rotate(45deg); transition: transform .4s var(--ease-out); }
  .lab-way.open .lab-way-btn .car { transform: translateY(-2px) rotate(225deg); }
  .lab-way ol { position: absolute; left: 50%; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); max-height: min(62vh, 540px); overflow: auto; overscroll-behavior: contain;
    padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(9, 9, 11, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s; }
  .lab-way.open ol { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
  .lab-way a { display: block; padding: 12px 12px; border-radius: 8px; font-size: 11px; }
  .lab-way a .lbl .n { margin-right: .9em; }
  .lab-way a[aria-current] { background: rgba(236, 232, 225, .06); }
  .lab-way a i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lab-way, .lab-way ol { transition: none !important; } }

/* ---------- close: the loop on the left, both ways in on the right; on this page it is the footer's lead ---------- */
.lab-close { padding: clamp(72px, 8vw, 128px) 0 clamp(64px, 7vw, 104px); }
.lab-close .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "k ." "h l" "h c"; column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.lab-close .k { grid-area: k; }
.lab-close h2 { grid-area: h; margin-top: 26px; font-size: var(--t-h1); }
.lab-close .lede { grid-area: l; margin-top: 26px; text-wrap: balance; }
.lab-close .cta-row { grid-area: c; margin-top: 30px; align-self: start; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .lab-close .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "l" "c"; }
}
/* the closer already makes the pitch and offers both ways in, so the footer drops its own and keeps the index */
.labpage .foot { padding-top: clamp(44px, 5vw, 72px); }
.labpage .foot .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.labpage .foot .cols > :first-child { display: none; }
@media (max-width: 900px) { .labpage .foot .cols { grid-template-columns: 1fr 1fr; } }