/* Demo-uitnodiging: Lotte & Ruben (verzonnen koppel).
   Zelfde inkt als Jawoord, maar met de stem van een uitnodiging:
   gecentreerd, ruim, met één tekening van de trouwlocatie. */

:root {
  --ink: #5A1A2C;
  --ink-deep: #3E0F1D;
  --cherry: #9E2236;
  --muted: #7A4A55;
  --olive: #56613F;
  --paper: #FFFAF7;
  --blush: #F3D3CE;
  --blush-2: #EBC2BC;
  --white: #FFFFFF;
  --line: rgba(90, 26, 44, .16);
  --field: #9A6F79;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
  --head-h: 92px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cherry); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 3px; text-decoration: none; }
.skip:focus { top: 12px; }
.opt { font-weight: 400; color: var(--muted); }

/* ── Kop: demobalk + menubalk ─────────────────────────────────── */
.dhead { position: sticky; top: 0; z-index: 40; }
.demobar { background: var(--ink); color: var(--blush); font-size: .875rem; line-height: 1.35; text-align: center; padding: 8px var(--gutter); }
.demobar a { color: var(--paper); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
.demobar :focus-visible { outline-color: var(--blush); }
.dtop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px var(--gutter); min-height: 56px;
  background: rgba(255, 250, 247, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dtop__mono { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5rem; text-decoration: none; line-height: 1; }
.dtop__mono span { color: var(--cherry); margin: 0 .08em; font-size: .8em; }
.dtop__nav { display: none; gap: 28px; font-size: .9375rem; }
.dtop__nav a { text-decoration: none; }
.dtop__nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (min-width: 900px) { .dtop__nav { display: flex; } }
.langs { display: inline-flex; border: 1px solid var(--field); border-radius: 999px; padding: 3px; gap: 2px; background: var(--white); }
.langs button {
  min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  font-size: .875rem; font-weight: 500; letter-spacing: .04em; cursor: pointer; color: var(--ink);
}
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.langs button:hover:not([aria-pressed="true"]) { background: var(--blush); }

/* ── Envelop-scherm ───────────────────────────────────────────── */
.opener {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: calc(var(--head-h) + 8px) 20px 24px;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(255, 250, 247, .65), transparent 70%),
    var(--blush);
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.opener.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.opener { --env-w: min(360px, 74vw, calc((100svh - var(--head-h) - 170px) / 1.84)); }
.opener__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-top: calc(var(--env-w) * .42); }
.opener__to { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 4.6vw, 1.75rem); line-height: 1.2; transition: opacity .4s ease; }
.opener__names { font-weight: 500; }
.opener.is-opening .opener__to, .opener.is-opening .opener__hint { opacity: 0; }
.opener__stage { position: relative; }
.opener .env { transition: transform .9s ease; }
.opener.is-done .env { transform: scale(1.06); }
.opener__hint { font-size: .9375rem; color: var(--ink); transition: opacity .4s ease; }

button.env__seal { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
button.env__seal::after {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  border: 1.5px solid rgba(158, 34, 54, .55);
  animation: seal-hint 2.4s ease-out 1.2s infinite;
  pointer-events: none;
}
.opener.is-opening button.env__seal::after { animation: none; opacity: 0; }
@keyframes seal-hint { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
button.env__seal:hover .seal { transform: scale(1.04); }
.seal { transition: transform .25s ease; }
button.env__seal:focus-visible { outline-offset: 6px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.dhero { text-align: center; padding: clamp(48px, 9vw, 104px) var(--gutter) clamp(56px, 8vw, 96px); }
.dhero__kicker { font-size: 1rem; letter-spacing: .04em; color: var(--muted); }
.dhero__names {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(3.4rem, 14.5vw, 9rem); line-height: .95; letter-spacing: -.02em;
  margin: 14px 0 18px;
}
.dhero__names:focus { outline: none; }
.dhero__amp { color: var(--cherry); font-weight: 400; font-size: .72em; }
.dhero__date { font-family: var(--serif); font-weight: 500; font-size: clamp(1.375rem, 3.4vw, 2rem); line-height: 1.25; font-variation-settings: "opsz" 18; }
.dhero__place { margin-top: 4px; color: var(--muted); }
.dhero__art { max-width: 720px; margin: clamp(28px, 5vw, 48px) auto 0; }
.venue { width: 100%; height: auto; display: block; overflow: visible; }
.v-sun { fill: var(--blush); }
.venue path, .venue rect, .venue circle { vector-effect: non-scaling-stroke; }
.v-bird, .v-line, .v-ground, .v-grass, .v-wall, .v-roof, .v-barnroof, .v-trunk { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-roof { fill: var(--paper); }
.v-wall { fill: var(--paper); }
.v-line { stroke-width: 1.1; }
.v-ground { stroke-width: 1.4; }
.v-grass { stroke: var(--olive); stroke-width: 1.1; }
.v-trunk { stroke: var(--olive); stroke-width: 1.3; }
.v-leaf { fill: rgba(86, 97, 63, .14); stroke: var(--olive); stroke-width: 1.3; stroke-linejoin: round; }
.v-win { fill: var(--white); stroke: var(--ink); stroke-width: 1.1; }
.v-shutter { fill: var(--blush-2); stroke: var(--ink); stroke-width: 1; }
.v-door { fill: var(--blush-2); stroke: var(--ink); stroke-width: 1.2; }
.v-gate { fill: var(--blush); stroke: var(--ink); stroke-width: 1.3; }
.v-bird { stroke-width: 1.1; }

.count { display: flex; justify-content: center; gap: clamp(8px, 3vw, 32px); margin: clamp(32px, 5vw, 48px) auto 0; }
.count__unit { display: flex; flex-direction: column; align-items: center; min-width: 68px; }
.count__unit b {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 28;
}
.count__unit span { font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.dhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* ── Knoppen ──────────────────────────────────────────────────── */
.dbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.dbtn:hover { background: var(--cherry); border-color: var(--cherry); }
.dbtn--ghost { background: transparent; color: var(--ink); }
.dbtn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dbtn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dbtn--light:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.dbtn--block { width: 100%; }
.dbtn--small { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.mini { border: 1px solid var(--field); background: var(--white); border-radius: 999px; padding: 2px 12px; min-height: 32px; font-size: .8125rem; cursor: pointer; margin-left: 6px; }
.mini:hover { background: var(--blush); }

/* ── Secties ──────────────────────────────────────────────────── */
.dsec { padding: clamp(64px, 10vw, 120px) var(--gutter); }
.dsec__inner { max-width: 680px; margin: 0 auto; }
.dsec__inner--wide { max-width: 980px; }
.dsec__title {
  font-family: var(--serif); font-style: italic; font-weight: 500; text-align: center;
  font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em;
}
.dsec__title::before {
  content: ""; display: block; width: 84px; height: 22px; margin: 0 auto 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M8 15.5C40 13 80 13 112 15.5' fill='none' stroke='%2356613F' stroke-width='1.4' stroke-linecap='round'/%3E%3Cg fill='%2356613F'%3E%3Cpath transform='translate(22 14.6) rotate(-150)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Cpath transform='translate(34 14.2) rotate(150)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Cpath transform='translate(46 13.9) rotate(-150)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Cpath transform='translate(74 13.9) rotate(30)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Cpath transform='translate(86 14.2) rotate(-30)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Cpath transform='translate(98 14.6) rotate(30)' d='M0 0C3.9-4.2 9.8-4.2 13 0C9.8 4.2 3.9 4.2 0 0Z'/%3E%3Ccircle cx='60' cy='13.6' r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.dsec__intro { text-align: center; margin: 16px auto 0; max-width: 30em; font-size: 1.125rem; }

/* Welkom */
.dwelcome { background: var(--white); }
.dwelcome__inner { max-width: 560px; }
.dwelcome__greeting { font-family: var(--serif); font-style: italic; font-size: 1.75rem; line-height: 1.2; margin-bottom: 16px; }
.dwelcome__text { font-family: var(--serif); font-weight: 450; font-size: 1.3125rem; line-height: 1.6; font-variation-settings: "opsz" 16; }
.dwelcome__deadline { margin-top: 18px; font-weight: 500; }
.dwelcome__sign { margin-top: 28px; }
.dwelcome__names { font-family: var(--serif); font-style: italic; font-size: 1.75rem; line-height: 1.4; }

/* Programma */
.demo-ctl {
  margin: 32px auto 0; padding: 16px 18px; border: 1.5px dashed rgba(90, 26, 44, .4); border-radius: 8px;
  background: rgba(243, 211, 206, .35); font-size: .9375rem; line-height: 1.5;
}
.demo-ctl__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.demo-ctl__opts button {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--field); background: var(--white);
  font-size: .9375rem; cursor: pointer;
}
.demo-ctl__opts button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dprog .dsec__intro { margin-top: 28px; }

.timeline { margin-top: 36px; position: relative; }
.tl { display: grid; grid-template-columns: 76px 22px minmax(0, 1fr); column-gap: 14px; position: relative; padding-bottom: 32px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: calc(76px + 14px + 10px); top: 14px; bottom: -6px; width: 1px; background: rgba(90, 26, 44, .25); }
.tl:last-child::before { display: none; }
.tl__time { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; text-align: right; font-variant-numeric: lining-nums; font-variation-settings: "opsz" 24; }
.tl__dot { width: 13px; height: 13px; margin: 9px auto 0; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--cherry); position: relative; z-index: 1; }
.tl__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.75rem; line-height: 1.15; }
.tl__place { color: var(--olive); font-weight: 500; font-size: .9375rem; margin-top: 2px; }
.tl__text { margin-top: 6px; }
.tl--end .tl__title { font-size: 1.25rem; }
.tl--end .tl__dot { background: var(--cherry); }
@media (min-width: 720px) {
  .tl { grid-template-columns: 120px 22px minmax(0, 1fr); column-gap: 20px; }
  .tl::before { left: calc(120px + 20px + 10px); }
  .tl__time { font-size: 1.75rem; }
}

/* Antwoorden */
.drsvp { background: var(--blush); }
.card { margin-top: 36px; background: var(--white); border-radius: 10px; padding: clamp(22px, 5vw, 44px); box-shadow: 0 18px 40px -24px rgba(62, 15, 29, .35); }
.rsvp { display: grid; gap: 26px; }
.rsvp__more { display: grid; gap: 26px; }
.dfield { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.dfield > label, .dfield > legend, .dfield__label { font-weight: 500; font-size: 1rem; padding: 0; }
.dfield > legend { margin-bottom: 10px; }
.dfield input[type="text"], .dfield input[type="email"], .dfield input[type="search"], .dfield textarea, .seat input {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--field); border-radius: 6px;
}
.dfield textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.dfield input:focus-visible, .dfield textarea:focus-visible, .seat input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(158, 34, 54, .35); }
.dfield [aria-invalid="true"] { border-color: var(--cherry); box-shadow: 0 0 0 1px var(--cherry); }
.dfield__hint { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.dfield__error { font-size: .9375rem; font-weight: 500; color: var(--cherry); line-height: 1.4; }
.dfield__error::before { content: "! "; }
.dfield--other { margin-top: 14px; }

.part { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.part:first-child { border-top: 0; padding-top: 0; }
.part__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.part__name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.part__time { font-size: .875rem; color: var(--muted); }
.part__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; }
.seg { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--field); border-radius: 999px; background: var(--paper); text-align: center; line-height: 1.2;
  transition: background-color .15s, color .15s, border-color .15s;
}
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg--no input:checked + span { background: var(--white); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg input:checked + span::before { content: "✓"; }
.seg--no input:checked + span::before { content: "✕"; font-size: .85em; }
.seg input:focus-visible + span, .dchip input:focus-visible + span { outline: 3px solid var(--cherry); outline-offset: 2px; }
.dparts.is-invalid .seg span { border-color: var(--cherry); }

.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--field); border-radius: 999px; padding: 4px; width: max-content; background: var(--paper); }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); font-size: 1.375rem; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.stepper button:hover { background: var(--blush); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper output { min-width: 44px; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; font-variant-numeric: lining-nums; }

.dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { position: relative; }
.dchip input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.dchip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--field); border-radius: 999px; background: var(--paper); transition: background-color .15s, color .15s; }
.dchip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dchip input:checked + span::before { content: "✓"; font-size: .9em; }

.rsvp__status { font-weight: 500; color: var(--cherry); }
.rsvp__status:empty { display: none; }
.demo-note { font-size: .875rem; color: var(--muted); line-height: 1.45; padding-left: 12px; border-left: 2px dashed rgba(90, 26, 44, .35); }
.rsvp .demo-note { margin-top: -10px; }

.rsvp-done { text-align: center; }
.rsvp-done:focus { outline: none; }
.rsvp-done__seal { width: 76px; height: 76px; display: block; margin: 0 auto 16px; }
.rsvp-done__seal circle { fill: var(--blush); stroke: var(--cherry); stroke-width: 1.5; }
.rsvp-done__seal path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .25s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.rsvp-done__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1; }
.rsvp-done__text { margin: 10px auto 0; max-width: 28em; font-size: 1.125rem; }
.rsvp-done__sum { margin: 24px auto 0; max-width: 420px; text-align: left; border-top: 1px solid var(--line); }
.rsvp-done__sum div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rsvp-done__sum dt { color: var(--muted); }
.rsvp-done__sum dd { font-weight: 500; text-align: right; }
.rsvp-done__mail { margin: 18px auto 0; max-width: 28em; }
.rsvp-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 22px; }
.rsvp-done .demo-note { text-align: left; max-width: 26em; margin: 0 auto; }

/* Zoek je tafel */
.seat { margin-top: 36px; display: grid; gap: 28px; }
@media (min-width: 760px) { .dseat .dsec__inner { max-width: 980px; } .seat { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 40px; } }
.seat__search { display: grid; gap: 8px; }
.seat__search label { font-weight: 500; }
.seat input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.seat__results { min-height: 24px; margin-top: 10px; }
.seat__found { padding: 18px 20px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); }
.seat__found strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.625rem; line-height: 1.2; margin-bottom: 4px; }
.seat__found strong em { font-style: normal; color: var(--cherry); }
.seat__pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seat__pick button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--field); background: var(--white); cursor: pointer; font-size: .9375rem; }
.seat__pick button:hover { background: var(--blush); }
.seat__none { color: var(--ink); }
.seat__plan { background: var(--white); border-radius: 10px; padding: 14px; border: 1px solid var(--line); }
.seat__plan svg { display: block; width: 100%; height: auto; }
.p-room { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.p-head { fill: var(--blush-2); stroke: var(--ink); stroke-width: 1; }
.p-table { fill: var(--blush); stroke: var(--ink); stroke-width: 1; transition: fill .3s; }
.p-chair { fill: var(--white); stroke: var(--ink); stroke-width: .9; transition: fill .3s; }
.p-label { font-family: var(--sans); font-size: 15px; fill: var(--ink); }
.p-label--head { font-family: var(--serif); font-style: italic; font-size: 16px; }
.p-group.is-on .p-table { fill: var(--cherry); stroke: var(--cherry); }
.p-group.is-on .p-chair { fill: var(--blush); stroke: var(--cherry); }
.p-group.is-on .p-label { font-weight: 600; fill: var(--cherry); }
.p-ring { fill: none; stroke: var(--cherry); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0; }
.p-group.is-on .p-ring { opacity: 1; animation: ring 1.6s ease-out 1; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.p-group.is-me .p-chair--me { fill: var(--ink); stroke: var(--ink); }

/* Cadeau */
.dgift { background: var(--white); }
.gift { margin-top: 40px; display: grid; gap: 28px; }
@media (min-width: 820px) { .gift { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } }
.gift__money, .gift__list { border-radius: 10px; padding: clamp(22px, 4vw, 36px); }
.gift__money { background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.gift__list { background: var(--blush); }
.gift__h { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.625rem; line-height: 1.2; }
.gift__qr { position: relative; padding: 10px; background: var(--white); border-radius: 8px; border: 1px solid var(--line); line-height: 0; }
.gift__qr img { width: 168px; height: 168px; image-rendering: pixelated; }
.gift__qrtag { position: absolute; right: -10px; top: -10px; background: var(--cherry); color: var(--paper); font-size: .75rem; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 999px; transform: rotate(6deg); }
.gift__acc { display: grid; gap: 12px; width: 100%; }
.gift__acc div { display: grid; gap: 2px; }
.gift__acc dt { color: var(--muted); font-size: .875rem; }
.gift__acc dd { font-weight: 500; font-size: 1.0625rem; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gift__acc .mini { margin-left: 0; }
#gift-items { margin-top: 16px; display: grid; gap: 10px; }
.gitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border-radius: 8px; }
.gitem__name { font-weight: 500; line-height: 1.35; }
.gitem__state { display: block; font-size: .875rem; color: var(--muted); font-weight: 400; }
.gitem button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.gitem button:hover { background: var(--ink); color: var(--paper); }
.gitem.is-mine { box-shadow: inset 0 0 0 1.5px var(--olive); }
.gitem.is-mine .gitem__state { color: var(--olive); font-weight: 500; }
.gitem.is-taken { background: rgba(255, 255, 255, .55); }
.gitem.is-taken .gitem__label { color: var(--muted); }
.gitem__label { display: block; }
.gitem.is-taken .gitem__label { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Praktisch */
.info { margin-top: 40px; display: grid; gap: 22px; }
@media (min-width: 820px) { .info { grid-template-columns: 1.3fr 1fr 1fr; } }
.info__item { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.info__item h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.info__item .dbtn { justify-self: start; }

/* Zelf maken */
.dmake { background: var(--ink); color: var(--paper); text-align: center; padding: clamp(64px, 10vw, 112px) var(--gutter); }
.dmake :focus-visible { outline-color: var(--blush); }
.dmake__inner { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; }
.dmake__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em; }
.dmake p { color: var(--blush); max-width: 30em; }
.dmake .dbtn { margin-top: 8px; }
.dmake__small { font-size: .9375rem; }

.dfoot { text-align: center; padding: 36px var(--gutter) 110px; font-size: .9375rem; color: var(--muted); display: grid; gap: 8px; }
.dfoot a { color: var(--ink); }

/* Zwevende antwoordknop */
.dfloat {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25;
  transform: translate(-50%, 140%); transition: transform .35s ease;
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(62, 15, 29, .55);
}
.dfloat.is-visible { transform: translate(-50%, 0); }
.dfloat:hover { background: var(--cherry); }

@media (prefers-reduced-motion: reduce) {
  .opener, .opener .env, .opener__to, .opener__hint, .dfloat, .p-table, .p-chair { transition-duration: .01s !important; }
  button.env__seal::after { animation: none; display: none; }
  .rsvp-done__seal path { animation: none; stroke-dashoffset: 0; }
  .p-group.is-on .p-ring { animation: none; }
}

/* Leesbaarheid: Bodoni Moda kiest op grote maten automatisch een optische maat met haarlijnen die op schermen wegvallen. Vast op 28 houdt ze zichtbaar. Elementen met een eigen opsz houden die. */
body { font-variation-settings: "opsz" 28; }