@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

:root {
    /* Surface — navy-dominant, zoals de lustrumposters. De crème is het accent
       geworden: nav en footer zijn de crème banden van de poster, de rest is het
       navy vlak ertussen. */
    --bg: #122844;            /* paginabodem — de diepste navy van de poster */
    --bg-light: #1C3A5E;      /* hero en page-header, één stap lichter */
    --paper: #fdf5e6;
    --ink: #0a2236;           /* donkere tekst op crème vlakken */

    /* Brand — pulled from the new logo (180 rood, navy onderbalk, royal blue KNZ&RV, oranje WALHALLA) */
    --navy: #1C3A5E;          /* primary brand navy */
    --navy-deep: #122844;     /* shadow / deepest */
    --blue: #5688CC;          /* royal blue (logo) — 3,2:1 op navy: alleen groot/vet */
    --blue-deep: #3E6CB4;     /* 2,2:1 op navy — nooit op een navy vlak gebruiken */
    --blue-soft: #9DB8E2;     /* 5,7:1 op navy — dit is de linkkleur */
    --orange: #E87A36;        /* logo oranje (WALHALLA) — 4,0:1: alleen groot/vet */
    --orange-deep: #c95f1f;   /* darker hover */
    --red: #C32A2E;           /* logo rood — 2,0:1 op navy: alleen binnen crème vlakken */
    --red-deep: #9e2125;      /* darker red */
    --yellow: #5688CC;        /* legacy alias → maps to blue */
    --gold: #E87A36;          /* legacy alias → maps to orange */
    --pink: rgba(86,136,204,0.45); /* legacy alias → soft blue */
    --gold-dim: rgba(232,122,54,0.30);

    /* Tekst op het navy vlak. De dekkingen .9 en .66 komen letterlijk van de
       posters, waar ze de teaser en het onderschrift dragen. Vol crème op navy
       haalt 13,7:1 en is te fel voor lange tekst. */
    --text: rgba(253,245,230,0.9);
    --text-muted: rgba(253,245,230,0.66);

    /* Randen. Twee tokens, twee ondergronden — en dat verschil is de reden dat
       ze allebei bestaan:
         --border      crème, voor een rand OP het navy vlak
         --border-ink  inkt, voor een rand op een CRÈME vlak (kaart, paneel)
       Bij de navy-omslag kregen ze allebei een crème waarde. Daarmee betekende
       --border-ink hetzelfde als --border, terwijl de opmerkingen op de acht
       crème kaarten juist zeggen dat hij "de donkere tegenhanger" is. Eén
       token kan niet twee tegengestelde dingen betekenen: wie --border-ink op
       een crème kaart zet, verwacht een zichtbare rand, en kreeg er geen. */
    --border: rgba(253,245,230,0.16);
    --border-ink: rgba(10,34,54,0.14);

    /* Vlakken en tekst met een eigen reden om te veranderen. --surface-read heeft
       vandaag dezelfde waarde als --bg-light, en dat is geen verdubbeling: het ene
       volgt hoe ver een vlak van de bodem moet liften, het andere wat comfortabel
       leest over duizend woorden. */
    --surface-read: #1C3A5E;
    --on-navy: rgba(253,245,230,0.9);
    --on-navy-muted: rgba(253,245,230,0.66);
    --border-navy: rgba(253,245,230,0.16);

    --font-body: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
    --font-display: 'Jost', 'Avenir Next', Avenir, 'Century Gothic', 'Trebuchet MS', sans-serif;
}

html { background: var(--bg); min-height: 100%; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Doorschijnend beeldvlak ──────────────────────────────────────────────
   Eén op één overgenomen van lustrumposter-variant 3: foto naar grijstinten,
   navy waas van 66%, en daarbovenop een verloop. Dat verloop is functioneel,
   geen versiering — op 72% en 100% is het bijna dicht (.72 en .94), precies
   waar de titel staat. Daarom is de titel leesbaar ongeacht wat de foto daar
   doet. Zonder <img>-kind valt het vlak terug op vlak navy; dat is de nette
   degradatie.

   Z-index-waardes zijn expliciet omdat de drie lagen (::before, > img, ::after)
   anders op boomvolgorde stapelen: ::before als eerste kind schildert ónder de
   foto, die ondoorzichtig is en de waas volledig afdeert. Alleen het verloop
   (::after) zou zichtbaar zijn. Deze z-index maakt de volgorde expliciet:
   foto onderaan (0), waas erover (1), verloop bovenop (2), inhoud helemaal boven (3). */
.beeldvlak {
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
}
.beeldvlak > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(1.06) contrast(1.04);
    z-index: 0;
}
.beeldvlak::before,
.beeldvlak::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.beeldvlak::before {
    background: rgba(28,58,94,.66);
    z-index: 1;
}
.beeldvlak::after {
    background: linear-gradient(180deg,
        rgba(18,40,68,.62)  0%,
        rgba(18,40,68,.10) 34%,
        rgba(18,40,68,.72) 72%,
        rgba(18,40,68,.94) 100%);
    z-index: 2;
}
.beeldvlak > *:not(img) { position: relative; z-index: 3; }

/* .hero is vandaag het enige beeldvlak met tekst bovenin (de kicker), precies
   waar het posterverloop het meest open staat (.62 op 0%, aflopend naar .10
   op 34%). Op de gedrukte A2-poster werkt die openheid prima. Op een scherm
   knipt de foto-filter hierboven (grayscale/brightness/contrast op
   .beeldvlak > img) elke voldoende lichte foto-pixel af naar zuiver wit —
   lucht tussen tuigage, een wit overhemd, een naambordje — en tegen die
   geklipte ondergrond zakt de oranje kicker naar ongeveer 2,10:1, onder de
   vloer van 3:1 voor grote/vette tekst (gemeten met echte pixels, zie
   tests/contrast.spec.ts, metenBinnenBeeldvlak). Dat geldt voor vrijwel elke
   foto met een lichtpunt in die band, niet alleen deze — een andere foto
   kiezen lost het dus niet betrouwbaar op. Een crème kicker is ook geen
   oplossing: tegen diezelfde geklipte witte ondergrond zakt crème juist naar
   ~1:1, dus oranje is hier de betere kleur, niet de slechtere.

   Vandaar deze override, gescopet op .hero.beeldvlak — niet een aanpassing
   aan de gedeelde .beeldvlak::after hierboven. Andere paginakoppen (Taak 8)
   zetten hun tekst onderaan met justify-content: flex-end, in de
   ongewijzigde 72%/100%-zone, en erven zo het originele, ongewijzigde
   posterverloop. Wie later een .beeldvlak met tekst bovenin bouwt, moet dit
   bewust overnemen — niet stilzwijgend erven via de basisklasse. */
/* De hero-foto is bijna vierkant (2000x2122) en het paneel is breed en laag, dus
   object-fit: cover snijdt fors boven en onder weg. Gecentreerd verdwijnen de
   hoofden op brede schermen en houd je torso's over. 32% legt de uitsnede hoger,
   waar de gezichten zitten. Gemeten op 1440, 1920 en 2560. */
.hero.beeldvlak > img { object-position: 50% 32%; }

.hero.beeldvlak::after {
    background: linear-gradient(180deg,
        rgba(18,40,68,.94)  0%,
        rgba(18,40,68,.94) 20%,
        rgba(18,40,68,.10) 34%,
        rgba(18,40,68,.72) 72%,
        rgba(18,40,68,.94) 100%);
}

/* ── Nav ── */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px;
    border-bottom: 2px solid var(--gold);
    position: sticky;
    top: 0;
    background: rgba(253,245,230,0.92);
    box-shadow: 0 2px 12px rgba(10,34,54,0.08);
    backdrop-filter: blur(12px);
    z-index: 100;
}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
}
.nav-logo img {
    /* Het beeldmerk is een breed woordmerk, geen vierkant plaatje: op 52px
       hoog werd WALHALLA een streepje. 58px houdt de nav even hoog als eerst
       (de padding bepaalt die hoogte) en maakt het woord weer leesbaar.
       De border-radius is weg omdat er niets meer af te ronden valt: de png
       is doorzichtig, dus die 4px sneden alleen de punten van de ruit af. */
    height: 58px;
    width: auto;
    display: block;
    /* WALHALLA steekt links en rechts buiten de ruit; zonder deze marge komt
       de laatste A tegen het eerste menu-item aan zodra het venster smaller
       wordt. */
    margin-right: 24px;
}
.nav-logo span {
    display: none;
}
.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    /* De nav is de crème band van de poster (rgba(253,245,230,0.92)) — sinds
       de navy-omslag is --text-muted juist crème, dus dat gaf crème-op-crème.
       Hier moet de donkere tegenhanger, net als de footer.

       .62 was gekozen tegen een nav die als vol crème (#fdf5e6) gemeten werd.
       Die band is echter 92% dekkend over navy en composiet dus naar
       rgb(234,229,217): donkerder ondergrond, minder contrast, 4,29:1 in
       plaats van de 4,55:1 waar de test toen op uitkwam. .70 haalt 5,45:1
       tegen de band zoals hij echt gerenderd wordt. */
    color: rgba(10,34,54,0.7);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--navy);
}

/* ── Hero ──
   De opmaak van de posters: kicker bovenaan, titel onderaan, oranje streep
   ertussen. De inhoud staat links en onder, waar het verloop van het beeldvlak
   op .94 zit en de tekst dus altijd leest. */
.hero {
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    padding: 56px clamp(24px, 6vw, 80px) 72px;
}
.hero .subtitle {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin: 0;
}
/* Geen max-width op .hero-blok: de `ch`-eenheid resolveert tegen het
   font-size van het element zelf, niet van zijn kinderen. .hero-blok zit op
   de body-fontsize (16px), dus een cap hier zou de h1 (die op ~96px staat)
   verpletteren. Het blok mag de volle breedte gebruiken; de <br> in de h1
   bepaalt waar de titel breekt. */
.hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 9vw, 6rem);
    color: var(--paper);
    letter-spacing: -0.014em;
    line-height: 0.96;
    margin: 0;
    text-transform: none;
    /* max-width hier, in ch, resolveert tegen de eigen font-size van de h1 —
       nooit op de ouder zetten, dat was de val (zie boven). Bij deze titel
       ("Van Wal<br>naar Walhalla") dwingt de <br> de regelbreuk al af, dus
       deze cap grijpt in de praktijk nooit aan; het is puur een vangnet
       tegen een toekomstige titelwijziging zonder <br> op zeer brede
       schermen, geen actieve beperking. */
    max-width: 14ch;
}
.hero .streep {
    width: 96px;
    height: 6px;
    background: var(--orange);
    margin: 28px 0 22px;
}
.hero .tagline {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--on-navy);
    /* ch resolveert hier tegen de eigen font-size van .tagline, dus dit geeft
       echt een leesbare regelbreedte van ~46 tekens — anders dan een
       max-width op de ouder (.hero-blok) zou doen. */
    max-width: 46ch;
    line-height: 1.5;
}
/* De mobiele hero staat in de responsive-sectie verderop (max-width: 768px).
   Hier stond een tweede regel op max-width: 640px met min-height: 78vh; die
   was dood — 768px matcht altijd mee als 640px matcht, en die regel staat
   later in het bestand, dus hij won bij gelijke specificiteit. */

/* ── Section ── */
.section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 24px;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3rem);
    color: var(--paper);
    margin-bottom: 48px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Event Cards ── */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.event-card {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--border-ink);
    border-radius: 4px;
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 2px 2px 0 var(--orange);
}
.event-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--red);
}
.event-date {
    font-size: 0.85rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 8px;
}
.event-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--navy);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}
.event-note {
    font-size: 0.95rem;
    color: rgba(26,26,26,0.72);
    line-height: 1.55;
}
.event-signup {
    display: inline-block;
    margin-top: 16px;
    padding: 9px 16px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--navy);
    border: 2px solid var(--navy);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.event-signup:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: translateY(-1px);
}
.verras-me-btn {
    font: inherit;
    cursor: pointer;
}

/* ── Timeline (cream paper panel) ── */
.timeline {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    padding: 48px 48px 48px 80px;
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--orange);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 48px;
    top: 48px;
    bottom: 48px;
    width: 2px;
    background: var(--orange);
    opacity: 0.4;
}
.timeline-section {
    margin-bottom: 40px;
}
.timeline-section:last-child { margin-bottom: 0; }
.timeline-section h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--navy);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
.timeline-item {
    position: relative;
    margin-bottom: 14px;
    padding-left: 4px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 7px;
    width: 11px;
    height: 11px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--paper);
}
.timeline-year {
    font-weight: 800;
    color: var(--red);
    margin-right: 8px;
}
.timeline-text {
    color: rgba(26,26,26,0.82);
    line-height: 1.6;
    font-size: 0.97rem;
}

/* ── Verhalen (story panels) ── */
.stories {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.story {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--border-ink);
    border-radius: 4px;
    padding: 40px 44px;
    box-shadow: 2px 2px 0 var(--orange);
}
.story-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}
.story-title,
.story h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.05;
}
/* .story-title leeft in twee contexten: los op de navy pagina (history.html)
   en binnen de crème .story-kaart (helden.html, quiz.html). Crème is de
   basis, want los op navy is de veelvoorkomende plek; binnen .story wordt
   het teruggezet naar navy voor leesbaarheid op de crème kaart. */
.story-title { color: var(--paper); }
.story .story-title,
.story h1 { color: var(--navy); }
/* Zelfde contextsplitsing als .story-title en .story-caption hierboven, en om
   dezelfde reden: history.html zet een .story-text los op de navy pagina
   (§ "Uit het jubileumboek"), waar de donkere tint 1,14:1 haalde. Binnen
   .story (helden.html, quiz.html en de 329 verhaalpagina's) is donker juist
   goed. Basis is de navy-variant, want dat is de bodem van de site. */
.story-text {
    color: var(--on-navy);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 14px;
}
.story .story-text { color: rgba(26,26,26,0.82); }
.story-text:last-child { margin-bottom: 0; }
.story-text em { font-style: italic; }
.story-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 24px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 2px 2px 0 var(--orange);
}
.story-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* .story-figure komt op twee soorten bodem voor: los op de navy pagina
   (bijv. helden.html's .helden-hero) én genest in .story (crème, de 162
   verhalenpagina's). Standaard de navy-tekstkleur; binnen .story overschreven
   naar de donkere tint, want daar staat het bijschrift wél op crème. */
.story-caption {
    font-size: 0.82rem;
    color: var(--on-navy-muted);
    margin-top: 10px;
    font-style: italic;
}
/* .60 gaf 4,45:1 op crème — net onder de vloer. .66 haalt 5,40:1 en blijft
   duidelijk lichter dan de lopende tekst eromheen. */
.story .story-caption { color: rgba(26,26,26,0.66); }
.story-figure { margin: 24px 0 0; }
.story-figure img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--orange);
    display: block;
}

/* ── Verhalen tegels (overzicht) ── */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
}
.story-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    /* Crème kaart, dus de inktrand. --border is de crème rand voor het navy
       vlak en was hier crème-op-crème. */
    border: 1px solid var(--border-ink);
    border-radius: 4px;
    padding: 26px 24px;
    text-decoration: none;
    /* Geen box-shadow meer: een donkere schaduw doet niets op een navy bodem, en een
       crème kaart heeft er geen nodig om zich af te tekenen. */
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.story-tile:hover {
    transform: translateY(-3px);
    /* Geen box-shadow meer: een donkere schaduw doet niets op een navy bodem, en een
       crème kaart heeft er geen nodig om zich af te tekenen. */
    border-color: var(--orange);
}
.story-tile-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--navy);
    margin: 8px 0 12px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.05;
}
.story-tile-teaser {
    font-size: 0.95rem;
    color: rgba(26,26,26,0.72);
    line-height: 1.55;
    flex: 1;
}
.story-tile-more {
    margin-top: 18px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* Oranje haalt op crème maar 2,67:1 — het is de accentkleur voor het navy
       vlak (5,14:1), niet voor een crème kaart. Rood is precies andersom: de
       "180"-kleur van de poster, 5,25:1 op crème en per :root alleen binnen
       crème vlakken te gebruiken. Zelfde kleur als .story-kicker bovenaan
       dezelfde tegel, wat de kaart ook rustiger maakt. */
    color: var(--red);
}

/* Gelezen-indicator in zoekresultaten (zelfde taal als .vt-chip op de tijdslijn)
   ──────────────────────────────────────────────────────────────────────────
   Dit was `opacity: 0.6` op de hele kaart. Op de oude crème pagina was dat
   onschuldig: een crème kaart die vervaagt naar een crème bodem blijft
   ongeveer even leesbaar. Op de navy bodem vervaagt diezelfde kaart naar
   GRIJS, en zakt alle tekst mee — .story-tile-more naar 2,54:1, de teaser
   naar 3,86:1. opacity dooft nu eenmaal de tekst even hard als het vlak.

   Daarom zit "al gelezen" nu in het VLAK en niet in de dekking: de kaart
   krijgt crème met 92% dekking over de navy bodem — precies de tint van de
   nav-band, dus geen nieuwe kleur op de site. Dat leest als één stap
   rustiger, en de tekst erop blijft op volle sterkte. De twee rode accenten
   stappen mee naar --red-deep: op die iets koelere kaart haalt --red 4,52:1
   en dat is te krap, --red-deep haalt 6,18:1. Samen met de badge rechtsboven
   is dat een duidelijker signaal dan een waas. */
.story-tile--gelezen {
    background: rgba(253,245,230,0.92);
}
.story-tile--gelezen:hover {
    background: var(--paper);
}
.story-tile--gelezen .story-kicker,
.story-tile--gelezen .story-tile-more {
    color: var(--red-deep);
}
.story-tile-gelezen-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(232,122,54,0.12);
    border: 1px solid rgba(232,122,54,0.35);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* --orange-deep haalt op crème maar 3,77:1 bij 11,5px; --red-deep 7,18:1. */
    color: var(--red-deep);
}

/* ── Verhaal detailpagina ── */
.section-narrow { max-width: 760px; }
.page-kicker {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 12px;
}
/* .story-foot is een BROER van .story, geen kind: in het verhaalsjabloon
   staat hij ná </article class="story"> in dezelfde .section. De
   crème-overrides binnen .story (.story .story-title, .story .story-caption)
   bereiken hem dus niet — de bronnenlijst staat gewoon op het navy vlak van
   de pagina. Met de donkere kleuren van vóór de omslag betekende dat op alle
   329 verhaalpagina's: .story-sources 1,06:1 en --blue-deep 2,84:1. Alles
   hieronder is daarom navy-tekst, niet crème-kaarttekst. Let op bij het
   verplaatsen van deze blok in het sjabloon: zodra .story-foot wél in .story
   komt te staan, moeten deze drie regels de andere kant op. */
.story-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
}
/* ── Waar dit vandaan komt ──
   Stond als vierde regeltje onderaan, ónder de kaarten die je wegsturen naar
   een ander verhaal. Nu tussen het verhaal en het verder lezen, met een rand
   eromheen zodat het als eigen blok leest en niet als voetnoot. */
.story-herkomst {
    margin: 40px 0 8px;
    padding: 24px 26px;
    border: 1px solid rgba(157,184,226,0.28);
    border-left: 3px solid var(--orange);
    border-radius: 3px;
    background: rgba(157,184,226,0.05);
}
.story-herkomst h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}
.story-herkomst h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--on-navy-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 20px 0 6px;
}
/* Het origineel is de gescande bladzijde zelf — het enige dat de lezer buiten
   deze site brengt, en daarom het enige dat eruit mag springen. */
.story-origineel {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 20px;
    border: 1px solid var(--orange);
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.story-origineel:hover,
.story-origineel:focus-visible {
    background: rgba(232,122,54,0.14);
}
.origineel-kop {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--orange);
}
.origineel-editie {
    font-size: 0.8rem;
    color: var(--on-navy-muted);
}
.origineel-drempel::before { content: "\00b7\00a0"; }

.story-bron h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    /* Was --blue-deep, en die zegt in :root zelf dat hij nooit op navy mag
       (2,84:1). Oranje is hier de kickerkleur van het navy vlak: 5,14:1. */
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.story-sources {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--on-navy-muted);
}
/* --blue-soft is volgens :root de linkkleur op navy (7,35:1 op --bg). */
.story-sources a { color: var(--blue-soft); text-decoration: underline; }

/* ── Helden / ambassadeurs ── */
.helden-hero { margin: 0 auto 8px; }
.ambassadeur { text-align: center; }
.ambassadeur .story-kicker { color: var(--red); }
.ambassadeur .story-text { text-align: left; }

/* ── Lange display-titels netjes laten afbreken (geen overflow) ──
   Geen hyphens: auto — dat brak ook doodgewone woorden middenin af
   (bv. "ramde" -> "ram-" / "de"). overflow-wrap/word-break alleen
   springen bij als een los woord/token echt te lang is om te passen;
   gewone woorden wrappen gewoon heel naar de volgende regel. */
.story-title,
.story h1,
.story-tile-title,
.page-header h1,
.section-title,
.event-name,
.sport-card h4,
.timeline-section h3,
.crew-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: none;
}

/* ── Sport Sections ── */
.sport-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}
.sport-card {
    background: var(--paper);
    color: var(--ink);
    padding: 24px;
    border-radius: 4px;
    border: 1px solid var(--border-ink);
    box-shadow: 2px 2px 0 var(--gold);
}
.sport-card h4 {
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
.sport-card p {
    font-size: 0.92rem;
    color: rgba(26,26,26,0.72);
    line-height: 1.6;
}

/* ── News Cards ── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}
.news-card {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--border-ink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 2px 2px 0 var(--orange);
    transition: transform 0.2s, box-shadow 0.2s;
}
.news-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--red);
}
.news-card-header {
    padding: 24px 24px 0;
}
.news-tag {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 10px;
}
.news-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--navy);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
.news-card p {
    padding: 0 24px 24px;
    font-size: 0.93rem;
    color: rgba(26,26,26,0.75);
    line-height: 1.65;
}

/* ── Page Header (subpages) ── */
/* De radial-gradient verdwijnt: die zat er om een leeg crème vlak op te leuken.
   Op een beeldvlak zou hij met de waas vechten.

   Maar: slechts zeven pagina's dragen ook .beeldvlak en hebben dus een foto
   onder de kop. De andere 347 (329 verhalen, 16 lustrums, en de rest) hielden
   helemaal niets over — geen achtergrond, wél 42vh minimumhoogte en 120px
   bovenmarge, dus een hoge lege navy vlakte boven de titel. Vandaar hier een
   eigen navy band als bodem, en de postermaten alleen waar er ook echt een
   foto in staat. Zonder foto is een compacte band juist beter: de titel komt
   dan meteen na de nav in beeld. */
.page-header {
    text-align: center;
    padding: 72px 24px 48px;
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.page-header.beeldvlak {
    padding: 120px 24px 72px;
    min-height: 42vh;
}
.page-header h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    color: var(--paper);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.page-header p {
    font-size: 1.1rem;
    /* Geen extra opacity meer. --text is zelf al rgba(...,0.9); een extra .88
       daar bovenop maakte er .79 van, en boven een foto zakte dat naar
       3,90:1. Twee dempers over elkaar is bovendien niet af te lezen uit de
       kleur alleen — precies de reden dat de contrasttest hem miste. */
    color: var(--text);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Boven een foto is de marge te krap: op verhalen.html haalt deze regel 4,51:1
   tegen een vloer van 4,5 — één andere foto en de suite wordt rood. Alleen waar
   er echt een foto onder ligt gaat de tekst naar vol crème; de 347 pagina's
   zonder foto houden de zachtere 0,9, want daar is te veel contrast juist
   vermoeiend. */
.page-header.beeldvlak p { color: var(--paper); }

/* ── Foto-positie per paginakop ──
   .beeldvlak > img staat zonder object-position op 50/50 — een gecentreerde
   crop. Bij een portretfoto (1600×~2400) in een liggende band snijdt dat
   het onderwerp zomaar doormidden of eraf. Elke regel hieronder duwt het
   zichtbare venster naar waar het onderwerp in de foto staat; gecontroleerd
   door de foto te bekijken, niet door percentages uit te rekenen. */
.beeldvlak > img[src$="geschiedenis.jpg"] { object-position: 50% 18%; } /* het zeildoek zelf — lager staat er vooral lucht en dun want */
.beeldvlak > img[src$="verhalen.jpg"] { object-position: 50% 80%; } /* het optimistje en de zeilster — hoger staat vooral het grote geletterde zeil */
.beeldvlak > img[src$="fotomuur.jpg"] { object-position: 50% 26%; } /* het gezicht op de voorplecht */
.beeldvlak > img[src$="lustrums.jpg"] { object-position: 50% 30%; } /* de gezichten van het lachende paar */
.beeldvlak > img[src$="helden.jpg"] { object-position: 50% 58%; } /* het gedreven lijf van de bokaal — de spreker erachter is toch onscherp */
.beeldvlak > img[src$="quiz.jpg"] { object-position: 50% 20%; } /* de poort zelf — lager (het dinerfeest) staat een verlicht raam net achter de kicker, en dat zakte onder de contrastvloer (gemeten, niet berekend) */
.beeldvlak > img[src$="nieuws.jpg"] { object-position: 50% 74%; } /* schouder, gebaar en microfoon van de spreker — 52% zoomde in op oog en neus en las als een uitvergroot lichaamsdeel, geen sfeerbeeld meer */
.beeldvlak > img[src$="store.jpg"] { object-position: 50% 28%; } /* het gezicht en de wijzende hand */
.beeldvlak > img[src$="galm.jpg"] { object-position: 50% 18%; } /* het bakstenen gewelf zelf. Op de standaard 50% viel het verlichte scherm achter de kicker en bleef er 4,57:1 over -- anderhalf procent boven de vloer, te weinig: op de Linux-renderer van CI werd het 4,42 en viel de build om. Op 18% is het 5,46:1 (gemeten door de vloer tijdelijk onhaalbaar te zetten en het getal uit de foutmelding te lezen). */

/* ── Numeral highlight (180) ── */
/* Stond op --red, maar rood haalt maar 2,0:1 op navy. Binnen de oranje kicker
   onderscheidt vol crème de "180" zonder een tweede kleur op het navy te zetten. */
.num {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--paper);
}

/* ── Footer ── */
/* De crème band van de poster: daar staat het beeldmerk op zijn eigen ondergrond
   en is rood weer toegestaan. */
/* De voet is de onderkant van de poster: een navy strook, daaronder de
   cremeband met de merkregel, en daaronder het rode blok. Het beeldmerk valt
   over de band heen, en omdat de strook in het merk doorzichtig is loopt de
   band er als één lijn doorheen — precies wat de poster en de placemat doen.

   De bandhoogte is daarom niet gekozen maar afgeleid: 18,75% van de hoogte van
   het logo, want dat is de strook erin. Gaat het logo op een klein scherm
   omlaag, dan volgt de band vanzelf. */
footer {
    --merk: clamp(180px, 26vw, 336px);
    --merk-hoogte: calc(var(--merk) * 752 / 1185);
    --band: calc(var(--merk-hoogte) * 0.1875);
    margin-top: 40px;
    font-size: 0.85rem;
}
.voet-navy {
    background: var(--navy);
    height: calc(var(--merk-hoogte) / 2 - var(--band) / 2);
}
.voet-band {
    position: relative;
    height: var(--band);
    background: var(--paper);
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: .5em;
    padding: 0 clamp(16px, 5vw, 56px);
    font-weight: 700;
    font-size: clamp(8px, 1.1vw, 12px);
    letter-spacing: .34em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: visible;
}
.voet-band em { color: var(--orange); font-style: normal; }
.voet-merk {
    position: absolute;
    right: clamp(16px, 5vw, 56px);
    top: 50%;
    width: var(--merk);
    height: auto;
    transform: translateY(-50%);
    display: block;
}
.voet-blok {
    background: var(--red, #A32B32);
    color: rgba(253,245,230,0.92);
    text-align: center;
    /* Ruim genoeg dat de onderste punt van de ruit in het rood blijft staan. */
    padding: calc(var(--merk-hoogte) / 2 + 20px) 24px 40px;
}
footer a { color: var(--paper); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--orange); }

/* Op een telefoon botst de merkregel met het beeldmerk; dan blijft alleen het
   merk staan, want dat is het stuk dat iets zegt. */
@media (max-width: 620px) {
    .voet-band span { display: none; }
}

/* ── Hamburger button ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Stacked-letter shadow on store product names (matches event + news cards) */
#luco-store .luco-product-card .luco-product-name {
    font-family: var(--font-display, 'Avenir Next', Avenir, sans-serif);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin-bottom: 10px;
}
#luco-store .luco-product-card {
    box-shadow: 2px 2px 0 var(--orange);
    transition: transform 0.2s, box-shadow 0.2s;
}
#luco-store .luco-product-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--red);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    nav { padding: 16px 20px; flex-wrap: wrap; }
    .nav-toggle { display: flex; }
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 8px 0 12px;
    }
    .nav-links.nav-open { display: flex; }
    /* Ook hier: de mobiele dropdown valt binnen de crème nav-band, --border is
       sinds de omslag een crème-tint voor het navy vlak en was hier onzichtbaar. */
    .nav-links li { border-top: 1px solid rgba(10,34,54,0.16); }
    .nav-links a { display: block; padding: 12px 4px; font-size: 1rem; }
    .sport-grid { grid-template-columns: 1fr; }
    /* Symmetrische 60px stond hier nog van vóór de posteromslag. De hero zet
       zijn kicker bovenin en zijn titel onderin (justify-content:
       space-between), dus hij heeft dezelfde asymmetrie nodig als op groot
       scherm — daar 56px boven en 72px onder — anders plakt de titel tegen de
       onderrand. */
    .hero { min-height: 60vh; padding: 44px 20px 56px; }
    .section { padding: 60px 20px; }
    /* Extra ruimte rechts: anders schuift een tegel onder de vaste chatbot-knop
       (56px, fixed bottom:24px/right:24px) door, en lijkt een titel afgebroken. */
    .stories-grid { padding-right: 56px; }
    .story { padding: 28px 22px; }
    .timeline { padding: 32px 24px 32px 56px; }
    .timeline::before { left: 28px; top: 32px; bottom: 32px; }
    .timeline-item::before { left: -32px; }
}

/* ── Quiz ── */
.quiz-card { margin-bottom: 22px; }
.quiz-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.quiz-opt {
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-align: left;
    padding: 12px 16px;
    /* Navy vlak, dus de crème rand — niet --border-ink, dat is de inktrand
       voor crème kaarten. */
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--surface-read);
    color: var(--on-navy);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.quiz-opt:hover { border-color: var(--orange); transform: translateY(-1px); }
.quiz-opt.selected { border-color: var(--blue-soft); background: rgba(157,184,226,0.16); }
.quiz-opt.correct  { border-color: #6ee7a2; background: rgba(110,231,162,0.16); color: #a9f2c6; font-weight: 700; }
.quiz-opt.wrong    { border-color: var(--orange); background: rgba(232,122,54,0.16); color: #f4b083; }
@media (max-width: 640px) {
    .quiz-opts { grid-template-columns: 1fr; }
}

/* --- Verhalen: doorway, demo-kaart en 'verder varen' --------------------- */
.thread-kop { text-align: center; margin: 8px 0 4px; }
.thread-intro, .thread-slot {
    text-align: center; max-width: 640px; margin: 8px auto 20px;
    color: var(--text); opacity: .82;
}
.demo-tag { opacity: .55; font-size: .6em; font-weight: 400; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.verhalen-search { padding-top: 40px; padding-bottom: 40px; }
.verhalen-search-input {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border-ink);
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--orange);
    transition: box-shadow 0.18s, transform 0.18s;
}
.verhalen-search-input:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--red);
    transform: translate(-1px, -1px);
}
.verhalen-search-status {
    text-align: center;
    max-width: 640px;
    margin: 14px auto 0;
    color: var(--text);
    opacity: .82;
    font-size: 0.92rem;
}
.verhalen-search .stories-grid { margin-top: 26px; }
.verhalen-search-entities { max-width: 640px; margin: 22px auto 0; }
.verhalen-search-entiteit-kop {
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper);
    margin: 18px 0 8px;
}
.verhalen-search-entiteit-kop:first-child { margin-top: 0; }
.verhalen-map { display: block; width: 100%; height: 100%; }
.verhalen-map a { cursor: pointer; }
.verhalen-map circle { transition: r .12s ease; }
.verhalen-map a:hover circle { r: 9; }
.verhalen-map text { pointer-events: none; font-family: var(--font-body, sans-serif); }
.verder-varen {
    margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
}
.verder-varen > h3 { text-align: center; margin-bottom: 18px; }

/* --- Verhalen-tijdslijn met gelezen-markering ---------------------------- */
.verhalen-tijdlijn { margin-top: 8px; }

/* Voortgang */
.vt-progress { max-width: 760px; margin: 0 auto 36px; }
.vt-progress-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
}
.vt-progress-count {
    font-family: var(--font-display);
    font-size: 1.05rem; color: var(--paper);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.vt-reset {
    font-family: var(--font-body);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted); background: none;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 12px; cursor: pointer;
    transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
.vt-reset:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
.vt-reset:disabled { opacity: 0.4; cursor: default; }
.vt-progress-bar {
    height: 8px; width: 100%;
    background: var(--border-navy);
    border-radius: 4px; overflow: hidden;
}
.vt-progress-fill {
    display: block; height: 100%; width: 0%;
    background: var(--orange);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Lijst met verticale koerslijn */
.vt-list {
    list-style: none; margin: 0 auto; padding: 0 0 0 32px;
    max-width: 760px; position: relative;
}
.vt-list::before {
    content: ''; position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: var(--orange); opacity: 0.35;
}
.vt-item { position: relative; margin-bottom: 22px; }
.vt-item:last-child { margin-bottom: 0; }
.vt-item::before {
    content: ''; position: absolute;
    left: -32px; top: 24px;
    width: 12px; height: 12px;
    background: var(--bg); border: 2px solid var(--orange);
    border-radius: 50%; z-index: 1;
    transition: background 0.2s, border-color 0.2s;
}
.vt-item.is-read::before { background: var(--orange); }

/* Kaart per verhaal (zelfde taal als .story-tile) */
.vt-card {
    display: block;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--border-ink);
    border-radius: 4px; padding: 22px 26px;
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--orange);
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.vt-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--red);
}
.vt-kicker {
    display: block;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--red);
    margin-bottom: 8px;
}
.vt-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: 1.25rem; color: var(--navy);
    text-transform: uppercase; letter-spacing: -0.5px;
    line-height: 1.08; margin-bottom: 10px;
}
.vt-teaser {
    font-size: 0.93rem; color: rgba(26,26,26,0.72); line-height: 1.55;
}
.vt-badge {
    display: none;
    margin-top: 12px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--orange-deep);
}

/* Slanggroep: opeenvolgende gelezen verhalen als chips op één rij */
.vt-snake {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}
.vt-snake::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--orange);
    border: 2px solid var(--orange);
    border-radius: 50%;
    z-index: 1;
}
.vt-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(232,122,54,0.12);
    border: 1px solid rgba(232,122,54,0.35);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    /* Deze chip staat op de navy pagina, niet in een crème kaart: het oranje
       is doorschijnend en laat het navy erdoorheen. Donkere inkt verdwijnt daar. */
    color: var(--on-navy);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.vt-chip:hover {
    background: rgba(232,122,54,0.24);
    border-color: rgba(232,122,54,0.65);
}
.vt-chip-arrow {
    font-size: 0.9rem;
    color: var(--orange);
    opacity: 0.6;
    line-height: 1;
}

@media (max-width: 768px) {
    /* Extra ruimte rechts: anders schuift tekst onder de vaste chatbot-knop
       (56px, fixed bottom:24px/right:24px) door, en lijkt een titel afgebroken. */
    .vt-list { padding: 0 70px 0 26px; }
    .vt-item::before { left: -26px; }
    .vt-snake::before { left: -26px; }
    .vt-card { padding: 18px 20px; }
    .vt-chip { font-size: 0.72rem; padding: 2px 8px; }
}

/* --- Interactieve verhalenkaart (Leaflet) -------------------------------- */
.verhalen-kaart {
    height: 58vh; min-height: 360px; width: 100%;
    border-radius: 4px; border: 1px solid var(--border-navy);
    background: var(--surface-read); z-index: 0;
}
/* De kaart in de kleur van de site. Carto's donkere tegels zijn bijna zwart;
   op 55% dekking laat de navy container erdoorheen schijnen, waardoor de kaart
   navy wordt in plaats van zwart. Zelfde middel als de waas over de foto's:
   het beeld blijft leesbaar, de kleur wordt van ons. De markers staan in een
   eigen pane en blijven dus vol op sterkte. */
/* Carto's donkere tegels zijn bijna zwart: land en water lopen in elkaar over
   en de kaart wordt een donkere vlek. brightness tilt beide op, contrast trekt
   ze weer uit elkaar, en de dekking laat nog genoeg navy door om de kaart bij
   de site te houden. */
#verhalenkaart .leaflet-tile-pane {
    opacity: .9;
    /* sepia zet de grijstinten om naar één warme tint, hue-rotate draait die
       naar blauw en saturate geeft hem body. Zo houdt de kaart het licht-donker
       verschil tussen land en water — dat je met alleen dekking kwijtraakt —
       maar krijgt hij wel de kleur van de site. */
    filter: brightness(1.5) contrast(1.05) sepia(1) hue-rotate(178deg) saturate(2.2);
}
/* Op #id, want vendor/leaflet/leaflet.css wordt NA deze stylesheet geladen en
   zet zelf .leaflet-container { background: #ddd }. Op klasse-niveau wint die. */
#verhalenkaart.leaflet-container,
#verhaalroute.leaflet-container { background: var(--bg); }

/* Leaflet levert witte knoppen en een witte attributiebalk. */
#verhalenkaart .leaflet-control-zoom a,
#verhaalroute .leaflet-control-zoom a {
    background: var(--surface-read); color: var(--paper);
    border-color: var(--border-navy);
}
#verhalenkaart .leaflet-control-zoom a:hover,
#verhaalroute .leaflet-control-zoom a:hover { background: var(--navy-deep); color: var(--orange); }
#verhalenkaart .leaflet-control-attribution,
#verhaalroute .leaflet-control-attribution {
    background: rgba(18,40,68,.72); color: var(--on-navy-muted);
    border-radius: 3px 0 0 0;
}
#verhalenkaart .leaflet-control-attribution a,
#verhaalroute .leaflet-control-attribution a { color: var(--blue-soft); }

/* ── Routekaart bij één verhaal ── */
/* Dezelfde ingreep als op de overzichtskaart, maar minder ver doorgevoerd.
   Die kaart is 58vh hoog; daar mag het beeld wegzakken in de navy omdat de
   kustlijnen groot genoeg blijven om te herkennen. Op 340 px verdwijnt met
   dezelfde waarden het hele continent en houd je een leeg blauw vlak over,
   met een oranje lijn die nergens overheen lijkt te lopen. Vandaar meer
   helderheid, meer contrast en minder sepia: land en zee blijven uit elkaar te
   houden, en de kaart houdt de kleur van de site. */
#verhaalroute .leaflet-tile-pane {
    opacity: 1;
    filter: brightness(2.1) contrast(1.2) sepia(.75) hue-rotate(178deg) saturate(1.9);
}
.verhaal-route { margin: 32px 0 0; }
.verhaal-route-kaart {
    /* Lager dan de overzichtskaart: dit is een tussenstuk in een verhaal, geen
       hoofdzaak. Hoog genoeg om een oversteek te laten zien. */
    height: 340px; width: 100%;
    border-radius: 4px; border: 1px solid var(--border-navy);
    background: var(--surface-read); z-index: 0;
}
.verhaal-route figcaption {
    margin-top: 10px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--on-navy-muted);
}
/* Genummerde bakens: de volgorde is de helft van het verhaal. */
.route-baken span {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy-deep);
    font-family: var(--font-display, sans-serif);
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 0 0 2px rgba(18,40,68,.85);
}

.leaflet-popup-content { font-family: var(--font-body, sans-serif); margin: 10px 12px; }
.kaart-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.kaart-popup a { font-weight: 600; }
.kaart-hint { font-size: 12px; opacity: .65; margin-top: 2px; }
.kaart-icoon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.verhalen-kaart-fallback svg { border-radius: 4px; }

/* Pin per verhaal (oranje stip) */
.kaart-dot {
    background: var(--orange, #E87A36);
    border: 1.5px solid var(--paper, #fdf5e6);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* Cluster-bubbels in huisstijl i.p.v. de blauw/groen/geel-default.
   ID-scope om MarkerCluster.Default.css (laadt later) te overrulen; oranje
   toon-schaal toont 'drukte' (lichter = minder, dieper = meer tochten). */
#verhalenkaart .marker-cluster { background: rgba(232,122,54,.25); }
#verhalenkaart .marker-cluster div {
    background: var(--orange, #E87A36);
    color: var(--paper, #fdf5e6);
    font-family: var(--font-body, sans-serif);
    font-weight: 700;
}
#verhalenkaart .marker-cluster-medium div { background: #d96f2c; }
#verhalenkaart .marker-cluster-large div { background: var(--orange-deep, #c95f1f); }

/* --- Langs wal en water: getabd kaartraster + modal ----------------------- */
.lww-tabs {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 8px 0 4px;
}
.lww-tab {
    font: inherit; font-weight: 700; cursor: pointer;
    border: none; background: rgba(253,245,230,0.10); color: var(--text);
    padding: 9px 20px; border-radius: 4px; transition: 0.2s;
}
.lww-tab:hover { background: rgba(232,122,54,0.15); }
/* Inkt op oranje, niet wit. Wit op --orange haalt 2,89:1; dat is onder de vloer
   voor tekst van 16px, ook bij gewicht 700 (de grote-tekst-uitzondering begint
   pas bij 18,66px vet). --ink haalt op hetzelfde oranje 5,2:1. */
.lww-tab.active {
    background: var(--orange); color: var(--ink);
}

/* Kolommen in plaats van één lange kolom. auto-fill met een minimum van 260px
   geeft vanzelf vier kolommen op een breed scherm, drie op een smaller en één
   op een telefoon — zonder vaste breekpunten. */
.lww-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px; margin-top: 24px;
}
/* .lww-card heeft, net als .vt-card, een eigen crème ondergrond: --text en
   --border zijn sinds de navy-omslag crème-op-navy-tokens en zijn hier dus
   vervangen door hun donkere tegenhanger, anders verdwijnt elke naam. */
.lww-card {
    display: flex; align-items: center; gap: 14px; text-align: left;
    border: 1px solid var(--border-ink); cursor: pointer; color: var(--ink); font: inherit;
    padding: 10px 14px; border-radius: 4px; width: 100%;
    background: var(--paper);
    transition: background 0.15s, border-color 0.15s;
    /* In een smalle kolom past de teaser niet naast de naam; hij zakt eronder. */
    flex-wrap: wrap;
}
/* Achtergrond in twee lagen: het oranje waas MOET over de crème liggen, niet
   in de plaats daarvan. Eén enkele doorschijnende `background` verving de crème
   ondergrond en liet de navy pagina erdoorheen schijnen — met de donkere tekst
   er nog op. */
.lww-card:hover {
    background-color: var(--paper);
    background-image: linear-gradient(rgba(232,122,54,0.08), rgba(232,122,54,0.08));
    border-color: var(--orange);
}
.lww-card-avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background-size: cover; background-position: center;
}
.lww-card-body {
    display: flex; flex-direction: column; gap: 1px;
    /* Basis 0, niet auto: met auto eist een lange naam zijn natuurlijke breedte
       op, past hij niet meer naast het rondje, en springt het rondje naar een
       eigen regel erboven. */
    flex: 1 1 0; min-width: 0;
}
.lww-card-sub {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: rgba(10,34,54,0.6);
}
/* Namen mogen over twee regels. Op één regel afkappen leverde "Mr. D.J. Van
   Ewijck van …" op, en dan weet je niet wie het is; verticale ruimte is in een
   kolommenrooster juist het goedkoopste wat er is. */
.lww-card-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lww-card-teaser {
    font-size: 0.85rem; line-height: 1.4; color: rgba(10,34,54,0.6);
    flex-basis: 100%; min-width: 0;
    overflow: hidden; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.lww-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lww-modal[hidden] { display: none; }
.lww-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 42, 71, 0.72); backdrop-filter: blur(2px);
}
.lww-modal-box {
    position: relative; z-index: 1; width: min(560px, 100%); max-height: 88vh; overflow: auto;
    background: var(--paper); color: var(--ink);
    border-radius: 4px; box-shadow: 2px 2px 0 var(--orange);
}
.lww-modal-close {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(6, 42, 71, 0.5); color: #fff; font-size: 1.4rem; line-height: 1;
}
.lww-modal-close:hover { background: var(--orange); }
.lww-modal-head { padding: 26px 28px 22px; color: #fff; }
.lww-modal-sub {
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--blue-soft);
}
.lww-modal-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(1.4rem, 4vw, 2rem); margin: 4px 0 0; line-height: 1.05;
}
.lww-modal-coords {
    font-size: 0.74rem; color: rgba(255, 255, 255, 0.8);
    margin-top: 6px; font-variant-numeric: tabular-nums;
}
.lww-modal-body { padding: 20px 28px 28px; }
.lww-modal-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 0.92rem; }
.lww-modal-meta b { color: var(--orange); }
.lww-modal-story { line-height: 1.6; color: rgba(10, 34, 54, 0.85); margin: 0; }
/* De verhalenlijst in de entiteit-modal. Zonder deze regels vallen de links
   terug op de standaard van de browser: fel blauw, paars na bezoek, met
   onderstreping en bolletjes. Dat vloekt met het navy-oranje-creme van de site,
   en bij een erelid met twintig verhalen wordt het een blauwe muur. */
.lww-modal-stories {
    list-style: none; margin: 14px 0 0; padding: 0;
}
.lww-modal-stories li { margin: 0; }
.lww-modal-stories a {
    display: block; position: relative;
    padding: 7px 0 7px 20px;
    color: var(--navy); text-decoration: none;
    font-size: 0.95rem; line-height: 1.35;
    border-bottom: 1px solid rgba(10, 34, 54, 0.08);
    transition: color 0.15s;
}
.lww-modal-stories li:last-child a { border-bottom: 0; }
/* Bewust geen aparte :visited-kleur. De site heeft al een eigen gelezen-status
   per lid (read_stories); een tweede, afwijkend signaal vanuit de browser zou
   daarmee botsen. */
.lww-modal-stories a:visited { color: var(--navy); }
.lww-modal-stories a::before {
    content: '\203A'; position: absolute; left: 4px; top: 7px;
    color: var(--orange); opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
}
.lww-modal-stories a:hover,
.lww-modal-stories a:focus-visible { color: var(--orange); }
.lww-modal-stories a:hover::before {
    opacity: 1; transform: translateX(2px);
}

.lww-modal-link {
    display: inline-block; margin-top: 16px; font-weight: 700;
    color: var(--orange-deep); text-decoration: none;
}
.lww-modal-link:hover { text-decoration: underline; }
.lww-modal-winnaars { margin-top: 16px; font-size: 0.92rem; }
.lww-modal-winnaars summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.lww-modal-winnaars ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.lww-modal-winnaars li { padding: 3px 0; border-bottom: 1px solid rgba(10, 34, 54, 0.08); }
.lww-modal-winnaars li b { color: var(--orange); margin-right: 8px; }
body.lww-modal-open { overflow: hidden; }
/* De oude telefoon-uitzondering is vervallen: die zette de kaart in dezelfde
   gestapelde vorm die nu overal geldt, en het rooster valt op een smal scherm
   vanzelf terug op één kolom. Twee plekken met dezelfde regels is een plek te
   veel. */

/* ── Lustrum-fotopagina's (alleen foto's) ── */
.lustrum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.lustrum-foto {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    /* Geen box-shadow meer: een donkere schaduw doet niets op een navy bodem, en een
       crème kaart heeft er geen nodig om zich af te tekenen. */
    transition: transform 0.18s, box-shadow 0.18s;
}
.lustrum-foto:hover {
    transform: translateY(-3px);
    /* Geen box-shadow meer: een donkere schaduw doet niets op een navy bodem, en een
       crème kaart heeft er geen nodig om zich af te tekenen. */
}
.lustrum-foto img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* ── Lustrums-overzicht (lustrums.html) ── */
.lustrum-tile-foto {
    display: block;
    width: calc(100% + 48px);
    height: 160px;
    margin: -26px -24px 16px;
    border-radius: 4px 10px 0 0;
    object-fit: cover;
}
/* Zelfde afweging als .story-tile--gelezen hierboven: `opacity: 0.6` waste op
   de navy bodem de hele kaart uit (teaser 3,86:1, "nog geen foto's" 2,45:1).
   Nu een tint in het vlak, tekst op volle sterkte, en het label in een
   gedempte inkttint (5,16:1) zodat het nog steeds duidelijk géén link is. */
.lustrum-tile--geen-fotos {
    background: rgba(253,245,230,0.92);
}
.lustrum-tile--geen-fotos .story-tile-more {
    color: rgba(10,34,54,0.66);
}

/* ── Lustrum-fotoreel (lightbox met autoplay) ── */
body.lustrum-lightbox-locked {
    overflow: hidden;
}
.lustrum-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(10, 34, 54, 0.94);
    padding: 2rem;
    box-sizing: border-box;
}
.lustrum-lightbox.open {
    display: flex;
}
.lustrum-lightbox-img {
    max-width: 88vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.lustrum-lightbox-close,
.lustrum-lightbox-prev,
.lustrum-lightbox-next {
    position: absolute;
    background: var(--navy);
    color: var(--paper);
    border: 2px solid var(--paper);
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-body);
    line-height: 1;
    transition: background 0.15s, transform 0.15s;
}
.lustrum-lightbox-close:hover,
.lustrum-lightbox-prev:hover,
.lustrum-lightbox-next:hover {
    background: var(--orange);
}
.lustrum-lightbox-close {
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
}
.lustrum-lightbox-prev,
.lustrum-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
}
.lustrum-lightbox-prev:hover,
.lustrum-lightbox-next:hover {
    transform: translateY(-50%) scale(1.08);
}
.lustrum-lightbox-prev {
    left: 1.25rem;
}
.lustrum-lightbox-next {
    right: 1.25rem;
}
.lustrum-lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
@media (max-width: 640px) {
    .lustrum-lightbox {
        padding: 1rem;
    }
    .lustrum-lightbox-prev,
    .lustrum-lightbox-next {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.5rem;
    }
    .lustrum-lightbox-close {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.4rem;
    }
}

/* ── Waarom-sectie (homepage) ── */
.waarom {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(64px, 10vw, 120px) 24px;
}
.waarom-kicker {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin-bottom: 20px;
}
.waarom h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    color: var(--paper);
    line-height: 1.04;
    letter-spacing: -0.014em;
}
.waarom .streep {
    width: 96px;
    height: 6px;
    background: var(--orange);
    margin: 28px 0 36px;
}
.waarom-blokken p {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.62;
    color: var(--on-navy);
    margin-bottom: 22px;
}
.waarom-blokken strong { color: var(--paper); font-weight: 700; }
.waarom-slot {
    border-left: 3px solid var(--orange);
    padding-left: 20px;
    font-style: italic;
}
.waarom-cijfers {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 5vw, 56px);
    list-style: none;
    margin: 44px 0 32px;
    padding: 28px 0;
    border-top: 1px solid var(--border-navy);
    border-bottom: 1px solid var(--border-navy);
    color: var(--on-navy-muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.waarom-cijfers b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0;
    text-transform: none;
}
.waarom-link a {
    color: var(--blue-soft);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.waarom-link a:hover { color: var(--paper); }

/* ---- Lijnen: waar de hal van galmt --------------------------------------
   Twee soorten op één pagina, dus het onderscheid moet uit de vorm komen en
   niet uit een label alleen: een twistpunt krijgt de oranje accentlijn, een
   constante de zachtblauwe. Beide kleuren zijn hierboven al gemeten op navy
   (oranje 4,0:1 op groot/vet, blue-soft 5,7:1). */
.lijn-inleiding {
    max-width: 62ch;
    color: var(--text);
    line-height: 1.6;
    margin-top: 12px;
}
.lijn-meta {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 10px;
}

.lijn-lijst {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    padding: 0;
    margin: 0;
}
.lijn-kaart a {
    display: block;
    height: 100%;
    padding: 22px 24px;
    background: var(--surface-read);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue-soft);
    text-decoration: none;
    color: var(--text);
}
.lijn-kaart.lijn-twistpunt a { border-left-color: var(--orange); }
/* Een scheepsbiografie krijgt de crèmekleur: geen ruzie, geen ritueel, maar
   een hoofdpersoon. */
.lijn-kaart.lijn-schip a { border-left-color: var(--paper); }
.lijn-kaart a:hover { border-color: var(--blue-soft); }
.lijn-kaart h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 6px 0 10px;
    color: var(--paper);
}

.lijn-tijdlijn {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lijn-regel {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}
.lijn-jaar {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--orange);
}
.lijn-zet {
    color: var(--text);
    line-height: 1.5;
}
.lijn-titel {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--blue-soft);
}
.lijn-teaser {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.5;
    margin-top: 4px;
}

/* Een gat is een moment waarvan het archief de bron heeft maar nog geen
   verhaal. Zichtbaar onaf: geen link, gedempt jaartal, streepjesrand. */
.lijn-gat .lijn-jaar { color: var(--text-muted); }
.lijn-gat .lijn-inhoud { border-left: 2px dashed var(--border); padding-left: 14px; }
.lijn-bron {
    display: inline-block;
    margin-top: 6px;
    color: var(--blue-soft);
    font-size: 0.9rem;
}

.lijn-slot {
    margin-top: 30px;
    padding: 16px 20px;
    background: var(--surface-read);
    border-left: 4px solid var(--orange);
    color: var(--text);
}
.lijn-terug { margin: 22px 0 40px; }
.lijn-terug a { color: var(--blue-soft); }

/* Terugverwijzing onderaan een verhaal. */
.story-lijnen { margin-bottom: 22px; }
.story-lijnen h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.story-lijn-lijst { list-style: none; padding: 0; }
.story-lijn-lijst li { margin-bottom: 8px; }
.story-lijn-lijst a { color: var(--blue-soft); font-weight: 500; }
.story-lijn-zet {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .lijn-regel { grid-template-columns: 1fr; gap: 6px; }
}