/*
Theme Name: Gemeentekoers
Theme URI: https://longtermnlchallenge.nl/
Author: Redactie Long Term NL Challenge
Description: Custom Dutch cycling theme built on the progress-ledger archetype. Ocean/wine palette, Bricolage Grotesque + Literata, self-hosted fonts.
Version: 1.0.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: gemeentekoers
*/

/* ---------- fonts (self-hosted, no CDN) ---------- */
@font-face{font-family:'Bricolage Grotesque';src:url('assets/fonts/bricolage-latin.woff2')format('woff2');
  font-weight:400 800;font-stretch:75% 100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Literata';src:url('assets/fonts/literata-latin.woff2')format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --gk-ink:#0B1F28;
  --gk-ocean:#0E4D64;          /* primary  — palette family: ocean */
  --gk-ocean-deep:#072F3D;
  --gk-ocean-mist:#E3EDF1;
  --gk-wine:#8C2F55;           /* secondary — palette family: wine */
  --gk-wine-soft:#F3E4EA;
  --gk-sand:#F6F2EA;
  --gk-paper:#fff;
  --gk-line:#D6CFC2;
  --gk-muted:#5A6B73;
  --gk-wrap:1160px;
  --gk-gut:clamp(1rem,4vw,2.5rem);
  --gk-r:3px;
  /* motion personality: "tij" (tide) — slow, weighted, never bouncy */
  --gk-tide:cubic-bezier(.22,.61,.36,1);
  --gk-tide-slow:520ms;
  --gk-tide-fast:220ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gk-sand);color:var(--gk-ink);
  font-family:'Literata',Georgia,'Times New Roman',serif;font-size:1.0625rem;line-height:1.68;
  font-optical-sizing:auto;}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,.gk-display{font-family:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  font-weight:700;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,2.9vw,2.15rem);text-wrap:balance;letter-spacing:-.02em}
h2{font-size:clamp(1.22rem,1.9vw,1.55rem);margin-top:2.2em;text-wrap:balance;letter-spacing:-.015em}
h3{font-size:clamp(1rem,1.25vw,1.12rem);margin-top:1.8em;color:var(--gk-ocean);letter-spacing:-.008em}
p,ul,ol{margin:0 0 1.15em}
.gk-wrap{max-width:var(--gk-wrap);margin-inline:auto;padding-inline:var(--gk-gut)}
.gk-narrow{max-width:70ch}

/* ---------- link treatment (signature layer 2) ---------- */
a{color:var(--gk-ocean);text-decoration:none;
  background-image:linear-gradient(var(--gk-wine),var(--gk-wine));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide);
  padding-bottom:1px}
a:hover,a:focus-visible{color:var(--gk-wine);background-size:100% 2px}
.gk-prose a{background-size:100% 1px;background-image:linear-gradient(var(--gk-line),var(--gk-line))}
.gk-prose a:hover,.gk-prose a:focus-visible{background-image:linear-gradient(var(--gk-wine),var(--gk-wine));background-size:100% 2px}
:focus-visible{outline:3px solid var(--gk-wine);outline-offset:2px}

/* ---------- skip link ---------- */
.gk-skip{position:absolute;left:-9999px;top:0;background:var(--gk-ink);color:#fff;padding:.7rem 1rem;z-index:99}
.gk-skip:focus{left:.5rem;top:.5rem}

/* ---------- header ---------- */
.gk-head{background:var(--gk-paper);border-bottom:1px solid var(--gk-line);position:sticky;top:0;z-index:40}
.gk-head-in{display:flex;align-items:center;gap:1.25rem;min-height:70px}
.gk-brand{display:flex;align-items:center;gap:.6rem;background:none;flex:0 0 auto;min-height:44px}
.gk-brand:hover{background:none}
.gk-brand svg{display:block;height:38px;width:auto}
.gk-brand-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;line-height:1.05;color:var(--gk-ink)}
.gk-brand-txt small{display:block;font-weight:500;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gk-muted)}
.gk-nav{margin-left:auto}
.gk-nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.gk-nav a{white-space:nowrap}
.gk-nav a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.94rem;color:var(--gk-ink)}
.gk-nav .current-menu-item>a{color:var(--gk-wine);background-size:100% 2px}
.gk-burger{display:none;margin-left:auto;background:var(--gk-paper);border:1px solid var(--gk-line);
  border-radius:var(--gk-r);padding:.5rem .7rem;font:inherit;font-size:.9rem;cursor:pointer;align-items:center;gap:.45rem}
.gk-burger span{display:block;width:18px;height:2px;background:var(--gk-ink);position:relative}
.gk-burger span::before,.gk-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--gk-ink)}
.gk-burger span::before{top:-6px}.gk-burger span::after{top:6px}

@media(max-width:1150px){
  .gk-burger{display:flex}
  .gk-nav{position:fixed;inset:var(--gk-headh,57px) 0 auto 0;background:var(--gk-paper);border-bottom:1px solid var(--gk-line);
    margin:0;display:none;box-shadow:0 12px 24px rgba(11,31,40,.09)}
  .gk-nav.is-open{display:block}
  .gk-nav ul{flex-direction:column;gap:0;padding:.5rem var(--gk-gut) 1.1rem}
  .gk-nav li{border-top:1px solid var(--gk-line)}
  .gk-nav li:first-child{border-top:0}
  .gk-nav a{display:block;padding:.85rem 0;font-size:1.02rem}
}

/* ---------- ledger hero (archetype: progress-ledger) ---------- */
.gk-ledger{background:var(--gk-ocean);color:#fff;padding:clamp(2.2rem,6vw,3.6rem) 0}
.gk-ledger h1{color:#fff;max-width:34ch;font-size:clamp(1.7rem,3.2vw,2.45rem)}
.gk-ledger-lead{font-size:clamp(1.02rem,1.9vw,1.18rem);max-width:60ch;color:#D9E7ED;margin-bottom:1.6rem}
.gk-tally{display:flex;flex-wrap:wrap;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:var(--gk-r);overflow:hidden;margin-bottom:1.5rem}
.gk-tally div{flex:1 1 150px;padding:.95rem 1.1rem;border-right:1px solid rgba(255,255,255,.2)}
.gk-tally div:last-child{border-right:0}
.gk-tally b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.85rem;line-height:1;font-weight:800}
.gk-tally>div>span{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#B9D2DC;display:block}
.gk-tally b span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}

/* ---------- buttons ---------- */
.gk-btn{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;
  padding:.72rem 1.35rem;border-radius:var(--gk-r);background:var(--gk-wine);color:#fff;border:2px solid var(--gk-wine);
  transition:transform var(--gk-tide-fast) var(--gk-tide),background var(--gk-tide-fast) var(--gk-tide);
  background-image:none;cursor:pointer}
.gk-btn:hover,.gk-btn:focus-visible{background:#732645;border-color:#732645;color:#fff;transform:translateY(-2px);background-image:none}
.gk-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.gk-btn-ghost:hover,.gk-btn-ghost:focus-visible{background:rgba(255,255,255,.12);color:#fff}

/* ---------- sections ---------- */
.gk-sec{padding:clamp(2rem,5vw,3.2rem) 0}
.gk-sec-paper{background:var(--gk-paper);border-block:1px solid var(--gk-line)}
.gk-eyebrow{font-family:'Bricolage Grotesque',sans-serif;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gk-wine);font-weight:700;margin:0 0 .5rem}
.gk-sec h2{margin-top:0}
.gk-prose h2{padding-top:.55em;position:relative}
.gk-prose h2::before{content:"";position:absolute;top:0;left:0;width:2.2rem;height:3px;
  background:var(--gk-wine);border-radius:2px}
.gk-prose h2:first-child{padding-top:0}
.gk-prose h2:first-child::before{display:none}

/* ---------- province ledger (signature moment) ---------- */
.gk-prov{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.7rem;list-style:none;padding:0;margin:0}
.gk-prov li{position:relative;background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:.8rem .9rem;overflow:hidden;isolation:isolate}
.gk-prov li::before{content:"";position:absolute;inset:auto 0 0 0;height:var(--fill,0%);
  background:linear-gradient(180deg,var(--gk-ocean-mist),#CFE2EA);z-index:-1;
  transition:height var(--gk-tide-slow) var(--gk-tide)}
.gk-prov .gk-prov-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.98rem;display:block}
.gk-prov .gk-prov-c{font-size:.82rem;color:var(--gk-muted)}
.gk-prov li[data-done="1"]{border-color:var(--gk-ocean)}
.gk-prov li[data-done="1"]::after{content:"✔";position:absolute;top:.55rem;right:.7rem;color:var(--gk-ocean);font-size:.9rem}

/* ---------- kraskaart ---------- */
.gk-kras-bar{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:1.1rem 1.2rem;margin-bottom:1.4rem}
.gk-kras-bar>p:first-child{margin:0 0 .6rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.25rem}
.gk-kras-bar p.gk-note{font-family:'Literata',Georgia,serif;font-weight:400;font-size:.85rem;color:var(--gk-muted)}
.gk-meter{height:12px;background:var(--gk-ocean-mist);border-radius:99px;overflow:hidden}
.gk-meter i{display:block;height:100%;width:var(--pct,0%);background:var(--gk-ocean);
  transition:width var(--gk-tide-slow) var(--gk-tide)}
.gk-kras-tools{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.gk-kras-tools button{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.88rem;
  padding:.5rem .9rem;border:1px solid var(--gk-line);background:var(--gk-sand);border-radius:var(--gk-r);cursor:pointer}
.gk-kras-tools button:hover{border-color:var(--gk-ocean);color:var(--gk-ocean)}
.gk-search{width:100%;max-width:340px;padding:.6rem .8rem;border:1px solid var(--gk-line);
  border-radius:var(--gk-r);font:inherit;font-size:.95rem;margin-bottom:1.2rem;background:var(--gk-paper)}
.gk-prov-group{margin-bottom:1.6rem;background:var(--gk-paper);border:1px solid var(--gk-line);
  border-radius:var(--gk-r);contain:layout paint}
.gk-prov-group>summary{cursor:pointer;padding:.85rem 1rem;list-style:none;display:flex;
  align-items:baseline;gap:.7rem;flex-wrap:wrap}
.gk-prov-group>summary::-webkit-details-marker{display:none}
.gk-prov-group>summary h2{margin:0;font-size:1.1rem}
.gk-prov-group>summary .gk-prov-tally{font-family:'Bricolage Grotesque',sans-serif;font-size:.85rem;
  color:var(--gk-muted);margin-left:auto}
.gk-gem{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.25rem .9rem;
  list-style:none;margin:0;padding:0 1rem 1.1rem}
.gk-gem li{margin:0}
.gk-gem label{display:flex;gap:.5rem;align-items:flex-start;padding:.24rem 0;cursor:pointer;font-size:.94rem}
.gk-gem input{margin-top:.32rem;accent-color:var(--gk-ocean);flex:0 0 auto}
.gk-gem input:checked+span{color:var(--gk-muted);text-decoration:line-through;text-decoration-color:var(--gk-ocean)}
.gk-note{font-size:.85rem;color:var(--gk-muted)}

/* ---------- prose ---------- */
.gk-prose{max-width:70ch}
/* No artificial clamp: a 40ch cap forced every longer heading onto two lines. */
.gk-prose h2,.gk-prose h3{max-width:none}
.gk-prose blockquote{margin:1.6em 0;padding-left:1.1rem;border-left:3px solid var(--gk-wine);
  font-style:normal;color:var(--gk-ocean-deep)}
.gk-prose figure{margin:1.8em 0}
.gk-prose figcaption{font-size:.85rem;color:var(--gk-muted);margin-top:.45rem}
.gk-prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.4em 0}
.gk-prose th,.gk-prose td{border-bottom:1px solid var(--gk-line);padding:.55rem .6rem;text-align:left}
.gk-prose th{font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.gk-tablewrap{overflow-x:auto}

/* ---------- faq ---------- */
.gk-faq{border-top:1px solid var(--gk-line);margin-top:1.4rem}
.gk-faq details{border-bottom:1px solid var(--gk-line)}
.gk-faq summary{cursor:pointer;padding:.95rem 2rem .95rem 0;position:relative;list-style:none}
.gk-faq summary::-webkit-details-marker{display:none}
.gk-faq summary h3{margin:0;font-size:1.04rem;font-weight:700}
.gk-faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.3rem;
  color:var(--gk-wine);transition:transform var(--gk-tide-fast) var(--gk-tide)}
.gk-faq details[open] summary::after{transform:rotate(45deg)}
.gk-faq .gk-faq-a{padding:0 0 1.05rem;margin:0;max-width:68ch}

/* ---------- article meta / cards ---------- */
.gk-meta{font-size:.83rem;color:var(--gk-muted);font-family:'Bricolage Grotesque',sans-serif;margin-bottom:1.4rem}
.gk-list{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.gk-list li{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);padding:1.1rem 1.2rem}
.gk-list h3{margin:0 0 .35rem;font-size:1.14rem}
.gk-list h3 a{display:inline-flex;align-items:center;min-height:44px}
.gk-list p{margin:0;color:var(--gk-muted);font-size:.95rem}

/* ---------- footer ---------- */
.gk-foot{background:var(--gk-ocean-deep);color:#C6DAE2;padding:2.4rem 0 1.6rem;margin-top:3rem}
.gk-foot a{color:#fff}
.gk-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem;margin-bottom:1.6rem}
.gk-foot h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#8FB4C2;margin:0 0 .6rem}
.gk-foot ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.gk-foot li a{display:inline-flex;align-items:center;min-height:44px}  /* real nav control */
.gk-foot-base{border-top:1px solid rgba(255,255,255,.16);padding-top:1.1rem;font-size:.84rem;color:#8FB4C2}

/* ---------- reveal (signature layer 3) ---------- */
.gk-rise{opacity:0;transform:translateY(14px);transition:opacity var(--gk-tide-slow) var(--gk-tide),transform var(--gk-tide-slow) var(--gk-tide)}
.gk-rise.is-in{opacity:1;transform:none}
.no-js .gk-rise{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .gk-rise{opacity:1;transform:none}
}

/* ---------- print (the Kraskaart is a scratch card — make it printable) ---------- */
@media print{
  .gk-head,.gk-foot,.gk-kras-tools,.gk-search,.gk-btn,.gk-ledger-lead{display:none!important}
  body{background:#fff;font-size:10pt}
  .gk-prov-group{break-inside:avoid;border-color:#999}
  .gk-prov-group[open] .gk-gem,.gk-gem{display:grid!important;grid-template-columns:repeat(4,1fr)}
  .gk-prov-group>summary{font-weight:700}
  details{display:block}
  details:not([open])>*:not(summary){display:block!important}
}

/* ---------- a11y utility ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--gk-ink);display:block;
  height:auto;left:5px;padding:1rem;top:5px;width:auto;z-index:100000}

/* ---------- gpx import ---------- */
.gk-import{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:1.2rem 1.3rem;margin-bottom:1.6rem}
.gk-import h2{margin:0 0 .6rem;font-size:1.25rem}
.gk-import>p{max-width:68ch;font-size:.95rem}
.gk-import code{background:var(--gk-sand);padding:.05em .3em;border-radius:2px;font-size:.9em}
.gk-drop{border:2px dashed var(--gk-line);border-radius:var(--gk-r);padding:1.4rem 1rem;
  text-align:center;background:var(--gk-sand);
  transition:border-color var(--gk-tide-fast) var(--gk-tide),background var(--gk-tide-fast) var(--gk-tide)}
.gk-drop[data-over]{border-color:var(--gk-ocean);background:var(--gk-ocean-mist)}
.gk-drop p{margin:0 0 .5rem}
.gk-drop p:last-child{margin:0}
.gk-drop label.gk-btn{cursor:pointer}
.gk-import[data-busy="1"] .gk-drop{opacity:.5;pointer-events:none}
.gk-import-status{margin:.9rem 0 0;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;font-size:.95rem;color:var(--gk-ocean)}
.gk-suggest{margin-top:1.2rem;border-top:1px solid var(--gk-line);padding-top:1rem}
.gk-suggest-list{list-style:none;margin:.8rem 0 1rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.15rem .9rem;
  max-height:340px;overflow-y:auto}
.gk-suggest-list label{display:flex;gap:.5rem;align-items:baseline;font-size:.94rem;cursor:pointer;padding:.2rem 0}
.gk-suggest-list input{accent-color:var(--gk-ocean);flex:0 0 auto}
.gk-suggest-list small{color:var(--gk-muted);font-size:.8rem}
.gk-btn-plain{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.92rem;
  background:none;border:0;color:var(--gk-muted);text-decoration:underline;cursor:pointer;padding:.7rem .6rem}
.gk-btn-plain:hover{color:var(--gk-wine)}

/* ---------- homepage progress board ---------- */
.gk-board-hint{font-size:.9rem;color:var(--gk-muted);margin:0 0 .9rem}
.gk-prov li a{display:block;background:none;padding:0}
.gk-prov li a:hover{background:none}
.gk-prov li a:hover .gk-prov-n{color:var(--gk-wine)}
.gk-prov li:has(a):hover{border-color:var(--gk-ocean)}
.gk-prov-c b{font-variant-numeric:tabular-nums;color:var(--gk-ocean)}

/* ---------- hero: map replaces the button stack ---------- */
.gk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.gk-hero-copy h1{margin-bottom:.45em}
.gk-hero-hint{font-size:.92rem;color:#B9D2DC;margin:0}
.gk-hero-hint b{color:#fff}
.gk-hero-map{position:relative}
.gk-kaart{width:100%;height:auto;max-height:min(62vh,540px);display:block;margin-inline:auto}
.gk-kaart a{background:none;outline-offset:3px}
.gk-kaart a:hover{background:none}
.gk-kaart-p{fill:#14607C;stroke:#0A3B4C;stroke-width:1.1;stroke-linejoin:round;
  transition:fill var(--gk-tide-fast) var(--gk-tide),stroke var(--gk-tide-fast) var(--gk-tide)}
.gk-kaart a:hover .gk-kaart-p,.gk-kaart a:focus-visible .gk-kaart-p{fill:var(--gk-wine);stroke:#fff}
.gk-kaart-p[data-state="part"]{fill:#2E86A8}
.gk-kaart-p[data-state="done"]{fill:#7CC7DE}
.gk-kaart-legend{display:flex;align-items:center;gap:.4rem;justify-content:center;flex-wrap:wrap;
  font-size:.78rem;color:#B9D2DC;margin:.7rem 0 0;font-family:'Bricolage Grotesque',sans-serif}
.gk-kaart-key{display:inline-block;width:.85rem;height:.85rem;border-radius:2px;
  border:1px solid rgba(255,255,255,.35);margin-left:.7rem}
.gk-kaart-key--none{background:#14607C;border-color:rgba(255,255,255,.55)}
.gk-kaart-key--part{background:#2E86A8}
.gk-kaart-key--done{background:#7CC7DE}
@media(max-width:820px){
  .gk-hero{grid-template-columns:1fr;gap:1.4rem}
  .gk-hero-map{order:2}
  .gk-kaart{max-height:52vh}
}

/* ---------- photo strip ---------- */
.gk-strip{position:relative;margin-top:1.3rem}
.gk-strip-track{display:flex;gap:1rem;list-style:none;margin:0;padding:0 0 .8rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.gk-strip-track li{flex:0 0 min(88vw,540px);scroll-snap-align:start}
.gk-strip-track figure{margin:0}
.gk-strip-track img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--gk-r);border:1px solid var(--gk-line)}
.gk-strip-track figcaption{font-size:.85rem;color:var(--gk-muted);margin-top:.45rem;max-width:52ch}
.gk-strip-nav{position:absolute;top:calc(50% - 2.2rem);transform:translateY(-50%);z-index:2;
  width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--gk-line);
  background:var(--gk-paper);color:var(--gk-ink);font-size:1.1rem;cursor:pointer;
  box-shadow:0 2px 10px rgba(11,31,40,.14);
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide)}
.gk-strip-nav:hover{background:var(--gk-ocean);color:#fff;border-color:var(--gk-ocean)}
.gk-strip-prev{left:-.6rem}
.gk-strip-next{right:-.6rem}
@media(max-width:860px){.gk-strip-nav{display:none}}

/* ---------- press list ---------- */
.gk-press{list-style:none;margin:1.2rem 0 0;padding:0;counter-reset:pr;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.1rem 1.6rem}
.gk-press li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;
  padding:.75rem 0;border-top:1px solid var(--gk-line);align-items:baseline}
.gk-press-out{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;
  color:var(--gk-ocean);white-space:nowrap}
.gk-press-hd{font-size:.97rem;display:flex;align-items:center;min-height:44px;color:inherit;
  background-image:linear-gradient(var(--gk-line),var(--gk-line));background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 100%}
.gk-press-hd:hover,.gk-press-hd:focus-visible{color:var(--gk-wine);
  background-image:linear-gradient(var(--gk-wine),var(--gk-wine));background-size:100% 2px}
.gk-press-kind{grid-column:2;font-size:.78rem;color:var(--gk-muted);
  font-family:'Bricolage Grotesque',sans-serif}

/* ---------- challenge hero: photo-filled display type (ref design 5) ---------- */
.gk-chero{background:var(--gk-ocean-deep);color:#fff;padding:clamp(2rem,5vw,3.2rem) 0 clamp(1.6rem,4vw,2.4rem);
  overflow:hidden}
.gk-chero .gk-eyebrow{color:#9FC6D4}
.gk-chero-h{margin:0 0 .6em;line-height:.9}
.gk-chero-small{display:block;font-size:clamp(1.25rem,2.6vw,1.9rem);color:#D9E7ED;font-weight:600;
  letter-spacing:-.01em}
.gk-chero-big{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(5.5rem,22vw,15rem);line-height:.82;letter-spacing:-.045em;
  /* solid fallback first, then the photo fill where supported */
  color:#7CC7DE;
  background-image:image-set(
      url('assets/img/katwijk-640.webp') type('image/webp'),
      url('assets/img/katwijk-1200.jpg') type('image/jpeg'));
  /* Zoomed into the open dune/sky band: the letterforms need a fairly even
     mid-tone to stay legible. A busy crop turns the numerals into noise. */
  background-size:220% auto;background-position:22% 26%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:contrast(1.12) saturate(1.15) brightness(1.06)}
/* Larger source only where the type is actually rendered big. Below this the
   640px variant is indistinguishable inside the letterforms and paints far sooner:
   the headline is the LCP element and cannot paint until this image has loaded. */
@media (min-width:900px){
  .gk-chero-big{background-image:image-set(
      url('assets/img/katwijk-1200.webp') type('image/webp'),
      url('assets/img/katwijk-1200.jpg') type('image/jpeg'))}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gk-chero-big{-webkit-text-fill-color:currentColor;background-image:none}
}
.gk-chero-lead{max-width:58ch;color:#C6DAE2;font-size:clamp(1rem,1.8vw,1.13rem);margin:0}

/* ---------- journey card (ref design 6) ---------- */
.gk-route{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:clamp(1.1rem,3vw,1.8rem);margin-top:1.2rem}
.gk-route-line{display:flex;align-items:center;gap:1rem}
.gk-route-end{flex:0 0 auto;text-align:center}
.gk-route-end b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;color:var(--gk-ocean)}
.gk-route-end i{display:block;font-style:normal;font-size:.78rem;color:var(--gk-muted);margin-top:.3rem;
  font-family:'Bricolage Grotesque',sans-serif;line-height:1.35}
.gk-route-end--last b{color:var(--gk-wine)}
.gk-route-track{flex:1 1 auto;height:3px;border-radius:2px;position:relative;
  background:linear-gradient(90deg,var(--gk-ocean),var(--gk-wine))}
.gk-route-track::before,.gk-route-track::after{content:"";position:absolute;top:-3.5px;
  width:10px;height:10px;border-radius:50%}
.gk-route-track::before{left:-2px;background:var(--gk-ocean)}
.gk-route-track::after{right:-2px;background:var(--gk-wine)}
.gk-route-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:0;
  margin:1.4rem 0 0;border-top:1px solid var(--gk-line)}
.gk-route-stats>div{padding:.85rem .9rem;border-right:1px solid var(--gk-line)}
.gk-route-stats>div:last-child{border-right:0}
.gk-route-stats dt{font-family:'Bricolage Grotesque',sans-serif;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gk-muted)}
.gk-route-stats dd{margin:.2rem 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:1.12rem;color:var(--gk-ink)}

/* ---------- CSS-only tabs (no JS, keyboard-native) ---------- */
.gk-tabs{margin-top:1.5rem;border-top:1px solid var(--gk-line);padding-top:1.1rem}
.gk-tabs-bar{display:flex;flex-wrap:wrap;gap:.4rem}
.gk-tabs>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gk-tabs-bar label{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.9rem;
  padding:.5rem 1rem;border:1px solid var(--gk-line);border-radius:99px;cursor:pointer;
  background:var(--gk-sand);color:var(--gk-muted);
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide),
             border-color var(--gk-tide-fast) var(--gk-tide)}
.gk-tabs-bar label:hover{color:var(--gk-ocean);border-color:var(--gk-ocean)}
#gk-r1:checked~.gk-tabs-bar label[for="gk-r1"],
#gk-r2:checked~.gk-tabs-bar label[for="gk-r2"],
#gk-r3:checked~.gk-tabs-bar label[for="gk-r3"]{background:var(--gk-ocean);border-color:var(--gk-ocean);color:#fff}
#gk-r1:focus-visible~.gk-tabs-bar label[for="gk-r1"],
#gk-r2:focus-visible~.gk-tabs-bar label[for="gk-r2"],
#gk-r3:focus-visible~.gk-tabs-bar label[for="gk-r3"]{outline:3px solid var(--gk-wine);outline-offset:2px}
.gk-tabs-panels{margin-top:1.1rem}
.gk-tabs-p{display:none;max-width:68ch;animation:gk-fade var(--gk-tide-slow) var(--gk-tide) both}
.gk-tabs-p h3{margin-top:0;font-size:1.1rem}
#gk-r1:checked~.gk-tabs-panels [data-for="gk-r1"],
#gk-r2:checked~.gk-tabs-panels [data-for="gk-r2"],
#gk-r3:checked~.gk-tabs-panels [data-for="gk-r3"]{display:block}
@keyframes gk-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- timeline ---------- */
.gk-time{list-style:none;margin:1.3rem 0 0;padding:0;position:relative}
.gk-time::before{content:"";position:absolute;left:4.6rem;top:.4rem;bottom:.4rem;width:2px;
  background:linear-gradient(180deg,var(--gk-ocean),var(--gk-wine));opacity:.35}
.gk-time li{display:grid;grid-template-columns:4rem 1fr;gap:0 1.6rem;padding:0 0 1.3rem;position:relative}
.gk-time-y{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.02rem;
  color:var(--gk-ocean);text-align:right;padding-top:.1rem}
.gk-time li::after{content:"";position:absolute;left:4.28rem;top:.45rem;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--gk-paper);border:2px solid var(--gk-ocean)}
.gk-time li:last-child::after{border-color:var(--gk-wine)}
.gk-time-b h3{margin:0 0 .25rem;font-size:1.04rem}
.gk-time-b p{margin:0;font-size:.95rem;color:var(--gk-muted);max-width:62ch}
@media(max-width:620px){
  .gk-time::before{left:.34rem}
  .gk-time li{grid-template-columns:1fr;gap:.2rem;padding-left:1.6rem}
  .gk-time li::after{left:0}
  .gk-time-y{text-align:left}
  .gk-route-line{flex-direction:column;align-items:stretch;gap:.7rem}
  .gk-route-track{height:auto;min-height:36px;width:3px;margin-inline:auto;
    background:linear-gradient(180deg,var(--gk-ocean),var(--gk-wine))}
  .gk-route-track::before{left:-3.5px;top:-2px}
  .gk-route-track::after{right:auto;left:-3.5px;top:auto;bottom:-2px}
}

/* ---------- kraskaart dashboard (refs: Design Ideas dashboards) ---------- */
.gk-dash{padding:clamp(1.4rem,4vw,2.4rem) 0}
.gk-dash-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between}
.gk-dash-head h1{margin:0}
.gk-dash-tools{display:flex;gap:.2rem;flex-wrap:wrap}
.gk-dash-intro{max-width:70ch;margin-top:.9rem}
.gk-dash-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;
  gap:clamp(1.2rem,3vw,2.2rem);margin-top:1.6rem;align-items:start}
.gk-dash-side{position:sticky;top:86px;display:grid;gap:1rem}

/* map as the canvas, not a decoration */
.gk-dash-canvas{background:var(--gk-ocean-deep);border-radius:var(--gk-r);
  padding:1rem .9rem .8rem;border:1px solid var(--gk-ocean)}
.gk-dash-canvas .gk-kaart{max-height:none}
.gk-dash-canvas .gk-kaart-p{cursor:pointer}
.gk-dash-canvas .gk-kaart-p[data-sel="1"]{stroke:#fff;stroke-width:2.4}
.gk-dash-canvashint{color:#9FC6D4;text-align:center;margin:.5rem 0 0}

/* stat tiles */
.gk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.gk-tile{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:.8rem .9rem}
.gk-tile--wide{grid-column:1/-1}
.gk-tile-k{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gk-muted);margin-bottom:.25rem}
.gk-tile b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.6rem;
  line-height:1;color:var(--gk-ocean);font-variant-numeric:tabular-nums}
.gk-tile b i{font-style:normal;font-size:.9rem;font-weight:600;color:var(--gk-muted)}
.gk-tile .gk-meter{margin-top:.55rem}
.gk-near{list-style:none;margin:.35rem 0 0;padding:0;font-size:.9rem}
.gk-near li{display:flex;justify-content:space-between;gap:.6rem;padding:.22rem 0;
  border-top:1px solid var(--gk-line)}
.gk-near li:first-child{border-top:0}
.gk-near b{font-family:'Bricolage Grotesque',sans-serif;font-size:.86rem;font-weight:700;
  color:var(--gk-wine)}
.gk-near a{font-size:.9rem}

/* filter bar */
.gk-dash-bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:.8rem}
.gk-dash-bar .gk-search{margin:0;flex:1 1 220px;max-width:none}
.gk-seg{display:inline-flex;border:1px solid var(--gk-line);border-radius:99px;overflow:hidden;
  background:var(--gk-paper)}
.gk-seg button{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem;
  padding:.5rem .95rem;border:0;background:none;cursor:pointer;color:var(--gk-muted);
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide)}
.gk-seg button+button{border-left:1px solid var(--gk-line)}
.gk-seg button:hover{color:var(--gk-ocean)}
.gk-seg button[aria-pressed="true"]{background:var(--gk-ocean);color:#fff}
.gk-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.gk-chips button{font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;font-weight:600;
  padding:.34rem .7rem;border:1px solid var(--gk-line);border-radius:99px;background:var(--gk-paper);
  color:var(--gk-muted);cursor:pointer;
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide),
             border-color var(--gk-tide-fast) var(--gk-tide)}
.gk-chips button:hover{border-color:var(--gk-ocean);color:var(--gk-ocean)}
.gk-chips button[aria-pressed="true"]{background:var(--gk-wine);border-color:var(--gk-wine);color:#fff}
.gk-dash-empty{background:var(--gk-paper);border:1px dashed var(--gk-line);border-radius:var(--gk-r);
  padding:1.1rem;color:var(--gk-muted);text-align:center;margin:0 0 1rem}

@media(max-width:900px){
  .gk-dash-grid{grid-template-columns:1fr}
  .gk-dash-side{position:static;order:1}
  .gk-dash-main{order:2}
  .gk-tiles{grid-template-columns:1fr 1fr}
}
@media print{
  .gk-dash-grid{display:block}
  .gk-dash-side,.gk-dash-bar,.gk-chips,.gk-dash-tools,.gk-import{display:none!important}
}

/* ---------- municipality dots ----------
   One dot per gemeente, at its real position. Hidden until ticked, so an untouched
   map stays clean and filling it in becomes the visible reward.

   The twelve colours are loosely taken from each province's flag where a dominant
   colour exists, but separability was the deciding factor -- they have to be told
   apart at a glance on a small screen. Colour is REINFORCEMENT only: the state
   lives in the checkbox, and the dot layer is aria-hidden, so nothing is conveyed
   by colour alone.                                                                */
.gk-dots circle{opacity:0;pointer-events:none;
  transition:opacity var(--gk-tide-fast) var(--gk-tide),
             r var(--gk-tide-slow) var(--gk-tide)}
.gk-dot[data-on="1"]{opacity:1}

.gk-dots [data-prov="groningen"]    {fill:#3FBF6F}
.gk-dots [data-prov="friesland"]    {fill:#5BC8E8}
.gk-dots [data-prov="drenthe"]      {fill:#E0574C}
.gk-dots [data-prov="overijssel"]   {fill:#F0B93E}
.gk-dots [data-prov="flevoland"]    {fill:#B8E04A}
.gk-dots [data-prov="gelderland"]   {fill:#6E8FE8}
.gk-dots [data-prov="utrecht"]      {fill:#FF9152}
.gk-dots [data-prov="noord-holland"]{fill:#FFD84A}
.gk-dots [data-prov="zuid-holland"] {fill:#FF6F9C}
.gk-dots [data-prov="zeeland"]      {fill:#4FD9C0}
.gk-dots [data-prov="noord-brabant"]{fill:#C77BF0}
.gk-dots [data-prov="limburg"]      {fill:#EFE6C4}

/* A dark hairline keeps every hue readable against the ocean fill underneath. */
.gk-dots circle{stroke:rgba(7,47,61,.85);stroke-width:1}

/* Size is set per CONTEXT, because the same SVG renders at very different widths:
   ~470px in the homepage hero, but only ~300-360px in the dashboard sidebar, and
   full-width again once the dashboard stacks on tablet/mobile. */
.gk-hero-map .gk-dot{r:3.6}
.gk-dash-canvas .gk-dot{r:5.2}
@media(max-width:900px){          /* dashboard stacks -> map gets wide again */
  .gk-dash-canvas .gk-dot{r:4.2}
  .gk-hero-map .gk-dot{r:4.2}
}
@media(max-width:540px){          /* phones: fewer css px for the same viewBox */
  .gk-dash-canvas .gk-dot{r:5}
  .gk-hero-map .gk-dot{r:5}
}
/* Tablet landscape keeps the two-column dashboard, so the map stays narrow. */
@media(min-width:901px) and (max-width:1200px){
  .gk-dash-canvas .gk-dot{r:6}
}
@media(prefers-reduced-motion:reduce){
  .gk-dots circle{transition:none}
}

/* Legend for the dots, shown once the visitor has any progress. */
.gk-dotkey{display:flex;flex-wrap:wrap;gap:.3rem .7rem;margin:.6rem 0 0;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;color:#B9D2DC}
.gk-dotkey span{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.gk-dotkey i{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;
  border:1px solid rgba(7,47,61,.7)}
.gk-dotkey i[data-prov="groningen"]    {background:#3FBF6F}
.gk-dotkey i[data-prov="friesland"]    {background:#5BC8E8}
.gk-dotkey i[data-prov="drenthe"]      {background:#E0574C}
.gk-dotkey i[data-prov="overijssel"]   {background:#F0B93E}
.gk-dotkey i[data-prov="flevoland"]    {background:#B8E04A}
.gk-dotkey i[data-prov="gelderland"]   {background:#6E8FE8}
.gk-dotkey i[data-prov="utrecht"]      {background:#FF9152}
.gk-dotkey i[data-prov="noord-holland"]{background:#FFD84A}
.gk-dotkey i[data-prov="zuid-holland"] {background:#FF6F9C}
.gk-dotkey i[data-prov="zeeland"]      {background:#4FD9C0}
.gk-dotkey i[data-prov="noord-brabant"]{background:#C77BF0}
.gk-dotkey i[data-prov="limburg"]      {background:#EFE6C4}

/* ---------- entry motion (one-shot, reduced-motion exempt) ---------- */
.gk-rise{transition-delay:var(--gk-delay,0ms)}

/* the route line draws from the start point outwards */
.gk-route-track{transform-origin:left center}
[data-gk-draw]{transform:scaleX(0);
  transition:transform 900ms var(--gk-tide)}
[data-gk-draw].is-drawn{transform:scaleX(1)}
[data-gk-draw]::before,[data-gk-draw]::after{
  transition:opacity 260ms var(--gk-tide) 700ms;opacity:0}
[data-gk-draw].is-drawn::before,[data-gk-draw].is-drawn::after{opacity:1}

/* figures that count up should not reflow while they do it */
[data-gk-count]{font-variant-numeric:tabular-nums}

/* kinetic type: the photo settles inside the letterforms once, on load */
@keyframes gk-settle{
  from{background-size:265% auto;background-position:14% 20%}
  to{background-size:220% auto;background-position:22% 26%}
}
/* After the settle the crop keeps travelling, so the numerals show a different
   stretch of coast, dune and polder the whole time the page is open instead of
   freezing on one frame. One very slow round trip: at 72s a reader never sees it
   "start over", and the per-frame movement is far below the threshold where the
   drift itself becomes the thing you look at.
   Deliberately ONE image: the hero fill is the LCP element, so cross-fading extra
   photographs here would cost exactly the load time that was clawed back earlier. */
@keyframes gk-drift{
  0%   {background-size:220% auto;background-position:22% 26%}
  25%  {background-size:232% auto;background-position:46% 44%}
  50%  {background-size:244% auto;background-position:74% 58%}
  75%  {background-size:232% auto;background-position:48% 38%}
  100% {background-size:220% auto;background-position:22% 26%}
}
.gk-chero-big{animation:gk-settle 1400ms var(--gk-tide) both,
                        gk-drift 72s 1400ms ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  [data-gk-draw],[data-gk-draw].is-drawn{transform:none}
  [data-gk-draw]::before,[data-gk-draw]::after{opacity:1}
  /* kills the settle AND the drift -- the crop simply holds its resting frame */
  .gk-chero-big{animation:none}
}

/* ---------- comparison table (CSS-only filter) ---------- */
.gk-cmp{margin-top:1.2rem}
.gk-cmp>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gk-cmp-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.gk-cmp-bar label{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem;
  padding:.45rem .95rem;border:1px solid var(--gk-line);border-radius:99px;cursor:pointer;
  background:var(--gk-sand);color:var(--gk-muted);
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide)}
.gk-cmp-bar label:hover{color:var(--gk-ocean);border-color:var(--gk-ocean)}
#gk-cmp-all:checked~.gk-cmp-bar label[for="gk-cmp-all"],
#gk-cmp-free:checked~.gk-cmp-bar label[for="gk-cmp-free"],
#gk-cmp-paid:checked~.gk-cmp-bar label[for="gk-cmp-paid"]{
  background:var(--gk-ocean);border-color:var(--gk-ocean);color:#fff}
#gk-cmp-free:focus-visible~.gk-cmp-bar label[for="gk-cmp-free"],
#gk-cmp-paid:focus-visible~.gk-cmp-bar label[for="gk-cmp-paid"],
#gk-cmp-all:focus-visible~.gk-cmp-bar label[for="gk-cmp-all"]{outline:3px solid var(--gk-wine);outline-offset:2px}
.gk-cmp-t{width:100%;border-collapse:collapse;background:var(--gk-paper);
  border:1px solid var(--gk-line);border-radius:var(--gk-r);overflow:hidden;font-size:.96rem}
.gk-cmp-t thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;background:var(--gk-ocean);color:#fff;padding:.7rem .8rem;text-align:left}
.gk-cmp-t thead th+th,.gk-cmp-t td{text-align:center;width:7.5rem}
.gk-cmp-t tbody th{text-align:left;font-weight:400;font-family:'Literata',Georgia,serif}
.gk-cmp-t th,.gk-cmp-t td{padding:.62rem .8rem;border-top:1px solid var(--gk-line)}
.gk-cmp-t tbody tr{transition:opacity var(--gk-tide-fast) var(--gk-tide)}
.gk-yes{color:#1F7A4C;font-weight:700}
.gk-no{color:var(--gk-muted)}
#gk-cmp-free:checked~.gk-tablewrap tr[data-free="0"],
#gk-cmp-paid:checked~.gk-tablewrap tr[data-free="1"]{display:none}
.gk-cmp-hint{margin-top:.7rem}

/* ---------- alternatives ---------- */
.gk-alts{list-style:none;margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.gk-alts li{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:1rem 1.05rem;border-top:3px solid var(--gk-ocean)}
.gk-alts h3{margin:.3rem 0 .35rem;font-size:1.06rem}
.gk-alts p{margin:0;font-size:.93rem;color:var(--gk-muted)}
.gk-alt-tag{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gk-wine);font-weight:700}

/* ---------- /gemeenten/ : map + distribution + searchable list ---------- */
.gk-gemtop{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;margin:1.4rem 0 1.8rem}
.gk-gemmap{background:var(--gk-ocean-deep);border:1px solid var(--gk-ocean);
  border-radius:var(--gk-r);padding:.9rem .8rem .7rem}
.gk-gemmap .gk-kaart{max-height:none}
.gk-gemmap .gk-dot{r:5}
.gk-bars{list-style:none;margin:0;padding:0}
.gk-bars li{border-top:1px solid var(--gk-line)}
.gk-bars li:first-child{border-top:0}
.gk-bars a{display:grid;grid-template-columns:8.5rem 1fr 2.2rem;gap:.7rem;align-items:center;
  padding:.42rem 0;background:none;color:var(--gk-ink)}
.gk-bars a:hover{background:none}
.gk-bars a:hover .gk-bars-n{color:var(--gk-wine)}
.gk-bars-n{font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;font-weight:600}
.gk-bars-t{display:block;height:9px;background:var(--gk-ocean-mist);border-radius:2px;overflow:hidden}
.gk-bars-t i{display:block;height:100%;width:var(--w,0%);background:var(--gk-ocean);
  transform:scaleX(0);transform-origin:left center;transition:transform 780ms var(--gk-tide)}
.gk-bars-t i.is-drawn{transform:scaleX(1)}
.gk-bars-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;
  text-align:right;color:var(--gk-ocean);font-variant-numeric:tabular-nums}
.gk-gemblock{margin-bottom:1.5rem}
.gk-gemblock h2{margin:0 0 .55rem;font-size:1.15rem;display:flex;align-items:baseline;gap:.6rem}
.gk-gemblock h2 span{font-size:.78rem;font-family:'Bricolage Grotesque',sans-serif;
  color:var(--gk-muted);font-weight:600}
.gk-gemlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.gk-gemlist li{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:99px;
  padding:.24rem .7rem;font-size:.9rem}
@media(max-width:820px){
  .gk-gemtop{grid-template-columns:1fr}
  .gk-bars a{grid-template-columns:7rem 1fr 2rem}
}

/* ---------- numbered step flow ---------- */
.gk-steps{list-style:none;margin:1.3rem 0 0;padding:0;counter-reset:st;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.1rem}
.gk-steps li{display:grid;grid-template-columns:2.5rem 1fr;gap:.9rem;align-items:start;
  background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:1rem 1.1rem}
.gk-steps-n{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--gk-ocean);color:#fff;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:1.05rem}
.gk-steps h3{margin:.2rem 0 .3rem;font-size:1rem;color:var(--gk-ink)}
.gk-steps p{margin:0;font-size:.93rem;color:var(--gk-muted)}

/* ---------- dashboard tool buttons ----------
   These were faint underlined text links; "wissen" in particular needs to be an
   obvious, findable control rather than something you have to hunt for. */
.gk-tool{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem;
  padding:.5rem .9rem;border:1px solid var(--gk-line);border-radius:var(--gk-r);
  background:var(--gk-paper);color:var(--gk-ink);cursor:pointer;
  transition:background var(--gk-tide-fast) var(--gk-tide),color var(--gk-tide-fast) var(--gk-tide),
             border-color var(--gk-tide-fast) var(--gk-tide)}
.gk-tool:hover{background:var(--gk-ocean);border-color:var(--gk-ocean);color:#fff}
.gk-tool--danger{color:var(--gk-wine);border-color:#E3C3CF}
.gk-tool--danger:hover{background:var(--gk-wine);border-color:var(--gk-wine);color:#fff}
.gk-dash-tools{gap:.4rem}

/* ---------- touch-target floor ----------
   Applies at EVERY width, not just under a mobile breakpoint: a tablet in landscape
   is 1180px wide and still driven by a thumb. Was 28-35px on exactly those devices. */
.gk-tool,.gk-seg button,.gk-chips button,.gk-tabs-bar label,.gk-cmp-bar label,
.gk-bars a,.gk-prov-group>summary,.gk-suggest-list label{min-height:44px}
.gk-tool,.gk-seg button,.gk-chips button,.gk-tabs-bar label,.gk-cmp-bar label{
  display:inline-flex;align-items:center;justify-content:center}
.gk-bars a{min-height:44px}

/* ---------- hub grids (/provincie/, /routes/) ---------- */
.gk-hubmap{max-width:360px;margin:1.2rem auto 1.6rem;background:var(--gk-ocean-deep);
  border:1px solid var(--gk-ocean);border-radius:var(--gk-r);padding:.9rem .8rem}
.gk-hubmap .gk-kaart{max-height:min(38vh,330px)}
.gk-hubmap .gk-dot{r:5}
.gk-hub{list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:.9rem}
.gk-hub li{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  border-left:3px solid var(--gk-ocean);
  transition:border-color var(--gk-tide-fast) var(--gk-tide),transform var(--gk-tide-fast) var(--gk-tide)}
.gk-hub li:hover{border-left-color:var(--gk-wine);transform:translateY(-2px)}
.gk-hub a{display:block;padding:1rem 1.1rem;background:none;color:inherit}
.gk-hub a:hover{background:none}
.gk-hub h2{margin:0;font-size:1.1rem;letter-spacing:-.01em}
.gk-hub-n{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--gk-wine);font-weight:700;margin:.2rem 0 .3rem}
.gk-hub p{margin:.25rem 0 0;font-size:.92rem;color:var(--gk-muted)}
.gk-gemguide{margin-left:auto;font-family:'Bricolage Grotesque',sans-serif;font-size:.78rem;
  font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;
  min-height:44px;padding:0 .25rem}

/* ═══════════════════════════════════════════════════════════════════════════
   BOLD MOTION LAYER
   Everything here animates opacity/transform only, so it runs on the compositor
   rather than forcing layout. All one-shot. The earlier Gate 27 breach came from
   transitioning transform on the 12 complex province paths, so those get OPACITY
   staggers and the single wrapping element carries the transform instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- the map assembles itself on load ---- */
@keyframes gk-map-in{from{opacity:0}to{opacity:1}}
.gk-kaart{animation:gk-map-in 700ms var(--gk-tide) both}
/* NB: deliberately NOT per-province and NOT scaled. Animating the 12 <a> wrappers
   repainted their complex paths individually, and scaling the SVG re-rasterised all
   1,343 points every frame -- together that was ~1.4s of main-thread work on mobile. */

/* ---- dots pop in with overshoot when you tick a gemeente ---- */
@keyframes gk-dot-pop{
  0%{transform:scale(0);opacity:0}
  62%{transform:scale(1.45);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.gk-dot[data-on="1"]{transform-box:fill-box;transform-origin:center;
  animation:gk-dot-pop 460ms cubic-bezier(.34,1.4,.5,1) both}

/* ---- a pulse ring the moment a province completes ---- */
@keyframes gk-ring{from{opacity:.85;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}
.gk-ring{transform-box:fill-box;transform-origin:center;fill:none;stroke-width:2.5;
  animation:gk-ring 900ms var(--gk-tide) both;pointer-events:none}


/* ---- reveals get real travel + a touch of scale ---- */
.gk-rise{opacity:0;transform:translateY(22px);
  transition:opacity 560ms var(--gk-tide),transform 560ms var(--gk-tide);
  transition-delay:var(--gk-delay,0ms)}
.gk-rise.is-in{opacity:1;transform:none}

/* ---- cards lift with real depth on hover ---- */
.gk-hub li,.gk-alts li,.gk-steps li,.gk-list li{
  transition:transform 260ms var(--gk-tide),box-shadow 260ms var(--gk-tide),
             border-color 260ms var(--gk-tide)}
.gk-hub li:hover,.gk-alts li:hover,.gk-steps li:hover,.gk-list li:hover{
  transform:translateY(-5px);box-shadow:0 12px 26px -8px rgba(11,31,40,.28)}

/* ---- the tally slides up cell by cell ---- */
@keyframes gk-cell{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gk-tally>div{animation:gk-cell 620ms var(--gk-tide) both;
  animation-delay:calc(var(--i,0) * 110ms + 260ms)}

/* ---- the route line gets a travelling head while it draws ---- */
.gk-route-track{position:relative;overflow:visible}
/* NB: named gk-trackhead, NOT gk-head -- .gk-head is the site header and reusing
   the name overrode its position:sticky, collapsing the header site-wide. */
@keyframes gk-trackhead{
  from{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  to{left:100%;opacity:0}
}
[data-gk-draw].is-drawn .gk-trackhead{animation:gk-trackhead 900ms var(--gk-tide) both}
.gk-trackhead{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 0 3px var(--gk-wine),0 0 14px 3px rgba(140,47,85,.55)}

/* ---- the progress meter shimmers once when it grows ---- */
@keyframes gk-shine{from{background-position:-140% 0}to{background-position:240% 0}}
.gk-meter i{position:relative;overflow:hidden}
.gk-meter i.is-bump::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  background-size:60% 100%;background-repeat:no-repeat;
  animation:gk-shine 780ms var(--gk-tide) both}

/* ---- big figures pulse as they land ---- */
@keyframes gk-land{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
[data-gk-count].is-landed{display:inline-block;animation:gk-land 420ms var(--gk-tide) both}

/* ---- province tiles flood with a brighter sweep ---- */
.gk-prov li::before{transition:height 700ms cubic-bezier(.32,1.06,.4,1)}

@media(prefers-reduced-motion:reduce){
  .gk-kaart,.gk-kaart a,.gk-kaart a.is-in,.gk-dot[data-on="1"],
  .gk-tally>div,[data-gk-count].is-landed,.gk-meter i.is-bump::after,.gk-ring{animation:none!important}
  .js .gk-kaart a{opacity:1}
  .gk-hub li:hover,.gk-alts li:hover,.gk-steps li:hover,.gk-list li:hover{transform:none;box-shadow:none}
  .gk-trackhead{display:none}
}

/* ---------- homepage split: prose + useful sidebar ---------- */
.gk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
.gk-split .gk-prose{max-width:none}
.gk-aside{position:sticky;top:90px;display:grid;gap:.85rem}
.gk-panel{background:var(--gk-paper);border:1px solid var(--gk-line);border-radius:var(--gk-r);
  padding:1rem 1.05rem}
.gk-panel--me{background:var(--gk-ocean);border-color:var(--gk-ocean-deep);color:#fff}
.gk-panel--me .gk-panel-k{color:#9FC6D4}
.gk-panel--me .gk-meter{background:rgba(255,255,255,.22);margin-top:.5rem}
.gk-panel--me .gk-meter i{background:#7CC7DE}
.gk-panel--me a{color:#fff}
.gk-panel-k{font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gk-muted);font-weight:700;margin:0 0 .45rem}
.gk-panel-big{font-family:'Bricolage Grotesque',sans-serif;margin:0;line-height:1}
.gk-panel-big b{font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.gk-panel-big i{font-style:normal;font-size:1rem;font-weight:600;opacity:.7}
.gk-panel-sub{font-size:.86rem;margin:.55rem 0 0;color:#D9E7ED}
.gk-panel-lead{font-size:.88rem;color:var(--gk-muted);margin:0 0 .6rem}
.gk-panel-cta{margin:.7rem 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem}
.gk-rank{list-style:none;margin:0;padding:0;counter-reset:rk}
.gk-rank li{border-top:1px solid var(--gk-line)}
.gk-rank li:first-child{border-top:0}
.gk-rank a{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  min-height:44px;padding:.3rem 0;background:none;color:var(--gk-ink);font-size:.94rem}
.gk-rank a:hover{background:none;color:var(--gk-wine)}
.gk-rank b{font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;color:var(--gk-ocean);
  font-variant-numeric:tabular-nums}
.gk-rank--big b{color:var(--gk-wine)}
@media(max-width:900px){
  .gk-split{grid-template-columns:1fr}
  /* `.gk-split .gk-prose` clears the max-width because the sidebar normally does the
     narrowing. Once the columns stack there is no sidebar, so the measure has to come
     back -- otherwise a phone in landscape renders ~110 characters per line. */
  .gk-split .gk-prose{max-width:72ch}
  .gk-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE + TABLET
   Measured problems this fixes:
     · /kraskaart/ map was 852px tall on phone-landscape = 219% of the viewport,
       because .gk-dash-canvas removed the height cap entirely
     · 71px header on a 390px-tall landscape screen ate 18% of the height
     · 710 tap targets under 44px on the Kraskaart list
     · h1/h2 still at desktop scale on small screens
   Uses dvh where available so mobile browser chrome doesn't distort the caps.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- the map must never dominate a small screen ---- */
.gk-dash-canvas .gk-kaart,
.gk-gemmap .gk-kaart,
.gk-hubmap .gk-kaart{max-height:min(58vh,460px)}
@supports (height:1dvh){
  .gk-dash-canvas .gk-kaart,.gk-gemmap .gk-kaart,.gk-hubmap .gk-kaart{max-height:min(58dvh,460px)}
  .gk-hero-map .gk-kaart{max-height:min(46dvh,520px)}
}

@media (max-width:1100px){
  /* header: smaller and tighter, it is pure overhead below desktop */
  .gk-head-in{min-height:56px;gap:.7rem}
  .gk-brand{min-height:44px}     /* the only control that was still under 44px */
  .gk-brand svg{height:30px}
  .gk-brand-txt{font-size:.92rem}
  .gk-brand-txt small{font-size:.6rem;letter-spacing:.07em}
  .gk-nav{inset:56px 0 auto 0}

  /* type down a step so headings stop eating the screen */
  h1{font-size:clamp(1.45rem,5.4vw,1.8rem)}
  h2{font-size:clamp(1.15rem,4.2vw,1.35rem)}
  h3{font-size:clamp(.98rem,3.6vw,1.06rem)}
  .gk-ledger h1{font-size:clamp(1.55rem,6.4vw,2rem)}
  .gk-chero-big{font-size:clamp(4.2rem,30vw,8rem)}
  .gk-tally b{font-size:1.5rem}
  .gk-panel-big b{font-size:1.8rem}

  /* sections were built for a desktop rhythm */
  .gk-sec{padding:1.5rem 0}
  .gk-ledger{padding:1.6rem 0}
  .gk-dash{padding:1.1rem 0}

  /* comfortable touch rows: full-width labels, 44px minimum */
  .gk-gem{grid-template-columns:1fr 1fr;gap:0 .6rem;padding:0 .7rem .8rem}
  .gk-gem label{min-height:44px;align-items:center;padding:.2rem .2rem;font-size:.95rem}
  .gk-gem input{width:20px;height:20px;margin-top:0}
  .gk-prov-group>summary{min-height:48px;align-items:center}
  .gk-suggest-list label{min-height:44px;align-items:center}
  .gk-chips button,.gk-seg button,.gk-tool,.gk-tabs-bar label,.gk-cmp-bar label{min-height:44px}
  .gk-nav a{min-height:48px;display:flex;align-items:center}
  .gk-burger{min-height:44px;min-width:44px;justify-content:center}
}

@media (max-width:560px){
  .gk-gem{grid-template-columns:1fr}          /* one column: names stay readable */
  .gk-tally{flex-direction:column}
  .gk-tally div{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .gk-tally div:last-child{border-bottom:0}
  .gk-tiles{grid-template-columns:1fr}
  .gk-route-stats{grid-template-columns:1fr 1fr}
  .gk-route-stats>div:nth-child(2n){border-right:0}
  .gk-cmp-t thead th+th,.gk-cmp-t td{width:4.4rem}
  .gk-cmp-t th,.gk-cmp-t td{padding:.55rem .5rem;font-size:.9rem}
  .gk-strip-track li{flex:0 0 92vw}
}

/* ---- LANDSCAPE on a phone: height is the scarce resource, not width ---- */
@media (orientation:landscape) and (max-height:520px){
  /* Always visible -- never auto-hidden. Compacted to 44px so a 390px-tall
     screen keeps most of its height while the nav stays where you reach for it. */
  .gk-head{position:sticky;top:0}
  .gk-head-in{min-height:44px}
  .gk-brand svg{height:26px}
  /* With the header no longer sticky, a position:fixed menu resolved to a static
     position that had already scrolled off-screen, cutting off the first items.
     A full-screen overlay is unambiguous and works regardless of scroll offset. */
  .gk-nav.is-open{position:fixed;inset:0;z-index:60;overflow-y:auto;
    padding:.6rem var(--gk-gut) 1.2rem;box-shadow:none}
  .gk-nav.is-open::before{content:"Menu";display:block;
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.78rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gk-muted);
    padding:.5rem 0 .3rem}
  .gk-nav a{min-height:44px}
  .gk-burger{position:relative;z-index:61}
  .gk-sec,.gk-ledger,.gk-dash{padding-block:1rem}
  .gk-dash-canvas .gk-kaart,.gk-gemmap .gk-kaart{max-height:74vh}
  /* Map sizing for this orientation is at the END of the file -- the hub rules that
     it has to beat are declared later than this block. */
  h1{font-size:clamp(1.3rem,4vw,1.6rem)}
  .gk-chero-big{font-size:clamp(3.4rem,16vw,6rem)}
  .gk-hero{grid-template-columns:1fr 1fr;gap:1rem}
  .gk-hero-map{order:0}
  .gk-gem{grid-template-columns:repeat(2,1fr)}
  .gk-gem label{min-height:44px;align-items:center}
}

/* ---- TABLET PORTRAIT: two columns are wasteful, one is too sparse ---- */
@media (min-width:601px) and (max-width:900px){
  .gk-gem{grid-template-columns:repeat(3,1fr)}
  .gk-dash-side{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
  .gk-tiles{grid-template-columns:1fr}
  .gk-aside{grid-template-columns:1fr 1fr}
  .gk-aside .gk-panel--me{grid-column:1/-1}
}

/* ---- TABLET LANDSCAPE keeps two columns, but the map column is narrow ---- */
@media (min-width:901px) and (max-width:1100px){
  .gk-dash-grid{grid-template-columns:minmax(240px,290px) 1fr}
  .gk-split{grid-template-columns:minmax(0,1fr) minmax(230px,270px)}
  h1{font-size:clamp(1.5rem,2.6vw,1.95rem)}
}

/* ---------- province guide: map + stats + inline checklist ---------- */
.gk-provtop{display:grid;grid-template-columns:minmax(200px,270px) 1fr;
  gap:clamp(1.1rem,3vw,2.2rem);align-items:start;margin:1.2rem 0 1.6rem}

.gk-provmap{background:var(--gk-ocean-deep);border:1px solid var(--gk-ocean);
  border-radius:var(--gk-r);padding:.8rem .7rem}
.gk-provmap .gk-kaart{max-height:min(46vh,340px)}
.gk-provmap .gk-dot{r:4.4}
/* the current province is lifted, the rest recede */
.gk-provmap .gk-kaart-p{fill:#0F3F52;stroke:#0A3341}
.gk-provmap [data-gk-here] .gk-kaart-p{fill:#2E86A8;stroke:#9FD4E6;stroke-width:2}
.gk-provstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin:0;
  border:1px solid var(--gk-line);border-radius:var(--gk-r);background:var(--gk-paper);overflow:hidden}
.gk-provstats>div{padding:.85rem .95rem;border-right:1px solid var(--gk-line)}
.gk-provstats>div:last-child{border-right:0}
.gk-provstats dt{font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gk-muted)}
.gk-provstats dd{margin:.2rem 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.45rem;line-height:1;color:var(--gk-ocean);font-variant-numeric:tabular-nums}
.gk-provstats dd small{font-size:.85rem;font-weight:600;color:var(--gk-muted)}
.gk-provstats-me{background:var(--gk-wine-soft)}
.gk-provstats-me dd{color:var(--gk-wine)}
.gk-provstats-me .gk-meter{display:block;margin-top:.5rem;height:8px}
.gk-provstats-me .gk-meter i{background:var(--gk-wine)}
.gk-provcheck{margin-top:2rem;background:var(--gk-paper);border:1px solid var(--gk-line);
  border-radius:var(--gk-r);padding:1.1rem 1.2rem 1.3rem}
.gk-provcheck h2{margin-top:0}
.gk-gem--flat{padding:0;margin-top:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gk-provcheck-cta{margin:1.1rem 0 0}
@media(max-width:820px){
  .gk-provtop{grid-template-columns:1fr}
  .gk-provstats{grid-template-columns:1fr 1fr}
}

/* ---------- route guide: facts strip, season bar, province chips ---------- */
.gk-factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:0;margin:1.3rem 0 0;
  border:1px solid var(--gk-line);border-radius:var(--gk-r);background:var(--gk-paper);overflow:hidden}
.gk-factstrip>div{padding:.85rem .95rem;border-right:1px solid var(--gk-line)}
.gk-factstrip>div:last-child{border-right:0}
.gk-factstrip dt{font-family:'Bricolage Grotesque',sans-serif;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gk-muted)}
.gk-factstrip dd{margin:.22rem 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:1.02rem;color:var(--gk-ink);line-height:1.2}

.gk-season{margin-top:1.8rem}
.gk-months{display:grid;grid-template-columns:repeat(12,1fr);gap:.25rem;list-style:none;margin:.9rem 0 0;padding:0}
.gk-months li{text-align:center}
.gk-months-b{display:block;height:2.6rem;border-radius:var(--gk-r);background:var(--gk-line)}
.gk-months li[data-lvl="ok"]   .gk-months-b{background:#8FC3D6}
.gk-months li[data-lvl="best"] .gk-months-b{background:var(--gk-ocean)}
.gk-months li[data-lvl="off"]  .gk-months-b{background:#E4E0D6;height:1.1rem;margin-top:1.5rem}
.gk-months-l{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:.68rem;
  color:var(--gk-muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.04em}
.gk-months-key{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin:.8rem 0 0;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.74rem;color:var(--gk-muted)}
.gk-months-key span{width:.85rem;height:.85rem;border-radius:2px;display:inline-block}
.gk-months-key span[data-lvl="best"]{background:var(--gk-ocean)}
.gk-months-key span[data-lvl="ok"]{background:#8FC3D6}
.gk-months-key span[data-lvl="off"]{background:#E4E0D6}

.gk-crosses{margin-top:1.8rem}
.gk-crosschips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 0;padding:0}
.gk-crosschips a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 .55rem 0 .85rem;border:1px solid var(--gk-line);border-radius:99px;background:var(--gk-paper);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.9rem;color:var(--gk-ink);
  transition:border-color var(--gk-tide-fast) var(--gk-tide),transform var(--gk-tide-fast) var(--gk-tide)}
.gk-crosschips a:hover{border-color:var(--gk-ocean);transform:translateY(-2px);background:var(--gk-paper)}
.gk-crosschips b{background:var(--gk-ocean);color:#fff;border-radius:99px;padding:.1rem .5rem;
  font-size:.78rem;font-weight:700}
@media(max-width:640px){
  .gk-months{grid-template-columns:repeat(6,1fr);gap:.3rem .25rem}
  .gk-factstrip{grid-template-columns:1fr 1fr}
  .gk-factstrip>div:nth-child(2n){border-right:0}
}

/* ---------- progress ring (dashboard donut, ref: Design Ideas) ---------- */
.gk-panel--ring{text-align:center}
.gk-ring-wrap{position:relative;width:96px;margin:.4rem auto .1rem}
.gk-ringsvg{width:96px;height:96px;transform:rotate(-90deg)}
.gk-ring-bg{fill:none;stroke:var(--gk-ocean-mist);stroke-width:8}
.gk-ring-fg{fill:none;stroke:var(--gk-ocean);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 760ms var(--gk-tide)}
.gk-ring-n{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.05rem;color:var(--gk-ocean)}
.gk-ring-sub{font-size:.86rem;color:var(--gk-muted);margin:.5rem 0 0}
.gk-ring-sub b{color:var(--gk-ink);font-family:'Bricolage Grotesque',sans-serif}

/* ---------- "still to go" list ---------- */
.gk-todo{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.gk-todo li{background:var(--gk-sand);border:1px solid var(--gk-line);border-radius:99px;
  padding:.35rem .65rem;font-size:.84rem;color:var(--gk-muted)}
.gk-todo li[data-all]{background:var(--gk-ocean);border-color:var(--gk-ocean);color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700}

/* ---------- hub top: map + intro + aside on one row ---------- */
/* Intro reads full width; the map then sits beside the LIST, where its height is
   actually used. Pairing it with the short intro left ~280px of dead column. */
.gk-hublede{max-width:74ch;margin-bottom:1.6rem}
.gk-hubbody{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3rem);align-items:start}
.gk-hubbody--nomap{grid-template-columns:1fr}
.gk-hubbody .gk-hubmap{margin:0;max-width:none;position:sticky;top:90px}
.gk-hubmap-hint{font-family:'Bricolage Grotesque',sans-serif;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:#9FC6D4;text-align:center;margin:.55rem 0 0}
@media(max-width:900px){
  .gk-hubbody{grid-template-columns:1fr;gap:1.2rem}
  .gk-hubbody .gk-hubmap{position:static}
}

/* ---------- kraskaart intro: two text columns rather than a dead half ---------- */
.gk-dash-intro{margin-top:.9rem;max-width:none;columns:2;column-gap:clamp(1.6rem,4vw,3rem)}
.gk-dash-intro p{margin:0 0 1em;break-inside:avoid}
.gk-dash-intro a{color:var(--gk-ocean);background-size:100% 1px;
  background-image:linear-gradient(var(--gk-line),var(--gk-line))}
@media(max-width:820px){.gk-dash-intro{columns:1}}

/* ---------- hub rows: comparable, box-free ----------
   Replaces a 12-card grid. Hairline rows instead of borders on every side, so the
   page reads as one list rather than sixteen containers, and the bars make the
   6-vs-56 spread visible at a glance.                                            */
.gk-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--gk-line)}
.gk-rows li{border-bottom:1px solid var(--gk-line)}
.gk-rows a{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:1rem;
  align-items:center;min-height:52px;padding:.3rem .25rem;background:none;color:var(--gk-ink);
  transition:background var(--gk-tide-fast) var(--gk-tide)}
.gk-rows a:hover{background:var(--gk-paper)}
.gk-rows a:hover .gk-rows-n{color:var(--gk-wine)}
.gk-rows-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem}
.gk-rows-bar{position:relative;display:block;height:10px;border-radius:3px;
  background:var(--gk-ocean-mist);overflow:hidden}
.gk-rows-bar i{display:block;height:100%;width:var(--w,0%);background:var(--gk-ocean);
  border-radius:3px;transform-origin:left center}
.gk-rows-bar u{position:absolute;inset:0 auto 0 0;width:var(--mine,0%);background:var(--gk-wine);
  border-radius:3px;transition:width 620ms var(--gk-tide)}
.gk-rows-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;
  text-align:right;color:var(--gk-ocean);font-variant-numeric:tabular-nums;white-space:nowrap}
.gk-rows-v{display:inline-flex;align-items:baseline;gap:.45rem;justify-content:flex-end;min-width:5.4rem}
.gk-rows-me{font-style:normal;font-family:'Bricolage Grotesque',sans-serif;font-size:.75rem;font-weight:700;
  color:var(--gk-wine);white-space:nowrap}
.gk-hubbody--nomap .gk-rows a{grid-template-columns:13rem minmax(0,1fr) 13.5rem}
.gk-hubbody--nomap .gk-rows .gk-rows-bar{max-width:200px}
.gk-hubbody--nomap .gk-rows-v{white-space:nowrap;min-width:0}
@media(max-width:680px){
  .gk-rows a{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .8rem;padding:.6rem .25rem}
  .gk-rows-bar{grid-column:1/-1;order:3}
  .gk-rows-v{order:2;min-width:0}   /* an 86px min-width overflowed the narrow column */
  .gk-hubbody--nomap .gk-rows-v{flex-wrap:wrap;justify-content:flex-end}
  .gk-hubbody--nomap .gk-rows a{grid-template-columns:1fr auto}
}

/* Hub map: capped here (after the mobile block) so it wins, and sized to sit
   comfortably next to a twelve-row list. */
.gk-hubbody .gk-hubmap .gk-kaart{max-height:min(64vh,560px)}
@media(max-width:900px){.gk-hubbody .gk-hubmap .gk-kaart{max-height:min(46vh,360px)}}

/* Compact figures under the hub map: uses the column height the sticky map leaves,
   without adding another bordered box. */
.gk-hubfacts{margin:1rem 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.gk-hubfacts li{display:flex;justify-content:space-between;gap:.7rem;padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:.86rem;color:#C6DAE2}
.gk-hubfacts b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums}
.gk-hubfacts li[data-me]{color:#9FD4E6}


/* ================================================================
   Short-landscape map sizing -- LAST in the file on purpose.
   A phone in landscape is ~390px tall, and both maps were capped by HEIGHT
   (min(46vh,360px) and friends). At that cap the Netherlands renders ~155px
   wide, which shrinks Utrecht to 33x29px and Zeeland to 36x36px -- well under
   the 44px touch floor, i.e. a map you cannot reliably tap.
   Sizing by WIDTH instead makes every province a comfortable target. The map
   then extends past the fold, which is the right trade: you scroll a map you
   are using, and every province is also a full-width row in the list beside it.
   This must come after the `.gk-hubbody .gk-hubmap` rules above, which are
   equally specific and would otherwise win on source order.
   ================================================================ */
@media (orientation:landscape) and (max-height:520px){
  .gk-hubbody .gk-hubmap,.gk-hubmap{max-width:min(430px,54vw);margin-inline:auto}
  .gk-hubbody .gk-hubmap .gk-kaart,.gk-hubmap .gk-kaart{max-height:none}
  .gk-hero-map{max-width:min(400px,46vw);margin-inline:auto}
  .gk-hero-map .gk-kaart{max-height:none}
  /* The province pages use their own map (.gk-provmap) and had the same 46vh cap. */
  .gk-provmap{max-width:min(400px,50vw);margin-inline:auto}
  .gk-provmap .gk-kaart{max-height:none}
  /* The taller map leaves the stat strip floating at the top of its column. Stacked,
     the three stats fill the same height, so the row has no dead half. */
  .gk-provstats{grid-template-columns:1fr}
  .gk-provstats>div{border-right:0;border-bottom:1px solid var(--gk-line)}
  .gk-provstats>div:last-child{border-bottom:0}
}

/* Municipality checklist rows: 44px at every width, not only under the mobile
   breakpoint. On a tablet in landscape these were 33px -- the device most likely
   to be used by thumb was the one with the smallest targets. */
.gk-gem label{min-height:44px;display:flex;align-items:center}


/* ================================================================
   Province page, side-by-side row (>=821px: tablet landscape + desktop).
   The four stats used to sit as one 74px strip beside a ~308px map, leaving
   ~234px of dead column. As a 2x2 block they fill the same height as the map,
   using content already on the page rather than a filler panel.
   Declared here, after the base `.gk-provstats` grid, so it actually applies --
   an earlier attempt lost to source order and only stretched the cells.
   ================================================================ */
@media (min-width:821px){
  .gk-provtop{align-items:stretch}
  .gk-provstats{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .gk-provstats>div{display:flex;flex-direction:column;justify-content:center;
    border-right:1px solid var(--gk-line);border-bottom:1px solid var(--gk-line)}
  /* `display:flex` beats the [hidden] UA rule, which was making the "your progress"
     cell appear before you have any progress. Put it back. */
  .gk-provstats>div[hidden]{display:none}
  .gk-provstats>div:nth-child(2n){border-right:0}
  .gk-provstats>div:nth-last-child(-n+2){border-bottom:0}
  /* Until you have progress the 4th cell is hidden, which would leave a half-empty
     second row. The third stat then spans the full width instead. */
  .gk-provstats:has(>div:nth-child(4)[hidden])>div:nth-child(3){grid-column:1/-1;border-right:0}
  .gk-provstats dd{margin-top:.25rem}
}


/* ---------- content photo (template-parts/figure.php) ----------
   Every page but /nextgeneration/ shipped without a single image. The frame is kept
   plain on purpose: a hairline and a caption, no shadow or rounded-corner card, so it
   reads as a photograph in an article rather than another boxed component. */
.gk-fig{margin:1.6rem 0 1.8rem;max-width:100%}
.gk-fig picture,.gk-fig img{display:block;width:100%;height:auto}
/* Height is capped against the VIEWPORT, not just the container. Uncapped, a 3:2 photo
   at full column width came to 133% of the screen on a phone in landscape, 88% on a
   tablet in landscape and 80% on desktop -- the photo became the whole first screen.
   object-fit crops the band instead of squashing it, and these are horizontal scenes
   (paths, dikes, fields) that still read correctly as a band. The focal point sits
   slightly above centre because the subject is usually the path, not the sky. */
.gk-fig img{border:1px solid var(--gk-line);background:var(--gk-ocean-mist);
  max-height:min(52vh,520px);object-fit:cover;object-position:50% 45%}
@supports (height:1dvh){
  /* dvh so a mobile browser's collapsing address bar doesn't resize the photo mid-scroll */
  .gk-fig img{max-height:min(52dvh,520px)}
}
.gk-fig figcaption{font-family:'Bricolage Grotesque',sans-serif;font-size:.78rem;
  letter-spacing:.02em;color:var(--gk-muted);margin-top:.5rem}
/* inside the two-column split the photo follows the prose measure, not the full row */
.gk-split .gk-fig,.gk-prose .gk-fig{max-width:70ch}
@media(max-width:560px){.gk-fig{margin:1.2rem 0 1.4rem}}


/* ================================================================
   Kraskaart: the map must stay in sight while you tick.
   The list is long, so the map scrolled away and a newly-lit dot appeared where you
   could not see it -- measured at 4 visible pixels on a phone in portrait and fully
   off-screen in landscape. Ticking a place then looked like nothing happened.
   Two changes: the map is pinned, and a dot pulses briefly when it turns on.
   ================================================================ */
.gk-dash-canvas{position:sticky;top:calc(var(--gk-headh,70px) + .6rem);z-index:5}

@media(max-width:900px){
  /* The map is NOT a child of the grid -- it sits inside aside.gk-dash-side, which is
     499px tall and goes static here. A sticky element can only stick inside its own
     containing block, so the map scrolled away with that aside while still reporting
     position:sticky. `display:contents` on the aside lifts the map and the KPI tiles up
     to be direct children of the grid, so the map can pin against the full page height.
     Order then puts the map first, the list second, the tiles last -- the pinned thing
     is the map, because the map is the feedback you are looking for when you tick. */
  /* align-items:stretch is NOT redundant: the base rule sets align-items:start for the
     desktop GRID, and in a column FLEX container that same property governs the
     horizontal axis -- so the pinned map hugged its content at 269px of a 390px screen
     and the province chips showed through beside it. */
  .gk-dash-grid{display:flex;flex-direction:column;gap:.9rem;align-items:stretch}
  .gk-dash-side{display:contents}
  /* Sized so the SMALLEST province stays a legal tap target. Tapping a province on the
     dashboard map filters the list, so it is a real control, not decoration -- at 26vh
     the map rendered ~192px across and Utrecht came out 40x35px. Kept as small as the
     44px floor allows, because everything above the fold here is pinned. */
  .gk-dash-canvas{order:1;position:sticky;top:var(--gk-headh,57px);
    max-height:42vh;padding:.5rem;display:flex;flex-direction:column;
    box-shadow:0 6px 18px -12px rgba(11,31,40,.55)}
  .gk-dash-main{order:2}
  .gk-tiles{order:3}
  .gk-dash-canvas .gk-kaart{max-height:34vh;margin-inline:auto}
  .gk-dash-canvas .gk-dot{r:6}            /* bigger dots so they read at this size */
  .gk-dash-canvas .gk-dash-canvashint{display:none}
}
@media (orientation:landscape) and (max-height:560px){
  /* Short landscape has no vertical room to stack map and list, so they share a row:
     the map pinned in a narrow left column, the list scrolling beside it. Explicit
     areas rather than order/auto-placement, so the map and the list are genuinely in
     the SAME row -- that row is as tall as the list, which is what gives the sticky
     map something to stick within. */
  /* The column has to be wide enough that the SMALLEST province stays tappable: at
     32vw the map rendered ~212px across and Utrecht came out 44x38px, under the touch
     floor. The height cap is what actually drives the width here, so both were raised. */
  .gk-dash-grid{display:grid;grid-template-columns:minmax(170px,40vw) minmax(0,1fr);
    gap:.5rem .9rem;align-items:start}
  .gk-dash-side{display:contents}
  /* the map column spans every row, so its sticky area is as tall as the whole list */
  .gk-dash-canvas{grid-column:1;grid-row:1 / -1;align-self:start;
    position:sticky;top:calc(var(--gk-headh,44px) + .4rem);
    max-height:none;padding:.45rem;box-shadow:none;display:block}
  .gk-dash-canvas .gk-kaart{max-height:min(74vh,300px)}
  .gk-dash-main{grid-column:2;grid-row:1}
  .gk-tiles{grid-column:2;grid-row:2}
}

/* a dot that has just been ticked draws the eye for one beat */
@keyframes gk-dot-in{
  0%   {transform:scale(.2);opacity:0}
  55%  {transform:scale(1.9);opacity:1}
  100% {transform:scale(1);opacity:1}
}
.gk-dot.is-new{animation:gk-dot-in 460ms var(--gk-tide) both;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
  .gk-dot.is-new{animation:none}
}


/* ================================================================
   Portrait only: the pinned map condenses once you scroll into the list.
   Held at full size it took 42% of the screen for the whole scroll, which read as a
   slab. Stuck, it becomes a slim band -- small map on the left, province and running
   count beside it -- so you still see the dot land while the list gets most of the
   screen. Landscape keeps its side-by-side layout and is untouched.
   `.is-stuck` is set by a sentinel observer in kraskaart.js, because CSS on its own
   cannot tell a sticky element that it has begun sticking.
   ================================================================ */
@media (max-width:900px) and (orientation:portrait){
  .gk-dash-canvas{transition:max-height 240ms var(--gk-tide),padding 240ms var(--gk-tide)}
  .gk-dash-canvas.is-stuck{max-height:19vh;padding:.45rem .65rem;
    flex-direction:row;align-items:center;gap:.75rem}
  .gk-dash-canvas.is-stuck .gk-kaart{max-height:15vh;width:auto;flex:0 0 auto;margin:0}
  .gk-dash-canvas.is-stuck .gk-kaart-legend,
  .gk-dash-canvas.is-stuck .gk-dash-canvashint{display:none}
  .gk-dash-canvas.is-stuck .gk-dotkey{display:none}
  /* Condensed, the provinces are 20-35px across -- below the touch floor. In that state
     the small map is a READOUT, not a control: tapping a province to filter is handled by
     the full-size chips directly beneath it. Scrolling back up restores the big map and
     its taps. Better an honest readout than a row of targets too small to hit. */
  .gk-dash-canvas.is-stuck .gk-kaart a{pointer-events:none}
  .gk-dash-canvas.is-stuck .gk-kaart{cursor:default}
  .gk-dash-canvas.is-stuck .gk-dash-mini{display:block}
  .gk-dash-mini{display:none;min-width:0;color:#C6DAE2;
    font-family:'Bricolage Grotesque',sans-serif;line-height:1.25}
  .gk-dash-mini b{display:block;color:#fff;font-weight:800;font-size:1.02rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gk-dash-mini span{font-size:.82rem;color:#9FC6D4}
  .gk-dash-mini i{display:block;font-style:normal;font-size:.8rem;color:#7CC7DE;margin-top:.15rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .gk-dash-canvas{transition:none}
}