/* Veldgids: wit papier, warme inkt, serif-koppen, secties gescheiden door
   regels in plaats van dozen. Kleur draagt betekenis: pine is interactie/positief,
   clay is voorbehoud, en verder is de pagina zwart-wit. Gekozen 12 aug 2026
   boven een 'atlas'-variant; de prototypes staan in het sessiescratchpad. */
:root{--paper:#fff;--ink:#191813;--muted:#6d685e;--hair:#e6e2d8;--rule:#191813;
--pine:#22593c;--pine-deep:#1b4830;--clay:#9a4d1c;
--serif:"Iowan Old Style","Charter","Bitstream Charter",Georgia,"Times New Roman",serif;
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#161512;--ink:#eae7e0;--muted:#a19b8f;
--hair:#2e2b26;--rule:#eae7e0;--pine:#8cc7a4;--pine-deep:#a5d6b9;--clay:#d8a06a}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.62 var(--sans)}
a{color:var(--pine)}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* masthead */
header.top{border-bottom:2px solid var(--rule);background:var(--paper)}
header.top .wrap{display:flex;align-items:baseline;gap:22px;padding:16px 24px 12px}
.brand{font:700 22px/1 var(--serif);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--pine);font-style:italic}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand .mark{width:26px;height:26px;flex:none;border-radius:5px}
nav.top a{color:var(--muted);text-decoration:none;font-size:13.5px;margin-right:16px;
 text-transform:uppercase;letter-spacing:.06em;font-weight:600}
nav.top a:hover{color:var(--ink)}

.crumbs{font-size:13px;color:var(--muted);margin-top:20px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
h1{font:700 clamp(32px,4.2vw,44px)/1.08 var(--serif);letter-spacing:-.015em;margin:14px 0 8px}
h2{font:700 25px/1.2 var(--serif);letter-spacing:-.01em;margin:4px 0 14px}
.lede{color:var(--muted);margin:0 0 16px;font-size:16.5px;font-variant-numeric:tabular-nums}

/* acties: één primaire knop, de rest is een link */
.btnrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:18px 0 14px}
.btn{display:inline-block;padding:10px 18px;background:var(--pine);color:var(--paper);
 text-decoration:none;font-weight:600;font-size:14.5px;border-radius:3px}
.btn:hover{background:var(--pine-deep)}
.btn.ghost{background:none;color:var(--pine);padding:0;border-radius:0;
 text-decoration:underline;text-underline-offset:3px}

/* attributenrij op de detailpagina: typografisch, het vinkje in pine */
.goodfor{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 30px;padding:12px 0;
 border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.goodfor .pill{font-size:15px;font-weight:600;color:var(--ink);background:none;padding:0;margin:0}
.pill i{font-style:normal;color:var(--pine)}

/* sectiekop: kleinkapitaal boven een zware inktregel — het ritme van elke pagina */
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
 color:var(--pine);margin:44px 0 14px;padding-top:14px;border-top:2px solid var(--rule)}
.duo .eyebrow{margin-top:0}

/* feitenlijst: geregelde rijen, bron als redactionele voetnoot */
.kv .row{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:9px 2px;
 border-bottom:1px solid var(--hair);font-size:15px}
.kv .k{font:600 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv .v b{font-weight:650}
.kv .src,.know .src{display:block;font:italic 12.5px/1.5 var(--serif);color:var(--muted);margin-top:2px}
.trustline{font:italic 13px/1.5 var(--serif);color:var(--muted);margin:10px 2px 0}

/* de kaart als plaat in een gids: passe-partout en cursief bijschrift */
.duo{display:grid;grid-template-columns:370px 1fr;gap:34px;align-items:start;margin:0 0 8px}
.duo>div{min-width:0}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.hero{margin:0;border:1px solid var(--hair);background:var(--paper);padding:12px}
.hero img{width:100%;height:auto;display:block}
.hero figcaption{font:italic 13px/1.55 var(--serif);color:var(--muted);
 padding:10px 4px 0;text-align:center}
.shot{position:relative;line-height:0}
.shot .overlay{position:absolute;inset:0;width:100%;height:100%}
.mapwrap{position:relative;border:1px solid var(--hair)}
.mapwrap img{width:100%;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
 background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;display:flex;
 align-items:center;justify-content:center;border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.maplegend{display:block;padding:10px 4px 0;font:13.5px/1.7 var(--sans);color:var(--muted)}
.maplegend span{display:flex;align-items:center;margin:3px 0}
.maplegend b{display:inline-flex;width:19px;height:19px;border-radius:50%;background:var(--ink);
 color:var(--paper);font-size:11px;align-items:center;justify-content:center;margin-right:8px;
 border:1.5px solid var(--paper);outline:1px solid var(--hair);flex:none}
.maplegend i{font-style:normal;margin-left:5px}

/* observaties: kolommen tekst met een fijne regel erboven; voorbehoud in clay */
.knowlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px;margin:6px 0 2px}
@media(max-width:700px){.knowlist{grid-template-columns:1fr}}
.know{padding:11px 0;border-top:1px solid var(--hair)}
.know .k{font:650 16.5px/1.3 var(--serif)}
.know .v{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.55;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.knowlist.warns{margin-top:20px}
.know.warn .k{color:var(--clay)}
.know.warn .k::before{content:"▲ ";font-size:11px;vertical-align:2px}

/* heatmap: het enige vlak waar pine als datakleur vol aan mag */
table.heat{border-collapse:separate;border-spacing:2px;font-size:12px;width:100%;
 max-width:840px;table-layout:fixed}
table.heat th{padding:3px 5px;border:0;color:var(--muted);font-weight:600;
 font-variant-numeric:tabular-nums;font-size:11.5px}
table.heat th:first-child{width:36px;text-align:left}
table.heat td{height:25px;background:var(--pine);opacity:.06;border:0;padding:0}
table.heat td.l0{opacity:.13}table.heat td.l1{opacity:.3}table.heat td.l2{opacity:.5}
table.heat td.l3{opacity:.72}table.heat td.l4{opacity:1}
.heatscale{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.heatscale i{display:inline-block;width:26px;height:12px;background:var(--pine)}

/* praktisch, nabij, faq: rustige geregelde lijsten */
.plan{padding:2px 0;margin:4px 0;font-size:15px}
.plan div{margin:5px 0}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 34px;margin:6px 0}
.fact{border-top:1px solid var(--hair);padding:11px 0;background:none}
.fact .k a{font:650 16.5px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.fact .k a:hover{color:var(--pine)}
.fact .v{font-size:13.5px;color:var(--muted);margin-top:3px}
details.faq{border-top:1px solid var(--hair)}
details.faq:last-of-type{border-bottom:1px solid var(--hair)}
details.faq summary{cursor:pointer;padding:11px 2px;font:650 16px/1.35 var(--serif);list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";float:right;color:var(--muted);font-family:var(--sans)}
details.faq[open] summary:after{content:"−"}
details.faq .a{padding:0 2px 14px;color:var(--muted);font-size:14.5px;max-width:70ch}

/* bijdragen en methode: de enige omkaderde vlakken op de pagina */
.contrib{border:2px solid var(--rule);background:var(--paper);padding:20px 22px;margin:10px 0}
.contrib h3{margin:0 0 4px;font:700 20px/1.2 var(--serif)}
.contrib .sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.contrib .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

/* bijdrageformulier — zelfde taal als de rest: regels, geen dozen */
.cform{margin:4px 0 0}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 18px}
.cform label{display:block;font:600 11.5px/1.9 var(--sans);letter-spacing:.09em;
 text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.cform label.full{display:block}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:3px;
 font:15px/1.5 var(--sans);color:var(--ink);background:var(--paper);
 border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:6px 2px;
 text-transform:none;letter-spacing:0}
.cform textarea{resize:vertical;border:1px solid var(--hair);padding:8px 10px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;
 border-color:var(--pine);box-shadow:0 1px 0 0 var(--pine)}
.cform button{margin:18px 0 0;padding:10px 20px;background:var(--pine);color:#fff;
 border:0;border-radius:3px;font:600 14.5px var(--sans);cursor:pointer}
.cform button:hover{background:#1b4830}
.contrib a.act{display:block;border:1px solid var(--hair);background:var(--paper);
 padding:11px 14px;text-decoration:none;color:var(--ink)}
.contrib a.act:hover{border-color:var(--ink)}
.contrib a.act b{display:block;font-size:14.5px}
.contrib a.act span{font-size:12.5px;color:var(--muted)}
.contrib .rev{font:italic 12.5px/1.5 var(--serif);color:var(--muted);margin:12px 0 0}
.method{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start;
 border:1px solid var(--hair);background:var(--paper);padding:16px 18px;margin:10px 0}
.method img{width:100%;display:block;border:1px solid var(--hair)}
.method p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
@media(max-width:600px){.method{grid-template-columns:1fr}}

/* hub- en lijstpagina's: kaarten als krantenkolommen, chips als meta-tekst */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 34px}
.card{border-top:1px solid var(--hair);background:none;overflow:hidden}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-top:14px}
.card .body{padding:10px 0 16px}
.card a{text-decoration:none;font:650 17px/1.3 var(--serif);color:var(--ink)}
.card a:hover{color:var(--pine)}
.card .meta{font-size:13px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.card .pill,.chips .pill{display:inline;background:none;padding:0;margin:0;
 font-size:12.5px;color:var(--muted)}
.card .pill:not(:last-child)::after,.chips .pill:not(:last-child)::after{content:" · ";color:var(--muted)}
.card .pill.soft{color:var(--clay);font-weight:600}
.chips{margin-top:8px;line-height:1.7}

/* tabellen (filterpagina's) */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair)}
th{font:600 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
td a{font-weight:650;color:var(--ink);text-decoration:none}
td a:hover{color:var(--pine)}
.scroll{overflow-x:auto}
.note{font:italic 13.5px/1.6 var(--serif);color:var(--muted);border-left:2px solid var(--hair);
 padding-left:14px;margin:18px 0}

/* stadsnavigatie: tweede laag onder de kruimels */
.localnav{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;margin:6px 0 26px;
 padding:9px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.localnav .here{font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink);margin-right:6px}
.localnav a{font-size:14.5px;color:var(--muted);text-decoration:none}
.localnav a:hover{color:var(--pine)}
.localnav a[aria-current]{color:var(--ink);font-weight:650;
 text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* de complete A–Z-lijst: compacte kolommen, geen kaarten */
.azlist{columns:3 220px;column-gap:34px;margin:10px 0 4px}
.azgroep{break-inside:avoid;margin:0 0 14px}
.azgroep h3{font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--pine);
 margin:0 0 7px;padding-bottom:5px;border-bottom:1px solid var(--hair)}
.azgroep ul{list-style:none;margin:0;padding:0}
.azgroep li{font-size:14px;line-height:1.5;margin:0 0 5px}
.azgroep a{text-decoration:none;color:var(--ink)}
.azgroep a:hover{color:var(--pine);text-decoration:underline}
.azgroep i{font-style:normal;color:var(--muted);font-size:12.5px}

/* groepen van intenties op de stadshub */
.intent{margin:0 0 6px}
.intent h3{font:700 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
 color:var(--muted);margin:22px 0 10px}
.intent .rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 34px}
.intent .cel{border-top:1px solid var(--hair);padding:11px 0}
.intent .cel a{font:650 16.5px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.intent .cel a:hover{color:var(--pine)}
.intent .cel .n{font-size:13.5px;color:var(--muted);margin-top:2px}
.intent .cel .w{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.combi .cel{border-top:2px solid var(--pine)}
.cijfers .rij{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 22px}
.cijfers .groot{font:700 30px/1.05 var(--serif);letter-spacing:-.02em;color:var(--pine);
 font-variant-numeric:tabular-nums}
.cijfers .wat{font-size:14.5px;font-weight:650;margin-top:3px}
/* kopjes die geen link zijn, wel dezelfde typografie */
.intent .cel a.nolink{color:var(--ink);text-decoration:none;cursor:default}
/* kernfeiten onder een showcase-kaart */
.showcase .feiten{margin-top:9px;border-top:1px solid var(--hair);padding-top:7px}
.showcase .fr{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
 line-height:1.75;border-bottom:1px solid var(--hair)}
.showcase .fr:last-child{border-bottom:0}
.showcase .fr span{color:var(--muted)}
.showcase .fr b{font-weight:650;text-align:right}
.combi .cel .n{color:var(--pine);font-weight:650}

/* contextuele voettekst per stad */
.voet{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:26px 34px;margin:0 0 26px;
 padding-bottom:24px;border-bottom:1px solid var(--hair)}
.vmerk b{display:block;font:700 19px/1.2 var(--serif);color:var(--ink)}
.vmerk span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);max-width:32ch}
.vkol b{display:block;font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.vkol a{display:block;font-size:14px;line-height:1.85;color:var(--ink);text-decoration:none}
.vkol a:hover{color:var(--pine);text-decoration:underline}
@media(max-width:700px){.voet{grid-template-columns:1fr 1fr}.vmerk{grid-column:1/-1}}
@media(max-width:700px){.azlist{columns:2 160px}}
@media(max-width:460px){.azlist{columns:1}}

/* footer.wrap, niet footer: het element draagt class="wrap", en .wrap zet
   margin:0 auto. Een kale footer-selector verliest dat specificiteitsduel, dus de
   marge onder de inhoud heeft nooit gewerkt — de scheidslijn plakte altijd tegen
   de laatste sectie aan. */
footer.wrap{margin:88px auto 40px;padding:28px 24px 0;border-top:2px solid var(--rule);
 font-size:13px;color:var(--muted)}
footer a{color:var(--muted)}

/* Ritme naar de onderkant. Elke sectie kreeg ongeveer evenveel lucht, waardoor de
   pagina eindigde in "en nog iets, en nog iets" en abrupt ophield. Grote secties
   krijgen nu meer ruimte, en na iets zwaars als een tabel van 80 regels of de
   A-Z-lijst komt extra wit: dat wit zegt 'nieuwe gedachte'. */
.eyebrow{margin:64px 0 12px;padding-top:20px;border-top:2px solid var(--rule)}
.duo .eyebrow,.terrain .eyebrow{margin-top:0;padding-top:0;border-top:0}
.scroll + .eyebrow,.azlist + .eyebrow,table + .eyebrow{margin-top:88px}
details.faq:last-of-type{margin-bottom:8px}
@media(max-width:560px){.kv .row{grid-template-columns:92px 1fr}}