/* ==========================================================
   Wouter & Elena · versie D
   Stijl: ivoor, olijf en salie · dunne kapitalen · inkttekeningen
   ========================================================== */

:root {
  /* Kleuren */
  --ivoor: #fbf8f1;
  --papier: #f3eee3;
  --inkt: #2f2e29;
  --tekst: #55524a;
  --grijs: #7d796e;
  --lijn: #ddd6c6;
  --olijf: #4a5237;
  --olijf-diep: #3b412c;
  --salie: #a8ad8b;
  --salie-licht: #dcdfcd;
  --film-oranje: #d98b3a;

  /* Letters */
  --f-display: "Italiana", "Cormorant Garamond", serif;
  --f-script: "Mrs Saint Delafield", cursive;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Jost", system-ui, sans-serif;

  --binnen: 1120px;
  --balk-hoogte: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--balk-hoogte);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivoor);
  color: var(--tekst);
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1rem; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--olijf);
  color: var(--ivoor);
}
.skip:focus { top: 1rem; }

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

/* ---------- Typografie ---------- */
.kop {
  margin: 0 0 1.4rem;
  color: var(--olijf);
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.02;
  text-transform: uppercase;
}

.klein-kap {
  margin: 0 0 1.2rem;
  color: var(--olijf);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  line-height: 1.8;
  text-transform: uppercase;
}

.kap-titel {
  margin: 0 0 0.6rem;
  color: var(--inkt);
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.script-kop {
  margin: 0 0 1.2rem;
  color: var(--olijf);
  font-family: var(--f-script);
  font-size: clamp(3.2rem, 9vw, 5.6rem);
  font-weight: 400;
  line-height: 1.05;
}
.script-kop-klein { font-size: clamp(2.8rem, 7vw, 4rem); text-align: center; }

.lead { font-size: 1.05rem; }

.handtekening {
  margin: 0;
  color: var(--inkt);
  font-family: var(--f-script);
  font-size: 2.6rem;
  line-height: 1.2;
}

.midden { text-align: center; }

.later {
  display: inline-block;
  padding: 0 0.15em;
  border-bottom: 1px dashed currentColor;
  color: var(--grijs);
  font-family: var(--f-serif);
  font-size: 1.02em;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.3;
  opacity: 0.85;
}

/* ---------- Opbouw ---------- */
.sectie { position: relative; padding: clamp(5.5rem, 11vw, 9rem) 1.25rem; }
.binnen { width: min(100%, var(--binnen)); margin: 0 auto; }
.smal { width: min(100%, 660px); }

/* ---------- Knoppen & links ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.8rem 2rem;
  border: 1px solid var(--olijf);
  border-radius: 1px;
  background: var(--olijf);
  color: var(--ivoor);
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.knop:hover { background: transparent; color: var(--olijf); }

.knop-licht { border-color: var(--ivoor); background: var(--ivoor); color: var(--olijf); }
.knop-licht:hover { background: transparent; color: var(--ivoor); }

.knop-klein { min-height: 2.4rem; padding: 0.4rem 1.2rem; font-size: 0.66rem; }

.tekst-link {
  display: inline-block;
  padding: 0 0 0.2rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--olijf);
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-decoration: none;
  text-transform: uppercase;
}
.tekst-link:hover { color: var(--inkt); }
.tekst-link-licht { color: var(--ivoor); }

/* ---------- Monogram ---------- */
.monogram {
  display: inline-grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}
.monogram-letters {
  font-family: var(--f-script);
  font-size: 2.1rem;
  line-height: 1;
  white-space: nowrap;
}
.monogram-letters i {
  margin: 0 0.05em;
  font-size: 0.7em;
  font-style: normal;
}

/* ---------- Menubalk ---------- */
.balk {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--balk-hoogte);
  padding: 0 clamp(1rem, 3vw, 2.4rem);
  color: var(--ivoor);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s;
}
.balk.gescrold {
  background: rgba(251, 248, 241, 0.94);
  color: var(--olijf);
  box-shadow: 0 1px 0 var(--lijn);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.balk .monogram { justify-self: start; padding-top: 0.3rem; }

.balk-links { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.balk-links a {
  position: relative;
  padding: 0.4rem 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-decoration: none;
  text-transform: uppercase;
}
.balk-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.28em;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.balk-links a:hover::after,
.balk-links a.actief::after { transform: scaleX(1); }

.balk-rechts { display: flex; justify-self: end; align-items: center; gap: 1.2rem; }
.balk .knop-klein { border-color: currentColor; background: transparent; color: inherit; }
.balk .knop-klein:hover { background: currentColor; }
.balk .knop-klein:hover { color: var(--olijf); }
.balk.gescrold .knop-klein:hover { color: var(--ivoor); background: var(--olijf); }

.talen { display: flex; gap: 0.1rem; }
.talen button {
  padding: 0.35rem 0.4rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.talen button:hover,
.talen button[aria-pressed="true"] { opacity: 1; }
.talen button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 0.45em; }

.menu-knop {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0.55rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-knop span, .menu-sluit span { display: block; width: 100%; height: 100%; }

/* Menupaneel (mobiel) */
.menu-paneel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2.5rem;
  padding: 5rem 1.5rem 3rem;
  background: var(--ivoor);
  color: var(--olijf);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s;
}
.menu-paneel[hidden] { display: none; }
.menu-paneel.open { opacity: 1; }
.menu-paneel nav { display: grid; gap: 0.9rem; text-align: center; }
.menu-paneel nav a {
  font-family: var(--f-display);
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.menu-sluit {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.55rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.talen-groot button { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.menu-tak { width: 150px; color: var(--salie); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--ivoor);
  text-align: center;
}
.hero-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 18, 16, 0.42) 0%, rgba(18, 18, 16, 0.22) 38%, rgba(18, 18, 16, 0.5) 100%);
}
.hero-inhoud {
  display: grid;
  justify-items: center;
  padding: 0 1rem;
}
.hero-kop {
  margin: 0 0 2.2rem;
  font-family: var(--f-serif);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.45em;
  text-transform: lowercase;
}
.hero-namen {
  display: grid;
  justify-items: center;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(4.6rem, 12.5vw, 10.5rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}
.hero-en {
  position: relative;
  z-index: 1;
  margin: -0.28em 0 -0.34em;
  font-family: var(--f-script);
  font-size: 0.95em;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}
.hero-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.1rem;
  margin: 2.6rem 0 0;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.hero-onder .punt { letter-spacing: 0; }
.hero-aftellen {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.2em;
  opacity: 0.85;
}

/* Zwart-wit foto's */
.zw { filter: grayscale(1) contrast(1.06) brightness(0.98); }

/* ---------- Golvende fotolijst ---------- */
.golf-kader {
  position: relative;
  margin: 24px;
}
.golf-kader img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.golf-kader svg.golf {
  position: absolute;
  top: -24px;
  left: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  overflow: visible;
  color: var(--olijf);
  pointer-events: none;
}

/* ---------- Welkom ---------- */
.welkom-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}
.welkom-brief { max-width: 470px; justify-self: end; font-size: 0.98rem; }
.welkom-brief .kop { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.welkom-groet { margin: 2rem 0 0.2rem; }
.welkom-foto { max-width: 400px; }

/* ---------- Ons verhaal ---------- */
.verhaal { background: var(--papier); }
.verhaal .lead { margin-bottom: 0; }

.reis {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  width: min(100%, 1240px);
  margin: 4.5rem auto 0;
  padding: 0 1.25rem;
}
.reis::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 6%;
  right: 6%;
  border-top: 1.5px dashed rgba(74, 82, 55, 0.4);
}
.polaroid {
  position: relative;
  flex: 0 1 210px;
  margin: 0;
  padding: 0.7rem 0.7rem 1.1rem;
  background: #fffdf8;
  box-shadow: 0 1px 2px rgba(47, 46, 41, 0.08), 0 14px 30px rgba(47, 46, 41, 0.1);
  text-align: center;
  transform: rotate(var(--draai, 0deg)) translateY(var(--hoogte, 0));
}
.polaroid:nth-child(1) { --draai: -3deg; --hoogte: 0.6rem; }
.polaroid:nth-child(2) { --draai: 2deg; --hoogte: -0.8rem; }
.polaroid:nth-child(3) { --draai: -1.5deg; --hoogte: 0.9rem; }
.polaroid:nth-child(4) { --draai: 2.5deg; --hoogte: -0.5rem; }
.polaroid:nth-child(5) { --draai: -2deg; --hoogte: 0.4rem; }
.polaroid-foto { overflow: hidden; }
.polaroid-foto img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; }
.polaroid figcaption { display: grid; gap: 0.1rem; padding-top: 0.7rem; }
.polaroid-plaats { color: var(--inkt); font-family: var(--f-script); font-size: 2.1rem; line-height: 1.1; }
.polaroid-jaar { color: var(--olijf); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.3em; }
.polaroid-zin { color: var(--grijs); font-family: var(--f-serif); font-size: 1rem; font-style: italic; line-height: 1.3; }
.polaroid:last-child .polaroid-zin { color: var(--olijf); font-weight: 500; }

/* ---------- Momenten (collage) ---------- */
.momenten {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 1.25rem 5.5rem;
  background: var(--salie);
  color: var(--ivoor);
  text-align: center;
}
.momenten > .klein-kap { color: var(--ivoor); margin: 1.2rem 0 2.5rem; }
.monogram-ovaal {
  position: relative;
  width: 64px;
  height: 84px;
  margin: 0 auto;
  color: var(--ivoor);
}
.monogram-ovaal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.monogram-ovaal .monogram-letters { font-size: 1.7rem; }

.collage {
  position: relative;
  width: min(100%, 1200px);
  aspect-ratio: 1200 / 700;
  margin: 0 auto;
}
.stukje {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  margin: 0;
  box-shadow: 0 2px 3px rgba(30, 32, 24, 0.14), 0 18px 34px rgba(30, 32, 24, 0.18);
  transform: rotate(var(--r));
  transition: transform 0.4s ease;
}
.stukje:hover { transform: rotate(var(--r)) translateY(-6px); }
.stukje img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; }

.kader-polaroid { padding: 7px 7px 28px; background: #fbfaf6; }
.kader-rand { padding: 7px; background: #f6f3ea; }
.kader-film { padding: 15px 6px 22px; background: #161512; }
.kader-film::before,
.kader-film::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(240, 236, 226, 0.55) 0 5px, transparent 5px 12px);
}
.kader-film::before { top: 5px; }
.kader-film::after { bottom: 5px; }
.film-tekst {
  position: absolute;
  left: 10px;
  bottom: 9px;
  color: var(--film-oranje);
  font-size: 0.42rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.stukje-1 { --x: 2%; --y: 14%; --w: 16%; --r: -6deg; }
.stukje-2 { --x: 15%; --y: 52%; --w: 19%; --r: 3deg; --ar: 4 / 3; }
.stukje-3 { --x: 22%; --y: 2%; --w: 13.5%; --r: -2deg; --ar: 3 / 4; }
.stukje-4 { --x: 36%; --y: 55%; --w: 20%; --r: -3deg; --ar: 4 / 3; }
.stukje-5 { --x: 37.5%; --y: 8%; --w: 14%; --r: 4deg; }
.stukje-6 { --x: 52%; --y: 30%; --w: 13%; --r: -4deg; --ar: 3 / 4; }
.stukje-7 { --x: 60%; --y: 0%; --w: 12.5%; --r: 5deg; --ar: 3 / 4; }
.stukje-8 { --x: 66%; --y: 50%; --w: 14%; --r: 2deg; }
.stukje-9 { --x: 78%; --y: 6%; --w: 14%; --r: -5deg; }
.stukje-10 { --x: 84%; --y: 55%; --w: 13%; --r: 6deg; --ar: 3 / 4; }

.tak { position: absolute; width: 210px; color: rgba(251, 248, 241, 0.7); pointer-events: none; }
.tak-links { top: 1.5rem; left: -1.5rem; transform: rotate(-12deg); }
.tak-rechts { right: -1.5rem; bottom: 1.5rem; transform: rotate(168deg); }

/* ---------- Programma ---------- */
.programma .klein-kap { margin-bottom: 0; }
.route {
  position: relative;
  width: min(100%, 780px);
  margin: 4rem auto 0;
  padding: 0 1.25rem;
}
.route-lijn {
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: 50%;
  width: 34px;
  height: calc(100% - 6rem);
  transform: translateX(-50%);
  overflow: visible;
}
.route-lijn path {
  fill: none;
  stroke: var(--olijf);
  stroke-width: 1.4;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: 0.55;
}
.moment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  column-gap: 1.6rem;
  min-height: 150px;
}
.moment-links { grid-template-areas: "icoon punt tekst"; }
.moment-rechts { grid-template-areas: "tekst punt icoon"; }
.moment-icoon { grid-area: icoon; width: 104px; color: var(--inkt); }
.moment-links .moment-icoon { justify-self: end; }
.moment-punt {
  grid-area: punt;
  justify-self: center;
  width: 11px;
  height: 11px;
  border: 1.4px solid var(--olijf);
  border-radius: 50%;
  background: var(--ivoor);
}
.moment-tekst { grid-area: tekst; }
.moment-rechts .moment-tekst { text-align: right; }
.moment-tijd .later { margin-bottom: 0.35rem; }
.moment-tijd { margin: 0; color: var(--olijf); font-family: var(--f-serif); font-size: 1.15rem; font-style: italic; letter-spacing: 0.12em; }
.moment-titel { margin: 0; color: var(--inkt); font-family: var(--f-script); font-size: 3.1rem; font-weight: 400; line-height: 1; }
.moment-uitleg { margin: 0.3rem 0 0; color: var(--grijs); font-size: 0.88rem; line-height: 1.5; }

.zon-moment {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0;
  color: var(--olijf);
}
.zon-moment > span { width: 40px; flex: none; }
.zon-moment p {
  margin: 0;
  padding: 0.2rem 0.6rem;
  background: var(--ivoor);
  font-family: var(--f-serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.05em;
}
.zon-moment strong { font-weight: 500; }

.bus-blok { margin-top: 5rem; }
.icoon-middel { display: block; width: 110px; margin: 0 auto 1rem; color: var(--inkt); }
.bus-tijden {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 2.2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.bus-tijden dt { color: var(--olijf); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.bus-tijden dd { margin: 0.3rem 0 0; color: var(--inkt); font-family: var(--f-serif); font-size: 1.15rem; }

/* ---------- Locatie ---------- */
.locatie { background: var(--papier); }
.locatie-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.locatie-tekst .kap-titel { margin-bottom: 0.4rem; }
.locatie-naam { margin: 0 0 0.5rem; color: var(--inkt); font-family: var(--f-display); font-size: 1.9rem; letter-spacing: 0.05em; text-transform: uppercase; }
.locatie-adres { margin: 0; font-size: 0.92rem; }
.locatie-afstand { margin: 0.2rem 0 1.4rem; color: var(--olijf); font-family: var(--f-serif); font-size: 1.1rem; font-style: italic; }
.locatie-omschrijving { max-width: 380px; margin: 0 auto 2rem; font-size: 0.95rem; }
.locatie-tekening { margin: 0; }
.locatie-tekening img { width: 100%; mix-blend-mode: multiply; }

/* ---------- Panelen (RSVP & cadeau) ---------- */
.paneel-sectie {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 8rem) 1.25rem;
}
.patroon-strepen { background: var(--ivoor) url("../illustraties/strepen.svg") 0 0 / 740px 1200px repeat; }
.patroon-bloemen { background: var(--salie-licht) url("../illustraties/bloemen.svg") 0 0 / 260px 260px repeat; }
.paneel {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  background: var(--olijf);
  color: var(--ivoor);
  text-align: center;
  box-shadow: 0 30px 60px rgba(47, 52, 36, 0.18);
}
.paneel .kop { margin-bottom: 1rem; color: var(--ivoor); }
.paneel .klein-kap { color: var(--ivoor); opacity: 0.8; }
.paneel .later { color: var(--ivoor); opacity: 0.75; }
.icoon-groot { display: block; width: 104px; margin: 0 auto 1.4rem; color: var(--ivoor); }
.icoon-klein { display: block; width: 72px; margin: 0 auto 0.6rem; color: var(--olijf); }
.paneel-tekst { font-size: 1.02rem; }
.paneel .knop { margin: 0.6rem 0 1.8rem; }
.paneel-datum { margin: 0; font-family: var(--f-serif); font-style: italic; letter-spacing: 0.2em; opacity: 0.85; }

.iban {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 1.6rem;
  background: var(--papier);
  color: var(--inkt);
}
.iban p { margin: 0; }
.iban .later { color: var(--grijs); opacity: 1; }
.iban-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; }
.iban-nummer { font-weight: 500; letter-spacing: 0.12em; }
.iban-tnv { font-size: 0.85rem; color: var(--grijs); }
.iban .tekst-link { margin-top: 0.6rem; color: var(--olijf); }

/* ---------- Verblijf ---------- */
.verblijf-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: clamp(3rem, 7vw, 6rem);
}
.verblijf-foto { max-width: 400px; justify-self: center; position: sticky; top: calc(var(--balk-hoogte) + 3rem); }
.verblijf-foto img { aspect-ratio: 3 / 4; }

.hotels { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.hotels li { border-top: 1px solid var(--lijn); }
.hotels li:last-child { border-bottom: 1px solid var(--lijn); }
.hotels a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
  padding: 1.25rem 0.2rem;
  text-decoration: none;
}
.hotel-naam {
  color: var(--inkt);
  font-family: var(--f-display);
  font-size: 1.45rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hotel-naam small { color: var(--olijf); font-family: var(--f-serif); font-size: 0.8em; letter-spacing: 0.1em; }
.hotel-tekst { grid-column: 1; color: var(--grijs); font-family: var(--f-serif); font-size: 1.05rem; font-style: italic; }
.hotel-pijl {
  grid-row: 1 / 3;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  color: var(--olijf);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hotel-pijl span { width: 18px; transition: transform 0.3s; }
.hotels a:hover .hotel-naam { color: var(--olijf); }
.hotels a:hover .hotel-pijl span { transform: translateX(4px); }

.tips { margin-top: clamp(5rem, 9vw, 7rem); }
.tips > p { max-width: 460px; margin: 0 auto; }
.tips-lijst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 3rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.tips-lijst a { display: grid; gap: 0.2rem; text-decoration: none; }
.tip-naam { color: var(--inkt); font-family: var(--f-serif); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.tip-tekst { color: var(--grijs); font-family: var(--f-serif); font-size: 1.05rem; font-style: italic; }
.tips-lijst a:hover .tip-naam { color: var(--olijf); }

/* ---------- Goed om te weten ---------- */
.info { background: var(--papier); }
.info-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}
.info-tekst { max-width: 480px; justify-self: center; }
.detail { margin-top: 2.4rem; }
.detail p { margin: 0; font-size: 0.95rem; }
.info-foto { max-width: 380px; }

.faq { margin-top: clamp(5rem, 9vw, 7rem); }
.faq .kap-titel { margin-bottom: 1.5rem; }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag:first-child { border-top: 1px solid var(--lijn); }
.vraag summary {
  position: relative;
  padding: 1.2rem 2.5rem 1.2rem 0;
  color: var(--inkt);
  cursor: pointer;
  font-family: var(--f-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(var(--olijf), var(--olijf)) center / 100% 1.4px no-repeat,
    linear-gradient(var(--olijf), var(--olijf)) center / 1.4px 100% no-repeat;
  transition: transform 0.3s;
}
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag p { margin: 0; padding: 0 2.5rem 1.4rem 0; font-size: 0.95rem; }

/* ---------- Contact ---------- */
.contact-tekst {
  max-width: 440px;
  margin: 0 auto 1.6rem;
  color: var(--inkt);
  font-size: 1.12rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.contact-personen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 4.5rem; }
.persoon-naam { margin: 0; color: var(--olijf); font-family: var(--f-display); font-size: 2.3rem; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; }
.persoon-tel { margin: 0; font-size: 0.95rem; }
.persoon-tel a { text-decoration: none; }
.ceremoniemeesters { margin-top: 3rem; }
.ceremoniemeesters:empty { display: none; }
.ceremoniemeesters .persoon-naam { font-size: 1.6rem; }

.voet {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 3rem 1rem 3.5rem;
  color: var(--olijf);
}
.voet p { margin: 0; font-family: var(--f-serif); font-style: italic; letter-spacing: 0.35em; }

/* ---------- RSVP-venster ---------- */
.rsvp-venster {
  width: min(100% - 2rem, 560px);
  max-height: min(92svh, 900px);
  padding: 0;
  border: 0;
  background: var(--ivoor);
  color: var(--tekst);
  box-shadow: 0 40px 80px rgba(20, 22, 16, 0.3);
}
.rsvp-venster::backdrop { background: rgba(43, 47, 33, 0.6); backdrop-filter: blur(3px); }
.rsvp-form { position: relative; display: grid; gap: 1.4rem; padding: 3rem clamp(1.4rem, 5vw, 3rem) 2.5rem; }
.rsvp-form > .kop, .rsvp-form > .klein-kap { margin: 0; text-align: center; }
.rsvp-form > .klein-kap { margin-top: -0.8rem; }
.venster-sluit {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border: 0;
  background: none;
  color: var(--olijf);
  cursor: pointer;
}
.venster-sluit span { display: block; width: 100%; height: 100%; }

.veld { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.veld > span, .veld legend {
  padding: 0;
  color: var(--olijf);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.veld legend { margin-bottom: 0.6rem; }
.veld small { color: var(--grijs); font-family: var(--f-serif); font-size: 0.95rem; font-style: italic; }
.veld input[type="text"],
.veld input[type="number"],
.veld textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  background: transparent;
  color: var(--inkt);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
.veld input:focus, .veld textarea:focus { border-bottom-color: var(--olijf); }
.keuzes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.keuze { position: relative; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze span {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--lijn);
  color: var(--inkt);
  font-family: var(--f-serif);
  font-size: 1.08rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.keuze:hover span { border-color: var(--olijf); }
.keuze input:checked + span { border-color: var(--olijf); background: var(--olijf); color: var(--ivoor); }
.keuze input:focus-visible + span { outline: 2px solid var(--olijf); outline-offset: 3px; }
.alleen-bij-ja { display: grid; gap: 1.4rem; }
.komt-niet .alleen-bij-ja { display: none; }
.rsvp-valstrik { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-form .knop { justify-self: center; margin-top: 0.4rem; }
.rsvp-form .knop:disabled { opacity: 0.55; cursor: wait; }
.form-status { min-height: 1.5rem; margin: 0; color: var(--olijf); font-family: var(--f-serif); font-size: 1.1rem; font-style: italic; text-align: center; }

/* ---------- Fase: save the date ---------- */
body[data-fase="save-the-date"] .alleen-uitnodiging { display: none !important; }

/* ---------- Onthullen bij scrollen ---------- */
.onthul { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.onthul.zichtbaar { opacity: 1; transform: none; }
.polaroid.onthul { transform: rotate(var(--draai)) translateY(calc(var(--hoogte) + 30px)); transition-delay: calc(var(--i, 0) * 90ms); }
.polaroid.onthul.zichtbaar { transform: rotate(var(--draai)) translateY(var(--hoogte)); }

/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 960px) {
  .balk { grid-template-columns: auto 1fr; }
  .balk-links, .balk .knop-klein { display: none; }
  .menu-knop { display: block; }
  .balk-rechts { gap: 0.6rem; }

  .reis { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5rem 1.25rem 2.5rem; margin-top: 3rem; scrollbar-width: none; }
  .reis::-webkit-scrollbar { display: none; }
  .reis::before { left: 0; right: auto; width: 1150px; }
  .polaroid { flex: 0 0 min(62vw, 250px); scroll-snap-align: center; }
}

/* ==========================================================
   Mobiel
   ========================================================== */
@media (max-width: 720px) {
  :root { --balk-hoogte: 60px; }
  .sectie { padding: 5rem 1.25rem; }

  .hero { min-height: 580px; place-items: end center; padding-bottom: 5.2rem; }
  .hero-foto { object-position: 50% 30%; }
  .hero::after { background: linear-gradient(180deg, rgba(18, 18, 16, 0.3) 0%, rgba(18, 18, 16, 0.05) 30%, rgba(18, 18, 16, 0.62) 72%, rgba(18, 18, 16, 0.7) 100%); }
  .hero-kop { margin-bottom: 1.6rem; font-size: 0.82rem; letter-spacing: 0.35em; }
  .hero-namen { font-size: clamp(3.6rem, 19vw, 5.4rem); }
  .hero-onder { flex-direction: column; margin-top: 2rem; font-size: 0.66rem; letter-spacing: 0.34em; line-height: 2; }
  .hero-onder .punt { display: none; }

  .welkom-grid, .locatie-grid, .verblijf-grid, .info-grid { grid-template-columns: minmax(0, 1fr); }
  .welkom-brief { justify-self: start; }
  .welkom-foto, .info-foto { width: calc(100% - 48px); max-width: 360px; justify-self: center; }
  .verblijf-foto { position: relative; top: auto; width: calc(100% - 48px); max-width: 360px; }
  .locatie-tekening { order: -1; }

  .collage { aspect-ratio: 390 / 640; }
  .stukje-1 { --x: 2%; --y: 3%; --w: 42%; --r: -5deg; }
  .stukje-2 { --x: 44%; --y: 1%; --w: 52%; --r: 4deg; }
  .stukje-3 { --x: 54%; --y: 30%; --w: 38%; --r: -3deg; }
  .stukje-4 { --x: 3%; --y: 44%; --w: 52%; --r: 3deg; }
  .stukje-5 { --x: 56%; --y: 64%; --w: 38%; --r: 5deg; }
  .stukje-6 { --x: 8%; --y: 70%; --w: 36%; --r: -4deg; }
  .stukje-7, .stukje-8, .stukje-9, .stukje-10 { display: none; }
  .tak { width: 140px; }

  .route { padding: 0 0.5rem; }
  .moment { grid-template-columns: 1fr 26px 1fr; column-gap: 0.7rem; min-height: 132px; }
  .moment-icoon { width: 76px; }
  .moment-titel { font-size: 2.5rem; }
  .moment-uitleg { font-size: 0.82rem; }
  .zon-moment p { font-size: 0.92rem; }

  .bus-tijden { grid-template-columns: 1fr; gap: 0.9rem; }

  .hotels a { grid-template-columns: 1fr; }
  .hotel-pijl { grid-row: auto; grid-column: 1; margin-top: 0.4rem; }
  .hotel-naam { font-size: 1.3rem; }

  .tips-lijst { grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }
  .tip-naam { font-size: 0.78rem; letter-spacing: 0.22em; }

  .contact-tekst { font-size: 1rem; }
  .contact-personen { gap: 1rem 2.5rem; }

  .rsvp-venster { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .onthul, .polaroid.onthul { opacity: 1; transform: rotate(var(--draai, 0deg)) translateY(var(--hoogte, 0)); transition: none; }
  .onthul:not(.polaroid) { transform: none; }
  .stukje, .menu-paneel { transition: none; }
}