*{box-sizing:border-box}
:root{color-scheme:light;--zee:#102d45;--donker:#0b2237;--papier:#eaf2f3;--schuim:#a5e8dc;--inkt:#1d3444}
body{margin:0;background:var(--papier);color:var(--inkt);font:1.06rem/1.65 "Trebuchet MS",sans-serif}
a{color:inherit;text-underline-offset:.24em}
:focus-visible{outline:3px solid #cd592c;outline-offset:5px}
.skip{position:absolute;top:.5rem;left:.5rem;background:white;color:var(--zee);padding:.4rem .8rem;z-index:2}
.skip:not(:focus){clip-path:inset(50%)}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem max(5vw,calc((100vw - 1270px)/2));background:var(--donker);color:#eaf2f3}
header{border-bottom:1px solid #416578}
header nav{display:flex;gap:.55rem 1.5rem;flex-wrap:wrap}
nav a{padding:.25rem 0;font-size:.94rem}
.merk,footer span{font:1.65rem Georgia,serif;text-decoration:none;letter-spacing:-.04em}
section{padding:clamp(3rem,7vw,6rem) max(5vw,calc((100vw - 1270px)/2))}
.opening,.getij{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.opening{background:var(--zee);color:#f1f7f8}
h1,h2,dt{font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em;line-height:1.03;margin:0 0 .5em}
h1{font-size:clamp(3rem,6.1vw,6.2rem);margin-bottom:.32em}
h2{font-size:clamp(2.15rem,4.4vw,4.4rem)}
.rubriek{font-weight:700;font-size:.9rem;letter-spacing:.05em;margin:0 0 1rem;color:#28686e}
.opening .rubriek{color:var(--schuim)}
.intro,p{max-width:58ch}
.knop{display:inline-block;margin-top:.55rem;padding:.55rem 1rem;background:var(--schuim);color:var(--donker);text-decoration:none;font-weight:bold}
.knop:hover{text-decoration:underline}
figure{margin:0}
img,svg{display:block;width:100%;height:auto}
.opening img{border:1px solid #7399a5;border-radius:45% 45% 2px 2px / 20% 20% 2px 2px}
figcaption{font-size:.87rem;margin-top:.6rem}
.grafiek{background:#f8fbfa;border-bottom:4px solid #17666c;padding:clamp(.85rem,2.4vw,2rem)}
.sporen{background:#c7e2e0}
dl{margin:2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem 2rem}
dl div{border-top:1px solid #619699;padding-top:1rem}
dt{font-size:1.7rem}
dd{margin:0}
.notitie ol{padding-left:1.3rem;max-width:65ch}
.notitie li{padding:.3rem 0 .3rem .4rem}
@media(max-width:760px){.opening,.getij,dl{grid-template-columns:1fr}.opening figure{max-width:35rem}}