*{box-sizing:border-box}
:root{
  color-scheme: only light;
  --ivory:#f8f3e8;
  --paper:#fffdf7;
  --green:#334428;
  --green2:#55664a;
  --gold:#bb914d;
  --blush:#d9b6ad;
  --ink:#2f322a;
}
html{scroll-behavior:smooth}
html, body{
  color-scheme: only light;
  background-color:#ece7df;
}
body{
  margin:0;
  background:#ece7df;
  color:var(--ink);
  font-family:"Montserrat",sans-serif;
  overflow-x:hidden;
}
.site-shell{
  position:relative;
  width:min(100%,480px);
  margin:0 auto;
  background:var(--ivory);
  min-height:100vh;
  box-shadow:0 0 55px rgba(56,47,35,.14);
  overflow:hidden;
}
.screen{position:relative;width:100%}
.hero{height:100svh;min-height:720px;overflow:hidden}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%;
  filter:saturate(.84) contrast(.94) brightness(1.03);
  transform:scale(1.015);
}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 25%,rgba(248,243,232,.28) 53%,rgba(248,243,232,.94) 73%,var(--ivory) 100%);
}
.top-monogram{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  z-index:3;color:var(--gold);
  font:500 27px "Cormorant Garamond",serif;
  letter-spacing:.22em;text-shadow:0 2px 8px rgba(255,255,255,.75)
}
.sound-dot{
  position:absolute;z-index:4;top:24px;right:18px;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(187,145,77,.55);
  background:#fffdf7;color:var(--gold);font-size:17px;
}
.hero-card{
  position:absolute;left:16px;right:16px;bottom:18px;
  z-index:3;text-align:center;
  padding:42px 24px 28px;
  border-radius:120px 120px 28px 28px;
  background:#fffdf7;
  backdrop-filter:blur(8px);
  border:1px solid rgba(187,145,77,.25);
}
.tiny{
  margin:0 auto 14px;
  font:500 11px "Cormorant Garamond",serif;
  letter-spacing:.14em;
  max-width:270px;
}
.tiny.wide{max-width:330px;margin-top:16px}
h1{
  margin:10px 0;
  font:500 55px/.85 "Cormorant Garamond",serif;
  color:var(--green);
}
h1 span,h1 em{display:block}
h1 em{
  font:400 34px "Great Vibes",cursive;
  color:var(--gold);margin:8px 0 6px;
}
.gold-flourish{color:var(--gold);font-size:24px;margin:10px 0}
.event-type{
  font:500 12px "Cormorant Garamond",serif;
  letter-spacing:.28em;color:var(--green);margin:8px 0 20px;
}
.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(187,145,77,.28);
  border-bottom:1px solid rgba(187,145,77,.28);
  margin:18px 0 20px;
}
.countdown div{padding:13px 4px;border-right:1px solid rgba(187,145,77,.24)}
.countdown div:last-child{border-right:0}
.countdown strong{
  display:block;font:500 26px "Cormorant Garamond",serif;color:var(--green)
}
.countdown span{font-size:8px;letter-spacing:.13em}
.scroll-cue{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  text-decoration:none;color:var(--gold);
  border:1px solid rgba(187,145,77,.35);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(5px)}}

.paper-section{
  padding:72px 18px 70px;
  text-align:center;
  background:
    radial-gradient(circle at 5% 20%,rgba(217,182,173,.11),transparent 22%),
    radial-gradient(circle at 90% 85%,rgba(85,102,74,.08),transparent 24%),
    var(--paper);
}
.section-kicker{
  margin:0;color:#77766e;font-size:10px;letter-spacing:.23em
}
h2{
  margin:8px auto 0;
  max-width:360px;
  font:500 35px/1.05 "Cormorant Garamond",serif;
  letter-spacing:.05em;color:var(--green);
}
.watercolor-wrap{
  margin:28px -18px 10px;
  overflow:hidden;
}
.watercolor-wrap img{
  display:block;width:100%;height:390px;object-fit:cover;
  filter:saturate(.78) brightness(1.04);
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
}
.date-stack{
  margin:3px auto 26px;
  display:flex;flex-direction:column;gap:5px;
  color:var(--green);letter-spacing:.18em;
}
.date-stack span{font:500 13px "Cormorant Garamond",serif}
.date-stack strong{font:500 64px/.9 "Cormorant Garamond",serif;color:var(--gold)}
.green-card{
  position:relative;
  margin:0 -18px -70px;
  padding:48px 28px 62px;
  background:linear-gradient(180deg,#3a4d30,#2f4128);
  color:white;
  border-radius:44px 44px 0 0;
  overflow:hidden;
}
.green-card:before,.green-card:after{
  content:"✿";position:absolute;color:rgba(255,247,235,.14);font-size:110px
}
.green-card:before{left:-30px;bottom:-25px}
.green-card:after{right:-24px;bottom:-20px}
.info-row{
  display:flex;gap:16px;align-items:flex-start;text-align:left;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.13)
}
.info-row .icon{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(213,187,136,.55);color:#d6b879;font-size:19px;flex:0 0 42px
}
.info-row small{display:block;font-size:9px;letter-spacing:.18em;color:#d7cbb7;margin-bottom:6px}
.info-row b{display:block;font:500 18px "Cormorant Garamond",serif;letter-spacing:.05em}
.info-row span:not(.icon){display:block;font-size:11px;margin-top:3px;color:#e7e0d5}
.location-btn{
  position:relative;z-index:2;
  margin-top:28px;display:inline-flex;gap:10px;align-items:center;
  text-decoration:none;color:#fff;padding:14px 21px;
  border:1px solid #d1b577;border-radius:4px;
  font-size:10px;letter-spacing:.13em
}
.floral-divider{margin-top:96px;color:var(--gold);letter-spacing:.2em}

.venue-section{padding-top:78px}
.stage-card{
  margin:28px 0 22px;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 50px rgba(55,49,40,.10)
}
.stage-card img{
  width:100%;height:470px;object-fit:cover;object-position:center 33%;
  filter:saturate(.82) brightness(1.04)
}
.venue-copy{
  max-width:340px;margin:22px auto 28px;
  font:400 18px/1.7 "Cormorant Garamond",serif;color:#55584e
}
.feature-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.feature-row span{
  font-size:26px;color:var(--gold);
  padding:18px 6px;border:1px solid rgba(187,145,77,.22);border-radius:16px
}
.feature-row small{
  display:block;margin-top:10px;font-size:8px;letter-spacing:.11em;color:#62665a
}

.gallery-section{
  padding:72px 14px 80px;text-align:center;background:#f8f4ec
}
.gallery{
  margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.gallery img{
  width:100%;height:255px;object-fit:cover;border-radius:15px;
  filter:saturate(.88) contrast(.97)
}
.gallery img:nth-child(3){grid-column:1/3;height:300px}
.gallery img:nth-child(4){grid-column:1/3;height:230px;object-position:center 38%}

.ending{
  min-height:92svh;
  display:grid;place-items:center;
  background:var(--paper);
  text-align:center;padding:80px 24px;
}
.ending-content{position:relative;z-index:2}
.ending-monogram{
  font:500 48px "Cormorant Garamond",serif;
  color:var(--gold);letter-spacing:.18em;margin-bottom:30px
}
.ending p{
  max-width:290px;margin:auto;
  font:500 25px/1.45 "Cormorant Garamond",serif;
  letter-spacing:.04em;color:var(--green)
}
.back-top{
  margin:28px auto 0;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(187,145,77,.4);
  color:var(--gold);text-decoration:none
}
.ending-flower{
  position:absolute;width:260px;height:170px;opacity:.20;
  background:
    radial-gradient(circle at 30% 55%,#d7b1aa 0 16%,transparent 17%),
    radial-gradient(circle at 48% 35%,#f1e1cf 0 14%,transparent 15%),
    radial-gradient(circle at 65% 60%,#d9cab2 0 13%,transparent 14%),
    radial-gradient(ellipse at 30% 80%,#728267 0 13%,transparent 14%),
    radial-gradient(ellipse at 70% 80%,#728267 0 13%,transparent 14%);
}
.ending-flower.top{top:20px;right:-70px;transform:rotate(12deg)}
.ending-flower.bottom{bottom:15px;left:-70px;transform:rotate(190deg)}

.reveal{opacity:0;transform:translateY(18px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}

/* Falling petals */
.petals{position:fixed;inset:0;pointer-events:none;z-index:20;width:min(100vw,480px);margin:auto}
.petal{
  position:absolute;top:-30px;
  width:10px;height:15px;border-radius:60% 40% 60% 40%;
  background:rgba(220,185,176,.72);
  animation:fall linear forwards;
  filter:blur(.2px)
}
@keyframes fall{
  to{transform:translate3d(var(--drift),110vh,0) rotate(520deg);opacity:.2}
}

@media(min-width:481px){
  body{padding:18px 0}
  .site-shell{border-radius:30px}
}


.couple-story-section{
  padding-top:76px;
  padding-bottom:82px;
  overflow:hidden;
}
.couple-art{
  width:calc(100% + 36px);
  margin:28px -18px 8px;
  position:relative;
}
.couple-art:before{
  content:"";
  position:absolute;
  inset:6% 10% 4%;
  border-radius:50% 50% 18% 18%;
  background:radial-gradient(circle,rgba(217,182,173,.16),transparent 66%);
  filter:blur(14px);
}
.couple-art img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-height:620px;
  object-fit:contain;
  filter:saturate(.94) brightness(1.02);
}
.milestone{
  position:relative;
  z-index:2;
  margin:-4px auto 0;
  max-width:350px;
  padding:18px 18px 0;
  text-align:center;
}
.milestone-label{
  display:block;
  font-size:9px;
  letter-spacing:.22em;
  color:#77766e;
  margin-bottom:10px;
}
.milestone strong{
  display:block;
  font:500 34px "Cormorant Garamond",serif;
  color:var(--gold);
  letter-spacing:.12em;
}
.milestone p{
  margin:18px auto 12px;
  font:400 18px/1.65 "Cormorant Garamond",serif;
  color:#55584e;
}
.milestone em{
  display:block;
  margin-top:8px;
  font:400 35px "Great Vibes",cursive;
  color:var(--gold);
}

.couple-art{
  margin: 22px -6px 4px !important;
  width: calc(100% + 12px) !important;
  background: transparent !important;
}
.couple-art:before{ display:none !important; }
.couple-art img{
  width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block;
  background:transparent !important;
  filter:none !important;
}


/* Keep the invitation visually identical when the guest uses OS/browser dark mode. */
html, body, .site-shell, .paper-section, .gallery-section, .ending {
  forced-color-adjust: none;
}
input, button, a { color-scheme: only light; }

@media (prefers-color-scheme: dark) {
  :root {
    --ivory:#f8f3e8;
    --paper:#fffdf7;
    --green:#334428;
    --green2:#55664a;
    --gold:#bb914d;
    --blush:#d9b6ad;
    --ink:#2f322a;
  }
  html,body { background:#ece7df !important; color:#2f322a !important; }
  .site-shell { background:#f8f3e8 !important; }
  .paper-section,.ending { background-color:#fffdf7 !important; }
  .hero-card { background:#fffdf7 !important; color:#2f322a !important; }
  .sound-dot { background:#fffdf7 !important; color:#bb914d !important; }
  .green-card { background:linear-gradient(180deg,#3a4d30,#2f4128) !important; color:#fff !important; }
}

/* Phone hero: reserve a clean, unobstructed window for the venue photo. */
@media (max-width:480px) {
  .hero { height:100svh; min-height:700px; background:var(--ivory); }
  .hero-photo {
    height:56%;
    object-fit:cover;
    object-position:center 34%;
    transform:none;
  }
  .hero-fade {
    height:60%;
    bottom:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.01) 0%,rgba(248,243,232,.03) 65%,var(--ivory) 100%);
  }
  .hero-card {
    left:10px; right:10px; bottom:8px;
    padding:30px 18px 20px;
    border-radius:92px 92px 24px 24px;
    backdrop-filter:blur(5px);
  }
  h1 { font-size:48px; }
  .tiny { margin-bottom:9px; }
  .tiny.wide { margin-top:10px; }
  .event-type { margin-bottom:12px; }
  .countdown { margin:12px 0 13px; }
  .countdown div { padding:9px 3px; }
  .countdown strong { font-size:23px; }
}

/* Very short phones: keep both the venue and invitation content readable. */
@media (max-width:480px) and (max-height:740px) {
  .hero { min-height:680px; }
  .hero-photo { height:52%; object-position:center 31%; }
  .hero-card { padding-top:25px; }
  h1 { font-size:43px; }
}


/* HARD LIGHT-THEME LOCK
   Prevents normal OS/browser dark mode from altering the invitation palette. */
:root {
  color-scheme: only light !important;
}

html {
  background:#ece7df !important;
  color-scheme: only light !important;
}

body {
  background:#ece7df !important;
  color:#2f322a !important;
  color-scheme: only light !important;
}

html, body, .site-shell, .screen, .paper-section, .ending,
.hero-card, .sound-dot, .milestone, .couple-story-section {
  forced-color-adjust:none !important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.site-shell {
  background:#f8f3e8 !important;
}

.paper-section,
.couple-story-section,
.ending {
  background-color:#fffdf7 !important;
}

.hero-card,
.sound-dot {
  background-color:#fffdf7 !important;
}

/* Keep transparent decorative layers transparent ONLY over our own fixed light surfaces. */
.couple-art,
.couple-art img,
.petals {
  background-color:transparent !important;
}

/* Explicit text colors so mobile dark mode cannot infer replacements. */
.tiny, .invite-line, .countdown span, .milestone p {
  color:#2f322a !important;
}
h1, h2, .event-type, .date-stack, .ending p {
  color:#334428 !important;
}
.gold-flourish, .top-monogram, .ending-monogram,
.milestone strong, .milestone em, .scroll-cue {
  color:#bb914d !important;
}

/* Re-assert exact same palette in dark preference. */
@media (prefers-color-scheme: dark) {
  html, body {
    background:#ece7df !important;
    color:#2f322a !important;
  }
  .site-shell { background:#f8f3e8 !important; }
  .paper-section, .couple-story-section, .ending { background:#fffdf7 !important; }
  .hero-card, .sound-dot { background:#fffdf7 !important; }
  h1, h2, .event-type, .date-stack, .ending p { color:#334428 !important; }
  .tiny, .invite-line, .countdown span, .milestone p { color:#2f322a !important; }
}

/* Some Android browsers apply extra darkening to form controls. */
button, a {
  color-scheme:only light !important;
}

/* IMAGE-BASED LIGHT PALETTE LOCK
   Some mobile browsers force "darken websites" even against normal CSS colors.
   Opaque background images are used for the invitation surfaces so they are not recolored. */
html {
  color-scheme: light !important;
  background: #ece7df url("assets/outer-bg.png") repeat !important;
}
body {
  color-scheme: light !important;
  background: #ece7df url("assets/outer-bg.png") repeat !important;
  color:#2f322a !important;
}
.site-shell {
  background: #f8f3e8 url("assets/ivory-bg.png") repeat !important;
}
.paper-section,
.couple-story-section,
.ending,
.gallery-section {
  background: #fffdf7 url("assets/paper-bg.png") repeat !important;
}
.hero-card,
.sound-dot {
  background: #fffdf7 url("assets/paper-bg.png") repeat !important;
}

/* keep venue hero image itself untouched */
.hero {
  background-color:#f8f3e8 !important;
}

/* explicit foreground colors */
h1,h2,.event-type,.date-stack,.ending p { color:#334428 !important; }
.tiny,.invite-line,.countdown span,.milestone p,.venue-copy { color:#2f322a !important; }
.gold-flourish,.top-monogram,.ending-monogram,.milestone strong,.milestone em,.scroll-cue {
  color:#bb914d !important;
}
.green-card {
  background:#334428 !important;
  background-image:none !important;
  color:#fff !important;
}
.location-btn { color:#fff !important; border-color:#d1b577 !important; }

/* common accessibility/extension overrides */
* {
  forced-color-adjust:none !important;
}
@media (prefers-color-scheme: dark) {
  html, body { background:#ece7df url("assets/outer-bg.png") repeat !important; color:#2f322a !important; }
  .site-shell { background:#f8f3e8 url("assets/ivory-bg.png") repeat !important; }
  .paper-section,.couple-story-section,.ending,.gallery-section,
  .hero-card,.sound-dot { background:#fffdf7 url("assets/paper-bg.png") repeat !important; }
}


/* =========================================================
   V6 — ENVELOPE OPENING + OFF-WHITE / BLUSH THEME
   ========================================================= */
:root{
  --ivory:#fbf6ee;
  --paper:#fffdf9;
  --rose:#c88f94;
  --rose-deep:#a96870;
  --rose-soft:#efd9d7;
  --sage:#8b927c;
  --green:#6f7764;
  --green2:#7f8675;
  --gold:#ba8c49;
  --ink:#403732;
}

html,body{
  background:#eee8df !important;
}
.site-shell{
  background:#fbf6ee !important;
}
.paper-section,
.couple-story-section,
.ending{
  background:
    radial-gradient(circle at 4% 13%, rgba(232,194,195,.18), transparent 20%),
    radial-gradient(circle at 94% 82%, rgba(232,194,195,.12), transparent 20%),
    #fffdf9 !important;
}
h1,h2,.event-type,.date-stack,.ending p{
  color:#6f5d58 !important;
}
.section-kicker,.tiny,.invite-line,.milestone-label{
  color:#8d7771 !important;
}
.gold-flourish,.top-monogram,.ending-monogram,.milestone strong,.milestone em,.scroll-cue{
  color:var(--gold) !important;
}

/* Pink replaces the former dark green information block */
.green-card{
  background:linear-gradient(180deg,#c99399,#b77f86) !important;
  color:#fff !important;
}
.green-card:before,.green-card:after{
  color:rgba(255,250,247,.11) !important;
}
.info-row .icon{
  border-color:rgba(255,245,235,.55) !important;
  color:#fff3e4 !important;
}
.info-row small,.info-row span:not(.icon){
  color:#fff3ee !important;
}
.location-btn{
  border-color:rgba(255,246,229,.75) !important;
  color:#fff !important;
}

/* First invitation screen: couple illustration instead of venue photo */
.hero.hero-couple{
  min-height:100svh;
  height:auto;
  padding:86px 14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:
    radial-gradient(circle at 15% 16%,rgba(232,194,195,.24),transparent 25%),
    radial-gradient(circle at 84% 34%,rgba(237,216,211,.30),transparent 25%),
    #fbf6ee !important;
  overflow:hidden;
}
.hero-couple .top-monogram{
  top:24px;
}
.hero-blush-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(30px);
  pointer-events:none;
}
.blush-one{width:180px;height:180px;left:-80px;top:160px;background:rgba(225,176,180,.18)}
.blush-two{width:160px;height:160px;right:-70px;top:420px;background:rgba(229,192,190,.15)}
.hero-couple-art{
  position:relative;
  z-index:2;
  width:108%;
  max-width:520px;
  margin:6px auto -92px;
}
.hero-couple-art img{
  width:100%;
  display:block;
  object-fit:contain;
  background:transparent !important;
  filter:none !important;
}
.hero-couple .hero-card{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:5;
  width:100%;
  margin:0 auto;
  padding:54px 20px 26px;
  border-radius:110px 110px 28px 28px;
  background:#fffdf9 !important;
  border:1px solid rgba(197,139,145,.22);
  box-shadow:0 22px 55px rgba(119,87,81,.10);
}
.hero-couple .hero-card h1{
  color:#8e6668 !important;
}
.hero-couple .countdown{
  border-color:rgba(197,139,145,.24);
}
.hero-couple .countdown div{
  border-color:rgba(197,139,145,.20);
}

/* When & Where is now clean: no venue illustration image */
.whenwhere{
  padding-top:78px !important;
}
.whenwhere .date-stack{
  margin-top:32px;
}

/* Fatiha section: cleaner and more editorial */
.couple-story-section{
  padding-top:76px;
}
.couple-story-section .couple-art{
  margin-top:24px !important;
}
.milestone{
  padding-top:10px !important;
}
.milestone p{
  display:none !important;
}
.milestone em{
  margin-top:12px !important;
  color:#b1797d !important;
}

/* Petals are pinker, while foliage stays muted */
.petal{
  background:rgba(221,164,170,.74) !important;
}

/* Envelope intro */
.envelope-intro{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 12%,rgba(231,190,194,.26),transparent 22%),
    radial-gradient(circle at 88% 82%,rgba(234,199,199,.22),transparent 24%),
    #f8f1e8 !important;
  transition:opacity .7s ease, visibility .7s ease;
}
.envelope-intro.opened{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.envelope-scene{
  width:min(94vw,430px);
  text-align:center;
  position:relative;
  z-index:2;
}
.envelope-kicker{
  margin:0 0 22px;
  color:#9a726f;
  font:500 11px "Cormorant Garamond",serif;
  letter-spacing:.28em;
}
.envelope-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1.38/1;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  perspective:1200px;
  -webkit-tap-highlight-color:transparent;
}
.envelope-shadow{
  position:absolute;
  left:8%; right:8%; bottom:-5%;
  height:18%;
  border-radius:50%;
  background:rgba(90,63,58,.18);
  filter:blur(18px);
}
.envelope-back{
  position:absolute; inset:6% 4% 5%;
  border-radius:10px;
  background:#efe4d8;
  box-shadow:0 24px 50px rgba(98,70,62,.18);
}
.envelope-letter{
  position:absolute;
  z-index:2;
  left:11%; right:11%;
  top:17%;
  height:70%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:18px;
  background:#fffdf9;
  border:1px solid rgba(184,140,73,.20);
  box-shadow:0 10px 25px rgba(96,70,62,.08);
  transform:translateY(25%);
  transition:transform 1.05s cubic-bezier(.2,.75,.2,1);
}
.envelope-letter strong{
  color:#9f6d71;
  font:500 32px/1 "Cormorant Garamond",serif;
}
.envelope-letter strong em{
  display:block;
  color:#ba8c49;
  font:400 28px "Great Vibes",cursive;
  margin:4px 0;
}
.letter-small{
  font:500 9px "Cormorant Garamond",serif;
  letter-spacing:.16em;
  color:#846f68;
}
.envelope-front{
  position:absolute;
  z-index:4;
  left:4%; right:4%; bottom:5%;
  height:58%;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  background:
    linear-gradient(32deg,transparent 49%,#f5ebe1 50%) left/50% 100% no-repeat,
    linear-gradient(-32deg,transparent 49%,#f3e7dd 50%) right/50% 100% no-repeat,
    linear-gradient(180deg,#f6ede4,#f0e2d7);
  filter:drop-shadow(0 7px 6px rgba(83,58,53,.10));
}
.envelope-flap{
  position:absolute;
  z-index:5;
  left:4%; right:4%; top:6%;
  height:55%;
  transform-origin:top center;
  transition:transform .85s cubic-bezier(.35,.02,.2,1);
  clip-path:polygon(0 0,100% 0,50% 88%);
  background:
    linear-gradient(180deg,#fbf3eb,#efe1d5);
  filter:drop-shadow(0 6px 5px rgba(75,52,47,.10));
}
.wax-seal{
  position:absolute;
  z-index:7;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  border-radius:47% 53% 49% 51% / 54% 48% 52% 46%;
  color:#f7e4b8;
  background:
    radial-gradient(circle at 35% 28%,#d49aa0 0 8%,transparent 9%),
    radial-gradient(circle at 50% 50%,#bd7e86 0 57%,#a8646e 58% 68%,#c88d94 69% 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.28),
    inset 0 -6px 10px rgba(112,57,65,.25),
    0 10px 20px rgba(101,64,62,.22);
  transition:transform .45s ease,opacity .35s ease;
}
.wax-seal:before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px solid rgba(247,226,186,.55);
}
.seal-mm{
  position:relative;
  width:56px;
  height:49px;
}
.seal-mm b,.seal-mm i{
  position:absolute;
  top:1px;
  color:#f1d49c;
  font:500 38px "Cormorant Garamond",serif;
  font-style:normal;
  text-shadow:0 1px 1px rgba(92,50,48,.35);
}
.seal-mm b{left:1px}
.seal-mm i{right:0}
.seal-mm:after{
  content:"";
  position:absolute;
  left:50%;
  top:5px;
  width:1px;
  height:37px;
  background:rgba(244,213,157,.7);
  transform:rotate(18deg);
}
.wax-seal small{
  position:absolute;
  bottom:10px;
  font-size:6px;
  letter-spacing:.28em;
  opacity:.75;
}
.tap-seal{
  margin:24px 0 4px;
  color:#92736e;
  font:500 10px "Montserrat",sans-serif;
  letter-spacing:.22em;
}
.tiny-flourish{color:#ba8c49;font-size:22px}
.envelope-wrap.is-opening .envelope-flap{
  transform:rotateX(178deg);
  z-index:1;
}
.envelope-wrap.is-opening .wax-seal{
  transform:translate(-50%,-50%) scale(.68) rotate(-14deg);
  opacity:0;
}
.envelope-wrap.is-opening .envelope-letter{
  transform:translateY(-33%);
}
.envelope-wrap.is-opening .envelope-front{
  transform:translateY(9%);
  transition:transform .8s ease .25s;
}

/* decorative petals around envelope */
.envelope-petals i{
  position:absolute;
  width:13px;height:19px;
  border-radius:70% 30% 65% 35%;
  background:rgba(224,169,174,.62);
  filter:blur(.2px);
  animation:envPetal 7s ease-in-out infinite;
}
.envelope-petals i:nth-child(1){left:8%;top:12%;animation-delay:-1s}
.envelope-petals i:nth-child(2){right:9%;top:18%;animation-delay:-3s}
.envelope-petals i:nth-child(3){left:14%;bottom:15%;animation-delay:-4s}
.envelope-petals i:nth-child(4){right:13%;bottom:12%;animation-delay:-2s}
.envelope-petals i:nth-child(5){left:46%;top:7%;animation-delay:-5s}
.envelope-petals i:nth-child(6){right:36%;bottom:6%;animation-delay:-.5s}
@keyframes envPetal{
  50%{transform:translateY(12px) rotate(90deg);opacity:.45}
}

/* Keep dark-mode browser guard matching the new off-white/blush design */
.browser-guard,
.browser-guard-card{
  background:#fffdf9 !important;
}
.browser-guard-card h3{
  color:#8e6668 !important;
}
.browser-guard-open{
  background:#b77f86 !important;
}

/* desktop preview still feels like a phone invitation */
@media(min-width:481px){
  .envelope-intro{
    padding:18px 0;
  }
}



/* V7 — center hero couple artwork and preserve full floral frame */
.hero-couple-art{
  width:100% !important;
  max-width:500px !important;
  margin:10px auto -88px !important;
  padding:0 10px !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
}
.hero-couple-art img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:0 auto !important;
  transform:none !important;
}

/* Extra breathing room on narrow phones so right-side flowers never clip */
@media (max-width:420px){
  .hero-couple-art{
    width:96% !important;
    padding:0 8px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* =========================================================
   MAGICAL ENVELOPE V2 — fully closed, no visible paper
   ========================================================= */
.envelope-intro{
  position:fixed !important;
  inset:0 !important;
  z-index:1000000 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(227,187,188,.20), transparent 25%),
    radial-gradient(circle at 82% 72%, rgba(232,198,194,.18), transparent 28%),
    linear-gradient(180deg,#fbf6ee 0%,#f8f0e7 100%) !important;
  transition:opacity .8s ease, visibility .8s ease !important;
}
.envelope-intro.opened{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.envelope-scene{
  width:min(92vw,500px) !important;
  text-align:center !important;
  position:relative !important;
  z-index:3 !important;
}
.envelope-kicker{
  margin:0 0 28px !important;
  color:#a47a78 !important;
  font:500 11px "Cormorant Garamond",serif !important;
  letter-spacing:.30em !important;
}
.magic-envelope{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1.48/1 !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer !important;
  perspective:1400px !important;
  transform-style:preserve-3d !important;
  -webkit-tap-highlight-color:transparent !important;
}
.env-shadow{
  position:absolute !important;
  left:9% !important; right:9% !important; bottom:-6% !important;
  height:18% !important;
  background:rgba(87,62,57,.18) !important;
  filter:blur(22px) !important;
  border-radius:50% !important;
  z-index:0 !important;
}
.env-body{
  position:absolute !important;
  inset:5% 3% 4% !important;
  border-radius:14px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),transparent 40%),
    linear-gradient(180deg,#f5eadf,#efe0d4) !important;
  border:1px solid rgba(176,133,112,.10) !important;
  box-shadow:
    0 26px 60px rgba(100,72,64,.16),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  z-index:1 !important;
}
.env-letter{
  position:absolute !important;
  left:10% !important; right:10% !important;
  top:14% !important;
  height:68% !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  background:#fffdf9 !important;
  border:1px solid rgba(183,140,74,.18) !important;
  box-shadow:0 10px 28px rgba(86,61,54,.08) !important;
  transform:translateY(37%) scale(.96) !important;
  opacity:0 !important;
  transition:
    transform 1.15s cubic-bezier(.18,.8,.2,1) .48s,
    opacity .45s ease .55s !important;
}
.letter-border{
  position:absolute !important;
  inset:10px !important;
  border:1px solid rgba(192,143,148,.16) !important;
  pointer-events:none !important;
}
.letter-monogram{
  color:#ba8c49 !important;
  font:500 26px "Cormorant Garamond",serif !important;
  letter-spacing:.18em !important;
}
.letter-monogram b{font-weight:400;color:#c18e94 !important}
.letter-line{
  color:#966e72 !important;
  font:500 27px "Cormorant Garamond",serif !important;
}
.letter-date{
  color:#927e72 !important;
  font:500 10px "Montserrat",sans-serif !important;
  letter-spacing:.20em !important;
}

/* The front envelope panels completely cover the letter when closed */
.env-side,.env-bottom,.env-flap{
  position:absolute !important;
  z-index:6 !important;
  pointer-events:none !important;
}
.env-left{
  left:3% !important; bottom:4% !important;
  width:50% !important; height:72% !important;
  clip-path:polygon(0 0,100% 58%,100% 100%,0 100%) !important;
  background:linear-gradient(145deg,#f8eee4 0%,#edddd0 100%) !important;
}
.env-right{
  right:3% !important; bottom:4% !important;
  width:50% !important; height:72% !important;
  clip-path:polygon(100% 0,0 58%,0 100%,100% 100%) !important;
  background:linear-gradient(215deg,#f8eee4 0%,#ead9cc 100%) !important;
}
.env-bottom{
  left:3% !important; right:3% !important; bottom:4% !important;
  height:52% !important;
  clip-path:polygon(0 100%,50% 20%,100% 100%) !important;
  background:linear-gradient(180deg,#f6e9de,#edddd0) !important;
}
.env-flap{
  left:3% !important; right:3% !important; top:5% !important;
  height:62% !important;
  transform-origin:top center !important;
  transform:rotateX(0deg) !important;
  clip-path:polygon(0 0,100% 0,50% 78%) !important;
  background:
    linear-gradient(180deg,#fbf3eb,#efe0d4) !important;
  filter:drop-shadow(0 5px 5px rgba(82,58,53,.08)) !important;
  transition:transform .95s cubic-bezier(.25,.02,.16,1) !important;
}
.flap-lining{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  clip-path:inherit !important;
  background:
    radial-gradient(circle at 20% 35%,rgba(216,157,165,.25) 0 3%,transparent 4%),
    radial-gradient(circle at 72% 42%,rgba(224,178,181,.20) 0 3%,transparent 4%),
    linear-gradient(180deg,#f3dedd,#f8ece6) !important;
  transition:opacity .35s ease .25s !important;
}

/* Unique asymmetrical intertwined MM wax seal */
.wax-seal{
  position:absolute !important;
  z-index:10 !important;
  left:50% !important;
  top:51% !important;
  width:104px !important;
  height:104px !important;
  transform:translate(-50%,-50%) rotate(-4deg) !important;
  border-radius:48% 52% 44% 56% / 54% 45% 55% 46% !important;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,220,218,.36) 0 5%,transparent 6%),
    radial-gradient(circle at 50% 48%,#c78b92 0 55%,#a8626b 57% 70%,#d19ba0 71% 100%) !important;
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.28),
    inset 0 -8px 12px rgba(111,54,62,.25),
    0 12px 24px rgba(95,58,61,.24) !important;
  transition:transform .48s cubic-bezier(.2,.8,.2,1), opacity .35s ease !important;
}
.seal-rim{
  position:absolute !important;
  inset:10px !important;
  border:1px solid rgba(248,220,170,.58) !important;
  border-radius:50% !important;
}
.seal-mark{
  position:absolute !important;
  inset:18px !important;
}
.seal-mark .m-one,
.seal-mark .m-two{
  position:absolute !important;
  top:4px !important;
  color:#f2d29a !important;
  font:500 46px/.9 "Cormorant Garamond",serif !important;
  text-shadow:0 1px 1px rgba(88,46,48,.30) !important;
}
.seal-mark .m-one{
  left:2px !important;
  transform:rotate(-8deg) !important;
}
.seal-mark .m-two{
  right:0 !important;
  transform:rotate(10deg) translateY(2px) !important;
}
.seal-stem{
  position:absolute !important;
  left:50% !important;
  top:6px !important;
  width:1px !important;
  height:41px !important;
  background:linear-gradient(#f5d9a7,rgba(245,217,167,.25)) !important;
  transform:rotate(24deg) !important;
}
.seal-mark em{
  position:absolute !important;
  left:50% !important;
  bottom:-5px !important;
  transform:translateX(-50%) !important;
  color:#f3d5a0 !important;
  font:400 14px serif !important;
}
.tap-seal{
  margin:27px 0 5px !important;
  color:#96756f !important;
  font-size:10px !important;
  letter-spacing:.22em !important;
}
.tiny-flourish{color:#ba8c49 !important;font-size:22px !important}

/* little magical sparks around seal */
.seal-spark{
  position:absolute !important;
  z-index:11 !important;
  left:50% !important; top:51% !important;
  width:6px !important; height:6px !important;
  border-radius:50% !important;
  background:#f2d59a !important;
  opacity:0 !important;
  box-shadow:0 0 12px rgba(242,213,154,.95) !important;
}
.s1{transform:translate(-78px,-44px) !important}
.s2{transform:translate(68px,-34px) !important}
.s3{transform:translate(-66px,52px) !important}
.s4{transform:translate(72px,46px) !important}

/* magical ambient petals + glows */
.magic-glow{
  position:absolute !important;
  border-radius:50% !important;
  filter:blur(44px) !important;
  pointer-events:none !important;
}
.glow-a{width:240px;height:240px;left:-90px;top:12%;background:rgba(231,190,194,.18) !important}
.glow-b{width:260px;height:260px;right:-100px;bottom:8%;background:rgba(225,192,180,.17) !important}
.intro-petals i{
  position:absolute !important;
  width:12px !important;height:18px !important;
  border-radius:70% 30% 65% 35% !important;
  background:rgba(222,166,173,.58) !important;
  animation:magicPetal 6.8s ease-in-out infinite !important;
}
.intro-petals i:nth-child(1){left:7%;top:12%;animation-delay:-1s !important}
.intro-petals i:nth-child(2){right:8%;top:18%;animation-delay:-2.7s !important}
.intro-petals i:nth-child(3){left:12%;bottom:15%;animation-delay:-4.1s !important}
.intro-petals i:nth-child(4){right:12%;bottom:12%;animation-delay:-3.3s !important}
.intro-petals i:nth-child(5){left:46%;top:7%;animation-delay:-5.2s !important}
.intro-petals i:nth-child(6){right:36%;bottom:6%;animation-delay:-.8s !important}
.intro-petals i:nth-child(7){left:25%;top:45%;animation-delay:-4.8s !important}
.intro-petals i:nth-child(8){right:24%;top:54%;animation-delay:-2.1s !important}
@keyframes magicPetal{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:.42}
  50%{transform:translateY(14px) rotate(105deg);opacity:.72}
}

/* opening sequence */
.magic-envelope.is-opening .wax-seal{
  transform:translate(-50%,-50%) scale(.58) rotate(-25deg) !important;
  opacity:0 !important;
}
.magic-envelope.is-opening .seal-spark{
  animation:sparkPop .62s ease-out forwards !important;
}
.magic-envelope.is-opening .s2{animation-delay:.06s !important}
.magic-envelope.is-opening .s3{animation-delay:.10s !important}
.magic-envelope.is-opening .s4{animation-delay:.14s !important}
@keyframes sparkPop{
  0%{opacity:0;scale:.3}
  35%{opacity:1;scale:1.4}
  100%{opacity:0;scale:.4}
}
.magic-envelope.is-opening .env-flap{
  transform:rotateX(178deg) !important;
  z-index:3 !important;
}
.magic-envelope.is-opening .flap-lining{
  opacity:1 !important;
}
.magic-envelope.is-opening .env-letter{
  transform:translateY(-18%) scale(1) !important;
  opacity:1 !important;
  z-index:5 !important;
}
.magic-envelope.is-opening .env-left,
.magic-envelope.is-opening .env-right,
.magic-envelope.is-opening .env-bottom{
  transition:transform .8s ease .52s, opacity .7s ease .58s !important;
  transform:translateY(12%) !important;
  opacity:.96 !important;
}

/* mobile */
@media(max-width:520px){
  .envelope-scene{width:min(94vw,440px) !important}
  .wax-seal{width:90px !important;height:90px !important}
  .seal-mark .m-one,.seal-mark .m-two{font-size:40px !important}
}


/* Samsung guard must appear BEFORE the envelope.
   Keep the envelope hidden until browser detection finishes. */
.envelope-intro{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.envelope-intro.envelope-ready{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.envelope-intro.opened{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Browser guard always wins the stacking order */
.browser-guard{
  z-index:2000000 !important;
}