/* Steen en Boek — feuille unique. Base structurelle : squelette portail-rubriques (lu, jamais modifie).
   Rhabillage complet : palette claire, couple de polices inedit, vocabulaire bk- (boekbinden), module image. */

/* 1. Jetons */
:root{
  --papier:#eef0ea; --blad:#ffffff; --diep:#e2e7de; --inkt:#1e2620; --inkt-zacht:#4d5850;
  --lijn:#c7d0c4; --stempel:#8c3b2e; --linnen:#2f5d50; --op-stempel:#fbf9f4; --voet:#1e2620;
  --kop:"Sitka Small","Sitka Text","Sitka Subheading","Noto Serif",Georgia,serif;
  --tekst:"Trebuchet MS","Segoe UI","DejaVu Sans",Tahoma,sans-serif;
  --regie:Futura,"Century Gothic","URW Gothic","Avenir Next",sans-serif;
  --band:72rem; --maat:36rem; --lucht:2.6rem; --goot:1.7rem; --regel:1.62; --korps:1.02rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font:var(--korps)/var(--regel) var(--tekst);}
img{max-width:100%;height:auto;display:block}
a{color:var(--linnen)}
a:hover{color:var(--stempel)}
:focus-visible{outline:3px solid var(--stempel);outline-offset:2px}

/* 2. Ossature */
.bk-band{width:min(100% - 2.4rem,var(--band));margin-inline:auto}
.bk-band--maat{width:min(100% - 2.4rem,var(--maat))}
.bk-sprong{position:absolute;left:-9999px}
.bk-sprong:focus{position:static;display:inline-block;margin:.6rem;padding:.5rem .8rem;background:var(--inkt);color:var(--papier)}
.bk-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3. Kaft (en-tete) */
.bk-kaft{border-bottom:2px solid var(--inkt);background:var(--blad)}
.bk-kaft__binnen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;padding:1.1rem 0 .9rem}
.bk-etiket{display:block;text-decoration:none;color:inherit}
.bk-etiket__naam{display:block;font:700 1.55rem/1.1 var(--kop);letter-spacing:.01em}
.bk-etiket__regel{display:block;margin-top:.18rem;font:.72rem/1.3 var(--regie);letter-spacing:.13em;text-transform:uppercase;color:var(--inkt-zacht)}
.bk-rug{margin-left:auto}
.bk-rug__lijst{display:flex;flex-wrap:wrap;gap:.15rem 1.15rem;margin:0;padding:0;list-style:none}
.bk-rug__lijst a{display:inline-block;padding:.3rem 0;font:.78rem/1.4 var(--regie);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--inkt);border-bottom:2px solid transparent}
.bk-rug__lijst a:hover{border-bottom-color:var(--stempel)}
.bk-rug__lijst a[aria-current="page"]{border-bottom-color:var(--stempel);color:var(--stempel)}
.bk-vouw{display:none}

/* 4. Plano (heros) */
.bk-plano{position:relative;margin-top:1.6rem;background:var(--blad);border:1px solid var(--lijn)}
.bk-plano__beeld{width:100%;aspect-ratio:16/9;object-fit:cover}
.bk-plano__tekst{padding:1.5rem 1.4rem 1.7rem}
.bk-plano__boven{margin:0 0 .5rem;font:.72rem/1.3 var(--regie);letter-spacing:.14em;text-transform:uppercase;color:var(--stempel)}
.bk-plano__titel{margin:0 0 .7rem;font:700 clamp(1.7rem,4.2vw,2.5rem)/1.14 var(--kop)}
.bk-plano__inleiding{margin:0;max-width:44rem;font-size:1.08rem;color:var(--inkt-zacht)}
@media (min-width:60rem){
  .bk-plano{display:grid;grid-template-columns:58% 1fr;align-items:stretch}
  .bk-plano__beeld{height:100%;aspect-ratio:auto;min-height:23rem}
  .bk-plano__tekst{padding:2.4rem 2.1rem;align-self:center}
}

/* 5. Snede (titre de page interieure) */
.bk-snede{padding:2.1rem 0 1.2rem;border-bottom:1px solid var(--lijn)}
.bk-snede__boven{margin:0 0 .45rem;font:.72rem/1.3 var(--regie);letter-spacing:.14em;text-transform:uppercase;color:var(--stempel)}
.bk-snede__titel{margin:0 0 .6rem;font:700 clamp(1.55rem,3.6vw,2.2rem)/1.16 var(--kop);max-width:34ch}
.bk-snede__inleiding{margin:0;max-width:52ch;color:var(--inkt-zacht)}
.bk-snede__mentie{margin:.8rem 0 0;font:.74rem/1.4 var(--regie);letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-zacht)}

/* 6. Register (fil d'Ariane) — DANS le conteneur de la page */
.bk-register{padding:.85rem 0 0;font:.78rem/1.5 var(--regie);letter-spacing:.05em}
.bk-register ol{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.bk-register li::after{content:"›";margin-left:.35rem;color:var(--lijn)}
.bk-register li:last-child::after{content:""}
.bk-register a{color:var(--inkt-zacht)}
.bk-register [aria-current="page"]{color:var(--inkt)}

/* 7. Katern (section) */
.bk-katern{padding:2.4rem 0}
.bk-katern--diep{background:var(--diep);border-block:1px solid var(--lijn)}
.bk-katern__kop{margin:0 0 .35rem;font:700 1.28rem/1.2 var(--kop)}
.bk-katern__noot{margin:0 0 1.5rem;color:var(--inkt-zacht);max-width:56ch}

/* 8. Vitrine : une rubrique = image 32 % + texte */
.bk-vitrine{list-style:none;margin:0;padding:0}
.bk-vitrine__stuk{border-top:1px solid var(--lijn);padding:1.5rem 0}
.bk-vitrine__stuk:first-child{border-top:0}
.bk-vitrine__beeld{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--lijn)}
.bk-vitrine__titel{margin:.7rem 0 .45rem;font:700 1.22rem/1.25 var(--kop)}
.bk-vitrine__titel a{text-decoration:none;color:var(--inkt)}
.bk-vitrine__titel a:hover{color:var(--stempel);text-decoration:underline}
.bk-vitrine__uittreksel{margin:0 0 .7rem;color:var(--inkt-zacht)}
.bk-vitrine__stukken{margin:0;padding:0;list-style:none;font-size:.95rem}
.bk-vitrine__stukken li{padding:.22rem 0 .22rem .9rem;position:relative}
.bk-vitrine__stukken li::before{content:"";position:absolute;left:0;top:.72em;width:.42rem;height:1px;background:var(--stempel)}
@media (min-width:56rem){
  .bk-vitrine__stuk{display:grid;grid-template-columns:32% 1fr;gap:var(--goot);align-items:start}
  .bk-vitrine__titel{margin-top:0}
}

/* 9. Plank : le flux date */
.bk-plank{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
@media (min-width:52rem){.bk-plank{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem var(--goot)}}
.bk-plank__boek{display:grid;grid-template-columns:34% 1fr;gap:1rem;align-items:start;background:var(--blad);border:1px solid var(--lijn);padding:.75rem}
.bk-plank__beeld{width:100%;aspect-ratio:4/3;object-fit:cover}
.bk-plank__merk{margin:0 0 .3rem;font:.68rem/1.3 var(--regie);letter-spacing:.12em;text-transform:uppercase;color:var(--stempel)}
.bk-plank__titel{margin:0 0 .35rem;font:700 1.02rem/1.3 var(--kop)}
.bk-plank__titel a{text-decoration:none;color:var(--inkt)}
.bk-plank__titel a:hover{color:var(--stempel);text-decoration:underline}
.bk-plank__datum{margin:0;font:.72rem/1.4 var(--regie);letter-spacing:.07em;color:var(--inkt-zacht)}

/* 10. Blad : corps d'article */
.bk-blad{padding:1.8rem 0 2.6rem}
.bk-blad__beeld{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--lijn);margin-bottom:.5rem}
.bk-onderschrift{margin:0 0 1.6rem;font:.8rem/1.45 var(--regie);color:var(--inkt-zacht)}
.bk-tekst{max-width:var(--maat)}
.bk-tekst h2{margin:2rem 0 .6rem;font:700 1.3rem/1.25 var(--kop);padding-top:.7rem;border-top:2px solid var(--inkt)}
.bk-tekst h3{margin:1.5rem 0 .45rem;font:700 1.06rem/1.3 var(--kop)}
.bk-tekst p{margin:0 0 1rem}
.bk-tekst ul,.bk-tekst ol{margin:0 0 1.1rem;padding-left:1.2rem}
.bk-tekst li{margin-bottom:.35rem}
.bk-tekst blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--stempel);color:var(--inkt-zacht);font-style:normal}
.bk-tekst table{border-collapse:collapse;width:100%;font-size:.94rem}
.bk-tekst th,.bk-tekst td{border:1px solid var(--lijn);padding:.5rem .6rem;text-align:left;vertical-align:top}
.bk-tekst th{background:var(--diep);font-family:var(--regie);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.bk-tabelrol{overflow-x:auto;margin:0 0 1.3rem;-webkit-overflow-scrolling:touch}
.bk-chapo{margin:0 0 1.4rem;font-size:1.1rem;color:var(--inkt-zacht);max-width:var(--maat)}

/* 11. Kolofon de bas d'article + renvois */
.bk-noot{margin:2rem 0 0;padding:1rem 1.1rem;background:var(--blad);border:1px solid var(--lijn);max-width:var(--maat)}
.bk-noot__kop{margin:0 0 .4rem;font:.72rem/1.3 var(--regie);letter-spacing:.12em;text-transform:uppercase;color:var(--stempel)}
.bk-noot p{margin:0 0 .5rem;font-size:.93rem}
.bk-noot p:last-child{margin-bottom:0}
.bk-verder{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--lijn)}
.bk-verder__kop{margin:0 0 .6rem;font:.74rem/1.3 var(--regie);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.bk-verder__lijst{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
@media (min-width:46rem){.bk-verder__lijst{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem var(--goot)}}
.bk-verder__lijst a{font-family:var(--kop);font-weight:700;text-decoration:none;color:var(--inkt)}
.bk-verder__lijst a:hover{color:var(--stempel);text-decoration:underline}

/* 12. Terug (retour rubrique) */
.bk-terug{display:inline-block;margin-top:1.6rem;padding:.5rem .9rem;background:var(--inkt);color:var(--op-stempel);text-decoration:none;font:.76rem/1.3 var(--regie);letter-spacing:.1em;text-transform:uppercase}
.bk-terug:hover{background:var(--stempel);color:var(--op-stempel)}

/* 13. Voet */
.bk-voet{margin-top:2.6rem;background:var(--voet);color:#dfe4dd;padding:2.2rem 0 1.4rem}
.bk-voet a{color:#dfe4dd}
.bk-voet__raster{display:grid;gap:1.5rem}
@media (min-width:48rem){.bk-voet__raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.bk-voet__kop{margin:0 0 .5rem;font:.74rem/1.3 var(--regie);letter-spacing:.12em;text-transform:uppercase;color:#a9b3a8}
.bk-voet__lijst{margin:0;padding:0;list-style:none;font-size:.93rem}
.bk-voet__lijst li{margin-bottom:.3rem}
.bk-voet__tekst{margin:0;font-size:.93rem;color:#c6cec5}
.bk-voet__onder{margin-top:1.6rem;padding-top:.9rem;border-top:1px solid #3a4440;font-size:.82rem;color:#a9b3a8}

/* 14. Vouw : menu replie en mobile (plus de 4 entrees) */
@media (max-width:52rem){
  .bk-kaft__binnen{padding-bottom:.7rem}
  .bk-vouw{display:inline-block;margin-left:auto;padding:.42rem .8rem;background:var(--inkt);color:var(--op-stempel);border:0;font:.76rem/1.3 var(--regie);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .bk-rug{flex-basis:100%;margin-left:0}
  .bk-rug[data-open="nee"]{display:none}
  .bk-rug__lijst{flex-direction:column;gap:0;border-top:1px solid var(--lijn);margin-top:.6rem}
  .bk-rug__lijst li{border-bottom:1px solid var(--lijn)}
  .bk-rug__lijst a{display:block;padding:.62rem 0}
  .bk-plank__boek{grid-template-columns:38% 1fr}
}
@media (max-width:30rem){
  .bk-plank__boek{grid-template-columns:1fr}
  .bk-plank__beeld{aspect-ratio:16/9}
}