/* Omega Mega — the Lab (venture-lab megaplan). An unnumbered chapter after p18, like the note: no data-p, so the
   deck chip and the page index skip it. v3.15: every product is a spread, a hero (the line, the door, the landing page)
   over a supporting row (more screens, three points), and a sticky index rides beside them on desktop. Every number
   on it carries a data-claim that tests/lab/claims.test.mjs resolves against docs/venture-lab/claims.json. */

.lab .lede{max-width:30em}

/* the shelf: the index rail beside the spreads from 980px; under it the rail is a wrapped jump list above them */
.lab-shelf{margin-top:clamp(40px,6vw,64px)}
@media (min-width:980px){.lab-shelf{display:grid;grid-template-columns:184px minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}}

.lab-rail{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.lab-rail p{margin:0 0 6px;color:var(--mute);font-size:11px;letter-spacing:.1em}
.lab-rail ol{list-style:none;margin:0 0 18px;padding:0}
.lab-rail a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none}
.lab-rail a span{flex:none;font-size:11px;opacity:.7}
.lab-rail a.pp span{opacity:1;padding:2px 4px;background:var(--lav);color:#0b0b0c}
.lab-rail a:hover{text-decoration:underline;text-underline-offset:3px}
.lab-rail a.on{background:var(--ink);color:var(--paper)}
.lab-rail a.on span{opacity:1}
@media (min-width:980px){
  .lab-rail{position:sticky;top:88px}
  .lab-rail li{border-bottom:1.5px solid var(--line)}
  .lab-rail ol{border-top:1.5px solid var(--line)}
}
@media (max-width:979px){
  .lab-rail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
  .lab-rail p{flex:1 1 100%;margin:6px 0 0}
  .lab-rail ol{display:contents}
  .lab-rail a{border:1.5px solid var(--line);padding:0 12px}
}

/* a spread: the top line (number · status · what it is), the name, then the hero and the supporting row */
.lab-coral{container-type:inline-size;min-width:0;padding:clamp(36px,6vw,72px) 0 clamp(48px,8vw,104px);border-top:2px solid var(--line)}
.lab-coral:first-child{border-top:0;padding-top:0}
@media (min-width:980px){.lab-coral:first-child{padding-top:4px}}
.lab-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:700 12px/1 var(--mono)}
.lab-chip{display:inline-block;padding:4px 7px;font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#0b0b0c;background:var(--lime)}
.lab-chip.inc{background:var(--pink)}
.lab-k{margin:0;font:700 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.lab-coral.p .lab-n{padding:3px 5px;background:var(--lav);color:#0b0b0c}
/* the name runs the width of the spread; --k shrinks the few whose longest word would not fit */
.lab-coral h3{margin:.18em 0 .3em;font-weight:900;font-stretch:115%;font-size:calc(var(--k,1) * min(104px,12cqi));line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}

.lab-hero,.lab-sup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5cqi,56px);align-items:center}
.lab-hero.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lab-hero.flip>.lab-copy{order:2}
.lab-sup{margin-top:clamp(40px,8cqi,88px);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.lab-sup.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lab-sup.flip>.lab-shots{order:2}
.lab-copy{min-width:0}
.lab-coral p.lab-blurb{margin:0 0 22px;max-width:24ch;font-size:clamp(19px,2.6cqi,25px);line-height:1.3}
.lab-host{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 16px;
  background:var(--lime);color:#0b0b0c;border:2px solid var(--line);box-shadow:4px 4px 0 var(--shadow);
  font:700 13px/1.2 var(--mono);text-decoration:none;overflow-wrap:anywhere;transition:transform .2s ease}
.lab-coral.p .lab-host{background:var(--lav)}
.lab-host:hover{transform:translate(2px,2px)}
.lab-host:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* the screens: a browser plate (white in every look) and a phone */
.lab-plate{margin:0;min-width:0;background:#fff;color:#0b0b0c;border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow)}
.lab-chrome{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-bottom:2px solid #0b0b0c;font:11px/1 var(--mono);overflow:hidden;white-space:nowrap}
.lab-chrome i{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid #0b0b0c}
.lab-chrome span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.lab-plate img,.lab-phone img{display:block;width:100%;height:auto}
.lab-phone{margin:0;padding:7px;background:#0b0b0c;border:2px solid var(--line);border-radius:28px;box-shadow:6px 6px 0 var(--shadow)}
.lab-phone img{border-radius:20px}
.lab-hero .lab-phone{width:min(100%,300px);justify-self:center}

.lab-shots{position:relative;min-width:0;padding-bottom:32px}
.lab-shots .lab-plate{width:82%}
.lab-shots .lab-phone{position:absolute;right:0;bottom:0;width:30%}
.lab-sup.flip .lab-shots .lab-plate{margin-left:auto}
.lab-sup.flip .lab-shots .lab-phone{right:auto;left:0}
.lab-shots.solo{padding-bottom:0}
.lab-shots.solo .lab-phone{position:static;width:min(56%,220px);margin:0 auto}

.lab-pts{list-style:none;margin:0;padding:0;counter-reset:pt}
.lab-pts li{counter-increment:pt;padding:14px 0;border-top:2px solid var(--line);font-size:17px;line-height:1.4}
.lab-pts li:last-child{border-bottom:2px solid var(--line)}
.lab-pts li::before{content:"0" counter(pt);float:right;margin-left:12px;font:700 12px/1.6 var(--mono);color:var(--mute)}
.lab-pts b{display:block;margin-bottom:2px;font-weight:900;font-stretch:110%;font-size:19px;line-height:1.15;text-transform:uppercase}

/* one column when the spread is narrow: the copy first, then the screens, then the points */
@container (max-width:719px){
  .lab-hero,.lab-hero.flip,.lab-sup,.lab-sup.flip{grid-template-columns:minmax(0,1fr)}
  .lab-hero.flip>.lab-copy,.lab-sup.flip>.lab-shots{order:0}
  .lab-shots .lab-plate,.lab-sup.flip .lab-shots .lab-plate{width:100%;margin:0}
  .lab-shots{padding-bottom:0}
  .lab-shots .lab-phone,.lab-sup.flip .lab-shots .lab-phone{position:relative;left:auto;right:auto;width:min(44%,200px);margin:-56px 6px 0 auto}
  .lab-shots.solo .lab-phone,.lab-sup.flip .lab-shots.solo .lab-phone{position:static;width:min(56%,220px);margin:0 auto}
}

/* the Lab link is the nav's seventh; between 760 and 860 px the row only fits with tighter links */
@media (min-width:760px) and (max-width:859px){.links{gap:0}.links a{padding:0 8px}}

/* the deal flow, drawn: a dark plate in every look. No JS: a ten-by-ten grid. js/lab.js adds .sky and scatters them. */
.lab-field{margin:clamp(32px,5vw,48px) 0 0;background:#0b0b0c;color:#f3f2ea;border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow)}
.lab-dots{position:relative;height:clamp(220px,34vw,360px);overflow:hidden;display:grid;grid-template:repeat(10,1fr)/repeat(10,1fr);place-items:center;padding:10px}
.lab-dots i{width:8px;height:8px;border-radius:50%;background:rgba(243,242,234,.34)}
.lab-dots i.lit{width:16px;height:16px;background:#d2f783;box-shadow:0 0 0 6px rgba(210,247,131,.18),0 0 26px 6px rgba(210,247,131,.45)}
.lab-dots.sky{display:block;padding:0}
.lab-dots.sky i{position:absolute;margin:-4px;animation:lab-drift var(--d,9s) ease-in-out var(--t,0s) infinite alternate}
.lab-dots.sky i.lit{margin:-8px;animation:none}
@keyframes lab-drift{to{transform:translate(var(--x,10px),var(--y,-14px))}}
.lab-field figcaption{padding:12px 14px 14px;border-top:2px solid rgba(243,242,234,.18);font:700 clamp(12px,1.4vw,15px)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.lab-field figcaption b{color:#d2f783}

/* the tally and the door */
.lab-close{margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px)}
.lab-stats{flex:1 1 100%;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;color:#0b0b0c;border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow)}
@media (min-width:980px){.lab-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lab-stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;padding:16px 16px 14px;border:0 solid #0b0b0c;container-type:inline-size}
.lab-stats>div+div{border-left-width:2px}
@media (max-width:979px){.lab-stats>div:nth-child(3){border-left-width:0}.lab-stats>div:nth-child(n+3){border-top-width:2px}}
.lab-stats dt{font:700 11px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#55554f}
.lab-stats dd{margin:0;font-weight:900;font-stretch:118%;font-size:clamp(26px,3.4vw,40px);font-size:clamp(20px,17cqi,40px);line-height:1.05;white-space:nowrap}
.lab-cta{flex:1 1 220px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 22px;
  background:#d2f783;color:#0b0b0c;border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow);
  font:700 14px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;transition:transform .2s ease}
.lab-cta:hover{transform:translate(3px,3px)}
.lab-cta:focus-visible{outline:3px solid var(--ink);outline-offset:5px}

@media (prefers-reduced-motion:reduce){.lab-host,.lab-cta{transition:none}.lab-host:hover,.lab-cta:hover{transform:none}.lab-dots.sky i{animation:none}}

/* move fast and make things (#make-things), the interlude before p03. Under 620px the panorama's headlines would shrink
   to a caption, so the same file shows twice: the break half (0–760 of 1672px) over the make half (760–1672). */
.make .plate img{display:block;width:100%;height:auto}
.make .plate .mk-make{display:none}
@media (max-width:619px){
  .make .plate img{aspect-ratio:760/941;object-fit:cover;object-position:0% 50%}
  .make .plate .mk-make{display:block;aspect-ratio:912/941;object-position:100% 50%;border-top:2px solid var(--line)}
}

/* BUST. (js/lab.js): the word heats, the blast takes it (the canvas carries the fire and the cloud), and it comes back
   charred, cooling to its usual ink. The canvas is placed and sized by the script. */
.make{position:relative}
.make .bust-fx{position:absolute;left:0;z-index:3;pointer-events:none}
.make h2 em.bust-armed{cursor:pointer}
.make h2 em.bust-hot{animation:bust-hot 1.5s ease-in forwards}
.make h2 em.bust-gone{opacity:0;transition:opacity .08s}
.make h2 em.bust-back{animation:bust-back 1.8s ease-out}
.make h2.bust-quake{animation:bust-quake .6s cubic-bezier(.3,.7,.4,1)}
@keyframes bust-hot{
  0%{box-shadow:0 0 0 0 rgba(255,110,20,0)}
  45%{background:#5c1300;color:#ffcf8a}
  80%{background:#d63c00;color:#fff1c9;box-shadow:0 0 24px 6px rgba(255,120,20,.7)}
  100%{background:#ffb347;color:#fffbe8;box-shadow:0 0 44px 14px rgba(255,170,60,.9)}
}
@keyframes bust-back{0%{opacity:0;background:#1c0d06;color:#ff8a3c}35%{opacity:1;background:#1c0d06;color:#ff8a3c}}
@keyframes bust-quake{0%,100%{transform:none}15%{transform:translate(-5px,3px)}30%{transform:translate(5px,-3px)}
  45%{transform:translate(-3px,2px)}60%{transform:translate(2px,-1px)}80%{transform:translate(-1px,0)}}