:root{
  --cream:#f7f6ef;
  --cream-deep:#efece0;
  --ink:#4a3d33;
  --brown:#8f6e59;
  --brown-soft:#a9876e;
  --gold:#c49d5e;
  --gold-deep:#a9793f;
  --line:rgba(143,110,89,.32);
  --env-bg:#eddccb;
  --env-bg-deep:#e6d2bd;
  --env-monogram:#ab8058;
}
*{box-sizing:border-box;}
html,body,#root{margin:0;padding:0;}
body{
  background:#e6e2d4;
  color:var(--ink);
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
}
.app{
  position:relative;
  max-width:560px;
  margin:0 auto;
  background:var(--cream);
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  box-shadow:0 0 60px rgba(30,20,10,.10);
}
img{display:block;max-width:100%;}
button{font:inherit;}

.label{
  font-family:'Jost',Arial,sans-serif;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--brown-soft);
}

.divider{width:34px;height:1px;background:var(--line);margin:22px auto;}
.divider.dot::before{
  content:'\2726';
  display:block;text-align:center;
  color:var(--gold-deep);font-size:.8rem;
  margin-bottom:10px;letter-spacing:0;
}

/* ================= ENVELOPE ================= */
.envelope{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  background:var(--env-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  perspective:1500px;
  perspective-origin:50% 40%;
  transition:opacity .7s ease, transform .7s ease, visibility .7s;
}
.envelope::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(0,0,0,.05), transparent 60%),
    repeating-linear-gradient(115deg, rgba(110,80,50,.03) 0px, rgba(110,80,50,.03) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.envelope.gone{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(26px) scale(1.035);
}

.env-inner{
  position:absolute;
  top:calc(57% - 70px);
  left:0; right:0;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center;
}

.env-monogram{
  position:absolute; top:33%; left:0; right:0;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:3.1rem;
  letter-spacing:.05em;
  color:var(--env-monogram);
  transition:opacity .35s ease;
}
.envelope.opening .env-monogram{opacity:0;}
.env-monogram i{
  display:inline-block;
  width:1px; height:46px;
  background:var(--env-monogram);
  font-style:normal;
}

.env-crease{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  transition:opacity .4s ease .55s;
}
.env-crease line{
  stroke:var(--env-monogram);
  stroke-opacity:.55;
  stroke-width:1.4;
  stroke-linecap:round;
}
.envelope.opening .env-crease{opacity:0; transition:opacity .3s ease;}

.env-flap{
  position:absolute; top:0; left:0;
  z-index:1;
  width:100%; height:57%;
  background:linear-gradient(200deg,var(--env-bg) 0%, var(--env-bg-deep) 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0%;
  transform:rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.55,.06,.28,1), opacity .5s ease .6s;
  filter:drop-shadow(0 10px 14px rgba(70,50,25,.16));
}
.envelope.opening .env-flap{transform:rotateX(-172deg); opacity:0;}

.env-tap{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.env-seal{
  position:relative;
  width:216px; height:216px;
  filter:drop-shadow(0 10px 14px rgba(80,60,35,.24));
  animation:sealPulse 2.6s ease-in-out infinite;
}
.envelope.opening .env-seal{animation:none; opacity:0; transform:scale(1.12); transition:opacity .55s ease, transform .55s ease;}
@keyframes sealPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.045);}
}
.env-seal .petals-outer{
  transform-origin:50% 50%;
  transition:transform .55s ease, opacity .55s ease;
}
.env-seal .petals-inner{
  transform-origin:50% 50%;
  transition:transform .55s ease .05s, opacity .55s ease .05s;
}
.envelope.opening .env-seal .petals-outer{transform:scale(1.35); opacity:0;}
.envelope.opening .env-seal .petals-inner{transform:scale(.7) rotate(12deg); opacity:0;}

.env-btn{
  font-family:'Jost',Arial,sans-serif;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.82rem;
  color:#bdb4a8;
  background:none;
  border:none;
  padding:0;
  transition:transform .18s ease, opacity .3s ease;
}
.env-tap:active .env-btn{transform:scale(.96);}
.envelope.opening .env-btn{opacity:0; transition:opacity .3s ease;}

/* ================= HERO ================= */
.invitation{animation:fadeIn .7s ease both;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.hero{position:relative;}
.hero-photo{position:relative; height:64vh; min-height:380px; overflow:hidden;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.hero-photo::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg, rgba(247,246,239,0) 0%, var(--cream) 92%);
}
.hero-names{padding:2px 24px 40px; text-align:center; margin-top:-6px;}
.hero-names .n{display:block; font-size:2.5rem; line-height:1.28; color:var(--brown); letter-spacing:.04em;}
.hero-names .amp{font-style:italic; font-size:1.7rem; color:var(--gold-deep); display:block; margin:2px 0;}

/* ================= INVITE ================= */
.invite-photo{position:relative; height:30vh; min-height:190px; overflow:hidden;}
.invite-photo img{width:100%; height:100%; object-fit:cover;}
.invite-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(247,246,239,0) 55%, var(--cream) 100%);
}
.invite-copy{padding:8px 34px 6px; text-align:center;}
.invite-copy p{font-size:1.18rem; line-height:1.65; color:var(--ink); margin:0 0 8px;}
.invite-date{padding:18px 24px 46px; text-align:center;}
.invite-date .label{margin-bottom:14px;}
.invite-date .big{font-size:3.3rem; color:var(--brown); letter-spacing:.03em; line-height:1;}
.invite-date .time{margin-top:10px; font-size:1.15rem; color:var(--brown-soft); font-style:italic;}

/* ================= VENUE ================= */
.venue{padding:44px 22px 48px;}
.venue-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:30px;}
.venue-grid .col-left{display:grid; grid-template-rows:auto auto; gap:10px;}
.venue-grid figure{margin:0; border-radius:18px; overflow:hidden; background:var(--cream-deep); box-shadow:0 6px 18px rgba(90,65,40,.08);}
.venue-grid .jacket-wrap{aspect-ratio:4/3;}
.venue-grid .rings-wrap{aspect-ratio:4/5;}
.venue-grid .bride-wrap{aspect-ratio:4/9; height:100%;}
.venue-grid img{width:100%; height:100%; object-fit:cover;}
.venue-name{text-align:center;}
.venue-name .title{font-size:2.1rem; color:var(--brown); letter-spacing:.03em;}
.venue-name .city{margin-top:6px; font-size:1.05rem; color:var(--brown-soft); font-style:italic;}

/* ================= ACTIONS ================= */
.actions{padding:10px 30px 50px; text-align:center;}
.actions .cta-label{font-size:1.25rem; color:var(--brown); margin-bottom:26px;}
.btn{
  display:block; width:100%;
  padding:18px 20px; margin:0 0 18px;
  border:1px solid var(--brown-soft); border-radius:40px;
  background:transparent; color:var(--brown);
  font-family:'Jost',Arial,sans-serif; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  font-size:.86rem; text-align:center; text-decoration:none;
  transition:background .35s ease, color .35s ease, transform .2s ease;
}
.btn:active{transform:scale(.97);}
.btn:hover{background:var(--brown-soft); color:var(--cream);}
.actions .closing-copy{margin-top:28px; font-size:1.08rem; line-height:1.7; color:var(--ink);}

/* ================= CLOSING ================= */
.closing{position:relative; text-align:center;}
.closing-title{padding:50px 24px 22px;}
.closing-title .l1{font-size:2.15rem; color:var(--brown); letter-spacing:.03em;}
.closing-title .l2{margin-top:14px; font-size:2.3rem; font-style:italic; color:var(--gold-deep);}
.closing-photo{position:relative; height:52vh; min-height:320px; overflow:hidden;}
.closing-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.closing-photo::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:16%;
  background:linear-gradient(180deg, var(--cream) 0%, rgba(247,246,239,0) 100%);
  z-index:1;
}
.foot{
  padding:22px 20px 34px; text-align:center;
  font-family:'Jost',Arial,sans-serif; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brown-soft); opacity:.75;
}

/* ================= MUSIC ================= */
.music-toggle{
  position:fixed;
  right:20px; bottom:20px;
  z-index:500;
  width:58px; height:58px;
  border-radius:50%;
  border:none;
  background:radial-gradient(circle at 35% 30%, var(--gold) 0%, var(--gold-deep) 60%, #8a6335 100%);
  box-shadow:0 10px 22px rgba(80,55,25,.32), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  gap:4px;
  cursor:pointer;
  animation:musicIn .4s ease both;
  -webkit-tap-highlight-color:transparent;
}
@keyframes musicIn{
  from{opacity:0; transform:translateY(10px) scale(.85);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.music-toggle .eq-bar{
  display:block;
  width:4px;
  height:10px;
  border-radius:2px;
  background:#fbf3e0;
  transform-origin:50% 100%;
}
.music-toggle .eq-bar:nth-child(1){height:9px;}
.music-toggle .eq-bar:nth-child(2){height:16px;}
.music-toggle .eq-bar:nth-child(3){height:12px;}
.music-toggle.is-playing .eq-bar{animation:eqBounce .9s ease-in-out infinite;}
.music-toggle.is-playing .eq-bar:nth-child(1){animation-delay:-.6s;}
.music-toggle.is-playing .eq-bar:nth-child(2){animation-delay:-.3s;}
.music-toggle.is-playing .eq-bar:nth-child(3){animation-delay:0s;}
@keyframes eqBounce{
  0%,100%{transform:scaleY(.45);}
  50%{transform:scaleY(1);}
}
.music-toggle:not(.is-playing) .eq-bar{transform:scaleY(.45);}

/* ================= OUR STORY ================= */
.story{
  position:relative;
  padding:36px 22px 50px;
  overflow:hidden;
}
.story-deco{
  position:absolute;
  width:110px; height:110px;
  pointer-events:none;
  opacity:.55;
}
.story-deco path{
  fill:none;
  stroke:var(--gold-deep);
  stroke-width:1.4;
  stroke-linecap:round;
}
.story-deco.top-right{top:-6px; right:-6px;}
.story-deco.bottom-left{bottom:-6px; left:-6px;}

.story-grid{
  position:relative;
  z-index:1;
  container-type:inline-size;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:42cqw 42cqw 42cqw;
  gap:10px;
}
.story-item{
  position:relative;
  display:block;
  width:100%; height:100%;
  padding:0;
  border:none;
  border-radius:16px;
  overflow:hidden;
  background:var(--cream-deep);
  cursor:pointer;
  box-shadow:0 6px 16px rgba(90,65,40,.10);
  -webkit-tap-highlight-color:transparent;
}
.story-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.story-item:active img{transform:scale(1.04);}

.story-item.item-0{grid-column:1; grid-row:1 / span 2;}
.story-item.item-1{grid-column:2; grid-row:1;}
.story-item.item-2{grid-column:2; grid-row:2;}
.story-item.item-3{grid-column:1; grid-row:3;}
.story-item.item-4{grid-column:2; grid-row:3;}

.story-more{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(40,28,18,.45);
  color:#fff;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5rem;
  letter-spacing:.02em;
}

/* ---------------- lightbox ---------------- */
.story-lightbox{
  position:fixed; inset:0;
  z-index:900;
  background:rgba(20,14,8,.92);
  display:flex; align-items:center; justify-content:center;
  animation:lbIn .25s ease both;
}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
.lb-image{
  max-width:88vw; max-height:78vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lb-close{
  position:absolute; top:18px; right:18px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lb-prev{left:12px;}
.lb-next{right:12px;}
.lb-count{
  position:absolute; bottom:18px; left:0; right:0;
  text-align:center;
  color:rgba(255,255,255,.8);
  font-family:'Jost',Arial,sans-serif;
  font-size:.78rem;
  letter-spacing:.16em;
}