/* kast.css — LABB als boekenkast (#72, #124, #127, #237-#256): de kast, de boeken, het opengeslagen boek. Gedeeld door de homepage
   (blok 2) en /labb (fase 3 stap 3, #294), uit home.css gehaald zonder iets te wijzigen. De gekozen standen staan vast op <html> van
   elke pagina met de kast (data-beeld="m2" data-kast="kader" data-nul="aan" data-labb="journaal" data-kaft="merk" data-wand="steen"),
   zodat de selectors uit de proto ongewijzigd blijven werken. Gedrag: /assets/kast.js; de boeken zelf: labb/cases.json via
   scripts/build-labb.mjs. */
:root{--labb-beeld:url(/assets/media/labb/m2.svg);--labb-klein:url(/assets/media/labb/m2-klein.svg)}
/* ---------- 2. LABB: het werk als boekenkast (#72, #124, #127); geen uitleg (#125): het label, de plank, de boeken ---------- */
.work{padding:var(--section) 0 clamp(4rem,9vw,7rem)}
.work__head{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.2rem)}  /* #131: LABB groot, als hoofdstukkop, met het beeld ernaast */
.labb__w{margin:0;font-weight:800;font-variation-settings:'wdth' 125;font-stretch:125%;letter-spacing:-.04em;line-height:1;font-size:var(--fs-h2);color:var(--c-fg)}
/* het LABB-beeld uit hondbeeld 4 (#126): kandidaat via de schakelaar, --labb-beeld op html; geen = verborgen */
.labb__beeld{display:none;width:clamp(96px,12vw,190px);aspect-ratio:1;background:var(--c-fg);-webkit-mask:var(--labb-beeld,none) center/contain no-repeat;mask:var(--labb-beeld,none) center/contain no-repeat}  /* het masker kleurt mee: inkt op licht */
html[data-beeld]:not([data-beeld="geen"]) .labb__beeld{display:block}

/* de kast: een stenen plank, de boeken ervoor in 3D; de camera staat iets boven de plank zodat je de bladzijden ziet */
.kast{--u:clamp(1px,.09vw,1.35px);position:relative;margin-top:clamp(1rem,3vw,2rem);perspective:2200px;perspective-origin:50% 22%;
  background:radial-gradient(55% 60% at 50% 100%,rgba(18,17,16,.055),transparent 70%)}  /* --u: de eenheid van de boeken, groeit mee met het scherm (lengte, want clamp mag geen getal met vw mengen); een zweem schaduw op de wand */
.kast__obj{width:fit-content;max-width:100%;margin:0 auto;padding:0 clamp(1.5rem,5vw,4.5rem)}  /* de kast is een object: de plank hugt de boeken (#131) */
.rij{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:9px;margin:0;padding:clamp(2rem,5vw,4rem) 0 0;list-style:none;min-height:clamp(340px,34vw,500px);transform-style:preserve-3d}
.rij > li{display:contents}
.plank{position:relative;height:12px;margin:0 calc(-1 * clamp(1.5rem,5vw,4.5rem));background:var(--inkt);border-radius:1px;box-shadow:0 22px 34px -20px rgba(18,17,16,.55)}  /* #131: inkt, geen fototextuur */
.plank::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(180deg,rgba(18,17,16,0),rgba(18,17,16,.08))}  /* de schaduw van de boeken op de plank */

.boek{--w:56;--h:300;--d:190px;--c:#2B2E33;--t:#F3F2EF;position:relative;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));flex:none;border:0;padding:0;margin:0;background:none;color:var(--t);font:inherit;cursor:pointer;
  transform-style:preserve-3d;transform-origin:50% 100%;transition:transform .6s var(--ease-settle),opacity .5s var(--ease-settle);outline-offset:6px}
.boek:focus-visible{outline:2px solid var(--c-fg)}
.rug{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;border-radius:3px 2px 2px 3px;color:var(--t);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 2px),
    linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 22%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.14) 90%,rgba(0,0,0,.36)),
    var(--c);  /* linnen, met de ronding van de rug */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),1px 0 0 rgba(0,0,0,.2);backface-visibility:hidden;transition:opacity .25s var(--ease-settle)}
.rug__nr{font-size:.6875rem;font-weight:500;letter-spacing:.06em;opacity:.85}
.rug__naam{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-variation-settings:'wdth' 125;font-stretch:125%;letter-spacing:-.02em;font-size:clamp(.9rem,1.1vw,1.1rem);white-space:nowrap}
.rug__blok{width:10px;height:10px;border-radius:2px;background:var(--s,var(--t))}  /* het blokje in de kleur van de site (#131) */
/* de bovenkant van het boek: de bladzijden, als dunne streep zichtbaar omdat je iets van boven kijkt */
.boek__top{position:absolute;left:1px;right:1px;top:0;height:var(--d);transform-origin:50% 0;transform:rotateX(-90deg);
  background:repeating-linear-gradient(90deg,#F0EDE5 0 1px,#D9D5CB 1px 2px),#E8E4DA;box-shadow:inset 0 0 8px rgba(0,0,0,.2);transition:opacity .25s var(--ease-settle)}
@media (hover:hover){.boek:hover:not(.is-uit){transform:translateZ(30px) translateY(-6px)}}
.boek.is-uit .rug,.boek.is-uit .boek__top{opacity:0}   /* het boek is uit de kast: er blijft een gat */
.rij.heeft-open .boek:not(.is-uit){opacity:.5;transform:translateZ(-28px)}
.rij.heeft-open .boek:not(.is-uit):hover{transform:translateZ(-28px)}
/* de boeken landen één keer op de plank als de kast in beeld komt, in volgorde (kast.js haalt 'wacht' daarna weg) */
.kast.wacht .boek{opacity:0;transform:translateY(26px)}
.kast.wacht.in .boek{opacity:1;transform:none;transition:transform .8s var(--ease-settle) calc(var(--i) * 70ms),opacity .5s var(--ease-settle) calc(var(--i) * 70ms)}

/* het opengeslagen boek: ligt over de kast; links de binnenkaft (de achterkant van de kaft), rechts de site in een kader */
.spread{position:absolute;left:50%;top:clamp(1rem,3vw,2.5rem);z-index:3;width:min(64vw,940px);translate:-50% 0;display:grid;grid-template-columns:1fr 1fr;
  perspective:2600px;transform-style:preserve-3d;filter:drop-shadow(0 36px 44px rgba(18,17,16,.32))}
.spread[hidden]{display:none}
.pagina{position:relative;aspect-ratio:1;min-width:0}
.pagina--l{visibility:hidden}
.pagina--r{background:var(--bot);border-radius:0 3px 3px 0;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset 12px 0 18px -14px rgba(0,0,0,.35);padding:6% 6% 5%}
.spread__kader{position:relative;aspect-ratio:16/10;overflow:clip;border:1px solid var(--inkt);border-radius:var(--r);background:var(--bot-2)}
.spread__kader img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s var(--ease-settle)}
.spread.img-in .spread__kader img{opacity:1}
.spread__links{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;margin-top:1.1rem}
.spread__journaal{display:inline-flex;gap:.5rem;align-items:center;font-size:var(--fs-meta);font-weight:500;color:var(--inkt);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.spread__journaal[hidden]{display:none}
.spread__site{display:inline-flex;gap:.5rem;align-items:center;margin-top:0;font-size:var(--fs-meta);color:var(--inkt-2);text-decoration:none}
.spread__site:hover{color:var(--inkt)}
.spread__sluit{position:absolute;right:-14px;top:-14px;z-index:2;width:36px;height:36px;border:1px solid var(--inkt);border-radius:50%;background:var(--bot);color:var(--inkt);font:300 1.4rem/1 var(--f);cursor:pointer;display:grid;place-items:center}
.spread__sluit:hover{background:var(--inkt);color:var(--bot)}
.kaft{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.kaft__voor,.kaft__binnen{position:absolute;inset:0;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--t);padding:clamp(1rem,2.6vw,2rem);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 2px),var(--c)}
.kaft__voor{border-radius:0 4px 4px 0;box-shadow:inset 12px 0 16px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.08)}
.kaft__binnen{transform:rotateY(180deg);border-radius:4px 0 0 4px;background-color:color-mix(in srgb,var(--c) 82%,#000);box-shadow:inset -12px 0 16px -12px rgba(0,0,0,.55)}
.kaft__nr{font-size:var(--fs-meta);font-weight:500;letter-spacing:.06em;opacity:.85}
.kaft__naam{margin-top:auto;font-weight:800;font-variation-settings:'wdth' 125;font-stretch:125%;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.4rem,2.4vw,2.4rem);text-wrap:balance}
.kaft__kind{margin-top:.5rem;font-size:var(--fs-meta);opacity:.8}
.kaft__blok{width:.6em;height:.6em;margin-top:1rem;border-radius:.12em;background:var(--s,var(--t));font-size:1.4rem}
.kaft__beeld{display:none;position:absolute;right:clamp(1rem,2.6vw,2rem);top:clamp(1rem,2.6vw,2rem);width:clamp(56px,6vw,88px);aspect-ratio:1;background:var(--t);-webkit-mask:var(--labb-beeld,none) center/contain no-repeat;mask:var(--labb-beeld,none) center/contain no-repeat;opacity:.9}  /* het stempel op de binnenkaft, in de kleur van de letters */
html[data-beeld]:not([data-beeld="geen"]) .kaft__beeld{display:block}

/* vangnet: zonder beweging geen 3D-hover en geen landing; op een smal scherm ligt het boek open onder de plank, in één kolom */
@media (prefers-reduced-motion:reduce){
  .boek,.rij.heeft-open .boek:not(.is-uit){transition:none;transform:none}
  .boek:hover:not(.is-uit){transform:none}
}
@media (max-width:760px){
  .work__head{align-items:center}
  .rug__nr{font-size:.5625rem;letter-spacing:.02em}
  .kast{perspective:none}
  .rij{min-height:0;padding-top:1.25rem;gap:7px}
  .kast{--u:.72px}
  .boek__top{display:none}
  .boek:hover:not(.is-uit),.rij.heeft-open .boek:not(.is-uit){transform:none}
  .spread{position:relative;left:auto;top:auto;translate:none;width:100%;grid-template-columns:1fr;margin-top:1.25rem;filter:none;perspective:none;box-shadow:0 24px 36px -24px rgba(18,17,16,.45)}
  .pagina--l{display:none}
  .pagina--r{aspect-ratio:auto;border-radius:0 0 3px 3px;padding:6% 6% 7%}
  .kaft{position:relative;left:0;width:100%;height:auto;transform:none!important}
  .kaft__voor{display:none}
  .kaft__binnen{position:relative;inset:auto;transform:none;border-radius:3px 3px 0 0;min-height:160px}
  .kaft__naam{margin-top:1.25rem}
}
/* ---- LABB: de kast in het kader (#139, #76). De lockup staat in het object; met data-kast="kader" krijgt het object het Plekk-kader ---- */
.kast__obj{position:relative}
.kast__blk{display:none}
.kast__obj .work__head{margin-bottom:clamp(.5rem,2vw,1.5rem)}
html[data-kast="kader"] .kast__obj{width:100%;padding:clamp(1.25rem,2.6vw,2.25rem) clamp(1.5rem,5vw,4.5rem) 0;border:1.5px solid var(--c-fg);border-radius:clamp(14px,2vw,22px);border-bottom:0}  /* het kader is het hoofdstuk: zo breed als de pagina, de lege ruimte is eerlijk leeg (#76) */
html[data-kast="kader"] .rij{padding-top:1rem}
html[data-kast="kader"] .kast__obj::before,html[data-kast="kader"] .kast__obj::after{content:"";position:absolute;top:-2px;right:-2px;z-index:1;background:var(--c-bg)}  /* de open hoek */
html[data-kast="kader"] .kast__obj::before{width:clamp(72px,14%,160px);height:6px}
html[data-kast="kader"] .kast__obj::after{width:6px;height:clamp(60px,18%,120px)}
html[data-kast="kader"] .kast__blk{display:block;position:absolute;z-index:2;top:calc(-1 * clamp(14px,1.6vw,22px));right:calc(-1 * clamp(10px,1.1vw,15px));width:clamp(26px,3vw,40px);aspect-ratio:1;border-radius:17%;background:var(--acc-vlak)}
html[data-kast="kader"] .plank{height:10px;margin:0 calc(-1 * clamp(1.5rem,5vw,4.5rem) - 1.5px);border-radius:0 0 clamp(14px,2vw,22px) clamp(14px,2vw,22px);box-shadow:none}  /* de plank is de onderkant van het kader */
html[data-kast="kader"] .kast{background:none}
@media (max-width:760px){
  html[data-kast="kader"] .kast__obj{padding-left:1rem;padding-right:1rem}
  html[data-kast="kader"] .plank{margin:0 calc(-1rem - 1.5px)}
}

/* #144: het LABB-beeld rechts in de hoek van het kader, LABB links; de lijn (m2) iets kleiner dan de zware beelden */
.kast__obj .work__head{justify-content:space-between}
.kast__obj .labb__beeld{order:2;width:clamp(72px,8.5vw,136px)}
html[data-kast="kader"] .kast__obj .labb__beeld{margin-right:clamp(1.5rem,4vw,3.5rem)}  /* vrij van de open hoek en het blokje */
/* ======================================================================================================
   #163: de LABB-boeken groter en met meer ontwerp, in de taal van de site: een rugetiket met het nummer, twee folielijnen,
   de naam in zilverfolie op de donkere ruggen (inkt op de lichte), onderaan een band in de kleur van de site met het zilveren
   blokje; op de kaft het Plekk-kader met de open hoek. De kast vult het kader en bijna het scherm.
   ====================================================================================================== */
.kast{--u:clamp(1px,.128vw,2.1px)}
.rij{gap:calc(9 * var(--u));min-height:0;padding-top:clamp(1rem,2vw,1.75rem)}
.rug{padding:calc(16 * var(--u)) 0 calc(14 * var(--u));justify-content:flex-start;gap:calc(10 * var(--u));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 calc(4 * var(--u)) 0 rgba(255,255,255,.07),inset 0 calc(-4 * var(--u)) 0 rgba(0,0,0,.22),1px 0 0 rgba(0,0,0,.2)}
.rug__nr{padding:.3em .4em .25em;border:1px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:2px;font-size:clamp(.5625rem,calc(6.4 * var(--u)),.8125rem);letter-spacing:.04em;opacity:1}
.rug::before{content:"";align-self:stretch;margin:0 16%;height:calc(4 * var(--u));border-top:1px solid color-mix(in srgb,currentColor 50%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 50%,transparent);order:1}
.rug__nr{order:0}.rug__naam{order:2;margin:auto 0;font-size:clamp(.95rem,calc(11.5 * var(--u)),1.55rem)}.rug__blok{order:3}
.boek:not([data-t="#121110"]) .rug__naam{background:linear-gradient(180deg,#EEF1F4 0%,#C9D0D7 30%,#9AA5B1 52%,#E4E8EC 72%,#8A949F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}  /* zilverfolie op de donkere ruggen */
.rug__blok{align-self:stretch;width:auto;height:calc(42 * var(--u));margin-bottom:calc(4 * var(--u));border-radius:0;background:var(--s);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.28)}
.rug__blok::after{content:"";width:calc(11 * var(--u));aspect-ratio:1;border-radius:18%;background:linear-gradient(135deg,#EEF1F4,#9AA5B1 42%,#D3D9DF 56%,#6E7985);box-shadow:0 1px 2px rgba(0,0,0,.35)}
/* de kaft: het Plekk-kader met de open hoek, het blokje in de hoek, de naam groot */
.kaft__voor{padding:16% 15%}
.kaft__voor::before{content:"";position:absolute;inset:8%;border:1.5px solid color-mix(in srgb,currentColor 50%,transparent);border-radius:7%;pointer-events:none}
.kaft__voor::after{content:"";position:absolute;top:calc(8% - 3px);right:calc(8% - 3px);width:24%;height:17%;background:var(--c);pointer-events:none}
.kaft__voor .kaft__blok{position:absolute;top:6%;right:6%;z-index:1;width:15%;height:auto;aspect-ratio:1;margin:0;border-radius:18%;font-size:1rem;background:linear-gradient(135deg,#EEF1F4,#9AA5B1 42%,#D3D9DF 56%,#6E7985)}
.kaft__voor .kaft__naam{font-size:clamp(1.6rem,3vw,3rem)}
.kaft__binnen::before{content:"";position:absolute;inset:8%;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:7%;pointer-events:none}
.kaft__binnen{padding:14% 13%}
@media (max-width:760px){
  .kast{--u:.92px}
  .rij{gap:6px}
  .rug{padding:10px 0 8px;gap:6px}
  .rug__nr{font-size:.5rem;padding:.2em .25em}
  .rug__naam{font-size:.75rem}
  .rug__blok{height:32px}
}
/* ---------- #171: plekk.00, de studio zelf: het woordmerk op de rug, het startverhaal in het boek ---------- */
html[data-nul="uit"] .boek--nul{display:none}
.boek--nul .rug__naam{letter-spacing:-.05em}
.verhaal{display:none}
.spread.is-verhaal .spread__kader,.spread.is-verhaal .spread__links{display:none}
.spread.is-verhaal .verhaal{display:block}
.verhaal__kop{font-size:var(--fs-meta);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-2)}
.verhaal p:not(.verhaal__kop):not(.verhaal__sign){margin-top:.9rem;font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.45;letter-spacing:-.01em;color:var(--inkt)}
.verhaal__sign{margin-top:1.4rem;font-weight:800;font-variation-settings:'wdth' 125;font-stretch:125%;font-size:1.25rem;letter-spacing:-.03em;color:var(--inkt)}
@media (max-width:760px){
  /* de rij past altijd in het kader: 418 eenheden boek en leunruimte plus zes gaten van 5 px, en ruim 25 px lucht per kant (de lijn,
     de rand van de steen #255). Op 390 is dat .74 px in plaats van .8; zonder dit staken de boeken vanaf 390 over de lijn en op 320 buiten beeld */
  .kast{--u:min(.8px,calc((100vw - 82px) / 418))}
  .rij{gap:5px}
}
/* #231: onder LABB klein "Eerder werk" (Luuk), zodat een bezoeker meteen weet wat de boeken zijn */
.labb__kop{display:flex;flex-direction:column}
.labb__sub{margin:.55rem 0 0;font-size:var(--fs-body);font-weight:400;line-height:1.3;color:var(--c-fg-2)}
/* ---------- #237, gekozen #248 (html[data-labb="journaal"], vast): LABB legt zichzelf uit zonder tekst. LABB is het lab; de labrador is het logo
   van het lab, zoals de pinguïn van Penguin Books: de kop rechtsboven in het kader (#239), hetzelfde merkje onderaan elke rug, de boeken zijn
   labjournalen (een etiket op de kaft, ruitjespapier binnenin). En de kast gedraagt zich als een kast: het laatste boek leunt, pak je
   er een dan zakt de buur in het gat (kast.js). ---------- */
/* het merkje van het lab onderaan elke rug, in folie, in de band van de site (waar het blokje stond) */
html[data-labb="journaal"] .rug__blok::after{width:calc(27 * var(--u));aspect-ratio:1;border-radius:0;box-shadow:none;
  background:linear-gradient(135deg,#F4F6F8,#B7C0C9 45%,#E2E6EA 60%,#8E99A4);-webkit-mask:var(--labb-beeld,none) center/contain no-repeat;mask:var(--labb-beeld,none) center/contain no-repeat}
html[data-labb="journaal"] .rug__blok{height:calc(48 * var(--u))}
/* #259: onder 32 px de kleine versie van het merkje (dikkere lijn, ogen als stippen); op de rug is dat onder 860 px schermbreedte */
@media (max-width:860px){html[data-labb="journaal"] .rug__blok::after{-webkit-mask-image:var(--labb-klein,var(--labb-beeld,none));mask-image:var(--labb-klein,var(--labb-beeld,none))}}
/* leunen: het boek draait om zijn linkeronderhoek; vallen gaat versnellend, rechtop komen rustig */
html[data-labb="journaal"] .boek{transition:transform .6s var(--ease-settle),opacity .5s var(--ease-settle),rotate .62s var(--ease-settle)}
html[data-labb="journaal"] .boek.leunt{transform-origin:0 100%;transition:transform .6s var(--ease-settle),opacity .5s var(--ease-settle),rotate .46s cubic-bezier(.5,0,.85,.55) .08s}
/* de kaft: een labschrift. Een etiket met nummer en naam, onderaan het merkje van het lab */
html[data-labb="journaal"] .kaft__voor{justify-content:flex-start;padding:19% 17% 0}
html[data-labb="journaal"] .kaft__voor::before{inset:13% 11% auto;height:30%;border:0;border-radius:3px;background:#F3F2EF;box-shadow:0 1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(18,17,16,.08)}
html[data-labb="journaal"] .kaft__voor::after{top:auto;right:auto;bottom:11%;left:50%;width:20%;height:auto;aspect-ratio:1;translate:-50% 0;
  background:linear-gradient(135deg,#F4F6F8,#B7C0C9 45%,#E2E6EA 60%,#8E99A4);-webkit-mask:var(--labb-beeld,none) center/contain no-repeat;mask:var(--labb-beeld,none) center/contain no-repeat}
html[data-labb="journaal"] .kaft__voor .kaft__nr,html[data-labb="journaal"] .kaft__voor .kaft__naam{position:relative;z-index:1;color:var(--inkt)}
html[data-labb="journaal"] .kaft__voor .kaft__naam{margin-top:.45em;font-size:clamp(1.1rem,2vw,2rem)}
html[data-labb="journaal"] .kaft__voor .kaft__blok{display:none}
/* #248: op een lichte kaft (Bouman, Klimbo) viel het etiket weg. Zoals op de ruggen (#163): zilver op donker, inkt op licht. Het etiket
   wordt wit papier met een gedrukte rand, zoals op een schrift; het merkje is inktfolie */
html[data-labb="journaal"] .spread.is-licht .kaft__voor::before{background:#FCFBF9;
  box-shadow:inset 0 0 0 5px #FCFBF9,inset 0 0 0 6px rgba(18,17,16,.55),0 0 0 1px rgba(18,17,16,.14),0 2px 4px rgba(18,17,16,.16)}
html[data-labb="journaal"] .spread.is-licht .kaft__voor::after{background:linear-gradient(135deg,#4A4F57,#121110 45%,#3A3E45 60%,#121110)}
/* binnenin: ruitjespapier, zoals een labschrift */
html[data-labb="journaal"] .kaft__binnen,html[data-labb="journaal"] .pagina--r{color:var(--inkt);
  background:linear-gradient(rgba(18,17,16,.075) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(18,17,16,.075) 1px,transparent 1px) 0 0/14px 14px,#F3F2EF}
html[data-labb="journaal"] .kaft__binnen::before{display:none}
html[data-labb="journaal"] .kaft__binnen .kaft__beeld{background:var(--inkt)}
html[data-labb="journaal"] .rij > li:last-child .boek{margin-left:calc(34 * var(--u))}  /* er is plek op de plank: het laatste boek leunt tegen zijn buurman */

/* #240: in elk opengeslagen boek een kleine verwijzing naar het lab: links boven "plekk lab" met het merkje (in plaats van het stempel),
   boven de site "LABB report" met het nummer */
.kaft__lab,.spread__rapport{display:none}
html[data-labb="journaal"] .kaft__binnen .kaft__beeld{display:none}
html[data-labb="journaal"] .kaft__lab{display:flex;align-items:center;gap:.5em;margin-bottom:auto;font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;color:var(--inkt)}
html[data-labb="journaal"] .kaft__lab::before{content:"";width:1.9em;aspect-ratio:1;background:var(--inkt);-webkit-mask:var(--labb-klein,var(--labb-beeld,none)) center/contain no-repeat;mask:var(--labb-klein,var(--labb-beeld,none)) center/contain no-repeat}
html[data-labb="journaal"] .kaft__binnen .kaft__naam{margin-top:0}
html[data-labb="journaal"] .spread__rapport{display:flex;justify-content:space-between;margin:0 0 .8rem;font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;color:var(--inkt)}
html[data-labb="journaal"] .spread__rapport span{font-weight:400;color:var(--inkt-2)}
.spread.is-verhaal .spread__rapport{display:none}

/* ---------- #251, gekozen #252 (html[data-kaft="merk"], vast; de schakelaar is weg): elk boek in het merk van het project. Luuk: "nu zijn ze
   allemaal hetzelfde, is wel clean maar een beetje karakterloos". De kleuren komen uit de sites zelf (kast.js zet --c --t --s --o --p);
   het merkteken van het project staat gedrukt bovenaan de rug, zoals een uitgeverslogo, groot en afgesneden op de kaft, en bij de naam
   in het boek. Wat de reeks één lab maakt blijft: het etiket met het nummer, de folielijnen en het hondmerkje onderaan (#237). ---------- */
.kaft__merk,.kaft__voor .kaft__kind,.kaft__teken{display:none}
html[data-kaft="merk"] .boek .rug__naam{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--t)}
html[data-kaft="merk"] .rug::after{content:"";order:-1;flex:none;width:calc(24 * var(--u));aspect-ratio:1;background:var(--t);
  -webkit-mask:var(--merk) center/contain no-repeat;mask:var(--merk) center/contain no-repeat}
html[data-kaft="merk"] .rug{padding-top:calc(12 * var(--u))}
html[data-kaft="merk"] .rug__blok::after{background:var(--o,var(--t))}
/* de kaft: het merkteken groot, afgesneden, toon op toon; het etiket krijgt een tweede regel; het hondmerkje schuift naar links */
html[data-kaft="merk"] .kaft__voor{overflow:hidden}
html[data-kaft="merk"] .kaft__voor::before{z-index:1;height:36%}
html[data-kaft="merk"] .kaft__merk{display:block;position:absolute;right:-16%;bottom:-12%;z-index:0;width:84%;aspect-ratio:1;pointer-events:none;
  background:color-mix(in srgb,var(--t) 13%,transparent);-webkit-mask:var(--merk) center/contain no-repeat;mask:var(--merk) center/contain no-repeat}
html[data-kaft="merk"] .kaft__voor .kaft__kind{display:block;position:relative;z-index:1;margin-top:.7em;max-width:16em;font-size:var(--fs-meta);line-height:1.35;color:var(--inkt-2)}
html[data-kaft="merk"] .kaft__voor::after{left:12%;width:15%;translate:0 0}
/* binnenin: het merkteken in de inkt van het project, boven het nummer */
html[data-kaft="merk"] .kaft__teken{display:block;width:clamp(40px,4.4vw,68px);aspect-ratio:1;margin-bottom:1rem;background:var(--p,var(--inkt));
  -webkit-mask:var(--merk) left center/contain no-repeat;mask:var(--merk) left center/contain no-repeat}
/* op een smal scherm is de rij al zo breed als past; het merkteken bovenaan kost hoogte, dus de boeken worden iets hoger (Bouman liep over) */
@media (max-width:760px){html[data-kaft="merk"] .rug::after{width:16px}html[data-kaft="merk"] .boek{height:calc(var(--h) * var(--u) * 1.12)}}

/* ---------- #253-#255 (Luuk, 2026-10-10): de boeken een detail rijker, de wand erachter ---------- */
/* #253: een tweede kleur in het merkteken (--top op het boek; nu alleen Alpine: het oranje nokje op de berg, uit hun eigen logo), zodat
   Alpine niet meer dezelfde berg is als Beyond Maps. Op de rug en in het boek in die kleur over het merkteken heen; op de kaft, waar het
   merkteken toon op toon staat, gedempt (uitsparen las als een afgeknotte berg). */
html[data-kaft="merk"] .rug::after{background:var(--top,none) center/contain no-repeat,var(--folie)}
html[data-kaft="merk"] .kaft__teken{background:var(--top,none) left center/contain no-repeat,var(--p,var(--inkt))}
html[data-kaft="merk"] .kaft__merk::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--s) 34%,transparent);
  -webkit-mask:var(--top,linear-gradient(transparent,transparent)) center/contain no-repeat;mask:var(--top,linear-gradient(transparent,transparent)) center/contain no-repeat}
/* #254: de letters op de rug weer in folie (Luuk: "eerst waren ze een beetje chrome"), getint naar de letterkleur van het project, en het
   merkteken bovenaan in dezelfde folie. De donkere banden trekken naar de kleur van de rug, zodat de naam op een gekleurde rug leesbaar
   blijft; een smalle schaduw tilt de letters uit het linnen. Donkere letters (UpYourself) krijgen inktfolie. Til je het boek op, dan
   schuift het licht over de folie mee: hetzelfde gebaar, geen tweede. */
html[data-kaft="merk"] .boek{--fk:40%;--folie:linear-gradient(172deg,
    color-mix(in srgb,var(--t),#fff 35%) 0%,color-mix(in srgb,var(--t),#AEB6BF calc(var(--fk) * .7)) 22%,color-mix(in srgb,var(--t),#6E7985 var(--fk)) 42%,
    color-mix(in srgb,var(--t),#fff 45%) 57%,color-mix(in srgb,var(--t),#8A949F calc(var(--fk) * .8)) 80%,color-mix(in srgb,var(--t),#fff 25%) 100%)}
html[data-kaft="merk"] .boek--inkt{--folie:linear-gradient(172deg,var(--t) 0%,color-mix(in srgb,var(--t) 70%,#fff) 26%,var(--t) 46%,
    color-mix(in srgb,var(--t) 80%,#fff) 68%,var(--t) 100%)}
/* de naam: de folie in de lengte, en dwars over de letters een smalle glans, zoals licht op een gestempelde letter */
html[data-kaft="merk"] .boek .rug__naam{background:linear-gradient(90deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.42) 47%,rgba(255,255,255,0) 58%),var(--folie) 0 0/100% 170% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 -1px 0 color-mix(in srgb,var(--c) 45%,#000));transition:background-position .6s var(--ease-settle)}
html[data-kaft="merk"] .boek--inkt .rug__naam{background:var(--folie) 0 0/100% 170% no-repeat;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 -1px 0 rgba(18,17,16,.14))}
@media (hover:hover){html[data-kaft="merk"] .boek:hover:not(.is-uit) .rug__naam{background-position:0 0,0 100%}}
/* #255: de wand achter de boeken. Luuk: "nu is het echt perfect wit op wit … alsof je echt iets uit een lade pakt; niet te geforceerd".
   Binnen het kader een superlichte steen (kalksteen: zachte horizontale wolken, gebakken in media/steen.webp, 4,5 KB, en een fijne korrel
   als tegel), licht van boven-voor, een zweem schaduw van
   de bovenkant en achter de boeken, zodat je in een kast kijkt. De steen ligt een smalle rand binnen de lijn (een vak in de kast, en de
   open hoek blijft open); onderaan staat hij op de plank. Gekozen (#256), de schakelaar is weg. */
html[data-wand="steen"][data-kast="kader"] .kast__obj{background-color:#EAE7E1;
  background-image:
    radial-gradient(48% 34% at 50% 100%,rgba(18,17,16,.075),transparent 74%),
    radial-gradient(90% 62% at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(18,17,16,.055),rgba(18,17,16,0) 56px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .26 .5 0 0 0 -.2'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>"),
    url(/assets/media/steen.webp);
  background-size:auto,auto,auto,200px 200px,1600px 1400px;background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;background-position:0 0,0 0,0 0,0 0,50% 0;
  --ring:clamp(6px,.7vw,10px);box-shadow:inset 0 0 0 var(--ring) var(--c-bg),inset 0 0 18px var(--ring) rgba(18,17,16,.085)}