/* Kaartstijl: licht papier, pruimkleurige typografie en bloemen als randdetail. */
:root {
  --paper: #fcf8f4;
  --paper-light: #fffaf6;
  --paper-warm: #f7e9e9;
  --sage: #604858;
  --sage-deep: #523e4d;
  --ink: #604858;
  --body: #665a63;
  --muted: #806f7a;
  --line: #e8d8df;
  --peach: #ffdaa9;
  --pink: #d8509d;
  --lilac: #e6d9f3;
  --blush: #f9e7e8;
}

body { background: var(--paper); }

.site-header {
  height: 72px;
  background: rgba(252, 247, 244, .94);
  border-bottom: 1px solid rgba(96, 72, 88, .11);
  box-shadow: none;
}
.site-header.is-scrolled { box-shadow: 0 8px 26px rgba(96, 72, 88, .08); }
.wordmark { font-size: 1.35rem; letter-spacing: -.045em; }
.desktop-nav a, .mobile-nav summary, .mobile-nav a {
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: 0;
}
.desktop-nav .nav-rsvp { padding: 8px 18px; border-color: #bda5b4; }
.mobile-nav nav { background: #fffaf6; border-color: #e8d8df; }

.hero {
  min-height: calc(100svh - 72px);
  background: linear-gradient(155deg, #f9e7e8 0%, #fbe9e7 43%, #fff0df 100%);
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 24px;
  border: 1px solid rgba(96, 72, 88, .16);
  pointer-events: none;
}
.hero-inner {
  min-height: clamp(660px, calc(100svh - 72px), 850px);
  width: min(1180px, 100%);
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 920px);
  min-height: 0;
  padding: 95px 35px 105px;
  align-items: center;
  text-align: center;
}
.hero-lead {
  margin: 0 0 10px;
  color: #a75789;
  font: italic 400 clamp(1.3rem, 2.1vw, 1.7rem)/1.25 var(--serif);
}
.hero h1 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(4.5rem, 9vw, 8.1rem)/.98 var(--serif);
  letter-spacing: -.065em;
  text-wrap: balance;
  animation: rise-in .8s .06s ease both;
}
.hero h1 span { color: var(--pink); font-size: .84em; font-style: italic; }
.hero-date {
  margin: 30px 0 0;
  color: var(--ink);
  font: 400 clamp(1.02rem, 1.8vw, 1.2rem)/1.4 var(--sans);
  letter-spacing: .015em;
  animation: rise-in .8s .16s ease both;
}
.hero-intro {
  margin: 42px 0 0;
  color: var(--ink);
  font: italic 400 clamp(1.35rem, 2vw, 1.7rem)/1.35 var(--serif);
  animation: rise-in .8s .22s ease both;
}
.hero-links {
  margin: 33px 0 0;
  padding: 0;
  justify-content: center;
  gap: 22px 30px;
  animation: rise-in .8s .28s ease both;
}
.primary-link {
  min-width: 0;
  padding: 12px 20px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fffaf6;
  font-size: .94rem;
  font-weight: 500;
  gap: 28px;
}
.primary-link:hover { background: #795a6c; transform: translateY(-2px); }
.primary-link span { font-size: 1rem; }
.quiet-link {
  color: var(--ink);
  border-bottom-color: #9e7f91;
  font-size: .94rem;
  font-weight: 500;
}
.quiet-link:hover { color: #a23c7a; }
.hero-bloom {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-image: url("assets/kaart-voorzijde.jpg");
  background-repeat: no-repeat;
  opacity: .92;
}
.hero-bloom-left {
  left: 0;
  bottom: -5px;
  width: min(25vw, 330px);
  height: min(56vw, 620px);
  background-size: 1230px auto;
  background-position: left -590px;
  -webkit-mask-image: linear-gradient(to right, #000 56%, transparent 100%);
  mask-image: linear-gradient(to right, #000 44%, transparent 100%);
}
.hero-bloom-right {
  right: 0;
  top: 35px;
  width: min(26vw, 370px);
  height: min(68vw, 740px);
  background-size: 1230px auto;
  background-position: right top -30px;
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at 100% 26%, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 92% at 100% 26%, #000 42%, transparent 100%);
}

.section { padding-block: clamp(95px, 9vw, 135px); }
.story { background: #fffaf6; }
.story::before { display: none; }
.story-grid { width: min(790px, 100%); display: block; }
.story-copy { padding: 0; }
.story-copy h2, .section-aside h2, .venue-content h2, .practical-heading h2, .rsvp-heading h2 {
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(3.1rem, 5vw, 4.5rem);
  letter-spacing: -.055em;
  line-height: 1.06;
}
.story-copy h2 { max-width: 760px; margin-bottom: 28px; font-size: clamp(2.9rem, 4.6vw, 4.1rem); }
.story-copy p { max-width: 680px; font-size: 1.06rem; line-height: 1.75; }
.story-copy .lead { max-width: 740px; font-size: clamp(1.55rem, 2.4vw, 1.95rem); line-height: 1.43; }
.story-copy .signature { margin-top: 35px; color: var(--ink); font-size: 1.55rem; }

.schedule { background: #f9f0ef; }
.schedule-list::before { background: #d5b8c8; }
.schedule-row::before { border-color: var(--pink); background: #f9f0ef; }
.schedule-row:hover, .schedule-row.is-current { background: rgba(255, 255, 255, .6); }
.schedule-row time { color: #9f5a80; }
.schedule-row h3 { font-size: 1.88rem; }
.schedule-row p { font-size: 1rem; line-height: 1.6; }
.text-link { font-weight: 500; }
.schedule-photo { width: min(100%, 330px); margin: 45px 0 0; padding: 7px; border: 1px solid #e7d2dc; background: #fffaf6; }
.schedule-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }

.venue { background: #fff0df; }
.venue-image::after { inset: 18px; border-color: rgba(255, 250, 246, .75); }
.venue-content .venue-lead { color: #a75a85; }
.venue-content p, .practical-answer p, .rsvp-heading p, .rsvp-box p { font-size: 1.06rem; line-height: 1.7; }
.venue-content address { border-top-color: #dfbdc6; }

.practical { background: #fffaf6; }
.practical-item summary { font-size: 1.74rem; }
.practical-item summary:hover, .practical-item[open] summary { color: #a54b83; }
.details-mark { border-color: #c9acbd; }
.practical-answer a { font-size: .94rem; }
.swatch span { font-size: .82rem; line-height: 1.35; }

.rsvp { background: #604858; }
.rsvp::before { display: none; }
.rsvp-heading h2 { color: #fffaf6; }
.rsvp-heading p { color: #f6eaf0; }
.rsvp-box { background: #fffaf6; box-shadow: 16px 16px 0 rgba(255, 218, 169, .16); }
.button { font-size: .94rem; }
.fixed-badge { font-size: .8rem; }
.person-details label { font-size: .94rem; }
.site-footer { background: #604858; font-size: .86rem; letter-spacing: 0; }

@media (max-width: 900px) {
  .hero-bloom-left { width: 200px; height: 400px; background-size: 760px auto; background-position: 0 -350px; }
  .hero-bloom-right { width: 215px; height: 430px; background-size: 760px auto; background-position: right top -20px; }
}
@media (max-width: 760px) {
  .site-header { height: 66px; }
  .hero { min-height: 0; }
  .hero::after { inset: 12px; }
  .hero-inner { min-height: min(760px, calc(100svh - 66px)); }
  .hero-copy { min-height: 0; padding: 115px 28px 145px; }
  .hero h1 { font-size: clamp(3.9rem, 11vw, 6rem); }
  .hero-intro { margin-top: 32px; }
  .hero-links { margin-top: 28px; }
  .hero-bloom-left { width: 185px; height: 300px; background-size: 520px auto; background-position: 0 -197px; }
  .hero-bloom-right { top: 25px; width: 175px; height: 315px; background-size: 520px auto; background-position: right -14px top -26px; }
  .section { padding-block: 90px; }
  .schedule-photo { width: min(100%, 470px); margin-top: 35px; }
  .schedule-photo img { aspect-ratio: 1.5 / 1; }
}
@media (max-width: 520px) {
  .hero-inner { min-height: 680px; }
  .hero-copy { padding: 82px 28px 130px; }
  .hero-lead { font-size: 1.35rem; }
  .hero h1 { max-width: 335px; font-size: clamp(3.95rem, 17vw, 5.3rem); }
  .hero h1 span { display: inline-block; padding-inline: .1em; }
  .hero-date { margin-top: 22px; font-size: .95rem; }
  .hero-intro { margin-top: 29px; font-size: 1.35rem; }
  .hero-links { flex-direction: column; gap: 18px; }
  .hero-bloom-left { bottom: -10px; width: 135px; height: 205px; background-size: 390px auto; background-position: 0 -147px; }
  .hero-bloom-right { top: 20px; width: 132px; height: 240px; background-size: 390px auto; background-position: right -10px top -19px; }
  .story-copy h2, .section-aside h2, .venue-content h2, .practical-heading h2, .rsvp-heading h2 { font-size: clamp(2.85rem, 11vw, 3.8rem); }
  .story-copy h2 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
  .story-copy .lead { font-size: 1.58rem; }
  .schedule-row h3 { font-size: 1.55rem; }
  .schedule-row p { font-size: .96rem; }
  .practical-item summary { font-size: 1.55rem; }
}