/* ─── Instellingen ──────────────────────────────────────────
   Kleuren en fonts komen uit site.md (als --kleur-… en --font-…).
   De waarden hieronder zijn alleen een vangnet als ze daar ontbreken. */
:root {
    --kleur-achtergrond: #fff;
    --kleur-tekst: #222;
    --kleur-koppen: var(--kleur-tekst);
    --kleur-accent: #8a5a00;
    --op-accent: #fff;
    --font-koppen: Georgia;
    --font-tekst: system-ui;

    /* Kleuren binnen een sectie; een sectie met achtergrond= of tekst= overschrijft ze */
    --vlak: var(--kleur-achtergrond);
    --tekst: var(--kleur-tekst);
    --koppen: var(--kleur-koppen);

    --breedte: 1200px;                          /* maximale breedte van de inhoud */
    --marge: 1.25rem;                           /* minimale ruimte tot de schermrand */
    --tussenruimte: clamp(1.5rem, 3vw, 2.5rem); /* ruimte tussen twee secties naast elkaar (per kant) */
    --ruimte: clamp(4rem, 9vw, 6.5rem);         /* ruimte boven en onder een sectie */
    --menu-h: 72px;
    --rond: 12px;

    /* Animatie bij het laden en scrollen */
    --fade: 5.5s;                            /* invagen van de hele pagina */
    --reveal-duration: .8s;                 /* duur van de fade-in per blok */
    --reveal-distance: 16px;                /* afstand die een blok omhoog schuift */
    --reveal-stagger: .15s;                 /* vertraging tussen blokken naast elkaar */
    --reveal-ease: cubic-bezier(.22, .61, .36, 1);
    --font-wait: 1000;                      /* max. ms wachten op fonts (gelezen door script.js) */
}

/* ─── Basis ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menu-h) + 1rem); }
body {
    font: 400 1.0625rem/1.7 var(--font-tekst), system-ui, sans-serif;
    color: var(--tekst);
    background: var(--kleur-achtergrond);
    -webkit-font-smoothing: antialiased;
    transition: opacity var(--fade) var(--reveal-ease);
}
/* Onzichtbaar tot het script klaar is (klasse .ready); als vangnet toch zichtbaar na 2s */
html:not(.ready) body { opacity: 0; animation: toon 0s 2s forwards; }
@keyframes toon { to { opacity: 1; } }

img { display: block; max-width: 100%; height: auto; border-radius: var(--rond); }
h1, h2, h3, h4 {
    font-family: var(--font-koppen), Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
    color: var(--koppen);
    text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
strong { font-weight: 600; }
mark { background: none; color: var(--kleur-accent); }
a { color: inherit; text-decoration-color: var(--kleur-accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ─── Rijen en secties ──────────────────────────────────── */
main { overflow-x: clip; }
.breedte, .rij { width: min(var(--breedte), 100% - 2 * var(--marge)); margin-inline: auto; }
.rij { display: grid; }
.rij.twee { grid-template-columns: calc(var(--deel, .5) * 100%) 1fr; }

.sectie {
    position: relative;
    isolation: isolate;
    padding-block: var(--ruimte);
    background: var(--vlak);
    color: var(--tekst);
    /* De achtergrond loopt door tot de schermrand: een schaduw van 100vmax breed in de
       sectiekleur, die clip-path boven en onder afknipt (en bij twee secties aan de binnenkant). */
    box-shadow: 0 0 0 100vmax var(--vlak);
    clip-path: inset(0 -100vmax);
    /* uitlijning= zet de tekst boven, in het midden of onder in de sectie */
    display: flex;
    flex-direction: column;
    justify-content: var(--uitlijning, start);
}
.twee > .sectie:first-child { padding-right: var(--tussenruimte); clip-path: inset(0 0 0 -100vmax); }
.twee > .sectie:last-child { padding-left: var(--tussenruimte); clip-path: inset(0 -100vmax 0 0); }
main > .rij:first-child .sectie { padding-top: calc(var(--menu-h) + var(--ruimte) * .75); }

/* Op een donkere achtergrond (bepaald door script.js) wordt de tekst licht */
.donker { --tekst: var(--kleur-achtergrond); --koppen: var(--kleur-achtergrond); }

/* Patroon: het bestand dient als sjabloon (mask), de kleur komt uit --patroonkleur.
   Voor schaal= wordt de laag kleiner gemaakt en daarna weer uitvergroot. */
.patroon::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: -100vmax;
    width: calc((100% + 200vmax) / var(--schaal, 1));
    height: calc(100% / var(--schaal, 1));
    transform: scale(var(--schaal, 1));
    transform-origin: 0 0;
    background: var(--patroonkleur, var(--tekst));
    mask: var(--patroon);
}

/* De kortste van twee secties blijft staan tijdens het scrollen (script.js zet .plakt) */
.plakt { position: sticky; top: calc(var(--menu-h) + 2rem); }

/* ─── Inhoud van een sectie ─────────────────────────────── */
.inhoud > * + * { margin-top: 1.25rem; }
.inhoud > .label + * { margin-top: .75rem; }
.inhoud > :is(p, ul, ol, blockquote) { max-width: 65ch; }
:is(h1, h2) + p { font-size: 1.15rem; color: color-mix(in srgb, var(--tekst) 78%, var(--vlak)); }

.inhoud ul { padding: 0; list-style: none; }
.inhoud ul li { position: relative; padding-left: 1.5rem; }
.inhoud ul li::before { content: ''; position: absolute; left: .2rem; top: .7em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--kleur-accent); }
.inhoud ol { padding-left: 1.5rem; }
.inhoud li + li { margin-top: .4rem; }

blockquote { padding-left: 1.25rem; border-left: 2px solid var(--kleur-accent); font: 1.3rem/1.5 var(--font-koppen), Georgia, serif; }

.label {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleur-accent);
}
.label::before { content: ''; width: 1.5rem; height: 2px; background: currentColor; }

/* Knoppen: de eerste in accentkleur, de volgende rustiger */
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knoppen a {
    padding: .75rem 1.5rem;
    border: 1.5px solid var(--kleur-accent);
    border-radius: 99px;
    background: var(--kleur-accent);
    color: var(--op-accent);
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s, background .2s;
}
.knoppen a:hover { filter: brightness(.92); }
.knoppen a + a { background: transparent; color: var(--tekst); border-color: color-mix(in srgb, var(--tekst) 30%, transparent); }
.knoppen a + a:hover { background: color-mix(in srgb, var(--tekst) 8%, transparent); }

.kaarten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.kaart {
    padding: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--tekst) 10%, transparent);
    border-radius: var(--rond);
    background: color-mix(in srgb, var(--vlak), #fff 55%);
}
.donker .kaart { background: color-mix(in srgb, var(--vlak), #fff 8%); }
.kaart > * + * { margin-top: .6rem; }

.tijdlijn { padding: 0; list-style: none; border-left: 2px solid color-mix(in srgb, var(--tekst) 15%, transparent); }
.tijdlijn > li { position: relative; padding: 0 0 2.5rem 2rem; }
.tijdlijn > li:last-child { padding-bottom: 0; }
.tijdlijn > li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: .35rem;
    width: 12px;
    height: 12px;
    border: 2px solid var(--kleur-accent);
    border-radius: 50%;
    background: var(--vlak);
}
.tijdlijn > li > * + * { margin-top: .4rem; }
.periode { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kleur-accent); }

/* ─── Menubalk ──────────────────────────────────────────── */
.menubalk {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--menu-h);
    background: color-mix(in srgb, var(--kleur-achtergrond) 90%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--kleur-tekst) 10%, transparent);
    transition: box-shadow .3s;
}
.menubalk.gescrold { box-shadow: 0 12px 32px rgb(0 0 0 / .08); }
.menubalk .breedte { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.merk { display: flex; align-items: center; gap: .75rem; font: 1.3rem var(--font-koppen), Georgia, serif; color: var(--kleur-koppen); text-decoration: none; }
.merk img { height: 44px; width: auto; border-radius: 0; }
.menubalk ul { display: flex; gap: .25rem; padding: 0; list-style: none; }
.menubalk nav a { display: block; padding: .45rem .9rem; border-radius: 6px; font-size: .95rem; font-weight: 500; text-decoration: none; }
.menubalk nav a:hover { background: color-mix(in srgb, var(--kleur-accent) 20%, transparent); }
.menuknop { display: none; padding: .5rem; border: 0; background: none; cursor: pointer; }
.menuknop span { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--kleur-tekst); transition: .3s; }
.open .menuknop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.open .menuknop span:nth-child(2) { opacity: 0; }
.open .menuknop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Footer ────────────────────────────────────────────── */
.footer { padding-block: 2.5rem; background: var(--vlak); color: var(--tekst); font-size: .95rem; }
.footer .breedte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }

/* ─── Animatie ──────────────────────────────────────────── */
.js .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
.reveal + .reveal, .sectie + .sectie .inhoud { transition-delay: var(--reveal-stagger); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body *, *::before { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ─── Mobiel: secties onder elkaar, menu achter een knop ── */
@media (max-width: 800px) {
    .rij.twee { grid-template-columns: 1fr; }
    .twee > .sectie:is(:first-child, :last-child) { padding-inline: 0; clip-path: inset(0 -100vmax); }
    main > .rij:first-child .sectie + .sectie { padding-top: var(--ruimte); }
    .plakt { position: static; }
    .menuknop { display: block; }
    .menubalk nav { display: none; position: absolute; top: var(--menu-h); inset-inline: 0; padding: 1rem var(--marge); background: var(--kleur-achtergrond); border-bottom: 1px solid color-mix(in srgb, var(--kleur-tekst) 10%, transparent); }
    .menubalk.open nav { display: block; }
    .menubalk ul { flex-direction: column; }
}