
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#555555;
  --blue:#193d75;
  --soft:#f6f8fb;
  --line:rgba(25,61,117,.12);
  --shadow:0 14px 38px rgba(20,35,70,.08);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.65}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
.hero-map{padding:1rem 1rem 0}.map-wrap{max-width:var(--max);margin:0 auto}.map-frame{background:#fff;box-shadow:var(--shadow)}
.title-intro{max-width:900px;margin:3.2rem auto 0;padding:0 1.4rem;text-align:center}
h1{margin:0;font-size:clamp(2.8rem,6vw,5rem);line-height:1.02;font-weight:600;letter-spacing:.01em}
.standfirst{max-width:820px;margin:1rem auto 0;font-size:1.22rem}
.section{max-width:var(--max);margin:4rem auto;padding:0 1.4rem}.section-label{font-size:.84rem;letter-spacing:.18em;color:var(--blue);margin-bottom:.85rem}
h2{margin:.2rem 0 1rem;font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;font-weight:500}h3{margin:.1rem 0 1rem;font-size:1.32rem;font-weight:500;line-height:1.3}
p{margin:.2rem 0 1rem;font-size:1.08rem}
.single-width,.text-block,.wide-block{max-width:900px}.wide-block p{margin-bottom:1rem}.top-space{margin-top:1.5rem}
figure{margin:0;background:transparent}figure img{width:100%;border-radius:6px;box-shadow:var(--shadow)}figcaption{font-size:.95rem;color:var(--muted);padding-top:.65rem}
.bob-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;align-items:start}.bob-feature img{aspect-ratio:4/3;object-fit:cover}
.gallery-two,.gallery-three{display:grid;gap:1.4rem}.gallery-two{grid-template-columns:1fr 1fr}.gallery-three{grid-template-columns:repeat(3,1fr)}
.large-visuals img{aspect-ratio:4/3;object-fit:cover}
.research-layout{display:grid;grid-template-columns:.95fr 1.25fr;gap:1.4rem;align-items:start}.portrait-large img{aspect-ratio:4/5;object-fit:cover}.stacked-figures{display:grid;gap:1.4rem}.stacked-figures img{aspect-ratio:16/9;object-fit:cover}
.emphasis-gallery img{aspect-ratio:16/10;object-fit:cover}.support-gallery img{aspect-ratio:4/3;object-fit:cover}
.graphic-gallery img{aspect-ratio:4/3;object-fit:contain;background:var(--soft);padding:.25rem}.news-gallery img{aspect-ratio:4/3;object-fit:contain;background:var(--soft);padding:.25rem}
.film-investigation{display:grid;grid-template-columns:.72fr 1.28fr;gap:1.6rem;align-items:start}.frank-photo img{aspect-ratio:4/5;object-fit:cover}.film-copy{max-width:100%}
.final-pair img{aspect-ratio:4/3;object-fit:cover}
.sources-list{list-style:none;padding:0;margin:1rem 0 0;max-width:900px}.sources-list li{padding:.85rem 0;border-bottom:1px solid var(--line)}
.footer{padding:2rem 1rem 3rem;text-align:center;color:#666;font-size:.9rem}
.reveal{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;background:rgba(7,13,26,.9);display:none;align-items:center;justify-content:center;padding:2rem;z-index:100}.lightbox.open{display:flex}.lightbox img{max-width:min(1200px,92vw);max-height:86vh;box-shadow:0 30px 80px rgba(0,0,0,.45);border-radius:4px}.lightbox .close{position:absolute;top:1rem;right:1rem;border:0;background:#fff;color:#111;width:2.4rem;height:2.4rem;border-radius:999px;font-size:1.5rem;cursor:pointer}
@media (max-width:900px){.bob-intro,.gallery-two,.gallery-three,.research-layout,.film-investigation{grid-template-columns:1fr}.section{margin:3rem auto}}

.text-block p,
.wide-block p,
.film-copy p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

.bob-intro .text-block p {
  text-align: left;
}


/* versie 7 verfijningen */
.graphic-gallery{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .85rem;
}
.graphic-gallery figure img{
  aspect-ratio: 16/10;
  object-fit: contain;
  background: var(--soft);
  padding: .18rem;
}
.graphic-gallery figcaption{
  font-size: .92rem;
  line-height: 1.25;
}


/* versie 8: What if-plaatjes groter */
.graphic-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  align-items: start;
}

.graphic-gallery figure {
  width: 100%;
}

.graphic-gallery figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--soft);
  padding: .08rem;
}

.graphic-gallery figcaption {
  font-size: .95rem;
  line-height: 1.22;
}

@media (min-width: 901px) {
  .graphic-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* versie 9: What if-platen echt groot */
.graphic-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem;
  align-items: start;
}
.graphic-gallery figure { margin: 0; }
.graphic-gallery figure img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  background: transparent;
  padding: 0;
  border-radius: 4px;
}
.graphic-gallery figcaption {
  font-size: .95rem;
  line-height: 1.2;
  padding-top: .45rem;
}
@media (max-width: 900px) {
  .graphic-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .graphic-gallery figcaption { font-size: 1rem; }
}

.language-switch {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .62rem;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(20,35,70,.12);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .82rem;
  letter-spacing: .08em;
}
.language-switch a,
.language-switch strong {
  color: #111;
}
.language-switch strong {
  font-weight: 700;
}
.language-switch span {
  color: #777;
}


/* versie 13: definitieve What if-opmaak uit versie 11 */
.graphic-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem;
  align-items: start;
}
.graphic-gallery figure { margin: 0; }
.graphic-gallery figure img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  background: transparent;
  padding: 0;
  border-radius: 4px;
}
.graphic-gallery figcaption {
  font-size: .95rem;
  line-height: 1.2;
  padding-top: .45rem;
}
@media (max-width: 900px) {
  .graphic-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .graphic-gallery figcaption { font-size: 1rem; }
}
