:root {
  --papier: #f5efdf;
  --kaart: #fffaf0;
  --bruin: #4a241c;
  --bruin-zacht: #6f4a3d;
  --goud: #a87713;
  --mosterd: #d89b25;
  --oker: #d9a63c;
  --salie: #86ad93;
  --salie-diep: #547f67;
  --terra: #c7623e;
  --blos: #ecc6a8;
  --lijn: rgba(74, 36, 28, .14);
  --titel: 'Fraunces', 'Cooper Black', Georgia, serif;
  --tekst: 'Asap Condensed', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--bruin);
  font: 400 1.1875rem/1.5 var(--tekst);
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--titel);
  font-variation-settings: 'SOFT' 100;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h3 { font-size: 1.5rem; line-height: 1.1; }
p { margin: 0; }
[hidden] { display: none !important; }

.opschrift {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: .6rem;
}
.intro { max-width: 34rem; margin: 1rem auto 0; font-size: 1.3rem; color: var(--bruin-zacht); text-wrap: pretty; }

/* ---------- aquarelvlekken ---------- */
.vlek {
  position: absolute;
  z-index: 0;
  background: center / contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.vlek--1 { background-image: url(art/blob-mustard.svg); width: 26rem; height: 26rem; left: -15rem; top: -13rem; opacity: .75; }
.vlek--2 { background-image: url(art/blob-sage.svg); width: 36rem; height: 36rem; right: -15rem; top: 4rem; opacity: .7; }
.vlek--3 { background-image: url(art/blob-terra.svg); width: 20rem; height: 20rem; left: 38%; bottom: -13rem; opacity: .6; }
.vlek--4 { background-image: url(art/blob-blush.svg); width: 44rem; height: 44rem; left: 50%; top: 50%; translate: -50% -50%; opacity: .75; }
.vlek--5 { background-image: url(art/blob-ochre.svg); width: 30rem; height: 30rem; right: -13rem; top: -6rem; opacity: .65; }
.vlek--6 { background-image: url(art/blob-sagelight.svg); width: 34rem; height: 34rem; left: -15rem; bottom: 6rem; opacity: .8; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 7vw, 5.500rem) 1.25rem clamp(3rem, 7vw, 5.500rem); }
.hero__in {
  position: relative; z-index: 1;
  max-width: 62rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.kaart-wrap { filter: drop-shadow(0 1.1rem 1.6rem rgba(74, 36, 28, .28)); rotate: -3deg; container-type: inline-size; }
.kaart {
  position: relative;
  aspect-ratio: 780 / 1000;
  background: #eef0d9 url(art/card-front.svg) center / cover no-repeat;
  -webkit-mask: url(art/mask.svg) center / 100% 100% no-repeat;
  mask: url(art/mask.svg) center / 100% 100% no-repeat;
}
.kaart__naam {
  position: absolute; left: 0; right: 0; top: 37%;
  text-align: center;
  font-family: var(--titel);
  font-variation-settings: 'SOFT' 100;
  font-weight: 900;
  font-size: 33cqw;
  line-height: 1;
  letter-spacing: -.03em;
}
.hero__datum { font-size: 1.55rem; margin-top: .5rem; }
.hero__ouders { font-size: 1.35rem; margin-top: 1.4rem; line-height: 1.3; color: var(--bruin-zacht); }
.hero__tekst .knop { margin-top: 2rem; }

.weetjes { list-style: none; margin: 1.800rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.weetjes li { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-weight: 500; }
.weetjes svg { width: 2.4rem; height: 2.4rem; color: var(--goud); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .6rem 1.5rem;
  border: 0; border-radius: 999px;
  background: var(--bruin); color: #fff8ea;
  font: 600 1.15rem/1.1 var(--tekst); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.knop:hover { background: #63342a; transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop:focus-visible, .chip input:focus-visible + span, .veld :focus-visible, .venster__sluit:focus-visible, a:focus-visible {
  outline: 3px solid var(--salie-diep); outline-offset: 3px;
}
.knop:disabled { opacity: .6; cursor: progress; transform: none; }
.knop--zacht { background: transparent; color: var(--bruin); box-shadow: inset 0 0 0 2px var(--bruin); }
.knop--zacht:hover { background: var(--bruin); color: #fff8ea; }
.knop--groot { width: 100%; min-height: 3.4rem; font-size: 1.25rem; }

/* ---------- blokken ---------- */
.blok { position: relative; overflow: hidden; padding: clamp(3.500rem, 8vw, 6rem) 1.25rem; text-align: center; }
.blok__in { position: relative; z-index: 1; max-width: 68rem; margin: 0 auto; }
.blok__in--smal { max-width: 40rem; }

.peetouders { margin-top: 2.500rem; display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 4vw, 2.500rem); flex-wrap: wrap; }
.peetouders__ster { width: 2.2rem; color: var(--goud); }
.medaillon {
  width: min(17rem, 78vw); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: center / contain no-repeat;
  padding: 2.500rem;
}
.medaillon--meter { background-image: url(art/blob-mustard.svg); rotate: -4deg; }
.medaillon--peter { background-image: url(art/blob-sage.svg); rotate: 3deg; }
.medaillon__rol { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .9rem; }
.medaillon__naam { font-family: var(--titel); font-variation-settings: 'SOFT' 100; font-weight: 800; font-size: 1.75rem; line-height: 1.05; text-wrap: balance; }

.blok--bezoek { background: #efe6cf; }
.bezoek__info { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: 1.3rem; }
.bezoek__info a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---------- cadeautip ---------- */
.vrijblijvend {
  max-width: 40rem; margin: 1.5rem auto 0;
  display: grid; gap: .9rem;
  font-size: 1.3rem; color: var(--bruin-zacht); text-wrap: pretty;
}
.cadeaus {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17.500rem, 1fr));
  gap: 1.5rem; text-align: left;
}
.cadeau {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 1.75rem;
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 .5rem 1.4rem -0.8rem rgba(74, 36, 28, .35);
}
.cadeau > p { color: var(--bruin-zacht); margin-top: .5rem; text-wrap: pretty; }
.cadeau__icoon {
  width: 5.500rem; height: 5.500rem; margin: -.4rem 0 .7rem -.6rem;
  display: grid; place-items: center;
  background: center / contain no-repeat;
}
.cadeau__icoon svg { width: 2.5rem; height: 2.5rem; }
.cadeau__icoon--mustard { background-image: url(art/blob-mustard.svg); }
.cadeau__icoon--sage { background-image: url(art/blob-sage.svg); }
.cadeau__icoon--terra { background-image: url(art/blob-terra.svg); color: #3a1810; }
.cadeau__icoon--blush { background-image: url(art/blob-blush.svg); }
.cadeau__icoon--ochre { background-image: url(art/blob-ochre.svg); }
.cadeau__icoon--sagelight { background-image: url(art/blob-sagelight.svg); }
.cadeau__label {
  position: absolute; top: 1.4rem; right: 1.3rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--salie-diep); background: #e3ecd9; border-radius: 999px; padding: .2rem .7rem;
}
.cadeau__voet { margin-top: auto; padding-top: 1.3rem; width: 100%; }
.meter { height: .7rem; border-radius: 999px; background: #eadfc6; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oker), var(--mosterd)); min-width: 0; }
.cadeau__stand { margin-top: .45rem; font-size: 1.05rem; font-weight: 500; color: var(--bruin-zacht); font-variant-numeric: tabular-nums; }
.cadeau__stand--open { font-style: italic; font-weight: 400; }
.cadeau .knop { width: 100%; margin-top: 1rem; }
.cadeau--vol .cadeau__stand { color: var(--salie-diep); font-weight: 600; }
.cadeau--vol .meter span { background: var(--salie); }
.cadeau--eigen { background: transparent; border: 2px dashed rgba(74, 36, 28, .3); box-shadow: none; }
.kleine-lettertjes { max-width: 36rem; margin: 2.500rem auto 0; font-size: 1.05rem; color: var(--bruin-zacht); text-wrap: pretty; }

/* ---------- voet ---------- */
.voet { text-align: center; padding: 3rem 1.25rem 4rem; font-size: 1.3rem; }
.voet strong { font-family: var(--titel); font-variation-settings: 'SOFT' 100; font-weight: 800; font-size: 1.7rem; }
.voet__ster { display: block; width: 2rem; margin: 0 auto 1rem; color: var(--goud); }

/* ---------- meldingen ---------- */
.demo { background: var(--bruin); color: #fff8ea; text-align: center; padding: .5rem 1rem; font-size: 1rem; }
.melding { padding: 1rem 1.25rem; background: #e3ecd9; border-bottom: 1px solid var(--lijn); }
.melding--info { background: #f6e3c4; }
.melding__in { max-width: 46rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; font-size: 1.2rem; }
.melding__in > div { flex: 1; }
.melding__ster { width: 2rem; flex: none; color: var(--goud); }
.melding__sluit { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1.800rem; line-height: 1; color: var(--bruin); text-decoration: none; border-radius: 50%; }
.melding__sluit:hover { background: rgba(74, 36, 28, .1); }

/* ---------- venster ---------- */
.venster {
  width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  border: 0; border-radius: 1.75rem; padding: 0;
  background: var(--kaart); color: var(--bruin);
  box-shadow: 0 2rem 4rem -1rem rgba(74, 36, 28, .5);
}
.venster::backdrop { background: rgba(74, 36, 28, .45); backdrop-filter: blur(3px); }
.venster form { position: relative; padding: 2rem 1.6rem 1.6rem; }
.venster h2 { font-size: 2rem; padding-right: 2.500rem; }
.venster__sluit {
  position: absolute; top: .8rem; right: .8rem; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--bruin);
  font-size: 1.800rem; line-height: 1; cursor: pointer;
}
.venster__sluit:hover { background: rgba(74, 36, 28, .1); }
.venster__noot { margin-top: .8rem; font-size: 1rem; color: var(--bruin-zacht); text-align: center; text-wrap: pretty; }

.bedragen { border: 0; padding: 0; margin: 1.4rem 0 0; min-width: 0; }
.bedragen legend, .veld > span { display: block; padding: 0; font-weight: 600; font-size: 1.1rem; margin-bottom: .5rem; }
.veld em { font-weight: 400; color: var(--bruin-zacht); }
.bedragen__knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem 1.1rem;
  border-radius: 999px; box-shadow: inset 0 0 0 2px var(--lijn);
  font-weight: 600; font-variant-numeric: tabular-nums; background: #fff;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.chip:hover span { box-shadow: inset 0 0 0 2px var(--mosterd); }
.chip input:checked + span { background: var(--mosterd); box-shadow: inset 0 0 0 2px var(--mosterd); color: #2f140e; }
.veld { display: block; margin-top: 1.1rem; }
.veld input, .veld textarea {
  width: 100%; padding: .7rem .9rem;
  border: 2px solid var(--lijn); border-radius: .9rem; background: #fff;
  font: inherit; color: inherit; resize: vertical;
}
.veld input:focus, .veld textarea:focus { border-color: var(--salie-diep); outline: none; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fout { margin-top: 1rem; padding: .7rem .9rem; border-radius: .9rem; background: #f8dccf; color: #7a2413; font-weight: 500; }
.venster .knop--groot { margin-top: 1.3rem; }

/* ---------- klein scherm ---------- */
@media (max-width: 46rem) {
  .hero__in { grid-template-columns: 1fr; text-align: center; }
  .kaart-wrap { width: min(19rem, 76vw); margin: 0 auto; }
  .weetjes { justify-content: center; }
  .vlek--1 { width: 20rem; height: 20rem; left: -12rem; top: -11rem; }
  .vlek--3 { left: -11rem; bottom: -11rem; }
  .vlek--2 { width: 22rem; height: 22rem; right: -14rem; top: 27rem; }
  .peetouders__ster { display: none; }
  .peetouders { gap: 0; }
  .vlek--4 { width: 34rem; height: 34rem; }
  .melding__in { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop { transition: none; }
}