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

:root{
  --paper:#f8f2ec;
  --paper2:#fffaf6;
  --ink:#382f2d;
  --rose:#b98276;
  --rose2:#d9ada3;
  --sage:#6f7767;
  --wine:#74534d;
  --gold:#c7a36b;
  --shadow:0 24px 60px rgba(66,43,38,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.hero{height:100svh;min-height:660px;position:relative;display:grid;place-items:center;overflow:hidden;background:#332723}
.hero-media{position:absolute;inset:0}
.hero-media img{object-position:center 36%;transform:scale(1.04);animation:heroZoom 16s ease-in-out infinite alternate}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,11,10,.2),rgba(20,11,10,.18) 35%,rgba(20,11,10,.68))}
.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 23%,rgba(255,227,210,.28),transparent 35%)}
.hero-copy{position:relative;z-index:3;text-align:center;color:white;padding:24px;top:14%}
.eyebrow,.kicker{font-size:.72rem;letter-spacing:.27em;font-weight:600}
.hero h1{margin:.45rem 0 1rem;font-family:"Italiana",serif;font-weight:400;font-size:clamp(4.2rem,12vw,9rem);line-height:.82;text-shadow:0 8px 28px rgba(0,0,0,.22)}
.hero h1 span{display:block}
.hero h1 em{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:.65em;display:block;margin:.18em 0}
.hero-date{font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,2.3vw,1.6rem);letter-spacing:.08em}
.scroll-cue{position:absolute;left:50%;bottom:-13vh;transform:translateX(-50%);width:34px;height:52px;border:1px solid rgba(255,255,255,.7);border-radius:30px}
.scroll-cue span{position:absolute;left:50%;top:10px;width:4px;height:8px;background:#fff;border-radius:99px;transform:translateX(-50%);animation:scrollDot 1.7s infinite}
.floating-flower{position:absolute;color:rgba(255,245,239,.74);z-index:2;font-size:2rem;animation:drift 7s ease-in-out infinite}
.f1{top:12%;left:8%}.f2{right:8%;top:21%;animation-delay:-2s}.f3{right:18%;bottom:16%;animation-delay:-4s}
.section{position:relative}
.invitation-section{padding:120px 20px;overflow:hidden;background:linear-gradient(180deg,#f8f2ec,#fffaf6)}
.paper-card{max-width:760px;margin:auto;text-align:center;background:rgba(255,255,255,.76);backdrop-filter:blur(14px);padding:74px 9%;border:1px solid rgba(135,95,82,.15);box-shadow:var(--shadow);border-radius:220px 220px 24px 24px;position:relative}
.paper-card h2,.section-head h2,.story-copy h2,.countdown-wrap h2,.venue-card h2,.dress-inner h2,.rsvp-intro h2,.closing-copy h2{
  font-family:"Cormorant Garamond",serif;font-weight:500;line-height:.96;margin:.3em 0;font-size:clamp(2.8rem,6vw,5.2rem)
}
.monogram{font-family:"Italiana",serif;font-size:2.5rem;color:var(--wine);letter-spacing:.1em}.monogram span{font-size:.58em;color:var(--rose);padding:0 .2em}
.kicker{color:var(--rose);margin:1.1rem 0}
.lead{font-family:"Cormorant Garamond",serif;font-size:1.45rem;line-height:1.55;max-width:560px;margin:1rem auto;color:#5f504c}
.ornament{font-size:2rem;color:var(--gold);margin:1.6rem 0 .6rem}
.venue-line{letter-spacing:.08em;font-size:.85rem}
.section-decor{position:absolute;width:260px;height:460px;opacity:.22;filter:blur(.1px);background:
 radial-gradient(circle at 50% 18%,var(--rose2) 0 12px,transparent 13px),
 radial-gradient(circle at 62% 32%,#caa59b 0 9px,transparent 10px),
 radial-gradient(circle at 40% 48%,#d9b6aa 0 11px,transparent 12px),
 linear-gradient(77deg,transparent 49%,var(--sage) 50% 51%,transparent 52%)}
.botanical-left{left:-90px;top:8%;transform:rotate(-16deg)}
.botanical-right{right:-90px;bottom:0;transform:scaleX(-1) rotate(-12deg)}
.photo-story{padding:100px 6vw;background:#efe3db}
.split-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center}
.photo-stack{position:relative;min-height:700px}
.photo-frame{position:absolute;overflow:hidden;box-shadow:var(--shadow);border:10px solid rgba(255,255,255,.66)}
.photo-frame.tall{width:72%;height:82%;left:0;top:0;border-radius:220px 220px 18px 18px}
.photo-frame.small{width:48%;height:45%;right:0;bottom:0;border-radius:18px}
.photo-frame img{transition:transform .8s ease}.photo-frame:hover img{transform:scale(1.035)}
.story-copy p:not(.kicker){font-family:"Cormorant Garamond",serif;font-size:1.35rem;line-height:1.7;color:#5e514d}
.signature{font-family:"Italiana",serif;font-size:2rem;margin-top:2rem;color:var(--wine)}
.countdown-section{min-height:620px;display:grid;place-items:center;color:#fff;overflow:hidden;background:#4e3b36}
.countdown-bg{position:absolute;inset:0;background:
 linear-gradient(rgba(62,42,37,.62),rgba(62,42,37,.74)),
 url("./assets/images/photo-3.jpeg") center 38%/cover no-repeat;transform:scale(1.03)}
.countdown-wrap{position:relative;z-index:2;text-align:center;padding:80px 20px;width:min(980px,94vw)}
.kicker.light{color:#f7ded6}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.countdown>div{padding:26px 10px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:18px}
.countdown strong{display:block;font-family:"Italiana",serif;font-size:clamp(2.4rem,6vw,4.7rem);font-weight:400}
.countdown span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.timeline-section{padding:110px 20px;background:#fffaf6}
.section-head{text-align:center;max-width:760px;margin:0 auto 65px}
.timeline{max-width:850px;margin:auto;position:relative}
.timeline:before{content:"";position:absolute;left:36px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--rose),rgba(185,130,118,.1))}
.timeline-item{display:grid;grid-template-columns:74px 1fr;gap:26px;margin:0 0 44px}
.timeline-icon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#f4e2dc;color:var(--wine);font-size:1.5rem;position:relative;z-index:1}
.timeline time{font-size:.72rem;letter-spacing:.18em;color:var(--rose);font-weight:600}
.timeline h3{font-family:"Cormorant Garamond",serif;font-size:2rem;margin:.3rem 0}
.timeline p{color:#6c5b56;margin:0}
.cinematic-break{height:72svh;min-height:560px;overflow:hidden}.cinematic-break img{position:absolute;inset:0}.cinematic-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,20,18,.5),rgba(32,20,18,.04),rgba(32,20,18,.44))}
.cinematic-copy{position:absolute;left:8vw;bottom:12%;color:#fff;max-width:650px}
.cinematic-copy p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(2.8rem,6vw,5.7rem);line-height:.98;margin:0}
.venue-section{padding:110px 6vw;background:#e9ddd5;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center}
.venue-card{max-width:540px;justify-self:end;padding:20px}.venue-card p{line-height:1.7;color:#665652}.venue-note{margin:1.6rem 0 2rem}
.venue-photo{height:650px;border-radius:300px 300px 24px 24px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.map-badge{position:absolute;right:24px;bottom:24px;background:rgba(255,250,246,.9);backdrop-filter:blur(8px);padding:14px 18px;border-radius:99px;display:flex;gap:8px;align-items:center;font-size:1.2rem;color:var(--wine)}
.map-badge span{font-size:.67rem;letter-spacing:.15em;font-weight:600}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--wine);color:#fff;border:none;border-radius:99px;padding:15px 26px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:.25s}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(116,83,77,.25)}
.dress-section{padding:100px 20px;background:#fffaf6;text-align:center}
.dress-inner{max-width:760px;margin:auto}.dress-inner>p:not(.kicker){font-family:"Cormorant Garamond",serif;font-size:1.35rem}
.swatches{display:flex;justify-content:center;gap:12px;margin-top:30px}.swatches span{width:48px;height:48px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px #fff,0 7px 20px rgba(0,0,0,.1)}
.gallery-section{padding:110px 4vw;background:#f1e6df}
.gallery{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:260px;gap:14px}
.gallery figure{margin:0;overflow:hidden;border-radius:18px;box-shadow:0 12px 32px rgba(52,36,32,.12)}
.gallery img{transition:transform 1s ease}.gallery figure:hover img{transform:scale(1.06)}
.g1{grid-row:span 2}.g4{grid-column:span 2}.g5{grid-column:span 1}.g6{grid-column:span 1}
.rsvp-section{padding:110px 20px;background:linear-gradient(135deg,#6e514b,#3f302d);color:#fff}
.rsvp-shell{max-width:1040px;margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;background:#fffaf6;color:var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.23)}
.rsvp-intro{padding:62px 48px;background:
 linear-gradient(rgba(86,59,53,.42),rgba(86,59,53,.58)),
 url("./assets/images/photo-2.jpeg") center/cover no-repeat;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:620px}
.rsvp-intro h2{font-size:3.6rem}.rsvp-intro .kicker{color:#ffe4db}
.rsvp-form{padding:52px;display:grid;gap:22px;align-content:center}
.rsvp-form label>span,.rsvp-form legend{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:9px;color:#735c56}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{width:100%;border:1px solid #dbc8c1;background:#fff;border-radius:12px;padding:14px 15px;outline:none;color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(185,130,118,.13)}
.rsvp-form fieldset{border:0;padding:0;margin:0}.choice-row{display:flex;gap:10px;flex-wrap:wrap}.choice{flex:1;min-width:180px}.choice input{display:none}.choice span{display:block!important;border:1px solid #dbc8c1;border-radius:12px;padding:13px 14px!important;text-align:center;cursor:pointer;margin:0!important;text-transform:none!important;letter-spacing:0!important;font-size:.88rem!important}
.choice input:checked+span{background:#f0ded8;border-color:var(--rose);color:var(--wine)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wide{width:100%}.rsvp-status{min-height:1.3em;margin:0;color:var(--sage);font-weight:600;text-align:center}
.closing-section{height:82svh;min-height:620px;position:relative;display:grid;place-items:center;overflow:hidden}.closing-section img{position:absolute;inset:0}.closing-overlay{position:absolute;inset:0;background:linear-gradient(rgba(40,24,22,.25),rgba(40,24,22,.68))}
.closing-copy{position:relative;z-index:2;color:#fff;text-align:center;max-width:850px;padding:30px}.closing-copy p:last-child{font-family:"Italiana",serif;font-size:1.8rem}
.footer{text-align:center;padding:22px;background:#342826;color:#ddcbc4;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.music-btn{position:fixed;right:18px;top:18px;z-index:30;border:1px solid rgba(255,255,255,.36);background:rgba(44,30,28,.48);backdrop-filter:blur(12px);color:#fff;border-radius:99px;padding:10px 14px;display:flex;align-items:center;gap:9px;cursor:pointer}
.music-dot{width:9px;height:9px;background:#d4a296;border-radius:50%;box-shadow:0 0 0 4px rgba(212,162,150,.18)}
.music-btn.playing .music-dot{animation:pulse 1.1s infinite}
.music-label{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.butterfly-layer{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}

.butterfly{
  position:absolute;
  left:-110px;
  top:var(--top);
  width:54px;
  height:40px;
  animation:butterflyFly var(--dur) cubic-bezier(.18,.66,.35,.98) forwards;
  filter:drop-shadow(0 8px 10px rgba(93,26,33,.16));
  transform-origin:center;
}
.butterfly .body{
  position:absolute;
  left:25px;
  top:10px;
  width:4px;
  height:23px;
  border-radius:99px;
  background:linear-gradient(#612a30,#32181b);
  z-index:3;
}
.butterfly .body:before,
.butterfly .body:after{
  content:"";
  position:absolute;
  width:10px;
  height:1px;
  top:-4px;
  background:#4c2227;
}
.butterfly .body:before{right:1px;transform:rotate(50deg);transform-origin:right}
.butterfly .body:after{left:1px;transform:rotate(-50deg);transform-origin:left}
.butterfly .wing{
  position:absolute;
  top:2px;
  width:27px;
  height:33px;
  background:
    radial-gradient(circle at 68% 27%,rgba(255,247,239,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 42% 52%,rgba(255,220,210,.75) 0 3px,transparent 4px),
    linear-gradient(145deg,#ff6268 0%,#cc263d 42%,#8c1630 100%);
  border:1px solid rgba(96,22,36,.34);
  box-shadow:inset 0 0 12px rgba(255,224,220,.22);
}
.butterfly .wing.left{
  left:1px;
  border-radius:88% 35% 68% 32%;
  transform-origin:right 55%;
  animation:wingL .34s ease-in-out infinite alternate;
}
.butterfly .wing.right{
  right:1px;
  border-radius:35% 88% 32% 68%;
  transform-origin:left 55%;
  animation:wingR .34s ease-in-out infinite alternate;
}
.butterfly.small{transform:scale(.72)}
.butterfly.large{transform:scale(1.2)}


body.opening-lock{overflow:hidden}

.opening-screen{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,255,255,.82),transparent 35%),
    linear-gradient(145deg,#fff9f4 0%,#f9e6e2 48%,#f3d4d3 100%);
  transition:opacity .9s ease,visibility .9s ease;
}
.opening-screen:before,
.opening-screen:after{
  content:"";
  position:absolute;
  width:360px;
  height:520px;
  opacity:.22;
  background:
    radial-gradient(circle at 50% 14%,#9d1731 0 12px,transparent 13px),
    radial-gradient(circle at 70% 31%,#bf3451 0 9px,transparent 10px),
    radial-gradient(circle at 44% 48%,#d96976 0 11px,transparent 12px),
    linear-gradient(78deg,transparent 49%,#6e8062 50% 51%,transparent 52%);
}
.opening-screen:before{left:-135px;bottom:-90px;transform:rotate(-12deg)}
.opening-screen:after{right:-135px;top:-80px;transform:scaleX(-1) rotate(-8deg)}
.opening-screen.opened{opacity:0;visibility:hidden}
.opening-wrap{position:relative;z-index:3;width:min(92vw,620px);text-align:center}
.opening-kicker{
  margin:0 0 28px;
  font-size:.7rem;
  letter-spacing:.31em;
  font-weight:700;
  color:#8d2438;
}
.envelope{
  width:min(86vw,520px);
  height:335px;
  margin:0 auto 32px;
  position:relative;
  perspective:1000px;
}
.envelope-back{
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:72%;
  border-radius:18px;
  background:linear-gradient(145deg,#c94154,#9b2038);
  box-shadow:0 28px 55px rgba(101,28,40,.22);
}
.invitation-card{
  position:absolute;
  left:12%;
  right:12%;
  bottom:9%;
  height:78%;
  z-index:2;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 18%,rgba(203,54,77,.08),transparent 30%),
    #fffaf5;
  border:1px solid rgba(126,66,67,.13);
  box-shadow:0 12px 28px rgba(90,33,39,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#4c3232;
  transform:translateY(27%);
  transition:transform 1.15s cubic-bezier(.22,.76,.2,1) .38s;
}
.invitation-card:before,
.invitation-card:after{
  content:"✦";
  position:absolute;
  color:#bc4157;
  opacity:.5;
  font-size:1.1rem;
}
.invitation-card:before{left:25px;top:20px}
.invitation-card:after{right:25px;bottom:20px}
.card-small{font-size:.58rem;letter-spacing:.22em;color:#a14a56}
.invitation-card strong{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.2rem,8vw,4.2rem);
  font-weight:500;
  line-height:.9;
}
.invitation-card strong em{
  display:block;
  font-weight:400;
  color:#b43248;
  font-size:.75em;
  margin:.1em 0;
}
.invitation-card>span:last-child{font-size:.72rem;letter-spacing:.2em}
.envelope-front{
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:72%;
  z-index:4;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(32deg,#a5233b 49.5%,transparent 50%) left bottom/50% 100% no-repeat,
    linear-gradient(-32deg,#b82d46 49.5%,transparent 50%) right bottom/50% 100% no-repeat,
    linear-gradient(#bf354d,#ad273f);
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);
}
.envelope-flap{
  position:absolute;
  left:5%;
  right:5%;
  top:28%;
  height:42%;
  z-index:5;
  background:linear-gradient(155deg,#d34e61,#a8233c);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.2,.75,.2,1);
}
.wax-seal{
  position:absolute;
  left:50%;
  top:51%;
  z-index:6;
  width:58px;
  height:58px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 35% 30%,#d95a63,#9d1e35 60%,#711428);
  box-shadow:0 7px 18px rgba(86,18,29,.28),inset 0 0 0 3px rgba(255,211,205,.18);
  color:#ffe9df;
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:1.1rem;
  transition:opacity .35s ease,transform .5s ease;
}
.wax-seal span{font-size:.7em;padding:0 2px}
.envelope.is-open .envelope-flap{transform:rotateX(178deg);z-index:1}
.envelope.is-open .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.65)}
.envelope.is-open .invitation-card{transform:translateY(-23%)}
.open-invitation-btn{
  border:0;
  border-radius:99px;
  padding:15px 20px 15px 26px;
  min-width:200px;
  background:#8e2037;
  color:white;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(115,26,44,.21);
  transition:.25s;
}
.open-invitation-btn:hover{transform:translateY(-2px);background:#7d192f}
.open-invitation-btn b{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.13);
  font-weight:400;
}
.opening-note{font-family:"Cormorant Garamond",serif;font-style:italic;color:#8a6667;margin-top:14px}
.opening-butterfly{
  position:absolute;
  width:42px;
  height:30px;
  opacity:.7;
}
.opening-butterfly:before,
.opening-butterfly:after{
  content:"";
  position:absolute;
  top:3px;
  width:20px;
  height:26px;
  background:linear-gradient(145deg,#f55d68,#a81735);
  border-radius:85% 35% 70% 28%;
}
.opening-butterfly:before{left:0;transform:rotate(-18deg)}
.opening-butterfly:after{right:0;transform:scaleX(-1) rotate(-18deg)}
.ob1{left:10%;top:22%;transform:rotate(-14deg);animation:openingFloat 4.8s ease-in-out infinite}
.ob2{right:11%;bottom:18%;transform:scale(.75) rotate(18deg);animation:openingFloat 5.6s ease-in-out infinite reverse}

@keyframes openingFloat{
  50%{transform:translate(18px,-20px) rotate(8deg)}
}

.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
.reveal{transform:translateY(28px)}.reveal-left{transform:translateX(-42px)}.reveal-right{transform:translateX(42px)}
.is-visible{opacity:1!important;transform:none!important}
@keyframes heroZoom{to{transform:scale(1.1) translateY(-1%)}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,20px)}}
@keyframes drift{50%{transform:translate(10px,-18px) rotate(10deg)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(212,162,150,.07)}}
@keyframes butterflyFly{
  0%{transform:translate3d(-100px,18px,0) rotate(-8deg)}
  18%{transform:translate3d(22vw,-28px,0) rotate(5deg)}
  38%{transform:translate3d(44vw,20px,0) rotate(-3deg)}
  58%{transform:translate3d(66vw,-38px,0) rotate(6deg)}
  80%{transform:translate3d(92vw,8px,0) rotate(-3deg)}
  100%{transform:translate3d(122vw,-20px,0) rotate(4deg)}
}
@keyframes wingL{to{transform:rotateY(58deg) rotate(-8deg)}}
@keyframes wingR{to{transform:rotateY(-58deg) rotate(8deg)}}

@media (max-width:820px){
  .hero-copy{top:12%}.hero h1{font-size:clamp(4rem,19vw,6.8rem)}
  .split-grid,.venue-section,.rsvp-shell{grid-template-columns:1fr}
  .photo-story{padding:80px 20px}.photo-stack{min-height:560px}
  .venue-section{padding:80px 20px}.venue-card{justify-self:auto}
  .venue-photo{height:500px;border-radius:220px 220px 20px 20px}
  .rsvp-intro{min-height:460px}.rsvp-form{padding:38px 24px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.g1{grid-row:span 2}.g4{grid-column:span 1}
}
@media (max-width:540px){
  .paper-card{padding:58px 26px;border-radius:150px 150px 20px 20px}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .photo-stack{min-height:470px}.photo-frame.tall{width:78%;height:80%}.photo-frame.small{width:52%;height:42%}
  .form-grid{grid-template-columns:1fr}.choice-row{flex-direction:column}.gallery{grid-auto-rows:180px}
  .rsvp-intro h2{font-size:2.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@media (max-width:540px){
  .envelope{height:285px}
  .opening-kicker{margin-bottom:20px}
  .invitation-card strong{font-size:2.55rem}
}


/* ===== REV3 — SAMPLE-LED OPENING + REAL RED BUTTERFLIES ===== */
.floating-flower,
.petal-layer,
.petal { display:none !important; animation:none !important; }

body.opening-lock{overflow:hidden}

.opening-screen{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#f7e5e5;
  transition:opacity .9s ease,visibility .9s ease;
}
.opening-screen.done{opacity:0;visibility:hidden;pointer-events:none}

.sample-opener{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 22px 34px;
  background:
    radial-gradient(circle at 50% 17%,rgba(255,255,255,.96),transparent 28%),
    linear-gradient(180deg,#fff8f7 0%,#f7e7e7 55%,#f3dddd 100%);
  transition:transform .9s cubic-bezier(.2,.78,.2,1),opacity .7s ease;
}
.sample-opener.is-opening{
  transform:translateY(-6%);
  opacity:0;
  pointer-events:none;
}

.sample-topline{
  margin:0 0 20px;
  color:#7e2738;
  font-size:.68rem;
  letter-spacing:.31em;
  font-weight:700;
}
.sample-photo-wrap{
  width:min(72vw,340px);
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
  border-radius:170px 170px 22px 22px;
  box-shadow:0 24px 55px rgba(108,43,52,.18);
  border:7px solid rgba(255,255,255,.75);
}
.sample-photo-wrap img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
}
.sample-photo-soft{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(69,31,36,.42));
}
.sample-names{
  margin:22px 0 6px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(3.1rem,10vw,5.1rem);
  font-weight:500;
  line-height:.8;
  color:#553638;
}
.sample-names span{display:block;color:#a6253d;font-size:.72em;font-weight:400;margin:.13em 0}
.sample-date{
  margin:8px 0 21px;
  color:#9a6f70;
  letter-spacing:.23em;
  font-size:.72rem;
  font-weight:600;
}
.sample-open-btn{
  border:0;
  min-width:205px;
  padding:15px 26px;
  border-radius:99px;
  background:#792238;
  color:#fff;
  letter-spacing:.13em;
  font-size:.73rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(121,34,56,.22);
  transition:transform .25s,background .25s;
}
.sample-open-btn:hover{transform:translateY(-2px);background:#671b30}
.sample-tap{
  margin:11px 0 0;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  color:#9b7777;
}

.cover-reveal{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transform:scale(.96);
  background:
    radial-gradient(circle at 50% 42%,#fff 0%,#fff9f8 42%,#f4dddd 100%);
  transition:opacity .65s ease .35s,transform .9s cubic-bezier(.2,.78,.2,1) .28s,visibility .01s .3s;
}
.cover-reveal.show{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}
.cover-card{
  position:relative;
  width:min(94vw,610px);
  height:min(86svh,700px);
  display:grid;
  place-items:center;
}
.wreath{
  position:absolute;
  width:min(92vw,510px);
  height:auto;
  filter:drop-shadow(0 18px 28px rgba(111,50,56,.08));
}
.cover-text{
  position:relative;
  z-index:2;
  width:70%;
  text-align:center;
  color:#533739;
  transform:translateY(-2%);
}
.cover-text p{
  font-size:.58rem;
  letter-spacing:.22em;
  font-weight:700;
  color:#9e6870;
  margin:0 0 14px;
}
.cover-text h2{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(3.5rem,12vw,6.1rem);
  line-height:.73;
  font-weight:500;
}
.cover-text h2 em{
  display:block;
  color:#a7203c;
  font-weight:400;
  font-size:.72em;
  margin:.17em 0;
}
.cover-text>span{
  display:block;
  margin-top:21px;
  color:#8c6669;
  font-size:.72rem;
  letter-spacing:.25em;
  font-weight:600;
}
.cover-text small{
  display:block;
  margin-top:24px;
  color:#a08383;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:1rem;
}

/* Recognisable butterfly built from a detailed inline SVG.
   No falling flowers/petals are created anywhere in Rev3. */
.butterfly-layer{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  overflow:hidden;
}
.real-butterfly{
  position:absolute;
  left:-120px;
  top:var(--start-y);
  width:var(--size);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 7px 8px rgba(90,20,31,.16));
  animation:realButterflyFlight var(--flight) cubic-bezier(.18,.68,.3,.98) forwards;
}
.real-butterfly .left-wing{
  transform-origin:50px 50px;
  animation:realWingLeft .28s ease-in-out infinite alternate;
}
.real-butterfly .right-wing{
  transform-origin:50px 50px;
  animation:realWingRight .28s ease-in-out infinite alternate;
}
.real-butterfly .wing-main{fill:url(#wingRed)}
.real-butterfly .wing-edge{fill:#8d1730}
.real-butterfly .spot{fill:#ffd6cd}
.real-butterfly .spot-dark{fill:#5c1826}
.real-butterfly .vein{fill:none;stroke:#762035;stroke-width:1.3;opacity:.58}
.real-butterfly .body{fill:#4e2427}
.real-butterfly .antenna{fill:none;stroke:#4e2427;stroke-width:1.6;stroke-linecap:round}

.opening-butterflies{
  position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
}
.opening-butterflies .real-butterfly{z-index:1}

@keyframes realWingLeft{
  from{transform:perspective(90px) rotateY(0deg) rotate(-2deg)}
  to{transform:perspective(90px) rotateY(58deg) rotate(-7deg)}
}
@keyframes realWingRight{
  from{transform:perspective(90px) rotateY(0deg) rotate(2deg)}
  to{transform:perspective(90px) rotateY(-58deg) rotate(7deg)}
}
@keyframes realButterflyFlight{
  0%{transform:translate3d(-130px,14px,0) rotate(-8deg)}
  15%{transform:translate3d(18vw,-35px,0) rotate(7deg)}
  32%{transform:translate3d(39vw,20px,0) rotate(-4deg)}
  50%{transform:translate3d(61vw,-44px,0) rotate(6deg)}
  70%{transform:translate3d(84vw,14px,0) rotate(-5deg)}
  86%{transform:translate3d(103vw,-32px,0) rotate(5deg)}
  100%{transform:translate3d(124vw,6px,0) rotate(-2deg)}
}

@media(max-width:560px){
  .sample-photo-wrap{width:min(74vw,315px)}
  .cover-card{height:min(88svh,680px)}
  .wreath{width:min(102vw,470px)}
  .cover-text{width:72%}
}

/* REV4 butterfly scale tuning */
.real-butterfly{filter:drop-shadow(0 4px 5px rgba(90,20,31,.12))}

/* REV5: force genuinely tiny butterflies */
.real-butterfly{min-width:0!important;max-width:none!important;transform-origin:center center}
@media(max-width:560px){.real-butterfly{filter:drop-shadow(0 2px 3px rgba(90,20,31,.10))}}


/* ===== REV6: random butterfly movement ===== */
.real-butterfly{
  animation:none !important;
  position:absolute;
  will-change:transform;
}

/* ===== REV6: refined cinematic quote ===== */
.cinematic-break{
  min-height:620px;
  height:76svh;
}
.cinematic-overlay{
  background:
    linear-gradient(90deg,rgba(30,18,17,.52) 0%,rgba(30,18,17,.20) 43%,rgba(30,18,17,.08) 67%,rgba(30,18,17,.20) 100%),
    linear-gradient(180deg,transparent 45%,rgba(30,18,17,.22));
}
.cinematic-copy{
  left:clamp(22px,7vw,100px);
  right:auto;
  bottom:clamp(28px,8vh,76px);
  max-width:min(520px,84vw);
}
.quote-card{
  position:relative;
  padding:30px 32px 26px 36px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:24px;
  background:rgba(50,30,29,.28);
  backdrop-filter:blur(12px) saturate(110%);
  -webkit-backdrop-filter:blur(12px) saturate(110%);
  box-shadow:0 20px 55px rgba(0,0,0,.16);
}
.quote-mark{
  position:absolute;
  left:16px;
  top:8px;
  color:rgba(255,230,220,.72);
  font-family:"Cormorant Garamond",serif;
  font-size:4.3rem;
  line-height:1;
}
.cinematic-copy .quote-card p{
  margin:0;
  max-width:430px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:clamp(2rem,3.4vw,3.65rem);
  line-height:1.03;
  text-wrap:balance;
  letter-spacing:-.015em;
  text-shadow:0 4px 22px rgba(0,0,0,.16);
}
.quote-line{
  display:block;
  width:52px;
  height:1px;
  background:rgba(255,231,220,.78);
  margin:22px 0 12px;
}
.quote-card small{
  display:block;
  color:rgba(255,245,240,.76);
  font-size:.59rem;
  font-style:normal;
  font-weight:600;
  letter-spacing:.22em;
}
@media(max-width:600px){
  .cinematic-break{min-height:580px;height:72svh}
  .cinematic-copy{left:20px;right:20px;bottom:26px;max-width:none}
  .quote-card{padding:24px 23px 22px 28px;border-radius:20px}
  .quote-mark{left:11px;top:7px;font-size:3.4rem}
  .cinematic-copy .quote-card p{font-size:clamp(1.85rem,8.2vw,2.7rem);line-height:1.02}
}


/* ===== REV7: one refined text language for every photo-overlay section ===== */
.photo-text-card{
  position:relative;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(145deg,rgba(48,29,28,.34),rgba(48,29,28,.20));
  backdrop-filter:blur(13px) saturate(112%);
  -webkit-backdrop-filter:blur(13px) saturate(112%);
  box-shadow:0 20px 55px rgba(0,0,0,.16);
  color:#fff;
}
.photo-text-line{
  display:block;
  width:54px;
  height:1px;
  margin:18px auto 14px;
  background:rgba(255,235,226,.76);
}

/* Hero photo: text no longer floats huge over the faces. */
.hero-copy{
  top:auto;
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(58px,8vh,86px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
}
.hero-text-card{
  width:min(560px,90vw);
  padding:25px 34px 23px;
  border-radius:24px;
  text-align:center;
}
.hero-text-card .eyebrow{
  color:rgba(255,244,239,.78);
  font-size:.61rem;
  letter-spacing:.24em;
}
.hero-text-card h1{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:.15em;
  margin:8px 0 0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.55rem,5.5vw,4.4rem);
  line-height:.9;
  font-weight:500;
  text-shadow:0 4px 18px rgba(0,0,0,.15);
}
.hero-text-card h1 span{display:inline}
.hero-text-card h1 em{
  display:inline;
  margin:0 .04em;
  font-size:.72em;
  color:#f4d4cc;
}
.hero-text-card .hero-date{
  margin:0;
  font-family:"DM Sans",sans-serif;
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,247,243,.82);
}
.hero-copy .scroll-cue{
  left:50%;
  bottom:-47px;
}

/* Countdown photo: compact frosted panel instead of bare large text. */
.countdown-text-card{
  width:min(880px,92vw);
  padding:38px 34px 32px;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(41,25,23,.38),rgba(41,25,23,.23));
}
.countdown-text-card h2{
  font-size:clamp(2.4rem,5vw,4.4rem);
  margin:.18em 0 .35em;
  text-wrap:balance;
}
.countdown-text-card .countdown{margin-top:28px}
.countdown-text-card .countdown>div{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.20);
}

/* RSVP photo-side text: a readable glass card, not text directly over the photo. */
.rsvp-intro{
  padding:34px;
  justify-content:flex-end;
}
.rsvp-photo-text{
  width:100%;
  padding:28px 28px 25px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(49,29,27,.46),rgba(49,29,27,.28));
}
.rsvp-photo-text .kicker{margin:0 0 10px;color:#f5d4cd}
.rsvp-photo-text h2{
  margin:0;
  font-size:clamp(2.3rem,4vw,3.4rem);
  line-height:.95;
}
.rsvp-photo-text .photo-text-line{margin-left:0}
.rsvp-photo-text>p:last-child{
  margin:0;
  color:rgba(255,247,243,.82);
  line-height:1.65;
  font-size:.9rem;
}

/* Closing photo: same premium card language as the quote. */
.closing-copy{
  width:min(620px,90vw);
  padding:0;
}
.closing-text-card{
  padding:30px 34px 27px;
  border-radius:24px;
  text-align:center;
}
.closing-text-card .kicker{margin:0 0 9px;color:#f5d8d0}
.closing-text-card h2{
  margin:0;
  font-size:clamp(2.25rem,4.4vw,3.8rem);
  line-height:.98;
  text-wrap:balance;
}
.closing-text-card>p:last-child{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:1.35rem;
  letter-spacing:.05em;
  color:rgba(255,245,240,.86);
}

@media(max-width:600px){
  .hero-copy{bottom:70px}
  .hero-text-card{padding:21px 20px 19px;border-radius:20px}
  .hero-text-card h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .hero-text-card .hero-date{font-size:.58rem;line-height:1.6}
  .countdown-text-card{padding:29px 18px 23px;border-radius:22px}
  .countdown-text-card .countdown{margin-top:22px}
  .rsvp-intro{padding:20px;min-height:480px}
  .rsvp-photo-text{padding:23px 21px 21px}
  .closing-text-card{padding:25px 22px 22px;border-radius:21px}
}


/* ===== Bride / Groom Contact ===== */
.contact-section{
  padding:clamp(44px,7vw,76px) 18px;
  position:relative;
}
.contact-heading{
  max-width:720px;
  margin:0 auto 26px;
  text-align:center;
}
.contact-kicker{
  margin:0 0 8px;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.18em;
}
.contact-heading h2{
  margin:.05em 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,5vw,3rem);
  font-weight:500;
}
.contact-heading>p:last-child{
  max-width:590px;
  margin:10px auto 0;
  line-height:1.65;
  opacity:.78;
}
.couple-contact-grid{
  width:min(100%,820px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.couple-contact-card{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:16px;
  align-items:center;
  padding:18px;
  border:1px solid rgba(120,100,80,.18);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 38px rgba(55,45,35,.08);
}
.contact-avatar{
  width:82px;height:82px;border-radius:50%;
  display:grid;place-items:center;
  border:5px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(120,100,80,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,225,210,.9));
}
.contact-avatar span{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
}
.contact-copy small{
  display:block;
  font-size:.54rem;
  letter-spacing:.15em;
  font-weight:800;
  opacity:.65;
}
.contact-copy h3{
  margin:2px 0 4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
  font-weight:500;
}
.contact-copy p{
  margin:0 0 10px;
  font-size:.76rem;
  line-height:1.45;
  opacity:.72;
}
.couple-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.couple-contact-actions a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:.62rem;
  font-weight:800;
}
@media(max-width:680px){
  .couple-contact-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
  .couple-contact-card{grid-template-columns:68px 1fr;padding:14px}
  .contact-avatar{width:68px;height:68px}
}