/* ==========================================================================
   Sint & Piet op Texel — main.css
   ========================================================================== */

/* Fonts (self-hosted) ---------------------------------------------------- */
@font-face {
  font-family: "Mate";
  src: url("../fonts/mate-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mate";
  src: url("../fonts/mate-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quintessential";
  src: url("../fonts/quintessential.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tokens ----------------------------------------------------------------- */
:root {
  --red: #df1b31;
  --red-dark: #b8001c;
  --red-deep: #7d0a1c;
  --red-glass: rgb(223 27 49 / 0.92);
  --gold: #f7c51e;
  --gold-light: #ffe36b;
  --cream: #fff8ef;
  --night: #1a0d12;
  --night-2: #2a1219;
  --ink: #2b1b1d;
  --white: #fff;

  --font-body: "Mate", Georgia, "Times New Roman", serif;
  --font-head: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-script: "Quintessential", "Mate", Georgia, serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55);
  --shadow-soft: 0 10px 30px -12px rgb(60 0 10 / 0.35);
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 76px;

  /* Feestelijke patronen */
  --pattern-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.09'%3E%3Cpath d='M20 8l2.4 5.6L28 16l-5.6 2.4L20 24l-2.4-5.6L12 16l5.6-2.4z'/%3E%3Cpath d='M86 60l1.6 3.8 3.8 1.6-3.8 1.6L86 70.8l-1.6-3.8-3.8-1.6 3.8-1.6z'/%3E%3Ccircle cx='60' cy='22' r='2'/%3E%3Ccircle cx='104' cy='100' r='2.5'/%3E%3Ccircle cx='30' cy='88' r='1.6'/%3E%3Cpath d='M48 98l1.2 2.8 2.8 1.2-2.8 1.2L48 106l-1.2-2.8-2.8-1.2 2.8-1.2z'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-gold-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23f7c51e' fill-opacity='.16'%3E%3Cpath d='M24 10l2.8 6.4L33 19l-6.2 2.6L24 28l-2.8-6.4L15 19l6.2-2.6z'/%3E%3Cpath d='M100 70l1.8 4.2 4.2 1.8-4.2 1.8-1.8 4.2-1.8-4.2-4.2-1.8 4.2-1.8z'/%3E%3Ccircle cx='70' cy='26' r='2'/%3E%3Ccircle cx='122' cy='118' r='2.6'/%3E%3Ccircle cx='34' cy='104' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30' viewBox='0 0 96 30'%3E%3Cpath d='M0 2 Q48 10 96 2' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5'/%3E%3Cpath d='M4 4 L20 4.8 L12 24z' fill='%23f7c51e'/%3E%3Cpath d='M28 6 L44 6.8 L36 27z' fill='%23ffffff'/%3E%3Cpath d='M52 6.8 L68 6 L60 27z' fill='%237d0a1c'/%3E%3Cpath d='M76 4.8 L92 4 L84 24z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: calc(760px + 2 * var(--gutter)); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose ul { padding-left: 1.2em; }
/* Telefoonnummers niet afbreken op het streepje */
a[href^="tel:"] { white-space: nowrap; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75em 1.35em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  transition: transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn--lg { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); padding: 0.85em 1.6em; }
.btn--gold {
  background: var(--gold);
  color: var(--red-deep);
  box-shadow: 0 6px 0 #c99a00, 0 14px 24px -10px rgb(0 0 0 / 0.5);
}
.btn--gold:hover {
  background: var(--gold-light);
  box-shadow: 0 8px 0 #c99a00, 0 18px 28px -12px rgb(0 0 0 / 0.5);
}
.btn--red {
  background: var(--red);
  color: var(--white);
}
.btn--red:hover { background: var(--red-dark); }
.btn--ghost {
  border-color: rgb(255 255 255 / 0.7);
  color: var(--white);
}
.btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -14px rgb(0 0 0 / 0.35); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 16px;
}
.site-logo {
  position: relative;
  align-self: flex-start;
  display: block;
  width: 110px;
  margin-bottom: -34px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: width 0.25s ease, margin 0.25s ease;
  z-index: 2;
}
.site-logo img { width: 100%; }
.site-header.is-scrolled .site-logo { width: 84px; margin-bottom: -8px; }

.site-nav ul {
  display: flex;
  gap: clamp(4px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: block;
  padding: 10px 6px;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.site-nav a:hover,
.site-nav a[aria-current] { color: var(--red); }
.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 20px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  :root { --header-h: 66px; }
  .site-logo { width: 84px; margin-bottom: -18px; }
  .site-header.is-scrolled .site-logo { width: 70px; margin-bottom: -4px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--red);
    background-image: var(--pattern-stars);
    box-shadow: 0 20px 30px -20px rgb(0 0 0 / 0.5);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.3s ease, visibility 0s linear 0.3s;
  }
  .site-nav.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.3s ease;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 24px var(--gutter) 28px;
  }
  .site-nav a {
    padding: 12px 0;
    color: var(--white);
    font-size: 1.35rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
  }
  .site-nav a::after { left: 0; right: auto; width: 40px; bottom: 6px; }
  .site-nav a:hover,
  .site-nav a[aria-current] { color: var(--gold-light); }
}

/* Sections --------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
}
.section--night {
  color: var(--white);
  background-color: var(--night);
  background-image: var(--pattern-gold-stars), radial-gradient(ellipse at top, var(--night-2), var(--night) 70%);
}
.section--red {
  color: var(--white);
  background-color: var(--red);
  background-image: var(--pattern-stars), linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
}
.section--cream { background: var(--cream); }
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
}
.section-head h2::before,
.section-head h2::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  flex: none;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.section-head p { opacity: 0.85; }

.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 40px);
}
.card--red {
  color: var(--white);
  background: var(--red-glass);
  background-image: var(--pattern-stars);
}
.card--red a { color: var(--white); }
.card--red a:hover { color: var(--gold-light); }

/* Bunting (vlaggetjeslijn) */
.bunting {
  height: 30px;
  background: var(--bunting) repeat-x center top / 96px 30px;
}

/* Gesplitste kop (home + subpagina's) ---------------------------------------------------- */
/* Links de fotoslider, rechts het rode intro-blok (logo, tekst, knop). De foto
   beslaat ±55% van de breedte, zodat de beschikbare foto's (±2000px) ook op
   hoge-resolutieschermen scherp blijven. */
.split-hero {
  --curve-w: clamp(28px, 3.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  min-height: clamp(500px, 46vw, 740px);
  color: var(--white);
  background-color: var(--red);
  background-image: var(--pattern-stars);
}
.split-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(48px, 6vw, 80px);
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 - 70px));
}
.split-hero__logo {
  width: min(560px, 100%);
  margin-bottom: clamp(28px, 3vw, 48px);
}
.split-hero__logo img {
  width: 100%;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.25));
}
.split-hero__intro p {
  margin-bottom: 0.9em;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  max-width: 32ch;
}
.split-hero__media {
  position: relative;
  order: -1;
  min-height: 100%;
}
/* Zachte, gebogen rand tussen het rode vlak en de foto */
.split-hero__media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  z-index: 4;
  width: var(--curve-w);
  background-color: var(--red);
  background-image: var(--pattern-stars);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 800' preserveAspectRatio='none'%3E%3Cpath d='M60 0H26c14 120 26 230 12 360s-38 250-22 440h44z'/%3E%3C/svg%3E") right center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 800' preserveAspectRatio='none'%3E%3Cpath d='M60 0H26c14 120 26 230 12 360s-38 250-22 440h44z'/%3E%3C/svg%3E") right center / 100% 100% no-repeat;
  pointer-events: none;
}

.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--night);
}
.hero-slider__track { position: absolute; inset: 0; }
.hero-slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slider__slide.is-active { opacity: 1; }
.hero-slider__slide picture,
.hero-slider__slide img {
  width: 100%;
  height: 100%;
}
.hero-slider__slide img {
  object-fit: cover;
  object-position: center 40%;
}
.hero-slider::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent);
  pointer-events: none;
}
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.85);
  color: var(--red);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-slider__arrow:hover { background: var(--gold); transform: scale(1.06); }
.hero-slider__arrow svg { width: 28px; height: 28px; fill: currentColor; }
.hero-slider__arrow--prev { left: 16px; }
.hero-slider__arrow--next { right: calc(var(--curve-w) + 12px); }
.hero-slider__dots {
  position: absolute;
  left: 0;
  right: var(--curve-w);
  bottom: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero-slider__dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.25s ease;
}
.hero-slider__dots button[aria-current="true"] {
  width: 30px;
  border-radius: 6px;
  background: var(--gold);
  border-color: var(--gold);
}

/* Mobiel/tablet: foto boven, rood blok eronder met een golvende rand */
@media (max-width: 860px) {
  .split-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .split-hero__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .split-hero__media::before { display: none; }
  .split-hero__intro {
    position: relative;
    /* onderin extra ruimte voor de golf naar de fotogalerij */
    padding: 8px var(--gutter) calc(44px + clamp(26px, 4vw, 60px));
  }
  .split-hero__intro::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    z-index: 4;
    height: clamp(22px, 5vw, 40px);
    background-color: var(--red);
    background-image: var(--pattern-stars);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    pointer-events: none;
  }
  .split-hero__logo { width: min(360px, 90%); }
  .hero-slider__arrow--next { right: 16px; }
  .hero-slider__dots { right: 0; bottom: calc(clamp(22px, 5vw, 40px) + 10px); }
}
@media (max-width: 600px) {
  .hero-slider__arrow { display: none; }
}

/* Golf van de kop (home en subpagina's) naar de donkere sectie eronder */
.split-hero + .section--night,
.page-hero + .section--night {
  background-image: var(--pattern-gold-stars);
}
.split-hero + .section--night::before,
.page-hero + .section--night::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  z-index: 6;
  height: clamp(26px, 4vw, 60px);
  background-color: var(--night);
  background-image: var(--pattern-gold-stars);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.split-hero .hero-slider__dots { bottom: calc(clamp(26px, 4vw, 60px) + 12px); }

/* Zachte golf-overgang: de rode Facebook-sectie loopt met een golvende rand
   een stukje over de fotogalerij heen. */
.feed {
  --wave-h: clamp(26px, 4vw, 60px);
}
.feed::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--wave-h);
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Subpagina: header ------------------------------------------------------ */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* zelfde hoogte als de kop van de homepage (.split-hero) */
  min-height: clamp(500px, 46vw, 740px);
  padding-block: clamp(44px, 5vw, 64px);
  background: var(--night);
  overflow: hidden;
}
.page-hero picture {
  position: absolute;
  inset: 0;
}
.page-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.35) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.page-hero__card {
  width: min(660px, 100%);
}
.page-hero__card h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
}
/* Over ons: Sinterklaas staat midden in de groepsfoto en viel achter het rode
   vak. Foto naar rechts schuiven en het vak tegen de rechterkant van het
   venster zetten, zodat hij links van het vak in beeld komt. */
@media (min-width: 721px) {
  .tpl-overons .page-hero__bg { object-position: 100% 55%; }
  .tpl-overons .page-hero__inner {
    max-width: none;
    padding-right: var(--gutter);
  }
  /* Breder naar rechts (linkerrand blijft vrij van Sinterklaas), zodat er
     minder leeg gras rechts van het vak overblijft */
  .tpl-overons .page-hero__card { width: min(calc(600px + clamp(30px, 6vw, 100px)), 100%); }
}
/* Foto zo ver naar rechts schuiven als de breedte toelaat (minder leeg gras
   rechts), zonder dat het vak over Sinterklaas valt. Hoe breder het scherm,
   hoe minder de foto uitsteekt en hoe verder hij kan schuiven. */
@media (min-width: 1440px) { .tpl-overons .page-hero__bg { object-position: 90% 55%; } }
/* Vanaf ±1610px is de kop altijd 740px hoog (foto ±2030px breed) en het vak
   700px: de linkerrand van de foto = schermbreedte - 1933px houdt Sinterklaas
   steeds ±40px links van het vak, en schuift de foto vloeiend mee naar rechts. */
@media (min-width: 1610px) {
  .tpl-overons .page-hero__bg { object-position: min(0px, calc(100vw - 1933px)) 55%; }
}
/* Kleinere laptops: smaller vak, anders schuift het over Sinterklaas */
@media (min-width: 721px) and (max-width: 1199px) {
  .tpl-overons .page-hero__inner { padding-right: calc(var(--gutter) + 60px); }
  .tpl-overons .page-hero__card { width: min(600px, 100%); }
}
.tpl-overons .page-hero::after { display: none; }

/* Sinterklaasintocht: veel tekst; een breder vak houdt de kop even hoog als
   op de andere pagina's */
@media (min-width: 721px) {
  .tpl-intocht .page-hero__card { width: min(780px, 100%); }
}
/* Sinterklaas staat links in de foto (±20-42%). Hoe smaller het scherm, hoe
   meer de foto uitsteekt; de uitsnede schuift mee zodat zijn gezicht in beeld
   blijft en het rode vak hem niet bedekt. */
@media (min-width: 721px) {
  .tpl-intocht .page-hero__bg { object-position: 44% 30%; }
}
@media (min-width: 721px) and (max-width: 1199px) {
  .tpl-intocht .page-hero__card { width: min(560px, 100%); }
}
@media (min-width: 1200px) { .tpl-intocht .page-hero__bg { object-position: 62% 30%; } }
@media (min-width: 1400px) { .tpl-intocht .page-hero__bg { object-position: 75% 30%; } }
@media (min-width: 1600px) { .tpl-intocht .page-hero__bg { object-position: 90% 30%; } }

/* Soorten bezoeken: het gezicht van Sinterklaas zit boven in de foto, rechts
   van het midden. Het rode vak rechts houden maar onderin de kop zetten, zodat
   het onder Sinterklaas staat en zijn gezicht vrij blijft. */
@media (min-width: 721px) {
  .tpl-bezoeken .page-hero { align-items: flex-end; }
}
/* Rood vak links (Panel-keuze): verloop gaat mee naar links, achter het vak */
@media (min-width: 721px) {
  .page-hero--links .page-hero__inner { justify-content: flex-start; }
  .page-hero--links::after {
    background: linear-gradient(270deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.35) 100%);
  }
}
@media (min-width: 721px) and (max-width: 1199px) {
  .page-hero--links .page-hero__card { width: min(600px, 100%); }
}
/* Kopindelingen (Panel-keuze). De foto staat in zijn eigen verhouding (--ratio)
   en wordt dus niet uitvergroot/bijgesneden. Alleen desktop; op mobiel blijft
   de gestapelde mobiele kop. */
@media (min-width: 721px) {
  .page-hero--gestapeld,
  .page-hero--overlap,
  .page-hero--ingelijst {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .page-hero--gestapeld::after,
  .page-hero--overlap::after,
  .page-hero--ingelijst::after { display: none; }
  .page-hero--gestapeld picture,
  .page-hero--overlap picture,
  .page-hero--ingelijst picture {
    position: relative;
    display: block;
    aspect-ratio: var(--ratio, 2.74);
  }
  /* foto staat in eigen verhouding: geen verschuiving (ook niet de Over ons-
     uitsnede) */
  .page-hero--gestapeld .page-hero__bg,
  .page-hero--overlap .page-hero__bg,
  .page-hero--ingelijst .page-hero__bg { object-position: 50% 50%; }

  /* Hele foto bovenaan, tekst in het rode vlak eronder (met golf) */
  .page-hero--gestapeld {
    background-color: var(--red);
    background-image: var(--pattern-stars);
  }
  .page-hero--gestapeld .page-hero__inner {
    justify-content: center;
    padding-block: clamp(24px, 3vw, 40px) calc(clamp(40px, 5vw, 64px) + clamp(26px, 4vw, 60px));
  }
  .page-hero--gestapeld .page-hero__inner::before {
    content: "";
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: calc(100% - 1px);
    height: clamp(26px, 4vw, 60px);
    background-color: var(--red);
    background-image: var(--pattern-stars);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C180 14 360 4 560 14s420 44 620 36c110-4 190-18 260-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  }
  .page-hero--gestapeld .page-hero__card,
  .page-hero--ingelijst .page-hero__card {
    width: min(860px, 100%);
    padding: 0;
    background: none;
    box-shadow: none;
  }

  /* Hele foto, rood vak half over de onderrand; daaronder het donkere vlak */
  .page-hero--overlap {
    padding-bottom: clamp(48px, 6vw, 80px);
    background-color: var(--night);
    background-image: var(--pattern-gold-stars);
  }
  .page-hero--overlap .page-hero__inner {
    margin-top: clamp(-180px, -10vw, -100px);
  }
  .page-hero--overlap + .section--night::before { display: none; }
  .page-hero--overlap + .section--night { padding-top: 0; }

  /* Tekst bovenaan, foto ingelijst (paginabreedte) eronder */
  .page-hero--ingelijst {
    display: flex;
    flex-direction: column;
    padding-block: clamp(40px, 5vw, 64px) calc(clamp(40px, 5vw, 64px) + clamp(26px, 4vw, 60px));
    background-color: var(--red);
    background-image: var(--pattern-stars), linear-gradient(180deg, var(--red-dark), var(--red) 60%);
  }
  .page-hero--ingelijst .page-hero__inner {
    order: -1;
    justify-content: center;
    margin-bottom: clamp(24px, 3vw, 40px);
  }
  /* Foto ingelijst links (60%), tekst rechts (40%) binnen de paginabreedte.
     Een brede foto wordt 3:2 bijgesneden (rond het focuspunt), anders wordt
     hij te laag naast de tekst. */
  .page-hero--naast {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    min-height: 0;
    padding-block: clamp(40px, 5vw, 64px) calc(clamp(40px, 5vw, 64px) + clamp(26px, 4vw, 60px));
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
    background-color: var(--red);
    background-image: var(--pattern-stars), linear-gradient(180deg, var(--red-dark), var(--red) 60%);
  }
  .page-hero--naast::after { display: none; }
  .page-hero--naast picture {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border: 6px solid var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .page-hero--naast .page-hero__bg { object-position: 53% 50%; }
  .page-hero--naast .page-hero__inner {
    max-width: none;
    padding: 0;
  }
  .page-hero--naast .page-hero__card {
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  /* tablet staand: foto en tekst onder elkaar, anders wordt de tekstkolom te smal */
  @media (max-width: 999px) {
    .page-hero--naast { grid-template-columns: 1fr; }
    .page-hero--naast picture { width: min(640px, 100%); }
  }
  /* gele accenten: gouden lijst om de foto en een gouden streep onder de titel */
  .page-hero--naast picture { border-color: var(--gold); }
  .page-hero--naast h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 0.35em;
    border-radius: 3px;
    background: var(--gold);
  }

  /* variant: ingelijste foto bovenaan, tekst eronder */
  .page-hero--foto-boven .page-hero__inner {
    order: 0;
    margin-bottom: 0;
    margin-top: clamp(28px, 3.5vw, 48px);
  }
  .page-hero--ingelijst picture {
    width: min(var(--container), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    border: 6px solid var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
}

/* Ruimte onderin voor de golf naar de sectie eronder */
.page-hero { padding-bottom: calc(clamp(44px, 5vw, 64px) + clamp(26px, 4vw, 60px)); }
@media (max-width: 720px) {
  .page-hero { display: block; min-height: 0; padding: 0; background: var(--red); }
  .page-hero picture { position: relative; aspect-ratio: 16 / 9; }
  .page-hero::after { display: none; }
  .page-hero__inner { padding: 0 var(--gutter) 0; margin-top: -40px; padding-bottom: calc(32px + clamp(26px, 4vw, 60px)); }
  .page-hero__card { background: var(--red); }
}

/* Over ons: intocht-blok ------------------------------------------------- */
.intocht-block__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.intocht-block__img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.details-list {
  margin: 0;
  font-size: 1.2rem;
}
.details-list > div {
  display: grid;
  grid-template-columns: 9ch 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgb(255 255 255 / 0.25);
}
.details-list dt {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.details-list dd { margin: 0; }

/* Soorten bezoeken ------------------------------------------------------- */
.visits__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.visits__list { display: grid; gap: 20px; }
.visit-card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  padding-left: clamp(28px, 3.4vw, 44px);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(247 197 30 / 0.35);
}
.visit-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--gold);
}
.visit-card h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 0.25em; }
.visit-card__price {
  display: inline-block;
  margin-bottom: 0.9em;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--red);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.visits__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.visits__img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
  border: 8px solid var(--white);
}
@media (max-width: 860px) {
  .visits__inner { grid-template-columns: 1fr; }
  .visits__img img { transform: none; }
}

/* Sinterklaasintocht: video --------------------------------------------- */
.video-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-facade picture,
.video-facade__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.25);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.video-facade:hover::after { opacity: 0.4; }
.video-facade__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.6);
}
.video-facade__play svg {
  width: 84px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.4));
  transition: transform 0.2s ease;
}
.video-facade__play:hover svg { transform: scale(1.08); }
.video-facade__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.85);
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
}
.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-block__body p { font-size: 1.2rem; }
@media (max-width: 860px) {
  .video-block__inner { grid-template-columns: 1fr; }
}

/* Fotogalerij ------------------------------------------------------------ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__grid a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--night-2);
  box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.8);
}
.gallery__grid picture,
.gallery__grid img {
  width: 100%;
  height: 100%;
}
.gallery__grid img {
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.gallery__grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--gold);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery__grid a:hover img,
.gallery__grid a:focus-visible img { transform: scale(1.06); filter: saturate(1.1); }
.gallery__grid a:hover::after,
.gallery__grid a:focus-visible::after { opacity: 1; }
@media (max-width: 1024px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lightbox */
/* Op het venster vastzetten (niet 100vw: dat telt de scrollbalk mee, waardoor
   de knoppen rechts eronder vallen) en de pagina niet laten scrollen. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(15 5 8 / 0.94);
  color: var(--white);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox figure {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 0;
  padding: 64px 72px 32px;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lightbox figcaption { text-align: center; opacity: 0.9; }
.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lightbox button:hover { background: var(--red); }
.lightbox button svg { width: 26px; height: 26px; fill: currentColor; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 20px; top: 50%; margin-top: -24px; }
@media (max-width: 600px) {
  .lightbox figure { padding: 64px 12px 80px; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 16px; margin-top: 0; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}

/* Facebook-feed ---------------------------------------------------------- */
/* melding in plaats van een lege kaart zolang de feed (nog) leeg is */
.feed__placeholder {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 44px) 16px;
  text-align: center;
}
.feed__placeholder p { max-width: 46ch; margin: 0; }
.feed__card [data-feed]:not(:empty) + .feed__placeholder { display: none; }
/* de cookiebanner zet hier ook een eigen blokkademelding neer (met een
   verkeerd label "Instagram-feed"); onze eigen melding hierboven volstaat */
.feed__card .wj-cc-blokkade-host { display: none !important; }
.feed__card {
  max-width: 940px;
  min-height: 200px;
  margin-inline: auto;
  padding: clamp(10px, 2vw, 20px);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* Footer ----------------------------------------------------------------- */
.site-footer {
  position: relative;
  color: var(--white);
  background-color: var(--red);
  background-image: var(--pattern-stars);
}
.section--red + .site-footer { background-image: var(--pattern-stars), linear-gradient(180deg, var(--red-dark), var(--red) 40%); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding-block: clamp(40px, 6vw, 72px);
}
.site-footer__title {
  margin: 0 0 0.35em;
  font-family: var(--font-script);
  font-size: clamp(3rem, 2rem + 4vw, 5.2rem);
  line-height: 1.05;
  text-shadow: 0 4px 0 var(--red-dark);
}
.site-footer__sub {
  font-size: 1.15rem;
  opacity: 0.9;
}
.site-footer__contact,
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}
.site-footer__contact svg {
  width: 20px;
  height: 20px;
  fill: var(--gold);
}
.site-footer__contact a:hover,
.site-footer__nav a:hover { color: var(--gold-light); }
.site-footer__nav a {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  text-decoration: none;
  opacity: 0.9;
}
.site-footer__img img {
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--gold);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.18), var(--shadow);
}
/* Footer credits row */
.site-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 16px max(var(--gutter), calc((100% - var(--container)) / 2));
  font-size: 0.95rem;
  background: rgb(0 0 0 / 0.14);
}
.site-footer__credits p { margin: 0; }
.site-footer__made {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: rgb(255 255 255 / 0.85);
}

/* Webjongens credit with typewriter */
.credit {
  --credit-heart: #ecff00;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  white-space: nowrap;
}
.site-footer .credit__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-family: var(--font-head);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.credit__link strong { font-weight: 700; }
.credit__link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.credit__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.credit__heart { width: 1.1rem; height: 1.1rem; fill: var(--credit-heart); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.credit__link:hover .credit__heart { transform: scale(1.2); }
.credit__typed { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 6.5em; color: rgb(255 255 255 / 0.72); }
.credit__cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: currentColor; animation: credit-blink 1s step-end infinite; }
@keyframes credit-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .credit__cursor { animation: none; } .credit__heart { transition: none; } }
@media (max-width: 720px) {
  .site-footer__credits { flex-direction: column; justify-content: center; text-align: center; padding-bottom: 76px; }
  .site-footer__made { justify-content: center; }
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .site-footer__img { order: -1; }
  .site-footer__contact,
  .site-footer__nav { justify-content: center; }
}

/* Naar boven */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--red-deep);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold-light); }
.to-top svg { width: 26px; height: 26px; fill: currentColor; }

/* Tekstpagina (o.a. privacyverklaring) */
.text-page h1 { margin-bottom: 0.6em; }
.text-page .prose h2 { margin-top: 1.6em; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }
.text-page .prose h3 { margin-top: 1.3em; }
.text-page .prose a { color: var(--red-dark); }
.text-page__date { margin-top: 2em; font-size: 0.9rem; opacity: 0.75; }
.site-footer__nav--small { margin-top: 6px; }
.site-footer__nav--small a { font-size: 0.85rem; text-transform: none; letter-spacing: 0; }

/* Foutpagina */
.error-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.error-page__img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 8px solid var(--white);
  transform: rotate(-1.5deg);
}
.error-page .btn { margin-top: 12px; }
@media (max-width: 720px) {
  .error-page__inner { grid-template-columns: 1fr; text-align: center; }
  .error-page__img img { transform: none; }
}

/* Subtiele inkomst-animatie */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* Twee donkere secties direct onder elkaar: naadloos */
.section--night + .section--night {
  padding-top: 0;
  background-image: var(--pattern-gold-stars);
}

/* De feed heeft een verticale gradiënt: de golf in de effen bovenkleur */
.feed::before {
  background-color: var(--red);
  background-image: var(--pattern-stars);
}