/* ============================================================
   AURUM NOIR — Template CSS
   UndanganKu by Bacaunduh
   Slug: aurum-noir | Tier: premium | Category: wedding
   Konsep: Dark Editorial Luxury — obsidian + warm gold + ivory
   Layout: Cinematic vertical magazine — completely original
   ============================================================ */

@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=DM+Sans:wght@300;400;500;600&family=Cinzel:wght@400;600&display=swap');

/* ── 1. VARIABLES ──────────────────────────────────────────── */
:root {
  --c-primary:   var(--inv-primary,   #C9A24E);
  --c-secondary: var(--inv-secondary, #8C6B2E);
  --c-gold:      #C9A24E;
  --c-gold-lt:   #E8C97E;
  --c-gold-dim:  rgba(201,162,78,.15);
  --c-gold-dim2: rgba(201,162,78,.07);
  --c-obsidian:  #0F0D0C;
  --c-ink:       #1A1614;
  --c-ink2:      #211E1B;
  --c-ink3:      #2A2622;
  --c-ink4:      #332E2A;
  --c-ivory:     #F4EFE6;
  --c-ivory2:    rgba(244,239,230,.72);
  --c-ivory3:    rgba(244,239,230,.42);
  --c-ivory4:    rgba(244,239,230,.20);
  --c-border:    rgba(201,162,78,.18);
  --c-border2:   rgba(244,239,230,.08);
  --an-serif:    'Cormorant Garamond', 'Georgia', serif;
  --an-display:  'Cinzel', serif;
  --an-sans:     'DM Sans', system-ui, sans-serif;
  --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(--an-sans);
  background: var(--c-obsidian);
  color: var(--c-ivory);
  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: 2px; }
::-webkit-scrollbar-track { background: var(--c-obsidian); }
::-webkit-scrollbar-thumb { background: var(--c-gold); border-radius: 2px; }

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

/* ── 4. SCROLL REVEAL ──────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .22s; }
.d3 { transition-delay: .34s; }
.d4 { transition-delay: .48s; }

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

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

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

/* ── 8. GATE / COVER ───────────────────────────────────────── */
#an-gate {
  position: fixed; inset: 0;
  z-index: 8000;
  display: flex;
  background: var(--c-obsidian);
  overflow: hidden;
  cursor: pointer;
  transition: opacity .7s ease, transform .7s ease;
}
#an-gate.closing {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

/* Left half — photo */
.an-gate-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-ink3);
  clip-path: polygon(0 0, 62% 0, 50% 100%, 0 100%);
  transition: clip-path .4s ease;
}
.an-gate-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(15,13,12,.15) 0%,
    rgba(15,13,12,.5) 50%,
    rgba(15,13,12,.85) 100%
  );
}

/* Right half — content */
.an-gate-body {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 2rem 2rem 2rem 50%;
}

/* Corner frame ornament (signature element #1) */
.an-corner {
  position: absolute;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 1;
}
.an-corner::before, .an-corner::after {
  content: '';
  position: absolute;
  background: var(--c-gold);
}
.an-corner::before { width: 100%; height: 1px; }
.an-corner::after  { width: 1px; height: 100%; }
.an-corner-tl { top: 1.25rem; left: 1.25rem; }
.an-corner-tr { top: 1.25rem; right: 1.25rem; transform: scaleX(-1); }
.an-corner-bl { bottom: 1.25rem; left: 1.25rem; transform: scaleY(-1); }
.an-corner-br { bottom: 1.25rem; right: 1.25rem; transform: scale(-1); }

.an-gate-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-end; text-align: right;
  max-width: 220px;
}

.an-gate-eyebrow {
  font-family: var(--an-display);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: gateIn .8s ease .2s forwards;
}

.an-gate-monogram {
  font-family: var(--an-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0;
  animation: gateIn .8s ease .35s forwards;
}

.an-gate-names {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  margin-bottom: 1.125rem;
  opacity: 0;
  animation: gateIn .8s ease .5s forwards;
}
.an-gate-groom, .an-gate-bride {
  font-family: var(--an-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c-ivory);
  letter-spacing: .02em;
  line-height: 1.2;
}
.an-gate-sep {
  font-size: .75rem; color: var(--c-gold);
  letter-spacing: .1em;
}

.an-gate-date {
  font-family: var(--an-sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--c-ivory3);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .5rem;
  justify-content: flex-end;
  opacity: 0;
  animation: gateIn .8s ease .65s forwards;
}
.an-gate-date-dot { color: var(--c-gold); font-size: .875rem; }

.an-gate-to {
  font-size: .6875rem;
  color: var(--c-ivory3);
  text-align: right;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: gateIn .8s ease .75s forwards;
}
.an-gate-to strong { color: var(--c-ivory2); font-weight: 500; }

.an-gate-open-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .6875rem 1.375rem;
  background: transparent;
  border: 1px solid var(--c-gold);
  border-radius: 0;
  color: var(--c-gold);
  font-family: var(--an-display);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
  opacity: 0;
  animation: gateIn .8s ease .9s forwards;
}
.an-gate-open-btn:hover {
  background: var(--c-gold);
  color: var(--c-obsidian);
}
.an-gate-open-text { flex-shrink: 0; }
.an-gate-open-icon { display: flex; align-items: center; }

@keyframes gateIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Mobile gate adjustment */
@media (max-width: 480px) {
  .an-gate-photo { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 56%); }
  .an-gate-body {
    padding: 58% 1.75rem 2rem;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .an-gate-inner { align-items: flex-end; }
  .an-gate-monogram { font-size: 2rem; }
}

/* ── 9. BOTTOM NAV ─────────────────────────────────────────── */
#an-nav {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--max-w);
  z-index: 400; display: none;
  background: rgba(15,13,12,.9);
  border-top: 1px solid rgba(201,162,78,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.an-nav-track {
  display: flex; align-items: stretch;
  padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.an-nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .625rem .25rem;
  gap: .25rem;
  color: rgba(244,239,230,.35);
  font-family: var(--an-sans);
  font-size: .575rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .2s ease;
  cursor: pointer;
}
.an-nav-btn svg { transition: transform .2s ease; }
.an-nav-btn:hover { color: var(--c-ivory2); }
.an-nav-btn.active { color: var(--c-gold); }
.an-nav-btn.active svg { transform: translateY(-1px); }

/* ── 10. SECTION BASE ──────────────────────────────────────── */
.an-section { padding: 3.5rem 0 3rem; }
.an-section-inner { padding: 0 1.75rem; max-width: 100%; }

.an-bg-ink  { background: var(--c-ink); }
.an-bg-dark { background: var(--c-ink2); }

/* Label strip — left-aligned, very different from Sakura's centered label */
.an-label-strip {
  display: flex; align-items: center; gap: .875rem;
  margin-bottom: 1.125rem;
}
.an-label-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  max-width: 48px;
}
.an-label-text {
  font-family: var(--an-display);
  font-size: .5625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}
.an-section-title {
  font-family: var(--an-serif);
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--c-ivory);
  margin-bottom: 2rem;
  letter-spacing: .01em;
}
.an-section-title em {
  font-style: italic;
  color: var(--c-gold);
}

/* ── 11. ORNAMENT DIVIDER (signature #2) ───────────────────── */
.an-ornament {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0;
}
.an-orn-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}
.an-orn-diamond {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--c-gold);
}

/* ── 12. HERO ──────────────────────────────────────────────── */
#an-hero {
  position: relative;
  height: 100vh; min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.an-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--c-ink3);
  transform: scale(1.04);
  transition: transform 8s ease;
}
#an-wrap:is([style]) .an-hero-bg { transform: scale(1); }
.an-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,13,12,.5) 0%,
    rgba(15,13,12,.3) 40%,
    rgba(15,13,12,.75) 80%,
    rgba(15,13,12,1) 100%
  );
}
.an-hero-content {
  position: relative; z-index: 1;
  text-align: center; padding: 0 1.75rem;
  display: flex; flex-direction: column; align-items: center;
}
.an-hero-eyebrow {
  font-family: var(--an-display);
  font-size: .5625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.25rem;
}
.an-hero-mono {
  font-family: var(--an-display);
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 1.125rem;
  text-shadow: 0 0 40px rgba(201,162,78,.35);
}
.an-hero-names {
  display: flex; flex-direction: column;
  align-items: center; gap: .25rem;
  margin-bottom: 1.75rem;
}
.an-hero-gname, .an-hero-bname {
  font-family: var(--an-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-ivory);
  letter-spacing: .04em;
  line-height: 1.15;
}
.an-hero-ampersand {
  font-family: var(--an-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--c-gold);
  line-height: 1;
}
.an-hero-date {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center;
}
.an-hero-date-line {
  width: 40px; height: 1px;
  background: var(--c-gold); opacity: .6;
}
.an-hero-date-text {
  font-family: var(--an-sans);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--c-ivory3);
  text-transform: uppercase;
}
.an-hero-date-sep { color: var(--c-gold); margin: 0 .375rem; }

/* Scroll cue */
.an-hero-scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 2;
}
.an-hero-scroll-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-gold);
  animation: scrollPulse 1.8s ease infinite;
}
.an-hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
}
@keyframes scrollPulse {
  0%,100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(4px); opacity: .5; }
}

/* ── 13. OPENING ───────────────────────────────────────────── */
.an-bismillah {
  font-family: var(--an-serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--c-gold);
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
  line-height: 1.6;
}
.an-opening-text {
  font-family: var(--an-serif);
  font-size: 1rem;
  font-weight: 300;
  color: var(--c-ivory2);
  line-height: 2;
  font-style: italic;
  max-width: 320px;
  margin: 0 auto;
}

/* ── 14. QUOTE ─────────────────────────────────────────────── */
.an-quote-section {
  background: var(--c-ink3);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.an-quote-mark {
  position: absolute; top: 1rem; left: 1.5rem;
  font-family: var(--an-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--c-gold-dim);
  pointer-events: none;
  user-select: none;
}
.an-quote-text {
  font-family: var(--an-serif);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 300;
  color: var(--c-ivory2);
  line-height: 1.8;
  text-align: center;
  position: relative;
}
.an-quote-source {
  display: block;
  font-family: var(--an-sans);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--c-gold);
  text-align: center;
  margin-top: 1rem;
}

/* ── 15. COUPLE — left-accent editorial card ───────────────── */
.an-person {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-border2);
  position: relative;
}
.an-person:last-of-type { border-bottom: none; }
.an-person-accent {
  position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  border-radius: 2px;
}
.an-person { padding-left: 1.125rem; }
.an-person-photo-wrap {
  width: 80px; height: 100px; flex-shrink: 0;
  border-radius: 2px; overflow: hidden;
  background: var(--c-ink3);
  border: 1px solid var(--c-border);
}
.an-person-photo { width: 100%; height: 100%; object-fit: cover; }
.an-person-initial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--an-display);
  font-size: 1.75rem;
  color: var(--c-gold);
}
.an-person-body { flex: 1; min-width: 0; }
.an-person-label {
  font-family: var(--an-display);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: .5rem;
}
.an-person-nick {
  font-family: var(--an-serif);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--c-ivory);
  line-height: 1.2;
  margin-bottom: .25rem;
}
.an-person-fullname {
  font-family: var(--an-sans);
  font-size: .75rem;
  color: var(--c-ivory3);
  margin-bottom: .75rem;
  letter-spacing: .04em;
}
.an-person-parents {
  font-size: .75rem;
  color: var(--c-ivory3);
  line-height: 1.7;
}
.an-person-parents strong { color: var(--c-ivory2); font-weight: 500; }
.an-person-bio {
  font-size: .8125rem;
  color: var(--c-ivory3);
  line-height: 1.7;
  margin-top: .5rem;
  font-style: italic;
}
.an-couple-divider { padding: 1rem 0; }

/* ── 16. LOVE STORY — big year watermark timeline ──────────── */
.an-story-text {
  font-family: var(--an-serif);
  font-size: .9375rem;
  color: var(--c-ivory3);
  line-height: 2;
  font-style: italic;
  margin-bottom: 2rem;
}
.an-timeline-wrap {
  display: flex; gap: 0; overflow-x: auto;
  padding: 1rem 1.75rem 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.an-timeline-wrap::-webkit-scrollbar { display: none; }
.an-tl-card {
  flex-shrink: 0; width: 200px;
  scroll-snap-align: start;
  position: relative;
  padding: 1.5rem 1.25rem;
  background: var(--c-ink3);
  border-left: 1px solid var(--c-border);
  overflow: hidden;
}
.an-tl-card:first-child { border-radius: 2px 0 0 2px; }
.an-tl-card:last-child  { border-radius: 0 2px 2px 0; border-right: 1px solid var(--c-border); }
.an-tl-year-bg {
  position: absolute; top: -0.5rem; right: -0.5rem;
  font-family: var(--an-display);
  font-size: 4.5rem; font-weight: 600;
  color: var(--c-gold-dim2);
  pointer-events: none; user-select: none;
  line-height: 1;
}
.an-tl-content { position: relative; z-index: 1; }
.an-tl-icon {
  font-size: 1.125rem; margin-bottom: .625rem;
  color: var(--c-gold);
}
.an-tl-year {
  font-family: var(--an-display);
  font-size: .625rem; letter-spacing: .18em;
  color: var(--c-gold);
  margin-bottom: .375rem;
  text-transform: uppercase;
}
.an-tl-title {
  font-family: var(--an-serif);
  font-size: .9375rem; font-weight: 500;
  color: var(--c-ivory); line-height: 1.4;
  margin-bottom: .375rem;
}
.an-tl-desc {
  font-size: .75rem;
  color: var(--c-ivory3);
  line-height: 1.6;
}
.an-tl-hint {
  text-align: center;
  font-size: .6875rem;
  color: var(--c-ivory4);
  letter-spacing: .1em;
  padding: .5rem 0 1.5rem;
}

/* ── 17. EVENTS — Roman numeral card ───────────────────────── */
.an-event-card {
  background: var(--c-ink3);
  border: 1px solid var(--c-border2);
  border-radius: 2px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  position: relative;
}
.an-event-roman {
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: var(--an-display);
  font-size: 3.5rem; font-weight: 600;
  color: var(--c-gold-dim);
  line-height: 1;
  pointer-events: none; user-select: none;
}
.an-event-inner { padding: 1.625rem 1.5rem; position: relative; z-index: 1; }
.an-event-type {
  font-family: var(--an-display);
  font-size: .5rem; letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: .25rem;
}
.an-event-label {
  font-family: var(--an-serif);
  font-size: 1.1875rem; font-weight: 400;
  color: var(--c-ivory); margin-bottom: 1rem;
}
.an-event-divider {
  width: 32px; height: 1px;
  background: var(--c-gold); opacity: .5;
  margin-bottom: 1.125rem;
}
.an-event-row {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: .875rem;
}
.an-event-row:last-child { margin-bottom: 0; }
.an-event-row-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-gold-dim);
  border-radius: 50%;
  color: var(--c-gold);
  margin-top: .125rem;
}
.an-event-row-body { flex: 1; min-width: 0; }
.an-event-row-main {
  font-family: var(--an-serif);
  font-size: .9375rem; font-weight: 400;
  color: var(--c-ivory); line-height: 1.5;
}
.an-event-row-sub {
  font-size: .75rem;
  color: var(--c-ivory3);
  margin-top: .125rem;
}
.an-maps-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem;
  padding: .5625rem 1.125rem;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 0;
  color: var(--c-gold);
  font-family: var(--an-display);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .25s ease;
  cursor: pointer;
}
.an-maps-btn:hover {
  background: var(--c-gold-dim);
  border-color: var(--c-gold);
  color: var(--c-gold-lt);
}
.an-maps-embed {
  margin-top: 1rem; overflow: hidden;
  border-radius: 2px;
}
.an-maps-embed iframe {
  width: 100%; height: 200px;
  border: none; display: block;
}

/* ── 18. COUNTDOWN — Circular ring ────────────────────────── */
.an-cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin: 2rem 0;
}
.an-cd-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: .5rem;
}
.an-cd-ring {
  position: relative; width: 72px; height: 72px;
}
.an-cd-ring-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.an-cd-ring-bg {
  fill: none;
  stroke: rgba(201,162,78,.12);
  stroke-width: 4;
}
.an-cd-ring-fill {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
  transition: stroke-dashoffset .8s ease;
}
.an-cd-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.an-cd-num {
  font-family: var(--an-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--c-ivory);
  line-height: 1;
}
.an-cd-lbl {
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ivory3);
  font-family: var(--an-sans);
}

/* ── 19. GALLERY — Staggered masonry ──────────────────────── */
.an-gallery-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 180px;
  gap: 3px;
  padding: 0 1.75rem 1.75rem;
}
.an-gal-item {
  position: relative; overflow: hidden;
  cursor: pointer; grid-row: span 1;
  background: var(--c-ink3);
}
.an-gal-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.an-gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.an-gal-item:hover img { transform: scale(1.04); }
.an-gal-overlay {
  position: absolute; inset: 0;
  background: rgba(15,13,12,.0);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease;
}
.an-gal-item:hover .an-gal-overlay { background: rgba(15,13,12,.35); }
.an-gal-overlay svg { opacity: 0; transition: opacity .3s ease; }
.an-gal-item:hover .an-gal-overlay svg { opacity: 1; }

/* ── 20. LIGHTBOX ──────────────────────────────────────────── */
#an-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,8,8,.96);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
#an-lightbox.open { display: flex; }
#an-lb-img {
  max-width: 100%; max-height: 80vh;
  object-fit: contain; border-radius: 2px;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}
#an-lb-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #fff; font-size: 1.125rem;
  cursor: pointer; transition: background .2s ease;
}
#an-lb-close:hover { background: rgba(255,255,255,.16); }
#an-lb-prev, #an-lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: #fff; font-size: 1.5rem;
  cursor: pointer;
  transition: background .2s ease;
}
#an-lb-prev { left: .75rem; }
#an-lb-next { right: .75rem; }
#an-lb-prev:hover, #an-lb-next:hover { background: rgba(255,255,255,.14); }
#an-lb-caption {
  position: absolute; bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  font-size: .75rem; color: rgba(255,255,255,.5);
  white-space: nowrap; max-width: 90%;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── 21. RUNDOWN ───────────────────────────────────────────── */
.an-rundown { display: flex; flex-direction: column; gap: 0; }
.an-run-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .875rem 0;
}
.an-run-time {
  width: 60px; flex-shrink: 0;
  font-family: var(--an-sans);
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: .06em;
  text-align: right;
  padding-top: .125rem;
}
.an-run-dot {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; gap: .25rem; padding-top: .25rem;
}
.an-run-dot-inner {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-gold);
  border: 1px solid var(--c-gold);
  flex-shrink: 0;
}
.an-run-dot-line {
  width: 1px; flex: 1;
  background: linear-gradient(to bottom, var(--c-border), transparent);
  min-height: 24px;
}
.an-run-item:last-child .an-run-dot-line { display: none; }
.an-run-title {
  font-family: var(--an-serif);
  font-size: 1rem; font-weight: 500;
  color: var(--c-ivory); line-height: 1.4;
}
.an-run-desc {
  font-size: .75rem; color: var(--c-ivory3);
  margin-top: .25rem; line-height: 1.6;
}

/* ── 22. FORMS (RSVP + WISH) ───────────────────────────────── */
.an-form { display: flex; flex-direction: column; gap: 1rem; }
.an-form-grp { display: flex; flex-direction: column; gap: .4375rem; }
.an-label {
  font-family: var(--an-sans);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ivory3);
}
.an-label small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.an-input {
  width: 100%; padding: .75rem 1rem;
  background: var(--c-ink3);
  border: 1px solid rgba(244,239,230,.1);
  border-radius: 0;
  color: var(--c-ivory);
  font-size: .875rem; font-family: var(--an-sans);
  outline: none; transition: border-color .25s ease;
  -webkit-appearance: none;
}
.an-input:focus { border-color: var(--c-gold); }
.an-input::placeholder { color: var(--c-ivory4); }
.an-input option { background: var(--c-ink3); }

.an-attend-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.an-attend-opt {
  padding: .75rem .5rem;
  background: var(--c-ink3);
  border: 1px solid rgba(244,239,230,.1);
  border-radius: 0;
  color: var(--c-ivory3);
  font-size: .8125rem; font-family: var(--an-sans);
  transition: all .25s ease; cursor: pointer;
  text-align: center;
}
.an-attend-opt.active,
.an-attend-opt:hover {
  border-color: var(--c-gold);
  background: var(--c-gold-dim);
  color: var(--c-gold);
}

.an-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.5rem;
  background: transparent;
  border: 1px solid var(--c-gold);
  border-radius: 0;
  color: var(--c-gold);
  font-family: var(--an-display);
  font-size: .5625rem; letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
  width: 100%;
}
.an-submit-btn:hover {
  background: var(--c-gold);
  color: var(--c-obsidian);
}

/* ── 23. WISHES ────────────────────────────────────────────── */
.an-wish-card {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--c-border2);
}
.an-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(--an-display);
  font-size: .875rem; color: var(--c-gold);
}
.an-wish-body { flex: 1; min-width: 0; }
.an-wish-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .375rem .75rem; margin-bottom: .375rem;
}
.an-wish-name {
  font-family: var(--an-serif);
  font-size: .9375rem; font-weight: 500;
  color: var(--c-ivory);
}
.an-wish-rel {
  font-size: .6875rem; color: var(--c-gold);
  letter-spacing: .06em;
}
.an-wish-time {
  font-size: .6875rem; color: var(--c-ivory4);
  margin-left: auto;
}
.an-wish-msg {
  font-size: .8125rem; color: var(--c-ivory3);
  line-height: 1.7;
}

.an-loadmore {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .875rem;
  background: transparent;
  border: 1px solid var(--c-border2);
  border-radius: 0;
  color: var(--c-ivory3);
  font-family: var(--an-sans);
  font-size: .75rem; letter-spacing: .08em;
  cursor: pointer; transition: all .25s ease;
  margin-top: 1.25rem;
}
.an-loadmore:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ── 24. GIFT ──────────────────────────────────────────────── */
.an-tabs {
  display: flex; gap: 0; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border2);
}
.an-tab {
  flex: 1; padding: .75rem;
  font-family: var(--an-sans);
  font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ivory3);
  border: none; background: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .25s ease;
  margin-bottom: -1px;
}
.an-tab.active { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.an-tab-panel { }
.an-hidden { display: none; }

.an-bank-card {
  display: flex; align-items: center;
  background: var(--c-ink3);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  gap: 1rem;
}
.an-bank-left { flex: 1; min-width: 0; }
.an-bank-name {
  font-family: var(--an-display);
  font-size: .5625rem; letter-spacing: .2em;
  color: var(--c-gold); text-transform: uppercase;
  margin-bottom: .375rem;
}
.an-bank-num {
  font-family: 'Courier New', monospace;
  font-size: 1.25rem; color: var(--c-ivory);
  letter-spacing: .1em;
  margin-bottom: .25rem;
}
.an-bank-holder { font-size: .75rem; color: var(--c-ivory3); }
.an-copy-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem .875rem;
  background: var(--c-gold-dim);
  border: 1px solid var(--c-border);
  border-radius: 0;
  color: var(--c-gold);
  font-family: var(--an-sans);
  font-size: .6875rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
  white-space: nowrap;
}
.an-copy-btn:hover { background: var(--c-gold); color: var(--c-obsidian); }
.an-address-box {
  background: var(--c-ink3);
  border: 1px solid var(--c-border2);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  font-size: .875rem;
  color: var(--c-ivory2);
  line-height: 1.8;
}

/* ── 25. CONTACT ───────────────────────────────────────────── */
.an-contact-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--c-ink3);
  border: 1px solid var(--c-border2);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.an-contact-left { flex: 1; min-width: 0; }
.an-contact-name {
  font-family: var(--an-serif);
  font-size: 1rem; font-weight: 500;
  color: var(--c-ivory);
}
.an-contact-phone { font-size: .8125rem; color: var(--c-ivory3); margin-top: .25rem; }
.an-wa-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5625rem 1rem;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: 0;
  color: #25d366;
  font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background .25s ease;
  text-decoration: none;
}
.an-wa-btn:hover { background: rgba(37,211,102,.22); }
.an-note-text {
  font-size: .8125rem; color: var(--c-ivory3);
  line-height: 1.8; font-style: italic;
  padding: .875rem 0;
  border-top: 1px solid var(--c-border2);
}

/* ── 26. HASHTAG ───────────────────────────────────────────── */
.an-hashtag-wrap { display: flex; flex-direction: column; gap: .75rem; }
.an-hashtag {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-ink3);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  cursor: pointer; transition: border-color .2s ease;
}
.an-hashtag:hover { border-color: var(--c-gold); }
.an-hashtag-text {
  font-family: var(--an-serif);
  font-size: 1.0625rem; font-style: italic;
  color: var(--c-gold);
}
.an-hashtag-copy-icon { color: var(--c-ivory3); flex-shrink: 0; }

/* ── 27. CLOSING — Wax seal aesthetic ──────────────────────── */
.an-closing-bg-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--an-display);
  font-size: 7rem; font-weight: 600;
  color: rgba(201,162,78,.04);
  white-space: nowrap;
  pointer-events: none; user-select: none;
  letter-spacing: .1em;
}
.an-seal {
  width: 90px; height: 90px;
  position: relative;
  margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
}
.an-seal-ring {
  position: absolute; inset: 0;
  border: 1.5px solid var(--c-gold);
  border-radius: 50%;
  opacity: .6;
  animation: sealRotate 12s linear infinite;
}
.an-seal-ring::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px dashed rgba(201,162,78,.4);
  border-radius: 50%;
}
@keyframes sealRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.an-seal-inner {
  font-family: var(--an-display);
  font-size: 1.375rem; font-weight: 600;
  color: var(--c-gold);
  z-index: 1;
}
.an-closing-text {
  font-family: var(--an-serif);
  font-size: .9375rem;
  color: var(--c-ivory3);
  line-height: 2; font-style: italic;
  margin-bottom: 1.75rem;
  max-width: 300px;
  margin-left: auto; margin-right: auto;
}
.an-closing-names {
  display: flex; align-items: center; justify-content: center;
  gap: .875rem; margin-bottom: .875rem;
  font-family: var(--an-serif);
  font-size: 1.375rem;
  color: var(--c-ivory);
  font-weight: 300; letter-spacing: .04em;
}
.an-closing-amp { font-style: italic; color: var(--c-gold); }
.an-closing-date {
  font-family: var(--an-sans);
  font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ivory3);
  margin-bottom: 2rem;
}
.an-closing-share-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .75rem 1.75rem;
  background: var(--c-gold-dim);
  border: 1px solid var(--c-border);
  border-radius: 0;
  color: var(--c-gold);
  font-family: var(--an-display);
  font-size: .5625rem; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer;
  transition: all .25s ease;
}
.an-closing-share-btn:hover {
  background: var(--c-gold);
  color: var(--c-obsidian);
  border-color: var(--c-gold);
}
.an-brand {
  margin-top: 2.5rem;
  font-size: .6875rem;
  color: var(--c-ivory4);
  letter-spacing: .06em;
}
.an-brand a { color: var(--c-ivory3); text-decoration: underline; text-underline-offset: 3px; }

/* ── 28. SHARE SHEET ───────────────────────────────────────── */
#an-share-sheet {
  position: fixed; inset: 0; z-index: 8500;
  background: rgba(10,8,8,.7);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#an-share-panel {
  background: var(--c-ink3);
  border: 1px solid var(--c-border);
  border-radius: 0;
  padding: 2rem 1.75rem;
  width: 100%; max-width: var(--max-w);
  border-top: 1px solid var(--c-gold);
}
.an-share-title {
  font-family: var(--an-display);
  font-size: .5625rem; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
  margin-bottom: 1.5rem;
}
.an-share-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  margin-bottom: 1.5rem;
}
.an-share-item {
  display: flex; flex-direction: column;
  align-items: center; gap: .5rem;
  padding: .875rem .375rem;
  background: var(--c-ink2);
  border: 1px solid var(--c-border2);
  border-radius: 2px;
  cursor: pointer; transition: border-color .2s ease;
  font-size: .6875rem; color: var(--c-ivory2);
  font-family: var(--an-sans);
}
.an-share-item:hover { border-color: var(--c-gold); }
.an-share-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
.an-share-icon svg { width: 18px; height: 18px; }
.an-share-wa   .an-share-icon { background: rgba(37,211,102,.15); color: #25d366; }
.an-share-tg   .an-share-icon { background: rgba(42,171,238,.15); color: #29a8eb; }
.an-share-fb   .an-share-icon { background: rgba(59,89,152,.2);   color: #8b9dc3; }
.an-share-copy .an-share-icon { background: var(--c-gold-dim); color: var(--c-gold); }
.an-share-close {
  width: 100%; padding: .75rem;
  background: transparent;
  border: 1px solid var(--c-border2);
  border-radius: 0;
  color: var(--c-ivory3);
  font-family: var(--an-sans);
  font-size: .75rem; cursor: pointer;
  transition: border-color .2s ease;
  letter-spacing: .06em;
}
.an-share-close:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ── 29. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 380px) {
  .an-hero-gname, .an-hero-bname { font-size: 1.625rem; }
  .an-hero-mono { font-size: 2.75rem; }
  .an-cd-grid { gap: .5rem; }
  .an-cd-ring { width: 60px; height: 60px; }
  .an-cd-num { font-size: 1rem; }
  .an-share-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 30. INIT STATE (nav + float hidden until opened) ──────── */
/* shown via JS after gate open */
#an-nav   { display: none; }
#an-float { display: none; }

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