/* Site v2 "De Uitnodiging" — Het Gouden Uur
   Lagen: tokens → basis (statisch-open compositie = reduced-motion/no-JS/fallback)
   → beats → choreografie-enhancement (@supports + @media guard).
   Alleen transform/opacity animeren. */

/* ═══ tokens ═══ */
:root {
  --ivoor: #fdf8ee;
  --amber: #c98a3d;
  --terra: #a85b38;
  --olijf: #5a6144;
  --olijf-diep: #4a5038;
  --dahlia: #6e2b2b;
  --ink: #3a2d20;
  --muted: #6e5b44;
  --linnen: #f1e2c4;          /* warm-3: het tafelblad */
  --papier: #f7efdd;          /* envelop-papier */
  --papier-diep: #ecdfc2;     /* envelop-schaduwzijde */
  /* fijne papierkorrel: tegelbare ruis, warm-donker, heel lage alpha */
  --papier-korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .29 0 0 0 0 .22 0 0 0 0 .14 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bloesem: #e5b3bc;         /* Japanse pruimenbloesem — Marij's accent, spaarzaam */
  --bloesem-diep: #c4838f;
  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --serif: "EB Garamond", "Hoefler Text", "Baskerville", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.22, .8, .3, 1);

  /* de tafel: ondergrond + alles wat er rechtstreeks op ligt (niet op kaarten) */
  --tafel: var(--linnen);
  --tafel-draad: rgba(58, 45, 32, .028);
  --tafel-draad2: rgba(58, 45, 32, .02);
  --tafel-glow: rgba(253, 248, 238, .65);
  --tafel-nav: rgba(247, 239, 221, .85);
  --op-tafel-kop: var(--ink);
  --op-tafel-tekst: var(--muted);
  --op-tafel-eyebrow: var(--terra);
}

/* ── TIJDELIJK: tafelkleur-varianten voor de themaproef — na keuze opruimen ── */
body[data-tafel="olijf"] {
  --tafel: #414734;
  --tafel-draad: rgba(253, 248, 238, .04);
  --tafel-draad2: rgba(253, 248, 238, .025);
  --tafel-glow: rgba(253, 248, 238, .07);
  --tafel-nav: rgba(52, 57, 41, .82);
  --op-tafel-kop: #f2e8d5;
  --op-tafel-tekst: #c6bda3;
  --op-tafel-eyebrow: var(--amber);
}
body[data-tafel="klei"] {
  --tafel: #b5896a;
  --tafel-draad: rgba(58, 45, 32, .06);
  --tafel-draad2: rgba(58, 45, 32, .04);
  --tafel-glow: rgba(253, 244, 220, .28);
  --tafel-nav: rgba(181, 137, 106, .85);
  --op-tafel-kop: #2e241b;
  --op-tafel-tekst: #46352a;
  --op-tafel-eyebrow: var(--dahlia);
}
body[data-tafel="licht"] {
  --tafel: #f8f2e5;
  --tafel-draad: rgba(58, 45, 32, .016);
  --tafel-draad2: rgba(58, 45, 32, .012);
  --tafel-glow: rgba(255, 253, 246, .8);
  --tafel-nav: rgba(248, 242, 229, .85);
}

/* animeerbare schaduwdiepte van de kaart (0 = plat in envelop, 1 = zwevend) */
@property --schaduw {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--tafel);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent; /* eigen hover/focus-states aanwezig */
  transition: background .45s;
}
section[id], header[id] { scroll-margin-top: 76px; }
a, button, input { touch-action: manipulation; }

.label { font-family: var(--sans); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 15px 36px;
  background: var(--olijf);
  color: var(--ivoor);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .28s var(--ease);
}
/* hover-feedback gated + GPU: alleen de achtergrond (letter-spacing is layout) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--olijf-diep); }
}
/* focus-ring: terra op licht (4.7:1); (donkere secties volgen in P3) */
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* ═══ nav ═══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px max(34px, env(safe-area-inset-right)) 18px max(34px, env(safe-area-inset-left));
  /* padding niet meesnappen via transition (layout-property); alleen de
     verschijning van balk + schaduw faadt in */
  transition: background .4s ease, box-shadow .4s ease;
}
nav.scrolled {
  background: var(--tafel-nav);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(58, 45, 32, .1);
  padding-top: 12px;
  padding-bottom: 12px;
}
nav .monogram { font-family: var(--display); font-size: 19px; color: var(--op-tafel-kop); text-decoration: none; }
nav .monogram em { font-style: italic; color: var(--amber); }
nav .links { display: flex; gap: 28px; }
nav .links a {
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--op-tafel-eyebrow); text-decoration: none;
  position: relative; padding-bottom: 3px;
}
nav a:focus-visible { outline-color: var(--op-tafel-eyebrow); }
nav .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;   /* GPU i.p.v. animeren van `right` */
  transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  nav .links a:hover::after { transform: scaleX(1); }
}
@media (max-width: 640px) {
  /* mobiel: alleen de RSVP-link — dé actie voor gasten — met volwaardig tikvlak */
  nav .links a:not([href="#rsvp"]) { display: none; }
  nav .links a { padding: 13px 12px; margin: -10px -6px; }
}

/* ═══ beat 1-2 · scene — BASIS = statisch-open compositie ═══ */
.scene { position: relative; }
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  /* statische compositie: kaart eindigt leesbaar bóven de envelopzak */
  padding: 96px 20px 11svh;
  /* linnen weefsel: twee haardunne richtingen, nauwelijks zichtbaar */
  background:
    repeating-linear-gradient(0deg, var(--tafel-draad) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, var(--tafel-draad2) 0 1px, transparent 1px 5px),
    radial-gradient(120% 90% at 50% 0%, var(--tafel-glow) 0%, transparent 60%),
    var(--tafel);
}

/* timeline-track: onzichtbaar meetlint voor de envelop-choreografie.
   Basis: geen choreografie, dus geen track. */
.env-track { display: none; }

/* de envelop, geankerd onderin het beeld */
/* geen transform/z-index/perspective hier: .envelop mag géén stacking context
   worden, anders kan de kaart (sibling) nooit tussen achter- en voorkant in */
.envelop {
  position: absolute;
  left: 50%;
  margin-left: max(-330px, -47vw);
  bottom: 9svh;                         /* iets hoger: ruimte onder voor de scroll-cue */
  width: min(660px, 94vw);
  height: min(340px, 40svh);
}
.env-achter {
  position: absolute; inset: 0;
  background:
    var(--papier-korrel),
    /* gouden voering: glimt op zodra de flap opengaat */
    linear-gradient(to bottom, rgba(201, 138, 61, .16), rgba(201, 138, 61, 0) 46%),
    linear-gradient(to bottom, var(--papier-diep), var(--papier) 40%);
  border: 1px solid rgba(201, 138, 61, .3);
  /* strakke contactschaduw op het tafelkleed + zachte omgevingsschaduw */
  box-shadow:
    0 2px 6px rgba(58, 45, 32, .2),
    0 30px 60px rgba(58, 45, 32, .22);
}
.flap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 56%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    var(--papier-korrel),
    linear-gradient(to bottom, var(--papier) 0%, var(--papier-diep) 90%);
  border-top: 1px solid rgba(201, 138, 61, .35);
  /* de dichte flap werpt een randje schaduw op de envelop — volgt de clip-vorm */
  filter: drop-shadow(0 4px 6px rgba(58, 45, 32, .18));
  transform-origin: top center;
  transform: perspective(1400px) rotateX(-168deg);  /* basis: open */
  z-index: 1;
}
.env-voor {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 50% 36%, 100% 0, 100% 100%, 0 100%);
  background:
    var(--papier-korrel),
    linear-gradient(to bottom, var(--papier), #f4ead4 70%);
  border: 1px solid rgba(201, 138, 61, .3);
  z-index: 4;
}
.env-vouwen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* poststempel-countdown op de envelop */
.stempel {
  position: absolute;
  right: 5%;
  top: 40%;
  width: clamp(84px, 14vw, 116px);
  color: var(--terra);
  opacity: .85;
  transform: rotate(-7deg);
  fill: var(--terra);
}
.stempel text { font-family: var(--sans); fill: var(--terra); }
.stempel .stempel-groot { font-family: var(--display); font-size: 20px; }

/* drukzegel — de SVG in index.html tekent het was: hoogtekaart + belichting.
   Alleen zichtbaar in de choreografie (basis: envelop is al open). */
.zegel {
  position: absolute;
  left: 50%;
  top: 53%;                             /* op de punt van de dichte flap */
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;            /* klodder vult ~76% van de viewBox */
  border: none;
  border-radius: 50%;                   /* ronde focus-ring om het was heen */
  padding: 0;
  cursor: pointer;
  background: none;
  z-index: 6;
  display: none;                        /* basis: verborgen */
}
.zegel svg {
  display: block;
  width: 100%; height: 100%;
  transition: transform .2s var(--ease);
}
/* rustige uitnodiging tot klikken — geen puls, alleen reactie op aandacht.
   focus-visible ongated (toetsenbord op elk toestel); hover gated. */
.zegel:focus-visible svg { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .zegel:hover svg { transform: scale(1.05); }
}
.zegel svg {
  /* strak plakschaduwtje + zachte werpschaduw, beide langs de wasrand */
  filter: drop-shadow(0 2px 3px rgba(45, 20, 15, .38)) drop-shadow(0 8px 14px rgba(58, 45, 32, .24));
}

/* dwarrelende bloesem bij het openen: alleen in de choreografie */
.dwarrel { display: none; }

/* de uitnodigingskaart — in de basis gewoon gecentreerd en leesbaar */
.kaart {
  position: relative;
  z-index: 2;
  width: min(500px, 88vw);
  background: var(--ivoor);
  padding: clamp(44px, 7vw, 68px) clamp(28px, 6vw, 56px) clamp(36px, 6vw, 56px);
  text-align: center;
  box-shadow:
    0 calc(var(--schaduw) * 24px) calc(var(--schaduw) * 55px) rgba(58, 45, 32, calc(var(--schaduw) * .28)),
    0 2px 8px rgba(58, 45, 32, .1);
}
/* dubbele fijne kaderlijn, als op drukwerk */
.kaart::before {
  content: "";
  position: absolute; inset: 13px;
  border: 1px solid rgba(201, 138, 61, .65);
  pointer-events: none;
}
.kaart::after {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid rgba(201, 138, 61, .3);
  pointer-events: none;
}
.kaart-boog { width: 58px; color: var(--amber); margin-bottom: 14px; }

/* bloesem-accenten: klein, spaarzaam, altijd decoratief */
.bloesem-dot { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; }
.bloesem-dot.groot { width: 18px; height: 18px; display: block; margin: 0 auto 14px; }
.kaart-bloesem { display: block; margin: -8px auto 10px; }
.kaart .eyebrow { color: var(--terra); margin: 0 0 20px; }
.kaart h1 {
  font-family: var(--display);
  font-weight: 450;
  font-size: clamp(46px, 8.5vw, 76px);
  line-height: .98;
  margin: 0 0 18px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.kaart h1 em { font-style: italic; color: var(--amber); margin: 0 .04em; font-weight: 400; }
.kaart .sub { font-size: 17.5px; color: var(--muted); max-width: 36ch; margin: 0 auto 30px; }

.open-hint {
  position: absolute;
  bottom: 12px; left: 50%;              /* in de band ónder de envelop (bottom 9svh) */
  transform: translateX(-50%);
  color: var(--terra);
  display: none;                        /* basis: niets te openen */
}

/* ═══ choreografie-enhancement: alleen met scroll-timelines én zonder reduced motion ═══ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* De scene staat bovenaan de pagina; een view-timeline op de scene zélf
       begint zijn cover-range daardoor op ~28% (het stuk vóór scroll 0 is
       onbereikbaar) en de verzegelde envelop zou nooit te zien zijn. Daarom
       meet een track-element de choreografie: zijn cover-range loopt exact
       van scroll 0 (top 100lvh = onderrand viewport bij load) tot het
       unstick-punt van de stage (scroll 160svh). */
    .scene { height: 260svh; timeline-scope: --envelop; }
    .env-track {
      display: block;
      position: absolute;
      left: 0;
      top: 100lvh;
      width: 1px;
      height: calc(160svh - 100lvh);
      pointer-events: none;
      view-timeline: --envelop block;
    }
    .stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding-bottom: 0; }

    .open-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: hint-weg linear both;
      animation-timeline: --envelop;
      animation-range: cover 4% cover 12%;
    }
    .open-hint-tekst { color: var(--terra); }

    /* scroll-cue: een dubbel chevron in inkt-terra dat in sequentie oplicht
       (bovenste eerst, dan de onderste) en zachtjes meewipt — leest als een
       naar beneden vloeiend "scroll", passend bij de inkt-op-papier-wereld. */
    .scroll-cue {
      width: 16px; height: 21px; color: var(--terra);
      animation: cue-bob 2.4s ease-in-out infinite;
    }
    .scroll-cue .ch {
      stroke: currentColor; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .scroll-cue .ch1 { animation: chev 1.9s ease-in-out infinite; }
    .scroll-cue .ch2 { animation: chev 1.9s ease-in-out .16s infinite; }
    @keyframes chev {
      0%, 100% { opacity: .22; }
      50%      { opacity: .95; }
    }
    @keyframes cue-bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(3px); }
    }

    .zegel {
      display: block;
      animation: zegel-breekt linear both;
      animation-timeline: --envelop;
      animation-range: cover 4% cover 16%;
    }

    /* bloesem komt vrij wanneer de zegel breekt en dwarrelt naar beneden */
    .dwarrel {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      pointer-events: none;
    }
    .dwarrel span {
      position: absolute;
      width: var(--maat, 11px);
      height: var(--maat, 11px);
      opacity: 0;
      animation: dwarrel-val linear both;
      animation-timeline: --envelop;
      animation-range: cover 10% cover 48%;
    }
    .dwarrel span:nth-child(odd) { animation-range: cover 13% cover 55%; }
    .dwarrel span:nth-child(3n) { animation-range: cover 16% cover 60%; }
    .dwarrel span svg { display: block; width: 100%; height: 100%; }
    @keyframes dwarrel-val {
      0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 110px)) rotate(var(--rot, 180deg)); }
    }

    .flap {
      transform: perspective(1400px) rotateX(0deg);
      z-index: 5;
    }

    /* start: volledig ín de envelop. De translate ankert de ónderkant van de
       kaart 2svh boven de enveloprand: 39svh = (91svh enveloprand - 2svh marge
       - 50svh stage-midden); -48px corrigeert het grid-midden voor de
       padding-top van 96px op de stage; de -22% is de halve kaarthoogte op
       schaal .44 — zo past de kaart op elk vensterformaat, niets steekt er
       onderuit. Blijft z:2, dus achter de envelopvoorkant (z:4) tot die wegzakt. */
    .kaart {
      --schaduw: 0;
      --k-schaal: .44;      /* startschaal in de envelop */
      --k-half: 22%;        /* halve kaarthoogte op die schaal */
      --k-start: calc(39svh - 48px - var(--k-half));
      transform: translateY(var(--k-start)) scale(var(--k-schaal));
      animation: kaart-uit linear both;
      animation-timeline: --envelop;
      animation-range: cover 22% cover 62%;
    }
    @media (max-width: 640px) {
      .kaart { --k-schaal: .38; --k-half: 19%; }
    }

    .env-achter, .env-voor {
      animation: env-weg linear both;
      animation-timeline: --envelop;
      animation-range: cover 48% cover 78%;
    }

    /* de flap zakt mee met de envelop weg (tweede animatie naast flap-open;
       ranges overlappen niet, transform-eindstand van flap-open zit in de frames).
       flap-weg vult alléén vooruit: met 'both' zou zijn from-frame (-168deg, open)
       al vóór zijn range gelden en de dichte flap van flap-open overschrijven. */
    .flap {
      animation: flap-open linear both, flap-weg linear forwards;
      animation-timeline: --envelop, --envelop;
      animation-range: cover 8% cover 32%, cover 48% cover 78%;
    }

    /* de poststempel staat vast op de envelop (geen scroll-settle): hij is
       erop gedrukt en vertrekt straks mee met env-voor via env-weg */

    @keyframes hint-weg { to { opacity: 0; } }

    @keyframes zegel-breekt {
      0% { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
      55% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(6deg); }
      /* visibility mee-animeren: een onzichtbare knop mag niet focusbaar blijven */
      100% { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.7) rotate(14deg); }
    }

    @keyframes flap-open {
      0% { transform: perspective(1400px) rotateX(0deg); z-index: 5; }
      49% { z-index: 5; }
      50% { z-index: 1; }
      100% { transform: perspective(1400px) rotateX(-168deg); z-index: 1; }
    }

    @keyframes kaart-uit {
      0% { transform: translateY(var(--k-start)) scale(var(--k-schaal)); --schaduw: 0; }
      /* eerst omhoog úit de zak (nog klein), dan pas naar vol formaat */
      45% { transform: translateY(9svh) scale(.62); --schaduw: .3; }
      100% { transform: translateY(0) scale(1); --schaduw: 1; }
    }

    /* eerst zichtbaar zakken, pas daarna vervagen — anders leest de fade
       als doorschijnend papier terwijl de envelop nog stilstaat */
    @keyframes env-weg {
      45% { opacity: 1; }
      to { transform: translateY(55svh); opacity: 0; }
    }

    @keyframes flap-weg {
      from { transform: perspective(1400px) translateY(0) rotateX(-168deg); z-index: 1; opacity: 1; }
      45% { opacity: 1; }
      to { transform: perspective(1400px) translateY(55svh) rotateX(-168deg); z-index: 1; opacity: 0; }
    }


    /* P2: suite-stukken worden "neergelegd" terwijl je ze in beeld scrolt.
       De animatie staat op de .leg-wrapper zodat de hover-transform op de
       kaart zelf niet door een gevulde animatie wordt overschreven. */
    .leg {
      animation: neerleg linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 65%;
    }
    @keyframes neerleg {
      from { opacity: 0; transform: translateY(30px) rotate(2.2deg) scale(.985); }
      to { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    }
    .waaier .leg.omhoog { animation-name: neerleg-omhoog; }
    @keyframes neerleg-omhoog {
      from { opacity: 0; transform: translateY(20px) rotate(-2deg) scale(.985); }
      to { opacity: 1; transform: translateY(-12px) rotate(0deg) scale(1); }
    }

    /* P4: sectie-reveals CSS-only in moderne browsers — geen JS-afhankelijkheid,
       en geen dubbele beweging bovenop de neerleg van de kaarten */
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
      animation: sectie-op linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    @keyframes sectie-op {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* P3: Ken Burns in de volbeeld-fotomomenten — trage zoom + zachte parallax
       terwijl de foto in beeld is. (fm-binnen is 112% hoog, top:-6%, en de
       venster heeft overflow:clip, dus de randen blijven altijd gedekt.) */
    .fm-binnen {
      animation: fm-kenburns linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes fm-kenburns {
      from { transform: translateY(-3%) scale(1.03); }
      to   { transform: translateY(3%) scale(1.1); }
    }

    /* de ingelijste afdruk wordt bij binnenkomst "neergelegd" op het linnen */
    .fm-lijst {
      animation: fm-neerleg linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 42%;
    }
    @keyframes fm-neerleg {
      from { opacity: 0; transform: translateY(28px) scale(.975); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Ken Burns op de ingeplakte verhaal-foto: de zoom zit op de geklipte
       ::before-laag zodat het witte kader eromheen strak blijft. Het
       "neerleggen" van deze foto loopt al via de .leg-neerleg. */
    .foto-vlak::before {
      animation: fv-kenburns linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes fv-kenburns {
      from { transform: scale(1.03); }
      to   { transform: scale(1.11); }
    }
  }
}

/* ═══ P2 · spreads — stukken uit de suite, op het linnen gelegd ═══ */
section.spread { padding: clamp(96px, 13vh, 150px) 24px; container-type: inline-size; }
.spread-inner { max-width: 1000px; margin: 0 auto; display: grid; gap: 52px; align-items: center; }
.spread-inner.smal { max-width: 640px; }
@container (min-width: 700px) {
  .spread-inner:not(.smal):not(.stapel) { grid-template-columns: 1.05fr .95fr; }
  .spiegel .spread-inner { grid-template-columns: .95fr 1.05fr; }
}
.spread-inner.stapel { max-width: 900px; gap: 34px; }
.spread-tekst { color: var(--op-tafel-kop); }
.spread-tekst .sp-eyebrow { color: var(--op-tafel-eyebrow); margin: 0 0 16px; }
.spread-tekst h2, .menukaart h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08;
  margin: 0 0 16px;
  text-wrap: balance;
}
.sp-lede { color: var(--op-tafel-tekst); font-size: 17.5px; max-width: 48ch; margin: 0; }
/* op kaarten blijft de tekst altijd in kaart-kleuren, welke tafel er ook onder ligt */
.menukaart .sp-eyebrow, .antwoordkaart .sp-eyebrow { color: var(--terra); }
.menukaart h2, .antwoordkaart h2 { color: var(--ink); }
.spread-tekst.midden { text-align: center; }
.spread-tekst.midden .sp-eyebrow { margin-bottom: 14px; }
/* op smalle schermen: tekst boven de kaartjes, ook in de gespiegelde spread */
.spiegel .kaartjes { order: 2; }
@container (min-width: 700px) { .spiegel .kaartjes { order: -1; } }

/* ingeplakte foto — wit kader, fotohoekjes, licht gedraaid */
.foto-plak {
  position: relative;
  margin: 0 auto;
  width: min(360px, 82cqw);
  transform: rotate(var(--rot, 1.8deg));
  background: #fbf6ea;
  padding: 12px 12px 16px;
  box-shadow: 0 22px 48px rgba(58, 45, 32, .2);
  transition: transform .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .foto-plak:hover { transform: rotate(0deg) translateY(-6px); } }
.foto-vlak {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;                     /* klipt de inzoomende ::before-laag */
  /* gradient blijft als vangnet wanneer het fotobestand ontbreekt */
  background: linear-gradient(155deg, #d9b98a 0%, #b28c5e 55%, #8a6a45 100%);
}
.foto-vlak::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/verhaal-stel.jpg") center / cover no-repeat;
}
.foto-plak figcaption {
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  padding-top: 12px;
}
/* plakbandjes over de hoeken: halfdoorzichtig (foto schijnt erdoorheen),
   glans-baan, gescheurde uiteinden, en elk nét een andere hoek */
.hoek {
  position: absolute;
  width: 62px;
  height: 21px;
  z-index: 2;
  background:
    linear-gradient(105deg, rgba(253, 248, 238, .38) 0%, rgba(253, 248, 238, .05) 40%, rgba(236, 223, 194, .28) 100%),
    rgba(246, 239, 222, .55);
  box-shadow: 0 1px 3px rgba(58, 45, 32, .16);
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 13%, 99% 85%, 96% 100%, 4% 96%, 0 89%);
}
.hoek.h-lb { top: -9px; left: -27px; transform: rotate(-46deg); }
.hoek.h-rb { top: -9px; right: -27px; transform: rotate(44deg); }
.hoek.h-lo { bottom: -9px; left: -27px; transform: rotate(47deg); }
.hoek.h-ro { bottom: -9px; right: -27px; transform: rotate(-43deg); }
/* de grote afdrukken krijgen hetzelfde, iets forser */
.fm-lijst { position: relative; }
.fm-lijst .hoek { width: 88px; height: 27px; }
.fm-lijst .hoek.h-lb { top: -12px; left: -36px; transform: rotate(-45.5deg); }
.fm-lijst .hoek.h-rb { top: -12px; right: -36px; transform: rotate(46deg); }
.fm-lijst .hoek.h-lo { bottom: -12px; left: -36px; transform: rotate(44deg); }
.fm-lijst .hoek.h-ro { bottom: -12px; right: -36px; transform: rotate(-47deg); }

/* inlegkaart — het kleinere drukwerk uit de suite */
.inleg {
  position: relative;
  background: var(--ivoor);
  padding: 34px 32px;
  box-shadow: 0 16px 38px rgba(58, 45, 32, .15);
  transform: rotate(var(--rot, 0deg));
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.inleg::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(201, 138, 61, .5);
  pointer-events: none;
}
.inleg-label { color: var(--terra); margin: 0 0 12px; }
.inleg p:not(.inleg-label) { margin: 0; font-size: 15px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .inleg.klein:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 26px 50px rgba(58, 45, 32, .2); }
}

/* menukaart-inlegvel */
.menukaart { max-width: 430px; margin: 0 auto; text-align: center; padding: 46px 36px 38px; }
.menukaart .kaart-boog { width: 46px; }
.menukaart .sp-eyebrow { color: var(--terra); margin: 10px 0 10px; }
.menukaart h2 { font-size: clamp(26px, 4vw, 34px); }
.programma { list-style: none; margin: 26px 0 0; padding: 0; text-align: left; }
.programma li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0 18px;
  align-items: baseline;
  padding: 13px 4px;
}
.programma li + li { border-top: 1px solid rgba(201, 138, 61, .28); }
.programma .tijd {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.programma .wat strong { display: block; font-weight: 600; font-size: 16.5px; }
.programma .wat em { display: block; font-style: italic; font-size: 14px; color: var(--muted); }
.menu-dots { color: var(--amber); letter-spacing: .5em; margin: 22px 0 0; font-size: 14px; }

/* inlegkaartjes bij de plek */
.kaartjes { display: flex; flex-direction: column; gap: 26px; max-width: 400px; margin: 0 auto; }

/* waaier — drie kaartjes als uit de envelop gevallen */
.waaier { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.waaier .leg { flex: 0 1 280px; }
.waaier .leg:not(:first-child) { margin-left: -14px; }
.waaier .leg.omhoog { transform: translateY(-12px); }
.waaier .inleg.klein:hover { z-index: 2; }
@media (max-width: 700px) {
  /* gestapeld leest een waaier niet als waaier maar als scheve kaarten:
     rechte, nette stapel met vast formaat i.p.v. de fan-rotaties */
  .waaier { flex-direction: column; align-items: center; gap: 16px; margin-top: 4px; }
  .waaier .leg { flex-basis: auto; width: 100%; max-width: 360px; }  /* basis van 280px werkt in kolomrichting als hoogte → gaten */
  .waaier .leg:not(:first-child) { margin-left: 0; }
  /* de "omhoog"-kaart (Cadeau) niet 12px optillen: gestapeld hoort hij gewoon
     op één lijn. De neerleg-animatie eindigt anders op translateY(-12px) en
     wint van een statische transform, dus ook de animatie terugzetten. */
  .waaier .leg.omhoog { transform: none; animation-name: neerleg; }
  .waaier .inleg.klein { transform: none; }  /* --rot-tilts eruit op mobiel */
}

/* ═══ P3/P5 · fotomomenten — grote afdrukken op het linnen, passend bij de suite ═══ */
.foto-moment { padding: clamp(72px, 10vh, 120px) 24px; }
.fm-lijst {
  margin: 0 auto;
  width: min(1100px, 94vw);
  background: #fbf6ea;
  padding: clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px) 0;
  box-shadow: 0 30px 70px rgba(58, 45, 32, .22);
}
.fm-venster { position: relative; overflow: clip; height: min(72svh, 620px); }
.fm-binnen { position: absolute; left: 0; right: 0; top: -6%; height: 112%; }
/* filmkorrel over de "foto" */
.fm-binnen::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fm-middag {
  /* zachte vignet-rand over de voorbeeldfoto; gradient eronder als vangnet */
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(46, 36, 24, .28) 0%, transparent 55%),
    url("assets/middag-tuin.jpg") center 42% / cover no-repeat,
    linear-gradient(to bottom, #f2e3bd 0%, #e2bd85 38%, #c2915b 68%, #8f6c45 100%);
}
.fm-avond {
  background:
    radial-gradient(120% 85% at 50% 115%, rgba(36, 28, 18, .4) 0%, transparent 60%),
    url("assets/avond-tafel.jpg") center 62% / cover no-repeat,
    linear-gradient(to bottom, #a8804e 0%, #6e5236 32%, #40311f 64%, #241c12 100%);
}
.fm-regel {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 16px 10px 18px;
  text-align: center;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
}
.fm-tag { color: rgba(110, 91, 68, .45); font-size: 9.5px; }
.foto-plak .fm-tag { margin-left: 10px; }
@media (max-width: 640px) {
  /* mobiel: lagere envelop zodat de kaart er in beide standen goed bij past */
  .envelop { height: min(240px, 28svh); }

  /* mobiele verticale ritmiek: op desktop ademt elke sectie ~13vh/10vh, maar
     op een smal scherm stapelen die marges op tot holle gaten. Hier één
     rustige, gelijke tussenruimte zodat de secties als één suite doorlopen. */
  section.spread { padding: 58px 22px; }
  .foto-moment { padding: 46px 18px; }
  /* de grote afdruk niet bijna-schermvullend: dan valt hij niet meer samen
     met de secties eromheen */
  .fm-venster { height: min(56svh, 440px); }
  /* de spread-kolommen staan mobiel toch onder elkaar → kleinere tussenruimte */
  .spread-inner { gap: 34px; }
}

/* ═══ P3 · de antwoordkaart ═══ */
.antwoordkaart { max-width: 520px; margin: 0 auto; padding: 44px 40px 38px; text-align: center; position: relative; }
.antwoordkaart .sp-eyebrow { color: var(--terra); margin: 0 0 12px; }
.antwoordkaart h2 { font-size: clamp(28px, 4.2vw, 38px); margin-bottom: 0; }
/* de subregel-marges worden geplet door de .inleg p:not(.inleg-label)-reset,
   dus de ruimte tussen subregel en formulier zetten we op het formulier
   (geen <p>, dus buiten die reset; flex = BFC, geen margin-collapse). */
.antwoordkaart .rsvp-form { gap: 24px; max-width: 380px; margin-top: 32px; }
.antwoordkaart .veld { margin: 0; display: flex; flex-direction: column; text-align: left; }
.antwoordkaart .veld-label {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--terra);
  margin-bottom: 2px;
  cursor: pointer;
}
.antwoordkaart .rsvp-form input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(201, 138, 61, .65);
  padding: 7px 2px 8px;
  font-size: 16px;
}
.antwoordkaart .rsvp-form input::placeholder { font-style: italic; color: rgba(110, 91, 68, .5); }
.antwoordkaart .rsvp-form input:focus { border-bottom-color: var(--terra); border-bottom-style: solid; }
.antwoordkaart .btn { margin-top: 10px; align-self: center; padding: 15px 46px; }

/* de "Ontvangen"-stempel na verzenden */
.stempel-ok {
  position: absolute;
  right: 8%;
  bottom: 17%;
  padding: 12px 22px 13px;
  border: 2.5px solid var(--olijf);
  box-shadow: inset 0 0 0 1.5px transparent, 0 0 0 1px transparent;
  outline: 1px solid var(--olijf);
  outline-offset: 3px;
  color: var(--olijf);
  transform: rotate(-8deg) scale(1.25);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity .28s cubic-bezier(.2, 1.6, .4, 1), transform .28s cubic-bezier(.2, 1.6, .4, 1);
}
.stempel-ok span {
  display: block;
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.stempel-ok em { display: block; font-style: italic; font-size: 13px; margin-top: 2px; }
.stempel-ok.gezet { opacity: .9; transform: rotate(-8deg) scale(1); }

/* champagne bij een gelukte aanmelding: fles op, kurk weg, bubbels eruit */
.champagne {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.fles-wrap {
  position: absolute;
  left: 26px;
  bottom: 20px;
  width: 40px;
  height: 118px;
  transform-origin: 50% 100%;
  transform: translateY(54px) rotate(0deg) scale(.5);
  opacity: 0;
  animation: fles-op .55s cubic-bezier(.2, 1.5, .4, 1) .05s forwards;
}
@keyframes fles-op {
  to { transform: translateY(0) rotate(-22deg) scale(1); opacity: 1; }
}
.fles-wrap svg { display: block; width: 100%; height: 100%; }
.kurk {
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 15px;
  border-radius: 40% 40% 30% 30%;
  background: linear-gradient(to bottom, #d8b98d, #b5896a);
  opacity: 0;
  animation: kurk-weg .95s cubic-bezier(.2, .7, .3, 1) .62s forwards;
}
@keyframes kurk-weg {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  60% { opacity: 1; transform: translate(48px, -112px) rotate(520deg); }
  100% { opacity: 0; transform: translate(76px, -130px) rotate(760deg); }
}
.bubbel {
  position: absolute;
  top: -2px;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  animation: bubbel-spat var(--duur, .9s) cubic-bezier(.15, .65, .35, 1) var(--wacht, .65s) forwards;
}
.bubbel.g1 { background: radial-gradient(circle at 32% 30%, #f5e6c4, var(--amber)); }
.bubbel.g2 { background: radial-gradient(circle at 32% 30%, #fdf8ee, #e2bd85); }
.bubbel.g3 { background: radial-gradient(circle at 32% 30%, #f5cf7d, #c98a3d); }
@keyframes bubbel-spat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--bx) - 50%), var(--by)) scale(1); }
}
/* bloesempjes uit de fles: zelfde kegel, maar tuimelend */
.bloesempje {
  position: absolute;
  top: -2px;
  left: 50%;
  opacity: 0;
  animation: bloesem-spat var(--duur, 1s) cubic-bezier(.15, .65, .35, 1) var(--wacht, .65s) forwards;
}
@keyframes bloesem-spat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--bx) - 50%), var(--by)) scale(1) rotate(var(--spin, 260deg)); }
}

/* reveals: basis zichtbaar; animatie alleen zonder reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ═══ RSVP-stub (antwoordkaart volgt in P3) ═══ */
.rsvp-sub { color: var(--muted); margin: 0 0 30px; }
.rsvp-form { display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin: 0 auto; }
.rsvp-form input {
  font-family: var(--serif);
  font-size: 15px;
  padding: 13px 16px;
  background: var(--ivoor);
  border: 1px solid rgba(201, 138, 61, .5);
  color: var(--ink);
}
.rsvp-form input::placeholder { color: rgba(110, 91, 68, .65); }
.rsvp-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rsvp-form .btn:disabled { opacity: .5; cursor: default; }
.form-status { min-height: 1.5em; margin-top: 16px; font-style: italic; color: var(--muted); }
.form-status.error { color: var(--dahlia); }

/* ═══ footer ═══ */
footer { text-align: center; padding: 40px 24px 80px; color: var(--op-tafel-tekst); }
footer .tot-dan {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  color: var(--op-tafel-kop);
  margin: 0 0 20px;
}
footer .tot-dan em { font-style: italic; color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── TIJDELIJK: themaproef-kiezer — verwijderen na keuze ── */
.thema-proef {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(253, 248, 238, .95);
  border: 1px solid rgba(201, 138, 61, .4);
  box-shadow: 0 8px 24px rgba(58, 45, 32, .18);
}
.thema-proef .label { font-size: 9px; color: var(--muted); margin-right: 4px; }
.thema-proef button {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 5px 10px;
  border: 1px solid rgba(201, 138, 61, .35);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.thema-proef button.actief { background: var(--olijf); color: var(--ivoor); border-color: var(--olijf); }