:root {
  --green: #315d45;
  --green-dark: #203f2f;
  --sage: #718b77;
  --cream: #f8f5ed;
  --paper: #fbfaf6;
  --gold: #a58b54;
  --text: #344039;
  --muted: #788078;
  --white: #fff;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
}
body.locked { overflow: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--cream);
  transition: opacity .7s ease, visibility .7s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-flower { color: var(--green); font: 3rem var(--serif); animation: pulse 1.3s infinite; }

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(18,43,31,.18), rgba(18,43,31,.62)),
    url("assets/images/cover.svg") center/cover no-repeat;
}
.hero-overlay { position:absolute; inset:0; background: radial-gradient(circle, transparent 20%, rgba(12,30,22,.25)); }
.hero-content {
  position: relative; z-index: 2; text-align: center;
  width: min(90%, 720px); padding: 30px 15px;
}
.eyebrow, .small-caps, .section-kicker, .person-role {
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .68rem;
}
.eyebrow { margin-bottom: 10px; }
.small-caps { opacity: .85; }
.hero h1 {
  margin: 16px 0 4px;
  font: 500 clamp(3.2rem, 11vw, 7.2rem)/.88 var(--serif);
}
.ornament { color: var(--gold); font: 2rem var(--serif); margin: 12px 0; }
.hero-date { font: 500 1.05rem var(--serif); letter-spacing: .12em; }
.open-button {
  margin-top: 34px; padding: 13px 25px;
  border: 1px solid rgba(255,255,255,.65);
  color: #fff; background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  display: inline-flex; gap: 20px; align-items:center;
  text-transform: uppercase; letter-spacing: .18em; font-size: .65rem;
  transition: .3s;
}
.open-button:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.hero-leaf { position:absolute; color:rgba(255,255,255,.18); font-size:9rem; z-index:1; }
.leaf-left { left:-45px; bottom:-30px; transform:rotate(30deg); }
.leaf-right { right:-55px; top:-25px; transform:rotate(210deg); }

.section { position:relative; padding: 90px 20px; overflow:hidden; }
.container { width:min(1080px,100%); margin:auto; }
.narrow { width:min(700px,100%); text-align:center; }
.invitation { background: var(--cream); }
.section-heading { text-align:center; margin-bottom:42px; }
.section-heading h2, .narrow h2 {
  margin: 8px 0 18px; font: 600 clamp(2.2rem, 6vw, 4rem)/1 var(--serif);
  color: var(--green-dark);
}
.section-kicker { color:var(--sage); margin:0; }
.gold-line { width:48px; height:1px; background:var(--gold); margin:18px auto 26px; }
.invitation h2 { font-size:clamp(2.7rem,8vw,5.3rem); }
.invitation p:not(.section-kicker):not(.lunar) { max-width:540px; margin:0 auto; line-height:1.9; }
.lunar { margin-top:25px; color:var(--gold); font: 500 1rem var(--serif); }

.couple-section { background:#edf1ea; }
.couple-grid {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:28px; max-width:820px; margin:auto;
}
.person-card { text-align:center; }
.person-photo {
  width:min(280px, 100%); aspect-ratio:4/5; margin:0 auto 22px;
  background-position:center; background-size:cover;
  border:8px solid rgba(255,255,255,.8);
  box-shadow:0 14px 35px rgba(38,60,45,.1);
}
.groom-photo { background-image:url("assets/images/groom.svg"); }
.bride-photo { background-image:url("assets/images/bride.svg"); }
.person-card h3 { margin:4px 0; font:600 2.8rem var(--serif); color:var(--green-dark); }
.person-role { color:var(--sage); }
.heart-divider { color:var(--gold); font-size:2rem; }

.story-section { background:var(--paper); }
.body-text { line-height:2; color:#69716b; }

.countdown-section { background:var(--green); color:white; text-align:center; }
.countdown-section h2 { color:white; }
.countdown-section .section-kicker { color:#c7d4c9; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); max-width:680px; margin:38px auto 0; }
.countdown div { border-right:1px solid rgba(255,255,255,.22); }
.countdown div:last-child { border:0; }
.countdown strong { display:block; font:500 clamp(2.2rem,7vw,4.4rem) var(--serif); }
.countdown span { text-transform:uppercase; letter-spacing:.18em; font-size:.55rem; opacity:.75; }

.gallery-section { background:var(--cream); }
.gallery {
  display:grid; grid-template-columns:repeat(12,1fr); gap:10px;
}
.gallery-item { overflow:hidden; cursor:zoom-in; position:relative; min-height:220px; }
.gallery-item:nth-child(1), .gallery-item:nth-child(4) { grid-column:span 7; }
.gallery-item:nth-child(2), .gallery-item:nth-child(3), .gallery-item:nth-child(5), .gallery-item:nth-child(6) { grid-column:span 5; }
.gallery-item img { width:100%; height:100%; min-height:220px; object-fit:cover; transition:transform .7s; }
.gallery-item:hover img { transform:scale(1.04); }

.lightbox { position:fixed; inset:0; z-index:9998; background:rgba(10,20,15,.95); display:none; align-items:center; justify-content:center; padding:30px; }
.lightbox.open { display:flex; }
.lightbox img { max-height:88vh; max-width:90vw; object-fit:contain; }
.lightbox button { position:absolute; border:0; color:white; background:transparent; font-size:3rem; }
.lightbox-close { top:10px; right:20px; }
.lightbox-prev { left:15px; top:50%; }
.lightbox-next { right:15px; top:50%; }

.event-section { background:var(--paper); }
.event-box {
  border:1px solid #dfe3dc; background:#fff; padding:42px 25px;
  box-shadow:0 15px 45px rgba(45,65,50,.06);
}
.event-icon { color:var(--gold); font-size:1.5rem; }
.event-time { font:600 3.2rem var(--serif); color:var(--green-dark); margin:12px 0 0; }
.event-date { letter-spacing:.12em; font-size:.7rem; text-transform:uppercase; }
.event-box h3 { font:600 2rem var(--serif); margin:28px 0 7px; }
.event-box p { color:var(--muted); line-height:1.7; }
.map-button {
  display:inline-block; margin-top:18px; padding:12px 22px;
  background:var(--green); color:#fff; text-decoration:none;
  text-transform:uppercase; letter-spacing:.12em; font-size:.6rem;
}

.gift-section { background:#edf1ea; }
.gift-card { margin-top:28px; background:#fff; padding:30px 20px; border:1px solid #dce4dc; }
.qr-wrap { width:180px; height:180px; margin:0 auto 20px; background:#f4f4f4; }
.qr-wrap img { width:100%; height:100%; object-fit:contain; }
.gift-bank { font:600 1.25rem var(--serif); color:var(--green-dark); }
.gift-owner { font-size:.7rem; letter-spacing:.12em; }
.account-row { display:flex; justify-content:center; gap:10px; align-items:center; margin-top:15px; flex-wrap:wrap; }
.account-row strong { font-family:monospace; font-size:1.05rem; }
.account-row button { border:1px solid #cbd6cc; background:white; padding:8px 12px; color:var(--green); }
.copy-status { display:block; min-height:20px; margin-top:8px; color:var(--sage); font-size:.75rem; }

.final-section {
  min-height:55vh; display:grid; place-items:center; text-align:center; color:white;
  background:linear-gradient(rgba(25,55,40,.64),rgba(25,55,40,.76)), url("assets/images/final.svg") center/cover;
}
.final-section h2 { color:#fff; font-size:clamp(2.4rem,7vw,4.6rem); }
.signature { font:1.6rem var(--serif); color:#e5d9b9; }

.music-button {
  position:fixed; z-index:999; right:18px; top:18px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); color:white;
  background:rgba(30,65,47,.72); backdrop-filter:blur(8px);
}
.music-button.playing .music-icon { display:inline-block; animation:spin 2.5s linear infinite; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@keyframes pulse { 50% { transform:scale(1.12); opacity:.6; } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 650px) {
  .section { padding:72px 17px; }
  .couple-grid { grid-template-columns:1fr; gap:18px; }
  .heart-divider { order:2; }
  .person-card:nth-child(3) { order:3; }
  .person-photo { max-width:230px; }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery-item, .gallery-item:nth-child(n) { grid-column:span 1; min-height:180px; }
  .gallery-item img { min-height:180px; }
  .countdown { gap:4px; }
  .countdown strong { font-size:2rem; }
  .countdown span { letter-spacing:.08em; }
}