/* Baptism model "Poiana zânelor": a fairy glade with fireflies, leaves, flowers and toadstools.
   The color theme sets --accent (titles, buttons, the dress of the fairy) and --glade (the color of the glade). */
.fairy-baptism {
  --paper: #fffdf8;
  --ink: #36404a;
  --ink-soft: #66727d;
  --gold: #e3b24f;
  --leaf: #7dc09b;
  --leaf-light: #abdcbf;
  --accent-deep: color-mix(in srgb, var(--accent) 70%, #1d2530);
  --accent-mid: color-mix(in srgb, var(--accent) 45%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, #fff);
  --glade-soft: color-mix(in srgb, var(--glade) 45%, #fff);
  --night: color-mix(in srgb, var(--accent) 42%, #14212b);
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17.5px/1.65 "Bellota Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fairy-baptism *, .fairy-baptism *::before, .fairy-baptism *::after { box-sizing: border-box; }
.fairy-baptism h1, .fairy-baptism h2, .fairy-baptism h3, .fairy-baptism p, .fairy-baptism figure { margin: 0; }
.fairy-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%); }
.fairy-baptism .skip-link:focus { transform: translateY(0); }
.fairy-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; }
.fairy-baptism .container { width: min(100% - 40px, 880px); margin-inline: auto; }
.fairy-baptism .section { padding: clamp(52px, 8vw, 84px) 0; }
.fairy-baptism h2 { color: var(--accent-deep); font: 700 clamp(32px, 4.8vw, 46px)/1.15 "Charm", cursive; text-align: center; text-wrap: balance; }
.fairy-baptism .section-eyebrow { color: var(--ink-soft); font: 700 clamp(13.5px, 1.6vw, 15.5px)/1.5 "Bellota Text", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }

/* The fairy */
/* The colors of a fairy. The two small fairies at the sides change these colors. */
.fairy-baptism .fairy, .fairy-baptism .photo-wings { --skin: #fcdcc5; --skin-shade: #f5c9ac; --hair: #8d5a3b; --hair-shine: #c08e68; --dress: color-mix(in srgb, var(--accent) 74%, #fff); --dress-light: color-mix(in srgb, var(--accent) 36%, #fff); --shoe: var(--accent-deep); --wing: color-mix(in srgb, var(--accent) 38%, #fff); }
.fairy-baptism .fairy { display: block; width: 100%; height: auto; overflow: visible; }
/* The wings change color from top to bottom, as wings do in the light. */
.fairy-baptism .fairy-wing { fill-opacity: .92; stroke: color-mix(in srgb, var(--accent) 55%, #fff); stroke-width: 2; stroke-linejoin: round; }
.fairy-baptism .wing-stop--top { stop-color: var(--wing); }
.fairy-baptism .wing-stop--middle { stop-color: #fff; }
.fairy-baptism .wing-stop--bottom { stop-color: #f9c4db; }
.fairy-baptism .fairy-wing-shine { fill: #fff; opacity: .8; }
.fairy-baptism .fairy-vein { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, #fff); stroke-width: 1.1; stroke-linecap: round; opacity: .6; }
/* The wings close and open around the middle of the fairy. */
.fairy-baptism .fairy-wings { transform-origin: 120px 150px; animation: wings-flutter 1.1s ease-in-out infinite alternate; }
.fairy-baptism .fairy-limb { fill: none; stroke: var(--skin-shade); stroke-width: 8; stroke-linecap: round; }
.fairy-baptism .fairy-hand { fill: var(--skin); }
.fairy-baptism .fairy-shoe { fill: var(--shoe); }
.fairy-baptism .fairy-dress { fill: var(--dress); }
.fairy-baptism .fairy-dress-light { fill: var(--dress-light); }
.fairy-baptism .fairy-gem { fill: var(--gold); stroke: #fff; stroke-width: 1.2; }
.fairy-baptism .fairy-wand { fill: none; stroke: #b98a3c; stroke-width: 3; stroke-linecap: round; }
.fairy-baptism .fairy-star { fill: var(--gold); stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; }
.fairy-baptism .fairy-dust circle { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite; }
.fairy-baptism .fairy-dust circle:nth-child(2n) { animation-delay: -.6s; }
.fairy-baptism .fairy-dust circle:nth-child(3n) { animation-delay: -1.2s; }
.fairy-baptism .fairy-hair { fill: var(--hair); }
.fairy-baptism .fairy-hair-shine { fill: none; stroke: var(--hair-shine); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.fairy-baptism .fairy-skin { fill: var(--skin); }
.fairy-baptism .fairy-eye { fill: #46291f; }
.fairy-baptism .fairy-eye-shine { fill: #fff; }
.fairy-baptism .fairy-lash { fill: none; stroke: #46291f; stroke-width: 1.7; stroke-linecap: round; }
.fairy-baptism .fairy-mouth { fill: none; stroke: #cf5f74; stroke-width: 2.3; stroke-linecap: round; }
.fairy-baptism .fairy-blush { fill: #f98fa8; opacity: .5; }
.fairy-baptism .fairy .bloom-petal { fill: #fff; }
.fairy-baptism .fairy .bloom--second .bloom-petal { fill: #ffd3de; }
/* The two small fairies at the sides have their own hair, their own dress and their own wings. */
.fairy-baptism .fairy--sun { --hair: #e8b45e; --hair-shine: #f6d79a; --dress: #f48fb1; --dress-light: #fcd0df; --shoe: #c9648a; --wing: #fbd3e2; }
.fairy-baptism .fairy--berry { --skin: #e9b993; --skin-shade: #dba67d; --hair: #4b3428; --hair-shine: #7c5b48; --dress: #a98fe0; --dress-light: #dccff7; --shoe: #7458b8; --wing: #ddd2f8; }

/* Leaves, flowers and toadstools */
.fairy-baptism .branch-stem { fill: none; stroke: #6fae8c; stroke-width: 3; stroke-linecap: round; }
.fairy-baptism .leaf { fill: var(--leaf); }
.fairy-baptism .leaf--light { fill: var(--leaf-light); }
.fairy-baptism .bloom-petal { fill: #ffd3de; }
.fairy-baptism .bloom--second .bloom-petal { fill: #e3d5fb; }
.fairy-baptism .bloom-center { fill: var(--gold); }
.fairy-baptism .toadstool-stem { fill: #fff4e2; }
.fairy-baptism .toadstool-cap { fill: #ef7d8c; }
.fairy-baptism .toadstool-dot { fill: #fff; }
.fairy-baptism .house-door { fill: #a8724a; }
.fairy-baptism .house-knob { fill: var(--gold); }
.fairy-baptism .house-window { fill: #ffe39a; stroke: #c98f4a; stroke-width: 2; }
.fairy-baptism .house-window-bar { fill: none; stroke: #c98f4a; stroke-width: 1.4; }
.fairy-baptism .sparkle { position: absolute; width: clamp(14px, 2vw, 24px); height: auto; fill: var(--gold); animation: twinkle 2.4s ease-in-out infinite; }

/* Hero: the glade, the fairy, the first name and the meadow */
.fairy-baptism .hero { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: clamp(26px, 4vw, 44px) 20px 0; background: radial-gradient(ellipse 60% 46% at 50% 36%, rgba(255, 255, 255, .92), transparent 70%), linear-gradient(180deg, var(--glade) 0%, var(--glade-soft) 68%, var(--paper) 100%); text-align: center; }
.fairy-baptism .hero-glade { position: absolute; inset: 0; pointer-events: none; }
.fairy-baptism .branch { position: absolute; top: -6px; width: clamp(104px, 27vw, 400px); height: auto; overflow: visible; animation: branch-sway 5.5s ease-in-out infinite alternate; }
.fairy-baptism .branch--left { left: -8px; transform-origin: 0 0; }
.fairy-baptism .branch--right { right: -8px; transform-origin: 100% 0; animation-name: branch-sway-right; }
/* A firefly is a small light that floats and glows. */
.fairy-baptism .firefly { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffd257; box-shadow: 0 0 8px 3px rgba(255, 199, 71, .8), 0 0 22px 9px rgba(255, 199, 71, .32); animation: firefly-float 8s ease-in-out infinite alternate, firefly-glow 2.8s ease-in-out infinite alternate; }
.fairy-baptism .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 860px; }
.fairy-baptism .hero-fairy { position: relative; width: clamp(170px, 21vw, 280px); margin-bottom: clamp(2px, 1vw, 10px); filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--accent) 24%, transparent)); animation: fairy-hover 4.2s ease-in-out infinite alternate; }
/* A soft light is behind the fairy. */
.fairy-baptism .hero-fairy::before { position: absolute; z-index: -1; inset: -16% -34%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 68%); content: ""; }
.fairy-baptism .hero-friend { position: absolute; width: clamp(96px, 9.5vw, 160px); filter: drop-shadow(0 10px 12px rgba(54, 64, 74, .12)); animation: fairy-hover 3.6s ease-in-out infinite alternate; }
/* The two small fairies are below the line of the first name: a long first name does not go over them. */
.fairy-baptism .hero-friend--left { top: 60%; left: 7%; animation-delay: -1.4s; }
.fairy-baptism .hero-friend--right { top: 56%; right: 7%; animation-delay: -2.6s; }
/* The right fairy is a mirror image: its wand points to the center of the glade. */
.fairy-baptism .hero-friend--right .fairy { transform: scaleX(-1); }
.fairy-baptism .hero-friend .fairy-dust { display: none; }
.fairy-baptism .hero-eyebrow { color: var(--ink); font: 700 clamp(13.5px, 1.7vw, 16.5px)/1.5 "Bellota Text", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.fairy-baptism .hero-title { position: relative; margin: 6px 0 12px; color: var(--accent-deep); font: 700 clamp(84px, 14.5vw, 152px)/1.04 "Gwendolyn", cursive; text-shadow: 0 2px 0 #fff, 0 0 26px #fff; overflow-wrap: anywhere; }
.fairy-baptism .hero-title--two { font-size: clamp(60px, 9.6vw, 106px); }
.fairy-baptism .hero-amp { color: var(--gold); font-size: .72em; }
.fairy-baptism .sparkle--one { top: 6%; left: -8%; }
.fairy-baptism .sparkle--two { top: -4%; right: -6%; width: clamp(10px, 1.4vw, 17px); animation-delay: -.8s; }
.fairy-baptism .sparkle--three { right: -10%; bottom: 8%; animation-delay: -1.6s; }
/* The date has a small gold diamond on each side. */
.fairy-baptism .hero-date { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font: 700 clamp(14px, 1.7vw, 17px)/1.4 "Bellota Text", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.fairy-baptism .hero-date::before, .fairy-baptism .hero-date::after { flex: none; width: 7px; height: 7px; background: var(--gold); content: ""; transform: rotate(45deg); }

.fairy-baptism .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 24px;
  padding: 13px 38px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-deep);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .12);
  color: #fff;
  cursor: pointer;
  font: 700 17px/1.3 "Bellota Text", system-ui, sans-serif;
  letter-spacing: .06em;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fairy-baptism .button:hover { box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .12); transform: translateY(-2px); }
.fairy-baptism .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.fairy-baptism .hero-meadow { position: relative; z-index: 1; align-self: stretch; margin: clamp(14px, 3vw, 34px) -20px 0; }
/* The meadow keeps the proportions of its drawing on a wide screen: no toadstool is cut at the top.
   On a small screen the meadow is 120px high and shows the center of the drawing. */
.fairy-baptism .meadow { display: block; width: 100%; height: auto; min-height: 120px; aspect-ratio: 6 / 1; }
.fairy-baptism .meadow-hill--back { fill: #c3e8cc; }
.fairy-baptism .meadow-hill--front { fill: #93d2a6; }
.fairy-baptism .grass-blade { fill: none; stroke: #5fae7d; stroke-width: 2.6; stroke-linecap: round; }
.fairy-baptism .grass-blade--back { stroke: #93d2a6; }
.fairy-baptism .flower-stem { fill: none; stroke: #5fae7d; stroke-width: 2.2; stroke-linecap: round; }
.fairy-baptism .bluebell { fill: #a99be6; }
.fairy-baptism .meadow .bloom-petal { fill: #fff; }
.fairy-baptism .meadow .bloom--second .bloom-petal { fill: #ffd3de; }

/* Message and photos */
.fairy-baptism .story { overflow: hidden; padding-top: clamp(48px, 7vw, 76px); }
.fairy-baptism .story-inner { max-width: 680px; text-align: center; }
.fairy-baptism .story-message { margin-top: 14px; color: var(--ink-soft); font-size: 18.5px; }
.fairy-baptism .story-message p + p { margin-top: 12px; }
.fairy-baptism .portraits { display: flex; align-items: flex-start; justify-content: center; gap: clamp(44px, 9vw, 96px); margin-bottom: 34px; padding-top: 22px; }
.fairy-baptism .photo-fairy { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* The photo is a circle. The wings are behind the photo and the crown of flowers is on top. */
.fairy-baptism .photo-fairy__frame { position: relative; width: clamp(180px, 46vw, 250px); aspect-ratio: 1; }
.fairy-baptism .photo-wings { position: absolute; top: 50%; left: 50%; width: 190%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--accent) 22%, transparent)); transform: translate(-50%, -54%); }
.fairy-baptism .photo-fairy__frame img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-mid), 0 18px 34px rgba(54, 64, 74, .18); object-fit: cover; }
.fairy-baptism .photo-crown { position: absolute; z-index: 2; top: -11%; left: 50%; width: 64%; height: auto; overflow: visible; transform: translateX(-50%); }
/* With two photos, the space between the photos is larger than the wings between them. */
.fairy-baptism .portraits--two { gap: clamp(60px, 13vw, 150px); }
.fairy-baptism .portraits--two .photo-fairy__frame { width: clamp(112px, 30vw, 200px); }
.fairy-baptism .portraits--two .photo-wings { width: 166%; }
.fairy-baptism .photo-fairy figcaption { margin-top: 12px; color: var(--accent-deep); font: 700 clamp(24px, 4.6vw, 30px)/1.2 "Charm", cursive; overflow-wrap: anywhere; }

/* Parents and godparents: two cards with the shape of a leaf */
.fairy-baptism .kin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 22px 30px; }
.fairy-baptism .kin-card { position: relative; padding: 30px 26px 26px; border: 1.5px solid var(--accent-mid); border-radius: 64px 18px 64px 18px; background: linear-gradient(160deg, #fff 0%, var(--accent-soft) 100%); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 14%, transparent); text-align: center; }
.fairy-baptism .kin-card--second { border-radius: 18px 64px 18px 64px; }
.fairy-baptism .kin-sparkle { top: 16px; right: 24px; width: 16px; }
.fairy-baptism .kin-card--second .kin-sparkle { right: auto; left: 24px; animation-delay: -1.2s; }
.fairy-baptism .kin-card h3 { margin-bottom: 4px; color: var(--ink-soft); font: 700 13.5px/1.5 "Bellota Text", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.fairy-baptism .kin-card p { color: var(--accent-deep); font: 700 clamp(24px, 3.2vw, 30px)/1.25 "Charm", cursive; overflow-wrap: anywhere; text-wrap: balance; }

/* Countdown: four drops of dew */
.fairy-baptism .countdown { padding-right: 20px; padding-left: 20px; text-align: center; }
.fairy-baptism .countdown-parts { display: inline-flex; gap: clamp(8px, 2.2vw, 18px); margin-top: 18px; }
.fairy-baptism .countdown-part { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(72px, 19vw, 112px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff 0%, var(--accent-soft) 46%, var(--glade) 100%); box-shadow: 0 0 0 2px var(--accent-mid), 0 14px 26px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-deep); }
.fairy-baptism .countdown-part strong { font: 700 clamp(28px, 6.4vw, 42px)/1 "Charm", cursive; font-variant-numeric: tabular-nums; }
.fairy-baptism .countdown-part span { margin-top: 3px; color: var(--ink-soft); font: 700 clamp(10px, 2.5vw, 12.5px)/1.3 "Bellota Text", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* Schedule */
.fairy-baptism .events { padding-top: 0; }
.fairy-baptism .events-date { margin-top: 6px; color: var(--ink-soft); text-align: center; }
.fairy-baptism .events-date::first-letter, .fairy-baptism .footer-date::first-letter { text-transform: uppercase; }
.fairy-baptism .event-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 60px; }
.fairy-baptism .event-cards--single { grid-template-columns: minmax(0, 440px); justify-content: center; }
.fairy-baptism .event-card { position: relative; padding: 52px 22px 28px; border: 1.5px solid var(--accent-mid); border-radius: 30px; background: #fff; box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 13%, transparent); text-align: center; }
/* The icon of the event is in a circle on the top edge of the card. */
.fairy-baptism .event-badge { position: absolute; top: -35px; left: 50%; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin-left: -35px; border: 2px solid var(--accent-mid); border-radius: 50%; background: var(--paper); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent); }
.fairy-baptism .event-icon { width: 42px; height: 42px; }
.fairy-baptism .icon-wand { fill: none; stroke: #b98a3c; stroke-width: 3; stroke-linecap: round; }
.fairy-baptism .icon-star, .fairy-baptism .icon-dust { fill: var(--gold); }
.fairy-baptism .event-card h3 { color: var(--accent-deep); font: 700 30px/1.2 "Charm", cursive; }
.fairy-baptism .event-time { display: block; margin-top: 2px; color: var(--ink); font: 700 40px/1.15 "Charm", cursive; font-variant-numeric: tabular-nums; }
.fairy-baptism .event-date { color: var(--ink-soft); font-size: 15.5px; }
.fairy-baptism .event-location { margin-top: 10px; font-weight: 700; }
.fairy-baptism .event-address, .fairy-baptism .event-description { color: var(--ink-soft); font-size: 16px; }
.fairy-baptism .event-description { margin-top: 8px; }
.fairy-baptism .invitation-navigation a { border-color: var(--accent-mid); border-radius: 999px; color: var(--accent-deep); font-weight: 700; }

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

/* RSVP: the glade at night, with fireflies */
.fairy-baptism .rsvp { position: relative; overflow: hidden; padding: clamp(88px, 10vw, 120px) 20px clamp(70px, 9vw, 100px); background: radial-gradient(ellipse 70% 52% at 50% 0%, color-mix(in srgb, var(--accent) 62%, #14212b), transparent 76%), var(--night); }
/* The top edge of the section has round petals. */
.fairy-baptism .rsvp::before { position: absolute; top: -1px; right: 0; left: 0; height: 22px; background: radial-gradient(circle at 20px 0, var(--paper) 19px, transparent 20px) 0 0 / 40px 22px repeat-x; content: ""; }
.fairy-baptism .rsvp-glade { position: absolute; inset: 0; pointer-events: none; }
.fairy-baptism .rsvp-card { position: relative; z-index: 1; width: min(100%, 680px); margin: 0 auto; padding: clamp(56px, 7vw, 70px) clamp(22px, 5vw, 46px) clamp(26px, 5vw, 44px); border-radius: 34px; background: #fff; box-shadow: 0 26px 54px rgba(0, 0, 0, .3); }
.fairy-baptism .rsvp-crown { position: absolute; top: -34px; left: 50%; width: 176px; height: auto; overflow: visible; transform: translateX(-50%); }
.fairy-baptism .rsvp-intro { margin-top: 10px; color: var(--ink-soft); text-align: center; }
.fairy-baptism .rsvp-deadline { text-align: center; }
.fairy-baptism #rsvp .invitation-rsvp-information { --rsvp-info-radius: 18px; }
.fairy-baptism .guest-greeting { margin-top: 16px; text-align: center; }
.fairy-baptism .form-status { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #e6f5ec; color: #1f6b43; text-align: center; }
.fairy-baptism .form-status--error { background: #fde9e9; color: #9b2c2c; }
.fairy-baptism .rsvp-form { margin-top: 24px; }
.fairy-baptism .attendance-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; border: 0; }
.fairy-baptism .attendance-field label { position: relative; display: block; cursor: pointer; }
.fairy-baptism .attendance-field input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fairy-baptism .attendance-field span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 12px; border: 2px solid var(--accent-deep); border-radius: 999px; background: #fff; color: var(--accent-deep); font: 700 16px/1.3 "Bellota Text", system-ui, sans-serif; text-align: center; transition: background-color .15s ease, color .15s ease; }
.fairy-baptism .attendance-field input:checked + span { background: var(--accent-deep); color: #fff; }
.fairy-baptism .attendance-field input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.fairy-baptism .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fairy-baptism .form-field--full { grid-column: 1 / -1; }
.fairy-baptism .form-field[hidden] { display: none; }
.fairy-baptism .form-field label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 700; }
.fairy-baptism .form-field input, .fairy-baptism .form-field textarea { width: 100%; min-height: 50px; padding: 12px 18px; border: 1.5px solid #d5dce4; border-radius: 16px; background: #fff; color: var(--ink); font: inherit; }
.fairy-baptism .form-field textarea { resize: vertical; }
.fairy-baptism .form-field input:focus, .fairy-baptism .form-field textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.fairy-baptism .button--submit { width: 100%; margin-top: 22px; }
.fairy-baptism .form-feedback { min-height: 1.5em; margin-top: 16px; color: var(--accent-deep); font-weight: 700; text-align: center; }

/* Footer */
.fairy-baptism .invitation-footer { padding: 36px 20px 44px; background: linear-gradient(180deg, var(--glade-soft) 0%, var(--glade) 100%); text-align: center; }
.fairy-baptism .footer-fairy { width: 112px; margin: 0 auto; }
.fairy-baptism .footer-message { margin-top: 2px; color: var(--accent-deep); font: 700 clamp(42px, 7vw, 62px)/1.1 "Gwendolyn", cursive; text-wrap: balance; }
.fairy-baptism .footer-name { margin-top: 8px; color: var(--ink); font: 700 15.5px/1.5 "Bellota Text", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; overflow-wrap: anywhere; }
.fairy-baptism .footer-date { color: var(--ink-soft); }
.fairy-baptism .wedday-credit { display: inline-block; margin-top: 18px; color: var(--ink-soft); font-size: 13.5px; }

@keyframes fairy-hover {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
@keyframes wings-flutter {
  from { transform: scaleX(1); }
  to { transform: scaleX(.86); }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; scale: .7; }
  50% { opacity: 1; scale: 1.1; }
}
@keyframes firefly-float {
  from { transform: translate(-14px, 10px); }
  to { transform: translate(16px, -18px); }
}
@keyframes firefly-glow {
  from { opacity: .3; }
  to { opacity: 1; }
}
@keyframes branch-sway {
  from { rotate: -1.4deg; }
  to { rotate: 1.4deg; }
}
@keyframes branch-sway-right {
  from { rotate: 1.4deg; }
  to { rotate: -1.4deg; }
}

@media (max-width: 720px) {
  /* On a small screen each first name of two children is on its own line, and the event cards are one under the other. */
  .fairy-baptism .hero-title--two .hero-name, .fairy-baptism .hero-title--two .hero-amp { display: block; }
  .fairy-baptism .hero-title--two .hero-amp { line-height: .8; }
  .fairy-baptism .event-cards { grid-template-columns: minmax(0, 1fr); gap: 62px; }
  .fairy-baptism .hero-friend { display: none; }
  .fairy-baptism .portraits--two .photo-wings { width: 150%; }
  .fairy-baptism .sparkle--one { left: -2%; }
  .fairy-baptism .sparkle--two { right: -1%; }
  .fairy-baptism .sparkle--three { right: -3%; }
}

@media (max-width: 560px) {
  .fairy-baptism .form-grid { grid-template-columns: minmax(0, 1fr); }
  .fairy-baptism .attendance-field { gap: 8px; }
  .fairy-baptism .attendance-field span { padding: 10px 6px; font-size: 15px; }
  .fairy-baptism .kin-card { border-radius: 48px 16px 48px 16px; }
  .fairy-baptism .kin-card--second { border-radius: 16px 48px 16px 48px; }
}

/* Without motion, the fairy, the wings, the fireflies and the stars of fairy dust stay still. */
@media (prefers-reduced-motion: reduce) {
  .fairy-baptism .hero-fairy, .fairy-baptism .hero-friend, .fairy-baptism .fairy-wings, .fairy-baptism .firefly, .fairy-baptism .sparkle, .fairy-baptism .fairy-dust circle, .fairy-baptism .branch { animation: none; }
  .fairy-baptism .button { transition: none; }
}