@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&display=swap");
/* ============================================
   Daan & Mapi — 03 · 10 · 2026
   Shared stylesheet
   ============================================ */

:root {
  /* Brand spec tokens */
  --bg: #f5f0e8;          /* warm off-white canvas */
  --surface: #fcfaf7;     /* light warm card/surface */
  --fg: #3d3529;          /* dark ink text */
  --muted: #a89a7d;       /* taupe/sand secondary */
  --border: #e3e0da;      /* warm beige borders */
  --accent: #c9a84c;      /* old gold / champagne */
  --accent-dim: #d5cfc2;  /* muted gold-beige wash */

  /* Mapped aliases (legacy names used across the stylesheet) */
  --cream: var(--bg);
  --cream-deep: #ede7da;
  --paper: var(--surface);
  --olive: #5c5e42;       /* stitch design button olive */
  --olive-dark: #4a4c35;
  --olive-soft: #8a9060;
  --ink: var(--fg);
  --ink-soft: #8d8068;
  --gold: var(--accent);
  --line: var(--border);
  --shadow: 0 10px 30px rgba(61, 53, 41, 0.10);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --script: "Amsterdam Four", "AmsterdamFour", "Amsterdam 4", "Alex Brush", "Parisienne", "Imperial Script", cursive;
  --script-weight: 400;
  /* If you buy the "Dashing" font (scratchones), drop the .woff2 in assets/
     and uncomment the @font-face below, then set --script: "Dashing", cursive; */
}
/*
@font-face {
  font-family: "Dashing";
  src: url("../assets/Dashing.woff2") format("woff2");
  font-display: swap;
}
*/

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--cream);
  /* subtle watercolor-paper grain */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' seed='8'/><feColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.40 0 0 0 0 0.30 0 0 0 0.035 0'/></filter><rect width='240' height='240' filter='url(%23p)'/></svg>");
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 28px;
  /* liquid glass: translucent wash + heavy blur + saturation boost */
  background: linear-gradient(180deg, rgba(252, 250, 247, 0.55), rgba(245, 240, 232, 0.35));
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(61, 53, 41, 0.05);
  transition: background .4s ease, box-shadow .4s ease, padding .3s ease;
}
.site-header.scrolled {
  background: linear-gradient(180deg, rgba(252, 250, 247, 0.62), rgba(245, 240, 232, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 30px rgba(61, 53, 41, 0.10);
  padding: 10px 28px;
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(245, 240, 232, 0.95); }
}

/* ---------- Tabs ---------- */
.tab-nav {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  justify-content: center;
  flex: 1;
}
.tab-nav a {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.tab-nav a:hover { color: var(--olive); }
.tab-nav a.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panelIn .6s cubic-bezier(.2, .65, .3, 1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .site-header { justify-content: center; }
  .tab-nav { order: 3; flex-basis: 100%; }
}

.brand {
  font-family: var(--script);
  font-weight: var(--script-weight);
  font-size: 1.85rem;
  color: var(--fg);
  text-decoration: none;
  transition: opacity .3s;
}
.brand:hover { opacity: .7; }

.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch button {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
  transition: color .3s;
}
.lang-switch button:hover { color: var(--olive-dark); }
.lang-switch button.active {
  color: var(--fg);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
}
.lang-switch .sep { color: var(--line); }

/* ---------- Layout ---------- */
.container {
  width: min(960px, 92%);
  margin: 0 auto;
}

main { position: relative; }

section { padding: 70px 0; position: relative; }

/* ---------- Typography ---------- */
.script-names {
  font-family: var(--script);
  font-weight: var(--script-weight);
  color: var(--fg);
  font-size: clamp(3.6rem, 9.5vw, 6rem);
  line-height: 1.08;
  text-align: center;
  padding: 0 .35em; /* room for calligraphic flourishes */
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg);
}

.lead { text-align: center; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }

/* ornament divider */
.ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 22px auto;
  color: var(--accent);
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.ornament::after { background: linear-gradient(270deg, transparent, var(--line)); }

/* ---------- Cinematic invitation hero (brand spec: layout intent) ---------- */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 560px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 30%, rgba(213, 207, 194, .55), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #efe8db 55%, var(--bg) 100%);
  perspective: 1100px;
}

.hero-stage .stage-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 50% 42%, rgba(201, 168, 76, .14), transparent 70%);
  animation: glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* portrait invitation card */
.invite-card {
  position: relative;
  z-index: 2;
  width: min(420px, 84vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow:
    0 30px 70px rgba(61, 53, 41, .18),
    0 6px 18px rgba(61, 53, 41, .10);
  padding: clamp(26px, 4.5vw, 44px) clamp(20px, 3.5vw, 36px);
  text-align: center;
  transform-style: preserve-3d;
  animation: cameraPush 5.5s cubic-bezier(.22, .61, .36, 1) both;
  will-change: transform;
}
@keyframes cameraPush {
  from { transform: scale(1.12) translateY(14px); }
  to { transform: scale(1) translateY(0); }
}

/* gold foil inner frame */
.invite-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 168, 76, .55);
  border-radius: 3px;
  pointer-events: none;
}
.invite-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(201, 168, 76, .25);
  border-radius: 2px;
  pointer-events: none;
}

.invite-card .card-kicker {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.invite-card .script-names { font-size: clamp(2.7rem, 7vw, 3.9rem); }
.invite-card .card-amp { font-size: .5em; color: var(--accent); display: block; line-height: .9; }
.invite-card .card-church {
  width: 100%;
  height: auto;
  display: block;
  margin: 18px auto 6px;
  transform: translateZ(28px);
}
.invite-card .card-date {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: .42em;
  color: var(--fg);
  margin-top: 14px;
}
.invite-card .card-place {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}
.invite-card .card-rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin: 16px auto 0;
  opacity: .7;
  position: relative;
}
.invite-card .card-rule::after {
  content: "❦";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  color: var(--accent);
  padding: 0 8px;
  font-size: .9rem;
}

/* parallax florals floating above the card */
.stage-floral {
  position: absolute;
  z-index: 4;
  width: clamp(130px, 18vw, 230px);
  pointer-events: none;
  opacity: 0;
  animation: floralIn 1.8s ease .4s forwards;
  will-change: transform;
}
.stage-floral img { width: 100%; height: auto; display: block; }
.stage-floral.tl { top: -1%; left: -1%; }
.stage-floral.tr { top: -1%; right: -1%; }
.stage-floral.bl { bottom: -2%; left: -1%; }
.stage-floral.br { bottom: -2%; right: -1%; }

.scroll-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: var(--muted);
  animation: hintBob 2.6s ease-in-out infinite;
}
.scroll-hint svg { width: 22px; height: 22px; }
@keyframes hintBob {
  0%, 100% { transform: translate(-50%, 0); opacity: .65; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

@media (max-width: 640px) {
  .hero-stage { aspect-ratio: auto; min-height: 86vh; padding: 40px 0; }
}

/* ---------- Hero ---------- */
.hero { padding: 60px 0 30px; text-align: center; }

.hero .date {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: .45em;
  color: var(--fg);
  margin-top: 26px;
}
.hero .place {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

.hero-art { margin: 36px auto 0; max-width: 660px; }
.hero-art svg, .hero-art img { width: 100%; height: auto; display: block; }

/* corner florals */
.corner-floral {
  position: absolute;
  width: clamp(140px, 24vw, 260px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: floralIn 1.6s ease .3s forwards;
}
.corner-floral.tl { top: 0; left: 0; transform-origin: top left; }
.corner-floral.tr { top: 0; right: 0; transform-origin: top right; }
.corner-floral.bl { bottom: 0; left: 0; transform-origin: bottom left; }
.corner-floral.br { bottom: 0; right: 0; transform-origin: bottom right; }

@keyframes floralIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* perfect mirror symmetry: left corners are the original, right corners are mirrored */
.corner-floral.tr, .stage-floral.tr { transform: scaleX(-1); }
.corner-floral.bl, .stage-floral.bl { transform: scaleY(-1); }
.corner-floral.br, .stage-floral.br { transform: scale(-1, -1); }

/* ---------- Timeline ---------- */
.timeline { max-width: 700px; margin: 50px auto 0; }

.day-block { display: grid; grid-template-columns: 150px 1fr; gap: 24px; }
.day-block + .day-block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }

.day-label { text-align: left; }
.day-label .day-name {
  font-family: var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
}
.day-label .day-date { font-family: var(--sans); letter-spacing: .25em; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.day-label .sprig { margin-top: 14px; width: 56px; opacity: .8; }

.events { position: relative; padding-left: 64px; }
.events::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line);
}

.event { position: relative; padding: 16px 0; }

.event-icon {
  position: absolute;
  left: -64px;
  top: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive-dark);
  box-shadow: 0 3px 10px rgba(86, 93, 54, .08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.event:hover .event-icon { transform: scale(1.1); box-shadow: 0 6px 16px rgba(86, 93, 54, .16); }
.event-icon svg { width: 22px; height: 22px; }

.event .time { font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .08em; }
.event .name { font-size: 1.25rem; font-weight: 600; color: var(--fg); }
.event .venue { color: var(--ink-soft); font-style: italic; }

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  margin-top: 4px;
  transition: color .3s;
}
.map-link:hover { color: var(--accent); }
.map-link svg { width: 13px; height: 13px; }

/* ---------- Accommodation cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.card .card-art { width: 84px; height: 84px; margin: 0 auto 16px; color: var(--olive-soft); }
.card .card-art svg { width: 100%; height: 100%; }

/* watercolor photo on accommodation cards (stitch designs) */
.card .card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.card h3 { font-size: 1.15rem; font-weight: 600; color: var(--olive-dark); line-height: 1.3; }
.card p { font-size: .95rem; color: var(--ink-soft); margin-top: 10px; flex: 1; }
.card .promo {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--olive-dark);
  letter-spacing: .05em;
}
.card .promo strong { letter-spacing: .12em; }
.card .map-link { margin: 16px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fdfbf7;
  background: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 4px;
  padding: 16px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.btn:hover {
  background: var(--olive-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(61, 53, 41, .25);
}
.btn svg { width: 18px; height: 18px; }

.text-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
  transition: color .3s;
}
.text-link:hover { color: var(--accent); }

/* ---------- CTA section ---------- */
.cta {
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
}
.cta .heart { color: var(--olive-soft); margin-bottom: 14px; }
.cta .heart svg { width: 30px; height: 30px; }
.cta p { color: var(--ink-soft); margin: 14px 0 28px; }
.cta .text-link { margin-top: 20px; }

/* ---------- Footer ---------- */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-footer .love svg { color: var(--accent); }
.site-footer .love { display: inline-flex; align-items: center; gap: 7px; }
.site-footer svg { width: 14px; height: 14px; }

/* ---------- Forms (RSVP) ---------- */
.form-wrap { max-width: 640px; margin: 40px auto 0; }

.form-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  margin-bottom: 34px;
  align-items: start;
}

.q-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive-dark);
}
.q-icon svg { width: 22px; height: 22px; }

.q-label { font-size: 1.05rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 12px; }

.radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color .3s, background .3s, box-shadow .3s;
  font-size: .98rem;
}
.radio-pill:hover { border-color: var(--olive-soft); }
.radio-pill input { accent-color: var(--olive); width: 16px; height: 16px; }
.radio-pill:has(input:checked) {
  border-color: var(--olive);
  background: #f6f4ea;
  box-shadow: 0 3px 10px rgba(86, 93, 54, .10);
}

input[type="text"], textarea, select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 16px;
  transition: border-color .3s, box-shadow .3s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7245' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
input::placeholder, textarea::placeholder { color: #a8ab99; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--olive-soft);
  box-shadow: 0 0 0 3px rgba(107, 114, 69, .12);
}
textarea { min-height: 110px; resize: vertical; }

.form-footer { text-align: center; margin-top: 10px; }
.form-footer .thanks { margin-top: 22px; color: var(--ink-soft); font-style: italic; }

.form-status { text-align: center; margin-top: 18px; font-size: 1rem; min-height: 1.4em; }
.form-status.ok { color: var(--olive-dark); font-weight: 600; }
.form-status.error { color: #9a4b38; }

.success-panel { text-align: center; padding: 60px 0; display: none; }
.success-panel .heart svg { width: 40px; height: 40px; color: var(--olive-soft); }
.success-panel h2 { margin-top: 18px; }
.success-panel p { color: var(--ink-soft); margin-top: 12px; }

/* ---------- Photos page ---------- */
.camera-art {
  max-width: 400px;
  margin: 40px auto;
  /* same canvas color as the page so multiply melts the image's white box into it */
  background: var(--bg);
  isolation: isolate;
}
.camera-art svg, .camera-art img { width: 100%; height: auto; display: block; }
.camera-art img { mix-blend-mode: multiply; }

.how-box {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px 30px;
  margin-top: 60px;
}
.how-box .box-title {
  font-family: var(--sans);
  text-align: center;
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 32px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
  text-align: center;
}
.step .step-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive-dark);
}
.step .step-icon svg { width: 24px; height: 24px; }
.step p { font-size: .98rem; color: var(--ink-soft); }

/* ---------- Scroll reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .65, .3, 1), transform .9s cubic-bezier(.2, .65, .3, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }

/* hero entrance */
.fade-in { animation: fadeUp 1.1s cubic-bezier(.2, .65, .3, 1) both; }
.fade-in.f2 { animation-delay: .25s; }
.fade-in.f3 { animation-delay: .5s; }
.fade-in.f4 { animation-delay: .75s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* gentle float for florals */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.6deg); }
}
.corner-floral svg, .corner-floral img { width: 100%; height: auto; display: block; }
.corner-floral.animate-sway svg, .corner-floral.animate-sway img { animation: sway 9s ease-in-out infinite; transform-origin: inherit; }

/* ---------- Font picker (script font preview tool) ---------- */
.font-picker {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 80;
  font-family: var(--sans);
}
.font-picker summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(61, 53, 41, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--script);
  font-size: 1.3rem;
  color: var(--accent);
  transition: transform .3s;
}
.font-picker summary::-webkit-details-marker { display: none; }
.font-picker summary:hover { transform: scale(1.08); }
.font-picker .fp-menu {
  position: absolute;
  bottom: 54px;
  left: 0;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(61, 53, 41, .18);
  padding: 10px;
}
.font-picker .fp-title {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 4px 0 8px;
}
.font-picker button {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 1.45rem;
  color: var(--fg);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.font-picker button:hover { background: var(--cream-deep); }
.font-picker button.active { border-color: var(--accent); background: #f6f1e2; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-in, .corner-floral { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .day-block { grid-template-columns: 1fr; gap: 10px; }
  .day-label { display: flex; align-items: baseline; gap: 14px; }
  .day-label .sprig { display: none; }
  .events { padding-left: 58px; }
  .form-row { grid-template-columns: 1fr; }
  .q-icon { display: none; }
  .site-footer { flex-direction: column; gap: 6px; text-align: center; }
  .corner-floral { width: 110px; }
}

/* ===== v1.1 visual corrections =====
   - remove the card feeling from the landing screen
   - use the original Carmelitas watercolor as a real image, not a generated illustration
   - replace oversized pasted corners with lighter invitation-style floral sprays
*/
.hero-stage {
  aspect-ratio: auto;
  min-height: 94vh;
  max-height: none;
  padding: clamp(56px, 8vw, 96px) 0 clamp(34px, 5vw, 64px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, rgba(244, 238, 226, .72), transparent 70%),
    linear-gradient(180deg, #fffdfa 0%, var(--bg) 55%, #fffdfa 100%);
  perspective: none;
}
.hero-stage .stage-glow,
#particles { display: none !important; }

.invite-card {
  width: min(1040px, 92vw);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  animation: none;
  transform: none !important;
}
.invite-card::before,
.invite-card::after { display: none !important; }
.invite-card .card-kicker {
  margin-bottom: 8px;
  color: rgba(98, 104, 73, .78);
}
.invite-card .script-names {
  font-size: clamp(4.2rem, 11vw, 7.2rem);
  line-height: .92;
  color: #4b5638;
  text-shadow: none;
}
.invite-card .card-amp {
  margin: .05em 0;
  color: #b8caa8;
}
.invite-card .card-church {
  width: min(920px, 92vw);
  margin: clamp(22px, 4vw, 42px) auto 12px;
  transform: none !important;
  mix-blend-mode: multiply;
  filter: none;
}
.invite-card .card-date {
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  margin-top: 22px;
}
.invite-card .card-place { font-size: .78rem; }
.invite-card .card-rule::after { background: var(--bg); }

.stage-floral {
  width: clamp(150px, 20vw, 275px);
  opacity: .95;
  animation: floralIn 1.3s ease .15s forwards;
}
.stage-floral.tl { top: 20px; left: 18px; }
.stage-floral.tr { top: 20px; right: 18px; }
.stage-floral.bl { bottom: 18px; left: 14px; }
.stage-floral.br { bottom: 18px; right: 14px; }

.corner-floral {
  width: clamp(145px, 21vw, 240px);
  opacity: .9;
}

/* Remove non-implemented photo entry points */
[data-tab="fotos"],
#panel-fotos { display: none !important; }

@media (max-width: 720px) {
  .hero-stage { min-height: 88vh; padding-top: 72px; }
  .stage-floral { width: 150px; opacity: .8; }
  .stage-floral.bl, .stage-floral.br { display: none; }
  .invite-card .script-names { font-size: clamp(4rem, 18vw, 5.8rem); }
  .invite-card .card-church { width: 112vw; max-width: none; margin-left: 50%; transform: translateX(-50%) !important; }
}

/* ===== v1.2 visual refinements =====
   Reference: latest approved static mockup.
   Goals: more invitation-like wildflowers, no hero card feeling, and original church artwork blended into the page.
*/
:root {
  --bg: #fbf7ef;
  --surface: #fffdf8;
  --line: #e8ddcc;
}
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.72), transparent 56%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='10'/><feColorMatrix type='matrix' values='0 0 0 0 0.54 0 0 0 0 0.47 0 0 0 0 0.34 0 0 0 0.026 0'/></filter><rect width='240' height='240' filter='url(%23p)'/></svg>");
}
.hero-stage {
  min-height: 100svh;
  padding: clamp(54px, 7vw, 90px) 0 clamp(38px, 6vw, 76px);
  background:
    radial-gradient(ellipse 52% 35% at 50% 34%, rgba(255,255,255,.82), rgba(255,255,255,.32) 54%, transparent 78%),
    linear-gradient(180deg, #fffdf9 0%, #fbf7ef 68%, #fffdf9 100%);
}
.invite-card {
  width: min(1080px, 94vw);
  max-width: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.invite-card .card-church {
  width: min(1000px, 95vw);
  margin: clamp(18px, 3.2vw, 34px) auto 4px;
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 34px rgba(123, 89, 46, .06));
}
.invite-card .script-names {
  color: #4a5a3b;
  letter-spacing: .01em;
}
.invite-card .card-kicker { display: none; }
.invite-card .card-date { margin-top: 12px; }

/* Smaller, airier wildflower sprays like the invitation border */
.stage-floral {
  width: clamp(150px, 19vw, 300px);
  opacity: .98;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 7px 14px rgba(70, 72, 48, .035));
}
.stage-floral.tl { top: 18px; left: 10px; transform-origin: top left; }
.stage-floral.tr { top: 18px; right: 10px; transform-origin: top right; }
.stage-floral.bl { bottom: 8px; left: -8px; transform-origin: bottom left; }
.stage-floral.br { bottom: 8px; right: -8px; transform-origin: bottom right; }
.stage-floral.tl img, .stage-floral.tr img { max-height: 44vh; object-fit: contain; }
.stage-floral.bl img, .stage-floral.br img { max-height: 34vh; object-fit: contain; }

/* soften global RSVP florals too */
.corner-floral {
  width: clamp(125px, 18vw, 220px);
  opacity: .86;
  filter: drop-shadow(0 7px 14px rgba(70, 72, 48, .035));
}

.butterfly {
  position: absolute;
  z-index: 3;
  width: clamp(28px, 4vw, 54px);
  opacity: .68;
  pointer-events: none;
  animation: butterflyFloat 8.5s ease-in-out infinite;
}
.butterfly.b1 { top: 23%; left: 18%; transform: rotate(-12deg); }
.butterfly.b2 { top: 35%; right: 18%; transform: rotate(13deg) scale(.82); animation-delay: -3s; }
.butterfly img { width: 100%; height: auto; display: block; }
@keyframes butterflyFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 8px -10px; rotate: 4deg; }
}

/* Make the page feel like one long invitation rather than stacked cards */
section { padding-top: 58px; padding-bottom: 58px; }
.card {
  background: rgba(255, 253, 248, .58);
  border-color: rgba(212, 197, 168, .62);
  box-shadow: none;
}
.card:hover { box-shadow: 0 10px 26px rgba(61, 53, 41, .08); }
.cta { background: linear-gradient(180deg, rgba(255,253,248,0), rgba(244,237,225,.72)); }

/* Keep photo functionality hidden until it is implemented */
[data-tab="fotos"],
#panel-fotos,
a[href*="fotos"],
[data-i18n*="photo"],
[data-i18n="cta.photos"] { display: none !important; }

@media (max-width: 720px) {
  .hero-stage { min-height: 94svh; padding-top: 70px; }
  .stage-floral { width: 138px; opacity: .88; }
  .stage-floral.tl { left: -12px; top: 56px; }
  .stage-floral.tr { right: -12px; top: 56px; }
  .stage-floral.bl, .stage-floral.br { width: 120px; display: block; bottom: -6px; }
  .butterfly { display: none; }
  .invite-card .card-church {
    width: 114vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%) !important;
  }
}

/* ===== v1.3 refinements =====
   - Fixed Alex Brush as the only script font and removed font picker in HTML.
   - Floral language closer to the approved mockup: taller, airy wildflower sprays.
   - Original Carmelitas watercolor is used as a real JPEG and visually blended into the warm page.
   - Updated program icons and removed repeated Hotel Luze title below its image.
*/
:root {
  --script: "Alex Brush", cursive;
  --script-weight: 400;
  --bg: #fbf7ef;
  --surface: #fffdf8;
  --olive: #596044;
  --olive-dark: #465137;
  --accent: #b89755;
}

body {
  background-color: var(--bg);
}

.brand {
  font-family: var(--script);
  font-size: 2.05rem;
  letter-spacing: .02em;
  color: #4a563c;
}

.invite-card .script-names {
  font-family: var(--script);
  font-weight: 400;
  color: #4a563c;
  font-size: clamp(5.2rem, 12.5vw, 8.4rem);
  line-height: .82;
  letter-spacing: .01em;
}

.invite-card .card-amp {
  font-size: .48em;
  margin: .06em 0 .02em;
  color: #7f8d6d;
}

/* Original church artwork: no generated replacement, no card, no white rectangle feeling */
.invite-card .card-church {
  width: min(1040px, 96vw);
  max-width: none;
  margin: clamp(18px, 3vw, 30px) auto 2px;
  mix-blend-mode: multiply;
  filter: saturate(.97) contrast(.99) brightness(1.015);
  opacity: .98;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.hero-stage {
  background:
    radial-gradient(ellipse 58% 34% at 50% 38%, rgba(255,255,255,.70), rgba(255,255,255,.20) 58%, transparent 76%),
    linear-gradient(180deg, #fffdf9 0%, #fbf7ef 68%, #fffdf9 100%);
}

/* Wildflower frame: closer to the last approved static mockup */
.stage-floral {
  width: clamp(190px, 24vw, 390px);
  opacity: .94;
  filter: drop-shadow(0 10px 18px rgba(73, 77, 55, .035));
  z-index: 4;
}
.stage-floral.tl {
  top: 54px;
  left: -34px;
  transform: rotate(-4deg) !important;
}
.stage-floral.tr {
  top: 58px;
  right: -32px;
  transform: scaleX(-1) rotate(-4deg) !important;
}
.stage-floral.bl {
  bottom: -34px;
  left: -46px;
  width: clamp(220px, 28vw, 430px);
  transform: scaleY(-1) rotate(-6deg) !important;
}
.stage-floral.br {
  bottom: -34px;
  right: -46px;
  width: clamp(220px, 28vw, 430px);
  transform: scale(-1, -1) rotate(-6deg) !important;
}
.stage-floral img { max-height: none !important; }

.corner-floral {
  width: clamp(160px, 22vw, 290px);
  opacity: .9;
}
.corner-floral.tl { left: -26px; top: 34px; }
.corner-floral.tr { right: -26px; top: 34px; }

.butterfly {
  opacity: .72;
  filter: drop-shadow(0 4px 7px rgba(83,74,50,.08));
}
.butterfly.b1 { top: 18%; left: 19%; }
.butterfly.b2 { top: 28%; right: 19%; }

/* Timeline icon polish */
.event-icon {
  color: #b38d43;
  background: rgba(255, 253, 248, .78);
  border-color: rgba(190, 157, 84, .42);
}
.event-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.38;
}
.event:hover .event-icon {
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(157, 124, 61, .13);
}

/* Hotel cards: keep the image + copy; avoid repeated title feel on Luze card */
.card.d3 .card-photo + p {
  margin-top: 14px;
}

/* Make sure the removed font picker can never appear from cached markup */
.font-picker { display: none !important; }

@media (max-width: 720px) {
  .invite-card .script-names {
    font-size: clamp(4.7rem, 20vw, 6.6rem);
  }
  .invite-card .card-church {
    width: 118vw;
    margin-left: 50%;
    transform: translateX(-50%) !important;
  }
  .stage-floral {
    width: 165px;
    opacity: .82;
  }
  .stage-floral.tl { left: -50px; top: 76px; }
  .stage-floral.tr { right: -50px; top: 76px; }
  .stage-floral.bl, .stage-floral.br {
    width: 190px;
    bottom: -44px;
  }
  .butterfly { display: none; }
}

/* ===== v1.4 refinements =====
   - Uses Alex Brush permanently; no source picker.
   - Floral frame is based on the approved mockup: watercolor side sprays, not abstract SVG stems.
   - Original church watercolor is alpha-blended and placed below the date/place.
   - Timeline icons are clearer fine-line drawings.
   - Hotel Luze title restored below image; title inside image is cropped out.
*/
:root {
  --script: "Alex Brush", cursive;
  --bg: #fbf7ef;
  --surface: #fffdf8;
  --fg: #342f26;
  --olive: #596044;
  --olive-dark: #465137;
  --accent: #b89755;
}

body { background-color: var(--bg); }
.font-picker, .butterfly { display: none !important; }

#panel-home {
  position: relative;
  overflow: hidden;
}
#panel-home::before,
#panel-home::after {
  content: "";
  position: absolute;
  top: 80px;
  bottom: 40px;
  width: min(18vw, 190px);
  pointer-events: none;
  z-index: 0;
  opacity: .92;
  background-repeat: repeat-y;
  background-size: 100% auto;
  filter: drop-shadow(0 8px 18px rgba(80, 72, 50, .035));
}
#panel-home::before {
  left: 0;
  background-image: url("../assets/floral-side-left.png");
  background-position: left top;
}
#panel-home::after {
  right: 0;
  background-image: url("../assets/floral-side-right.png");
  background-position: right top;
}
#panel-home > * { position: relative; z-index: 1; }

.site-header {
  background: rgba(251, 247, 239, .64);
  box-shadow: none;
}
.brand,
.script-names,
.invite-card .script-names {
  font-family: "Alex Brush", cursive !important;
  font-weight: 400 !important;
}

.hero-stage {
  min-height: auto;
  padding: clamp(60px, 8vw, 98px) 0 clamp(18px, 3vw, 34px);
  background: radial-gradient(ellipse 58% 30% at 50% 36%, rgba(255,255,255,.62), rgba(255,255,255,.18) 58%, transparent 76%);
}
.invite-card {
  width: min(1100px, 94vw);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.invite-card .script-names {
  color: #4a563c;
  font-size: clamp(5.4rem, 12vw, 8.4rem);
  line-height: .82;
  margin-bottom: .08em;
}
.invite-card .card-amp {
  color: #7f8d6d;
  font-size: .46em;
  margin: .02em 0;
}
.invite-card .card-date {
  margin-top: 14px;
  color: #1f1d19;
  letter-spacing: .32em;
}
.invite-card .card-place {
  margin-top: 8px;
  color: #2e2d25;
}
.invite-card .card-rule { margin: 14px auto 6px; }
.invite-card .card-church {
  display: block;
  width: min(990px, 96vw);
  margin: clamp(18px, 3.1vw, 30px) auto 0;
  opacity: .99;
  mix-blend-mode: normal !important;
  filter: saturate(.98) contrast(.99) brightness(1.015) drop-shadow(0 14px 32px rgba(107, 82, 46, .035));
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Replace the abstract SVG corners with cropped watercolor floral sprays from the approved mockup. */
.stage-floral { opacity: .95; z-index: 2; filter: drop-shadow(0 8px 18px rgba(80,72,50,.035)); }
.stage-floral.tl { width: clamp(150px, 22vw, 260px); top: 54px; left: 12px; transform: none !important; }
.stage-floral.tr { width: clamp(150px, 22vw, 264px); top: 54px; right: 12px; transform: none !important; }
.stage-floral.bl { width: clamp(170px, 24vw, 280px); bottom: -12px; left: 4px; transform: none !important; }
.stage-floral.br { width: clamp(170px, 24vw, 274px); bottom: -12px; right: 4px; transform: none !important; }
.stage-floral img { width: 100%; height: auto; max-height: none !important; object-fit: contain; }

/* Keep content readable over side florals. */
.container { position: relative; z-index: 2; }
#programa .container,
#alojamiento .container,
.cta .container { width: min(900px, 86%); }

/* Fine-line icon style: warmer, clearer, less emoji-like. */
.event-icon {
  color: #b38d43;
  background: rgba(255, 253, 248, .86);
  border: 1px solid rgba(181, 142, 67, .42);
  box-shadow: 0 4px 14px rgba(154, 121, 56, .045);
}
.event-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.35;
}
.event .name { color: #2f2b23; }
.event .venue { color: #6d634f; }

/* Luze card: title belongs below image; crop the image if the source contains a label at the bottom. */
.card.d3 .card-photo {
  height: 128px;
  object-fit: cover;
  object-position: center 16%;
}
.card.d3 h3 {
  margin-top: 12px;
}
.card h3 { color: #3f452f; }

@media (max-width: 980px) {
  #panel-home::before,
  #panel-home::after { opacity: .62; width: 118px; }
  #programa .container,
  #alojamiento .container,
  .cta .container { width: min(860px, 92%); }
}
@media (max-width: 720px) {
  #panel-home::before,
  #panel-home::after { display: none; }
  .hero-stage { padding-top: 74px; }
  .stage-floral.tl { left: -10px; top: 58px; width: 145px; }
  .stage-floral.tr { right: -10px; top: 58px; width: 145px; }
  .stage-floral.bl,
  .stage-floral.br { display: none; }
  .invite-card .script-names { font-size: clamp(4.8rem, 21vw, 6.8rem); }
  .invite-card .card-church { width: 116vw; margin-left: 50%; transform: translateX(-50%) !important; }
}

/* =========================================================
   v1.5 refinements
   - one single static floral layer only
   - no hidden mockup/text fragments
   - original church artwork placed after date/place and blended
   - timeline icons replaced with clean line-art style
   - 4 hotel cards in one row on desktop, 1 column on mobile
   ========================================================= */

:root { --script: "Alex Brush", cursive; }

/* Remove older flower layers and animated overlays */
#panel-home::before,
#panel-home::after,
.stage-floral,
.corner-floral,
.butterfly,
#particles { display: none !important; }

/* Single static floral frame. It scrolls naturally with the invitation and does not react to the mouse. */
.page-floral {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 78px;
  width: clamp(135px, 15vw, 210px);
  opacity: .94;
  filter: saturate(.98) contrast(.98);
}
.page-floral img {
  display: block;
  width: 100%;
  height: auto;
}
.page-floral-left { left: 0; }
.page-floral-right { right: 0; }

main, .tab-panel, section { position: relative; }
#panel-home > section { z-index: 1; }
#panel-home .container,
.invite-card { position: relative; z-index: 2; }

/* Main page must feel like one continuous invitation, not a card. */
.hero-stage {
  min-height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: clamp(76px, 8vw, 104px) 0 16px !important;
  background: transparent !important;
  overflow: visible !important;
  perspective: none !important;
}
.hero-stage .stage-glow { display: none !important; }
.invite-card {
  width: min(1100px, 92vw) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.invite-card .script-names,
.brand {
  font-family: "Alex Brush", cursive !important;
  font-weight: 400 !important;
}
.invite-card .script-names {
  color: #48533c !important;
  font-size: clamp(4.7rem, 10.8vw, 7.7rem) !important;
  line-height: .82 !important;
  margin: 0 auto .08em !important;
}
.invite-card .card-amp {
  color: #7b8764 !important;
  font-size: .48em !important;
  margin: .02em 0 !important;
}
.invite-card .card-date {
  margin-top: 16px !important;
  color: #25231d !important;
  letter-spacing: .34em !important;
}
.invite-card .card-place {
  color: #353126 !important;
  letter-spacing: .22em !important;
}
.invite-card .card-rule { margin: 14px auto 2px !important; }
.invite-card .card-church {
  display: block !important;
  width: min(1040px, 96vw) !important;
  max-width: none !important;
  margin: clamp(20px, 3vw, 34px) auto 0 !important;
  opacity: .985 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: saturate(.96) contrast(.985) brightness(1.01) !important;
  mix-blend-mode: multiply !important;
}
.scroll-hint { display: none !important; }

/* More space around the program, with clean line icons. */
#programa { padding-top: 34px !important; }
.event-icon {
  color: #606745 !important;
  background: rgba(255,253,248,.78) !important;
  border: 1px solid rgba(151,139,101,.42) !important;
  box-shadow: 0 4px 12px rgba(76,72,50,.04) !important;
}
.event-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 2.2 !important;
}
.timeline::before { background: rgba(132,126,94,.38) !important; }
.event::before { border-color: rgba(132,126,94,.38) !important; }

/* Hotel cards: 4 columns on desktop, 1 column on mobile. */
.cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.card {
  min-width: 0 !important;
  padding: 20px 16px 22px !important;
}
.card-photo {
  width: 100% !important;
  height: 132px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 2px !important;
  background: transparent !important;
}
.card.d3 .card-photo,
.card-photo.luze-photo {
  height: 132px !important;
  object-fit: cover !important;
  object-position: center 12% !important;
}
.card h3 {
  display: block !important;
  margin: 12px auto 8px !important;
  min-height: 2.3em;
}
.card.d3 h3 { margin-top: 12px !important; }

@media (max-width: 1120px) {
  .page-floral { opacity: .65; width: clamp(110px, 12vw, 150px); }
}
@media (max-width: 820px) {
  .page-floral { display: none !important; }
  .cards { grid-template-columns: 1fr !important; max-width: 420px; margin-left: auto; margin-right: auto; }
  .card-photo, .card.d3 .card-photo, .card-photo.luze-photo { height: 168px !important; }
  .invite-card .script-names { font-size: clamp(4.4rem, 21vw, 6.4rem) !important; }
  .invite-card .card-church {
    width: 112vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   v1.6 refinements
   ========================================================= */
:root { --script: "Alex Brush", cursive; }

/* One elegant floral system only: fixed watercolor side sprays with soft fade masks.
   They move very slightly on scroll through CSS vars set in main.js. */
.page-floral {
  position: fixed !important;
  top: 10vh !important;
  width: clamp(130px, 16vw, 235px) !important;
  height: 86vh !important;
  opacity: var(--floral-opacity, .88) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, var(--floral-y, 0px), 0) !important;
  transition: opacity .45s ease-out;
  filter: saturate(.95) contrast(.96) drop-shadow(0 12px 20px rgba(70,65,48,.035)) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  overflow: visible !important;
}
.page-floral img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.page-floral-left { left: 0 !important; }
.page-floral-right { right: 0 !important; }

/* remove small sprigs/separators the user disliked */
.ornament, .sprig { display: none !important; }
.section-title { margin-bottom: 26px; }
#programa .section-title { margin-bottom: 42px; }
.day-label .day-date { margin-top: 7px; }

/* Intro text larger and more readable */
.lead { font-size: clamp(1.18rem, 2vw, 1.42rem) !important; line-height: 1.72 !important; color: #51493d !important; }
.hero .lead { max-width: 760px !important; }

/* keep the original watercolor visually integrated with the warm paper */
.invite-card .card-church { mix-blend-mode: multiply !important; opacity: .96 !important; filter: saturate(.94) contrast(.985) brightness(1.025) !important; }

/* Use refined clean-line icon style rather than emoji-like drawings */
.event-icon {
  width: 50px !important; height: 50px !important;
  color: #4f563a !important;
  background: rgba(255,253,248,.78) !important;
  border-color: rgba(180,159,106,.48) !important;
  box-shadow: none !important;
}
.event-icon svg { width: 30px !important; height: 30px !important; stroke-width: 1.9 !important; }
.event:hover .event-icon { transform: none !important; box-shadow: none !important; }
.events::before { background: rgba(122,121,86,.44) !important; }
.day-block + .day-block { border-top-color: rgba(206,194,167,.6) !important; }

/* Harmonise location links: all venue events use 'Ver ubicación'. */
.map-link { color: #38352c !important; text-decoration-color: #b89755 !important; }
.map-link:hover { color: #8b713d !important; }

/* Dress code */
.dress-code-section { padding: 34px 0 52px !important; text-align: center; }
.dress-code-section .container {
  max-width: 660px;
  padding: 34px 28px 38px;
  border-top: 1px solid rgba(196,178,137,.5);
  border-bottom: 1px solid rgba(196,178,137,.5);
}
.dress-code-main {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4a563c;
  margin-top: -4px;
}
.dress-code-note { color: #6d634f; margin: 12px auto 0; max-width: 520px; font-size: 1.08rem; }

/* Accommodation: 4 columns on desktop, one-by-one on mobile. */
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; }
.card { background: rgba(255,253,248,.62) !important; border-color: rgba(214,197,161,.62) !important; }
.card.d3 .card-photo, .card-photo.luze-photo { height: 118px !important; object-fit: cover !important; object-position: center top !important; }
.card h3 { min-height: auto !important; }

@media (max-width: 1120px) {
  .page-floral { width: clamp(100px, 12vw, 150px) !important; opacity: .55 !important; }
}
@media (max-width: 820px) {
  .page-floral { display: none !important; }
  .cards { grid-template-columns: 1fr !important; max-width: 430px !important; }
  .card-photo, .card.d3 .card-photo, .card-photo.luze-photo { height: 172px !important; }
  .dress-code-section .container { width: min(430px, 92%); }
}


/* =========================================================
   v1.7 refinements
   - invitation floral assets supplied by Mapi, composed in CSS with gentle scroll motion
   - subtle dress code moved after hotels
   - Luze card image crop removes embedded title below the illustration
   ========================================================= */
:root { --script: "Alex Brush", cursive; }

/* Use only the real invitation flowers. No extra generated flower layer. */
.page-floral {
  position: fixed !important;
  top: -12vh !important;
  width: clamp(180px, 20vw, 310px) !important;
  height: 135vh !important;
  opacity: var(--floral-opacity, .92) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, var(--floral-y, 0px), 0) !important;
  transition: opacity .35s ease-out;
  filter: saturate(1.03) contrast(.98) drop-shadow(0 10px 18px rgba(60,52,38,.025)) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  overflow: visible !important;
}
.page-floral img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.page-floral-left { left: -18px !important; }
.page-floral-right { right: -18px !important; }

/* Hide all old decorative layers. */
.stage-floral, .corner-floral, #particles, .hero-stage .stage-glow { display: none !important; }
.ornament, .sprig { display: none !important; }

/* Keep page feeling like paper, not like cards. */
.hero-stage {
  background: var(--cream) !important;
  min-height: auto !important;
  aspect-ratio: auto !important;
  padding: 86px 0 22px !important;
  overflow: visible !important;
}
.invite-card {
  width: min(880px, 92vw) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}
.invite-card::before, .invite-card::after { display: none !important; }
.invite-card .script-names { font-size: clamp(5.6rem, 12vw, 9rem) !important; line-height: .88 !important; color: #4d583d !important; }
.invite-card .card-amp { font-size: .28em !important; line-height: 1 !important; color: #93a682 !important; }
.invite-card .card-date { margin-top: 30px !important; font-family: var(--serif) !important; font-size: clamp(1.35rem, 3vw, 2rem) !important; letter-spacing: .32em !important; color: #2e2b24 !important; }
.invite-card .card-place { font-family: var(--serif) !important; color: #2e2b24 !important; letter-spacing: .32em !important; }
.invite-card .card-rule { display: block !important; margin: 16px auto 6px !important; }
.invite-card .card-church {
  width: min(980px, 92vw) !important;
  max-width: none !important;
  margin: 22px auto 0 !important;
  mix-blend-mode: multiply !important;
  opacity: .96 !important;
  filter: saturate(.94) contrast(.99) brightness(1.02) !important;
}
.hero { padding-top: 18px !important; }
.lead { font-size: clamp(1.24rem, 2.1vw, 1.52rem) !important; line-height: 1.68 !important; color: #51493d !important; }

/* Timeline cleaned: no little floral dividers. Icons use elegant line art. */
#programa { padding-top: 38px !important; }
#programa .section-title { margin-bottom: 42px !important; }
.timeline { max-width: 720px !important; }
.day-block + .day-block { border-top-color: rgba(190,176,138,.55) !important; }
.event-icon {
  color: #48523b !important;
  background: rgba(255,253,248,.82) !important;
  border: 1px solid rgba(190,166,110,.55) !important;
  box-shadow: none !important;
  width: 52px !important;
  height: 52px !important;
}
.event-icon svg { width: 31px !important; height: 31px !important; stroke-width: 2.1 !important; }
.event:hover .event-icon { transform: none !important; box-shadow: none !important; }
.events::before { background: rgba(130,128,95,.44) !important; }
.event .name { color: #332f27 !important; }
.event .venue { color: #776d59 !important; }
.map-link { color: #38352c !important; text-decoration-color: #b89755 !important; }

/* Accommodation: desktop 4 columns, mobile one-by-one. */
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; }
.card { background: rgba(255,253,248,.58) !important; border-color: rgba(214,197,161,.64) !important; }
.card-photo { background: rgba(255,255,255,.36) !important; }
.card .card-photo.luze-photo {
  height: 112px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 2% !important;
  clip-path: inset(0 0 22% 0) !important;
  margin-bottom: -10px !important;
}
.card.d3 h3 { margin-top: 10px !important; }

/* Subtle dress code after accommodation. */
.dress-code-section {
  padding: 24px 0 38px !important;
  text-align: center !important;
}
.dress-code-section .container {
  max-width: 720px !important;
  padding: 20px 28px 22px !important;
  border-top: 1px solid rgba(196,178,137,.45) !important;
  border-bottom: 1px solid rgba(196,178,137,.45) !important;
  background: transparent !important;
}
.dress-code-section .section-title {
  font-size: clamp(1.05rem, 2vw, 1.28rem) !important;
  letter-spacing: .24em !important;
  margin-bottom: 8px !important;
}
.dress-code-main {
  font-size: clamp(1.18rem, 2.2vw, 1.5rem) !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: #4a563c !important;
  margin: 0 !important;
}
.dress-code-note {
  font-size: 1.02rem !important;
  color: #6d634f !important;
  margin: 8px auto 0 !important;
  max-width: 560px !important;
}

@media (max-width: 1120px) {
  .page-floral { width: clamp(150px, 17vw, 220px) !important; opacity: .78 !important; }
}
@media (max-width: 820px) {
  .page-floral { display: none !important; }
  .hero-stage { padding-top: 56px !important; }
  .invite-card .script-names { font-size: clamp(4.8rem, 22vw, 6.8rem) !important; }
  .invite-card .card-church { width: 116vw !important; margin-left: 50% !important; transform: translateX(-50%) !important; }
  .cards { grid-template-columns: 1fr !important; max-width: 430px !important; margin-left: auto !important; margin-right: auto !important; }
  .card .card-photo.luze-photo { height: 150px !important; clip-path: inset(0 0 18% 0) !important; }
  .dress-code-section .container { width: min(430px, 92%) !important; }
}


/* =========================================================
   v1.7 update requested: composed invitation florals, subtle dress code,
   and corrected Hotel Luze image treatment.
   ========================================================= */

/* Use the supplied invitation flower sheets as composed side borders.
   They are not pasted as full screenshots: the images below are newly composed
   from multiple cropped flower clusters. */
.page-floral {
  position: fixed !important;
  top: -12vh !important;
  bottom: auto !important;
  width: clamp(180px, 25vw, 420px) !important;
  height: 130vh !important;
  z-index: 0 !important;
  opacity: var(--floral-opacity, .86) !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: translate3d(0, var(--floral-y, 0px), 0) !important;
  transition: opacity .45s ease-out !important;
  filter: none !important;
}
.page-floral-left { left: max(-145px, -7vw) !important; }
.page-floral-right { right: max(-145px, -7vw) !important; }
.page-floral-left img,
.page-floral-right img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}
.page-floral-left img { content: url('../assets/floral-composed-left.png'); }
.page-floral-right img { content: url('../assets/floral-composed-right.png'); }

/* Remove all previous corner/stage floral layers to avoid double-layer effect. */
.stage-floral,
.corner-floral,
.floral-frame,
.floral-spray,
.floral-clean,
.floral-mockup,
.butterfly,
.bee {
  display: none !important;
}

/* Let the floral frame breathe around the central invitation column. */
main, .site-header, footer { position: relative; z-index: 2; }
.container { max-width: 1040px; }

/* Keep the church printed on the same paper tone. */
.card-church,
.church-image,
.hero-church,
img[src*="church-original"] {
  mix-blend-mode: multiply;
  filter: saturate(.96) contrast(.98) brightness(1.015);
}

/* Hotel cards: 4 columns on desktop, 1 column on mobile. */
.cards,
.stay-grid,
.accommodation-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.card { min-width: 0 !important; }
.card-photo {
  width: 100% !important;
  height: 156px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
.card .card-photo.luze-photo {
  height: 156px !important;
  object-fit: cover !important;
  object-position: center top !important;
  clip-path: inset(0 0 19% 0) !important; /* hides the text printed inside the image */
  margin-bottom: -30px !important;        /* preserves same visual image block height */
}
.card.d3 h3,
.card:has(.luze-photo) h3 {
  margin-top: 18px !important;
}

/* Dress code: subtle note after accommodation, not a large block. */
.dress-code-section {
  padding: 18px 0 10px !important;
  margin: 6px auto 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dress-code-section .container {
  max-width: 720px !important;
  text-align: center !important;
}
.dress-code-section .section-title {
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  letter-spacing: .14em !important;
  margin-bottom: 6px !important;
}
.dress-code-main {
  font-size: .98rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--olive, #596345) !important;
  margin: 4px 0 8px !important;
  font-weight: 600 !important;
}
.dress-code-note {
  max-width: 560px !important;
  margin: 0 auto !important;
  font-size: 1.03rem !important;
  line-height: 1.65 !important;
  color: rgba(56,48,38,.75) !important;
}

/* Text intro slightly larger. */
.lead { font-size: clamp(1.18rem, 2vw, 1.36rem) !important; line-height: 1.7 !important; }

@media (max-width: 780px) {
  .page-floral {
    position: absolute !important;
    top: 90px !important;
    height: 1050px !important;
    width: 170px !important;
    opacity: .62 !important;
    transform: none !important;
  }
  .page-floral-left { left: -92px !important; }
  .page-floral-right { right: -92px !important; }
  .cards,
  .stay-grid,
  .accommodation-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .card-photo,
  .card .card-photo.luze-photo { height: 178px !important; }
  .card .card-photo.luze-photo { margin-bottom: -34px !important; }
  .dress-code-section { padding-top: 6px !important; }
}


/* =========================================================
   v1.8 refinements
   - Uses the individual flower clusters from the invitation assets,
     composed into continuous side borders with gentle scroll drift.
   - Removes "Formal / Gala" subtitle and dress-code separator lines.
   - Keeps all hotel images aligned and replaces Luze image with a clean local asset.
   - Makes the original church watercolor slightly smaller and more integrated.
   ========================================================= */

/* Single floral layer: composed from the provided transparent floral clusters. */
.page-floral {
  position: fixed !important;
  top: -18vh !important;
  width: clamp(215px, 25vw, 390px) !important;
  height: auto !important;
  z-index: 0 !important;
  opacity: var(--floral-opacity, .86) !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: translate3d(0, var(--floral-y, 0px), 0) !important;
  transition: opacity .45s ease-out !important;
  filter: drop-shadow(0 10px 20px rgba(61, 53, 41, .015)) !important;
}
.page-floral-left { left: max(-118px, -6.4vw) !important; }
.page-floral-right { right: max(-118px, -6.4vw) !important; }
.page-floral-left img,
.page-floral-right img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}
.page-floral-left img { content: url('../assets/floral-v18-left.png') !important; }
.page-floral-right img { content: url('../assets/floral-v18-right.png') !important; }

/* No secondary floral/corner layers: avoids duplicated pasted look. */
.stage-floral,
.corner-floral,
.floral-frame,
.floral-spray,
.floral-clean,
.floral-mockup,
.butterfly,
.bee,
.hero-stage .stage-glow,
#particles {
  display: none !important;
}

/* More subtle church illustration: original file, slightly smaller, printed on paper. */
.invite-card .card-church,
.card-church,
img[src*="church-original"] {
  width: min(820px, 84vw) !important;
  margin: 18px auto 0 !important;
  mix-blend-mode: multiply !important;
  opacity: .95 !important;
  filter: saturate(.95) contrast(.985) brightness(1.018) !important;
}

/* Dress code: small contextual note, no "Formal/Gala", no separators. */
.dress-code-section {
  padding: 16px 0 12px !important;
  margin: 0 auto 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dress-code-section::before,
.dress-code-section::after,
.dress-code-section .container::before,
.dress-code-section .container::after {
  display: none !important;
  content: none !important;
}
.dress-code-section .container {
  max-width: 660px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}
.dress-code-section .section-title {
  font-size: clamp(1rem, 1.7vw, 1.26rem) !important;
  letter-spacing: .18em !important;
  margin-bottom: 8px !important;
}
.dress-code-main { display: none !important; }
.dress-code-note {
  max-width: 560px !important;
  margin: 0 auto !important;
  font-size: 1.02rem !important;
  line-height: 1.62 !important;
  color: rgba(56,48,38,.72) !important;
}

/* Hotel cards: all images identical visual dimensions and aligned text. */
.cards,
.stay-grid,
.accommodation-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.card {
  display: flex !important;
  flex-direction: column !important;
}
.card-photo,
.card .card-photo.luze-photo {
  width: 100% !important;
  height: 156px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  clip-path: none !important;
  margin: 0 0 18px !important;
  background: rgba(255,255,255,.38) !important;
}
.card h3,
.card.d3 h3,
.card:has(.luze-photo) h3 {
  min-height: 3.1em !important;
  margin-top: 0 !important;
}
.card p { flex: 1 1 auto !important; }

/* Keep central content readable beside moving floral borders. */
main, .site-header, footer { position: relative !important; z-index: 2 !important; }

@media (max-width: 980px) {
  .page-floral {
    width: clamp(145px, 18vw, 210px) !important;
    opacity: .58 !important;
  }
  .page-floral-left { left: -104px !important; }
  .page-floral-right { right: -104px !important; }
}

@media (max-width: 780px) {
  .page-floral {
    position: absolute !important;
    top: 60px !important;
    width: 145px !important;
    opacity: .36 !important;
    transform: none !important;
  }
  .page-floral-left { left: -98px !important; }
  .page-floral-right { right: -98px !important; }
  .invite-card .card-church,
  .card-church,
  img[src*="church-original"] {
    width: 108vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .cards,
  .stay-grid,
  .accommodation-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card-photo,
  .card .card-photo.luze-photo {
    height: 178px !important;
    margin-bottom: 18px !important;
  }
  .card h3,
  .card.d3 h3,
  .card:has(.luze-photo) h3 {
    min-height: auto !important;
  }
}

/* v1.8 end */


/* ===== v1.9 refinements =====
   - persistent, quieter header
   - RSVP without question icons, with larger text
*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  opacity: .86;
  background: linear-gradient(180deg, rgba(252, 250, 247, 0.70), rgba(245, 240, 232, 0.48)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 1px 18px rgba(61, 53, 41, 0.055) !important;
}
.site-header:hover,
.site-header:focus-within {
  opacity: 1;
  background: rgba(252, 250, 247, .88) !important;
}
.site-header .brand { font-size: 1.65rem; }
.site-header .tab-nav a,
.site-header .lang-switch button { opacity: .82; }
.site-header .tab-nav a:hover,
.site-header .lang-switch button:hover,
.site-header .tab-nav a.active,
.site-header .lang-switch button.active { opacity: 1; }

/* RSVP: remove circular pictogram column and make questions easier to read */
#panel-rsvp .corner-floral { opacity: .55; }
#panel-rsvp .form-wrap {
  max-width: 760px;
  margin-top: 54px;
}
#panel-rsvp .form-row {
  display: block !important;
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(195, 185, 164, .28);
}
#panel-rsvp .form-row:last-of-type { border-bottom: 0; }
#panel-rsvp .q-icon { display: none !important; }
#panel-rsvp .q-label {
  font-size: clamp(1.28rem, 2.1vw, 1.55rem);
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 16px;
}
#panel-rsvp .radio-group { gap: 14px 18px; }
#panel-rsvp .radio-pill {
  font-size: clamp(1.08rem, 1.5vw, 1.18rem);
  padding: 13px 24px;
}
#panel-rsvp input[type="text"],
#panel-rsvp textarea,
#panel-rsvp select {
  font-size: clamp(1.08rem, 1.5vw, 1.18rem);
  padding: 15px 18px;
}
#panel-rsvp textarea { min-height: 132px; }
#panel-rsvp .lead { font-size: 1.18rem; }

@media (max-width: 720px) {
  .site-header {
    padding: 10px 14px;
    gap: 8px 12px;
  }
  .site-header .brand { font-size: 1.42rem; }
  .tab-nav { gap: 20px; }
  #panel-rsvp .form-row { margin-bottom: 34px; padding-bottom: 22px; }
}

/* =========================================================
   v1.10 refinements
   - single floral frame from the final supplied border artwork
   - fixed, subtle header always visible while scrolling
   ========================================================= */

/* Remove all previous side/corner floral systems to avoid double layers. */
.page-floral,
.stage-floral,
.corner-floral,
.floral-frame,
.floral-spray,
.floral-clean,
.floral-mockup,
.butterfly,
.bee,
#particles {
  display: none !important;
}

/* Single floral frame: fixed to the viewport, gently drifting while scrolling. */
.flower-frame-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('../assets/flower-frame.png');
  background-repeat: no-repeat;
  background-position: center var(--flower-frame-y, 0px);
  background-size: 100% 106%;
  opacity: .88;
  transform: translateZ(0);
  transition: opacity .35s ease-out;
}

/* Keep real content above the floral frame. */
.site-header,
main,
footer {
  position: relative;
  z-index: 2;
}

/* Header must remain accessible from any scroll position. */
body {
  padding-top: 66px;
}
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
  opacity: .78;
  background: linear-gradient(180deg, rgba(252, 250, 247, 0.74), rgba(245, 240, 232, 0.50)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
  backdrop-filter: blur(20px) saturate(1.22);
  box-shadow: 0 1px 16px rgba(61, 53, 41, 0.045) !important;
}
.site-header.scrolled {
  opacity: .82;
  padding: 10px 28px;
}
.site-header:hover,
.site-header:focus-within {
  opacity: 1;
  background: rgba(252, 250, 247, .90) !important;
}

/* The top section already has generous spacing; compensate for the fixed header. */
.hero-stage {
  padding-top: 34px !important;
}

@media (max-width: 820px) {
  body { padding-top: 96px; }
  .flower-frame-bg {
    opacity: .42;
    background-size: auto 106%;
    background-position: center var(--flower-frame-y, 0px);
  }
  .hero-stage { padding-top: 28px !important; }
}

@media (max-width: 520px) {
  .flower-frame-bg { opacity: .28; }
}

/* =========================================================
   v1.11 refinements
   - taller floral frame based on the user-provided frame
   - smaller flowers relative to the page
   - visible around the top hero as well as the rest of the scroll
   ========================================================= */

/* Ensure no legacy floral layers remain visible. */
.page-floral,
.stage-floral,
.corner-floral,
.floral-frame,
.floral-spray,
.floral-clean,
.floral-mockup,
.butterfly,
.bee,
#particles {
  display: none !important;
}

.flower-frame-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 25 !important;
  pointer-events: none !important;
  background-image: url('../assets/flower-frame-tall.png') !important;
  background-repeat: no-repeat !important;
  background-position: center var(--flower-frame-y, 0px) !important;
  background-size: 100% auto !important;
  opacity: .92 !important;
  transform: translateZ(0);
  will-change: background-position;
}

/* Keep the header and central content above the decorative frame, while allowing the frame to be visible on the sides. */
.site-header { z-index: 2000 !important; }
main, footer { position: relative; z-index: 30 !important; }

/* The hero should not read like an opaque card and should allow the side florals to feel part of the paper. */
.hero-stage {
  background: transparent !important;
}
.invite-card {
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 1280px) {
  .flower-frame-bg { background-size: min(100%, 1400px) auto !important; }
}

@media (max-width: 820px) {
  .flower-frame-bg {
    opacity: .44 !important;
    background-size: 165% auto !important;
  }
}

@media (max-width: 520px) {
  .flower-frame-bg { opacity: .30 !important; }
}

/* =========================================================
   v1.12 refinements
   - new tall user-provided floral frame
   - frame aligned to viewport corners, no duplicated stacked frame
   - one moving layer only, behind content
   ========================================================= */

/* Hide every legacy flower layer. The only decorative frame is .flower-frame-bg. */
.page-floral,
.stage-floral,
.corner-floral,
.floral-frame,
.floral-spray,
.floral-clean,
.floral-mockup,
.butterfly,
.bee,
#particles {
  display: none !important;
}

.flower-frame-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url('../assets/flower-frame-v112.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100vw auto !important;
  background-position: top var(--flower-frame-y, 0px) center !important;
  opacity: .96 !important;
  transform: translateZ(0);
  will-change: background-position;
}

.site-header,
main,
footer {
  position: relative;
}
.site-header { z-index: 2000 !important; }
main, footer { z-index: 2 !important; }

/* Keep the invitation as paper, not as a separate card. */
.hero-stage,
.invite-card,
.main-shell,
.content-shell {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .flower-frame-bg {
    background-size: 150vw auto !important;
    background-position: top var(--flower-frame-y, 0px) center !important;
    opacity: .52 !important;
  }
}

@media (max-width: 560px) {
  .flower-frame-bg {
    background-size: 210vw auto !important;
    opacity: .28 !important;
  }
}


/* =========================================================
   v1.13 refinements
   - keep generous breathing room so content never covers the floral frame
   - use the shorter user-provided frame for the RSVP view
   - keep floral artwork visible down to the footer rule
   ========================================================= */

:root {
  --frame-safe-top: clamp(96px, 11vw, 150px);
  --frame-safe-bottom: clamp(96px, 10vw, 145px);
}

#panel-home .hero-stage {
  padding-top: calc(var(--frame-safe-top) + 12px) !important;
  padding-bottom: clamp(44px, 6vw, 82px) !important;
}

#panel-home .cta {
  padding-top: clamp(58px, 7vw, 88px) !important;
  padding-bottom: var(--frame-safe-bottom) !important;
  background: transparent !important;
  border-top: 0 !important;
}

#panel-home .stay-grid,
#panel-home .timeline,
#panel-home .dress-code-section .container,
#panel-home .lead {
  max-width: min(920px, 72vw);
}

body.rsvp-active .flower-frame-bg {
  background-image: url('../assets/flower-frame-rsvp.png') !important;
  background-size: 100vw auto !important;
  background-position: top var(--flower-frame-y, 0px) center !important;
  opacity: .94 !important;
}

#panel-rsvp section {
  padding-top: calc(var(--frame-safe-top) + 18px) !important;
  padding-bottom: var(--frame-safe-bottom) !important;
  min-height: calc(100svh - 66px);
}

#panel-rsvp .container {
  max-width: min(760px, 68vw);
}

.site-footer {
  position: relative !important;
  z-index: 5 !important;
  background: rgba(245, 240, 232, .70) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

@media (max-width: 980px) {
  #panel-home .stay-grid,
  #panel-home .timeline,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: min(760px, 78vw);
  }
}

@media (max-width: 720px) {
  :root {
    --frame-safe-top: 78px;
    --frame-safe-bottom: 78px;
  }

  body.rsvp-active .flower-frame-bg,
  body:not(.rsvp-active) .flower-frame-bg {
    background-size: 175vw auto !important;
    opacity: .22 !important;
  }

  #panel-home .hero-stage {
    padding-top: 88px !important;
  }

  #panel-home .stay-grid,
  #panel-home .timeline,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: 92vw;
  }
}

@media (max-width: 520px) {
  body.rsvp-active .flower-frame-bg,
  body:not(.rsvp-active) .flower-frame-bg {
    background-size: 230vw auto !important;
    opacity: .16 !important;
  }
}

/* =========================================================
   v1.14 — Four-part transparent floral frame
   Uses separate top / right / bottom / left artwork so the
   frame adapts to every viewport without duplicating a huge
   single image. The old single-frame layer is disabled.
   ========================================================= */
.flower-frame-bg,
.floral-frame,
.frame-overlay,
[class*="floral-v18"],
[class*="floral-composed"],
[class*="floral-side"],
[class*="floral-clean"],
[class*="floral-mockup"] {
  display: none !important;
}

:root {
  --frame-top-height: clamp(92px, 20vw, 245px);
  --frame-bottom-height: clamp(88px, 18vw, 220px);
  --frame-side-width: clamp(70px, 11.5vw, 155px);
  --frame-side-y: 0px;
}

.floral-border {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  opacity: .92;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .35s ease;
}

.floral-border-top {
  top: 48px;
  left: 0;
  right: 0;
  height: var(--frame-top-height);
  background-image: url('../assets/frame-top.png');
  background-size: 100% auto;
  background-position: top center;
}

.floral-border-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--frame-bottom-height);
  background-image: url('../assets/frame-bottom.png');
  background-size: 100% auto;
  background-position: bottom center;
}

.floral-border-left,
.floral-border-right {
  top: calc(48px + var(--frame-top-height) * .42);
  bottom: calc(var(--frame-bottom-height) * .45);
  width: var(--frame-side-width);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center var(--frame-side-y);
}

.floral-border-left {
  left: 0;
  background-image: url('../assets/frame-left.png');
}

.floral-border-right {
  right: 0;
  background-image: url('../assets/frame-right.png');
}

/* Keep content safely inside the floral frame. */
.site-header { z-index: 100 !important; }
main, footer { position: relative; z-index: 5 !important; }
.container,
#panel-home .timeline,
#panel-home .stay-grid,
#panel-home .dress-code-section .container,
#panel-home .lead,
#panel-rsvp .container {
  max-width: min(920px, calc(100vw - (var(--frame-side-width) * 2) - 58px)) !important;
}

/* More air at the beginning and end, so text never covers the flowers. */
#panel-home .hero-stage {
  padding-top: calc(var(--frame-top-height) + 82px) !important;
  min-height: calc(92vh + var(--frame-top-height)) !important;
}

#panel-home .cta,
#panel-rsvp .rsvp-page,
#panel-rsvp .rsvp-section,
#panel-rsvp section:last-of-type {
  padding-bottom: calc(var(--frame-bottom-height) + 86px) !important;
}

#panel-rsvp {
  padding-top: calc(var(--frame-top-height) + 70px) !important;
  padding-bottom: calc(var(--frame-bottom-height) + 70px) !important;
}

.site-footer {
  z-index: 20 !important;
  position: relative !important;
  background: rgba(245, 240, 232, .82) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  :root {
    --frame-top-height: clamp(78px, 21vw, 170px);
    --frame-bottom-height: clamp(74px, 20vw, 160px);
    --frame-side-width: clamp(48px, 12vw, 92px);
  }
  .floral-border-top { top: 70px; }
  .floral-border-left,
  .floral-border-right {
    top: calc(70px + var(--frame-top-height) * .50);
  }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: min(92vw, calc(100vw - (var(--frame-side-width) * 1.5))) !important;
  }
}

@media (max-width: 620px) {
  :root {
    --frame-top-height: 92px;
    --frame-bottom-height: 88px;
    --frame-side-width: 38px;
  }
  .floral-border { opacity: .74; }
  .floral-border-top { top: 96px; background-size: 145% auto; }
  .floral-border-bottom { background-size: 145% auto; }
  .floral-border-left,
  .floral-border-right {
    top: 184px;
    bottom: 68px;
  }
  #panel-home .hero-stage {
    padding-top: 210px !important;
  }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: 88vw !important;
  }
}

/* =========================================================
   v1.15 refinements
   - Apps Script payload aligned with Contact name + Phone, no Email
   - Top flowers scroll away naturally; bottom flowers appear only at page end
   - Side flowers begin below the top frame and drift subtly on scroll
   - Extra breathing room at the top/end without excessive RSVP bottom whitespace
   ========================================================= */

:root {
  --frame-top-height: clamp(165px, 30.5vw, 410px);
  --frame-bottom-height: clamp(145px, 28.8vw, 370px);
  --frame-side-width: clamp(76px, 12vw, 178px);
  --frame-side-start: calc(70px + var(--frame-top-height) * .78);
  --frame-side-bottom: clamp(58px, 8vw, 96px);
  --frame-side-y: 0px;
}

body { position: relative; }

/* Disable old single-frame systems and use only the four transparent frame pieces. */
.flower-frame-bg,
.floral-frame,
.frame-overlay,
.page-floral,
.stage-floral,
.corner-floral,
.butterfly,
.bee,
#particles,
[class*="floral-v18"],
[class*="floral-composed"],
[class*="floral-side"],
[class*="floral-clean"],
[class*="floral-mockup"] {
  display: none !important;
}

.floral-border {
  display: block !important;
  pointer-events: none !important;
  opacity: .94 !important;
  z-index: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: opacity .35s ease;
}

/* Top frame: part of the page, so it disappears as the guest scrolls down. */
.floral-border-top {
  position: absolute !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--frame-top-height) !important;
  background-image: url('../assets/frame-top-v115.webp') !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}

/* Bottom frame: appears only at the end, reaching the footer rule. */
.floral-border-bottom {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 42px !important;
  height: var(--frame-bottom-height) !important;
  background-image: url('../assets/frame-bottom-v115.webp') !important;
  background-size: 100% auto !important;
  background-position: bottom center !important;
}

/* Side frame: fixed and animated subtly, starting below the top flowers to avoid overlap. */
.floral-border-left,
.floral-border-right {
  position: fixed !important;
  top: var(--frame-side-start) !important;
  bottom: var(--frame-side-bottom) !important;
  width: var(--frame-side-width) !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: center var(--frame-side-y) !important;
  opacity: .90 !important;
}
.floral-border-left {
  left: 0 !important;
  background-image: url('../assets/frame-left-v115.webp') !important;
}
.floral-border-right {
  right: 0 !important;
  background-image: url('../assets/frame-right-v115.webp') !important;
}

.site-header { position: fixed !important; z-index: 2000 !important; }
main, footer { position: relative !important; z-index: 2 !important; }

/* Keep the reading column clear of side flowers. */
.container,
#panel-home .timeline,
#panel-home .stay-grid,
#panel-home .dress-code-section .container,
#panel-home .lead,
#panel-rsvp .container {
  max-width: min(920px, calc(100vw - (var(--frame-side-width) * 2) - 84px)) !important;
}

/* More breathing room at the very beginning and end. */
#panel-home .hero-stage {
  padding-top: calc(var(--frame-top-height) + 120px) !important;
  padding-bottom: clamp(34px, 5vw, 70px) !important;
  min-height: auto !important;
}
#panel-home .cta {
  padding-bottom: calc(var(--frame-bottom-height) + 62px) !important;
}

/* RSVP uses the same four-part frame, but avoid the excessive empty tail. */
#panel-rsvp section {
  padding-top: calc(var(--frame-top-height) + 78px) !important;
  padding-bottom: calc(var(--frame-bottom-height) * .48 + 44px) !important;
  min-height: auto !important;
}
#panel-rsvp .form-wrap { margin-top: 38px !important; }
#panel-rsvp .form-row { margin-bottom: 34px !important; padding-bottom: 22px !important; }
#panel-rsvp .form-footer { margin-top: 12px !important; }

/* RSVP contact fields: no pictograms, larger text retained. */
#panel-rsvp .q-icon { display: none !important; }
#panel-rsvp input[type="tel"] {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.48);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.5vw, 1.18rem);
  padding: 15px 18px;
}

.site-footer {
  position: relative !important;
  z-index: 5 !important;
  background: rgba(245, 240, 232, .78) !important;
  border-top: 1px solid rgba(196,178,137,.45) !important;
}

@media (max-width: 980px) {
  :root {
    --frame-top-height: clamp(120px, 31vw, 260px);
    --frame-bottom-height: clamp(110px, 29vw, 230px);
    --frame-side-width: clamp(48px, 11vw, 96px);
    --frame-side-start: calc(92px + var(--frame-top-height) * .72);
  }
  .floral-border-top { top: 82px !important; background-size: 132% auto !important; }
  .floral-border-bottom { background-size: 132% auto !important; }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: min(92vw, calc(100vw - (var(--frame-side-width) * 1.6))) !important;
  }
  #panel-home .hero-stage { padding-top: calc(var(--frame-top-height) + 120px) !important; }
  #panel-rsvp section { padding-top: calc(var(--frame-top-height) + 86px) !important; }
}

@media (max-width: 620px) {
  :root {
    --frame-top-height: 118px;
    --frame-bottom-height: 110px;
    --frame-side-width: 34px;
    --frame-side-start: 205px;
    --frame-side-bottom: 54px;
  }
  .floral-border { opacity: .70 !important; }
  .floral-border-top { top: 96px !important; background-size: 190% auto !important; }
  .floral-border-bottom { background-size: 190% auto !important; }
  .floral-border-left,
  .floral-border-right { opacity: .50 !important; }
  #panel-home .hero-stage { padding-top: 232px !important; }
  #panel-home .cta { padding-bottom: 160px !important; }
  #panel-rsvp section { padding-top: 220px !important; padding-bottom: 108px !important; }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container { max-width: 90vw !important; }
}

/* =========================================================
   v1.16 refinements
   - Side floral borders go all the way to the top again, so no empty gaps appear while scrolling.
   - Top and bottom floral pieces are never cropped and sit above the side pieces.
   - Reduced excessive top/bottom whitespace on Home and RSVP.
   - New Apps Script endpoint is set in index.html.
   ========================================================= */

:root {
  /* Match the real aspect ratios of the supplied images: top 1080×328, bottom 1080×310. */
  --frame-top-height: min(30.4vw, 520px);
  --frame-bottom-height: min(28.8vw, 480px);
  --frame-side-width: clamp(76px, 12vw, 178px);
  --frame-side-y: 0px;
}

/* Four-piece frame layering. Top/bottom overlay the sides; central content stays above all decoration. */
.floral-border {
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  opacity: .94 !important;
}

.floral-border-left,
.floral-border-right {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--frame-side-width) !important;
  z-index: 1 !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: center var(--frame-side-y) !important;
  opacity: .88 !important;
}
.floral-border-left {
  left: 0 !important;
  background-image: url('../assets/frame-left-v115.webp') !important;
}
.floral-border-right {
  right: 0 !important;
  background-image: url('../assets/frame-right-v115.webp') !important;
}

.floral-border-top {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--frame-top-height) !important;
  z-index: 2 !important;
  background-image: url('../assets/frame-top-v115.webp') !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}
.floral-border-bottom {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 42px !important;
  height: var(--frame-bottom-height) !important;
  z-index: 2 !important;
  background-image: url('../assets/frame-bottom-v115.webp') !important;
  background-size: 100% auto !important;
  background-position: bottom center !important;
}

.site-header { z-index: 2000 !important; }
main, footer { position: relative !important; z-index: 5 !important; }

/* Keep text clear of the side borders, but do not over-compress the main column. */
.container,
#panel-home .timeline,
#panel-home .stay-grid,
#panel-home .dress-code-section .container,
#panel-home .lead,
#panel-rsvp .container {
  max-width: min(920px, calc(100vw - (var(--frame-side-width) * 2) - 72px)) !important;
}

/* Home: reduced excessive initial whitespace. The header already reserves vertical space. */
#panel-home .hero-stage {
  padding-top: clamp(48px, 6.5vw, 92px) !important;
  padding-bottom: clamp(20px, 4vw, 52px) !important;
  min-height: auto !important;
}
#panel-home .hero { padding-top: clamp(18px, 3vw, 38px) !important; }
#programa { padding-top: clamp(36px, 5vw, 58px) !important; }

/* Home bottom: keep the CTA closer to the footer while preserving room for the bottom flowers. */
#panel-home .cta {
  padding-top: clamp(46px, 6vw, 78px) !important;
  padding-bottom: clamp(95px, 13vw, 180px) !important;
  background: transparent !important;
  border-top: 0 !important;
}

/* RSVP: less empty top and bottom, but still clear of decorative flowers. */
#panel-rsvp section {
  padding-top: clamp(72px, 8vw, 118px) !important;
  padding-bottom: clamp(58px, 7vw, 96px) !important;
  min-height: auto !important;
}
#panel-rsvp .form-wrap { margin-top: clamp(28px, 4vw, 44px) !important; }
#panel-rsvp .form-row { margin-bottom: 30px !important; padding-bottom: 20px !important; }
#panel-rsvp .success-panel { padding: 42px 0 28px !important; }

/* Footer should remain readable and above the bottom flowers. */
.site-footer {
  z-index: 20 !important;
  background: rgba(245, 240, 232, .82) !important;
  border-top: 1px solid rgba(196,178,137,.45) !important;
}

@media (min-width: 1710px) {
  :root {
    --frame-top-height: 520px;
    --frame-bottom-height: 480px;
  }
}

@media (max-width: 980px) {
  :root {
    --frame-top-height: min(31vw, 300px);
    --frame-bottom-height: min(29vw, 270px);
    --frame-side-width: clamp(48px, 11vw, 96px);
  }
  .floral-border-top { background-size: 132% auto !important; }
  .floral-border-bottom { background-size: 132% auto !important; }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container {
    max-width: min(92vw, calc(100vw - (var(--frame-side-width) * 1.55))) !important;
  }
  #panel-home .hero-stage { padding-top: clamp(40px, 7vw, 74px) !important; }
  #panel-home .cta { padding-bottom: clamp(76px, 13vw, 140px) !important; }
  #panel-rsvp section {
    padding-top: clamp(58px, 8vw, 92px) !important;
    padding-bottom: clamp(46px, 7vw, 76px) !important;
  }
}

@media (max-width: 620px) {
  :root {
    --frame-top-height: 118px;
    --frame-bottom-height: 110px;
    --frame-side-width: 34px;
  }
  .floral-border { opacity: .68 !important; }
  .floral-border-top { top: 0 !important; background-size: 190% auto !important; }
  .floral-border-bottom { background-size: 190% auto !important; }
  .floral-border-left,
  .floral-border-right { opacity: .44 !important; }
  #panel-home .hero-stage { padding-top: 54px !important; }
  #panel-home .cta { padding-bottom: 100px !important; }
  #panel-rsvp section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .container,
  #panel-home .timeline,
  #panel-home .stay-grid,
  #panel-home .dress-code-section .container,
  #panel-home .lead,
  #panel-rsvp .container { max-width: 90vw !important; }
}

/* =========================================================
   v1.17 refinements
   - quieter floral frame: softer side depth + slower parallax
   - mobile header: Daan & Mapi left, language selector right
   - RSVP guest details per person, no icon circles
   ========================================================= */
:root {
  --frame-side-depth: .74;
  --frame-top-depth: .97;
  --frame-bottom-depth: .95;
}

.floral-border-left,
.floral-border-right {
  opacity: var(--frame-side-depth) !important;
  background-size: 92% auto !important;
  z-index: 1 !important;
  filter: saturate(.96) contrast(.98);
}
.floral-border-top {
  opacity: var(--frame-top-depth) !important;
  z-index: 3 !important;
}
.floral-border-bottom {
  opacity: var(--frame-bottom-depth) !important;
  z-index: 3 !important;
}

.site-header {
  display: grid !important;
  grid-template-columns: minmax(120px, auto) 1fr minmax(120px, auto) !important;
  align-items: center !important;
}
.site-header .brand { justify-self: start; white-space: nowrap; }
.site-header .tab-nav { justify-self: center; flex: none !important; }
.site-header .lang-switch { justify-self: end; white-space: nowrap; }

/* RSVP layout: cleaner questions and per-person menu/allergy blocks. */
#panel-rsvp .form-row {
  display: block !important;
  border-bottom: 1px solid rgba(196,178,137,.22);
}
#panel-rsvp .form-row:last-of-type { border-bottom: 0; }
#panel-rsvp .q-label {
  font-size: clamp(1.24rem, 2vw, 1.48rem) !important;
  line-height: 1.25;
}
#panel-rsvp .radio-pill {
  font-size: clamp(1.06rem, 1.6vw, 1.18rem) !important;
  padding: 12px 24px !important;
}
#panel-rsvp input[type="text"],
#panel-rsvp input[type="tel"],
#panel-rsvp textarea,
#panel-rsvp select {
  font-size: clamp(1.04rem, 1.5vw, 1.16rem) !important;
}
.form-hint {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: -4px 0 18px;
  font-style: italic;
}
.guest-details {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}
.guest-details-empty {
  color: var(--ink-soft);
  background: rgba(252,250,247,.54);
  border: 1px dashed rgba(196,178,137,.55);
  border-radius: 8px;
  padding: 16px 18px;
}
.guest-detail-card {
  background: rgba(252,250,247,.62);
  border: 1px solid rgba(196,178,137,.40);
  border-radius: 10px;
  padding: 20px;
}
.guest-detail-card h3 {
  font-family: var(--serif);
  color: var(--olive-dark);
  font-weight: 600;
  font-size: 1.18rem;
  margin-bottom: 14px;
}
.guest-detail-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) 1.2fr;
  gap: 16px;
}
.guest-detail-grid label span {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .site-header {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand lang"
      "tabs tabs";
    gap: 8px 12px !important;
    padding: 10px 18px !important;
  }
  .site-header .brand { grid-area: brand; justify-self: start; font-size: 1.62rem; }
  .site-header .lang-switch { grid-area: lang; justify-self: end; }
  .site-header .tab-nav { grid-area: tabs; justify-self: center; flex-basis: auto !important; width: 100%; }
  .tab-nav { order: initial !important; gap: 28px; }
  .tab-nav a { font-size: .68rem; }
  .guest-detail-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   v1.18 refinements
   ========================================================= */
#panel-home .hero-stage {
  padding-top: clamp(88px, 12vh, 150px) !important;
}

#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card {
  padding-top: clamp(24px, 5vh, 54px) !important;
}

.event-icon {
  color: var(--olive) !important;
  background: rgba(251, 248, 242, .72) !important;
  border-color: rgba(164, 137, 83, .40) !important;
}
.event-icon svg { display: none !important; }
.event-icon .program-icon {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
  display: block;
  opacity: .86;
  filter: invert(34%) sepia(16%) saturate(505%) hue-rotate(38deg) brightness(88%) contrast(88%);
}
.event-icon .program-icon.autobus { width: 36px !important; height: 36px !important; }
.event-icon .program-icon.return-bus { transform: scaleX(-1); }
.event-icon .program-icon.fiesta { width: 35px !important; height: 35px !important; }
.event-icon .program-icon.recena { width: 35px !important; height: 35px !important; }
.event:hover .event-icon { transform: none !important; box-shadow: none !important; }

/* RSVP guest-specific menu/allergy cards */
.guest-detail-card {
  min-height: auto !important;
}
.guest-detail-grid {
  align-items: start !important;
}
.guest-detail-grid select,
.guest-detail-grid input {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  box-sizing: border-box !important;
}
.guest-detail-grid input.guest-allergies {
  resize: none !important;
}
button.text-link.reset-rsvp {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

@media (max-width: 700px) {
  #panel-home .hero-stage { padding-top: clamp(104px, 15vh, 150px) !important; }
  #panel-rsvp .rsvp-section, #panel-rsvp .rsvp-card { padding-top: 22px !important; }
  .event-icon .program-icon { width: 30px !important; height: 30px !important; }
  .event-icon .program-icon.autobus { width: 32px !important; height: 32px !important; }
}

/* =========================================================
   v1.19 refinements
   - More breathing room above the hero names so they do not overlap the top floral border.
   - Recena icon replaced with supplied transparent dinner icon.
   - Program vertical line fully hidden behind icon circles.
   - Luze discount code wraps safely on narrow screens.
   - RSVP special-menu selects get enough height and padding.
   ========================================================= */
#panel-home .hero-stage {
  padding-top: clamp(132px, 16vh, 210px) !important;
}

.event-icon {
  background: var(--surface) !important;
  border-color: rgba(164, 137, 83, .42) !important;
  z-index: 4 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.event-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: var(--surface);
  z-index: -1;
}
.event-icon .program-icon.recena {
  width: 36px !important;
  height: 36px !important;
  opacity: .88;
}

.card .promo,
.card .promo strong {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.card .promo strong {
  display: inline-block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.45 !important;
  letter-spacing: clamp(.08em, .9vw, .18em) !important;
  font-size: clamp(.84rem, 1.35vw, .98rem) !important;
}

#panel-rsvp .guest-detail-grid select,
#panel-rsvp select.guest-menu {
  min-height: 62px !important;
  height: 62px !important;
  line-height: 1.35 !important;
  padding: 0 48px 0 20px !important;
  background-position: right 18px center !important;
  box-sizing: border-box !important;
}
#panel-rsvp .guest-detail-grid input.guest-allergies {
  min-height: 62px !important;
  height: 62px !important;
}

@media (max-width: 700px) {
  #panel-home .hero-stage {
    padding-top: clamp(146px, 18vh, 210px) !important;
  }
  .event-icon::before { inset: -6px; }
  .card .promo strong {
    font-size: .82rem !important;
    letter-spacing: .08em !important;
  }
  #panel-rsvp .guest-detail-grid select,
  #panel-rsvp select.guest-menu,
  #panel-rsvp .guest-detail-grid input.guest-allergies {
    min-height: 60px !important;
    height: 60px !important;
  }
}

/* v1.20 refinements */
/* Give the main page a little more breathing room after the final CTA. */
#panel-home .cta {
  padding-bottom: clamp(76px, 10vw, 132px) !important;
}

/* Hotel Luze discount: avoid overflow on narrow browsers and add copy button. */
.card .promo strong,
#luze-code {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  letter-spacing: .12em !important;
  line-height: 1.45 !important;
}
.copy-code {
  appearance: none;
  border: 1px solid rgba(168,139,74,.42);
  background: rgba(255,255,255,.24);
  color: var(--olive, #596345);
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  margin: 4px auto 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.copy-code:hover,
.copy-code:focus-visible {
  background: rgba(255,255,255,.52);
  border-color: rgba(137,112,55,.68);
  transform: translateY(-1px);
}

/* RSVP per-guest fields: keep all menu/allergy controls consistent, including the last guest. */
.guest-detail-card,
.guest-detail-card:last-child {
  align-items: stretch !important;
}
.guest-detail-card .guest-detail-grid {
  align-items: start !important;
}
.guest-detail-card label {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin: 0 !important;
}
.guest-detail-card select.guest-menu,
.guest-detail-card input.guest-allergies {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  line-height: 56px !important;
  font-size: clamp(1.04rem, 2vw, 1.18rem) !important;
}
.guest-detail-card select.guest-menu {
  padding-right: 46px !important;
}
.guest-detail-card:last-child select.guest-menu,
.guest-detail-card:last-child input.guest-allergies {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

@media (max-width: 520px) {
  .guest-detail-card select.guest-menu,
  .guest-detail-card input.guest-allergies {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    line-height: 58px !important;
  }
  #panel-home .cta {
    padding-bottom: 104px !important;
  }
}


/* =========================================================
   v1.21 refinements
   - Updated spacing and new program icons supplied by Mapi.
   - Equal vertical rhythm between all timeline events.
   - Compact copy-code icon next to Hotel Luze discount code.
   - RSVP fields keep identical dimensions, including last guest.
   ========================================================= */

/* More breathing room above the large names on the main page. */
#panel-home .hero-stage {
  padding-top: clamp(168px, 19vh, 260px) !important;
}

/* Less blank space before the RSVP title. */
#panel-rsvp {
  padding-top: clamp(52px, 7vh, 92px) !important;
}
#panel-rsvp section,
#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card {
  padding-top: clamp(12px, 2.8vh, 32px) !important;
}

/* Program icons: use supplied PNG line icons and centre them in the circles. */
.event-icon {
  width: 50px !important;
  height: 50px !important;
  background: var(--surface) !important;
  border-color: rgba(164, 137, 83, .42) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.event-icon::before {
  inset: -9px !important;
  background: var(--surface) !important;
}
.event-icon .program-icon {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: .88 !important;
  filter: invert(34%) sepia(16%) saturate(505%) hue-rotate(38deg) brightness(88%) contrast(88%) !important;
}
.event-icon .program-icon.preboda {
  width: 35px !important;
  height: 35px !important;
  transform: translateY(2px) !important;
}
.event-icon .program-icon.ceremonia { width: 35px !important; height: 35px !important; }
.event-icon .program-icon.autobus { width: 38px !important; height: 38px !important; }
.event-icon .program-icon.return-bus { transform: scaleX(-1) !important; }
.event-icon .program-icon.coctel { width: 35px !important; height: 35px !important; }
.event-icon .program-icon.comida { width: 34px !important; height: 34px !important; }
.event-icon .program-icon.baile { width: 35px !important; height: 35px !important; }
.event-icon .program-icon.recena { width: 34px !important; height: 34px !important; }
.event-icon .program-icon.fiesta { width: 35px !important; height: 35px !important; }

/* Equal spacing between timeline points, including return bus and recena. */
.events { --event-gap: clamp(92px, 7.2vw, 118px); }
.event {
  min-height: var(--event-gap) !important;
  padding: 14px 0 18px !important;
  box-sizing: border-box !important;
}
.event-icon { top: 16px !important; }
.events::before { top: 24px !important; bottom: 24px !important; }

/* Compact copy icon beside the discount code. */
.promo-code-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  flex-wrap: wrap;
}
.copy-code {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 1px solid rgba(168,139,74,.45) !important;
  color: var(--olive, #596345) !important;
}
.copy-code svg { width: 15px; height: 15px; display: block; }
.copy-code .copy-feedback { display: none; }
.copy-code.is-copied {
  background: rgba(119,126,88,.12) !important;
  border-color: rgba(119,126,88,.65) !important;
}
.copy-code.is-copied::after {
  content: "✓";
  font-size: 13px;
  line-height: 1;
}
.copy-code.is-copied svg { display: none; }

/* Keep Hotel Luze discount code inside the card on narrow layouts. */
.card .promo { max-width: 100%; overflow: hidden; }
.card .promo strong,
#luze-code {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
  letter-spacing: clamp(.06em, .9vw, .14em) !important;
  font-size: clamp(.78rem, 1.25vw, .95rem) !important;
}

/* Make every per-guest menu/allergy control the same size, also for the last card. */
#guest-details,
.guest-details {
  align-items: stretch !important;
}
.guest-detail-card,
.guest-detail-card:last-child {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px !important;
}
.guest-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(180px, .8fr) 1.2fr !important;
  gap: 16px !important;
  align-items: start !important;
}
.guest-detail-card label,
.guest-detail-card:last-child label {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.guest-detail-card select.guest-menu,
.guest-detail-card:last-child select.guest-menu,
.guest-detail-card input.guest-allergies,
.guest-detail-card:last-child input.guest-allergies {
  display: block !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  line-height: 60px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  #panel-home .hero-stage {
    padding-top: clamp(182px, 22vh, 260px) !important;
  }
  #panel-rsvp { padding-top: 44px !important; }
  #panel-rsvp section,
  #panel-rsvp .rsvp-section,
  #panel-rsvp .rsvp-card { padding-top: 10px !important; }
  .events { --event-gap: 94px; }
  .event { min-height: var(--event-gap) !important; }
  .event-icon { width: 46px !important; height: 46px !important; }
  .event-icon .program-icon { width: 31px !important; height: 31px !important; }
  .event-icon .program-icon.autobus { width: 34px !important; height: 34px !important; }
  .guest-detail-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
  .card .promo strong,
  #luze-code {
    font-size: .76rem !important;
    letter-spacing: .055em !important;
  }
  .promo-code-row { gap: 6px; }
}

/* =========================================================
   v1.22 refinements
   ========================================================= */
/* Success screen: keep only the confirmation message. */
#success-panel .text-link,
#success-panel .reset-rsvp { display: none !important; }

/* RSVP per-guest cards: final card must match every other card. */
#panel-rsvp #guest-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: stretch !important;
}
#panel-rsvp .guest-detail-card,
#panel-rsvp .guest-detail-card:last-child {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 20px !important;
  margin: 0 !important;
  display: block !important;
  grid-row: auto !important;
  align-self: stretch !important;
}
#panel-rsvp .guest-detail-grid,
#panel-rsvp .guest-detail-card:last-child .guest-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(180px, .8fr) 1.2fr !important;
  gap: 16px !important;
  align-items: start !important;
}
#panel-rsvp .guest-detail-card label,
#panel-rsvp .guest-detail-card:last-child label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
#panel-rsvp .guest-detail-card select.guest-menu,
#panel-rsvp .guest-detail-card:last-child select.guest-menu,
#panel-rsvp .guest-detail-card input.guest-allergies,
#panel-rsvp .guest-detail-card:last-child input.guest-allergies {
  display: block !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  resize: none !important;
}

/* Timeline: identical breathing room between every point. */
.events {
  --event-gap: clamp(112px, 8vw, 134px) !important;
}
.event,
.event:last-child {
  min-height: var(--event-gap) !important;
  padding: 14px 0 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.event + .event {
  margin-top: 0 !important;
}
.event-icon {
  top: 18px !important;
}
.events::before {
  top: 28px !important;
  bottom: 28px !important;
}

@media (max-width: 720px) {
  #panel-rsvp .guest-detail-grid,
  #panel-rsvp .guest-detail-card:last-child .guest-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .events { --event-gap: 112px !important; }
}

/* =========================================================
   v1.23 refinements
   - Photos page prepared with Google Photos link, but hidden from main nav.
   - Compact Hotel Luze copy icon next to discount code.
   - RSVP success screen shows only confirmation message.
   - Hide guest names question when only one person is confirmed.
   ========================================================= */

/* Compact copy icon only, aligned with the code. */
.card .promo { text-align: center !important; }
.promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  max-width: 100% !important;
}
#luze-code {
  display: inline !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.copy-code {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(168,139,74,.44) !important;
  background: rgba(255,255,255,.22) !important;
  color: var(--olive, #596345) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transform: none !important;
}
.copy-code svg { width: 13px !important; height: 13px !important; display: block !important; }
.copy-code:hover,
.copy-code:focus-visible { background: rgba(255,255,255,.55) !important; transform: none !important; }
.copy-code .copy-feedback { display: none !important; }
.copy-code.is-copied svg { display: none !important; }
.copy-code.is-copied::after { content: "✓"; font-size: 12px; line-height: 1; }

/* RSVP success: after submission, show only the confirmation message. */
#success-panel {
  padding: clamp(120px, 22vh, 220px) 0 clamp(140px, 24vh, 240px) !important;
  min-height: 56vh !important;
}
#success-panel h2 { margin: 0 auto !important; }
#success-panel .heart,
#success-panel p,
#success-panel .text-link,
#success-panel .reset-rsvp { display: none !important; }

/* Hide question 3 smoothly when only one guest is selected. */
#guest-names-row[style*="display: none"] { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* Same dimensions for every RSVP per-guest field, including last guest. */
#panel-rsvp .guest-detail-card,
#panel-rsvp .guest-detail-card:last-child {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#panel-rsvp .guest-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(180px, .8fr) 1.2fr !important;
  gap: 16px !important;
  align-items: start !important;
}
#panel-rsvp .guest-detail-card select.guest-menu,
#panel-rsvp .guest-detail-card:last-child select.guest-menu,
#panel-rsvp .guest-detail-card input.guest-allergies,
#panel-rsvp .guest-detail-card:last-child input.guest-allergies {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  line-height: 60px !important;
  box-sizing: border-box !important;
}
@media (max-width: 720px) {
  #panel-rsvp .guest-detail-grid { grid-template-columns: 1fr !important; }
}

/* Standalone photos page, currently not linked from the main navigation. */
.photos-page-main { min-height: calc(100vh - 80px); }
.photos-page {
  padding-top: clamp(180px, 23vh, 260px) !important;
  padding-bottom: clamp(160px, 22vh, 240px) !important;
  text-align: center;
}
.photos-page .lead { margin-bottom: 34px !important; }
.photos-upload-btn { display: inline-flex !important; }

/* v1.24 — Photos page enabled for direct testing, but not exposed in main navigation. */
.photos-page-body .floral-border-top,
.photos-page-body .floral-border-bottom {
  background-size: contain !important;
}
.photos-page-main {
  min-height: calc(100vh - 86px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.photos-page {
  width: min(760px, calc(100vw - 44px)) !important;
  padding-top: clamp(120px, 15vh, 170px) !important;
  padding-bottom: clamp(140px, 18vh, 210px) !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}
.photos-illustration {
  width: min(300px, 70vw) !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 26px !important;
  opacity: .92 !important;
  filter: saturate(.92) sepia(.08) !important;
}
.photos-page .section-title {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}
.photos-page .lead {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 34px !important;
  font-size: clamp(1.08rem, 2.4vw, 1.28rem) !important;
  line-height: 1.75 !important;
}
.photos-upload-btn {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 auto !important;
}
@media (max-width: 620px) {
  .photos-page {
    padding-top: 108px !important;
    padding-bottom: 120px !important;
  }
  .photos-illustration {
    width: min(250px, 74vw) !important;
    margin-bottom: 20px !important;
  }
}

/* =========================================================
   v1.25 refinements
   ========================================================= */

/* Give the RSVP title enough breathing room below the floral top frame. */
#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card {
  padding-top: clamp(150px, 20vh, 230px) !important;
}
@media (max-width: 720px) {
  #panel-rsvp .rsvp-section,
  #panel-rsvp .rsvp-card {
    padding-top: clamp(132px, 17vh, 190px) !important;
  }
}

/* Hide guest names question when the answer is only one guest. */
#guest-names-row[hidden] {
  display: none !important;
}

/* Hotel Luze discount: tiny copy icon next to code, not a text button. */
.card .promo { text-align: center !important; }
.promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}
#luze-code {
  display: inline-block !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  max-width: calc(100% - 34px) !important;
  vertical-align: middle !important;
}
.copy-code {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(168,139,74,.48) !important;
  background: rgba(255,255,255,.38) !important;
  color: var(--olive, #596345) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.copy-code svg { width: 13px !important; height: 13px !important; display: block !important; }
.copy-code.is-copied svg { display: none !important; }
.copy-code.is-copied::after { content: "✓"; font-size: 12px; line-height: 1; }

/* RSVP success: show only confirmation, with floral-safe spacing. */
#success-panel {
  padding: clamp(170px, 24vh, 250px) 0 clamp(150px, 21vh, 230px) !important;
  min-height: 60vh !important;
}
#success-panel h2 { margin: 0 auto !important; }
#success-panel .heart,
#success-panel p,
#success-panel .text-link,
#success-panel .reset-rsvp { display: none !important; }

/* Photos page: use the exact uploaded camera artwork without stylising or replacing it. */
.photos-page-main {
  min-height: calc(100vh - 86px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.photos-page {
  width: min(780px, calc(100vw - 44px)) !important;
  padding-top: clamp(145px, 18vh, 220px) !important;
  padding-bottom: clamp(150px, 18vh, 220px) !important;
  text-align: center !important;
}
.photos-illustration.original-camera {
  width: min(270px, 66vw) !important;
  height: auto !important;
  margin: 0 auto 36px !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.photos-page .section-title {
  margin: 0 0 22px !important;
}
.photos-page .lead {
  max-width: 650px !important;
  margin: 0 auto 34px !important;
  line-height: 1.75 !important;
  font-size: clamp(1.1rem, 2.3vw, 1.3rem) !important;
}
.photos-upload-btn {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 auto !important;
}
@media (max-width: 620px) {
  .photos-page { padding-top: 132px !important; padding-bottom: 135px !important; }
  .photos-illustration.original-camera { width: min(240px, 72vw) !important; margin-bottom: 28px !important; }
}

/* v1.26 refinements */
#panel-rsvp.rsvp-submitted .rsvp-heading { display: none !important; }
#panel-rsvp.rsvp-submitted .container { padding-top: clamp(150px, 18vh, 230px) !important; padding-bottom: clamp(160px, 18vh, 230px) !important; }
#panel-rsvp .form-row[hidden] { display: none !important; }
#panel-rsvp .attending-only[hidden] { display: none !important; }
#panel-rsvp .success-panel { max-width: 760px; margin-left: auto; margin-right: auto; }
#panel-rsvp .success-panel .section-title { margin-top: 0; }
.guest-detail-card { min-height: auto !important; }
.guest-detail-grid { align-items: start !important; }
.guest-detail-grid label { min-height: 0 !important; height: auto !important; }
.guest-detail-grid select.guest-menu,
.guest-detail-grid input.guest-allergies { height: 56px !important; min-height: 56px !important; box-sizing: border-box !important; }
.photos-page { display: flex; flex-direction: column; align-items: center; }
.photos-page .section-title { margin-bottom: 18px; }
.photos-page .lead { max-width: 760px; margin-bottom: 34px; }
.photos-page .original-camera { margin-top: 0; margin-bottom: 34px; }
@media (max-width: 700px) {
  #panel-rsvp .container { padding-top: clamp(120px, 15vh, 170px) !important; }
  #panel-rsvp.rsvp-submitted .container { padding-top: clamp(140px, 17vh, 190px) !important; }
  .guest-detail-grid select.guest-menu,
  .guest-detail-grid input.guest-allergies { height: 54px !important; min-height: 54px !important; }
}


/* ===== v1.27 refinements ===== */
#panel-rsvp > section {
  padding-top: clamp(128px, 15vh, 170px) !important;
}
#panel-rsvp .attendance-yes-only[hidden] {
  display: none !important;
}
#panel-rsvp .success-panel {
  padding-top: clamp(120px, 16vh, 170px) !important;
  padding-bottom: clamp(110px, 14vh, 150px) !important;
}
#panel-rsvp .success-panel .section-title {
  margin-top: 22px;
}
.photos-page .section-title {
  margin-top: 10px;
}
.photos-page .lead {
  font-size: clamp(1.06rem, 2.4vw, 1.22rem) !important;
  line-height: 1.65;
}
.photos-page-body .site-footer {
  margin-top: 0;
}
@media (max-width: 720px) {
  #panel-rsvp > section {
    padding-top: clamp(138px, 18vh, 190px) !important;
  }
}

/* =========================================================
   v1.28 fixes
   - RSVP yes-only fields stay hidden until attendance = yes.
   - After submit, show only the confirmation panel.
   - Extra top breathing room on RSVP to avoid floral overlap.
   ========================================================= */
#panel-rsvp .attendance-yes-only[hidden],
#guest-names-row[hidden] {
  display: none !important;
}
#panel-rsvp.rsvp-submitted .rsvp-heading,
#panel-rsvp.rsvp-submitted #rsvp-form {
  display: none !important;
}
#panel-rsvp.rsvp-submitted #success-panel {
  display: block !important;
}
#panel-rsvp.rsvp-submitted section {
  padding-top: clamp(148px, 16vh, 220px) !important;
  padding-bottom: clamp(110px, 12vh, 170px) !important;
}
#panel-rsvp.rsvp-submitted .container {
  min-height: 48vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#panel-rsvp.rsvp-submitted .success-panel {
  width: min(760px, 92vw);
  padding: clamp(58px, 8vh, 96px) 0 !important;
}
@media (max-width: 720px) {
  #panel-rsvp section {
    padding-top: clamp(112px, 15vh, 160px) !important;
  }
  #panel-rsvp.rsvp-submitted section {
    padding-top: clamp(138px, 18vh, 180px) !important;
  }
}

/* v1.28 confirmation message visibility */
#panel-rsvp.rsvp-submitted #success-panel p#success-message {
  display: block !important;
  color: var(--ink-soft) !important;
  margin: 18px auto 0 !important;
  max-width: 720px !important;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
  line-height: 1.7 !important;
}
#panel-rsvp.rsvp-submitted #success-panel .heart {
  display: none !important;
}

/* ===== v1.29 fixes ===== */
#panel-rsvp.rsvp-submitted .success-panel p#success-message {
  display: block !important;
  max-width: 620px;
  margin: 18px auto 0 !important;
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: clamp(1.05rem, 2.3vw, 1.22rem);
}
#panel-rsvp .form-row[hidden],
#panel-rsvp .attendance-yes-only[hidden],
#guest-names-row[hidden] {
  display: none !important;
}


/* ===== v1.30 fixes ===== */
/* Hide RSVP intro/title completely after submit; prevents the 3-column confirmation bug. */
#panel-rsvp.rsvp-submitted .rsvp-heading,
#panel-rsvp.rsvp-submitted #rsvp-form {
  display: none !important;
}
#panel-rsvp.rsvp-submitted .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54vh !important;
}
#panel-rsvp.rsvp-submitted #success-panel {
  display: block !important;
  width: min(760px, 92vw) !important;
  margin: 0 auto !important;
  text-align: center !important;
}
#panel-rsvp.rsvp-submitted #success-panel .section-title {
  max-width: 92vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.35 !important;
}
/* Yes-only RSVP questions remain hidden until the user explicitly confirms attendance. */
#panel-rsvp .attendance-yes-only[hidden],
#guest-names-row[hidden] {
  display: none !important;
}
/* Give the mobile program more room away from the floral frame. */
@media (max-width: 720px) {
  .timeline,
  .schedule-list,
  .program-list,
  .weekend-program {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .timeline-item,
  .program-item {
    margin-left: 10px !important;
  }
}
/* Photos page: text must be visibly above the camera illustration. */
.photos-page .photos-copy {
  display: block !important;
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
  font-size: clamp(1.08rem, 2.1vw, 1.28rem) !important;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
}
.photos-page .original-camera {
  display: block !important;
  margin: 0 auto 34px !important;
}


/* ===== v1.31 photos page fixes ===== */
.photos-page .photos-title,
#photos-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ink, #2f2b24) !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}
.photos-page .photos-copy {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ink-soft, #746b5b) !important;
  margin: 0 auto 34px !important;
  max-width: 760px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}
.photos-illustration.original-camera {
  background: transparent !important;
  mix-blend-mode: multiply !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ===============================
   v1.32 fixes
   =============================== */

/* Preboda note under venue. */
.event .event-note {
  display: block;
  margin-top: 2px;
  font-style: italic;
  color: var(--muted, #9f927e);
  line-height: 1.35;
}

/* Keep Hotel Luze discount code on one line in narrow/mobile views. */
.card .promo .promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.card .promo #luze-code {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  max-width: none !important;
  letter-spacing: clamp(.075em, 1.6vw, .14em) !important;
  font-size: clamp(.95rem, 3.15vw, 1.18rem) !important;
  line-height: 1.1 !important;
}
.card .promo .copy-code {
  flex: 0 0 auto !important;
}
@media (max-width: 420px) {
  .card .promo #luze-code {
    font-size: clamp(.82rem, 3.5vw, 1rem) !important;
    letter-spacing: .06em !important;
  }
  .card .promo .promo-code-row {
    gap: 6px !important;
  }
  .card .promo .copy-code {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}


/* ===============================
   v1.33 RSVP flow refinements
   =============================== */
.guest-name-fields {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.guest-name-field {
  display: grid;
  gap: 8px;
}
.guest-name-field span {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.guest-name-field input.guest-name-input {
  width: 100%;
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
}
.form-hint:empty { display: none !important; }
#panel-rsvp .attendance-yes-only[hidden],
#guest-names-row[hidden] { display: none !important; }
#panel-rsvp .guest-detail-card input.guest-allergies,
#panel-rsvp .guest-detail-card:last-child input.guest-allergies,
#panel-rsvp .guest-detail-card select.guest-menu,
#panel-rsvp .guest-detail-card:last-child select.guest-menu {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   v1.34 refinements
   - Keep Luze discount code + copy icon on one line where possible.
   - Hide auxiliary thank-you text under the RSVP submit button.
   ========================================================= */
.form-footer .thanks { display: none !important; }

.promo-code-row {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 10px !important;
  max-width: 100% !important;
}
.card .promo strong,
#luze-code {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline-block !important;
  max-width: calc(100% - 42px) !important;
  font-size: clamp(.72rem, 1.15vw, 1.02rem) !important;
  letter-spacing: clamp(.035em, .42vw, .13em) !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}
.copy-code {
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
}
@media (max-width: 430px) {
  .promo-code-row { gap: 8px !important; }
  .card .promo strong,
  #luze-code {
    max-width: calc(100% - 38px) !important;
    font-size: clamp(.63rem, 3.1vw, .82rem) !important;
    letter-spacing: .02em !important;
  }
  .copy-code {
    flex-basis: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }
}


/* =========================================================
   v1.35 RSVP flow fix
   - Generate one name field per confirmed attendee.
   - Generate matching menu/allergy blocks from those names.
   - Reduce excessive empty space at the end of RSVP.
   ========================================================= */
.guest-name-fields {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.guest-name-card {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  background: rgba(252,250,247,.62);
  border: 1px solid rgba(196,178,137,.40);
  border-radius: 10px;
  padding: 18px 20px;
}
.guest-name-card span {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.guest-name-card input.guest-name-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  line-height: 56px !important;
}
#panel-rsvp section {
  padding-bottom: clamp(34px, 5vw, 72px) !important;
}
#panel-rsvp .form-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#panel-rsvp .form-wrap {
  margin-bottom: 0 !important;
}
@media (max-width: 700px) {
  .guest-name-card { padding: 16px 16px; }
  .guest-name-card input.guest-name-input {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    line-height: 58px !important;
  }
  #panel-rsvp section {
    padding-bottom: 36px !important;
  }
}

/* =========================================================
   v1.36 fixes
   - Mandatory RSVP validation for all required fields.
   - Stronger visual feedback for missing fields.
   - Robust one-line Luze discount code on narrow cards.
   - Reduce empty space below RSVP submit button.
   ========================================================= */
#panel-rsvp .field-invalid,
#panel-rsvp .field-invalid-group {
  border-color: #9a4b38 !important;
  box-shadow: 0 0 0 3px rgba(154, 75, 56, .12) !important;
}
#panel-rsvp .field-invalid-group {
  border-radius: 14px;
  padding: 8px;
  margin: -8px;
}
#panel-rsvp .field-invalid-group .radio-pill {
  border-color: rgba(154, 75, 56, .55) !important;
}
#panel-rsvp .form-status.error {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
#panel-rsvp section {
  padding-bottom: 18px !important;
}
#panel-rsvp .form-wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-rsvp .form-footer {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.card .promo {
  overflow: visible !important;
}
.card .promo .promo-code-row,
.promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.card .promo #luze-code,
#luze-code {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 34px) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(.68rem, 2.15vw, .96rem) !important;
  letter-spacing: clamp(.015em, .24vw, .09em) !important;
  line-height: 1.12 !important;
  transform: none !important;
}
.card .promo .copy-code,
.copy-code {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
}
@media (max-width: 480px) {
  .card .promo .promo-code-row,
  .promo-code-row { gap: 7px !important; }
  .card .promo #luze-code,
  #luze-code {
    max-width: calc(100% - 32px) !important;
    font-size: clamp(.62rem, 2.65vw, .82rem) !important;
    letter-spacing: .01em !important;
  }
  .card .promo .copy-code,
  .copy-code {
    flex-basis: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
  }
}


/* =========================================================
   v1.37 refinements
   - Mark the song request as optional via translations.
   - Reduce empty space below RSVP submit button.
   - Keep Hotel Luze discount code readable and on one line with a compact icon.
   - Add a touch more breathing room after the main CTA.
   ========================================================= */
#panel-rsvp section,
#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card {
  padding-bottom: 0 !important;
}
#panel-rsvp .form-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#panel-rsvp .form-footer {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#panel-rsvp .form-status {
  min-height: 0 !important;
  margin-top: 10px !important;
}
#panel-rsvp .form-status:empty {
  display: none !important;
}

/* Main page: keep a little elegant air below the final RSVP button. */
#panel-home .cta {
  padding-bottom: clamp(98px, 12vw, 154px) !important;
}

/* Hotel Luze discount code: small, single-line, no clipping, compact copy icon. */
.card .promo {
  overflow: visible !important;
  text-align: center !important;
}
.card .promo .promo-code-row,
.promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.card .promo #luze-code,
#luze-code {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(.70rem, 1.0vw, .88rem) !important;
  letter-spacing: .055em !important;
  line-height: 1.18 !important;
  transform: none !important;
}
.card .promo .copy-code,
.copy-code {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.card .promo .copy-code svg,
.copy-code svg {
  width: 12px !important;
  height: 12px !important;
}
@media (max-width: 760px) {
  .card .promo #luze-code,
  #luze-code {
    font-size: clamp(.68rem, 2.65vw, .82rem) !important;
    letter-spacing: .025em !important;
  }
  .card .promo .promo-code-row,
  .promo-code-row { gap: 6px !important; }
  .card .promo .copy-code,
  .copy-code {
    flex-basis: 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
  }
}
@media (max-width: 380px) {
  .card .promo #luze-code,
  #luze-code {
    font-size: .64rem !important;
    letter-spacing: .01em !important;
  }
}


/* =========================================================
   v1.38 refinements
   - Restore strong manual RSVP validation before sending.
   - Remove the excessive blank area below the RSVP submit button.
   ========================================================= */
#panel-rsvp section {
  min-height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-rsvp .container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-rsvp .form-wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-rsvp .form-footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-rsvp .form-status:empty {
  display: none !important;
}
body.rsvp-active .site-footer {
  margin-top: 0 !important;
}
#panel-rsvp .field-invalid {
  border-color: #9a4b38 !important;
  box-shadow: 0 0 0 3px rgba(154,75,56,.13) !important;
}
#panel-rsvp .field-invalid-group {
  outline: 1px solid rgba(154,75,56,.45) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  margin: -8px !important;
  box-shadow: 0 0 0 3px rgba(154,75,56,.10) !important;
}
@media (max-width: 700px) {
  #panel-rsvp section { padding-bottom: 0 !important; }
  #panel-rsvp .form-footer { margin-top: 2px !important; }
}

/* v1.39: guest 1 is the contact person and cannot be edited */
.guest-name-card-primary input[readonly] {
  background: rgba(245,241,232,.72) !important;
  color: var(--ink) !important;
  cursor: default !important;
}


/* =========================================================
   v1.40 RSVP cleanup
   - Keep optional marker in the song placeholder, not in the label.
   - Remove excessive blank space below the RSVP submit button.
   ========================================================= */
#panel-rsvp {
  padding-bottom: 0 !important;
}
#panel-rsvp section,
#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card,
#panel-rsvp .container,
#panel-rsvp .form-wrap {
  min-height: auto !important;
  margin-bottom: 0 !important;
}
#panel-rsvp section,
#panel-rsvp .rsvp-section,
#panel-rsvp .rsvp-card {
  padding-bottom: 0 !important;
}
#panel-rsvp .form-footer {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#panel-rsvp #submit-btn {
  margin-bottom: 0 !important;
}
#panel-rsvp .success-panel {
  min-height: auto !important;
  margin: 0 !important;
  padding: clamp(28px, 5vw, 44px) 0 0 !important;
}
body.rsvp-active .site-footer {
  margin-top: clamp(18px, 3vw, 34px) !important;
}
@media (max-width: 700px) {
  #panel-rsvp .form-footer { margin-top: 6px !important; }
  body.rsvp-active .site-footer { margin-top: 18px !important; }
}

/* v1.42 — countdown, calendar, image optimisation and copy feedback */
.countdown {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: clamp(.78rem, 1.8vw, .96rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(61, 53, 41, .62);
  text-align: center;
}
.calendar-actions {
  display: flex;
  justify-content: center;
  margin: 34px auto 0;
}
.calendar-btn {
  min-width: 0;
  padding-inline: 28px;
}
.copy-code {
  position: relative !important;
}
.copy-code.is-copied::after {
  content: attr(data-feedback) !important;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 190px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(252,250,247,.96);
  border: 1px solid rgba(168,139,74,.32);
  color: var(--olive-dark);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(61,53,41,.10);
  z-index: 6;
}
.copy-code.is-copied svg {
  display: block !important;
}
@media (max-width: 640px) {
  .calendar-actions { margin-top: 24px; }
  .calendar-btn { padding-inline: 20px; }
}


/* v1.43 — refined countdown and Hotel Luze copy button alignment */
.wedding-countdown {
  margin: 0 auto 34px;
  max-width: 720px;
  text-align: center;
  color: var(--olive-dark);
}
.countdown-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive-dark);
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(68px, 1fr));
  gap: clamp(8px, 2vw, 18px);
  align-items: stretch;
}
.countdown-item {
  padding: 12px 8px 10px;
  border: 1px solid rgba(168,139,74,.30);
  border-radius: 18px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 12px 28px rgba(61,53,41,.055);
}
.countdown-item span {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--olive-dark);
  font-variant-numeric: tabular-nums;
}
.countdown-item small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: clamp(.58rem, 1.4vw, .72rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(61, 53, 41, .64);
}
.card .promo { text-align: center !important; }
.card .promo .promo-code-row,
.promo-code-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  line-height: 1.15 !important;
}
.card .promo #luze-code,
#luze-code {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 42px) !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: clamp(.78rem, 2.4vw, 1.03rem) !important;
  letter-spacing: .10em !important;
  line-height: 1.2 !important;
}
.card .promo .copy-code,
.copy-code {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
}
.card .promo .copy-code svg,
.copy-code svg {
  width: 14px !important;
  height: 14px !important;
}
@media (max-width: 640px) {
  .wedding-countdown { margin-bottom: 28px; }
  .countdown-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .countdown-item { padding: 9px 3px 8px; border-radius: 14px; }
  .countdown-item span { font-size: clamp(1rem, 6vw, 1.35rem); }
  .countdown-item small { font-size: .5rem; letter-spacing: .06em; }
  .card .promo #luze-code,
  #luze-code {
    font-size: clamp(.68rem, 3.25vw, .86rem) !important;
    letter-spacing: .055em !important;
    max-width: calc(100% - 34px) !important;
  }
  .card .promo .promo-code-row,
  .promo-code-row { gap: 5px !important; }
  .card .promo .copy-code,
  .copy-code {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
}


/* =========================================================
   v1.44 refinements
   - No status text under RSVP submit while sending.
   - Add compact Inicio button after RSVP success message.
   - Keep Hotel Luze copy icon beside the discount code without overlap.
   ========================================================= */
#panel-rsvp .form-status {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#panel-rsvp .form-status:empty,
#panel-rsvp .form-status:not(.error) {
  display: none !important;
}
#panel-rsvp .form-status.error {
  display: block !important;
  margin-top: 14px !important;
  padding: 0 !important;
}
#panel-rsvp.rsvp-submitted .success-home-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 150px !important;
  margin: 30px auto 0 !important;
  padding: 13px 34px !important;
  text-decoration: none !important;
}
.card .promo,
.card .promo * {
  box-sizing: border-box !important;
}
.card .promo {
  text-align: center !important;
  overflow: visible !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.card .promo .promo-code-row,
.promo-code-row {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.card .promo #luze-code,
#luze-code {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 30px) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: clamp(.64rem, .82vw, .82rem) !important;
  letter-spacing: .035em !important;
  line-height: 1.1 !important;
  transform: none !important;
}
.card .promo .copy-code,
.copy-code {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card .promo .copy-code svg,
.copy-code svg {
  width: 12px !important;
  height: 12px !important;
}
@media (max-width: 520px) {
  .card .promo .promo-code-row,
  .promo-code-row { gap: 5px !important; }
  .card .promo #luze-code,
  #luze-code {
    font-size: clamp(.58rem, 2.7vw, .76rem) !important;
    letter-spacing: .012em !important;
    max-width: calc(100% - 28px) !important;
  }
  .card .promo .copy-code,
  .copy-code {
    flex-basis: 21px !important;
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
  }
}

/* =========================================================
   v1.45 refinements
   - Remove the small hero countdown and decorative rule.
   - Restore the full live countdown before the CTA.
   ========================================================= */
.invite-card > .countdown,
.invite-card > .card-rule {
  display: none !important;
}
.countdown-section {
  padding: clamp(18px, 4vw, 34px) 0 clamp(10px, 3vw, 22px) !important;
  position: relative;
  z-index: 2;
}
.countdown-section .container {
  max-width: 820px;
}
.wedding-countdown {
  margin: 0 auto clamp(18px, 3vw, 28px) !important;
  padding: 0 clamp(10px, 2vw, 18px);
}
.countdown-title {
  margin-bottom: clamp(14px, 2.8vw, 22px) !important;
}
.cta {
  padding-top: clamp(18px, 4vw, 34px) !important;
}
@media (max-width: 640px) {
  .countdown-section {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }
}


/* v2.0 final: unify Dress code title with the rest of section titles */
.dress-code-section .section-title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--fg) !important;
  margin-bottom: 26px !important;
}

/* =========================================================
   v2.3 — favicon/social preview, elegant preloader and final polish
   ========================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: var(--bg, #f8f5ef);
  transition: opacity .55s ease, visibility .55s ease;
}
.page-loader-mark {
  width: min(46vw, 360px);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.965);
  animation: loaderMarkIn .55s ease forwards;
}
body.loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes loaderMarkIn {
  to { opacity: 1; transform: scale(1); }
}
.closing-line {
  margin: 24px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: rgba(61,53,41,.72);
}
.photos-page.reveal {
  transition-delay: .12s;
}
@media (max-width: 640px) {
  .page-loader-mark { width: min(70vw, 300px); }
  .closing-line { margin-top: 20px; }
}


/* v2.4 — menu infantil + refined loading screen */
.page-loader {
  background: var(--page-bg, #f7f0e7);
  transition: opacity .75s ease, visibility .75s ease;
}
.page-loader-mark {
  width: clamp(280px, 38vw, 560px);
  max-width: 76vw;
  height: auto;
}
@media (min-width: 1100px) {
  .page-loader-mark { width: clamp(360px, 34vw, 580px); }
}
@media (max-width: 520px) {
  .page-loader-mark { width: min(76vw, 340px); }
}


/* =========================================================
   v2.5 — final refinements
   - Mobile footer in a single line: names left, love right.
   - Loader uses beige background and responsive wreath, no dark/black layer.
   - RSVP first guest is read-only and kept in sync with "Tu nombre".
   ========================================================= */
.page-loader {
  background: #f7f0e7 !important;
  background-color: #f7f0e7 !important;
  z-index: 999999 !important;
}
.page-loader picture { display: grid; place-items: center; }
.page-loader-mark {
  width: clamp(300px, 42vw, 620px) !important;
  max-width: 82vw !important;
  height: auto !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
@media (max-width: 520px) {
  .page-loader-mark { width: min(78vw, 360px) !important; }
}
@media (max-height: 620px) {
  .page-loader-mark { width: min(58vh, 420px) !important; }
}

@media (max-width: 640px) {
  .site-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 14px 16px !important;
    font-size: .58rem !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  .site-footer .love {
    margin-left: auto !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }
  .site-footer svg { width: 12px !important; height: 12px !important; }
}

.guest-name-card-primary input[readonly] {
  background: rgba(245,241,232,.72) !important;
  color: var(--ink) !important;
  cursor: default !important;
  pointer-events: none !important;
}


/* v2.6 — loader wreath fix: use transparent PNG, never WebP with black matte */
.page-loader {
  background: #f7f0e7 !important;
  background-image: none !important;
}
.page-loader-mark {
  background: transparent !important;
  mix-blend-mode: normal !important;
}
.page-loader picture, .page-loader img {
  background: transparent !important;
}

/* =========================================================
   v2.8 stabilization
   - Restore full live countdown before CTA.
   - Keep accommodation images aligned and remove image gaps.
   ========================================================= */
.invite-card > .countdown,
.invite-card > .card-rule {
  display: none !important;
}

.countdown-section {
  padding: clamp(22px, 4vw, 38px) 0 clamp(8px, 2vw, 18px) !important;
  position: relative;
  z-index: 2;
}
.countdown-section .container {
  max-width: 820px;
}
.wedding-countdown {
  margin: 0 auto clamp(16px, 3vw, 26px) !important;
  padding: 0 clamp(10px, 2vw, 18px);
  text-align: center;
}
.countdown-title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.3vw, 1.65rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 clamp(12px, 2.8vw, 22px) !important;
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 14px);
}
.countdown-item {
  padding: clamp(10px, 2vw, 16px) clamp(3px, 1vw, 8px);
  border: 1px solid rgba(92, 94, 66, .18);
  border-radius: 18px;
  background: rgba(252, 250, 247, .42);
  box-shadow: 0 10px 28px rgba(61, 53, 41, .045);
}
.countdown-item span {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4.5vw, 2.15rem);
  line-height: 1;
  color: var(--olive-dark);
}
.countdown-item small {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: clamp(.52rem, 1.25vw, .68rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.countdown-section + .cta {
  padding-top: clamp(18px, 4vw, 34px) !important;
}

.cards {
  align-items: stretch !important;
}
.card {
  display: flex !important;
  flex-direction: column !important;
}
.card-photo,
.card .card-photo,
.card .card-photo.luze-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  clip-path: none !important;
}
.card h3 {
  margin-top: 0 !important;
}
.card .map-link {
  margin-top: auto !important;
}
@media (max-width: 700px) {
  .countdown-section {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
  }
  .countdown-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .countdown-item {
    padding: 9px 3px 8px;
    border-radius: 14px;
  }
  .countdown-item span {
    font-size: clamp(1rem, 6vw, 1.35rem);
  }
  .countdown-item small {
    font-size: .5rem;
    letter-spacing: .06em;
  }
  .card-photo,
  .card .card-photo,
  .card .card-photo.luze-photo {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }
}


/* v2.9 — alojamiento: ilustraciones no recortadas y Luze en alta resolución */
#panel-home .card-photo,
#panel-home .card .card-photo,
#panel-home .card .card-photo.luze-photo {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(102,110,80,.18) !important;
  border-radius: 2px !important;
  padding: clamp(10px, 1.2vw, 18px) !important;
  box-sizing: border-box !important;
  margin: 0 0 18px 0 !important;
  clip-path: none !important;
}
#panel-home .card .card-photo.luze-photo {
  image-rendering: auto !important;
  transform: none !important;
}
@media (max-width: 700px) {
  #panel-home .card-photo,
  #panel-home .card .card-photo,
  #panel-home .card .card-photo.luze-photo {
    aspect-ratio: 16 / 10 !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
    object-fit: contain !important;
  }
}

/* v2.11 — subtle flying animals on main page */
.flying-animals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}
.flying-animal {
  position: absolute;
  width: clamp(28px, 4.4vw, 62px);
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  filter: drop-shadow(0 8px 10px rgba(62, 56, 42, .08));
}
.flying-bee { width: clamp(22px, 3.3vw, 44px); }
.flying-dragonfly { width: clamp(34px, 5.2vw, 74px); }
.flying-animal.is-visible {
  animation: animalFlutter .42s ease-in-out infinite alternate;
}
@keyframes animalFlutter {
  from { margin-top: -1px; filter: drop-shadow(0 7px 9px rgba(62, 56, 42, .07)); }
  to { margin-top: 2px; filter: drop-shadow(0 11px 12px rgba(62, 56, 42, .10)); }
}
@media (max-width: 700px) {
  .flying-animals { z-index: 4; }
  .flying-animal { opacity: 0; }
  .flying-dragonfly { display: none; }
  .flying-bee { width: 28px; }
  .flying-butterfly { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .flying-animals { display: none !important; }
}

/* v2.12 — independent subtle insect flight, no longer tied to scroll */
.flying-animals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}
.flying-animal {
  position: absolute;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  filter: drop-shadow(0 8px 10px rgba(62, 56, 42, .08));
}
.flying-bee {
  width: clamp(22px, 3vw, 42px);
  animation: beeFlight 28s linear infinite, animalFlutter .45s ease-in-out infinite alternate;
  animation-delay: 5s, 0s;
}
.flying-butterfly {
  width: clamp(30px, 4vw, 56px);
  animation: butterflyFlight 34s linear infinite, animalFlutter .52s ease-in-out infinite alternate;
  animation-delay: 11s, .15s;
}
.flying-dragonfly {
  width: clamp(38px, 5vw, 76px);
  animation: dragonflyFlight 38s linear infinite, animalFlutter .36s ease-in-out infinite alternate;
  animation-delay: 18s, .1s;
}
@keyframes beeFlight {
  0%   { opacity: 0; transform: translate3d(calc(100vw + 80px), 68vh, 0) rotate(-10deg) scale(.76); }
  8%   { opacity: .62; }
  30%  { transform: translate3d(72vw, 58vh, 0) rotate(-18deg) scale(.82); }
  58%  { transform: translate3d(42vw, 64vh, 0) rotate(12deg) scale(.78); }
  90%  { opacity: .62; }
  100% { opacity: 0; transform: translate3d(-90px, 50vh, 0) rotate(-6deg) scale(.72); }
}
@keyframes butterflyFlight {
  0%   { opacity: 0; transform: translate3d(-90px, 32vh, 0) rotate(10deg) scale(.78); }
  10%  { opacity: .64; }
  28%  { transform: translate3d(26vw, 24vh, 0) rotate(-12deg) scale(.86); }
  56%  { transform: translate3d(56vw, 36vh, 0) rotate(16deg) scale(.82); }
  90%  { opacity: .64; }
  100% { opacity: 0; transform: translate3d(calc(100vw + 90px), 28vh, 0) rotate(8deg) scale(.76); }
}
@keyframes dragonflyFlight {
  0%   { opacity: 0; transform: translate3d(calc(100vw + 110px), 41vh, 0) rotate(-4deg) scale(.70); }
  9%   { opacity: .55; }
  36%  { transform: translate3d(68vw, 30vh, 0) rotate(7deg) scale(.74); }
  64%  { transform: translate3d(34vw, 38vh, 0) rotate(-10deg) scale(.68); }
  90%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(-120px, 24vh, 0) rotate(2deg) scale(.66); }
}
@keyframes animalFlutter {
  from { margin-top: -1px; filter: drop-shadow(0 7px 9px rgba(62, 56, 42, .07)); }
  to   { margin-top: 2px; filter: drop-shadow(0 11px 12px rgba(62, 56, 42, .10)); }
}
body.rsvp-active .flying-animals { display: none; }
@media (max-width: 700px) {
  .flying-animals { z-index: 4; }
  .flying-dragonfly { display: none; }
  .flying-bee { width: 26px; animation-duration: 34s, .45s; }
  .flying-butterfly { width: 32px; animation-duration: 38s, .52s; }
}
@media (prefers-reduced-motion: reduce) {
  .flying-animals { display: none !important; }
}


/* v2.13 — corona loader removed after invitation redesign. */
.page-loader, .page-loader-mark { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body { overflow: auto; }


/* v2.18 — invitation typography alignment
   Uses Amsterdam Four when available; falls back gracefully if the webfont is not installed/hosted.
   The ampersand intentionally uses Cormorant Garamond in soft green. */
.brand,
.script-names,
.invite-card .script-names {
  font-family: "Amsterdam Four", "AmsterdamFour", "Amsterdam 4", "Alex Brush", "Parisienne", "Imperial Script", cursive !important;
  font-weight: 400 !important;
}
.invite-card .script-names {
  color: #454850 !important;
}
.invite-card .card-amp {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: #aebf9e !important;
  font-weight: 500 !important;
}

/* v2.19 — Amsterdam Four applied through rendered name assets.
   The font file is not shipped in the public bundle; the names are rendered as image assets
   so all devices see the same invitation typography. */
.invite-card .script-names.hero-names-image{
  font-family: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  margin: clamp(.2rem, 1vw, .6rem) auto clamp(.25rem, 1vw, .55rem) !important;
  width: min(92vw, 760px) !important;
  color: transparent !important;
}
.invite-card .hero-name-line{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  line-height: 0 !important;
}
.invite-card .hero-name-img{
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  pointer-events: none !important;
  user-select: none !important;
}
.invite-card .hero-name-daan{
  width: min(76vw, 590px) !important;
}
.invite-card .hero-name-mapi{
  width: min(78vw, 610px) !important;
  margin-top: clamp(-18px, -1.6vw, -8px) !important;
}
.invite-card .script-names.hero-names-image .card-amp{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: #aebf9e !important;
  font-size: clamp(2.1rem, 4.8vw, 3.2rem) !important;
  font-weight: 500 !important;
  line-height: .85 !important;
  display: block !important;
  margin: clamp(-8px, -0.6vw, -2px) 0 clamp(-12px, -1vw, -4px) !important;
}

@media (max-width: 700px){
  .invite-card .script-names.hero-names-image{
    width: min(94vw, 420px) !important;
    margin-top: .25rem !important;
  }
  .invite-card .hero-name-daan{
    width: min(86vw, 390px) !important;
  }
  .invite-card .hero-name-mapi{
    width: min(88vw, 400px) !important;
    margin-top: -10px !important;
  }
  .invite-card .script-names.hero-names-image .card-amp{
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    margin: -5px 0 -8px !important;
  }
}

/* v2.20 — reduce hero name size and add safe vertical room for Amsterdam Four swashes. */
.invite-card .script-names.hero-names-image{
  width: min(90vw, 650px) !important;
  overflow: visible !important;
  margin: clamp(.2rem, 1vw, .6rem) auto clamp(.5rem, 1.2vw, .85rem) !important;
}
.invite-card .hero-name-line{
  overflow: visible !important;
}
.invite-card .hero-name-img{
  overflow: visible !important;
}
.invite-card .hero-name-daan{
  width: min(70vw, 505px) !important;
}
.invite-card .hero-name-mapi{
  width: min(72vw, 525px) !important;
  margin-top: clamp(-12px, -1.1vw, -5px) !important;
}
.invite-card .script-names.hero-names-image .card-amp{
  font-size: clamp(1.8rem, 4.1vw, 2.7rem) !important;
  margin: clamp(-6px, -0.5vw, -2px) 0 clamp(-8px, -0.7vw, -3px) !important;
}

@media (max-width: 700px){
  .invite-card .script-names.hero-names-image{
    width: min(92vw, 360px) !important;
    margin-top: .2rem !important;
    margin-bottom: .5rem !important;
  }
  .invite-card .hero-name-daan{
    width: min(78vw, 320px) !important;
  }
  .invite-card .hero-name-mapi{
    width: min(80vw, 330px) !important;
    margin-top: -6px !important;
  }
  .invite-card .script-names.hero-names-image .card-amp{
    font-size: clamp(1.55rem, 6.8vw, 2.1rem) !important;
    margin: -4px 0 -5px !important;
  }
}

/* v2.21 — final hero name sizing: smaller and no clipping for Amsterdam Four swashes */
.invite-card,
.hero-stage,
.invite-card .script-names.hero-names-image,
.invite-card .hero-name-line,
.invite-card .hero-name-img {
  overflow: visible !important;
}

.invite-card .script-names.hero-names-image{
  width: min(84vw, 560px) !important;
  max-width: 560px !important;
  line-height: 1 !important;
  gap: 0 !important;
  margin: clamp(.35rem, 1vw, .75rem) auto clamp(.75rem, 1.4vw, 1.05rem) !important;
  padding: 0.35em 0 0.45em !important;
}

.invite-card .hero-name-line{
  line-height: 0 !important;
  padding: .08em 0 .16em !important;
}

.invite-card .hero-name-daan{
  width: min(62vw, 430px) !important;
  max-width: 430px !important;
}

.invite-card .hero-name-mapi{
  width: min(64vw, 445px) !important;
  max-width: 445px !important;
  margin-top: clamp(-4px, -0.55vw, -2px) !important;
}

.invite-card .script-names.hero-names-image .card-amp{
  font-size: clamp(1.55rem, 3.4vw, 2.25rem) !important;
  line-height: 1.05 !important;
  margin: clamp(-2px, -0.25vw, 0px) 0 clamp(-3px, -0.35vw, -1px) !important;
}

@media (max-width: 700px){
  .invite-card .script-names.hero-names-image{
    width: min(88vw, 310px) !important;
    max-width: 310px !important;
    margin-top: .35rem !important;
    margin-bottom: .75rem !important;
    padding: .45em 0 .55em !important;
  }
  .invite-card .hero-name-line{
    padding: .10em 0 .18em !important;
  }
  .invite-card .hero-name-daan{
    width: min(68vw, 270px) !important;
    max-width: 270px !important;
  }
  .invite-card .hero-name-mapi{
    width: min(70vw, 280px) !important;
    max-width: 280px !important;
    margin-top: -2px !important;
  }
  .invite-card .script-names.hero-names-image .card-amp{
    font-size: clamp(1.35rem, 5.6vw, 1.75rem) !important;
    margin: -1px 0 -2px !important;
  }
}

/* v2.22 — reduce Daan & Mapi hero name image assets by 30% including containers */
.invite-card,
.hero-stage,
.invite-card .script-names.hero-names-image,
.invite-card .hero-name-line,
.invite-card .hero-name-img {
  overflow: visible !important;
}

.invite-card .script-names.hero-names-image{
  width: min(58.8vw, 392px) !important;
  max-width: 392px !important;
  line-height: 1 !important;
  gap: 0 !important;
  margin: clamp(.25rem, .75vw, .55rem) auto clamp(.55rem, 1vw, .75rem) !important;
  padding: 0.35em 0 0.55em !important;
}

.invite-card .hero-name-line{
  line-height: 0 !important;
  padding: .10em 0 .20em !important;
}

.invite-card .hero-name-daan{
  width: min(43.4vw, 301px) !important;
  max-width: 301px !important;
}

.invite-card .hero-name-mapi{
  width: min(44.8vw, 312px) !important;
  max-width: 312px !important;
  margin-top: clamp(-3px, -0.4vw, -1px) !important;
}

.invite-card .script-names.hero-names-image .card-amp{
  font-size: clamp(1.10rem, 2.4vw, 1.58rem) !important;
  line-height: 1.05 !important;
  margin: clamp(-1px, -0.2vw, 0px) 0 clamp(-2px, -0.25vw, -1px) !important;
}

@media (max-width: 700px){
  .invite-card .script-names.hero-names-image{
    width: min(61.6vw, 217px) !important;
    max-width: 217px !important;
    margin-top: .25rem !important;
    margin-bottom: .55rem !important;
    padding: .45em 0 .65em !important;
  }
  .invite-card .hero-name-line{
    padding: .12em 0 .22em !important;
  }
  .invite-card .hero-name-daan{
    width: min(47.6vw, 189px) !important;
    max-width: 189px !important;
  }
  .invite-card .hero-name-mapi{
    width: min(49vw, 196px) !important;
    max-width: 196px !important;
    margin-top: -1px !important;
  }
  .invite-card .script-names.hero-names-image .card-amp{
    font-size: clamp(.95rem, 3.9vw, 1.22rem) !important;
    margin: -1px 0 -1px !important;
  }
}

/* v2.23 — tighten Amsterdam Four hero composition and prevent D swash clipping.
   Uses cropped transparent name assets and compact spacing between Daan, &, Mapi and date. */
.invite-card,
.hero-stage,
.invite-card .script-names.hero-names-image,
.invite-card .hero-name-line,
.invite-card .hero-name-img {
  overflow: visible !important;
}

.invite-card .script-names.hero-names-image{
  width: min(58.8vw, 392px) !important;
  max-width: 392px !important;
  gap: 0 !important;
  line-height: 1 !important;
  padding: 0.02em 0 0.04em !important;
  margin: clamp(.12rem, .45vw, .35rem) auto clamp(.10rem, .4vw, .28rem) !important;
}

.invite-card .hero-name-line{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.invite-card .hero-name-img{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

.invite-card .hero-name-daan{
  width: min(43.4vw, 301px) !important;
  max-width: 301px !important;
}

.invite-card .hero-name-mapi{
  width: min(44.8vw, 312px) !important;
  max-width: 312px !important;
  margin-top: 0 !important;
}

.invite-card .script-names.hero-names-image .card-amp{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: #aebf9e !important;
  font-size: clamp(1.10rem, 2.4vw, 1.58rem) !important;
  line-height: 1 !important;
  display: block !important;
  margin: clamp(-18px, -2.1vw, -8px) 0 clamp(-20px, -2.4vw, -10px) !important;
}

.invite-card .card-date{
  margin-top: clamp(.05rem, .35vw, .25rem) !important;
}

@media (max-width: 700px){
  .invite-card .script-names.hero-names-image{
    width: min(61.6vw, 217px) !important;
    max-width: 217px !important;
    padding: 0 !important;
    margin-top: .12rem !important;
    margin-bottom: .08rem !important;
  }
  .invite-card .hero-name-line{
    padding: 0 !important;
    margin: 0 !important;
  }
  .invite-card .hero-name-daan{
    width: min(47.6vw, 189px) !important;
    max-width: 189px !important;
  }
  .invite-card .hero-name-mapi{
    width: min(49vw, 196px) !important;
    max-width: 196px !important;
    margin-top: 0 !important;
  }
  .invite-card .script-names.hero-names-image .card-amp{
    font-size: clamp(.95rem, 3.9vw, 1.22rem) !important;
    margin: -16px 0 -18px !important;
  }
  .invite-card .card-date{
    margin-top: .05rem !important;
  }
}

/* v2.26 — top-menu brand aligned with invitation typography.
   Daan/Mapi are rendered Amsterdam Four assets; ampersand uses smaller Cormorant Garamond Regular in soft green. */
.site-header .brand{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
  overflow: visible !important;
  min-width: 0 !important;
  color: #454850 !important;
}
.site-header .brand-logo{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.035em !important;
  height: clamp(34px, 4.4vw, 48px) !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.site-header .brand-word{
  display: block !important;
  height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  overflow: visible !important;
  pointer-events: none !important;
  user-select: none !important;
}
.site-header .brand-amp{
  font-family: "Cormorant Garamond", "Cormorant Garamond Regular", Garamond, Georgia, serif !important;
  color: #aebf9e !important;
  font-size: clamp(0.78rem, 1.35vw, 1.08rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-optical-sizing: auto !important;
  line-height: 0.95 !important;
  display: inline-block !important;
  margin: 0 -0.10em !important;
  transform: translateY(0.08em) !important;
}
.site-header .brand-sr{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 700px){
  .site-header .brand-logo{
    height: clamp(31px, 7.8vw, 40px) !important;
    gap: 0.025em !important;
  }
  .site-header .brand-amp{
    font-size: clamp(0.68rem, 2.7vw, 0.92rem) !important;
    transform: translateY(0.08em) !important;
  }
}

/* v2.26 — menu logo ampersand refined: smaller Cormorant Garamond Regular, optically aligned with invitation. */


/* v2.27 — Cormorant Garamond Italic ampersand rendered as image.
   Avoids browser fallback and matches the invitation without shipping font files. */
.site-header .brand-logo{
  gap: 0.018em !important;
}
.site-header .brand-amp{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  width: auto !important;
  margin: 0 -0.18em !important;
  transform: translateY(0.03em) !important;
  line-height: 1 !important;
  overflow: visible !important;
}
.site-header .brand-amp-img{
  display: block !important;
  height: 32% !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}
@media (max-width: 700px){
  .site-header .brand-logo{
    gap: 0.01em !important;
  }
  .site-header .brand-amp{
    margin: 0 -0.16em !important;
    transform: translateY(0.035em) !important;
  }
  .site-header .brand-amp-img{
    height: 30% !important;
  }
}

.invite-card .script-names.hero-names-image .card-amp{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: -0.18em auto -0.18em !important;
  padding: 0 !important;
  height: clamp(30px, 4.8vw, 50px) !important;
  overflow: visible !important;
  color: transparent !important;
}
.invite-card .script-names.hero-names-image .card-amp .hero-amp-img{
  display: block !important;
  height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 700px){
  .invite-card .script-names.hero-names-image .card-amp{
    height: clamp(24px, 8vw, 38px) !important;
    margin: -0.14em auto -0.14em !important;
  }
}

/* v2.29 — match invitation: date uses the same soft green as the ampersand */
.invite-card .card-date{
  color: #aebf9e !important;
}