@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root { --ink:#18212a; --muted:#66737b; --paper:#f5f3ee; --blue:#1769aa; --blue-dark:#0d426b; --line:#2d83c5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; }
a { color:inherit; }
.hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; background:#13212a; color:#fff; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,20,28,.82),rgba(9,20,28,.18)),url('fotos/schutstraat - 1.jpg') center/cover; opacity:.92; }
.hero-content { position:relative; z-index:1; width:min(960px,calc(100% - 40px)); padding:9vh 0 12vh; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; color:#b9dbef; }
h1,h2,h3 { font-family:'Libre Baskerville',Georgia,serif; font-weight:400; line-height:1.12; }
h1 { font-size:clamp(2.6rem,7vw,6.4rem); max-width:850px; margin:.65rem 0 1.2rem; }
.hero p { max-width:600px; font-size:clamp(1rem,2vw,1.3rem); line-height:1.65; color:#e6edf1; }
.byline { margin-top:2.2rem; font-size:.86rem; color:#c7d4da; }
.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#d9e9f1; }
.scroll-cue::after { content:''; display:block; width:1px; height:44px; margin:10px auto 0; background:#9bc7df; }
.intro { width:min(800px,calc(100% - 40px)); margin:0 auto; padding:100px 0 80px; font-size:1.15rem; line-height:1.8; }
.intro h2,.chapter h2 { font-size:clamp(2rem,4vw,3.3rem); margin:0 0 1.2rem; }
.kicker { color:var(--blue); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; }
.scrolly { position:relative; display:grid; grid-template-columns:minmax(280px,460px) minmax(0,1fr); gap:clamp(2rem,7vw,8rem); width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:60px 0 120px; }
.map-stage { position:sticky; top:0; height:100svh; align-self:start; display:flex; align-items:center; }
#map { width:100%; height:min(720px,calc(100svh - 80px)); min-height:430px; border-radius:4px; box-shadow:0 20px 70px rgba(24,33,42,.16); overflow:hidden; }
.map-label { position:absolute; z-index:500; top:20px; left:20px; background:rgba(255,255,255,.94); padding:10px 14px; font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-dark); box-shadow:0 4px 18px rgba(0,0,0,.12); }
.story { padding:12vh 0; }
.story-step { min-height:68vh; display:flex; align-items:center; }
.card { background:rgba(255,255,255,.96); padding:clamp(1.5rem,4vw,3rem); box-shadow:0 16px 46px rgba(24,33,42,.13); border-left:4px solid transparent; transition:border-color .3s,transform .3s; }
.card.is-active { border-left-color:var(--line); transform:translateX(8px); }
.card h3 { font-size:clamp(1.5rem,3vw,2.4rem); margin:.5rem 0 1rem; }
.card p { color:#46545d; line-height:1.75; margin:0 0 1rem; }
.date { color:var(--blue); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.card img { width:100%; display:block; margin-top:1.3rem; max-height:360px; object-fit:cover; }
.timeline { padding:110px 20px 130px; background:#e9eef0; }
.timeline-inner { width:min(1030px,100%); margin:auto; }
.timeline h2 { margin-bottom:3rem; }
.timeline-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#b9c8cf; }
.timeline-item { background:#f7f8f7; padding:1.3rem; min-height:150px; }
.timeline-item strong { color:var(--blue); font-size:1.25rem; }
.timeline-item p { color:#52616a; line-height:1.55; margin:.6rem 0 0; font-size:.93rem; }
.gallery { width:min(1080px,calc(100% - 40px)); margin:auto; padding:120px 0; }
.gallery-intro { max-width:620px; margin-bottom:40px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery-grid figure { margin:0; background:#fff; }
.gallery-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery-grid figcaption { padding:10px 12px 13px; color:var(--muted); font-size:.78rem; }
.closing { background:var(--blue-dark); color:#fff; padding:120px 20px; }
.closing-inner { width:min(760px,100%); margin:auto; }
.closing h2 { font-size:clamp(2rem,5vw,4rem); }
.closing p { color:#d9e7ee; line-height:1.8; }
.closing a { color:#fff; }
footer { padding:28px 20px; text-align:center; color:#75828a; font-size:.78rem; background:#102f45; }
.leaflet-control-attribution { font-size:9px; }
@media (max-width:800px) { .scrolly { display:block; } .map-stage { position:sticky; height:52vh; z-index:5; padding:12px 0 20px; background:var(--paper); } #map { height:100%; min-height:0; } .story { padding:0; } .story-step { min-height:auto; padding:28vh 0 12vh; } .card.is-active { transform:none; } .timeline-grid,.gallery-grid { grid-template-columns:1fr; } .gallery-grid figure:nth-child(n+4) { display:none; } }