:root{
  --bg:#fff8f2;
  --paper:rgba(255,255,255,.9);
  --paper-solid:#ffffff;
  --text:#2f2424;
  --muted:#806f66;
  --primary:#c84c47;
  --accent:#f0c2a1;
  --shadow:0 22px 60px rgba(73,45,34,.14);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,230,214,.85), transparent 38%),
    linear-gradient(180deg,#fff8f2 0%,#f8efe8 100%);
  color:var(--text);
  line-height:1.7;
}
a{color:var(--primary);text-decoration:none;font-weight:700}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:18px 7vw;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(200,150,120,.18);
}
.brand{
  font-family:'Great Vibes',cursive;
  font-size:2rem;
  color:var(--primary);
  white-space:nowrap;
}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.topbar nav a{color:var(--muted);font-size:.95rem}
.hero{
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 7vw;
  background:
    linear-gradient(180deg,rgba(48,20,18,.36),rgba(48,20,18,.65)),
    url('gallery/cover.webp');
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 62%);
  pointer-events:none;
  z-index:0;
}
.hero-card{
  position:relative;
  z-index:1;
  width:min(100%,900px);
  text-align:center;
  color:#fff;
  padding:46px 38px;
  border-radius:36px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.eyebrow,.label{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--primary);
  font-size:.82rem;
}
.hero-card .eyebrow{color:rgba(255,255,255,.75)}
h1{
  margin:8px 0 14px;
  font-family:'Great Vibes',cursive;
  font-size:clamp(3.4rem,10vw,6.6rem);
  font-weight:400;
  line-height:1;
}
.hero-text{color:rgba(255,255,255,.86);font-size:1.05rem}
.hero-actions,.buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:28px 0 22px;
}
button,.calendar-btn,.whatsapp-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:13px 23px;
  font:700 .95rem/1 'Inter',sans-serif;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
}
button,.calendar-btn{background:#fff;color:#3b2925;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.whatsapp-btn{background:#1f8b47;color:#fff}
button:hover,.calendar-btn:hover,.whatsapp-btn:hover{transform:translateY(-2px)}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px auto 16px;
}
.countdown div{
  padding:16px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.countdown strong{display:block;font-size:2rem;line-height:1}
.countdown span{font-size:.92rem;color:rgba(255,255,255,.74)}
.music-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.25)}
.music-note{font-size:.86rem;color:rgba(255,255,255,.7);margin:8px 0 0}
.section{padding:72px 7vw;max-width:1180px;margin:0 auto}
.section-head{text-align:center;max-width:760px;margin:0 auto 34px}
.section-head.left{text-align:left;margin-left:0}
h2{font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin:8px 0 18px}
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card,.panel{
  background:var(--paper);
  border:1px solid rgba(200,150,120,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card{padding:28px}
.card h3{margin:0 0 12px;font-size:1.15rem}
.card p{margin:.45rem 0;color:var(--muted)}
.panel{padding:42px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.gallery-grid img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 12px 34px rgba(73,45,34,.14);
  background:#eee;
}
/* Masonry enhancement: only active when JS adds .masonry class. Non-destructive fallback to existing grid */
.gallery-grid.masonry{
  display:block;
  column-gap:18px;
  column-count:3;
}
.gallery-grid.masonry img{
  width:100%;
  display:inline-block;
  margin:0 0 18px;
  aspect-ratio:unset;
}
@media(max-width:1000px){
  .gallery-grid.masonry{ column-count:2; }
}
@media(max-width:600px){
  .gallery-grid.masonry{ column-count:1; }
}
.loading,.empty{color:var(--muted)}
.timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.timeline-item{padding:30px;border-radius:var(--radius);background:linear-gradient(135deg,#fff,#fff2eb);box-shadow:var(--shadow)}
.timeline-item span{color:var(--primary);font-weight:800}
.location-grid{display:grid;grid-template-columns:.9fr 1.25fr;gap:22px;align-items:stretch}
.map-wrap{position:relative;border-radius:var(--radius);overflow:hidden;min-height:360px;box-shadow:var(--shadow);background:#eee}
.map-footnote{position:absolute;right:18px;bottom:18px;background:rgba(0,0,0,.64);color:#fff;padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.35;max-width:calc(100% - 36px)}
.location-qr img{width:100%;max-width:210px;border-radius:18px;margin-top:12px;display:block}
.location-qr strong{font-size:.95rem}
iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
.rsvp-form{display:grid;gap:16px;max-width:680px}
.rsvp-form label{display:grid;gap:8px;font-weight:700;color:var(--text)}
input,select,textarea{
  width:100%;
  border:1px solid rgba(128,111,102,.22);
  border-radius:16px;
  padding:14px 16px;
  font:inherit;
  background:#fff;
  color:var(--text);
}
.rsvp-form button{width:max-content;background:var(--primary);color:#fff}
.form-message{font-weight:700}
.form-message.success{color:#155724;background:rgba(212,237,218,.4);padding:10px;border-radius:10px;border:1px solid rgba(40,167,69,.12)}
.form-message.error{color:#721c24;background:rgba(248,215,218,.4);padding:10px;border-radius:10px;border:1px solid rgba(220,53,69,.12)}
.messages{display:grid;gap:12px;margin-top:30px}
.message{background:#fff;border-radius:18px;padding:18px;border:1px solid rgba(200,150,120,.18)}
.message strong{display:block;color:var(--primary)}
@media(max-width:760px){
  .topbar{align-items:flex-start;flex-direction:column;padding:18px 6vw}
  .topbar nav{justify-content:flex-start;gap:14px}.topbar nav a{font-size:.92rem}
  .hero{min-height:82vh;padding:30px 5vw}.hero-card{padding:34px 20px;border-radius:28px}
  .hero-actions{flex-direction:column;align-items:stretch}.hero-actions>*{width:100%}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .cards-grid,.timeline,.location-grid{grid-template-columns:1fr}
  .section{padding:52px 5vw}.panel{padding:28px 22px}
}
/* Lightbox styling */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.92);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}
.lightbox-container{
  position:relative;
  max-width:90vw;
  max-height:90vh;
}
.lightbox-image{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:8px;
}
.lightbox-close{
  position:absolute;
  top:-40px;
  right:0;
  background:rgba(255,255,255,.2);
  color:#fff;
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:32px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  line-height:1;
}
.lightbox-close:hover{background:rgba(255,255,255,.3)}
/* Amplop Digital styling */
.amplop-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin-top:28px;
}
.amplop-card{
  background:linear-gradient(135deg,#fff8f5,#fffaf8);
  border:2px solid #f0d4c0;
  border-radius:18px;
  padding:24px;
  box-shadow:0 8px 24px rgba(200,150,120,.12);
}
.amplop-header{
  font-weight:800;
  color:var(--primary);
  margin-bottom:16px;
  font-size:1.1rem;
}
.amplop-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0;
  font-size:.95rem;
}
.amplop-item label{
  font-weight:600;
  color:var(--muted);
  margin-right:12px;
}
.amplop-item span{
  font-weight:700;
  color:var(--text);
  font-family:monospace;
  word-break:break-all;
}
.amplop-copy-btn{
  width:100%;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:11px 16px;
  margin-top:14px;
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
  transition:.2s;
}
.amplop-copy-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(200,76,71,.25);
}
/* Data saver button */
.data-saver-btn{
  background:#e8dfd5;
  color:var(--text);
  border:none;
  border-radius:18px;
  padding:8px 16px;
  font-size:.87rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.data-saver-btn:hover{
  background:#dcd1c5;
}
.data-saver-btn.active{
  background:var(--primary);
  color:#fff;
}
.load-gallery-btn{
  display:block !important;
  margin:20px auto;
  padding:10px 20px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.load-gallery-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(200,76,71,.25);
}
/* Gallery grid - make clickable in lightbox mode */
.gallery-grid img{
  cursor:pointer;
  transition:.2s;
}
.gallery-grid img:hover{
  transform:scale(1.02);
}
@media(max-width:600px){
  .lightbox-close{
    top:10px;
    right:10px;
  }
  .amplop-container{
    grid-template-columns:1fr;
  }
  .topbar .data-saver-btn{
    padding:6px 12px;
    font-size:.8rem;
  }
}