/* Tot het uiterste van de aarde: Nederlandse zendelingen, van vroeger voor nu (zelfde basis als /generaals/) */
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --papier:#f4ecdc;
  --papier-2:#ebe0c9;
  --kaart:#fbf6ea;
  --inkt:#2b2118;
  --inkt-zacht:#5c4d3d;
  --goud:#a8803a;
  --goud-licht:#d2b06a;
  --nacht:#13232e;
  --nacht-2:#1c3342;
  --stempel:#8c3b2a;
  --lijn:#d8c7a4;
  --schaduw:0 1px 0 rgba(43,33,24,.06),0 10px 30px -14px rgba(43,33,24,.35);
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maat:40rem;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#1d1610;
    --papier-2:#261d15;
    --kaart:#2a2018;
    --inkt:#efe4cf;
    --inkt-zacht:#c4b49a;
    --goud:#d2b06a;
    --goud-licht:#e3c88d;
    --stempel:#d47a62;
    --lijn:#4a3b2c;
    --schaduw:0 10px 30px -14px rgba(0,0,0,.7);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font:400 1.0625rem/1.75 var(--serif);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--goud);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--inkt);color:var(--papier);padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:68rem;margin:0 auto;padding:0 1rem}
@media (min-width:40rem){.wrap{padding:0 1.5rem}}

/* Kleine letters met spatiëring, zoals op de omslag */
.label{font:600 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--goud)}

/* Bovenbalk */
.balk{background:var(--nacht);color:#efe4cf;border-bottom:1px solid #2e4a5c}
.balk__binnen{display:flex;align-items:center;gap:1rem;min-height:3.6rem;flex-wrap:wrap}
.merk{display:flex;flex-direction:column;text-decoration:none;line-height:1.15;padding:.5rem 0}
.merk b{font:600 1.05rem var(--serif)}
.merk small{font:500 .62rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--goud-licht)}
.balk nav{margin-left:auto;display:flex;gap:.25rem 1.1rem;flex-wrap:wrap;font:500 .85rem var(--sans)}
.balk nav a{text-decoration:none;color:#e6d8bd;padding:.3rem 0}
.balk nav a:hover,.balk nav a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--goud-licht)}
.balk .terug{color:var(--goud-licht)}
@media (max-width:39.99rem){.balk nav{margin-left:0;padding-bottom:.6rem;font-size:.82rem}}

/* Leesbalk */
.leesbalk{position:fixed;left:0;top:0;height:3px;width:0;background:var(--goud-licht);z-index:30}

/* Omslagblok: de donkere kaft met gouden kader */
.kaft{background:radial-gradient(ellipse at 50% 35%,#25465a 0,#13232e 55%,#0c171f 100%);color:#f3ead8;padding:2.2rem 0}
.kaft__kader{border:1px solid rgba(210,176,106,.55);outline:1px solid rgba(210,176,106,.25);outline-offset:6px;padding:2.5rem 1.25rem;text-align:center;margin:.4rem}
.kaft h1{font:600 clamp(2.3rem,7vw,4.4rem)/1.05 var(--serif);margin:.8rem 0 0;letter-spacing:-.01em}
.kaft .ondertitel{font:italic 400 clamp(1.05rem,2.6vw,1.35rem)/1.5 var(--serif);max-width:34rem;margin:1rem auto 0;color:#eadfc8}
.kaft .streep{width:6rem;height:1px;background:var(--goud-licht);margin:1.4rem auto}
.kaft blockquote{margin:0 auto;max-width:30rem;font:italic 400 1rem/1.6 var(--serif);color:#d9cbb0}
.kaft blockquote cite{display:block;font:normal .8rem var(--serif);margin-top:.3rem;color:#bfae8f}
.kaft .label{color:var(--goud-licht)}

/* Secties */
section{padding:3rem 0}
section+section{border-top:1px solid var(--lijn)}
.kop{max-width:var(--maat);margin:0 0 1.6rem}
.kop h2{font:600 clamp(1.6rem,4vw,2.2rem)/1.2 var(--serif);margin:.35rem 0 .6rem}
.kop p{margin:0;color:var(--inkt-zacht)}
.streepje{display:block;width:4.5rem;height:1px;background:var(--goud);margin:1rem 0}
.tekst{max-width:var(--maat)}
.tekst p{margin:0 0 1.1rem}

/* Kaartenbak: archiefkaarten per persoon */
.bak{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));list-style:none;padding:0;margin:0}
.kaartje{position:relative;background:var(--kaart);border:1px solid var(--lijn);box-shadow:var(--schaduw);padding:1.4rem 1.3rem 1.2rem;border-radius:3px;display:flex;flex-direction:column;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 1.74rem,rgba(168,128,58,.13) 1.74rem,rgba(168,128,58,.13) calc(1.74rem + 1px));background-position:0 3.4rem}
.kaartje::before{content:"";position:absolute;left:50%;bottom:.55rem;width:.7rem;height:.7rem;margin-left:-.35rem;border-radius:50%;background:var(--papier);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.kaartje .nr{font:600 .7rem var(--sans);letter-spacing:.18em;color:var(--goud);text-transform:uppercase}
.kaartje h3{font:600 1.3rem/1.25 var(--serif);margin:.35rem 0 .2rem}
.kaartje h3 a{text-decoration:none}
.kaartje h3 a::after{content:"";position:absolute;inset:0}
.kaartje .jaren{font:500 .85rem var(--sans);letter-spacing:.06em;color:var(--inkt-zacht)}
.kaartje p{margin:.7rem 0 1.2rem;font-style:italic;line-height:1.74rem}
.kaartje .stempel{position:absolute;top:1rem;right:.9rem;transform:rotate(-8deg);border:1.5px solid var(--stempel);color:var(--stempel);font:700 .66rem var(--sans);letter-spacing:.12em;padding:.15rem .45rem;border-radius:3px;opacity:.85;text-transform:uppercase}
.kaartje .lees{margin-top:auto;font:600 .8rem var(--sans);letter-spacing:.08em;color:var(--goud);padding-bottom:.6rem}
.kaartje:hover{transform:translateY(-2px);transition:transform .2s}

/* Kaart van Nederland */
.kaartvak{display:grid;gap:2rem;align-items:start}
@media (min-width:52rem){.kaartvak{grid-template-columns:minmax(16rem,27rem) 1fr}}
.nl{width:100%;max-width:27rem;margin:0 auto}
.nl .land{fill:var(--kaart);stroke:var(--goud);stroke-width:1}
.nl .punt circle{fill:var(--stempel);stroke:var(--kaart);stroke-width:1.5}
.nl .punt text{font:600 8px var(--sans);fill:var(--inkt);paint-order:stroke;stroke:var(--kaart);stroke-width:3px}
.nl .punt:hover circle,.nl .punt:focus circle{r:6}
.plekken{list-style:none;padding:0;margin:0;columns:1}
@media (min-width:36rem){.plekken{columns:2;column-gap:2rem}}
.plekken li{break-inside:avoid;margin:0 0 1rem;padding-left:1.1rem;position:relative}
.plekken li::before{content:"";position:absolute;left:0;top:.6rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--stempel)}
.plekken b{display:block;font:600 .95rem var(--serif)}
.plekken span{font-size:.92rem;color:var(--inkt-zacht)}

/* Tijdlijn */
.tijdlijn{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:2px solid var(--goud);max-width:var(--maat)}
.tijdlijn li{position:relative;margin:0 0 1.5rem;padding-left:.6rem}
.tijdlijn li::before{content:"";position:absolute;left:-1.95rem;top:.45rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--papier);border:2px solid var(--goud)}
.tijdlijn .jaar{font:700 1.05rem var(--sans);letter-spacing:.04em;color:var(--goud)}
.tijdlijn a{font-weight:600}
.tijdlijn p{margin:.1rem 0 0;color:var(--inkt-zacht);font-size:.97rem}

/* Boekblok */
.boek{display:grid;gap:2rem;align-items:start}
@media (min-width:46rem){.boek{grid-template-columns:15rem 1fr}}
.boek__omslag{box-shadow:0 18px 40px -18px rgba(0,0,0,.6);border-radius:2px 4px 4px 2px;max-width:15rem;margin:0 auto}
.boek h2,.boek h3{font:600 1.7rem/1.2 var(--serif);margin:.3rem 0 .4rem}
.knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0}
.knop{display:inline-flex;align-items:center;gap:.5rem;font:600 .9rem var(--sans);text-decoration:none;padding:.7rem 1.1rem;border-radius:3px;border:1px solid var(--goud);color:var(--inkt);background:transparent}
.knop--vol{background:var(--nacht);border-color:var(--nacht);color:#f3ead8}
@media (prefers-color-scheme:dark){.knop--vol{background:var(--goud);border-color:var(--goud);color:#1d1610}}
.knop:hover{border-color:var(--inkt)}
.klein{font-size:.85rem;color:var(--inkt-zacht)}

/* Inhoudsopgave met puntjes zoals in een oud boek */
.inhoud{list-style:none;padding:0;margin:0;max-width:var(--maat)}
.inhoud li{display:flex;align-items:baseline;gap:.4rem;padding:.35rem 0}
.inhoud a{text-decoration:none;font-weight:600}
.inhoud a:hover{text-decoration:underline}
.inhoud .stip{flex:1;border-bottom:1px dotted var(--goud);transform:translateY(-.3rem);min-width:1rem}
.inhoud .bij{font:500 .8rem var(--sans);color:var(--inkt-zacht);white-space:nowrap}
.inhoud em{font-weight:400}

/* Hoofdstuk */
.hoofd{background:var(--nacht);color:#f3ead8;padding:2.6rem 0 2.2rem;text-align:center}
.hoofd .label{color:var(--goud-licht)}
.hoofd h1{font:600 clamp(2rem,6vw,3.3rem)/1.1 var(--serif);margin:.7rem 0 .2rem}
.hoofd .ondertitel{font:italic 400 clamp(1.05rem,2.6vw,1.35rem)/1.4 var(--serif);color:#e6d8bd;margin:.3rem 0 0}
.hoofd .streep{width:5rem;height:1px;background:var(--goud-licht);margin:1.3rem auto}
.hoofd .feiten{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;font:500 .85rem var(--sans);color:#d6c7aa;letter-spacing:.04em}
.lezen{max-width:var(--maat);margin:0 auto;padding:2.6rem 1rem 1rem;font-size:1.09rem;line-height:1.8}
@media (min-width:40rem){.lezen{padding-left:0;padding-right:0}}
.lezen p{margin:0 0 1.15rem;hyphens:auto;-webkit-hyphens:auto}
.lezen>p:first-of-type::first-letter{float:left;font:600 3.9em/.82 var(--serif);margin:.08em .1em 0 0;color:var(--goud)}
.lezen h2{font:600 .82rem/1.5 var(--sans);letter-spacing:.18em;color:var(--goud);margin:2.6rem 0 .9rem;text-transform:uppercase}
.lezen h2::after{content:"";display:block;width:3rem;height:1px;background:var(--goud);margin-top:.6rem}

/* Dossier: wat vaststaat en wat verteld wordt */
.dossier{max-width:var(--maat);margin:2.5rem auto 0;background:var(--kaart);border:1px solid var(--lijn);box-shadow:var(--schaduw);padding:1.6rem 1.3rem 1.2rem;position:relative;border-top:4px double var(--goud)}
@media (min-width:40rem){.dossier{padding:1.8rem 2rem 1.4rem}}
.dossier h2{margin-top:0}
.dossier p{font-size:.98rem;line-height:1.7;margin:0 0 1rem}
.dossier strong{display:block;font:700 .78rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--stempel);margin-bottom:.15rem}
.dossier .stempel{position:absolute;top:-.9rem;right:1rem;transform:rotate(4deg);background:var(--kaart);border:1.5px solid var(--stempel);color:var(--stempel);font:700 .65rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.2rem .5rem;border-radius:3px}
.bronnen{max-width:var(--maat);margin:2.2rem auto 0;font-size:.9rem;line-height:1.6;color:var(--inkt-zacht)}
.bronnen h2{margin-top:0}
.bronnen ol{padding-left:1.6rem;margin:0}
.bronnen li{margin:0 0 .45rem}

/* Verder lezen */
.verder{max-width:var(--maat);margin:3rem auto 0;display:grid;gap:1rem;grid-template-columns:1fr 1fr;padding:0 1rem}
@media (min-width:40rem){.verder{padding:0}}
.verder a{display:block;text-decoration:none;border:1px solid var(--lijn);background:var(--kaart);padding:1rem;border-radius:3px}
.verder a:hover{border-color:var(--goud)}
.verder .label{display:block;margin-bottom:.2rem}
.verder b{font:600 1rem/1.3 var(--serif)}
.verder .volgende{text-align:right;grid-column:2}
.download{max-width:var(--maat);margin:2rem auto 0;padding:1.2rem 1rem;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;font:500 .9rem var(--sans)}
@media (min-width:40rem){.download{padding:1.2rem 0}}

/* Citaat */
.citaat{font:italic 400 clamp(1.15rem,3vw,1.45rem)/1.55 var(--serif);max-width:36rem;margin:0 auto;text-align:center}
.citaat cite{display:block;font:normal 600 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--goud);margin-top:.8rem}

/* Voet */
.voet{background:var(--nacht);color:#d9cbb0;margin-top:4rem;padding:2rem 0;font:400 .88rem/1.6 var(--sans)}
.voet a{color:#efe4cf}
.voet .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.voet p{margin:0}

@media print{
  .balk,.voet,.leesbalk,.verder,.download,.knoppen{display:none}
  body{background:#fff;color:#000}
  .hoofd{background:none;color:#000}
}
.boek h3.label{font:600 .72rem/1.4 var(--sans);letter-spacing:.2em;margin:2rem 0 .5rem}
.lezen .kop{margin-bottom:1.4rem}
.bak__kop{margin:2.2rem 0 1rem;font-size:.72rem}
.bak__kop:first-child{margin-top:0}
.bak__kop a{color:var(--inkt-zacht);text-decoration:none;letter-spacing:.06em;text-transform:none;font-weight:500;font-size:.85rem}

/* Wereldkaart */
.kaartvak--wereld{display:block}
.wereld{width:100%;max-width:none;margin:0 0 1.5rem;display:block;background:var(--papier-2);border:1px solid var(--lijn);border-radius:6px}
.wereld .land{fill:var(--kaart);stroke:var(--kaart);stroke-width:.8}
.wereld .kust{fill:none;stroke:var(--goud);stroke-width:.6}
.wereld .nl-land{fill:var(--goud);stroke:var(--goud);stroke-width:1.5}
.wereld .thuis{font:600 13px var(--sans);fill:var(--goud);paint-order:stroke;stroke:var(--kaart);stroke-width:3px}
.wereld .punt circle{fill:var(--stempel);stroke:var(--kaart);stroke-width:2}
.wereld .punt text{font:600 14px var(--sans);fill:var(--inkt);paint-order:stroke;stroke:var(--kaart);stroke-width:4px}
.wereld .punt:hover circle,.wereld .punt:focus circle{stroke:var(--goud);stroke-width:3}
@media (min-width:52rem){.kaartvak--wereld .plekken{columns:2;column-gap:2.5rem}}
.kaartvak--wereld .plekken li{break-inside:avoid}