/* ==========================================================================
   Safari Trail — design system (uit design/01-poster.html, 15 sep 2026)
   Kleuren uit het brandbook, per kleur gekozen op contrast.
   Fonts: Rammetto One (koppen, cijfers) + Figtree (tekst).
   ========================================================================== */
:root {
   --cream: #F5EBDD;
   --cream-2: #EFE4D2;
   --forest: #0B3A2E;
   --forest-2: #0E4638;
   --ink: #071B16;
   --pink: #FF1676;
   --pink-dark: #D90E60;
   --orange: #FF6A00;
   --stone: #D8D2C4;
   --clay: #C9A98B;
   /* brandbook Clay: eigen kleur voor de Welpentrail */
   --text-2: #3d4a44;
   --white: #ffffff;
   --display: 'Rammetto One', 'Arial Black', sans-serif;
   --body: 'Figtree', system-ui, sans-serif;
   --maxw: 1240px;
   --gutter: clamp(20px, 5vw, 72px);
   --space: clamp(96px, 12vw, 176px);
   --radius: 22px;
   --nav-h: 96px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--body);
   font-size: 18px;
   line-height: 1.65;
   color: var(--ink);
   background: var(--cream);
   overflow-x: hidden;
}

img,
video {
   max-width: 100%;
   display: block;
   height: auto;
}

a {
   color: inherit;
}

h1,
h2,
h3,
h4 {
   font-family: var(--display);
   font-weight: 400;
   line-height: 1.05;
   text-transform: uppercase;
}

strong {
   font-weight: 700;
}

/* Kernwoorden dikgedrukt (Gijs, 15 sep): op licht donkergroen, op donker de tekstkleur. */
.content strong,
.sec-head strong,
.day-copy strong,
.zoo-grid p strong,
.discount strong,
.facts strong,
.trail-note strong,
.gallery-intro strong {
   color: var(--forest);
}

.on-forest strong,
.hero strong,
.final strong,
.trail strong,
.dist-pink strong,
.dist-forest strong,
.dist-orange strong,
.page-hero strong {
   color: inherit;
}

.skip-to-content {
   position: absolute;
   left: 8px;
   top: -80px;
   background: var(--pink);
   color: #fff;
   padding: 10px 16px;
   border-radius: 999px;
   z-index: 200;
   font-weight: 600;
}

.skip-to-content:focus {
   top: 8px;
}

:focus-visible {
   outline: 3px solid var(--orange);
   outline-offset: 3px;
}

.wrap {
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

section[id],
[id].anchor {
   scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ---------- knoppen ---------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 56px;
   padding: 12px 30px;
   border-radius: 999px;
   font-family: var(--body);
   font-weight: 700;
   font-size: 1.05rem;
   line-height: 1.2;
   text-decoration: none;
   border: 2px solid transparent;
   cursor: pointer;
   background: none;
   color: var(--forest);
   transition: background .15s ease, color .15s ease;
}

.btn-pink {
   background: var(--pink);
   color: #fff;
}

.btn-pink:hover {
   background: var(--pink-dark);
}

.btn-cream {
   background: var(--cream);
   color: var(--forest);
}

.btn-cream:hover {
   background: #fff;
}

.btn-forest {
   background: var(--forest);
   color: var(--cream);
}

.btn-forest:hover {
   background: var(--forest-2);
}

.btn-ghost {
   border-color: currentColor;
   color: var(--cream);
}

.btn-ghost:hover {
   background: rgba(245, 235, 221, .1);
}

.btn-line {
   border-color: var(--forest);
   color: var(--forest);
}

.btn-line:hover {
   background: var(--forest);
   color: var(--cream);
}

.btn:active {
   transform: translateY(1px);
}

.btn-lg {
   font-size: 1.15rem;
   min-height: 64px;
   padding: 14px 38px;
}

.textlink {
   background: none;
   border: 0;
   cursor: pointer;
   color: inherit;
   font: inherit;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 5px;
   text-decoration-thickness: 2px;
   transition: text-decoration-color .15s ease;
}

.textlink:hover {
   text-decoration-color: var(--pink);
}

.play {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 2px solid currentColor;
   display: grid;
   place-items: center;
   flex: none;
}

.play::before {
   content: "";
   border-left: 12px solid currentColor;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   margin-left: 3px;
}

/* ---------- alertbanner ---------- */
.site-alert {
   background: var(--orange);
   color: var(--ink);
   font-weight: 600;
}

.site-alert-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-height: 46px;
   padding-block: 8px;
}

.site-alert-link {
   text-decoration: none;
}

.site-alert-link:hover {
   text-decoration: underline;
}

.site-alert-close {
   background: none;
   border: 0;
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
   color: inherit;
   width: 44px;
   height: 44px;
}

/* ---------- navigatie ----------
   De balk houdt altijd dezelfde hoogte (geen layoutverschuiving bij scrollen);
   alleen het logo krimpt van overhangende sticker naar klein en gecentreerd. */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--cream);
   border-bottom: 2px solid var(--forest);
}

.nav-in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   height: var(--nav-h);
}

.nav-brand {
   display: flex;
   align-items: center;
   gap: 22px;
   height: 100%;
   flex: none;
}

.nav-logo {
   display: block;
   position: relative;
   z-index: 2;
   align-self: flex-start;
   margin-top: 10px;
   line-height: 0;
   flex: none;
}

.nav-logo img {
   height: 128px;
   width: auto;
   max-width: none;
   transition: height .25s ease;
}

.nav-date {
   flex: none;
   font-weight: 600;
   font-size: .98rem;
   line-height: 1.35;
   color: var(--forest);
   padding-left: 22px;
   border-left: 2px solid var(--forest);
   white-space: nowrap;
}

.nav-date span {
   display: block;
   color: var(--text-2);
   font-weight: 500;
}

.nav-menu {
   display: flex;
   align-items: center;
}

.nav-links {
   display: flex;
   gap: 32px;
   list-style: none;
   font-weight: 600;
   font-size: 1.02rem;
   align-items: center;
}

.nav-links a {
   display: inline-block;
   text-decoration: none;
   color: var(--forest);
   padding: 8px 0 5px;
   border-bottom: 3px solid transparent;
   white-space: nowrap;
   line-height: 1.2;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
   border-color: var(--pink);
}

.nav-cta {
   min-height: 48px;
   padding: 8px 24px;
   white-space: nowrap;
}

.nav-cta-mobile {
   display: none;
}

.nav-burger {
   display: none;
   width: 48px;
   height: 48px;
   border: 2px solid var(--forest);
   border-radius: 12px;
   background: none;
   cursor: pointer;
   flex: none;
}

.nav-burger span {
   display: block;
   width: 22px;
   height: 3px;
   background: var(--forest);
   margin: 4px auto;
   border-radius: 2px;
   transition: transform .2s ease, opacity .2s ease;
}

.nav.is-compact .nav-logo {
   align-self: center;
   margin-top: 0;
}

.nav.is-compact .nav-logo img {
   height: 64px;
}

.nav.is-open .nav-burger span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav.is-open .nav-burger span:nth-child(2) {
   opacity: 0;
}

.nav.is-open .nav-burger span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* ---------- hero (home) ---------- */
.hero {
   position: relative;
   background: var(--forest);
   color: var(--cream);
   overflow: hidden;
   min-height: max(100svh, 760px);
   display: grid;
   align-items: end;
   padding: clamp(240px, 34vw, 440px) 0 clamp(140px, 15vw, 210px);
}

.hero video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 40%;
}

.hero-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(11, 58, 46, .2) 0%, rgba(11, 58, 46, 0) 30%, rgba(11, 58, 46, .15) 55%, rgba(11, 58, 46, .9) 100%);
}

.hero-in {
   position: relative;
   width: 100%; /* als grid-item met auto-marges zou de wrap anders krimpen tot de inhoud */
   display: grid;
   /* rechterkolom minimaal 350px, zodat knop en videolink naast elkaar passen */
   grid-template-columns: minmax(0, 1.5fr) minmax(350px, 1fr);
   gap: clamp(24px, 3vw, 48px);
   align-items: end;
}

.hero-title {
   container-type: inline-size;
}

.hero h1 {
   /* titel vult zijn kolom; de vw-regel is de fallback zonder container-units */
   font-size: clamp(3.2rem, 8.4vw, 7.4rem);
   font-size: clamp(3.2rem, 19.6cqw, 7.4rem);
   line-height: .92;
   text-shadow: 0 4px 30px rgba(7, 27, 22, .45);
}

.hero h1 span {
   display: block;
}

.hero-kicker,
.hero-only-mobile {
   display: none;
}

.hero-side p {
   font-size: clamp(1.05rem, 1.35vw, 1.2rem);
   max-width: 40ch;
   color: rgba(245, 235, 221, .95);
   text-shadow: 0 1px 14px rgba(7, 27, 22, .6);
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   align-items: center;
   margin-top: 26px;
}

.hero-video-link {
   color: var(--cream);
}

.hero-countdown {
   margin-top: 24px;
   font-size: 0.9rem !important;
   font-weight: 600;
   color: rgba(245, 235, 221, .8);
}

.hero-edge {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -2px;
   height: clamp(60px, 9vw, 120px);
}

.hero-edge svg {
   width: 100%;
   height: 100%;
   display: block;
}

/* ---------- secties ---------- */
.section {
   padding: var(--space) 0;
}

.section--tight {
   padding: clamp(64px, 8vw, 110px) 0;
}

.sec-head {
   margin-bottom: clamp(40px, 5vw, 72px);
}

.sec-head h2,
.sec-head h1 {
   font-size: clamp(2rem, 4.2vw, 3.4rem);
   color: var(--forest);
}

.sec-head p {
   margin-top: 18px;
   font-size: 1.15rem;
   color: var(--text-2);
}

.on-forest {
   background: var(--forest);
   color: var(--cream);
}

.on-forest .sec-head h2,
.on-forest .sec-head h1 {
   color: var(--cream);
}

.on-forest .sec-head p {
   color: rgba(245, 235, 221, .85);
}

.on-white {
   background: #fff;
}

.on-cream-2 {
   background: var(--cream-2);
}

/* ---------- afstandskaarten ---------- */
.trail-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
}

.trail {
   display: grid;
   grid-template-rows: auto 170px 1fr auto;
   gap: 18px;
   min-height: 500px;
   border-radius: 24px;
   padding: 30px 26px 28px;
   text-decoration: none;
   color: var(--cream);
   overflow: hidden;
   transition: transform .2s ease;
}

.trail:hover {
   transform: translateY(-5px);
}

.trail-pink {
   background: var(--pink);
}

.trail-forest {
   background: var(--forest);
}

.trail-orange {
   background: var(--orange);
}

.trail-cream {
   background: var(--clay);
   color: var(--forest);
}

.trail-k {
   font-family: var(--display);
   font-size: clamp(2.6rem, 3.6vw, 3.4rem);
   line-height: .95;
   text-transform: uppercase;
}

.trail-k small {
   display: block;
   font-family: var(--body);
   font-weight: 700;
   font-size: 1.1rem;
   text-transform: none;
   margin-top: 8px;
}

.trail-animal {
   height: 170px;
   width: 100%;
   object-fit: contain;
   object-position: right bottom;
}

.trail-copy {
   font-size: 1rem;
   line-height: 1.55;
   color: rgba(255, 255, 255, .95);
}

.trail-forest .trail-copy {
   color: rgba(245, 235, 221, .9);
}

.trail-cream .trail-copy {
   color: var(--forest);
}

.trail-meta {
   padding-top: 16px;
   border-top: 2px solid rgba(255, 255, 255, .35);
   font-weight: 700;
   font-size: 1.15rem;
}

.trail-cream .trail-meta {
   border-color: rgba(11, 58, 46, .35);
}

.trail-meta small {
   display: block;
   font-weight: 500;
   opacity: .9;
   font-size: .9rem;
   margin-top: 2px;
}

.trail-foot {
   margin-top: 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px 40px;
   flex-wrap: wrap;
}

.trail-note {
   font-size: .98rem;
   color: var(--text-2);
   max-width: 60ch;
}

/* ---------- terugblik / galerij ---------- */
.look-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 270px;
   gap: 20px;
}

.look-grid figure {
   margin: 0;
   border-radius: 20px;
   overflow: hidden;
   background: var(--forest-2);
}

.look-grid img,
.look-grid video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.l-reel {
   grid-row: span 2;
}

.l-wide {
   grid-column: span 2;
}

.lb-open {
   display: block;
   width: 100%;
   height: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: zoom-in;
}

.lb-open:focus-visible {
   outline: 3px solid var(--orange);
   outline-offset: -3px;
}

.lb-open img {
   transition: transform .25s ease;
}

.lb-open:hover img {
   transform: scale(1.03);
}

.look-quote {
   margin-top: clamp(48px, 6vw, 88px);
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 40px;
   align-items: end;
}

.look-quote blockquote {
   font-family: var(--display);
   text-transform: uppercase;
   font-size: clamp(1.4rem, 2.4vw, 2rem);
   line-height: 1.15;
   max-width: 24ch;
}

.look-quote cite {
   display: block;
   font-family: var(--body);
   font-style: normal;
   font-size: .98rem;
   color: rgba(245, 235, 221, .75);
   margin-top: 16px;
   text-transform: none;
}

.look-actions {
   display: flex;
   gap: 28px;
   align-items: center;
   flex-wrap: wrap;
   justify-content: end;
}

.look-actions .textlink {
   color: var(--cream);
}

.gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-flow: dense;
   gap: 16px;
}

.gallery figure {
   margin: 0;
   border-radius: 16px;
   overflow: hidden;
   aspect-ratio: 3/4;
   background: var(--stone);
}

.gallery figure.is-wide {
   grid-column: span 2;
   aspect-ratio: 3/2;
}

.gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ---------- zoo ---------- */
.zoo-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: clamp(40px, 7vw, 120px);
   align-items: center;
}

.zoo-logo {
   height: 64px;
   width: auto;
   margin-bottom: 32px;
}

.zoo-grid h2 {
   font-size: clamp(1.9rem, 3.6vw, 2.9rem);
   color: var(--forest);
   max-width: 14ch;
}

.zoo-grid p {
   margin-top: 22px;
   max-width: 48ch;
   font-size: 1.12rem;
   color: var(--text-2);
}

.discount {
   margin-top: 34px;
   padding: 28px 30px;
   background: var(--cream);
   border-radius: 20px;
   font-size: 1.08rem;
   max-width: 50ch;
}

/* Op een cream-sectie (praktisch) zou de cream kaart wegvallen: dan wit. */
.section:not(.on-white) .discount {
   background: var(--white);
}

.discount h3 {
   margin: 0;
   font-family: var(--display);
   text-transform: uppercase;
   font-size: 1.15rem;
   color: var(--pink);
   font-weight: 400;
}

/* Prijsregel: groot deelnemerstarief, normale prijs doorgestreept ernaast. */
.discount-price {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px 14px;
   margin: 12px 0 0;
   line-height: 1;
}

.discount-price .now {
   font-family: var(--display);
   font-size: clamp(2.5rem, 4vw, 3.2rem);
   color: var(--pink);
}

.discount-price .was {
   font-size: 1rem;
   color: var(--text-2);
}

.discount-price s {
   text-decoration-color: var(--pink);
   text-decoration-thickness: 2px;
}

.zoo-grid .discount p {
   margin-top: 14px;
   max-width: none;
   font-size: 1.05rem;
   line-height: 1.55;
}

.zoo-grid .discount .discount-price {
   margin-top: 12px;
}

.zoo-grid figure {
   margin: 0;
   position: relative;
}

.zoo-grid figure img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   border-radius: 24px;
}

/* Sticker op de zoo-foto van /praktisch: roze giraffe die over de hoek gluurt */
.zoo-grid figure img.stamp--giraffe {
   width: clamp(96px, 11vw, 150px);
   right: -26px;
   top: -34px;
   transform: rotate(12deg);
}

.zoo-grid figcaption {
   margin-top: 12px;
   font-size: .98rem;
   color: var(--text-2);
}

.zoo-grid figure img.stamp {
   position: absolute;
   right: -14px;
   top: -14px;
   width: 130px;
   height: auto;
   aspect-ratio: auto;
   border-radius: 0;
   object-fit: contain;
   transform: rotate(9deg);
   filter: drop-shadow(0 8px 16px rgba(7, 27, 22, .3));
}

/* ---------- dag & parcours ---------- */
.day {
   position: relative;
   overflow: hidden;
}

.day::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url(../patterns/tile-topo.jpg) center/560px repeat;
   opacity: .06;
   mix-blend-mode: multiply;
   pointer-events: none;
}

.day .wrap {
   position: relative;
}

.day-grid {
   display: grid;
   grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
   gap: clamp(40px, 7vw, 120px);
   align-items: start;
}

.times {
   list-style: none;
   border-top: 3px solid var(--forest);
}

.times li {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 16px;
   align-items: baseline;
   padding: 14px 0;
   border-bottom: 2px solid var(--stone);
   font-size: 1.08rem;
}

.times b {
   font-family: var(--display);
   font-weight: 400;
   font-size: 1.3rem;
   color: var(--forest);
}

.times em {
   font-style: normal;
   font-weight: 600;
   color: var(--orange);
   font-size: .95rem;
   margin-left: 10px;
}

.day-copy p {
   font-size: 1.12rem;
   color: var(--text-2);
   max-width: 50ch;
}

.day-copy p+p {
   margin-top: 20px;
}

.day-copy .btn {
   margin-top: 34px;
}

.route {
   margin-top: clamp(56px, 7vw, 96px);
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
   gap: clamp(30px, 5vw, 72px);
   align-items: center;
}

.route figure {
   margin: 0;
}

.route figure img {
   width: 100%;
   height: auto;
   border-radius: 22px;
   border: 3px solid var(--forest);
}

.route figcaption {
   margin-top: 12px;
   font-size: .95rem;
   color: var(--text-2);
}

.route h3 {
   font-size: clamp(1.5rem, 2.6vw, 2rem);
   color: var(--forest);
}

.route p {
   margin-top: 16px;
   max-width: 46ch;
   font-size: 1.08rem;
   color: var(--text-2);
}

.route strong {
   color: var(--forest);
}

.route .btn {
   margin-top: 26px;
}

/* ---------- nieuws ---------- */
.news-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
}

.news-card {
   border-radius: 22px;
   overflow: hidden;
   background: #fff;
   text-decoration: none;
   color: var(--ink);
   display: block;
   transition: transform .2s ease;
}

.news-card:hover {
   transform: translateY(-4px);
}

.news-card img {
   display: block;
   width: 100%;
   height: 240px;
   object-fit: cover;
}

.news-card-body {
   padding: 24px 26px 28px;
}

.news-card time {
   font-weight: 600;
   font-size: .95rem;
   color: var(--orange);
}

.news-card h3,
.news-card h2 {
   font-family: var(--body);
   font-weight: 700;
   text-transform: none;
   font-size: 1.22rem;
   line-height: 1.35;
   margin: 10px 0 10px;
   color: var(--forest);
}

.news-card p {
   font-size: 1rem;
   color: var(--text-2);
}

.news-more {
   margin-top: 36px;
}

.news-pagination {
   display: flex;
   gap: 20px;
   align-items: center;
   justify-content: center;
   margin-top: 48px;
   font-weight: 600;
}

/* ---------- partners ---------- */
.partners {
   padding: 44px 0;
   border-top: 2px solid var(--forest);
   border-bottom: 2px solid var(--forest);
   background: #fff;
}

.partners-in {
   display: flex;
   align-items: center;
   gap: 48px;
   flex-wrap: wrap;
}

.partners-in p {
   font-weight: 600;
   color: var(--text-2);
}

.partner-logos {
   display: flex;
   gap: 48px;
   align-items: center;
   flex-wrap: wrap;
}

.partner-logos img {
   height: 36px;
   width: auto;
   mix-blend-mode: multiply;
}

.partner-logos a {
   display: block;
}

/* ---------- slot-CTA ---------- */
.final {
   background: var(--forest) url(../brand/bg-pattern.png) center / cover no-repeat;
   color: #fff;
   position: relative;
   overflow: hidden;
}

.final::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 27, 22, .84) 0%, rgba(7, 27, 22, .72) 48%, rgba(7, 27, 22, .18) 100%);
   pointer-events: none;
}

.final-in {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 40px;
   align-items: center;
   position: relative;
   z-index: 1;
}

.final h2 {
   font-size: clamp(2rem, 4.6vw, 3.8rem);
   max-width: 12ch;
}

.final p {
   margin-top: 18px;
   max-width: 40ch;
   font-size: 1.12rem;
}

.final .btn-cream {
   color: var(--forest);
}

/* ---------- footer ---------- */
.footer {
   background: var(--ink);
   color: var(--stone);
   padding: 72px 0 110px;
}

.foot-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr auto;
   gap: 48px;
   align-items: start;
}

.foot-poster-row {
   display: flex;
   gap: 12px;
}

.foot-poster img {
   width: 110px;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
   transition: transform .2s ease;
}

.foot-poster a:hover img {
   transform: translateY(-3px) rotate(-1deg);
}

.foot-poster p {
   margin-top: 12px;
   font-size: .95rem;
}

.foot-poster p a {
   text-decoration: underline;
   text-underline-offset: 4px;
}

.foot-brand img {
   height: 120px;
   width: auto;
   margin-bottom: 22px;
}

.foot-brand p {
   font-size: 1rem;
   line-height: 1.7;
}

.foot-social {
   margin-top: 18px;
   display: flex;
   gap: 14px;
}

.foot-social a {
   display: inline-flex;
   padding: 2px;
}

.foot-social svg {
   width: 26px;
   height: 26px;
   display: block;
}

.foot-badge {
   margin-top: 22px;
   display: inline-block;
}

.foot-badge img {
   width: 210px;
   height: auto;
   display: block;
}

.rating {
   display: inline-flex;
   align-items: baseline;
   gap: 10px;
   text-decoration: none;
   color: inherit;
}

.rating b {
   font-family: var(--display);
   font-size: 1.6rem;
   line-height: 1;
   color: var(--pink);
}

.rating span {
   font-size: .95rem;
   text-decoration: underline;
   text-underline-offset: 4px;
}

.look-quote .rating {
   margin-top: 22px;
}

.look-quote .rating b {
   color: var(--orange);
}

.final .rating {
   margin-top: 18px;
}

.final .rating b {
   color: #fff;
}

.foot-grid h2, .foot-grid h3 {
   font-family: var(--body);
   font-weight: 700;
   font-size: 1rem;
   color: var(--cream);
   margin-bottom: 14px;
   text-transform: none;
}

.foot-grid ul {
   list-style: none;
   display: grid;
   gap: 10px;
   font-size: 1rem;
}

.foot-grid a {
   text-decoration: none;
   color: var(--stone);
   transition: color .15s ease;
}

.foot-grid a:hover {
   color: var(--cream);
}

.foot-bottom {
   margin-top: 48px;
   padding-top: 24px;
   border-top: 1px solid rgba(216, 210, 196, .25);
   display: flex;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
   font-size: .92rem;
   align-items: center;
}

.foot-bottom p {
   display: flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
}

.foot-bottom img {
   height: 24px;
   width: auto;
   filter: brightness(0) invert(1);
   opacity: .9;
}

/* ---------- modals ---------- */
.modal {
   position: fixed;
   inset: 0;
   z-index: 80;
   background: rgba(7, 27, 22, .92);
   display: none;
   place-items: center;
   padding: 20px;
}

.modal.open {
   display: grid;
}

.modal-box {
   position: relative;
   background: #000;
   border-radius: 16px;
   overflow: hidden;
}

.modal-box--video {
   width: min(1100px, 100%);
   aspect-ratio: 16/9;
}

.modal-box--video iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

.modal-box--form {
   width: min(520px, 100%);
   background: var(--cream);
   color: var(--ink);
   padding: 36px 32px 28px;
}

.modal-close {
   position: absolute;
   right: 14px;
   top: 14px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 0;
   background: var(--forest);
   color: var(--cream);
   font-size: 1.4rem;
   cursor: pointer;
   z-index: 2;
}

.modal-title {
   font-size: 1.6rem;
   color: var(--forest);
   padding-right: 50px;
}

.modal-text {
   margin: 12px 0 22px;
   color: var(--text-2);
   font-size: 1rem;
}

/* ---------- formulieren ---------- */
.form {
   display: grid;
   gap: 8px;
}

.form label {
   font-weight: 600;
   font-size: .95rem;
   margin-top: 8px;
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   font: inherit;
   padding: 12px 14px;
   border: 2px solid var(--forest);
   border-radius: 12px;
   background: #fff;
   color: var(--ink);
   min-height: 48px;
}

.form-textarea {
   min-height: 140px;
   resize: vertical;
}

.form .btn {
   margin-top: 16px;
}

.form-note {
   font-size: .9rem;
   color: var(--text-2);
   margin-top: 6px;
}

.form-message {
   padding: 12px 14px;
   border-radius: 12px;
   font-weight: 600;
}

.form-message.success {
   background: #e2f1e6;
   color: var(--forest);
}

.form-message.error {
   background: #fde4ec;
   color: #8a0b3c;
}

.hp {
   position: absolute;
   left: -9999px;
   top: -9999px;
}

/* ---------- lightbox ---------- */
.lightbox {
   position: fixed;
   inset: 0;
   z-index: 90;
   background: rgba(7, 27, 22, .94);
   display: none;
   grid-template-rows: 1fr auto;
   padding: clamp(12px, 3vw, 32px);
   touch-action: pan-y;
}

.lightbox.open {
   display: grid;
}

.lightbox img {
   max-width: 100%;
   max-height: calc(100vh - 120px);
   width: auto;
   height: auto;
   margin: auto;
   object-fit: contain;
   border-radius: 12px;
   user-select: none;
   -webkit-user-drag: none;
}

.lb-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   color: var(--cream);
   padding-top: 14px;
}

.lb-bar p {
   font-size: .98rem;
   max-width: 60ch;
}

.lb-nav {
   display: flex;
   gap: 10px;
}

.lb-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 2px solid rgba(245, 235, 221, .6);
   background: none;
   color: var(--cream);
   font-size: 1.4rem;
   cursor: pointer;
   display: grid;
   place-items: center;
}

.lb-btn:hover {
   background: rgba(245, 235, 221, .12);
}

.lb-close {
   position: absolute;
   right: clamp(12px, 3vw, 32px);
   top: clamp(12px, 3vw, 32px);
   background: var(--cream);
   color: var(--forest);
   border-color: var(--cream);
}

/* ==========================================================================
   Subpagina's
   ========================================================================== */
.page-hero {
   background: var(--forest);
   color: var(--cream);
   padding: clamp(56px, 8vw, 100px) 0 clamp(96px, 12vw, 150px);
   position: relative;
   overflow: hidden;
}

.page-hero--photo {
   min-height: 420px;
   display: grid;
   align-items: end;
}

.page-hero--photo img.page-hero-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.page-hero--photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(11, 58, 46, .35) 0%, rgba(11, 58, 46, .92) 100%);
}

.page-hero .wrap {
   position: relative;
   z-index: 1;
   width: 100%;
}

/* in de grid van de foto-hero anders krimpend en gecentreerd */
.page-hero h1 {
   font-size: clamp(2.2rem, 5vw, 4rem);
   max-width: 16ch;
}

.page-hero p {
   margin-top: 18px;
   max-width: 52ch;
   font-size: 1.15rem;
   color: rgba(245, 235, 221, .9);
}

.page-hero .hero-edge {
   bottom: -2px;
   z-index: 2;
}

/* boven de ::after-gradient, anders kleurt de golf donkergroen */
.breadcrumb {
   font-size: .92rem;
   color: rgba(245, 235, 221, .7);
   margin-bottom: 20px;
}

.breadcrumb a {
   text-decoration: none;
}

.breadcrumb a:hover {
   text-decoration: underline;
}

.content {
   max-width: 760px;
}

.content>*+* {
   margin-top: 1.2em;
}

.content h2 {
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   color: var(--forest);
   margin-top: 2.2em;
   overflow-wrap: anywhere;
}

.content h3 {
   font-size: clamp(1.2rem, 2vw, 1.5rem);
   color: var(--forest);
   margin-top: 1.8em;
}

.content p,
.content li {
   font-size: 1.08rem;
   color: var(--text-2);
}

.content ul,
.content ol {
   padding-left: 1.3em;
}

.content li+li {
   margin-top: .4em;
}

.content a {
   color: var(--forest);
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
   overflow-wrap: anywhere;
}

.content .btn {
   text-decoration: none;
}

.content .btn-pink {
   color: #fff;
}

.content .btn-forest {
   color: var(--cream);
}

.content .btn-cream {
   color: var(--forest);
}

.content .btn-line {
   color: var(--forest);
}

.content figure {
   margin: 2em 0;
}

.content figure img {
   border-radius: 18px;
}

.content figcaption {
   font-size: .92rem;
   color: var(--text-2);
   margin-top: 8px;
}

.content table {
   width: 100%;
   border-collapse: collapse;
   font-size: 1rem;
   display: block;
   overflow-x: auto;
}

.content table tbody,
.content table thead {
   display: table;
   width: 100%;
}

.content th,
.content td {
   text-align: left;
   padding: 12px 10px;
   border-bottom: 2px solid var(--stone);
   vertical-align: top;
}

.content th {
   font-weight: 700;
   color: var(--forest);
}

.content blockquote {
   border-left: 4px solid var(--pink);
   padding-left: 20px;
   font-size: 1.15rem;
}

.content .intro {
   font-size: 1.22rem;
   color: var(--ink);
}

.content details {
   border-top: 2px solid var(--stone);
   padding: 14px 0;
   margin-top: 0;
}

.content details:last-of-type {
   border-bottom: 2px solid var(--stone);
}

.content summary {
   font-weight: 700;
   font-size: 1.08rem;
   color: var(--forest);
   cursor: pointer;
   list-style: none;
   display: flex;
   justify-content: space-between;
   gap: 16px;
   align-items: center;
}

.content summary::-webkit-details-marker {
   display: none;
}

.content summary::after {
   content: "+";
   font-family: var(--display);
   font-size: 1.3rem;
   color: var(--pink);
   flex: none;
}

.content details[open] summary::after {
   content: "–";
}

.content details p {
   margin-top: 10px;
}

.video-embed {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: 18px;
   overflow: hidden;
   background: #000;
}

.video-embed iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.status-badge {
   display: inline-block;
   padding: 6px 14px;
   border-radius: 999px;
   background: var(--orange);
   color: var(--ink);
   font-weight: 700;
   font-size: .9rem;
}

.status-badge--open {
   background: var(--pink);
   color: #fff;
}

/* praktisch: afstandsblokken */
.dist-list {
   display: grid;
   gap: 24px;
   margin-top: 8px;
}

.dist {
   display: grid;
   grid-template-columns: 160px minmax(0, 1fr) 200px;
   gap: 28px;
   align-items: center;
   padding: 28px 30px;
   border-radius: 24px;
   color: var(--cream);
}

.dist-pink {
   background: var(--pink);
}

.dist-forest {
   background: var(--forest);
}

.dist-orange {
   background: var(--orange);
}

.dist-cream {
   background: var(--clay);
   color: var(--forest);
}

.dist-animal {
   height: 130px;
   width: 100%;
   object-fit: contain;
   object-position: left center;
}

.dist h3 {
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   line-height: 1;
}

.dist h3 small {
   display: block;
   font-family: var(--body);
   font-weight: 700;
   font-size: 1.05rem;
   text-transform: none;
   margin-top: 6px;
}

.dist p {
   margin-top: 12px;
   font-size: 1.02rem;
   max-width: 56ch;
}

.dist-cream p {
   color: var(--forest);
}

.dist-meta {
   text-align: right;
   font-weight: 700;
   font-size: 1.3rem;
}

.dist-meta small {
   display: block;
   font-weight: 500;
   font-size: .9rem;
   opacity: .9;
   margin-top: 4px;
}

.facts {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px 56px;
   margin-top: 36px;
}

.facts h3 {
   font-size: 1.25rem;
   color: var(--forest);
}

.facts p {
   margin-top: 10px;
   font-size: 1.05rem;
   color: var(--text-2);
}

.extras {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 24px;
   margin-top: 24px;
   align-items: stretch;
}

.extra {
   background: #fff;
   border-radius: 20px;
   padding: 16px 16px 24px;
   display: grid;
   grid-template-rows: auto 1fr;
   gap: 18px;
   align-content: start;
}

.extra-figure {
   margin: 0;
   aspect-ratio: 4/5;
   border-radius: 14px;
   overflow: hidden;
   background: var(--stone);
}

.extra-figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.shirt-mosaic {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
}

.shirt-mosaic img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   border-radius: 10px;
   display: block;
   background: var(--stone);
}

.extra-body {
   padding: 0 8px;
}

.extra h3 {
   font-size: 1.15rem;
   color: var(--forest);
}

.extra p {
   margin-top: 4px;
   font-size: .98rem;
   color: var(--text-2);
}

.extra strong {
   display: block;
   margin-top: 8px;
   font-size: 1.15rem;
}

/* edities */
.editie-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
}

.editie-kaart {
   display: grid;
   grid-template-rows: auto auto 1fr;
   gap: 8px;
   padding: 26px 24px;
   border-radius: 20px;
   background: #fff;
   text-decoration: none;
   color: var(--ink);
   transition: transform .2s ease;
}

.editie-kaart:hover {
   transform: translateY(-4px);
}

.editie-kaart--stil {
   background: var(--cream-2);
}

.editie-jaar {
   font-family: var(--display);
   font-size: 2.4rem;
   color: var(--forest);
   line-height: 1;
}

.editie-status {
   font-weight: 600;
   color: var(--orange);
   font-size: .95rem;
}

.editie-btn {
   align-self: end;
   justify-self: start;
   margin-top: 18px;
   min-height: 44px;
   padding: 8px 20px;
   font-size: .95rem;
}

.editie-kaart:hover .editie-btn {
   background: var(--forest);
   color: var(--cream);
}

.editie-nav {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   margin-top: 48px;
   font-weight: 600;
}

/* contact */
.contact-card {
   background: #fff;
   border-radius: 22px;
   padding: 32px;
   margin: 24px 0 40px;
}

/* pers */
.pers-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
   margin-top: 20px;
}

.pers-tile {
   display: block;
   background: #fff;
   border-radius: 16px;
   padding: 14px;
   text-decoration: none;
   color: var(--ink);
   transition: transform .2s ease;
}

.pers-tile:hover {
   transform: translateY(-4px);
}

.pers-tile--dark img {
   background: var(--forest);
}

.pers-tile img {
   border-radius: 10px;
   aspect-ratio: 4/3;
   object-fit: contain;
   background: var(--cream-2);
   width: 100%;
}

.pers-tile span {
   display: block;
   margin-top: 10px;
   font-weight: 600;
   font-size: .95rem;
}

.pers-tile small {
   display: block;
   color: var(--text-2);
   font-size: .85rem;
}

/* 404 */
.center {
   text-align: center;
}

.btn-row {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center;
}

.btn-row.center {
   justify-content: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      transition: none !important;
      animation: none !important;
   }

   html {
      scroll-behavior: auto;
   }
}

@media (max-width: 1100px) {
   .nav-date {
      display: none;
   }

   .nav-links {
      gap: 22px;
   }

   .nav-in {
      gap: 18px;
   }

   .trail-grid {
      grid-template-columns: 1fr 1fr;
   }

   .look-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 220px;
   }

   .gallery {
      grid-template-columns: repeat(3, 1fr);
   }

   .foot-grid {
      grid-template-columns: 1fr 1fr;
   }

   .dist {
      grid-template-columns: 120px minmax(0, 1fr);
   }

   .dist-meta {
      grid-column: 2;
      text-align: left;
   }
}

@media (max-width: 900px) {
   :root {
      --nav-h: 84px;
   }

   /* Telefoons: de balk staat fixed en krimpt na het scrollen (84 → 64 px). Omdat hij
     buiten de flow staat, verschuift de pagina daarbij niet; body reserveert de ruimte. */
   body {
      padding-top: var(--nav-h);
   }

   .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
   }

   .nav-in {
      transition: height .25s ease;
   }

   .nav.is-compact .nav-in {
      height: 64px;
   }

   body.has-site-alert {
      padding-top: 0;
   }

   body.has-site-alert .nav {
      position: sticky;
   }

   .nav-menu {
      display: none;
      align-items: stretch;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: var(--cream);
      border-bottom: 2px solid var(--forest);
      padding: 16px var(--gutter) 24px;
   }

   .nav.is-open .nav-menu {
      display: block;
   }

   .nav-links {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      font-size: 1.1rem;
   }

   .nav-links a {
      display: block;
      padding: 12px 0;
      border-bottom: 2px solid var(--stone);
   }

   .nav-links a:hover,
   .nav-links a[aria-current="page"] {
      border-color: var(--pink);
   }

   .nav-cta-mobile {
      display: inline-flex;
      margin-top: 18px;
      width: 100%;
   }

   .nav-cta {
      display: none;
   }

   .nav-burger {
      display: block;
   }

   .nav-brand {
      gap: 12px;
   }

   .nav-date {
      display: block;
      white-space: normal;
   }

   /* Op telefoons hangt het beeldmerk niet over de balk: het viel weg tegen de lijn. */
   .nav-logo {
      align-self: center;
      margin-top: 0;
   }

   .nav-logo img {
      height: 74px;
   }

   .nav-date {
      font-size: .82rem;
      line-height: 1.3;
      padding-left: 12px;
   }

   .nav.is-compact .nav-logo img {
      height: 48px;
   }
}

@media (max-width: 760px) {
   :root {
      --space: clamp(72px, 16vw, 110px);
   }

   /* Mobiele intro: video op 60% van het scherm met de titel onderin,
     daaronder op cream wat het is, de knop en de datum. */
   .hero {
      --hero-video: 70svh;
      min-height: 0;
      padding: 0;
      display: grid;
      grid-template-rows: var(--hero-video) auto;
      align-items: stretch;
      background: var(--cream);
      color: var(--ink);
   }

   .hero video,
   .hero-shade {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--hero-video);
   }

   .hero video {
      object-position: center;
   }

   .hero-shade {
      background: linear-gradient(180deg, rgba(11, 58, 46, .1) 0%, rgba(11, 58, 46, 0) 30%, rgba(11, 58, 46, .55) 62%, rgba(11, 58, 46, .92) 100%);
   }

   .hero-in {
      display: contents;
   }

   .hero-title {
      grid-row: 1;
      position: relative;
      align-self: end;
      padding: 0 var(--gutter) 52px;
      color: var(--cream);
   }

   .hero h1 {
      font-size: clamp(2.6rem, 12.5vw, 3.8rem);
   }

   .hero-kicker {
      display: block;
      margin-top: 10px;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--cream);
      text-shadow: 0 1px 12px rgba(7, 27, 22, .6);
   }

   .hero-only-mobile {
      display: inline;
   }

   .hero-only-desktop {
      display: none;
   }

   .hero-side {
      grid-row: 2;
      position: relative;
      padding: 34px var(--gutter) 40px;
   }

   .hero-side p {
      font-size: 1.1rem;
      max-width: 100%;
      color: var(--text-2);
      text-shadow: none;
   }

   .hero-cta {
      margin-top: 22px;
      gap: 14px 22px;
   }

   .hero-cta .btn {
      flex: 1 1 100%;
   }

   .hero-video-link {
      color: var(--forest);
   }

   .hero-countdown {
      margin-top: 18px;
      color: var(--forest);
      font-size: 1rem;
   }

   /* alleen de video-hero op de homepage; op subpagina's (.page-hero) blijft de golf gewoon onderaan */
   .hero .hero-edge {
      top: var(--hero-video);
      bottom: auto;
      transform: translateY(-100%);
      height: 56px;
      z-index: 1;
   }

   .trail-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .trail {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr) 84px;
      grid-template-rows: auto auto auto;
      gap: 12px 16px;
      padding: 20px 20px 18px;
      border-radius: 18px;
   }

   .trail-k {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      font-size: 2.2rem;
   }

   .trail-animal {
      grid-column: 2;
      grid-row: 1;
      height: 76px;
      width: 84px;
      object-position: right center;
   }

   .trail-copy {
      grid-column: 1 / -1;
   }

   .trail-meta {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding-top: 12px;
   }

   .trail-meta small {
      display: inline;
      margin: 0;
   }

   .trail-foot {
      flex-direction: column;
      align-items: stretch;
   }

   .trail-foot .btn {
      width: 100%;
   }

   .look-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 112px;
      gap: 8px;
   }

   .look-grid figure {
      border-radius: 10px;
   }

   .look-quote {
      grid-template-columns: 1fr;
   }

   .look-actions {
      justify-content: start;
   }

   .gallery {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
   }

   .gallery figure {
      border-radius: 10px;
   }

   .zoo-grid {
      grid-template-columns: 1fr;
   }

   .zoo-grid figure img.stamp {
      width: 100px;
      right: 4px;
      top: -10px;
   }

   .day-grid {
      grid-template-columns: 1fr;
   }

   .times li {
      grid-template-columns: 82px 1fr;
   }

   .route {
      grid-template-columns: 1fr;
   }

   /* Nieuws op telefoons: compacte rij met de foto naast de titel, zonder intro. */
   .news-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .news-card {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      border-radius: 16px;
   }

   .news-card img {
      width: 104px;
      height: 104px;
   }

   .news-card-body {
      padding: 12px 16px 12px 0;
   }

   .news-card time {
      font-size: .85rem;
   }

   .news-card h3,
   .news-card h2 {
      font-size: 1.05rem;
      line-height: 1.3;
      margin: 4px 0 0;
   }

   .news-card p {
      display: none;
   }

   .news-more {
      margin-top: 24px;
   }

   .final-in {
      grid-template-columns: 1fr;
   }

   .final::before {
      background: rgba(7, 27, 22, .74);
   }

   .foot-grid {
      grid-template-columns: 1fr;
   }

   .footer {
      padding-bottom: 72px;
   }

   .page-hero--photo {
      min-height: 320px;
   }

   .dist {
      grid-template-columns: 1fr;
      padding: 22px 20px;
   }

   .dist-animal {
      height: 90px;
   }

   .dist-meta {
      grid-column: 1;
   }

   .facts {
      grid-template-columns: 1fr;
   }

   .extras {
      grid-template-columns: 1fr;
   }

   .extra {
      grid-template-columns: 1fr;
      padding: 12px 12px 20px;
   }

   .extra-figure {
      aspect-ratio: 4/3;
   }

   .shirt-mosaic {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
   }

   .extra img,

   .modal-box--form {
      padding: 28px 20px 22px;
   }
}

/* ==========================================================================
   Subpagina-componenten (praktisch, edities, organisatie, pers, juridisch)
   ========================================================================== */
.jump {
   background: var(--cream);
   border-bottom: 2px solid var(--stone);
   position: sticky;
   top: var(--nav-h);
   z-index: 40;
}

.jump-in {
   display: flex;
   gap: 6px 26px;
   flex-wrap: wrap;
   padding-block: 14px;
   font-weight: 600;
   font-size: .98rem;
}

.jump a {
   text-decoration: none;
   color: var(--forest);
   padding: 4px 0;
   border-bottom: 3px solid transparent;
   white-space: nowrap;
}

.jump a:hover {
   border-color: var(--pink);
}

.jump~section[id] {
   scroll-margin-top: calc(var(--nav-h) + 72px);
}

.loc-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
   gap: clamp(32px, 5vw, 72px);
   align-items: start;
}

.loc-media {
   display: grid;
   gap: 24px;
}

.loc-media figure {
   margin: 0;
}

.loc-media img {
   border-radius: 18px;
   border: 3px solid var(--forest);
   background: #fff;
}

.loc-media figcaption {
   margin-top: 10px;
   font-size: .95rem;
   color: var(--text-2);
}

.route-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
   gap: clamp(24px, 4vw, 56px);
   align-items: start;
}

.route-grid figure {
   margin: 0;
}

.route-grid img {
   border-radius: 18px;
   border: 3px solid rgba(245, 235, 221, .4);
   background: #fff;
}

.route-grid figcaption {
   margin-top: 12px;
   font-size: 1rem;
   color: rgba(245, 235, 221, .85);
}

.route-grid figcaption a {
   color: var(--cream);
}

.route-copy {
   margin-top: clamp(36px, 5vw, 64px);
   max-width: 66ch;
}

.route-copy p {
   font-size: 1.12rem;
   color: rgba(245, 235, 221, .9);
}

.route-copy p+p {
   margin-top: 18px;
}

.route-copy strong {
   color: #fff;
}

.route-copy a {
   color: var(--cream);
}

/* Parkeren in stappen (Gijs, 16 sep) */
.content .steps {
   list-style: none;
   counter-reset: stap;
   margin: 18px 0 0;
   padding: 0;
}

.content .steps li {
   counter-increment: stap;
   position: relative;
   padding-left: 58px;
   margin-top: 14px;
   min-height: 40px;
   line-height: 1.55;
}

.content .steps li::before {
   content: counter(stap);
   position: absolute;
   left: 0;
   top: -2px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--pink);
   color: #fff;
   font-family: var(--display);
   font-size: 1.05rem;
   display: grid;
   place-items: center;
}

.content .steps+p {
   margin-top: 26px;
}

.route-links a {
   color: var(--forest);
   font-weight: 700;
   text-decoration: underline;
   text-decoration-color: var(--pink);
   text-decoration-thickness: 2px;
}

.faq-more {
   margin-top: 28px;
}

.content .contact-card {
   margin-top: 0;
}

.breadcrumb--dark {
   color: var(--text-2);
}

.article h1 {
   font-size: clamp(2rem, 4.2vw, 3.2rem);
   color: var(--forest);
   margin-top: 8px;
}

.article-date {
   font-weight: 600;
   color: var(--orange);
   font-size: .98rem;
   display: block;
   margin-top: 24px;
}

.article-hero img {
   width: 100%;
   border-radius: 22px;
}

.article-back {
   margin-top: 3em;
}

.gallery-title {
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   color: var(--forest);
   margin-top: clamp(48px, 6vw, 80px);
}

.gallery-intro {
   margin: 14px 0 28px;
   max-width: 66ch;
   font-size: 1.05rem;
   color: var(--text-2);
}

/* Parcoursfoto's op /praktisch, in de donkergroene sectie */
.gallery--parcours {
   margin-top: clamp(40px, 5vw, 64px);
}

.gallery--parcours figure {
   background: var(--forest-2);
}

.gallery--three {
   grid-template-columns: repeat(3, 1fr);
   margin-top: clamp(40px, 5vw, 64px);
}

.gallery--three figure.is-wide {
   grid-column: auto;
}

.org-media {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin: clamp(40px, 5vw, 64px) 0;
   max-width: 900px;
}

.org-media figure {
   margin: 0;
}

.org-media img {
   border-radius: 18px;
   width: 100%;
}

.org-media figcaption {
   margin-top: 10px;
   font-size: .95rem;
   color: var(--text-2);
}

.partner-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
   margin-bottom: clamp(40px, 5vw, 64px);
}

.partner-grid--small {
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   margin-top: 20px;
}

.partner-tile {
   display: grid;
   place-items: center;
   background: #fff;
   border-radius: 18px;
   padding: 28px;
   min-height: 130px;
}

.partner-tile img {
   max-height: 64px;
   width: auto;
   max-width: 100%;
}

.pers-tile--photo img {
   aspect-ratio: 4/3;
   object-fit: cover;
   background: none;
}

.pers-posters {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 300px));
   gap: 40px;
   margin: 8px 0 clamp(40px, 5vw, 64px);
}

.pers-poster {
   display: grid;
   gap: 18px;
   align-content: start;
}

.pers-poster img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   box-shadow: 0 14px 34px rgba(7, 27, 22, .22);
}

.legal h1 {
   font-size: clamp(1.7rem, 4.2vw, 3rem);
   color: var(--forest);
   overflow-wrap: anywhere;
}

.legal-meta {
   font-size: .95rem;
   color: var(--text-2);
   margin-top: 8px;
}

.legal section+section {
   margin-top: 2.4em;
}

.legal h2 {
   font-size: 1.4rem;
   overflow-wrap: anywhere;
}

.legal h3 {
   font-size: 1.1rem;
}

.legal p,
.legal li {
   font-size: 1.02rem;
}

.legal .cookie-table {
   font-size: .95rem;
}

.legal code {
   font-family: ui-monospace, Menlo, monospace;
   font-size: .9em;
}

@media (max-width: 900px) {
   .pers-posters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .loc-grid,
   .route-grid {
      grid-template-columns: 1fr;
   }

   .org-media {
      grid-template-columns: 1fr;
   }

   .gallery--three {
      grid-template-columns: 1fr 1fr;
   }

}

@media (max-width: 760px) {
   .pers-posters {
      grid-template-columns: 1fr;
   }

   .pers-poster img {
      max-width: 260px;
   }

   .jump {
      position: static;
   }

   .jump~section[id] {
      scroll-margin-top: calc(var(--nav-h) + 8px);
   }

   .jump-in {
      gap: 4px 18px;
      font-size: .92rem;
   }

   .gallery--three {
      grid-template-columns: 1fr;
   }

   .gallery--three figure.is-wide {
      aspect-ratio: 3/2;
   }
}
/* ---------- meehelpen: grote vrijwilligersfoto's ---------- */
.page-hero--tall {
   min-height: 540px;
}

.photo-lead,
.photo-duo {
   margin: clamp(48px, 6vw, 88px) 0;
}

.photo-duo {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(16px, 2.5vw, 32px);
}

.photo-lead figure,
.photo-duo figure {
   margin: 0;
}

.photo-lead .lb-open,
.photo-duo .lb-open {
   height: auto;
   /* in een grid-cel zou 100% anders de hele rij pakken en de caption eruit duwen */
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--stone);
   aspect-ratio: 16/10;
}

.photo-duo .lb-open {
   aspect-ratio: 3/4;
}

.photo-lead img,
.photo-duo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.photo-lead figcaption,
.photo-duo figcaption {
   margin-top: 12px;
   font-size: .95rem;
   color: var(--text-2);
}

/* onder de foto's mag de tekst weer gewoon aansluiten */
.photo-lead+.content,
.photo-duo+.content {
   margin-top: 0;
}

.photo-lead+.content h2:first-child,
.photo-duo+.content h2:first-child {
   margin-top: 0;
}

@media (max-width: 760px) {
   .page-hero--tall {
      min-height: 400px;
   }

   .photo-lead .lb-open {
      aspect-ratio: 4/3;
   }

   .photo-duo {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .photo-duo .lb-open {
      aspect-ratio: 4/5;
   }

   .photo-lead .lb-open,
   .photo-duo .lb-open {
      border-radius: 14px;
   }
}