/* labb.css — /labb (de kop met de hond en de inhoudsopgave, #294) en de journalen /labb/NN (guide §12.2), fase 3 stap 3.
   De kast zelf staat in /assets/kast.css (gedeeld met de homepage); de ladder-nummers (.steps) en de afsluiter in /assets/kern.css. */
:root{--labb-klein:url(/assets/media/labb/m2-klein.svg)}

/* ---------- /labb: hondbeeld a4 op nacht (#267). Desktop 16:9, de hond rechts en de tekst links in het donker; smal 4:5 met de tekst eronder ---------- */
.labb-kop{position:relative;display:flex;align-items:flex-end;min-height:min(100svh,calc(100vw * 1071 / 1920));padding:calc(72px + clamp(3rem,8vh,5rem)) 0 clamp(2.5rem,7vh,5rem);overflow:clip}
.labb-kop > .wrap{width:100%}  /* in de flex-kop kromp de wrap tot de tekst en stond hij in het midden, over de hond */
.labb-kop__hond{display:block;position:absolute;inset:0}  /* block: anders geldt de 4:5 op mobiel pas als het beeld er is (CLS, en een late LCP) */
.labb-kop__hond img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 35%}
.labb-kop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,16,.92) 0%,rgba(18,17,16,.6) 32%,rgba(18,17,16,0) 56%);pointer-events:none}
.labb-kop__tekst{position:relative;z-index:1;max-width:min(34rem,44vw)}
.labb-kop .kruimel{color:color-mix(in srgb,var(--c-fg) 70%,transparent)}
.labb-kop__h1{display:flex;flex-direction:column;gap:.9rem}
.labb-kop__h1 .labb__w{font-size:clamp(4.5rem,11vw,10rem)}
.labb-kop__zin{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.labb-kop__sub{margin-top:1.25rem;font-size:var(--fs-lead,1.125rem);line-height:1.5;color:color-mix(in srgb,var(--c-fg) 82%,transparent);max-width:30em}
@media (max-width:700px){
  .labb-kop{display:block;min-height:0;padding:0 0 2.75rem}
  .labb-kop__hond{position:relative;inset:auto;aspect-ratio:4/5;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .labb-kop::after{display:none}
  .labb-kop__tekst{max-width:none;margin-top:-2.5rem}
}

/* de kast op /labb: dezelfde kast als op de homepage; de kop is hier "Eerder werk." (LABB staat al in de h1) */
.labb-kast .work__head .h2{margin:0}

/* ---------- de inhoudsopgave: elk boek als gewone link (#294) ---------- */
.inhoud{padding:0 0 var(--section)}
.inhoud__lijst{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;border-bottom:1px solid var(--c-line)}
.inhoud__lijst li{border-top:1px solid var(--c-line)}
/* #299: elke rij is een eigen grid; met een vaste laatste kolom zijn de fr-kolommen in elke rij even breed en staat de derde kolom recht */
.inhoud__lijst a{display:grid;grid-template-columns:6.5rem minmax(0,1fr) minmax(0,1.3fr) 14rem;gap:.4rem 1.5rem;align-items:baseline;padding:1.2rem 0;text-decoration:none}
.inhoud__nr{font-size:var(--fs-meta);color:var(--c-fg-2);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.inhoud__naam{font-size:1.3rem;letter-spacing:-.015em;line-height:1.25}
.inhoud__kind{color:var(--c-fg-2)}
.inhoud__naar{font-size:var(--fs-meta);white-space:nowrap;text-align:right}
.inhoud__lijst a:hover .inhoud__naam,.inhoud__lijst a:focus-visible .inhoud__naam{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (max-width:760px){
  .inhoud__lijst a{grid-template-columns:4.75rem minmax(0,1fr)}
  .inhoud__kind,.inhoud__naar{grid-column:2;text-align:left}
}

/* ---------- het journaal (/labb/NN): het opengeslagen boek op paginagrootte. "plekk lab" met het merkje en "LABB report" zoals in het boek
   (#240), het merkteken van het project in zijn eigen inkt (#251), dan de opbouw van guide §12.2 ---------- */
.journaal__lab{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-bottom:clamp(1.25rem,3vh,2rem);font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em}
.journaal__hond{width:1.75em;aspect-ratio:1;background:currentColor;-webkit-mask:var(--labb-klein) center/contain no-repeat;mask:var(--labb-klein) center/contain no-repeat}
.journaal__rapport{font-weight:400;color:var(--c-fg-2)}
.journaal__rapport::before{content:"·";margin-right:.6rem}
.journaal__h1{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start}
.journaal__teken{width:clamp(44px,5vw,72px);aspect-ratio:1;margin-bottom:1.1rem;background:var(--top,none) left center/contain no-repeat,var(--p,var(--c-fg));
  -webkit-mask:var(--merk) left center/contain no-repeat;mask:var(--merk) left center/contain no-repeat}
.journaal__naam{font-weight:800;font-variation-settings:'wdth' 125;font-stretch:125%;letter-spacing:-.04em;line-height:.95;font-size:clamp(3rem,9vw,7.5rem);overflow-wrap:anywhere}
.journaal__wat{margin-top:1rem;font-size:clamp(1.25rem,2.3vw,1.85rem);font-weight:300;letter-spacing:-.02em;line-height:1.25;max-width:24em}
.journaal__kop .hero__body{grid-column:1 / -1;margin-top:clamp(1.5rem,4vh,2.5rem)}
.journaal__kop .hero__sub{max-width:38em}
.journaal__feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1.1rem 1.75rem;margin:clamp(1.75rem,4vh,2.5rem) 0 0;padding-top:1.25rem;border-top:1px solid var(--c-line)}
.journaal__feiten dt{font-size:var(--fs-meta);color:var(--c-fg-2)}
.journaal__feiten dd{margin:.3rem 0 0}
.journaal__feiten a{text-underline-offset:.2em}
.journaal__beeld .kader{padding:clamp(.6rem,1.6vw,1.25rem)}
.journaal__beeld img{display:block;width:100%;height:auto;border-radius:6px}
.journaal__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}
.journaal__grid > .h2{grid-column:1 / span 4}
.journaal__tekst{grid-column:6 / -1;max-width:40em}
.journaal__tekst > p + p{margin-top:1rem}
.journaal__keuzes{margin-top:0}
.journaal__h3{margin-top:2.25rem;font-size:var(--fs-meta);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-fg-2)}
.journaal__h3 + p,.journaal__lijst{margin-top:.75rem}
.journaal__lijst{padding-left:1.1rem}
.journaal__lijst li + li{margin-top:.45rem}
.journaal__meting{font-size:1.125rem;line-height:1.5}
.journaal__meting b{font-weight:600}
.journaal__schermen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
.journaal__scherm{margin:0}
.journaal__scherm:not(.journaal__scherm--breed){width:min(100%,340px);justify-self:center}
.journaal__scherm--breed{grid-column:1 / -1}
.journaal__scherm img{display:block;width:100%;height:auto;border:1px solid var(--c-line);border-radius:10px}
.journaal__scherm figcaption{margin-top:.8rem;font-size:var(--fs-meta);color:var(--c-fg-2);max-width:42em}
.journaal__quote{max-width:34em;font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.02em;line-height:1.3}
.journaal__quote footer{margin-top:1rem;font-size:var(--fs-meta);color:var(--c-fg-2);letter-spacing:0}
.journaal__verder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--c-line);font-size:var(--fs-meta)}
.journaal__verder a{text-decoration:none}
.journaal__verder a:hover{text-decoration:underline;text-underline-offset:.24em}
@media (max-width:860px){.journaal__grid > .h2,.journaal__tekst{grid-column:1 / -1}}
@media (max-width:600px){.journaal__schermen{gap:1.75rem .75rem}.journaal__scherm figcaption{font-size:.8125rem}}