@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&family=Parisienne&display=swap');

:root{
  --pink:#efb0c3;
  --yellow:#f2d68f;
  --orange:#f7c7aa;
  --lilac:#c1a9df;
  --blue:#c8c9df;
  --green:#b5d0b7;
  --ink:#6c5962;
  --muted:#967982;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fffafa;color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}
section{position:relative;overflow:hidden}
.eyebrow{margin:0;color:#9b7885;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
h2{margin:0;color:#efb0c3;font:400 clamp(3.4rem,9vw,6.2rem)/.95 "Parisienne",cursive}
h3{margin:0;color:#98717e;font:400 clamp(2rem,4.8vw,3rem)/1 "Parisienne",cursive}
.ornament{margin:10px 0 40px;color:var(--pink);letter-spacing:.2em}

/* =========================
   AUTOMATIC ENVELOPE
   ========================= */
.opening{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:
    radial-gradient(circle at 15% 20%,#fff0f4,transparent 32%),
    radial-gradient(circle at 85% 80%,#fff3dc,transparent 32%),#fffafa;
  transition:opacity .8s ease,visibility .8s ease;
}
body.ready .opening{opacity:0;visibility:hidden;pointer-events:none}
.envelope{
  width:min(84vw,430px);aspect-ratio:1.4;position:relative;
  perspective:1100px;filter:drop-shadow(0 28px 42px #7058661c)
}
.env-back,.env-front{position:absolute;inset:0;border-radius:8px}
.env-back{background:#fffdfd;border:1px solid #6c596314}
.env-front{
  z-index:5;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);
  background:
    linear-gradient(135deg,transparent 49.5%,#fff0f4 50%) left/50% 100% no-repeat,
    linear-gradient(225deg,transparent 49.5%,#fff0f4 50%) right/50% 100% no-repeat
}
.env-flap{
  position:absolute;inset:0 0 auto;height:59%;z-index:7;
  background:#fff7fa;clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;transition:transform 1s cubic-bezier(.2,.8,.2,1)
}
.env-card{
  position:absolute;z-index:3;left:9%;right:9%;bottom:8%;height:76%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fffdfd;border:1px solid #6c596310
}
.env-card span{font:3.5rem "Parisienne",cursive;color:#efb0c3}
.env-card em{font:2.2rem "Parisienne",cursive;color:#c8c9df;font-style:normal}
.env-card small{margin-top:12px;letter-spacing:.22em}
.wax{
  position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);
  width:57px;height:57px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#fff;box-shadow:0 8px 18px #efa77f45
}
.opening>p{
  position:absolute;bottom:8vh;margin:0;
  font:italic 1rem "Cormorant Garamond",serif;color:#826b74
}
body.opening-active .env-flap{transform:rotateX(180deg);z-index:2}
body.opening-active .env-card{animation:cardUp 1.15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cardUp{to{transform:translateY(-45%) scale(1.02)}}

/* =========================
   HERO
   ========================= */
.hero{
  min-height:100svh;padding:75px 20px 95px;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 18% 20%,#fff0f4,transparent 32%),
    radial-gradient(circle at 82% 25%,#eef7fc,transparent 30%),#fffdfd;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 4%,rgba(248,220,205,.35),transparent 28%),
    radial-gradient(ellipse at 50% 95%,rgba(248,220,229,.22),transparent 30%);
}
.floral{position:absolute;pointer-events:none;z-index:2;object-fit:contain;mix-blend-mode:multiply}
.hero-left{width:min(42vw,360px);max-height:520px;left:-12px;top:0}
.hero-right{width:min(42vw,360px);max-height:520px;right:-12px;top:0}
.hero-card{
  position:relative;z-index:5;width:min(70vw,520px);aspect-ratio:.78
}
.card-paper{
  position:absolute;inset:0;padding:10%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#fffdfd;
  border:1px solid #6c596312;
  box-shadow:0 28px 70px #80606d18
}
.card-paper:before{content:"";position:absolute;inset:7%;border:1px solid #6c59630c}
.card-paper>*{position:relative;z-index:1}
.card-paper h1{
  margin:15px 0;color:#d18295;
  font:400 clamp(4.3rem,13vw,7.5rem)/.73 "Parisienne",cursive
}
.card-paper h1 span{display:block;color:#efb0c3}
.card-paper h1 em{display:block;color:#c8c9df;font-style:normal}
.heart{color:var(--pink);font-size:1.7rem}
.small-date{font:500 1.05rem "Cormorant Garamond",serif;letter-spacing:.25em}
.card-sprig{margin-top:12px;color:#a4a58b;font:1.2rem "Cormorant Garamond",serif}
.hero-card>.wax{top:auto;bottom:6%;}

/* =========================
   DETAILS
   ========================= */
.details{
  min-height:720px;padding:105px 20px 125px;background:#fffdfd
}
.details-content{
  position:relative;z-index:5;width:min(90%,850px);margin:auto;text-align:center
}
.details h2{margin-top:8px}
.events{
  display:grid;grid-template-columns:1fr 1px 1fr;gap:48px;
  align-items:center;max-width:760px;margin:auto
}
.events article{text-align:center}
.events strong{
  display:block;margin:8px 0;color:#65515a;
  font:600 1.9rem "Cormorant Garamond",serif
}
.events p{font:1.12rem "Cormorant Garamond",serif}
.address{line-height:1.65;color:#806c75}
.divider{height:300px;background:#6c59631f}
.round-icon{
  width:62px;height:62px;border-radius:50%;margin:auto;display:grid;place-items:center;font-size:1.45rem
}
.round-icon.blue{background:#edf6fc;color:#78a7c1}
.round-icon.pink{background:#fff0f4;color:#e7a8bb}
.details-left{width:175px;height:500px;left:-20px;top:85px;opacity:.66}
.details-right{width:175px;height:500px;right:-20px;top:85px;opacity:.66}
.paint{position:absolute;border-radius:50%;filter:blur(3px);opacity:.28}
.paint-pink{width:380px;height:230px;left:-200px;top:80px;background:#ffe6ee}
.paint-yellow{width:330px;height:210px;right:-170px;bottom:30px;background:#fff1d4}

/* =========================
   RSVP – 1:1 composition with Save-the-Date
   ========================= */
.rsvp{
  min-height:100svh;
  padding:75px 20px 95px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 18% 20%,#fff0f4,transparent 32%),
    radial-gradient(circle at 82% 25%,#eef7fc,transparent 30%),#fffdfd;
}
.rsvp-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 4%,rgba(248,220,205,.35),transparent 28%),
    radial-gradient(ellipse at 50% 95%,rgba(248,220,229,.22),transparent 30%);
}
.rsvp-left{
  position:absolute;
  z-index:2;
  width:min(42vw,360px);
  max-height:520px;
  left:-12px;
  top:0;
  object-fit:contain;
  pointer-events:none;
}
.rsvp-right{
  position:absolute;
  z-index:2;
  width:min(42vw,360px);
  max-height:520px;
  right:-12px;
  top:0;
  object-fit:contain;
  pointer-events:none;
  transform:none;
}
.rsvp-card{
  position:relative;
  z-index:5;
  width:min(70vw,520px);
  aspect-ratio:.78;
  min-height:0;
  margin-inline:auto;
  justify-self:center;
  align-self:center;
  padding:10%;
  display:grid;
  place-items:center;
  background:#fffdfd;
  border:1px solid #6c596312;
  box-shadow:0 28px 70px #80606d18;
}
.rsvp-card:before{
  content:"";
  position:absolute;
  inset:7%;
  border:1px solid #6c59630c;
  pointer-events:none;
}
.rsvp-content{
  position:relative;
  z-index:1;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.rsvp-content h2{
  color:#c8c9df;
  margin:15px 0 0;
  font:400 clamp(3.6rem,9vw,6.2rem)/.82 "Parisienne",cursive;
  white-space:normal;
  text-align:center;
  width:100%;
}
.rsvp-content h2 span{
  display:block;
}
.rsvp-content .ornament{margin:22px 0 32px}
.rsvp-copy{
  margin:0;
  font:1.15rem/1.45 "Cormorant Garamond",serif;
  color:var(--ink);
  text-align:center;
}
.rsvp-copy b{font-weight:700}
.rsvp-content .button{
  display:flex;
  width:min(315px,90%);
  align-items:center;
  justify-content:space-between;
  margin:30px auto 0;
  padding:17px 24px;
  border-radius:999px;
  background:var(--pink);
  color:white;
  text-decoration:none;
  letter-spacing:.13em;
  font-size:.78rem;
  font-weight:600;
  box-shadow:0 14px 30px #efb0c340;
}
footer{
  text-align:center;padding:28px;background:#fff5f8;color:#8a717b;letter-spacing:.2em
}
footer span{color:var(--pink);margin-left:8px}


@media(max-width:700px){
  .rsvp{
    padding-top:60px;
    padding-bottom:85px;
  }
  .rsvp-card{
    width:83vw;
    aspect-ratio:.78;
    min-height:0;
    padding:10%;
  }
  .rsvp-left{
    width:48vw;
    left:-25px;
    top:0;
  }
  .rsvp-right{
    width:48vw;
    right:-25px;
    top:0;
  }
  .rsvp-content h2{
    white-space:normal;
    font-size:3.7rem;
    line-height:.82;
    text-align:center;
  }
  .rsvp-copy{
    font-size:1.12rem;
  }
}

@media(max-width:700px){
}


/* ============================================================
   Royal vintage stationery – central text areas only
   Floral artwork and outer composition remain untouched.
   ============================================================ */

.date-card,
.rsvp-card{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,250,239,.95), transparent 42%),
    linear-gradient(135deg, #fffdf8 0%, #f9f2e5 48%, #fffdf8 100%);
  border:1px solid rgba(164,126,78,.30);
  box-shadow:
    0 24px 55px rgba(95,69,42,.10),
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 34px rgba(170,132,83,.055);
}

/* A refined double-line frame, reminiscent of old royal stationery. */
.date-card:before,
.rsvp-card:before{
  inset:5.5%;
  border:1px solid rgba(166,128,82,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72);
}

/* Small antique-gold corner ornaments. */
.date-card:after,
.rsvp-card:after{
  content:"";
  position:absolute;
  inset:7%;
  border:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(170,132,83,.55), rgba(170,132,83,0)) left top/58px 1px no-repeat,
    linear-gradient(90deg, rgba(170,132,83,.55), rgba(170,132,83,0)) left bottom/58px 1px no-repeat,
    linear-gradient(270deg, rgba(170,132,83,.55), rgba(170,132,83,0)) right top/58px 1px no-repeat,
    linear-gradient(270deg, rgba(170,132,83,.55), rgba(170,132,83,0)) right bottom/58px 1px no-repeat,
    linear-gradient(0deg, rgba(170,132,83,.55), rgba(170,132,83,0)) left top/1px 58px no-repeat,
    linear-gradient(0deg, rgba(170,132,83,.55), rgba(170,132,83,0)) right top/1px 58px no-repeat,
    linear-gradient(180deg, rgba(170,132,83,.55), rgba(170,132,83,0)) left bottom/1px 58px no-repeat,
    linear-gradient(180deg, rgba(170,132,83,.55), rgba(170,132,83,0)) right bottom/1px 58px no-repeat;
}

/* Vintage-paper warmth for the actual copy, while retaining the wedding colors. */
.date-card .eyebrow,
.rsvp-card .eyebrow{
  color:#9b7c69;
  letter-spacing:.22em;
}

.date-card .details,
.rsvp-card .rsvp-copy{
  color:#66565a;
}

/* Keep the requested pastel blue/pink headings, just soften their presence. */
.date-card h2{
  color:#c68b9d;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

.rsvp-card h2{
  color:#b9bddc;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

/* Tiny royal stationery divider treatment. */
.date-card .ornament,
.rsvp-card .ornament{
  color:#d99aae;
}

/* The button remains the same wedding pink, but gets a subtle paper-seal feel. */
.rsvp-card .button{
  box-shadow:
    0 12px 25px rgba(200,116,143,.20),
    inset 0 1px 0 rgba(255,255,255,.35);
}


.date-card > *,
.rsvp-card > *{
  position:relative;
  z-index:2;
}
.date-card:before,
.date-card:after,
.rsvp-card:before,
.rsvp-card:after{
  z-index:1;
}

/* ============================================================
   V22 – royal vintage stationery across ALL text/letter areas
   ============================================================ */

/* Opening envelope's visible letter */
.env-card{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,250,239,.96),transparent 45%),
    linear-gradient(135deg,#fffdf8 0%,#f9f2e5 48%,#fffdf8 100%);
  border:1px solid rgba(164,126,78,.30);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 34px rgba(170,132,83,.055);
}
.env-card:before{
  content:"";
  position:absolute;
  inset:7%;
  border:1px solid rgba(166,128,82,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
  pointer-events:none;
}
.env-card>*{position:relative;z-index:1}

/* Main opened Save-the-Date letter */
.card-paper{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,250,239,.96),transparent 45%),
    linear-gradient(135deg,#fffdf8 0%,#f9f2e5 48%,#fffdf8 100%);
  border:1px solid rgba(164,126,78,.30);
  box-shadow:
    0 28px 70px rgba(95,69,42,.10),
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 34px rgba(170,132,83,.055);
}
.card-paper:before{
  inset:5.5%;
  border:1px solid rgba(166,128,82,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}

/* Middle/date letter area */
.details-content{
  position:relative;
  padding:58px 72px 68px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,250,239,.96),transparent 45%),
    linear-gradient(135deg,#fffdf8 0%,#f9f2e5 48%,#fffdf8 100%);
  border:1px solid rgba(164,126,78,.30);
  box-shadow:
    0 24px 55px rgba(95,69,42,.08),
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 34px rgba(170,132,83,.055);
}
.details-content:before{
  content:"";
  position:absolute;
  inset:5.5%;
  border:1px solid rgba(166,128,82,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
  pointer-events:none;
}
.details-content>*{
  position:relative;
  z-index:2;
}

/* Consistent vintage ink treatment */
.env-card small,
.card-paper .small-date,
.details-content .eyebrow,
.rsvp-card .eyebrow{
  color:#9b7c69;
}
.details-content .events p,
.details-content .events strong{
  color:#66565a;
}
.details-content h2{
  color:#c68b9d;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

@media(max-width:700px){
  .details-content{
    width:min(92%,850px);
    padding:48px 28px 55px;
  }
  .details-content:before{
    inset:5%;
  }
}

/* Infinity symbol for the ceremony */
.infinity-icon{
  font-family:"Cormorant Garamond",serif;
  font-size:2.25rem;
  font-weight:400;
  line-height:1;
  color:#aeb6d8;
  padding-bottom:2px;
}


/* ============================================================
   V24 – Ivory silk paper with very subtle floral ornament
   ============================================================ */
:root{
  --silk-ivory:#fffdf5;
  --silk-ivory-deep:#faf6e9;
  --silk-ornament:#d8c7b7;
  --silk-shimmer:rgba(255,255,255,.72);
}

/* All actual text/letter areas: opening letter, main letter,
   middle details paper and RSVP letter. */
.env-card,
.card-paper,
.details-content,
.rsvp-card{
  background:
    radial-gradient(ellipse at 50% 15%,rgba(255,255,255,.78),transparent 44%),
    linear-gradient(112deg,
      #faf7ec 0%,
      #fffdf6 24%,
      #f9f4e7 49%,
      #fffef8 73%,
      #faf6ea 100%);
  border:1px solid rgba(180,160,139,.25);
  box-shadow:
    0 24px 55px rgba(92,72,60,.075),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(204,187,166,.10),
    inset 0 0 34px rgba(180,156,130,.045);
}

/* Silk-like fine sheen */
.env-card:after,
.card-paper:after,
.details-content:after,
.rsvp-card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:
    repeating-linear-gradient(
      103deg,
      transparent 0px,
      transparent 3px,
      rgba(255,255,255,.14) 4px,
      transparent 5px
    );
  mix-blend-mode:soft-light;
}

/* Replace the stronger old gold frame with a delicate ivory ornament frame. */
.card-paper:before,
.details-content:before,
.rsvp-card:before{
  border:1px solid rgba(182,157,133,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.74),
    0 0 0 1px rgba(255,255,255,.18);
}

/* Delicate floral corner ornaments made entirely in CSS.
   They are intentionally faint and small, like embroidery on silk paper. */
.card-paper:after,
.details-content:after,
.rsvp-card:after{
  background:
    radial-gradient(ellipse at 8% 8%, transparent 0 14px, rgba(210,190,171,.17) 15px 16px, transparent 17px),
    radial-gradient(ellipse at 11% 12%, transparent 0 9px, rgba(210,190,171,.14) 10px 11px, transparent 12px),
    radial-gradient(ellipse at 92% 8%, transparent 0 14px, rgba(210,190,171,.17) 15px 16px, transparent 17px),
    radial-gradient(ellipse at 89% 12%, transparent 0 9px, rgba(210,190,171,.14) 10px 11px, transparent 12px),
    radial-gradient(ellipse at 8% 92%, transparent 0 14px, rgba(210,190,171,.17) 15px 16px, transparent 17px),
    radial-gradient(ellipse at 11% 88%, transparent 0 9px, rgba(210,190,171,.14) 10px 11px, transparent 12px),
    radial-gradient(ellipse at 92% 92%, transparent 0 14px, rgba(210,190,171,.17) 15px 16px, transparent 17px),
    radial-gradient(ellipse at 89% 88%, transparent 0 9px, rgba(210,190,171,.14) 10px 11px, transparent 12px),
    repeating-linear-gradient(103deg, transparent 0px, transparent 3px, rgba(255,255,255,.12) 4px, transparent 5px);
}

/* Middle panel: keep its content centered and its existing floral frame untouched. */
.details-content{
  color:#65565a;
}

/* Softer neutral ink, while wedding accent colors remain pastel. */
.env-card small,
.card-paper .small-date,
.details-content .eyebrow,
.rsvp-card .eyebrow{
  color:#9b8780;
}

/* Tiny, very subtle "glitter" only around ornamental divider lines:
   a few static points, not animated and not sparkly-heavy. */
.card-paper .card-sprig,
.details-content .ornament,
.rsvp-card .ornament{
  text-shadow:
    0 0 2px rgba(255,255,255,.9),
    8px 0 0 rgba(215,195,178,.16),
    -11px 2px 0 rgba(215,195,178,.13);
}


/* ============================================================
   V25 – near-white ivory silk + clearly visible delicate florals
   ============================================================ */
.env-card,
.card-paper,
.details-content,
.rsvp-card{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.98), transparent 55%),
    linear-gradient(110deg,
      #fffefa 0%,
      #fffdf9 28%,
      #fffefa 50%,
      #fcfaf3 72%,
      #fffefa 100%);
  border-color:rgba(190,177,160,.18);
  box-shadow:
    0 24px 55px rgba(90,75,65,.055),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 28px rgba(196,180,157,.025);
}

/* Remove the old corner treatment and replace it with delicate,
   clearly readable botanical ornaments. */
.card-paper:before,
.details-content:before,
.rsvp-card:before{
  content:"";
  position:absolute;
  inset:5.5%;
  border:1px solid rgba(196,178,157,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
  pointer-events:none;
}

.card-paper:after,
.details-content:after,
.rsvp-card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background:
    /* top-left flower */
    radial-gradient(circle at 8.3% 8.1%, rgba(205,180,181,.28) 0 2px, transparent 2.7px),
    radial-gradient(circle at 9.8% 7.2%, rgba(205,180,181,.22) 0 2px, transparent 2.7px),
    radial-gradient(circle at 7.0% 7.2%, rgba(205,180,181,.22) 0 2px, transparent 2.7px),
    radial-gradient(circle at 8.3% 6.3%, rgba(205,180,181,.20) 0 2px, transparent 2.7px),
    radial-gradient(circle at 8.3% 9.4%, rgba(205,180,181,.20) 0 2px, transparent 2.7px),
    /* top-right flower */
    radial-gradient(circle at 91.7% 8.1%, rgba(181,199,193,.27) 0 2px, transparent 2.7px),
    radial-gradient(circle at 93.1% 7.2%, rgba(181,199,193,.21) 0 2px, transparent 2.7px),
    radial-gradient(circle at 90.3% 7.2%, rgba(181,199,193,.21) 0 2px, transparent 2.7px),
    radial-gradient(circle at 91.7% 6.3%, rgba(181,199,193,.19) 0 2px, transparent 2.7px),
    radial-gradient(circle at 91.7% 9.4%, rgba(181,199,193,.19) 0 2px, transparent 2.7px),
    /* bottom-left flower */
    radial-gradient(circle at 8.3% 91.9%, rgba(194,178,203,.25) 0 2px, transparent 2.7px),
    radial-gradient(circle at 9.8% 90.9%, rgba(194,178,203,.19) 0 2px, transparent 2.7px),
    radial-gradient(circle at 7.0% 90.9%, rgba(194,178,203,.19) 0 2px, transparent 2.7px),
    radial-gradient(circle at 8.3% 90.0%, rgba(194,178,203,.17) 0 2px, transparent 2.7px),
    /* bottom-right flower */
    radial-gradient(circle at 91.7% 91.9%, rgba(221,184,180,.25) 0 2px, transparent 2.7px),
    radial-gradient(circle at 93.1% 90.9%, rgba(221,184,180,.19) 0 2px, transparent 2.7px),
    radial-gradient(circle at 90.3% 90.9%, rgba(221,184,180,.19) 0 2px, transparent 2.7px),
    radial-gradient(circle at 91.7% 90.0%, rgba(221,184,180,.17) 0 2px, transparent 2.7px),
    /* delicate stems / tendrils */
    linear-gradient(28deg, transparent 0 49%, rgba(179,160,145,.14) 49.5% 50%, transparent 50.5%) 5% 5%/65px 65px no-repeat,
    linear-gradient(-28deg, transparent 0 49%, rgba(179,160,145,.14) 49.5% 50%, transparent 50.5%) 95% 5%/65px 65px no-repeat,
    linear-gradient(-28deg, transparent 0 49%, rgba(179,160,145,.14) 49.5% 50%, transparent 50.5%) 5% 95%/65px 65px no-repeat,
    linear-gradient(28deg, transparent 0 49%, rgba(179,160,145,.14) 49.5% 50%, transparent 50.5%) 95% 95%/65px 65px no-repeat;
}

/* tiny, restrained shimmer points around the ornaments */
.card-paper .card-sprig,
.details-content .ornament,
.rsvp-card .ornament{
  position:relative;
}
.card-paper .card-sprig:after,
.details-content .ornament:after,
.rsvp-card .ornament:after{
  content:"✦  ·  ✦";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
  margin-top:3px;
  font-size:.42rem;
  letter-spacing:.65em;
  color:rgba(205,184,160,.42);
  white-space:nowrap;
}

/* ============================================================
   V26 – clearly visible hand-drawn floral corner ornaments
   on the ivory silk stationery.
   ============================================================ */
.paper-ornament{
  position:absolute;
  width:76px;
  height:76px;
  z-index:3;
  pointer-events:none;
  opacity:.72;
}
.paper-ornament.top-left{top:6%;left:6%}
.paper-ornament.top-right{top:6%;right:6%;transform:scaleX(-1)}
.paper-ornament.bottom-left{bottom:6%;left:6%;transform:scaleY(-1)}
.paper-ornament.bottom-right{bottom:6%;right:6%;transform:scale(-1,-1)}

.paper-ornament .stem{
  position:absolute;
  left:12px;
  top:15px;
  width:2px;
  height:58px;
  background:linear-gradient(to bottom,rgba(159,151,139,.5),rgba(159,151,139,.08));
  transform:rotate(42deg);
  transform-origin:top;
  border-radius:10px;
}
.paper-ornament .leaf{
  position:absolute;
  width:20px;
  height:10px;
  border:1.5px solid rgba(164,151,142,.42);
  border-radius:100% 0 100% 0;
  transform:rotate(-25deg);
}
.paper-ornament .leaf.l1{left:22px;top:39px}
.paper-ornament .leaf.l2{left:11px;top:50px;transform:rotate(28deg)}

.paper-ornament .petal{
  position:absolute;
  width:15px;
  height:23px;
  border:1.5px solid rgba(211,166,181,.48);
  border-radius:50% 50% 45% 45%;
  transform-origin:bottom center;
}
.paper-ornament .p1{left:8px;top:4px;transform:rotate(-32deg)}
.paper-ornament .p2{left:20px;top:0;transform:rotate(5deg);border-color:rgba(188,173,208,.5)}
.paper-ornament .p3{left:31px;top:7px;transform:rotate(36deg);border-color:rgba(172,198,190,.5)}

.paper-ornament:after{
  content:"✦";
  position:absolute;
  left:35px;
  top:27px;
  font-size:10px;
  color:rgba(214,190,167,.62);
  text-shadow:0 0 4px rgba(255,255,255,.95);
}

/* Slightly more visible at the corners, but still refined. */
.env-card .paper-ornament,
.card-paper .paper-ornament,
.details-content .paper-ornament,
.rsvp-card .paper-ornament{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.8));
}

@media(max-width:700px){
  .paper-ornament{
    width:62px;
    height:62px;
  }
  .paper-ornament .stem{height:48px}
  .paper-ornament .petal{width:12px;height:19px}
}

/* ============================================================
   V27 – embossed royal floral frame, inspired by the reference
   ============================================================ */

/* Hide the previous tiny CSS flower ornaments; the new frame is the
   intentional ornament system for the stationery. */
.env-card .paper-ornament,
.card-paper .paper-ornament,
.details-content .paper-ornament,
.rsvp-card .paper-ornament{
  display:none;
}

.royal-frame{
  position:absolute;
  inset:2.5%;
  width:95%;
  height:95%;
  object-fit:fill;
  z-index:1;
  pointer-events:none;
  opacity:.58;
  mix-blend-mode:multiply;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 0 2px rgba(190,171,155,.18));
}

/* Keep all actual text comfortably above the ornament. */
.env-card > :not(.royal-frame),
.card-paper > :not(.royal-frame),
.details-content > :not(.royal-frame),
.rsvp-card > :not(.royal-frame){
  position:relative;
  z-index:4;
}

/* Slightly softer on the small opening card. */
.env-card .royal-frame{
  opacity:.48;
}

/* The reference look is embossed ivory, so ornaments should never read as
   metallic gold. */
.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 0 2px rgba(191,173,158,.16));
}

@media(max-width:700px){
  .royal-frame{
    inset:3%;
    width:94%;
    height:94%;
    opacity:.50;
  }
  .env-card .royal-frame{opacity:.42}
}

/* V28 – exact uploaded reference used only as the letter ornament/frame */
.royal-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  z-index:1;
  pointer-events:none;
  opacity:.78;
  mix-blend-mode:multiply;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 1px 2px rgba(177,159,143,.10));
}
.env-card .royal-frame{opacity:.62}

.env-card > :not(.royal-frame),
.card-paper > :not(.royal-frame),
.details-content > :not(.royal-frame),
.rsvp-card > :not(.royal-frame){
  position:relative;
  z-index:4;
}

/* The reference frame is the only ornament system. */
.card-paper .paper-ornament,
.details-content .paper-ornament,
.rsvp-card .paper-ornament,
.env-card .paper-ornament{
  display:none !important;
}

/* V29 – ornament relief only: no paper rectangle, no frame lines */
.royal-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  z-index:1;
  pointer-events:none;
  opacity:.95;
  mix-blend-mode:multiply;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.96))
    drop-shadow(0 1px 2px rgba(165,148,132,.08));
}
.env-card .royal-frame{opacity:.72}

/* The ornament image contains transparency; the paper itself is supplied
   by the existing CSS, so there is no rectangular reference image behind it. */
.card-paper,
.details-content,
.rsvp-card,
.env-card{
  overflow:hidden;
}

/* V30 – royal ornament artwork fills the entire sheet */
.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame,
.env-card .royal-frame{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  object-position:center !important;
  transform:none !important;
  margin:0 !important;
  opacity:.95;
}

/* Give the full-sheet ornament room to breathe while keeping text above it. */
.card-paper,
.details-content,
.rsvp-card,
.env-card{
  position:relative;
  overflow:hidden;
}

.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame,
.env-card .royal-frame{
  z-index:1 !important;
}

.card-paper > :not(.royal-frame),
.details-content > :not(.royal-frame),
.rsvp-card > :not(.royal-frame),
.env-card > :not(.royal-frame){
  z-index:5 !important;
}

/* ============================================================
   V31 – full-sheet embossed ornament treatment + visible RSVP button
   ============================================================ */

/* The paper itself remains HTML/CSS ivory silk. */
.card-paper,
.details-content,
.rsvp-card,
.env-card{
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.98), transparent 58%),
    linear-gradient(110deg,#fffefa 0%,#fffdf9 28%,#fffefa 52%,#fcfaf3 76%,#fffefa 100%);
  position:relative;
  overflow:hidden;
}

/* Use the extracted ornament as a transparent decoration only.
   It fills the complete sheet, while the center of the source is transparent. */
.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame,
.env-card .royal-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center !important;
  z-index:1 !important;
  opacity:.90 !important;
  pointer-events:none;
}

/* Keep every piece of actual website content above the decoration. */
.card-paper > :not(.royal-frame),
.details-content > :not(.royal-frame),
.rsvp-card > :not(.royal-frame),
.env-card > :not(.royal-frame){
  position:relative;
  z-index:10 !important;
}

/* RSVP area: enough bottom breathing room so the button cannot be pushed
   outside the paper. */
.rsvp-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:clamp(520px, 72vh, 820px);
  padding:clamp(72px,8vw,110px) clamp(28px,6vw,80px) clamp(88px,9vw,120px) !important;
  box-sizing:border-box;
}

/* Keep the RSVP title centered and prevent oversized script from overflowing. */
.rsvp-card h2{
  max-width:90%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  line-height:.98;
}

/* Make the explanatory copy compact and centered. */
.rsvp-card .rsvp-copy{
  max-width:520px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Restore a clearly visible, centered button within the paper. */
.rsvp-card .button,
.rsvp-card a.button,
.rsvp-card .cta,
.rsvp-card a{
  position:relative !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:min(330px,78%);
  min-height:56px;
  margin:28px auto 0 !important;
  border-radius:999px;
  box-sizing:border-box;
  text-decoration:none;
}

/* Avoid any decorative pseudo-elements covering the CTA. */
.rsvp-card::before,
.rsvp-card::after{
  pointer-events:none;
}

/* Mobile */
@media(max-width:700px){
  .rsvp-card{
    min-height:560px;
    padding:76px 22px 100px !important;
  }
  .rsvp-card h2{
    max-width:96%;
  }
  .rsvp-card .button,
  .rsvp-card a.button,
  .rsvp-card .cta,
  .rsvp-card a{
    width:min(310px,88%);
  }
}

/* ============================================================
   V32 – pattern fills the complete paper, not a central rectangle
   ============================================================ */

/* Remove all previous inset frames from the paper. */
.card-paper:before,
.details-content:before,
.rsvp-card:before{
  border:0 !important;
  box-shadow:none !important;
}

/* The extracted ornament layer covers the entire actual sheet. */
.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame,
.env-card .royal-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center !important;
  z-index:1 !important;
  opacity:.78 !important;
  mix-blend-mode:multiply !important;
}

/* No old CSS floral dots/lines over the new royal pattern. */
.card-paper:after,
.details-content:after,
.rsvp-card:after{
  background:none !important;
  opacity:0 !important;
}

/* Content is always on top. */
.card-paper > :not(.royal-frame),
.details-content > :not(.royal-frame),
.rsvp-card > :not(.royal-frame),
.env-card > :not(.royal-frame){
  position:relative !important;
  z-index:10 !important;
}

/* RSVP: explicitly restore the full card height and CTA position. */
.rsvp{
  min-height:0;
}
.rsvp-card{
  min-height:clamp(620px, 78vh, 860px) !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:90px 8% 115px !important;
}
.rsvp-content{
  position:relative !important;
  z-index:20 !important;
  width:100% !important;
  max-width:650px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.rsvp-content .button{
  position:relative !important;
  z-index:30 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:min(315px,90%) !important;
  min-height:56px !important;
  margin:30px auto 0 !important;
  box-sizing:border-box !important;
}
@media(max-width:700px){
  .rsvp-card{
    min-height:620px !important;
    padding:78px 7% 105px !important;
  }
  .rsvp-content h2{
    font-size:clamp(3.2rem,15vw,5rem) !important;
  }
}

/* V33 – feinere, zartere Ornamentlinien */
.card-paper .royal-frame,
.details-content .royal-frame,
.rsvp-card .royal-frame,
.env-card .royal-frame{
  opacity:.78 !important;
  filter:
    drop-shadow(0 .5px 0 rgba(255,255,255,.96))
    drop-shadow(0 1px 2px rgba(165,148,132,.05));
}

/* ============================================================
   V34 – very subtle champagne sparkle on the ivory silk paper
   ============================================================ */

.silk-sparkles{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

/* Each sparkle is a tiny four-point glint. Champagne/ivory only:
   no rainbow, no colored LEDs, no glitter overload. */
.silk-sparkles .spark{
  --x:50%;
  --y:50%;
  --delay:0s;
  --size:8px;
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  transform:translate(-50%,-50%) rotate(45deg);
  opacity:0;
  animation:silkTwinkle 4.8s ease-in-out infinite;
  animation-delay:var(--delay);
  filter:drop-shadow(0 0 3px rgba(232,207,173,.35));
}
.silk-sparkles .spark::before,
.silk-sparkles .spark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(236,218,191,.88);
}
.silk-sparkles .spark::before{
  width:100%;
  height:2px;
}
.silk-sparkles .spark::after{
  width:2px;
  height:100%;
}

.s1 {--x:18%;--y:17%;--size:7px;--delay:-.4s}
.s2 {--x:78%;--y:14%;--size:6px;--delay:-2.2s}
.s3 {--x:11%;--y:43%;--size:5px;--delay:-3.4s}
.s4 {--x:88%;--y:39%;--size:8px;--delay:-1.1s}
.s5 {--x:23%;--y:71%;--size:6px;--delay:-4s}
.s6 {--x:76%;--y:68%;--size:7px;--delay:-2.8s}
.s7 {--x:37%;--y:10%;--size:4px;--delay:-1.7s}
.s8 {--x:63%;--y:23%;--size:5px;--delay:-3.1s}
.s9 {--x:31%;--y:86%;--size:5px;--delay:-.9s}
.s10{--x:69%;--y:88%;--size:6px;--delay:-3.8s}
.s11{--x:48%;--y:79%;--size:4px;--delay:-2.5s}
.s12{--x:93%;--y:61%;--size:4px;--delay:-4.4s}

@keyframes silkTwinkle{
  0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.55)}
  35%{opacity:.18;transform:translate(-50%,-50%) rotate(45deg) scale(.8)}
  50%{opacity:.78;transform:translate(-50%,-50%) rotate(45deg) scale(1.12)}
  65%{opacity:.20;transform:translate(-50%,-50%) rotate(45deg) scale(.8)}
}

@media (prefers-reduced-motion: reduce){
  .silk-sparkles .spark{animation:none;opacity:.22}
}

/* Keep all actual card content above the sparkle layer. */
.env-card > :not(.royal-frame):not(.silk-sparkles),
.card-paper > :not(.royal-frame):not(.silk-sparkles),
.details-content > :not(.royal-frame):not(.silk-sparkles),
.rsvp-card > :not(.royal-frame):not(.silk-sparkles){
  z-index:10 !important;
}

/* ============================================================
   V35 – opening envelope: same royal stationery treatment
   ============================================================ */

/* The opening envelope itself stays perfectly centered. */
.opening{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center;
}

/* Center the actual letter mathematically instead of relying on
   left/right offsets. */
.opening .envelope{
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* The opening letter gets the same very-light ivory silk paper and
   the same full-sheet royal ornament treatment as the rest of the site. */
.opening .env-card{
  left:50% !important;
  right:auto !important;
  bottom:7% !important;
  width:82% !important;
  height:80% !important;
  transform:translateX(-50%) !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  background:
    radial-gradient(ellipse at 50% 14%,rgba(255,255,255,.86),transparent 48%),
    linear-gradient(112deg,
      #faf7ec 0%,
      #fffdf6 25%,
      #faf5e9 50%,
      #fffef8 76%,
      #faf6ea 100%) !important;

  border:1px solid rgba(180,160,139,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(204,187,166,.08),
    inset 0 0 30px rgba(180,156,130,.04) !important;
  overflow:hidden !important;
}

/* The exact same ornament asset is used here, filling the letter —
   not the envelope/background. */
.opening .env-card .royal-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center !important;
  z-index:1 !important;
  opacity:.62 !important;
  pointer-events:none !important;
}

/* Hide the old tiny placeholder ornaments in the opening letter. */
.opening .env-card .paper-ornament{
  display:none !important;
}

/* Put the actual opening-letter typography above the ornament. */
.opening .env-card > span,
.opening .env-card > em,
.opening .env-card > small{
  position:relative !important;
  z-index:12 !important;
  text-align:center !important;
}

.opening .env-card span{
  font-size:clamp(2.9rem,7vw,4.2rem) !important;
  line-height:.9 !important;
  margin:0 !important;
}
.opening .env-card em{
  font-size:clamp(2rem,5vw,2.8rem) !important;
  line-height:.95 !important;
  margin-top:5px !important;
}
.opening .env-card small{
  margin-top:18px !important;
  color:#8e7672 !important;
  font-family:"Cormorant Garamond",serif !important;
  font-size:.88rem !important;
  letter-spacing:.24em !important;
}

/* Keep the wax seal visually in front of the envelope but out of the
   letter's text. */
.opening .envelope > .wax{
  z-index:20 !important;
}

/* The envelope flap remains above the letter before opening and folds away
   normally after the existing 3-second trigger. */
.opening .env-flap{
  z-index:15 !important;
}
body.opening-active .env-flap{
  z-index:2 !important;
}

/* Slightly more breathing room on narrow phones. */
@media(max-width:700px){
  .opening .envelope{
    width:min(88vw,430px) !important;
  }
  .opening .env-card{
    width:82% !important;
    height:79% !important;
  }
}


/* ============================================================
   V38 – delicate, anatomically styled CSS/SVG butterfly
   ============================================================ */

.butterfly-save-e-letter,
.butterfly-rings-target,
.butterfly-question-target{
  position:relative;
}

.wedding-butterfly{
  position:fixed;
  left:0;
  top:0;
  width:58px;
  height:48px;
  z-index:10000;
  pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:left,top,transform;
  contain:layout paint;
  filter:
    drop-shadow(0 2px 2px rgba(113,86,104,.15))
    drop-shadow(0 0 5px rgba(246,211,226,.20));
}

.butterfly-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* Fine, translucent wing edges — no “inflated popo” silhouette. */
.bf-wing-shape{
  stroke:rgba(154,119,139,.42);
  stroke-width:1.1;
  vector-effect:non-scaling-stroke;
}

.bf-wing-group{
  transform-box:fill-box;
  transform-origin:center;
}

.bf-wing-group-left{
  transform-origin:56px 39px;
}
.bf-wing-group-right{
  transform-origin:64px 39px;
}

.bf-wing-group .bf-upper-wing{
  transform-origin:center;
}

.bf-vein{
  fill:none;
  stroke:rgba(171,140,158,.28);
  stroke-width:1.05;
  stroke-linecap:round;
}

.bf-shine{
  opacity:.48;
}

.bf-antennae path{
  fill:none;
  stroke:#826c77;
  stroke-width:1;
  stroke-linecap:round;
}
.bf-antennae circle{
  fill:#a98796;
}

.bf-insect-body ellipse:first-child{
  fill:url(#bfBodyGradient);
}
.bf-insect-body{
  fill:#745a67;
  stroke:rgba(92,69,80,.5);
  stroke-width:.7;
}
.bf-insect-body path{
  fill:none;
  stroke:#d4b9c4;
  stroke-width:.7;
  stroke-linecap:round;
}

/* Fast, clean wing beats while airborne. Each wing has a slightly different
   phase so it reads as an insect, not a symmetric logo. */
.wedding-butterfly.is-flying .bf-wing-group-left{
  animation:bfFlightLeft 105ms ease-in-out infinite alternate;
}
.wedding-butterfly.is-flying .bf-wing-group-right{
  animation:bfFlightRight 105ms ease-in-out infinite alternate-reverse;
}

/* Very small, slow breathing motion when perched. */
.wedding-butterfly.is-resting .bf-wing-group-left{
  animation:bfRestLeft 3.2s ease-in-out infinite;
}
.wedding-butterfly.is-resting .bf-wing-group-right{
  animation:bfRestRight 3.2s ease-in-out infinite;
}

@keyframes bfFlightLeft{
  from{transform:rotate(-3deg) scaleY(1)}
  to{transform:rotate(-16deg) scaleY(.82)}
}
@keyframes bfFlightRight{
  from{transform:rotate(3deg) scaleY(1)}
  to{transform:rotate(16deg) scaleY(.82)}
}
@keyframes bfRestLeft{
  0%,100%{transform:rotate(0deg)}
  46%{transform:rotate(-7deg)}
  54%{transform:rotate(-2deg)}
}
@keyframes bfRestRight{
  0%,100%{transform:rotate(0deg)}
  46%{transform:rotate(7deg)}
  54%{transform:rotate(2deg)}
}

@media(max-width:700px){
  .wedding-butterfly{
    width:46px;
    height:39px;
  }
}
@media(prefers-reduced-motion:reduce){
  .wedding-butterfly.is-flying .bf-wing-group-left,
  .wedding-butterfly.is-flying .bf-wing-group-right,
  .wedding-butterfly.is-resting .bf-wing-group-left,
  .wedding-butterfly.is-resting .bf-wing-group-right{
    animation:none !important;
  }
}

/* ============================================================
   V39 – repair Save-the-Date + refined butterfly landings
   ============================================================ */
.card-paper h1 .save-word{
  display:block !important;
  color:#efb0c3;
  white-space:nowrap;
}
.card-paper h1 .butterfly-save-e-letter{
  display:inline !important;
  color:inherit;
  position:relative;
  white-space:normal;
}
.card-paper h1 em{
  display:block !important;
  white-space:nowrap;
}

/* Make the butterfly's target letters/icons easy to hit precisely. */
.butterfly-save-e-letter,
.butterfly-rings-target,
.butterfly-question-target{
  display:inline-block;
}

/* A more organic resting motion: tiny wing lift and a nearly imperceptible
   body bob, so it looks perched instead of frozen. */
.wedding-butterfly.is-resting{
  animation:bfPerched 3.6s ease-in-out infinite;
}
@keyframes bfPerched{
  0%,100%{margin-top:0}
  50%{margin-top:-1.5px}
}

@media(max-width:700px){
  .card-paper h1 .save-word,
  .card-paper h1 em{
    white-space:nowrap;
  }
}

/* ============================================================
   V40 – slower butterfly, believable landing + restored wedding rings
   ============================================================ */

/* Clean, unmistakable two interlocking wedding rings. */
.butterfly-rings-target{
  position:relative !important;
  display:inline-block !important;
  width:58px !important;
  height:40px !important;
  margin:0 auto 10px !important;
  flex:0 0 auto;
  vertical-align:middle;
  z-index:12;
}
.butterfly-rings-target .ring{
  position:absolute;
  top:6px;
  width:27px;
  height:27px;
  border:2.4px solid #e7b6c5;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}
.butterfly-rings-target .ring-left{
  left:8px;
  transform:rotate(-13deg);
}
.butterfly-rings-target .ring-right{
  right:8px;
  border-color:#aebedc;
  transform:rotate(13deg);
}
.butterfly-rings-target .ring-left::after,
.butterfly-rings-target .ring-right::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
}
.butterfly-rings-target::after{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.3) 42%,transparent 68%);
  filter:drop-shadow(0 0 3px rgba(235,202,215,.5));
}

/* Slower, more graceful travel. */
.wedding-butterfly.bf-fly,
.wedding-butterfly.is-flying{
  transition:none !important;
}

/* Resting butterfly: slightly angled, perched body, with real wing beats. */
.wedding-butterfly.is-resting{
  transform-origin:50% 72%;
  animation:butterflyPerched 3.1s ease-in-out infinite;
}
.wedding-butterfly.is-resting .bf-wing-left{
  animation:perchedWingLeft 1.35s ease-in-out infinite;
  transform-origin:92% 88%;
}
.wedding-butterfly.is-resting .bf-wing-right{
  animation:perchedWingRight 1.42s ease-in-out infinite;
  transform-origin:8% 88%;
}
@keyframes butterflyPerched{
  0%,100%{margin-top:0; transform:rotate(-7deg)}
  48%{margin-top:-1px; transform:rotate(-9deg)}
  72%{margin-top:.5px; transform:rotate(-6deg)}
}
@keyframes perchedWingLeft{
  0%,100%{transform:rotate(-25deg) rotateY(0deg)}
  22%{transform:rotate(-34deg) rotateY(34deg)}
  42%{transform:rotate(-17deg) rotateY(8deg)}
  64%{transform:rotate(-30deg) rotateY(46deg)}
  82%{transform:rotate(-20deg) rotateY(15deg)}
}
@keyframes perchedWingRight{
  0%,100%{transform:rotate(25deg) rotateY(0deg)}
  22%{transform:rotate(34deg) rotateY(34deg)}
  42%{transform:rotate(17deg) rotateY(8deg)}
  64%{transform:rotate(30deg) rotateY(46deg)}
  82%{transform:rotate(20deg) rotateY(15deg)}
}

/* Slightly slower arrival. JS remains responsible for the exact duration,
   so this only affects the visual wing beat while traveling. */
.wedding-butterfly.is-flying .bf-wing-left{
  animation:travelWingLeft 250ms ease-in-out infinite alternate;
}
.wedding-butterfly.is-flying .bf-wing-right{
  animation:travelWingRight 270ms ease-in-out infinite alternate-reverse;
}
@keyframes travelWingLeft{
  from{transform:rotate(-24deg) rotateY(0deg)}
  to{transform:rotate(-18deg) rotateY(58deg)}
}
@keyframes travelWingRight{
  from{transform:rotate(24deg) rotateY(0deg)}
  to{transform:rotate(18deg) rotateY(58deg)}
}

@media(max-width:700px){
  .butterfly-rings-target{
    width:52px !important;
    height:36px !important;
  }
  .butterfly-rings-target .ring{
    width:24px;
    height:24px;
    border-width:2.1px;
  }
}

/* V41: exactly one wedding-ring target */
.butterfly-rings-target{
  position:relative !important;
  display:inline-block !important;
  width:58px !important;
  height:40px !important;
  margin:0 auto 10px !important;
  vertical-align:middle;
  z-index:12;
}
.butterfly-rings-target .ring{
  position:absolute;
  top:5px;
  width:28px;
  height:28px;
  border:2.4px solid #e8b3c3;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}
.butterfly-rings-target .ring-left{
  left:6px;
  transform:rotate(-10deg);
}
.butterfly-rings-target .ring-right{
  right:6px;
  border-color:#b8c4df;
  transform:rotate(10deg);
}
.butterfly-rings-target .ring-left::after,
.butterfly-rings-target .ring-right::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
}

/* V41: slower, graceful travel */
.wedding-butterfly.is-flying .bf-wing-left{
  animation:travelWingLeftV41 330ms ease-in-out infinite alternate;
}
.wedding-butterfly.is-flying .bf-wing-right{
  animation:travelWingRightV41 350ms ease-in-out infinite alternate-reverse;
}
@keyframes travelWingLeftV41{
  from{transform:rotate(-23deg) rotateY(4deg)}
  to{transform:rotate(-13deg) rotateY(48deg)}
}
@keyframes travelWingRightV41{
  from{transform:rotate(23deg) rotateY(4deg)}
  to{transform:rotate(13deg) rotateY(48deg)}
}

/* A real perched look: angled body + soft independent wing beats. */
.wedding-butterfly.is-resting{
  transform-origin:50% 72%;
  animation:perchedBodyV41 3.8s ease-in-out infinite;
}
.wedding-butterfly.is-resting .bf-wing-left{
  animation:perchedLeftV41 1.55s ease-in-out infinite;
  transform-origin:92% 88%;
}
.wedding-butterfly.is-resting .bf-wing-right{
  animation:perchedRightV41 1.67s ease-in-out infinite;
  transform-origin:8% 88%;
}
@keyframes perchedBodyV41{
  0%,100%{margin-top:0;transform:rotate(-8deg)}
  50%{margin-top:-1.2px;transform:rotate(-10deg)}
}
@keyframes perchedLeftV41{
  0%,100%{transform:rotate(-24deg) rotateY(0deg)}
  30%{transform:rotate(-35deg) rotateY(36deg)}
  55%{transform:rotate(-19deg) rotateY(9deg)}
  78%{transform:rotate(-31deg) rotateY(42deg)}
}
@keyframes perchedRightV41{
  0%,100%{transform:rotate(24deg) rotateY(0deg)}
  30%{transform:rotate(35deg) rotateY(36deg)}
  55%{transform:rotate(19deg) rotateY(9deg)}
  78%{transform:rotate(31deg) rotateY(42deg)}
}

/* ============================================================
   V42 – ONE wedding icon, containing exactly TWO rings
   ============================================================ */

/* The target itself is the original circular icon. */
.round-icon.butterfly-rings-target{
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  margin:auto !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
  box-sizing:border-box !important;
  z-index:12;
  overflow:visible !important;
}

/* Remove all previous pseudo-ring constructions from the target. */
.round-icon.butterfly-rings-target::before,
.round-icon.butterfly-rings-target::after{
  content:none !important;
  display:none !important;
}

/* Exactly two interlocking rings. */
.wedding-rings{
  position:relative;
  display:block;
  width:39px;
  height:29px;
}
.wedding-ring{
  position:absolute;
  top:2px;
  width:24px;
  height:24px;
  border:2px solid currentColor;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}
.wedding-ring-left{
  left:2px;
  color:#e8aebe;
  transform:rotate(-9deg);
}
.wedding-ring-right{
  right:2px;
  color:#aebfdc;
  transform:rotate(9deg);
}
.wedding-ring-left::after,
.wedding-ring-right::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
}

/* Make the butterfly land on the center of this single icon. */
.round-icon.butterfly-rings-target{
  scroll-margin-top:25vh;
}

@media(max-width:700px){
  .round-icon.butterfly-rings-target{
    width:58px !important;
    height:58px !important;
  }
  .wedding-rings{
    transform:scale(.92);
  }
}

/* ============================================================
   V44 – RSVP question mark inline
   ============================================================ */
.rsvp-question{
  display:inline !important;
  position:relative;
  white-space:nowrap;
  color:inherit;
  margin:0 !important;
  padding:0 !important;
  vertical-align:baseline;
}

/* The butterfly lands on the inline ? without changing the heading layout. */
.rsvp-question{
  scroll-margin-top:30vh;
}


/* V46 – repaired final RSVP target + butterfly selector collision fix */
.rsvp-content h2 .rsvp-dabei{
  display:inline-block;
  white-space:nowrap;
}
.rsvp-question{
  display:inline-block !important;
  position:relative;
  margin-left:.08em;
  white-space:nowrap;
  vertical-align:baseline;
  color:inherit;
}

/* Only the real butterfly gets the fixed/flying layer. The E in Save is
   merely a target and must never receive butterfly positioning. */
.wedding-butterfly{
  position:fixed !important;
  left:0;
  top:0;
  z-index:9999;
  pointer-events:none;
  will-change:left,top,transform;
}

/* V47 – precise landing: no trailing correction */
#butterfly{
  transform-origin:50% 50%;
}
#butterfly.is-flying{
  animation-timing-function:cubic-bezier(.20,.78,.18,1);
}

/* ============================================================
   V48 – TRUE landing lock
   ============================================================ */

/*
 * The outer butterfly is the coordinate carrier. It must NOT receive
 * any post-landing margin/transform animation, otherwise the visual
 * landing point moves after the JS has already arrived.
 *
 * The wings continue to animate independently below.
 */
.wedding-butterfly.is-resting{
  animation:none !important;
  margin-top:0 !important;
  transform:translate(-50%,-50%) rotate(-8deg) !important;
}

/* Keep the perched wing movement – only the wings move, never the body. */
.wedding-butterfly.is-resting .bf-wing-group-left,
.wedding-butterfly.is-resting .bf-wing-group-right{
  animation-duration:1.45s !important;
  animation-timing-function:ease-in-out !important;
}

/* Prevent old V40/V41 body keyframes from influencing the landing carrier. */
@keyframes bfPerchedV48{
  from{transform:none;margin-top:0}
  to{transform:none;margin-top:0}
}

/* ============================================================
   V49 – slow, graceful flight + scroll-locked path
   ============================================================ */

/* The JS owns the outer position. No CSS animation may move the body. */
.wedding-butterfly,
.wedding-butterfly.is-flying,
.wedding-butterfly.is-resting{
  transition:none !important;
  animation:none !important;
}

/* The butterfly rests at the exact JS landing coordinate. */
.wedding-butterfly.is-resting{
  margin-top:0 !important;
  transform-origin:50% 72%;
}

/* Airborne wings: slower and organic, not frantic. */
.wedding-butterfly.is-flying .bf-wing-group-left{
  animation:bfFlightLeftV49 205ms ease-in-out infinite alternate !important;
}
.wedding-butterfly.is-flying .bf-wing-group-right{
  animation:bfFlightRightV49 220ms ease-in-out infinite alternate-reverse !important;
}

@keyframes bfFlightLeftV49{
  from{transform:rotate(-2deg) scaleY(1)}
  to{transform:rotate(-12deg) scaleY(.86)}
}
@keyframes bfFlightRightV49{
  from{transform:rotate(2deg) scaleY(1)}
  to{transform:rotate(12deg) scaleY(.86)}
}

/* Perched: visible, slower wing strokes so it looks like it actually
   settled on the landing point. */
.wedding-butterfly.is-resting .bf-wing-group-left{
  animation:bfRestLeftV49 1.55s ease-in-out infinite !important;
}
.wedding-butterfly.is-resting .bf-wing-group-right{
  animation:bfRestRightV49 1.68s ease-in-out infinite !important;
}
@keyframes bfRestLeftV49{
  0%,100%{transform:rotate(-1deg)}
  34%{transform:rotate(-9deg)}
  49%{transform:rotate(-3deg)}
  67%{transform:rotate(-7deg)}
}
@keyframes bfRestRightV49{
  0%,100%{transform:rotate(1deg)}
  34%{transform:rotate(9deg)}
  49%{transform:rotate(3deg)}
  67%{transform:rotate(7deg)}
}

/* Prevent old #butterfly rules from ever taking over the real element. */
#wedding-butterfly,
#butterfly{
  animation:none !important;
  transition:none !important;
}

/* ============================================================
   V50 – very visible but elegant wedding glitter ✨
   ============================================================ */

.wedding-glitter{
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
}

.wedding-glitter span{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(247,225,185,.98);
  box-shadow:
    0 0 4px rgba(255,244,215,.98),
    0 0 10px rgba(238,204,154,.75),
    0 0 18px rgba(235,202,153,.35);
  opacity:0;
  transform:scale(.25);
  animation:visibleChampagneSparkle 2.8s ease-in-out infinite;
}

/* Cross-shaped glints on selected particles. */
.wedding-glitter span:nth-child(4n)::before,
.wedding-glitter span:nth-child(4n)::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,247,226,.96);
  transform:translate(-50%,-50%);
  border-radius:999px;
}
.wedding-glitter span:nth-child(4n)::before{width:15px;height:1px}
.wedding-glitter span:nth-child(4n)::after{width:1px;height:15px}

/* Deliberately distributed through the complete page rather than a tight
   cluster around one section. */
.wedding-glitter span:nth-child(1){left:8%;top:12%;animation-delay:-.3s}
.wedding-glitter span:nth-child(2){left:19%;top:18%;animation-delay:-1.8s}
.wedding-glitter span:nth-child(3){left:34%;top:9%;animation-delay:-2.4s}
.wedding-glitter span:nth-child(4){left:51%;top:16%;animation-delay:-.9s}
.wedding-glitter span:nth-child(5){left:68%;top:10%;animation-delay:-2.9s}
.wedding-glitter span:nth-child(6){left:84%;top:20%;animation-delay:-1.3s}
.wedding-glitter span:nth-child(7){left:12%;top:31%;animation-delay:-2.1s}
.wedding-glitter span:nth-child(8){left:28%;top:38%;animation-delay:-.5s}
.wedding-glitter span:nth-child(9){left:45%;top:30%;animation-delay:-1.7s}
.wedding-glitter span:nth-child(10){left:63%;top:35%;animation-delay:-2.7s}
.wedding-glitter span:nth-child(11){left:79%;top:30%;animation-delay:-.8s}
.wedding-glitter span:nth-child(12){left:92%;top:42%;animation-delay:-2.2s}
.wedding-glitter span:nth-child(13){left:7%;top:52%;animation-delay:-1.1s}
.wedding-glitter span:nth-child(14){left:22%;top:59%;animation-delay:-2.8s}
.wedding-glitter span:nth-child(15){left:39%;top:51%;animation-delay:-.7s}
.wedding-glitter span:nth-child(16){left:57%;top:62%;animation-delay:-1.9s}
.wedding-glitter span:nth-child(17){left:74%;top:54%;animation-delay:-3.1s}
.wedding-glitter span:nth-child(18){left:89%;top:67%;animation-delay:-1.4s}
.wedding-glitter span:nth-child(19){left:14%;top:76%;animation-delay:-2.6s}
.wedding-glitter span:nth-child(20){left:31%;top:84%;animation-delay:-.4s}
.wedding-glitter span:nth-child(21){left:48%;top:73%;animation-delay:-1.6s}
.wedding-glitter span:nth-child(22){left:65%;top:82%;animation-delay:-2.4s}
.wedding-glitter span:nth-child(23){left:82%;top:76%;animation-delay:-.9s}
.wedding-glitter span:nth-child(24){left:94%;top:88%;animation-delay:-2.9s}
.wedding-glitter span:nth-child(25){left:5%;top:92%;animation-delay:-1.8s}
.wedding-glitter span:nth-child(26){left:26%;top:94%;animation-delay:-3.2s}
.wedding-glitter span:nth-child(27){left:55%;top:92%;animation-delay:-1.0s}
.wedding-glitter span:nth-child(28){left:72%;top:96%;animation-delay:-2.0s}
.wedding-glitter span:nth-child(29){left:87%;top:93%;animation-delay:-.6s}
.wedding-glitter span:nth-child(30){left:41%;top:44%;animation-delay:-2.5s}
.wedding-glitter span:nth-child(31){left:60%;top:46%;animation-delay:-1.2s}
.wedding-glitter span:nth-child(32){left:17%;top:47%;animation-delay:-3.0s}
.wedding-glitter span:nth-child(33){left:71%;top:24%;animation-delay:-1.5s}
.wedding-glitter span:nth-child(34){left:36%;top:68%;animation-delay:-2.7s}
.wedding-glitter span:nth-child(35){left:53%;top:86%;animation-delay:-.8s}
.wedding-glitter span:nth-child(36){left:98%;top:14%;animation-delay:-2.3s}

@keyframes visibleChampagneSparkle{
  0%,100%{
    opacity:0;
    transform:scale(.22);
  }
  18%{
    opacity:.38;
    transform:scale(.62);
  }
  38%{
    opacity:.95;
    transform:scale(1.12);
  }
  48%{
    opacity:.72;
    transform:scale(.9);
  }
  62%{
    opacity:.96;
    transform:scale(1);
  }
  78%{
    opacity:.20;
    transform:scale(.45);
  }
}

/* The sparkles stay behind all real page content, but remain visible on the
   ivory paper and around the floral design. */
.card-paper,
.details-content,
.rsvp-card,
.env-card{
  position:relative;
}

/* ============================================================
   V51 – THE BUTTERFLY ITSELF GLITTERS ✨🦋
   ============================================================ */

.butterfly-sparkles{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  pointer-events:none;
  z-index:20;
  overflow:visible;
}

/* Every sparkle follows the butterfly because it lives INSIDE it. */
.butterfly-sparkles i{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fff8e8 28%,#f2d39a 58%,rgba(242,211,154,0) 76%);
  box-shadow:
    0 0 4px #fff,
    0 0 9px rgba(255,235,185,.95),
    0 0 16px rgba(235,198,132,.82);
  opacity:0;
  transform:translate(-50%,-50%) scale(.15);
}

/* A few are four-point star glints rather than dots. */
.butterfly-sparkles i:nth-child(3n)::before,
.butterfly-sparkles i:nth-child(5n)::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:17px;
  height:1.2px;
  border-radius:99px;
  background:rgba(255,249,231,.95);
  box-shadow:0 0 6px rgba(255,231,180,.9);
  transform:translate(-50%,-50%);
}
.butterfly-sparkles i:nth-child(3n)::after,
.butterfly-sparkles i:nth-child(5n)::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.2px;
  height:17px;
  border-radius:99px;
  background:rgba(255,249,231,.95);
  box-shadow:0 0 6px rgba(255,231,180,.9);
  transform:translate(-50%,-50%);
}

/* Positions wrap around the wings, giving the impression that glitter
   is coming from the butterfly rather than sitting on the body. */
.butterfly-sparkles i:nth-child(1){transform:translate(-25px,-14px)}
.butterfly-sparkles i:nth-child(2){transform:translate(25px,-11px)}
.butterfly-sparkles i:nth-child(3){transform:translate(-34px,2px)}
.butterfly-sparkles i:nth-child(4){transform:translate(34px,4px)}
.butterfly-sparkles i:nth-child(5){transform:translate(-18px,19px)}
.butterfly-sparkles i:nth-child(6){transform:translate(18px,20px)}
.butterfly-sparkles i:nth-child(7){transform:translate(-42px,-3px)}
.butterfly-sparkles i:nth-child(8){transform:translate(42px,1px)}
.butterfly-sparkles i:nth-child(9){transform:translate(-10px,-25px)}
.butterfly-sparkles i:nth-child(10){transform:translate(12px,-24px)}
.butterfly-sparkles i:nth-child(11){transform:translate(-28px,13px)}
.butterfly-sparkles i:nth-child(12){transform:translate(29px,14px)}

/* Different timing means the butterfly shimmers continuously instead of
   flashing all at once. */
.butterfly-sparkles i:nth-child(1){animation:bfGlitter 1.25s .00s infinite}
.butterfly-sparkles i:nth-child(2){animation:bfGlitter 1.55s .30s infinite}
.butterfly-sparkles i:nth-child(3){animation:bfGlitter 1.10s .58s infinite}
.butterfly-sparkles i:nth-child(4){animation:bfGlitter 1.70s .16s infinite}
.butterfly-sparkles i:nth-child(5){animation:bfGlitter 1.30s .76s infinite}
.butterfly-sparkles i:nth-child(6){animation:bfGlitter 1.85s .42s infinite}
.butterfly-sparkles i:nth-child(7){animation:bfGlitter 1.45s .92s infinite}
.butterfly-sparkles i:nth-child(8){animation:bfGlitter 1.18s .22s infinite}
.butterfly-sparkles i:nth-child(9){animation:bfGlitter 1.62s .67s infinite}
.butterfly-sparkles i:nth-child(10){animation:bfGlitter 1.32s .38s infinite}
.butterfly-sparkles i:nth-child(11){animation:bfGlitter 1.90s .84s infinite}
.butterfly-sparkles i:nth-child(12){animation:bfGlitter 1.08s .51s infinite}

@keyframes bfGlitter{
  0%,100%{
    opacity:0;
    transform:translate(var(--sx,0),var(--sy,0)) scale(.15) rotate(0deg);
  }
  22%{
    opacity:.35;
    transform:translate(var(--sx,0),var(--sy,0)) scale(.55) rotate(25deg);
  }
  42%{
    opacity:1;
    transform:translate(var(--sx,0),var(--sy,0)) scale(1.15) rotate(45deg);
  }
  58%{
    opacity:.65;
    transform:translate(var(--sx,0),var(--sy,0)) scale(.78) rotate(70deg);
  }
  78%{
    opacity:.12;
    transform:translate(var(--sx,0),var(--sy,0)) scale(.35) rotate(100deg);
  }
}

/* Give each sparkle its fixed local coordinate while the keyframe handles
   only the shimmer scale/rotation. */
.butterfly-sparkles i:nth-child(1){--sx:-25px;--sy:-14px}
.butterfly-sparkles i:nth-child(2){--sx:25px;--sy:-11px}
.butterfly-sparkles i:nth-child(3){--sx:-34px;--sy:2px}
.butterfly-sparkles i:nth-child(4){--sx:34px;--sy:4px}
.butterfly-sparkles i:nth-child(5){--sx:-18px;--sy:19px}
.butterfly-sparkles i:nth-child(6){--sx:18px;--sy:20px}
.butterfly-sparkles i:nth-child(7){--sx:-42px;--sy:-3px}
.butterfly-sparkles i:nth-child(8){--sx:42px;--sy:1px}
.butterfly-sparkles i:nth-child(9){--sx:-10px;--sy:-25px}
.butterfly-sparkles i:nth-child(10){--sx:12px;--sy:-24px}
.butterfly-sparkles i:nth-child(11){--sx:-28px;--sy:13px}
.butterfly-sparkles i:nth-child(12){--sx:29px;--sy:14px}

/* When the butterfly is sitting, make the shimmer a little more pronounced
   so it visibly sparkles on the landing point. */
.wedding-butterfly.is-resting .butterfly-sparkles i{
  animation-duration:1.05s;
}

/* Respect reduced-motion without removing the visual glitter completely. */
@media(prefers-reduced-motion:reduce){
  .butterfly-sparkles i{
    animation:none !important;
    opacity:.65;
    transform:translate(var(--sx,0),var(--sy,0)) scale(.75);
  }
}

/* ============================================================
   V52 – Desktop composition at 100% zoom
   Keep the artwork away from the browser edges and give the
   central letters a proper, balanced presence.
   Mobile rules remain unchanged below 1100px.
   ============================================================ */

@media (min-width:1101px){

  /* Use a centered visual stage instead of positioning the flowers
     against the physical browser edge. At 1750px this gives roughly
     100–120px breathing room on each side. */
  .hero-left,
  .details-left,
  .rsvp-left{
    left:max(28px, calc((100vw - 1560px)/2 + 8px));
  }

  .hero-right,
  .details-right,
  .rsvp-right{
    right:max(28px, calc((100vw - 1560px)/2 + 8px));
  }

  /* Slightly larger floral framing so the page reads as one composition,
     rather than a small card floating between two edge images. */
  .hero-left,
  .hero-right,
  .rsvp-left,
  .rsvp-right{
    width:min(25vw,390px);
    max-height:560px;
  }

  /* Give the main letters enough visual weight at standard 100% zoom. */
  .hero-card,
  .rsvp-card{
    width:min(36vw,600px);
  }

  /* Keep the center cards optically centered even with the floral artwork. */
  .hero,
  .rsvp{
    padding-left:0;
    padding-right:0;
  }

  /* The middle letter should belong to the same centered composition. */
  .details{
    padding-left:0;
    padding-right:0;
  }

  .details-content{
    width:min(78vw,980px);
    padding:64px 86px 76px;
  }

  .details-left,
  .details-right{
    width:min(15vw,230px);
    height:540px;
    top:92px;
    opacity:.72;
  }

  /* Keep the two event columns balanced inside the wider paper. */
  .events{
    max-width:820px;
    gap:58px;
  }

  /* RSVP uses exactly the same visual scale and centering as the hero. */
  .rsvp{
    min-height:100svh;
  }

  /* Don't let the butterfly/other fixed elements affect layout. */
  .wedding-butterfly,
  .butterfly-sparkles{
    pointer-events:none;
  }
}

/* Very wide monitors: cap the visual card so it never looks tiny. */
@media (min-width:1600px){
  .hero-card,
  .rsvp-card{
    width:600px;
  }

  .details-content{
    width:980px;
  }
}

/* ============================================================
   V52 – standard 100% desktop: a little more breathing room
   around the center card, without changing the artwork itself.
   ============================================================ */
@media (min-width:1101px){
  .hero-card{
    transform:translateY(2px);
  }

  .rsvp-card{
    transform:translateY(0);
  }

  .card-paper,
  .details-content,
  .rsvp-card{
    /* Keep the ivory paper visually solid against the very pale
       page background. */
    isolation:isolate;
  }
}

/* ============================================================
   V53 – opening envelope: closed first, flap folds UP and away
   The opening animation is kept at the existing 3-second trigger.
   ============================================================ */

/* The envelope itself needs a stable 3D stage so the flap can fold
   upward like a real paper envelope rather than simply disappearing. */
.envelope{
  overflow:visible;
  transform-style:preserve-3d;
}

.env-back{
  z-index:1;
  background:#fffdfd;
}

.env-card{
  z-index:4;
  transform:translateY(0) scale(.985);
  transition:none;
  box-shadow:0 8px 22px rgba(112,88,102,.06);
}

.env-front{
  z-index:6;
  backface-visibility:hidden;
}

.env-flap{
  z-index:8;
  height:60%;
  transform-origin:50% 0%;
  transform:rotateX(0deg);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:
    transform 1.25s cubic-bezier(.18,.78,.18,1),
    filter 1.25s ease;
  filter:drop-shadow(0 2px 2px rgba(112,88,102,.04));
}

/* Closed state: the flap is the visual lid and sits in front of the
   invitation card, exactly like a sealed physical envelope. */
.opening:not(.is-opening) .env-card{
  z-index:4;
}

/* Opening state: the flap folds over its top edge and travels above
   the envelope. The card then rises out from behind the front fold. */
body.opening-active .env-flap{
  z-index:10;
  transform:rotateX(-180deg);
  filter:drop-shadow(0 10px 10px rgba(112,88,102,.08));
}

body.opening-active .env-card{
  z-index:7;
  animation:cardUp 1.15s cubic-bezier(.2,.8,.2,1) forwards;
}

/* The lower envelope front remains in place while the card emerges. */
body.opening-active .env-front{
  z-index:6;
}

/* Seal gently disappears as soon as the flap begins its movement. */
.opening .wax{
  transition:opacity .35s ease, transform .45s ease;
}
body.opening-active .opening .wax{
  opacity:0;
  transform:translate(-50%,-50%) scale(.88);
}

/* More natural card emergence: first clears the envelope mouth,
   then settles into the final position. */
@keyframes cardUp{
  0%{
    transform:translateY(0) scale(.985);
  }
  70%{
    transform:translateY(-39%) scale(1.005);
  }
  100%{
    transform:translateY(-45%) scale(1.02);
  }
}

/* On shorter desktop windows keep the entire opening composition visible. */
@media (min-width:1101px) and (max-height:760px){
  .envelope{width:min(72vw,430px);}
}

/* Mobile: preserve the same physical-envelope behavior without
   letting the flap exceed the viewport. */
@media (max-width:1100px){
  .env-flap{height:58%;}
}

/* ============================================================
   V54 – REAL ENVELOPE FLAP / OPEN-UP FIX
   The top flap must hinge at the TOP edge and fold upward,
   completely above the envelope. This override intentionally
   wins over older z-index rules marked !important.
   ============================================================ */

/* Stable 3D stacking context */
.opening .envelope{
  perspective:1200px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
}

/* Closed: a clean, triangular top flap sitting over the invitation. */
.opening .env-flap{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  width:100% !important;
  height:60% !important;
  z-index:30 !important;
  clip-path:polygon(0 0,100% 0,50% 100%) !important;
  -webkit-clip-path:polygon(0 0,100% 0,50% 100%) !important;
  transform-origin:50% 0% !important;
  transform:rotateX(0deg) !important;
  transform-style:preserve-3d !important;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  background:
    linear-gradient(180deg,#fffafd 0%,#fff6f9 72%,#fff0f4 100%) !important;
  border:0 !important;
  box-shadow:
    0 5px 10px rgba(105,78,88,.055),
    inset 0 -1px 0 rgba(215,183,190,.16) !important;
  transition:
    transform 1.35s cubic-bezier(.18,.78,.18,1),
    filter 1.35s ease !important;
}

/* The card stays behind the flap while closed. */
.opening .env-card{
  z-index:12 !important;
}

/* The lower/front envelope fold stays in front of the lower part
   of the card but NEVER covers the opening flap. */
.opening .env-front{
  z-index:20 !important;
}

/* When opening, the flap rotates around its top edge and goes
   physically upward, above the envelope. */
body.opening-active .opening .env-flap{
  z-index:40 !important;
  transform:rotateX(180deg) !important;
  filter:
    drop-shadow(0 -10px 14px rgba(112,88,102,.10))
    drop-shadow(0 2px 3px rgba(255,255,255,.85)) !important;
}

/* Once the flap is open, the invitation is allowed to rise cleanly
   from the envelope mouth. */
body.opening-active .opening .env-card{
  z-index:25 !important;
}

/* The front fold remains below the emerging invitation. */
body.opening-active .opening .env-front{
  z-index:22 !important;
}

/* Seal is on top only while closed. */
.opening .wax{
  z-index:50 !important;
}

/* Make the open flap visually read as a folded piece of paper
   instead of a disappearing triangle. */
body.opening-active .opening .env-flap::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path:inherit;
  -webkit-clip-path:inherit;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(250,240,244,.72) 70%,
      rgba(231,211,218,.34) 100%);
  opacity:.55;
  pointer-events:none;
}

/* Desktop: keep the upward-folded flap inside the visible opening
   area even on shorter screens. */
@media (min-width:701px) and (max-height:760px){
  .opening .env-flap{
    height:57% !important;
  }
}

/* Mobile keeps the same physical hinge, just slightly shorter. */
@media (max-width:700px){
  .opening .env-flap{
    height:58% !important;
  }
}

/* ============================================================
   V55 – CLOSED ENVELOPE MUST HIDE THE INVITATION COMPLETELY
   The card was peeking out above the closed top flap because the
   rectangular letter sat in front of the opaque envelope back.
   ============================================================ */
.opening .envelope .env-back{
  z-index:1 !important;
}

/* CLOSED: the invitation is physically behind the envelope back.
   Nothing from the letter can peek above the flap. */
.opening:not(.opening-active) .envelope .env-card{
  z-index:0 !important;
  visibility:hidden !important;
  opacity:0 !important;
  transform:translateX(-50%) translateY(0) scale(.985) !important;
  animation:none !important;
}

/* OPENING: bring the invitation forward only after the flap starts moving.
   A tiny delay makes the physical sequence read as:
   closed envelope → flap opens → letter emerges. */
body.opening-active .opening .env-card{
  z-index:25 !important;
  visibility:visible !important;
  opacity:1 !important;
  animation:cardUpV55 1.25s cubic-bezier(.2,.82,.2,1) .18s forwards !important;
}

@keyframes cardUpV55{
  0%{
    transform:translateX(-50%) translateY(18%) scale(.985);
    opacity:0;
  }
  28%{
    opacity:1;
  }
  72%{
    transform:translateX(-50%) translateY(-38%) scale(1.005);
    opacity:1;
  }
  100%{
    transform:translateX(-50%) translateY(-45%) scale(1.02);
    opacity:1;
  }
}

/* While the flap is still travelling, keep it above the emerging card. */
body.opening-active .opening .env-flap{
  z-index:40 !important;
}

/* Once open, the card remains above the lower envelope front. */
body.opening-active .opening .env-front{
  z-index:22 !important;
}