@font-face { font-family:"Literata"; font-style:normal; font-weight:400 700; font-display:swap; src:url("vendor/fonts/literata-latin.woff2") format("woff2"); }
@font-face { font-family:"Literata"; font-style:italic; font-weight:400 700; font-display:swap; src:url("vendor/fonts/literata-latin-italic.woff2") format("woff2"); }
:root { color-scheme: light; --ink:#18201c; --muted:#657169; --line:#d8ded8; --bg:#f7f8f5; --panel:#ffffff; --accent:#146c5f; --accent2:#8f2d56; --amber:#a7662b; --soft:#eef3ee; --fig-good:#3f78a8; --fig-bad:#c66b2e; --fig-neutral:#d8c27a; --fig-line:#2d3832; --fig-grid:#d9ddd8; --fig-paper:#fffdf7; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
.wrap { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
header { background:#e8efe9; border-bottom:1px solid var(--line); padding:24px 0; }
.header-grid { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.eyebrow { margin:0 0 6px; color:var(--accent); text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:0; }
h1 { margin:0; font-size:clamp(28px, 3.6vw, 44px); line-height:1.08; letter-spacing:0; }
h2 { margin:0 0 14px; font-size:21px; letter-spacing:0; }
nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
nav a { color:var(--ink); border:1px solid var(--line); background:white; padding:8px 10px; border-radius:6px; text-decoration:none; font-size:14px; }
main { padding:24px 0 56px; }
.metrics { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.metric, .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.metric { padding:16px; display:grid; min-height:128px; }
.metric span { color:var(--muted); font-size:14px; }
.metric strong { font-size:34px; align-self:center; letter-spacing:0; }
.metric small { color:var(--muted); }
.panel { padding:18px; margin:14px 0; overflow:auto; }
.note { border-left:4px solid var(--accent2); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:8px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:#2d3832; background:#f0f3ef; font-weight:700; }
td:not(:first-child), th:not(:first-child) { text-align:right; }
.article { max-width:740px; min-width:0; margin:0 auto; background:transparent; border:0; border-radius:0; padding:8px 0 28px; font-family:"Literata", Georgia, serif; font-size:15.8px; line-height:1.72; overflow-wrap:anywhere; }
.article h1 { font-family:"Literata", Georgia, serif; font-size:clamp(32px, 6vw, 46px); line-height:1.08; margin:6px 0 8px; font-weight:650; }
.verkeersbesluiten-article h1 { font-size:clamp(26px, 4.2vw, 36px); }
.article .byline { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.35; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.article h2 { margin-top:34px; margin-bottom:10px; font-family:"Literata", Georgia, serif; font-size:22px; line-height:1.22; font-weight:650; }
.article p { margin:13px 0; }
.article a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
.article em { color:#3c4740; }
.article strong { font-weight:650; }
.article table { width:min(980px, calc(100vw - 32px)); margin:18px 0 24px 50%; transform:translateX(-50%); font-family:"Literata", Georgia, serif; font-size:13.2px; line-height:1.45; background:rgba(255,255,255,.72); border-top:1px solid var(--line); }
.article th { font-weight:650; background:#edf2ed; }
.article td, .article th { padding:7px 8px; }
.appendix { margin-top:34px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13.2px; line-height:1.55; }
.appendix h2 { font-size:17px; color:#3d4842; margin-top:0; }
.appendix p { margin:9px 0; }
blockquote { margin:18px 0; padding:12px 16px; border-left:4px solid var(--accent); background:#edf4f1; }
code { background:#eef1ee; padding:1px 4px; border-radius:4px; }
ul { padding-left:24px; }
.viz { max-width:100%; min-width:0; overflow-x:auto; margin:28px 0 30px; padding:15px 16px 12px; background:var(--fig-paper); border:1px solid #cfcfc5; border-radius:3px; box-shadow:0 1px 0 rgba(24,32,28,.05); font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.viz figcaption { margin:0 0 8px; font-family:ui-sans-serif, system-ui, sans-serif; font-size:13px; font-weight:800; color:#25312b; }
.viz .controls { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 14px; font-family:ui-sans-serif, system-ui, sans-serif; }
.viz .control-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.viz .control-label { color:var(--muted); font-size:12px; font-weight:700; }
.viz button { border:1px solid #bfc6c1; background:#fffdf7; color:var(--ink); border-radius:3px; padding:5px 9px; font:700 12px ui-sans-serif, system-ui, sans-serif; cursor:pointer; }
.viz button.active { background:#25312b; color:#fffdf7; border-color:#25312b; }
.viz .cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; margin:12px 0 12px; border-top:1px solid #cfcfc5; border-bottom:1px solid #cfcfc5; font-family:ui-sans-serif, system-ui, sans-serif; }
.viz .card { border:0; border-right:1px solid #d7d7cd; border-radius:0; padding:9px 10px; background:#fffdf7; min-height:68px; }
.viz .card:last-child { border-right:0; }
.viz .card span, .viz .card strong, .viz .card small { display:block; }
.viz .card span { color:var(--muted); font-size:11.5px; line-height:1.25; font-weight:700; }
.viz .card strong { margin-top:5px; color:var(--ink); font-size:20px; line-height:1.15; font-weight:800; letter-spacing:0; }
.viz .card small { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.3; }
.figure-note { margin:8px 0 0; font-family:ui-sans-serif, system-ui, sans-serif; font-size:12.5px; line-height:1.45; color:var(--muted); }
.dotplot, .barplot { display:block; width:100%; height:auto; background:#fffdf7; }
.viz text { font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.axis { stroke:#7f887f; stroke-width:1.1; }
.ci { stroke:var(--fig-line); stroke-width:2.8; stroke-linecap:round; }
.ref { stroke:#525d55; stroke-width:1.15; stroke-dasharray:3 4; }
.rowline { stroke:var(--fig-grid); stroke-width:.9; }
.gridline { stroke:var(--fig-grid); stroke-width:.9; }
.tick, .plot-label, .value { font-family:ui-sans-serif, system-ui, sans-serif; fill:#334039; font-size:13px; }
.axis-label { font-family:ui-sans-serif, system-ui, sans-serif; fill:#66716b; font-size:11px; }
.tick { text-anchor:middle; fill:#66716b; }
.ref-label { font-weight:700; fill:#334039; }
.plot-label { font-weight:650; }
.value { font-weight:700; }
.dot { fill:var(--fig-bad); stroke:#25312b; stroke-width:.7; }
.dot.good { fill:var(--fig-good); }
.dot-good, .bar-good { fill:var(--fig-good); }
.dot-warn, .bar-warn { fill:var(--fig-bad); }
.timeline { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:8px; margin:12px 0 4px; font-family:ui-sans-serif, system-ui, sans-serif; }
.timeblock { border:1px solid var(--line); border-radius:6px; padding:10px; background:#f4f7f4; min-height:78px; display:flex; flex-direction:column; justify-content:space-between; }
.timeblock strong { font-size:16px; color:#1f2b25; }
.timeblock span { font-size:12.5px; color:var(--muted); }
.timeblock.pre { border-color:#b9cbc2; background:#eef5f1; }
.timeblock.gap { border-color:#d6c0a5; background:#f8f0e7; }
.timeblock.start { border-color:#d4b4c2; background:#f7edf1; }
.timeblock.post { border-color:#b7c4d2; background:#edf2f7; }
@media (max-width: 760px) { .header-grid { grid-template-columns:1fr; } nav { justify-content:flex-start; } .metrics { grid-template-columns:1fr 1fr; } .article { padding:4px 2px 24px; font-size:15.4px; } .timeline { grid-template-columns:1fr; } .viz .cards { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .metrics { grid-template-columns:1fr; } .viz .cards { grid-template-columns:1fr; } }

/* Warm editorial infographic system — shared by every zebra page. */
:root { --ink:#191919; --muted:#68645c; --line:#d4cbb8; --bg:#f3eddd; --panel:#faf6eb; --accent:#e3120b; --accent2:#1f5a7a; --amber:#9a6d1f; --soft:#ece3d0; --fig-good:#1f5a7a; --fig-bad:#e3120b; --fig-neutral:#c6b466; --fig-line:#252525; --fig-grid:#d8d0bf; --fig-paper:#faf6eb; }
body { font-family:Arial, Helvetica, sans-serif; background:var(--bg); line-height:1.58; }
.wrap { width:min(980px, calc(100% - 64px)); }
header { position:relative; background:var(--bg); border-top:7px solid var(--accent); border-bottom:1px solid var(--line); padding:29px 0 25px; }
.header-grid { max-width:600px; margin:0 auto; gap:34px; }
.header-byline { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.075em; }
h1 { font-family:Arial, Helvetica, sans-serif; letter-spacing:-.035em; }
nav { gap:4px 15px; max-width:560px; }
nav a { border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; padding:4px 0 3px; font-size:13px; font-weight:700; }
nav a:hover, nav a:focus-visible { color:var(--accent); border-bottom-color:var(--accent); }
main { padding:42px 0 88px; }
.inference-main { padding-top:14px; }
.article { max-width:700px; padding:0 0 42px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.62; }
.inference-article { max-width:600px; font-family:"Literata", Georgia, serif; font-size:15.5px; line-height:1.72; }
.inference-article > p, .inference-article > h2, .inference-article > blockquote, .inference-article > ul { width:100%; margin-left:auto; margin-right:auto; }
.inference-article > p { text-align:justify; }
.inference-article > .did-explainer { width:min(600px, 100%); }
.article h1 { max-width:720px; margin:0 0 11px; font-family:Arial, Helvetica, sans-serif; font-size:clamp(34px, 6vw, 52px); line-height:1.01; letter-spacing:-.045em; font-weight:800; }
.article .byline { margin-bottom:34px; font-family:Arial, Helvetica, sans-serif; font-size:11px; }
.article h2 { margin:68px 0 17px; padding-top:30px; border-top:1px solid var(--line); font-family:Arial, Helvetica, sans-serif; font-size:19px; line-height:1.12; letter-spacing:-.025em; font-weight:800; }
.article p { margin:15px 0; }
.article a { color:var(--accent2); }
.article em { color:var(--muted); }
.article table { font-family:Arial, Helvetica, sans-serif; background:rgba(250,246,235,.78); }
.article th { background:#eae1cf; }
blockquote { margin:28px 0 34px; padding:17px 20px; border-left:6px solid var(--accent); background:#ebe2cf; font-size:14px; line-height:1.52; }
.inference-article > blockquote:first-child { margin:0 0 22px; padding:14px 16px; border:1px solid #d49442; border-left:6px solid #b66d14; background:#f8e7c4; color:#4f3519; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.48; text-align:justify; }
.inference-article > blockquote:first-child strong { color:#8a4b08; letter-spacing:.055em; }
code { background:#e8dfcd; }
.metrics { gap:18px; margin:0 0 30px; }
.metric, .panel { border:0; border-top:2px solid var(--ink); border-radius:0; background:rgba(250,246,235,.68); }
.metric { min-height:138px; padding:18px 16px; }
.panel { margin:28px 0; padding:23px 22px; }
.note { border-left:0; border-top-color:var(--accent); }
.viz { position:relative; width:min(700px, 100%); max-width:700px; margin:55px auto 66px; padding:31px 0 36px; overflow-x:auto; background:transparent; border:0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; font-family:Arial, Helvetica, sans-serif; }
.viz::before { content:""; position:absolute; top:-2px; left:0; width:68px; height:6px; background:var(--accent); }
.viz figcaption { margin:0 0 19px; padding-top:5px; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size:12.5px; line-height:1.38; font-weight:400; color:var(--ink); }
.viz > svg, .viz > img, .dotplot, .barplot { display:block; width:100%; height:auto; background:var(--fig-paper); }
.infographic-figure { width:min(700px, 100%); max-width:700px; }
.viz .controls { margin:14px 0 19px; }
.viz .cards { margin:20px 0; border-color:var(--line); }
.viz .card { background:transparent; border-color:var(--line); }
.figure-note { margin:17px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:1.55; color:var(--muted); }
.timeline { gap:11px; margin:20px 0 10px; }
.timeblock { border-radius:0; background:rgba(250,246,235,.75); }
.did-explainer { overflow:visible; }
.did-explainer .did-intro { max-width:650px; margin:0 0 24px; color:var(--muted); font-size:12px; line-height:1.55; }
.did-formula { margin:0 0 28px; padding:18px 20px; border-left:6px solid var(--accent); background:#ebe2cf; font-size:14px; line-height:1.4; font-weight:800; }
.did-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; counter-reset:did-step; margin:0 0 27px; }
.did-step { counter-increment:did-step; min-width:0; padding-top:15px; border-top:1px solid var(--line); font-size:11px; line-height:1.5; }
.did-step::before { content:counter(did-step); display:block; width:26px; height:26px; margin:-29px 0 10px; border-radius:50%; background:var(--ink); color:var(--bg); text-align:center; font-size:13px; font-weight:800; line-height:26px; }
.did-step strong { display:block; margin-bottom:5px; font-size:12px; }
.did-assumption { margin:0; padding:16px 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(250,246,235,.68); font-size:11px; line-height:1.55; color:var(--muted); }
.did-assumption strong { color:var(--ink); }
#sources-and-references { width:100%; margin:54px auto 20px; font-family:Arial, Helvetica, sans-serif; font-size:10.5px; line-height:1.5; color:#4f4c46; }
#sources-and-references > h2 { margin:25px 0 8px; padding-top:16px; border-top:1px solid #cfc5b2; color:#292d29; font:800 13px/1.3 Arial, Helvetica, sans-serif; }
#sources-and-references > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
#sources-and-references a { overflow-wrap:anywhere; color:#1f5a7a; }
#technical-appendix { width:100%; margin:20px auto 34px; padding:14px 15px; border:1px solid #cfc5b2; background:#e9dfca; font-family:Arial, Helvetica, sans-serif; font-size:10.5px; line-height:1.5; color:#4f4c46; }
#technical-appendix details { margin:0; padding:0; border:0; background:transparent; }
#technical-appendix summary { cursor:pointer; color:#303630; font-size:11px; font-weight:800; }
#technical-appendix h3 { margin:17px 0 5px; color:#303630; font:800 11.5px/1.3 Arial, Helvetica, sans-serif; }
#technical-appendix h4 { margin:0 0 3px; color:#303630; font:800 10.5px/1.3 Arial, Helvetica, sans-serif; }
#technical-appendix p { margin:7px 0 0; }
#technical-appendix ul, #technical-appendix ol { margin:6px 0 0; padding-left:18px; }
#technical-appendix li { margin:4px 0; }
#technical-appendix a { overflow-wrap:anywhere; color:#1f5a7a; }
.methods-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.methods-source { padding:9px; border:1px solid #d7cdbb; background:#fffaf0; }
.methods-source h4 { margin:0 0 4px; color:#303630; font:800 10.5px/1.3 Arial, Helvetica, sans-serif; }
.methods-source p { margin:0!important; }
.methods-warning { margin-top:10px!important; padding:8px 9px; border-left:3px solid #a54b3e; background:#f8eeea; font-weight:650; }
.methods-references { columns:2; column-gap:24px; }
.methods-references li { break-inside:avoid; padding-right:8px; }
@media (max-width:760px) { .wrap { width:min(100% - 30px, 980px); } header { padding:22px 0 20px; } main { padding:32px 0 64px; } .article { padding:0 0 28px; font-size:13px; } .inference-article { font-size:15px; } .article h2 { margin-top:54px; padding-top:25px; } .viz { width:100%; margin:46px auto 54px; padding:28px 0 31px; } .did-steps { grid-template-columns:1fr; gap:30px; } }
@media (max-width:600px) { .methods-source-grid { grid-template-columns:1fr; gap:11px; margin-top:11px; } .methods-source { padding:12px 13px; } .methods-references { columns:1; } }
@media (max-width:480px) { .article h1 { font-size:35px; } .viz figcaption { font-size:12.5px; } .did-formula { padding:15px 16px; font-size:15.5px; } }