*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fffaf4;color:#4b3027;font-family:"DM Sans",sans-serif;overflow-x:hidden}img{max-width:100%;display:block}.eyebrow{font-size:.7rem;letter-spacing:.24em;font-weight:600;color:#a96d4d;margin:0 0 14px}.display,.section h2{font-family:"Cormorant Garamond",serif;font-size:clamp(3rem,7vw,6rem);line-height:.9;font-weight:500;margin:0}.display em,h2 em{font-family:"Great Vibes",cursive;font-weight:400;color:#bd7957}.ornament{font-family:"Cormorant Garamond";font-size:2rem;color:#bd7957;text-align:center;margin-bottom:10px}.section{padding:110px max(6vw,30px)}.nav{position:fixed;z-index:20;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;color:#fff;transition:.4s}.nav.scrolled{background:rgba(255,250,244,.93);backdrop-filter:blur(12px);color:#4b3027;box-shadow:0 3px 25px rgba(71,43,30,.08)}.nav-brand{font:2rem "Cormorant Garamond";color:inherit;text-decoration:none}.nav-brand span,.hero h2 span,footer h2 span{font-family:"Great Vibes";color:#d8956d}.nav nav{display:flex;gap:26px}.nav a{color:inherit;text-decoration:none;font-size:.75rem;letter-spacing:.12em}.nav-menu{display:none;background:none;border:0;font-size:1.4rem;color:inherit}.hero{height:100svh;min-height:720px;position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}.hero-bg{position:absolute;inset:0;background:url("assets/couple-standing.png") center 42%/cover no-repeat;filter:saturate(.9);transform:scale(1.02)}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(48,27,18,.55),rgba(112,62,35,.12) 55%,rgba(48,27,18,.28)),linear-gradient(0deg,rgba(45,25,18,.3),transparent 50%)}.hero-content{position:relative;text-align:center;padding:80px 20px 30px;text-shadow:0 2px 12px rgba(0,0,0,.18)}.hero-logo{width:min(190px,40vw);margin:0 auto 10px;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));border-radius:50%}.hero .eyebrow{color:#ffe9d5}.hero h2{font:clamp(4rem,10vw,9rem) "Cormorant Garamond";font-weight:500;margin:0;line-height:.82}.hero h2 span{font-size:.75em}.hero-sub{font:1.1rem "Cormorant Garamond";letter-spacing:.05em}.hero-date{display:inline-block;margin-top:18px;padding:10px 22px;border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);font-size:.75rem;letter-spacing:.22em}.scroll-cue{display:block;color:#fff;text-decoration:none;font-size:.65rem;letter-spacing:.2em;margin-top:70px}.scroll-cue b{display:block;font-size:1.3rem;margin-top:6px}.story-section{background:#fffaf4}.story-grid{max-width:1100px;margin:70px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,110px);align-items:center}.story-photo{position:relative}.story-photo img{width:100%;aspect-ratio:.82;object-fit:cover;border:10px solid #fff;box-shadow:0 22px 55px rgba(86,52,33,.17)}.tilt-left{transform:rotate(-2deg)}.story-copy{font-family:"Cormorant Garamond";font-size:1.35rem;line-height:1.45}.story-copy h3{font-size:3.4rem;line-height:.9;font-weight:500;margin:12px 0 28px}.story-copy h3 em{font-family:"Great Vibes";color:#bd7957;font-weight:400}.chapter-number{letter-spacing:.2em;font:600 .7rem "DM Sans";color:#bd7957}.quote{border-left:2px solid #dca17e;padding:14px 0 14px 20px;font-family:"Great Vibes";font-size:2rem;color:#9e6146;margin-top:28px}.souls{display:grid;grid-template-columns:1fr 1fr;background:#f4e5d7}.soul-card{min-height:850px;position:relative;display:grid;grid-template-rows:52% 48%;overflow:hidden}.soul-image img{width:100%;height:100%;object-fit:cover}.groom-card .soul-image img{object-position:center 35%}.soul-copy{padding:45px 12% 65px;position:relative;background:#fffaf4}.bride-card .soul-copy{background:#e8c6b1}.soul-copy h2{font:4rem "Great Vibes";margin:0 0 10px;color:#8d4f36}.parents{font-family:"Cormorant Garamond";font-size:1.1rem;line-height:1.45}.soul-copy>p:not(.eyebrow):not(.parents){font:1.08rem/1.7 "Cormorant Garamond";margin:15px 0}.between{min-height:680px;position:relative;display:grid;place-items:center;overflow:hidden}.between-photo{position:absolute;inset:0;background:url("assets/couple-candid.png") center/cover;filter:brightness(.48) saturate(.75)}.between-copy{position:relative;color:#fff;text-align:center;padding:30px}.between-copy h2{font:clamp(3rem,7vw,6.5rem)/.95 "Cormorant Garamond";font-weight:500;margin:0}.between-copy em{color:#ffd1ae}.countdown-section{text-align:center;padding:110px 20px;background:radial-gradient(circle,#fffdf8,#f2ded0)}.countdown-section h2{font:clamp(3rem,7vw,6rem) "Cormorant Garamond";font-weight:500;margin:0 0 50px}.countdown{display:flex;justify-content:center;align-items:center;gap:22px}.countdown div{min-width:115px}.countdown span{display:block;font:4.5rem/.9 "Cormorant Garamond";color:#914e35}.countdown small{font-size:.6rem;letter-spacing:.2em;color:#a36c55}.countdown i{font:2rem "Cormorant Garamond";color:#c58b69}.countdown-date{font:.7rem "DM Sans";letter-spacing:.25em;margin-top:45px}.celebrations{text-align:center;background:#fffaf4}.event-grid{max-width:1050px;margin:65px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;text-align:center}.event-card{padding:55px 50px;background:#f5e4d6;border:1px solid #e6c8b5;position:relative}.event-card.featured{background:#cf8866;color:#fff}.event-no{position:absolute;right:24px;top:20px;font:2rem "Cormorant Garamond";opacity:.25}.event-icon{font-size:2.5rem;color:#a76345}.featured .event-icon,.featured .eyebrow{color:#fff0e3}.event-card h3{font:3.6rem "Cormorant Garamond";font-weight:500;margin:10px}.event-date{font-size:.72rem;font-weight:600;letter-spacing:.13em;margin:20px 0}.event-card>p:not(.eyebrow){font:1rem/1.6 "Cormorant Garamond"}.detail-pending{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:7px;font-size:.62rem;letter-spacing:.16em}.memories{padding:110px 8vw;display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;background:#3f5b46;color:#fff;overflow:hidden}.memories .eyebrow{color:#e9bd98}.memories h2{font:clamp(3rem,6vw,5.5rem) "Cormorant Garamond";line-height:.95;font-weight:500;margin:0}.memories h2 em{color:#f4c4a0}.memories p:not(.eyebrow){max-width:470px;font:1.15rem/1.6 "Cormorant Garamond";margin:30px 0}.royal-btn{display:inline-flex;align-items:center;gap:20px;padding:16px 24px;background:#d98d68;color:#fff;text-decoration:none;font-size:.65rem;font-weight:600;letter-spacing:.16em;transition:.3s}.royal-btn:hover{transform:translateY(-3px);background:#bd7150}.polaroids{height:500px;position:relative}.polaroid{position:absolute;background:#fff;padding:10px 10px 35px;width:44%;box-shadow:0 15px 35px rgba(0,0,0,.2)}.polaroid img{width:100%;height:260px;object-fit:cover}.p1{left:4%;top:20px;transform:rotate(-8deg)}.p2{right:3%;top:70px;transform:rotate(7deg)}.p3{left:29%;bottom:5px;transform:rotate(-1deg)}.rsvp{text-align:center;background:#fffaf4}.rsvp>p:not(.eyebrow){font:1.2rem/1.7 "Cormorant Garamond";max-width:600px;margin:30px auto}.rsvp .royal-btn{margin-top:8px}.music-btn{position:fixed;z-index:25;right:22px;bottom:22px;width:48px;height:48px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:#9e6047;color:#fff;font-size:1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.18)}footer{text-align:center;padding:80px 20px;background:#37271f;color:#f8e9da}footer img{width:90px;margin:0 auto 5px;border-radius:50%}footer h2{font:4rem "Cormorant Garamond";font-weight:500;margin:0}footer p{font-size:.65rem;letter-spacing:.24em}.footer-line{width:100px;height:1px;background:#bd8b69;margin:30px auto}footer small{font-size:.55rem;letter-spacing:.18em;color:#cdb6a3}

/* CLEAN VERSION 3 ROYAL DOUBLE-DOOR INTRO */
.opening{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 25%, rgba(248,220,169,.16), transparent 28%),
    linear-gradient(135deg,#1e1113 0%,#4b261f 45%,#170e10 100%);
  overflow:hidden;
  transition:opacity 1s ease, visibility 1s ease;
}
.opening.opened{opacity:0;visibility:hidden;pointer-events:none}
.palace-glow{position:absolute;inset:0;background-image:radial-gradient(rgba(239,197,124,.32) 1px,transparent 1.5px);background-size:38px 38px;opacity:.38}
.door-scene{position:relative;width:min(700px,92vw);height:min(700px,70vh);display:grid;place-items:center;padding-top:50px}
.door-frame{
  position:relative;width:min(590px,84vw);height:min(580px,60vh);
  background:#2c1518;
  border:10px solid #bd9154;
  outline:4px solid #63372b;
  box-shadow:0 0 0 2px #d8b676,0 32px 90px rgba(0,0,0,.55),inset 0 0 60px rgba(244,197,111,.1);
  overflow:visible;
}
.arch{
  position:absolute;top:0;width:min(420px,61vw);height:190px;
  border:11px solid #bd9154;border-bottom:0;border-radius:420px 420px 0 0;
  box-shadow:0 -3px 0 #63372b,0 0 0 4px #63372b;
  transform:translateY(-42px);z-index:1;
}
.door{
  position:absolute;top:0;bottom:0;width:50%;z-index:4;
  background:
    linear-gradient(90deg,rgba(255,218,147,.1),transparent 15%,rgba(0,0,0,.22) 50%,rgba(255,220,150,.08)),
    linear-gradient(145deg,#80382d,#4a201d 65%,#321618);
  box-shadow:inset 0 0 35px rgba(0,0,0,.28);
  transition:transform 1.65s cubic-bezier(.2,.82,.18,1),filter 1.65s ease;
  will-change:transform;
}
.door-left{left:0;transform-origin:left center;border-right:1px solid rgba(232,194,120,.45)}
.door-right{right:0;transform-origin:right center;border-left:1px solid rgba(232,194,120,.45)}
.door-border{position:absolute;inset:23px;border:2px solid rgba(228,187,109,.9);box-shadow:inset 0 0 0 8px rgba(74,29,26,.45)}
.door-border:before,.door-border:after{content:"";position:absolute;left:15%;right:15%;height:34%;border:2px solid rgba(228,187,109,.7);box-shadow:inset 0 0 0 6px rgba(65,24,23,.22)}
.door-border:before{top:13%}.door-border:after{bottom:13%}
.door-carving{position:absolute;left:50%;transform:translateX(-50%);font-family:"Cormorant Garamond";color:#d9af69;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.carving-a{top:20%;font-size:5rem}.carving-b{bottom:20%;font-size:2.3rem}
.door-right .carving-a{transform:translateX(-50%) scaleX(-1)}
.logo-medallion{
  position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);
  width:155px;height:155px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#fffaf0,#e8cfa7);
  border:5px solid #c69a58;
  box-shadow:0 0 0 5px #63372b,0 12px 34px rgba(0,0,0,.42);
  transition:opacity .4s ease,transform .7s ease;
}
.logo-medallion:before{content:"";position:absolute;inset:-13px;border:1px solid #d7b16d;border-radius:50%}
.logo-medallion img{width:132px;height:132px;object-fit:contain;border-radius:50%}
.center-seal{position:absolute;z-index:7;left:50%;top:50%;width:7px;height:100%;transform:translateX(-50%);background:linear-gradient(#e1bd77,#5b2e26,#e1bd77);box-shadow:0 0 14px rgba(0,0,0,.65)}
.door-instruction{position:relative;z-index:12;text-align:center;color:#f6dcc1;margin-top:20px}
.door-instruction button{
  position:relative;width:148px;height:50px;overflow:hidden;border-radius:28px;
  border:1px solid #d7ad70;background:rgba(42,19,20,.52);color:#ffe8ca;cursor:pointer;
  font:600 .62rem "DM Sans";letter-spacing:.17em;
}
.hold-progress{position:absolute;inset:0;background:#9b6048;transform:scaleX(0);transform-origin:left}
.hold-label{position:relative;z-index:2}.door-instruction p{font:.62rem "DM Sans";letter-spacing:.17em;margin:12px 0 0}
.opening.holding .hold-progress{animation:doorFill 1.5s linear forwards}
@keyframes doorFill{to{transform:scaleX(1)}}
.opening.opening-door .door-left{transform:perspective(1000px) rotateY(-115deg)}
.opening.opening-door .door-right{transform:perspective(1000px) rotateY(115deg)}
.opening.opening-door .door{filter:brightness(.7)}
.opening.opening-door .logo-medallion{opacity:0;transform:translate(-50%,-50%) scale(.65)}
.opening.opening-door .center-seal{opacity:0}

/* FACE-FRIENDLY EDITORIAL IMAGE CROPPING */
.hero{background:#30211e}
.hero-bg{
  background-image:url("assets/couple-standing.png");
  background-size:cover;
  background-position:center 24%;
  background-repeat:no-repeat;
  transform:none;
}
.story-photo img,.soul-image img,.polaroid img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  background:#f2e1d3;
}
/* Groom and bride portraits: prioritize face and upper body */
#groom .soul-image img{object-position:center 18%}
#bride .soul-image img{object-position:center 20%}
/* Couple imagery: keep both faces inside the frame */
.couple-photo img,.story-photo.couple img{
  object-fit:cover;
  object-position:center 18%;
}
.between-photo{
  background-size:cover;
  background-position:center 20%;
  background-repeat:no-repeat;
  background-color:#45342e;
}
@media(max-width:760px){
  .door-scene{height:65vh;padding-top:45px}
  .door-frame{height:55vh;border-width:7px}
  .arch{height:120px;transform:translateY(-32px);border-width:7px}
  .logo-medallion{width:120px;height:120px}
  .logo-medallion img{width:102px;height:102px}
  .door-border{inset:15px}
  .carving-a{font-size:3.6rem}.carving-b{font-size:1.8rem}
  .door-instruction{margin-top:10px}
}

/* Mobile composition: crop closer, but keep faces visible */
@media(max-width:760px){
  .hero-bg{background-position:center 16%}
  .story-photo img,.soul-image img,.polaroid img{object-position:center 15%}
  #groom .soul-image img{object-position:center 12%}
  #bride .soul-image img{object-position:center 14%}
  .between-photo{background-position:center 16%}
}




/* VERSION 6: MOBILE KEEPS THE DESKTOP VISUAL LANGUAGE */
@media(max-width:768px){
  html,body{overflow-x:hidden;width:100%;background:#fffaf4}
  .nav{padding:14px 5vw}
  .nav-brand{font-size:1.8rem}
  .nav nav{display:flex;gap:12px;overflow-x:auto;max-width:70vw;padding-bottom:3px}
  .nav nav a{font-size:.58rem;white-space:nowrap}
  .nav-menu{display:none}

  /* Keep hero composition visually equivalent to desktop */
  .hero{height:100svh;min-height:650px}
  .hero-bg{background-size:cover;background-position:center 18%}
  .hero-content{padding:85px 18px 30px}
  .hero-logo{width:min(165px,42vw)}
  .hero h2{font-size:clamp(3.8rem,15vw,6.2rem)}
  .hero-sub{font-size:1rem}
  .scroll-cue{margin-top:45px}

  /* Preserve desktop section spacing and visual scale */
  .section{padding:82px max(6vw,22px)}
  .display,.section h2{font-size:clamp(3.1rem,13vw,5.2rem)}

  /* Story keeps image + text rhythm but stacks cleanly without redesign */
  .story-grid{grid-template-columns:1fr;gap:38px;margin-top:48px}
  .story-photo{width:min(100%,540px);margin:auto}
  .story-photo img{aspect-ratio:.82;object-fit:cover;object-position:center 18%}
  .story-copy{max-width:600px;margin:auto;font-size:1.22rem}
  .story-copy h3{font-size:3rem}

  /* Bride and groom retain the original image-over-copy card appearance */
  .souls{grid-template-columns:1fr}
  .soul-card{min-height:auto;grid-template-rows:470px auto}
  .soul-image{height:470px}
  .soul-image img{height:100%;object-fit:cover;object-position:center 16%}
  .soul-copy{padding:40px 10% 55px}
  .soul-copy h2{font-size:3.7rem}
  .soul-copy>p:not(.eyebrow):not(.parents){font-size:1.08rem}
  .groom-card .soul-image img{object-position:center 12%}
  .bride-card .soul-image img{object-position:center 14%}

  /* Full cinematic couple section */
  .between{min-height:580px}
  .between-photo{background-size:cover;background-position:center 18%}
  .between-copy{padding:25px}
  .between-copy h2{font-size:clamp(3.1rem,12vw,5.5rem)}

  /* Desktop-style countdown, scaled down rather than redesigned */
  .countdown-section{padding:85px 14px}
  .countdown{display:flex;gap:9px;flex-wrap:nowrap}
  .countdown div{min-width:0;flex:1}
  .countdown span{font-size:clamp(2.1rem,10vw,3.4rem)}
  .countdown i{font-size:1.25rem}

  /* Event cards retain their two-card relationship when space allows */
  .event-grid{grid-template-columns:1fr 1fr;gap:12px}
  .event-card{padding:38px 16px}
  .event-card h3{font-size:2.65rem}
  .event-card>p:not(.eyebrow){font-size:.95rem}

  /* Memories keeps text + photo collage as the desktop concept */
  .memories{grid-template-columns:1fr;gap:28px;padding:78px 7vw}
  .polaroids{height:440px;width:100%;max-width:520px;margin:auto}
  .polaroid{width:43%}
  .polaroid img{height:225px;object-fit:cover;object-position:center 18%}

  .rsvp{padding:82px 8vw}
  footer{padding:65px 20px}
  footer h2{font-size:3.2rem}

  /* Royal doors: same proportions, scaled to viewport */
  .door-scene{width:100vw;height:68svh;padding-top:35px}
  .door-frame{width:min(590px,86vw);height:min(580px,58svh)}
  .arch{width:min(420px,61vw);height:135px}
  .logo-medallion{width:130px;height:130px}
  .logo-medallion img{width:110px;height:110px}
  .door-border{inset:16px}
  .carving-a{font-size:3.9rem}
  .carving-b{font-size:1.9rem}
  .door-instruction{margin-top:8px}
}

/* Very narrow phones only receive proportional scaling */
@media(max-width:390px){
  .nav nav{max-width:67vw}
  .hero h2{font-size:3.55rem}
  .soul-card{grid-template-rows:420px auto}
  .soul-image{height:420px}
  .event-card{padding:30px 12px}
  .event-card h3{font-size:2.35rem}
  .countdown span{font-size:2rem}
  .door-frame{width:88vw;height:55svh}
  .logo-medallion{width:112px;height:112px}
  .logo-medallion img{width:94px;height:94px}
}

/* V10: only the left-corner S ♥ A mark uses the uploaded logo */
.corner-logo-image{
  display:block;
  width:42px;
  max-width:42px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
#holdButton, .hold-label-image{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.hold-label-image{
  display:block;
  width:178px;
  height:auto;
  pointer-events:none;
  -webkit-user-drag:none;
}