/* 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;
/* Ruimteschaal. Dezelfde overgang -- kop naar tekst, sectie naar sectie -- had op
drie sjablonen drie hoogtes, omdat elke regel zijn eigen getal koos: 2, 4, 6, 9,
11, 14, 18, 20, 22, 26, 44, 64, 68, 88. Vanaf hier kiest alles uit deze reeks.
De regel erachter: wat bij elkaar hoort staat op s2/s3, wat een nieuwe gedachte
begint op s7 of meer. */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
/* Twee breedtes, niet één. Roosters mogen de volle bak gebruiken; lopende tekst
niet, want een regel van 1012 px is ruim honderd tekens en die leest niemand
twee keer. 1060 blijft de bak: bij 1100 klapt het zescellige 'What do you need'
van twee rijen van drie naar 4+2, en dat rooster was met opzet symmetrisch. */
--page:1060px;--prose:74ch}
@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:var(--page);margin:0 auto;padding:0 24px}
/* Lopende tekst krijgt een leesbare regellengte, roosters de volle bak. De
methodepagina is de enige met echt lange stukken tekst; daar zijn de secties
gescheiden door een haarlijn in plaats van door de zware sectiekop, omdat zes
van die koppen onder elkaar de pagina in blokken zou hakken die er niet zijn. */
.prose{max-width:var(--prose)}
.prose h2{font:700 23px/1.25 var(--serif);letter-spacing:-.01em;max-width:none;
margin:var(--s7) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--hair)}
.prose.top>h2:first-child{margin-top:var(--s5);padding-top:0;border-top:0}
/* Het cijferblok breekt bewust uit de tekstbreedte, dus het heeft zijn eigen lucht
nodig; anders leest de kop eronder als bijschrift bij de cijfers. */
.cijfers.bewijs{margin:var(--s5) 0 var(--s7)}
.smal{max-width:var(--prose)}
.prose p{margin:0 0 var(--s4);font-size:16.5px;line-height:1.72}
.prose ul{margin:0 0 var(--s4);padding-left:19px}
.prose li{margin:0 0 var(--s3);line-height:1.7}
.prose li:last-child{margin-bottom:0}
.prose strong{font-weight:650}
/* masthead: een kleine krantekop, geen appbalk. Merk en navigatie staan als één
groep links, met genoeg lucht ertussen dat het geen doorlopende zin wordt. */
header.top{border-bottom:2px solid var(--rule);background:var(--paper)}
header.top .wrap{display:flex;align-items:baseline;gap:var(--s6);
padding:var(--s5) 24px var(--s4)}
.brand{font:700 23px/1 var(--serif);letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--pine);font-style:italic}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand .mark{width:28px;height:28px;flex:none;border-radius:6px}
nav.top{display:flex;gap:var(--s5);flex-wrap:wrap}
nav.top a{color:var(--muted);text-decoration:none;font-size:12.5px;
text-transform:uppercase;letter-spacing:.1em;font-weight:650}
nav.top a:hover,nav.top a[aria-current]{color:var(--ink)}
/* Op een telefoon past merk plus twee navigatie-items niet op één regel zonder de
merknaam te knijpen. Dan liever twee regels met een haarlijn ertussen: dat leest
nog steeds als masthead. */
@media(max-width:600px){
header.top .wrap{flex-direction:column;align-items:stretch;gap:0;
padding:var(--s4) 20px var(--s2)}
.brand{font-size:20px}
.brand .mark{width:25px;height:25px}
nav.top{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);
gap:var(--s5)}
.wrap{padding-left:20px;padding-right:20px}}
/* Afstand kop-naar-inhoud stond op de kruimels (20px) én op h1 (14px), dus een
pagina zonder kruimels begon 34 px hoger dan een pagina met. Nu draagt main de
ruimte en zijn beide gevallen gelijk. */
main.wrap{padding-top:var(--s5)}
.crumbs{font-size:13px;color:var(--muted);margin:0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
h1{font:700 clamp(31px,4.2vw,44px)/1.08 var(--serif);letter-spacing:-.015em;
margin:var(--s3) 0 var(--s2);max-width:28ch}
h2{font:700 25px/1.2 var(--serif);letter-spacing:-.01em;margin:0 0 var(--s3);max-width:32ch}
.lede{color:var(--muted);margin:0 0 var(--s4);font-size:16.5px;
font-variant-numeric:tabular-nums;max-width:var(--prose)}
/* acties: één primaire knop, de rest is een link */
.btnrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
margin:var(--s4) 0 var(--s4)}
.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 var(--s6);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.
Eén plek, niet twee: dit blok stond ook onderaan de stylesheet nog eens met
andere getallen, en dan is niet meer te zien welke ruimte de bedoeling was. */
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--pine);margin:var(--s8) 0 var(--s3);padding-top:var(--s5);
border-top:2px solid var(--rule)}
/* Onderaan de pagina wordt de inhoud kleiner terwijl de tussenruimte gelijk bleef,
waardoor alles als een aaneengesloten brij ging lezen. Na iets zeer dichts --
een tabel van tachtig rijen, een A-Z-lijst -- hoort meer lucht: dat is wat de
lezer vertelt dat er een nieuwe gedachte begint. */
.scroll + .eyebrow, table + .eyebrow, .azlist + .eyebrow,
details.faq + .eyebrow, .cards + .eyebrow, .contrib + .eyebrow{margin-top:var(--s9)}
.scroll{margin-bottom:var(--s2)}
/* Een sectiekop die meteen op een andere volgt zou twee zware regels boven elkaar
zetten. */
.eyebrow + .eyebrow{margin-top:var(--s5)}
.duo .eyebrow,.terrain .eyebrow{margin-top:0;padding-top:0;border-top:0}
/* feitenlijst: geregelde rijen, bron als redactionele voetnoot */
/* 124px in plaats van 104px: "WATER QUALITY" brak op twee regels omdat het
label in kapitalen met letter-spacing staat en niet in 104px past. Gemeld
door de eigenaar met de eis dat elke rij op één regel staat. */
.kv .row{display:grid;grid-template-columns:124px 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}
/* Cursieve toelichting onder een kop. Hij had geen ondermarge, waardoor de
bovenregel van het rooster eronder dwars door de staarten van de letters liep. */
.trustline{font:italic 13px/1.55 var(--serif);color:var(--muted);
margin:var(--s2) 0 var(--s4);max-width:var(--prose)}
/* 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.leeg{width:15px;height:15px;border-width:2px}
.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}
/* box-shadow in plaats van outline: `outline` wordt buiten de border-box
getekend en volgt de border-radius niet overal even netjes, waardoor er een
hoekig randje om een rond bolletje stond -- op elke strandpagina, driemaal
gemeld door de eigenaar. Een inset-loze box-shadow met spread 1px volgt de
radius wel en tekent exact dezelfde haarlijn. */
.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);box-shadow:0 0 0 1px 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:var(--s5)}
.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:var(--s3) 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:var(--s3) 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:var(--s2) 0 var(--s5);padding:10px 0;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* De balk is zelf al een scheiding; de sectiekop erna hoeft er geen volle
sectie-afstand meer bij te doen. */
.localnav + .eyebrow{margin-top:var(--s7)}
.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 var(--s2)}
.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}
/* puntenkaart per stad of filter */
.kaart{margin:8px 0 4px}
.kaart svg{width:100%;height:auto;max-height:56vh;display:block;margin:0 auto;
border:1px solid var(--hair)}
.kaart .bg{fill:#f7f4ec}
.kaart .p{fill:var(--pine);opacity:.5}
.kaart a:hover .p{opacity:1;r:5}
.kaart .p.hi{fill:var(--clay);opacity:.95}
.kaart .pl{font:600 11px var(--sans);fill:#9b9484;text-anchor:middle;letter-spacing:.04em}
.kaart figcaption{font:italic 12.5px/1.5 var(--serif);color:var(--muted);padding:7px 2px 0}
@media(prefers-color-scheme:dark){.kaart .bg{fill:#1a1c19}.kaart .pl{fill:#6f6a5f}}
.combi .cel .n{color:var(--pine);font-weight:650}
/* voettekst: één component voor de hele site. De stadslinks staan er als losse
groep boven, zodat de vaste kolommen op elke pagina hetzelfde zijn en de
contextuele laag herkenbaar apart. */
.voetctx{padding-bottom:var(--s5);margin-bottom:var(--s5);
border-bottom:1px solid var(--hair)}
.voetctx b{display:block;font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.voetctx .rij{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.voetctx a{font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.voetctx a:hover{color:var(--pine);text-decoration:underline}
/* Vier kolommen sinds 21 aug: landen hebben een eigen kolom gekregen. Ze
stonden tussen de regio's onder "Find a beach" en lazen daar als de zevende
bestemming in plaats van als de twee helften van de site. */
.voet{display:grid;grid-template-columns:1.5fr 1fr .7fr 1fr;gap:var(--s5) 30px;margin:0;
padding-bottom:var(--s5);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:var(--s1);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:var(--s1)}
.vkol a{display:block;font-size:14px;line-height:1.9;color:var(--ink);text-decoration:none}
.vkol a:hover{color:var(--pine);text-decoration:underline}
@media(max-width:860px){.voet{grid-template-columns:1fr 1fr;gap:var(--s5)}
.vmerk{grid-column:1/-1}}
@media(max-width:700px){.azlist{columns:2 160px}}
@media(max-width:460px){.azlist{columns:1}}
/* de stedenindex: staat als kolomkop, plaatsen als lopende regel. Acht staten in
losse secties met een eigen zware regel maakten er 1.200 px van voor elf links;
dit blijft werken bij honderd metro's. */
.staten{border-top:2px solid var(--rule);margin-top:var(--s5)}
.staat{display:grid;grid-template-columns:160px 1fr;gap:var(--s2) var(--s5);
padding:var(--s4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.staat>b{font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
.plaatsen{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.plaatsen a{font:650 16.5px/1.35 var(--serif);color:var(--ink);text-decoration:none;
white-space:nowrap}
.plaatsen a:hover{color:var(--pine)}
.plaatsen i{font-style:normal;font:400 13px/1 var(--sans);color:var(--muted);margin-left:6px}
.staat.dichtbij>b{color:var(--pine)}
@media(max-width:620px){.staat{grid-template-columns:1fr;gap:var(--s1)}}
/* De vinder. Het enige stuk van de site dat als gereedschap werkt in plaats van
als tekst, en dus het enige waar iets aan te klikken valt dat geen link is. Hij
houdt zich verder aan dezelfde taal: regels in plaats van dozen, invoervelden
met alleen een onderstreping, geen pillen en geen paneel. */
.vinder[hidden]{display:none}
.vinder{border-top:2px solid var(--rule);margin-top:var(--s5)}
.vrij{display:grid;grid-template-columns:180px 1fr;gap:var(--s2) var(--s5);
padding:var(--s4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.vrij>b{font:700 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
.vwaar{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.vwaar .invoer{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.vwaar .of{color:var(--muted);font-size:14px}
.vwaar [hidden]{display:none}
.vinder input[type=text]{font:15.5px/1.5 var(--sans);color:var(--ink);background:none;
border:0;border-bottom:1px solid var(--hair);padding:5px 2px;width:210px;border-radius:0}
.vinder input[type=text]:focus{outline:0;border-color:var(--pine);
box-shadow:0 1px 0 0 var(--pine)}
.vinder select{font:15.5px/1.5 var(--sans);color:var(--ink);background:none;
border:0;border-bottom:1px solid var(--hair);padding:5px 2px;border-radius:0}
.vinder select:focus{outline:0;border-color:var(--pine)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.opts label{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;cursor:pointer}
.opts input{width:16px;height:16px;accent-color:var(--pine);margin:0;flex:none}
.hier{font-size:15.5px;color:var(--muted)}
.hier b{color:var(--ink);font-weight:650}
.hier[hidden]{display:none}
.vdoen{display:flex;align-items:baseline;gap:var(--s5);flex-wrap:wrap;padding:var(--s5) 0 0}
button.btn{border:0;font:600 14.5px var(--sans);cursor:pointer}
button.link{background:none;border:0;padding:0;color:var(--pine);font:600 15px var(--sans);
cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button.link:hover{color:var(--pine-deep)}
.vmelding{font:italic 14px/1.6 var(--serif);color:var(--clay);margin:var(--s3) 0 0}
/* Resultaten lenen het kaartrooster van de rest van de site, met twee extra
regels: waarom het er staat, en wat de drukte doet op het gekozen moment. */
.res .card .waarom{font-size:13px;color:var(--muted);margin-top:var(--s1)}
.res .card .rustig{font-size:13px;color:var(--pine);margin-top:var(--s1)}
.res .card .door{font-size:12.5px;color:var(--muted);margin-top:var(--s2);
text-decoration:none;display:inline-block}
.res .card .door:hover{color:var(--pine)}
.res .ok{font-size:13.5px;color:var(--muted);margin:0 0 var(--s3);
font-variant-numeric:tabular-nums}
.res .card .chips i{font-style:normal;color:var(--pine)}
/* Op een telefoon zijn dit de enige dingen op de site die aangeraakt worden, dus
krijgen ze de ruimte: twee vaste kolommen in plaats van een vloeiende rij (waarin
"Splash pad" precies tegen de rechterrand aan liep), grotere vakjes, en genoeg
hoogte per regel om er met een duim naast te kunnen zitten. */
@media(max-width:640px){
.vrij{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) 0}
.vinder input[type=text]{width:100%;font-size:16px;padding:8px 2px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4)}
.opts label{font-size:16px;padding:7px 0;align-items:center}
.opts input{width:20px;height:20px}
.vinder select{font-size:16px;padding:8px 2px}
button.link{padding:7px 0;font-size:16px}
.vdoen{padding-top:var(--s4)}
.vinder .btn{padding:13px 22px;font-size:16px}}
/* 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. */
/* De afsluitende regel hoort op de inhoudsbreedte te liggen, net als elke
sectiekop. Stond hij op footer.wrap zelf, dan liep hij 48 px door aan beide
kanten, want de horizontale padding van .wrap valt binnen de rand. */
footer.wrap{margin:var(--s9) auto var(--s7);padding:0 24px;
font-size:13px;color:var(--muted)}
.voetbak{border-top:2px solid var(--rule);padding-top:var(--s6)}
footer a{color:var(--muted)}
footer .fijn{max-width:var(--prose);margin:var(--s5) 0 0;line-height:1.7}
footer .fijn+.fijn{margin-top:var(--s2)}
details.faq:last-of-type{margin-bottom:var(--s2)}
/* Op smal scherm past het label niet naast de waarde: onder elkaar, dan
houdt de waarde de volle breedte en breekt hij niet. */
@media(max-width:560px){.kv .row{grid-template-columns:1fr;gap:2px}
.kv .k{line-height:1.5}}
/* .kenmerken/.kenmerk stond hier: een rooster met witte kaartjes met rand en
ronde hoek, voor de getelde reviewfeiten. Het stond direct boven .knowlist,
die dezelfde soort informatie toont als redactionele rij met dunne lijn. Twee
ontwerptalen op een halve meter afstand, en de kaartjes eerst -- dus de
gids-sectie opende met databasevocabulaire. De feiten gaan nu door .know, met
hun telling als .src eronder. */
/* --- Right Beaches: alleen wat een strand nodig heeft en een speeltuin niet ----
Alles hierboven is ongewijzigd het systeem van Right Playground. Hieronder
staan de twee verschillen die uit het object volgen: het kader is liggend
(2:1) in plaats van vierkant, want een strand is een lijn; en de condities
staan naast het getij in plaats van eronder, omdat ze samen één antwoord op
"hoe is het nu" vormen. */
.hero img{aspect-ratio:auto}
.mapwrap{line-height:0}
.condgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-items:start}
@media(max-width:760px){.condgrid{grid-template-columns:1fr}}
.condgrid table{font-size:14px}
/* Overzichtsrooster: liggende beelden, dus bredere kolommen dan de kaartjes
van de speeltuinhub. */
.rooster{list-style:none;padding:0;margin:var(--s4) 0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0 34px}
.rooster li{border-top:1px solid var(--hair);padding-bottom:var(--s5)}
.rooster a{text-decoration:none;display:block}
/* height:auto hoort hier, en niet omdat het netjes staat. De attributen
width="420" height="420" op de ![]()
gelden als presentatie-hint, dus de
berekende hoogte werd 420px terwijl de breedte meeschaalde met de kolom --
315 bij 420, oftewel 3:4 in een rooster dat vierkant hoort te zijn.
aspect-ratio doet alleen iets zolang één van beide maten auto is. */
.rooster img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
margin-top:14px;background:var(--hair)}
/* De showcasekaartjes deelden geen beeldregel met de roosters: ze hingen aan hun
width/height-attributen, en zodra die van 300 naar 420 gingen liep de rij
scheef. Eén verhouding voor élk kaartbeeld op de site. De gap in het
basisontwerp stond op 34px, buiten de ruimteschaal. */
.cards{gap:0 var(--s6)}
.card img,.card .geenbeeld{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
display:block;background:var(--hair)}
/* Geen beeld is een toestand, geen fout. Een vlak in papierkleur met dezelfde
verhouding als de tegels ernaast houdt het rooster recht; een ontbrekend
![]()
liet de rij inzakken en een gebroken ![]()
is erger dan geen beeld. */
/* De cel van dit uur krijgt een ring en geen andere kleur: de kleur draagt al
betekenis (hoe druk), dus die overschrijven zou de legenda breken. */
td.nu{outline:2px solid var(--pine);outline-offset:-2px;position:relative}
.nu-druk{font:400 15px/1.5 var(--sans);color:var(--ink);margin:0 0 var(--s3)}
.nu-druk b{font-weight:650}
.geenbeeld{display:block;width:100%;aspect-ratio:1/1;margin-top:14px;
background:var(--hair);border:1px solid var(--hair)}
.rooster .n{display:block;margin-top:9px;font:650 17px/1.3 var(--serif);color:var(--ink)}
.rooster a:hover .n{color:var(--pine)}
.rooster .s{display:block;font-size:13px;color:var(--muted);margin-top:2px;
font-variant-numeric:tabular-nums}
/* --- finder ---------------------------------------------------------------
Zelfde vormtaal als de rest: geen kaarten, geen pillen, geen iconen. Het
formulier is een blok met dezelfde rand als het bijdragen-vak, de resultaten
zijn een lijst met een dunne lijn ertussen. Wat hier NIET staat is net zo
belangrijk: geen schaduwen, geen afgeronde knoppen, geen accentkleuren buiten
pine. */
/* Verticale dichtheid bovenaan de strandpagina.
Gemeten op 1440x900: het volgende bovenkopje begon op 1138 px, dus de bezoeker
zag alleen kop, acties, At a glance en de kaart. Niets wees erop dat er meer
onder stond.
Drie sneden, geen daarvan in de typografie:
- het heldenbeeld van 580 naar 400 px hoog (het kader is al op het
toegangspunt gecentreerd, dus bijsnijden kost geen informatie)
- de gaten tussen kruimelpad, kop, lede, knoppen en kenmerken
- de overgang van het duo naar de eerste sectie
Samen ~240 px, genoeg om de volgende kop te laten meekijken. */
.hero img{max-height:360px;object-fit:cover;object-position:center}
/* De bovenkant van de strandpagina, 21 aug ongeveer 18% korter gemaakt. De
winst komt uit witruimte en niet uit kleinere letters: de kop, de feiten en
de kaart houden hun maat, de gaten ertussen niet. Reden: op een laptop van
1440x900 vulde de bovenkant het hele eerste scherm, zodat de bezoeker niet
zag dat er een gids-sectie onder zat.
De kaart wordt begrensd op hoogte in plaats van meegroeien met de
kolombreedte. Hij blijft het sterkste beeld op de pagina, maar bepaalt niet
langer in zijn eentje de schermhoogte. Niet bijsnijden: dat zou geografie
weghalen. */
main.wrap>.crumbs{margin-bottom:var(--s2)}
main.wrap>h1{margin-top:0;margin-bottom:var(--s2)}
.top{margin-top:var(--s4)}
.top .kv td,.top .kv th{padding-top:7px;padding-bottom:7px}
/* Geen doos meer om de tekening. `.hero` droeg een rand, een achtergrond en
12px padding uit de tijd dat het beeld de hele kolom vulde -- toen viel de
rand samen met de rand van het beeld. Sinds de tekening op hoogte begrensd is
staat hij smaller dan zijn figure, en dan omlijst die rand vooral witruimte.
De haarlijn om het beeld zelf (.mapwrap) blijft: die geeft de tekening een
rand tegen het papier, en die valt wel samen met het beeld. */
.hero{margin:0;border:0;background:none;padding:0}
.hero figcaption{margin-top:var(--s2);padding:0}
@media(min-width:900px){
/* De hoogtegrens hoort op de WRAPPER en niet alleen op het beeld: anders
krimpt het beeld wel maar houdt de haarlijn de volle kolombreedte, en dan
staat er een lijn om lucht. `width:fit-content` laat de rand het beeld
volgen.
LINKS uitlijnen, niet centreren. Met margin-inline:auto stond het beeld
midden in zijn kolom terwijl de kop "MAP OF ...", de legenda en het
bijschrift de volle kolombreedte hielden -- die lijnden dus uit op iets
anders dan de foto eronder. Gemeld door de eigenaar bij Jones Beach.
Eén linkerrand voor alle vier is de uitlijning die niet kan verschuiven
als een beeld een andere verhouding heeft. */
.hero{--kaarthoogte:clamp(360px,46vh,520px);
--kaartbreedte:min(100%,calc(var(--kaarthoogte) * var(--kaartverhouding,1)))}
.hero .mapwrap{width:var(--kaartbreedte);margin-inline:0}
.hero img,.hero .mapwrap img{max-height:var(--kaarthoogte);width:100%;
height:auto;margin-inline:0;display:block}
/* Legenda en bijschrift krijgen exact de beeldbreedte, zodat een lange regel
("Restrooms and drinking water 125 yd from the listing") onder de foto
afbreekt in plaats van erbuiten door te lopen. */
.hero .maplegend,.hero figcaption{max-width:var(--kaartbreedte)}
/* Het bijschrift stond gecentreerd (regel uit design_rightplayground.css)
onder een beeld dat nu links staat. Zelfde rand als de legenda erboven. */
.hero figcaption{text-align:left;padding-left:4px}
}
main.wrap > .crumbs{margin-bottom:var(--s2)}
main.wrap > h1{margin-top:0;margin-bottom:var(--s1)}
main.wrap > .lede{margin-top:0;margin-bottom:var(--s3)}
main.wrap > .btnrow{margin-top:var(--s3);margin-bottom:var(--s3)}
main.wrap > .goodfor{margin-top:0;margin-bottom:var(--s4)}
main.wrap > .duo{margin-bottom:var(--s4)}
.duo .kv .row{min-height:38px}
/* De regel onder At a glance is bronvermelding; die hoeft geen eigen blok. */
.duo .trustline{margin-top:var(--s2);font-size:13px}
/* Het bijdragenblok uit zijn doos, om dezelfde reden als de finder. Op een
strandpagina stonden ze vlak onder elkaar: twee omkaderde rechthoeken die de
pagina zwaar maakten. Een formulier hoeft geen doos; de invoervelden dragen
zelf al een rand.
Wat blijft: de sectiestructuur. Regel, bovenkopje, kop, inhoud. */
.contrib{border:0;background:none;padding:0;
border-top:1px solid var(--rule);padding-top:var(--s5);margin:var(--s6) 0}
.contrib h3{font:650 24px/1.2 var(--serif);margin:0 0 var(--s1)}
.contrib .sub{margin:0 0 var(--s4);max-width:56ch}
/* De finder als redactionele sectie, niet als doos.
Stond in een omkaderd blok en werd daardoor het zwaarste element op de
pagina: op de homepage een rechthoek die het halve scherm vulde, op een
strandpagina een tweede naast het bijdragenformulier. Twee stapelende
rechthoeken laten een veldgids als een webapplicatie voelen.
Nu dezelfde opbouw als elke andere sectie: een regel erboven, een bovenkopje,
een kop, en dan de inhoud. De hierarchie komt uit ruimte en typografie. */
.finder{border:0;background:none;padding:0;margin:var(--s6) 0;
border-top:1px solid var(--rule);padding-top:var(--s5)}
.finder .eyebrow{font:600 11px/1.4 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--pine);margin:0 0 var(--s2)}
.finder h3{font:650 24px/1.2 var(--serif);margin:0 0 var(--s1);letter-spacing:-.01em}
.finder .sub{margin:0 0 var(--s4);color:var(--muted);font:400 15px/1.5 var(--sans);
max-width:56ch}
.finder .veld{margin:0 0 var(--s4)}
.finder .lab{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
/* Locatie is de hoofdinvoer, dus die krijgt de ruimte; de knop ernaast is een
hulpmiddel en geen tweede keuze. */
.finder .waar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:stretch}
.finder input[type=text]{flex:1 1 260px;min-width:0;font:400 16px/1.4 var(--sans);
padding:10px 12px;border:1px solid var(--hair);border-bottom-color:var(--rule);
background:var(--paper);color:var(--ink);appearance:none;border-radius:0}
.finder input[type=text]::placeholder{color:var(--muted)}
.finder input[type=text]:focus-visible{outline:2px solid var(--pine);outline-offset:1px}
.finder button{font:600 14px/1 var(--sans);padding:10px 15px;border:1px solid var(--pine);
background:var(--paper);color:var(--pine);cursor:pointer;border-radius:0;appearance:none}
.finder button.licht{background:transparent}
.finder button.licht:hover{background:var(--pine);color:#fff}
.finder button.hoofd{background:var(--pine);color:#fff;padding:10px 22px}
.finder button.hoofd:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
.finder button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* De eisen zijn secundair: kleiner, dichter op elkaar, in een rij die meeloopt
met de breedte in plaats van een raster dat ruimte claimt. */
.finder .keuzes{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s1)}
.finder .keuze{display:flex;align-items:center;gap:7px;cursor:pointer;
font:400 14px/1.4 var(--sans);min-height:28px}
.finder .keuze input{position:absolute;opacity:0;width:0;height:0}
.finder .vink{flex:0 0 auto;width:15px;height:15px;border:1px solid var(--rule);
background:var(--paper);display:inline-block;position:relative}
.finder .keuze input:checked+.vink{background:var(--pine);border-color:var(--pine)}
.finder .keuze input:checked+.vink::after{content:"";position:absolute;
left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
transform:rotate(43deg)}
.finder .keuze input:focus-visible+.vink{outline:2px solid var(--pine);outline-offset:2px}
.finder .kiezer{position:relative;display:inline-block;max-width:100%}
.finder select{font:400 15px/1.4 var(--sans);padding:9px 36px 9px 11px;
border:1px solid var(--hair);border-bottom-color:var(--rule);background:var(--paper);
color:var(--ink);appearance:none;border-radius:0;cursor:pointer;width:100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23191813' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center}
.finder select:focus-visible{outline:2px solid var(--pine);outline-offset:1px}
/* De straal staat alleen, en smal: het is de minst belangrijke keuze van de
drie. "Show beaches" is naar het adresveld verhuisd, want je typt een plaats
en drukt dan op zoeken -- niet een half scherm lager, met de straalkiezer
ertussen. */
.finder .staart{margin-bottom:0}
.finder .staart .kiezer{max-width:16rem}
/* Kale variant: op de landingspagina draagt de H1 de kop al. Zonder eigen
kopregel valt de bovenlijn weg en begint de finder direct bij de invoer, wat
de eerste schermhoogte scheelt die de tekeningen eronder nodig hebben. */
.finder.kaal{border-top:0;padding-top:0;margin:var(--s4) 0 var(--s6)}
.finder.kaal .veld:first-child{margin-top:0}
/* De drie voorbeelden onder "Some days, the easy beach wins" stonden strak
tegen de alinea erboven. De hierarchie is bovenkopje, kop, korte alinea, en
dan pas de voorbeelden -- die laatste sprong hoort de grootste te zijn. */
.intent.combi.ruim{margin-top:var(--s6)}
.intent.combi.ruim .rij{gap:var(--s5) var(--s6)}
.intent.combi.ruim .cel{padding-top:var(--s3)}
.finder #find-out:not(:empty){margin-top:var(--s5);
border-top:1px solid var(--hair);padding-top:var(--s4)}
/* "More options" op de strandpagina. Geen JS: doet het werk, en
zonder JS blijft alles bruikbaar en vindbaar. */
.finder .meer{margin:var(--s3) 0 0}
.finder .meer>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
gap:6px;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
color:var(--pine);padding:4px 0}
.finder .meer>summary::-webkit-details-marker{display:none}
.finder .meer>summary::after{content:"+";font-size:14px;line-height:1}
.finder .meer[open]>summary::after{content:"2"}
.finder .meer>summary:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.finder .meer[open]>.veld:first-of-type{margin-top:var(--s3)}
/* Op een strandpagina is de finder een uitweg, geen hoofdzaak. */
.finder.klein{margin:var(--s5) 0}
.finder.klein h3{font-size:20px}
.finder.klein .sub{margin-bottom:var(--s3)}
ul.results{list-style:none;margin:var(--s4) 0 0;padding:0}
ul.results li{border-top:1px solid var(--hair)}
ul.results li:last-child{border-bottom:1px solid var(--hair)}
ul.results a{display:flex;gap:14px;padding:14px 0;text-decoration:none;color:inherit}
ul.results img{width:96px;height:96px;object-fit:cover;flex:0 0 auto;background:var(--hair)}
ul.results .body{min-width:0;flex:1}
ul.results .head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
ul.results .head b{font:600 17px/1.3 var(--serif)}
ul.results .mi{font:600 13px/1 var(--sans);color:var(--pine);white-space:nowrap}
ul.results .where{font:400 13px/1.4 var(--sans);color:var(--soft);margin:2px 0 6px}
ul.results .facts{display:flex;flex-wrap:wrap;gap:3px 16px}
ul.results .facts span{font:400 13px/1.5 var(--sans);color:var(--soft)}
ul.results .facts b{color:var(--ink);font-weight:600}
/* Mobiel. Iemand plant dit op een telefoon met kinderen ernaast, dus de
volgorde moet in seconden werken: locatie eerst, dan de eisen, dan rijden.
Raakvlakken op 44px -- kleiner is op een telefoon een gok in plaats van een
keuze. De select krijgt 16px, want onder de 16px zoomt iOS de pagina in bij
focus en dan staat de finder scheef. */
@media (max-width:640px){
ul.results img{width:72px;height:72px}
.finder{padding:var(--s4) var(--s4) var(--s5);margin:var(--s4) 0 var(--s5)}
.finder h3{font-size:19px}
/* flex:1 1 240px gaf op de telefoon een invoerveld van 240px HOOG: zodra
.waar een kolom is, is flex-basis de hoogte en niet de breedte. */
.finder .waar{flex-direction:column;align-items:stretch;gap:var(--s2)}
.finder input[type=text]{flex:0 0 auto}
.finder .waar button,.finder input[type=text]{width:100%;min-height:44px}
.finder .keuzes{grid-template-columns:1fr;gap:var(--s1) 0}
.finder .keuze{min-height:44px;padding:var(--s1) 0}
.finder .kiezer{display:block;width:100%}
.finder select{min-height:44px}
.finder button.hoofd{width:100%;min-height:48px;font-size:15px}
}
/* Interactieve hubkaart. De hoogte is bewust in vh: een kaart die de halve
viewport vult nodigt uit tot slepen, een strook van 300 px niet. */
.hubmap-wrap{margin:1.4rem 0 2rem;border-radius:12px;overflow:hidden;
border:1px solid var(--lijn,#e3e0d8)}
#hubmap{width:100%;height:min(70vh,620px)}
.hubpin{width:15px;height:15px;border-radius:50%;background:#d6452a;
border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.hubpin:hover{transform:scale(1.25)}
.maplibregl-popup-content{padding:.75rem .9rem;border-radius:10px;font:inherit}
.hubpop-t{display:block;font-weight:650;font-size:1.02rem;text-decoration:none;
color:var(--tekst,#1d242c)}
.hubpop-c{color:#6b7280;font-size:.85rem;margin-top:.1rem}
.hubpop-f{margin-top:.4rem;font-size:.88rem}
.hubpop-l{display:inline-block;margin-top:.5rem;font-size:.88rem;font-weight:600}
/* Structured decision rows: the value is the answer, the evidence line explains it,
the source line proves it. Clay marks a row that could change or cancel a visit —
set by the model that wrote the fact, never by a word list afterwards. */
.kv .v .ev{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;max-width:60ch}
.kv .row.warn .k{color:var(--clay)}
.kv .row.warn .k::before{content:"▲ ";font-size:11px;vertical-align:2px}
.warnflag{color:var(--clay);font-size:12px}