/* Baptism model "Rățușca veselă": a rubber duck, soap bubbles and a string of flags.
   The color theme sets --primary (the dark bands) and --accent (the bright color). */
.duck-baptism {
  --cream: #fff8ec;
  --ink: color-mix(in srgb, var(--primary) 78%, #0c0e18);
  --ink-soft: color-mix(in srgb, var(--ink) 74%, #fff);
  --accent-deep: color-mix(in srgb, var(--accent) 72%, #3a2a10);
  --accent-soft: color-mix(in srgb, var(--accent) 34%, #fff);
  --coral: #ff8f7a;
  --sun: #ffd166;
  --mint: #8fdcc2;
  --sky: #9ccbff;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 500 17px/1.65 "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.duck-baptism *, .duck-baptism *::before, .duck-baptism *::after { box-sizing: border-box; }
.duck-baptism h1, .duck-baptism h2, .duck-baptism h3, .duck-baptism p, .duck-baptism figure { margin: 0; }
.duck-baptism .skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 12px 16px; border-radius: 12px; background: #fff; color: var(--ink); transform: translateY(-220%); }
.duck-baptism .skip-link:focus { transform: translateY(0); }
.duck-baptism .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.duck-baptism .container { width: min(100% - 40px, 920px); margin-inline: auto; }
.duck-baptism .section { padding: clamp(56px, 8vw, 84px) 0; }
.duck-baptism h2 { color: var(--primary); font: 800 clamp(30px, 4.8vw, 44px)/1.12 "Baloo 2", system-ui, sans-serif; text-align: center; text-wrap: balance; }

/* Duck */
.duck-baptism .duck { display: block; height: auto; overflow: visible; }
.duck-baptism .duck-body { fill: #ffd23f; }
.duck-baptism .duck-wing { fill: #f5b82e; }
.duck-baptism .duck-tuft { fill: #f5b82e; }
.duck-baptism .duck-beak { fill: #ff8a3d; }
.duck-baptism .duck-beak-low { fill: #e96f25; }
.duck-baptism .duck-cheek { fill: #ff9d9d; opacity: .75; }
.duck-baptism .duck-eye { fill: #2a2433; }
.duck-baptism .duck-eye-light { fill: #fff; }
.duck-baptism .duck-shine { fill: #fff; opacity: .4; }

/* String of flags */
.duck-baptism .bunting { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 56px; }
.duck-baptism .bunting-string { fill: rgba(255, 255, 255, .85); }
.duck-baptism .flag--a { fill: var(--coral); }
.duck-baptism .flag--b { fill: var(--sun); }
.duck-baptism .flag--c { fill: var(--mint); }
.duck-baptism .flag--d { fill: var(--sky); }

/* Soap bubbles on the dark bands */
.duck-baptism .bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.duck-baptism .bubble { position: absolute; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .8) 0 7%, rgba(255, 255, 255, .14) 8% 58%, rgba(255, 255, 255, .04) 100%); animation: bubble-float 9s ease-in-out infinite; }
.duck-baptism .bubble--1 { top: 13%; left: 3%; width: clamp(34px, 5vw, 64px); aspect-ratio: 1; }
.duck-baptism .bubble--2 { top: 70%; left: 5%; width: clamp(18px, 2.6vw, 30px); aspect-ratio: 1; animation-duration: 11s; animation-delay: -3s; }
.duck-baptism .bubble--3 { top: 16%; right: 6%; width: clamp(22px, 3.4vw, 42px); aspect-ratio: 1; animation-duration: 12s; animation-delay: -5s; }
.duck-baptism .bubble--4 { top: 68%; right: 4%; width: clamp(40px, 6vw, 78px); aspect-ratio: 1; animation-duration: 10s; animation-delay: -2s; }
.duck-baptism .bubble--5 { top: 40%; left: 47%; width: clamp(14px, 2vw, 22px); aspect-ratio: 1; animation-duration: 8s; animation-delay: -4s; }
.duck-baptism .bubble--6 { top: 82%; left: 30%; width: clamp(20px, 3vw, 36px); aspect-ratio: 1; animation-duration: 13s; animation-delay: -6s; }

/* Wavy edge of a dark band */
.duck-baptism .wave { position: absolute; left: 0; display: block; width: 100%; height: clamp(26px, 5vw, 62px); fill: var(--cream); }
.duck-baptism .wave--bottom { bottom: -1px; }
.duck-baptism .wave--top { top: -1px; transform: scaleY(-1); }
/* The first and the last 2px of a dark band are light. This prevents a dark line at the wavy edge on screens with a fractional scale. */
.duck-baptism .band { position: relative; overflow: hidden; background: linear-gradient(var(--cream) 0 2px, var(--primary) 2px calc(100% - 2px), var(--cream) calc(100% - 2px)); color: #fff; }

/* Hero */
.duck-baptism .hero { position: relative; overflow: hidden; padding: clamp(92px, 11vw, 128px) 24px clamp(150px, 19vw, 230px); background: linear-gradient(to top, var(--cream) 0 2px, var(--primary) 2px); color: #fff; }
.duck-baptism .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 5vw, 64px); width: min(100%, 1040px); margin: 0 auto; }
.duck-baptism .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.duck-baptism .hero-eyebrow { padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 clamp(13px, 1.5vw, 15px)/1.4 "Quicksand", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.duck-baptism h1 { margin: 16px 0 12px; color: var(--accent); font: 800 clamp(60px, 9.4vw, 116px)/.95 "Baloo 2", system-ui, sans-serif; overflow-wrap: anywhere; }
/* Two children: the two first names stay whole, and the line breaks between them. */
.duck-baptism .hero-title--two { font-size: clamp(46px, 7vw, 86px); line-height: 1.02; overflow-wrap: normal; }
.duck-baptism .hero-name { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.duck-baptism .hero-and { color: #fff; font-size: .7em; }
.duck-baptism .hero-date { display: block; color: #fff; font: 700 clamp(17px, 2.1vw, 22px)/1.4 "Quicksand", system-ui, sans-serif; }
.duck-baptism .hero-date::first-letter, .duck-baptism .events-date::first-letter, .duck-baptism .footer-date::first-letter, .duck-baptism .date-weekday::first-letter { text-transform: uppercase; }

.duck-baptism .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 26px;
  padding: 12px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 6px 0 var(--accent-deep);
  color: var(--ink);
  cursor: pointer;
  font: 700 17px/1.3 "Quicksand", system-ui, sans-serif;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.duck-baptism .button:hover { box-shadow: 0 3px 0 var(--accent-deep); transform: translateY(3px); }
.duck-baptism .button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Round window: the photo of the child, or the duck on the water */
.duck-baptism .hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
.duck-baptism .porthole { position: relative; flex: 0 0 auto; width: clamp(230px, 34vw, 400px); aspect-ratio: 1; overflow: hidden; border: clamp(8px, 1.1vw, 12px) solid #fff; border-radius: 50%; background: linear-gradient(180deg, #d9f0ff 0%, #f1faff 100%); box-shadow: 0 0 0 clamp(6px, .9vw, 10px) var(--accent), 0 26px 50px rgba(0, 0, 0, .28); }
.duck-baptism .porthole img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duck-baptism .hero-art--two .porthole { width: clamp(150px, 23vw, 270px); }
.duck-baptism .hero-art--two .porthole + .porthole { margin-top: 22%; margin-left: -7%; }
.duck-baptism .duck--sticker { position: absolute; bottom: -7%; left: 2%; width: clamp(72px, 11vw, 124px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .22)); transform: rotate(-8deg); animation: duck-bob 5s ease-in-out infinite; }
.duck-baptism .pond-ducks { position: absolute; right: 0; bottom: 19%; left: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2%; animation: duck-bob 5s ease-in-out infinite; }
.duck-baptism .pond-ducks .duck { width: 62%; }
.duck-baptism .porthole--two .pond-ducks .duck { width: 43%; }
.duck-baptism .porthole--two .pond-ducks .duck + .duck { width: 36%; }
.duck-baptism .pond-water { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 33%; }
.duck-baptism .pond-water-back { fill: #8fd0f5; }
.duck-baptism .pond-water-front { fill: #5fb6ea; }
.duck-baptism .pond-bubble { position: absolute; border: 2px solid rgba(95, 182, 234, .7); border-radius: 50%; background: rgba(255, 255, 255, .7); animation: bubble-float 7s ease-in-out infinite; }
.duck-baptism .pond-bubble--1 { top: 16%; left: 20%; width: 9%; aspect-ratio: 1; }
.duck-baptism .pond-bubble--2 { top: 26%; left: 33%; width: 5%; aspect-ratio: 1; animation-delay: -2s; }
.duck-baptism .pond-bubble--3 { top: 13%; right: 18%; width: 6.5%; aspect-ratio: 1; animation-delay: -4s; }

/* Date, parents and godparents */
.duck-baptism .details { position: relative; z-index: 2; margin-top: clamp(-150px, -12vw, -96px); }
.duck-baptism .details-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 3vw, 32px); }
.duck-baptism .date-bubble { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; order: 2; width: clamp(176px, 21vw, 216px); aspect-ratio: 1; border: 8px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 16px 34px rgba(20, 22, 40, .2); color: var(--ink); text-align: center; }
.duck-baptism .date-bubble::before { position: absolute; top: 13%; left: 17%; width: 17%; height: 11%; border-radius: 50%; background: rgba(255, 255, 255, .55); content: ""; transform: rotate(-32deg); }
.duck-baptism .date-weekday { font: 700 15px/1.2 "Quicksand", system-ui, sans-serif; letter-spacing: .08em; text-transform: lowercase; }
.duck-baptism .date-day { font: 800 clamp(64px, 8vw, 84px)/.92 "Baloo 2", system-ui, sans-serif; }
.duck-baptism .date-month { font: 700 16px/1.2 "Quicksand", system-ui, sans-serif; }
.duck-baptism .family-card { flex: 1 1 0; max-width: 310px; padding: 22px 22px 20px; border-radius: 26px; background: #fff; box-shadow: 7px 7px 0 var(--accent-soft); text-align: center; }
.duck-baptism .family-card--parents { order: 1; }
.duck-baptism .family-card--godparents { order: 3; }
.duck-baptism .family-card h3 { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--ink-soft); font: 700 13px/1.4 "Quicksand", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.duck-baptism .family-card h3::before { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); content: ""; }
.duck-baptism .family-card--godparents h3::before { background: var(--mint); }
.duck-baptism .family-card p { color: var(--primary); font: 700 clamp(21px, 2.2vw, 24px)/1.2 "Baloo 2", system-ui, sans-serif; overflow-wrap: anywhere; text-wrap: balance; }
.duck-baptism .family-card p + p { margin-top: 4px; }

/* Message */
.duck-baptism .story { padding-top: clamp(48px, 7vw, 72px); }
.duck-baptism .story-inner { max-width: 660px; text-align: center; }
.duck-baptism .story-message { margin-top: 16px; color: var(--ink-soft); font-size: 18px; }
.duck-baptism .story-message p + p { margin-top: 12px; }

/* Countdown */
.duck-baptism .countdown { padding: clamp(84px, 11vw, 128px) 20px; text-align: center; }
.duck-baptism .band-eyebrow { position: relative; margin-bottom: 22px; color: #fff; font: 800 clamp(24px, 3.6vw, 34px)/1.15 "Baloo 2", system-ui, sans-serif; text-wrap: balance; }
.duck-baptism .countdown-parts { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); }
.duck-baptism .countdown-part { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(74px, 19vw, 124px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); color: #26223a; }
.duck-baptism .countdown-part:nth-child(2) { background: var(--sun); }
.duck-baptism .countdown-part:nth-child(3) { background: var(--mint); }
.duck-baptism .countdown-part:nth-child(4) { background: var(--sky); }
.duck-baptism .countdown-part::before { position: absolute; top: 14%; left: 18%; width: 18%; height: 11%; border-radius: 50%; background: rgba(255, 255, 255, .6); content: ""; transform: rotate(-32deg); }
.duck-baptism .countdown-part strong { font: 800 clamp(28px, 6.6vw, 46px)/1 "Baloo 2", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.duck-baptism .countdown-part span { font: 700 clamp(11px, 2.6vw, 14px)/1.2 "Quicksand", system-ui, sans-serif; }

/* Schedule */
.duck-baptism .events-date { margin-top: 8px; color: var(--ink-soft); font-weight: 600; text-align: center; }
.duck-baptism .event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 30px; margin-top: 36px; }
.duck-baptism .event-card { padding: 30px 24px 28px; border: 2.5px solid var(--primary); border-radius: 30px; background: #fff; box-shadow: 8px 8px 0 var(--accent); text-align: center; }
.duck-baptism .event-card--party { box-shadow: 8px 8px 0 var(--coral); }
.duck-baptism .event-icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-soft); }
.duck-baptism .event-card--party .event-icon { background: color-mix(in srgb, var(--coral) 30%, #fff); }
.duck-baptism .event-icon svg { width: 36px; height: 36px; fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.duck-baptism .event-card h3 { color: var(--primary); font: 800 26px/1.2 "Baloo 2", system-ui, sans-serif; }
.duck-baptism .event-time { display: block; margin-top: 2px; color: var(--ink); font: 800 40px/1.1 "Baloo 2", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.duck-baptism .event-date { color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.duck-baptism .event-location { margin-top: 10px; font-weight: 700; }
.duck-baptism .event-address, .duck-baptism .event-description { color: var(--ink-soft); font-size: 15.5px; }
.duck-baptism .event-description { margin-top: 8px; }
.duck-baptism .invitation-navigation a { border-color: var(--primary); border-radius: 999px; color: var(--primary); font-weight: 700; }

/* Gallery */
.duck-baptism .gallery { padding-top: 0; }
.duck-baptism .invitation-story-gallery__photo { border-radius: 22px; }

/* RSVP */
.duck-baptism .rsvp { padding: clamp(96px, 12vw, 140px) 20px; }
.duck-baptism .rsvp-card { position: relative; width: min(100%, 680px); margin: 0 auto; padding: clamp(24px, 5vw, 44px); border-radius: 32px; background: var(--cream); box-shadow: 10px 10px 0 var(--accent); color: var(--ink); }
.duck-baptism .rsvp-intro { margin-top: 10px; color: var(--ink-soft); text-align: center; }
.duck-baptism .rsvp-deadline { text-align: center; }
/* The shared box with the RSVP deadline and the phone number takes the colors of the model. */
.duck-baptism #rsvp .invitation-rsvp-information { --rsvp-info-accent: var(--primary); --rsvp-info-radius: 18px; }
.duck-baptism .guest-greeting { margin-top: 16px; text-align: center; }
.duck-baptism .form-status { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #e3f6ea; color: #1f6b43; text-align: center; }
.duck-baptism .form-status--error { background: #fde8e8; color: #9b2c2c; }
.duck-baptism .rsvp-form { margin-top: 24px; }
.duck-baptism .attendance-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; border: 0; }
.duck-baptism .attendance-field label { position: relative; display: block; cursor: pointer; }
.duck-baptism .attendance-field input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.duck-baptism .attendance-field span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 12px; border: 2.5px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: 700 16px/1.3 "Quicksand", system-ui, sans-serif; text-align: center; transition: background-color .15s ease, color .15s ease; }
.duck-baptism .attendance-field input:checked + span { background: var(--primary); color: #fff; }
.duck-baptism .attendance-field input:focus-visible + span { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.duck-baptism .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duck-baptism .form-field--full { grid-column: 1 / -1; }
.duck-baptism .form-field[hidden] { display: none; }
.duck-baptism .form-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.duck-baptism .form-field input, .duck-baptism .form-field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 2px solid color-mix(in srgb, var(--primary) 26%, #fff); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; }
.duck-baptism .form-field textarea { resize: vertical; }
.duck-baptism .form-field input:focus, .duck-baptism .form-field textarea:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.duck-baptism .button--submit { width: 100%; margin-top: 22px; }
.duck-baptism .button--submit:focus-visible { outline-color: var(--primary); }
.duck-baptism .form-feedback { min-height: 1.5em; margin-top: 14px; color: var(--primary); font-weight: 700; text-align: center; }

/* Footer */
.duck-baptism .invitation-footer { padding: 36px 20px 44px; text-align: center; }
.duck-baptism .duck--footer { width: 86px; margin: 0 auto; animation: duck-bob 5s ease-in-out infinite; }
.duck-baptism .footer-message { margin-top: 10px; color: var(--primary); font: 800 clamp(30px, 5vw, 42px)/1.15 "Baloo 2", system-ui, sans-serif; text-wrap: balance; }
.duck-baptism .footer-name { margin-top: 4px; color: var(--ink); font: 700 22px/1.3 "Baloo 2", system-ui, sans-serif; overflow-wrap: anywhere; }
.duck-baptism .footer-date { color: var(--ink-soft); font-weight: 600; }
.duck-baptism .wedday-credit { display: inline-block; margin-top: 18px; color: var(--ink-soft); font-size: 13px; }

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes duck-bob {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -7px; rotate: 2deg; }
}

@media (max-width: 820px) {
  .duck-baptism .hero { padding-top: 84px; }
  .duck-baptism .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; text-align: center; }
  .duck-baptism .hero-art { order: -1; }
  .duck-baptism .hero-text { align-items: center; }
  .duck-baptism .details { margin-top: clamp(-120px, -19vw, -84px); }
  .duck-baptism .details-row { flex-direction: column; align-items: center; }
  .duck-baptism .date-bubble, .duck-baptism .family-card { order: 0; }
  .duck-baptism .family-card { flex: 0 0 auto; width: min(100%, 360px); max-width: none; }
}

@media (max-width: 560px) {
  .duck-baptism .form-grid { grid-template-columns: minmax(0, 1fr); }
  .duck-baptism .attendance-field { gap: 8px; }
  .duck-baptism .attendance-field span { padding: 10px 6px; font-size: 15px; }
  .duck-baptism .event-card { box-shadow: 6px 6px 0 var(--accent); }
  .duck-baptism .event-card--party { box-shadow: 6px 6px 0 var(--coral); }
  .duck-baptism .rsvp-card { box-shadow: 6px 6px 0 var(--accent); }
  .duck-baptism .bunting { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .duck-baptism .bubble, .duck-baptism .pond-bubble, .duck-baptism .duck, .duck-baptism .pond-ducks { animation: none; }
  .duck-baptism .button { transition: none; }
}