/* NAMIBIA – Discover Africa */
:root{
  --ink:#16110d; --ink2:#241a13; --sand:#f3ece0; --sand2:#e8dcc7; --paper:#fbf8f2;
  --ochre:#b4532a; --ochre-d:#8c3d1b; --gold:#c9a66b; --gold-d:#9a7a42;
  --tekst:#2a211a; --tekst2:#6a5b4c; --lijn:rgba(42,33,26,.16); --lijn-licht:rgba(255,255,255,.22);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--tekst);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(3rem,9vw,7rem);font-weight:400}
h2{font-size:clamp(2rem,4.5vw,3.2rem)}
h3{font-size:1.7rem}
p{margin:0 0 1.1em}
a{color:inherit}
img,svg{max-width:100%}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
.narrow{width:min(760px,100% - 3rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:.7rem 1.2rem;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;color:#fff;transition:background .35s,padding .35s;padding:1.3rem 0}
.hdr.solid{background:rgba(22,17,13,.94);backdrop-filter:blur(8px);padding:.7rem 0}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:.32em}
.brand small{font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-top:.35rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2.2rem}
.nav a{text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{border-color:var(--gold)}
.menu-btn{display:none;background:none;border:1px solid var(--lijn-licht);color:#fff;font:inherit;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;padding:.55rem 1rem;cursor:pointer}
@media(max-width:860px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:rgba(22,17,13,.97);display:none;padding:1rem 1.5rem 1.8rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:.4rem}
  .nav a{display:inline-block;padding:.7rem 0}
}

/* Hero */
.hero{position:relative;color:#fff;min-height:92vh;display:flex;align-items:flex-end;background:var(--ink) url(../images/scene-dunes.svg) center/cover no-repeat;isolation:isolate}
.hero.s-savanna{background-image:url(../images/scene-savanna.svg)}
.hero.s-night{background-image:url(../images/scene-night.svg)}
.hero.s-cult{background-image:linear-gradient(160deg,#2a120c,#7a3a1f 55%,#c98a52)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,7,5,.55) 0%,rgba(10,7,5,.05) 35%,rgba(10,7,5,.78) 100%)}
.hero-in{padding:9rem 0 5rem;max-width:760px}
.hero.kort{min-height:62vh}
.hero.kort h1{font-size:clamp(2.6rem,7vw,5rem)}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.hero .lead{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:300;max-width:46ch;color:rgba(255,255,255,.88);margin-bottom:2rem}
.scroll-hint{position:absolute;right:2rem;bottom:2.2rem;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);writing-mode:vertical-rl}
@media(max-width:700px){.scroll-hint{display:none}}

/* Knoppen */
.btn{display:inline-block;font:inherit;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:1rem 2rem;border:1px solid var(--gold);color:var(--ink);background:var(--gold);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);margin-left:.6rem}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.donker{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.donker:hover{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
@media(max-width:520px){.btn.ghost{margin:.8rem 0 0}}

/* Secties */
.sec{padding:6rem 0}
.sec.sand{background:var(--sand)}
.sec.donker{background:var(--ink);color:#f1e8d9}
.sec.donker .eyebrow{color:var(--gold)}
.sec.donker p{color:rgba(241,232,217,.82)}
.kop{max-width:640px;margin-bottom:3.2rem}
.kop.midden{text-align:center;margin-inline:auto}
.kop .eyebrow{color:var(--ochre)}
.kop p{color:var(--tekst2);font-size:1.08rem}
.sec.donker .kop p{color:rgba(241,232,217,.75)}
.rule{width:56px;height:1px;background:var(--gold);border:0;margin:1.6rem 0}
.kop.midden .rule{margin-inline:auto}
.split{display:grid;gap:4rem;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2.4rem}.sec{padding:4rem 0}}
.lead-serif{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.35;font-weight:400}

/* Cijfers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.stat{padding:2.4rem 1.2rem;text-align:center;border-right:1px solid var(--lijn)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;display:block;color:var(--ochre-d)}
.stat small{display:block;margin-top:.7rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst2)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--lijn)}}

/* Tegels */
.tiles{display:grid;gap:1.5rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;padding:1.8rem;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;background:var(--ink) var(--bg) center/cover}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,7,5,0) 30%,rgba(10,7,5,.82));transition:opacity .4s}
.tile::after{content:"";position:absolute;inset:0;z-index:-2;background:inherit;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile:hover::after{transform:scale(1.05)}
.tile .eyebrow{margin-bottom:.6rem;font-size:.65rem}
.tile h3{font-size:2rem;margin-bottom:.4rem}
.tile p{font-size:.92rem;color:rgba(255,255,255,.82);margin:0}
.tile .meer{margin-top:1.1rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bg-dunes{--bg:url(../images/scene-dunes.svg)}
.bg-savanna{--bg:url(../images/scene-savanna.svg)}
.bg-night{--bg:url(../images/scene-night.svg)}
.bg-kust{--bg:linear-gradient(160deg,#2c4a5a,#6c8a94 55%,#c8b898)}
.bg-cult{--bg:linear-gradient(160deg,#5a2418,#a8502b 60%,#d9a066)}
.bg-quiz{--bg:linear-gradient(160deg,#1c2a24,#3d5a47 60%,#8a9a70)}

/* Weetje */
.weetje{border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.6rem;margin:2rem 0}
.weetje b{display:block;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d);font-weight:600;margin-bottom:.4rem}
.weetje span{font-family:var(--serif);font-size:1.45rem;line-height:1.35;font-style:italic}
.sec.donker .weetje b{color:var(--gold)}
.weetje-slider{text-align:center;max-width:760px;margin-inline:auto}
.weetje-slider .tekst{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.35;font-style:italic;min-height:5.4em;display:flex;align-items:center;justify-content:center;margin:1.2rem 0 2rem}

/* Kaarten / lijsten */
.kolommen{display:grid;gap:3rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.kolommen{grid-template-columns:1fr;gap:2rem}}
.kolom{border-top:1px solid var(--gold);padding-top:1.3rem}
.kolom h3{font-size:1.5rem}
.kolom p{color:var(--tekst2);margin:0}
.sec.donker .kolom p{color:rgba(241,232,217,.75)}

/* Tabs / filters */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-bottom:2.6rem;border-bottom:1px solid var(--lijn)}
.tab{background:none;border:0;font:inherit;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst2);padding:.9rem 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ochre)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{color:var(--ink);border-color:var(--ochre)}

/* Dieren */
.dieren-lijst{display:grid;gap:0 4rem;grid-template-columns:1fr 1fr}
@media(max-width:860px){.dieren-lijst{grid-template-columns:1fr}}
.dier{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1rem;padding:1.8rem 0;border-top:1px solid var(--lijn)}
.dier .nr{font-family:var(--serif);font-size:1.6rem;color:var(--gold-d)}
.dier h3{margin:0 0 .15rem;font-size:1.7rem}
.dier .meta{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ochre);margin-bottom:.8rem;display:block}
.dier p{margin:0 0 .7rem;color:var(--tekst2);font-size:.97rem}
.dier .w{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--tekst);border-left:2px solid var(--gold);padding-left:.9rem;margin:.4rem 0 0}
.dier.weg{display:none}

/* Kaart */
.kaartbox{background:#dfe5e6;border:1px solid var(--lijn);padding:.5rem}
.kaartbox svg{display:block;width:100%;height:auto;max-height:640px}
.pin{cursor:pointer}
.pin .stip{fill:var(--ochre);stroke:#fff;stroke-width:2.5;transition:r .2s,fill .2s}
.pin .ring{fill:none;stroke:var(--ochre);stroke-width:1;opacity:.5}
.pin:hover .stip,.pin:focus .stip,.pin.actief .stip{fill:var(--ink);r:9}
.pin text{font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3.5px;pointer-events:none}
.info{background:var(--paper);border:1px solid var(--lijn);padding:2.2rem;min-height:300px}
.info .eyebrow{color:var(--ochre)}
.kaart-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:860px){.kaart-grid{grid-template-columns:1fr}}
details.plek{border-top:1px solid var(--lijn);padding:.2rem 0}
details.plek:last-child{border-bottom:1px solid var(--lijn)}
details.plek summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.5rem;padding:1rem 0;display:flex;justify-content:space-between;gap:1rem}
details.plek summary::-webkit-details-marker{display:none}
details.plek summary::after{content:"+";color:var(--gold-d);font-family:var(--sans);font-weight:300}
details[open].plek summary::after{content:"\2212"}
details.plek p{color:var(--tekst2);padding-bottom:1.2rem;max-width:62ch}
.seizoenen{display:grid;gap:2.4rem;grid-template-columns:1fr 1fr}
@media(max-width:760px){.seizoenen{grid-template-columns:1fr}}
.seizoen{border:1px solid var(--lijn);padding:2rem;background:var(--paper)}
.seizoen .maanden{font-family:var(--serif);font-size:2rem;margin-bottom:.4rem;display:block}
.seizoen ul{padding-left:1.1rem;margin:0;color:var(--tekst2)}
.inpak{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.inpak{grid-template-columns:1fr 1fr}}
.inpak button{background:var(--paper);border:0;font:inherit;text-align:left;padding:1.4rem;cursor:pointer;color:var(--tekst);min-height:140px}
.inpak button:hover{background:var(--sand)}
.inpak b{font-family:var(--serif);font-size:1.3rem;font-weight:500;display:block;margin-bottom:.4rem}
.inpak small{display:block;color:var(--tekst2);font-size:.88rem;line-height:1.5}
.inpak button.ok{box-shadow:inset 3px 0 0 #5a7a4a}
.inpak button.nee{box-shadow:inset 3px 0 0 var(--ochre)}

/* Tijdlijn */
.tijdlijn{position:relative;margin:0;padding:0;list-style:none}
.tijdlijn::before{content:"";position:absolute;left:7.5rem;top:.5rem;bottom:.5rem;width:1px;background:var(--gold)}
.tijdlijn li{display:grid;grid-template-columns:6.6rem 1fr;gap:0 2.4rem;padding:1.1rem 0;position:relative}
.tijdlijn li::before{content:"";position:absolute;left:7.5rem;top:1.7rem;width:9px;height:9px;border-radius:50%;background:var(--gold);transform:translateX(-4px)}
.tijdlijn .jaar{font-family:var(--serif);font-size:1.7rem;color:var(--gold)}
.tijdlijn h4{font-size:1.35rem;margin:0 0 .2rem;color:#fff}
.tijdlijn p{margin:0;font-size:.97rem}
@media(max-width:560px){.tijdlijn::before,.tijdlijn li::before{display:none}.tijdlijn li{grid-template-columns:1fr;gap:.2rem}}

/* Woorden */
.woorden{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
@media(max-width:700px){.woorden{grid-template-columns:1fr 1fr}}
.woord{padding:1.5rem;border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.woord b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--ochre-d)}
.woord span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst2)}

/* Quiz */
.quiz-kader{border:1px solid var(--lijn);background:#fff;padding:clamp(1.6rem,4vw,3.2rem)}
.balk{height:2px;background:var(--lijn);margin-bottom:2rem}
.balk div{height:100%;width:0;background:var(--ochre);transition:width .5s}
.q-teller{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tekst2)}
.q-vraag{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.6rem 0 1.8rem}
.antw-lijst{display:grid;gap:.7rem;margin-bottom:1.6rem}
.antw{font:inherit;text-align:left;background:var(--paper);color:var(--tekst);border:1px solid var(--lijn);padding:1rem 1.3rem;cursor:pointer;transition:border-color .2s,background .2s}
.antw:hover:not(:disabled){border-color:var(--ochre);background:#fff}
.antw.goed{border-color:#5a7a4a;background:#eef3ea}
.antw.fout{border-color:var(--ochre);background:#f8ece5}
.antw:disabled{cursor:default}
.uitleg{border-left:2px solid var(--gold);padding:.3rem 0 .3rem 1.2rem;margin-bottom:1.6rem;color:var(--tekst2)}
.score-groot{font-family:var(--serif);font-size:clamp(4rem,12vw,7rem);line-height:1;color:var(--ochre-d)}
.midden-tekst{text-align:center}
.verborgen{display:none!important}

/* Footer */
.ftr{background:var(--ink);color:rgba(241,232,217,.7);padding:4rem 0 2.5rem;font-size:.9rem}
.ftr-in{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.ftr-in{grid-template-columns:1fr}}
.ftr .brand{color:#fff;margin-bottom:1rem}
.ftr h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--gold)}
.ftr .onder{border-top:1px solid var(--lijn-licht);margin-top:2.5rem;padding-top:1.5rem;font-size:.78rem}

/* Beweging: rustig */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}