/* ============================================================
   VELVET ROSE — Template CSS
   UndanganKu by Bacaunduh
   Slug: velvet-rose | Tier: premium | Category: wedding
   Konsep: Deep Romantic Jewel Tone Luxury
   Palette: Burgundy #7B2D42 + Dusty Rose + Champagne + Plum
   Signature #1: 3D CSS Envelope gate (perspective/rotateX)
   Signature #2: SVG Ribbon/bow decorative dividers
   Mood: Warm jewel dark — unik di seluruh koleksi template
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Josefin+Slab:wght@300;400;600&family=Alex+Brush&display=swap');

/* ── 1. VARIABLES ──────────────────────────────────────────── */
:root {
  --c-primary:   var(--inv-primary,   #7B2D42);
  --c-secondary: var(--inv-secondary, #C98090);
  --c-burg:      #7B2D42;
  --c-burg-lt:   #9B3D55;
  --c-burg-dim:  rgba(123,45,66,.2);
  --c-burg-dim2: rgba(123,45,66,.08);
  --c-plum:      #3D1A24;
  --c-plum2:     #4A2030;
  --c-plum3:     #5A2838;
  --c-rose:      #C98090;
  --c-rose-lt:   #DDA8B4;
  --c-rose-pale: #F0D4DA;
  --c-rose-dim:  rgba(201,128,144,.18);
  --c-champagne: #F0E4D4;
  --c-warm:      #EAD8C8;
  --c-cream:     #F8F2EA;
  --c-ivory:     #FBF6EF;
  --c-brown:     #4A2D38;
  --c-brown2:    rgba(74,45,56,.75);
  --c-brown3:    rgba(74,45,56,.45);
  --c-brown4:    rgba(74,45,56,.22);
  --c-border:    rgba(123,45,66,.22);
  --c-border2:   rgba(74,45,56,.14);
  --vr-serif:    'Playfair Display', Georgia, serif;
  --vr-slab:     'Josefin Slab', Georgia, serif;
  --vr-script:   'Alex Brush', 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(--vr-slab);
  background: var(--c-plum);
  color: var(--c-brown);
  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: 4px; }
::-webkit-scrollbar-track { background: var(--c-plum); }
::-webkit-scrollbar-thumb { background: var(--c-rose); border-radius: 99px; }

/* ── 3. WRAPPER ────────────────────────────────────────────── */
#vr-wrap {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--c-champagne);
  min-height: 100vh; position: relative; overflow-x: hidden;
  box-shadow: 0 0 80px rgba(61,26,36,.4);
}

/* ── 4. SCROLL REVEAL ──────────────────────────────────────── */
.vr-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.vr-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 ───────────────────────────────────────────── */
#vr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--c-burg), var(--c-rose), var(--c-rose-lt), var(--c-rose));
  z-index: 9999; pointer-events: none; transition: width .1s linear;
}

/* ── 6. TOAST ──────────────────────────────────────────────── */
#vr-toast {
  position: fixed; bottom: 5.5rem; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-burg); color: var(--c-champagne);
  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(--vr-slab);
  box-shadow: 0 4px 16px rgba(123,45,66,.4);
}
#vr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 7. FLOAT CONTROLS ─────────────────────────────────────── */
#vr-float {
  position: fixed; right: 1rem; bottom: 5%;; transform: translateY(-50%);
  z-index: 500; display: none; flex-direction: column; gap: .5rem;
}
.vr-fb {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(248,242,234,.9);
  border: 1.5px solid var(--c-rose-pale);
  color: var(--c-brown3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(123,45,66,.15);
  transition: all .25s ease; cursor: pointer;
}
.vr-fb:hover { border-color: var(--c-burg); color: var(--c-burg); box-shadow: 0 4px 16px rgba(123,45,66,.25); }
.vr-fb.vr-fb-on { background: var(--c-burg-dim); border-color: var(--c-burg); color: var(--c-burg); }

/* ── 8. GATE — 3D Envelope (signature #1) ─────────────────── */
#vr-gate {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--c-plum);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  /* Velvet texture via subtle repeating pattern */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.015) 0px,
      rgba(255,255,255,.015) 1px,
      transparent 1px,
      transparent 8px
    );
}

/* 3D scene */
.vr-env-scene {
  perspective: 1200px;
  width: 300px; max-width: 90vw;
  height: 420px;
}

/* Envelope body */
.vr-env-body {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
}

/* Envelope back (flat, always visible) */
.vr-env-back {
  position: absolute; inset: 0;
  background: var(--c-burg);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.vr-env-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.5) saturate(.7);
}
.vr-env-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(61,26,36,.4) 0%, rgba(123,45,66,.7) 100%);
}
.vr-env-bg-solid {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-burg) 0%, var(--c-plum) 100%);
}

/* Wax seal on envelope back */
.vr-env-seal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -40%);
  z-index: 2;
  opacity: 0; animation: sealIn 1s ease .8s forwards;
}
@keyframes sealIn { from { opacity:0; transform:translate(-50%,-40%) scale(.8); } to { opacity:1; transform:translate(-50%,-40%) scale(1); } }
.vr-seal-circle {
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--c-burg-lt), var(--c-burg) 60%, var(--c-plum));
  border: 2px solid rgba(240,228,212,.35);
  box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 4px rgba(201,128,144,.2);
  display: flex; align-items: center; justify-content: center;
}
.vr-seal-mono {
  font-family: var(--vr-serif); font-size: 1rem; font-style: italic;
  color: var(--c-champagne); letter-spacing: .04em;
}

/* Envelope flap — the part that rotates open (signature #1) */
.vr-env-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 55%; z-index: 5;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.vr-env-flap.vr-flap-open {
  transform: rotateX(-175deg);
}
.vr-env-flap-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.vr-env-flap-front {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--c-burg-lt);
  overflow: hidden;
}
.vr-flap-triangle {
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, var(--c-rose) 0%, var(--c-burg) 100%);
}
.vr-env-flap-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  background: var(--c-champagne); overflow: hidden;
}
.vr-flap-triangle-inner {
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--c-cream);
}

/* Inner card that rises out */
.vr-inner-card {
  position: absolute; top: 8%; left: 8%; right: 8%;
  height: 85%; background: var(--c-cream);
  border-radius: 2px; z-index: 4;
  transform: translateY(0) scale(0.96);
  opacity: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* subtle inner texture */
.vr-inner-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0px, rgba(0,0,0,.015) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.015) 0px, rgba(0,0,0,.015) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.vr-inner-card.vr-card-rise {
  transform: translateY(-18%) scale(1);
  opacity: 1;
}
.vr-inner-card-content {
  text-align: center; padding: 1.5rem;
  position: relative; z-index: 1;
}
.vr-ic-eyebrow {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-burg); margin-bottom: 1rem;
}
.vr-ic-names {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  margin-bottom: 1rem;
}
.vr-ic-name {
  font-family: var(--vr-script);
  font-size: 2rem; color: var(--c-brown);
  line-height: 1.05;
}
.vr-ic-amp {
  font-family: var(--vr-serif); font-style: italic;
  font-size: .875rem; color: var(--c-burg); line-height: 1.5;
}
.vr-ic-date {
  font-family: var(--vr-slab); font-size: .5625rem;
  letter-spacing: .2em; color: var(--c-brown3);
  text-transform: uppercase;
}
/* Card border detail */
.vr-inner-card::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(123,45,66,.15);
  pointer-events: none;
}

/* Bottom envelope text area */
.vr-env-bottom-text {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 10; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 1.5rem 2rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
.vr-env-bottom-text.vr-btm-show { opacity: 1; transform: none; }

.vr-gate-to {
  font-family: var(--vr-slab); font-size: .6875rem;
  color: rgba(240,228,212,.55); line-height: 1.7;
  margin-bottom: 1.25rem;
}
.vr-gate-to strong { color: rgba(240,228,212,.8); font-weight: 400; }

.vr-gate-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .75rem 1.875rem;
  background: var(--c-rose);
  border: none; border-radius: 99px;
  color: white;
  font-family: var(--vr-slab); font-size: .6875rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: all .3s ease;
  box-shadow: 0 4px 20px rgba(201,128,144,.4);
}
.vr-gate-btn:hover { background: var(--c-rose-lt); box-shadow: 0 6px 28px rgba(201,128,144,.5); transform: translateY(-1px); }

.vr-gate-hint {
  font-family: var(--vr-slab); font-size: .5625rem;
  color: rgba(240,228,212,.35); margin-top: .75rem; letter-spacing: .1em;
}

/* ── 9. RIBBON DIVIDER (signature #2) ──────────────────────── */
.vr-ribbon-div {
  display: flex; align-items: center; gap: .875rem;
  padding: .5rem 1.75rem;
  background: inherit;
}
.vr-rib-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}
.vr-rib-svg { width: 80px; height: 32px; flex-shrink: 0; }

/* ── 10. BOTTOM NAV ────────────────────────────────────────── */
#vr-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-w); z-index: 400; display: none;
  background: rgba(248,242,234,.95);
  border-top: 2px solid var(--c-rose-pale);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(123,45,66,.08);
}
.vr-nav-inner {
  display: flex; align-items: stretch; padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.vr-nb {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .625rem .25rem; gap: .25rem;
  color: var(--c-brown4);
  font-family: var(--vr-slab); font-size: .5rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s ease; cursor: pointer;
}
.vr-nb:hover { color: var(--c-burg); }
.vr-nb.active { color: var(--c-burg); }
.vr-nb.active svg { stroke: var(--c-burg); transform: translateY(-1px); }
.vr-nb svg { transition: transform .2s ease; stroke: currentColor; }

/* ── 11. SECTION BASE ──────────────────────────────────────── */
.vr-sec { padding: 3.5rem 0 3rem; }
.vr-sec-inner { padding: 0 1.75rem; }
.vr-bg-champagne { background: var(--c-champagne); }
.vr-bg-plum      { background: var(--c-plum); }
.vr-bg-burg      { background: var(--c-burg); }
.vr-bg-cream     { background: var(--c-cream); }

.vr-sec-lbl {
  font-family: var(--vr-slab); font-size: .5625rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-burg); text-align: center; margin-bottom: .875rem;
}
.vr-sec-ttl {
  font-family: var(--vr-serif); font-size: 1.75rem; font-weight: 400;
  color: var(--c-brown); line-height: 1.3; text-align: center;
  margin-bottom: 2rem; letter-spacing: .01em;
}
.vr-sec-ttl em { font-style: italic; color: var(--c-burg); }
.vr-ttl-light { color: var(--c-champagne); }
.vr-ttl-light em { color: var(--c-rose-lt); }

/* ── 12. HERO — Horizontal split (unique) ─────────────────── */
.vr-hero {
  position: relative; height: 100vh; min-height: 580px;
  display: flex; overflow: hidden;
}

/* Left half — solid burgundy + names */
.vr-hero-left {
  width: 46%; flex-shrink: 0;
  background: linear-gradient(160deg, var(--c-burg-lt) 0%, var(--c-burg) 40%, var(--c-plum) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 2rem 1.5rem;
}
/* Subtle velvet texture on left panel */
.vr-hero-left::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 6px);
  pointer-events: none;
}
.vr-hero-left-content { position: relative; z-index: 1; text-align: right; }
.vr-hero-eyebrow {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(240,228,212,.55); margin-bottom: 1.25rem;
}
.vr-hero-names { margin-bottom: 1.5rem; }
.vr-hero-name {
  font-family: var(--vr-script); font-size: 2.375rem;
  color: var(--c-champagne); line-height: 1; letter-spacing: .01em;
}
.vr-hero-amp {
  font-family: var(--vr-serif); font-style: italic;
  font-size: .875rem; color: var(--c-rose-lt); line-height: 1.6; display: block;
}
.vr-hero-date {
  display: flex; align-items: center; gap: .75rem;
  justify-content: flex-end; margin-bottom: 1.25rem;
}
.vr-hero-date-num {
  font-family: var(--vr-serif); font-size: 2.5rem; font-weight: 300;
  color: var(--c-champagne); line-height: 1;
}
.vr-hero-date-info {
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,228,212,.55);
}
.vr-hero-date-line {
  width: 24px; height: 1px;
  background: rgba(240,228,212,.3); align-self: flex-end;
}
.vr-hero-invitation {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(240,228,212,.4);
}

/* Right half — photo */
.vr-hero-right {
  flex: 1; position: relative; overflow: hidden;
}
.vr-hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 8s ease; transform: scale(1.04);
}
.vr-hero-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(123,45,66,.35) 0%, rgba(0,0,0,.1) 100%);
}
.vr-hero-photo-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-plum2), var(--c-plum3));
}

/* Scroll indicator */
.vr-hero-scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .375rem;
}
.vr-hs-text {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,228,212,.4);
}
.vr-hs-track {
  width: 18px; height: 30px;
  border: 1.5px solid rgba(240,228,212,.3);
  border-radius: 99px;
  display: flex; justify-content: center; padding-top: 4px;
}
.vr-hs-ball {
  width: 3px; height: 7px; border-radius: 99px;
  background: var(--c-rose);
  animation: ballScroll 1.6s ease infinite;
}
@keyframes ballScroll { 0% { transform:translateY(0);opacity:.8; } 80% { transform:translateY(12px);opacity:0; } 100% { transform:translateY(0);opacity:0; } }

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

/* ── 14. QUOTE ─────────────────────────────────────────────── */
.vr-quote-sec {
  padding: 3.5rem 2rem; position: relative; overflow: hidden;
}
.vr-quote-deco {
  font-family: var(--vr-serif); font-size: 5rem; font-weight: 700;
  color: rgba(201,128,144,.1); line-height: 1;
  text-align: center; margin-bottom: -1.5rem; display: block;
}
.vr-quote {
  font-family: var(--vr-serif); font-size: 1.0625rem; font-style: italic;
  color: rgba(240,228,212,.75); line-height: 1.9; text-align: center;
}
.vr-quote-src {
  display: block; font-family: var(--vr-slab); font-size: .6875rem;
  letter-spacing: .1em; color: var(--c-rose-lt); text-align: center; margin-top: 1rem;
}

/* ── 15. COUPLE — Overlapping circles ─────────────────────── */
.vr-circles-wrap { padding: 0 1.75rem 2rem; }
.vr-circles-row {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2.5rem; position: relative;
}
.vr-circle-unit { position: relative; }
.vr-circle-left  { margin-right: -28px; z-index: 2; }
.vr-circle-right { margin-left: -28px;  z-index: 1; }

.vr-circle-photo {
  position: relative; width: 140px; height: 140px;
}
.vr-circle-photo img {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-champagne);
  box-shadow: 0 8px 32px rgba(123,45,66,.2);
}
.vr-circle-initial {
  width: 140px; height: 140px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-burg), var(--c-plum));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vr-serif); font-size: 3rem; color: var(--c-champagne);
  border: 4px solid var(--c-champagne);
  box-shadow: 0 8px 32px rgba(123,45,66,.2);
}
.vr-circle-ring-outer {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px dashed rgba(201,128,144,.4);
  animation: ringRot 20s linear infinite;
}
@keyframes ringRot { from { transform:rotate(0); } to { transform:rotate(360deg); } }

/* Center monogram badge */
.vr-circle-mono {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; width: 52px; height: 52px;
}
.vr-mono-bg {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--c-champagne);
  border: 2px solid var(--c-rose);
  box-shadow: 0 4px 16px rgba(123,45,66,.25);
}
.vr-mono-text {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vr-serif); font-style: italic;
  font-size: .875rem; color: var(--c-burg);
  letter-spacing: .02em;
}

/* Person info */
.vr-person-info {
  text-align: center; margin-bottom: 1.75rem;
  padding: 0 .5rem;
}
.vr-person-info-left  { padding-right: 2rem; }
.vr-person-info-right { padding-left: 2rem; }
.vr-pi-lbl {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-burg); margin-bottom: .375rem;
}
.vr-pi-nick {
  font-family: var(--vr-script); font-size: 1.875rem;
  color: var(--c-brown); line-height: 1.1; margin-bottom: .25rem;
}
.vr-pi-full { font-family: var(--vr-slab); font-size: .75rem; color: var(--c-brown3); margin-bottom: .625rem; }
.vr-pi-par  { font-size: .8125rem; color: var(--c-brown3); line-height: 1.7; }
.vr-pi-par strong { color: var(--c-brown2); font-weight: 400; }
.vr-pi-bio  { font-size: .8125rem; color: var(--c-brown3); line-height: 1.8; margin-top: .5rem; font-style: italic; }

/* ── 16. LOVE STORY — Ribbon-tie timeline ─────────────────── */
.vr-story-txt {
  font-family: var(--vr-serif); font-size: .9375rem; font-style: italic;
  color: rgba(240,228,212,.6); line-height: 2; text-align: center; margin-bottom: 2.5rem;
}
.vr-ribbon-tl { padding: 0 1.75rem 2rem; }
.vr-rtl-item {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0;
}
.vr-rtl-right { flex-direction: row; }
.vr-rtl-left  { flex-direction: row-reverse; }

.vr-rtl-node {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 40px; padding-top: .125rem;
}
.vr-rtl-bow-svg { width: 40px; height: 28px; }
.vr-rtl-stem {
  width: 1.5px; flex: 1; min-height: 20px;
  background: linear-gradient(to bottom, rgba(201,128,144,.35), transparent);
  margin-top: 3px;
}

.vr-rtl-card {
  flex: 1; background: rgba(240,228,212,.6);
  border: 1px solid rgba(123,45,66,.15);
  border-radius: 4px;
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px rgba(61,26,36,.06);
}
.vr-rtl-year {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-burg); margin-bottom: .25rem;
}
.vr-rtl-icon { font-size: 1.125rem; margin-bottom: .375rem; }
.vr-rtl-title { font-family: var(--vr-serif); font-size: .9375rem; font-weight: 600; color: var(--c-brown); line-height: 1.4; margin-bottom: .25rem; }
.vr-rtl-desc  { font-size: .8125rem; color: var(--c-brown3); line-height: 1.7; }

/* ── 17. EVENTS — Velvet card with burgundy header ─────────── */
.vr-event-card {
  background: var(--c-cream);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 1.375rem;
  box-shadow: 0 4px 24px rgba(123,45,66,.1);
}
.vr-event-header {
  background: var(--c-burg);
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem;
}
.vr-event-header-left { flex-shrink: 0; }
.vr-event-num {
  font-family: var(--vr-serif); font-size: 2rem; font-weight: 300;
  color: rgba(240,228,212,.5); line-height: 1;
  letter-spacing: -.03em;
}
.vr-event-header-right { flex: 1; }
.vr-event-type {
  font-family: var(--vr-slab); font-size: .5625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(240,228,212,.9);
}
.vr-event-hdate {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .14em; color: rgba(240,228,212,.5);
  margin-top: .25rem;
}
.vr-event-body { padding: 1.375rem 1.5rem; }
.vr-event-row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .875rem; }
.vr-ev-ico { font-size: 1.125rem; flex-shrink: 0; margin-top: .125rem; }
.vr-ev-main { font-family: var(--vr-serif); font-size: .9375rem; color: var(--c-brown); line-height: 1.4; }
.vr-ev-sub  { font-size: .75rem; color: var(--c-brown3); margin-top: .125rem; }
.vr-maps-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .625rem 1.25rem;
  background: var(--c-burg); border-radius: 99px;
  color: white;
  font-family: var(--vr-slab); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; cursor: pointer;
  transition: all .25s ease; text-decoration: none;
  box-shadow: 0 3px 14px rgba(123,45,66,.25);
}
.vr-maps-btn:hover { background: var(--c-burg-lt); transform: translateY(-1px); box-shadow: 0 5px 20px rgba(123,45,66,.35); }
.vr-maps-embed { margin-top: 1rem; border-radius: 4px; overflow: hidden; }
.vr-maps-embed iframe { width: 100%; height: 200px; border: none; display: block; }

/* ── 18. COUNTDOWN — Antique ornate frame ─────────────────── */
.vr-cd-bg-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--vr-script); font-size: 8rem;
  color: rgba(255,255,255,.04); white-space: nowrap;
  pointer-events: none; user-select: none;
}
.vr-cd-frame {
  position: relative; display: inline-block;
  padding: 2rem 2.5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(240,228,212,.2);
  margin: 1.5rem 0;
}
/* Corner decorations */
.vr-cd-frame-corner {
  position: absolute; width: 16px; height: 16px;
}
.vr-cd-frame-corner::before, .vr-cd-frame-corner::after {
  content: ''; position: absolute; background: var(--c-rose-lt); opacity: .5;
}
.vr-cd-frame-corner::before { width: 100%; height: 1.5px; }
.vr-cd-frame-corner::after  { width: 1.5px; height: 100%; }
.vr-cd-fc-tl { top: -1px; left: -1px; }
.vr-cd-fc-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.vr-cd-fc-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.vr-cd-fc-br { bottom: -1px; right: -1px; transform: scale(-1,-1); }

.vr-cd-row {
  display: flex; align-items: flex-start;
  justify-content: center; gap: .125rem;
}
.vr-cd-cell { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.vr-cd-num {
  font-family: var(--vr-serif);
  font-size: clamp(2.25rem, 12vw, 3.5rem);
  font-weight: 300; color: var(--c-champagne);
  line-height: 1; min-width: 2ch; text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.vr-cd-lbl {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,228,212,.45);
}
.vr-cd-sep {
  font-family: var(--vr-serif); font-size: 2.5rem;
  color: rgba(201,128,144,.35);
  align-self: flex-start; margin-top: .25rem;
  line-height: 1; padding: 0 .25rem;
}

/* ── 19. GALLERY — Vogue editorial ─────────────────────────── */
.vr-gal-editorial {
  display: flex; align-items: stretch;
  height: 260px; overflow: hidden;
  cursor: pointer; margin-bottom: 3px;
}
.vr-gal-reverse { flex-direction: row-reverse; }

.vr-gal-photo-side {
  flex: 1.4; position: relative; overflow: hidden;
}
.vr-gal-photo-side img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease, filter .4s ease;
  filter: saturate(.85);
}
.vr-gal-editorial:hover .vr-gal-photo-side img {
  transform: scale(1.04); filter: saturate(1);
}
.vr-gal-photo-overlay {
  position: absolute; inset: 0;
  background: rgba(61,26,36,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease;
}
.vr-gal-editorial:hover .vr-gal-photo-overlay { background: rgba(61,26,36,.25); }
.vr-gal-photo-overlay svg { opacity: 0; transition: opacity .3s ease; }
.vr-gal-editorial:hover .vr-gal-photo-overlay svg { opacity: 1; }

.vr-gal-text-side {
  flex: 1; background: var(--c-burg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.25rem; text-align: center;
  gap: .875rem;
}
.vr-gal-num {
  font-family: var(--vr-serif); font-size: 2.5rem; font-weight: 300;
  color: rgba(240,228,212,.15); line-height: 1;
}
.vr-gal-caption {
  font-family: var(--vr-serif); font-size: .875rem; font-style: italic;
  color: rgba(240,228,212,.7); line-height: 1.6;
  max-height: 80px; overflow: hidden;
}
.vr-gal-bow { width: 40px; height: 24px; flex-shrink: 0; }

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

/* ── 21. RUNDOWN ───────────────────────────────────────────── */
.vr-rundown { display: flex; flex-direction: column; }
.vr-rd-item { display: flex; gap: .875rem; align-items: flex-start; padding: .75rem 0; }
.vr-rd-time { width: 56px; flex-shrink: 0; text-align: right; font-family: var(--vr-slab); font-size: .75rem; font-weight: 600; color: var(--c-burg); padding-top: .1875rem; }
.vr-rd-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 16px; padding-top: .25rem; gap: 4px; }
.vr-rd-dot  { width: 10px; height: 10px; border-radius: 50%; background: var(--c-rose); border: 2px solid var(--c-champagne); box-shadow: 0 0 0 2px var(--c-rose-pale); }
.vr-rd-stem { width: 1.5px; flex: 1; min-height: 24px; background: linear-gradient(to bottom, var(--c-rose-pale), transparent); }
.vr-rd-title { font-family: var(--vr-serif); font-size: .9375rem; font-weight: 600; color: var(--c-brown); line-height: 1.4; }
.vr-rd-desc  { font-size: .8125rem; color: var(--c-brown3); line-height: 1.7; margin-top: .25rem; }

/* ── 22. FORMS ─────────────────────────────────────────────── */
.vr-form { display: flex; flex-direction: column; gap: 1rem; }
.vr-fg { display: flex; flex-direction: column; gap: .4375rem; }
.vr-lbl { font-family: var(--vr-slab); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,228,212,.45); }
.vr-lbl small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.vr-inp {
  width: 100%; padding: .75rem 1rem;
  background: rgba(240,228,212,.08);
  border: 1px solid rgba(240,228,212,.12);
  border-radius: 4px; color: var(--c-champagne);
  font-size: .875rem; font-family: var(--vr-slab);
  outline: none; transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none;
}
.vr-inp:focus { border-color: var(--c-rose); box-shadow: 0 0 0 3px rgba(201,128,144,.1); }
.vr-inp::placeholder { color: rgba(240,228,212,.25); }
.vr-inp option { background: var(--c-plum); }
.vr-attend-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.vr-attend {
  padding: .75rem; text-align: center;
  background: rgba(240,228,212,.06);
  border: 1px solid rgba(240,228,212,.1);
  border-radius: 4px;
  color: rgba(240,228,212,.45); font-family: var(--vr-slab); font-size: .8125rem;
  cursor: pointer; transition: all .25s;
}
.vr-attend.active, .vr-attend:hover {
  border-color: var(--c-rose); background: rgba(201,128,144,.12); color: var(--c-rose-lt);
}
.vr-submit {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; padding: .875rem 1.5rem;
  background: var(--c-rose); border: none; border-radius: 99px;
  color: white; font-family: var(--vr-slab); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 18px rgba(201,128,144,.35);
}
.vr-submit:hover { background: var(--c-rose-lt); box-shadow: 0 6px 24px rgba(201,128,144,.45); transform: translateY(-1px); }

/* RSVP form on plum bg — overrides */
.vr-bg-plum .vr-submit { background: var(--c-rose); color: var(--c-plum); }

/* ── 23. WISHES ────────────────────────────────────────────── */
.vr-wish { display: flex; gap: .875rem; padding: 1.125rem 0; border-bottom: 1px solid var(--c-border2); }
.vr-wish-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--c-burg-dim); border: 1.5px solid var(--c-rose-pale); display: flex; align-items: center; justify-content: center; font-family: var(--vr-serif); font-size: .875rem; color: var(--c-burg); }
.vr-wish-body { flex: 1; min-width: 0; }
.vr-wish-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem .75rem; margin-bottom: .375rem; }
.vr-wish-name { font-family: var(--vr-serif); font-size: .9375rem; font-weight: 600; color: var(--c-brown); }
.vr-wish-rel  { font-size: .6875rem; color: var(--c-burg); letter-spacing: .06em; }
.vr-wish-time { font-size: .6875rem; color: var(--c-brown4); margin-left: auto; }
.vr-wish-msg  { font-size: .8125rem; color: var(--c-brown2); line-height: 1.75; }
.vr-loadmore {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .875rem; margin-top: 1.25rem;
  background: transparent; border: 1.5px solid var(--c-border);
  border-radius: 99px; color: var(--c-brown3);
  font-family: var(--vr-slab); font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .25s;
}
.vr-loadmore:hover { border-color: var(--c-burg); color: var(--c-burg); background: var(--c-burg-dim); }

/* ── 24. GIFT ──────────────────────────────────────────────── */
.vr-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(240,228,212,.15); }
.vr-tab { flex: 1; padding: .75rem; text-align: center; font-family: var(--vr-slab); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,228,212,.4); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all .25s; }
.vr-tab.active { color: var(--c-rose-lt); border-bottom-color: var(--c-rose); }
.vr-hidden { display: none; }
.vr-bank { background: rgba(240,228,212,.06); border: 1px solid rgba(240,228,212,.1); border-radius: 4px; padding: 1.125rem 1.375rem; margin-bottom: 1rem; }
.vr-bank-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.vr-bank-name { font-family: var(--vr-slab); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-rose-lt); }
.vr-bank-num { font-family: 'Courier New', monospace; font-size: 1.25rem; color: var(--c-champagne); letter-spacing: .12em; margin-bottom: .25rem; }
.vr-bank-holder { font-size: .75rem; color: rgba(240,228,212,.45); }
.vr-copy-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .875rem; background: rgba(201,128,144,.15); border: 1px solid rgba(201,128,144,.25); border-radius: 99px; color: var(--c-rose-lt); font-family: var(--vr-slab); font-size: .5625rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.vr-copy-btn:hover { background: rgba(201,128,144,.25); }
.vr-addr-box { background: rgba(240,228,212,.06); border: 1px solid rgba(240,228,212,.1); border-radius: 4px; padding: 1.25rem 1.5rem; font-size: .875rem; color: rgba(240,228,212,.6); line-height: 1.9; }

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

/* ── 26. HASHTAG ───────────────────────────────────────────── */
.vr-hashtag-wrap { display: flex; flex-direction: column; gap: .75rem; }
.vr-hashtag { display: flex; align-items: center; justify-content: space-between; background: rgba(240,228,212,.06); border: 1px solid rgba(240,228,212,.12); border-radius: 4px; padding: 1rem 1.25rem; cursor: pointer; transition: border-color .2s; }
.vr-hashtag:hover { border-color: var(--c-rose); }
.vr-hashtag span { font-family: var(--vr-script); font-size: 1.125rem; color: var(--c-rose-lt); }
.vr-hashtag svg { color: rgba(240,228,212,.3); flex-shrink: 0; }

/* ── 27. CLOSING ───────────────────────────────────────────── */
.vr-closing-sec {
  background: linear-gradient(160deg, var(--c-plum) 0%, var(--c-burg) 50%, var(--c-plum2) 100%);
  text-align: center; padding: 4rem 0 5rem;
  position: relative; overflow: hidden;
}
.vr-closing-sec::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 8px);
  pointer-events: none;
}
.vr-closing-inner { position: relative; z-index: 1; padding: 0 1.75rem; }

/* Large bow SVG */
.vr-closing-bow { margin: 0 auto 2rem; width: 180px; height: 120px; }
.vr-closing-bow svg { width: 100%; height: 100%; }

/* Embossed card */
.vr-closing-card {
  background: rgba(240,228,212,.1);
  border: 1px solid rgba(240,228,212,.2);
  padding: 2rem 2rem;
  margin: 0 auto 2rem;
  max-width: 320px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 24px rgba(0,0,0,.2);
}
.vr-closing-card-top { display: flex; align-items: center; gap: .875rem; }
.vr-cc-line { flex: 1; height: 1px; background: rgba(201,128,144,.3); }
.vr-cc-diamond { font-size: .5rem; color: var(--c-rose-lt); flex-shrink: 0; }

.vr-closing-script {
  font-family: var(--vr-script); font-size: 2.25rem;
  color: var(--c-champagne);
  line-height: 1.2; margin: 1.5rem 0 1.25rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.2);
  display: block;
}
.vr-closing-txt {
  font-family: var(--vr-serif); font-size: .875rem; font-style: italic;
  color: rgba(240,228,212,.65); line-height: 2;
  max-width: 280px; margin: 0 auto;
}
.vr-closing-date {
  font-family: var(--vr-slab); font-size: .5rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(240,228,212,.4); margin-top: 1rem;
}

.vr-closing-share { display: flex; align-items: center; justify-content: center; gap: .625rem; flex-wrap: wrap; }
.vr-cls-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.125rem;
  background: rgba(240,228,212,.1);
  border: 1px solid rgba(240,228,212,.18);
  border-radius: 99px;
  color: rgba(240,228,212,.7); font-family: var(--vr-slab);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  cursor: pointer; transition: all .25s;
}
.vr-cls-btn:hover { background: rgba(240,228,212,.2); color: var(--c-champagne); }

.vr-brand { margin-top: 2.5rem; font-size: .5625rem; letter-spacing: .08em; color: rgba(240,228,212,.25); }
.vr-brand a { color: rgba(240,228,212,.45); text-decoration: underline; text-underline-offset: 3px; }

/* ── 28. SHARE SHEET ───────────────────────────────────────── */
#vr-share { position:fixed;inset:0;z-index:8500;background:rgba(30,10,16,.65);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0); }
#vr-share-panel { background:var(--c-cream);width:100%;max-width:var(--max-w);border-radius:0;overflow:hidden; }
.vr-share-bow { height: 48px; background: var(--c-burg); overflow: hidden; }
.vr-share-bow svg { width: 100%; height: 48px; display: block; }
.vr-share-ttl { font-family:var(--vr-serif);font-size:1rem;font-weight:400;color:var(--c-brown);text-align:center;padding:1.25rem 1.75rem .75rem; }
.vr-share-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;padding:0 1.75rem 1.25rem; }
.vr-sh-btn { display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem .375rem;background:var(--c-warm);border:1px solid var(--c-border2);border-radius:4px;font-family:var(--vr-slab);font-size:.6875rem;color:var(--c-brown2);cursor:pointer;transition:border-color .2s; }
.vr-sh-btn:hover { border-color:var(--c-burg); }
.vr-sh-ico { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem; }
.vr-wa { background:rgba(37,211,102,.1);color:#25d366; }
.vr-tg { background:rgba(42,171,238,.1);color:#29a8eb; }
.vr-fb { background:rgba(59,89,152,.1);color:#3b5998; }
.vr-cp { background:var(--c-burg-dim);color:var(--c-burg); }
.vr-sh-close { width:100%;padding:.875rem;background:transparent;border:none;border-top:1px solid var(--c-border2);color:var(--c-brown3);font-family:var(--vr-slab);font-size:.75rem;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:color .2s; }
.vr-sh-close:hover { color:var(--c-burg); }

/* ── 29. INIT ──────────────────────────────────────────────── */
#vr-nav { display: none; }
#vr-float { display: none; }

/* ── 30. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 380px) {
  .vr-hero-name { font-size: 1.875rem; }
  .vr-hero-left { width: 44%; }
  .vr-cd-num { font-size: 2rem; }
  .vr-share-grid { grid-template-columns: repeat(2,1fr); }
  .vr-gal-editorial { height: 210px; }
  .vr-circles-row .vr-circle-photo,.vr-circles-row .vr-circle-photo img,.vr-circle-initial { width: 120px; height: 120px; }
  .vr-env-scene { width: 260px; }
  .vr-ic-name { font-size: 1.625rem; }
  .vr-closing-script { font-size: 1.875rem; }
}
@media (max-width: 320px) {
  .vr-hero-left { width: 40%; }
  .vr-hero-name { font-size: 1.625rem; }
}

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

/* FIX: Wishes form di background terang */
#vr-wishes .vr-form {background: rgba(255,255,255,.55); border: 1px solid var(--c-border); border-radius: 8px; padding: 1.25rem; box-shadow: 0 6px 20px rgba(123,45,66,.08);}
#vr-wishes .vr-lbl {color: var(--c-burg);}
#vr-wishes .vr-inp {background: #fff; border: 1px solid rgba(123,45,66,.18); color: var(--c-brown); box-shadow: none;}
#vr-wishes .vr-inp::placeholder {color: rgba(74,45,56,.45);}
#vr-wishes .vr-inp:focus {border-color: var(--c-burg); box-shadow: 0 0 0 3px rgba(123,45,66,.08);}