/* DRIPLAB atelier: full-bleed scenes, physical cutouts, and a clear route to each lab. */
.labs-overview { --lo-header:72px; --lo-nav:98px; background:var(--paper); }
.labs-overview main { overflow:clip; }
.lo-skip { position:fixed; z-index:120; left:16px; top:10px; padding:12px 20px; background:var(--zon); color:var(--ink); transform:translateY(-150%); }
.lo-skip:focus { transform:none; }
.lo-hero { position:relative; min-height:min(850px,100svh); background:#10100f; color:var(--paper); display:grid; align-items:center; isolation:isolate; padding:140px 0 112px; }
.lo-hero__image { position:absolute; inset:0; z-index:-2; }
.lo-hero__image img { width:100%; height:100%; object-fit:cover; object-position:70% center; }
.lo-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,5,5,.72),rgba(5,5,5,.15) 48%,transparent 70%); }
.lo-hero__copy h1 { font-size:clamp(68px,7.8vw,124px); text-transform:uppercase; font-weight:900; letter-spacing:-.065em; line-height:.91; margin:24px 0 30px; max-width:7ch; }
.lo-hero__copy h1 span { color:var(--zon); }
.lo-hero__copy > p { max-width:35ch; font-size:clamp(16px,1.3vw,19px); color:rgba(255,255,255,.76); line-height:1.7; }
.lo-hero__copy .eyebrow { color:#c8c4c0; }
.lo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px 26px; margin-top:28px; }
.lo-button { background:var(--ink); color:var(--paper); gap:20px; font-weight:750; min-height:54px; padding:15px 23px; box-shadow:none; }
.lo-button svg,.lo-link svg { width:20px; height:20px; flex:none; transition:transform .25s ease; }
.lo-button:hover svg,.lo-link:hover svg { transform:translateX(4px); }
.lo-button:hover { background:var(--ink-3); color:var(--paper); }
.lo-button--yellow { background:var(--zon); color:var(--ink); }
.lo-button--yellow:hover { background:#ffd55b; color:var(--ink); }
.lo-link { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:underline; text-underline-offset:5px; font-size:14px; font-weight:700; }
.lo-hero .lo-link { max-width:180px; font-size:13px; }
.lo-hero__foot { position:absolute; left:0; right:0; bottom:26px; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.64); font-size:10px; letter-spacing:.18em; font-weight:700; }
.lo-hero__foot span:last-child { display:flex; align-items:center; gap:18px; }
.lo-hero__foot svg { width:23px; height:23px; transform:rotate(90deg); }
.lo-lab-nav { position:sticky; top:var(--lo-header); z-index:60; background:rgba(250,250,248,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.lo-lab-nav > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.lo-lab-nav a { display:flex; justify-content:center; align-items:center; gap:12px; padding:14px 8px 12px; min-height:98px; border-bottom:3px solid transparent; color:var(--ink); text-decoration:none; font-size:14px; font-weight:750; transition:background .2s,border-color .2s; }
.lo-lab-nav a:hover,.lo-lab-nav a[aria-current="location"] { border-bottom-color:var(--magenta); background:rgba(139,63,209,.06); }
.lo-lab-nav img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(1px 4px 4px #0002); transition:transform .3s; }
.lo-lab-nav a:hover img { transform:translateY(-4px) rotate(-5deg); }
.lo-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:60px; padding-block:80px 66px; scroll-margin-top:calc(var(--lo-header) + var(--lo-nav) + 20px); }
.lo-intro h2,.lo-practical h2 { font-size:clamp(32px,3.4vw,52px); letter-spacing:-.05em; line-height:1.05; font-weight:800; margin-top:18px; }
.lo-intro > p { font-size:17px; line-height:1.8; max-width:44ch; color:#625e60; }
.lo-lab { position:relative; padding-block:85px 96px; scroll-margin-top:calc(var(--lo-header) + var(--lo-nav) + 10px); background:var(--lo-panel); color:var(--lo-ink,var(--ink)); }
.lo-lab--slijm { --lo-panel:#f5edf0; --lo-accent:#ac1658; }
.lo-lab--football { --lo-panel:#174d49; --lo-accent:#f8da77; --lo-ink:#fff8e9; }
.lo-lab--canvas { --lo-panel:#faf6eb; --lo-accent:#7730b2; }
.lo-lab--bear { --lo-panel:#eae1f4; --lo-accent:#713dac; }
.lo-lab--garden { --lo-panel:#e8eee3; --lo-accent:#216348; }
.lo-lab__grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:clamp(60px,8vw,136px); }
.lo-lab:nth-child(even) .lo-lab__visual { order:2; }
.lo-lab__visual { position:relative; padding:16px 16px 96px 0; min-width:0; }
.lo-lab__photo { display:block; aspect-ratio:1.19; overflow:hidden; border:8px solid rgba(255,255,255,.9); border-radius:5px; transform:rotate(-3deg); box-shadow:4px 18px 24px rgba(28,14,30,.16); }
.lo-lab:nth-child(even) .lo-lab__photo { transform:rotate(3deg); }
.lo-lab__photo img { width:100%; height:100%; object-fit:cover; object-position:75% center; transition:transform .7s ease; }
.lo-lab__photo:hover img { transform:scale(1.05); }
.lo-lab__number { position:absolute; top:-30px; left:-22px; z-index:2; color:var(--lo-accent); font-size:clamp(72px,8vw,112px); font-weight:900; letter-spacing:-.09em; line-height:1; text-shadow:3px 3px var(--lo-panel); }
.lo-lab__result { position:absolute; right:-44px; bottom:10px; width:47%; height:62%; pointer-events:none; transform:rotate(9deg); }
.lo-lab__result img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(5px 11px 6px #1f102d35) drop-shadow(12px 24px 16px #1f102d33); }
.lo-lab--bear .lo-lab__result { width:65%; right:-62px; height:78%; bottom:-24px; transform:rotate(7deg); }
.lo-lab--football .lo-lab__result { width:52%; right:-32px; bottom:0; }
.lo-lab__note { position:absolute; bottom:24px; left:0; display:flex; align-items:center; gap:20px; font-size:13px; font-weight:750; transform:rotate(-5deg); }
.lo-lab__note svg { width:50px; height:30px; transform:rotate(-15deg); }
.lo-lab__copy { position:relative; min-width:0; }
.lo-doodle { position:absolute; right:0; top:-42px; width:74px; height:74px; object-fit:contain; pointer-events:none; transform:rotate(9deg); }
.lo-label { font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lo-accent); }
.lo-lab h2 { font-size:clamp(45px,4.8vw,76px); font-weight:900; letter-spacing:-.06em; line-height:1.05; margin:14px 0 20px; }
.lo-lab h2 span { font-weight:400; }
.lo-lab h3 { font-size:19px; letter-spacing:-.03em; line-height:1.35; margin-bottom:12px; }
.lo-lab__copy > p { font-size:16px; line-height:1.8; opacity:.76; }
.lo-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; padding-block:18px; border-block:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.lo-facts dt { font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.lo-facts dd { font-size:15px; font-weight:750; margin:5px 0 0; }
.lo-takehome { display:flex; gap:13px; margin-block:22px 26px; }
.lo-takehome > svg { width:25px; height:25px; flex:none; color:var(--lo-accent); }
.lo-takehome strong { font-size:13px; }
.lo-takehome p { font-size:13px; line-height:1.6; opacity:.75; margin-top:4px; }
.lo-lab--football .lo-button { background:#fff8e9; color:#174d49; }
.lo-combine { background:var(--ink); color:var(--paper); padding-block:96px; position:relative; }
.lo-combine__grid { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:50px; }
.lo-combine h2 { font-size:clamp(44px,4.8vw,76px); font-weight:900; line-height:1; letter-spacing:-.05em; margin-block:20px 25px; }
.lo-combine h2 span { color:var(--zon); }
.lo-combine p { max-width:45ch; font-size:16px; color:#b7b4b8; line-height:1.8; }
.lo-combine .eyebrow,.lo-finale .eyebrow { color:#b7b4b8; }
.lo-combine__art { margin:0; transform:rotate(5deg); }
.lo-combine__art img { width:min(100%,322px); height:auto; max-height:430px; aspect-ratio:3/4; object-fit:contain; object-position:50% 48%; margin-inline:auto; filter:drop-shadow(8px 20px 20px #0008); }
.lo-combine__art figcaption { color:#c3bdc7; font-size:12px; text-align:center; margin-top:18px; }
.lo-practical { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; padding-block:96px; }
.lo-practical__intro > p { color:#696267; max-width:28ch; line-height:1.8; margin-block:20px; }
.lo-faq details { border-top:1px solid var(--line); }
.lo-faq details:last-of-type { border-bottom:1px solid var(--line); }
.lo-faq summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; padding:24px 0; font-size:17px; font-weight:750; }
.lo-faq summary::-webkit-details-marker { display:none; }
.lo-faq summary span { font-size:25px; line-height:1; transition:transform .25s; }
.lo-faq details[open] summary span { transform:rotate(45deg); }
.lo-faq details p { line-height:1.8; color:#696267; padding:0 30px 26px 0; font-size:15px; }
.lo-faq details a { color:var(--ink); text-underline-offset:3px; }
.lo-faq > .lo-link { margin-top:22px; }
.lo-finale { position:relative; background:#19111e; color:var(--paper); text-align:center; overflow:hidden; padding:90px 0 0; }
.lo-finale h2 { margin-top:20px; font-size:clamp(46px,5.5vw,88px); letter-spacing:-.055em; font-weight:900; line-height:1; text-transform:uppercase; }
.lo-finale p { color:#c0bac4; margin-top:24px; font-size:17px; }
.lo-finale .lo-actions { justify-content:center; }
.lo-finale__copy { position:relative; z-index:2; }
.lo-finale__prompt { position:absolute; z-index:2; left:0; top:350px; width:clamp(240px,28vw,360px); pointer-events:none; }
.lo-finale__prompt-label { display:block; width:100%; height:auto; object-fit:contain; }
.lo-finale__doodle { position:absolute; left:90px; top:calc(100% - 4px); width:92px; height:auto; transform:rotate(-4deg); }
.lo-finale__objects { display:flex; justify-content:center; align-items:end; gap:clamp(5px,2vw,32px); max-width:940px; margin:50px auto 24px; padding-inline:25px; }
.lo-finale__object { --object-angle:-9deg; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; width:17%; height:218px; padding:8px 4px 28px; color:var(--paper); text-decoration:none; border-radius:16px; }
.lo-finale__object:nth-child(even) { --object-angle:8deg; }
.lo-finale__object:nth-child(4) { width:25%; height:278px; margin-inline:-30px; }
.lo-finale__object img { width:100%; height:calc(100% - 30px); object-fit:contain; filter:drop-shadow(8px 10px 14px #0007);
  transform:rotate(var(--object-angle)); transition:transform .25s ease; }
.lo-finale__object span { position:absolute; left:50%; bottom:6px; translate:-50% 0; width:max-content; max-width:calc(100% - 8px); padding:6px 9px; background:var(--paper); color:var(--ink); font-size:11px; font-weight:850; letter-spacing:.055em; line-height:1; text-transform:uppercase; box-shadow:0 7px 18px #0006; transition:translate .25s ease, background .25s ease, color .25s ease; }
.lo-finale__object:focus-visible { z-index:1; outline:2px solid var(--zon); outline-offset:4px; border-radius:12px; }
.lo-finale__object:focus-visible img { transform:translateY(-18px) rotate(var(--object-angle)); }
.lo-finale__object:focus-visible span { translate:-50% -8px; background:var(--zon); color:var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .lo-finale__object:hover { z-index:1; }
  .lo-finale__object:hover img { transform:translateY(-18px) rotate(var(--object-angle)); }
  .lo-finale__object:hover span { translate:-50% -8px; background:var(--zon); color:var(--ink); }
}
.labs-overview [data-lo-reveal].lo-waiting { opacity:0; transform:translateY(24px); }
.labs-overview [data-lo-reveal] { transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
@keyframes lo-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.lo-hero__copy > * { animation:lo-arrive .8s both; }
.lo-hero__copy h1 { animation-delay:.08s; }
.lo-hero__copy > p { animation-delay:.16s; }
.lo-hero__copy .lo-actions { animation-delay:.24s; }
@media (max-width:1100px) {
  .lo-hero { min-height:720px; }
  .lo-hero__copy h1 { font-size:80px; }
  .lo-hero__image img { object-position:63% center; }
  .lo-lab__grid { gap:58px; }
  .lo-lab__result { right:-28px; }
  .lo-lab h2 { font-size:48px; }
  .lo-doodle { width:58px; height:58px; }
  .lo-practical { gap:50px; }
}
@media (max-width:810px) {
  .labs-overview { --lo-header:62px; --lo-nav:84px; }
  .lo-hero { display:block; min-height:0; padding:112px 0 0; }
  .lo-hero::after { display:none; }
  .lo-hero__copy { position:relative; z-index:1; }
  .lo-hero__copy h1 { font-size:clamp(62px,12vw,92px); max-width:none; margin:18px 0 22px; }
  .lo-hero__copy > p { font-size:16px; max-width:35ch; }
  .lo-hero__image { position:relative; display:block; width:100%; flex:none; height:clamp(285px,64vw,430px); margin-top:-24px; z-index:0; overflow:hidden; }
  .lo-hero__image img { width:auto; min-width:100%; height:100%; max-width:none; object-fit:cover; position:absolute; right:0; bottom:0; }
  .lo-hero { display:flex; flex-direction:column; }
  .lo-hero__copy { order:-1; }
  .lo-hero__image::after { content:""; position:absolute; inset:0; background:linear-gradient(#10100f,transparent 22%,transparent 85%,#10100f); }
  .lo-hero .lo-actions { gap:16px; }
  .lo-hero .lo-link { font-size:12px; max-width:none; min-height:36px; }
  .lo-hero__foot { position:static; padding-block:16px 22px; font-size:8px; gap:15px; }
  .lo-hero__foot span:last-child { letter-spacing:.04em; }
  .lo-lab-nav .wrap { padding-inline:10px; }
  .lo-lab-nav a { flex-direction:column; gap:3px; min-height:84px; padding:8px 2px 6px; font-size:10px; white-space:nowrap; }
  .lo-lab-nav img { width:42px; height:42px; }
  .lo-intro { grid-template-columns:1fr; gap:24px; padding-block:50px; }
  .lo-intro > p { font-size:15px; }
  .lo-lab { padding-block:50px 56px; }
  .lo-lab__grid { grid-template-columns:minmax(0,1fr); gap:30px; }
  .lo-lab:nth-child(even) .lo-lab__visual { order:0; }
  .lo-lab__visual { margin-inline:10px 16px; padding-bottom:80px; }
  .lo-lab__photo { aspect-ratio:1.35; border-width:6px; }
  .lo-lab__number { top:-18px; left:-14px; font-size:74px; }
  .lo-lab__result { right:-26px; width:48%; height:66%; bottom:0; }
  .lo-lab--bear .lo-lab__result { right:-38px; height:85%; width:66%; }
  .lo-lab--football .lo-lab__result { right:-24px; }
  .lo-lab__note { bottom:16px; font-size:11px; gap:14px; }
  .lo-lab__note svg { width:35px; }
  .lo-doodle { top:-15px; right:3px; width:54px; height:54px; }
  .lo-lab h2 { font-size:clamp(44px,9vw,64px); margin-bottom:18px; }
  .lo-lab h3 { font-size:18px; }
  .lo-lab__copy > p { font-size:15px; }
  .lo-combine { padding-block:58px; }
  .lo-combine__grid { grid-template-columns:minmax(0,1fr); gap:42px; }
  .lo-combine h2 { font-size:clamp(43px,8.8vw,64px); }
  .lo-combine__art { padding-inline:10px; }
  .lo-practical { grid-template-columns:minmax(0,1fr); padding-block:58px; gap:32px; }
  .lo-practical__intro > p { max-width:38ch; }
  .lo-faq summary { font-size:15px; padding-block:22px; }
  .lo-finale { padding-top:58px; }
  .lo-finale h2 { font-size:clamp(40px,8.8vw,62px); }
  .lo-finale__prompt { position:relative; left:auto; top:auto; width:min(300px,84vw); margin:24px auto 0; }
  .lo-finale__doodle { left:12px; top:calc(100% - 2px); width:82px; }
  .lo-finale__objects { margin-top:86px; margin-bottom:18px; padding-inline:12px; gap:5px; }
  .lo-finale__object { height:150px; padding-inline:0; padding-bottom:28px; }
  .lo-finale__object:nth-child(4) { height:185px; margin-inline:-14px; }
  .lo-finale__object span { max-width:none; padding:5px 6px; font-size:8px; letter-spacing:.025em; }
}
@media (prefers-reduced-motion:reduce) {
  .labs-overview [data-lo-reveal],.lo-hero__copy > * { animation:none; transition:none; opacity:1; transform:none; }
  .labs-overview [data-lo-reveal].lo-waiting { opacity:1; transform:none; }
  .lo-lab__photo img,.lo-lab-nav img,.lo-button svg,.lo-link svg,.lo-finale__object img { transition:none; }
}