/* ==========================================================================
   Fenna & Sander · Save the Date
   Huisstijl "African sunset": terracotta, amber en zand op ruw gerecycled
   papier. Hoge smalle kapitalen (Instrument Serif) met een dunne signatuur
   (Mrs Saint Delafield) eroverheen; Lato voor lopende tekst.
   ========================================================================== */

/* ---- Lettertypen, zelf gehost (geen Google Fonts op de live site) -------- */
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("fonts/mrs-saint-delafield-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --terracotta: #b5532c;
  --terracotta-diep: #a84a28;   /* tekst op crème en knoppen met lichte letters: haalt 4,5:1 */
  --roest: #8a3b1f;
  --amber: #d9973a;
  --goud: #f2b34f;
  --roze: #d9a39a;
  --zand: #e9d8bd;
  --creme: #f6ede0;
  --room: #fbeeda;
  --koffie: #3a2419;
  --koffie-licht: #6b4b3c;
  --pruim: #5f2530;
  --linnen: #f1e4cf;

  --font-display: "Instrument Serif", "Didot", "Bodoni MT", "Georgia", serif;
  --font-sig: "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  --kaart-breedte: 430px;
  --duur-flap: 1200ms;
  --duur-weg: 1300ms;

  /* Fijne korrel voor kaarten (SVG-ruis, één keer berekend door de browser) */
  --korrel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0 0.04 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Ritme, labels en beweging ------------------------------------------ */
:root {
  /* Afstanden op een raster van 4 */
  --ruimte-xs: 4px;
  --ruimte-s: 8px;
  --ruimte-m: 16px;
  --ruimte-l: 24px;
  --ruimte-xl: 40px;
  --ruimte-2xl: 56px;
  --ruimte-3xl: 64px;

  /* Labels in kapitalen: één maat, drie letterafstanden naar de plek waar ze staan */
  --label: 11px;
  --spatie-ruim: 0.28em;    /* losse labels op lucht en schemering, knoppen */
  --spatie-kaart: 0.14em;   /* labels op het crème kaartje */
  --spatie-krap: 0.02em;    /* labels in de smalle tegels van de teller */

  --uit: cubic-bezier(0.16, 1, 0.3, 1);   /* rustig afremmen bij aankomst */

  /* Terugkerende tinten: room als licht op donker, roest als inkt op crème */
  --licht-vlak: rgba(251,238,218,0.12);
  --licht-vlak-hover: rgba(251,238,218,0.22);
  --licht-vlak-actief: rgba(251,238,218,0.3);
  --licht-rand: rgba(251,238,218,0.32);
  --licht-lijn: rgba(251,238,218,0.45);
  --licht-rand-sterk: rgba(251,238,218,0.55);
  --licht-tekst: rgba(251,238,218,0.9);
  --inkt-rand-zacht: rgba(138,59,31,0.16);
  --inkt-lijn: rgba(138,59,31,0.2);
  --inkt-rand: rgba(138,59,31,0.32);
  --inkt-onderstreep: rgba(138,59,31,0.4);

  /* Schaduwen: onder lichte tekst op lucht en schemering, onder de knop en het kaartje */
  --schaduw-titel: 0 2px 20px rgba(70,20,10,0.35);
  --schaduw-signatuur: 0 2px 10px rgba(70,20,10,0.35);
  --schaduw-regel: 0 1px 12px rgba(70,20,10,0.35);
  --schaduw-knop: 0 8px 22px rgba(60,20,8,0.35), inset 0 1px 0 rgba(255,220,190,0.35);
  --schaduw-kaartje: drop-shadow(0 14px 16px rgba(30,8,2,0.34));
  --schaduw-melding: 0 24px 60px rgba(30,8,2,0.45);

  /* Avond en inkt: achter de pagina (doorveren op de telefoon), de zwevende knop en het poststempel */
  --avond-diep: #5c2425;
  --knop-donker: rgba(58,36,25,0.55);
  --stempelinkt: rgba(251,238,218,0.86);
}

/* ---- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(242,179,79,0.85); color: var(--koffie); }
html { scrollbar-color: var(--roest) var(--linnen); }
/* Wat je ziet als de telefoon boven of onder doorveert: donker, zoals de bovenkant van de hero en de voet */
html { background: var(--avond-diep); }
a, summary { -webkit-tap-highlight-color: rgba(242,179,79,0.25); }
h1 { font-weight: 400; }
/* Alleen voor schermlezers: onzichtbaar, maar wel voorgelezen */
.voor-schermlezer { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--koffie);
  background: var(--linnen);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.js body.is-sealed { overflow: hidden; height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: var(--terracotta); }
a:hover { color: var(--roest); }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }

.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
.serif { font-family: var(--font-display); font-weight: 400; }
.sig { font-family: var(--font-sig); font-weight: 400; }
.caps { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.28em; font-weight: 400; }

:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }
.hero__namen:focus:not(:focus-visible) { outline: none; }

/* ---- Desktop: de site blijft een kaart in telefoonformaat ----------------- */
.site {
  position: relative;
  width: 100%;
  max-width: var(--kaart-breedte);
  margin: 0 auto;
  background: var(--creme);
  transition: opacity var(--duur-weg) ease;
}
.js body.is-sealed .site { opacity: 0; }
@media (min-width: 700px) {
  body { background: var(--linnen) radial-gradient(ellipse at 50% 100%, rgba(214,141,59,0.35), transparent 60%); }
  .site { min-height: 100vh; box-shadow: 0 30px 80px rgba(90,40,20,0.28); }
}

/* ==========================================================================
   1. Envelop
   Eén foto (Higgsfield, envelop 4) in lagen geknipt: binnenkant, zak,
   herstellaag (schoon papier waar zegel en flap schaduw gaven) en de flap met
   zegel. Tik: de flap klapt open, korte pauze, dan vervaagt de envelop en
   verschijnt de site. Alle lagen even groot en bovenaan uitgelijnd, zodat het
   scharnier van de flap op de bovenrand ligt.
   ========================================================================== */
.envelope {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: min(100%, var(--kaart-breedte));
  transform: translate3d(-50%, 0, 0);
  z-index: 50;
  background: #9a4a26;
  overflow: hidden;
  transition: opacity var(--duur-weg) ease;  /* begint direct, eindigt zacht */
}
.envelope.is-weg { opacity: 0; pointer-events: none; }
/* Zonder script gaat de envelop niet open: dan tonen we hem ook niet */
html:not(.js) .envelope { display: none; }
/* Kort of liggend scherm (5:8 of breder, zoals een iPhone SE met werkbalken, een telefoon dwars of een laag
   laptopvenster): de envelop wordt een kaart met de verhouding van de foto. Anders valt het papier onder het
   zegel weg en lopen de namen over de hint. Gerekend: bij 375 breed past het adres pas vanaf 600 hoog. */
@media (min-aspect-ratio: 5/8) {
  .envelope { width: min(100%, var(--kaart-breedte), 56.545vh); width: min(100%, var(--kaart-breedte), 56.545dvh); }
}
@media (min-width: 700px) { .envelope { box-shadow: 0 30px 80px rgba(20,8,4,0.5); } }

.envelope__knop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.envelope__knop:focus-visible { outline: 2px solid var(--goud); outline-offset: -6px; }

.envelope__laag {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  display: block; pointer-events: none; user-select: none; -webkit-user-select: none;
}

/* Schoon papier komt tevoorschijn terwijl de flap optilt */
.envelope__laag--herstel { opacity: 0; transition: opacity 450ms ease 200ms; }
.envelope.is-open .envelope__laag--herstel { opacity: 1; }

/* Schaduw van de flap die optilt */
.envelope__laag--optil {
  background: linear-gradient(180deg, rgba(25,8,2,0.6) 0%, rgba(25,8,2,0.25) 35%, rgba(25,8,2,0) 60%);
  opacity: 0;
}
.envelope.is-open .envelope__laag--optil { animation: optil var(--duur-flap) ease-out forwards; }
@keyframes optil { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.2; } }

/* De flap klapt naar je toe en omhoog en wordt daarbij iets donkerder */
.envelope__laag--flap {
  transform-origin: 50% 0;
  transform: perspective(1500px) rotateX(0deg);
  filter: brightness(1);
  transition: transform var(--duur-flap) cubic-bezier(0.5, 0, 0.3, 1), filter var(--duur-flap) ease-in;
}
/* Alleen vlak voor en tijdens het openklappen een eigen laag (main.js zet .is-bijna bij vinger of focus) */
.envelope.is-bijna .envelope__laag--flap, .envelope.is-open .envelope__laag--flap { will-change: transform; }
.envelope.is-open .envelope__laag--flap { transform: perspective(1500px) rotateX(104deg); filter: brightness(0.72); }

.envelope__hint {
  position: absolute; left: 0; right: 0; bottom: calc(6.5% + env(safe-area-inset-bottom, 0px)); z-index: 1;
  text-align: center; font-size: var(--label); letter-spacing: var(--spatie-ruim); color: var(--room);
  text-shadow: 0 1px 2px rgba(40,12,4,0.6), 0 2px 12px rgba(40,12,4,0.5);
  pointer-events: none;
  animation: hint-pulse 2.8s ease-in-out infinite;
  transition: opacity 250ms ease;
}
@keyframes hint-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
/* Zachte donkere waas achter de hint: papier en lijntekeningen zijn daar te licht voor 4,5:1
   (gemeten: gemiddeld #b35225 = 4,4:1, met deze waas 7,7:1 en bij de zwakste puls nog 5:1) */
.envelope__hint::before { content: ""; position: absolute; left: 50%; top: 50%; width: 280px; height: 90px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(40,12,4,0.4), rgba(40,12,4,0)); z-index: -1; }
.envelope.is-open .envelope__hint { opacity: 0; animation: none; }

/* Persoonlijke link: aanhef op de zak en een poststempel op de flap.
   .envelope__vlak heeft precies de maat van de envelopfoto op het scherm (object-fit: cover,
   bovenaan uitgelijnd), dus aanhef en stempel liggen altijd op dezelfde plek op het papier.
   main.js zet --vlak op de gemeten breedte, de waarde hieronder is de reserve. */
.envelope { --vlak: max(min(100vw, var(--kaart-breedte)), 56.545vh); }
.envelope__vlak { position: absolute; left: 50%; top: 0; width: var(--vlak); height: calc(var(--vlak) * 1.76852); transform: translateX(-50%); }
.envelope__adres {
  position: absolute; left: 0; right: 0; top: 64.9%;
  display: flex; flex-direction: column; align-items: center;
  color: var(--room);
  opacity: 0; transition: opacity 700ms ease;
}
/* Geschreven en gestempeld in plaats van erop geplakt: geen schaduw, een inktfilter (rafelige randjes,
   ongelijke druk) en de lagen mengen met screen, zodat de vezels van het papier door de inkt heen komen */
.envelope__laag--adres, .envelope__laag--stempel { mix-blend-mode: screen; }
/* De aanhef staat twee keer: licht in screen, en een kopie in overlay die de warmte van het papier overneemt */
.envelope__laag--adres { opacity: 0.8; }
.envelope__laag--inkt { mix-blend-mode: overlay; opacity: 0.7; }
.envelope__schrift { display: flex; flex-direction: column; align-items: flex-start; }
.envelope__voor, .envelope__naam { filter: url(#f-handschrift); }
/* "voor" in dezelfde schrijfletter, links boven de eerste naam, zoals je een envelop met de hand beschrijft.
   Niet verder naar links uitspringen: bij een brede naam ("Jacqueline, Stephan") valt het dan buiten de envelop. */
.envelope__voor { font-size: calc(var(--vlak) * 0.096); line-height: 0.8; margin: 0 0 -0.22em; transform: rotate(-3deg); }
.envelope__naam { font-size: calc(var(--vlak) * 0.1341); line-height: 1.15; white-space: nowrap; transform: rotate(-3deg); }
.envelope__stempel { color: var(--stempelinkt); position: absolute; left: 44%; top: 7%; width: 39%; height: auto; aspect-ratio: 160 / 110; overflow: visible; transform: rotate(-11deg) scale(1.14); opacity: 0; transition: opacity 260ms ease, transform 520ms var(--uit); }
.envelope__stempeltekst { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 3px; }
.envelope__stempeltekst--klein { font-size: 9px; letter-spacing: 2.6px; }
body.heeft-gast .envelope__adres, body.heeft-gast .envelope__stempel { opacity: 1; }
/* Het stempel landt kort na de naam, alsof het er net op gedrukt wordt */
body.heeft-gast .envelope__stempel { transform: rotate(-11deg) scale(1); transition-delay: 220ms; }
/* De ampersand in dezelfde schrijfletter als de namen, zodat het één geschreven regel is */
.envelope__en { font-size: 0.75em; }
.envelope__regel { white-space: nowrap; }
/* Meer namen dan er op één regel passen: de laatste naam iets ingesprongen eronder, zoals een geschreven adres */
.envelope__naam.is-twee-regels { display: flex; flex-direction: column; align-items: center; line-height: 1.02; }
.envelope__naam.is-twee-regels .envelope__regel + .envelope__regel { padding-left: 0.9em; }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
  position: relative;
  /* Niet hoger dan 760px (anders te veel lucht boven de dieren) en niet lager dan 600px
     (liggend op een telefoon valt de savanne anders over de namen) */
  /* svh en niet dvh: dvh verandert als de adresbalk van Safari in- of uitklapt, dan verspringt de pagina tijdens het scrollen */
  min-height: max(600px, min(100vh, 760px));
  min-height: max(600px, min(100svh, 760px));
  overflow: hidden;
  background: linear-gradient(180deg, #5f2530 0%, #8d3431 30%, #b8452f 60%);
  color: var(--room);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); z-index: 1; }
.hero__scene { position: absolute; left: 0; right: 0; bottom: 0; height: 57%; min-height: 380px; }
.scene {
  width: 100%; height: 100%; display: block;
  /* Bovenrand van de tekening vloeit weg in de achtergrond: rond 24% is de lucht van de
     tekening even rood als de achtergrond, dus daar is de tekening weer volledig zichtbaar */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
}
.hero__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.hero__inhoud {
  position: relative; z-index: 2;
  padding: max(56px, env(safe-area-inset-top, 0px) + 44px) 28px 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-l);
  text-align: center;
}
.hero__datum { display: flex; align-items: center; gap: var(--ruimte-m); width: 100%; font-size: var(--label); letter-spacing: var(--spatie-ruim); color: var(--room); }
.hero__datum .lijn { flex: 1; height: 1px; background: var(--licht-lijn); }

.hero__namen {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.36em;
  max-width: 100%;
  font-size: clamp(60px, 22vw, 104px);
  line-height: 0.86;
  text-shadow: var(--schaduw-titel);
}
.hero__tweede { display: flex; align-items: baseline; gap: 0.1em; }
.hero__en { font-style: italic; font-size: 0.42em; color: var(--goud); text-transform: none; }
.hero__sig {
  position: absolute; left: 50%; top: 0.62em;
  transform: translateX(-50%) rotate(-5deg);
  display: flex; flex-direction: column; align-items: center;
  color: var(--goud);
  pointer-events: none;
  white-space: nowrap;
}
.hero__sig .sig { font-size: 1.05em; line-height: 1; text-shadow: var(--schaduw-signatuur); }
.swash { width: 2.6em; height: auto; margin-top: -0.12em; }
.hero__plek { font-size: var(--label); letter-spacing: var(--spatie-ruim); color: var(--room); }

.hero__scroll {
  /* Zo breed als de tekst: over de volle breedte liep het tikvlak onder het zwevende geluidsknopje door */
  position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%);
  padding-inline: var(--ruimte-m); white-space: nowrap;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  font-size: var(--label); letter-spacing: var(--spatie-ruim); color: var(--room); text-decoration: none;
  text-shadow: 0 1px 2px rgba(60,18,6,0.5), 0 2px 10px rgba(60,18,6,0.65);   /* leesbaar op de lichte duin */
}
.hero__scroll::before { content: ""; position: absolute; left: 50%; top: 50%; width: 240px; height: 96px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(60,18,6,0.42), rgba(60,18,6,0)); z-index: -1; pointer-events: none; }
.hero__scroll svg { animation: wenk 2.2s ease-in-out infinite; filter: drop-shadow(0 1px 3px rgba(60,18,6,0.6)); }
@keyframes wenk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* Houdt zijn kleur (de algemene link-hover blijft op een iPhone na een tik hangen) en vervaagt na een tik */
.hero__scroll:hover { color: var(--room); }
.hero__scroll { transition: opacity 700ms ease; }
.hero__scroll.is-weg { opacity: 0; pointer-events: none; }
/* Na "Scroll verder" krijgt de aankondiging de focus (voor toetsenbord en schermlezer), zonder rand eromheen */
.aankondiging:focus { outline: none; }

/* Subtiel leven in de savanne */
.scene__gloed { animation: gloed 6s ease-in-out infinite; transform-origin: 248px 252px; }
@keyframes gloed { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.scene__vogels { animation: vogels 26s linear infinite; }
@keyframes vogels { 0% { transform: translateX(-40px); } 100% { transform: translateX(120px); } }
.scene__gras { transform-origin: 50% 100%; animation: wuiven 4.5s ease-in-out infinite; }
.scene__gras--licht { animation-duration: 5.5s; animation-delay: -2s; }
@keyframes wuiven { 0%, 100% { transform: skewX(-1.5deg); } 50% { transform: skewX(1.5deg); } }
/* De dieren lopen heel langzaam naar rechts. Rechts buiten beeld beginnen ze links buiten beeld opnieuw. */
.loper { animation: lopen var(--t) linear infinite; animation-delay: var(--vertraging); }
@keyframes lopen { from { transform: translateX(var(--van)); } to { transform: translateX(var(--tot)); } }

/* ==========================================================================
   3. Schemering: aankondiging en aftellen
   Eén verloop over beide secties. Begint in de donkerste duin van de hero (#8f4a22)
   en zakt weg in de avond (#6a2c22). Daar begint de lucht van het nieuwe hoofdstuk.
   ========================================================================== */
.schemering {
  position: relative;
  background: linear-gradient(180deg, #8f4a22 0%, #843f22 30%, #74331f 70%, #6a2c22 100%);
  color: var(--room);
  text-align: center;
}
.schemering::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); }

.aankondiging { position: relative; padding: var(--ruimte-xl) 36px 0; }
.aankondiging__tekst { max-width: 30ch; margin: 0 auto; font-style: italic; font-size: 21px; line-height: 1.45; text-wrap: balance; text-shadow: var(--schaduw-regel); }

.aftellen { position: relative; padding: var(--ruimte-2xl) var(--ruimte-l) var(--ruimte-3xl); display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-l); }
.aftellen__kop { position: relative; }
.aftellen__kop h2 { font-size: clamp(60px, 18vw, 76px); line-height: 0.9; letter-spacing: 0.05em; text-shadow: var(--schaduw-titel); }
.aftellen__sig { position: absolute; left: 50%; top: 58%; transform: translateX(-50%) rotate(-5deg); display: flex; flex-direction: column; align-items: center; color: var(--goud); white-space: nowrap; }
.aftellen__sig .sig { font-size: 64px; line-height: 1; text-shadow: var(--schaduw-signatuur); }
.aftellen__sig .swash { width: 200px; }

.teller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: var(--ruimte-xl); }
.teller__tegel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--ruimte-m) var(--ruimte-s);
  border-radius: 14px;
  background: var(--licht-vlak);
  border: 1px solid var(--licht-rand);
}
.teller__getal { font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.teller__label { font-size: var(--label); letter-spacing: var(--spatie-krap); color: var(--room); }
/* Smaller dan 375px past MAANDEN niet meer naast drie andere tegels: dan twee bij twee */
@media (max-width: 374px) { .teller { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-s); } }
.teller__klaar { font-size: 40px; letter-spacing: 0.06em; }

.knop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border-radius: 27px; border: 0;
  background: var(--terracotta-diep); color: var(--room);
  box-shadow: var(--schaduw-knop);
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, background 200ms ease, box-shadow 200ms ease;
}
.knop:hover { background: #9a4323; }
.knop:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(60,20,8,0.3), inset 0 1px 0 rgba(255,220,190,0.25); }
/* Uitgeklapt: de knop zakt iets in en wordt donkerder, zodat de keuzes eronder zichtbaar bij hem horen */
.agenda[open] > .knop { background: var(--roest); box-shadow: 0 3px 10px rgba(60,20,8,0.28), inset 0 1px 0 rgba(255,220,190,0.2); }
.knop--vol { width: 100%; }
.knop .caps { font-size: 12px; letter-spacing: var(--spatie-ruim); font-weight: 700; }

.agenda { width: 100%; }
.agenda summary { list-style: none; }
.agenda summary::-webkit-details-marker { display: none; }
.agenda__keuzes { display: flex; flex-direction: column; gap: var(--ruimte-s); margin-top: var(--ruimte-s); }
/* Uitklappen: de drie keuzes vallen kort na elkaar onder de knop uit */
.agenda[open] .agenda__keuze { animation: uitvouwen 300ms var(--uit) backwards; }
.agenda[open] .agenda__keuze:nth-child(2) { animation-delay: 45ms; }
.agenda[open] .agenda__keuze:nth-child(3) { animation-delay: 90ms; }
@keyframes uitvouwen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.agenda__keuze {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--ruimte-l);
  border-radius: 26px; border: 1px solid var(--licht-rand-sterk);
  background: var(--licht-vlak); color: var(--room);
  font-size: 16px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease;
}
.agenda__keuze:hover { background: var(--licht-vlak-hover); color: var(--room); }
.agenda__keuze:active { background: var(--licht-vlak-actief); }
/* Datum en plek altijd op twee regels, hoe breed het scherm ook is */
.aftellen__datum { display: flex; flex-direction: column; align-items: center; font-size: var(--label); line-height: 1.9; letter-spacing: var(--spatie-ruim); color: var(--licht-tekst); }

/* Programma op de algemene site: kies dag of avond, de melding zegt dat de uitnodiging volgt */
.programma { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-s); }
.programma__kop { font-size: var(--label); letter-spacing: var(--spatie-ruim); color: var(--licht-tekst); }
.programma__keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-s); width: 100%; }
.programma__keuze {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--ruimte-m);
  border-radius: 26px; border: 1px solid var(--licht-rand-sterk);
  background: var(--licht-vlak); color: var(--room);
  font-size: 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease;
}
.programma__keuze svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--goud); }
.programma__keuze:hover { background: var(--licht-vlak-hover); }
.programma__keuze:active { background: var(--licht-vlak-actief); }

/* Melding: crème papier zoals het kaartje, midden in beeld */
.melding {
  width: min(100% - 48px, 360px); max-width: none; max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 14px;
  background: var(--creme); color: var(--koffie);
  box-shadow: var(--schaduw-melding);
  overflow: hidden;
}
/* ::backdrop erft in oudere Safari-versies geen custom properties, daarom hier een vaste waarde */
.melding::backdrop { background: rgba(40,14,8,0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.melding[open] { animation: melding-in 450ms var(--uit); }
.melding[open]::backdrop { animation: vervagen-in 300ms ease; }
@keyframes melding-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes vervagen-in { from { opacity: 0; } to { opacity: 1; } }
.melding__papier { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-m); padding: var(--ruimte-xl) var(--ruimte-l) var(--ruimte-l); text-align: center; }
.melding__papier::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); }
.melding__icoon { width: 28px; height: 28px; color: var(--terracotta); }
.melding[data-gasttype="dag"] .melding__icoon--avond, .melding[data-gasttype="avond"] .melding__icoon--dag { display: none; }
.melding__kop { font-size: var(--label); letter-spacing: var(--spatie-kaart); color: var(--roest); }
.melding__tekst { font-size: 26px; line-height: 1.2; text-wrap: balance; }
.melding__sluit { min-width: 160px; margin-top: var(--ruimte-s); }

/* Persoonlijk kaartje (alleen via een persoonlijke link). Het papier krijgt twee halve
   inkepingen bij de perforatie via een masker, de schaduw zit op de buitenste laag zodat
   hij de inkepingen volgt. */
.kaartje { width: 100%; filter: var(--schaduw-kaartje); }
.kaartje__papier {
  --inkeping: radial-gradient(circle 11px at calc(100% - 85px) 0, transparent 96%, #000 100%);
  --inkeping-onder: radial-gradient(circle 11px at calc(100% - 85px) 100%, transparent 96%, #000 100%);
  position: relative; display: flex; min-height: 196px;
  border-radius: 14px; background: var(--creme); color: var(--koffie); text-align: left;
  overflow: hidden;
  -webkit-mask: var(--inkeping) top / 100% 51% no-repeat, var(--inkeping-onder) bottom / 100% 51% no-repeat;
  mask: var(--inkeping) top / 100% 51% no-repeat, var(--inkeping-onder) bottom / 100% 51% no-repeat;
}
.kaartje__papier::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); }
.kaartje__hoofd { position: relative; flex: 1; min-width: 0; padding: 20px var(--ruimte-m) 20px var(--ruimte-l); display: flex; flex-direction: column; gap: var(--ruimte-m); }
/* Wie en wat: binnen een groepje dicht op elkaar, tussen de groepjes lucht */
.kaartje__wie, .kaartje__wat { display: flex; flex-direction: column; gap: var(--ruimte-xs); }
.kaartje__rollen { display: flex; flex-direction: column; gap: var(--ruimte-m); }
.kaartje__en { font-style: italic; color: var(--terracotta-diep); }
/* Twee of meer namen: kleinere letters, zodat "Michael & Sabina" rustig op twee regels past */
.kaartje[data-aantal="2"] .kaartje__naam { font-size: 32px; }
.kaartje[data-aantal="veel"] .kaartje__naam { font-size: 27px; line-height: 1.08; }
.kaartje__kop { font-size: var(--label); letter-spacing: var(--spatie-kaart); color: var(--roest); }
.kaartje__naam { font-size: 38px; line-height: 1; overflow-wrap: break-word; text-wrap: balance; }
.kaartje__lijn { height: 1px; background: var(--inkt-lijn); }
.kaartje__type { font-size: 24px; line-height: 1.1; letter-spacing: 0.06em; color: var(--terracotta-diep); }
.kaartje__tijd { font-size: 15px; line-height: 1.45; color: var(--koffie-licht); }
.kaartje__tijd.is-volgt { display: inline-flex; align-items: center; gap: var(--ruimte-s); font-size: var(--label); letter-spacing: var(--spatie-kaart); text-transform: uppercase; color: var(--roest); }
.kaartje__tijd.is-volgt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.kaartje__plek { font-size: var(--label); letter-spacing: var(--spatie-kaart); color: var(--roest); text-wrap: balance; }
.kaartje__strook {
  position: relative; width: 84px; flex-shrink: 0;
  border-left: 2px dashed var(--inkt-rand); background: rgba(217,151,58,0.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--roest);
}
.kaartje__strook .caps { font-size: var(--label); letter-spacing: var(--spatie-kaart); }
.kaartje__dag { font-size: 48px; line-height: 0.9; color: var(--koffie); }
.kaartje__iconen { display: flex; gap: 6px; margin-top: var(--ruimte-s); color: var(--terracotta); }
.kaartje__icoon { width: 22px; height: 22px; }
body[data-gasttype="dag"] .kaartje__icoon--avond, body[data-gasttype="avond"] .kaartje__icoon--dag { display: none; }
/* Het kaartje noemt datum en plek al */
body.heeft-gast .aftellen__datum { display: none; }
/* Wie een persoonlijke link heeft, ziet zijn gasttype al op het kaartje */
body.heeft-gast .programma { display: none; }
@media (max-width: 374px) {
  .kaartje__hoofd { padding-left: var(--ruimte-m); }
  .kaartje__naam { font-size: 32px; }
  .kaartje[data-aantal="2"] .kaartje__naam { font-size: 28px; }
  .kaartje[data-aantal="veel"] .kaartje__naam { font-size: 24px; }
  .kaartje__type { font-size: 21px; }
}

/* ==========================================================================
   4. Nieuw hoofdstuk: Waar het allemaal begon (krasvlak)
   De lucht begint in de avondkleur waar de schemering eindigt en klaart op naar zand.
   ========================================================================== */
.kras {
  position: relative;
  padding: 64px 28px 34px;
  background: #ecdcc0;
  overflow: hidden;
  text-align: center;
}
.kras::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); z-index: 1; }
.kras__lucht { position: absolute; left: 0; right: 0; top: 0; height: 280px; background: linear-gradient(180deg, #6a2c22 0%, #a2432f 26%, #d06a3c 56%, #e3a071 78%, #ecdcc0 100%); }
.kras__lucht svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; display: block; }
.kras__kop, .kras__lijst, .kras__overslaan { z-index: 2; }
.kras__kop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--room); text-shadow: 0 2px 14px rgba(70,20,10,0.35); }
.kras__kop h2 { font-size: clamp(38px, 11.5vw, 48px); line-height: 1; letter-spacing: 0.06em; text-wrap: balance; }
.kras__kop p { font-size: 36px; line-height: 1; margin-top: -4px; }

.kras__lijst {
  position: relative;
  margin: 28px auto 0;
  width: min(100%, 330px);
  padding: 12px;
  border-radius: 18px;
  background: #fbf3e6;
  box-shadow: 0 18px 40px rgba(90,40,20,0.22), inset 0 2px 0 rgba(255,255,255,0.6);
}
.kras__kaart { position: relative; aspect-ratio: 298 / 380; border-radius: 10px; overflow: hidden; background: #c98f86; }
.kras__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kras__laag { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity 700ms ease; }
.kras__laag:active { cursor: grabbing; }
.kras__kaart.is-onthuld .kras__laag { opacity: 0; pointer-events: none; }

.kras__overslaan { position: relative; margin-top: 20px; }
.tekstknop { background: none; border: 0; padding: 10px 14px; font-size: 10px; letter-spacing: 0.3em; color: var(--roest); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--inkt-onderstreep); }
.tekstknop:hover { text-decoration-color: currentColor; }
.kras.is-klaar .kras__overslaan { display: none; }

/* ==========================================================================
   5. De grote dag (concept)
   Alle onderdelen voor de uitnodiging onder elkaar, voorlopig met "Meer informatie volgt".
   ========================================================================== */
.info { position: relative; padding: 64px 28px 56px; background: var(--creme); }
.info::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: multiply; background-image: var(--korrel); }
.info__kop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.info__kop h2 { font-size: clamp(40px, 12vw, 52px); line-height: 1; letter-spacing: 0.05em; color: var(--terracotta); }
.info__kop .sig { font-size: 40px; line-height: 1; margin-top: -6px; color: var(--amber); }
.info__intro { margin-top: 18px; max-width: 30ch; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--koffie-licht); text-wrap: balance; }
.info__lijst { position: relative; list-style: none; margin: 36px 0 0; padding: 0; }
.info__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--inkt-rand-zacht); scroll-margin-top: 24px; }
.info__item:last-child { border-bottom: 1px solid var(--inkt-rand-zacht); }
.info__icoon { width: 28px; height: 28px; margin-top: 4px; color: var(--terracotta); }
.info__tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.info__titel { margin: 0; font-size: 27px; line-height: 1.1; color: var(--koffie); text-wrap: balance; }
.info__tekst p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--koffie-licht); }
.info__tekst .info__volgt { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 10px; letter-spacing: 0.26em; color: var(--roest); }
.info__volgt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.info__link { align-self: flex-start; font-size: 15px; color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(181,83,44,0.4); }
.info__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.info__link:hover { color: var(--roest); text-decoration-color: currentColor; }

/* ---- Voet ------------------------------------------------------------------ */
.voet { padding: 40px 28px calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; background: var(--creme); }
.voet__namen { margin-top: 0; font-size: 22px; letter-spacing: 0.14em; color: var(--terracotta); }
/* Zolang het krasvlak in later/ staat, sluit de voet direct aan op de schemering */
.voet--avond { position: relative; margin-top: -1px; padding-top: var(--ruimte-s); background: #62281f linear-gradient(180deg, #6a2c22 0%, #5a2420 100%); }   /* vaste kleur als reserve onder het verloop */
.voet--avond::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--korrel); }
.voet--avond .voet__namen { position: relative; color: var(--goud); }

/* ---- Zwevende knoppen -------------------------------------------------------- */
.zwevend {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 14px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; cursor: pointer;
  z-index: 40;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms ease, transform 200ms ease;
}
.js body.is-sealed .zwevend { opacity: 0; pointer-events: none; }
.zwevend.is-klaar { opacity: 0; pointer-events: none; }   /* geluid is afgelopen */
.zwevend.is-opzij { opacity: 0; pointer-events: none; }   /* er schuift een knop onder: even opzij (main.js) */
.zwevend--geluid {
  left: calc(50% - min(50%, var(--kaart-breedte) / 2) + 20px);
  width: 44px; height: 44px;
  /* Geen backdrop-filter: een vervaging achter een vaste knop wordt bij elke scrollbeweging opnieuw berekend */
  background: var(--knop-donker); border: 1px solid var(--licht-rand); color: var(--room);
}
.zwevend--geluid .geluid__uit { display: none; }
.zwevend--geluid[aria-pressed="false"] .geluid__aan { display: none; }
.zwevend--geluid[aria-pressed="false"] .geluid__uit { display: block; }
.zwevend--whatsapp {
  right: calc(50% - min(50%, var(--kaart-breedte) / 2) + 20px);
  width: 52px; height: 52px;
  background: var(--terracotta); color: var(--room);
  box-shadow: 0 6px 18px rgba(40,20,10,0.28);
}
.zwevend:hover { transform: scale(1.05); }
.zwevend--whatsapp:hover { background: var(--roest); }

/* ---- Verschijnen bij scrollen ------------------------------------------------
   Alleen als het script draait (html.js), anders blijft alles gewoon zichtbaar.
   Niet elk blok dezelfde entree: de kop licht op, de tegels van de teller komen als
   rij na elkaar, en het kaartje wordt neergelegd zoals je het uit de envelop op tafel
   legt (van opgetild met een zachte, verre schaduw naar plat met een korte schaduw).
   Andere .reveal-elementen (ook die in later/) krijgen alleen een fade. */
.js .reveal { opacity: 0; transition: opacity 700ms ease; }
.js .reveal.is-visible { opacity: 1; }

.js .teller.reveal { opacity: 1; }
.js .teller.reveal .teller__tegel { opacity: 0; transform: translateY(10px); transition: opacity 450ms ease, transform 650ms var(--uit); }
.js .teller.reveal.is-visible .teller__tegel { opacity: 1; transform: none; }
.js .teller.reveal .teller__tegel:nth-child(2) { transition-delay: 70ms; }
.js .teller.reveal .teller__tegel:nth-child(3) { transition-delay: 140ms; }
.js .teller.reveal .teller__tegel:nth-child(4) { transition-delay: 210ms; }

.js .kaartje.reveal {
  opacity: 0;
  transform: translateY(32px) rotate(-3deg) scale(0.97);
  transform-origin: 20% 100%;
  /* De schaduw beweegt niet mee: een filter animeren is zwaar voor een telefoon tijdens het scrollen */
  transition: opacity 350ms ease, transform 900ms var(--uit);
}
.js .kaartje.reveal.is-visible { opacity: 1; transform: none; }

/* De savanne staat stil onder de envelop, buiten beeld of in een verborgen tabblad (main.js zet .is-stil) */
body.is-stil .scene__gloed, body.is-stil .scene__vogels, body.is-stil .scene__gras, body.is-stil .loper, body.is-stil .hero__scroll svg { animation-play-state: paused; }

/* ---- Minder beweging ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Geen verplaatsing, wel een korte fade zodat verschijnen en uitklappen te zien blijven */
  .js .reveal, .js .teller.reveal .teller__tegel, .js .kaartje.reveal { transform: none; transition: opacity 250ms ease; transition-delay: 0ms; }
  .js .kaartje.reveal { filter: var(--schaduw-kaartje); }
  .envelope__stempel, body.heeft-gast .envelope__stempel { transform: rotate(-11deg); transition: opacity 250ms ease; }  .agenda[open] .agenda__keuze { animation: none; }
  .melding[open], .melding[open]::backdrop { animation: none; }
  .scene__gloed, .scene__vogels, .scene__gras, .loper, .hero__scroll svg, .envelope__hint, .envelope__laag--optil { animation: none; }
  .envelope, .envelope__laag, .site { transition-duration: 200ms; transition-delay: 0ms; }
}