/* Mother of Pearl: ivory stationery, champagne details, generous reading space. */
:root {
  --paper: #faf7f1;
  --mint: #f0ece4;
  --blush: #ede5dc;
  --ink: #40382f;
  --jade: #80664e;
  --gold: #9a8164;
  --pearl-line: #d5c7b5;
}
body { background: var(--paper); color: var(--ink); }
.eyebrow { color: #806c56; font-size: 9px; letter-spacing: .23em; }
.eyebrow.light { color: #806c56; }
.script { font-weight: 400; }
.section-paper, .section-mint, .section-blush { padding: 88px 38px; }
.section-heading { margin-bottom: 36px; }
.section-heading h2 { font-size: 48px; line-height: 1.12; margin: 12px 0 16px; }
.section-heading > p:last-child:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
.section-paper:before, .section-mint:before, .section-blush:before { opacity: .12; }
.button { min-height: 48px; border-radius: 3px; letter-spacing: .14em; }
.button-jade:hover { background: #65503e; }
.button-outline { border-color: var(--pearl-line); color: #68533f; background: #faf7f180; box-shadow: none; }
.button-outline:hover { background: #fffaf3; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ========================================================
   COVER: CLOSED ENVELOPE -> OPEN ENVELOPE ANIMATION
   ======================================================== */
.opening {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #D9C9B5 url('assets/pearl-cover-satin.webp') center/cover no-repeat !important;
  transition: opacity .8s ease, transform .8s ease, visibility .8s !important;
  padding: 20px 16px !important;
}

.opening.dismissed {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cover-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 250, 240, 0.45) 0%, rgba(217, 201, 181, 0.55) 70%, rgba(148, 116, 92, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.cover-hanging {
  opacity: .75;
  width: clamp(75px, 12vw, 130px);
  z-index: 6;
}

.opening-content {
  width: 100% !important;
  max-width: 400px !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: auto !important;
  padding: 0 !important;
}

.cover-badge {
  font-size: 8px !important;
  letter-spacing: .24em !important;
  color: #806c56 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.envelope-scene {
  position: relative;
  width: min(88vw, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.envelope-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(41, 37, 33, 0.28));
  cursor: pointer;
  z-index: 10 !important;
}

/* Layer 1: Closed Envelope */
.envelope-closed-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

.envelope-closed {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.envelope-seal {
  display: none !important;
}

@keyframes seal-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* Layer 2: Open Envelope with Letter */
.envelope-open-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: opacity .55s ease .15s, transform .65s cubic-bezier(.22,1,.36,1) .15s;
}

.envelope-open {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1 !important;
}

.letter-card {
  position: absolute;
  top: 13.5%;
  left: 16%;
  width: 68%;
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
  transition: transform .8s cubic-bezier(.22,1,.36,1) .25s, opacity .6s ease .25s;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10 !important;
}

.letter-eyebrow {
  font: 600 clamp(6.5px, 1.8vw, 7.5px) var(--sans);
  letter-spacing: .2em;
  color: #806c56;
  text-transform: uppercase;
  margin: 0 0 2px;
  white-space: nowrap;
}

.letter-couple {
  font-family: var(--script), cursive;
  font-size: clamp(28px, 8vw, 38px);
  color: #2e241c;
  line-height: 1;
  margin: 2px 0 3px;
  font-weight: 400;
}

.letter-couple span {
  font-size: .45em;
  color: #806c56;
  font-family: var(--serif);
  display: inline-block;
  margin: 0 3px;
  vertical-align: middle;
}

.letter-rule {
  width: 36px;
  height: 1px;
  background: #cbbbae;
  margin: 4px auto 5px;
}

.letter-date {
  font: 500 clamp(6.5px, 1.8vw, 7.5px) var(--sans);
  letter-spacing: .15em;
  color: #806c56;
  text-transform: uppercase;
  margin: 0 0 3px;
}

.letter-quote {
  font-family: var(--serif);
  font-size: clamp(9.5px, 2.5vw, 11px);
  font-style: italic;
  color: #55483d;
  line-height: 1.35;
  margin: 0;
  max-width: 95%;
}

/* Floral decoration on envelope */
.cover-rose {
  position: absolute;
  bottom: 4%;
  left: -8%;
  width: 25%;
  max-width: 95px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 6px 12px rgba(41, 37, 33, 0.22));
  pointer-events: none;
  z-index: 6;
  transition: transform 1s ease;
}

/* Cover actions: guest & open button */
.cover-actions {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .4s ease, transform .4s ease;
}

.cover-actions .guest-address {
  margin: 4px 0 14px;
}

.cover-actions .guest-address .eyebrow {
  font-size: 8px;
  letter-spacing: .24em;
  color: #806c56;
  margin-bottom: 3px;
}

.cover-actions .guest-address .guest-name {
  font-family: var(--serif);
  font-size: clamp(16px, 4.5vw, 20px);
  color: #292521;
  font-weight: 500;
  margin: 0;
}

.button-open {
  background: #80664e !important;
  color: #FDFBF7 !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 12px 34px !important;
  font: 600 clamp(8.5px, 2.4vw, 10px) var(--sans) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(128, 102, 78, 0.35) !important;
  transition: transform .2s, background .2s, box-shadow .2s !important;
}

.button-open:hover {
  background: #68523e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(128, 102, 78, 0.45) !important;
}

.skip-opening {
  display: inline-block;
  margin-top: 10px;
  font: 9.5px var(--sans);
  letter-spacing: .12em;
  color: #806c56;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  opacity: .85;
  transition: opacity .2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skip-opening:hover {
  opacity: 1;
}

/* ========================================================
   ACTIVE OPENING ANIMATION STATE
   ======================================================== */
.opening.is-opening .envelope-seal,
html.is-opening .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -85%) scale(1.25) rotate(18deg);
  pointer-events: none;
}

.opening.is-opening .envelope-closed-layer,
html.is-opening .envelope-closed-layer {
  opacity: 0;
  transform: scale(.96) translateY(-8px);
  pointer-events: none;
}

.opening.is-opening .envelope-open-layer,
html.is-opening .envelope-open-layer {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.opening.is-opening .letter-card,
html.is-opening .letter-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
  z-index: 10 !important;
}

.opening.is-opening .cover-rose,
html.is-opening .cover-rose {
  transform: rotate(-4deg) translate(-8px, -4px);
}

.opening.is-opening .cover-actions,
html.is-opening .cover-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

/* Let the hero fill its column; avoid narrow strips and cramped viewport scaling. */
.hero { width: 100% !important; max-width: none !important; aspect-ratio: auto !important; min-height: 720px !important; height: 100svh !important; max-height: 920px !important; padding: clamp(36px, 5vh, 48px) 24px clamp(80px, 12vh, 120px) !important; background-size: 100% 100% !important; }
.hero-top { font-size: 9px !important; padding: 0 !important; margin-bottom: 24px !important; }
.hero > .eyebrow { font-size: 8px !important; max-width: 80%; }
.hero-medallion { width: 78% !important; flex: 1; min-height: 0; aspect-ratio: auto !important; }
.hero-medallion-text { padding-bottom: 25px; }
.hero-medallion-text h2 { font-size: clamp(68px,17vw,88px) !important; line-height: .9 !important; margin: 18px 0 !important; }
.hero-medallion-text h2 em { font-size: .35em !important; margin: 9px 0 !important; }
.hero-medallion-text .eyebrow { font-size: 9px !important; }
.hero-medallion-text p { font-size: 10px !important; line-height: 1.8 !important; }
.hero-bottom { max-width: 88% !important; }
.hero-bottom p { font-size: 15px !important; line-height: 1.65 !important; }
.scroll-cue { margin-top: 18px !important; gap: 8px !important; font-size: 8px !important; }
.quote blockquote { font-size: 26px; line-height: 1.6; margin: 24px -8px; }
.quote-foot, .couple-names p { font-size: 15px; line-height: 1.8; }
.small-symbol { width: 48px; opacity: .8; }
.couple .section-heading { padding-inline: 0; }
.couple-portrait { width: min(275px,100%); height: auto; aspect-ratio: 2 / 3; margin-bottom: 35px; }
.couple-names h3 { font-size: 26px; }
.couple-and { font-size: 40px; margin: 20px auto; }
.couple-knot-ornament { width: 37px; opacity: .7; }
.keepsake { background: #e9e1d6; padding-block: 80px 55px; }
.keepsake-name-card, .keepsake-date { filter: drop-shadow(0 8px 10px #56433126); }
.keepsake-date-copy, .keepsake-date-copy .date-month { color: #66503c; }
.events { padding-bottom: 60px; }
.event-card { width: 100%; padding: 38px 24px; margin: 28px auto; background: #fffdf8; border: 1px solid var(--pearl-line); border-radius: 130px 130px 4px 4px; box-shadow: 0 10px 30px #69553e09; }
.event-card h3 { font-size: 32px; margin: 10px 0; color: #66513e; }
.event-card h4 { font-size: 19px; color: #66513e; }
.event-card .event-time, .event-card > p:not(.eyebrow):not(.event-time) { font-size: 15px; line-height: 1.7; }
.event-card .text-link { font-size: 9px; color: #80664e; border-color: var(--pearl-line); }
.event-number { font-size: 9px; margin: 8px 0; }
.countdown { background: #e9e1d6; padding: 84px 26px; }
.countdown-grid { gap: 12px; margin: 36px 0; }
.countdown-grid strong { font-size: 42px; color: #66513e; }
.countdown-grid span { font-size: 9px; }
.story-timeline { padding-left: 30px; }
.story-timeline article { margin-bottom: 40px; }
.story-timeline h3 { font-size: 22px; margin: 9px 0 12px; }
.story-timeline p { font-size: 15px; line-height: 1.85; }
.story-timeline article > span { color: #80664e; }
.story-timeline article:before { width: 7px; height: 7px; left: -27px; background: #a68b6d; }
.gallery-caption { font-size: 32px; margin: 24px 0; }
.photo-button { max-width: 100%; }
.narrow-copy { font-size: 16px; line-height: 1.8; }
.swatches { gap: 12px; margin-inline: 0; flex-wrap: wrap; }
.swatches > div { flex: 1; min-width: 42px; }
.swatches span { font-size: 11px; text-align: center; }
.swatches i { width: 36px; height: 36px; }
.gift .section-heading p { line-height: 1.8; }
.bank-card { background: #f0e9de; border-color: var(--pearl-line); border-radius: 4px; }
.rsvp { padding-top: 115px; }
.rsvp-seal { width: 52px; left: calc(50% - 26px); top: 35px; }
.demo-note { max-width: 355px; margin: 0 auto 24px; text-align: center; font-size: 12px; line-height: 1.6; color: #786b5b; opacity: 1; }
.elegant-form > label, .elegant-form legend { font-size: 10px; color: #66513e; line-height: 1.6; }
.elegant-form input:not([type=radio]), .elegant-form textarea, .elegant-form select { background: #fffdf8; border: 1px solid #cfc1ae; border-radius: 3px; padding: 13px 14px; min-height: 48px; font-size: 16px; }
.elegant-form input::placeholder, .elegant-form textarea::placeholder { color: #8b8072; }
.radio-label { font-size: 15px; min-height: 44px; }
.closing { background: #e9e1d6; padding-bottom: 90px; }
.closing .eyebrow.light, .replay { color: #6c5843; opacity: 1; }
.page-tail { background: #e9e1d6; }

/* Two independent, reachable controls; the old full-width menu covered the music. */
.menu-toggle { inset: auto 20px 20px auto; width: auto; min-width: 100px; height: 46px; z-index: 99; padding: 0 20px; border-color: #c9b79d; background: #fffdf7f5; box-shadow: 0 4px 20px #4837231a; font-size: 10px; }
.music-toggle { inset: auto auto 20px 20px; width: 46px; height: 46px; z-index: 99; box-shadow: 0 4px 20px #4837231a; background: #80664e; }
.music-toggle[hidden] { display: none; }
.section-menu { inset: 0 0 0 auto; width: min(100%,560px); padding: 32px 24px 86px; gap: 3px; overflow-y: auto; background: #faf7f1fa; }
.section-menu a { font-size: 19px; min-height: 40px; padding: 5px 16px; }
.section-menu a.active { color: #80664e; text-decoration: underline; text-underline-offset: 6px; }
.photo-dialog { background: #443c33; }
.photo-dialog::backdrop { background: #28221cdd; }
.desktop-art { background: linear-gradient(#f7f0e238,#c8b89e55),url('assets/pearl-cover-satin.webp') center/cover; color: #534330; }
.desktop-text { padding: 20vh 30px 0; }
.desktop-text > .script { font-weight: 400; font-size: clamp(80px,9vw,140px); }
.desktop-text .eyebrow { color: #66513e; }
.desktop-bottom { color: #66513e; }
.desktop-fan { width: 40%; bottom: -5%; opacity: .8; }
.desktop-bouquet { width: 24%; right: 2%; bottom: 5%; }
@media(min-width:761px) { .music-toggle { left: auto; right: 142px; } }
@media(max-width:360px) {
  .opening { padding-inline: 14px !important; }
  .letter-card { padding: 12px 10px 14px; }
  .letter-eyebrow { font-size: 6.5px; }
  .letter-couple { font-size: 32px; }
  .cover-actions .guest-address .guest-name { font-size: 15px; }
  .button-open { padding: 10px 24px !important; font-size: 8px !important; }
  .section-paper, .section-mint, .section-blush { padding-inline: 24px; }
  .hero { padding-inline: 24px !important; min-height: 710px !important; }
  .section-heading h2 { font-size: 40px; }
  .countdown-grid { gap: 5px; }
}
@media(prefers-reduced-motion:reduce) {
  .opening.dismissed { transform: none !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
}


/* ========================================================
   QUOTES SECTION: Dark Brown Palette Theme
   ======================================================== */
#quote {
  background: #46382b !important;
  color: #FAF7F1 !important;
  position: relative;
  overflow: hidden;
  padding-block: 80px 70px !important;
}
#quote::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.35' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
#quote .small-symbol {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  margin-bottom: 12px;
}
#quote .eyebrow {
  color: #D9C9B5 !important;
  letter-spacing: .24em;
  opacity: 0.95;
}
#quote blockquote {
  color: #FAF7F1 !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.6;
  margin: 24px -8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#quote .quote-foot {
  color: #D9C9B5 !important;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.9;
}
#quote .ornamental-rule {
  color: #E8D9C5 !important;
  opacity: 0.75;
}

/* ========================================================
   BRIDE & GROOM SECTION: Botanical Floral Arch Background
   ======================================================== */
#couple {
  background-color: #FDF9F0 !important;
  background-image: url('assets/pearl-couple-arch-bg.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  position: relative;
  overflow: hidden;
  padding-top: 85px !important;
  padding-bottom: 80px !important;
}
#couple::before {
  display: none !important;
}
#couple .couple-knot-ornament {
  top: 14px;
  right: 18px;
  opacity: 0.6;
}
#couple .section-heading .eyebrow {
  color: #94745C !important;
  letter-spacing: .22em;
}
#couple .section-heading h2 {
  color: #292521 !important;
}

/* ========================================================
   PHOTO FRAMES STYLING
   ======================================================== */
/* 1. Couple Portrait: Oval photo holder without frame */
.couple-portrait {
  position: relative !important;
  width: min(240px, 72vw) !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  margin: 0 auto 35px !important;
}
.couple-portrait .portrait {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  border-radius: 50% !important;
  box-shadow: 0 12px 32px rgba(64, 56, 47, 0.16) !important;
  filter: sepia(.04) !important;
  display: block !important;
  z-index: 1 !important;
}
.couple-portrait .portrait-frame {
  display: none !important;
}
.couple-portrait .portrait-flower {
  position: absolute !important;
  z-index: 3 !important;
  width: 85px !important;
  right: -16px !important;
  bottom: -6px !important;
}

/* 2. Gallery First Frame: Clam Pearl Portrait */
.gallery-first {
  width: min(265px, 80%) !important;
  aspect-ratio: 768 / 1376 !important;
  height: auto !important;
  margin: 0 auto !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
}
.gallery-first .gallery-photo {
  position: absolute;
  left: 15% !important;
  top: 9.5% !important;
  width: 70% !important;
  height: 82% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  filter: sepia(.04) !important;
  z-index: 1 !important;
}
.gallery-first .gallery-frame {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* 3. Gallery Second Frame: Satin Ribbon with Bow Corners */
.gallery-second {
  width: min(285px, 86%) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  margin: 32px auto 0 !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
}
.gallery-second .gallery-photo {
  position: absolute;
  left: 21% !important;
  top: 9% !important;
  width: 57% !important;
  height: 78% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  filter: sepia(.04) !important;
  z-index: 1 !important;
}
.gallery-second .gallery-frame {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* 4. Keepsake frames refinement */
.keepsake-name-card img {
  filter: drop-shadow(0 4px 14px rgba(41,37,33,.12));
}
.name-card-fill {
  background: #fbf7ee !important;
}
.keepsake-date img {
  filter: drop-shadow(0 4px 14px rgba(41,37,33,.12));
}

/* 5. Closing medallion lace frame */
.closing-medallion {
  max-width: 440px !important;
  width: 95% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 14px 32px rgba(41, 37, 33, 0.16)) !important;
}
.closing-lace {
  filter: drop-shadow(0 6px 18px rgba(41,37,33,.14));
}
.closing-fill {
  border-radius: 50% !important;
  inset: 12% 14% !important;
  background: rgba(253, 251, 247, 0.94) !important;
  box-shadow: 0 10px 28px rgba(41, 37, 33, 0.1) !important;
}


/* ========================================================
   EVENTS SECTION ("Hari bahagia kami"): Satin Drapery Stage
   ======================================================== */
#events {
  background-color: #F1E9DD !important;
  background-image: url('assets/pearl-events-drape-bg.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: 85px !important;
  padding-bottom: 80px !important;
}
#events::before {
  display: none !important;
}
#events .events-peony,
#events .events-tulip {
  display: none !important;
}
#events .section-heading .eyebrow {
  color: #94745C !important;
  letter-spacing: .22em !important;
}
#events .section-heading h2 {
  color: #292521 !important;
}
#events .event-card {
  max-width: 350px !important;
  width: calc(100% - 48px) !important;
  margin: 24px auto !important;
  background: rgba(255, 253, 248, 0.95) !important;
  border: 1px solid rgba(148, 116, 92, 0.28) !important;
  box-shadow: 0 12px 32px rgba(64, 56, 47, 0.09) !important;
}


/* ========================================================
   FLOWER PEARL ORNAMENT REFINEMENTS
   ======================================================== */
.keepsake-pearls {
  position: absolute !important;
  width: 28% !important;
  max-width: 110px !important;
  height: auto !important;
  left: 12% !important;
  top: 10px !important;
  z-index: 4 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.22)) !important;
  pointer-events: none !important;
}
.dress-fan {
  width: 130px !important;
  max-width: 35vw !important;
  height: auto !important;
  margin: 28px auto -15px !important;
  display: block !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.18)) !important;
  rotate: 0deg !important;
}
.pendant-asset {
  filter: drop-shadow(0 6px 12px rgba(41, 37, 33, 0.25)) !important;
}


/* ========================================================
   COUNTDOWN SECTION: Dark Brown Palette Theme
   ======================================================== */
#countdown {
  background: #46382b !important;
  color: #FAF7F1 !important;
  position: relative !important;
  overflow: hidden !important;
  padding-block: 80px 75px !important;
}
#countdown::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.12 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.35' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E") !important;
}
#countdown .section-heading .eyebrow {
  color: #D9C9B5 !important;
  letter-spacing: .24em !important;
  opacity: 0.95 !important;
}
#countdown .section-heading h2 {
  color: #FAF7F1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
#countdown .countdown-grid strong {
  color: #FAF7F1 !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
#countdown .countdown-grid span {
  color: #D9C9B5 !important;
  letter-spacing: .2em !important;
  font-weight: 600 !important;
}
#countdown .countdown-grid i {
  color: #E8D9C5 !important;
  opacity: 0.8 !important;
}
#countdown #countdown-status {
  color: #D9C9B5 !important;
  font-size: 14px !important;
  opacity: 0.95 !important;
}
#countdown #calendar-link {
  border-color: #D9C9B5 !important;
  color: #FAF7F1 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
}
#countdown #calendar-link:hover {
  background: #FAF7F1 !important;
  color: #46382b !important;
}

/* ========================================================
   DRESS CODE SECTION: Dark Brown Palette Theme
   ======================================================== */
#dress {
  background: #46382b !important;
  color: #FAF7F1 !important;
  position: relative !important;
  overflow: hidden !important;
  padding-block: 80px 75px !important;
}
#dress::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.12 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.35' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E") !important;
}
#dress .section-heading .eyebrow {
  color: #D9C9B5 !important;
  letter-spacing: .24em !important;
  opacity: 0.95 !important;
}
#dress .section-heading h2 {
  color: #FAF7F1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
#dress .section-heading p {
  color: #D9C9B5 !important;
  font-size: 14px !important;
}
#dress .narrow-copy {
  color: #FAF7F1 !important;
  opacity: 0.92 !important;
  line-height: 1.7 !important;
}
#dress .swatches span {
  color: #FAF7F1 !important;
  font-weight: 500 !important;
}
#dress .swatches i {
  border: 2px solid rgba(232, 217, 197, 0.5) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
#dress .dress-fan {
  width: 150px !important;
  margin: 24px auto -10px !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 12px rgba(253, 251, 247, 0.2)) !important;
}


/* ========================================================
   SCRATCH REVEAL PHOTO SECTION (Below Hero - Edge-to-Edge Fit)
   ======================================================== */
.reveal-moment,
#reveal-photo {
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.reveal-frame-container {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  filter: none !important;
  display: block !important;
  line-height: 0 !important;
}
.reveal-oval-viewport {
  position: absolute;
  left: 33.3%;
  top: 25.2%;
  width: 33.4%;
  height: 49.3%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: #f7f2e9;
  line-height: normal;
}
.reveal-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 50%;
  display: block;
}
.reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  transition: opacity .7s ease;
}
.reveal-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  display: block;
}

/* ========================================================
   CLOSING / THANK YOU SECTION: Satin Drapery Theme
   ======================================================== */
.closing,
#closing {
  position: relative !important;
  background: #E8DFD3 url('assets/pearl-cover-satin.webp') center top / cover no-repeat !important;
  color: #292521 !important;
  padding: 85px 24px 80px !important;
  overflow: hidden !important;
  text-align: center !important;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 252, 247, 0.42) 0%, rgba(245, 238, 226, 0.22) 65%, rgba(148, 116, 92, 0.16) 100%);
  pointer-events: none;
  z-index: 1;
}

.closing > * {
  position: relative;
  z-index: 2;
}

.closing-copy {
  inset: 16% 16% 14% 16% !important;
}

.closing .closing-copy h2,
.closing-copy h2.script {
  color: #3b2f23 !important;
  font-size: clamp(36px, 8vw, 46px) !important;
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
}

.closing-copy p:not(.eyebrow):not(.script) {
  font-size: clamp(12px, 2.8vw, 13.5px) !important;
  line-height: 1.45 !important;
  margin: 6px auto !important;
  max-width: 230px !important;
}

.closing .closing-copy .eyebrow {
  color: #8a6c54 !important;
  letter-spacing: .24em !important;
}

.closing .closing-names,
.closing-names {
  color: #3b2f23 !important;
  font-size: clamp(32px, 7.5vw, 40px) !important;
  margin-top: 4px !important;
  line-height: 1.1 !important;
}

.closing-fan,
.closing-fan.visible {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  width: 38% !important;
  right: 2% !important;
  bottom: 2% !important;
  z-index: 5 !important;
  rotate: 0deg !important;
  transform: rotate(0deg) !important;
  filter: drop-shadow(0 8px 16px rgba(41, 37, 33, 0.22)) !important;
}

.closing .closing-date {
  color: #4a3b2c !important;
  font-weight: 500 !important;
}

.closing .eyebrow.light {
  color: #7d6854 !important;
  letter-spacing: .2em !important;
}

.closing .replay {
  color: #80664e !important;
  border-bottom: 1px solid rgba(128, 102, 78, 0.45) !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  transition: color .2s, border-color .2s !important;
}

.closing .replay:hover {
  color: #554332 !important;
  border-color: #554332 !important;
}

@media (max-width: 380px) {
  .closing-medallion {
    max-width: 350px !important;
    width: 98% !important;
  }
  .closing-copy {
    inset: 14% 14% 12% 14% !important;
  }
  .closing-copy p:not(.eyebrow):not(.script) {
    font-size: 11.5px !important;
    max-width: 200px !important;
  }
  .closing-fan,
  .closing-fan.visible {
    width: 36% !important;
    right: 2% !important;
    bottom: 2% !important;
  }
}

.page-tail {
  background: #E8DFD3 !important;
  height: 20px !important;
}

/* ========================================================
   GLOBAL TYPOGRAPHY: Allura (Script/Accent) & Viaoda Libre / Cormorant (Serif)
   ======================================================== */
:root {
  --script: 'Allura', 'Tangerine', cursive !important;
  --serif: 'Viaoda Libre', 'Cormorant Garamond', Georgia, serif !important;
  --sans: Arial, 'Cormorant Garamond', sans-serif !important;
}

body, main {
  font-family: var(--serif) !important;
}

p, blockquote {
  font-family: var(--serif) !important;
}

.eyebrow, button, input, textarea, select, label, .text-link, .date-num, .date-month, .date-year, .event-number {
  font-family: var(--sans) !important;
}

.script, h1.script, h2.script, h3.script, .closing-names {
  font-family: var(--script) !important;
  font-weight: 400 !important;
}

/* ========================================================
   REFINED ALLURA SCALING & HARMONIOUS SPACING
   ======================================================== */

/* 1. Cover / Opening Card */
.letter-couple.script {
  font-size: clamp(28px, 6.5vw, 36px) !important;
  line-height: 1.05 !important;
  margin: 6px 0 !important;
  text-align: center !important;
}
.letter-couple.script span {
  font-size: 0.8em !important;
}
.letter-eyebrow,
.letter-date,
.letter-quote {
  text-align: center !important;
}

/* 2. Desktop Art Panel */
.desktop-text > .script {
  font-size: clamp(52px, 6vw, 76px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

/* 3. Hero Medallion & Bottom Copy */
.hero {
  padding: clamp(36px, 5vh, 46px) 24px clamp(60px, 9vh, 85px) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.hero-medallion {
  width: min(84%, 380px) !important;
  margin: clamp(65px, 12.5vh, 105px) auto 0 !important;
  text-align: center !important;
}
.hero-medallion-text {
  text-align: center !important;
  padding: 0 !important;
}
.hero-medallion-text .eyebrow {
  letter-spacing: .24em !important;
  font-size: 8.5px !important;
  color: #8c735d !important;
}
.hero-medallion-text h2.script {
  font-size: clamp(42px, 10vw, 54px) !important;
  line-height: 1.05 !important;
  margin: 8px 0 !important;
  color: #292521 !important;
  text-align: center !important;
}
.hero-medallion-text h2 em {
  font-family: var(--script) !important;
  font-style: normal !important;
  font-size: 0.55em !important;
  margin: 0 4px !important;
  display: inline-block !important;
}
.hero-medallion-text .fine-rule {
  width: 44px !important;
  height: 1px !important;
  margin: 10px auto !important;
  background: #bfa88f !important;
  opacity: .5 !important;
}
.hero-medallion-text p {
  font-family: var(--serif) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  color: #8c735d !important;
  text-align: center !important;
  margin-top: 6px !important;
}
.hero-bottom {
  max-width: 330px !important;
  margin: 0 auto 40px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}
.hero-bottom p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #554433 !important;
  text-align: center !important;
}
.scroll-cue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  font-family: var(--sans) !important;
  font-size: 8.5px !important;
  letter-spacing: .18em !important;
  color: #8c735d !important;
  text-align: center !important;
}

/* 4. Section Headings (Allura Scaled Down) */
.section-heading {
  text-align: center !important;
}
.section-heading h2.script {
  font-size: clamp(26px, 5.5vw, 34px) !important;
  line-height: 1.15 !important;
  margin: 6px 0 10px !important;
  text-align: center !important;
}
.section-heading .eyebrow {
  text-align: center !important;
}
.section-heading > p:last-child {
  font-family: var(--serif) !important;
  text-align: center !important;
}

/* 5. Quote Section */
#quote {
  text-align: center !important;
}
#quote blockquote {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(18px, 4.2vw, 23px) !important;
  line-height: 1.65 !important;
  margin: 18px auto !important;
  max-width: 340px !important;
  text-align: center !important;
}
#quote .quote-foot {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
#quote .ornamental-rule {
  text-align: center !important;
}

/* 6. Couple Section */
.couple {
  text-align: center !important;
  padding-bottom: 75px !important;
}
.couple-knot-ornament {
  right: 14px !important;
  top: 14px !important;
  width: 44px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.couple-names {
  margin-top: 18px !important;
  text-align: center !important;
}
.couple-names h3 {
  font-family: var(--serif) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  color: #3b2f23 !important;
  margin: 4px 0 2px !important;
  text-align: center !important;
}
.couple-names p {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #554433 !important;
  margin: 2px auto !important;
  text-align: center !important;
}
.couple-and {
  font-family: var(--script) !important;
  font-size: 26px !important;
  color: #8c735d !important;
  margin: 6px auto !important;
  text-align: center !important;
  display: block !important;
}

/* 7. Keepsake Section (Clearance for Name Card & Date) */
.keepsake {
  text-align: center !important;
}
.keepsake-pearls {
  position: absolute !important;
  width: 26% !important;
  max-width: 105px !important;
  height: auto !important;
  left: 7% !important;
  top: 10px !important;
  z-index: 2 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.24)) !important;
  rotate: -6deg !important;
  pointer-events: none !important;
}
.keepsake-name-card {
  aspect-ratio: 1 / 1 !important;
  width: 48% !important;
  left: 8% !important;
  top: 75px !important;
  z-index: 3 !important;
}
.keepsake-name-card .name-card-fill {
  inset: 17% 23% 16% 23% !important;
  border-radius: 50% !important;
  background: #faf6ee !important;
}
.keepsake-name-card .name-card-copy {
  inset: 24% 24% 24% 24% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.name-card-copy .nc-name {
  font-family: var(--script) !important;
  font-size: 18px !important;
  color: #3b2f23 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.name-card-copy .nc-amp {
  font-family: var(--script) !important;
  font-size: 14px !important;
  color: #8c735d !important;
  line-height: 1 !important;
  margin: 1px 0 !important;
  text-align: center !important;
}
.keepsake-fan {
  position: absolute !important;
  bottom: 12px !important;
  left: 6% !important;
  top: auto !important;
  width: 32% !important;
  z-index: 4 !important;
  transform: rotate(-10deg) !important;
  filter: drop-shadow(0 8px 14px rgba(41, 37, 33, 0.28)) !important;
}
.keepsake-date-copy {
  text-align: center !important;
}
.keepsake-date-copy .date-num {
  font-size: 20px !important;
}
.keepsake-date-copy .date-month {
  font-size: 13px !important;
}
.keepsake-date-copy .date-year {
  font-size: 12px !important;
}
.polaroid span {
  font-family: var(--script) !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* 8. Events Section */
#events {
  padding-top: 135px !important;
  padding-bottom: 75px !important;
  text-align: center !important;
}
#events .section-heading {
  margin-bottom: 24px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}
.event-card {
  width: 92% !important;
  max-width: 350px !important;
  padding: 34px 22px !important;
  margin: 22px auto !important;
  background: #fffdf8 !important;
  border: 1px solid var(--pearl-line) !important;
  border-radius: 130px 130px 4px 4px !important;
  box-shadow: 0 10px 30px #69553e09 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}
.event-card h3 {
  font-family: var(--serif) !important;
  font-size: 24px !important;
  margin: 8px 0 6px !important;
  color: #554130 !important;
  text-align: center !important;
}
.event-card h4 {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  color: #554130 !important;
  margin: 6px 0 4px !important;
  text-align: center !important;
}
.event-card .event-time {
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  letter-spacing: .08em !important;
  color: #7d6854 !important;
  text-align: center !important;
}
.event-card p:not(.eyebrow):not(.event-time) {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #554433 !important;
  text-align: center !important;
}
.event-card .text-link {
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  color: #80664e !important;
  border-bottom: 1px solid rgba(128, 102, 78, 0.45) !important;
  display: inline-block !important;
  margin-top: 14px !important;
  text-align: center !important;
}
.events-peony,
.events-tulip {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 9. Countdown Section */
.countdown {
  text-align: center !important;
  padding: 85px 24px 75px !important;
}
.countdown .hanging-fixture {
  top: -45px !important;
}
.countdown .section-heading {
  margin-top: 10px !important;
  text-align: center !important;
}
.countdown-grid {
  justify-content: center !important;
}
.countdown-grid strong {
  font-family: var(--serif) !important;
}
.countdown-grid span {
  font-family: var(--sans) !important;
}
#countdown-status {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  text-align: center !important;
  margin-top: 16px !important;
}
#calendar-link {
  display: inline-flex !important;
  margin: 18px auto 0 !important;
  font-family: var(--sans) !important;
}

/* 10. Story Section (Fully Centered Chapters) */
.story {
  text-align: center !important;
  padding-bottom: 85px !important;
}
.story .section-heading {
  text-align: center !important;
}
.story-timeline {
  max-width: 340px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  text-align: center !important;
}
.story-timeline:before {
  display: none !important;
}
.story-timeline article {
  position: relative !important;
  margin-bottom: 34px !important;
  text-align: center !important;
}
.story-timeline article:before {
  display: none !important;
}
.story-timeline article > span {
  display: inline-block !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  color: #a45243 !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}
.story-timeline h3 {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #3b2f23 !important;
  margin: 3px 0 8px !important;
  text-align: center !important;
}
.story-timeline p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #554433 !important;
  text-align: center !important;
}
.story-peony {
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.55 !important;
}

/* 11. Gallery Section */
.gallery {
  text-align: center !important;
}
.gallery-caption {
  font-family: var(--script) !important;
  font-size: 22px !important;
  margin: 16px auto !important;
  text-align: center !important;
  color: #94745C !important;
}

/* 12. Dress Code Section */
.dress {
  text-align: center !important;
}
.dress .narrow-copy {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #554433 !important;
  text-align: center !important;
  max-width: 320px !important;
  margin: 0 auto 20px !important;
}
.swatches {
  justify-content: center !important;
  margin: 20px auto 10px !important;
}
.swatches span {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  color: #554433 !important;
}
.dress-fan {
  display: block !important;
  margin: 24px auto 0 !important;
  width: 160px !important;
  rotate: 0deg !important;
}

/* 13. Gift Section */
.gift {
  text-align: center !important;
}
.gift .section-heading p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
.bank-card {
  text-align: center !important;
  max-width: 340px !important;
  margin: 18px auto !important;
}
.bank-card h3 {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  letter-spacing: .12em !important;
  color: #3b2f23 !important;
  text-align: center !important;
}
.bank-card p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  color: #554433 !important;
  text-align: center !important;
}

/* 14. RSVP Section */
.rsvp {
  text-align: center !important;
  padding-top: 105px !important;
}
.rsvp-seal {
  position: absolute !important;
  top: 25px !important;
  left: calc(50% - 28px) !important;
  width: 56px !important;
}
.rsvp .section-heading p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  text-align: center !important;
}
.demo-note {
  font-family: var(--serif) !important;
  font-size: 11.5px !important;
  text-align: center !important;
}
.elegant-form {
  text-align: center !important;
  max-width: 340px !important;
  margin: 0 auto !important;
}
.elegant-form > label,
.elegant-form legend {
  font-family: var(--sans) !important;
  text-align: center !important;
  letter-spacing: .14em !important;
}
.elegant-form input,
.elegant-form textarea,
.elegant-form select {
  font-family: var(--serif) !important;
  text-align: center !important;
  font-size: 14.5px !important;
}
.radio-label {
  font-family: var(--serif) !important;
  justify-content: center !important;
  font-size: 13.5px !important;
}

/* 15. Wishes Section */
.wishes {
  text-align: center !important;
}
.wishes .section-heading p {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  text-align: center !important;
}
.empty-wishes {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  font-style: italic !important;
  text-align: center !important;
}

/* 16. Closing Section */
.closing,
#closing {
  text-align: center !important;
}
.closing-copy {
  inset: 16% 16% 14% 16% !important;
  text-align: center !important;
}
.closing .closing-copy h2.script,
.closing-copy h2.script {
  font-family: var(--script) !important;
  font-size: clamp(28px, 6vw, 34px) !important;
  margin-bottom: 4px !important;
  color: #3b2f23 !important;
  text-align: center !important;
}
.closing-copy p:not(.eyebrow):not(.script) {
  font-family: var(--serif) !important;
  font-size: clamp(12px, 2.8vw, 13px) !important;
  line-height: 1.45 !important;
  margin: 5px auto !important;
  max-width: 230px !important;
  text-align: center !important;
  color: #4a3b2c !important;
}
.closing .closing-copy .eyebrow {
  font-family: var(--sans) !important;
  font-size: 7.5px !important;
  letter-spacing: .24em !important;
  color: #8a6c54 !important;
  text-align: center !important;
}
.closing .closing-names,
.closing-names {
  font-family: var(--script) !important;
  font-size: clamp(26px, 5.5vw, 32px) !important;
  margin-top: 4px !important;
  color: #3b2f23 !important;
  text-align: center !important;
}
.closing .closing-date {
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  letter-spacing: .22em !important;
  color: #4a3b2c !important;
  text-align: center !important;
  margin-top: 16px !important;
}
.closing .eyebrow.light {
  font-family: var(--sans) !important;
  font-size: 8px !important;
  letter-spacing: .2em !important;
  color: #7d6854 !important;
  text-align: center !important;
}
.closing .replay {
  font-family: var(--sans) !important;
  font-size: 8.5px !important;
  letter-spacing: .16em !important;
  color: #80664e !important;
  text-align: center !important;
}

/* ========================================================
   ORNAMENTS IN EMPTY SPACES (Story, Gallery, Gift, Wishes)
   ======================================================== */
.story-flower-top-left {
  position: absolute !important;
  width: clamp(75px, 18vw, 105px) !important;
  top: -10px !important;
  left: -15px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.88 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.12)) !important;
  transform: rotate(15deg) !important;
}

.gallery-flower-pearl,
.gallery-snail-pearl {
  position: absolute !important;
  width: clamp(65px, 16vw, 90px) !important;
  top: 15px !important;
  right: -8px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 8px 18px rgba(41, 37, 33, 0.15)) !important;
  transform: rotate(-10deg) !important;
}

.gallery-flower-bottom {
  position: absolute !important;
  width: clamp(70px, 17vw, 95px) !important;
  bottom: -15px !important;
  left: -10px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.12)) !important;
  transform: rotate(25deg) !important;
}

.gift-flower-top {
  position: absolute !important;
  width: clamp(65px, 16vw, 85px) !important;
  top: 12px !important;
  left: -10px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.12)) !important;
  transform: rotate(-20deg) !important;
}

.gift-bouquet {
  position: absolute !important;
  width: clamp(85px, 22vw, 115px) !important;
  bottom: -20px !important;
  right: -10px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.88 !important;
  filter: drop-shadow(0 8px 20px rgba(41, 37, 33, 0.16)) !important;
  transform: rotate(-15deg) !important;
}

.wishes-flower-top {
  position: absolute !important;
  width: clamp(65px, 16vw, 90px) !important;
  top: 15px !important;
  left: -12px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.12)) !important;
  transform: rotate(20deg) !important;
}

.wishes-snail-bottom {
  position: absolute !important;
  width: clamp(65px, 16vw, 90px) !important;
  bottom: 10px !important;
  right: -8px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.88 !important;
  filter: drop-shadow(0 8px 18px rgba(41, 37, 33, 0.15)) !important;
  transform: rotate(15deg) !important;
}

/* ========================================================
   KEEPSAKE SECTION REDESIGN (Matching User Reference)
   ======================================================== */
.keepsake {
  padding: clamp(60px, 10vh, 85px) 15px clamp(60px, 10vh, 85px) !important;
  position: relative !important;
  text-align: center !important;
  background: var(--paper) !important;
  overflow: hidden !important;
}

.keepsake-collage {
  position: relative !important;
  width: 100% !important;
  max-width: 380px !important;
  height: 470px !important;
  margin: 15px auto 20px !important;
}

/* 1. Top center horizontal envelope */
.keepsake-envelope {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 53% !important;
  max-width: 205px !important;
  z-index: 1 !important;
  filter: drop-shadow(0 8px 16px rgba(41, 37, 33, 0.16)) !important;
}
.keepsake-envelope img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 2. Love pearl strand draping over left frame */
.keepsake-love-pearl {
  position: absolute !important;
  top: 18px !important;
  left: 17% !important;
  width: 32% !important;
  max-width: 125px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 10px rgba(41, 37, 33, 0.15)) !important;
}

/* 3. Left ornate oval frame with Ariana & Johan */
.keepsake-name-card {
  position: absolute !important;
  top: 85px !important;
  left: 1% !important;
  width: 47% !important;
  max-width: 180px !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 2 !important;
  filter: drop-shadow(0 10px 20px rgba(41, 37, 33, 0.16)) !important;
  transform: rotate(-2deg) !important;
}
.keepsake-name-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.keepsake-name-card .name-card-fill {
  position: absolute !important;
  inset: 18% 22% 18% 22% !important;
  border-radius: 50% !important;
  background: #faf7f1 !important;
  z-index: 1 !important;
}
.keepsake-name-card .name-card-copy {
  position: absolute !important;
  inset: 20% 24% 20% 24% !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.name-card-copy .nc-name {
  font-family: 'Allura', cursive !important;
  font-size: 21px !important;
  line-height: 1.08 !important;
  color: #292521 !important;
}
.name-card-copy .nc-amp {
  font-family: 'Allura', cursive !important;
  font-size: 16px !important;
  color: #94745C !important;
  line-height: 1 !important;
  margin: 1px 0 !important;
}

/* 4. Center vertical wedding photo */
.keepsake-photo {
  position: absolute !important;
  top: 128px !important;
  left: 33.5% !important;
  width: 35% !important;
  max-width: 135px !important;
  aspect-ratio: 3 / 4 !important;
  z-index: 3 !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  box-shadow: 0 10px 24px rgba(41, 37, 33, 0.22) !important;
  background: #f0eae1 !important;
}
.keepsake-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
}

/* 5. Right oval lace badge with Date */
.keepsake-date {
  position: absolute !important;
  top: 80px !important;
  right: 1% !important;
  width: 40% !important;
  max-width: 155px !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 2 !important;
  filter: drop-shadow(0 10px 20px rgba(41, 37, 33, 0.14)) !important;
  transform: rotate(5deg) !important;
}
.keepsake-date img.lace-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.keepsake-date-copy {
  position: absolute !important;
  inset: 18% 20% 18% 20% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  font-family: 'Allura', cursive !important;
  color: #4a3b2c !important;
  line-height: 1 !important;
}
.keepsake-date-copy .date-num {
  font-size: 27px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #3d3125 !important;
}
.keepsake-date-copy .date-month {
  font-size: 16px !important;
  line-height: 1.1 !important;
  margin: 2px 0 !important;
  color: #5c4a38 !important;
}
.keepsake-date-copy .date-year {
  font-size: 13.5px !important;
  letter-spacing: 0.05em !important;
  color: #8c735d !important;
}

/* 6. Pink flower on bottom-right of lace badge */
.keepsake-pink-flower {
  position: absolute !important;
  bottom: 8px !important;
  right: -8px !important;
  width: 38% !important;
  max-width: 60px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 6px 12px rgba(41, 37, 33, 0.16)) !important;
  transform: rotate(-10deg) !important;
}

/* 7. Bouquet on bottom-left of photo */
.keepsake-fan {
  position: absolute !important;
  bottom: 8px !important;
  left: 14% !important;
  width: 37% !important;
  max-width: 145px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 10px 20px rgba(41, 37, 33, 0.18)) !important;
}
.keepsake-fan img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 8. Mother-of-pearl flower brooch on bottom-right of photo */
.keepsake-pearl-flower {
  position: absolute !important;
  bottom: 50px !important;
  right: 21% !important;
  width: 17% !important;
  max-width: 68px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 6px 14px rgba(41, 37, 33, 0.15)) !important;
  transform: rotate(8deg) !important;
}


/* Reference placement uses one proportional canvas so overlaps stay attached
   on narrow phones and in the desktop invitation column. Asset padding is
   included in these coordinates; the photo remains behind the right badge. */
#keepsake .keepsake-collage {
  max-width: 380px !important;
  height: auto !important;
  aspect-ratio: 353 / 430;
  margin: 20px auto 0 !important;
  container-type: inline-size;
}
#keepsake .keepsake-item {
  max-width: none !important;
  rotate: none !important;
  transform: none !important;
  filter: drop-shadow(0 3px 5px #40382f12) !important;
}
#keepsake .keepsake-envelope {
  left: 38.5% !important; top: 8.6% !important;
  width: 40% !important; z-index: 1 !important;
}
#keepsake .keepsake-love-pearl {
  left: 25% !important; top: 14% !important;
  width: 22% !important; z-index: 4 !important;
}
#keepsake .keepsake-name-card {
  left: 4.2% !important; top: 26.5% !important;
  width: 45.3% !important; aspect-ratio: 1 !important;
  z-index: 2 !important;
}
#keepsake .name-card-copy { inset: 22% 27% 20% 20% !important; }
#keepsake .keepsake-name-card > img,
#keepsake .keepsake-date > img { filter: none !important; }
#keepsake .name-card-copy .nc-name { font-size: clamp(16px,5.5cqw,21px) !important; }
#keepsake .keepsake-photo {
  left: 40.2% !important; top: 40% !important;
  width: 29% !important; aspect-ratio: 102 / 154 !important;
  z-index: 3 !important; border-radius: 0 !important;
  box-shadow: 0 3px 8px #40382f14 !important;
}
#keepsake .keepsake-date {
  left: 56% !important; right: auto !important; top: 21% !important;
  width: 45.3% !important; aspect-ratio: 1 !important;
  z-index: 4 !important;
}
#keepsake .keepsake-date-copy { inset: 23% 26% !important; }
#keepsake .keepsake-pink-flower {
  width: 38% !important; max-width: none !important;
  right: 8% !important; bottom: -5% !important;
  transform: none !important;
}
#keepsake .keepsake-fan {
  left: 22% !important; top: 63% !important; bottom: auto !important;
  width: 36% !important; z-index: 5 !important;
}
#keepsake .keepsake-pearl-flower {
  left: 64% !important; right: auto !important; top: 68% !important;
  bottom: auto !important; width: 15% !important; z-index: 5 !important;
}

/* ========================================================
   HARI BAHAGIA KAMI - ARCHED LACE EVENT CARDS
   ======================================================== */
#events .event-card,
.event-card {
  width: 88% !important;
  max-width: 345px !important;
  padding: 50px 26px 42px !important;
  margin: 28px auto !important;
  background: url('assets/event-card-bg.webp?v=lace2028') no-repeat center center / 100% 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 22px rgba(64, 56, 47, 0.12)) !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
}