/* ============================================================
   EMERALD — Template CSS
   UndanganKu by Bacaunduh
   Slug: emerald | Tier: premium | Category: wedding
   Konsep: Dark Botanical Emerald Luxury Night Garden
   Palette: Deep Emerald #0B1F18 + Forest #1A3D2E + Gold #C8A850
   Signature #1: SVG vine stroke-dashoffset growing animation
   Signature #2: Triptych 3-panel portrait gallery
   SATU-SATUNYA template palette hijau di seluruh koleksi
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Josefin+Sans:wght@300;400;600&family=Sacramento&display=swap');

/* ── 1. VARIABLES ──────────────────────────────────────────── */
:root {
  --c-primary:    var(--inv-primary,   #C8A850);
  --c-secondary:  var(--inv-secondary, #2D6A50);
  --c-emerald:    #0B1F18;
  --c-forest:     #1A3D2E;
  --c-forest2:    #213D2F;
  --c-forest3:    #2A4D3A;
  --c-moss:       #2D6A50;
  --c-moss-lt:    #3D8A68;
  --c-moss-pale:  rgba(45,106,80,.25);
  --c-moss-dim:   rgba(45,106,80,.12);
  --c-gold:       #C8A850;
  --c-gold-lt:    #DCC070;
  --c-gold-pale:  #F0E4B8;
  --c-gold-dim:   rgba(200,168,80,.16);
  --c-champagne:  #F0E4C8;
  --c-ivory:      #F8F3E8;
  --c-text:       rgba(240,228,200,.88);
  --c-text2:      rgba(200,168,80,.72);
  --c-text3:      rgba(240,228,200,.45);
  --c-text4:      rgba(240,228,200,.2);
  --c-border:     rgba(200,168,80,.2);
  --c-border2:    rgba(240,228,200,.1);
  --em-serif:     'Cormorant Garamond', Georgia, serif;
  --em-sans:      'Josefin Sans', system-ui, sans-serif;
  --em-script:    'Sacramento', cursive;
  --max-w:        480px;
  --tr:           .45s cubic-bezier(.25,.8,.25,1);
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--em-sans);
  background: var(--c-emerald);
  color: var(--c-text);
  line-height: 1.8; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--c-emerald); }
::-webkit-scrollbar-thumb { background: var(--c-moss); border-radius: 99px; }

/* ── 3. WRAPPER ────────────────────────────────────────────── */
#em-wrap {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--c-forest);
  min-height: 100vh; position: relative; overflow-x: hidden;
  box-shadow: 0 0 100px rgba(0,0,0,.6);
}

/* ── 4. SCROLL REVEAL ──────────────────────────────────────── */
.em-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.em-reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .25s; }
.d3 { transition-delay: .38s; } .d4 { transition-delay: .52s; }
.d5 { transition-delay: .66s; }

/* ── 5. PROGRESS ───────────────────────────────────────────── */
#em-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--c-moss), var(--c-gold), var(--c-gold-lt), var(--c-gold));
  z-index: 9999; pointer-events: none; transition: width .1s linear;
}

/* ── 6. TOAST ──────────────────────────────────────────────── */
#em-toast {
  position: fixed; bottom: 5.5rem; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-forest3); color: var(--c-champagne);
  border: 1px solid var(--c-border);
  padding: .625rem 1.375rem; border-radius: 99px;
  font-size: .8125rem; white-space: nowrap;
  z-index: 9998; opacity: 0; pointer-events: none;
  transition: all .3s ease; font-family: var(--em-sans);
}
#em-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 7. FLOAT CONTROLS ─────────────────────────────────────── */
#em-float {
  position: fixed; right: 1rem; bottom: 5%;; transform: translateY(-50%);
  z-index: 500; display: none; flex-direction: column; gap: .5rem;
}
.em-fb {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11,31,24,.85);
  border: 1px solid var(--c-border);
  color: var(--c-text3);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: all .25s ease; cursor: pointer;
}
.em-fb:hover { border-color: var(--c-gold); color: var(--c-gold); }
.em-fb.em-fb-on { background: var(--c-gold-dim); border-color: var(--c-gold); color: var(--c-gold); }

/* ── 8. GATE — Botanical vine animation (signature #1) ─────── */
#em-gate {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--c-emerald);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  transition: opacity .9s ease, transform .9s ease;
}
.em-gate-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.3) saturate(.5);
  transform: scale(1.04); transition: transform 8s ease;
}
.em-gate-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(11,31,24,.85) 100%);
}
.em-gate-no-photo {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--c-emerald) 0%, var(--c-forest) 50%, var(--c-emerald) 100%);
}

/* SVG vine container — overlays full gate */
.em-vine-container {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  overflow: visible;
}
#em-vine-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Vine path initial state — drawn by JS */
.em-vine-path {
  stroke-dasharray: 999;
  stroke-dashoffset: 999;
}

/* Gate content */
.em-gate-body {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 2rem;
  max-width: 300px;
}
.em-gate-eyebrow {
  font-family: var(--em-sans); font-size: .5625rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-text2); margin-bottom: 1.5rem;
  opacity: 0; animation: emIn .8s ease .4s forwards;
}
.em-gate-names {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  margin-bottom: 1.375rem;
  opacity: 0; animation: emIn .8s ease .6s forwards;
}
.em-gate-name {
  font-family: var(--em-script); font-size: 2.5rem;
  color: var(--c-champagne); line-height: 1;
}
.em-gate-amp {
  font-family: var(--em-serif); font-style: italic;
  font-size: 1rem; color: var(--c-gold); line-height: 1.5;
}
.em-gate-date {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text3);
  opacity: 0; animation: emIn .8s ease .8s forwards;
}
.em-gate-date-line { flex: 1; max-width: 28px; height: 1px; background: var(--c-border); }
.em-gate-to {
  font-size: .6875rem; color: var(--c-text3); line-height: 1.7;
  margin-bottom: 1.75rem;
  opacity: 0; animation: emIn .8s ease .95s forwards;
}
.em-gate-to strong { color: var(--c-text); font-weight: 400; }
.em-gate-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .75rem 1.75rem;
  background: transparent; border: 1px solid var(--c-moss);
  border-radius: 99px; color: var(--c-gold);
  font-family: var(--em-sans); font-size: .6875rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: all .3s ease;
  opacity: 0; animation: emIn .8s ease 1.1s forwards;
}
.em-gate-btn:hover {
  background: var(--c-moss-dim); border-color: var(--c-gold);
  box-shadow: 0 0 20px rgba(200,168,80,.15);
}
.em-gate-btn-leaf { width: 14px; height: 14px; color: var(--c-moss-lt); }

@keyframes emIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ── 9. BOTTOM NAV ─────────────────────────────────────────── */
#em-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-w); z-index: 400; display: none;
  background: rgba(11,31,24,.94);
  border-top: 1px solid rgba(200,168,80,.15);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.em-nav-inner {
  display: flex; align-items: stretch; padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.em-nb {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .625rem .25rem; gap: .25rem;
  color: var(--c-text4);
  font-family: var(--em-sans); font-size: .5rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s ease; cursor: pointer;
}
.em-nb:hover { color: var(--c-text3); }
.em-nb.active { color: var(--c-gold); }
.em-nb.active svg { stroke: var(--c-gold); transform: translateY(-1px); }
.em-nb svg { transition: transform .2s ease; stroke: currentColor; }

/* ── 10. SECTION BASE ──────────────────────────────────────── */
.em-sec { padding: 3.5rem 0 3rem; }
.em-sec-inner { padding: 0 1.75rem; }
.em-bg-forest  { background: var(--c-forest); }
.em-bg-deep    { background: var(--c-emerald); }

.em-sec-lbl {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-text2); text-align: center; margin-bottom: 1rem;
}
.em-sec-ttl {
  font-family: var(--em-serif); font-size: 1.875rem; font-weight: 300;
  color: var(--c-champagne); line-height: 1.3; text-align: center;
  margin-bottom: 2rem; letter-spacing: .01em;
}
.em-sec-ttl em { font-style: italic; color: var(--c-gold); }

/* Gold leaf divider */
.em-gold-div {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem 1.75rem;
}
.em-gd-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}
.em-gd-leaf { width: 60px; height: 30px; flex-shrink: 0; }

/* ── 11. HERO ──────────────────────────────────────────────── */
.em-hero {
  position: relative; height: 100vh; min-height: 580px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.em-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.38) saturate(.7);
  transform: scale(1.04); transition: transform 8s ease;
  background-color: var(--c-forest);
}
.em-hero-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-forest3) 100%);
}
.em-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,31,24,.5) 0%, rgba(11,31,24,.2) 40%, rgba(11,31,24,.85) 100%);
}

/* Botanical arch frame */
.em-hero-frame {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.em-hero-frame svg { width: 340px; max-width: 92vw; height: 520px; max-height: 88vh; }

.em-hero-content {
  position: relative; z-index: 2; text-align: center; padding: 0 2rem;
  display: flex; flex-direction: column; align-items: center;
}
.em-hero-eyebrow {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-text2); margin-bottom: 1.375rem;
}
.em-hero-names { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: 1.5rem; }
.em-hero-groom, .em-hero-bride {
  font-family: var(--em-script); font-size: 3rem;
  color: var(--c-champagne); line-height: 1; letter-spacing: .01em;
}
.em-hero-amp {
  font-family: var(--em-serif); font-style: italic;
  font-size: 1.125rem; color: var(--c-gold); line-height: 1.5;
}
.em-hero-date {
  display: flex; align-items: center; justify-content: center;
}
.em-hero-date-inner {
  font-family: var(--em-sans); font-size: .5625rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text3);
  padding: .625rem 1.5rem;
  border: 1px solid rgba(200,168,80,.2);
  background: rgba(11,31,24,.5);
  backdrop-filter: blur(4px);
}

/* Scroll indicator */
.em-hero-scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.em-hs-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-gold); opacity: .6;
  animation: hsDot 1.6s ease infinite;
}
@keyframes hsDot { 0%,100% { opacity:.6;transform:translateY(0); } 50% { opacity:.1;transform:translateY(8px); } }

/* ── 12. OPENING ───────────────────────────────────────────── */
.em-bismillah {
  font-family: var(--em-serif); font-size: 1.875rem; font-weight: 300;
  color: var(--c-gold); margin-bottom: 1.5rem;
  line-height: 1.6; letter-spacing: .04em; text-align: center;
}
.em-open-txt {
  font-family: var(--em-serif); font-size: .9375rem; font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 2; text-align: center;
  max-width: 320px; margin: 0 auto;
}

/* ── 13. QUOTE ─────────────────────────────────────────────── */
.em-quote-wrap {
  display: flex; gap: 0; overflow: hidden;
  background: rgba(200,168,80,.06);
  border: 1px solid rgba(200,168,80,.12);
}
.em-quote-bar {
  width: 3px; flex-shrink: 0;
  background: linear-gradient(to bottom, var(--c-moss), var(--c-gold));
}
.em-quote-body { padding: 2rem; }
.em-quote {
  font-family: var(--em-serif); font-size: 1.0625rem; font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 1.9;
}
.em-quote-src {
  display: block; font-family: var(--em-sans); font-size: .625rem;
  letter-spacing: .12em; color: var(--c-gold); margin-top: 1rem;
}

/* ── 14. COUPLE — Gold ring frame + vine bar ───────────────── */
.em-couple-card {
  display: flex; gap: 0; align-items: stretch;
  background: rgba(200,168,80,.05);
  border: 1px solid var(--c-border);
  margin: 0 1.75rem 1.5rem;
  overflow: hidden;
}
/* vine bar on left */
.em-cc-vine-bar {
  width: 20px; flex-shrink: 0; padding: 1rem 6px;
  display: flex; align-items: center;
}
.em-cc-vine-bar svg { width: 8px; height: 160px; }

/* Photo with gold ring */
.em-cc-photo-wrap {
  position: relative; width: 110px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 0;
}
.em-cc-photo {
  width: 90px; height: 90px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(200,168,80,.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.em-cc-initial {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--c-forest3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--em-serif); font-size: 2.25rem; color: var(--c-gold);
  border: 2px solid rgba(200,168,80,.3);
}
.em-cc-ring-gold {
  position: absolute; inset: calc(50% - 53px) calc(50% - 53px) auto auto;
  width: 106px; height: 106px; border-radius: 50%;
  border: 1.5px solid rgba(200,168,80,.3);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.em-cc-ring-inner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 98px; height: 98px; border-radius: 50%;
  border: 1px dashed rgba(200,168,80,.18);
  pointer-events: none;
}

/* Info */
.em-cc-info { flex: 1; padding: 1.375rem 1.125rem; }
.em-cc-lbl {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-text2); margin-bottom: .375rem;
}
.em-cc-nick {
  font-family: var(--em-script); font-size: 1.75rem;
  color: var(--c-champagne); line-height: 1.1; margin-bottom: .25rem;
}
.em-cc-full { font-family: var(--em-sans); font-size: .75rem; color: var(--c-text3); letter-spacing: .04em; margin-bottom: .625rem; }
.em-cc-par  { font-size: .8125rem; color: var(--c-text3); line-height: 1.7; }
.em-cc-par strong { color: var(--c-text); font-weight: 400; }
.em-cc-bio  { font-size: .8125rem; color: var(--c-text3); line-height: 1.8; margin-top: .5rem; font-style: italic; }

/* Right aligned card variant */
.em-card-right .em-cc-vine-bar { order: 5; }
.em-card-right .em-cc-photo-wrap { order: 4; }
.em-card-right .em-cc-info { order: 1; text-align: right; }

.em-couple-sep {
  display: flex; align-items: center; gap: .875rem;
  margin: .5rem 1.75rem 1rem;
}
.em-cs-line { flex: 1; height: 1px; background: var(--c-border); }

/* ── 15. STORY TIMELINE ────────────────────────────────────── */
.em-story-txt {
  font-family: var(--em-serif); font-size: .9375rem; font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 2; text-align: center; margin-bottom: 2.5rem;
}
.em-timeline { padding: 0 1.75rem 2rem; }
.em-tl-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0; }
.em-tl-node {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 20px; padding-top: .25rem;
}
.em-tl-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-emerald); border: 2px solid var(--c-gold);
  box-shadow: 0 0 8px rgba(200,168,80,.3); flex-shrink: 0;
}
.em-tl-stem {
  width: 1px; flex: 1; min-height: 32px; margin-top: 4px;
  background: linear-gradient(to bottom, var(--c-border), transparent);
}
.em-tl-card {
  flex: 1; background: rgba(200,168,80,.06);
  border: 1px solid rgba(200,168,80,.12);
  padding: 1.125rem 1.25rem; margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.em-tl-icon  { font-size: 1.25rem; margin-bottom: .375rem; }
.em-tl-year  { font-family: var(--em-sans); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-text2); margin-bottom: .25rem; }
.em-tl-title { font-family: var(--em-serif); font-size: .9375rem; font-weight: 400; color: var(--c-champagne); line-height: 1.4; margin-bottom: .25rem; }
.em-tl-desc  { font-size: .8125rem; color: var(--c-text3); line-height: 1.7; }

/* ── 16. EVENTS — Dark forest + gold corner ornaments ──────── */
.em-event {
  position: relative;
  background: rgba(200,168,80,.06);
  border: 1px solid var(--c-border);
  margin: 0 1.75rem 1.5rem;
  overflow: visible;
}
/* Gold corner ornaments */
.em-ev-corner { position: absolute; width: 24px; height: 24px; }
.em-ev-corner svg { width: 100%; height: 100%; display: block; }
.em-evc-tl { top: -1px; left: -1px; }
.em-evc-tr { top: -1px; right: -1px; }

.em-ev-body { padding: 1.5rem 1.375rem 1.375rem; }
.em-ev-type {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-text2); margin-bottom: .5rem;
}
.em-ev-gold-line {
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  margin-bottom: 1.125rem; opacity: .6;
}
.em-ev-row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .875rem; }
.em-ev-ico { font-size: 1.125rem; flex-shrink: 0; margin-top: .125rem; }
.em-ev-main { font-family: var(--em-serif); font-size: .9375rem; font-weight: 300; color: var(--c-champagne); line-height: 1.4; }
.em-ev-sub  { font-size: .75rem; color: var(--c-text3); margin-top: .125rem; }
.em-maps-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .5625rem 1.125rem;
  background: var(--c-gold-dim); border: 1px solid var(--c-border);
  color: var(--c-gold);
  font-family: var(--em-sans); font-size: .5625rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: all .25s; text-decoration: none;
}
.em-maps-btn:hover { background: rgba(200,168,80,.22); }
.em-maps-embed { margin-top: 1rem; overflow: hidden; }
.em-maps-embed iframe { width: 100%; height: 200px; border: none; display: block; }

/* ── 17. COUNTDOWN — Progress bar style ───────────────────── */
.em-cd-units {
  display: flex; flex-direction: column; gap: 1.25rem;
  max-width: 320px; margin: 1.5rem auto 0;
}
.em-cd-unit {
  display: flex; flex-direction: column; gap: .5rem;
}
.em-cd-unit-top {
  display: flex; align-items: baseline; justify-content: space-between;
}
.em-cd-num {
  font-family: var(--em-serif); font-size: 2.75rem; font-weight: 300;
  color: var(--c-champagne); line-height: 1; letter-spacing: -.02em;
}
.em-cd-lbl {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text3);
}
/* Animated progress bar */
.em-cd-bar-wrap {
  width: 100%; height: 2px;
  background: rgba(200,168,80,.12);
  overflow: hidden;
}
.em-cd-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-moss), var(--c-gold));
  transition: width .9s ease;
  border-radius: 1px;
}

/* ── 18. GALLERY — Triptych 3-panel portrait (signature #2) ── */
.em-triptych-grid {
  padding: 0 .5rem 2rem;
  display: flex; flex-direction: column; gap: 3px;
}
.em-triptych-row {
  display: flex; gap: 3px; align-items: flex-end;
  min-height: 220px;
}
/* Panel types */
.em-trip-panel {
  flex: 1; position: relative; overflow: hidden; cursor: pointer;
  background: var(--c-forest3);
}
.em-trip-tall   { height: 280px; }
.em-trip-medium { height: 220px; }

.em-trip-panel img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .6s ease, filter .4s ease;
  filter: saturate(.8);
}
.em-trip-panel:hover img {
  transform: scale(1.06); filter: saturate(.95);
}

/* Overlay with gold corner marks + zoom icon */
.em-trip-overlay {
  position: absolute; inset: 0;
  background: rgba(11,31,24,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease;
}
.em-trip-panel:hover .em-trip-overlay { background: rgba(11,31,24,.35); }

.em-trip-corner {
  position: absolute; width: 14px; height: 14px;
}
.em-trip-corner::before, .em-trip-corner::after {
  content: ''; position: absolute;
  background: rgba(200,168,80,.6);
  opacity: 0; transition: opacity .3s ease;
}
.em-trip-panel:hover .em-trip-corner::before,
.em-trip-panel:hover .em-trip-corner::after { opacity: 1; }
.em-trip-corner::before { width: 100%; height: 1.5px; }
.em-trip-corner::after  { width: 1.5px; height: 100%; }
.em-tc-tl { top: 8px; left: 8px; }
.em-tc-br { bottom: 8px; right: 8px; transform: scale(-1,-1); }

.em-trip-overlay svg {
  opacity: 0; transition: opacity .3s ease;
}
.em-trip-panel:hover .em-trip-overlay svg { opacity: 1; }

/* ── 19. LIGHTBOX ──────────────────────────────────────────── */
#em-lb { position:fixed;inset:0;z-index:9000;background:rgba(5,15,10,.97);display:none;align-items:center;justify-content:center;padding:1rem; }
#em-lb.open { display:flex; }
#em-lb-img  { max-width:100%;max-height:80vh;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.7); }
#em-lb-x    { position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;background:rgba(200,168,80,.08);border:1px solid rgba(200,168,80,.15);color:var(--c-champagne);font-size:1.125rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s; }
#em-lb-x:hover { background:rgba(200,168,80,.16); }
#em-lb-p,#em-lb-n { position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(200,168,80,.06);border:1px solid rgba(200,168,80,.1);color:var(--c-champagne);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s; }
#em-lb-p { left:.75rem; }
#em-lb-n { right:.75rem; }
#em-lb-p:hover,#em-lb-n:hover { background:rgba(200,168,80,.14); }
#em-lb-cap { position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);font-size:.75rem;color:var(--c-text3);white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis; }

/* ── 20. RUNDOWN ───────────────────────────────────────────── */
.em-rundown { display:flex;flex-direction:column; }
.em-rd-item { display:flex;gap:.875rem;align-items:flex-start;padding:.875rem 0; }
.em-rd-time { width:56px;flex-shrink:0;text-align:right;font-family:var(--em-sans);font-size:.6875rem;color:var(--c-gold);padding-top:.1875rem;letter-spacing:.04em; }
.em-rd-node { display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:16px;padding-top:.25rem;gap:4px; }
.em-rd-dot  { width:10px;height:10px;border-radius:50%;background:var(--c-emerald);border:2px solid var(--c-gold);box-shadow:0 0 6px rgba(200,168,80,.3); }
.em-rd-stem { width:1px;flex:1;min-height:24px;background:linear-gradient(to bottom,var(--c-border),transparent); }
.em-rd-title { font-family:var(--em-serif);font-size:.9375rem;font-weight:300;color:var(--c-champagne);line-height:1.4; }
.em-rd-desc  { font-size:.8125rem;color:var(--c-text3);line-height:1.7;margin-top:.25rem; }

/* ── 21. FORMS ─────────────────────────────────────────────── */
.em-form { display:flex;flex-direction:column;gap:1rem; }
.em-fg   { display:flex;flex-direction:column;gap:.4375rem; }
.em-lbl  { font-family:var(--em-sans);font-size:.5625rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text3); }
.em-lbl small { text-transform:none;letter-spacing:0; }
.em-inp {
  width:100%;padding:.75rem 1rem;
  background:rgba(200,168,80,.05);
  border:1px solid rgba(200,168,80,.14);
  color:var(--c-champagne);font-size:.875rem;
  font-family:var(--em-sans);outline:none;
  transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;
}
.em-inp:focus { border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(200,168,80,.07); }
.em-inp::placeholder { color:var(--c-text4); }
.em-inp option { background:var(--c-forest); }
.em-attend-row { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.em-attend {
  padding:.75rem;text-align:center;
  background:rgba(200,168,80,.05);border:1px solid rgba(200,168,80,.12);
  color:var(--c-text3);font-family:var(--em-sans);font-size:.8125rem;
  cursor:pointer;transition:all .25s;
}
.em-attend.active,.em-attend:hover { border-color:var(--c-gold);background:var(--c-gold-dim);color:var(--c-gold); }
.em-submit {
  display:flex;align-items:center;justify-content:center;gap:.625rem;
  width:100%;padding:.875rem 1.5rem;
  background:transparent;border:1px solid var(--c-gold);
  color:var(--c-gold);font-family:var(--em-sans);
  font-size:.5625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;
}
.em-submit:hover { background:var(--c-gold-dim);box-shadow:0 0 24px rgba(200,168,80,.12); }

/* ── 22. WISHES ────────────────────────────────────────────── */
.em-wish { display:flex;gap:.875rem;padding:1.125rem 0;border-bottom:1px solid var(--c-border2); }
.em-wish-av { width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--c-gold-dim);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-family:var(--em-serif);font-size:.875rem;color:var(--c-gold); }
.em-wish-body { flex:1;min-width:0; }
.em-wish-head { display:flex;align-items:baseline;flex-wrap:wrap;gap:.375rem .75rem;margin-bottom:.375rem; }
.em-wish-name { font-family:var(--em-serif);font-size:.9375rem;font-weight:300;color:var(--c-champagne); }
.em-wish-rel  { font-size:.625rem;color:var(--c-text2);letter-spacing:.08em; }
.em-wish-time { font-size:.625rem;color:var(--c-text4);margin-left:auto; }
.em-wish-msg  { font-size:.8125rem;color:var(--c-text3);line-height:1.75; }
.em-loadmore {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.875rem;margin-top:1.25rem;
  background:transparent;border:1px solid var(--c-border2);
  color:var(--c-text3);font-family:var(--em-sans);
  font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
}
.em-loadmore:hover { border-color:var(--c-gold);color:var(--c-gold); }

/* ── 23. GIFT ──────────────────────────────────────────────── */
.em-tabs { display:flex;margin-bottom:1.5rem;border-bottom:1px solid var(--c-border2); }
.em-tab { flex:1;padding:.75rem;text-align:center;font-family:var(--em-sans);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-text3);border-bottom:1px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all .25s; }
.em-tab.active { color:var(--c-gold);border-bottom-color:var(--c-gold); }
.em-hidden { display:none; }
.em-bank { display:flex;align-items:center;gap:1rem;background:rgba(200,168,80,.06);border:1px solid var(--c-border);padding:1.25rem 1.5rem;margin-bottom:1rem;transition:border-color .25s; }
.em-bank:hover { border-color:rgba(200,168,80,.3); }
.em-bank-left { flex:1;min-width:0; }
.em-bank-name { font-family:var(--em-sans);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-text2);margin-bottom:.375rem; }
.em-bank-num { font-family:'Courier New',monospace;font-size:1.25rem;color:var(--c-champagne);letter-spacing:.1em;margin-bottom:.25rem; }
.em-bank-holder { font-size:.75rem;color:var(--c-text3); }
.em-copy-btn { display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--c-gold-dim);border:1px solid var(--c-border);color:var(--c-gold);font-family:var(--em-sans);font-size:.5625rem;letter-spacing:.1em;cursor:pointer;transition:all .2s;white-space:nowrap; }
.em-copy-btn:hover { background:rgba(200,168,80,.22); }
.em-addr-box { background:rgba(200,168,80,.06);border:1px solid var(--c-border2);padding:1.25rem 1.5rem;font-size:.875rem;color:var(--c-text3);line-height:1.9; }

/* ── 24. CONTACT ───────────────────────────────────────────── */
.em-contact { display:flex;align-items:center;gap:1rem;background:rgba(200,168,80,.06);border:1px solid var(--c-border);padding:1.25rem 1.5rem;margin-bottom:1.25rem; }
.em-contact-left { flex:1;min-width:0; }
.em-contact-name { font-family:var(--em-serif);font-size:1rem;font-weight:300;color:var(--c-champagne); }
.em-contact-phone { font-size:.8125rem;color:var(--c-text3);margin-top:.25rem; }
.em-wa-btn { display:inline-flex;align-items:center;gap:.5rem;padding:.5625rem 1rem;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.18);color:#25d366;font-size:.75rem;cursor:pointer;transition:background .25s;text-decoration:none;font-family:var(--em-sans);letter-spacing:.06em; }
.em-wa-btn:hover { background:rgba(37,211,102,.16); }
.em-note { font-size:.8125rem;color:var(--c-text3);line-height:1.8;font-style:italic;padding:.875rem 0;border-top:1px solid var(--c-border2); }

/* ── 25. HASHTAG ───────────────────────────────────────────── */
.em-hashtag-wrap { display:flex;flex-direction:column;gap:.75rem; }
.em-hashtag { display:flex;align-items:center;justify-content:space-between;background:rgba(200,168,80,.06);border:1px solid var(--c-border2);padding:1rem 1.25rem;cursor:pointer;transition:border-color .2s; }
.em-hashtag:hover { border-color:var(--c-border); }
.em-hashtag span { font-family:var(--em-script);font-size:1.125rem;color:var(--c-gold); }
.em-hashtag svg { color:var(--c-text4);flex-shrink:0; }

/* ── 26. CLOSING — Dark gold botanical wreath ──────────────── */
.em-closing-sec {
  background: linear-gradient(160deg, var(--c-emerald) 0%, var(--c-forest) 60%, var(--c-emerald) 100%);
  text-align: center; padding: 4rem 0 5rem; position: relative; overflow: hidden;
}
.em-closing-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(200,168,80,.04) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(45,106,80,.06) 1px, transparent 1px) 12px 12px / 24px 24px;
}
.em-closing-inner { position: relative; z-index: 1; padding: 0 1.75rem; }

/* Gold botanical wreath (dark version — unique vs Eden's cream) */
.em-wreath {
  width: 220px; height: 220px;
  position: relative; margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
}
.em-wreath svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.em-wreath-mono {
  position: relative; z-index: 1; text-align: center;
  display: flex; align-items: center; gap: .25rem;
}
.em-wm-g, .em-wm-b {
  font-family: var(--em-serif); font-size: 2.25rem; font-weight: 300;
  color: var(--c-gold); line-height: 1;
}
.em-wm-amp {
  font-family: var(--em-serif); font-style: italic;
  font-size: 1rem; color: rgba(200,168,80,.5);
}

.em-closing-names {
  font-family: var(--em-script); font-size: 2.375rem;
  color: var(--c-champagne); line-height: 1.2; margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .25rem .625rem;
}
.em-closing-amp {
  font-family: var(--em-serif); font-style: italic;
  font-size: 1.25rem; color: var(--c-gold); line-height: 1.3;
}
.em-closing-txt {
  font-family: var(--em-serif); font-size: .9375rem; font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 2;
  max-width: 300px; margin: 0 auto;
}
.em-closing-date {
  font-family: var(--em-sans); font-size: .5rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-text4); margin: 1rem 0 2rem;
}
.em-closing-share { display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap; }
.em-cls-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.625rem 1.125rem;
  background:var(--c-gold-dim);border:1px solid var(--c-border);
  color:var(--c-gold);font-family:var(--em-sans);
  font-size:.5625rem;font-weight:600;letter-spacing:.12em;
  cursor:pointer;transition:all .25s;
}
.em-cls-btn:hover { background:rgba(200,168,80,.22); }
.em-brand { margin-top:3rem;font-size:.5625rem;letter-spacing:.1em;color:var(--c-text4); }
.em-brand a { color:var(--c-text3);text-decoration:underline;text-underline-offset:3px; }

/* ── 27. SHARE SHEET ───────────────────────────────────────── */
#em-share { position:fixed;inset:0;z-index:8500;background:rgba(0,10,6,.7);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0); }
#em-share-panel { background:var(--c-forest);width:100%;max-width:var(--max-w);border-top:1px solid var(--c-gold);padding:0; }
.em-share-head { padding:1.5rem 1.75rem 0;text-align:center; }
.em-share-ttl { font-family:var(--em-serif);font-size:1.0625rem;font-weight:300;color:var(--c-champagne); }
.em-share-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;padding:1.25rem 1.75rem; }
.em-sh-btn { display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem .375rem;background:var(--c-forest3);border:1px solid var(--c-border2);font-family:var(--em-sans);font-size:.6875rem;color:var(--c-text3);cursor:pointer;transition:border-color .2s; }
.em-sh-btn:hover { border-color:var(--c-border);color:var(--c-text); }
.em-sh-ico { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem; }
.em-wa { background:rgba(37,211,102,.1);color:#25d366; }
.em-tg { background:rgba(42,171,238,.1);color:#29a8eb; }
.em-fb { background:rgba(59,89,152,.1);color:#8b9dc3; }
.em-cp { background:var(--c-gold-dim);color:var(--c-gold); }
.em-sh-close { width:100%;padding:.875rem;background:transparent;border-top:1px solid var(--c-border2);color:var(--c-text3);font-family:var(--em-sans);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .2s; }
.em-sh-close:hover { color:var(--c-gold); }

/* ── 28. INIT ──────────────────────────────────────────────── */
#em-nav   { display: none; }
#em-float { display: none; }

/* ── 29. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:380px) {
  .em-hero-groom,.em-hero-bride { font-size:2.5rem; }
  .em-gate-name { font-size:2rem; }
  .em-share-grid { grid-template-columns:repeat(2,1fr); }
  .em-wreath { width:180px;height:180px; }
  .em-closing-names { font-size:1.875rem; }
  .em-triptych-row { min-height:180px; }
  .em-trip-tall { height:230px; }
  .em-trip-medium { height:180px; }
  .em-cc-photo,.em-cc-initial { width:76px;height:76px; }
}
@media (max-width:320px) {
  .em-gate-name { font-size:1.75rem; }
  .em-hero-groom,.em-hero-bride { font-size:2.25rem; }
}

#em-nav{display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}