/* ============================================================
   WEDDING LUXE MOTION — Template CSS
   UndanganKu by Bacaunduh
   Slug: wedding-luxe-motion | Tier: premium | Category: wedding
   Konsep: Cinematic Black & Gold Motion Editorial
   Signature #1: Typewriter gate + CSS film grain texture
   Signature #2: Filmstrip horizontal timeline (sprocket holes)
   BEDA TOTAL — paling berbeda dari semua template di koleksi
   ============================================================ */

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

/* ── 1. CSS VARIABLES ──────────────────────────────────────── */
:root {
  --c-primary:     var(--inv-primary,   #D4AF37);
  --c-secondary:   var(--inv-secondary, #A08020);
  --c-gold:        #D4AF37;
  --c-gold-lt:     #E8CF6A;
  --c-gold-pale:   #F5E9B8;
  --c-gold-dim:    rgba(212,175,55,.14);
  --c-gold-dim2:   rgba(212,175,55,.07);
  --c-champagne:   #F0E6C8;
  --c-platinum:    #D8D8D8;
  --c-platinum-dim:rgba(216,216,216,.15);
  --c-black:       #080808;
  --c-near-black:  #0E0E0E;
  --c-dark:        #141414;
  --c-dark2:       #1A1A1A;
  --c-dark3:       #222222;
  --c-text:        rgba(240,230,200,.9);
  --c-text2:       rgba(212,175,55,.75);
  --c-text3:       rgba(240,230,200,.4);
  --c-text4:       rgba(240,230,200,.18);
  --c-border:      rgba(212,175,55,.2);
  --c-border2:     rgba(240,230,200,.08);
  --wlm-serif:     'Cormorant Garamond', Georgia, serif;
  --wlm-sans:      'Didact Gothic', system-ui, sans-serif;
  --wlm-script:    'Satisfy', cursive;
  --max-w:         480px;
  --tr:            .4s 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(--wlm-sans);
  background: var(--c-black);
  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: 2px; }
::-webkit-scrollbar-track { background: var(--c-black); }
::-webkit-scrollbar-thumb { background: var(--c-gold); border-radius: 99px; }

/* ── 3. WRAPPER ────────────────────────────────────────────── */
#wlm-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--c-near-black);
  min-height: 100vh;
  position: relative; overflow-x: hidden;
  box-shadow: 0 0 160px rgba(212,175,55,.08);
}

/* ── 4. SCROLL REVEAL ──────────────────────────────────────── */
.wlm-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}
.wlm-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 ───────────────────────────────────────────── */
#wlm-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), var(--c-gold));
  background-size: 200% 100%;
  animation: shimmerBar 2.5s linear infinite;
  z-index: 9999; pointer-events: none;
  transition: width .1s linear;
}
@keyframes shimmerBar {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ── 6. TOAST ──────────────────────────────────────────────── */
#wlm-toast {
  position: fixed; bottom: 5.5rem; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-dark2); 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(--wlm-sans);
}
#wlm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 7. FILM GRAIN (signature #1) ──────────────────────────── */
.wlm-grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  /* CSS noise via repeating tiny radial gradients */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
/* Hero gets slightly stronger grain */
.wlm-hero-grain { opacity: 0.25; }

/* ── 8. SCAN LINES ─────────────────────────────────────────── */
.wlm-scanlines {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.06) 2px,
    rgba(0,0,0,.06) 4px
  );
  opacity: .4;
}

/* ── 9. FLOAT CONTROLS ─────────────────────────────────────── */
#wlm-float {
  position: fixed; right: 1rem; bottom: 5%;;
  transform: translateY(-50%);
  z-index: 500; display: none;
  flex-direction: column; gap: .5rem;
}
.wlm-fb {
  width: 30px; height: 30px; border-radius: 0;
  background: rgba(8,8,8,.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;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.wlm-fb:hover { border-color: var(--c-gold); color: var(--c-gold); }
.wlm-fb.wlm-fb-on { background: var(--c-gold-dim); border-color: var(--c-gold); color: var(--c-gold); }

/* ── 10. GATE ──────────────────────────────────────────────── */
#wlm-gate {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--c-black);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  transition: opacity .9s ease, transform .9s ease;
}
#wlm-gate.wlm-gate-out {
  opacity: 0; transform: scale(1.04);
  pointer-events: none;
}
.wlm-gate-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.3) saturate(.6);
  transform: scale(1.04);
  transition: transform 8s ease;
}
.wlm-gate-no-photo {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark3) 100%);
}
.wlm-gate-vignette {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.85) 100%);
}

/* Gate body */
.wlm-gate-body {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 2rem 2.25rem;
  width: 100%; max-width: var(--max-w);
}

/* Top counter decoration */
.wlm-gate-counter {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.75rem;
  opacity: 0; animation: wlmIn .8s ease .1s forwards;
}
.wlm-cnt-bar {
  flex: 1; max-width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border));
}
.wlm-cnt-txt {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-text3);
}

/* Wedding label */
.wlm-gate-label {
  font-family: var(--wlm-sans); font-size: .5625rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 1.5rem;
  opacity: 0; animation: wlmIn .8s ease .3s forwards;
}

/* Typewriter name (signature #1) */
.wlm-gate-tw-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.5rem; margin-bottom: 1.25rem;
  opacity: 0; animation: wlmIn .6s ease .5s forwards;
}
.wlm-gate-tw {
  font-family: var(--wlm-script);
  font-size: 2.25rem; color: var(--c-champagne);
  line-height: 1.1; letter-spacing: .02em;
}
.wlm-tw-cursor {
  font-family: var(--wlm-sans); font-size: 2rem;
  color: var(--c-gold); margin-left: 2px;
  animation: cursorBlink .7s step-end infinite;
  line-height: 1;
}
@keyframes cursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Date badge */
.wlm-gate-date {
  margin-bottom: 1.375rem;
  opacity: 0; animation: wlmIn .8s ease .8s forwards;
}
.wlm-gate-date-inner {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .625rem 1.5rem;
  border: 1px solid var(--c-border);
  background: rgba(212,175,55,.06);
}
.wlm-gate-date-day {
  font-family: var(--wlm-serif); font-size: 2rem; font-weight: 300;
  color: var(--c-gold); line-height: 1;
}
.wlm-gate-date-center {
  display: flex; flex-direction: column; align-items: flex-start; gap: .125rem;
  font-family: var(--wlm-sans); font-size: .5625rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-text3);
}
.wlm-gate-date-dow {
  font-family: var(--wlm-sans); font-size: .5625rem;
  letter-spacing: .16em; color: var(--c-text3);
}

/* Guest name */
.wlm-gate-to {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; margin-bottom: 1.75rem;
  opacity: 0; animation: wlmIn .8s ease 1s forwards;
}
.wlm-gate-to-lbl {
  font-family: var(--wlm-sans); font-size: .5625rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--c-text3);
}
.wlm-gate-to-name {
  font-family: var(--wlm-serif); font-size: 1.125rem; font-weight: 300;
  color: var(--c-champagne); letter-spacing: .04em;
}

/* CTA Button */
.wlm-gate-btn {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .875rem 2rem;
  background: transparent;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--wlm-sans); font-size: .5625rem;
  font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  cursor: pointer; transition: all .3s ease;
  opacity: 0; animation: wlmIn .8s ease 1.15s forwards;
  position: relative; overflow: hidden;
}
.wlm-gate-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.12), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.wlm-gate-btn:hover::before { transform: translateX(100%); }
.wlm-gate-btn:hover { box-shadow: 0 0 20px rgba(212,175,55,.2); }
.wlm-btn-label { flex-shrink: 0; }
.wlm-btn-line {
  flex: 1; max-width: 24px; height: 1px;
  background: var(--c-gold); opacity: .5;
}
.wlm-btn-icon { display: flex; align-items: center; }

/* Frame number bottom */
.wlm-gate-frame {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.75rem;
  opacity: 0; animation: wlmIn .8s ease 1.3s forwards;
}
.wlm-frame-num {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .2em; color: var(--c-text4);
}
.wlm-frame-bar {
  flex: 1; max-width: 36px; height: 1px;
  background: var(--c-text4);
}

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

/* ── 11. BOTTOM NAV ────────────────────────────────────────── */
#wlm-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-w); z-index: 400;
  display: none;
  background: rgba(8,8,8,.94);
  border-top: 1px solid var(--c-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.wlm-nav-inner {
  display: flex; align-items: stretch;
  padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.wlm-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(--wlm-sans); font-size: .5rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s ease; cursor: pointer;
}
.wlm-nb:hover { color: var(--c-text3); }
.wlm-nb.active { color: var(--c-gold); }
.wlm-nb.active svg { stroke: var(--c-gold); transform: translateY(-1px); }
.wlm-nb svg { transition: transform .2s ease; stroke: currentColor; }

/* ── 12. SECTION BASE ──────────────────────────────────────── */
.wlm-sec { padding: 3.5rem 0 3rem; }
.wlm-sec-inner { padding: 0 1.75rem; }
.wlm-bg-black     { background: var(--c-black); }
.wlm-bg-near-black{ background: var(--c-near-black); }

/* Section labels */
.wlm-sec-lbl {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .36em; text-transform: uppercase;
  color: var(--c-gold); text-align: center; margin-bottom: 1rem;
}
.wlm-sec-ttl {
  font-family: var(--wlm-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;
}
.wlm-sec-ttl em { font-style: italic; color: var(--c-gold); }

/* Shimmer divider (motion aesthetic) */
.wlm-shimmer-div {
  display: flex; align-items: center; gap: .875rem;
  margin: 1.5rem 0;
}
.wlm-sd-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
  position: relative; overflow: hidden;
}
.wlm-sd-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.6), transparent);
  animation: lineShimmer 3s ease infinite;
}
@keyframes lineShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}
.wlm-sd-diamond {
  font-size: .5rem; color: var(--c-gold); flex-shrink: 0;
  animation: diamondPulse 2s ease infinite;
}
@keyframes diamondPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.8); } }

/* ── 13. HERO ──────────────────────────────────────────────── */
.wlm-hero {
  position: relative; height: 100vh; min-height: 580px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wlm-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--c-dark);
  filter: brightness(.35) saturate(.7);
  transform: scale(1.04); transition: transform 8s ease;
}
.wlm-hero-fallback {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
}
.wlm-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,.4) 0%, rgba(8,8,8,.2) 40%, rgba(8,8,8,.8) 100%);
}

/* Floating name badge (unique hero element) */
.wlm-hero-badge {
  position: relative; z-index: 2;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(8,8,8,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  width: calc(100% - 3rem); max-width: 360px;
  box-shadow: 0 0 60px rgba(212,175,55,.08), inset 0 1px 0 rgba(212,175,55,.1);
}
.wlm-hero-badge-inner { text-align: center; }
.wlm-hero-badge-top {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 1rem;
}
.wlm-hero-couple {
  display: flex; flex-direction: column;
  align-items: center; gap: .25rem; margin-bottom: 1rem;
}
.wlm-hero-name {
  font-family: var(--wlm-script);
  font-size: 2.5rem; color: var(--c-champagne);
  line-height: 1.0; letter-spacing: .02em;
}
.wlm-hero-amp {
  font-family: var(--wlm-serif); font-style: italic;
  font-size: 1rem; color: var(--c-gold); line-height: 1.5;
}
.wlm-hero-badge-date {
  display: flex; align-items: center; gap: .75rem; justify-content: center;
}
.wlm-hero-badge-line {
  flex: 1; max-width: 40px; height: 1px;
  background: var(--c-border);
}
/* Badge corner marks */
.wlm-badge-corner {
  position: absolute; width: 12px; height: 12px;
}
.wlm-badge-corner::before, .wlm-badge-corner::after {
  content: ''; position: absolute; background: var(--c-gold);
}
.wlm-badge-corner::before { width: 100%; height: 1.5px; }
.wlm-badge-corner::after  { width: 1.5px; height: 100%; }
.wlm-bc-tl { top: -1px; left: -1px; }
.wlm-bc-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.wlm-bc-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.wlm-bc-br { bottom: -1px; right: -1px; transform: scale(-1,-1); }

/* Hero scroll hint */
.wlm-hero-scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: .375rem;
}
.wlm-hs-line {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, rgba(212,175,55,.5), transparent);
}
.wlm-hs-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--c-gold); opacity: .5;
  animation: dotFade 1.4s ease infinite;
}
.wlm-hs-dot:nth-child(2) { animation-delay: .2s; }
.wlm-hs-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotFade { 0%,100% { opacity:.5; } 50% { opacity: 0.1; } }

/* ── 14. OPENING ───────────────────────────────────────────── */
.wlm-bismillah {
  font-family: var(--wlm-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;
}
.wlm-open-txt {
  font-family: var(--wlm-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;
}

/* ── 15. QUOTE ─────────────────────────────────────────────── */
.wlm-quote-sec {
  position: relative; overflow: hidden;
  background: var(--c-dark);
  border-top: 1px solid var(--c-border2);
  border-bottom: 1px solid var(--c-border2);
}
.wlm-quote-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,175,55,.04) 0%, transparent 70%);
  pointer-events: none;
}
.wlm-quote-inner { padding: 3rem 2rem; position: relative; z-index: 1; }
.wlm-quote-mark {
  font-family: var(--wlm-serif); font-size: 4rem; font-weight: 300;
  color: rgba(212,175,55,.15); line-height: 1;
  display: block; text-align: center;
}
.wlm-quote-mark-close { text-align: right; margin-top: -.5rem; }
.wlm-quote {
  font-family: var(--wlm-serif); font-size: 1.125rem; font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 1.9; text-align: center;
  position: relative; margin: -.5rem 0;
}
.wlm-quote-src {
  display: block; font-family: var(--wlm-sans); font-size: .625rem;
  letter-spacing: .14em; color: var(--c-gold); text-align: center; margin-top: 1rem;
}

/* ── 16. COUPLE — Diagonal split panel ─────────────────────── */
.wlm-couple-panel {
  position: relative; height: 280px; overflow: hidden;
  margin-bottom: 2px; /* hairline gap between panels */
}
/* Photo side — takes full width but clips diagonally */
.wlm-couple-photo-side {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 62% 0, 48% 100%, 0 100%);
}
.wlm-panel-right .wlm-couple-photo-side {
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 52% 100%);
}
.wlm-couple-photo-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  background-color: var(--c-dark2);
  filter: brightness(.65) saturate(.7);
  transition: filter .4s ease;
}
.wlm-couple-panel:hover .wlm-couple-photo-bg { filter: brightness(.75) saturate(.8); }
.wlm-couple-no-photo {
  background: linear-gradient(135deg, var(--c-dark2), var(--c-dark3));
  display: flex; align-items: center; justify-content: center;
}
.wlm-couple-initial {
  font-family: var(--wlm-serif); font-size: 4rem; font-weight: 300;
  color: rgba(212,175,55,.3);
}
.wlm-couple-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.1) 0%, rgba(8,8,8,.7) 100%);
}
.wlm-panel-right .wlm-couple-photo-overlay {
  background: linear-gradient(90deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.1) 100%);
}

/* Info side */
.wlm-couple-info-side {
  position: absolute; top: 50%; right: 1.5rem;
  transform: translateY(-50%);
  text-align: right; z-index: 1; max-width: 180px;
}
.wlm-panel-right .wlm-couple-info-side {
  left: 1.5rem; right: auto; text-align: left;
}
.wlm-couple-lbl {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .5rem;
}
.wlm-couple-nick {
  font-family: var(--wlm-script);
  font-size: 1.75rem; color: var(--c-champagne);
  line-height: 1.1; margin-bottom: .25rem;
}
.wlm-couple-full {
  font-family: var(--wlm-sans); font-size: .6875rem;
  color: var(--c-text3); letter-spacing: .06em;
  margin-bottom: .625rem;
}
.wlm-couple-par {
  font-family: var(--wlm-sans); font-size: .6875rem;
  color: var(--c-text4); line-height: 1.7;
}
.wlm-couple-par strong { color: var(--c-text3); font-weight: 400; }
.wlm-couple-bio {
  font-family: var(--wlm-serif); font-size: .8125rem;
  font-style: italic; color: var(--c-text4);
  line-height: 1.8; margin-top: .5rem;
}

/* Connector between panels */
.wlm-couple-connector {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.75rem;
  background: var(--c-dark);
}
.wlm-cc-line { flex: 1; height: 1px; background: var(--c-border2); }
.wlm-cc-diamond {
  font-size: .5rem; color: var(--c-gold); flex-shrink: 0;
  animation: diamondPulse 2.5s ease infinite;
}

/* ── 17. FILMSTRIP TIMELINE (signature #2) ─────────────────── */
.wlm-story-txt {
  font-family: var(--wlm-serif); font-size: .9375rem;
  font-style: italic; font-weight: 300;
  color: var(--c-text3); line-height: 2;
  text-align: center; margin-bottom: 2.5rem;
}

/* Film strip outer wrapper */
.wlm-filmstrip-wrap {
  background: #0A0A0A;
  border-top: 2px solid #181818;
  border-bottom: 2px solid #181818;
  overflow: hidden;
}

/* Sprocket holes row (signature #2 — the film look) */
.wlm-sprocket {
  display: flex; align-items: center;
  padding: 0 .5rem; gap: .625rem;
  background: #060606;
  height: 22px;
  overflow: hidden;
}
.wlm-sp-hole {
  width: 16px; height: 12px; border-radius: 3px;
  background: #1A1A1A;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  flex-shrink: 0;
}

/* The actual film track — horizontal scroll */
.wlm-film-track {
  display: flex; gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--c-dark);
  padding: 1.5rem 1rem;
}
.wlm-film-track::-webkit-scrollbar { display: none; }

/* Individual film frame */
.wlm-film-frame {
  flex-shrink: 0; width: 185px;
  scroll-snap-align: start;
  position: relative;
  padding: 1.125rem 1rem 1rem;
  border: 1px solid rgba(255,255,255,.06);
  background: var(--c-dark2);
  margin-right: 3px;
  overflow: hidden;
  transition: border-color .3s ease;
}
.wlm-film-frame:hover { border-color: rgba(212,175,55,.2); }

/* Frame number — like a real film frame counter */
.wlm-frame-no {
  position: absolute; top: .375rem; left: .625rem;
  font-family: var(--wlm-sans); font-size: .55rem;
  letter-spacing: .12em; color: rgba(255,255,255,.12);
  user-select: none; pointer-events: none;
}

/* Film frame content */
.wlm-film-content { position: relative; z-index: 1; }
.wlm-film-icon {
  font-size: 1.25rem; margin-bottom: .5rem;
  filter: drop-shadow(0 0 6px rgba(212,175,55,.3));
}
.wlm-film-year {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .22em; color: var(--c-gold);
  text-transform: uppercase; margin-bottom: .375rem;
}
.wlm-film-title {
  font-family: var(--wlm-serif); font-size: .9375rem; font-weight: 400;
  color: var(--c-champagne); line-height: 1.4; margin-bottom: .375rem;
}
.wlm-film-desc { font-size: .75rem; color: var(--c-text3); line-height: 1.6; }

/* Frame corner marks */
.wlm-frame-mark {
  position: absolute; width: 8px; height: 8px;
}
.wlm-frame-mark::before, .wlm-frame-mark::after {
  content: ''; position: absolute; background: rgba(212,175,55,.25);
}
.wlm-frame-mark::before { width: 100%; height: 1px; }
.wlm-frame-mark::after  { width: 1px; height: 100%; }
.wlm-fm-tl { top: 5px; left: 5px; }
.wlm-fm-tr { top: 5px; right: 5px; transform: scaleX(-1); }
.wlm-fm-bl { bottom: 5px; left: 5px; transform: scaleY(-1); }
.wlm-fm-br { bottom: 5px; right: 5px; transform: scale(-1,-1); }

.wlm-film-hint {
  text-align: center; font-family: var(--wlm-sans);
  font-size: .5625rem; letter-spacing: .18em;
  color: var(--c-text4); padding: .75rem 0 1.5rem;
  text-transform: uppercase;
}

/* ── 18. EVENTS ────────────────────────────────────────────── */
.wlm-event-card {
  position: relative; margin-bottom: 1.5rem;
  background: var(--c-dark); border: 1px solid var(--c-border2);
  padding: 2rem 1.5rem 1.5rem;
  transition: border-color .3s ease;
  overflow: hidden;
}
.wlm-event-card:hover { border-color: rgba(212,175,55,.2); }
/* Large editorial event number */
.wlm-event-num {
  position: absolute; top: .625rem; right: 1.25rem;
  font-family: var(--wlm-serif); font-size: 4.5rem; font-weight: 300;
  color: rgba(212,175,55,.07);
  line-height: 1; user-select: none; pointer-events: none;
  letter-spacing: -.04em;
}
.wlm-event-body { position: relative; z-index: 1; }
.wlm-event-type {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .5rem;
}
.wlm-event-divider {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  margin-bottom: 1.125rem; opacity: .6;
}
.wlm-event-row {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-bottom: .875rem;
}
.wlm-event-ico {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); color: var(--c-gold);
  margin-top: .125rem;
}
.wlm-event-main {
  font-family: var(--wlm-serif); font-size: .9375rem; font-weight: 300;
  color: var(--c-champagne); line-height: 1.4;
}
.wlm-event-sub { font-size: .75rem; color: var(--c-text3); margin-top: .125rem; }
.wlm-maps-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.125rem; padding: .5rem 1.125rem;
  background: var(--c-gold-dim);
  border: 1px solid var(--c-border); color: var(--c-gold);
  font-family: var(--wlm-sans); font-size: .5625rem;
  font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; transition: all .25s ease; text-decoration: none;
}
.wlm-maps-btn:hover { background: rgba(212,175,55,.22); }
.wlm-maps-embed { margin-top: 1rem; overflow: hidden; }
.wlm-maps-embed iframe { width: 100%; height: 200px; border: none; display: block; }

/* ── 19. COUNTDOWN — Oversized minimal ─────────────────────── */
.wlm-cd-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center bottom, rgba(212,175,55,.06) 0%, transparent 65%);
  pointer-events: none;
}
.wlm-cd-display {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; margin: 2.5rem 0;
}
.wlm-cd-unit { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.wlm-cd-num {
  font-family: var(--wlm-serif);
  font-size: clamp(2.5rem, 14vw, 4.5rem);
  font-weight: 300; color: var(--c-champagne);
  line-height: 1; letter-spacing: -.03em;
  /* Gold glow on number */
  text-shadow: 0 0 40px rgba(212,175,55,.15);
  min-width: 2ch; text-align: center;
}
.wlm-cd-lbl {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-text3);
}
.wlm-cd-sep {
  font-family: var(--wlm-serif);
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 300; color: rgba(212,175,55,.25);
  align-self: flex-start; margin-top: .125rem;
  line-height: 1; padding: 0 .25rem;
}

/* ── 20. GALLERY — Editorial alternating ───────────────────── */
.wlm-gallery-editorial { padding: 0 0 2rem; }
.wlm-gal-item {
  position: relative; overflow: hidden; cursor: pointer;
  margin-bottom: 3px;
}
/* Left items: photo is full width with info panel right */
.wlm-gal-left  { display: flex; flex-direction: row; height: 220px; }
.wlm-gal-right { display: flex; flex-direction: row-reverse; height: 220px; }

.wlm-gal-photo {
  position: relative; overflow: hidden;
  flex: 1;
}
.wlm-gal-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease, filter .4s ease;
  filter: brightness(.8) saturate(.8);
}
.wlm-gal-item:hover .wlm-gal-photo img {
  transform: scale(1.04); filter: brightness(.9) saturate(.9);
}
.wlm-gal-overlay {
  position: absolute; inset: 0;
  background: rgba(8,8,8,0);
  display: flex; flex-direction: column;
  justify-content: space-between; padding: .875rem;
  transition: background .35s ease;
}
.wlm-gal-item:hover .wlm-gal-overlay { background: rgba(8,8,8,.3); }
.wlm-gal-frame-no {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .18em; color: rgba(212,175,55,.5);
  opacity: 0; transition: opacity .3s ease;
}
.wlm-gal-item:hover .wlm-gal-frame-no { opacity: 1; }
.wlm-gal-zoom { opacity: 0; align-self: center; margin: auto; transition: opacity .3s ease; }
.wlm-gal-item:hover .wlm-gal-zoom { opacity: 1; }

/* Caption strip */
.wlm-gal-caption {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem;
  background: var(--c-dark); min-width: 100px; max-width: 120px;
  flex-shrink: 0;
}
.wlm-gal-cap-line { width: 1px; height: 16px; background: var(--c-border); flex-shrink: 0; }
.wlm-gal-caption:last-child {
  font-family: var(--wlm-serif); font-size: .8125rem;
  font-style: italic; color: var(--c-text3);
  line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  writing-mode: vertical-rl; text-orientation: mixed;
  flex-direction: column;
}

/* ── 21. LIGHTBOX ──────────────────────────────────────────── */
#wlm-lb {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4,4,4,.97);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
#wlm-lb.open { display: flex; }
#wlm-lb-img {
  max-width: 100%; max-height: 80vh;
  object-fit: contain; box-shadow: 0 0 80px rgba(0,0,0,.8);
}
#wlm-lb-x {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px; border: 1px solid rgba(212,175,55,.2);
  background: rgba(212,175,55,.06); color: var(--c-champagne);
  font-size: 1.125rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
#wlm-lb-x:hover { background: rgba(212,175,55,.14); }
#wlm-lb-p, #wlm-lb-n {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 1px solid rgba(212,175,55,.15);
  background: rgba(212,175,55,.05); color: var(--c-champagne);
  font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#wlm-lb-p { left: .75rem; }
#wlm-lb-n { right: .75rem; }
#wlm-lb-p:hover, #wlm-lb-n:hover { background: rgba(212,175,55,.12); }
#wlm-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;
}

/* ── 22. RUNDOWN ───────────────────────────────────────────── */
.wlm-rundown { display: flex; flex-direction: column; }
.wlm-rd-item { display: flex; gap: 1rem; align-items: flex-start; padding: .875rem 0; }
.wlm-rd-time {
  width: 56px; flex-shrink: 0; text-align: right;
  font-family: var(--wlm-sans); font-size: .6875rem;
  font-weight: 400; color: var(--c-gold); padding-top: .1875rem;
  letter-spacing: .06em;
}
.wlm-rd-node {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 16px; padding-top: .25rem; gap: 4px;
}
.wlm-rd-dot {
  width: 8px; height: 8px;
  background: var(--c-near-black);
  border: 1.5px solid var(--c-gold);
  box-shadow: 0 0 6px rgba(212,175,55,.3);
}
.wlm-rd-stem {
  width: 1px; flex: 1; min-height: 24px;
  background: linear-gradient(to bottom, var(--c-border), transparent);
}
.wlm-rd-title {
  font-family: var(--wlm-serif); font-size: .9375rem; font-weight: 300;
  color: var(--c-champagne); line-height: 1.4;
}
.wlm-rd-desc { font-size: .8125rem; color: var(--c-text3); line-height: 1.7; margin-top: .25rem; }

/* ── 23. FORMS ─────────────────────────────────────────────── */
.wlm-form { display: flex; flex-direction: column; gap: 1rem; }
.wlm-fg { display: flex; flex-direction: column; gap: .4375rem; }
.wlm-lbl {
  font-family: var(--wlm-sans); font-size: .5625rem;
  font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text3);
}
.wlm-lbl small { text-transform: none; letter-spacing: 0; }
.wlm-inp {
  width: 100%; padding: .75rem 1rem;
  background: var(--c-dark);
  border: 1px solid var(--c-border2);
  color: var(--c-champagne); font-size: .875rem;
  font-family: var(--wlm-sans); outline: none;
  transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none;
}
.wlm-inp:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.07); }
.wlm-inp::placeholder { color: var(--c-text4); }
.wlm-inp option { background: var(--c-dark); }
.wlm-attend-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.wlm-attend {
  padding: .75rem; text-align: center;
  background: var(--c-dark); border: 1px solid var(--c-border2);
  color: var(--c-text3); font-family: var(--wlm-sans);
  font-size: .75rem; letter-spacing: .1em;
  cursor: pointer; transition: all .25s;
}
.wlm-attend.active, .wlm-attend:hover {
  border-color: var(--c-gold); background: var(--c-gold-dim);
  color: var(--c-gold);
}
.wlm-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(--wlm-sans);
  font-size: .5625rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden;
}
.wlm-submit::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.1), transparent);
  transform: translateX(-100%); transition: transform .5s ease;
}
.wlm-submit:hover::before { transform: translateX(100%); }
.wlm-submit:hover { box-shadow: 0 0 24px rgba(212,175,55,.15); }

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

/* ── 25. GIFT ──────────────────────────────────────────────── */
.wlm-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid var(--c-border2); }
.wlm-tab {
  flex: 1; padding: .75rem; text-align: center;
  font-family: var(--wlm-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;
}
.wlm-tab.active { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.wlm-hidden { display: none; }
.wlm-bank {
  display: flex; align-items: center;
  background: var(--c-dark); border: 1px solid var(--c-border2);
  padding: 1.25rem 1.5rem; margin-bottom: 1rem; gap: 1rem;
  transition: border-color .25s;
}
.wlm-bank:hover { border-color: var(--c-border); }
.wlm-bank-left { flex: 1; min-width: 0; }
.wlm-bank-name {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .375rem;
}
.wlm-bank-num {
  font-family: 'Courier New', monospace;
  font-size: 1.25rem; color: var(--c-champagne);
  letter-spacing: .12em; margin-bottom: .25rem;
}
.wlm-bank-holder { font-size: .75rem; color: var(--c-text3); }
.wlm-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(--wlm-sans);
  font-size: .5625rem; letter-spacing: .12em;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.wlm-copy-btn:hover { background: rgba(212,175,55,.22); }
.wlm-addr-box {
  background: var(--c-dark); border: 1px solid var(--c-border2);
  padding: 1.25rem 1.5rem; font-size: .875rem;
  color: var(--c-text3); line-height: 1.9;
}

/* ── 26. CONTACT ───────────────────────────────────────────── */
.wlm-contact {
  display: flex; align-items: center; gap: 1rem;
  background: var(--c-dark); border: 1px solid var(--c-border2);
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.wlm-contact-left { flex: 1; min-width: 0; }
.wlm-contact-name { font-family: var(--wlm-serif); font-size: 1rem; font-weight: 300; color: var(--c-champagne); }
.wlm-contact-phone { font-size: .8125rem; color: var(--c-text3); margin-top: .25rem; }
.wlm-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(--wlm-sans); letter-spacing: .06em;
}
.wlm-wa-btn:hover { background: rgba(37,211,102,.16); }
.wlm-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);
}

/* ── 27. HASHTAG ───────────────────────────────────────────── */
.wlm-hashtag-wrap { display: flex; flex-direction: column; gap: .75rem; }
.wlm-hashtag {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-dark); border: 1px solid var(--c-border2);
  padding: 1rem 1.25rem; cursor: pointer; transition: border-color .2s;
}
.wlm-hashtag:hover { border-color: var(--c-border); }
.wlm-ht-text {
  font-family: var(--wlm-script); font-size: 1.125rem; color: var(--c-gold);
}
.wlm-ht-ico { color: var(--c-text4); flex-shrink: 0; }

/* ── 28. CLOSING — Pure black + gold gradient type ──────────── */
.wlm-closing-sec {
  position: relative; text-align: center;
  background: var(--c-black); overflow: hidden;
  padding: 4rem 0 5rem;
}
.wlm-closing-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,175,55,.05) 0%, transparent 65%);
  pointer-events: none;
}
.wlm-closing-inner { position: relative; z-index: 1; padding: 0 1.75rem; }

/* Gold gradient monogram */
.wlm-closing-mono {
  position: relative; width: 100px; height: 100px;
  margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
}
.wlm-mono-inner {
  font-family: var(--wlm-serif); font-size: 2.5rem; font-weight: 300;
  color: transparent;
  background: linear-gradient(135deg, var(--c-secondary), var(--c-gold), var(--c-gold-lt), var(--c-gold));
  -webkit-background-clip: text; background-clip: text;
  display: flex; align-items: center; gap: .25rem;
  letter-spacing: .04em;
  position: relative; z-index: 1;
}
.wlm-mono-amp {
  font-style: italic; font-size: 1.125rem;
  opacity: .6;
}
.wlm-mono-ring {
  position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.2);
  animation: ringRotate 18s linear infinite;
}
@keyframes ringRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Gold gradient closing name */
.wlm-closing-script {
  font-family: var(--wlm-script);
  font-size: 2.5rem;
  color: transparent;
  background: linear-gradient(90deg, var(--c-secondary), var(--c-gold), var(--c-gold-lt));
  -webkit-background-clip: text; background-clip: text;
  background-size: 200% 100%;
  animation: goldShimmer 4s ease infinite;
  line-height: 1.3; margin-bottom: 1.5rem;
  display: block;
}
@keyframes goldShimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.wlm-closing-txt {
  font-family: var(--wlm-serif); font-size: .9375rem; font-weight: 300;
  font-style: italic; color: var(--c-text3);
  line-height: 2; max-width: 300px;
  margin: 0 auto 1.75rem;
}
.wlm-closing-date {
  font-family: var(--wlm-sans); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-text3); margin-bottom: 2rem;
}
.wlm-closing-share {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap;
}
.wlm-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(--wlm-sans);
  font-size: .5625rem; letter-spacing: .14em;
  cursor: pointer; transition: all .25s;
}
.wlm-cls-btn:hover { background: rgba(212,175,55,.2); }
.wlm-brand {
  margin-top: 3rem; font-size: .5625rem;
  letter-spacing: .1em; color: var(--c-text4);
}
.wlm-brand a { color: var(--c-text3); text-decoration: underline; text-underline-offset: 3px; }

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

/* ── 30. INIT ──────────────────────────────────────────────── */
#wlm-nav   { display: none; }
#wlm-float { display: none; }

/* ── 31. GALLERY CAPTION FIX (vertical text) ───────────────── */
.wlm-gal-caption {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .75rem .625rem;
  background: var(--c-dark); min-width: 80px; max-width: 100px;
  flex-shrink: 0; gap: .75rem;
}
.wlm-gal-cap-line {
  width: 1px; height: 20px; background: var(--c-border); flex-shrink: 0;
}
.wlm-gal-caption > span:last-child {
  font-family: var(--wlm-serif); font-size: .75rem;
  font-style: italic; color: var(--c-text3); line-height: 1.5;
  writing-mode: vertical-rl; text-orientation: mixed;
  max-height: 120px; overflow: hidden;
}

/* ── 32. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 380px) {
  .wlm-hero-name { font-size: 2rem; }
  .wlm-gate-tw { font-size: 1.75rem; }
  .wlm-cd-num { font-size: 2.25rem; }
  .wlm-cd-sep { font-size: 1.75rem; }
  .wlm-share-grid { grid-template-columns: repeat(2,1fr); }
  .wlm-couple-panel { height: 240px; }
  .wlm-gal-left, .wlm-gal-right { height: 180px; }
  .wlm-closing-script { font-size: 2rem; }
}
@media (max-width: 320px) {
  .wlm-gate-tw { font-size: 1.5rem; }
  .wlm-hero-name { font-size: 1.75rem; }
}

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