*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:Arial;background:#fff;color:#70104d}body.locked{overflow:hidden}img{width:100%;display:block}.cover{position:fixed;inset:0;z-index:9;background:#fff;display:grid;place-items:center;overflow:auto;transition:.7s}.cover.hide{opacity:0;visibility:hidden;pointer-events:none}.cover>img,.screen{width:min(100%,700px);margin:auto}.cover>img{min-height:100svh;object-fit:cover;object-position:top}.cover button{position:absolute;top:61%;left:50%;transform:translate(-50%,-50%);width:170px;height:170px;border:0;background:none;color:#a5126d}.cover i{position:absolute;inset:40px;border:2px solid #d0a344;border-radius:50%;animation:p 2s infinite}.cover i:nth-child(2){animation-delay:.4s}.cover i:nth-child(3){animation-delay:.8s}.cover b{position:absolute;top:145px;left:50%;transform:translateX(-50%);white-space:nowrap;font:24px Georgia;text-transform:uppercase}@keyframes p{to{transform:scale(1.6);opacity:0}}#main{opacity:0;transition:.7s}#main.show{opacity:1}.menu{position:relative}.hot{position:absolute;top:74%;height:12%;width:25%;border:0;background:transparent}.inv{left:17%}.loc{left:39%}.gal{right:15%}.screen{position:relative;padding-bottom:70px}.back{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:30px;border:1px solid #c99a3c;background:white;color:#a5126d}.location,.rsvp{min-height:65svh;display:grid;place-items:center;padding:40px 24px;text-align:center;background:#fff8fb}.location div{max-width:520px;border:1px solid #c99a3c;padding:40px 24px;border-radius:25px}.location h1,.rsvp h1{font:48px Georgia;margin:12px}.location a,.rsvp a,.location button{display:inline-block;margin:20px 5px 0;padding:13px 22px;border-radius:30px;text-decoration:none;background:#a5126d;color:white;border:0}.rsvp{min-height:50svh}@media(max-width:600px){.cover button{width:140px;height:140px}.cover b{top:120px;font-size:19px}}
/* V2 envelope-opening interaction */
.cover>img{
  transform-origin:50% 46%;
  transition:transform .95s cubic-bezier(.2,.75,.2,1),filter .8s ease,opacity .8s ease;
}
.cover.opening>img{
  transform:perspective(1100px) rotateX(-12deg) translateY(-7vh) scale(1.035);
  filter:brightness(1.08);
}
.cover.opening #open{
  animation:sealPop .65s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes sealPop{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  55%{transform:translate(-50%,-50%) scale(1.16);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.15);opacity:0}
}
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spark{
  position:absolute;width:8px;height:8px;background:#ffd66b;
  transform:rotate(45deg);box-shadow:0 0 10px #ffd66b,0 0 20px #fff2a8;
  animation:sparkBurst 1s ease-out forwards;
}
.spark:after,.spark:before{content:"";position:absolute;background:#fff4bd}
.spark:before{width:2px;height:18px;left:3px;top:-5px}
.spark:after{height:2px;width:18px;top:3px;left:-5px}
@keyframes sparkBurst{
  0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.2)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(1.2)}
}

/* V3: visible envelope flap opening + countdown */
.envelope-anim{position:absolute;left:0;right:0;top:0;height:57%;pointer-events:none;perspective:1100px;z-index:2}
.env-pocket{position:absolute;inset:0;background:transparent}
.env-flap{position:absolute;left:0;right:0;top:0;height:100%;transform-origin:50% 0%;transform:rotateX(0deg);transition:transform 1.05s cubic-bezier(.2,.75,.2,1),filter .8s;clip-path:polygon(0 0,100% 0,50% 100%);background:rgba(169,15,112,.03);border-top:2px solid rgba(201,154,60,.25)}
.cover.opening .env-flap{transform:rotateX(165deg);filter:brightness(1.12)}
.cover.opening .cover-bg{transform:translateY(-4vh) scale(1.025)}
.cover #open{z-index:5}
.countdown-box{position:absolute;z-index:4;left:50%;bottom:3.2%;transform:translateX(-50%);width:min(92%,520px);text-align:center;color:#8e145d;background:rgba(255,255,255,.88);padding:10px 12px 12px;border-radius:18px;border:1px solid rgba(201,154,60,.45);backdrop-filter:blur(5px)}
.countdown-box>p{font-size:.58rem;letter-spacing:.18em;margin-bottom:8px;font-weight:700}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.countdown div{padding:5px 2px}
.countdown strong{display:block;font:600 1.45rem Georgia;color:#a5126d}
.countdown span{display:block;font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:#806271}
@media(max-width:600px){.countdown-box{bottom:2%;}.countdown strong{font-size:1.2rem}}

/* V4 dedicated countdown page */
.countdown-page{min-height:100svh;display:grid;place-items:center;padding:54px 22px;background:linear-gradient(155deg,#fffaf7 0%,#f8edf3 58%,#f2e3ec 100%);text-align:center}
.countdown-card{width:min(94%,620px);padding:52px 22px;border:1px solid rgba(201,154,60,.55);border-radius:30px;background:rgba(255,255,255,.82);box-shadow:0 22px 60px rgba(130,16,82,.10)}
.count-kicker{text-transform:uppercase;letter-spacing:.25em;font-size:.7rem;color:#a5126d}
.countdown-card h1{font:500 clamp(2.6rem,9vw,4.8rem) Georgia;color:#8a1158;margin:12px auto 16px;line-height:1}
.count-date{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#7a614f}
.countdown-page .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:32px auto;width:min(100%,520px)}
.countdown-page .countdown div{padding:18px 5px;border:1px solid rgba(201,154,60,.35);border-radius:18px;background:#fff}
.countdown-page .countdown strong{display:block;font:600 clamp(2rem,8vw,3.7rem) Georgia;color:#a5126d}
.countdown-page .countdown span{display:block;margin-top:4px;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:#806271}
.count-note{max-width:440px;margin:0 auto;line-height:1.7;color:#735565}

.gallery-reel{min-height:100svh;padding:50px 18px 40px;text-align:center;background:linear-gradient(160deg,#a70d70,#c01783 55%,#8c0b5d);color:white}.gk{font-size:.65rem;letter-spacing:.24em;color:#f1d39b}.gallery-reel h1{font:500 clamp(2.7rem,9vw,4.7rem) Georgia;margin:8px 0 24px}.reel{position:relative;width:min(94%,600px);height:min(72svh,760px);margin:auto;border:1px solid #ddb05a;border-radius:28px;overflow:hidden;background:#5f073e}.slide{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 4.5s ease}.slide.active{opacity:1;transform:scale(1);z-index:2}.slide img{width:100%;height:100%;object-fit:cover}.arr{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #fff9;background:#57003366;color:white;font-size:2rem}.prev{left:12px}.next{right:12px}.dots{position:absolute;z-index:6;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:9px}.dots i{width:8px;height:8px;border:1px solid white;border-radius:50%}.dots i.active{background:#e5b75c}.cap{font:italic 1.1rem Georgia;margin:20px auto}.gallery-back{padding:12px 24px;border-radius:999px;border:1px solid #e0b359;background:white;color:#a5126d}

/* V6 — 40 Years of Grace + music */
.grace-section{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:54px 22px;text-align:center;background:radial-gradient(circle at 50% 35%,#c62b8b 0,#a90f70 48%,#76084b 100%);color:#fff}
.grace-inner{position:relative;z-index:2;width:min(94%,620px)}
.grace-kicker{text-transform:uppercase;letter-spacing:.3em;font-size:.64rem;color:#f1d39b}
.grace-number{font:500 clamp(8rem,38vw,16rem) Georgia;line-height:.82;margin:24px 0 4px;background:linear-gradient(135deg,#fff0b8,#d19b35 45%,#fff3c8 70%,#a96c19);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 18px #4d002e66)}
.grace-section h1{font:500 clamp(3rem,12vw,6rem) Georgia;color:#fff8ed;line-height:.95}
.grace-copy{max-width:480px;margin:25px auto 0;font:italic 1.25rem/1.6 Georgia;color:#fbe9f3}
.music-toggle{margin-top:34px;padding:12px 22px;border:1px solid #e1b85e;border-radius:999px;background:#fffaf0;color:#9b0e66;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
.grace-sparkles{position:absolute;inset:0;background-image:radial-gradient(circle,#ffd978 0 1.5px,transparent 2px),radial-gradient(circle,#fff3b0 0 1px,transparent 1.5px);background-size:78px 78px,115px 115px;background-position:0 0,28px 44px;opacity:.55;animation:graceDrift 12s linear infinite}
@keyframes graceDrift{to{transform:translateY(-70px)}}
.music-float{position:fixed;z-index:50;right:16px;bottom:18px;width:48px;height:48px;border-radius:50%;border:1px solid #e0b45b;background:#a90f70;color:#fff;box-shadow:0 8px 24px #55003244;font-size:1.15rem}

/* Preserve original cover artwork proportions on phones */
.cover{background:#fff;overflow-y:auto;overflow-x:hidden;align-items:start}
.cover>img,.cover>img.cover-bg{width:100%!important;height:auto!important;min-height:0!important;max-width:700px;object-fit:contain!important;object-position:top center!important;margin:0 auto}
.cover #open{top:61%!important;left:50%}
.cover.opening>img,.cover.opening .cover-bg{transform:translateY(-2vh) scale(1.015)}
@media(max-width:600px){
.cover{display:block!important}
.cover>img,.cover>img.cover-bg{width:100vw!important;max-width:none!important;height:auto!important;min-height:0!important;object-fit:contain!important}
.cover #open{position:absolute;top:61%!important;width:140px;height:140px}
}

/* V8 — responsive opening screen rebuilt for exact mobile alignment */
.cover-v8{
  position:fixed;inset:0;z-index:1000;display:block!important;
  min-height:100svh;overflow:hidden;background:#fff;
}
.v8-envelope{
  position:absolute;left:0;top:0;width:100%;height:55svh;
  background:#a60f70;border-top:2px solid #c99a3c;
}
.v8-envelope:after{
  content:"";position:absolute;left:0;right:0;bottom:-20svh;height:21svh;
  background:#a60f70;
  clip-path:polygon(0 0,50% 100%,100% 0);
  border-bottom:2px solid #c99a3c;
}
.v8-flap{
  position:absolute;z-index:3;left:0;top:0;width:100%;height:55svh;
  transform-origin:50% 0;transform:rotateX(0deg);
  transition:transform 1.05s cubic-bezier(.2,.75,.2,1),filter .8s ease;
  background:#a60f70;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.cover-v8.opening .v8-flap{transform:perspective(1000px) rotateX(168deg);filter:brightness(1.08)}
.v8-seal{
  position:absolute!important;z-index:8;left:50%!important;top:auto!important;
  bottom:-25svh;transform:translateX(-50%)!important;width:150px!important;height:150px!important;
  border:0;border-radius:50%;background:
    radial-gradient(circle at 35% 28%,#fff0a0 0 5%,transparent 6%),
    radial-gradient(circle at 50% 50%,#e3b84f 0 50%,#b77a1e 64%,#f1cf68 77%,#93601a 100%);
  box-shadow:inset 0 0 0 6px #d49b30,inset 0 0 0 10px #f1cd66,0 10px 20px #5b361c55;
}
.v8-seal:before{
  content:"";position:absolute;inset:-10px;border-radius:47% 53% 49% 51%;
  border:9px solid #c58b27;filter:drop-shadow(0 2px 2px #70431155);
}
.v8-tap{
  position:absolute;z-index:7;top:76svh;left:0;right:0;text-align:center;
  color:#a60f70;font:400 clamp(1.55rem,6vw,2.1rem) Georgia,serif;letter-spacing:.02em;
}
.v8-flowers{
  position:absolute;z-index:5;left:0;right:0;bottom:0;height:24svh;
  background:url("gallery.png") center bottom/cover no-repeat;
  /* use only the floral-like brand colors from existing artwork as a soft base */
  opacity:0;
}
.cover-v8:after{
  content:"";position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:23svh;
  background:
    radial-gradient(ellipse at 50% 100%,#b10d70 0 13%,transparent 14%),
    radial-gradient(ellipse at 35% 96%,#d62c88 0 12%,transparent 13%),
    radial-gradient(ellipse at 65% 96%,#d62c88 0 12%,transparent 13%),
    radial-gradient(ellipse at 17% 100%,#e873a9 0 10%,transparent 11%),
    radial-gradient(ellipse at 83% 100%,#e873a9 0 10%,transparent 11%),
    linear-gradient(165deg,transparent 40%,#b98a43 41% 43%,transparent 44%) 15% 20%/25% 80%,
    linear-gradient(195deg,transparent 40%,#b98a43 41% 43%,transparent 44%) 85% 20%/25% 80%;
}
.cover-v8.opening .v8-seal{animation:sealPopV8 .7s ease forwards}
@keyframes sealPopV8{
  0%{transform:translateX(-50%) scale(1);opacity:1}
  55%{transform:translateX(-50%) scale(1.14);opacity:1}
  100%{transform:translateX(-50%) scale(.2);opacity:0}
}
.music-float{right:18px!important;bottom:18px!important;width:50px!important;height:50px!important}
@media(max-height:720px){
 .v8-envelope,.v8-flap{height:51svh}
 .v8-seal{bottom:-27svh}
 .v8-tap{top:75svh}
}

/* V9 exact user-supplied opening artwork */
.exact-cover{position:fixed!important;inset:0!important;z-index:1000!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;background:#fff!important;overflow:auto!important}
.exact-cover-art{display:block!important;width:100vw!important;height:auto!important;min-height:0!important;max-width:700px!important;object-fit:contain!important;object-position:top center!important;margin:0 auto!important;transform:none!important}
.exact-seal-hotspot{position:absolute!important;z-index:8!important;left:50%!important;top:58.5%!important;transform:translate(-50%,-50%)!important;width:170px!important;height:170px!important;border:0!important;border-radius:50%!important;background:transparent!important;-webkit-tap-highlight-color:transparent!important}
.exact-cover.opening .exact-cover-art{animation:coverLift .95s ease forwards}
.exact-cover.opening .exact-seal-hotspot{animation:sealTap .65s ease forwards}
@keyframes coverLift{0%{transform:scale(1)}45%{transform:scale(1.018) translateY(-5px)}100%{transform:scale(1.025) translateY(-14px);filter:brightness(1.06)}}
@keyframes sealTap{0%{transform:translate(-50%,-50%) scale(1)}55%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(.25);opacity:0}}
@media(max-width:600px){.exact-cover-art{max-width:none!important}.exact-seal-hotspot{top:58.5%!important;width:145px!important;height:145px!important}}

/* CLICK FIX: entire opening screen + seal are interactive */
.exact-cover{cursor:pointer!important;touch-action:manipulation!important}
.exact-cover-art{pointer-events:none!important}
.exact-seal-hotspot{
  pointer-events:auto!important;
  z-index:1005!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
.sparkles{pointer-events:none!important}