/* The Door — Chambers en rooms.
   Eén stylesheet voor zesenvijftig pagina's: die haalt de bezoeker één keer op
   en daarna staat hij in de cache. De chamberkleur komt per pagina mee als
   --ch op de body; verder is alles gelijk.

   Dezelfde tekens als de rest van de site: paper, ink, hairlines in plaats van
   schaduwen, Space Grotesk voor koppen en Inter voor tekst. */

:root{
  --paper:#f4f2ec;
  --ink:#111111;
  --ink-soft:#55534d;
  --hairline:#111111;
  --haar-licht:rgba(17,17,17,.13);
  --teal:hsl(168 76% 29%);
  --teal-bright:hsl(168 70% 40%);
  --spark:#E68A3C;
  --spark-text:hsl(30 72% 34%);
  --rust:#a8492f;
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  /* Per pagina overschreven vanuit de merkkaart; dit is alleen de terugval. */
  --ch:#008771;
  --ch-op:#f7f4ec;
  --ch-tekst:#007C68;
  --ch-accent:#E1A500;
  --ch-accent-tekst:#8E6800;
}

*{margin:0;padding:0;box-sizing:border-box}
/* hidden betekent hidden.
   --------------------------------------------------------------------------
   Het hidden-attribuut zet display:none via de standaardstijl van de browser,
   en elke gewone regel gaat daaroverheen. .kluis-knop heeft display:inline-flex
   en .signaal display:grid, dus die stonden er altijd -- ook als er nog niets
   te tonen was.

   Deze regel staat LOS en niet achter een andere selector geplakt. Mijn eerste
   poging verving .signaal[hidden] en maakte er per ongeluk .signaal [hidden]
   van: een afstammelingsselector die alleen binnen die ene sectie werkte.

   Dit is de enige plek in dit blad waar !important klopt: hidden is geen
   opmaakwens maar een uitspraak over of iets er hoort te zijn. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--teal);color:#fff}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.icon{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.caption{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
}
.tm{font-size:.58em;vertical-align:.42em;font-weight:500;opacity:.72}

/* Toetsenbord moet overal zichtbaar zijn, ook op de donkere held. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-radius:2px;
}
.held a:focus-visible,.cta a:focus-visible{outline-color:currentColor}
main:focus{outline:none}

.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;background:#111;color:#fff;
  font:600 14px/1 var(--font-head);padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none;
}
.skip:focus{left:0}

/* ------------------------------------------------------------------- nav */

/* Let op: dit MOET op de klasse staan, niet op het element. Er staan nog twee
   andere <nav>'s op deze pagina's -- het kruimelpad in de held en de
   inhoudsopgave -- en die kregen anders allebei position:fixed en een lichte
   achtergrond mee. Het kruimelpad werd daardoor witte tekst op bijna wit. */
nav.hoofdnav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:60px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
@supports not (backdrop-filter:blur(1px)){nav.hoofdnav{background:var(--paper)}}
nav.hoofdnav .logo img{height:30px;width:auto}
.nav-links{display:flex;gap:2px;align-items:center;list-style:none}
.nav-links a{
  color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:99px;transition:background .2s,color .2s;white-space:nowrap;
}
.nav-links a:hover{background:var(--ink);color:var(--paper)}
.nav-cta{background:var(--ink);color:var(--paper)!important;font-weight:600!important;margin-left:10px}
.nav-cta:hover{background:var(--teal)!important}
.burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px}
.burger .icon{width:24px;height:24px}
@media(max-width:1000px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--paper);padding:16px 24px 24px;
    border-bottom:1px solid var(--hairline);max-height:calc(100svh - 60px);overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:17px;padding:14px 13px;text-align:center}
  .nav-cta{margin-left:0}
  .burger{display:block}
}

/* ------------------------------------------------------------------ held */

.held{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:88svh;display:flex;align-items:flex-end;
  padding:130px 28px 56px;
  background:var(--ch);color:var(--ch-op);
  border-bottom:1px solid var(--hairline);
}
.held-beeld{position:absolute;inset:0;z-index:-2}
.held-beeld img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* De tekst staat links; daar is de kleur bijna dicht, zodat het contrast niet
   van de foto afhangt maar van de kleur eronder. */
.held-beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--ch) 0%,
    color-mix(in srgb,var(--ch) 96%,transparent) 34%,
    color-mix(in srgb,var(--ch) 55%,transparent) 62%,
    color-mix(in srgb,var(--ch) 38%,transparent) 100%);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .held-beeld::after{background:var(--ch);opacity:.9}
}
.held-nr{
  position:absolute;right:10px;top:50%;translate:0 -50%;z-index:-1;
  font-family:var(--font-head);font-weight:600;line-height:1;
  font-size:clamp(8rem,24vw,19rem);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px var(--ch-accent);
  opacity:.34;pointer-events:none;user-select:none;
}
.held-tekst{position:relative;max-width:1120px;width:100%}
.held .caption{color:var(--ch-op);opacity:.82}
/* De maat is begrensd door het langste woord, niet door de smaak: "Manufacturing"
   en "Microeconomics" zijn één woord en breken lelijk af als ze niet passen. */
.held h1{
  font-size:clamp(2.7rem,8vw,6.6rem);line-height:.93;letter-spacing:-.045em;
  margin:14px 0 0;overflow-wrap:break-word;
}
.held-kamer h1{font-size:clamp(2.3rem,6vw,4.8rem)}
.held-q{
  font-size:clamp(1.05rem,2.3vw,1.45rem);font-style:italic;
  margin-top:20px;max-width:32ch;opacity:.95;
}
.kruimel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin-bottom:16px}
.kruimel a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.8;padding-bottom:1px}
.kruimel a:hover{opacity:1}
.kruimel span{opacity:.5}
.held-kamer{min-height:auto;padding:120px 28px 48px;align-items:flex-start}
.held-kamer .held-q{font-style:normal;margin-top:22px}

/* --------------------------------------------------------------- secties */

.blok{border-bottom:1px solid var(--hairline)}
.blok-kop{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:34px 28px 26px;
}
.blok-kop h2{font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.04em}

.lede{padding:46px 28px 48px;border-bottom:1px solid var(--hairline)}
.lede .onder{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.25rem,3vw,2rem);line-height:1.16;letter-spacing:-.03em;
  max-width:22ch;margin-bottom:22px;
}
.lede .proza{max-width:62ch;margin-left:0}
.lede .proza p{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink);line-height:1.66}

/* --------------------------------------------------------- inhoudsopgave */

.inhoud{
  padding:26px 28px 30px;border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb,var(--ch) 5%,var(--paper));
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.inhoud{background:var(--paper)}}
.inhoud ol{
  list-style:none;counter-reset:i;margin-top:14px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 26px;
}
.inhoud li{counter-increment:i;border-top:1px solid var(--haar-licht)}
.inhoud a{
  display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:baseline;
  padding:11px 0;text-decoration:none;color:var(--ink);font-size:14.5px;line-height:1.35;
}
.inhoud a::before{
  content:counter(i,decimal-leading-zero);
  font-family:var(--font-head);font-size:11px;color:var(--ch-accent-tekst);letter-spacing:.06em;
}
.inhoud a:hover{color:var(--ch-tekst)}

/* -------------------------------------------------------------- de vragen */

/* Op een breed scherm blijft de vraag links staan terwijl je het antwoord
   leest. Anders staat er een korte kop boven een kolom tekst met een half
   scherm leegte ernaast, en weet je halverwege niet meer wat er gevraagd werd. */
.vraag{
  border-bottom:1px solid var(--hairline);padding:44px 28px 50px;scroll-margin-top:72px;
  display:grid;grid-template-columns:minmax(240px,34%) minmax(0,1fr);gap:26px 44px;
  align-items:start;
}
.vraag-kop{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;position:sticky;top:84px}
.vraag-kop .nr{
  font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--ch-accent-tekst);padding-top:.55em;
}
.vraag-kop h2{
  font-size:clamp(1.4rem,2.4vw,2.05rem);letter-spacing:-.035em;line-height:1.1;
  overflow-wrap:break-word;
}
.proza{max-width:66ch;min-width:0}
@media(max-width:900px){
  .vraag{grid-template-columns:1fr;gap:18px}
  .vraag-kop{position:static;grid-template-columns:34px 1fr}
  .vraag-kop h2{font-size:clamp(1.45rem,4vw,2.1rem);max-width:24ch}
}
.proza p{margin-bottom:15px;color:var(--ink-soft);font-size:16.5px;line-height:1.72}
.proza p strong,.proza li strong{color:var(--ink);font-weight:600}
.proza h3.tussen{
  font-family:var(--font-head);font-size:1.06rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);margin:26px 0 9px;line-height:1.28;
}
.proza h3.tussen:first-child{margin-top:0}
/* Een begrip met zijn uitleg erachter. Het streepje dat de schrijver ervoor
   zette wordt hier een echte inspringing, zodat de begrippen naast elkaar
   staan in plaats van in de tekst te verdwijnen. */
.proza p.def{
  padding-left:18px;border-left:1px solid var(--haar-licht);
  margin-bottom:11px;
}
.proza p.def+p.def{margin-top:-4px}
.proza p.def strong,.proza p.def b{display:inline;color:var(--ink)}
.proza ul,.proza ol{margin:0 0 15px 20px;color:var(--ink-soft)}
.proza li{margin-bottom:7px;font-size:16.5px;line-height:1.7}
.proza a{color:var(--ch-tekst);overflow-wrap:anywhere}
.proza hr{border:none;border-top:1px solid var(--haar-licht);margin:26px 0}
.proza em,.proza i{font-style:italic}

/* Verder lezen binnen een vraag. Native details: werkt zonder javascript,
   staat in de zoekindex en is gewoon te printen. */
.diep{margin:6px 0 4px;border-top:1px solid var(--haar-licht)}
.diep>summary{
  list-style:none;cursor:pointer;padding:14px 0 4px;
  font-family:var(--font-head);font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--ink);
  display:flex;align-items:center;gap:10px;width:fit-content;
}
.diep>summary::-webkit-details-marker{display:none}
.diep>summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .2s;
}
.diep[open]>summary::after{rotate:225deg;translate:0 2px}
.diep>summary span{border-bottom:1px solid var(--haar-licht);padding-bottom:2px}
.diep>summary:hover span{border-bottom-color:var(--ink)}
.diep-in{padding-top:14px;border-left:2px solid var(--ch);padding-left:20px;margin-top:6px}
@media(max-width:520px){.diep-in{padding-left:14px}}

/* ---------------------------------------------------------- index-rijen */

.index-lijst{list-style:none}
.index-rij{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;
  padding:22px 28px;border-top:1px solid var(--hairline);
  text-decoration:none;color:var(--ink);
  transition:background .22s,color .22s;
}
.index-lijst li:last-child .index-rij{border-bottom:none}
.index-rij .nr{font-family:var(--font-head);font-size:12px;font-weight:500;color:var(--ink-soft);transition:color .22s}
.index-rij .naam{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.02;letter-spacing:-.035em;
  transition:transform .28s;overflow-wrap:break-word;
}
.index-rij .icon{width:1.3em;height:1.3em;opacity:0;translate:-8px 0;transition:opacity .28s,translate .28s}
.index-rij:hover{background:var(--ink);color:var(--paper)}
.index-rij:hover .nr{color:rgba(244,242,236,.72)}
.index-rij:hover .naam{transform:translateX(12px)}
.index-rij:hover .icon{opacity:1;translate:0 0}
@media(max-width:700px){.index-rij{grid-template-columns:40px 1fr auto;gap:12px;padding:18px 20px}}
.terug{padding:26px 28px 34px}

/* ------------------------------------------------------------------ boeken */

/* Er staan er altijd vier. Twee bij twee vult het net, drie laat een gat. */
/* De plank waar de omslagen op staan. Komt uit de oude site en past hier beter
   dan een leeg vlak: het is een boekenkast, en dat is precies wat dit blok is.
   De foto ligt eronder met de kleur van de chamber erover, zodat de omslagen
   bovenaan blijven en de tekst haar contrast van de kleurlaag krijgt en niet
   van de foto. */
#books{position:relative;isolation:isolate}
#books::before{
  content:"";position:absolute;inset:0;z-index:-2;
  /* Geen ../ : een url in een stijlblad lost op vanaf het STIJLBLAD en niet
     vanaf de pagina, en chambers.css staat in de wortel van de uploadmap. */
  background:url("images/books-shelf.webp") center/cover no-repeat;
}
#books::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--paper) 93%,transparent);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  #books::after{background:var(--paper);opacity:.93}
}
.boeken{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--hairline);
}
@media(max-width:820px){.boeken{grid-template-columns:1fr}}
.boek{
  display:grid;grid-template-columns:96px 1fr;gap:18px;
  padding:24px 28px;border-right:1px solid var(--haar-licht);border-bottom:1px solid var(--haar-licht);
}
.boek img{width:96px;height:auto;border:1px solid var(--haar-licht)}
.boek-leeg{width:96px;aspect-ratio:2/3;background:var(--haar-licht)}
.boek h3{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-bottom:8px}
.boek p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:12px}
.uit{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.uit:hover{color:var(--rust);border-bottom-color:var(--rust)}
.klein{padding:18px 28px 28px;font-size:12.5px;color:var(--ink-soft);max-width:62ch}
@media(max-width:520px){.boek{grid-template-columns:74px 1fr;gap:14px;padding:20px}.boek img,.boek-leeg{width:74px}}

/* ------------------------------------------------------------------ bronnen */

.bronnen{list-style:none;border-top:1px solid var(--hairline)}
.bronnen a{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:18px 28px;border-bottom:1px solid var(--haar-licht);
  text-decoration:none;color:var(--ink);font-size:15.5px;line-height:1.45;
  transition:background .2s,color .2s;
}
.bronnen li:last-child a{border-bottom:none}
.bronnen a:hover{background:var(--ink);color:var(--paper)}
.bronnen .icon{opacity:.55;align-self:center}
.bronnen b{font-weight:600}
.bronnen span{max-width:88ch}

/* --------------------------------------------------------------- seed-duo */

.duo{display:grid;grid-template-columns:1fr 1fr}
.duo-kol{padding:38px 28px 44px;border-right:1px solid var(--hairline)}
.duo-kol:last-child{border-right:none}
.duo-kol h2{font-size:clamp(1.7rem,4vw,2.8rem);margin:10px 0 14px;letter-spacing:-.04em}
.duo-kol p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:44ch;margin-bottom:22px}
.btn-ink{
  font-family:var(--font-head);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:99px;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--ink);background:var(--ink);color:#f7f4ec;
  transition:background .22s,color .22s,border-color .22s;
}
.btn-ink:hover{background:var(--ch);border-color:var(--ch);color:var(--ch-op)}
.btn-ink.ghost{background:transparent;color:var(--ink)}
.btn-ink.ghost:hover{background:var(--ink);color:#f7f4ec}
@media(max-width:760px){
  .duo{grid-template-columns:1fr}
  .duo-kol{border-right:none;border-bottom:1px solid var(--hairline)}
  .duo-kol:last-child{border-bottom:none}
}

/* ------------------------------------------------------- andere chambers */

/* Lucht tussen de deuren. Ze stonden tegen elkaar aan met alleen een haarlijn
   ertussen, en dan lopen zeven foto's optisch in elkaar over tot één band. */
.anderen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;padding:0 28px 30px;
}
.ander{
  position:relative;aspect-ratio:4/5;overflow:hidden;text-decoration:none;
  border:1px solid var(--haar-licht);
}
.ander img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ander:hover img{transform:scale(1.07)}
.ander::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(8,8,6,.88))}
/* De naam krijgt zijn eigen donkere ondergrond en leunt niet op het verloop
   erboven. Een verloop is een pseudo-element: niet te meten, en het staat of
   valt met hoe licht de foto op die plek toevallig is. */
.ander span{
  position:absolute;left:12px;bottom:11px;z-index:1;color:#fff;
  background:rgba(8,8,6,.8);padding:5px 11px;border-radius:99px;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
}
@media(max-width:700px){.anderen{grid-template-columns:1fr 1fr;gap:12px;padding:0 20px 24px}}

/* ------------------------------------------------------------------ voet */

footer{border-top:1px solid var(--hairline)}
.voet-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-bottom:1px solid var(--hairline)}
.voet-kolom{padding:38px 28px;border-right:1px solid var(--hairline)}
.voet-kolom:last-child{border-right:none}
.voet-kolom img{height:56px;width:auto;margin-bottom:18px}
.voet-kolom h2{
  font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);margin-bottom:15px;
}
.voet-kolom a{display:block;color:var(--ink);text-decoration:none;font-size:.9rem;margin-bottom:9px;width:fit-content}
.voet-kolom a:hover{color:var(--rust);text-decoration:underline}
.voet-kolom p{color:var(--ink-soft);font-size:.86rem;max-width:32ch;line-height:1.6}
.voet-onder{padding:20px 28px 30px;display:flex;align-items:center;gap:0 14px;flex-wrap:wrap}
.voet-onder .caption{order:1}

/* Merken en copyright: één teken, en de tekst pas als iemand erom vraagt.
   De volledige regel is juridisch nuttig maar visueel veel te zwaar om onder
   elke pagina te hangen. Native <details>: geen javascript, wel indexeerbaar. */
.merkinfo{order:1;margin-left:-6px}
.merkinfo>summary{
  list-style:none;cursor:pointer;width:18px;height:18px;border-radius:50%;
  border:1px solid currentColor;opacity:.45;box-sizing:border-box;color:var(--ink-soft);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
  font-size:12px;line-height:16px;text-align:center;
}
.merkinfo>summary::-webkit-details-marker,.merkinfo>summary::marker{display:none;content:''}
.merkinfo>summary:hover,.merkinfo[open]>summary{opacity:1}
.merkinfo[open]{flex-basis:100%;margin-left:0}
.merkinfo .tm-note{margin-top:10px}

.voet-top{
  order:2;margin-left:auto;font-family:var(--font-head);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--haar-licht);padding-bottom:2px;
}
.voet-top:hover{border-bottom-color:var(--ink)}

/* De deur naar boven staat niet meer hier maar in seed/omhoog.js, want
   de homepage en de losse pagina's laden deze stylesheet niet. */
.tm-note{font-size:11.5px;line-height:1.6;color:var(--ink-soft);display:block;margin-top:10px;max-width:78ch}
@media(max-width:840px){
  .voet-raster{grid-template-columns:1fr 1fr}
  .voet-kolom:first-child{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--hairline)}
}
@media(max-width:520px){
  .voet-raster{grid-template-columns:1fr}
  .voet-kolom{border-right:none;border-bottom:1px solid var(--hairline)}
  .voet-kolom:last-child{border-bottom:none}
}

/* ---------------------------------------------------------- smalle ruimte */

@media(max-width:520px){
  .held,.held-kamer{padding-left:20px;padding-right:20px}
  .blok-kop,.lede,.vraag,.inhoud,.klein,.terug,.voet-kolom,.voet-onder,.duo-kol{padding-left:20px;padding-right:20px}
  .bronnen a{padding-left:20px;padding-right:20px}
  .held-nr{right:-8px;opacity:.2}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ander:hover img,.index-rij:hover .naam{transform:none}
}

@media print{
  nav,.skip,.anderen,.duo,.inhoud{display:none}
  .held{min-height:auto;background:none;color:var(--ink);padding:0 0 20px}
  .held-beeld,.held-nr{display:none}
  .diep[open],.diep{display:block}
  .diep-in{border-left:none;padding-left:0}
  body{background:#fff}
}

/* ============================================================================
   Wereldsignalen — de blokken waar een kamer iets vraagt
   ----------------------------------------------------------------------------
   Staan tússen het lezen in, niet eronder. Een kamer is een wereld, geen
   formulier; daarom heeft een blok de vorm van een pauze in de tekst en niet
   die van een invulvak.

   Wat hier bewust ontbreekt: elke vorm van score. Geen balk, geen percentage,
   geen "nog 3 te gaan". Zie seed/wereld.js voor waarom.

   HET WOORD BOVEN DE KOP, NIET ERNAAST. Eerste versie zette het label in een
   kolom van 34px -- die maat is gemaakt voor een nummer van twee cijfers, en
   "question" past daar niet in. Het liep over de kop heen. Nu staat het erboven,
   zoals een kanttekening.
   ========================================================================== */
.signaal{
  border-bottom:1px solid var(--hairline);padding:38px 28px 42px;
  display:grid;grid-template-columns:minmax(240px,34%) minmax(0,1fr);gap:22px 44px;
  align-items:start;
  background:var(--sig-op,rgba(17,17,17,.022));
}
.signaal[hidden]{display:none}

/* Blijft staan terwijl het antwoord langsschuift, net als bij de gewone
   vraagsecties -- anders weet je halverwege niet meer waar je op antwoordt. */
.signaal-kop{position:sticky;top:84px}
.signaal-kop .merk{
  display:block;margin-bottom:9px;
  font-family:var(--font-head);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--sig-tekst,var(--ink-soft));
}
.signaal-kop h2{
  font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:-.03em;line-height:1.14;
  overflow-wrap:break-word;
}
.signaal-in{max-width:66ch;min-width:0}
.signaal-in>p{margin-bottom:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.68}
/* Eén regel context boven de keuzes. Meer dan één regel en het blok gaat er
   uitzien als iets wat je eerst moet doorlezen -- en dan klik je niet. */
.signaal-in>p.lead{margin-bottom:16px;max-width:52ch}
.signaal-in>p b{color:var(--ink);font-weight:600}

/* ---- kleur per blok --------------------------------------------------------
   De inhoudsvragen die er al stonden houden de kleur van de chamber
   (--ch-accent-tekst op het nummer). De blokken die wij erbij zetten hebben een
   eigen familie, zodat je aan de kleur ziet of de pagina iets vertelt of iets
   vraagt. Elke tint is een vlak van hooguit 4%; de tekst blijft inkt, want een
   merkkleur onder lopende tekst haalt de contrasteis niet. */
.signaal.t-a{--sig-op:rgba(42,112,119,.055); --sig-tekst:hsl(188 62% 25%)}
.signaal.t-b{--sig-op:rgba(230,138,60,.075); --sig-tekst:hsl(30 72% 32%)}
.signaal.t-c{--sig-op:rgba(30,120,80,.055);  --sig-tekst:hsl(162 60% 24%)}
.signaal.t-d{--sig-op:rgba(168,73,47,.055);  --sig-tekst:hsl(12 57% 36%)}
.signaal.t-e{--sig-op:rgba(74,111,165,.06);  --sig-tekst:hsl(217 45% 36%)}

/* Eén rij = één ding waar je op reageert. Bij een blok met vier momenten zijn
   het er vier; bij een enkele vraag één. */
.keuze{margin:0 0 16px}
.keuze:last-child{margin-bottom:0}
.keuze .wat{font-size:15px;color:var(--ink-soft);line-height:1.6;margin-bottom:9px}
.keuze .wat b{color:var(--ink);font-weight:600}
/* Het beroep onder een archetype is een voorbeeld, geen kop. Kleiner en zachter,
   want de groep is de vraag en het beroep alleen de illustratie. */
.keuze .wat .voorbeeld{display:inline-block;margin-top:4px;font-size:13.6px;color:var(--ink-soft)}
.keuze .knoppen{display:flex;flex-wrap:wrap;gap:7px}
.keuze button{
  font-family:var(--font-body);font-size:13.5px;font-weight:500;
  padding:8px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--paper);color:var(--ink);
  transition:background .15s,color .15s;
}
.keuze button:hover{background:var(--ink);color:var(--paper)}
.keuze button.gekozen{background:var(--ink);color:var(--paper);font-weight:600}
.keuze.heeft .wat{color:var(--ink)}

/* De regel onder een blok: waarom dit gevraagd wordt, of wat een antwoord
   níét betekent. Die zin is geen bijzaak -- hij is de reden dat we dit
   überhaupt mogen vragen. */
.signaal .rand{
  margin-top:16px;padding-top:12px;border-top:1px dashed var(--haar-licht);
  font-size:13.6px;color:var(--ink-soft);line-height:1.6;
}
.signaal .rand b{color:var(--ink);font-weight:600}

/* "Go deeper", maar dan bij een vraag: meer van hetzelfde soort, voor wie er
   meer van wil zien. Zelfde gebaar als .diep in de lopende tekst, andere
   aanleiding. */
.signaal .meer{margin-top:16px;border-top:1px solid var(--haar-licht);padding-top:12px}
.signaal .meer>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--ink);
}
.signaal .meer>summary::-webkit-details-marker{display:none}
.signaal .meer>summary::after{
  content:'+';font-size:15px;font-weight:500;color:var(--sig-tekst,var(--ink-soft));
}
.signaal .meer[open]>summary::after{content:'−'}  /* echte min, geen escape */
.signaal .meer>summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.signaal .meer-in{padding-top:12px}
.signaal .meer-in p{font-size:14.4px;color:var(--ink-soft);line-height:1.66;margin-bottom:10px}
.signaal .meer-in ul{margin:0 0 10px 18px;font-size:14.4px;color:var(--ink-soft);columns:2;column-gap:28px}
.signaal .meer-in li{margin-bottom:4px;break-inside:avoid}
@media(max-width:700px){.signaal .meer-in ul{columns:1}}

.eigen-vraag{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.eigen-vraag input{
  flex:1 1 260px;min-width:0;font:inherit;font-size:15px;padding:10px 13px;
  border:1px solid var(--hairline);border-radius:10px;background:#fff;color:var(--ink);
}
.eigen-vraag input:focus{outline:3px solid var(--ink);outline-offset:2px}
.eigen-vraag button{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;padding:10px 16px;
  border-radius:10px;border:1px solid var(--hairline);background:var(--ink);color:var(--paper);cursor:pointer;
}
.eigen-vraag button:hover{background:var(--rust);border-color:var(--rust)}
ul.mijn-vragen{margin:12px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink-soft)}
ul.mijn-vragen li{margin-bottom:5px}

.wereld-stand{
  font-family:var(--font-head);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-soft);
}

@media(max-width:860px){
  .signaal{grid-template-columns:1fr;gap:16px;padding:32px 22px 36px}
  .signaal-kop{position:static}
}

/* Meerkeuze: elk antwoord is zijn eigen rij, want je mag er meer dan één
   aanzetten en ze los weer uitzetten. Visueel is het één rij pillen. */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips .keuze{margin:0}

/* Een label dat de schermlezer wel voorleest en de pagina niet toont. Het veld
   heeft een placeholder, maar een placeholder is geen label. */
.visueel-weg{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================================
   Ritme in een kamer
   ----------------------------------------------------------------------------
   Een kamerpagina had zeventien secties achter elkaar waarvan er veertien in
   exact hetzelfde tweekoloms-raster stonden, zonder één beeld, tien schermen
   lang. Dat leest niet als een wereld maar als een formulier met alinea's.

   Deze vier middelen staan alle vier al ergens op de site; ze zijn hier alleen
   nog niet gebruikt. Ze kosten geen nieuwe kopij: de zinnen komen uit de tekst
   van de kamer zelf en de woorden in de band komen uit de vaardigheden die we
   al hebben.
   ========================================================================== */

/* ---- de adempauze: één zin, volle breedte, niets te doen ---- */
.kamer-band{
  border-bottom:1px solid var(--hairline);padding:72px 28px 76px;
  display:flex;justify-content:center;
}
.kamer-band p{
  font-family:var(--font-head);font-weight:500;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.7rem,4.4vw,3.4rem);max-width:19ch;text-align:center;
  color:var(--ink);
}
.kamer-band p em{font-style:normal;color:var(--ch-tekst)}

/* Dezelfde band, omgekeerd. Bewust var(--ink) en niet --ch-op: dat laatste is
   per chamber ingevuld en is lang niet overal donker -- Energy zet hem op
   #111, maar de terugval is juist licht. Inkt met papier erop haalt overal
   16:1 en verrast niemand. */
.kamer-band.donker{background:var(--ink);border-bottom-color:var(--ink)}
.kamer-band.donker p{color:var(--paper)}
/* NIET var(--ch-accent). Die is per chamber ingevuld voor een lichte
   achtergrond -- bij Energy is hij #005566, en dat haalt op inkt 2,24:1. Op een
   donkere band moet het accent licht zijn, en --spark is de enige kleur waarvan
   we weten dat hij dat op alle 48 kamers is. Gemeten: 7,1:1. */
.kamer-band.donker p em{color:var(--spark)}

/* ---- de woordenband ----
   Zes kopieën en een verschuiving van precies één kopie: minder kopieën geeft
   een gat zodra de band smaller is dan het scherm, en dat is precies de fout
   die op de homepage twee keer gemaakt is. */
/* De achtergrond is NIET var(--ch-op). Die variabele heet "op" maar is geen
   lichte tint: Energy zet hem op #111. Ik zette hier dus inkt op inkt, en mijn
   eigen meting liep eromheen omdat de span kinderen heeft -- de controleloop
   ving het wel. Tweede keer deze sessie dat --ch-op me pakt; hij is per chamber
   ingevuld en er is geen enkele garantie dat hij licht is. */
.kamer-woorden{
  overflow:hidden;border-bottom:1px solid var(--hairline);padding:20px 0;
  background:rgba(17,17,17,.035);
}
.kamer-woorden-baan{
  display:flex;width:max-content;white-space:nowrap;
  animation:kamerloop 26s linear infinite;
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:-.03em;color:var(--ink);
}
.kamer-woorden-baan span{display:flex}
.kamer-woorden-baan i{font-style:normal;margin:0 .5em;color:var(--ch-tekst)}
@keyframes kamerloop{from{transform:translateX(-16.6667%)}to{transform:none}}

/* ---- de blokken laten wisselen ----
   De vraag staat om en om links en rechts, zodat het oog iets te doen heeft
   en niet veertien keer dezelfde sprong maakt. */
.signaal.gespiegeld{grid-template-columns:minmax(0,1fr) minmax(240px,34%)}
.signaal.gespiegeld .signaal-kop{order:2}
@media(max-width:860px){
  .signaal.gespiegeld{grid-template-columns:1fr}
  .signaal.gespiegeld .signaal-kop{order:0}
}

/* ---- het grote cijfer in de kop van een kamer ----
   De chamber-pagina heeft er al een; de kamer had niets. Geen foto, want die
   bestaan niet voor 48 kamers -- en 48 foto's laten maken is een project. */
.held-kamer{position:relative;overflow:hidden}
.held-kamer .held-nr{
  position:absolute;right:18px;bottom:-.18em;top:auto;translate:none;
  font-size:clamp(6rem,19vw,15rem);opacity:.28;
}

/* Een kamer mét beeld krijgt meer hoogte -- anders is de foto een streepje.
   De kleurlaag is dezelfde als op de chamber-pagina: links bijna dicht, zodat
   het contrast van de kleur komt en niet van de foto. Wat er per kamer wél
   verschilt is de UITSNEDE: zes kamers uit dezelfde chamber delen hun kleur,
   dus het beeld en de uitsnede moeten het verschil maken. */
.held-kamer.met-beeld{min-height:62svh;align-items:flex-end;padding-top:150px}
.held-kamer.met-beeld .held-nr{opacity:.2}

/* Het Wikipedia-merkje in een bronnenlijst. Staat vóór de tekst, zodat je ziet
   waar je heen gaat voordat je klikt -- de externe pijl erachter zegt alleen
   DAT je de site verlaat, niet waarheen. */
/* Het Wikipedia-logo staat vóór de naam en blijft ernaast staan.
   .bronnen a is een flex met justify-content:space-between -- daardoor werden
   het merkje en de naam naar de twee uiteinden van de regel geduwd. De naam
   krijgt daarom margin-right:auto: dan houden merkje en naam elkaar vast en
   wordt alleen de externe pijl naar rechts geschoven. */
.bronnen .merk-bron{flex:none;width:18px;height:18px;align-self:center;opacity:.8;margin-right:-10px}
.bronnen span{margin-right:auto}
/* Het logo is grijswaarden, dus omkeren volstaat als de regel donker wordt. */
.bronnen a:hover .merk-bron{filter:invert(1)}


/* ============================================================================
   De kluis rechtsonder
   ----------------------------------------------------------------------------
   Blijft staan terwijl je verder leest, zodat je op elk moment kunt zien wat je
   bewaarde en er ook heen kunt. Verschijnt pas als er iets ligt: een lege kluis
   op je eerste bezoek is ruis.

   Het getal is een bonnetje, geen score. Er staat nooit een maximum naast en er
   is geen balk die vol moet -- zie kluis.js voor waarom dat hier uitmaakt.
   ========================================================================== */
/* Rechtsonder staat ook de knop naar boven (.omhoog, 44px op right:26 bottom:26).
   De kluis moet daar niet overheen vallen, dus hij begint erboven. */
.kluis{position:fixed;right:18px;bottom:82px;z-index:120;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
/* De knop hoort onderaan te blijven staan; paneel en bericht komen erboven.
   In de HTML staat de knop in het midden, dus hier de volgorde vastleggen in
   plaats van de opbouw te verdraaien. */
.kluis-paneel{order:1}
.kluis-melding{order:2}
.kluis-knop{order:3}
.kluis>*{pointer-events:auto}

.kluis-melding{
  max-width:min(280px,72vw);padding:10px 14px;border-radius:12px;
  background:var(--ink);color:var(--paper);font-size:13.5px;line-height:1.4;
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;
}
.kluis-melding.zichtbaar{opacity:1;transform:none}

.kluis-knop{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;
  padding:10px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--paper);color:var(--ink);
  box-shadow:0 2px 0 var(--hairline);
}
.kluis-knop:hover{background:var(--ink);color:var(--paper)}
.kluis-knop .icon{width:17px;height:17px}
.kluis-aantal{
  min-width:21px;padding:1px 6px;border-radius:99px;
  background:var(--ink);color:var(--paper);font-size:12px;font-variant-numeric:tabular-nums;
}
.kluis-knop:hover .kluis-aantal{background:var(--paper);color:var(--ink)}

.kluis-paneel{
  width:min(320px,84vw);max-height:min(60vh,420px);overflow:auto;
  border:1px solid var(--hairline);border-radius:14px;background:var(--paper);
  box-shadow:0 3px 0 var(--hairline);padding:14px 16px 12px;
}
.kluis-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kluis-kop b{font-family:var(--font-head);font-size:14px}
.kluis-sluit{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:0 2px}
.kluis-sluit:hover{color:var(--ink)}
.kluis-paneel ul{list-style:none;margin:0;padding:0}
.kluis-paneel li{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--haar-licht);font-size:13.4px;
}
.kluis-paneel li:last-child{border-bottom:none}
.kluis-paneel li b{font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.kluis-paneel li span{color:var(--ink-soft);font-size:12px;white-space:nowrap}

/* Op een telefoon alleen het slotje: "Your Vaultlet" naast een knop van 40px
   duwt de kluis over het halve scherm, en het slotje met het aantal zegt
   hetzelfde. De naam blijft wel in de knop staan voor de schermlezer. */
@media(max-width:560px){
  .kluis{right:12px;bottom:76px}
  .kluis-knop{padding:11px 12px;gap:7px}
  .kluis-knop .kluis-tekst{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .kluis-paneel{width:min(300px,calc(100vw - 24px))}
}
@media(prefers-reduced-motion:reduce){.kluis-melding{transition:none}}
@media print{.kluis{display:none}}

/* Het voetlogo anderhalf keer zo groot op een groot scherm.
   56 wordt 84. Alleen vanaf 900px: op een telefoon staat de voettekst onder
   elkaar en zou een logo van 84 pixels de eerste kolom opeten. */
@media (min-width: 900px) {
  .voet-kolom img { height: 84px; }
}