/* ============================================================================================
   SPACE LABS · lichte proef op de gedeelde basis (ronde 1, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Teksten staan in labs.html en zijn letterlijk die van preview-cinematic/labs.html.
   ER IS GEEN LICHT BEELD: de plaat is een getekend schema. Compositie "De nis op de as" (compositievoorstel §11), zonder pauw.
   Plaatfracties van het schema:
     L liggend 16:9   lucht 0-29 % (kop); nis met waterval x 38-62 %, y 30-50 %; lege sokkel x 43-57 %, y 50-66 %;
                      jade x 25-31 %, pyriet x 69-76 % op de poelrand (y 54-66 %); poel vanaf 66 % tot de onderrand;
                      de veer drijft op x 42-60 %, y 70-76 %.
     S staand 9:16    lucht 0-27 %; nis x 36-84 %, y 28-50 %; sokkel x 38-82 %, y 50-66 %; poel vanaf 66 %; veer y 71-76 %.
   De plaat hangt aan het podium onder de kop: de lijn tussen lucht en nis ligt altijd direct onder de laatste kopregel.
   Lagen van de pagina (niet van het beeld): de lichtprojectie boven de sokkel (stilstaand, dunne lijnen), de naam op het
   sokkelfront, en één glasvlak op het water van de poel met de uitgelichte richting.
   ============================================================================================ */

body[data-page="labs"]{--lijn:max(20px,calc(var(--edge) - 12px))}
body[data-page="labs"] .site-footer{padding-inline:var(--lijn)}
body[data-page="labs"] .site-footer::before{left:var(--lijn);right:var(--lijn)}

.lab{background:#f7f3ec;color:var(--nx-inkt)}
.lab .kw{font:inherit;color:inherit}
.lab-punt{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--nx-petrol);box-shadow:0 0 0 3px rgba(10,74,70,.18)}
.eyebrow--midden{justify-content:center}
.eyebrow--midden::before{content:"";flex:0 0 auto;width:56px;height:1px;background:var(--nx-goud)}

/* ---------------------------------------------------------------- hero */
.lab-hero{position:relative;isolation:isolate;overflow:clip;background:#dbe7ee;--top:.29}
.lab-kop{position:relative;z-index:1;padding:calc(var(--header-h) + clamp(18px,3.4svh,44px)) var(--lijn) 0;text-align:center}
.lab-kop .eyebrow{margin:0 0 10px;font-size:.8125rem;letter-spacing:.32em;color:var(--nx-inkt-diep)}
.lab-kop .eyebrow::before,.lab-kop .eyebrow::after{width:48px;background:#b18243}
.lab-kop h1{font:400 clamp(2.75rem,6.2vw,5.5rem)/1 var(--serif);letter-spacing:-.01em;color:var(--nx-inkt-diep)}
.lab-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;margin-top:12px}
.lab-lead{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.4;color:var(--nx-inkt)}
.lab-status{display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:2px 14px 2px 12px;border-radius:999px;font:600 .8125rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nx-inkt-diep);background:rgba(255,253,248,.9);box-shadow:inset 0 0 0 1px rgba(11,44,41,.3)}

/* het podium: de plaat vanaf de lijn onder de lucht tot haar onderrand; alles daarboven ligt achter de kop */
.lab-podium{position:relative;margin-top:8px;--kaart-h:7.5rem;
  height:max(calc(var(--ph) * (1 - var(--top))),calc(var(--ph) * (var(--kaart-t) - var(--top)) + var(--kaart-h)))}   /* het glasvlak past altijd: is het hoger dan de rest van de plaat, dan loopt de poel door */
.lab-scene{position:absolute;left:0;right:0;top:calc(var(--ph) * var(--top) * -1);height:var(--ph);z-index:0;pointer-events:none}
.lab-scene picture{display:block;width:100%;height:100%}
.lab-plaat{display:block;width:100%;height:100%;max-width:none}
.lab-scene::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:200vh;background:#a9d9d6}     /* de poel loopt door als het glasvlak onder de plaat uit komt */
.lab-schema{position:absolute;right:max(12px,var(--lijn));top:calc(var(--ph) * var(--schema-t,.42));z-index:2;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.92);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.lab-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:860px){.lab-schema__lang{display:none}}
/* de lichtprojectie: luchtig en doorschijnend, boven de sokkel, voor de waterval; staat stil */
.lab-holo{position:absolute;left:50%;top:calc(var(--ph) * var(--holo-t));height:calc(var(--ph) * var(--holo-h));width:auto;aspect-ratio:200 / 240;transform:translateX(-50%);
  filter:drop-shadow(0 0 6px rgba(127,227,238,.55));mix-blend-mode:normal}

.lab-uitgelicht{position:absolute;inset:0;z-index:1}
.lab-sokkel{position:absolute;left:var(--sok-l);right:var(--sok-l);top:calc(var(--ph) * (var(--sok-t) - var(--top)));height:calc(var(--ph) * var(--sok-h));display:grid;place-items:center;text-align:center}
.lab-sokkel h2{font:400 clamp(1.25rem,2.5vw,2.25rem)/1.05 var(--serif);letter-spacing:.01em;color:var(--nx-navy)}
.lab-water{--g-r:22px;position:absolute;left:50%;top:calc(var(--ph) * (var(--kaart-t) - var(--top)));transform:translateX(-50%);width:min(100% - 2 * var(--lijn),40rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 28px;padding:14px 24px}
.lab-flag{grid-column:1;font:600 .75rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-inkt-diep)}
.lab-feature-sum{grid-column:1;font:400 clamp(1.125rem,1.5vw,1.375rem)/1.25 var(--serif);color:var(--nx-inkt-diep)}
.lab-water .lab-actie{grid-column:2;grid-row:1 / span 2}
.lab-actie{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:0}
.lab-actie .tekstlink{color:var(--nx-inkt-diep)}

@media (min-width:1101px),(orientation:landscape){
  .lab-hero{--ph:56.25vw;--top:.29;--holo-t:.31;--holo-h:.2;--sok-l:43%;--sok-t:.5;--sok-h:.16;--kaart-t:.8}
  .lab-holo{top:calc(var(--ph) * .305)}
}
@media (orientation:landscape) and (max-width:860px),(orientation:landscape) and (max-height:520px){
  .lab-kop{padding-top:calc(var(--header-h) + 8px)}
  .lab-kop h1{font-size:2.25rem}
  .lab-kop .eyebrow{margin-bottom:4px;font-size:.6875rem}
  .lab-onder{margin-top:4px}
  .lab-lead{font-size:.9375rem}
  .lab-water{padding:8px 16px}
}
@media (max-width:1100px) and (orientation:portrait){
  .lab-hero{--ph:calc(100vw * 16 / 9);--top:.27;--holo-t:.31;--holo-h:.19;--sok-l:39%;--sok-t:.505;--sok-h:.155;--kaart-t:.79}
  .lab-kop{padding-top:calc(var(--header-h) + 20px)}
  .lab-holo{top:calc(var(--ph) * .31)}
  .lab-podium{--kaart-h:12rem}
  .lab-schema{--schema-t:.675}
  .lab-water{grid-template-columns:minmax(0,1fr);padding:12px 18px}
  .lab-water .lab-actie{grid-column:1;grid-row:auto}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){.lab-kop{padding-top:calc(var(--header-h) + 40px)}}
.lab-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,243,236,0) 0,rgba(247,243,236,.5) 37px,#f7f3ec 64px)}
.lab-hero{padding-bottom:40px}

/* ---------------------------------------------------------------- de acht richtingen op het marmer */
.lab .nx-vloer{--nx-rand:var(--lijn)}
.lab .nx-sectie{padding-top:clamp(56px,6.5vw,112px)}
.lab-index{text-align:center}
.lab-index .eyebrow{margin-bottom:14px}
.lab-statusregel{display:inline-flex;align-items:flex-start;gap:12px;max-width:44em;margin-top:16px;text-align:left;color:var(--nx-tekst)}
.lab-statusregel .lab-punt{margin-top:.55em}
.lab-rijen{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);text-align:left;border-top:1px solid var(--nx-goud-lijn)}
.lab-rij{border-bottom:1px solid var(--nx-goud-zacht);scroll-margin-top:calc(var(--header-h) + 24px)}
.lab-rij__knop{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:2px;width:100%;min-height:76px;margin:0;padding:12px 4px;border:0;border-radius:8px;background:none;color:var(--nx-navy);text-align:left;font:inherit;cursor:pointer;-webkit-user-select:text;user-select:text}
.lab-rij__knop .nr{grid-row:1 / span 2;font:400 1.375rem/1 var(--serif);color:var(--nx-goud-tekst)}
.lab-rij__knop .nm{font:400 clamp(1.3125rem,1.7vw,1.5625rem)/1.15 var(--serif);color:var(--nx-navy)}
.lab-rij__knop .sm{grid-column:2;font:400 .96875rem/1.4 var(--sans);color:var(--nx-tekst)}
.lab-rij__knop .pijl{grid-column:3;grid-row:1 / span 2;width:22px;height:22px;color:var(--nx-petrol);transition:transform var(--t-hover) var(--ease)}
.lab-rij__knop:active{background:rgba(10,74,70,.08)}
@media (hover:hover) and (pointer:fine){
  .lab-rij__knop:hover{background:rgba(255,253,248,.7)}
  .lab-rij__knop:hover .pijl{transform:rotate(90deg)}
  .lab-rij__knop:active{background:rgba(10,74,70,.08)}
}
.lab-rij__meer{display:grid;gap:2px;padding:0 4px 14px 2.9rem;color:var(--nx-tekst);font-size:.96875rem}
.lab-rij__meer .tekstlink{color:var(--nx-navy)}
/* met JavaScript en een werkende dialoog staan "voor wie" en de e-mailactie in de dialoog; anders direct bij elke richting */
html.lab-js:not(.labs-geen-dialoog) .lab-rij__meer{display:none}
html:not(.lab-js) .lab-rij__knop,html.labs-geen-dialoog .lab-rij__knop{cursor:default;min-height:60px}
html:not(.lab-js) .lab-rij__knop .pijl,html.labs-geen-dialoog .lab-rij__knop .pijl{display:none}
.lab-note{max-width:46em;margin:clamp(24px,3vw,36px) auto 0;color:var(--nx-tekst)}
.lab-index-noot{margin-top:10px}
.lab .nx-vloer .cta-note{color:var(--nx-tekst)}
.lab .lab-slot{padding-bottom:clamp(72px,8vw,128px)}
.lab-slot .section-head p:not(.eyebrow){max-width:40em;margin-top:16px;color:var(--nx-tekst);overflow-wrap:anywhere}
.lab-slot .actions{margin-top:24px}
@media (max-width:860px){.lab-rijen{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- dialoog: een dekkend licht vlak, geen glas achter tekst */
.lab-dialoog{width:min(100vw - 32px,34rem);max-height:calc(100dvh - 32px);margin:auto;padding:28px 28px 24px;border:0;border-radius:22px;color:var(--nx-tekst);background:#fffdf8;
  box-shadow:inset 0 0 0 1px rgba(176,138,69,.45),0 30px 60px -30px rgba(11,44,41,.6);overflow:auto}
.lab-dialoog::backdrop{background:rgba(19,29,51,.38)}
.lg-dialoog__sluit{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;background:#fffdf8;color:var(--nx-inkt);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(11,44,41,.34)}
.lg-dialoog__sluit svg{width:20px;height:20px}
.lg-dialoog__sluit:active{background:rgba(206,228,230,.92)}
@media (hover:hover) and (pointer:fine){.lg-dialoog__sluit:hover{box-shadow:inset 0 0 0 1px rgba(11,44,41,.7)}.lg-dialoog__sluit:active{background:rgba(206,228,230,.92)}}
.lab-dialoog__status{display:inline-flex;align-items:center;gap:9px;margin:0 56px 10px 0;font:600 .75rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--nx-navy)}
.lab-dialoog h2{font:400 2rem/1.08 var(--serif);color:var(--nx-navy);margin-right:48px}
.lab-dialoog__sum{margin-top:8px;font:400 1.1875rem/1.3 var(--serif);color:var(--nx-navy)}
.lab-dialoog__meer{display:grid;gap:6px;margin-top:14px}
.lab-dialoog__meer .tekstlink{color:var(--nx-navy)}
.lab-dialoog__noot{margin-top:14px;padding-top:12px;border-top:1px solid var(--nx-goud-zacht);font-size:.9375rem;color:var(--nx-tekst)}

/* ============================================================================================
   RONDE 2 (05-10-2026). Alleen stijl; geen woord, link of volgorde gewijzigd.
   ============================================================================================ */
/* 1. Toetsenbord. De basis houdt boven al ruimte vrij voor de vaste kopbalk (scroll-padding-top). Zelfde oplossing als
      Website Build ronde 2: 28 px vrij ONDER een element dat de focus krijgt, zodat het niet op de schermrand staat. */
html{scroll-padding-bottom:28px}
/* 2. Het glasvlak staat in de tekststroom in plaats van op een vaste, gereserveerde hoogte: bij een grote letter
      (200 %) groeit de held mee en wordt het vlak niet meer afgesneden. De plek op de plaat is dezelfde (--kaart-t). */
.lab-podium{height:auto;min-height:calc(var(--ph) * (1 - var(--top)))}
.lab-uitgelicht{position:relative;inset:auto;min-height:calc(var(--ph) * (1 - var(--top)));
  padding:calc(var(--ph) * (var(--kaart-t) - var(--top))) 0 20px}
.lab-water{position:relative;left:auto;top:auto;transform:none;margin-inline:auto}
/* 3. Liggend 861-1100 px breed (1024x768): de regel en de status onder elkaar, binnen de tekstzone van het
      compositievoorstel (32-68 %); naast elkaar raakte de regel het vak van de banyankruin. */
@media (orientation:landscape) and (min-width:861px) and (max-width:1100px) and (min-height:521px){.lab-onder{flex-direction:column;gap:6px}}

/* 4. Grote letter (200 %) en zoom: een lang woord mag afbreken in plaats van de pagina breder te duwen (gemeten: op 320 px
      breed met letter 32 px liep een regel 45 px buiten beeld en werd de hele pagina, met de kopbalk, breder). */
.lab,body[data-page="labs"] .site-footer{overflow-wrap:anywhere}
/* telefoon met letter 200 % of zoom 200 % (smaller dan 18,75 letterbreedtes; bij de gewone letter is dat smaller dan 300 px):
   de sierlijnen naast de bovenregel vervallen en de status staat minder gespatieerd, zodat de woorden heel blijven */
@media (max-width:18.74em){
  .lab-kop .eyebrow::before,.lab-kop .eyebrow::after{display:none}
  .lab-kop .eyebrow{letter-spacing:.16em}
  .lab-status{letter-spacing:.02em;padding-inline:10px}
}

@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.lab-holo{filter:none}}
@media (forced-colors:active){
  .lab-dialoog,.lg-dialoog__sluit,.lab-status{border:1px solid CanvasText}
  .lab-punt{background:CanvasText;forced-color-adjust:none}
  .lab-scene::after,.lab-hero::after{forced-color-adjust:none}
}