:root {
  --cream: #f8f3e9;
  --paper: #fffdf8;
  --gold: #b08b4f;
  --gold-light: #d9c49b;
  --ink: #51463a;
  --muted: #887b6a;
  --line: rgba(176,139,79,.38);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 14px; line-height: 1.8; }
a { color: inherit; }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 80px 24px 70px; text-align: center; background: radial-gradient(ellipse at center, rgba(255,255,255,.91) 0%, rgba(248,243,233,.9) 48%, rgba(233,219,193,.75) 100%); }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(230px, 34vw, 490px);
  height: clamp(300px, 68vh, 720px);
  background-image: url("assets/floral-border.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: .98;
}
.hero::before { top: 0; left: 0; background-position: top left; }
.hero::after { top: 0; right: 0; transform: scaleX(-1); background-position: top left; }

.hero-wash { position: absolute; inset: 18px; border: 1px solid var(--line); pointer-events: none; }
.hero-wash::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(176,139,79,.18); }
.hero-content { position: relative; z-index: 1; width: min(100%, 760px); }
.eyebrow { margin: 0 0 12px; font-size: 9px; font-weight: 600; letter-spacing: .25em; line-height: 1.8; color: var(--gold); }
.small-script { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); color: #8e7959; }
.hero-title { margin: 2px 0 5px; font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 9vw, 100px); line-height: .86; letter-spacing: -.035em; color: #5d4a34; }
.hero-title span { color: var(--gold); font-size: .64em; font-style: italic; }
.gold-rule { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 28px auto 10px; color: var(--gold); }
.gold-rule::before, .gold-rule::after { content: ""; height: 1px; width: 58px; background: var(--gold-light); }
.gold-rule span { font-size: 19px; }
.invite-name { margin: 0; font-family: var(--serif); font-size: clamp(42px, 7vw, 75px); line-height: 1.1; font-style: italic; color: var(--gold); }
.hero-date { margin: 22px 0 30px; font-size: 10px; letter-spacing: .16em; font-weight: 500; }
.hero-date span { color: var(--gold); padding: 0 7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 13px 24px; border: 1px solid var(--gold); font: 500 9px var(--sans); letter-spacing: .16em; text-decoration: none; cursor: pointer; transition: transform .25s, background .25s, color .25s; }
.button:hover { transform: translateY(-2px); background: #9b783f; color: white; }
.button-gold { background: var(--gold); color: white; }
.button-gold span { font-size: 16px; }
.hero-bottom { position: absolute; z-index: 1; bottom: 32px; left: 0; right: 0; font-size: 8px; letter-spacing: .28em; color: #927c5d; }
.floral-top { position: absolute; top: 5%; right: 10%; color: rgba(176,139,79,.55); font-size: 38px; }
.section { padding: 100px 24px; }
.intro { position: relative; text-align: center; max-width: 900px; margin: auto; }
.section-flower { color: var(--gold-light); font-size: 28px; margin-bottom: 12px; }
.section-title { margin: 0 0 20px; font: 400 clamp(38px, 6vw, 62px)/1.02 var(--serif); letter-spacing: -.02em; color: #5a4937; }
.section-title em { font-weight: 400; color: var(--gold); }
.body-copy { max-width: 590px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 2.1; }
.signature { margin-top: 28px; color: var(--muted); font-family: var(--serif); font-size: 21px; font-style: italic; }
.signature span { display: block; color: var(--gold); font-size: 29px; }
.details { background: #efe6d6; text-align: center; }
.details-heading { margin-bottom: 45px; }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: min(100%, 900px); margin: auto; }
.event-card { position: relative; padding: 48px 28px 42px; background: rgba(255,253,248,.78); border: 1px solid rgba(176,139,79,.35); outline: 1px solid rgba(176,139,79,.13); outline-offset: -7px; }
.event-number { position: absolute; top: 16px; left: 22px; color: rgba(176,139,79,.65); font: italic 17px var(--serif); }

.event-photo { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(205,145,157,.45); box-shadow: 0 8px 22px rgba(105,68,76,.10); margin: 0 auto 24px; }
.event-photo-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 24px; }
.event-photo-strip .event-photo { height: 190px; margin: 0; min-width: 0; }
.event-card { padding-top: 48px; }
.event-card .event-symbol { margin-bottom: 12px; }
@media (max-width: 600px) {
  .event-photo { height: 165px; }
  .event-photo-strip .event-photo { height: 145px; }
}

.event-symbol { color: var(--gold); font-size: 27px; margin-bottom: 14px; }
.event-card h3 { margin: 0 0 15px; font: 400 38px/1.1 var(--serif); }
.event-place { max-width: 280px; margin: 0 auto 8px; font: 500 13px/1.8 var(--sans); }
.event-time { color: var(--muted); font-size: 10px; letter-spacing: .04em; margin: 8px 0 22px; }
.event-time span { color: var(--gold); }
.text-link { display: inline-block; color: var(--gold); text-decoration: none; font-size: 9px; letter-spacing: .13em; border-bottom: 1px solid var(--gold-light); padding-bottom: 5px; }
.text-link:hover { color: #775b2d; }
.countdown-section { background: #6a5844; color: #fffaf0; text-align: center; padding: 82px 20px; }
.countdown-section .section-title { color: #fffaf0; }
.countdown-section .eyebrow { color: #e2cda6; }
.countdown { display: flex; justify-content: center; gap: clamp(15px, 5vw, 58px); margin: 35px 0 20px; }
.countdown div { min-width: 62px; display: flex; flex-direction: column; }
.countdown strong { font: 400 clamp(35px, 6vw, 57px)/1 var(--serif); color: #e2cda6; }
.countdown span { margin-top: 10px; font-size: 8px; letter-spacing: .19em; }
.countdown-date { font-size: 10px; letter-spacing: .08em; color: #e8ddca; }
.rsvp-section { background: #f6f0e5; }
.rsvp-card { width: min(100%, 600px); margin: auto; padding: clamp(28px, 6vw, 60px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(87,68,40,.06); text-align: center; }
.rsvp-card form { display: flex; flex-direction: column; text-align: left; margin-top: 30px; }
.rsvp-card label { margin: 15px 0 7px; color: #6d5a43; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.rsvp-card label span { color: #a79a87; font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid #ded1bb; border-radius: 0; background: #fffefa; padding: 13px 14px; color: var(--ink); font: 12px var(--sans); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(176,139,79,.1); }
textarea { resize: vertical; }
.form-submit { width: 100%; margin-top: 25px; }
.form-note, .form-feedback { text-align: center; color: #9b8a74; font-size: 10px; line-height: 1.7; }
.form-feedback { color: #6d5a43; overflow-wrap: anywhere; }
.closing { text-align: center; padding-top: 80px; padding-bottom: 70px; }
.closing-ornament { color: var(--gold); font-size: 35px; margin-bottom: 10px; }
.closing .small-script { margin: 0 0 6px; }
.closing-name { margin: 0 0 8px; font: italic 400 clamp(44px, 8vw, 76px)/1.05 var(--serif); color: var(--gold); }
.back-top { margin-top: 35px; }
footer { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px; background: #e8ddca; color: #8c785a; font-size: 8px; letter-spacing: .14em; text-align: center; }
.music-toggle { position: fixed; z-index: 10; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: rgba(255,253,248,.9); color: #80663d; border: 1px solid var(--line); font: 500 9px var(--sans); letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(8px); }
.music-icon { font-size: 17px; }
.music-note { position: fixed; z-index: 9; right: 18px; top: 61px; padding: 4px 8px; background: rgba(255,253,248,.85); color: #8b7a64; font-size: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.music-note.visible { opacity: 1; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .hero { min-height: 94svh; padding: 76px 25px 70px; }
  .hero-wash { inset: 12px; }
  .hero::before { left: -100px; top: 20px; }
  .hero::after { right: -110px; bottom: 0; }
  .hero-date { max-width: 280px; margin-left: auto; margin-right: auto; line-height: 2.2; }
  .section { padding: 72px 20px; }
  .event-grid { grid-template-columns: 1fr; max-width: 430px; }
  .event-card { padding: 42px 24px 36px; }
  .countdown { gap: 12px; }
  .countdown div { min-width: 52px; }
  .music-toggle { top: 16px; right: 16px; }
}

.google-form-wrap {
  width: 100%;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid #ded1bb;
  background: #fff;
}
.google-form-wrap iframe {
  display: block;
  width: 100%;
  min-height: 1500px;
  border: 0;
}
.form-note a { color: var(--gold); }
@media (max-width: 640px) {
  .google-form-wrap iframe { min-height: 1700px; }
}


/* Cheerful, warm invitation refresh */
:root {
  --cream: #fff8ef;
  --paper: #fffdf9;
  --gold: #b58a49;
  --gold-light: #e2c997;
  --ink: #5b4938;
  --muted: #877565;
}
.hero {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(245, 211, 218, .48), transparent 28%),
    radial-gradient(ellipse at 82% 24%, rgba(220, 232, 205, .56), transparent 26%),
    radial-gradient(ellipse at 78% 83%, rgba(246, 222, 178, .55), transparent 29%),
    radial-gradient(ellipse at center, #fffdf8 0%, #fff7eb 62%, #f4e4cf 100%);
}
.hero::before, .hero::after { color: rgba(190, 145, 80, .18); }
.hero-wash { inset: 22px; border: 1px solid rgba(184, 145, 83, .52); border-radius: 3px; }
.hero-wash::before { border-color: rgba(184, 145, 83, .22); border-radius: 2px; }
.hero-content { max-width: 820px; }
.hero-kicker {
  display: inline-block; padding: 8px 15px; border: 1px solid rgba(181,138,73,.34);
  border-radius: 999px; background: rgba(255,253,248,.62); color: #9d7944; letter-spacing: .2em;
}
.small-script { color: #9c7b61; }
.hero-title { color: #604833; text-shadow: 0 2px 0 rgba(255,255,255,.65); }
.invite-name { color: #b58a49; text-shadow: 0 1px 0 #fff; }
.gold-rule::before, .gold-rule::after { width: 78px; background: linear-gradient(90deg, transparent, var(--gold-light)); }
.gold-rule::after { transform: scaleX(-1); }
.gold-rule span { font-size: 23px; }
.button-gold {
  border-radius: 999px; box-shadow: 0 7px 18px rgba(151,111,53,.18);
  background: linear-gradient(135deg, #c7a15f, #a77a3d);
}
.button-gold:hover { background: linear-gradient(135deg, #a77a3d, #8f6835); }
.hero-bottom { letter-spacing: .2em; color: #9b7a52; }
.hero-bottom span { color: #d69caa; padding: 0 8px; font-size: 13px; }
.hero-butterfly {
  position: absolute; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 5px 6px rgba(110, 84, 53, .08));
  animation: float-gently 5s ease-in-out infinite;
}
.butterfly-one { left: 13%; top: 20%; font-size: clamp(25px, 4vw, 42px); transform: rotate(-16deg); }
.butterfly-two { right: 14%; top: 28%; font-size: clamp(25px, 3.5vw, 38px); color: #d3a5aa; animation-delay: -2.2s; }
.hero-sparkles span { position: absolute; z-index: 1; color: #c6a66e; pointer-events: none; }
.hero-sparkles span:nth-child(1) { left: 23%; top: 33%; font-size: 18px; }
.hero-sparkles span:nth-child(2) { right: 24%; top: 37%; font-size: 24px; color: #d7aab4; }
.hero-sparkles span:nth-child(3) { left: 28%; bottom: 23%; font-size: 13px; color: #b8c69e; }
.hero-sparkles span:nth-child(4) { right: 27%; bottom: 22%; font-size: 18px; }
@keyframes float-gently { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.intro { background: linear-gradient(180deg, #fff8ef, #fffdf8); }
.section-flower { color: #c4a05e; letter-spacing: .15em; }
.section-flower span { color: #d8a5af; font-size: 22px; }
.details { background: linear-gradient(135deg, #f5e9d8, #f9eee5 55%, #e9eedf); }
.event-card { border-radius: 3px; box-shadow: 0 12px 30px rgba(100,77,46,.05); transition: transform .3s ease, box-shadow .3s ease; }
.event-card:hover { transform: translateY(-5px); box-shadow: 0 17px 35px rgba(100,77,46,.10); }
.event-symbol { color: #c29a5b; }
.countdown-section { background: linear-gradient(125deg, #6b5947, #88715a); }
.rsvp-card { border-radius: 5px; box-shadow: 0 18px 50px rgba(87,68,40,.09); }
.closing { background: linear-gradient(180deg, #fffdf8, #f7eadc); }
.music-toggle { border-radius: 999px; box-shadow: 0 5px 16px rgba(80,60,35,.08); }
@media (max-width: 640px) {
  .butterfly-one { left: 7%; top: 15%; }
  .butterfly-two { right: 8%; top: 20%; }
  .hero-sparkles span:nth-child(1) { left: 8%; top: 34%; }
  .hero-sparkles span:nth-child(2) { right: 8%; top: 39%; }
  .hero-sparkles span:nth-child(3) { left: 12%; bottom: 23%; }
  .hero-sparkles span:nth-child(4) { right: 12%; bottom: 21%; }
  .hero-title { font-size: clamp(48px, 12vw, 76px); }
}


/* Stronger visible blush-pink palette */
:root {
  --cream: #fff7f0;
  --paper: #fffdfb;
  --gold: #b58a49;
  --gold-light: #e2c997;
  --ink: #5b4938;
  --muted: #877565;
}
.hero {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(246, 194, 207, .78), transparent 31%),
    radial-gradient(ellipse at 92% 19%, rgba(250, 215, 222, .76), transparent 30%),
    radial-gradient(ellipse at 14% 85%, rgba(247, 211, 218, .58), transparent 28%),
    radial-gradient(ellipse at 82% 82%, rgba(232, 220, 192, .62), transparent 29%),
    linear-gradient(135deg, #fff0f1 0%, #fff9f2 48%, #f9e8df 100%);
}
.hero::before, .hero::after {
  color: rgba(196, 126, 145, .24);
}
.hero-wash {
  border-color: rgba(190, 133, 145, .48);
}
.hero-wash::before {
  border-color: rgba(190, 133, 145, .28);
}
.hero-kicker {
  background: rgba(255, 248, 248, .82);
  border-color: rgba(205, 145, 159, .48);
  color: #a46d7c;
}
.small-script { color: #a97582; }
.invite-name { color: #b9828c; }
.gold-rule span { color: #c58d9b; }
.hero-butterfly.butterfly-one { color: #c98b9b; }
.hero-butterfly.butterfly-two { color: #c98b9b; }
.hero-sparkles span:nth-child(2) { color: #d99aaa; }
.hero-sparkles span:nth-child(3) { color: #b7c49d; }
.hero-bottom { color: #a2767b; }
.hero-bottom span { color: #d58fa2; }
.intro { background: linear-gradient(180deg, #fff4f4, #fffdf9); }
.section-flower { color: #c98e9c; }
.section-flower span { color: #d58fa2; }
.details { background: linear-gradient(135deg, #f9e5e8 0%, #fff0ed 48%, #edf0e3 100%); }
.event-card { background: rgba(255, 252, 250, .88); }
.event-number { color: #bd8794; }
.event-symbol { color: #c58d9b; }
.countdown-section { background: linear-gradient(125deg, #795c61, #a77d82); }
.countdown-section .eyebrow { color: #f4d8dd; }
.countdown strong { color: #f7dce1; }
.rsvp-section { background: linear-gradient(180deg, #fff0f1, #fff8ef); }
.rsvp-card { border-color: rgba(205,145,159,.48); }
.closing { background: linear-gradient(180deg, #fffdf9, #f8e3e6); }
.closing-ornament, .closing-name { color: #b9828c; }
.music-toggle { border-color: rgba(205,145,159,.5); }
@media (max-width: 640px) {
  .hero {
    background:
      radial-gradient(ellipse at 5% 15%, rgba(246, 194, 207, .72), transparent 35%),
      radial-gradient(ellipse at 95% 22%, rgba(250, 215, 222, .7), transparent 34%),
      linear-gradient(135deg, #fff0f1 0%, #fff9f2 60%, #f9e8df 100%);
  }
}


/* RSVP opens the Google Form externally instead of embedding it in the invitation */
.google-form-wrap { display: none !important; }
.rsvp-link-panel {
  margin: 30px auto 0;
  padding: 34px 22px 28px;
  max-width: 410px;
  background: linear-gradient(145deg, #fff8f6, #fffdf9);
  border: 1px solid rgba(205,145,159,.42);
  position: relative;
}
.rsvp-link-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(205,145,159,.2);
  pointer-events: none;
}
.rsvp-link-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b9828c;
  background: #f9e5e9;
  border: 1px solid rgba(205,145,159,.4);
  font-size: 22px;
}
.rsvp-link-panel h3 {
  margin: 0 0 10px;
  color: #705348;
  font: 400 30px/1.1 var(--serif);
}
.rsvp-link-panel p {
  max-width: 310px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
}
.rsvp-link-panel .rsvp-external-link {
  position: relative;
  z-index: 1;
  min-width: 220px;
}
.rsvp-link-panel .form-note {
  margin: 15px auto 0;
  font-size: 9px;
}


/* Tap-to-open welcome screen: starts music on a user gesture */
.welcome-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 10% 15%, rgba(246,194,207,.78), transparent 31%),
    radial-gradient(ellipse at 90% 20%, rgba(250,215,222,.78), transparent 31%),
    radial-gradient(ellipse at 80% 90%, rgba(232,220,192,.65), transparent 32%),
    linear-gradient(135deg, #fff0f1 0%, #fff9f2 50%, #f9e8df 100%);
  transition: opacity .75s ease, visibility .75s ease;
}
.welcome-overlay::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(190,133,145,.55);
  pointer-events: none;
}
.welcome-overlay::after {
  content: "❦";
  position: absolute;
  right: -35px;
  bottom: -85px;
  font: 300 clamp(170px, 32vw, 330px)/1 var(--serif);
  color: rgba(190,145,80,.16);
  transform: rotate(145deg);
  pointer-events: none;
}
.welcome-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.welcome-card {
  position: relative;
  z-index: 1;
  width: min(100%, 590px);
  padding: clamp(35px, 7vw, 64px) clamp(22px, 6vw, 55px);
  text-align: center;
  background: rgba(255,253,249,.77);
  border: 1px solid rgba(190,133,145,.43);
  box-shadow: 0 20px 60px rgba(113,78,65,.08);
}
.welcome-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(190,133,145,.22);
  pointer-events: none;
}
.welcome-flower {
  color: #c58d9b;
  font-size: 35px;
  margin-bottom: 12px;
  animation: welcome-float 4s ease-in-out infinite;
}
.welcome-card h1 {
  margin: 0;
  font: 400 clamp(38px, 7vw, 60px)/1.04 var(--serif);
  color: #604833;
}
.welcome-card h1 em {
  color: #b9828c;
  font-weight: 400;
}
.welcome-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 12px;
  color: #c58d9b;
}
.welcome-divider::before, .welcome-divider::after {
  content: "";
  width: 54px;
  height: 1px;
  background: #e2c997;
}
.welcome-copy {
  margin: 0 0 12px;
  color: #9c7b61;
  font: italic 26px var(--serif);
}
.welcome-date {
  margin: 0 0 27px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #92745d;
}
.welcome-date span { color: #c58d9b; padding: 0 5px; }
.welcome-open {
  position: relative;
  z-index: 2;
  min-height: 50px;
  padding-left: 25px;
  padding-right: 25px;
}
.welcome-hint {
  margin: 17px 0 0;
  color: #a18c80;
  font: italic 17px var(--serif);
}
@keyframes welcome-float {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
body.invitation-open { overflow: auto; }
body:not(.invitation-open) { overflow: hidden; }
@media (max-width: 520px) {
  .welcome-overlay { padding: 20px; }
  .welcome-overlay::before { inset: 10px; }
  .welcome-card { padding: 36px 20px; }
  .welcome-date { letter-spacing: .1em; line-height: 2; }
}

/* Canva-inspired blush floral palette refinement */
:root { --gold: #c58b91; --line: rgba(193, 125, 137, .34); }
body { background: #fffaf6; color: #76504e; }
.hero { background: radial-gradient(ellipse at center, rgba(255,252,248,.97) 0%, rgba(255,239,235,.94) 58%, rgba(248,221,218,.78) 100%); }
.hero::before, .hero::after { color: rgba(196, 131, 141, .22); }
.hero-title { color: #9d5966; }
.invite-name, .section-title, .closing-name { color: #b55f70; }
.button-gold { background: linear-gradient(135deg, #d98d9b, #b85f72); color: #fffaf7; box-shadow: 0 8px 22px rgba(184,95,114,.2); }
.button-gold:hover { background: linear-gradient(135deg, #e4a0aa, #c36c7d); }
.event-card, .rsvp-card { background: rgba(255,250,246,.92); border-color: rgba(195,132,142,.3); }
.details, .rsvp-section { background: #fff8f4; }
.countdown-section { background: linear-gradient(135deg, #f9e4e1, #fff8f4); }
.text-link { color: #b55f70; }
.welcome-card { background: rgba(255,250,246,.97); border-color: rgba(195,132,142,.4); }
.welcome-title, #welcomeTitle { color: #a85868; }
footer { background: #f9e8e4; color: #9e6069; }


/* Canva-inspired long-form invitation sections */
:root { --canva-rose: #a94357; --canva-ink: #45252a; }
.countdown-section { background: linear-gradient(180deg,#fffaf5 0%,#fbe9e7 52%,#fffaf5 100%) !important; color:var(--canva-ink); border-block:1px solid rgba(169,67,87,.12); }
.countdown-section .section-title { color:var(--canva-rose) !important; }
.countdown-section .eyebrow { color:#b55f70 !important; }
.countdown strong { color:#b55f70 !important; }
.countdown span,.countdown-date { color:#68474b !important; }
.canva-section { padding:62px 20px; background:#fffdf8; text-align:center; }
.canva-frame { width:min(100%,650px); margin:0 auto; padding:54px clamp(24px,7vw,76px); position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 0% 0%,rgba(230,174,178,.18),transparent 34%),radial-gradient(ellipse at 100% 100%,rgba(202,190,143,.18),transparent 35%),#fffdf8; border:1px solid rgba(169,67,87,.12); border-radius:180px 180px 140px 140px / 120px 120px 80px 80px; box-shadow:0 12px 38px rgba(110,65,68,.06); }
.canva-frame::before,.canva-frame::after { content:"❀  ❦  ✿"; position:absolute; z-index:-1; top:12px; color:rgba(151,158,104,.6); font-size:27px; letter-spacing:13px; writing-mode:vertical-rl; pointer-events:none; }
.canva-frame::before { left:8px; } .canva-frame::after { right:8px; transform:scaleX(-1); }
.canva-script { margin:0 0 20px; color:var(--canva-rose); font:italic 500 clamp(39px,7vw,58px)/1.1 "Cormorant Garamond",Georgia,serif; }
.canva-copy { max-width:480px; margin:14px auto; color:var(--canva-ink); font:400 13px/1.55 "Montserrat",sans-serif; letter-spacing:.075em; text-transform:uppercase; }
.pastel-palette { display:flex; justify-content:center; gap:8px; margin:22px 0 28px; } .pastel-palette span { width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.035); }
.canva-star { display:block; color:#e8bd65; font-size:22px; margin:10px 0; } .gift-heading { margin-top:22px; }
.canva-list { width:fit-content; max-width:100%; margin:18px auto 0; padding-left:20px; text-align:left; color:var(--canva-ink); font:400 13px/1.5 "Montserrat",sans-serif; letter-spacing:.035em; text-transform:uppercase; }
.health-list { margin-top:20px; } .names-list { font-size:13px; margin-bottom:30px; } .godmother-heading { margin-top:34px; }
.save-date { color:#d26f82; font:500 30px/1.2 "Montserrat",sans-serif; letter-spacing:.04em; margin:12px 0 22px; }
.details .event-card { border-radius:120px 120px 28px 28px; }
@media(max-width:520px) { .canva-section{padding:35px 12px}.canva-frame{padding:48px 27px;border-radius:100px 100px 75px 75px / 70px 70px 50px 50px}.canva-frame::before,.canva-frame::after{font-size:18px;letter-spacing:7px}.canva-copy,.canva-list{font-size:11px} }

/* Mobile-only refinement: preserve desktop layout while bringing back Canva styling */
@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { font-size: 13px; line-height: 1.65; }
  .section { padding: 44px 16px; }
  .countdown-section { padding: 34px 14px 30px !important; background: linear-gradient(180deg,#fff8f3 0%,#f8e5e4 55%,#fff8f3 100%) !important; color: #68474b !important; }
  .countdown-section .section-title { font-size: clamp(31px, 8vw, 42px); color: #a94357 !important; margin-bottom: 12px; }
  .countdown-section .eyebrow { font-size: 8px; letter-spacing: .2em; color: #b55f70 !important; }
  .countdown { gap: clamp(7px, 2.4vw, 15px); margin: 22px 0 15px; }
  .countdown div { min-width: 0; flex: 1 1 0; }
  .countdown strong { font-size: clamp(27px, 7vw, 39px); color: #b55f70 !important; }
  .countdown span { font-size: 7px; letter-spacing: .12em; color: #68474b !important; }
  .countdown-date { font-size: 9px; line-height: 1.5; color: #68474b !important; }
  .canva-section { padding: 30px 12px; background: #fffaf5; }
  .canva-frame { width: 100%; max-width: 480px; padding: 38px 30px 40px; border: 0; border-radius: 120px 120px 85px 85px / 82px 82px 55px 55px; box-shadow: none; background: radial-gradient(ellipse at top left,rgba(247,211,216,.22),transparent 32%),radial-gradient(ellipse at bottom right,rgba(217,224,194,.22),transparent 34%),#fffdf8; }
  .canva-frame::before, .canva-frame::after { z-index: 0; top: 18px; bottom: 18px; width: 20px; overflow: hidden; color: rgba(157,164,113,.68); font-size: 17px; line-height: 2.25; letter-spacing: 4px; writing-mode: vertical-rl; content: "✿ ❀ ❧ ❀ ✿ ❧"; }
  .canva-frame::before { left: 5px; }
  .canva-frame::after { right: 5px; }
  .canva-frame > * { position: relative; z-index: 1; }
  .canva-script { font-size: clamp(34px, 9vw, 43px); line-height: 1.08; margin-bottom: 17px; color: #a94357; }
  .canva-copy { max-width: 100%; font-size: 10px; line-height: 1.65; letter-spacing: .045em; margin: 12px auto; color: #45252a; }
  .pastel-palette { gap: 7px; margin: 18px 0 24px; }
  .pastel-palette span { width: 23px; height: 23px; }
  .canva-star { font-size: 18px; margin: 8px 0; }
  .canva-list { width: auto; max-width: 100%; margin: 14px auto 0; padding-left: 18px; font-size: 10px; line-height: 1.6; letter-spacing: .015em; text-transform: uppercase; overflow-wrap: anywhere; }
  .health-list { display: inline-block; text-align: left; }
  .names-list { display: table; margin: 12px auto 25px; font-size: 10px; }
  .godmother-heading { margin-top: 28px; }
  .rsvp-section { padding: 36px 12px; background: linear-gradient(180deg,#fff7f5,#f9e7e7) !important; }
  .rsvp-card { width: 100%; padding: 30px 22px; border-radius: 18px; background: rgba(255,253,250,.96); }
  .rsvp-card .section-title { font-size: clamp(34px, 9vw, 45px); line-height: 1.08; }
  .rsvp-card .body-copy { font-size: 11px; line-height: 1.8; }
  .rsvp-link-panel { padding: 20px 12px; margin-top: 22px; }
  .rsvp-link-panel h3 { font-size: 21px; line-height: 1.2; }
  .rsvp-external-link { max-width: 100%; padding: 13px 17px; font-size: 9px; letter-spacing: .1em; white-space: normal; }
  .closing { padding: 42px 18px; }
  .closing .small-script { font-size: 23px; }
  .closing-name { font-size: clamp(39px, 10vw, 52px); overflow-wrap: anywhere; }
  .save-date { font-size: 24px; }
  .music-toggle { top: max(12px, env(safe-area-inset-top)); right: 12px; padding: 9px 12px; font-size: 9px; }
}


/* Illustrated Canva-style icon cards for Gift Ideas and Health Protocols */
.gift-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  width: min(100%, 460px);
  margin: 22px auto 0;
}
.gift-icon-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gift-icon-card img {
  display: block;
  width: min(100%, 132px);
  height: 112px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.gift-icon-card p {
  margin: 0;
  color: var(--canva-ink, #45252a);
  font: 400 10px/1.5 "Montserrat", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.health-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 470px);
  margin: 22px auto 0;
}
.health-icon-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.health-icon-item img {
  width: min(100%, 118px);
  height: 96px;
  object-fit: contain;
  display: block;
}
.health-icon-item span {
  color: var(--canva-ink, #45252a);
  font: 500 9px/1.45 "Montserrat", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .gift-icon-grid { gap: 20px 12px; margin-top: 18px; }
  .gift-icon-card img { width: 100%; height: 88px; margin-bottom: 6px; }
  .gift-icon-card p { font-size: 9px; line-height: 1.45; letter-spacing: .01em; }
  .health-icon-grid { gap: 7px; margin-top: 18px; }
  .health-icon-item img { height: 70px; width: 100%; }
  .health-icon-item span { font-size: 8px; letter-spacing: 0; }
}

/* Final hero typography and watercolor floral side treatment */
.hero-title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600;
  font-size: clamp(42px, 6.5vw, 78px);
  line-height: .98;
  letter-spacing: -.025em;
  color: #9e526e;
  text-wrap: balance;
  margin: 10px auto 12px;
  max-width: 900px;
}
.hero-title span { color: #df91a8; font-size: .72em; font-style: italic; }
.hero-content { z-index: 2; }
@media (max-width: 600px) {
  .hero::before, .hero::after { width: 42vw; height: 48vh; opacity: .9; }
  .hero-title { font-size: clamp(36px, 10vw, 54px); line-height: 1; }
}

/* === Floral luxury refinement: continuous side florals + elegant typography === */
:root {
  --canva-rose: #a94357;
  --canva-ink: #45252a;
  --cream: #fffaf4;
  --paper: #fffdf9;
  --gold: #c58b91;
  --gold-light: #e8c8c2;
  --ink: #4b292f;
  --muted: #785d60;
  --line: rgba(190, 119, 132, .34);
  --serif: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}
html { scroll-behavior: smooth; }
body { background: #fffaf4; color: #4b292f; }
.hero {
  background: radial-gradient(ellipse at center, rgba(255,253,249,.98) 0%, rgba(255,247,242,.96) 57%, rgba(248,226,226,.82) 100%);
}
/* Use a light, transparent vector vine rather than the dark-backed hero artwork. */
.hero::before, .hero::after {
  width: clamp(100px, 17vw, 230px);
  height: 100%;
  top: 0;
  bottom: 0;
  background-image: url("assets/floral-side.svg");
  background-size: 100% auto;
  background-repeat: repeat-y;
  opacity: .94;
}
.hero::before { left: 0; background-position: top left; }
.hero::after { right: 0; background-position: top right; }
.hero-wash { border-color: rgba(193, 125, 137, .35); }
.hero-wash::before { border-color: rgba(193, 125, 137, .2); }
.hero-title { font-family: "Bodoni Moda", "Playfair Display", Georgia, serif !important; color: #4b252d; font-weight: 600; letter-spacing: -.025em; }
.invite-name, .small-script, .canva-script, .closing-name, .event-card h3, .section-title {
  font-family: "Great Vibes", "Bodoni Moda", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}
.invite-name { color: #a94357; font-size: clamp(54px, 8vw, 88px); }
.section-title { color: #a94357; font-size: clamp(42px, 6vw, 64px); }
.event-card h3 { color: #a94357; font-size: clamp(35px, 4vw, 46px); }
.small-script { color: #a94357; }
.canva-script { color: #a94357; font-size: clamp(42px, 6vw, 60px); }
.canva-copy, .canva-list, .body-copy, .event-place, .event-time, .eyebrow, .hero-date, .save-date, footer {
  font-family: "Montserrat", Arial, sans-serif;
}
.canva-frame {
  border: 1px solid rgba(193, 125, 137, .25);
  border-radius: 145px 145px 95px 95px / 90px 90px 65px 65px;
  box-shadow: 0 14px 36px rgba(126, 74, 81, .07);
  background: radial-gradient(ellipse at 0% 0%, rgba(240, 190, 201, .16), transparent 36%), radial-gradient(ellipse at 100% 100%, rgba(205, 215, 177, .17), transparent 36%), #fffdf9;
}
.details, .intro, .countdown-section, .canva-section, .rsvp-section, .closing { position: relative; isolation: isolate; }
/* Repeated side ornaments keep the botanical frame present while scrolling. */
.section:not(.hero)::before, .section:not(.hero)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: clamp(48px, 11vw, 150px);
  background-image: url("assets/floral-side.svg");
  background-size: 100% 360px;
  background-repeat: repeat-y;
  opacity: .78;
  pointer-events: none;
}
.section:not(.hero)::before { left: 0; background-position: left top; }
.section:not(.hero)::after { right: 0; background-position: right top; transform: scaleX(-1); }
.section:not(.hero) > * { position: relative; z-index: 1; }
.intro { max-width: none; }
.intro > *:not(.section-flower) { max-width: 900px; margin-left: auto; margin-right: auto; }
.intro .body-copy { max-width: 590px; }
.event-card { border-radius: 22px !important; border: 1px solid rgba(193,125,137,.32); box-shadow: 0 12px 30px rgba(126,74,81,.07); }
.countdown-section { background: linear-gradient(180deg, #fffaf4, #f9e8e8 52%, #fffaf4) !important; }
.countdown div { padding: 15px 10px; border: 1px solid rgba(193,125,137,.24); border-radius: 15px; background: rgba(255,253,249,.76); box-shadow: 0 5px 16px rgba(126,74,81,.05); }
.countdown strong { color: #a94357 !important; }
.countdown span, .countdown-date { color: #68474b !important; }
.rsvp-card { border-radius: 24px; border-color: rgba(193,125,137,.38); box-shadow: 0 18px 45px rgba(126,74,81,.1); }
.rsvp-link-panel { border-radius: 18px; border: 1px solid rgba(193,125,137,.22); background: linear-gradient(145deg, #fffaf6, #fff0ef); }
.closing { background: linear-gradient(180deg, #fffdf9, #f8e8e7); }
footer { position: relative; z-index: 1; background: #f7e6e4; color: #925c66; }
/* Keep reveal motion gentle and honor reduced-motion preferences. */
.reveal { transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.3,1); }
@media (max-width: 640px) {
  .hero::before, .hero::after { width: 21vw; opacity: .82; }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 35px; opacity: .55; background-size: 35px 300px; }
  .section { padding-left: 22px; padding-right: 22px; }
  .canva-section { padding-left: 10px; padding-right: 10px; }
  .canva-frame { padding-left: 30px; padding-right: 30px; border-radius: 85px 85px 60px 60px / 65px 65px 42px 42px; }
  .canva-frame::before, .canva-frame::after { z-index: 0; }
  .canva-frame > * { position: relative; z-index: 1; }
  .invite-name { font-size: clamp(47px, 13vw, 65px); }
  .section-title { font-size: clamp(38px, 10vw, 49px); }
  .event-grid { grid-template-columns: 1fr; }
  .countdown { gap: 7px; }
  .countdown div { padding: 12px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly, .welcome-flower { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* FINAL FLORAL LUXURY REFINEMENT — appended overrides keep the existing site structure intact. */
:root {
  --cream: #FFF9F5;
  --paper: #fffdfb;
  --gold: #D58B9A;
  --gold-light: #D9B6A5;
  --ink: #6B3844;
  --muted: #80636a;
  --line: rgba(213, 139, 154, .42);
  --serif: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --canva-rose: #D58B9A;
  --canva-ink: #6B3844;
}
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body {
  background: #FFF9F5;
  color: #6B3844;
  font-size: 14px;
  line-height: 1.8;
  overflow-x: clip;
}
.hero {
  background: radial-gradient(ellipse at 50% 38%, #fffefd 0%, #fff9f5 58%, #f8e9e7 100%);
}
.hero::before, .hero::after {
  width: clamp(220px, 31vw, 470px);
  height: clamp(360px, 78vh, 790px);
  background-size: contain;
  opacity: .96;
}
.hero::before { top: 0; left: 0; }
.hero::after { top: 0; right: 0; transform: scaleX(-1); }
.hero-wash { border-color: rgba(213,139,154,.48); }
.hero-wash::before { border-color: rgba(217,182,165,.30); }
.eyebrow { color: #98616d; font-size: 10px; letter-spacing: .19em; }
.small-script, .invite-name, .canva-script, .closing-name { font-family: "Great Vibes", cursive; font-weight: 400; }
.small-script { color: #A84D60; font-size: clamp(24px, 3.4vw, 34px); }
.hero-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  color: #6B3844;
  font-weight: 500;
  font-size: clamp(45px, 7.4vw, 82px);
  line-height: .98;
  letter-spacing: -.035em;
}
.hero-title span { color: #D58B9A; }
.invite-name { color: #A84D60; font-size: clamp(58px, 8vw, 92px); line-height: 1.08; }
.hero-date { color: #6B3844; font-size: 11px; line-height: 1.9; letter-spacing: .13em; }
.gold-rule { color: #D58B9A; }
.gold-rule::before, .gold-rule::after { background: #D9B6A5; }
.button {
  min-height: 48px;
  border-radius: 999px;
  border-color: #D58B9A;
  font-size: 10px;
  letter-spacing: .12em;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.button-gold { background: #D58B9A; color: #fffdfb; box-shadow: 0 7px 18px rgba(170,83,105,.15); }
.button:hover { background: #B96B7D; border-color: #B96B7D; box-shadow: 0 9px 22px rgba(170,83,105,.18); }
.hero-bottom { color: #98616d; font-size: 9px; }
.section { padding-top: clamp(76px, 8vw, 108px); padding-bottom: clamp(76px, 8vw, 108px); }
.intro { background: rgba(255,249,245,.96); }
.section-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  color: #6B3844;
  font-weight: 500;
  letter-spacing: -.025em;
  font-size: clamp(35px, 5vw, 56px);
  line-height: 1.12;
}
.section-title em { color: #B86E7D; }
.body-copy { color: #80636a; font-size: 13px; line-height: 2; }
.signature { color: #80636a; }
.signature span { font-family: "Great Vibes", cursive; color: #A84D60; font-size: 36px; }
.details { background: linear-gradient(180deg, #fdf1ed 0%, #fff9f5 100%); }
.event-grid { gap: clamp(16px, 2.4vw, 28px); }
.event-card {
  padding: 48px 28px 42px;
  border: 1px solid rgba(213,139,154,.45);
  border-radius: 22px;
  outline: 1px solid rgba(217,182,165,.30);
  outline-offset: -7px;
  background: rgba(255,253,251,.94);
  box-shadow: 0 14px 35px rgba(107,56,68,.07);
  transition: transform .35s ease, box-shadow .35s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 19px 42px rgba(107,56,68,.11); }
.event-number { color: rgba(168,77,96,.7); }
.event-symbol { color: #D58B9A; }
.event-card h3 { font-family: "Bodoni Moda", "Playfair Display", Georgia, serif; color: #6B3844; font-weight: 500; font-size: clamp(27px, 3vw, 36px); }
.event-place { color: #6B3844; font-size: 12px; line-height: 1.85; }
.event-time { color: #80636a; font-size: 11px; line-height: 1.8; }
.text-link { color: #A84D60; border-color: #D9B6A5; font-size: 10px; letter-spacing: .09em; }
.text-link:hover { color: #6B3844; }
.countdown-section { background: linear-gradient(180deg, #fff8f4 0%, #f8e7e9 50%, #fff8f4 100%) !important; color: #6B3844; }
.countdown-section .section-title { color: #6B3844; }
.countdown-section .eyebrow { color: #98616d; }
.countdown { gap: clamp(10px, 2vw, 22px); }
.countdown div {
  min-width: clamp(62px, 10vw, 100px);
  padding: 18px 12px;
  border: 1px solid rgba(213,139,154,.40);
  border-radius: 16px;
  background: rgba(255,253,251,.86);
  box-shadow: 0 8px 22px rgba(107,56,68,.06);
}
.countdown strong { color: #A84D60 !important; font-family: "Bodoni Moda", Georgia, serif; }
.countdown span { color: #6B3844 !important; font-size: 9px; letter-spacing: .14em; }
.countdown-date { color: #80636a !important; font-size: 11px; }
.canva-section { background: rgba(255,249,245,.97); }
.canva-frame {
  width: min(100%, 760px);
  padding: clamp(44px, 6vw, 64px) clamp(25px, 7vw, 76px);
  border: 1px solid rgba(213,139,154,.34);
  border-radius: 150px 150px 95px 95px / 90px 90px 64px 64px;
  background: radial-gradient(ellipse at 0% 0%, rgba(245,216,216,.26), transparent 38%), radial-gradient(ellipse at 100% 100%, rgba(166,180,154,.16), transparent 38%), #fffdfb;
  box-shadow: 0 16px 42px rgba(107,56,68,.075);
}
.canva-frame::before, .canva-frame::after { color: rgba(166,180,154,.64); }
.canva-script { color: #A84D60; font-size: clamp(43px, 6vw, 62px); line-height: 1.1; }
.canva-copy, .canva-list {
  color: #6B3844;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .055em;
}
.pastel-palette { gap: 11px; margin: 25px auto 20px; }
.pastel-palette span { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(107,56,68,.12); }
.gift-icon-grid { gap: 20px; margin-top: 25px; }
.gift-icon-card {
  border: 1px solid rgba(213,139,154,.22);
  border-radius: 15px;
  padding: 12px 10px 14px;
  background: rgba(255,249,245,.72);
  box-shadow: 0 6px 17px rgba(107,56,68,.045);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gift-icon-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(107,56,68,.09); }
.gift-icon-card img { object-fit: contain; width: 100%; height: 118px; }
.gift-icon-card p { color: #6B3844; font-size: 10px; line-height: 1.65; letter-spacing: .025em; }
.health-icon-grid { gap: 16px; margin-top: 28px; }
.health-icon-item { padding: 13px 9px 15px; border: 1px solid rgba(213,139,154,.24); border-radius: 16px; background: rgba(255,249,245,.72); }
.health-icon-item img { object-fit: contain; width: 100%; height: 120px; }
.health-icon-item span { color: #6B3844; font-size: 11px; line-height: 1.6; }
.rsvp-section { background: linear-gradient(180deg, #fff9f5, #f9e9e8); }
.rsvp-card { background: rgba(255,253,251,.97); border: 1px solid rgba(213,139,154,.44); border-radius: 26px; box-shadow: 0 18px 48px rgba(107,56,68,.09); }
.rsvp-link-panel { border-radius: 20px; border-color: rgba(213,139,154,.32); background: linear-gradient(145deg, #fffdfb, #fff0f0); }
.rsvp-link-panel h3 { color: #6B3844; font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(22px, 3vw, 29px); }
.rsvp-link-panel p { color: #80636a; line-height: 1.85; }
.closing { background: linear-gradient(180deg, #fff9f5, #f7e4e6 100%); }
.closing-ornament { color: #B86E7D; }
.closing .small-script { color: #A84D60; }
.closing-name { color: #A84D60; font-size: clamp(52px, 8vw, 82px); }
.save-date { color: #6B3844; font-size: 11px; letter-spacing: .18em; }
footer { background: #f4dfdf; color: #8f5b66; font-size: 9px; letter-spacing: .12em; }
/* A continuous, non-interactive botanical frame repeats through every section. */
.section:not(.hero)::before, .section:not(.hero)::after {
  top: 0;
  bottom: 0;
  width: clamp(46px, 8.2vw, 116px);
  background-image: url("assets/floral-side.svg");
  background-size: 100% 430px;
  background-repeat: repeat-y;
  opacity: .78;
  pointer-events: none;
}
.section:not(.hero)::before { left: 0; background-position: left top; }
.section:not(.hero)::after { right: 0; background-position: right top; transform: scaleX(-1); }
.section:not(.hero) > * { position: relative; z-index: 1; }
/* More luxurious floral corners at the beginning and ending, using the existing artwork. */
.hero::before, .hero::after {
  background-image: url("assets/floral-border.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.hero::before { background-position: left top; }
.hero::after { background-position: left top; }
.closing { overflow: hidden; }
.closing::before, .closing::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: -8px;
  z-index: 0;
  width: clamp(150px, 24vw, 300px);
  height: clamp(150px, 24vw, 300px);
  background: url("assets/floral-border.png") left bottom / auto 100% no-repeat;
  opacity: .72;
  pointer-events: none;
}
.closing::before { left: 0; }
.closing::after { right: 0; transform: scaleX(-1); }
.closing > * { position: relative; z-index: 1; }
/* Staggered reveals stay subtle and run only once; JS IntersectionObserver remains unchanged. */
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.3,1); }
.event-card.reveal:nth-child(2) { transition-delay: 100ms; }
.gift-icon-card.reveal:nth-child(2), .health-icon-item.reveal:nth-child(2) { transition-delay: 80ms; }
@media (max-width: 760px) {
  .hero::before, .hero::after { width: 27vw; height: 58vh; opacity: .82; }
  .hero-title { font-size: clamp(39px, 9.5vw, 58px); line-height: 1.02; }
  .invite-name { font-size: clamp(49px, 12vw, 68px); }
  .section { padding-left: 22px; padding-right: 22px; }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 34px; background-size: 34px 300px; opacity: .48; }
  .canva-section { padding-left: 10px; padding-right: 10px; }
  .canva-frame { width: 100%; padding: 42px 29px; border-radius: 90px 90px 58px 58px / 65px 65px 42px 42px; }
  .canva-frame::before, .canva-frame::after { font-size: 17px; letter-spacing: 4px; }
  .canva-copy, .canva-list { font-size: 10px; line-height: 1.75; letter-spacing: .025em; }
  .gift-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gift-icon-card { padding: 9px 7px 12px; }
  .gift-icon-card img { height: 92px; }
  .gift-icon-card p { font-size: 9px; }
  .health-icon-grid { gap: 8px; }
  .health-icon-item { padding: 9px 5px 11px; }
  .health-icon-item img { height: 78px; }
  .health-icon-item span { font-size: 9px; }
  .countdown { gap: 7px; }
  .countdown div { min-width: 0; flex: 1 1 0; padding: 13px 4px; }
  .countdown strong { font-size: clamp(27px, 7vw, 38px); }
  .countdown span { font-size: 7px; letter-spacing: .08em; }
  .closing::before, .closing::after { width: 120px; height: 120px; opacity: .5; }
}
@media (max-width: 380px) {
  .hero { padding-left: 17px; padding-right: 17px; }
  .hero::before, .hero::after { width: 23vw; opacity: .58; }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 25px; background-size: 25px 250px; opacity: .36; }
  .canva-frame { padding-left: 23px; padding-right: 23px; }
  .countdown span { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* HERO FLORAL CLEANUP — use the clean transparent vine artwork, not the old
   dark-gradient floral PNG that created gray cloud-like shadows beside the title. */
.hero::before,
.hero::after {
  width: clamp(88px, 16vw, 230px);
  height: min(76vh, 680px);
  background-image: url("assets/floral-side.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .88;
  filter: none;
  mix-blend-mode: normal;
}
.hero::before {
  top: 0;
  left: 0;
  background-position: left top;
}
.hero::after {
  top: 0;
  right: 0;
  background-position: right top;
  transform: scaleX(-1);
}
/* Keep the hero's center clean and legible; artwork remains at the outer edges. */
.hero-content { z-index: 2; }
.hero-wash { z-index: 1; }
@media (max-width: 760px) {
  .hero::before,
  .hero::after {
    width: clamp(48px, 17vw, 105px);
    height: 54vh;
    opacity: .66;
  }
}
@media (max-width: 380px) {
  .hero::before,
  .hero::after {
    width: 48px;
    height: 45vh;
    opacity: .5;
  }
}


/* FINAL WARM ROMANTIC POLISH — richer color, stronger hierarchy, calmer floral frame */
:root {
  --cream: #FFF9F5;
  --paper: #FFFEFC;
  --gold: #D58B9A;
  --gold-light: #D9B6A5;
  --ink: #6B3844;
  --muted: #76565E;
  --line: rgba(213, 139, 154, .46);
  --canva-rose: #B65D73;
  --canva-ink: #6B3844;
}
body {
  background: #fff9f5;
  color: #6b3844;
}
.hero {
  min-height: min(900px, 100svh);
  background:
    radial-gradient(ellipse at 12% 18%, rgba(245, 216, 216, .62), transparent 32%),
    radial-gradient(ellipse at 88% 20%, rgba(226, 208, 229, .42), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(248, 226, 221, .74), transparent 45%),
    linear-gradient(135deg, #fff5f1 0%, #fffdf9 52%, #f9e7e8 100%);
}
.hero::before, .hero::after {
  width: clamp(110px, 18vw, 245px);
  height: min(82vh, 760px);
  opacity: .88;
  background-size: 100% 100%;
}
.hero-wash {
  inset: 20px;
  border: 1px solid rgba(213,139,154,.45);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.22);
}
.hero-content { max-width: 850px; }
.hero-kicker {
  color: #985365;
  background: rgba(255,255,255,.78);
  border-color: rgba(213,139,154,.55);
}
.small-script { color: #a34e63; }
.hero-title {
  color: #6b3844;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 1.02;
  font-weight: 500;
  text-shadow: none;
}
.hero-title span { color: #d58b9a; }
.invite-name {
  color: #b4546b;
  font-size: clamp(58px, 8vw, 94px);
  text-shadow: none;
}
.hero-date { color: #76505a; }
.button-gold {
  background: linear-gradient(135deg, #d991a1, #bd687e);
  border-color: #cb7d90;
  box-shadow: 0 9px 22px rgba(166,75,99,.19);
}
.button-gold:hover {
  background: linear-gradient(135deg, #bd687e, #a94f68);
  border-color: #a94f68;
}
.hero-bottom { color: #9b6470; }
.section {
  padding-top: clamp(64px, 7vw, 92px);
  padding-bottom: clamp(64px, 7vw, 92px);
}
.intro {
  max-width: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,216,216,.42), transparent 54%),
    #fffaf6;
}
.intro .section-title { font-size: clamp(39px, 5vw, 58px); }
.intro .body-copy { max-width: 650px; }
.section-flower { color: #d58b9a; }
.signature span { color: #b4546b; }
.details {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(166,180,154,.20), transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(245,216,216,.55), transparent 46%),
    linear-gradient(135deg, #fff0ef, #fffaf5 54%, #f8eee9);
}
.details-heading { margin-bottom: 38px; }
.details-heading .body-copy { font-size: 13px; }
.event-card {
  background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(255,248,246,.96));
  border: 1px solid rgba(213,139,154,.52);
  border-radius: 24px;
  box-shadow: 0 15px 34px rgba(107,56,68,.085);
}
.event-card::after {
  content: "✿";
  position: absolute;
  right: 20px;
  bottom: 12px;
  color: rgba(213,139,154,.36);
  font-size: 19px;
  pointer-events: none;
}
.event-card h3 { color: #8e4558; }
.event-symbol { color: #c8758b; }
.text-link { font-weight: 600; }
.countdown-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,216,216,.72), transparent 56%),
    linear-gradient(180deg, #fff4f1 0%, #f8e5e8 55%, #fff8f3 100%) !important;
}
.countdown-section .section-title { color: #8e4558; }
.countdown div {
  background: rgba(255,255,255,.9);
  border-color: rgba(213,139,154,.52);
  box-shadow: 0 9px 23px rgba(107,56,68,.08);
}
.countdown strong { color: #a94f68 !important; }
.canva-section {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(230,216,233,.26), transparent 35%),
    linear-gradient(180deg, #fffaf6, #fff5f2 55%, #fffaf6);
}
.canva-frame {
  border-color: rgba(213,139,154,.42);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(245,216,216,.35), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(166,180,154,.24), transparent 40%),
    #fffdfb;
  box-shadow: 0 18px 44px rgba(107,56,68,.095);
}
.canva-script { color: #a94f68; }
.canva-copy, .canva-list { color: #68434b; }
.gift-icon-card {
  background: rgba(255,255,255,.88);
  border-color: rgba(213,139,154,.32);
  box-shadow: 0 8px 20px rgba(107,56,68,.065);
}
.gift-icon-card p { color: #68434b; }
.health-icon-item {
  background: rgba(255,255,255,.88);
  border-color: rgba(213,139,154,.32);
  box-shadow: 0 7px 18px rgba(107,56,68,.055);
}
.health-icon-item span { color: #68434b; }
.rsvp-section {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(245,216,216,.5), transparent 42%),
    linear-gradient(135deg, #fff7f3, #f8e6e8);
}
.rsvp-card {
  background: rgba(255,254,252,.97);
  box-shadow: 0 20px 48px rgba(107,56,68,.11);
}
.rsvp-link-panel {
  background: linear-gradient(145deg, #fffdfb, #fff0f1);
}
.closing {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(245,216,216,.7), transparent 56%),
    linear-gradient(180deg, #fffaf6, #f8e4e7);
}
.closing::before, .closing::after { opacity: .58; }
.closing-name { color: #a94f68; }
footer {
  background: #f1dfe1;
  color: #80515d;
}
/* Make the botanical frame continuous but secondary to the invitation content. */
.section:not(.hero)::before, .section:not(.hero)::after {
  width: clamp(38px, 7vw, 96px);
  background-size: 100% 500px;
  opacity: .60;
}
.section:not(.hero)::before { left: 0; }
.section:not(.hero)::after { right: 0; }
.section:not(.hero) > * { z-index: 1; }
@media (max-width: 760px) {
  .hero { min-height: 92svh; padding-top: 86px; padding-bottom: 74px; }
  .hero::before, .hero::after { width: clamp(55px, 19vw, 115px); height: 54vh; opacity: .68; }
  .hero-title { font-size: clamp(38px, 9.5vw, 58px); }
  .invite-name { font-size: clamp(48px, 12vw, 68px); }
  .section:not(.hero)::before, .section:not(.hero)::after {
    width: 28px;
    background-size: 28px 360px;
    opacity: .43;
  }
  .event-card { padding: 43px 24px 38px; }
  .countdown div { border-radius: 12px; }
  .canva-frame { box-shadow: 0 12px 30px rgba(107,56,68,.075); }
}
@media (max-width: 380px) {
  .hero::before, .hero::after { width: 45px; opacity: .42; }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 22px; background-size: 22px 320px; opacity: .32; }
  .hero-title { font-size: 36px; }
  .invite-name { font-size: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly, .welcome-flower { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}



/* FINAL POLISH LAYER — premium editorial finish, fuller watercolor corners, readable details */
:root {
  --cream: #fff9f5;
  --paper: #fffdfb;
  --gold: #d58b9a;
  --gold-light: #d9b6a5;
  --ink: #6b3844;
  --muted: #76565e;
  --line: rgba(213,139,154,.42);
  --canva-rose: #a94357;
  --canva-ink: #6b3844;
}
body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
}
.hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 13% 18%, rgba(245,216,216,.64), transparent 32%),
    radial-gradient(ellipse at 87% 20%, rgba(220,204,232,.38), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(248,226,221,.72), transparent 46%),
    linear-gradient(135deg, #fff4f0 0%, #fffdf9 51%, #f8e5e8 100%);
}
.hero::before, .hero::after {
  width: clamp(120px, 20vw, 285px);
  height: min(78vh, 720px);
  background-image: url("assets/floral-corner.png"), url("assets/floral-side.svg");
  background-size: 100% auto, 100% 100%;
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
  opacity: .96;
  filter: none;
  mix-blend-mode: normal;
}
.hero::before { left: 0; top: 0; }
.hero::after { right: 0; top: 0; transform: scaleX(-1); }
.hero-wash {
  inset: 20px;
  border: 1px solid rgba(213,139,154,.45);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.2);
}
.hero-content { max-width: 850px; }
.hero-kicker {
  color: #985365;
  background: rgba(255,255,255,.8);
  border-color: rgba(213,139,154,.52);
}
.small-script {
  font-family: "Great Vibes", cursive;
  font-size: clamp(25px, 3.3vw, 36px);
  line-height: 1.2;
  color: #a34e63;
}
.hero-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif !important;
  font-size: clamp(47px, 6.7vw, 82px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #6b3844;
  text-shadow: none;
}
.hero-title span { color: #d58b9a; }
.invite-name {
  font-family: "Great Vibes", cursive;
  font-size: clamp(58px, 8vw, 94px);
  line-height: 1.1;
  color: #b4546b;
}
.hero-date { color: #76505a; font-size: 10px; line-height: 1.9; }
.button {
  min-height: 48px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .12em;
}
.button-gold {
  background: linear-gradient(135deg, #d991a1, #bd687e);
  border-color: #cb7d90;
  box-shadow: 0 9px 22px rgba(166,75,99,.19);
}
.button-gold:hover {
  background: linear-gradient(135deg, #bd687e, #a94f68);
  border-color: #a94f68;
  transform: translateY(-2px);
}
.hero-bottom { color: #9b6470; }
.section-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  color: #6b3844;
}
.intro {
  max-width: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,216,216,.42), transparent 54%),
    #fffaf6;
}
.intro .section-title { font-size: clamp(38px, 5vw, 58px); }
.intro .body-copy { max-width: 650px; font-size: 13px; }
.signature { font-family: "Montserrat", Arial, sans-serif; }
.signature span {
  font-family: "Great Vibes", cursive;
  color: #a94f68;
  font-size: 37px;
}
.details {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(166,180,154,.2), transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(245,216,216,.56), transparent 46%),
    linear-gradient(135deg, #fff0ef, #fffaf5 54%, #f8eee9);
}
.details-heading { margin-bottom: 38px; }
.details-heading .body-copy { font-size: 13px; }
.event-grid { gap: clamp(16px, 2.4vw, 28px); }
.event-card {
  padding: 48px 28px 42px;
  background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(255,248,246,.96));
  border: 1px solid rgba(213,139,154,.52);
  border-radius: 24px;
  outline: 1px solid rgba(213,139,154,.12);
  outline-offset: -7px;
  box-shadow: 0 15px 34px rgba(107,56,68,.085);
}
.event-card h3 {
  color: #8e4558;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(30px, 3.5vw, 39px);
}
.event-place { font-size: 13px; line-height: 1.8; }
.event-time { font-size: 11px; line-height: 1.8; }
.event-symbol { color: #c8758b; }
.text-link { color: #a94357; font-weight: 600; }
.countdown-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,216,216,.72), transparent 56%),
    linear-gradient(180deg, #fff4f1 0%, #f8e5e8 55%, #fff8f3 100%) !important;
  color: var(--ink);
  border-block: 1px solid rgba(169,67,87,.12);
}
.countdown-section .section-title { color: #8e4558 !important; }
.countdown-section .eyebrow { color: #a94357 !important; }
.countdown { gap: clamp(10px, 2vw, 22px); }
.countdown div {
  min-width: clamp(62px, 10vw, 100px);
  padding: 18px 12px;
  border: 1px solid rgba(213,139,154,.48);
  border-radius: 16px;
  background: rgba(255,253,251,.92);
  box-shadow: 0 9px 23px rgba(107,56,68,.08);
}
.countdown strong { color: #a94f68 !important; }
.countdown span, .countdown-date { color: #68474b !important; }
.canva-section {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(230,216,233,.22), transparent 35%),
    linear-gradient(180deg, #fffaf6, #fff5f2 55%, #fffaf6);
}
.canva-frame {
  width: min(100%, 760px);
  padding: clamp(44px, 6vw, 64px) clamp(25px, 7vw, 76px);
  border: 1px solid rgba(213,139,154,.42);
  border-radius: 150px 150px 95px 95px / 90px 90px 64px 64px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(245,216,216,.35), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(166,180,154,.22), transparent 40%),
    #fffdfb;
  box-shadow: 0 18px 44px rgba(107,56,68,.085);
}
.canva-frame::before, .canva-frame::after { color: rgba(166,180,154,.7); }
.canva-script {
  font-family: "Great Vibes", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(43px, 6vw, 62px);
  line-height: 1.08;
  color: #a94357;
  margin-bottom: 17px;
}
.canva-copy, .canva-list {
  color: #68434b;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .035em;
}
.pastel-palette { gap: 11px; margin: 25px auto 20px; }
.pastel-palette span {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(107,56,68,.12);
}
.gift-icon-grid { gap: 20px; margin-top: 25px; }
.gift-icon-card {
  padding: 12px 10px 14px;
  border: 1px solid rgba(213,139,154,.32);
  border-radius: 15px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 20px rgba(107,56,68,.065);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gift-icon-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(107,56,68,.09); }
.gift-icon-card img { object-fit: contain; width: 100%; height: 118px; }
.gift-icon-card p { color: #68434b; font-size: 10px; line-height: 1.65; letter-spacing: .02em; }
.health-icon-grid { gap: 16px; margin-top: 28px; }
.health-icon-item {
  padding: 13px 9px 15px;
  border: 1px solid rgba(213,139,154,.32);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 18px rgba(107,56,68,.055);
}
.health-icon-item img { object-fit: contain; width: 100%; height: 120px; }
.health-icon-item span { color: #68434b; font-size: 10px; line-height: 1.6; letter-spacing: .015em; }
.rsvp-section {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(245,216,216,.5), transparent 42%),
    linear-gradient(135deg, #fff7f3, #f8e6e8);
}
.rsvp-card {
  background: rgba(255,254,252,.97);
  border: 1px solid rgba(213,139,154,.48);
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(107,56,68,.11);
}
.rsvp-link-panel {
  border-radius: 20px;
  border-color: rgba(213,139,154,.38);
  background: linear-gradient(145deg, #fffdfb, #fff0f1);
}
.rsvp-link-panel h3 {
  color: #6b3844;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(22px, 3vw, 29px);
}
.rsvp-link-panel p { color: #80636a; line-height: 1.85; }
.closing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(245,216,216,.7), transparent 56%),
    linear-gradient(180deg, #fffaf6, #f8e4e7);
}
.closing::before, .closing::after {
  width: clamp(150px, 23vw, 280px);
  height: clamp(150px, 23vw, 280px);
  background-image: url("assets/floral-corner.png"), url("assets/floral-side.svg");
  background-size: 100% auto, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  opacity: .72;
}
.closing::before { left: 0; bottom: 0; background-position: left bottom, left bottom; }
.closing::after { right: 0; bottom: 0; background-position: left bottom, left bottom; transform: scaleX(-1); }
.closing > * { position: relative; z-index: 1; }
.closing-ornament { color: #b86e7d; }
.closing .small-script { color: #a84d60; }
.closing-name {
  font-family: "Great Vibes", cursive;
  font-style: normal;
  font-weight: 400;
  color: #a94f68;
  font-size: clamp(54px, 8vw, 82px);
}
.save-date { color: #6b3844; font-size: 11px; letter-spacing: .18em; }
footer { background: #f1dfe1; color: #80515d; font-size: 9px; letter-spacing: .12em; }
/* Continuous botanical borders remain decorative and never intercept interaction. */
.section:not(.hero)::before, .section:not(.hero)::after {
  width: clamp(36px, 6.6vw, 88px);
  background-image: url("assets/floral-side.svg");
  background-size: 100% 470px;
  opacity: .62;
}
.section:not(.hero)::before { left: 0; }
.section:not(.hero)::after { right: 0; }
.section:not(.hero) > * { position: relative; z-index: 1; }
.welcome-overlay {
  background-image:
    url("assets/floral-corner.png"),
    url("assets/floral-corner.png"),
    radial-gradient(ellipse at 10% 15%, rgba(246,194,207,.62), transparent 31%),
    radial-gradient(ellipse at 90% 20%, rgba(220,204,232,.38), transparent 31%),
    radial-gradient(ellipse at 80% 90%, rgba(232,220,192,.46), transparent 32%),
    linear-gradient(135deg, #fff4f0 0%, #fff9f5 50%, #f8e5e8 100%);
  background-size:
    clamp(150px, 24vw, 290px) auto,
    clamp(150px, 24vw, 290px) auto,
    auto, auto, auto, auto;
  background-position: left top, right top, center, center, center, center;
  background-repeat: no-repeat;
}
.welcome-overlay::after { content: none; }
.welcome-card {
  background: rgba(255,253,251,.94);
  border: 1px solid rgba(213,139,154,.5);
  border-radius: 8px;
  box-shadow: 0 22px 64px rgba(107,56,68,.12);
  backdrop-filter: blur(3px);
}
.welcome-card h1 {
  font-family: "Bodoni Moda", Georgia, serif;
  color: #6b3844;
}
.welcome-card h1 em {
  font-family: "Great Vibes", cursive;
  font-size: 1.12em;
  color: #a94f68;
}
.welcome-copy { font-family: "Bodoni Moda", Georgia, serif; color: #9c6471; }
.music-toggle { border-color: rgba(213,139,154,.48); box-shadow: 0 5px 16px rgba(80,60,35,.08); }
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.3,1); }
.event-card.reveal:nth-child(2) { transition-delay: 110ms; }
.gift-icon-card:nth-child(2), .health-icon-item:nth-child(2) { transition-delay: 80ms; }
@media (max-width: 760px) {
  .hero { min-height: 92svh; padding-top: 86px; padding-bottom: 74px; }
  .hero::before, .hero::after { width: clamp(66px, 18vw, 120px); height: 55vh; opacity: .78; }
  .hero-title { font-size: clamp(37px, 9.4vw, 57px); line-height: 1.03; }
  .invite-name { font-size: clamp(48px, 11.5vw, 68px); }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 27px; background-size: 27px 340px; opacity: .42; }
  .event-grid { grid-template-columns: 1fr; max-width: 470px; }
  .event-card { padding: 42px 24px 38px; }
  .countdown { gap: 7px; }
  .countdown div { min-width: 0; flex: 1 1 0; padding: 13px 4px; border-radius: 12px; }
  .countdown strong { font-size: clamp(27px, 7vw, 38px); }
  .countdown span { font-size: 7px; letter-spacing: .08em; }
  .canva-section { padding: 35px 12px; }
  .canva-frame { width: 100%; padding: 42px 29px; border-radius: 90px 90px 58px 58px / 65px 65px 42px 42px; }
  .canva-frame::before, .canva-frame::after { font-size: 17px; letter-spacing: 4px; }
  .canva-copy, .canva-list { font-size: 10px; line-height: 1.75; letter-spacing: .025em; }
  .gift-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gift-icon-card { padding: 9px 7px 12px; }
  .gift-icon-card img { height: 92px; }
  .gift-icon-card p { font-size: 9px; }
  .health-icon-grid { gap: 8px; }
  .health-icon-item { padding: 9px 5px 11px; }
  .health-icon-item img { height: 78px; }
  .health-icon-item span { font-size: 9px; }
  .rsvp-section { padding: 44px 14px; }
  .rsvp-card { padding: 30px 22px; border-radius: 20px; }
  .closing { padding: 54px 18px; }
  .closing::before, .closing::after { width: 120px; height: 120px; opacity: .52; }
  .welcome-overlay { background-size: 155px auto, 155px auto, auto, auto, auto, auto; }
}
@media (max-width: 380px) {
  .hero { padding-left: 17px; padding-right: 17px; }
  .hero::before, .hero::after { width: 46px; opacity: .46; }
  .section:not(.hero)::before, .section:not(.hero)::after { width: 22px; background-size: 22px 320px; opacity: .32; }
  .hero-title { font-size: 36px; }
  .invite-name { font-size: 44px; }
  .canva-frame { padding-left: 23px; padding-right: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* FINAL FIX: remove rectangular frames from the welcome screen and hero.
   Keep the floral artwork and the invitation card itself clean and unobstructed. */
.welcome-overlay::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.welcome-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 18px 54px rgba(107, 56, 68, .09) !important;
}
.welcome-card::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.hero-wash {
  border: 0 !important;
  box-shadow: none !important;
}
.hero-wash::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Keep the welcome flowers aligned to the outer corners on smaller screens. */
@media (max-width: 640px) {
  .welcome-overlay {
    background-size:
      clamp(132px, 36vw, 205px),
      clamp(132px, 36vw, 205px),
      auto, auto, auto, auto !important;
    background-position:
      left top,
      right top,
      center, center, center, center !important;
  }
  .welcome-card {
    border-radius: 18px !important;
  }
}


/* FLORAL SIDES + BLUE BUTTERFLIES — additional visual enhancement */
.section:not(.hero) {
  position: relative;
  isolation: isolate;
}
.section:not(.hero)::before,
.section:not(.hero)::after {
  width: clamp(58px, 8vw, 112px) !important;
  top: 0;
  bottom: 0;
  height: auto;
  background-image: url("assets/floral-side.svg") !important;
  background-repeat: repeat-y !important;
  background-size: 100% 500px !important;
  opacity: .82 !important;
  pointer-events: none;
  z-index: 0;
}
.section:not(.hero)::before { left: 0; background-position: left top; }
.section:not(.hero)::after { right: 0; background-position: right top; transform: scaleX(-1); }
.intro { overflow: hidden; }
.intro-butterfly {
  position: absolute;
  z-index: 0;
  display: block;
  font-family: sans-serif;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(71, 125, 190, .15));
  pointer-events: none;
  user-select: none;
  animation: introButterflyFloat 6.5s ease-in-out infinite;
}
.intro-butterfly-left {
  left: clamp(68px, 11vw, 150px);
  top: 30%;
  transform: rotate(-13deg);
}
.intro-butterfly-right {
  right: clamp(68px, 11vw, 150px);
  top: 57%;
  font-size: clamp(23px, 3vw, 35px);
  animation-delay: -3.2s;
  transform: rotate(12deg) scaleX(-1);
}
@keyframes introButterflyFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -13px; }
}
@media (max-width: 760px) {
  .section:not(.hero)::before,
  .section:not(.hero)::after {
    width: 38px !important;
    background-size: 38px 420px !important;
    opacity: .7 !important;
  }
  .intro-butterfly-left { left: 39px; top: 23%; font-size: 26px; }
  .intro-butterfly-right { right: 39px; top: 61%; font-size: 23px; }
  .intro .section-title, .intro .body-copy, .intro .signature, .intro .eyebrow {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 380px) {
  .section:not(.hero)::before,
  .section:not(.hero)::after {
    width: 30px !important;
    background-size: 30px 390px !important;
    opacity: .62 !important;
  }
  .intro-butterfly-left { left: 30px; font-size: 22px; }
  .intro-butterfly-right { right: 30px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-butterfly { animation: none !important; }
}



/* FINAL POLISH: fuller floral vines and real pastel-blue butterfly artwork. */
.hero-butterfly,
.intro-butterfly {
  display: block;
  background-image: url("assets/butterfly-blue.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  filter: drop-shadow(0 4px 7px rgba(76, 132, 177, .18));
  will-change: transform;
}
.hero-butterfly {
  width: clamp(34px, 4.2vw, 58px);
  height: clamp(30px, 3.6vw, 48px);
  animation: blueButterflyDrift 8s ease-in-out infinite;
}
.hero-butterfly.butterfly-one { left: 13%; top: 24%; transform: rotate(-12deg); }
.hero-butterfly.butterfly-two { right: 13%; top: 43%; transform: rotate(10deg) scale(.82); animation-delay: -4s; }
.intro-butterfly {
  width: clamp(34px, 4vw, 52px);
  height: clamp(30px, 3.4vw, 45px);
  animation: blueButterflyDrift 9s ease-in-out infinite;
}
.intro-butterfly-left { left: clamp(72px, 12vw, 160px); top: 24%; transform: rotate(-14deg); }
.intro-butterfly-right { right: clamp(72px, 12vw, 160px); top: 58%; transform: rotate(13deg) scale(.86); animation-delay: -4.5s; }
@keyframes blueButterflyDrift {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -8px; rotate: 3deg; }
}

/* Richer continuous side vines: more visible on desktop, still calm on mobile. */
.hero::before, .hero::after {
  width: clamp(132px, 19vw, 260px) !important;
  background-size: auto 100% !important;
  opacity: .98 !important;
}
.section:not(.hero)::before,
.section:not(.hero)::after {
  width: clamp(66px, 9vw, 126px) !important;
  background-size: 100% 470px !important;
  opacity: .88 !important;
  animation: floralSideDrift 34s ease-in-out infinite alternate;
  will-change: background-position;
}
.section:not(.hero)::after { animation-delay: -17s; }
@keyframes floralSideDrift {
  from { background-position-y: 0; }
  to { background-position-y: 58px; }
}
@media (max-width: 760px) {
  .hero::before, .hero::after {
    width: clamp(94px, 24vw, 145px) !important;
    height: 50vh !important;
    background-size: auto 100% !important;
    opacity: .92 !important;
  }
  .section:not(.hero)::before,
  .section:not(.hero)::after {
    width: clamp(43px, 11vw, 62px) !important;
    background-size: 100% 390px !important;
    opacity: .78 !important;
  }
  .hero-butterfly.butterfly-one { left: 10%; top: 20%; }
  .hero-butterfly.butterfly-two { right: 10%; top: 39%; }
  .intro-butterfly-left { left: 42px; top: 22%; }
  .intro-butterfly-right { right: 42px; top: 60%; }
}
@media (max-width: 390px) {
  .section:not(.hero)::before, .section:not(.hero)::after { width: 38px !important; opacity: .7 !important; }
  .intro-butterfly-left { left: 30px; }
  .intro-butterfly-right { right: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly, .intro-butterfly { animation: none !important; }
  .section:not(.hero)::before, .section:not(.hero)::after { animation: none !important; }
}


/* FINAL FLORAL BUTTERFLY LAYER
   Butterflies sit slightly beneath the botanical vines so they feel tucked into the flowers,
   not pasted on top of the invitation. Each scroll section gets a small blue butterfly. */
.hero::before,
.hero::after {
  z-index: 2 !important;
}
.hero-content,
.hero-bottom,
.hero-sparkles {
  position: relative;
  z-index: 3;
}
.hero-butterfly {
  z-index: 1 !important;
  width: clamp(30px, 3.5vw, 48px);
  height: clamp(26px, 3vw, 42px);
  background-image: url("assets/butterfly-blue.svg") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: butterfly-garden-drift 8.5s ease-in-out infinite;
  opacity: .96;
}
.hero-butterfly.butterfly-one {
  left: clamp(74px, 12vw, 168px);
  top: 27%;
  transform: rotate(-12deg);
}
.hero-butterfly.butterfly-two {
  right: clamp(72px, 13vw, 176px);
  top: 53%;
  animation-delay: -4.1s;
  transform: rotate(12deg) scaleX(-1);
}

/* Vines render above the butterflies where their leaves and petals overlap. */
.section:not(.hero)::before,
.section:not(.hero)::after {
  z-index: 2 !important;
}
.section:not(.hero) > * {
  position: relative;
  z-index: 3;
}
.section:not(.hero) > .section-butterfly {
  position: absolute !important;
  z-index: 1 !important;
  display: block;
  width: clamp(28px, 3.4vw, 44px);
  height: clamp(25px, 3vw, 39px);
  top: 34%;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(80, 137, 178, .14));
  pointer-events: none;
  user-select: none;
  opacity: .94;
  animation: butterfly-garden-drift 8.5s ease-in-out infinite;
}
.section:not(.hero) > .section-butterfly.side-left {
  left: clamp(48px, 7.5vw, 104px);
  transform: rotate(-12deg);
}
.section:not(.hero) > .section-butterfly.side-right {
  right: clamp(48px, 7.5vw, 104px);
  top: 57%;
  transform: rotate(12deg) scaleX(-1);
  animation-delay: -4s;
}
/* The introduction already has two butterflies; keep them in the same tucked-behind-vines layer. */
.intro > .intro-butterfly {
  z-index: 1 !important;
  width: clamp(29px, 3.5vw, 45px);
  height: clamp(25px, 3vw, 38px);
  background-image: url("assets/butterfly-blue.svg") !important;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0 !important;
}
@keyframes butterfly-garden-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -9px; }
}
@media (max-width: 760px) {
  .hero::before, .hero::after { z-index: 2 !important; }
  .hero-butterfly {
    width: 27px;
    height: 24px;
  }
  .hero-butterfly.butterfly-one { left: 11%; top: 25%; }
  .hero-butterfly.butterfly-two { right: 11%; top: 51%; }
  .section:not(.hero)::before,
  .section:not(.hero)::after {
    z-index: 2 !important;
    width: clamp(30px, 8vw, 43px) !important;
    opacity: .78 !important;
  }
  .section:not(.hero) > .section-butterfly {
    width: 24px;
    height: 21px;
    top: 27%;
  }
  .section:not(.hero) > .section-butterfly.side-left { left: 31px; }
  .section:not(.hero) > .section-butterfly.side-right { right: 31px; top: 61%; }
  .intro-butterfly-left { left: 31px; top: 23%; }
  .intro-butterfly-right { right: 31px; top: 61%; }
}
@media (max-width: 380px) {
  .section:not(.hero) > .section-butterfly {
    width: 20px;
    height: 18px;
  }
  .section:not(.hero) > .section-butterfly.side-left { left: 25px; }
  .section:not(.hero) > .section-butterfly.side-right { right: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly,
  .intro-butterfly,
  .section:not(.hero) > .section-butterfly {
    animation: none !important;
    translate: none !important;
  }
}


/* HERO FRAME REFINEMENT: bring the floral vines inward so the title feels nestled
   inside the flowers, instead of floating in a wide empty center. Keep the vines
   above the background wash but below all readable invitation content. */
.hero { isolation: isolate; }
.hero::before,
.hero::after {
  z-index: 1 !important;
}
.hero-vine {
  position: absolute;
  z-index: 2;
  top: 5%;
  bottom: 4%;
  width: clamp(112px, 15vw, 205px);
  background-image: url("assets/floral-side.svg");
  background-repeat: repeat-y;
  background-size: 100% 430px;
  opacity: .94;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 5px rgba(125, 75, 82, .045));
}
.hero-vine-left {
  left: clamp(66px, 8.5vw, 132px);
  background-position: left top;
}
.hero-vine-right {
  right: clamp(66px, 8.5vw, 132px);
  background-position: right top;
  transform: scaleX(-1);
}
/* Keep all hero text and actions clearly in front of the floral frame. */
.hero-content,
.hero-bottom,
.hero-sparkles {
  position: relative;
  z-index: 4 !important;
}
.hero-butterfly { z-index: 3 !important; }
@media (max-width: 760px) {
  .hero-vine {
    top: 8%;
    bottom: 5%;
    width: clamp(66px, 19vw, 112px);
    background-size: 100% 360px;
    opacity: .82;
  }
  .hero-vine-left { left: clamp(24px, 5vw, 42px); }
  .hero-vine-right { right: clamp(24px, 5vw, 42px); }
  .hero-content { max-width: 100%; }
}
@media (max-width: 390px) {
  .hero-vine { width: 65px; opacity: .76; }
  .hero-vine-left { left: 18px; }
  .hero-vine-right { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vine { filter: none; }
}


/* SOFT-BLENDED HERO — remove the hard rectangular edge from the corner artwork.
   Keep the watercolor flowers visible at the outer edges and fade them smoothly
   into the warm ivory center behind the invitation title. */
.hero {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 250, 247, .74) 0%, rgba(255, 248, 245, .48) 42%, rgba(255, 240, 238, .10) 72%, transparent 100%),
    linear-gradient(135deg, #fff5f1 0%, #fffaf7 48%, #fae9eb 100%) !important;
}
.hero::before,
.hero::after {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, rgba(0,0,0,.82) 60%, rgba(0,0,0,.35) 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 42%, rgba(0,0,0,.82) 60%, rgba(0,0,0,.35) 82%, transparent 100%);
}
/* The right decoration is mirrored, so the same mask fades toward the center. */
.hero-wash {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.hero-wash::before { content: none !important; }
.hero-content { background: transparent !important; box-shadow: none !important; }
@media (max-width: 760px) {
  .hero::before,
  .hero::after {
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.45) 68%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.45) 68%, transparent 100%);
  }
  .hero { background-color: #fff8f5 !important; }
}


/* UNIFIED CONTINUOUS FLORAL SIDES
   Use one consistent viewport-side vine instead of restarting a new vine at every
   section boundary. This keeps the side artwork visually aligned while the page scrolls. */
html, body {
  overflow-x: clip;
}
body {
  position: relative;
}

/* One pair of persistent floral rails, visible from the hero through the footer. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(56px, 8.2vw, 118px);
  z-index: 2;
  pointer-events: none;
  user-select: none;
  background-image: url("assets/floral-side.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .76;
  animation: unifiedFloralDrift 22s ease-in-out infinite;
  will-change: transform;
}
body::before {
  left: 0;
  background-position: left center;
}
body::after {
  right: 0;
  background-position: right center;
  transform: scaleX(-1);
  animation-delay: -11s;
}

/* Disable per-section vine panels, which were restarting at different heights. */
.section:not(.hero)::before,
.section:not(.hero)::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
/* The hero keeps its large watercolor corner flowers; the duplicate inner vines are removed. */
.hero-vine {
  display: none !important;
}

/* Allow the global rails to sit above section backgrounds but behind all content. */
.hero,
.section,
main,
footer {
  isolation: auto !important;
}
.hero-content,
.hero-bottom,
.hero-sparkles,
.section > *,
footer > * {
  position: relative;
  z-index: 4;
}
.hero::before,
.hero::after {
  z-index: 2 !important;
}
.hero-butterfly,
.intro-butterfly,
.section:not(.hero) > .section-butterfly {
  z-index: 1 !important;
}

@keyframes unifiedFloralDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 760px) {
  body::before,
  body::after {
    width: clamp(42px, 10.5vw, 68px);
    opacity: .68;
    animation-duration: 26s;
  }
  .hero-content,
  .section > *,
  footer > * {
    z-index: 4;
  }
  /* Give text/cards breathing room beside the persistent vines on small screens. */
  .section:not(.hero) {
    padding-left: max(22px, 6vw);
    padding-right: max(22px, 6vw);
  }
}

@media (max-width: 390px) {
  body::before,
  body::after {
    width: 40px;
    opacity: .6;
  }
  .section:not(.hero) {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    translate: none !important;
    will-change: auto;
  }
}


/* FINAL REQUEST: fuller scrolling vines and more blue butterflies in every section.
   Keep one consistent fixed vine on both viewport edges; enlarge it without covering text. */
body::before,
body::after {
  width: clamp(78px, 10.2vw, 148px) !important;
  opacity: .84 !important;
  background-size: 100% 100% !important;
  animation: unifiedFloralDrift 28s ease-in-out infinite !important;
}
body::after { animation-delay: -14s !important; }

@media (max-width: 760px) {
  body::before,
  body::after {
    width: clamp(52px, 12.5vw, 78px) !important;
    opacity: .76 !important;
    animation-duration: 30s !important;
  }
}
@media (max-width: 390px) {
  body::before,
  body::after {
    width: 48px !important;
    opacity: .7 !important;
  }
}

/* Each main section now has a pair of small pastel-blue butterflies.
   Their positions follow the side vines and remain outside the main reading area. */
.section:not(.hero) > .section-butterfly {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  width: clamp(30px, 3.6vw, 48px) !important;
  height: clamp(26px, 3.1vw, 42px) !important;
  top: 25%;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat !important;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 5px rgba(80, 137, 178, .12));
  animation: butterfly-garden-drift 9s ease-in-out infinite;
}
.section:not(.hero) > .section-butterfly.side-left {
  left: clamp(48px, 7.2vw, 105px) !important;
  right: auto !important;
}
.section:not(.hero) > .section-butterfly.side-right {
  right: clamp(48px, 7.2vw, 105px) !important;
  left: auto !important;
  top: 61%;
  animation-delay: -4.5s;
}
.section:not(.hero) > .section-butterfly.butterfly-extra {
  top: 72%;
  width: clamp(25px, 3vw, 39px) !important;
  height: clamp(22px, 2.6vw, 34px) !important;
  animation-delay: -6.5s;
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-left {
  left: clamp(68px, 9vw, 126px) !important;
  transform: rotate(-12deg) scaleX(-1);
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-right {
  right: clamp(68px, 9vw, 126px) !important;
  transform: rotate(12deg);
}
@media (max-width: 760px) {
  .section:not(.hero) > .section-butterfly {
    width: 27px !important;
    height: 24px !important;
    top: 22%;
  }
  .section:not(.hero) > .section-butterfly.side-left {
    left: 38px !important;
  }
  .section:not(.hero) > .section-butterfly.side-right {
    right: 38px !important;
    top: 60%;
  }
  .section:not(.hero) > .section-butterfly.butterfly-extra {
    width: 23px !important;
    height: 20px !important;
    top: 76%;
  }
  .section:not(.hero) > .section-butterfly.butterfly-extra.side-left {
    left: 52px !important;
  }
  .section:not(.hero) > .section-butterfly.butterfly-extra.side-right {
    right: 52px !important;
  }
}
@media (max-width: 390px) {
  .section:not(.hero) > .section-butterfly {
    width: 23px !important;
    height: 20px !important;
  }
  .section:not(.hero) > .section-butterfly.side-left { left: 31px !important; }
  .section:not(.hero) > .section-butterfly.side-right { right: 31px !important; }
  .section:not(.hero) > .section-butterfly.butterfly-extra.side-left { left: 43px !important; }
  .section:not(.hero) > .section-butterfly.butterfly-extra.side-right { right: 43px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  .section:not(.hero) > .section-butterfly {
    animation: none !important;
    translate: none !important;
    will-change: auto !important;
  }
}


/* HERO FOOTER SPACING FIX: keep “Amariah Turns 1” below the invitation button.
   The hero content and its small footer label must flow vertically instead of overlapping. */
.hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 76px 24px 28px !important;
  min-height: 100svh;
}
.hero-content {
  width: min(100%, 850px) !important;
  flex: 0 1 auto;
  margin: 0 !important;
}
.hero-bottom {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  flex: 0 0 auto;
  margin: 22px 0 0 !important;
  padding: 0 8px 2px;
  line-height: 1.8;
  text-align: center;
  z-index: 4 !important;
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero { padding: 68px 18px 24px !important; }
  .hero-bottom { margin-top: 18px !important; font-size: 8px !important; letter-spacing: .16em !important; }
}
@media (max-width: 390px) {
  .hero { padding-left: 14px !important; padding-right: 14px !important; }
  .hero-bottom { margin-top: 14px !important; letter-spacing: .12em !important; }
}


/* BUTTERFLY FLIGHT PATHS — slow, varied directions for a natural garden feel.
   Uses individual translate/rotate properties so existing butterfly orientation remains intact. */
.hero-butterfly.butterfly-one {
  animation: butterflyFlightA 12.5s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -2.4s !important;
  will-change: translate, rotate;
}
.hero-butterfly.butterfly-two {
  animation: butterflyFlightB 14s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -7.1s !important;
  will-change: translate, rotate;
}
.intro > .intro-butterfly-left {
  animation: butterflyFlightC 13s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -4.2s !important;
  will-change: translate, rotate;
}
.intro > .intro-butterfly-right {
  animation: butterflyFlightD 15s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -9.4s !important;
  will-change: translate, rotate;
}
.section:not(.hero) > .section-butterfly.side-left:not(.butterfly-extra) {
  animation: butterflyFlightB 13.5s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -5.7s !important;
  will-change: translate, rotate;
}
.section:not(.hero) > .section-butterfly.side-right:not(.butterfly-extra) {
  animation: butterflyFlightC 14.5s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -10.2s !important;
  will-change: translate, rotate;
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-left {
  animation: butterflyFlightD 16s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -6.6s !important;
  will-change: translate, rotate;
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-right {
  animation: butterflyFlightA 15.5s cubic-bezier(.42,0,.58,1) infinite !important;
  animation-delay: -12.1s !important;
  will-change: translate, rotate;
}

@keyframes butterflyFlightA {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  18% { translate: 18px -12px; rotate: 7deg; }
  42% { translate: 29px -34px; rotate: -3deg; }
  66% { translate: 7px -43px; rotate: -9deg; }
  84% { translate: -14px -20px; rotate: 4deg; }
}
@keyframes butterflyFlightB {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  22% { translate: -20px -18px; rotate: -8deg; }
  46% { translate: -31px 2px; rotate: 3deg; }
  70% { translate: -12px -32px; rotate: 10deg; }
  88% { translate: 12px -17px; rotate: -4deg; }
}
@keyframes butterflyFlightC {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: 12px 15px; rotate: 9deg; }
  44% { translate: -11px 28px; rotate: -5deg; }
  68% { translate: -27px 5px; rotate: -11deg; }
  86% { translate: -8px -18px; rotate: 5deg; }
}
@keyframes butterflyFlightD {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  16% { translate: -15px 12px; rotate: -7deg; }
  38% { translate: 9px 26px; rotate: 5deg; }
  62% { translate: 25px 8px; rotate: 11deg; }
  82% { translate: 15px -21px; rotate: -3deg; }
}
@media (max-width: 760px) {
  @keyframes butterflyFlightA {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: 10px -9px; rotate: 7deg; }
    50% { translate: 15px -22px; rotate: -3deg; }
    75% { translate: -8px -12px; rotate: -7deg; }
  }
  @keyframes butterflyFlightB {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: -10px -10px; rotate: -7deg; }
    50% { translate: -16px 3px; rotate: 3deg; }
    75% { translate: 7px -15px; rotate: 8deg; }
  }
  @keyframes butterflyFlightC {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: 8px 9px; rotate: 8deg; }
    50% { translate: -6px 17px; rotate: -4deg; }
    75% { translate: -13px 2px; rotate: -8deg; }
  }
  @keyframes butterflyFlightD {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: -8px 8px; rotate: -7deg; }
    50% { translate: 6px 15px; rotate: 4deg; }
    75% { translate: 13px -8px; rotate: 8deg; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly,
  .intro > .intro-butterfly,
  .section:not(.hero) > .section-butterfly {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    will-change: auto !important;
  }
}


/* GENTLE READING-AREA FLIGHT PATHS
   Butterflies now travel inward across the invitation text area, not only beside the vines.
   Keep them small, soft, and pointer-safe so the effect feels like a garden breeze. */
.hero > .hero-butterfly,
.intro > .intro-butterfly,
.section:not(.hero) > .section-butterfly {
  z-index: 6 !important;
  opacity: .78 !important;
  pointer-events: none !important;
  will-change: translate, rotate;
}

.hero > .hero-butterfly.butterfly-one {
  animation: butterflyAcrossFromLeft 16s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -5s !important;
}
.hero > .hero-butterfly.butterfly-two {
  animation: butterflyAcrossFromRight 18s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -11s !important;
}
.intro > .intro-butterfly-left,
.section:not(.hero) > .section-butterfly.side-left:not(.butterfly-extra) {
  animation: butterflyAcrossFromLeft 17s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -7s !important;
}
.intro > .intro-butterfly-right,
.section:not(.hero) > .section-butterfly.side-right:not(.butterfly-extra) {
  animation: butterflyAcrossFromRight 18.5s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -12s !important;
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-left {
  animation: butterflyAcrossFromLeft 19.5s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -14s !important;
}
.section:not(.hero) > .section-butterfly.butterfly-extra.side-right {
  animation: butterflyAcrossFromRight 20s cubic-bezier(.45,.05,.55,.95) infinite !important;
  animation-delay: -9s !important;
}

@keyframes butterflyAcrossFromLeft {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  16% { translate: 11vw -12px; rotate: 7deg; }
  34% { translate: 25vw 9px; rotate: -5deg; }
  52% { translate: 41vw -15px; rotate: 8deg; }
  70% { translate: 29vw 11px; rotate: -7deg; }
  86% { translate: 13vw -6px; rotate: 4deg; }
}
@keyframes butterflyAcrossFromRight {
  0%, 100% { translate: 0 0; rotate: 4deg; }
  16% { translate: -12vw 10px; rotate: -7deg; }
  35% { translate: -27vw -12px; rotate: 5deg; }
  53% { translate: -42vw 13px; rotate: -8deg; }
  72% { translate: -28vw -8px; rotate: 7deg; }
  88% { translate: -12vw 7px; rotate: -3deg; }
}

@media (max-width: 760px) {
  .hero > .hero-butterfly,
  .intro > .intro-butterfly,
  .section:not(.hero) > .section-butterfly {
    opacity: .72 !important;
  }
  @keyframes butterflyAcrossFromLeft {
    0%, 100% { translate: 0 0; rotate: -4deg; }
    18% { translate: 12vw -8px; rotate: 7deg; }
    38% { translate: 26vw 7px; rotate: -5deg; }
    56% { translate: 42vw -10px; rotate: 8deg; }
    76% { translate: 24vw 8px; rotate: -6deg; }
    90% { translate: 10vw -4px; rotate: 3deg; }
  }
  @keyframes butterflyAcrossFromRight {
    0%, 100% { translate: 0 0; rotate: 4deg; }
    18% { translate: -12vw 7px; rotate: -7deg; }
    38% { translate: -27vw -8px; rotate: 5deg; }
    56% { translate: -42vw 10px; rotate: -8deg; }
    76% { translate: -25vw -7px; rotate: 6deg; }
    90% { translate: -10vw 4px; rotate: -3deg; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero > .hero-butterfly,
  .intro > .intro-butterfly,
  .section:not(.hero) > .section-butterfly {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    will-change: auto !important;
  }
}


/* WELCOME COVER REDESIGN — soft floral garden, no rectangular text-field look. */
.welcome-overlay {
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vh, 42px) 18px;
  overflow-x: hidden;
  overflow-y: auto;
  background-image:
    url("assets/floral-corner.png"),
    url("assets/floral-corner.png"),
    radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.88) 0%, rgba(255,252,249,.72) 31%, rgba(255,248,246,.18) 66%, transparent 82%),
    radial-gradient(ellipse at 8% 25%, rgba(244,194,207,.46), transparent 34%),
    radial-gradient(ellipse at 92% 28%, rgba(224,208,236,.40), transparent 34%),
    linear-gradient(145deg, #fff5f1 0%, #fffaf7 48%, #fae8eb 100%);
  background-size:
    clamp(185px, 28vw, 340px) auto,
    clamp(185px, 28vw, 340px) auto,
    auto, auto, auto, auto;
  background-position: left top, right top, center, center, center, center;
  background-repeat: no-repeat;
}

/* Matching side vines extend the floral frame vertically without forming a box. */
.welcome-overlay::before,
.welcome-overlay::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(62px, 9vw, 132px);
  border: 0 !important;
  background-image: url("assets/floral-side.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .48;
  pointer-events: none;
  z-index: 0;
}
.welcome-overlay::before {
  left: 0;
  background-position: left center;
}
.welcome-overlay::after {
  right: 0;
  transform: scaleX(-1);
  background-position: left center;
}

/* A softly glowing center replaces the hard-edged white rectangular card. */
.welcome-card {
  isolation: isolate;
  width: min(100%, 760px);
  padding: clamp(30px, 6vh, 58px) clamp(20px, 5vw, 48px);
  background: radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.88) 0%, rgba(255,253,250,.68) 48%, rgba(255,251,248,.18) 72%, transparent 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center;
}
.welcome-card::before,
.welcome-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  width: clamp(34px, 5vw, 54px);
  aspect-ratio: 180 / 150;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  opacity: .82;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 3px 5px rgba(80,132,170,.12));
  animation: welcome-butterfly-drift 7.8s ease-in-out infinite;
}
.welcome-card::before {
  left: clamp(0px, 3vw, 28px);
  top: 31%;
  transform: rotate(-12deg);
}
.welcome-card::after {
  right: clamp(0px, 3vw, 28px);
  bottom: 23%;
  transform: rotate(13deg) scale(.86);
  animation-delay: -3.7s;
}
.welcome-card > * {
  position: relative;
  z-index: 1;
}
.welcome-flower {
  color: #c58d9b;
  font-size: clamp(30px, 4vw, 40px);
  margin-bottom: 18px;
  text-shadow: 0 4px 12px rgba(197,141,155,.14);
}
.welcome-card .eyebrow {
  margin-bottom: 18px;
  color: #98616e;
  font-size: 10px;
  letter-spacing: .24em;
}
.welcome-card h1 {
  margin: 0 auto;
  max-width: 680px;
  font: 400 clamp(39px, 6.4vw, 68px)/1.08 "Bodoni Moda", Georgia, serif;
  letter-spacing: -.025em;
  color: #6b3844;
  text-wrap: balance;
}
.welcome-card h1 em {
  display: inline-block;
  margin-top: 5px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.08em, 1.13em, 1.13em);
  line-height: 1.16;
  color: #b45470;
}
.welcome-divider {
  margin: clamp(18px, 3vh, 28px) 0 15px;
  gap: 16px;
}
.welcome-divider::before,
.welcome-divider::after {
  width: clamp(42px, 6vw, 62px);
  background: linear-gradient(to right, transparent, #d8b98b);
}
.welcome-divider::after {
  background: linear-gradient(to left, transparent, #d8b98b);
}
.welcome-copy {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 28px);
  color: #a36576;
}
.welcome-date {
  margin: 0 0 28px;
  color: #80675b;
  font-size: 10px;
  letter-spacing: .15em;
  line-height: 1.9;
}
.welcome-open {
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d98fa2, #b95f78) !important;
  box-shadow: 0 12px 26px rgba(185,95,120,.22) !important;
  letter-spacing: .12em;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.welcome-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(185,95,120,.26) !important;
  filter: saturate(1.04);
}
.welcome-hint {
  margin: 18px 0 0;
  color: #9b8276;
  font-size: clamp(15px, 2.2vw, 18px);
}
@keyframes welcome-butterfly-drift {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  28% { translate: 9px -7px; rotate: 5deg; }
  62% { translate: -5px -13px; rotate: -2deg; }
}
@media (max-width: 760px) {
  .welcome-overlay {
    padding: 22px 14px;
    background-size: clamp(150px, 39vw, 220px), clamp(150px, 39vw, 220px), auto, auto, auto, auto;
    background-position: left top, right top, center, center, center, center;
  }
  .welcome-overlay::before,
  .welcome-overlay::after {
    width: clamp(38px, 10vw, 62px);
    opacity: .32;
  }
  .welcome-card {
    width: 100%;
    padding: 35px 16px 30px;
  }
  .welcome-card::before { left: 1px; top: 29%; width: 31px; }
  .welcome-card::after { right: 1px; bottom: 23%; width: 29px; }
  .welcome-card .eyebrow { font-size: 8px; letter-spacing: .18em; }
  .welcome-card h1 { font-size: clamp(35px, 9.5vw, 49px); line-height: 1.08; }
  .welcome-card h1 em { font-size: 1.05em; }
  .welcome-copy { font-size: clamp(20px, 5.4vw, 25px); }
  .welcome-date { font-size: 9px; letter-spacing: .09em; margin-bottom: 23px; }
  .welcome-open { min-height: 49px; padding: 0 21px; font-size: 10px; letter-spacing: .09em; }
}
@media (max-width: 380px) {
  .welcome-overlay { padding-left: 9px; padding-right: 9px; }
  .welcome-card { padding-left: 10px; padding-right: 10px; }
  .welcome-card::before { left: -2px; width: 25px; }
  .welcome-card::after { right: -2px; width: 24px; }
  .welcome-card h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-card::before,
  .welcome-card::after { animation: none !important; }
  .welcome-open { transition: none !important; }
}


/* Readability enhancement: closing-section decorative line */
.closing .small-script {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.25vw, 26px);
  line-height: 1.45;
  letter-spacing: 0.005em;
  max-width: min(92%, 620px);
  margin-inline: auto;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .closing .small-script {
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1.5;
    max-width: 94%;
  }
}


/* Amariah's First Year — single-photo interactive monthly timeline */
.photo-gallery-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 15%, rgba(245, 205, 214, .30), transparent 34%),
    radial-gradient(ellipse at 100% 82%, rgba(223, 230, 210, .32), transparent 32%),
    linear-gradient(180deg, #fff9f6 0%, #fffdf9 52%, #fff3f2 100%);
}
.photo-gallery-section::before,
.photo-gallery-section::after {
  content: "❦";
  position: absolute;
  z-index: -1;
  top: 18%;
  color: rgba(190, 137, 151, .10);
  font: 400 clamp(120px, 19vw, 250px)/1 var(--serif);
  pointer-events: none;
}
.photo-gallery-section::before { left: -48px; transform: rotate(-35deg); }
.photo-gallery-section::after { right: -48px; transform: scaleX(-1) rotate(-35deg); }
.gallery-heading { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.gallery-heading .section-title { margin-bottom: 14px; color: #70434e; }
.gallery-heading .section-title::first-letter { color: #bd7e91; }
.gallery-divider { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 20px auto 0; color: #c98e9c; }
.gallery-divider span:nth-child(2) { color: #d6b77f; font-size: 18px; }
.month-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(100%, 720px);
  margin: 0 auto 24px;
}
.month-tab {
  appearance: none;
  border: 1px solid rgba(197, 126, 146, .34);
  border-radius: 999px;
  padding: 10px 17px;
  background: rgba(255, 253, 251, .78);
  color: #936575;
  font: 500 11px/1.2 "Montserrat", sans-serif;
  letter-spacing: .055em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.month-tab:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(135, 82, 99, .10); }
.month-tab.is-active { background: linear-gradient(135deg, #d98fa2, #bd6f87); border-color: transparent; color: #fff; box-shadow: 0 7px 18px rgba(173, 95, 120, .20); }
.month-tab:focus-visible, .memory-arrow:focus-visible { outline: 2px solid #9b5d70; outline-offset: 3px; }
.month-memory {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: clamp(10px, 2.4vw, 28px);
  width: min(100%, 820px);
  margin: 0 auto;
}
.memory-photo-card {
  width: min(100%, 510px);
  margin: 0 auto;
  padding: 12px 12px 18px;
  border: 1px solid rgba(204, 143, 158, .36);
  border-radius: 230px 230px 22px 22px;
  background: rgba(255, 253, 251, .88);
  box-shadow: 0 18px 45px rgba(112, 67, 78, .12), inset 0 0 0 5px rgba(255,255,255,.62);
}
.memory-photo-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 590px;
  border-radius: 220px 220px 13px 13px;
  background: linear-gradient(145deg, #f4dfe4, #f5efe9 55%, #e7e9dd);
  isolation: isolate;
}
.memory-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff9f6;
  transition: opacity .28s ease, transform .55s cubic-bezier(.2,.65,.3,1);
}
.memory-photo-frame img.is-changing { opacity: .12; transform: scale(.985); }
.memory-photo-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 26%, transparent 78%, rgba(255,241,244,.13));
}
.memory-caption { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 17px 8px 0; text-align: center; }
.memory-month-label { color: #b96e83; font: 500 10px/1.4 "Montserrat", sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.memory-caption-text { color: #805863; font: italic 400 clamp(17px, 2vw, 23px)/1.4 "Playfair Display", Georgia, serif; }
.memory-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(197, 126, 146, .35);
  border-radius: 50%;
  background: rgba(255, 253, 251, .92);
  color: #b96e83;
  font: 300 34px/1 Georgia, serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(112, 67, 78, .08);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.memory-arrow:hover { transform: scale(1.06); background: #cf8296; color: #fff; }
.timeline-hint { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 23px auto 12px; color: #9b7580; text-align: center; font: 400 11px/1.7 "Montserrat", sans-serif; letter-spacing: .025em; }
.timeline-hint span { color: #c8899b; }
.timeline-progress { width: min(100%, 270px); height: 3px; margin: 0 auto; overflow: hidden; border-radius: 999px; background: rgba(201, 142, 156, .18); }
.timeline-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e7b7c2, #b96e83); transition: width .35s ease; }
@media (max-width: 600px) {
  .photo-gallery-section { padding-left: 16px; padding-right: 16px; }
  .gallery-heading { margin-bottom: 23px; }
  .month-timeline { gap: 7px; margin-bottom: 19px; }
  .month-tab { padding: 9px 12px; font-size: 10px; }
  .month-memory { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 7px; }
  .memory-photo-card { padding: 7px 7px 13px; border-radius: 155px 155px 16px 16px; }
  .memory-photo-frame { border-radius: 148px 148px 9px 9px; max-height: none; }
  .memory-arrow { width: 33px; height: 33px; font-size: 25px; }
  .memory-caption { padding-top: 12px; gap: 5px; }
  .memory-month-label { font-size: 9px; }
  .memory-caption-text { font-size: clamp(14px, 4vw, 18px); }
  .timeline-hint { font-size: 10px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .month-tab, .memory-arrow, .memory-photo-frame img, .timeline-progress span { transition: none !important; }
}


/* Gentle motion and blue butterflies for Amariah's monthly photo timeline. */
.photo-gallery-section {
  isolation: isolate;
}
.timeline-butterfly {
  position: absolute;
  z-index: 5;
  display: block;
  width: clamp(25px, 3.2vw, 43px);
  aspect-ratio: 1;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  opacity: .86;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(94, 142, 175, .18));
  will-change: transform;
}
.timeline-butterfly-one {
  top: 29%;
  left: -52px;
  animation: timelineButterflyLeft 16s cubic-bezier(.42, 0, .58, 1) infinite;
}
.timeline-butterfly-two {
  top: 52%;
  right: -54px;
  width: clamp(28px, 3.6vw, 47px);
  animation: timelineButterflyRight 18.5s cubic-bezier(.42, 0, .58, 1) infinite;
  animation-delay: -6s;
}
.timeline-butterfly-three {
  top: 72%;
  left: -45px;
  width: clamp(22px, 2.8vw, 36px);
  opacity: .72;
  animation: timelineButterflyDrift 20s ease-in-out infinite;
  animation-delay: -10s;
}
@keyframes timelineButterflyLeft {
  0% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(.88); }
  20% { transform: translate3d(23vw, 25px, 0) rotate(8deg) scale(1); }
  46% { transform: translate3d(48vw, -19px, 0) rotate(-6deg) scale(.94); }
  72% { transform: translate3d(76vw, 22px, 0) rotate(11deg) scale(1.04); }
  100% { transform: translate3d(calc(100vw + 100px), -12px, 0) rotate(-8deg) scale(.9); }
}
@keyframes timelineButterflyRight {
  0% { transform: translate3d(0, 0, 0) rotate(12deg) scale(.92); }
  24% { transform: translate3d(-24vw, -20px, 0) rotate(-7deg) scale(1.04); }
  52% { transform: translate3d(-51vw, 24px, 0) rotate(9deg) scale(.94); }
  78% { transform: translate3d(-79vw, -15px, 0) rotate(-11deg) scale(1); }
  100% { transform: translate3d(calc(-100vw - 100px), 12px, 0) rotate(8deg) scale(.9); }
}
@keyframes timelineButterflyDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  22% { transform: translate3d(19vw, -16px, 0) rotate(10deg); }
  48% { transform: translate3d(45vw, 13px, 0) rotate(-5deg); }
  74% { transform: translate3d(73vw, -19px, 0) rotate(8deg); }
}
.memory-photo-frame img.is-entering {
  animation: monthlyPhotoEnter .78s cubic-bezier(.2, .7, .25, 1) both;
}
@keyframes monthlyPhotoEnter {
  from { opacity: .35; transform: scale(1.035); filter: blur(2px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.memory-photo-card {
  transition: box-shadow .45s ease, transform .45s ease;
}
.memory-photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 23px 52px rgba(112, 67, 78, .15), inset 0 0 0 5px rgba(255,255,255,.66);
}
@media (max-width: 600px) {
  .timeline-butterfly-one { top: 33%; width: 27px; }
  .timeline-butterfly-two { top: 55%; width: 29px; }
  .timeline-butterfly-three { top: 75%; width: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-butterfly { animation: none !important; display: none; }
  .memory-photo-frame img.is-entering { animation: none !important; }
  .memory-photo-card, .memory-photo-card:hover { transition: none !important; transform: none; }
}


/* Soft Butterfly Growth — subtle wing flutter and directional photo transitions. */
.photo-gallery-section { position: relative; }
.photo-gallery-section > .timeline-butterfly {
  z-index: 1;
  width: clamp(22px, 2.6vw, 34px);
  opacity: .84;
  background: none;
  filter: drop-shadow(0 2px 4px rgba(94, 142, 175, .14));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
.timeline-butterfly-wings {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  transform-origin: 50% 52%;
  animation: timelineWingFlutter 1.15s ease-in-out infinite;
}
.timeline-butterfly-one {
  top: 39%; left: 7.5%;
  animation-name: timelineSideFloatA;
  animation-duration: 9.5s;
}
.timeline-butterfly-two {
  top: 48%; right: 7.5%; left: auto;
  width: clamp(24px, 2.9vw, 37px);
  animation-name: timelineSideFloatB;
  animation-duration: 11s;
  animation-delay: -3s;
}
.timeline-butterfly-three {
  top: 70%; left: 17%;
  width: clamp(19px, 2.2vw, 29px);
  opacity: .68;
  animation-name: timelineSideFloatC;
  animation-duration: 12.5s;
  animation-delay: -5.5s;
}
.timeline-butterfly-four {
  top: 29%; right: 17%; left: auto;
  width: clamp(20px, 2.4vw, 31px);
  opacity: .72;
  animation-name: timelineSideFloatD;
  animation-duration: 10.5s;
  animation-delay: -2s;
}
@keyframes timelineWingFlutter {
  0%, 100% { transform: scaleX(1) rotate(-2deg); }
  25% { transform: scaleX(.78) rotate(3deg); }
  50% { transform: scaleX(.94) rotate(-1deg); }
  75% { transform: scaleX(.72) rotate(2deg); }
}
@keyframes timelineSideFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  35% { transform: translate3d(13px, -18px, 0) rotate(7deg); }
  68% { transform: translate3d(5px, 12px, 0) rotate(-3deg); }
}
@keyframes timelineSideFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  32% { transform: translate3d(-14px, 14px, 0) rotate(-7deg); }
  70% { transform: translate3d(-7px, -17px, 0) rotate(4deg); }
}
@keyframes timelineSideFloatC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  42% { transform: translate3d(17px, -12px, 0) rotate(8deg); }
  76% { transform: translate3d(8px, 10px, 0) rotate(-4deg); }
}
@keyframes timelineSideFloatD {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(6deg); }
  30% { transform: translate3d(-11px, -14px, 0) rotate(-8deg); }
  65% { transform: translate3d(-18px, 9px, 0) rotate(4deg); }
}
/* Keep the memories and controls above the butterflies so the photos stay readable. */
.photo-gallery-section > .gallery-heading,
.photo-gallery-section > .month-timeline,
.photo-gallery-section > .month-memory,
.photo-gallery-section > .timeline-hint,
.photo-gallery-section > .timeline-progress { position: relative; z-index: 2; }
.memory-photo-frame img {
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  will-change: opacity, transform, filter;
}
.memory-photo-frame img.is-changing.slide-next { opacity: .08; transform: translateX(-13px) scale(.985); filter: blur(1.5px); }
.memory-photo-frame img.is-changing.slide-prev { opacity: .08; transform: translateX(13px) scale(.985); filter: blur(1.5px); }
.memory-photo-frame img.is-entering.slide-next { animation: monthlyPhotoEnterFromRight .72s cubic-bezier(.2, .7, .25, 1) both; }
.memory-photo-frame img.is-entering.slide-prev { animation: monthlyPhotoEnterFromLeft .72s cubic-bezier(.2, .7, .25, 1) both; }
@keyframes monthlyPhotoEnterFromRight {
  from { opacity: .25; transform: translateX(13px) scale(1.018); filter: blur(1.5px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes monthlyPhotoEnterFromLeft {
  from { opacity: .25; transform: translateX(-13px) scale(1.018); filter: blur(1.5px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@media (max-width: 600px) {
  .timeline-butterfly-one { top: 38%; left: 4%; width: 22px; }
  .timeline-butterfly-two { top: 49%; right: 4%; width: 24px; }
  .timeline-butterfly-three { top: 69%; left: 9%; width: 19px; }
  .timeline-butterfly-four { top: 28%; right: 9%; width: 20px; }
  .memory-photo-frame img.is-changing.slide-next { transform: translateX(-7px) scale(.99); }
  .memory-photo-frame img.is-changing.slide-prev { transform: translateX(7px) scale(.99); }
  @keyframes monthlyPhotoEnterFromRight {
    from { opacity: .25; transform: translateX(7px) scale(1.01); filter: blur(1px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
  @keyframes monthlyPhotoEnterFromLeft {
    from { opacity: .25; transform: translateX(-7px) scale(1.01); filter: blur(1px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-butterfly-wings { animation: none !important; }
  .photo-gallery-section > .timeline-butterfly { animation: none !important; }
  .memory-photo-frame img.is-entering.slide-next,
  .memory-photo-frame img.is-entering.slide-prev { animation: none !important; }
}

/* Final correction: butterflies stay visible and drift behind the photo card. */
.photo-gallery-section {
  position: relative;
  perspective: 1200px;
  overflow: hidden;
}
.photo-gallery-section > .timeline-butterfly {
  display: block !important;
  z-index: 1;
  opacity: .88;
  width: clamp(25px, 3vw, 39px);
  pointer-events: none;
  background: none;
  filter: drop-shadow(0 2px 5px rgba(90, 145, 180, .18));
}
.timeline-butterfly-wings {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  transform-origin: 50% 52%;
  animation: amariahWingBeat 1.05s ease-in-out infinite;
}
.timeline-butterfly-one {
  top: 43%; left: 8%;
  animation: amariahFlyBehindA 12s ease-in-out -4.8s infinite;
}
.timeline-butterfly-two {
  top: 55%; right: 8%; left: auto;
  animation: amariahFlyBehindB 13.5s ease-in-out -7s infinite;
}
.timeline-butterfly-three {
  top: 68%; left: 15%; width: clamp(20px, 2.5vw, 31px) !important;
  animation: amariahFlyBehindC 15s ease-in-out -10s infinite;
}
.timeline-butterfly-four {
  top: 33%; right: 15%; left: auto; width: clamp(22px, 2.6vw, 33px) !important;
  animation: amariahFlyBehindD 14s ease-in-out -5.5s infinite;
}
@keyframes amariahWingBeat {
  0%, 100% { transform: scaleX(1) rotate(-3deg); }
  25% { transform: scaleX(.72) rotate(4deg); }
  50% { transform: scaleX(.96) rotate(-2deg); }
  75% { transform: scaleX(.76) rotate(3deg); }
}
@keyframes amariahFlyBehindA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-9deg); }
  25% { transform: translate3d(9vw, -20px, 0) rotate(7deg); }
  52% { transform: translate3d(25vw, 10px, 0) rotate(-4deg); }
  78% { transform: translate3d(13vw, 25px, 0) rotate(8deg); }
}
@keyframes amariahFlyBehindB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  27% { transform: translate3d(-12vw, 18px, 0) rotate(-7deg); }
  53% { transform: translate3d(-27vw, -16px, 0) rotate(5deg); }
  79% { transform: translate3d(-14vw, -23px, 0) rotate(-8deg); }
}
@keyframes amariahFlyBehindC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  33% { transform: translate3d(18vw, -24px, 0) rotate(9deg); }
  66% { transform: translate3d(29vw, 7px, 0) rotate(-5deg); }
}
@keyframes amariahFlyBehindD {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg); }
  31% { transform: translate3d(-17vw, 21px, 0) rotate(-8deg); }
  65% { transform: translate3d(-30vw, -12px, 0) rotate(5deg); }
}

/* Photo turns away in 3D, then the next memory rotates into view from behind. */
.memory-photo-frame {
  perspective: 1100px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.memory-photo-frame img#memoryPhoto {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: opacity .3s ease, transform .32s cubic-bezier(.55, .05, .7, .25), filter .3s ease;
  will-change: transform, opacity, filter;
}
.memory-photo-frame img#memoryPhoto.is-changing.slide-next {
  opacity: .08;
  transform: rotateY(-82deg) scale(.94);
  filter: blur(1px);
}
.memory-photo-frame img#memoryPhoto.is-changing.slide-prev {
  opacity: .08;
  transform: rotateY(82deg) scale(.94);
  filter: blur(1px);
}
.memory-photo-frame img#memoryPhoto.is-entering.slide-next {
  animation: memoryFlipInFromBackRight .68s cubic-bezier(.2, .7, .2, 1) both;
}
.memory-photo-frame img#memoryPhoto.is-entering.slide-prev {
  animation: memoryFlipInFromBackLeft .68s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes memoryFlipInFromBackRight {
  0% { opacity: .2; transform: rotateY(78deg) scale(.94); filter: blur(1.5px); }
  65% { opacity: 1; transform: rotateY(-5deg) scale(1.005); filter: blur(0); }
  100% { opacity: 1; transform: rotateY(0) scale(1); filter: blur(0); }
}
@keyframes memoryFlipInFromBackLeft {
  0% { opacity: .2; transform: rotateY(-78deg) scale(.94); filter: blur(1.5px); }
  65% { opacity: 1; transform: rotateY(5deg) scale(1.005); filter: blur(0); }
  100% { opacity: 1; transform: rotateY(0) scale(1); filter: blur(0); }
}
@media (max-width: 600px) {
  .timeline-butterfly-one { top: 39%; left: 3%; width: 25px; }
  .timeline-butterfly-two { top: 52%; right: 3%; width: 27px; }
  .timeline-butterfly-three { top: 70%; left: 8%; width: 21px !important; }
  .timeline-butterfly-four { top: 30%; right: 8%; width: 22px !important; }
  .memory-photo-frame { perspective: 850px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the butterfly artwork visible, but stop its motion. */
  .photo-gallery-section > .timeline-butterfly,
  .timeline-butterfly-wings { animation: none !important; }
  .memory-photo-frame img#memoryPhoto,
  .memory-photo-frame img#memoryPhoto.is-changing,
  .memory-photo-frame img#memoryPhoto.is-entering { transition: none !important; animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; }
}


/* Visible blue butterflies inside Amariah's monthly photo card. */
.memory-photo-frame {
  isolation: isolate;
}
.memory-card-butterfly {
  position: absolute;
  z-index: 4;
  display: block;
  width: clamp(25px, 3.2vw, 39px);
  aspect-ratio: 180 / 150;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  opacity: .96;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(54, 119, 171, .28));
  transform-origin: 50% 50%;
  will-change: transform;
}
.memory-card-butterfly-one {
  left: 8%;
  bottom: 20%;
  animation: memoryCardButterflyOne 5.8s ease-in-out infinite, amariahWingBeat 1.05s ease-in-out infinite;
}
.memory-card-butterfly-two {
  right: 7%;
  bottom: 34%;
  width: clamp(22px, 2.8vw, 33px);
  opacity: .9;
  animation: memoryCardButterflyTwo 6.6s ease-in-out -2.2s infinite, amariahWingBeat 1.15s ease-in-out infinite;
}
@keyframes memoryCardButterflyOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-9deg) scale(.95); }
  25% { transform: translate3d(12px, -9px, 0) rotate(8deg) scale(1.02); }
  55% { transform: translate3d(22px, 3px, 0) rotate(-4deg) scale(.96); }
  78% { transform: translate3d(8px, 10px, 0) rotate(7deg) scale(1); }
}
@keyframes memoryCardButterflyTwo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(.92); }
  30% { transform: translate3d(-12px, -12px, 0) rotate(-8deg) scale(1.03); }
  62% { transform: translate3d(-21px, 2px, 0) rotate(5deg) scale(.97); }
  82% { transform: translate3d(-7px, 9px, 0) rotate(-4deg) scale(1); }
}
@media (max-width: 600px) {
  .memory-card-butterfly { width: 27px; }
  .memory-card-butterfly-two { width: 23px; }
  .memory-card-butterfly-one { left: 6%; bottom: 18%; }
  .memory-card-butterfly-two { right: 5%; bottom: 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-card-butterfly { animation: none !important; }
}


/* Four visible butterflies inside the monthly photo frame, each following a distinct gentle flight path. */
.memory-card-butterfly-three {
  left: 29%;
  top: 12%;
  width: clamp(20px, 2.6vw, 31px);
  opacity: .88;
  animation: memoryCardButterflyThree 7.2s ease-in-out -1.4s infinite, amariahWingBeat 1.0s ease-in-out infinite;
}
.memory-card-butterfly-four {
  right: 25%;
  top: 52%;
  width: clamp(19px, 2.4vw, 29px);
  opacity: .84;
  animation: memoryCardButterflyFour 8.1s ease-in-out -3.1s infinite, amariahWingBeat 1.2s ease-in-out infinite;
}
@keyframes memoryCardButterflyThree {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg) scale(.92); }
  22% { transform: translate3d(17px, 12px, 0) rotate(18deg) scale(1.02); }
  48% { transform: translate3d(29px, 28px, 0) rotate(-3deg) scale(.96); }
  73% { transform: translate3d(11px, 42px, 0) rotate(-14deg) scale(1.04); }
}
@keyframes memoryCardButterflyFour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.94); }
  26% { transform: translate3d(-18px, -13px, 0) rotate(-18deg) scale(1.04); }
  51% { transform: translate3d(-31px, -3px, 0) rotate(5deg) scale(.92); }
  78% { transform: translate3d(-13px, 14px, 0) rotate(13deg) scale(1); }
}
@media (max-width: 600px) {
  .memory-card-butterfly-three { left: 27%; top: 11%; width: 22px; }
  .memory-card-butterfly-four { right: 22%; top: 51%; width: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-card-butterfly { animation: none !important; }
}

/* FIX: separate butterfly flight from wing-flutter transforms.
   Previously both animations wrote to `transform` on the same element,
   so the wing animation could override the flight path and make butterflies look stationary. */
.memory-card-butterfly {
  background: none !important;
  transform-origin: center;
  will-change: transform;
}
.memory-card-butterfly::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  transform-origin: 50% 52%;
  animation: amariahPhotoCardWingBeat 1.05s ease-in-out infinite;
  will-change: transform;
}
.memory-card-butterfly-one {
  animation: memoryCardButterflyOne 7.2s ease-in-out infinite !important;
}
.memory-card-butterfly-two {
  animation: memoryCardButterflyTwo 8.1s ease-in-out -2.2s infinite !important;
}
.memory-card-butterfly-three {
  animation: memoryCardButterflyThree 8.8s ease-in-out -1.4s infinite !important;
}
.memory-card-butterfly-four {
  animation: memoryCardButterflyFour 9.4s ease-in-out -3.1s infinite !important;
}
@keyframes amariahPhotoCardWingBeat {
  0%, 100% { transform: scaleX(1) rotate(-3deg); }
  25% { transform: scaleX(.72) rotate(5deg); }
  50% { transform: scaleX(.96) rotate(-2deg); }
  75% { transform: scaleX(.76) rotate(4deg); }
}
@keyframes memoryCardButterflyOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-9deg) scale(.95); }
  22% { transform: translate3d(18px, -13px, 0) rotate(9deg) scale(1.02); }
  48% { transform: translate3d(38px, 7px, 0) rotate(-5deg) scale(.96); }
  74% { transform: translate3d(21px, 22px, 0) rotate(8deg) scale(1); }
}
@keyframes memoryCardButterflyTwo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(.92); }
  25% { transform: translate3d(-19px, -16px, 0) rotate(-9deg) scale(1.03); }
  52% { transform: translate3d(-42px, 4px, 0) rotate(6deg) scale(.97); }
  78% { transform: translate3d(-18px, 18px, 0) rotate(-5deg) scale(1); }
}
@keyframes memoryCardButterflyThree {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg) scale(.92); }
  24% { transform: translate3d(23px, 16px, 0) rotate(16deg) scale(1.02); }
  50% { transform: translate3d(44px, 31px, 0) rotate(-4deg) scale(.96); }
  76% { transform: translate3d(18px, 43px, 0) rotate(-12deg) scale(1.04); }
}
@keyframes memoryCardButterflyFour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.94); }
  24% { transform: translate3d(-22px, -16px, 0) rotate(-16deg) scale(1.04); }
  51% { transform: translate3d(-45px, -2px, 0) rotate(5deg) scale(.92); }
  78% { transform: translate3d(-20px, 19px, 0) rotate(13deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep a slow, subtle drift rather than freezing the butterflies completely. */
  .memory-card-butterfly-one { animation-duration: 24s !important; }
  .memory-card-butterfly-two { animation-duration: 27s !important; }
  .memory-card-butterfly-three { animation-duration: 29s !important; }
  .memory-card-butterfly-four { animation-duration: 31s !important; }
  .memory-card-butterfly::before { animation: none !important; }
}


/* MASTER PROMPT POLISH — deterministic gallery butterfly motion and Month 12 treatment. */
/* The outer butterfly element owns flight; its pseudo-element owns wing motion.
   Separate animation targets prevent the two transforms from cancelling each other. */
.memory-photo-frame { position: relative; }
.memory-card-butterfly {
  position: absolute !important;
  display: block !important;
  z-index: 8 !important;
  pointer-events: none !important;
  background: none !important;
  opacity: .96;
  transform-origin: 50% 50%;
  will-change: transform;
  animation-play-state: running !important;
}
.memory-card-butterfly::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  display: block;
  background: url("assets/butterfly-blue.svg") center / contain no-repeat;
  transform-origin: 50% 52%;
  animation: amariahWingFlutterFinal 1.1s ease-in-out infinite;
  will-change: transform;
}
.memory-card-butterfly-one {
  left: 7%; bottom: 19%;
  width: clamp(26px, 3.2vw, 39px);
  animation: amariahCardFlightOne 7.4s ease-in-out -1.2s infinite !important;
}
.memory-card-butterfly-two {
  right: 7%; bottom: 33%;
  width: clamp(23px, 2.8vw, 34px);
  animation: amariahCardFlightTwo 8.3s ease-in-out -3.8s infinite !important;
}
.memory-card-butterfly-three {
  left: 28%; top: 10%;
  width: clamp(20px, 2.5vw, 30px);
  animation: amariahCardFlightThree 9.1s ease-in-out -2.1s infinite !important;
}
.memory-card-butterfly-four {
  right: 25%; top: 49%;
  width: clamp(19px, 2.3vw, 28px);
  animation: amariahCardFlightFour 10.2s ease-in-out -5.3s infinite !important;
}
@keyframes amariahWingFlutterFinal {
  0%, 100% { transform: scaleX(1) rotate(-3deg); }
  25% { transform: scaleX(.68) rotate(5deg); }
  50% { transform: scaleX(.94) rotate(-2deg); }
  75% { transform: scaleX(.73) rotate(4deg); }
}
@keyframes amariahCardFlightOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); }
  24% { transform: translate3d(22px, -17px, 0) rotate(9deg) scale(1.02); }
  51% { transform: translate3d(42px, 6px, 0) rotate(-5deg) scale(.98); }
  77% { transform: translate3d(19px, 21px, 0) rotate(7deg) scale(1); }
}
@keyframes amariahCardFlightTwo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(.94); }
  25% { transform: translate3d(-22px, -15px, 0) rotate(-9deg) scale(1.03); }
  53% { transform: translate3d(-43px, 4px, 0) rotate(5deg) scale(.97); }
  79% { transform: translate3d(-17px, 18px, 0) rotate(-5deg) scale(1); }
}
@keyframes amariahCardFlightThree {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg) scale(.92); }
  24% { transform: translate3d(17px, 17px, 0) rotate(15deg) scale(1.02); }
  50% { transform: translate3d(36px, 29px, 0) rotate(-4deg) scale(.96); }
  76% { transform: translate3d(13px, 41px, 0) rotate(-12deg) scale(1.02); }
}
@keyframes amariahCardFlightFour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.94); }
  24% { transform: translate3d(-20px, -16px, 0) rotate(-16deg) scale(1.04); }
  51% { transform: translate3d(-39px, -2px, 0) rotate(5deg) scale(.93); }
  78% { transform: translate3d(-17px, 19px, 0) rotate(13deg) scale(1); }
}

/* Month 12 is ready for the future photo: glow and a few soft petals only. */
.memory-photo-card.is-month-twelve {
  box-shadow: 0 0 0 1px rgba(213,139,154,.35),
              0 0 28px rgba(213,139,154,.22),
              0 18px 45px rgba(112,67,78,.13);
  transition: box-shadow .6s ease, transform .6s ease;
}
.memory-photo-frame.is-month-twelve::after {
  content: "✧  ·  ✿  ·  ✧";
  position: absolute;
  right: 8%;
  bottom: 8%;
  color: rgba(213,139,154,.78);
  font: 18px/1 var(--serif);
  letter-spacing: .3em;
  pointer-events: none;
  animation: monthTwelvePetals 3.8s ease-in-out infinite;
}
@keyframes monthTwelvePetals {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: .8; transform: translateY(-5px); }
}

/* Premium reveal timing and gentle card feedback. */
.hero .hero-content > .reveal { transition-duration: .9s; }
.hero .hero-kicker { transition-delay: .08s; }
.hero .small-script { transition-delay: .16s; }
.hero .hero-title { transition-delay: .24s; }
.hero .gold-rule { transition-delay: .32s; }
.hero .invite-name { transition-delay: .4s; }
.hero .hero-date { transition-delay: .48s; }
.hero .button.reveal { transition-delay: .56s; }
.event-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.event-card:hover, .event-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(213,139,154,.6);
  box-shadow: 0 18px 36px rgba(107,56,68,.12);
}
.closing-ornament { animation: closingOrnamentFloat 7s ease-in-out infinite; }
@keyframes closingOrnamentFloat {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 600px) {
  .memory-card-butterfly-one { left: 5%; bottom: 18%; width: 26px; }
  .memory-card-butterfly-two { right: 4%; bottom: 31%; width: 23px; }
  .memory-card-butterfly-three { left: 25%; top: 9%; width: 20px; }
  .memory-card-butterfly-four { right: 20%; top: 48%; width: 19px; }
  @keyframes amariahCardFlightOne {
    0%, 100% { transform: translate3d(0,0,0) rotate(-8deg) scale(.96); }
    25% { transform: translate3d(10px,-9px,0) rotate(8deg) scale(1); }
    52% { transform: translate3d(20px,4px,0) rotate(-4deg) scale(.97); }
    78% { transform: translate3d(8px,11px,0) rotate(6deg) scale(1); }
  }
  @keyframes amariahCardFlightTwo {
    0%, 100% { transform: translate3d(0,0,0) rotate(8deg) scale(.94); }
    26% { transform: translate3d(-10px,-9px,0) rotate(-8deg) scale(1.02); }
    53% { transform: translate3d(-19px,3px,0) rotate(5deg) scale(.97); }
    79% { transform: translate3d(-8px,10px,0) rotate(-5deg) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .memory-card-butterfly,
  .memory-card-butterfly::before,
  .memory-photo-frame.is-month-twelve::after,
  .closing-ornament { animation: none !important; }
  .memory-photo-card.is-month-twelve,
  .event-card { transition: none !important; }
}


/* Mobile photo timeline: responsive touch handling and smoother, quicker feedback. */
.memory-photo-frame {
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.memory-photo-frame img#memoryPhoto {
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 600px) {
  .memory-photo-frame img#memoryPhoto {
    transition: opacity .2s ease, transform .24s cubic-bezier(.22, .7, .25, 1), filter .2s ease;
  }
}


/* iOS Safari stability: avoid 3D/backface and opacity animation on mobile image swaps. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .memory-photo-frame {
    perspective: none !important;
    transform-style: flat !important;
  }
  .memory-photo-frame img#memoryPhoto,
  .memory-photo-frame img#memoryPhoto.is-changing,
  .memory-photo-frame img#memoryPhoto.is-entering,
  .memory-photo-frame img#memoryPhoto.is-changing.slide-next,
  .memory-photo-frame img#memoryPhoto.is-changing.slide-prev,
  .memory-photo-frame img#memoryPhoto.is-entering.slide-next,
  .memory-photo-frame img#memoryPhoto.is-entering.slide-prev {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    backface-visibility: visible !important;
    will-change: auto !important;
  }
}


/* Keep the last decoded photo visible while the next photo preloads on iOS Safari. */
.memory-photo-frame img#memoryPhoto {
  background: transparent !important;
}


/* Mobile Safari: double-buffer photos so a src change never exposes the frame's white background. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .memory-photo-frame {
    position: relative !important;
    overflow: hidden;
    background: #f4dfe4 !important;
  }
  .memory-photo-frame > img#memoryPhoto,
  .memory-photo-frame > img.memory-photo-buffer {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    backface-visibility: visible !important;
    will-change: opacity;
  }
  .memory-photo-frame > img#memoryPhoto {
    z-index: 1;
    opacity: 1 !important;
    transition: opacity 220ms ease;
  }
  .memory-photo-frame > img.memory-photo-buffer {
    z-index: 2;
    opacity: 0 !important;
    pointer-events: none;
    background: transparent !important;
    transition: opacity 220ms ease;
  }
  .memory-photo-frame > img.memory-photo-buffer.is-front {
    opacity: 1 !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .memory-photo-frame > img#memoryPhoto,
    .memory-photo-frame > img.memory-photo-buffer {
      transition: none !important;
    }
  }
}


/* Fix mobile layer switching: visibility is class-driven, never overridden by inline styles. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .memory-photo-frame > img#memoryPhoto,
  .memory-photo-frame > img.memory-photo-buffer {
    opacity: 0 !important;
    transition: opacity 180ms ease !important;
  }
  .memory-photo-frame > img#memoryPhoto.is-front,
  .memory-photo-frame > img.memory-photo-buffer.is-front {
    opacity: 1 !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .memory-photo-frame > img#memoryPhoto,
    .memory-photo-frame > img.memory-photo-buffer {
      transition: none !important;
    }
  }
}


/* Separate soundtrack control for the 12 Months of Amariah gallery. */
.months-music-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0 auto 22px;
  text-align: center;
}
.months-music-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid rgba(166, 116, 102, .65);
  border-radius: 999px;
  background: rgba(255, 250, 246, .92);
  color: #86594f;
  font: 600 11px/1 Montserrat, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.months-music-button.is-playing {
  background: #86594f;
  border-color: #86594f;
  color: #fffaf6;
}
.months-music-button:focus-visible {
  outline: 2px solid #86594f;
  outline-offset: 3px;
}
.months-music-icon {
  font-size: 12px;
  line-height: 1;
}
.months-music-hint {
  margin: 0;
  color: #96756d;
  font: 400 11px/1.5 Montserrat, sans-serif;
  letter-spacing: .025em;
}
@media (max-width: 600px) {
  .months-music-control { margin-bottom: 18px; }
  .months-music-button { min-height: 46px; padding: 13px 20px; }
}


/* Featured 12 Months video */
.featured-memory-video {
  width: min(100%, 760px);
  margin: 30px auto 12px;
}
.featured-video-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(190, 143, 105, .72);
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(135deg, #fffaf5, #efd7d8 48%, #d8c5dc);
  box-shadow: 0 20px 48px rgba(111, 74, 81, .17), 0 0 0 5px rgba(255,255,255,.58);
}
.featured-memory-video-player {
  display: block;
  width: 100%;
  height: min(76vh, 820px);
  max-height: none;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center center;
  background: #f7eef0;
  border-radius: 15px;
}
.featured-video-overlay {
  position: absolute;
  inset: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  color: #fffaf7;
  background: linear-gradient(180deg, rgba(56, 35, 45, .12), rgba(56, 35, 45, .52));
  border-radius: 15px;
  transition: opacity .35s ease, visibility .35s ease;
}
.featured-video-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.featured-video-kicker {
  font-size: .72rem;
  letter-spacing: .2em;
  text-shadow: 0 2px 8px rgba(40,20,25,.6);
}
.featured-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 25px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(153, 93, 112, .88);
  box-shadow: 0 8px 28px rgba(45, 22, 32, .25);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.featured-video-play:hover { transform: translateY(-2px); background: rgba(126, 73, 91, .96); }
.featured-video-play span:first-child { font-size: 1rem; }
.featured-video-caption {
  font-family: "Great Vibes", cursive;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(40,20,25,.65);
}
.featured-video-note {
  margin: 18px 0 0;
  text-align: center;
  color: #9a6c78;
  font-family: "Playfair Display", serif;
  font-style: italic;
}
.featured-video-note span { color: #c58a9a; margin-left: 5px; }
@media (max-width: 600px) {
  .featured-memory-video { margin-top: 22px; }
  .featured-video-frame { border-radius: 17px; padding: 5px; }
  .featured-memory-video-player { height: 70vh; min-height: 360px; max-height: 620px; border-radius: 11px; object-fit: cover; object-position: center center; }
  .featured-video-overlay { inset: 5px; border-radius: 11px; gap: 13px; padding: 14px; }
  .featured-video-kicker { font-size: .58rem; letter-spacing: .13em; }
  .featured-video-play { min-height: 49px; padding: 11px 20px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-video-overlay, .featured-video-play { transition: none; }
}


/* Personal photo accents for the welcome, invitation message, and closing sections */
.welcome-photo-frame, .intro-memory-photo, .closing-photo-frame { margin: 20px auto 24px; overflow: hidden; border: 1px solid rgba(196, 133, 146, .55); background: #fff9f7; box-shadow: 0 12px 30px rgba(126, 75, 87, .12); }
.welcome-photo-frame { width: clamp(112px, 22vw, 168px); aspect-ratio: 4 / 5; border-radius: 90px 90px 18px 18px; padding: 5px; }
.welcome-photo-frame img, .intro-memory-photo img, .closing-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-memory-photo { width: min(270px, 66vw); aspect-ratio: 4 / 5; border-radius: 140px 140px 20px 20px; padding: 6px; margin-top: 30px; margin-bottom: 0; }
.closing-photo-frame { width: min(235px, 60vw); aspect-ratio: 4 / 5; border-radius: 120px 120px 18px 18px; padding: 5px; margin-top: 25px; margin-bottom: 26px; }
.welcome-card .welcome-photo-frame { position: relative; z-index: 1; }
@media (max-width: 600px) { .welcome-photo-frame { width: 112px; margin: 14px auto 18px; } .intro-memory-photo { width: min(220px, 65vw); } .closing-photo-frame { width: min(200px, 58vw); } }


/* Welcome cover: floral invitation with two large side portraits and centered wording */
.welcome-overlay {
  padding: clamp(12px, 3.2vw, 34px);
  background:
    radial-gradient(ellipse at 8% 20%, rgba(244,166,180,.35), transparent 32%),
    radial-gradient(ellipse at 94% 78%, rgba(238,170,188,.32), transparent 30%),
    linear-gradient(135deg, #fffaf6 0%, #fff4f2 52%, #fffaf5 100%);
}
.welcome-overlay::before { inset: 12px; border-color: rgba(192,126,142,.28); }
.welcome-card {
  width: min(100%, 1180px);
  min-height: min(84vh, 510px);
  padding: clamp(28px, 5vw, 54px) clamp(20px, 5vw, 64px) 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: linear-gradient(110deg, rgba(255,251,248,.94), rgba(255,248,246,.82) 50%, rgba(255,251,248,.94));
  border: 1px solid rgba(194,134,148,.25);
  box-shadow: 0 22px 60px rgba(120,75,84,.10);
}
.welcome-card::before { inset: 8px; border-color: rgba(194,134,148,.18); }
.welcome-flower { margin-bottom: 8px; font-size: 29px; }
.welcome-side-photos { position: absolute; inset: 18px 12px; pointer-events: none; }
.welcome-side-photo {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(190px, 27%, 310px);
  margin: 0;
  overflow: hidden;
  border: 5px solid rgba(255,250,247,.92);
  border-radius: 48% 48% 42% 42% / 34% 34% 30% 30%;
  box-shadow: 0 12px 34px rgba(153,83,103,.18);
  background: #f9e8e7;
}
.welcome-side-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,242,242,.04), rgba(255,240,239,.12));
}
.welcome-side-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.welcome-side-photo-left { left: 0; transform: rotate(-3deg); }
.welcome-side-photo-right { right: 0; transform: rotate(3deg); }
.welcome-card > :not(.welcome-side-photos) { position: relative; z-index: 2; }
.welcome-card .eyebrow { margin-top: 2px; }
.welcome-card h1 { font-size: clamp(36px, 5.2vw, 66px); color: #a94f64; text-shadow: 0 1px 0 #fff; }
.welcome-card h1 em { color: #c05b79; }
.welcome-copy { color: #a95e6c; font-size: clamp(20px, 2.5vw, 27px); }
.welcome-date { padding: 10px 18px; border: 1px solid rgba(191,126,145,.20); border-radius: 999px; background: rgba(255,250,249,.72); }
.welcome-open { background: linear-gradient(135deg,#d47a91,#b94f70) !important; box-shadow: 0 9px 22px rgba(185,79,112,.2); }
.welcome-hint { font-size: 15px; }
@media (min-width: 760px) {
  .welcome-card { padding-left: clamp(235px, 27vw, 330px); padding-right: clamp(235px, 27vw, 330px); }
  .welcome-side-photos { inset: 18px; }
  .welcome-card h1 { white-space: normal; }
}
@media (max-width: 759px) {
  .welcome-overlay { padding: 14px; }
  .welcome-overlay::before { inset: 7px; }
  .welcome-card { min-height: 0; padding: 205px 18px 25px; width: 100%; }
  .welcome-side-photos { inset: 10px 8px auto; height: 178px; }
  .welcome-side-photo { top: 0; bottom: 0; width: 42%; border-width: 3px; border-radius: 48% 48% 38% 38% / 28% 28% 25% 25%; }
  .welcome-side-photo-left { left: 0; }
  .welcome-side-photo-right { right: 0; }
  .welcome-flower { margin-bottom: 6px; font-size: 24px; }
  .welcome-card h1 { font-size: clamp(32px, 9vw, 46px); line-height: 1.03; }
  .welcome-card .eyebrow { font-size: 8px; letter-spacing: .18em; }
  .welcome-copy { font-size: 21px; }
  .welcome-date { font-size: 8px; margin-bottom: 18px; padding: 8px 10px; }
  .welcome-open { min-height: 45px; padding-inline: 17px; font-size: 9px; }
  .welcome-hint { margin-top: 12px; font-size: 14px; }
}
@media (max-width: 380px) {
  .welcome-card { padding-top: 172px; }
  .welcome-side-photos { height: 150px; }
  .welcome-card h1 { font-size: 30px; }
}

/* October 26 update: clean invitation intro and feature Amariah's portrait */
.intro {
  background: linear-gradient(145deg, #fffaf6 0%, #fff3f0 52%, #fffdf9 100%) !important;
  background-image: none !important;
  isolation: isolate;
}
.intro::before,
.intro::after {
  content: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
.intro-memory-photo {
  width: min(340px, 76vw) !important;
  aspect-ratio: 4 / 5 !important;
  padding: 7px !important;
  margin: 34px auto 0 !important;
  border: 1px solid rgba(190, 117, 135, .7) !important;
  border-radius: 170px 170px 24px 24px !important;
  background: linear-gradient(135deg, #fff, #fce7e8) !important;
  box-shadow: 0 18px 42px rgba(130, 72, 88, .2), 0 0 0 8px rgba(255,255,255,.58) !important;
  position: relative;
  z-index: 1;
}
.intro-memory-photo img {
  border-radius: 164px 164px 18px 18px !important;
  object-position: center 38% !important;
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
}
.intro .signature { margin-top: 30px !important; }
@media (max-width: 600px) {
  .intro-memory-photo { width: min(290px, 78vw) !important; margin-top: 28px !important; }
}


/* Custom RSVP form — soft blush, ivory and rose-gold styling */
.custom-rsvp-panel {
  width: min(100%, 520px);
  margin: 28px auto 0;
  padding: clamp(24px, 5vw, 38px);
  background: linear-gradient(155deg, #fffaf7 0%, #fffdf9 55%, #fff4f4 100%);
  border: 1px solid rgba(190, 125, 143, .38);
  box-shadow: 0 18px 48px rgba(132, 80, 88, .09);
  position: relative;
}
.custom-rsvp-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(190, 125, 143, .18);
  pointer-events: none;
}
.custom-rsvp-panel > * { position: relative; }
.custom-rsvp-panel h3 {
  margin: 0 0 10px;
  color: #80505d;
  font: 400 clamp(26px, 4vw, 34px)/1.15 var(--serif);
}
.custom-rsvp-intro { margin: 0 auto 22px; max-width: 390px; color: #8f7b7c; font-size: 12px; }
.custom-rsvp-form { display: flex; flex-direction: column; text-align: left; }
.custom-rsvp-form > label,
.rsvp-event-fieldset legend {
  margin: 17px 0 7px;
  color: #8c5b68;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .09em;
}
.custom-rsvp-form > label span,
.rsvp-event-fieldset legend span { color: #bd6d84; }
.custom-rsvp-form input[type="text"],
.custom-rsvp-form input[type="number"],
.custom-rsvp-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #ead3d7;
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.82);
  color: #624b4c;
  font: 12px var(--sans);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.custom-rsvp-form textarea { resize: vertical; }
.custom-rsvp-form input:focus,
.custom-rsvp-form textarea:focus {
  border-color: #c77e92;
  box-shadow: 0 0 0 3px rgba(199,126,146,.12);
}
.rsvp-event-fieldset {
  margin: 13px 0 2px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.rsvp-event-fieldset legend { padding: 0; }
.rsvp-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 !important;
  padding: 11px 12px;
  border: 1px solid #f0dfe2;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
  color: #765f60 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}
.rsvp-choice input { accent-color: #bb6f86; width: 15px; height: 15px; flex: 0 0 auto; }
.rsvp-choice:has(input:checked) { border-color: #c77e92; background: #fff1f4; }
.custom-rsvp-submit { width: 100%; margin-top: 24px; border: 0; cursor: pointer; }
.custom-rsvp-submit:disabled { opacity: .65; cursor: wait; }
.custom-rsvp-submit.is-submitting { letter-spacing: .12em; }
#formFeedback { min-height: 40px; margin: 14px 0 0; text-align: center; color: #92777c; font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .custom-rsvp-panel { padding: 25px 18px; }
  .custom-rsvp-panel::before { inset: 5px; }
}