/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   JISNA FRANCIS & MILAN MARTIN · WEDDING INVITATION

   Design System: A Forever Promise — Modern Heirloom Christian Stationery

   Theme: Deep Olive, Soft Sage, Warm Ivory, Champagne Gold

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* ── DESIGN TOKENS ── */

:root {

  --olive-deep: #303A2A;

  --olive-dark: #3B4633;

  --olive-primary: #687650;

  --olive-sage: #AAB49A;

  --olive-tint: #EEF0E8;

  --ivory-main: #F7F4EB;

  --card-surface: #FFFDF8;

  --gold-champagne: #B99B65;

  --gold-bright: #DCC69B;

  --gold-dim: #9F8557;

  --gold-border: rgba(185, 155, 101, 0.45);

  --gold-border-soft: rgba(185, 155, 101, 0.25);

  --ink-main: #34382F;

  --ink-muted: #68705E;

  --ink-subtle: #8A9280;



  /* Aliases for reference compatibility */

  --burgundy-deep: #303A2A;

  --burgundy: #3B4633;

  --burgundy-medium: #687650;

  --burgundy-light: #AAB49A;

  --burgundy-tint: #EEF0E8;

  --burgundy-wash: #F7F4EB;

  --gold: #B99B65;

  --text-main: #34382F;

  --text-muted: #68705E;

  --text-light: #F7F4EB;



  --font-serif: 'Cormorant Garamond', Georgia, serif;

  --font-script: 'Great Vibes', cursive;

  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-malayalam: 'Noto Serif Malayalam', serif;

}



/* ── RESET & BASE ── */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

  background: var(--olive-deep);

}



body {

  font-family: var(--font-serif);

  background: #252D21;

  color: var(--ink-main);

  display: flex;

  justify-content: center;

  align-items: flex-start;

  min-height: 100vh;

  min-height: 100dvh;

  overflow-x: hidden;

}



img {

  display: block;

  max-width: 100%;

}



a {

  text-decoration: none;

  color: inherit;

}



button {

  cursor: pointer;

  border: none;

  background: none;

  font: inherit;

}



/* ── APP BOOKLET CONTAINER (430px Mobile Heirloom Suite) ── */

#app {

  width: 100%;

  max-width: 430px;

  min-height: 100vh;

  min-height: 100dvh;

  background: var(--ivory-main);

  position: relative;

  overflow-x: hidden;

  overflow-y: auto;

  scroll-behavior: smooth;

  container-type: inline-size;

}



@media (min-width: 431px) {

  #app {

    box-shadow: 0 0 100px rgba(0, 0, 0, 0.45), 0 0 40px rgba(48, 58, 42, 0.35);

  }

}



#app::-webkit-scrollbar {

  width: 3px;

}

#app::-webkit-scrollbar-thumb {

  background: var(--olive-primary);

  border-radius: 3px;

}



.no-scroll {

  overflow: hidden !important;

  touch-action: none;

}



/* ── BOOK PAGES (Spiral-Bound Stationery Pages) ── */

.book-page {

  position: relative;

  width: 100%;

  background-color: var(--ivory-main);

  background-image: url('images/background.webp');

  background-size: 100% auto;

  background-position: top center;

  background-repeat: repeat-y;

  box-sizing: border-box;

  z-index: 1;

  overflow: hidden;

}



#page-cover {

  min-height: 100vh;

  min-height: 100dvh;

  min-height: 760px;

  display: flex;

  flex-direction: column;

  background-size: 100% 100% !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

}



.book-page > section {

  position: relative;

  z-index: 1;

  background: transparent !important;

}



/* Page Top and Bottom Margins for Spiral Ring Clearance */

.book-page > section:first-child {

  padding-top: 32px;

}

.book-page > section:last-child,

.book-page > footer {

  padding-bottom: 34px;

}



/* Background Tiles (Disabled in favor of Per-Page Matching Backgrounds) */

.bg-pattern, .bg-tile {

  display: none !important;

}



/* ── SPIRAL NOTEBOOK BINDING (SVG Gold Wire Loops) ── */

.page-spiral-binding {

  width: 100%;

  height: 42px;

  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: -16px 0;

  pointer-events: none;

}



.page-spiral-binding .bg-spiral-svg {

  width: 100%;

  height: 44px;

  display: block;

}



/* ── SCROLL REVEAL ANIMATIONS ── */

.reveal {

  opacity: 0;

  transform: translateY(18px);

  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: opacity, transform;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal.scale {

  transform: scale(0.95);

}

.reveal.scale.visible {

  transform: scale(1);

}



.d1 { transition-delay: 0.12s; }

.d2 { transition-delay: 0.22s; }

.d3 { transition-delay: 0.32s; }

.d4 { transition-delay: 0.42s; }

.d5 { transition-delay: 0.52s; }



/* ── SHARED SECTION TYPOGRAPHY & HEADINGS ── */

.eyebrow {

  display: block;

  text-align: center;

  font-family: var(--font-sans);

  font-size: 0.55rem;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-bottom: 8px;

}



.s-title {

  font-family: var(--font-serif);

  font-size: clamp(1.4rem, 5.4cqi, 1.85rem);

  letter-spacing: 0.04em;

  text-align: center;

  color: var(--ink-main);

  line-height: 1.25;

}



.s-title em {

  display: block;

  font-family: var(--font-script);

  font-size: clamp(1.7rem, 6.2cqi, 2.2rem);

  color: var(--olive-primary);

  font-style: normal;

  margin-top: 4px;

  line-height: 1;

}



.s-rule {

  width: 72px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--gold-champagne), transparent);

  margin: 14px auto clamp(20px, 4cqi, 28px);

}



.malayalam {

  font-family: var(--font-malayalam);

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   1. LOADER — OLIVE ENVELOPE OPENING EXPERIENCE

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#loader {

  position: fixed;

  top: 0; bottom: 0; left: 50%;

  transform: translateX(-50%);

  width: 100%;

  max-width: 430px;

  z-index: 9999;

  container-type: inline-size;

  pointer-events: all;

  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.1s cubic-bezier(0.4, 0, 0.2, 1);

}



#loader.hide {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.ld-bg {

  position: absolute;

  inset: 0;

  background: var(--olive-deep);

  background-image: radial-gradient(ellipse at 50% 32%, rgba(104, 118, 80, 0.35) 0%, transparent 68%);

  z-index: 0;

}



.ld-content {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0 20px;

}



.env-wrap {
  position: relative;
  width: 92%;
  max-width: 375px;
  margin-top: -55px;
  display: flex;
  align-items: center;
  justify-content: center;
}



.env-back {

  width: 100%;

  position: relative;

  z-index: 1;

  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.38));

}



.env-floral {
  position: absolute;
  right: -24px;
  top: -46px;
  width: 118px;
  z-index: 2;
  transform: rotate(14deg);
  opacity: 0.95;
  pointer-events: none;
}



.env-card {
  position: absolute;
  top: 19%;
  left: 53.0%;
  transform: translateX(-50%);
  width: 58%;
  max-width: 220px;
  min-height: 185px;
  padding: 18px 14px 16px;
  text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 70%, #F7F2E6 100%);
  border: 1px solid rgba(185, 155, 101, 0.55);
  box-shadow: 0 10px 28px rgba(18, 24, 15, 0.24), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #FFFDF8, inset 0 0 0 4px rgba(185, 155, 101, 0.32);
  border-radius: 4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  pointer-events: none;
  box-sizing: border-box;
}



#loader.hide .env-card {

  transform: translate(-50%, -90%) scale(1.06);

  opacity: 0;

}



.ec-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-primary);
  margin-bottom: 7px;
  font-weight: 500;
  white-space: nowrap;
}



.ec-names {
  font-family: var(--font-serif);
  font-size: clamp(0.92rem, 3.6cqi, 1.08rem);
  color: var(--ink-main);
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 600;
  margin-bottom: 5px;
}



.ec-amp {
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--olive-primary);
  margin: 0 3px;
}



.ec-date {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-primary);
  margin-top: 5px;
  font-weight: 600;
  white-space: nowrap;
}



.env-front {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  z-index: 4;

  pointer-events: none;

}



.env-seal {
  position: absolute;
  bottom: 33%;
  left: 53.0%;
  transform: translate(-50%, 50%);
  width: 58px;
  height: 58px;
  z-index: 6;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}



.env-seal img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.env-seal span {

  display: none !important;

}



.ld-center-icons {

  position: absolute;

  bottom: 70px;

  left: 0; right: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

}



.tap-btn-wrapper {

  position: relative;

}



.tap-btn {

  position: relative;

  min-height: 48px;

  background: rgba(48, 58, 42, 0.94);

  color: #FFFDF8;

  font-family: var(--font-sans);

  font-size: 0.62rem;

  font-weight: 500;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  padding: 14px 34px;

  border-radius: 40px;

  cursor: pointer;

  pointer-events: all;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border: 1px solid rgba(217, 198, 155, 0.4);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease;

}



.tap-btn::before {

  content: '';

  position: absolute;

  inset: -6px;

  border-radius: 46px;

  border: 1px solid rgba(217, 198, 155, 0.45);

  animation: pulse-ring 2.6s cubic-bezier(0.24, 0, 0.38, 1) infinite;

  pointer-events: none;

}



@keyframes pulse-ring {

  0% { transform: scale(0.96); opacity: 0.8; }

  50% { transform: scale(1.08); opacity: 0.2; }

  100% { transform: scale(0.96); opacity: 0.8; }

}



.tap-btn:hover {

  background: var(--olive-deep);

  border-color: var(--gold-bright);

  transform: translateY(-2px);

}



.tap-btn-arrow {

  width: 7px;

  height: 7px;

  border-right: 1.5px solid var(--gold-bright);

  border-bottom: 1.5px solid var(--gold-bright);

  transform: rotate(-45deg);

  margin-left: 2px;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   2. HERO — FAMILY CELEBRATION INVITATION

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#hero {

  position: relative;

  min-height: 100vh;

  min-height: 100dvh;

  min-height: 760px;

  padding: 48px 24px 38px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  text-align: center;

  overflow: hidden;

  box-sizing: border-box;

  flex: 1;

}



.hero-body {

  margin: 32px 0 24px;

}



.hero-couples-block {

  margin: 14px 0 16px;

}



.hero-couple-name {

  font-size: clamp(2rem, 7cqi, 2.5rem);

}



.hero-cd-bar {

  margin-top: auto;

  padding-top: 24px;

  padding-bottom: 6px;

}



.hero-sparkles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 1;

}



.hero-sparkles span {

  position: absolute;

  width: 4px;

  height: 4px;

  background: var(--gold-bright);

  border-radius: 50%;

  box-shadow: 0 0 8px var(--gold-bright);

  animation: sparkle-float 6s infinite ease-in-out;

  opacity: 0.6;

}



.hero-sparkles span:nth-child(1) { top: 15%; left: 18%; animation-delay: 0s; }

.hero-sparkles span:nth-child(2) { top: 28%; right: 16%; animation-delay: 1.5s; }

.hero-sparkles span:nth-child(3) { top: 62%; left: 14%; animation-delay: 3s; }

.hero-sparkles span:nth-child(4) { top: 78%; right: 20%; animation-delay: 4.2s; }

.hero-sparkles span:nth-child(5) { top: 44%; left: 50%; animation-delay: 2.2s; }



@keyframes sparkle-float {

  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.2; }

  50% { transform: translateY(-14px) scale(1.3); opacity: 0.85; }

}



.hero-floral {

  position: absolute;

  z-index: 0;

  pointer-events: none;

  opacity: 0.14;

}

.hero-floral-tl { top: -10px; left: -20px; width: 155px; transform: rotate(14deg); }

.hero-floral-br { bottom: -10px; right: -20px; width: 155px; transform: scaleX(-1) rotate(14deg); }



.hero-top {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 10px;

}



.hero-date-top {

  font-family: var(--font-sans);

  font-size: 0.58rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--olive-primary);

  background: rgba(255, 253, 248, 0.85);

  border: 1px solid var(--gold-border-soft);

  padding: 5px 16px;

  border-radius: 30px;

  box-shadow: 0 2px 8px rgba(48, 58, 42, 0.04);

}



.hero-body {

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  margin: auto 0;

  padding: 10px 0;

}



.hero-cross {

  color: var(--gold-champagne);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 12px;

  filter: drop-shadow(0 1px 2px rgba(185, 155, 101, 0.3));

}



.hero-eyebrow {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: clamp(0.95rem, 3.4cqi, 1.15rem);

  color: var(--ink-muted);

  margin-bottom: 6px;

}



.hero-orn-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  max-width: 200px;

  margin: 6px 0 12px;

}



.hero-orn-row .or-line {

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--gold-champagne));

}

.hero-orn-row .or-line.r {

  background: linear-gradient(90deg, var(--gold-champagne), transparent);

}



.hero-family {

  font-family: var(--font-sans);

  font-size: 0.6rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--olive-primary);

  font-weight: 500;

  margin-bottom: 14px;

}



.hero-couples-block {

  margin: 4px 0 16px;

}



.hero-couple-pair {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.hero-couple-name {

  font-family: var(--font-serif);

  font-size: clamp(1.85rem, 7.8cqi, 2.5rem);

  line-height: 1.15;

  color: var(--ink-main);

  font-weight: 500;

  letter-spacing: 0.02em;

}



.hero-couple-connector {

  font-family: var(--font-script);

  font-size: clamp(1.8rem, 6.8cqi, 2.4rem);

  color: var(--olive-primary);

  margin: -4px 0;

  line-height: 1;

}



.hero-rule {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 140px;

  margin: 12px 0;

}



.hero-rule span {

  flex: 1;

  height: 1px;

  background: var(--gold-champagne);

  opacity: 0.5;

}



.hero-rule i {

  width: 5px;

  height: 5px;

  background: var(--gold-champagne);

  transform: rotate(45deg);

  display: block;

}



.hero-date-info {

  font-family: var(--font-serif);

  font-size: clamp(1rem, 3.8cqi, 1.2rem);

  line-height: 1.45;

  color: var(--ink-main);

  letter-spacing: 0.03em;

}



.hero-date-info strong {

  font-weight: 600;

  color: var(--olive-dark);

}



.hero-cd-bar {

  width: 100%;

  max-width: 380px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  margin-top: auto;

  padding-top: 14px;

}



.hero-countdown {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(6px, 2.5cqi, 12px);

  background: transparent;

  border: none;

  padding: 4px 0;

  border-radius: 0;

  box-shadow: none;

  width: 100%;

}



.cd-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 44px;

}



.cd-item span {

  font-family: var(--font-serif);

  font-size: clamp(1.2rem, 4.8cqi, 1.55rem);

  font-weight: 600;

  color: var(--olive-dark);

  line-height: 1;

}



.cd-item label {

  font-family: var(--font-sans);

  font-size: 0.44rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-top: 3px;

  font-weight: 500;

}



.cd-sep {

  font-family: var(--font-serif);

  font-size: 1.2rem;

  color: var(--gold-champagne);

  line-height: 1;

  margin-top: -6px;

  opacity: 0.8;

}



.hero-loc-link {

  font-family: var(--font-sans);

  font-size: 0.52rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--ink-muted);

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   3. INVITATION — PINNED CARD ON ENVELOPE

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#invitation {

  padding: 44px 20px 48px;

  min-height: 560px;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-sizing: border-box;

}



.inv-envelope-wrap {

  position: relative;

  margin: 24px auto 0;

  width: 92%;

  max-width: 350px;

}



.inv-envelope {

  position: relative;

  z-index: 1;

}



.inv-envelope img {

  width: 100%;

  filter: drop-shadow(0 14px 34px rgba(48, 58, 42, 0.16));

}



.inv-envelope-front {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  z-index: 4;

  pointer-events: none;

}



.inv-card-pinned {

  position: absolute;

  top: 18%;

  left: 53.0%;

  transform: translate(-50%, -6%);

  width: 58%;

  max-width: 195px;

  min-height: 170px;

  padding: 16px 12px 26px;

  text-align: center;

  z-index: 3;

  opacity: 0;

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.8s ease 0.2s;

  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 70%, #F7F2E6 100%);

  border: 1px solid rgba(185, 155, 101, 0.55);

  box-shadow: 0 10px 28px rgba(18, 24, 15, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 0 0 3px #FFFDF8, inset 0 0 0 4px rgba(185, 155, 101, 0.32);

  border-radius: 4px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  box-sizing: border-box;

}



.inv-envelope-wrap.visible .inv-card-pinned {

  transform: translate(-50%, 0);

  opacity: 1;

}



.inv-body {

  font-family: var(--font-serif);

  font-size: clamp(0.66rem, 2.3cqi, 0.72rem);

  line-height: 1.48;

  color: var(--ink-main);

  margin-bottom: 8px;

}



.inv-signoff {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: auto;

}



.inv-seal {

  font-family: var(--font-script);

  font-size: 1.22rem;

  color: var(--olive-primary);

  line-height: 1.1;

}



.inv-family {

  font-family: var(--font-serif);

  font-size: 0.76rem;

  font-weight: 600;

  color: var(--ink-main);

  letter-spacing: 0.03em;

  margin-top: 2px;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   4 & 5. BRIDE & GROOM PROFILE SECTIONS

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.couple-section {

  padding: 44px 22px 48px;

  min-height: 560px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}



.couple-badge {

  font-family: var(--font-sans);

  font-size: 0.54rem;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: var(--olive-primary);

  background: rgba(255, 253, 248, 0.9);

  border: 1px solid var(--gold-border-soft);

  padding: 4px 18px;

  border-radius: 20px;

  margin-bottom: 22px;

  display: inline-block;

  box-shadow: 0 2px 8px rgba(48, 58, 42, 0.04);

}



/* ── DISTINCTIVE PHOTO FRAMES ── */

.couple-frame {

  position: relative;

  width: 250px;

  height: 330px;

  margin: 0 auto 24px;

  background: var(--card-surface);

  box-shadow: 0 14px 38px rgba(48, 58, 42, 0.14);

}



/* Bride: Soft Roman Arch Frame */

.couple-frame.bride-frame {

  border-radius: 125px 125px 8px 8px;

  padding: 7px;

  border: 1px solid var(--gold-champagne);

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.8), 0 14px 38px rgba(48, 58, 42, 0.14);

}

.couple-frame.bride-frame::after {

  content: '';

  position: absolute;

  inset: 12px;

  border: 1px solid rgba(185, 155, 101, 0.35);

  border-radius: 115px 115px 4px 4px;

  pointer-events: none;

}

.couple-frame.bride-frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 12%;

  border-radius: 118px 118px 4px 4px;

}



/* Groom: Stately Editorial Clipped Mount */

.couple-frame.groom-frame {

  border-radius: 12px;

  padding: 8px;

  border: 1px solid var(--gold-champagne);

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.8), 0 14px 38px rgba(48, 58, 42, 0.14);

}

.couple-frame.groom-frame::after {

  content: '';

  position: absolute;

  inset: 13px;

  border: 1px solid rgba(185, 155, 101, 0.35);

  border-radius: 6px;

  pointer-events: none;

}

.couple-frame.groom-frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 10%;

  border-radius: 6px;

}



/* Frame Wax Seals */

.couple-seal {

  position: absolute;

  width: 50px;

  height: 50px;

  z-index: 4;

  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));

  display: flex;

  align-items: center;

  justify-content: center;

}

.bride-frame .couple-seal {

  bottom: -16px;

  right: -12px;

}

.groom-frame .couple-seal {

  bottom: -16px;

  left: -12px;

}



.couple-seal img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.couple-seal span {

  display: none !important;

}



.couple-names {

  margin-bottom: 6px;

}



.cn-name {

  font-family: var(--font-serif);

  font-size: clamp(1.6rem, 6cqi, 2.05rem);

  font-weight: 500;

  color: var(--ink-main);

  letter-spacing: 0.02em;

}



.couple-parents {

  margin-bottom: 22px;

}



.cp-label {

  font-family: var(--font-sans);

  font-size: 0.52rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-bottom: 2px;

}



.cp-names {

  font-family: var(--font-serif);

  font-size: clamp(0.95rem, 3.4cqi, 1.12rem);

  font-style: italic;

  color: var(--ink-muted);

}



/* ── MADHURAVEPPU STATIONERY CARDS ── */

.couple-event-card {

  width: 100%;

  max-width: 360px;

  background: var(--card-surface);

  border: 1px solid var(--gold-border);

  border-radius: 8px;

  padding: 22px 18px;

  text-align: center;

  position: relative;

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.9), 0 8px 24px rgba(48, 58, 42, 0.06);

}



.couple-event-card::before {

  content: '';

  position: absolute;

  inset: 5px;

  border: 1px solid var(--gold-border-soft);

  border-radius: 5px;

  pointer-events: none;

}



.ce-icon {

  width: 32px;

  height: 32px;

  margin: 0 auto 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--gold-champagne);

  font-size: 1.1rem;

}



.ce-label {

  font-family: var(--font-sans);

  font-size: 0.52rem;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-bottom: 4px;

}



.ce-name {

  font-size: clamp(1.3rem, 4.8cqi, 1.55rem);

  font-weight: 500;

  color: var(--olive-dark);

  margin-bottom: 8px;

}



.ce-date {

  font-family: var(--font-serif);

  font-size: 0.96rem;

  font-weight: 600;

  color: var(--ink-main);

  letter-spacing: 0.02em;

}



.ce-time {

  font-family: var(--font-sans);

  font-size: 0.65rem;

  letter-spacing: 0.06em;

  color: var(--olive-primary);

  margin-bottom: 10px;

}



.ce-venue {

  font-family: var(--font-sans);

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.ce-venue-name {

  font-size: 0.76rem;

  font-weight: 600;

  color: var(--ink-main);

  letter-spacing: 0.02em;

}



.ce-venue-loc {

  font-size: 0.64rem;

  color: var(--ink-muted);

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   6. WEDDING CEREMONY SECTION (ST. GEORGE BASILICA)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#shared-reception {

  padding: 36px 20px 28px;

  text-align: center;

}



.sr-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



.sr-couples-wrap {

  margin: 6px 0 16px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sr-name {

  font-family: var(--font-serif);

  font-size: clamp(1.2rem, 4.4cqi, 1.45rem);

  font-weight: 500;

  letter-spacing: 0.03em;

  color: var(--ink-main);

}



.sr-amp {

  font-family: var(--font-script);

  font-size: 1.45rem;

  color: var(--olive-primary);

  margin: 0 6px;

}



/* ── ORNAMENTAL SWAN CALENDAR PLAQUE ── */

.sr-calendar-wrap {

  width: 100%;

  max-width: 330px;

  margin: 10px auto 22px;

  filter: drop-shadow(0 14px 34px rgba(48, 58, 42, 0.16));

  transition: transform 0.3s ease;

}



.sr-calendar-wrap:hover {

  transform: translateY(-3px);

}



.sr-calendar-img {

  width: 100%;

  height: auto;

  display: block;

}



/* ── CHURCH DETAILS UNDER CALENDAR ── */

.sr-church-card {

  background: var(--card-surface);

  border: 1px solid var(--gold-border);

  border-radius: 12px;

  padding: 24px 20px 26px;

  width: 100%;

  max-width: 340px;

  box-sizing: border-box;

  box-shadow: 0 10px 30px rgba(48, 58, 42, 0.08);

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  margin: 0 auto;

}



.sr-church-card::before {

  content: '';

  position: absolute;

  inset: 5px;

  border: 1px solid rgba(185, 155, 101, 0.28);

  border-radius: 8px;

  pointer-events: none;

}



.sr-church-cross {

  color: var(--gold-champagne);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 10px;

  filter: drop-shadow(0 1px 2px rgba(185, 155, 101, 0.3));

}



.sr-church-time-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-family: var(--font-sans);

  font-size: 0.62rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--olive-primary);

  font-weight: 600;

  margin-bottom: 12px;

}



.sr-church-time-badge .dot {

  color: var(--gold-champagne);

  font-size: 0.8rem;

}



.sr-church-name {

  font-family: var(--font-serif);

  font-size: clamp(1.35rem, 5.2cqi, 1.7rem);

  font-weight: 600;

  letter-spacing: 0.02em;

  color: var(--ink-main);

  margin-bottom: 4px;

}



.sr-church-address {

  font-family: var(--font-sans);

  font-size: 0.65rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-sage);

  margin-bottom: 20px;

}



.sr-map-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 46px;

  padding: 12px 28px;

  border: 1px solid var(--gold-champagne);

  border-radius: 40px;

  font-family: var(--font-sans);

  font-size: 0.58rem;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: #FFFDF8;

  background: var(--olive-primary);

  box-shadow: 0 6px 18px rgba(48, 58, 42, 0.2);

  transition: background 0.3s, transform 0.25s, box-shadow 0.3s;

}



.sr-map-btn:hover {

  background: var(--olive-deep);

  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(48, 58, 42, 0.28);

}



.sr-map-btn svg {

  width: 14px;

  height: 14px;

  flex-shrink: 0;

  color: var(--gold-champagne);

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   7. WEDDING EVENTS & VENUE CARDS (STATIONERY-INSPIRED)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#venue {

  padding: 32px 20px 24px;

  text-align: center;

}



.venue-list {

  margin-top: 28px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.venue-card {

  background: var(--card-surface);

  border: 1px solid var(--gold-border);

  border-radius: 8px;

  padding: 10px;

  position: relative;

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.9), 0 8px 24px rgba(48, 58, 42, 0.07);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

}



.venue-card:hover {

  transform: translateY(-3px);

  box-shadow: inset 0 0 0 1px rgba(217, 198, 155, 0.6), 0 12px 30px rgba(48, 58, 42, 0.12);

}



/* Subtle corner flourish notches on cards */

.venue-card::before {

  content: '';

  position: absolute;

  inset: 5px;

  border: 1px solid var(--gold-border-soft);

  border-radius: 5px;

  pointer-events: none;

}



/* Elevated styling for Main Wedding Ceremony Card (Card 05) */

.venue-card.highlight-ceremony {

  border-color: var(--gold-champagne);

  box-shadow: inset 0 0 0 1px rgba(217, 198, 155, 0.5), 0 10px 28px rgba(104, 118, 80, 0.15);

}



.vc-header {

  background: rgba(104, 118, 80, 0.06);

  padding: 14px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid var(--gold-border-soft);

  border-radius: 6px;

}



.vc-tag {
  font-family: var(--font-sans);
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-primary);
  font-weight: 600;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vc-icon {
  width: 15px;
  height: 15px;
  color: var(--gold-champagne);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease, color 0.25s ease;
}

.venue-card:hover .vc-icon {
  transform: scale(1.12);
  color: var(--gold-bright);
}



.vc-script {

  font-family: var(--font-script);

  font-size: clamp(1.6rem, 5.8cqi, 1.95rem);

  color: var(--olive-dark);

  font-weight: 600;

  line-height: 1;

}



.vc-body {
  padding: 22px 18px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vc-name {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 5.2cqi, 1.65rem);
  font-weight: 600;
  color: var(--ink-main);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  line-height: 1.25;
}

.vc-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 8px 0 16px;
}

.vc-place {
  font-family: var(--font-serif);
  font-size: clamp(1.18rem, 4.4cqi, 1.45rem);
  font-weight: 600;
  color: var(--ink-main);
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0;
}

.vc-place.vc-hall-featured {
  font-size: clamp(1.4rem, 5.4cqi, 1.75rem);
  color: var(--olive-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 4px 0 6px;
}

.vc-time {
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 2.9cqi, 0.9rem);
  font-weight: 600;
  color: var(--olive-primary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  margin: 3px 0 5px;
}

.vc-loc {
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 2.6cqi, 0.82rem);
  color: var(--olive-sage);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

.vc-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 3.2cqi, 0.98rem);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-main);
  margin-bottom: 16px;
}



.vc-map-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 12px 24px;

  background: var(--olive-dark);

  color: #FFFDF8;

  font-family: var(--font-sans);

  font-size: 0.56rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  border-radius: 40px;

  border: 1px solid var(--gold-border);

  transition: background 0.3s ease, transform 0.25s ease;

  box-shadow: 0 4px 14px rgba(48, 58, 42, 0.15);

}



.vc-map-btn:hover {

  background: var(--olive-deep);

  transform: translateY(-2px);

  border-color: var(--gold-champagne);

}



.vc-map-btn svg {

  width: 13px;

  height: 13px;

  flex-shrink: 0;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   8. PHOTO GALLERY — EDITORIAL PHOTO JOURNAL

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#gallery {

  padding: 34px 18px 28px;

  text-align: center;

}



.gallery-journal {

  margin-top: 26px;

  display: flex;

  flex-direction: column;

  gap: 24px;

  width: 100%;

}



/* Individual Paper Mounted Photo Card */

.journal-card {

  position: relative;

  background: var(--card-surface);

  border: 1px solid var(--gold-border);

  padding: 10px;

  border-radius: 4px;

  box-shadow: 0 10px 30px rgba(48, 58, 42, 0.1);

  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;

  cursor: pointer;

  overflow: hidden;

}



.journal-card:hover {

  transform: scale(1.02) !important;

  box-shadow: 0 16px 40px rgba(48, 58, 42, 0.18);

  z-index: 5;

}



.journal-card img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 2px;

  border: 1px solid rgba(48, 58, 42, 0.08);

}



.journal-caption {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 6px 0;

  font-family: var(--font-sans);

}



.journal-num {

  font-size: 0.52rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-primary);

  font-weight: 600;

}



.journal-tag {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 0.82rem;

  color: var(--ink-muted);

}



/* Asymmetrical Layout Variations */

.jc-lead {

  width: 96%;

  margin: 0 auto;

  transform: rotate(-0.8deg);

}



.jc-spread {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  align-items: start;

}



.jc-spread .journal-card:first-child {

  transform: rotate(1.2deg) translateY(6px);

}

.jc-spread .journal-card:last-child {

  transform: rotate(-1deg) translateY(-4px);

}



.jc-panoramic {

  width: 98%;

  margin: 4px auto;

  transform: rotate(0deg);

  border-color: var(--gold-champagne);

}

.jc-panoramic img {

  max-height: 220px;

  object-fit: cover;

}



.jc-offset-left {

  width: 86%;

  margin-left: 2%;

  transform: rotate(-1.4deg);

}



.jc-offset-right {

  width: 86%;

  margin-left: auto;

  margin-right: 2%;

  transform: rotate(1.2deg);

}



.jc-finale {

  width: 95%;

  margin: 6px auto 0;

  border: 1px solid var(--gold-champagne);

  box-shadow: inset 0 0 0 1px rgba(217, 198, 155, 0.4), 0 14px 42px rgba(48, 58, 42, 0.16);

  transform: rotate(-0.5deg);

}



.jc-finale .couple-seal {

  bottom: 8px;

  right: 8px;

  width: 44px;

  height: 44px;

}



.gallery-help {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 0.84rem;

  color: var(--ink-muted);

  margin-top: 18px;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   9. HEIRLOOM GUESTBOOK, VIRTUAL TOAST & CALENDAR

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#calendar,

#blessings {

  padding: 24px 20px 28px;

  text-align: center;

}



/* ── INTERACTIVE VIRTUAL TOAST CARD ── */

.toast-card {

  background: var(--card-surface);

  border: 1px solid var(--gold-champagne);

  border-radius: 10px;

  padding: 24px 20px;

  position: relative;

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.9), 0 10px 30px rgba(48, 58, 42, 0.08);

  margin-top: 24px;

}



.toast-card::before {

  content: '';

  position: absolute;

  inset: 6px;

  border: 1px solid var(--gold-border-soft);

  border-radius: 6px;

  pointer-events: none;

}



.toast-icon {

  font-size: 1.8rem;

  display: block;

  margin-bottom: 8px;

  filter: drop-shadow(0 2px 6px rgba(185, 155, 101, 0.3));

}



.toast-title {

  font-family: var(--font-serif);

  font-size: clamp(1.25rem, 4.6cqi, 1.5rem);

  font-weight: 500;

  color: var(--ink-main);

  margin-bottom: 6px;

}



.toast-sub {

  font-family: var(--font-sans);

  font-size: clamp(0.66rem, 2.3cqi, 0.74rem);

  line-height: 1.6;

  color: var(--ink-muted);

  max-width: 290px;

  margin: 0 auto 16px;

}



.toast-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 12px 28px;

  background: var(--olive-dark);

  color: #FFFDF8;

  font-family: var(--font-sans);

  font-size: 0.62rem;

  font-weight: 500;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  border-radius: 40px;

  border: 1px solid var(--gold-champagne);

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(48, 58, 42, 0.18);

  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s;

}



.toast-btn:hover {

  background: var(--olive-deep);

  transform: translateY(-2px);

}



.toast-btn:active {

  transform: scale(0.96);

}



.toast-counter {

  font-family: var(--font-sans);

  font-size: 0.58rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-top: 14px;

}



.tc-num {

  font-weight: 700;

  color: var(--gold-dim);

  font-size: 0.72rem;

  display: inline-block;

  transition: transform 0.25s ease;

}



.tc-num.pop {

  transform: scale(1.4);

  color: var(--gold-champagne);

}



/* Floating Sparkles & Hearts Container */

.toast-sparkle-zone {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



.floating-sparkle {

  position: absolute;

  bottom: 20px;

  font-size: 1.2rem;

  pointer-events: none;

  animation: floatUp 2.4s ease-out forwards;

}



@keyframes floatUp {

  0% { transform: translateY(0) scale(0.5); opacity: 1; }

  50% { opacity: 0.9; }

  100% { transform: translateY(-160px) scale(1.2); opacity: 0; }

}



/* ── GUESTBOOK BLESSING CARD & FORM ── */

.blessing-card {

  margin-top: 22px;

  background: var(--card-surface);

  border: 1px solid var(--gold-champagne);

  border-radius: 10px;

  padding: 26px 20px 22px;

  position: relative;

  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.9), 0 10px 30px rgba(48, 58, 42, 0.08);

  text-align: left;

}



.blessing-card::before {

  content: '';

  position: absolute;

  inset: 6px;

  border: 1px solid var(--gold-border-soft);

  border-radius: 6px;

  pointer-events: none;

}



.blessing-monogram {

  display: block;

  text-align: center;

  font-family: var(--font-serif);

  font-size: 1.05rem;

  color: var(--gold-champagne);

  letter-spacing: 0.14em;

  margin-bottom: 6px;

}



.blessing-form-title {

  text-align: center;

  font-family: var(--font-serif);

  font-size: 1.35rem;

  color: var(--ink-main);

  margin-bottom: 4px;

}



.blessing-form-sub {

  text-align: center;

  font-family: var(--font-sans);

  font-size: 0.66rem;

  line-height: 1.5;

  color: var(--ink-muted);

  margin-bottom: 18px;

}



.bf-group {

  margin-bottom: 14px;

}



.bf-label {

  display: block;

  font-family: var(--font-sans);

  font-size: 0.52rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-primary);

  font-weight: 500;

  margin-bottom: 5px;

}



.bf-input, .bf-textarea {

  width: 100%;

  font-family: var(--font-serif);

  font-size: 0.92rem;

  color: var(--ink-main);

  background: rgba(255, 253, 248, 0.85);

  border: 1px solid var(--gold-border-soft);

  border-bottom: 1.5px solid var(--gold-champagne);

  padding: 10px 12px;

  border-radius: 4px;

  transition: border-color 0.3s, background 0.3s;

}



.bf-input:focus, .bf-textarea:focus {

  outline: none;

  border-color: var(--olive-primary);

  background: #FFF;

}



.bf-textarea {

  resize: vertical;

  min-height: 72px;

  line-height: 1.45;

}



.bf-submit-btn {

  width: 100%;

  min-height: 48px;

  background: var(--olive-dark);

  color: #FFFDF8;

  font-family: var(--font-sans);

  font-size: 0.60rem;

  font-weight: 500;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  padding: 14px 20px;

  border-radius: 40px;

  border: 1px solid var(--gold-champagne);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  box-shadow: 0 6px 18px rgba(48, 58, 42, 0.18);

  transition: background 0.3s, transform 0.2s;

  margin-top: 14px;

}



.bf-submit-btn:hover {

  background: var(--olive-deep);

  transform: translateY(-2px);

}



/* ── PINNED BLESSINGS NOTES WALL ── */

.blessings-wall {

  margin-top: 24px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.pinned-note {

  background: rgba(255, 253, 248, 0.95);

  border: 1px solid var(--gold-border-soft);

  border-radius: 6px;

  padding: 16px 16px 14px;

  position: relative;

  box-shadow: 0 4px 14px rgba(48, 58, 42, 0.05);

  animation: fadeInNote 0.6s ease-out;

}



@keyframes fadeInNote {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



.pn-seal {

  position: absolute;

  top: -10px;

  right: 12px;

  width: 28px;

  height: 28px;

}

.pn-seal img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.pn-seal span {

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  font-size: 0.42rem;

  font-weight: 600;

  color: #FFF2D1;

}



.pn-quote {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 0.88rem;

  line-height: 1.5;

  color: var(--ink-main);

  margin-bottom: 6px;

}



.pn-author {

  font-family: var(--font-sans);

  font-size: 0.54rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--olive-primary);

  font-weight: 600;

  text-align: right;

}



/* ── 1-CLICK CALENDAR SYNC CARD ── */

.calendar-card {

  margin-top: 0;

  background: var(--card-surface);

  border: 1px solid var(--gold-border);

  border-radius: 8px;

  padding: 18px 18px 16px;

  box-shadow: 0 4px 16px rgba(48, 58, 42, 0.05);

  text-align: left;

}



.cal-header {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 14px;

}



.cal-icon {

  width: 32px;

  height: 32px;

  color: var(--olive-primary);

  flex-shrink: 0;

}



.cal-title {

  font-family: var(--font-serif);

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--ink-main);

}



.cal-sub {

  font-family: var(--font-sans);

  font-size: 0.56rem;

  letter-spacing: 0.08em;

  color: var(--ink-muted);

  margin-top: 2px;

}



.cal-buttons {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



.cal-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 10px 14px;

  border: 1px solid var(--gold-champagne);

  border-radius: 30px;

  background: rgba(104, 118, 80, 0.08);

  color: var(--ink-main);

  font-family: var(--font-sans);

  font-size: 0.54rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  font-weight: 500;

  transition: background 0.25s, transform 0.2s;

  text-align: center;

}



.cal-btn:hover {

  background: var(--olive-dark);

  color: #FFFDF8;

  transform: translateY(-2px);

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   10. FOOTER

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

footer {

  background: transparent;

  color: var(--ink-main);

  padding: 24px 20px 42px;

  text-align: center;

  position: relative;

  z-index: 1;

}



.ft-name {

  font-family: var(--font-serif);

  font-size: 1.45rem;

  letter-spacing: 0.08em;

  color: var(--olive-dark);

}



.ft-divider-line {

  width: 48px;

  height: 1px;

  background: var(--gold-champagne);

  margin: 12px auto;

  opacity: 0.7;

}



.ft-date {

  font-family: var(--font-sans);

  font-size: 0.62rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--olive-primary);

  margin-bottom: 6px;

  font-weight: 500;

}



.ft-hosted {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 0.88rem;

  color: var(--ink-muted);

}



.ft-date {

  font-family: var(--font-sans);

  font-size: 0.56rem;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: var(--gold-bright);

}



.ft-hosted {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 0.88rem;

  color: var(--olive-sage);

  margin-top: 14px;

  line-height: 1.5;

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   MODALS: LIGHTBOX & RSVP NOTICE

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-overlay {

  position: fixed;

  inset: 0;

  background: rgba(30, 36, 26, 0.88);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.35s ease, visibility 0.35s ease;

}



.modal-overlay.open {

  opacity: 1;

  visibility: visible;

}



/* Lightbox Modal */

.lightbox-content {

  position: relative;

  max-width: 90vw;

  max-height: 85vh;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.lightbox-content img {

  max-width: 100%;

  max-height: 80vh;

  object-fit: contain;

  border-radius: 4px;

  border: 1px solid var(--gold-champagne);

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);

}



.lightbox-close, #lightboxClose {

  position: absolute;

  top: -42px;

  right: 0;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  color: #FFF;

  font-size: 1.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.2s;

}



.lightbox-close:hover {

  background: rgba(255, 255, 255, 0.3);

}



/* RSVP Notice Dialog */

.rsvp-modal-card {

  background: var(--card-surface);

  border: 1px solid var(--gold-champagne);

  border-radius: 12px;

  padding: 28px 22px;

  max-width: 380px;

  width: 100%;

  text-align: center;

  position: relative;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

}



.rsvp-modal-title {

  font-family: var(--font-serif);

  font-size: 1.35rem;

  color: var(--olive-dark);

  margin-bottom: 8px;

}



.rsvp-modal-text {

  font-family: var(--font-sans);

  font-size: 0.72rem;

  line-height: 1.6;

  color: var(--ink-muted);

  margin-bottom: 16px;

}



.rsvp-preview-box {

  background: rgba(104, 118, 80, 0.08);

  border: 1px solid var(--gold-border-soft);

  border-radius: 6px;

  padding: 12px;

  font-family: var(--font-sans);

  font-size: 0.68rem;

  color: var(--ink-main);

  text-align: left;

  white-space: pre-wrap;

  line-height: 1.5;

  margin-bottom: 18px;

  max-height: 140px;

  overflow-y: auto;

}



.rsvp-modal-actions {

  display: flex;

  gap: 10px;

  justify-content: center;

}



.modal-btn {

  min-height: 48px;

  padding: 10px 22px;

  border-radius: 30px;

  font-family: var(--font-sans);

  font-size: 0.58rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  font-weight: 500;

  transition: background 0.2s;

}



.modal-btn.primary {

  background: var(--olive-dark);

  color: #FFF;

  border: 1px solid var(--gold-champagne);

}

.modal-btn.secondary {

  background: rgba(104, 118, 80, 0.12);

  color: var(--ink-main);

  border: 1px solid var(--gold-border-soft);

}



/* ── ACCESSIBILITY & REDUCED MOTION ── */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

  .reveal {

    opacity: 1 !important;

    transform: none !important;

  }

}

/* ── FLOATING BACKGROUND MUSIC TOGGLE ── */
.music-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold-champagne);
  border-radius: 30px;
  padding: 7px 12px;
  color: var(--olive-primary);
  box-shadow: 0 4px 16px rgba(48, 58, 42, 0.18);
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: all;
}

@media (min-width: 431px) {
  .music-toggle {
    right: calc(50% - 200px);
  }
}

.music-toggle:hover {
  background: #FFFDF8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(48, 58, 42, 0.26);
  border-color: var(--gold-bright);
}

.music-toggle .music-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-champagne);
  transition: transform 0.3s ease;
}

.music-toggle.playing .music-icon.spinning {
  animation: spin-music 8s linear infinite;
}

@keyframes spin-music {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
}

.music-bars span {
  width: 2.5px;
  height: 3px;
  background: var(--olive-primary);
  border-radius: 2px;
  transition: height 0.2s ease;
}

.music-toggle.playing .music-bars span:nth-child(1) {
  animation: music-bar-wave 0.8s ease-in-out infinite alternate;
}
.music-toggle.playing .music-bars span:nth-child(2) {
  animation: music-bar-wave 0.8s ease-in-out 0.25s infinite alternate;
}
.music-toggle.playing .music-bars span:nth-child(3) {
  animation: music-bar-wave 0.8s ease-in-out 0.5s infinite alternate;
}

@keyframes music-bar-wave {
  0% { height: 2px; }
  100% { height: 12px; }
}

.music-toggle.muted {
  opacity: 0.65;
  filter: grayscale(0.6);
}

.music-toggle.muted .music-icon.spinning {
  animation: none;
}