/* De Eik - stijlblad. Woordenschat: de eik (schors, kruin, tak, blad, loof, jaarring, wortel).
   Geen enkele externe bron: alleen systeemletters, geen CDN, geen script van derden. */

:root {
  /* kleur */
  --loof: #eef1e8;          /* paginafond, berkenlicht */
  --loof-diep: #e2e8d8;     /* afwisselende banen */
  --schors: #ffffff;        /* kaartvlak */
  --kern: #1b2419;          /* tekst */
  --kern-zacht: #55604e;    /* bijschriften, mentions */
  --mos: #24503a;           /* dominante: kop, hero, voet */
  --mos-diep: #163627;      /* hover en diepte */
  --mos-licht: #3a6d52;
  --eikel: #d2601a;         /* accent, cijfers, filets */
  --eikel-diep: #a94910;
  --lijn: #cbd4c0;
  --markering: #dde7d0;

  /* letter */
  --kop-letter: "Avenir Next", Avenir, "Century Gothic", "URW Gothic", "Trebuchet MS", "Segoe UI", sans-serif;
  --lees-letter: Charter, "Bitstream Charter", "Sitka Text", Constantia, "PT Serif", Georgia, serif;
  --merk-letter: Bahnschrift, "DIN Alternate", "PT Sans Narrow", "Liberation Sans Narrow", Tahoma, sans-serif;

  /* maat */
  --baan-max: 78rem;
  --mesure: 66ch;
  --rand-breedte: 16rem;
  --pas: 1.35rem;
  --interligne: 1.7;
  --straal: 8px;
  --straal-foto: 16px;
  --t1: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  --t2: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem);
  --t3: clamp(1.12rem, 1rem + 0.4vw, 1.32rem);
  --schaduw: 0 1px 2px rgba(22, 54, 39, .07), 0 8px 22px rgba(22, 54, 39, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--loof);
  color: var(--kern);
  font-family: var(--lees-letter);
  font-size: 1.0625rem;
  line-height: var(--interligne);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mos); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--eikel-diep); }

h1, h2, h3, h4 { font-family: var(--kop-letter); line-height: 1.18; letter-spacing: -.01em; margin: 0; }

::selection { background: var(--markering); }

:focus-visible { outline: 3px solid var(--eikel); outline-offset: 2px; }

.eik-baan { width: min(100% - 2.5rem, var(--baan-max)); margin-inline: auto; }

.eik-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.eik-sprong {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--mos); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--straal) 0;
}
.eik-sprong:focus { left: 0; }

/* ---------------------------------------------------------------- kruin (kop van de site) */
.eik-kruin { background: var(--mos); color: #f2f6ee; }
.eik-kruin__rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem;
  padding: .7rem 0;
}
.eik-merk { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.eik-merk__zegel { width: 32px; height: 32px; flex: none; }
.eik-merk__naam {
  font-family: var(--merk-letter); font-size: 1.42rem; letter-spacing: .13em;
  text-transform: uppercase; line-height: 1;
}
.eik-merk__lijn {
  display: block; font-family: var(--kop-letter); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: #a9c7ae; margin-top: .22rem;
}
.eik-takken { margin-left: auto; display: flex; flex-wrap: wrap; gap: .15rem .35rem; }
.eik-takken__tak {
  font-family: var(--kop-letter); font-size: .84rem; color: #dfe9d9; text-decoration: none;
  padding: .38rem .6rem; border-radius: var(--straal); letter-spacing: .01em;
}
.eik-takken__tak:hover { background: var(--mos-diep); color: #fff; }
.eik-takken__tak[aria-current="page"] { background: var(--eikel); color: #fff; }

/* ---------------------------------------------------------------- open plek (hero, een BAND) */
.eik-open { position: relative; isolation: isolate; overflow: hidden; }
.eik-open__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.eik-open__waas { position: absolute; inset: 0; background: rgba(21, 52, 37, .80); z-index: -1; }
.eik-open__kern { padding: 2.1rem 0 1.9rem; color: #f4f8ef; }
.eik-open__oog {
  font-family: var(--merk-letter); letter-spacing: .2em; text-transform: uppercase;
  font-size: .74rem; color: #f0a561; margin: 0 0 .5rem;
}
.eik-open__titel { font-size: var(--t1); max-width: 22ch; color: #fff; }
.eik-open__inleiding {
  max-width: 58ch; margin: .7rem 0 0; color: #dfe9d6; font-size: 1.06rem; line-height: 1.6;
}
.eik-open__meters { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.eik-meter { display: flex; align-items: baseline; gap: .45rem; }
.eik-meter__cijfer { font-family: var(--merk-letter); font-size: 1.5rem; color: #f0a561; line-height: 1; }
.eik-meter__woord {
  font-family: var(--kop-letter); font-size: .78rem; letter-spacing: .07em;
  text-transform: uppercase; color: #c7d8bd;
}

/* ---------------------------------------------------------------- bedden (secties) */
.eik-bed { padding: 1.9rem 0 .4rem; }
.eik-bed--gedekt { background: var(--loof-diep); padding-bottom: 1.9rem; margin-top: 1.6rem; }
.eik-bed__kop {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--mos); padding-bottom: .45rem; margin-bottom: 1.1rem;
}
.eik-bed__titel { font-size: var(--t2); }
.eik-bed__mentie { font-family: var(--kop-letter); font-size: .84rem; color: var(--kern-zacht); margin-left: auto; }

/* ---------------------------------------------------------------- loof (rubriektegels) */
.eik-loof {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.4rem), 1fr));
}
.eik-blad {
  background: var(--schors); border-radius: var(--straal-foto); overflow: hidden;
  box-shadow: var(--schaduw); display: flex; flex-direction: column;
}
.eik-blad__foto { aspect-ratio: 5 / 3; width: 100%; object-fit: cover; }
.eik-blad__lijf { padding: .75rem .85rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.eik-blad__titel { font-size: 1.08rem; }
.eik-blad__titel a { text-decoration: none; }
.eik-blad__titel a:hover { text-decoration: underline; }
.eik-blad__tekst { margin: 0; font-size: .93rem; color: var(--kern-zacht); line-height: 1.5; }
.eik-blad__tel {
  font-family: var(--merk-letter); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--eikel-diep);
}

/* ---------------------------------------------------------------- pad (gedateerde stroom) */
.eik-pad { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.eik-stap { background: var(--schors); border-radius: var(--straal-foto); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; }
.eik-stap__foto { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.eik-stap__lijf { padding: .65rem .8rem .9rem; display: flex; flex-direction: column; gap: .3rem; }
.eik-stap__hoofd { display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.eik-stap__rubriek {
  font-family: var(--merk-letter); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; background: var(--mos-licht); border-radius: 999px; padding: .12rem .5rem;
}
.eik-stap__datum { font-family: var(--merk-letter); font-size: .82rem; color: var(--kern-zacht); letter-spacing: .04em; }
.eik-stap__titel { font-size: 1.02rem; }
.eik-stap__titel a { text-decoration: none; }
.eik-stap__titel a:hover { text-decoration: underline; }
.eik-stap__resume { margin: 0; font-size: .9rem; color: var(--kern-zacht); line-height: 1.48; }

/* een bredere eerste kaart in de stroom */
.eik-stap--vedette { grid-column: span 2; }
.eik-stap--vedette .eik-stap__foto { aspect-ratio: 21 / 9; }
.eik-stap--vedette .eik-stap__titel { font-size: 1.3rem; }
@media (max-width: 46rem) { .eik-stap--vedette { grid-column: span 1; } }

/* ---------------------------------------------------------------- jaarring (uitgelicht dossier) */
.eik-jaarring {
  display: grid; gap: 1.2rem; align-items: center; background: var(--schors);
  border-radius: var(--straal-foto); overflow: hidden; box-shadow: var(--schaduw);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 52rem) { .eik-jaarring { grid-template-columns: minmax(0, 1fr); } }
.eik-jaarring__foto { width: 100%; height: 100%; min-height: 13rem; object-fit: cover; }
.eik-jaarring__lijf { padding: 1.2rem 1.4rem 1.5rem; }
.eik-jaarring__oog {
  font-family: var(--merk-letter); letter-spacing: .18em; text-transform: uppercase;
  font-size: .72rem; color: var(--eikel-diep); margin: 0 0 .4rem;
}
.eik-jaarring__titel { font-size: var(--t2); }
.eik-jaarring__titel a { text-decoration: none; }
.eik-jaarring__titel a:hover { text-decoration: underline; }
.eik-jaarring__tekst { color: var(--kern-zacht); }

/* ---------------------------------------------------------------- mos (beeldenstrook) */
.eik-mos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 1.1rem 0; }
.eik-mos__beeld { margin: 0; }
.eik-mos__beeld img { border-radius: var(--straal-foto); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.eik-mos__beeld figcaption { font-size: .82rem; color: var(--kern-zacht); margin-top: .35rem; line-height: 1.45; }

/* ---------------------------------------------------------------- kop van een binnenpagina */
.eik-kruimel {
  font-family: var(--kop-letter); font-size: .82rem; color: var(--kern-zacht);
  padding: .8rem 0 0; margin: 0;
}
.eik-kruimel a { color: var(--mos); }
.eik-kop { padding: .5rem 0 1.2rem; }
.eik-kop__titel { font-size: var(--t1); max-width: 24ch; }
.eik-kop__chapeau { max-width: var(--mesure); color: var(--kern-zacht); font-size: 1.08rem; margin: .7rem 0 0; }
.eik-kop__reperes {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: 0; margin: .8rem 0 0;
  font-family: var(--merk-letter); font-size: .82rem; letter-spacing: .05em; color: var(--kern-zacht);
}
.eik-kop__reperes li { border-left: 3px solid var(--eikel); padding-left: .5rem; }

/* ---------------------------------------------------------------- lessenaar (twee kolommen) */
.eik-lessenaar {
  display: grid; align-items: stretch; gap: 2rem;
  grid-template-columns: var(--rand-breedte) minmax(0, 1fr);
  padding-bottom: 2rem;
}
.eik-rand { position: relative; }
.eik-draad {
  position: sticky; top: 1rem; background: var(--schors); border-radius: var(--straal);
  padding: .9rem 1rem 1.1rem; box-shadow: var(--schaduw);
}
.eik-draad__kop {
  font-family: var(--merk-letter); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kern-zacht); margin: 0 0 .5rem;
}
.eik-draad__lijst { list-style: none; counter-reset: draad; margin: 0; padding: 0; }
.eik-draad__punt { counter-increment: draad; }
.eik-draad__punt > a {
  display: block; padding: .3rem 0 .3rem 1.9rem; position: relative; font-family: var(--kop-letter);
  font-size: .92rem; text-decoration: none; color: var(--kern); line-height: 1.35;
}
.eik-draad__punt > a::before {
  content: counter(draad, decimal-leading-zero); position: absolute; left: 0; top: .3rem;
  font-family: var(--merk-letter); font-size: .8rem; color: var(--eikel);
}
.eik-draad__punt > a:hover { color: var(--mos-diep); text-decoration: underline; }
.eik-draad__punt > a[aria-current="true"] { background: var(--markering); border-radius: var(--straal); }
.eik-rand__notitie {
  margin-top: .9rem; font-size: .86rem; color: var(--kern-zacht); border-left: 3px solid var(--lijn);
  padding-left: .7rem;
}

.eik-romp { max-width: var(--mesure); }
.eik-romp p, .eik-romp ul, .eik-romp ol { font-size: 1.05rem; }

.eik-beeld { margin: 0 0 1.6rem; }
.eik-beeld img { border-radius: var(--straal-foto); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.eik-beeld figcaption { font-size: .87rem; color: var(--kern-zacht); margin-top: .45rem; line-height: 1.5; }
.eik-beeld--breed img { aspect-ratio: 24 / 7; max-height: 20rem; }
@media (max-width: 40rem) { .eik-beeld--breed img { aspect-ratio: 16 / 9; max-height: none; } }

.eik-deel { margin: 0 0 1.9rem; padding-left: 1.1rem; border-left: 2px solid var(--lijn); }
.eik-deel__kop { font-size: var(--t3); display: flex; gap: .6rem; align-items: baseline; margin-bottom: .5rem; }
.eik-deel__rang { font-family: var(--merk-letter); color: var(--eikel); font-size: 1rem; }
.eik-deel p { margin: 0 0 .8rem; }

.eik-onthoud {
  background: var(--markering); border-radius: var(--straal); padding: .75rem .95rem .85rem;
  margin-top: .9rem;
}
.eik-onthoud__kop {
  font-family: var(--merk-letter); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mos-diep); margin: 0 0 .35rem;
}
.eik-onthoud__punten { margin: 0; padding-left: 1.1rem; }
.eik-onthoud__punten li { font-size: .96rem; margin-bottom: .18rem; }

.eik-tafel { overflow-x: auto; margin: 1.2rem 0; border-radius: var(--straal); border: 1px solid var(--lijn); }
.eik-tafel table { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--schors); }
.eik-tafel caption {
  text-align: left; font-family: var(--merk-letter); letter-spacing: .12em; text-transform: uppercase;
  font-size: .74rem; color: var(--kern-zacht); padding: .6rem .8rem;
}
.eik-tafel th, .eik-tafel td { text-align: left; padding: .5rem .8rem; border-top: 1px solid var(--lijn); font-size: .95rem; }
.eik-tafel th { font-family: var(--kop-letter); background: var(--loof-diep); }

.eik-brug {
  background: var(--schors); border-radius: var(--straal); padding: 1rem 1.15rem;
  box-shadow: var(--schaduw); margin-top: 1.4rem;
}
.eik-brug__kop { font-family: var(--merk-letter); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kern-zacht); margin: 0 0 .4rem; }
.eik-brug p { margin: 0 0 .5rem; font-size: .98rem; }
.eik-brug p:last-child { margin-bottom: 0; }

.eik-adres { font-family: var(--merk-letter); font-size: 1.3rem; letter-spacing: .03em; }

.eik-los { max-width: var(--mesure); padding-bottom: 2rem; }
.eik-los h2 { font-size: var(--t3); margin: 1.5rem 0 .5rem; }
.eik-los p { margin: 0 0 .8rem; }

/* ---------------------------------------------------------------- wortel (voet) */
.eik-wortel { background: var(--mos); color: #d8e5cf; margin-top: 2rem; }
.eik-wortel a { color: #eaf2e3; }
.eik-wortel__rij {
  display: grid; gap: 1.4rem; padding: 1.8rem 0 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.eik-wortel__kolom h2 {
  font-family: var(--merk-letter); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: #a9c7ae; margin: 0 0 .5rem;
}
.eik-wortel__kolom ul { list-style: none; margin: 0; padding: 0; }
.eik-wortel__kolom li { margin-bottom: .3rem; font-size: .93rem; }
.eik-wortel__onder {
  border-top: 1px solid rgba(255, 255, 255, .17); padding: .8rem 0 1.4rem;
  font-family: var(--merk-letter); font-size: .82rem; letter-spacing: .04em; color: #a9c7ae;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
}

/* ---------------------------------------------------------------- kleinere schermen */
@media (max-width: 60rem) {
  .eik-lessenaar { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .eik-draad { position: static; }
  .eik-romp { max-width: none; }
}
@media (max-width: 34rem) {
  .eik-baan { width: min(100% - 1.6rem, var(--baan-max)); }
  .eik-deel { padding-left: 0; border-left: 0; }
  .eik-open__kern { padding: 1.3rem 0 1.2rem; }
  .eik-open__inleiding { font-size: .97rem; line-height: 1.52; }
  .eik-open__meters { gap: .9rem; margin-top: .8rem; }
  .eik-bed { padding-top: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .eik-kruin, .eik-rand, .eik-wortel, .eik-brug { display: none; }
  body { background: #fff; }
  .eik-romp { max-width: none; }
}