/* ============================================================
   BLANC — Template CSS
   UndanganKu by Bacaunduh
   Slug: blanc | Tier: premium | Category: wedding
   Konsep: Parisian Minimalist Editorial Luxury
   Palette: Pure White #FCFCFC + Stone #6B6560 + Dusty Rose #D4A8A0
   Signature #1: Full-width typographic gate (no ornaments)
   Signature #2: Horizontal drag-scroll ribbon gallery
   Philosophy: Typography is the art. Restraint is luxury.
   ============================================================ */

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

/* ── 1. VARIABLES ──────────────────────────────────────────── */
:root {
  --c-primary:     var(--inv-primary,   #1A1714);
  --c-secondary:   var(--inv-secondary, #D4A8A0);
  --c-white:       #FCFCFC;
  --c-off-white:   #F7F5F2;
  --c-stone-bg:    #F2EFEB;
  --c-stone:       #6B6560;
  --c-stone-lt:    #9B9490;
  --c-stone-dim:   rgba(107,101,96,.12);
  --c-warm-black:  #1A1714;
  --c-warm-black2: rgba(26,23,20,.7);
  --c-warm-black3: rgba(26,23,20,.42);
  --c-warm-black4: rgba(26,23,20,.2);
  --c-warm-black5: rgba(26,23,20,.08);
  --c-blush:       #D4A8A0;
  --c-blush-lt:    #E8C4BC;
  --c-blush-pale:  #F5E8E5;
  --c-blush-dim:   rgba(212,168,160,.18);
  --c-blush-bg:    #FAF0EE;
  --c-rule:        rgba(26,23,20,.12);
  --bl-display:    'Playfair Display', Georgia, serif;
  --bl-sans:       'Jost', system-ui, sans-serif;
  --bl-script:     'Alex Brush', 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(--bl-sans);
  background: var(--c-white);
  color: var(--c-warm-black);
  line-height: 1.8; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--c-white); }
::-webkit-scrollbar-thumb { background: var(--c-blush); border-radius: 99px; }

/* ── 3. WRAPPER ────────────────────────────────────────────── */
#bl-wrap {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--c-white);
  min-height: 100vh; position: relative; overflow-x: hidden;
  box-shadow: 0 0 60px rgba(26,23,20,.06);
}

/* ── 4. SCROLL REVEAL ──────────────────────────────────────── */
.bl-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.bl-reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; } .d4 { transition-delay: .5s; }
.d5 { transition-delay: .64s; }

/* ── 5. PROGRESS ───────────────────────────────────────────── */
#bl-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--c-blush);
  z-index: 9999; pointer-events: none; transition: width .1s linear;
}

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

/* ── 7. FLOAT CONTROLS ─────────────────────────────────────── */
#bl-float {
  position: fixed; right: 1rem; bottom: 5%; transform: translateY(-50%);
  z-index: 500; display: none; flex-direction: column; gap: .5rem;
}
.bl-fb {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(252,252,252,.92);
  border: 1px solid var(--c-rule);
  color: var(--c-warm-black3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(26,23,20,.1);
  transition: all .25s ease; cursor: pointer;
  backdrop-filter: blur(8px);
}
.bl-fb:hover { border-color: var(--c-blush); color: var(--c-blush); box-shadow: 0 4px 16px rgba(212,168,160,.25); }
.bl-fb.bl-fb-on { background: var(--c-blush-dim); border-color: var(--c-blush); color: var(--c-blush); }

/* ── 8. GATE — Typographic full-screen (signature #1) ──────── */
#bl-gate {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--c-white);
  display: flex; align-items: stretch;
  overflow: hidden; cursor: pointer;
  transition: opacity .8s ease;
}

/* Left: narrow photo strip (22% width) */
.bl-gate-photo-strip {
  width: 22%; flex-shrink: 0;
  background-size: cover; background-position: center;
  background-color: var(--c-stone-bg);
  filter: saturate(.7) brightness(.95);
}
.bl-gate-strip-empty {
  background: linear-gradient(to bottom, var(--c-blush-pale), var(--c-stone-bg));
}

/* Right: typography panel (signature #1) */
.bl-gate-typo {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; padding: 2rem 1.75rem;
  overflow: hidden;
}

/* Top and bottom bars */
.bl-gate-bar-top, .bl-gate-bar-bot {
  display: flex; align-items: center; gap: .75rem;
}
.bl-gate-label {
  font-family: var(--bl-sans); font-size: .5625rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-warm-black3); flex-shrink: 0;
}
.bl-gate-bar-line { flex: 1; height: 1px; background: var(--c-rule); }
.bl-gate-year {
  font-family: var(--bl-sans); font-size: .5625rem;
  letter-spacing: .18em; color: var(--c-warm-black4); flex-shrink: 0;
}

/* MASSIVE typography names (signature #1 core) */
.bl-gate-names {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: .25rem;
  overflow: hidden;
}
.bl-gate-name {
  font-family: var(--bl-display);
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 900; color: var(--c-warm-black);
  line-height: 1.0; letter-spacing: -.02em;
  /* Fit to available width */
  word-break: break-word; hyphens: auto;
  opacity: 0; animation: blIn .9s ease forwards;
}
.bl-gate-name-1 { animation-delay: .1s; }
.bl-gate-name-2 { animation-delay: .4s; }
.bl-gate-amp-row {
  display: flex; align-items: center; gap: .625rem;
  margin: .375rem 0;
  opacity: 0; animation: blIn .8s ease .25s forwards;
}
.bl-gate-amp-line { flex: 1; height: 1px; background: var(--c-rule); }
.bl-gate-amp {
  font-family: var(--bl-script); font-size: 1.5rem;
  color: var(--c-blush); flex-shrink: 0;
}

/* Date block */
.bl-gate-date-block {
  display: flex; align-items: center; gap: .875rem;
  margin-bottom: 1.25rem;
  opacity: 0; animation: blIn .8s ease .55s forwards;
}
.bl-gate-date-num {
  font-family: var(--bl-display); font-size: 2.25rem;
  font-weight: 700; color: var(--c-warm-black); line-height: 1;
}
.bl-gate-date-right {
  display: flex; flex-direction: column; gap: .125rem;
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-warm-black3);
}

/* Guest to */
.bl-gate-to {
  display: flex; flex-direction: column; gap: .25rem;
  margin-bottom: 1.5rem;
  opacity: 0; animation: blIn .8s ease .7s forwards;
}
.bl-gate-to-lbl {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-warm-black4);
}
.bl-gate-to-name {
  font-family: var(--bl-display); font-size: 1rem;
  font-weight: 400; color: var(--c-warm-black2);
}

/* CTA button — ultra minimal */
.bl-gate-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .75rem 0;
  background: transparent; border: none;
  border-bottom: 1.5px solid var(--c-warm-black);
  color: var(--c-warm-black);
  font-family: var(--bl-sans); font-size: .625rem;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: all .3s ease;
  align-self: flex-start;
  opacity: 0; animation: blIn .8s ease .85s forwards;
}
.bl-gate-btn:hover { border-color: var(--c-blush); color: var(--c-blush); }

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

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

/* ── 10. SECTION BASE ──────────────────────────────────────── */
.bl-sec { padding: 3.5rem 0 3rem; }
.bl-sec-inner { padding: 0 1.75rem; }
.bl-bg-white  { background: var(--c-white); }
.bl-bg-stone  { background: var(--c-stone-bg); }
.bl-bg-blush  { background: var(--c-blush-bg); }
.bl-text-center { text-align: center; }

.bl-sec-label {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-blush); margin-bottom: 1rem;
}
.bl-sec-ttl {
  font-family: var(--bl-display); font-size: 1.875rem; font-weight: 700;
  color: var(--c-warm-black); line-height: 1.25;
  margin-bottom: 2rem; letter-spacing: -.01em;
}
.bl-sec-ttl em { font-style: italic; color: var(--c-stone); font-weight: 400; }

/* Thin horizontal rule */
.bl-thin-rule {
  height: 1px;
  background: var(--c-rule);
  margin: 1.5rem 0;
}

/* ── 11. HERO ──────────────────────────────────────────────── */
.bl-hero {
  position: relative; height: 100vh; min-height: 560px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bl-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--c-stone-bg);
  filter: brightness(.7) saturate(.8);
  transform: scale(1.04); transition: transform 8s ease;
}
.bl-hero-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-blush-pale) 0%, var(--c-stone-bg) 100%);
}
.bl-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(252,252,252,.1) 0%,
    rgba(252,252,252,.05) 40%,
    rgba(26,23,20,.55) 100%
  );
}
.bl-hero-content {
  position: relative; z-index: 2;
  padding: 0 1.75rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.bl-hero-eyebrow {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(252,252,252,.8); margin-bottom: 1.25rem;
}
.bl-hero-names { margin-bottom: 1.5rem; }
.bl-hero-groom, .bl-hero-bride {
  font-family: var(--bl-script); font-size: 3.25rem;
  color: var(--c-white); line-height: 1; letter-spacing: .01em;
  display: block;
}
.bl-hero-and {
  font-family: var(--bl-sans); font-size: .5625rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(252,252,252,.6); margin: .5rem 0; display: block;
}
.bl-hero-date {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(252,252,252,.7);
  padding: .625rem 1.5rem;
  border: 1px solid rgba(252,252,252,.25);
  background: rgba(252,252,252,.08);
}

/* Scroll indicator */
.bl-hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%); z-index: 3;
}
.bl-hs-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(252,252,252,.5), transparent);
  animation: hsShrink 1.6s ease infinite;
  transform-origin: top center;
}
@keyframes hsShrink { 0%,100% { opacity: .6; height: 48px; } 50% { opacity: .2; height: 24px; } }

/* ── 12. OPENING ───────────────────────────────────────────── */
.bl-bismillah {
  font-family: var(--bl-display); font-size: 1.75rem; font-weight: 400;
  color: var(--c-blush); margin-bottom: 1rem;
  line-height: 1.6; letter-spacing: .04em;
}
.bl-open-txt {
  font-family: var(--bl-display); font-size: .9375rem; font-style: italic;
  color: var(--c-warm-black2); line-height: 2;
  max-width: 320px; margin: 0 auto;
}

/* ── 13. QUOTE ─────────────────────────────────────────────── */
.bl-quote {
  font-family: var(--bl-display); font-size: 1.0625rem; font-style: italic;
  color: var(--c-stone); line-height: 1.9; text-align: center;
  max-width: 320px; margin: 0 auto;
}
.bl-quote-src {
  display: block; font-family: var(--bl-sans); font-size: .5625rem;
  letter-spacing: .14em; color: var(--c-blush); text-align: center; margin-top: 1rem;
}

/* ── 14. COUPLE ────────────────────────────────────────────── */
.bl-couple-duo {
  display: flex; align-items: flex-start; gap: 0;
  padding: 0 .75rem;
}
.bl-person {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 1.5rem .75rem;
}
.bl-person-single { max-width: 260px; margin: 0 auto; }
.bl-person-photo-wrap {
  position: relative; width: 140px; height: 140px; margin-bottom: 1.25rem;
}
.bl-person-photo {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover;
  /* Minimal: just a thin blush ring */
  box-shadow: 0 0 0 1.5px var(--c-white), 0 0 0 3px var(--c-blush-dim),
              0 4px 20px rgba(26,23,20,.1);
}
.bl-person-initial {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--c-stone-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bl-display); font-size: 3rem; font-weight: 700;
  color: var(--c-stone);
  box-shadow: 0 0 0 1.5px var(--c-white), 0 0 0 3px var(--c-blush-dim);
}
.bl-person-lbl {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-blush); margin-bottom: .375rem;
}
.bl-person-nick {
  font-family: var(--bl-script); font-size: 1.875rem;
  color: var(--c-warm-black); line-height: 1.1; margin-bottom: .25rem;
}
.bl-person-full {
  font-family: var(--bl-sans); font-size: .6875rem;
  color: var(--c-warm-black3); letter-spacing: .04em; margin-bottom: .625rem;
}
.bl-person-par {
  font-size: .8125rem; color: var(--c-warm-black3); line-height: 1.7;
}
.bl-person-par strong { color: var(--c-warm-black2); font-weight: 600; }
.bl-person-bio { font-size: .8125rem; color: var(--c-warm-black3); line-height: 1.8; margin-top: .375rem; font-style: italic; }

/* Center divider between couple */
.bl-couple-center {
  display: flex; flex-direction: column; align-items: center;
  gap: .625rem; padding: 3rem .25rem 0; flex-shrink: 0; width: 32px;
}
.bl-cc-line { flex: 1; width: 1px; background: var(--c-rule); min-height: 32px; }
.bl-cc-and {
  font-family: var(--bl-script); font-size: 1.25rem;
  color: var(--c-blush); writing-mode: vertical-rl; flex-shrink: 0;
}

/* ── 15. TIMELINE ──────────────────────────────────────────── */
.bl-story-txt {
  font-family: var(--bl-display); font-size: .9375rem; font-style: italic;
  color: var(--c-warm-black2); line-height: 2; margin-bottom: 2.5rem;
}
.bl-timeline { padding: 0 1.75rem 2rem; display: flex; flex-direction: column; }
.bl-tl-item { display: flex; gap: 1.125rem; align-items: flex-start; margin-bottom: 0; }
.bl-tl-node {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 36px; padding-top: .125rem;
}
.bl-tl-num {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--c-rule);
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .1em; color: var(--c-blush); font-weight: 600;
  flex-shrink: 0; transition: all .3s ease;
}
.bl-tl-item:hover .bl-tl-num { border-color: var(--c-blush); background: var(--c-blush-pale); }
.bl-tl-stem {
  width: 1px; flex: 1; min-height: 32px;
  background: linear-gradient(to bottom, var(--c-rule), transparent); margin-top: 4px;
}
.bl-tl-content { flex: 1; padding-bottom: 1.5rem; }
.bl-tl-year {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-blush); margin-bottom: .25rem;
}
.bl-tl-title { font-family: var(--bl-display); font-size: 1rem; font-weight: 700; color: var(--c-warm-black); line-height: 1.4; margin-bottom: .25rem; }
.bl-tl-desc  { font-size: .8125rem; color: var(--c-warm-black3); line-height: 1.7; }

/* ── 16. EVENTS — Ultra-minimal ────────────────────────────── */
.bl-event {
  margin-bottom: 2.5rem;
}
.bl-event-top {
  display: flex; align-items: baseline; gap: .875rem; margin-bottom: .625rem;
}
.bl-event-num {
  font-family: var(--bl-display); font-size: .875rem; font-weight: 400;
  color: var(--c-blush); flex-shrink: 0;
}
.bl-event-type {
  font-family: var(--bl-display); font-size: 1.25rem; font-weight: 700;
  color: var(--c-warm-black);
}
.bl-event-rule { height: 1px; background: var(--c-rule); margin-bottom: 1.25rem; }
.bl-event-body { display: flex; flex-direction: column; gap: .875rem; }
.bl-event-row { display: flex; gap: 1rem; align-items: flex-start; }
.bl-event-field {
  width: 60px; flex-shrink: 0;
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-warm-black4); padding-top: .1875rem;
}
.bl-event-val {
  font-family: var(--bl-display); font-size: .9375rem; font-weight: 400;
  color: var(--c-warm-black); line-height: 1.5;
}
.bl-event-addr { font-size: .8125rem; color: var(--c-warm-black3); margin-top: .125rem; }
.bl-maps-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 0;
  background: transparent; border: none;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-warm-black);
  font-family: var(--bl-sans); font-size: .5625rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: all .25s; text-decoration: none;
  align-self: flex-start; margin-top: .5rem;
}
.bl-maps-btn:hover { border-color: var(--c-blush); color: var(--c-blush); }
.bl-maps-embed { margin-top: 1rem; overflow: hidden; border-radius: 2px; }
.bl-maps-embed iframe { width: 100%; height: 200px; border: none; display: block; }

/* ── 17. COUNTDOWN — Oversized minimal numbers ─────────────── */
.bl-cd-grid {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; margin: 1.5rem 0 0;
}
.bl-cd-unit { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 0 .375rem; }
.bl-cd-num {
  font-family: var(--bl-display); font-size: clamp(2.5rem, 14vw, 4rem);
  font-weight: 900; color: var(--c-warm-black); line-height: 1;
  letter-spacing: -.03em; min-width: 2ch; text-align: center;
}
.bl-cd-underline {
  width: 100%; height: 1.5px;
  background: var(--c-blush); margin: .5rem 0;
}
.bl-cd-lbl {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-warm-black3);
}

/* ── 18. GALLERY — Horizontal drag-scroll ribbon (signature #2) ─ */
.bl-gallery-hint {
  font-family: var(--bl-sans); font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-warm-black4); text-align: center;
  margin-bottom: 1.25rem;
}
.bl-ribbon-wrap {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; cursor: grab;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem;
}
.bl-ribbon-wrap:active { cursor: grabbing; }
.bl-ribbon-wrap::-webkit-scrollbar { display: none; }
.bl-ribbon-track {
  display: flex; gap: 3px; padding: 0 1.75rem;
  min-width: max-content;
  user-select: none; -webkit-user-select: none;
}
.bl-ribbon-item {
  position: relative; overflow: hidden;
  height: 260px; flex-shrink: 0;
  /* Variable widths based on assumed portrait/landscape ratio */
  width: 195px;
  cursor: pointer; background: var(--c-stone-bg);
  transition: opacity .2s ease;
}
/* Every 3rd item is wider for rhythm */
.bl-ribbon-item:nth-child(3n) { width: 240px; }
.bl-ribbon-item:nth-child(4n) { width: 175px; }

.bl-ribbon-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .5s ease, filter .3s ease;
  filter: saturate(.88); pointer-events: none;
}
.bl-ribbon-item:hover img { transform: scale(1.04); filter: saturate(1); }

/* Caption overlay */
.bl-ribbon-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .5rem .875rem;
  background: rgba(26,23,20,.55); /* semi-dark band */
  font-family: var(--bl-sans); font-size: .625rem;
  letter-spacing: .08em; color: rgba(252,252,252,.85);
  transform: translateY(100%); transition: transform .3s ease;
  backdrop-filter: blur(4px);
}
.bl-ribbon-item:hover .bl-ribbon-cap { transform: translateY(0); }

/* Zoom icon overlay */
.bl-ribbon-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252,252,252,0);
  transition: background .3s ease;
}
.bl-ribbon-item:hover .bl-ribbon-overlay { background: rgba(252,252,252,.15); }
.bl-ribbon-overlay svg { opacity: 0; transition: opacity .3s ease; }
.bl-ribbon-item:hover .bl-ribbon-overlay svg { opacity: 1; }

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

/* ── 20. RUNDOWN ───────────────────────────────────────────── */
.bl-rundown { display:flex;flex-direction:column; }
.bl-rd-item { display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 0;border-bottom:1px solid var(--c-rule); }
.bl-rd-item:first-child { border-top: 1px solid var(--c-rule); }
.bl-rd-time { width:56px;flex-shrink:0;font-family:var(--bl-sans);font-size:.75rem;font-weight:600;color:var(--c-blush);padding-top:.1875rem;letter-spacing:.04em; }
.bl-rd-sep  { width:1px;align-self:stretch;background:var(--c-rule);flex-shrink:0;margin:0 .25rem; }
.bl-rd-title { font-family:var(--bl-display);font-size:1rem;font-weight:700;color:var(--c-warm-black);line-height:1.4; }
.bl-rd-desc  { font-size:.8125rem;color:var(--c-warm-black3);line-height:1.7;margin-top:.25rem; }

/* ── 21. FORMS ─────────────────────────────────────────────── */
.bl-form { display:flex;flex-direction:column;gap:1rem; }
.bl-fg { display:flex;flex-direction:column;gap:.375rem; }
.bl-lbl { font-family:var(--bl-sans);font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-warm-black3); }
.bl-lbl small { font-weight:400;text-transform:none;letter-spacing:0; }
.bl-inp {
  width:100%;padding:.75rem 0;
  background:transparent;
  border:none;border-bottom:1.5px solid var(--c-rule);
  color:var(--c-warm-black);font-size:.9375rem;
  font-family:var(--bl-display);outline:none;
  transition:border-color .25s;-webkit-appearance:none;border-radius:0;
}
.bl-inp:focus { border-color:var(--c-blush); }
.bl-inp::placeholder { color:var(--c-warm-black4); }
.bl-inp option { background:var(--c-white); }
.bl-attend-row { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.bl-attend {
  padding:.75rem;text-align:center;
  background:transparent;
  border:1.5px solid var(--c-rule);
  color:var(--c-warm-black3);font-family:var(--bl-sans);font-size:.5625rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
}
.bl-attend.active,.bl-attend:hover { border-color:var(--c-blush);color:var(--c-blush);background:var(--c-blush-pale); }
.bl-submit {
  display:flex;align-items:center;justify-content:center;gap:.625rem;
  width:100%;padding:.875rem 0;
  background:var(--c-warm-black);border:none;
  color:var(--c-white);font-family:var(--bl-sans);
  font-size:.5625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;
}
.bl-submit:hover { background:var(--c-blush); }

/* ── 22. WISHES ────────────────────────────────────────────── */
.bl-wish { display:flex;gap:.875rem;padding:1.125rem 0;border-bottom:1px solid var(--c-rule); }
.bl-wish-av { width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--c-blush-pale);border:1px solid var(--c-blush-dim);display:flex;align-items:center;justify-content:center;font-family:var(--bl-display);font-size:.875rem;font-weight:700;color:var(--c-blush); }
.bl-wish-body { flex:1;min-width:0; }
.bl-wish-head { display:flex;align-items:baseline;flex-wrap:wrap;gap:.375rem .75rem;margin-bottom:.375rem; }
.bl-wish-name { font-family:var(--bl-display);font-size:.9375rem;font-weight:700;color:var(--c-warm-black); }
.bl-wish-rel  { font-size:.6875rem;color:var(--c-blush);letter-spacing:.06em; }
.bl-wish-time { font-size:.6875rem;color:var(--c-warm-black4);margin-left:auto; }
.bl-wish-msg  { font-size:.8125rem;color:var(--c-warm-black2);line-height:1.75; }
.bl-loadmore { display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem 0;margin-top:1.25rem;background:transparent;border:none;border-bottom:1.5px solid var(--c-rule);color:var(--c-warm-black3);font-family:var(--bl-sans);font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .25s; }
.bl-loadmore:hover { color:var(--c-blush);border-color:var(--c-blush); }

/* ── 23. GIFT ──────────────────────────────────────────────── */
.bl-tabs { display:flex;margin-bottom:1.5rem;border-bottom:1.5px solid var(--c-rule); }
.bl-tab { flex:1;padding:.75rem 0;text-align:center;font-family:var(--bl-sans);font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-warm-black4);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .25s; }
.bl-tab.active { color:var(--c-warm-black);border-bottom-color:var(--c-warm-black); }
.bl-hidden { display:none; }
.bl-bank { display:flex;align-items:center;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--c-rule); }
.bl-bank-left { flex:1;min-width:0; }
.bl-bank-name { font-family:var(--bl-sans);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-blush);margin-bottom:.375rem; }
.bl-bank-num { font-family:'Courier New',monospace;font-size:1.375rem;color:var(--c-warm-black);letter-spacing:.1em;margin-bottom:.25rem; }
.bl-bank-holder { font-size:.8125rem;color:var(--c-warm-black3); }
.bl-copy-btn { display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 0;background:transparent;border:none;border-bottom:1px solid var(--c-rule);color:var(--c-warm-black3);font-family:var(--bl-sans);font-size:.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap; }
.bl-copy-btn:hover { color:var(--c-blush);border-color:var(--c-blush); }
.bl-addr-box { padding:1.25rem 0;font-family:var(--bl-display);font-size:.9375rem;color:var(--c-warm-black2);line-height:1.9;border-top:1px solid var(--c-rule); }

/* ── 24. CONTACT ───────────────────────────────────────────── */
.bl-contact { display:flex;align-items:center;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--c-rule);margin-bottom:1rem; }
.bl-contact-left { flex:1;min-width:0; }
.bl-contact-name { font-family:var(--bl-display);font-size:1.125rem;font-weight:700;color:var(--c-warm-black); }
.bl-contact-phone { font-size:.8125rem;color:var(--c-warm-black3);margin-top:.25rem; }
.bl-wa-btn { display:inline-flex;align-items:center;gap:.5rem;padding:.5625rem .875rem;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.2);color:#25d366;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .25s;text-decoration:none;font-family:var(--bl-sans); }
.bl-wa-btn:hover { background:rgba(37,211,102,.18); }
.bl-note { font-size:.8125rem;color:var(--c-warm-black3);line-height:1.8;font-style:italic;padding:.875rem 0;border-top:1px solid var(--c-rule); }

/* ── 25. HASHTAG ───────────────────────────────────────────── */
.bl-hashtag-wrap { display:flex;flex-direction:column;gap:.75rem; }
.bl-hashtag { display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--c-rule);cursor:pointer;transition:all .2s; }
.bl-hashtag:hover { color:var(--c-blush); }
.bl-hashtag span { font-family:var(--bl-script);font-size:1.25rem;color:var(--c-stone); }
.bl-hashtag:hover span { color:var(--c-blush); }
.bl-hashtag svg { color:var(--c-warm-black4);flex-shrink:0; }

/* ── 26. CLOSING — Geometric circle monogram ───────────────── */
.bl-closing-sec {
  background: var(--c-white);
  text-align: center; padding: 4rem 0 5rem;
  border-top: 1px solid var(--c-rule);
}
.bl-closing-inner { padding: 0 1.75rem; }

/* Minimal circle monogram */
.bl-closing-mono { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.bl-mono-circle {
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid var(--c-rule);
  display: flex; align-items: center; justify-content: center;
  gap: .25rem;
  transition: border-color .3s ease;
}
.bl-mono-circle:hover { border-color: var(--c-blush); }
.bl-mono-g, .bl-mono-b {
  font-family: var(--bl-display); font-size: 2rem; font-weight: 900;
  color: var(--c-warm-black); line-height: 1;
}
.bl-mono-amp {
  font-family: var(--bl-script); font-size: 1.25rem;
  color: var(--c-blush); line-height: 1.2;
}

.bl-closing-names {
  font-family: var(--bl-script); font-size: 2.5rem;
  color: var(--c-warm-black); line-height: 1.2; margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .375rem .75rem;
}
.bl-closing-and {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-warm-black4);
}
.bl-closing-txt {
  font-family: var(--bl-display); font-size: .9375rem; font-style: italic;
  color: var(--c-warm-black2); line-height: 2;
  max-width: 300px; margin: 0 auto;
}
.bl-closing-date {
  font-family: var(--bl-sans); font-size: .5rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-warm-black4); margin: 1rem 0 2rem;
}
.bl-closing-share { display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap; }
.bl-cls-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.625rem 1.125rem;
  background:transparent;border:1.5px solid var(--c-rule);
  color:var(--c-warm-black2);font-family:var(--bl-sans);
  font-size:.5rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
}
.bl-cls-btn:hover { border-color:var(--c-blush);color:var(--c-blush); }
.bl-brand { margin-top:3rem;font-size:.5625rem;letter-spacing:.1em;color:var(--c-warm-black4); }
.bl-brand a { color:var(--c-warm-black3);text-decoration:underline;text-underline-offset:3px; }

/* ── 27. SHARE SHEET ───────────────────────────────────────── */
#bl-share { position:fixed;inset:0;z-index:8500;background:rgba(26,23,20,.5);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0); }
#bl-share-panel { background:var(--c-white);width:100%;max-width:var(--max-w);border-top:2px solid var(--c-warm-black);padding:1.75rem; }
.bl-share-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.375rem; }
.bl-share-ttl { font-family:var(--bl-display);font-size:1.0625rem;font-weight:700;color:var(--c-warm-black); }
.bl-share-x { width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--c-warm-black3);font-size:1rem;cursor:pointer;transition:color .2s; }
.bl-share-x:hover { color:var(--c-blush); }
.bl-share-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem; }
.bl-sh-btn { display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem .375rem;background:var(--c-off-white);border:1.5px solid var(--c-rule);font-family:var(--bl-sans);font-size:.6875rem;color:var(--c-warm-black3);cursor:pointer;transition:border-color .2s; }
.bl-sh-btn:hover { border-color:var(--c-blush);color:var(--c-warm-black); }
.bl-sh-ico { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem; }
.bl-wa { background:rgba(37,211,102,.1);color:#25d366; }
.bl-tg { background:rgba(42,171,238,.1);color:#29a8eb; }
.bl-fb { background:rgba(59,89,152,.1);color:#3b5998; }
.bl-cp { background:var(--c-blush-pale);color:var(--c-blush); }

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

/* ── 29. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 380px) {
  .bl-gate-name { font-size: clamp(1.75rem, 9vw, 3rem); }
  .bl-hero-groom, .bl-hero-bride { font-size: 2.75rem; }
  .bl-gate-photo-strip { width: 18%; }
  .bl-cd-num { font-size: 2.25rem; }
  .bl-share-grid { grid-template-columns: repeat(2,1fr); }
  .bl-mono-circle { width: 96px; height: 96px; }
  .bl-mono-g, .bl-mono-b { font-size: 1.625rem; }
  .bl-closing-names { font-size: 2rem; }
  .bl-person-photo, .bl-person-initial { width: 110px; height: 110px; }
}
@media (max-width: 320px) {
  .bl-gate-photo-strip { width: 15%; }
  .bl-gate-name { font-size: 1.625rem; }
}

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

.bl-gate-layout{width: 100%; height: 100%; display: flex; align-items: stretch;}
.bl-gate-photo-strip{width: 22%; height: 100%; min-height: 100vh; flex-shrink: 0; background-size: cover; background-position: center; background-repeat: no-repeat;}