/* CSS bundle rebuilt after phase51-hotfix2b. Source: css/sections/*.css */

/* ---- sections/01-foundation-layout.css ---- */
/* Optimized section: 01-foundation-layout.css. Generated from safe CSS prune. */
:root { --paper: #f8e9e5;
  --paper-soft: #fff8f6;
  --paper-deep: #ead4cd;
  --ink: #372521;
  --muted: #7c655d;
  --brown: #916855;
  --rose: #d97183;
  --rose-deep: #b84f63;
  --gold: #b58b48;
  --shadow: 0 18px 48px rgba(44, 31, 27, 0.18);
  --safe-bottom: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.9), transparent 24rem),
    radial-gradient(circle at 100% 100%, rgba(255,219,220,.58), transparent 24rem),
    linear-gradient(135deg, #f3f4f6, #ecd9d3 50%, #eef1f4);
  font-family: "Cormorant Garamond", Georgia, serif; }
html[data-theme="dark"] body { color: #f9ece8;
  background:
    radial-gradient(circle at 8% 0%, rgba(122,74,82,.30), transparent 24rem),
    radial-gradient(circle at 100% 100%, rgba(103,77,47,.22), transparent 24rem),
    linear-gradient(135deg, #171313, #2a1c1d 50%, #181415); }
html[data-theme="dark"] .invite { background:
    linear-gradient(rgba(44,31,30,.94), rgba(44,31,30,.94)),
    repeating-linear-gradient(90deg, rgba(255,230,222,.035) 0 1px, transparent 1px 9px);
  border-color: rgba(255,232,222,.16); }
html[data-theme="dark"] .paper-section, html[data-theme="dark"] .sweet-invitation-section, html[data-theme="dark"] .rsvp-card, html[data-theme="dark"] .gift-panel { background: #2f2322 !important;
  color: #f8ebe6 !important; }
html[data-theme="dark"] .rsvp-field input, html[data-theme="dark"] .rsvp-field select, html[data-theme="dark"] .rsvp-field textarea, html[data-theme="dark"] .calendar-action, html[data-theme="dark"] .music-panel { background: rgba(255,255,255,.08) !important;
  color: #f8ebe6 !important;
  border-color: rgba(255,236,229,.16) !important; }
.theme-toggle { position: sticky !important;
  top: 104px !important;
  left: calc(100% - 64px) !important;
  z-index: 12 !important;
  width: 52px !important;
  min-height: 30px !important;
  margin: 6px 10px 0 auto !important;
  border: 1px solid rgba(151,103,85,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,248,246,.86) !important;
  color: #6a5147 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.phone-shell { min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 12px; }
.invite { position: relative;
  width: min(430px, 100%);
  height: min(932px, calc(100vh - 56px));
  min-height: 680px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(rgba(248,233,229,.94), rgba(248,233,229,.94)),
    repeating-linear-gradient(90deg, rgba(117,81,69,.035) 0 1px, transparent 1px 9px);
  border-radius: 24px;
  border: 1px solid rgba(97, 62, 51, .16);
  box-shadow: var(--shadow);
  scrollbar-width: none;
  isolation: isolate; }
.invite::-webkit-scrollbar { width: 0; }
.invite::before { content: "Wedding Dress";
  position: sticky;
  top: 58%;
  left: calc(100% - 19px);
  z-index: 8;
  writing-mode: vertical-rl;
  display: block;
  width: 18px;
  height: 0;
  color: rgba(90,68,62,.62);
  font: 600 10px/1 "Montserrat", sans-serif;
  letter-spacing: .06em;
  pointer-events: none; }
.light-video { position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none; }
.petal-layer { position: sticky; top: 0; z-index: 6; height: 0; pointer-events: none; }
.petal { position: absolute;
  top: -22px;
  width: 9px;
  height: 13px;
  border-radius: 70% 30% 70% 30%;
  background: rgba(255, 196, 204, .84);
  animation: petal-fall linear forwards; }
.section { position: relative;
  min-height: auto; /* Thay đổi từ 100vh thành auto để nội dung đi liền như ảnh mẫu */
  padding: 45px 24px 35px; /* Tối ưu lại khoảng cách padding trên mobile */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }
.paper-section::before, .paper-section::after { content: none !important;
  display: none !important; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- sections/02-intro-cover-base.css ---- */
/* Optimized section: 02-intro-cover-base.css. Generated from safe CSS prune. */
.intro-screen { position: sticky;
  inset: 0;
  top: 0;
  z-index: 30;
  height: 100%;
  min-height: 100%;
  display: none;
  overflow: hidden;
  color: #fff;
  background: #1b1513; }
.intro-screen.is-active { display: block; }
.intro-screen.is-hiding { animation: intro-out .75s ease forwards; }
.intro-slideshow { position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1b1513; }
.intro-photo, .hero-photo { position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover; }
.intro-photo { will-change: opacity, transform, clip-path;
  transform: scale(1.08); }
.intro-photo-a { opacity: 1;
  animation: intro-photo-a 6.9s ease-in-out forwards; }
.intro-photo-b { opacity: 0;
  clip-path: inset(0 0 0 100%);
  animation: intro-photo-b 6.9s ease-in-out forwards; }
.intro-wipe-line { position: absolute;
  top: 0;
  bottom: 0;
  left: -12%;
  z-index: 1;
  width: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 22px rgba(255,255,255,.82), 0 0 54px rgba(255,255,255,.46);
  opacity: 0;
  transform: translateX(0) skewX(-5deg);
  animation: intro-wipe-line 6.9s ease-in-out forwards; }
.intro-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28) 45%, rgba(0,0,0,.5)); }
.skip-btn { position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 8px 15px;
  color: #6a544d;
  background: rgba(255,255,255,.88);
  border: 0;
  border-radius: 999px;
  font: 700 11px/1 "Montserrat", sans-serif;
  letter-spacing: .05em;
  cursor: pointer; }
.intro-copy { position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  z-index: 2;
  min-height: 210px;
  color: #fff;
  text-align: center;
  pointer-events: none; }
.intro-title { position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 .18em;
  padding: 0 18px;
  font: 600 clamp(55px, 14vw, 72px)/.82 "Cormorant Garamond", serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 5px 24px rgba(0,0,0,.28); }
.intro-title .word { display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 42px, 0) scale(.96);
  will-change: transform, opacity, filter; }
.intro-title-a { animation: intro-title-a-layer 6.9s ease both; }
.intro-title-a .word-love { animation: intro-word-up 1.15s cubic-bezier(.19,1,.22,1) .18s both; }
.intro-title-a .word-of { animation: intro-word-up 1.15s cubic-bezier(.19,1,.22,1) .38s both; }
.intro-title-a .word-life { flex-basis: 100%; animation: intro-word-up 1.15s cubic-bezier(.19,1,.22,1) .58s both; }
.intro-title-b { opacity: 0;
  transform: translateX(48px);
  animation: intro-title-b-layer 6.9s cubic-bezier(.19,1,.22,1) both; }
.intro-title-b .word-blessing { flex-basis: 100%; animation: intro-word-slide-b 1.05s cubic-bezier(.19,1,.22,1) 3.25s both; }
.intro-title-b .word-begins { animation: intro-word-slide-b 1.05s cubic-bezier(.19,1,.22,1) 3.48s both; }
.title-line { display: inline-block;
  width: 88px;
  height: 3px;
  margin-inline: .18em;
  background: currentColor;
  border-radius: 99px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center; }
.title-line-a { animation: intro-line-a 6.9s ease both; }
.title-line-b { order: -1; animation: intro-line-b 6.9s ease both; }
.intro-labels { position: absolute;
  left: 54px;
  right: 54px;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 20px; }
.intro-labels span { display: inline-block;
  font: 700 12px/1 "Montserrat", sans-serif;
  letter-spacing: .22em;
  opacity: 0;
  transform: translateY(18px);
  animation: intro-label-in 6.9s ease both; }
.intro-labels span:nth-child(2) { animation-delay: .12s; }
.cover-section { color: #fff7ec;
  overflow: hidden;
  min-height: 90vh;
  min-height: 90svh; }
.cover-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(35,23,20,.34), rgba(35,23,20,.06) 42%, rgba(35,23,20,.55)); }
.cover-content { position: relative; z-index: 3; width: 100%; padding-top: 22vh; text-shadow: 0 3px 24px rgba(0,0,0,.28); }
.tiny-date { display: flex; justify-content: space-between; align-items: center; width: min(300px, 100%); margin: 0 auto 12px; font: 600 13px/1 "Montserrat", sans-serif; letter-spacing: .08em; }
.tiny-date i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.8); }
.cover-content h2 { margin: 0; color: #e9cd78; font: 700 72px/.83 "Cormorant Garamond", serif; letter-spacing: -.04em; text-align: right; }
.cover-subtitle { margin: 14px 0 0; text-transform: uppercase; font: 600 12px/1 "Montserrat", sans-serif; letter-spacing: .18em; }
.section-label { margin: 0 0 22px; text-transform: uppercase; color: var(--brown); font: 700 13px/1 "Montserrat", sans-serif; letter-spacing: .12em; }
.invitation-section h2 { margin: 0 0 18px; text-transform: uppercase; font: 700 16px/1.2 "Cormorant Garamond", serif; letter-spacing: .06em; }
.family-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-bottom: 28px; }
.family-list article { min-width: 0; }
.family-list h3 { margin: 0 0 10px; text-transform: uppercase; font: 700 14px/1 "Cormorant Garamond", serif; letter-spacing: .06em; }
.family-list strong { display: block; white-space: pre-line; font: 700 12px/1.55 "Cormorant Garamond", serif; }
.family-list span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.couple-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
.photo-card { margin: 0; padding: 10px 10px 8px; background: rgba(255,255,255,.36); border-radius: 10px; box-shadow: 0 10px 22px rgba(70,47,39,.12); }
.photo-card img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 7px; }
.photo-card { position: relative; overflow: hidden; }
.photo-role-script { position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  width: 100%;
  margin: 2px 0 10px;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  pointer-events: none;
  color: #c4a06e;
  font: 400 clamp(28px, 7.8vw, 39px)/.95 "Great Vibes", "Dancing Script", cursive;
  letter-spacing: .01em;
  text-shadow:
    0 1px 0 rgba(255, 248, 232, .68),
    0 4px 10px rgba(130, 92, 44, .15); }
.photo-role-script span { display: inline-block;
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 22px, 0) scale(.94); }
.photo-role-script span { animation: photo-role-letter-up .72s cubic-bezier(.19,1,.22,1) calc(.18s + var(--i) * .07s) both; }
.family-section.active .photo-role-script span { animation-name: photo-role-letter-up; }
@keyframes photo-role-letter-up { 0% { opacity: 0; filter: blur(5px); transform: translate3d(0, 22px, 0) scale(.94); }
  72% { opacity: 1; filter: blur(0); transform: translate3d(0, -2px, 0) scale(1.02); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
.photo-card figcaption { margin: 12px 0 2px; color: var(--brown); font: 400 25px/1 "Great Vibes", cursive; }
.left-card { transform: rotate(-1.5deg); }
.right-card { transform: translateY(14px) rotate(1.5deg); }
.name-signature { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; color: var(--brown); font: 400 31px/1 "Great Vibes", cursive; }
.name-signature i { color: var(--gold); font: 16px/1 serif; }
.signature-word { margin: 4px 0 18px; color: var(--brown); font: 400 54px/.86 "Great Vibes", cursive; }
.signature-word small { font-size: 20px; font-family: "Cormorant Garamond", serif; }
.gallery-feature { width: 100%; margin-bottom: 14px; overflow: hidden; border-radius: 4px; box-shadow: 0 8px 20px rgba(72,49,42,.15); }
.gallery-feature img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.masonry-gallery { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 8px; }
.masonry-gallery img { width: 100%; height: 100%; min-height: 88px; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 10px rgba(72,49,42,.1); }
.masonry-gallery img:nth-child(2), .masonry-gallery img:nth-child(5) { grid-row: span 2; }
.masonry-gallery img:nth-child(4) { grid-column: span 2; }
.calendar { width: 100%; margin-top: 22px; background: rgba(255,255,255,.38); border: 1px solid rgba(151,103,85,.18); }
.calendar-header, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-header span { padding: 8px 0; background: rgba(182,145,83,.55); font: 600 12px/1 "Montserrat", sans-serif; }
.calendar-grid span { min-height: 39px; display: grid; place-items: center; color: #6e5951; font-size: 13px; border-top: 1px solid rgba(151,103,85,.1); }
.calendar-grid .is-muted { opacity: .4; }
.calendar-grid .is-wedding { position: relative; color: #fff; font-weight: 700; z-index: 1; }
.calendar-grid .is-wedding::before { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--rose); font-size: 33px; z-index: -1; filter: drop-shadow(0 3px 5px rgba(119,61,68,.2)); }
.address { margin: 0 0 12px; color: var(--muted); }
.countdown-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.countdown-grid span { display: grid; gap: 4px; place-items: center; min-height: 72px; background: #d9be70; color: #fff8e5; }
.countdown-grid b { font: 700 28px/1 "Cormorant Garamond", serif; }
.countdown-grid small { font: 600 11px/1 "Montserrat", sans-serif; text-transform: lowercase; }
.ending-card { position: relative; width: 100%; margin: 0; overflow: hidden; border-radius: 5px; color: #fff; box-shadow: 0 12px 26px rgba(72,49,42,.18); }
.ending-card img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.95); }
.ending-card::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(30,24,23,.68), rgba(30,24,23,.13)); }
.ending-card figcaption { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px; text-align: left; }
.ending-card h2 { margin: 0 0 10px; font: 400 50px/1 "Great Vibes", cursive; }
.ending-card p { max-width: 210px; margin: 0; line-height: 1.55; }
.music-toggle { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.86); color: #fff; background: rgba(31,25,23,.86); box-shadow: 0 6px 15px rgba(35,22,18,.16); cursor: pointer; }
.music-toggle { position: sticky; top: 14px; left: calc(100% - 48px); z-index: 17; margin-left: calc(100% - 48px); }
.music-toggle.is-playing span { animation: spin 3.8s linear infinite; }
.music-toggle.needs-gesture { animation: pulse 1.2s ease infinite; }
.wish-stream { position: sticky; bottom: 70px; z-index: 13; height: 0; pointer-events: none; }
.wish-chip { width: fit-content; max-width: calc(100% - 96px); margin: 0 0 8px 14px; padding: 7px 12px; color: #fff; background: rgba(210, 92, 112, .78); border-radius: 999px; font: 500 12px/1.35 "Montserrat", sans-serif; box-shadow: 0 8px 18px rgba(67,38,42,.16); animation: wish-in .55s ease both; }
.wish-chip strong { font-weight: 700; }
.wish-bar { position: sticky;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 38px 54px;
  gap: 7px;
  padding: 11px 10px calc(11px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(248,233,229,.05), rgba(248,233,229,.92) 30%, rgba(248,233,229,.98)); }
.wish-bar input, .wish-bar button { min-width: 0; min-height: 38px; border: 0; border-radius: 999px; outline: 0; }
.wish-bar input { width: 100%; padding: 0 12px; color: var(--ink); background: rgba(82,58,50,.18); font-family: "Montserrat", sans-serif; font-size: 12px; }
.wish-bar button { color: #fff; background: var(--rose); cursor: pointer; }
.heart-button { position: relative; }
.heart-button span { font-size: 19px; }
.heart-button b { position: absolute; top: -5px; right: -3px; min-width: 18px; padding: 2px 4px; border-radius: 999px; background: var(--rose-deep); font: 700 10px/1 "Montserrat", sans-serif; }
@keyframes intro-photo-a { 0% { opacity: 1; transform: scale(1.08); filter: brightness(.96); }
  42% { opacity: 1; transform: scale(1.02); filter: brightness(.96); }
  56% { opacity: .35; transform: scale(1); filter: brightness(.86); }
  100% { opacity: 0; transform: scale(1); filter: brightness(.86); } }
@keyframes intro-photo-b { 0%, 38% { opacity: 0; clip-path: inset(0 0 0 100%); transform: scale(1.08); }
  52% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1.05); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes intro-wipe-line { 0%, 36% { opacity: 0; left: -12%; }
  41% { opacity: 1; }
  55% { opacity: 1; left: 108%; }
  62%, 100% { opacity: 0; left: 108%; } }
@keyframes intro-title-a-layer { 0%, 43% { opacity: 1; transform: translateX(0); }
  52% { opacity: .15; transform: translateX(-42px); filter: blur(6px); }
  53%, 100% { opacity: 0; transform: translateX(-70px); filter: blur(8px); } }
@keyframes intro-title-b-layer { 0%, 45% { opacity: 0; transform: translateX(60px); }
  53%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes intro-word-up { 0% { opacity: 0; filter: blur(10px); transform: translate3d(0, 42px, 0) scale(.96); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
@keyframes intro-word-slide-b { 0% { opacity: 0; filter: blur(9px); transform: translate3d(46px, 0, 0) scale(.98); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
@keyframes intro-line-a { 0%, 18% { opacity: 0; transform: scaleX(0); }
  28%, 42% { opacity: 1; transform: scaleX(1); }
  53%, 100% { opacity: 0; transform: scaleX(0); } }
@keyframes intro-line-b { 0%, 52% { opacity: 0; transform: scaleX(0); }
  62%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes intro-label-in { 0%, 10% { opacity: 0; transform: translateY(18px); }
  22%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes intro-out { to { transform: translateY(-8%); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.09); } }
@keyframes heart-float { 0% { transform: translateY(0) scale(.75); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-128px) scale(1.55); opacity: 0; } }
@keyframes petal-fall { to { transform: translate3d(var(--drift), 105vh, 0) rotate(260deg); opacity: 0; } }
@keyframes wish-in { from { transform: translateX(-16px); opacity: 0; } }
@media (max-width: 540px) {
  .phone-shell { display: block; padding: 0; }
  .invite { width: 100%; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .cover-content h2 { font-size: clamp(58px, 17vw, 74px); }
  .section { padding-inline: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- sections/03-cinelove-layout-pass.css ---- */
/* Optimized section: 03-cinelove-layout-pass.css. Generated from safe CSS prune. */
.paper-section, .section { border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background-image: none !important;
    box-shadow: none !important; }
.ornament-line { display: none !important; }
:root { --paper: #fbf4f2;
  --paper-soft: #fff9f7;
  --ink: #2f2626;
  --muted: #5d5250;
  --brown: #a56018;
  --brown-deep: #8e4d0d;
  --calendar-gold: #ecdda8;
  --calendar-border: #ad641d;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Great Vibes", "Dancing Script", cursive;
  --font-name: "Dancing Script", "Great Vibes", cursive; }
body { color: var(--ink);
  background: #fbf4f2;
  font-family: var(--font-serif); }
.invite { background: var(--paper) !important;
  color: var(--ink); }
.invite::before { content: "Wedding Dress";
  top: 72%;
  left: calc(100% - 18px);
  z-index: 18;
  color: #3d3433;
  font: 500 12px/1 "Montserrat", sans-serif;
  letter-spacing: .12em; }
.section { padding: 44px 24px 36px;
  background: var(--paper) !important; }
.paper-section { background: var(--paper) !important; }
.section-label { margin: 0 0 12px;
  color: var(--brown);
  font: 600 25px/1.08 var(--font-serif);
  letter-spacing: .06em;
  text-transform: uppercase; }
.signature-word { color: var(--brown);
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: .01em; }
.family-section { padding-top: 34px; }
.family-list { margin-bottom: 30px; }
.couple-card-grid { gap: 24px;
  padding: 0 2px; }
.photo-card { padding: 0;
  background: transparent;
  border-radius: 8px;
  box-shadow: none;
  overflow: visible; }
.photo-card img { aspect-ratio: 1 / 1.05;
  border-radius: 7px;
  box-shadow: 0 9px 14px rgba(36, 28, 24, .28); }
.photo-card figcaption { margin: 21px 0 0;
  color: var(--brown);
  font: 400 31px/.95 var(--font-name);
  letter-spacing: .01em;
  white-space: nowrap; }
.left-card, .right-card { transform: none; }
.name-signature { width: 100%;
  margin-top: -10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--brown);
  font: 400 31px/.95 var(--font-name); }
.name-signature span:first-child { text-align: left; padding-left: 2px; }
.name-signature span:last-child { text-align: right; padding-right: 2px; }
.name-signature i { color: transparent;
  font-size: 0;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center; }
.name-signature i::before { content: "💐";
  color: initial;
  font-size: 34px;
  line-height: 1; }
.interview-section { padding-top: 12px; }
.interview-section .signature-word { margin: 0 0 20px;
  font-size: clamp(58px, 16vw, 72px);
  line-height: .9; }
.interview-photo { width: calc(100% - 22px);
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none; }
.interview-photo img { display: block;
  width: 100%;
  aspect-ratio: 1 / .84;
  object-fit: cover; }
.calendar { width: 100%;
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--calendar-border); }
.calendar-header span { padding: 10px 0 9px;
  background: var(--calendar-gold);
  color: #362b2b;
  font: 600 18px/1 var(--font-serif); }
.calendar-grid span { position: relative;
  min-height: 51px;
  color: #3f3433;
  font: 600 15px/1 var(--font-serif);
  border: 0;
  z-index: 1; }
.calendar-grid .is-muted { opacity: 0; }
.calendar-grid .is-wedding { color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(126, 37, 37, .25); }
.calendar-grid .is-wedding::before { content: "";
  position: absolute;
  width: 78px;
  height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background:
    radial-gradient(ellipse at 34% 58%, rgba(232, 40, 49, .96) 0 44%, transparent 45%),
    radial-gradient(ellipse at 63% 44%, rgba(239, 61, 69, .95) 0 43%, transparent 44%),
    radial-gradient(ellipse at 54% 66%, rgba(222, 26, 43, .95) 0 49%, transparent 50%);
  border-radius: 53% 47% 46% 54%;
  filter: drop-shadow(0 2px 2px rgba(139, 31, 31, .14));
  z-index: -1; }
.calendar-grid .is-wedding::after { content: "♥ ♥";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-47%) rotate(-5deg);
  color: #ea2535;
  font: 700 9px/1 serif;
  letter-spacing: 1px;
  z-index: -1; }
.address { color: #4f4442;
  font: 500 18px/1.35 var(--font-serif); }
.music-toggle { width: 42px;
  height: 42px;
  font-size: 24px;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 7px 14px rgba(44, 34, 32, .15); }
.music-panel { position: sticky !important;
  top: 58px !important;
  left: calc(100% - 210px) !important;
  z-index: 11 !important;
  width: 190px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 6px !important;
  align-items: center !important;
  margin: -12px 12px 0 auto !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(255, 248, 246, .84) !important;
  border: 1px solid rgba(151,103,85,.14) !important;
  box-shadow: 0 8px 18px rgba(64,43,38,.12) !important;
  backdrop-filter: blur(10px) !important; }
.music-panel span { overflow: hidden !important;
  color: #604c44 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important; }
.music-panel button { border: 0 !important;
  border-radius: 999px !important;
  padding: 5px 8px !important;
  background: var(--rose) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important; }
.music-panel input { grid-column: 1 / -1 !important;
  width: 100% !important;
  accent-color: var(--rose) !important; }
.music-toggle { top: 12px;
  left: calc(100% - 54px);
  margin-left: calc(100% - 54px);
  color: #fff;
  background: #050505;
  border: 2px solid #fff; }
@media (max-width: 540px) {
  .section { padding-inline: 24px; }
  .calendar-grid span { min-height: 51px; }
  .photo-card figcaption { font-size: 31px; }
}
@media (max-width: 374px) {
  .calendar-header span { font-size: 16px; }
  .calendar-grid span { min-height: 46px; }
  .photo-card figcaption, .name-signature { font-size: 27px; }
}
.photo-card figcaption { display: none; }
.name-signature { margin-top: 20px; }
.interview-section { overflow: hidden;
  padding-bottom: 30px; }
.interview-photo { width: calc(100% - 34px);
  max-width: 360px;
  margin: 28px auto 0;
  background: var(--paper);
  overflow: hidden; }
.interview-photo img { width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  background: var(--paper); }
.gallery-section { padding-top: 34px; }
.gallery-feature { width: calc(100% - 24px);
  max-width: 370px;
  max-height: 320px;
  margin: 0 auto 14px;
  overflow: hidden;
  background: var(--paper); }
.gallery-feature img { width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  background: var(--paper); }
.calendar-header span { font-size: clamp(15px, 4.4vw, 18px); }
.calendar-grid span { min-height: 48px;
  font-size: clamp(14px, 3.9vw, 15px);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1; }
.calendar-grid .is-wedding::before { width: 68px;
  height: 38px; }
.address { max-width: 360px;
  font-size: clamp(15px, 4.3vw, 18px); }
@media (max-width: 374px) {
  .interview-photo, .gallery-feature { width: calc(100% - 18px); }
}

/* ---- sections/04-cover-wish-reactions.css ---- */
/* Optimized section: 04-cover-wish-reactions.css. Generated from safe CSS prune. */
.cover-section { min-height: 90vh;
  min-height: 90svh;
  padding-top: 90px;
  padding-bottom: 34px;
  align-items: stretch;
  justify-content: flex-start; }
.cover-content { padding-top: 0; }
.wish-stream { transition: opacity .28s ease, transform .28s ease; }
.wish-bar { max-height: 96px;
  overflow: hidden;
  transition: opacity .28s ease, transform .28s ease, max-height .28s ease, padding .28s ease; }
.wish-panel-toggle { position: sticky;
  left: calc(100% - 70px);
  bottom: calc(106px + var(--safe-bottom));
  z-index: 19;
  width: 58px;
  min-height: 126px;
  margin-left: calc(100% - 70px);
  padding: 34px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: #fff;
  background: linear-gradient(180deg, #ff97ab 0%, #ff6d88 52%, #ff5775 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(210, 85, 118, .34);
  cursor: pointer;
  transition: transform .28s ease, bottom .28s ease, opacity .28s ease; }
.wish-panel-toggle:hover { transform: translateY(-1px); }
.wish-panel-toggle.is-collapsed { bottom: calc(16px + var(--safe-bottom)); }
.wish-panel-avatar { position: absolute;
  top: -8px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.95);
  background: #fff;
  box-shadow: 0 8px 16px rgba(48, 31, 32, .18); }
.wish-panel-avatar img { display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }
.wish-panel-icon { display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  font: 700 24px/1 "Montserrat", sans-serif; }
.invite.wish-panel-collapsed .wish-stream { opacity: 0;
  transform: translateY(10px);
  pointer-events: none; }
.invite.wish-panel-collapsed .wish-bar { opacity: 0;
  transform: translateY(20px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none; }
@media (max-width: 374px) {
  .cover-section { padding-top: 82px; }
  .wish-panel-toggle { left: calc(100% - 66px);
    margin-left: calc(100% - 66px);
    width: 54px;
    min-height: 118px; }
}
.cover-section { min-height: 90vh;
  min-height: 90svh;
  padding-top: 90px;
  padding-bottom: 34px;
  align-items: stretch;
  justify-content: flex-start; }
.cover-content { padding-top: 0; }
.wish-stream { position: sticky;
  bottom: calc(78px + var(--safe-bottom));
  z-index: 18;
  height: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease; }
.wish-chip { max-width: calc(100% - 150px);
  margin: 0 0 7px 16px;
  padding: 8px 13px;
  color: #fff;
  background: rgba(230, 139, 151, .78);
  border-radius: 10px;
  font: 700 13px/1.25 "Montserrat", sans-serif;
  box-shadow: none;
  backdrop-filter: blur(3px); }
.wish-chip strong { font-weight: 800; }
.wish-bar { position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-height: 86px;
  padding: 10px 14px calc(10px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(248,233,229,0), rgba(248,233,229,.78) 22%, rgba(248,233,229,.96));
  overflow: visible;
  transition: opacity .28s ease, transform .28s ease, max-height .28s ease, padding .28s ease; }
.love-shot-button, .gift-button, .heart-button { flex: 0 0 auto;
  height: 50px;
  min-height: 50px;
  border: 0;
  color: #fff;
  background: rgba(99, 94, 91, .44);
  box-shadow: 0 8px 17px rgba(70, 45, 42, .09);
  cursor: pointer; }
.love-shot-button { width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 999px;
  font: 700 14px/1 "Montserrat", sans-serif;
  white-space: nowrap; }
.love-shot-icon { font-size: 22px;
  line-height: 1; }
.gift-button, .heart-button { width: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  font-size: 24px;
  position: relative; }
.heart-button span { font-size: 26px;
  line-height: 1; }
.heart-button b { position: absolute;
  top: -8px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: #ff7794;
  font: 800 12px/1 "Montserrat", sans-serif;
  box-shadow: 0 4px 10px rgba(196, 65, 96, .25); }
.wish-panel-toggle { position: sticky;
  left: calc(100% - 68px);
  bottom: calc(88px + var(--safe-bottom));
  z-index: 24;
  width: 58px;
  min-height: 128px;
  margin-left: calc(100% - 70px);
  margin-top: -128px;
  padding: 34px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ff96ad 0%, #ff728d 48%, #ff5574 100%);
  box-shadow: 0 13px 26px rgba(212, 81, 113, .35);
  cursor: pointer;
  transition: bottom .28s ease, transform .28s ease, opacity .28s ease; }
.wish-panel-toggle.is-collapsed { bottom: calc(18px + var(--safe-bottom)); }
.wish-panel-avatar { position: absolute;
  top: -9px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.98);
  background: #fff;
  box-shadow: 0 8px 16px rgba(48, 31, 32, .18); }
.wish-panel-avatar img { display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }
.wish-panel-icon { width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 600 34px/1 "Montserrat", sans-serif; }
.wish-panel-toggle.is-collapsed .wish-panel-icon { font-size: 31px; }
.invite.wish-panel-collapsed .wish-stream { opacity: 0;
  transform: translateY(10px);
  pointer-events: none; }
.invite.wish-panel-collapsed .wish-bar { opacity: 0;
  transform: translateY(22px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none; }
@media (max-width: 390px) {
  .wish-bar { gap: 6px;
    padding-left: 12px;
    padding-right: 12px; }
  .love-shot-button { width: 88px;
    height: 46px;
    min-height: 46px;
    font-size: 13px; }
  .gift-button, .heart-button { width: 46px;
    height: 46px;
    min-height: 46px; }
  .wish-panel-toggle { width: 54px;
    min-height: 120px;
    left: calc(100% - 64px);
    margin-left: calc(100% - 66px); }
}
.wish-panel-toggle { left: calc(100% - 60px) !important;
  bottom: calc(84px + var(--safe-bottom)) !important;
  width: 46px !important;
  min-height: 92px !important;
  margin-left: calc(100% - 60px) !important;
  margin-top: -92px !important;
  padding: 24px 0 10px !important;
  gap: 8px !important;
  box-shadow: 0 10px 20px rgba(212, 81, 113, .28) !important; }
.wish-panel-toggle.is-collapsed { bottom: calc(14px + var(--safe-bottom)) !important; }
.wish-panel-avatar { top: -6px !important;
  width: 38px !important;
  height: 38px !important; }
.wish-panel-icon { width: 26px !important;
  height: 26px !important;
  font: 600 24px/1 "Montserrat", sans-serif !important; }
.wish-panel-toggle.is-collapsed .wish-panel-icon { font-size: 22px !important; }
@media (max-width: 390px) {
  .wish-panel-toggle { left: calc(100% - 56px) !important;
    margin-left: calc(100% - 56px) !important;
    width: 42px !important;
    min-height: 86px !important;
    margin-top: -86px !important;
    padding-top: 22px !important;
    padding-bottom: 9px !important; }
  .wish-panel-avatar { width: 34px !important;
    height: 34px !important; }
}
.cover-section { min-height: 96vh !important;
  min-height: 96svh !important;
  padding: 0 24px 28px !important;
  align-items: stretch !important;
  justify-content: flex-end !important; }
.hero-photo { background-position: center center !important;
  transform: scale(1.02); }
.cover-gradient { background: linear-gradient(180deg, rgba(35,23,20,.16) 0%, rgba(35,23,20,.08) 35%, rgba(35,23,20,.56) 100%) !important; }
.cover-content { width: 100% !important;
  margin-top: auto !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; }
.tiny-date { width: min(328px, 100%) !important;
  margin: 0 auto 16px !important; }
.cover-content h2 { margin: 0 0 12px !important; }
.cover-subtitle { margin: 0 !important; }
@media (max-width: 390px) {
  .cover-section { min-height: 94svh !important;
    padding-bottom: 24px !important; }
  .tiny-date { margin-bottom: 14px !important; }
}
.wish-stream { position: sticky !important;
  bottom: calc(52px + var(--safe-bottom)) !important;
  z-index: 23 !important;
  height: 178px !important;
  max-height: 30vh !important;
  margin-top: -178px !important;
  padding: 0 78px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: opacity .24s ease, transform .24s ease !important; }
.wish-chip { width: fit-content !important;
  max-width: min(305px, 100%) !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  color: rgba(255,255,255,.96) !important;
  background: rgba(181, 70, 86, .42) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.1) !important;
  font: 600 9.5px/1.28 "Montserrat", sans-serif !important;
  letter-spacing: 0 !important;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: wish-float-up 7.6s linear forwards !important;
  will-change: transform, opacity; }
.wish-chip strong { font-weight: 700 !important; }
.wish-chip.is-leaving { animation: wish-fade-out .38s ease forwards !important; }
@keyframes wish-float-up { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  10% { opacity: 1; }
  70% { opacity: 1; transform: translate3d(0, -8px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -46px, 0) scale(.985); } }
@keyframes wish-fade-out { to { opacity: 0; transform: translate3d(0, -18px, 0) scale(.98); } }
.wish-bar { position: sticky !important;
  bottom: 0 !important;
  z-index: 24 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 44px !important;
  max-height: 54px !important;
  padding: 6px 7px calc(6px + var(--safe-bottom)) !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(248,233,229,0), rgba(248,233,229,.14) 34%, rgba(248,233,229,.30)) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  transition: opacity .24s ease, transform .24s ease, max-height .24s ease, padding .24s ease !important; }
.love-shot-button, .gift-button, .heart-button { flex: 0 0 auto !important;
  height: 32px !important;
  min-height: 32px !important;
  color: rgba(255,255,255,.95) !important;
  background: rgba(72, 66, 63, .34) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important; }
.love-shot-button { width: 74px !important;
  padding: 0 8px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  font: 700 11px/1 "Montserrat", sans-serif !important;
  white-space: nowrap !important; }
.love-shot-icon { font-size: 15px !important;
  line-height: 1 !important; }
.gift-button, .heart-button { width: 32px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  position: relative !important; }
.gift-button { background: rgba(235, 93, 126, .68) !important; }
.heart-button span { font-size: 16px !important;
  line-height: 1 !important; }
.heart-button b { position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(255, 93, 126, .92) !important;
  box-shadow: 0 2px 6px rgba(196,65,96,.18) !important;
  font: 800 8.5px/1 "Montserrat", sans-serif !important; }
.wish-panel-toggle { left: calc(100% - 51px) !important;
  bottom: calc(50px + var(--safe-bottom)) !important;
  width: 39px !important;
  min-height: 75px !important;
  margin-left: calc(100% - 51px) !important;
  margin-top: -75px !important;
  padding: 19px 0 8px !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(255,150,173,.94), rgba(255,105,135,.92)) !important;
  box-shadow: 0 8px 18px rgba(212,81,113,.24) !important; }
.wish-panel-toggle.is-collapsed { bottom: calc(8px + var(--safe-bottom)) !important; }
.wish-panel-avatar { top: -5px !important;
  width: 31px !important;
  height: 31px !important;
  border-width: 1.5px !important; }
.wish-panel-icon { width: 22px !important;
  height: 22px !important;
  font: 600 21px/1 "Montserrat", sans-serif !important; }
.wish-panel-toggle.is-collapsed .wish-panel-icon { font-size: 20px !important; }
.invite.wish-panel-collapsed .wish-stream { opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important; }
.invite.wish-panel-collapsed .wish-bar { opacity: 0 !important;
  transform: translateY(14px) !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important; }
@media (max-width: 390px) {
  .wish-stream { height: 164px !important;
    margin-top: -164px !important;
    padding-right: 68px !important;
    padding-left: 8px !important; }
  .wish-chip { padding: 3.5px 7px !important;
    font-size: 9px !important; }
  .wish-bar { gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important; }
  .love-shot-button { width: 68px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 6px !important;
    font-size: 10px !important; }
  .gift-button, .heart-button { width: 31px !important;
    height: 31px !important;
    min-height: 31px !important; }
  .wish-panel-toggle { left: calc(100% - 47px) !important;
    margin-left: calc(100% - 47px) !important;
    width: 36px !important;
    min-height: 70px !important;
    margin-top: -70px !important;
    padding-top: 18px !important; }
  .wish-panel-avatar { width: 29px !important;
    height: 29px !important; }
}
.wish-bar { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,246,247,.12) 38%, rgba(255,246,247,.22)) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important; }
.wish-open-pill { flex: 1 1 112px !important;
  min-width: 0 !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 0 5px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(52, 47, 45, .26) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
  font: 500 10.5px/1 "Montserrat", sans-serif !important;
  cursor: pointer !important; }
.wish-open-pill i { flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.16) !important;
  font-style: normal !important;
  font-size: 10px !important;
  line-height: 1 !important; }
.love-shot-button, .gift-button, .heart-button { height: 31px !important;
  min-height: 31px !important;
  background: rgba(52, 47, 45, .26) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important; }
.gift-button { background: rgba(235, 93, 126, .46) !important; }
.wish-modal[hidden] { display: none !important; }
.wish-modal { position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important; }
.wish-modal-backdrop { position: absolute !important;
  inset: 0 !important;
  background: rgba(30, 26, 25, .48) !important;
  opacity: 0 !important;
  transition: opacity .24s ease !important;
  pointer-events: auto !important; }
.wish-modal-card { position: relative !important;
  z-index: 1 !important;
  width: min(100vw, 430px) !important;
  margin: 0 auto !important;
  padding: 54px 22px calc(34px + var(--safe-bottom)) !important;
  border-radius: 14px 14px 0 0 !important;
  color: #373737 !important;
  background:
    radial-gradient(circle at 0% 12%, rgba(255, 190, 202, .30), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 214, 222, .26), transparent 34%),
    rgba(255, 255, 255, .88) !important;
  box-shadow: 0 -10px 34px rgba(69, 45, 49, .14) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  transform: translate3d(0, 34px, 0) !important;
  opacity: 0 !important;
  transition: transform .26s cubic-bezier(.19,1,.22,1), opacity .2s ease !important;
  pointer-events: auto !important; }
.wish-modal.is-active .wish-modal-backdrop { opacity: 1 !important; }
.wish-modal.is-active .wish-modal-card { transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important; }
.wish-modal-close { position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(65, 65, 65, .56) !important;
  background: transparent !important;
  font: 600 26px/1 "Montserrat", sans-serif !important;
  cursor: pointer !important; }
.wish-modal-icon { position: absolute !important;
  top: -28px !important;
  left: 50% !important;
  width: 78px !important;
  height: 68px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px 18px 22px 22px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255, 132, 150, .92), rgba(239, 74, 96, .94)) !important;
  box-shadow: 0 9px 22px rgba(236, 83, 111, .28) !important; }
.wish-modal-icon::before, .wish-modal-icon::after { content: "" !important;
  position: absolute !important;
  border-radius: 999px !important;
  background: rgba(255, 178, 190, .62) !important; }
.wish-modal-icon::before { width: 118px !important;
  height: 22px !important;
  left: -20px !important;
  top: 30px !important;
  border: 1px solid rgba(255, 186, 197, .42) !important;
  background: transparent !important;
  transform: rotate(-3deg) !important; }
.wish-modal-icon::after { right: -20px !important;
  top: 17px !important;
  width: 15px !important;
  height: 15px !important;
  box-shadow: -88px 7px 0 rgba(255, 194, 202, .66), -8px 13px 0 -3px rgba(255, 194, 202, .74) !important; }
.wish-modal-icon span { position: relative !important;
  z-index: 1 !important;
  font-size: 33px !important;
  line-height: 1 !important;
  text-shadow: 0 4px 10px rgba(255,255,255,.62) !important; }
.wish-modal h2 { margin: 0 0 28px !important;
  text-align: center !important;
  color: #303030 !important;
  font: 800 27px/1.1 "Montserrat", sans-serif !important;
  letter-spacing: -.02em !important; }
.wish-modal-form { display: grid !important;
  gap: 16px !important; }
.wish-modal-form input, .wish-modal-form textarea { width: 100% !important;
  border: 1.5px solid rgba(245, 140, 158, .60) !important;
  border-radius: 12px !important;
  outline: none !important;
  color: #3c3433 !important;
  background: rgba(255,255,255,.56) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important;
  font: 500 16px/1.35 "Montserrat", sans-serif !important; }
.wish-modal-form input { height: 52px !important;
  padding: 0 14px !important; }
.wish-modal-form textarea { min-height: 92px !important;
  resize: vertical !important;
  padding: 14px !important; }
.wish-modal-form input::placeholder, .wish-modal-form textarea::placeholder { color: rgba(80, 80, 80, .36) !important; }
.wish-modal-submit { width: 100% !important;
  height: 52px !important;
  margin-top: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f4566b, #ee4d66) !important;
  box-shadow: 0 10px 22px rgba(232, 74, 101, .20) !important;
  font: 700 16px/1 "Montserrat", sans-serif !important;
  cursor: pointer !important; }
.wish-modal-submit:disabled { opacity: .68 !important;
  cursor: wait !important; }
.wish-modal-status { min-height: 16px !important;
  margin: -5px 0 0 !important;
  text-align: center !important;
  color: rgba(66, 66, 66, .62) !important;
  font: 500 11px/1.35 "Montserrat", sans-serif !important; }
.wish-modal-status[data-type="success"] { color: rgba(69, 143, 93, .94) !important; }
.wish-modal-status[data-type="error"] { color: rgba(210, 72, 88, .94) !important; }
body.wish-modal-open { overflow: hidden !important; }
@media (max-width: 390px) {
  .wish-open-pill { flex-basis: 98px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding-left: 10px !important;
    font-size: 10px !important; }
  .wish-open-pill i { width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important; }
  .love-shot-button, .gift-button, .heart-button { height: 30px !important;
    min-height: 30px !important; }
  .wish-modal-card { padding: 50px 18px calc(30px + var(--safe-bottom)) !important; }
  .wish-modal h2 { margin-bottom: 24px !important;
    font-size: 24px !important; }
  .wish-modal-form { gap: 14px !important; }
  .wish-modal-form input { height: 48px !important;
    font-size: 15px !important; }
  .wish-modal-form textarea { min-height: 84px !important;
    font-size: 15px !important; }
  .wish-modal-submit { height: 49px !important;
    font-size: 15px !important; }
}
.reaction-layer { position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  contain: layout paint style !important; }
.reaction-emoji { position: fixed !important;
  left: var(--rx-left) !important;
  top: var(--rx-start) !important;
  z-index: 2147483001 !important;
  font-size: var(--rx-size) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  opacity: 0;
  will-change: transform, opacity;
  animation: reactionFlyFull var(--rx-duration) cubic-bezier(.16,.78,.24,1) forwards !important; }
@keyframes reactionFlyFull { 0% {
    opacity: 0;
    transform: translate3d(-50%, 22px, 0) scale(.42) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
  }
  68% {
    opacity: .96;
    transform: translate3d(calc(-50% + var(--rx-drift-half)), -58vh, 0) scale(1.22) rotate(var(--rx-rotate-half));
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--rx-drift)), -116vh, 0) scale(1.62) rotate(var(--rx-rotate));
  } }
.reaction-button-pop { animation: reactionButtonPop .34s ease both !important; }
@keyframes reactionButtonPop { 0% { transform: scale(1); }
  48% { transform: scale(1.15); }
  100% { transform: scale(1); } }

/* ---- sections/05-events-route-calendar.css ---- */
/* Optimized section: 05-events-route-calendar.css. Generated from safe CSS prune. */
.wedding-events-section, .ceremony-journey-section { padding-top: 18px;
  padding-bottom: 22px;
  overflow: hidden; }
.split-main-title { margin: 0 0 26px;
  color: #151111;
  text-align: center;
  text-transform: uppercase;
  font: 700 clamp(28px, 9vw, 44px)/1.05 "Cormorant Garamond", serif;
  letter-spacing: .03em; }
.reception-events { display: grid;
  gap: 26px; }
.reception-card { position: relative;
  overflow: hidden;
  padding: 28px 20px 24px;
  border-radius: 32px;
  background: #7d0a0c;
  color: #fffaf8;
  text-align: center;
  box-shadow: 0 13px 26px rgba(70, 20, 18, .18); }
.reception-card-title { margin: 0 0 10px;
  text-transform: uppercase;
  font: 700 clamp(25px, 8.1vw, 42px)/1.05 "Cormorant Garamond", serif; }
.reception-card-time { margin: 0 0 12px;
  text-transform: uppercase;
  font: 500 clamp(18px, 5.5vw, 28px)/1.15 "Montserrat", sans-serif; }
.reception-card-date { margin: 0 0 12px;
  color: #efc54e;
  font: 700 clamp(34px, 10vw, 54px)/1 "Cormorant Garamond", serif;
  letter-spacing: .08em; }
.reception-card-lunar { margin: 0 0 17px;
  font: 400 clamp(15px, 4.3vw, 18px)/1.4 "Montserrat", sans-serif; }
.reception-card-venue { margin: 0 0 10px;
  text-transform: uppercase;
  font: 700 clamp(24px, 7.8vw, 40px)/1.1 "Cormorant Garamond", serif; }
.reception-card-address { margin: 0;
  font: 400 clamp(16px, 5vw, 25px)/1.35 "Montserrat", sans-serif; }
.route-button { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 17px;
  text-decoration: none; }
.reception-route-button { margin-top: 18px;
  background: #f8f0ee;
  color: #171111;
  box-shadow: 0 7px 15px rgba(0,0,0,.12);
  font: 700 clamp(16px, 5vw, 22px)/1 "Cormorant Garamond", serif; }
.ceremony-card { text-align: center; }
.ceremony-title { margin: 0;
  color: #141111;
  text-transform: uppercase;
  font: 700 clamp(34px, 10.5vw, 58px)/1 "Cormorant Garamond", serif; }
.ceremony-time { margin: 12px 0 18px;
  text-transform: uppercase;
  font: 500 clamp(20px, 5.7vw, 28px)/1.2 "Montserrat", sans-serif; }
.ceremony-date-row { display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 16px; }
.ceremony-month, .ceremony-year { display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #111;
  text-transform: uppercase;
  font: 700 clamp(28px, 7.5vw, 46px)/1.05 "Cormorant Garamond", serif; }
.ceremony-day { display: flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 3px 14px;
  color: #92080b;
  border-left: 2px solid rgba(15,13,12,.7);
  border-right: 2px solid rgba(15,13,12,.7);
  font: 700 clamp(58px, 15.8vw, 84px)/1 "Cormorant Garamond", serif; }
.ceremony-lunar { margin: 0 0 14px;
  color: #25201e;
  font: 400 clamp(15px, 4.5vw, 20px)/1.4 "Montserrat", sans-serif; }
.ceremony-venue { margin: 0;
  color: #111;
  text-transform: uppercase;
  font: 600 clamp(23px, 7.7vw, 39px)/1.2 "Montserrat", sans-serif; }
.journey-road-block { position: relative;
  min-height: 325px;
  margin: 12px 0 28px; }
.side-route-button { min-width: 126px;
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 13px;
  background: #7d0a0c;
  color: #fff8f4;
  font: 600 clamp(14px, 4.5vw, 19px)/1 "Montserrat", sans-serif; }
@media (max-width: 390px) {
  .reception-card { border-radius: 27px; padding-inline: 16px; }
  .journey-road-block { min-height: 300px; }
  .side-route-button { min-width: 114px; padding-inline: 14px; }
  .ceremony-day { min-width: 96px; }
}
.image-road-block { position: relative;
  min-height: auto;
  margin: 12px 0 30px; }
.image-road-block .journey-road-figure { width: min(100%, 680px);
  margin: 0 auto; }
.image-road-block .journey-road-figure img { display: block;
  width: 100%;
  height: auto;
  object-fit: contain; }
.image-road-block .journey-route-actions { display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: min(100%, 680px);
  margin: 12px auto 0;
  padding: 0 20px;
  box-sizing: border-box; }
.image-road-block .side-route-button { min-width: 138px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 14px;
  background: #7d0a0c;
  color: #fff8f4;
  font: 600 clamp(14px, 4.5vw, 19px)/1 "Montserrat", sans-serif;
  box-shadow: 0 8px 16px rgba(72, 9, 10, .15); }
.image-road-block .left-route-button { margin-left: 8%; }
.image-road-block .right-route-button { margin-right: 8%; }
@media (max-width: 540px) {
  .image-road-block .journey-road-figure, .image-road-block .journey-route-actions { width: min(100%, 420px); }
  .image-road-block .journey-route-actions { padding: 0 8px;
    gap: 8px; }
  .image-road-block .left-route-button, .image-road-block .right-route-button { margin: 0; }
  .image-road-block .side-route-button { min-width: 122px;
    padding: 10px 14px; }
}
@media (max-width: 390px) {
  .image-road-block .journey-route-actions { gap: 10px; }
  .image-road-block .side-route-button { min-width: 112px;
    font-size: 14px; }
}
.image-road-block { width: min(88%, 520px);
  max-width: 520px;
  margin: 8px auto 30px;
  position: relative; }
.image-road-block .journey-road-figure { width: 100%;
  margin: 0 auto; }
.image-road-block .journey-road-figure img { width: 100%;
  height: auto;
  display: block;
  object-fit: contain; }
.image-road-block .journey-route-actions { position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5; }
.image-road-block .side-route-button { position: absolute;
  min-width: 116px;
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 12px;
  background: #7d0a0c;
  color: #fff8f4;
  box-shadow: 0 9px 16px rgba(72, 9, 10, .18);
  font: 600 clamp(13px, 4.1vw, 17px)/1 "Montserrat", sans-serif;
  pointer-events: auto;
  white-space: nowrap; }
.image-road-block .left-route-button { left: 9.5%;
  bottom: 2.5%;
  transform: translate(-4%, 0);
  margin: 0; }
.image-road-block .right-route-button { right: 6.5%;
  top: 25.5%;
  transform: translate(0, 0);
  margin: 0; }
@media (max-width: 540px) {
  .image-road-block { width: min(92%, 360px);
    max-width: 360px;
    margin-top: 4px;
    margin-bottom: 26px; }
  .image-road-block .side-route-button { min-width: 96px;
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: clamp(12px, 3.7vw, 14px); }
  .image-road-block .left-route-button { left: 8.5%;
    bottom: 1.5%; }
  .image-road-block .right-route-button { right: 5.8%;
    top: 25%; }
}
@media (max-width: 380px) {
  .image-road-block { width: 94%;
    max-width: 332px; }
  .image-road-block .side-route-button { min-width: 88px;
    min-height: 32px;
    padding-inline: 9px;
    font-size: 12px; }
}
.image-road-block { width: calc(100% + 42px);
  max-width: none;
  margin: 8px -21px 68px;
  position: relative; }
.image-road-block .journey-road-figure { width: 100%;
  margin: 0 auto; }
.image-road-block .journey-road-figure img { width: 100%;
  max-width: none;
  height: auto;
  display: block;
  object-fit: contain; }
.image-road-block .journey-route-actions { position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible; }
.image-road-block .side-route-button { position: absolute;
  min-width: 112px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #7d0a0c;
  color: #fff8f4;
  box-shadow: 0 8px 16px rgba(72, 9, 10, .16);
  font: 600 clamp(12px, 3.6vw, 16px)/1 "Montserrat", sans-serif;
  pointer-events: auto;
  white-space: nowrap; }
.image-road-block .left-route-button { left: 13.5%;
  top: 91.5%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  margin: 0; }
.image-road-block .right-route-button { right: 13.5%;
  top: 32.5%;
  left: auto;
  bottom: auto;
  transform: translateX(50%);
  margin: 0; }
@media (max-width: 540px) {
  .image-road-block { width: calc(100% + 44px);
    margin-left: -22px;
    margin-right: -22px;
    margin-bottom: 62px; }
  .image-road-block .side-route-button { min-width: 96px;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: clamp(11px, 3.25vw, 13px); }
  .image-road-block .left-route-button { left: 13.2%;
    top: 91.8%; }
  .image-road-block .right-route-button { right: 13.2%;
    top: 32.8%; }
}
@media (max-width: 380px) {
  .image-road-block { width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 58px; }
  .image-road-block .side-route-button { min-width: 86px;
    min-height: 30px;
    padding: 6px 8px;
    font-size: 11px; }
  .image-road-block .left-route-button { left: 13.5%;
    top: 92%; }
  .image-road-block .right-route-button { right: 13.5%;
    top: 33%; }
}
.wedding-events-section .split-main-title { margin-bottom: 22px;
  font-size: clamp(24px, 7.1vw, 34px);
  color: var(--ink); }
.wedding-events-section .reception-events { gap: 22px; }
.wedding-events-section .reception-card { padding: 24px 18px 22px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,248,246,.98), rgba(248,233,229,.98));
  color: var(--ink);
  border: 1px solid rgba(145, 104, 85, .32);
  box-shadow: 0 12px 28px rgba(74, 50, 43, .13); }
.wedding-events-section .reception-card::before { content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 113, 131, .18);
  border-radius: 23px;
  pointer-events: none; }
.wedding-events-section .reception-card-title { margin-bottom: 8px;
  color: var(--brown);
  font-size: clamp(22px, 6.2vw, 31px);
  line-height: 1.08;
  letter-spacing: .035em; }
.wedding-events-section .reception-card-time { margin-bottom: 10px;
  color: var(--muted);
  font-size: clamp(14px, 4.2vw, 18px);
  line-height: 1.18;
  letter-spacing: .03em; }
.wedding-events-section .reception-card-date { margin-bottom: 10px;
  color: var(--gold);
  font-size: clamp(28px, 7.6vw, 38px);
  line-height: 1.04;
  letter-spacing: .06em; }
.wedding-events-section .reception-card-lunar { margin-bottom: 13px;
  color: var(--muted);
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.38; }
.wedding-events-section .reception-card-venue { margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(20px, 5.9vw, 29px);
  line-height: 1.12;
  letter-spacing: .025em; }
.wedding-events-section .reception-card-address { color: var(--muted);
  font-size: clamp(14px, 4.1vw, 18px);
  line-height: 1.35; }
.wedding-events-section .reception-route-button { margin-top: 15px;
  min-width: 142px;
  min-height: 42px;
  padding: 10px 20px;
  background: var(--rose);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(184, 79, 99, .22);
  font-size: clamp(14px, 4.1vw, 17px); }
@media (max-width: 390px) {
  .wedding-events-section .reception-card { padding: 22px 16px 20px;
    border-radius: 25px; }
  .wedding-events-section .reception-card::before { border-radius: 20px; }
}
.ceremony-journey-section { padding-top: 12px; }
.ceremony-journey-section .ceremony-card { max-width: 390px;
  margin-left: auto;
  margin-right: auto; }
.ceremony-journey-section .ceremony-title { font-size: clamp(28px, 8vw, 42px);
  line-height: 1.04;
  letter-spacing: .025em; }
.ceremony-journey-section .ceremony-time { margin: 9px 0 13px;
  font-size: clamp(15px, 4.25vw, 20px);
  line-height: 1.18;
  letter-spacing: .025em; }
.ceremony-journey-section .ceremony-date-row { max-width: 430px;
  margin-bottom: 12px; }
.ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { padding: 0 6px;
  font-size: clamp(21px, 5.8vw, 31px);
  line-height: 1.05; }
.ceremony-journey-section .ceremony-day { min-width: 86px;
  padding: 2px 11px;
  font-size: clamp(46px, 12.2vw, 62px);
  line-height: .96; }
.ceremony-journey-section .ceremony-lunar { margin-bottom: 10px;
  font-size: clamp(13px, 3.75vw, 16px);
  line-height: 1.38; }
.ceremony-journey-section .ceremony-venue { max-width: 360px;
  margin: 0 auto;
  font-size: clamp(17px, 4.75vw, 23px);
  line-height: 1.26;
  font-weight: 500;
  letter-spacing: .02em; }
@media (max-width: 390px) {
  .ceremony-journey-section .ceremony-title { font-size: clamp(26px, 7.6vw, 34px); }
  .ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { font-size: clamp(19px, 5.5vw, 26px); }
  .ceremony-journey-section .ceremony-day { min-width: 78px;
    font-size: clamp(42px, 11.5vw, 54px); }
  .ceremony-journey-section .ceremony-venue { font-size: clamp(16px, 4.5vw, 20px); }
}
.wedding-calendar-section { padding-top: 8px;
  padding-left: 16px;
  padding-right: 16px; }
@media (max-width: 540px) {
  .wedding-calendar-section { padding-left: 10px;
    padding-right: 10px; }
}
.inline-calendar { margin-top: 18px;
  padding-top: 0;
  padding-bottom: 10px; }
.countdown-section .inline-calendar { padding-left: 0;
  padding-right: 0; }
.countdown-section .ending-card { margin-top: 22px; }
.countdown-section .inline-calendar { margin-top: 18px;
  padding: 0 0 10px; }
.countdown-section .calendar { width: 100%;
  max-width: none;
  margin: 14px auto 0;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(151,103,85,.18);
  box-shadow: none; }
.countdown-section .calendar-header, .countdown-section .calendar-grid { display: grid;
  grid-template-columns: repeat(7, 1fr); }
.countdown-section .calendar-header span { padding: 8px 0;
  background: rgba(182,145,83,.55);
  color: var(--ink);
  text-align: center;
  font: 600 12px/1 "Montserrat", sans-serif; }
.countdown-section .calendar-grid { padding: 0; }
.countdown-section .calendar-grid span { min-height: 39px;
  display: grid;
  place-items: center;
  color: #6e5951;
  font: 400 13px/1 "Montserrat", sans-serif;
  border-top: 1px solid rgba(151,103,85,.1); }
.countdown-section .calendar-grid .is-muted { opacity: .4; }
.countdown-section .calendar-grid .is-wedding { position: relative;
  color: #fff;
  font-weight: 700;
  z-index: 1; }
.countdown-section .calendar-grid .is-wedding::before { content: "♥";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rose);
  font-size: 33px;
  line-height: 1;
  z-index: -1;
  background: none;
  filter: drop-shadow(0 3px 5px rgba(119,61,68,.2)); }
.countdown-section .calendar-grid .is-wedding::after { content: none; }
.countdown-section .ending-card { margin-top: 22px; }
.countdown-section { padding-left: 16px;
  padding-right: 16px; }
.countdown-grid { max-width: 360px;
  margin: 0 auto 16px;
  gap: 10px; }
.countdown-grid span { min-height: 62px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(233,208,152,.95), rgba(219,188,117,.95));
  color: #fff9ef;
  box-shadow: 0 8px 16px rgba(158, 126, 69, .12); }
.countdown-grid b { font-size: 24px; }
.countdown-grid small { font-size: 10px;
  letter-spacing: .02em; }
.countdown-section .inline-calendar { margin-top: 0;
  padding: 0; }
.countdown-section .calendar { margin: 0;
  border-bottom: 0; }
.countdown-section .ending-card { width: 100%;
  margin-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 28px rgba(72,49,42,.12); }
.countdown-section .ending-card img { width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover; }
.countdown-section .ending-card::after { content: none; }
.countdown-section .ending-card::before { content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(243,239,236,1) 0%,
      rgba(243,239,236,0) 10%,
      rgba(243,239,236,0) 86%,
      rgba(243,239,236,1) 100%); }
.countdown-section .ending-card figcaption { z-index: 2;
  background: linear-gradient(90deg, rgba(30,24,23,.56), rgba(30,24,23,.10)); }
@media (max-width: 540px) {
  .countdown-grid { max-width: 330px;
    gap: 8px; }
  .countdown-grid span { min-height: 56px;
    border-radius: 14px; }
  .countdown-grid b { font-size: 22px; }
}
.countdown-section { padding-left: 0;
  padding-right: 0; }
.countdown-section > .countdown-grid { width: calc(100% - 32px);
  max-width: 360px;
  margin: 0 auto 16px; }
.countdown-section > .inline-calendar, .countdown-section > .ending-card { width: 100%; }
.countdown-section > .inline-calendar { padding-left: 0;
  padding-right: 0; }
.countdown-section > .inline-calendar .calendar { width: 100%;
  margin: 0; }
@media (max-width: 540px) {
  .countdown-section > .countdown-grid { width: calc(100% - 24px);
    max-width: 330px; }
}
.wedding-events-section .section-label { font-family: "Cormorant Garamond", serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important; }
.wedding-events-section .split-main-title { font-size: clamp(20px, 6vw, 29px); }
.wedding-events-section .reception-card-title { font-size: clamp(19px, 5.3vw, 26px); }
.wedding-events-section .reception-card-time { font-size: clamp(12px, 3.6vw, 15px); }
.wedding-events-section .reception-card-date { font-size: clamp(24px, 6.5vw, 32px); }
.wedding-events-section .reception-card-lunar { font-size: clamp(11px, 3.2vw, 14px); }
.wedding-events-section .reception-card-venue { font-size: clamp(17px, 5vw, 25px); }
.wedding-events-section .reception-card-address { font-size: clamp(12px, 3.5vw, 15px); }
.wedding-events-section .reception-route-button { font-size: clamp(12px, 3.5vw, 14px); }
.ceremony-journey-section .ceremony-title { font-size: clamp(24px, 6.8vw, 36px); }
.ceremony-journey-section .ceremony-time { font-size: clamp(13px, 3.7vw, 17px); }
.ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { font-size: clamp(18px, 4.9vw, 26px); }
.ceremony-journey-section .ceremony-day { font-size: clamp(39px, 10.4vw, 53px); }
.ceremony-journey-section .ceremony-lunar { font-size: clamp(11px, 3.2vw, 14px); }
.ceremony-journey-section .ceremony-venue { font-size: clamp(14px, 4vw, 20px); }
.ceremony-journey-section .side-route-button, .ceremony-journey-section .image-road-block .side-route-button { font-size: clamp(11px, 3.2vw, 13px); }
@media (max-width: 390px) {
  .ceremony-journey-section .ceremony-title { font-size: clamp(22px, 6.3vw, 29px); }
  .ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { font-size: clamp(16px, 4.6vw, 22px); }
  .ceremony-journey-section .ceremony-day { font-size: clamp(36px, 9.8vw, 46px); }
  .ceremony-journey-section .ceremony-venue { font-size: clamp(13px, 3.8vw, 17px); }
}
.wedding-events-section { padding-left: 10px;
  padding-right: 10px; }
.wedding-events-section .reception-events { gap: 18px; }
.wedding-events-section .reception-card { width: 100%;
  padding: 22px 16px 20px;
  border-radius: 26px; }
.wedding-events-section .reception-card::before { inset: 9px;
  border-radius: 21px; }
.wedding-events-section .reception-card-title, .wedding-events-section .reception-card-date, .wedding-events-section .reception-card-venue { font-family: var(--font-serif);
  font-weight: 600; }
.wedding-events-section .reception-card-time, .wedding-events-section .reception-card-lunar, .wedding-events-section .reception-card-address, .wedding-events-section .reception-route-button { font-family: "Montserrat", sans-serif; }
.wedding-events-section .section-label { margin-bottom: 10px;
  font-size: 11px;
  color: var(--brown); }
.wedding-events-section .split-main-title { margin-bottom: 18px;
  font-size: clamp(20px, 6vw, 28px);
  color: var(--ink); }
.wedding-events-section .reception-card-title { margin-bottom: 7px;
  color: #111;
  font-size: clamp(18px, 5.1vw, 25px);
  line-height: 1.06;
  letter-spacing: .025em; }
.wedding-events-section .reception-card-time { margin-bottom: 8px;
  color: #111;
  font-size: clamp(12px, 3.5vw, 14px);
  line-height: 1.18;
  letter-spacing: .04em;
  text-transform: uppercase; }
.wedding-events-section .reception-card-date { margin-bottom: 8px;
  color: var(--gold);
  font-size: clamp(24px, 6.4vw, 31px);
  line-height: 1.02;
  letter-spacing: .05em; }
.wedding-events-section .reception-card-lunar { margin-bottom: 10px;
  color: #111;
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.35; }
.wedding-events-section .reception-card-venue { margin-bottom: 7px;
  color: #111;
  font-size: clamp(16px, 4.7vw, 22px);
  line-height: 1.12;
  letter-spacing: .018em; }
.wedding-events-section .reception-card-address { color: #111;
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.32; }
.wedding-events-section .reception-route-button { margin-top: 13px;
  min-width: 132px;
  min-height: 38px;
  padding: 9px 16px;
  font-size: clamp(12px, 3.5vw, 14px); }
@media (max-width: 390px) {
  .wedding-events-section { padding-left: 8px;
    padding-right: 8px; }
  .wedding-events-section .reception-card { padding: 20px 14px 18px;
    border-radius: 23px; }
  .wedding-events-section .reception-card::before { inset: 8px;
    border-radius: 18px; }
}
.wedding-events-section { padding-left: 4px !important;
  padding-right: 4px !important; }
.wedding-events-section .section-label { font-family: "Cormorant Garamond", serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important; }
.wedding-events-section .split-main-title { margin-bottom: 10px !important;
  font: 600 clamp(22px, 6.4vw, 30px)/1.05 var(--font-serif) !important;
  color: var(--ink) !important;
  letter-spacing: .02em !important; }
.wedding-events-section .reception-events { gap: 16px !important;
  width: 100% !important; }
.wedding-events-section .reception-card { width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 16px 20px !important;
  border-radius: 26px !important; }
.wedding-events-section .reception-card::before { inset: 8px !important;
  border-radius: 20px !important; }
.wedding-events-section .reception-card-title { margin-bottom: 7px !important;
  color: #111 !important;
  font: 600 clamp(18px, 5vw, 24px)/1.08 var(--font-serif) !important;
  letter-spacing: .02em !important; }
.wedding-events-section .reception-card-time { margin-bottom: 8px !important;
  color: #111 !important;
  font: 500 clamp(12px, 3.35vw, 14px)/1.18 "Montserrat", sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important; }
.wedding-events-section .reception-card-date { margin-bottom: 8px !important;
  color: var(--gold) !important;
  font: 600 clamp(24px, 6.3vw, 30px)/1.02 var(--font-serif) !important;
  letter-spacing: .05em !important; }
.wedding-events-section .reception-card-lunar { margin-bottom: 10px !important;
  color: #111 !important;
  font: 500 clamp(11px, 3vw, 13px)/1.34 "Montserrat", sans-serif !important; }
.wedding-events-section .reception-card-venue { margin-bottom: 7px !important;
  color: #111 !important;
  font: 600 clamp(16px, 4.6vw, 21px)/1.15 var(--font-serif) !important;
  letter-spacing: .018em !important; }
.wedding-events-section .reception-card-address { color: #111 !important;
  font: 500 clamp(12px, 3.35vw, 14px)/1.32 "Montserrat", sans-serif !important; }
.wedding-events-section .reception-route-button { margin-top: 12px !important;
  min-width: 132px !important;
  min-height: 38px !important;
  padding: 9px 16px !important;
  font: 600 clamp(12px, 3.35vw, 14px)/1 "Montserrat", sans-serif !important; }
.ceremony-journey-section .ceremony-title { font: 600 clamp(24px, 6.8vw, 34px)/1.04 var(--font-serif) !important; }
.ceremony-journey-section .ceremony-time { font: 500 clamp(13px, 3.7vw, 16px)/1.18 "Montserrat", sans-serif !important; }
.ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { font: 600 clamp(18px, 4.9vw, 25px)/1.05 var(--font-serif) !important; }
.ceremony-journey-section .ceremony-day { font: 600 clamp(39px, 10.2vw, 50px)/.96 var(--font-serif) !important; }
.ceremony-journey-section .ceremony-lunar { font: 500 clamp(11px, 3.1vw, 13px)/1.34 "Montserrat", sans-serif !important; }
.ceremony-journey-section .ceremony-venue { font: 600 clamp(14px, 3.95vw, 18px)/1.22 var(--font-serif) !important; }
@media (max-width: 390px) {
  .wedding-events-section { padding-left: 2px !important;
    padding-right: 2px !important; }
  .wedding-events-section .reception-card { padding: 20px 14px 18px !important;
    border-radius: 23px !important; }
  .wedding-events-section .reception-card::before { inset: 7px !important;
    border-radius: 17px !important; }
}
.wedding-events-section .reception-card-date { display: block !important;
  white-space: nowrap !important;
  font: 600 clamp(25px, 6.5vw, 31px)/1.02 var(--font-serif) !important;
  letter-spacing: .035em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important; }
.ceremony-journey-section .ceremony-date-row { display: grid !important;
  grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr) !important;
  align-items: center !important;
  column-gap: 0 !important; }
.ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font: 600 clamp(19px, 5vw, 25px)/1.05 var(--font-serif) !important;
  letter-spacing: .015em !important; }
.ceremony-journey-section .ceremony-day { min-width: 78px !important;
  padding: 2px 10px !important;
  font: 600 clamp(40px, 10.3vw, 50px)/.96 var(--font-serif) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important; }
@media (max-width: 390px) {
  .ceremony-journey-section .ceremony-date-row { grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr) !important; }
  .ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { min-height: 42px !important;
    font: 600 clamp(17px, 4.7vw, 21px)/1.04 var(--font-serif) !important; }
  .wedding-events-section .reception-card-date { font-size: clamp(23px, 6.2vw, 28px) !important; }
}
.wedding-events-section .reception-card-date { display: block !important;
  white-space: nowrap !important;
  color: var(--gold) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(20px, 5.55vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: .055em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important; }
.ceremony-journey-section .ceremony-date-row { width: min(100%, 336px) !important;
  max-width: 336px !important;
  margin: 0 auto 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 0 !important; }
.ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  padding: 0 3px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: #111 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(14px, 3.82vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important; }
.ceremony-journey-section .ceremony-day { width: 74px !important;
  min-width: 74px !important;
  height: 58px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8a070a !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(34px, 9.5vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  border-left: 2px solid rgba(26, 21, 19, .68) !important;
  border-right: 2px solid rgba(26, 21, 19, .68) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important; }
@media (max-width: 390px) {
  .wedding-events-section .reception-card-date { font-size: clamp(19px, 5.25vw, 24px) !important;
    letter-spacing: .045em !important; }
  .ceremony-journey-section .ceremony-date-row { width: min(100%, 312px) !important;
    max-width: 312px !important;
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) !important; }
  .ceremony-journey-section .ceremony-month, .ceremony-journey-section .ceremony-year { height: 45px !important;
    font-size: clamp(12.5px, 3.55vw, 15px) !important;
    letter-spacing: .01em !important; }
  .ceremony-journey-section .ceremony-day { width: 68px !important;
    min-width: 68px !important;
    height: 54px !important;
    font-size: clamp(31px, 8.9vw, 40px) !important; }
}

/* ---- sections/06-family-couple-gallery-motion.css ---- */
/* Optimized section: 06-family-couple-gallery-motion.css. Generated from safe CSS prune. */
:root { --paper: #f7f0e6;
  --paper-soft: #fcf7f0; }
body { background: #f6eee1 !important; }
.invite, .section, .paper-section { background: var(--paper) !important; }
.wedding-events-section .reception-card { background: linear-gradient(180deg, rgba(251,245,235,.98), rgba(241,229,208,.98)) !important;
  border: 1px solid rgba(165, 126, 71, .34) !important;
  box-shadow: 0 12px 28px rgba(94, 74, 43, .10) !important; }
.wedding-events-section .reception-card::before { border-color: rgba(184, 145, 90, .18) !important; }
.wedding-events-section .reception-route-button { background: #b98158 !important;
  box-shadow: 0 8px 18px rgba(154, 110, 67, .18) !important; }
.countdown-grid span { background: linear-gradient(180deg, rgba(219,191,130,.96), rgba(203,171,106,.96)) !important; }
.calendar, .countdown-section .calendar { background: rgba(255, 250, 243, .62) !important; }
.calendar-header span, .countdown-section .calendar-header span { background: rgba(201, 171, 113, .58) !important; }
.family-section { padding-top: 28px !important; }
.family-list.family-invite-card { position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 34px !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: calc(100% + 14px) !important;
  margin: 0 -7px 24px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #111 !important; }
.family-calligraphy { display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  color: #8b0709 !important;
  font: 400 clamp(18px, 5.2vw, 26px)/.98 "Great Vibes", "Dancing Script", cursive !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important; }
.family-calligraphy span { display: block !important;
  transform: rotate(-8deg) !important;
  margin-bottom: 1px !important; }
.family-content { min-width: 0 !important;
  padding: 16px 10px 14px 12px !important;
  border-left: 2px solid #70110e !important;
  background: linear-gradient(180deg, rgba(255,251,243,.42), rgba(244,232,210,.20)) !important; }
.family-side { min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }
.family-side + .family-side { margin-top: 13px !important; }
.family-side h3 { margin: 0 0 8px !important;
  color: #111 !important;
  text-transform: uppercase !important;
  font: 700 clamp(15px, 4.2vw, 20px)/1.05 "Montserrat", sans-serif !important;
  letter-spacing: .015em !important; }
.family-side strong { display: block !important;
  white-space: pre-line !important;
  color: #111 !important;
  font: 700 clamp(13px, 3.7vw, 16px)/1.28 "Montserrat", sans-serif !important;
  letter-spacing: 0 !important; }
.family-side span { display: block !important;
  margin-top: 4px !important;
  color: #2c2724 !important;
  font: 400 clamp(12px, 3.5vw, 15px)/1.22 "Montserrat", sans-serif !important;
  letter-spacing: .01em !important; }
.family-red-mark { position: relative !important;
  min-height: 170px !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #68100f, #7b1712 55%, #5f0d0c) !important;
  box-shadow: 0 10px 22px rgba(92, 35, 19, .16) !important;
  overflow: hidden !important; }
.family-red-mark i { position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: #fff6ef !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.34) !important; }
.family-red-mark b { position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  color: #8a120c !important;
  background: rgba(190, 55, 35, .94) !important;
  font: 700 18px/1 serif !important;
  box-shadow: inset 0 0 0 1px rgba(120, 9, 8, .24), 0 6px 12px rgba(51, 13, 8, .14) !important; }
@media (max-width: 390px) {
  .family-list.family-invite-card { grid-template-columns: 38px minmax(0, 1fr) 30px !important;
    gap: 8px !important;
    width: calc(100% + 10px) !important;
    margin-left: -5px !important;
    margin-right: -5px !important; }
  .family-content { padding: 14px 8px 12px 10px !important; }
  .family-red-mark { min-height: 160px !important; }
  .family-red-mark b { width: 30px !important;
    height: 30px !important;
    font-size: 16px !important; }
}
.family-section { padding-top: 8px !important;
  margin-top: 0 !important; }
.family-section .family-list.family-invite-card { margin-top: 0 !important;
  margin-bottom: 18px !important; }
.family-section .family-calligraphy { align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  color: #9b120f !important;
  font: 500 clamp(20px, 5.3vw, 28px)/.9 "Great Vibes", "Dancing Script", cursive !important; }
.family-section .family-calligraphy span { margin-bottom: -1px !important; }
.family-section .family-content, .family-section .family-side { text-align: left !important; }
.family-section .family-content { padding: 12px 10px 11px 12px !important; }
.family-section .family-side + .family-side { margin-top: 10px !important; }
.family-section .family-side h3 { margin: 0 0 6px !important;
  text-align: left !important;
  font: 700 clamp(13px, 3.7vw, 16px)/1.02 "Montserrat", sans-serif !important;
  letter-spacing: .01em !important; }
.family-section .family-side strong { text-align: left !important;
  font: 700 clamp(11px, 3.15vw, 13px)/1.24 "Montserrat", sans-serif !important; }
.family-section .family-side span { text-align: left !important;
  margin-top: 3px !important;
  font: 400 clamp(11px, 3.05vw, 13px)/1.18 "Montserrat", sans-serif !important; }
.family-section .family-red-mark { min-height: 152px !important; }
.family-section .family-red-mark b { bottom: 14px !important; }
@media (max-width: 390px) {
  .family-section { padding-top: 6px !important; }
  .family-section .family-list.family-invite-card { margin-bottom: 16px !important; }
  .family-section .family-content { padding: 10px 8px 10px 10px !important; }
  .family-section .family-side h3 { font-size: 12px !important; }
  .family-section .family-side strong { font-size: 10.5px !important; }
  .family-section .family-side span { font-size: 10.5px !important; }
  .family-section .family-red-mark { min-height: 145px !important; }
}
.family-section { padding-top: 0 !important;
  margin-top: -18px !important; }
.family-section .family-list.family-invite-card { width: calc(100% + 48px) !important;
  margin: -4px -24px 18px !important;
  grid-template-columns: 44px minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  align-items: start !important; }
.family-section .family-calligraphy { margin-top: -10px !important;
  align-self: start !important;
  color: #b10f10 !important;
  font: 500 clamp(22px, 5.6vw, 30px)/.88 "Great Vibes", "Dancing Script", cursive !important; }
.family-section .family-content { padding: 10px 10px 10px 12px !important; }
.family-section .family-side h3 { font-size: clamp(12px, 3.5vw, 15px) !important;
  margin-bottom: 5px !important; }
.family-section .family-side strong { font-size: clamp(10.5px, 3.05vw, 12.5px) !important; }
.family-section .family-side span { font-size: clamp(10.5px, 3vw, 12.5px) !important; }
.family-section .family-red-mark { min-height: 150px !important; }
@media (max-width: 390px) {
  .family-section { margin-top: -14px !important; }
  .family-section .family-list.family-invite-card { width: calc(100% + 48px) !important;
    margin: -2px -24px 16px !important;
    grid-template-columns: 40px minmax(0, 1fr) 34px !important;
    gap: 6px !important; }
  .family-section .family-calligraphy { margin-top: -8px !important;
    font-size: 22px !important; }
  .family-section .family-content { padding: 9px 8px 9px 10px !important; }
}
.family-section { padding-top: 0 !important;
  margin-top: -20px !important;
  align-items: stretch !important; }
.family-section .family-calligraphy-top { display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: calc(100% + 48px) !important;
  margin: -8px -24px 4px !important;
  padding-left: 6px !important;
  color: #b30f11 !important;
  font: 500 clamp(22px, 5.7vw, 30px)/.88 "Great Vibes", "Dancing Script", cursive !important; }
.family-section .family-calligraphy-top span { display: block !important;
  margin: 0 0 -2px !important;
  transform: rotate(-8deg) !important; }
.family-section .family-list.family-invite-card { width: calc(100% + 48px) !important;
  margin: 0 -24px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  align-items: stretch !important; }
.family-section .family-list .family-calligraphy { display: none !important; }
.family-section .family-content { padding: 8px 10px 10px 14px !important;
  border-left: 0 !important;
  background: transparent !important; }
.family-section .family-red-mark { min-height: 154px !important; }
.family-section .family-side + .family-side { margin-top: 10px !important; }
.family-section .family-side h3 { font-size: clamp(12px, 3.5vw, 15px) !important; }
.family-section .family-side strong, .family-section .family-side span { text-align: left !important; }
@media (max-width: 390px) {
  .family-section { margin-top: -16px !important; }
  .family-section .family-calligraphy-top { width: calc(100% + 48px) !important;
    margin: -6px -24px 2px !important;
    padding-left: 4px !important;
    font-size: 22px !important; }
  .family-section .family-list.family-invite-card { width: calc(100% + 48px) !important;
    margin: 0 -24px 16px !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important; }
  .family-section .family-content { padding: 8px 8px 9px 10px !important; }
  .family-section .family-red-mark { min-height: 146px !important; }
}
.family-section { margin-top: 0 !important;
  padding-top: 4px !important;
  position: relative !important;
  z-index: 6 !important;
  align-items: stretch !important;
  overflow: visible !important; }
.family-section .family-calligraphy-top { position: relative !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: calc(100% + 48px) !important;
  margin: 0 -24px 6px !important;
  padding-left: 9px !important;
  color: #b10f10 !important;
  text-shadow: none !important;
  font: 500 clamp(22px, 5.8vw, 30px)/1 "Great Vibes", "Dancing Script", cursive !important; }
.family-section .family-calligraphy-top span { display: inline-block !important;
  margin: 0 !important;
  transform: rotate(-6deg) !important; }
.family-section .family-list.family-invite-card { position: relative !important;
  z-index: 6 !important;
  width: calc(100% + 48px) !important;
  margin: 0 -24px 18px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  align-items: stretch !important;
  background: rgba(255, 249, 239, .40) !important;
  border-top: 1px solid rgba(137, 82, 38, .20) !important;
  border-bottom: 1px solid rgba(137, 82, 38, .20) !important;
  box-shadow: none !important; }
.family-section .family-content { min-width: 0 !important;
  padding: 9px 10px 10px 14px !important;
  text-align: left !important;
  background: rgba(255, 252, 245, .52) !important;
  border: 1px solid rgba(135, 85, 43, .26) !important;
  border-left: 2px solid #8a1713 !important;
  box-sizing: border-box !important; }
.family-section .family-side, .family-section .family-side h3, .family-section .family-side strong, .family-section .family-side span { text-align: left !important; }
.family-section .family-side + .family-side { margin-top: 10px !important; }
.family-section .family-side h3 { margin: 0 0 5px !important;
  font: 700 clamp(12px, 3.5vw, 15px)/1.05 "Montserrat", sans-serif !important;
  color: #111 !important;
  letter-spacing: .01em !important; }
.family-section .family-side strong { font: 700 clamp(10.5px, 3.05vw, 12.5px)/1.22 "Montserrat", sans-serif !important;
  color: #111 !important; }
.family-section .family-side span { margin-top: 3px !important;
  font: 400 clamp(10.5px, 3vw, 12.5px)/1.18 "Montserrat", sans-serif !important;
  color: #2b2522 !important; }
.family-section .family-red-mark { min-height: 150px !important;
  box-shadow: none !important; }
@media (max-width: 390px) {
  .family-section { margin-top: 0 !important;
    padding-top: 3px !important; }
  .family-section .family-calligraphy-top { width: calc(100% + 48px) !important;
    margin: 0 -24px 4px !important;
    padding-left: 8px !important;
    font-size: 22px !important; }
  .family-section .family-list.family-invite-card { width: calc(100% + 48px) !important;
    margin: 0 -24px 16px !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important; }
  .family-section .family-content { padding: 8px 8px 9px 10px !important; }
  .family-section .family-red-mark { min-height: 144px !important; }
}
.family-section { margin-top: 0 !important;
  padding-top: 2px !important; }
.family-section .family-calligraphy-top { display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: calc(100% + 48px) !important;
  margin: 0 -24px 4px !important;
  padding-left: 8px !important;
  color: #b29463 !important;
  font: 500 clamp(18px, 4.8vw, 24px)/.88 "Great Vibes", "Dancing Script", cursive !important;
  letter-spacing: 0 !important; }
.family-section .family-calligraphy-top span { display: block !important;
  margin: 0 0 -2px !important;
  transform: none !important; }
.family-section .family-list.family-invite-card { background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important; }
.family-section .family-content { background: transparent !important;
  border: 0 !important;
  border-left: 2px solid #a7a29d !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 10px 10px 12px !important; }
.family-section .family-side + .family-side { margin-top: 10px !important; }
.family-section .family-side h3 { font: 700 clamp(11px, 3.3vw, 14px)/1.05 "Montserrat", sans-serif !important; }
.family-section .family-side strong { font: 700 clamp(10px, 2.95vw, 12px)/1.2 "Montserrat", sans-serif !important; }
.family-section .family-side span { font: 400 clamp(10px, 2.9vw, 12px)/1.16 "Montserrat", sans-serif !important; }
@media (max-width: 390px) {
  .family-section .family-calligraphy-top { font-size: 18px !important;
    margin-bottom: 3px !important;
    padding-left: 6px !important; }
  .family-section .family-content { padding: 8px 8px 9px 10px !important; }
  .family-section .family-side h3 { font-size: 10.5px !important; }
  .family-section .family-side strong, .family-section .family-side span { font-size: 9.8px !important; }
}
.name-signature { margin-top: -4px !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 8px !important;
  align-items: center !important; }
.name-signature span { font: 400 clamp(24px, 6.8vw, 31px)/.95 var(--font-name) !important; }
.name-signature i { width: clamp(58px, 18vw, 82px) !important;
  height: clamp(58px, 18vw, 82px) !important; }
.name-signature i::before { content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important; }
.invitation-section { padding-top: 28px !important;
  padding-bottom: 14px !important; }
.invitation-section .section-label { margin-bottom: 8px !important; }
.invitation-section h2 { margin-bottom: 12px !important; }
.interview-section { padding-top: 14px !important;
  padding-bottom: 24px !important; }
.interview-section .signature-word { margin: 0 0 10px !important; }
.interview-photo { margin-top: 18px !important; }
.family-section .family-side h3 { font: 500 clamp(11px, 3.3vw, 14px)/1.05 "Montserrat", sans-serif !important;
  letter-spacing: .01em !important; }
@media (max-width: 390px) {
  .name-signature { gap: 6px !important; }
  .name-signature i { width: 54px !important;
    height: 54px !important; }
  .invitation-section { padding-top: 24px !important;
    padding-bottom: 12px !important; }
  .interview-section { padding-top: 12px !important;
    padding-bottom: 20px !important; }
  .family-section .family-side h3 { font-size: 10.5px !important; }
}
.name-signature { margin-top: 10px !important;
  padding-top: 2px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(52px, 16vw, 68px) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important; }
.name-signature span { display: block !important;
  align-self: center !important; }
.name-signature span:first-child { text-align: left !important; }
.name-signature span:last-child { text-align: right !important; }
.name-signature i { width: clamp(70px, 20vw, 86px) !important;
  height: clamp(70px, 20vw, 86px) !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  transform: translateY(12px) !important; }
.name-signature i::before { background-position: center center !important; }
@media (max-width: 390px) {
  .name-signature { margin-top: 8px !important;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
    column-gap: 8px !important; }
  .name-signature i { width: 54px !important;
    height: 54px !important; }
}
.name-signature { margin-bottom: -20px !important; }
.invitation-section { padding-top: 0 !important;
  margin-top: 0 !important; }
.invitation-section .section-label { margin-top: 0 !important; }
.wedding-events-section > .section-label { display: none !important; }
.wedding-events-section .save-date-script { width: 100% !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #a06424 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65), 0 4px 10px rgba(120, 76, 32, .12) !important; }
.wedding-events-section .save-date-script .save-word, .wedding-events-section .save-date-script .date-word { display: inline-block !important;
  color: #a06424 !important;
  font-family: "Great Vibes", "Dancing Script", cursive !important;
  font-size: clamp(42px, 12.5vw, 64px) !important;
  font-weight: 400 !important;
  line-height: .86 !important;
  letter-spacing: .01em !important; }
.wedding-events-section .save-date-script .the-word { display: inline-block !important;
  margin: 0 -2px !important;
  color: #302a2a !important;
  font-family: "Great Vibes", "Cormorant Garamond", serif !important;
  font-size: clamp(22px, 6vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-4px) rotate(-8deg) !important;
  opacity: .86 !important; }
.wedding-events-section .save-date-script .save-word { transform: translateY(-1px) rotate(-3deg) !important; }
.wedding-events-section .save-date-script .date-word { transform: translateY(2px) rotate(-1deg) !important; }
.wedding-events-section .split-main-title { margin-top: 2px !important; }
@media (max-width: 390px) {
  .wedding-events-section .save-date-script { gap: 6px !important;
    margin-bottom: 8px !important; }
  .wedding-events-section .save-date-script .save-word, .wedding-events-section .save-date-script .date-word { font-size: clamp(38px, 11.5vw, 52px) !important; }
  .wedding-events-section .save-date-script .the-word { font-size: clamp(19px, 5.5vw, 25px) !important; }
}
.name-signature span { font-family: "Dancing Script", cursive !important;
  font-weight: 300 !important;
  font-size: clamp(20px, 4vw, 30px) !important;
  line-height: 0.95 !important;
  color: #7a552e !important;
  letter-spacing: 0 !important; }
.invite { overflow-x: hidden !important; }
.family-section, .gallery-section { overflow-x: hidden !important; }
.photo-card { overflow: visible !important; }
.photo-card img { border-radius: 18px !important;
  box-shadow: 0 16px 30px rgba(70, 48, 36, .22), 0 4px 10px rgba(70, 48, 36, .12) !important;
  transition: transform .95s cubic-bezier(.18,.82,.25,1), opacity .95s ease, filter .95s ease !important;
  will-change: transform, opacity; }
.gallery-feature { border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 34px rgba(70, 48, 36, .20), 0 5px 12px rgba(70, 48, 36, .10) !important; }
.gallery-feature img { border-radius: 22px !important;
  box-shadow: none !important;
  transition: transform 1s cubic-bezier(.18,.82,.25,1), opacity 1s ease, filter 1s ease !important;
  will-change: transform, opacity; }
.masonry-gallery img { border-radius: 16px !important;
  box-shadow: 0 12px 24px rgba(70, 48, 36, .18), 0 3px 9px rgba(70, 48, 36, .12) !important;
  transition: transform .95s cubic-bezier(.18,.82,.25,1), opacity .95s ease, filter .95s ease !important;
  will-change: transform, opacity; }
.family-section.reveal:not(.is-visible) .left-card img, .gallery-section.reveal:not(.is-visible) .gallery-feature img, .gallery-section.reveal:not(.is-visible) .masonry-gallery img:nth-child(odd) { opacity: 0 !important;
  transform: translate3d(-72vw, 0, 0) scale(.94) rotate(-2deg) !important;
  filter: blur(2px) saturate(.9) !important; }
.family-section.reveal:not(.is-visible) .right-card img, .gallery-section.reveal:not(.is-visible) .masonry-gallery img:nth-child(even) { opacity: 0 !important;
  transform: translate3d(72vw, 0, 0) scale(.94) rotate(2deg) !important;
  filter: blur(2px) saturate(.9) !important; }
.family-section.reveal.is-visible .photo-card img, .gallery-section.reveal.is-visible .gallery-feature img, .gallery-section.reveal.is-visible .masonry-gallery img { opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0) !important;
  filter: blur(0) saturate(1) !important; }
.gallery-section.reveal.is-visible .gallery-feature img { transition-delay: .05s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(1) { transition-delay: .12s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(2) { transition-delay: .20s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(3) { transition-delay: .28s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(4) { transition-delay: .36s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(5) { transition-delay: .44s !important; }
.gallery-section.reveal.is-visible .masonry-gallery img:nth-child(6) { transition-delay: .52s !important; }
.family-section.reveal.is-visible .left-card img { transition-delay: .05s !important; }
.family-section.reveal.is-visible .right-card img { transition-delay: .18s !important; }
@media (max-width: 390px) {
  .photo-card img { border-radius: 16px !important;
    box-shadow: 0 13px 24px rgba(70, 48, 36, .20), 0 3px 8px rgba(70, 48, 36, .12) !important; }
  .gallery-feature { border-radius: 18px !important; }
  .gallery-feature img { border-radius: 18px !important; }
  .masonry-gallery img { border-radius: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card img, .gallery-feature img, .masonry-gallery img { transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important; }
}
.gallery-section .gallery-feature img, .gallery-section .masonry-gallery img, .gallery-section .gallery-fly-image { transition-property: transform, opacity, filter !important;
  transition-duration: 1.75s !important;
  transition-timing-function: cubic-bezier(.16,.82,.22,1) !important;
  will-change: transform, opacity, filter !important; }
.gallery-section .gallery-feature img { --fly-x: -82vw;
  --fly-delay: .55s; }
.gallery-section .masonry-gallery img:nth-child(odd) { --fly-x: -82vw; }
.gallery-section .masonry-gallery img:nth-child(even) { --fly-x: 82vw; }
.gallery-section .masonry-gallery img:nth-child(1) { --fly-delay: .80s; }
.gallery-section .masonry-gallery img:nth-child(2) { --fly-delay: 1.05s; }
.gallery-section .masonry-gallery img:nth-child(3) { --fly-delay: 1.30s; }
.gallery-section .masonry-gallery img:nth-child(4) { --fly-delay: 1.55s; }
.gallery-section .masonry-gallery img:nth-child(5) { --fly-delay: 1.80s; }
.gallery-section .masonry-gallery img:nth-child(6) { --fly-delay: 2.05s; }
.gallery-section .masonry-gallery img:nth-child(7) { --fly-delay: 2.30s; }
.gallery-section .masonry-gallery img:nth-child(8) { --fly-delay: 2.55s; }
.gallery-section .masonry-gallery img:nth-child(9) { --fly-delay: 2.80s; }
.gallery-section .masonry-gallery img:nth-child(10) { --fly-delay: 3.05s; }
.gallery-section .masonry-gallery img:nth-child(n/**/+11) { --fly-delay: 3.25s; }
.gallery-section.reveal:not(.is-visible) .gallery-feature img, .gallery-section.reveal:not(.is-visible) .masonry-gallery img, .gallery-section.reveal:not(.is-visible) .gallery-fly-image { opacity: 0 !important;
  transform: translate3d(var(--fly-x, -82vw), 16px, 0) scale(.90) rotate(-1.6deg) !important;
  filter: blur(3px) saturate(.86) !important;
  transition-delay: 0s !important; }
.gallery-section.reveal.is-visible .gallery-feature img, .gallery-section.reveal.is-visible .masonry-gallery img, .gallery-section.reveal.is-visible .gallery-fly-image { opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0) !important;
  filter: blur(0) saturate(1) !important;
  transition-delay: var(--fly-delay, .85s) !important; }
.family-section.reveal:not(.is-visible) .photo-card img { transition-duration: 1.65s !important; }
.family-section.reveal.is-visible .left-card img { transition-delay: .45s !important; }
.family-section.reveal.is-visible .right-card img { transition-delay: .72s !important; }
@media (prefers-reduced-motion: reduce) {
  .gallery-section .gallery-feature img, .gallery-section .masonry-gallery img, .gallery-section .gallery-fly-image { transition-delay: 0s !important; }
}
.family-section .photo-card img.fly-target, .gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { transition-property: transform, opacity, filter !important;
  transition-duration: 1.85s !important;
  transition-timing-function: cubic-bezier(.16,.82,.22,1) !important;
  transition-delay: var(--fly-delay, .65s) !important;
  will-change: transform, opacity, filter !important; }
.family-section .photo-card img.fly-target:not(.is-visible), .gallery-section .gallery-feature img.fly-target:not(.is-visible), .gallery-section .masonry-gallery img.fly-target:not(.is-visible), .gallery-section.reveal.is-visible .gallery-feature img.fly-target:not(.is-visible), .gallery-section.reveal.is-visible .masonry-gallery img.fly-target:not(.is-visible), .family-section.reveal.is-visible .photo-card img.fly-target:not(.is-visible) { opacity: 0 !important;
  transform: translate3d(var(--fly-x, -86vw), 18px, 0) scale(.90) rotate(-1.4deg) !important;
  filter: blur(3px) saturate(.86) !important;
  transition-delay: 0s !important; }
.family-section .photo-card img.fly-target.is-visible, .gallery-section .gallery-feature img.fly-target.is-visible, .gallery-section .masonry-gallery img.fly-target.is-visible, .gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible, .gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible, .family-section.reveal.is-visible .photo-card img.fly-target.is-visible { opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) rotate(0) !important;
  filter: blur(0) saturate(1) !important;
  transition-delay: var(--fly-delay, .65s) !important; }
@media (prefers-reduced-motion: reduce) {
  .family-section .photo-card img.fly-target, .gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { transition-delay: 0s !important;
    transition-duration: .01ms !important; }
}
.family-section .photo-card img.fly-target, .gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { transition-duration: 1.35s !important;
  transition-delay: var(--fly-delay, .35s) !important; }
.family-section .photo-card img.fly-target.is-visible, .gallery-section .gallery-feature img.fly-target.is-visible, .gallery-section .masonry-gallery img.fly-target.is-visible, .gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible, .gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible, .family-section.reveal.is-visible .photo-card img.fly-target.is-visible { transition-delay: var(--fly-delay, .35s) !important; }
.family-section .name-signature span.fly-target-text, .family-section .name-signature i.fly-target-text { opacity: 0;
  transition-property: transform, opacity, filter !important;
  transition-duration: 1.15s !important;
  transition-timing-function: cubic-bezier(.16,.82,.22,1) !important;
  transition-delay: var(--fly-delay, .3s) !important;
  will-change: transform, opacity, filter !important; }
.family-section .name-signature span.fly-target-text:not(.is-visible) { transform: translate3d(var(--fly-x, 0), 10px, 0) scale(.96);
  filter: blur(2px); }
.family-section .name-signature i.fly-target-text:not(.is-visible) { transform: translate3d(0, 16px, 0) scale(.82);
  filter: blur(2px); }
.family-section .name-signature span.fly-target-text.is-visible, .family-section .name-signature i.fly-target-text.is-visible { opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .family-section .name-signature span.fly-target-text, .family-section .name-signature i.fly-target-text, .family-section .photo-card img.fly-target, .gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { transition-duration: .01ms !important;
    transition-delay: 0s !important; }
}
.heart-canvas, #heartCanvas { position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 2147483500 !important; }

/* ---- sections/07-invitation-interview-gallery.css ---- */
/* Optimized section: 07-invitation-interview-gallery.css. Generated from safe CSS prune. */
.invitation-section { padding-top: 12px !important;
  padding-bottom: 24px !important; }
.invitation-section .section-label { margin-bottom: 14px !important; }
.invitation-section h2 { display: none !important; }
.invitation-message-card { width: min(100%, 390px);
  margin: 0 auto 14px;
  padding: 24px 18px 25px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(88, 68, 58, .08);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(70, 47, 39, .08);
  color: #655653;
  font: 400 14px/1.42 "Montserrat", var(--font-sans, sans-serif);
  letter-spacing: -.01em;
  text-align: center; }
.invitation-message-card p { margin: 0; }
.invitation-message-card p + p { margin-top: 19px; }
.invitation-message-highlight { color: #b79a7d !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.45 !important; }
.invitation-message-highlight span { display: inline-block;
  color: #e6202f;
  font-size: 17px;
  line-height: 1;
  transform: translateY(2px);
  filter: drop-shadow(0 1px 1px rgba(80, 30, 30, .22)); }
.calendar-grid .is-wedding { color: #fff !important;
  font-weight: 700 !important;
  position: relative !important;
  z-index: 1 !important;
  text-shadow: 0 1px 2px rgba(120, 35, 45, .22) !important; }
.calendar-grid .is-wedding::before, .countdown-section .calendar-grid .is-wedding::before { content: "" !important;
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: -1 !important;
  filter: drop-shadow(0 3px 5px rgba(120, 35, 45, .18)) !important;
  animation: calendarHeartPulse 1.25s ease-in-out infinite alternate !important; }
.calendar-grid .is-wedding::after, .countdown-section .calendar-grid .is-wedding::after { content: "" !important;
  display: none !important; }
@keyframes calendarHeartPulse { from { transform: translate(-50%, -50%) scale(.94); opacity: .86; }
  to { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@media (max-width: 390px) {
  .invitation-message-card { width: min(100%, 360px);
    padding: 22px 15px 23px;
    font-size: 13px;
    line-height: 1.42; }
  .invitation-message-highlight { font-size: 14px !important; }
  .calendar-grid .is-wedding::before, .countdown-section .calendar-grid .is-wedding::before { width: 34px !important;
    height: 34px !important; }
}
.invitation-section, .invitation-section.paper-section { background: var(--paper) !important; }
.invitation-message-card { width: min(100%, 390px) !important;
  margin: 0 auto 10px !important;
  padding: 18px 14px 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important; }
.invitation-section .ornament-line { margin-top: 4px !important; }
.interview-section { padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  background: var(--paper) !important;
  overflow: hidden !important; }
.interview-section .signature-word { margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important; }
.story-transition-strip { width: 100% !important;
  min-height: 52px !important;
  margin: 18px 0 0 !important;
  padding: 17px 22px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(31px, 10vw, 54px) !important;
  background: var(--paper) !important;
  border-top: 1px solid rgba(151, 103, 85, .16) !important;
  border-bottom: 0 !important;
  color: #c8a9a0 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .48em !important;
  text-transform: uppercase !important;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease .08s, transform 1s cubic-bezier(.16,.82,.22,1) .08s !important; }
.interview-section.is-visible .story-transition-strip { opacity: 1;
  transform: translateY(0); }
.interview-photo.story-quote-photo { position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  box-shadow: none !important; }
.interview-photo.story-quote-photo img { display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10.25 !important;
  min-height: 296px !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(.94) contrast(.98) brightness(.88) !important;
  transform: scale(1.018);
  transition: transform 5.5s ease, filter 1.4s ease !important; }
.interview-section.is-visible .interview-photo.story-quote-photo img { transform: scale(1.055); }
.interview-photo.story-quote-photo::after { content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(24, 17, 14, .20), rgba(24, 17, 14, .34)), rgba(0, 0, 0, .16) !important; }
.interview-photo-quote { position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  width: min(86%, 360px) !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: clamp(14px, 3.7vw, 16px) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.44) !important;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 24px)) scale(.96);
  transition: opacity 1.05s ease .42s, transform 1.05s cubic-bezier(.16,.82,.22,1) .42s !important; }
.interview-section.is-visible .interview-photo-quote { opacity: 1;
  transform: translate(-50%, -50%) scale(1); }
@media (max-width: 390px) {
  .invitation-message-card { padding-left: 10px !important;
    padding-right: 10px !important; }
  .story-transition-strip { gap: 24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 10px !important;
    letter-spacing: .42em !important; }
  .interview-photo.story-quote-photo img { min-height: 286px !important; }
}
.interview-photo-quote { top: 50% !important;
  width: min(94%, 620px) !important;
  max-width: none !important;
  font-size: clamp(10px, 2.4vw, 13px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translate(-50%, calc(-50% + 34px)) scale(.985) !important;
  transition: opacity .9s ease .18s, transform .95s cubic-bezier(.16,.82,.22,1) .18s !important; }
.interview-section.is-visible .interview-photo-quote { opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important; }
.interview-poem-card { width: 100% !important;
  margin: 22px 0 4px !important;
  padding: 6px 6px 2px !important;
  text-align: center !important; }
.interview-poem-vi { margin: 0 0 16px !important;
  color: #8c6032 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(16px, 4.8vw, 21px) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s ease .12s, transform .95s cubic-bezier(.16,.82,.22,1) .12s !important; }
.interview-poem-en { margin: 0 !important;
  color: #c7b8be !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: clamp(10px, 2.8vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: .08em !important;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease .3s, transform .95s cubic-bezier(.16,.82,.22,1) .3s !important; }
.interview-section.is-visible .interview-poem-vi, .interview-section.is-visible .interview-poem-en { opacity: 1;
  transform: translateY(0); }
.gallery-transition-strip { width: 100% !important;
  min-height: 52px !important;
  margin: 12px 0 18px !important;
  padding: 17px 22px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 10vw, 54px) !important;
  background: var(--paper) !important;
  border-top: 1px solid rgba(151, 103, 85, .16) !important;
  border-bottom: 1px solid rgba(151, 103, 85, .08) !important;
  color: #c8b49e !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .48em !important;
  text-transform: uppercase !important;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .95s ease .08s, transform .95s cubic-bezier(.16,.82,.22,1) .08s !important; }
.gallery-section.is-visible .gallery-transition-strip { opacity: 1;
  transform: translateY(0); }
@media (max-width: 390px) {
  .interview-photo-quote { width: min(96%, 96%) !important;
    font-size: 9.4px !important; }
  .interview-poem-card { margin-top: 18px !important;
    padding-left: 2px !important;
    padding-right: 2px !important; }
  .interview-poem-vi { font-size: 14px !important;
    line-height: 1.78 !important; }
  .interview-poem-en { font-size: 9.5px !important;
    letter-spacing: .05em !important; }
  .gallery-transition-strip { gap: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 10px !important;
    letter-spacing: .32em !important; }
}
:root { --sample-gold: #baa58a;
  --sample-light-gold: #d4c5b3;
  --sample-bg: #fbfaf7;
  --sample-stone: #57534e;
  --sample-border: rgba(231, 229, 228, .78); }
.invitation-message-card { width: min(100%, 390px) !important;
  margin: 4px auto 10px !important;
  padding: 24px 22px 25px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid var(--sample-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(68, 64, 60, .055) !important;
  color: var(--sample-stone) !important;
  font-family: "Quicksand", var(--font-sans, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
  letter-spacing: 0 !important; }
.invitation-message-card p + p { margin-top: 22px !important; }
.invitation-message-highlight { color: var(--sample-gold) !important;
  font-size: 15px !important;
  font-family: "Quicksand", var(--font-sans, sans-serif) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important; }
.invitation-message-highlight span { color: #e6202f !important;
  font-size: 17px !important;
  transform: translateY(2px) !important; }
.interview-section, .interview-section.paper-section { padding: 38px 0 0 !important;
  background: var(--sample-bg) !important;
  overflow: hidden !important; }
.interview-section .signature-word { margin: 0 auto 18px !important;
  padding: 0 24px !important; }
.story-transition-strip, .gallery-transition-strip { min-height: 53px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  padding: 16px 14px !important;
  color: var(--sample-light-gold) !important;
  font-family: "Quicksand", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  border-top: 1px solid rgba(231, 229, 228, .86) !important;
  border-bottom: 1px solid rgba(231, 229, 228, .86) !important;
  box-shadow: none !important; }
.story-transition-strip { width: 100% !important;
  margin: 0 !important;
  background: #fff !important; }
.story-transition-strip span, .gallery-transition-strip span { display: inline-block !important;
  white-space: nowrap !important; }
.interview-photo.story-quote-photo { position: relative !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
  box-shadow: none !important; }
.interview-photo.story-quote-photo img { display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(.94) contrast(.98) brightness(.82) !important;
  transform: scale(1.01) !important;
  transition: transform 5.5s ease, filter 1.2s ease !important; }
.interview-section.is-visible .interview-photo.story-quote-photo img { transform: scale(1.045) !important; }
.interview-photo.story-quote-photo::after { content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(0,0,0,.35) !important;
  pointer-events: none !important; }
.interview-photo-quote { position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: calc(100% - 22px) !important;
  margin: 0 !important;
  padding: 0 2px !important;
  color: #fff !important;
  font-family: "Quicksand", var(--font-sans, sans-serif) !important;
  font-size: clamp(10px, 2.55vw, 12.5px) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.55) !important;
  opacity: 0 !important;
  transform: translate(-50%, calc(-50% + 28px)) !important;
  transition: opacity 1s ease .18s, transform 1s cubic-bezier(.16, 1, .3, 1) .18s !important; }
.interview-section.is-visible .interview-photo-quote { opacity: 1 !important;
  transform: translate(-50%, -50%) !important; }
.interview-poem-card { width: 100% !important;
  margin: 0 !important;
  padding: 56px 24px 48px !important;
  background: #fff !important;
  border: 0 !important;
  text-align: center !important; }
.interview-poem-vi { margin: 0 !important;
  color: #57534e !important;
  font-family: "Playfair Display", var(--font-serif) !important;
  font-size: 16px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 2.05 !important;
  letter-spacing: 0 !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 1.2s cubic-bezier(.16, 1, .3, 1) .08s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .08s !important; }
.interview-poem-en { display: block !important;
  margin: 20px 0 0 !important;
  color: #a8a29e !important;
  font-family: "Quicksand", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 1px !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 1.2s cubic-bezier(.16, 1, .3, 1) .22s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .22s !important; }
.interview-section.is-visible .interview-poem-vi, .interview-section.is-visible .interview-poem-en { opacity: 1 !important;
  transform: translateY(0) !important; }
.gallery-section, .gallery-section.paper-section { background: var(--sample-bg) !important;
  padding-top: 36px !important; }
.gallery-section .section-label { margin-bottom: 18px !important; }
.gallery-transition-strip { width: calc(100% + 48px) !important;
  margin: 0 -24px 24px !important;
  background: var(--sample-bg) !important; }
.gallery-feature { margin-top: 0 !important; }
@media (max-width: 390px) {
  .invitation-message-card { padding: 22px 16px 23px !important;
    font-size: 13px !important; }
  .invitation-message-highlight { font-size: 14px !important; }
  .story-transition-strip, .gallery-transition-strip { gap: 27px !important;
    font-size: 10px !important;
    letter-spacing: 3.4px !important;
    padding-left: 10px !important;
    padding-right: 10px !important; }
  .interview-photo.story-quote-photo { height: 320px !important;
    min-height: 320px !important; }
  .interview-photo-quote { font-size: 9.2px !important;
    max-width: calc(100% - 14px) !important; }
  .interview-poem-card { padding: 50px 18px 42px !important; }
  .interview-poem-vi { font-size: 15px !important;
    line-height: 2.02 !important; }
  .interview-poem-en { font-size: 9.5px !important;
    letter-spacing: .85px !important; }
}
.wedding-events-section .reception-card { background: #ffffff !important;
  border: 1px solid rgba(189, 167, 132, 0.14) !important;
  box-shadow: 0 12px 28px rgba(94, 74, 43, 0.08) !important; }
.wedding-events-section .reception-card::before { content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important; }

/* ---- sections/08-countdown-rsvp-gift.css ---- */
/* Optimized section: 08-countdown-rsvp-gift.css. Generated from safe CSS prune. */
.countdown-section { position: relative !important;
  overflow: hidden !important;
  padding: 16px 10px 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  isolation: isolate !important; }
.countdown-section::before { content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: clamp(520px, 96vw, 730px) !important;
  background: url("https://i.postimg.cc/VNYL1Pyz/IMG-1672.jpg") center center / cover no-repeat !important;
  border-radius: 18px 18px 0 0 !important;
  z-index: 0 !important; }
.countdown-section::after { content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: clamp(520px, 96vw, 730px) !important;
  background: linear-gradient(180deg, rgba(245,240,233,.12) 0%, rgba(42,28,21,.14) 38%, rgba(245,240,233,.18) 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  z-index: 1 !important;
  pointer-events: none !important; }
.countdown-section > .countdown-grid, .countdown-section > .inline-calendar, .countdown-section > .ending-card { position: relative !important;
  z-index: 2 !important; }
.countdown-section > .countdown-grid { width: calc(100% - 8px) !important;
  max-width: 372px !important;
  margin: 318px auto 16px !important;
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 34px rgba(50, 31, 24, .16) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; }
.countdown-grid span { min-height: 66px !important;
  border-radius: 14px !important;
  background: rgba(148, 12, 14, .80) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(48, 26, 18, .14) !important; }
.countdown-grid span::before, .countdown-grid span::after { content: none !important;
  display: none !important; }
.countdown-grid b { color: #fff9f4 !important;
  text-shadow: 0 2px 8px rgba(40,20,18,.18) !important; }
.countdown-grid small { color: rgba(255,248,239,.98) !important; }
.countdown-section > .inline-calendar { width: calc(100% - 8px) !important;
  margin: 0 auto !important;
  padding: 12px 8px 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 18px 34px rgba(50,31,24,.14) !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) !important; }
.countdown-section .calendar { margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important; }
.countdown-section .calendar::before, .countdown-section .calendar::after { content: none !important; }
.countdown-section .calendar-header span { background: rgba(244, 231, 208, .42) !important;
  color: #4a3427 !important; }
.countdown-section .calendar-grid span { background: rgba(255,255,255,.04) !important;
  color: #55423a !important;
  border-top: 1px solid rgba(255,255,255,.16) !important; }
.countdown-section .calendar-grid .is-muted { color: rgba(85,66,58,.50) !important; }
.countdown-section .calendar-grid .is-wedding { color: #fff !important; }
.countdown-section .ending-card { margin-top: 18px !important; }
@media (max-width: 540px) {
  .countdown-section { padding: 14px 6px 0 !important;
    border-radius: 16px !important; }
  .countdown-section::before, .countdown-section::after { height: 136vw !important;
    border-radius: 16px 16px 0 0 !important; }
  .countdown-section > .countdown-grid { margin-top: 294px !important;
    width: calc(100% - 4px) !important;
    padding: 10px !important; }
  .countdown-section > .inline-calendar { width: calc(100% - 4px) !important; }
}
.countdown-section::before { background: none !important; }
@media (max-width: 540px) {
  .countdown-section::before { background: none !important; }
}
.countdown-section { position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 24px 10px 20px !important;
  border-radius: 18px !important;
  background: none !important; }
.countdown-section::before { content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.10) 58%, rgba(255,255,255,.18) 100%) !important;
  z-index: 0 !important; }
.countdown-section > * { position: relative !important;
  z-index: 1 !important; }
.countdown-hero-title { margin: 0 0 18px !important;
  text-align: center !important;
  color: #fff !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(26px, 9vw, 46px) !important;
  font-weight: 500 !important;
  line-height: .95 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.25) !important; }
.countdown-section > .countdown-grid { width: calc(100% - 8px) !important;
  max-width: 372px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; }
.countdown-grid span { min-height: 66px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.88) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; }
.countdown-grid b { color: #8b1d14 !important;
  text-shadow: none !important;
  font-size: 24px !important; }
.countdown-grid small { color: #8b1d14 !important;
  font-size: 10px !important;
  font-weight: 500 !important; }
.countdown-section > .inline-calendar { width: calc(100% - 8px) !important;
  margin: 0 auto !important;
  padding: 12px 8px 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 18px 34px rgba(35, 20, 15, .12) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important; }
.countdown-section .calendar { margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: none !important; }
.countdown-section .calendar::before, .countdown-section .calendar::after { content: none !important; }
.countdown-section .calendar-header span { background: rgba(249, 240, 223, .52) !important;
  color: #5a4438 !important; }
.countdown-section .calendar-grid span { background: rgba(255,255,255,.06) !important;
  color: #5a4438 !important;
  border-top: 1px solid rgba(255,255,255,.18) !important; }
.countdown-section .calendar-grid .is-muted { color: rgba(90, 68, 56, .52) !important; }
.countdown-section .calendar-grid .is-wedding { color: #fff !important; }
.countdown-section .ending-card { margin-top: 18px !important; }
@media (max-width: 540px) {
  .countdown-section { padding: 22px 6px 18px !important;
    border-radius: 16px !important;
    background-position: center top !important; }
  .countdown-hero-title { margin-bottom: 14px !important;
    font-size: 28px !important; }
  .countdown-section > .countdown-grid { width: calc(100% - 4px) !important;
    gap: 6px !important; }
  .countdown-grid span { min-height: 62px !important; }
  .countdown-section > .inline-calendar { width: calc(100% - 4px) !important; }
}
.countdown-sample-quote { max-width: 380px !important;
  margin: 20px auto 22px !important;
  padding: 0 16px !important;
  color: rgba(255,255,255,.92) !important;
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(12px, 3.2vw, 15px) !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.34) !important; }
.calendar-sample-quote { max-width: 320px !important;
  margin: 26px auto 0 !important;
  color: #5f4639 !important;
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(12px, 3.35vw, 15px) !important;
  font-style: italic !important;
  line-height: 1.8 !important; }
.sweet-transition-strip { width: 100% !important;
  min-height: 50px !important;
  padding: 15px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(26px, 9vw, 50px) !important;
  background: #fff !important;
  border-top: 1px solid rgba(151, 103, 85, .10) !important;
  border-bottom: 1px solid rgba(151, 103, 85, .10) !important;
  color: #d4c5b3 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .42em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-align: center !important; }
.sweet-invitation-section { width: 100% !important;
  padding: 52px 24px 58px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; }
.sweet-top-quote { max-width: 360px !important;
  margin: 0 auto 42px !important;
  color: #6e625d !important;
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 2 !important; }
.rsvp-card, .gift-panel { width: 100% !important;
  max-width: 360px !important; }
.rsvp-card { padding: 24px !important;
  background: var(--paper) !important;
  border: 1px solid rgba(151, 103, 85, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(72,49,42,.08) !important; }
.rsvp-card h4 { margin: 0 0 22px !important;
  color: #332821 !important;
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important; }
.rsvp-form { display: grid !important;
  gap: 18px !important; }
.rsvp-field { display: grid !important;
  gap: 8px !important;
  text-align: left !important; }
.rsvp-field label, .rsvp-label { color: #8a7d75 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important; }
.rsvp-field input[type="text"], .rsvp-field input[type="tel"], .rsvp-field select, .rsvp-field textarea { width: 100% !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(151,103,85,.16) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #332821 !important;
  font-size: 14px !important;
  outline: none !important; }
.rsvp-field textarea { min-height: 96px !important;
  resize: vertical !important;
  line-height: 1.6 !important; }
.rsvp-field.is-hidden { display: none !important; }
.rsvp-field.is-invalid input, .rsvp-field.is-invalid select, .rsvp-field.is-invalid textarea { border-color: rgba(202, 70, 82, .72) !important;
  box-shadow: 0 0 0 3px rgba(202, 70, 82, .10) !important; }
.rsvp-field input[type="text"]:focus, .rsvp-field input[type="tel"]:focus, .rsvp-field select:focus, .rsvp-field textarea:focus { border-color: rgba(186, 165, 138, .9) !important;
  box-shadow: 0 0 0 3px rgba(186,165,138,.12) !important; }
.rsvp-radio { display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #5f514b !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important; }
.rsvp-radio input { accent-color: #baa58a !important; }
.rsvp-submit { width: 100% !important;
  margin-top: 2px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #baa58a !important;
  color: #fff !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(186,165,138,.22) !important; }
.rsvp-submit:focus-visible, .calendar-action:focus-visible, .route-button:focus-visible, .gift-present-button:focus-visible { outline: 3px solid rgba(184, 79, 99, .34) !important;
  outline-offset: 3px !important; }
.rsvp-submit:disabled { cursor: not-allowed !important;
  opacity: .72 !important;
  box-shadow: none !important; }
.rsvp-form.is-loading .rsvp-submit::after { content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  margin-left: 8px !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  vertical-align: -2px !important;
  animation: rsvpSpin .8s linear infinite !important; }
.rsvp-status { min-height: 18px !important;
  margin: -4px 0 0 !important;
  color: #8a7d75 !important;
  text-align: center !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.45 !important; }
.rsvp-status[data-type="error"] { color: #b94f5b !important; }
.rsvp-status[data-type="success"] { color: #6f8b5f !important; }
.rsvp-toast { position: sticky !important;
  bottom: 92px !important;
  z-index: 40 !important;
  width: min(320px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  background: rgba(70, 52, 45, .92) !important;
  color: #fff !important;
  text-align: center !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 28px rgba(65, 43, 35, .18) !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
  transition: opacity .24s ease, transform .24s ease !important; }
.rsvp-toast.is-visible { opacity: 1 !important;
  transform: translateY(0) !important; }
@keyframes rsvpSpin { to { transform: rotate(360deg); } }
.gift-panel { margin-top: 46px !important; }
.gift-title { margin-bottom: 14px !important;
  color: #332821 !important;
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important; }
.ending-card-after-sweet { width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important; }
@media (max-width: 390px) {
  .sweet-transition-strip { gap: 18px !important;
    font-size: 9.5px !important;
    letter-spacing: .32em !important;
    padding-left: 10px !important;
    padding-right: 10px !important; }
  .sweet-invitation-section { padding-left: 18px !important;
    padding-right: 18px !important; }
  .countdown-sample-quote, .calendar-sample-quote, .sweet-top-quote { font-size: 12px !important; }
}
.gift-present-panel { text-align: center !important; }
.gift-present-button { position: relative !important;
  width: 100% !important;
  min-height: 126px !important;
  margin: 0 auto !important;
  padding: 22px 18px !important;
  border: 1px solid rgba(186, 165, 138, .26) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7f1 100%) !important;
  box-shadow: 0 16px 36px rgba(92, 72, 52, .11) !important;
  color: #6a4a35 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.gift-present-button::before, .gift-present-button::after { content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important; }
.gift-present-button::before { inset: 10px !important;
  border: 1px dashed rgba(186, 165, 138, .36) !important; }
.gift-present-button::after { width: 76px !important;
  height: 76px !important;
  background: radial-gradient(circle, rgba(255,239,242,.95), rgba(255,239,242,0) 68%) !important;
  top: 12px !important;
  right: 32px !important; }
.gift-present-button:hover, .gift-present-button:focus-visible { transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px rgba(92, 72, 52, .16) !important;
  border-color: rgba(186, 165, 138, .44) !important; }
.gift-present-icon { position: relative !important;
  z-index: 1 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  background: #fff3f1 !important;
  box-shadow: inset 0 0 0 1px rgba(160, 41, 35, .08), 0 10px 18px rgba(156, 68, 55, .12) !important;
  animation: giftFloat 2.8s ease-in-out infinite !important; }
.gift-present-text { position: relative !important;
  z-index: 1 !important;
  color: #8b1d14 !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important; }
.gift-present-button small { position: relative !important;
  z-index: 1 !important;
  color: #8b7668 !important;
  font-size: 12px !important;
  line-height: 1.35 !important; }
@keyframes giftFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); } }
.gift-modal[hidden] { display: none !important; }
.gift-modal { position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .26s ease !important; }
.gift-modal.is-open { opacity: 1 !important;
  pointer-events: auto !important; }
.gift-modal-backdrop { position: absolute !important;
  inset: 0 !important;
  background: rgba(32, 22, 19, .58) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important; }
.gift-modal-card { position: relative !important;
  width: min(100%, 430px) !important;
  max-height: min(86vh, 720px) !important;
  overflow: auto !important;
  padding: 22px 16px 18px !important;
  border-radius: 24px !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(186,165,138,.28) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.28) !important;
  transform: translateY(18px) scale(.97) !important;
  transition: transform .32s cubic-bezier(.16,.82,.22,1) !important; }
.gift-modal.is-open .gift-modal-card { transform: translateY(0) scale(1) !important; }
.gift-modal-close { position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(139, 29, 20, .08) !important;
  color: #8b1d14 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important; }
.gift-modal-head { text-align: center !important;
  padding: 6px 22px 16px !important; }
.gift-modal-icon { display: inline-grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: #fff0ef !important;
  font-size: 30px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 10px 20px rgba(158, 78, 65, .12) !important; }
.gift-modal-head p { margin: 0 0 4px !important;
  color: #baa58a !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important; }
.gift-modal-head h2 { margin: 0 !important;
  color: #5e3c2f !important;
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  line-height: 1.15 !important; }
.gift-modal-head small { display: block !important;
  margin-top: 6px !important;
  color: #8f786c !important;
  font-size: 12px !important;
  line-height: 1.35 !important; }
.gift-account-list { display: grid !important;
  gap: 14px !important; }
.gift-account-card { position: relative !important;
  padding: 15px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(186,165,138,.18) !important;
  box-shadow: 0 12px 30px rgba(92, 72, 52, .08) !important;
  overflow: hidden !important; }
.gift-account-card::before { content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #8b1d14, #d6b36f) !important; }
.gift-account-card.bride::before { background: linear-gradient(180deg, #c17a7a, #d6b36f) !important; }
.gift-account-top { padding-left: 4px !important;
  margin-bottom: 12px !important; }
.gift-account-role { display: inline-flex !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(139,29,20,.08) !important;
  color: #8b1d14 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important; }
.gift-account-card.bride .gift-account-role { background: rgba(193,122,122,.13) !important;
  color: #a75f5f !important; }
.gift-account-top h3 { margin: 8px 0 0 !important;
  color: #53372c !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  line-height: 1.2 !important; }
.gift-account-body { display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important; }
.gift-account-qr-wrap { width: 118px !important;
  aspect-ratio: 1 !important;
  padding: 7px !important;
  border-radius: 16px !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(186,165,138,.22) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.8) !important; }
.gift-account-qr { display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 10px !important; }
.gift-account-info { text-align: left !important;
  min-width: 0 !important; }
.gift-account-info p { margin: 0 0 7px !important;
  color: #6f5b51 !important;
  font-size: 12px !important;
  line-height: 1.25 !important; }
.gift-account-info p:last-child { margin-bottom: 0 !important; }
.gift-account-info span { display: block !important;
  color: #ad9a8b !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important; }
.gift-account-info b { display: block !important;
  color: #3f2d27 !important;
  font-size: 12.5px !important;
  word-break: break-word !important; }
.gift-account-bank { color: #8b1d14 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important; }
.gift-copy-button { width: 100% !important;
  margin-top: 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 14px !important;
  background: #8b1d14 !important;
  color: #fffaf4 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(139,29,20,.18) !important; }
.gift-account-card.bride .gift-copy-button { background: #a75f5f !important;
  box-shadow: 0 10px 22px rgba(167,95,95,.18) !important; }
.gift-copy-toast { height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  color: #218c54 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: opacity .25s ease, height .25s ease, margin .25s ease !important; }
.gift-copy-toast.is-visible { height: 16px !important;
  margin-top: 9px !important;
  opacity: 1 !important; }
.calendar-actions { width: min(100%, 350px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 22px auto 0 !important; }
.calendar-action { min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 9px 8px !important;
  border: 1px solid rgba(151,103,85,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  color: #6a5147 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important; }
.gallery-lightbox[hidden] { display: none !important; }
.gallery-lightbox { position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(24, 18, 17, .88) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease !important; }
.gallery-lightbox.is-open { opacity: 1 !important;
  pointer-events: auto !important; }
.gallery-lightbox img { grid-column: 1 / -1 !important;
  max-width: min(96vw, 920px) !important;
  max-height: 84vh !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  transition: transform .2s ease !important;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  will-change: transform !important; }
.gallery-lightbox.is-zoomed img { cursor: zoom-out !important; }
.gallery-lightbox-close, .gallery-lightbox-nav { position: relative !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  color: #3d2b25 !important;
  cursor: pointer !important;
  font-size: 30px !important; }
.gallery-lightbox-close { position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 42px !important;
  height: 42px !important; }
.gallery-lightbox-nav { width: 44px !important;
  height: 44px !important; }
.gallery-lightbox-nav.prev { grid-column: 1 !important; }
.gallery-lightbox-nav.next { grid-column: 3 !important; }
@media (max-width: 390px) {
  .gift-account-body { grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px !important; }
  .gift-account-qr-wrap { width: 104px !important; }
  .gift-modal-card { padding-left: 12px !important;
    padding-right: 12px !important; }
}
@media (max-width: 768px) {
  .phone-shell { padding: 0 !important; }
  .invite { width: 100% !important;
    max-width: 430px !important;
    height: 100svh !important;
    min-height: 100svh !important;
    border-radius: 0 !important; }
}
@media (max-width: 414px) {
  .sweet-invitation-section { padding-inline: 20px !important; }
  .rsvp-card { padding: 22px 18px !important; }
  .rsvp-radio { align-items: flex-start !important;
    line-height: 1.45 !important; }
  .gift-modal-card, .wish-modal-card { width: min(100% - 24px, 370px) !important; }
}
@media (max-width: 390px) {
  .rsvp-form { gap: 16px !important; }
  .rsvp-field input[type="text"], .rsvp-field select, .rsvp-field textarea, .rsvp-submit { font-size: 13px !important; }
}
@media (max-width: 375px) {
  .sweet-top-quote { font-size: 12px !important;
    line-height: 1.8 !important; }
  .rsvp-card h4, .gift-title { font-size: 18px !important; }
}
@media (max-width: 340px) {
  .sweet-invitation-section { padding-inline: 14px !important; }
  .rsvp-card { padding: 20px 14px !important; }
  .rsvp-field label, .rsvp-label { font-size: 10px !important;
    letter-spacing: .06em !important; }
  .gift-present-button { padding-inline: 12px !important; }
}
.wish-chip [data-wish-like] { margin-left: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  font-size: 11px !important;
  cursor: pointer !important; }
.wish-chip [data-wish-like].is-liked { background: rgba(255,255,255,.36) !important; }
.admin-page, .checkin-page { min-height: 100vh;
  background: #f7efec;
  color: #352722;
  font-family: "Montserrat", Arial, sans-serif; }
.admin-shell, .checkin-shell { width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 44px; }
.admin-header { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px; }
.admin-header p { margin: 0 0 6px;
  color: #9a7c70;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase; }
.admin-header h1 { display: block;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1; }
.admin-header a, .admin-toolbar button, .checkin-card button { border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: #d97183;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer; }
.admin-status { min-height: 20px;
  color: #8a6b61;
  font-size: 13px;
  font-weight: 700; }
.admin-status[data-type="error"] { color: #b94f5b; }
.admin-status[data-type="success"] { color: #4f7f53; }
.admin-stats { display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0; }
.admin-stat, .admin-charts article, .admin-table-wrap, .checkin-card { border: 1px solid rgba(151,103,85,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 26px rgba(64,43,38,.08); }
.admin-stat { padding: 16px; }
.admin-stat span { color: #8a6b61;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase; }
.admin-stat strong { display: block;
  margin-top: 8px;
  font-size: 30px; }
.admin-toolbar { display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(5, auto);
  gap: 10px;
  margin: 18px 0; }
.admin-toolbar input, .admin-toolbar select, .checkin-card input { min-height: 42px;
  border: 1px solid rgba(151,103,85,.16);
  border-radius: 999px;
  padding: 0 14px;
  background: #fff;
  color: #352722; }
.admin-charts { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px; }
.admin-charts article { padding: 16px; }
.admin-charts h2 { margin: 0 0 10px;
  font-size: 15px; }
.admin-charts canvas { width: 100%;
  max-width: 360px;
  height: auto; }
.admin-table-wrap { overflow: auto; }
.admin-table { width: 100%;
  border-collapse: collapse;
  min-width: 820px; }
.admin-table th, .admin-table td { padding: 12px;
  border-bottom: 1px solid rgba(151,103,85,.10);
  text-align: left;
  font-size: 13px; }
.checkin-shell { width: min(640px, calc(100% - 32px)); }
.checkin-card { display: grid;
  gap: 14px;
  padding: 18px; }
.checkin-card video { width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #211817;
  object-fit: cover; }
.checkin-card form { display: grid;
  gap: 10px; }
.guest-preview { display: grid;
  gap: 4px;
  color: #6b5148; }
.guest-preview strong { font-size: 20px; }
@media (max-width: 1024px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-charts { grid-template-columns: 1fr; }
  .admin-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .admin-shell, .checkin-shell { width: min(100% - 20px, 100%);
    padding-top: 18px; }
  .admin-header { align-items: flex-start;
    flex-direction: column; }
  .admin-stats, .admin-toolbar { grid-template-columns: 1fr; }
}
@media print {
  .admin-toolbar, .admin-header a { display: none !important; }
}
:root { --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px); }
html, body { min-height: 100vh;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
button, a, input, select, textarea { touch-action: manipulation; }
.phone-shell { min-height: var(--app-height, 100dvh) !important;
  padding-left: max(12px, var(--safe-left)) !important;
  padding-right: max(12px, var(--safe-right)) !important; }
.invite { height: min(932px, calc(var(--app-height, 100dvh) - 56px)) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  transform: translateZ(0); }
.intro-screen, .cover-section, .light-video, .gallery-lightbox, .gift-modal, .wish-modal { transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }
.gallery-lightbox, .gift-modal, .wish-modal { min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-top: max(18px, var(--safe-top)) !important;
  padding-right: max(18px, var(--safe-right)) !important;
  padding-left: max(18px, var(--safe-left)) !important;
  overscroll-behavior: contain; }
.gift-modal-card, .wish-modal-card { -webkit-overflow-scrolling: touch; }
.gallery-lightbox-open, .wish-modal-open { overflow: hidden !important; }
:focus-visible { outline: 2px solid rgba(184, 79, 99, .72);
  outline-offset: 3px; }
@media (max-width: 768px) {
  .phone-shell { padding: 0 !important; }
  .invite { width: 100% !important;
    max-width: 430px !important;
    height: var(--app-height, 100dvh) !important;
    min-height: var(--app-height, 100dvh) !important;
    padding-bottom: var(--safe-bottom) !important; }
}
@supports (-webkit-touch-callout: none) {
  .invite { will-change: scroll-position; }
  .rsvp-field input, .rsvp-field select, .rsvp-field textarea, .wish-modal-form input, .wish-modal-form textarea { font-size: max(16px, 1em) !important; }
}
.rsvp-qr-card { margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(145, 91, 82, 0.22);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 250, 247, 0.96), rgba(255, 238, 232, 0.9));
  box-shadow: 0 18px 50px rgba(126, 71, 62, 0.13);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease; }
.rsvp-qr-card[hidden] { display: none !important; }
.rsvp-qr-card.is-visible { opacity: 1;
  transform: translateY(0); }
.rsvp-qr-eyebrow { display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(153, 91, 80, 0.12);
  color: #9b5a50;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase; }
.rsvp-qr-copy h5 { margin: 0 0 6px;
  color: #6f3d36;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.15; }
.rsvp-qr-copy p { margin: 0 0 14px;
  color: rgba(90, 62, 58, 0.78);
  font-size: 14px;
  line-height: 1.55; }
.rsvp-qr-body { display: grid;
  grid-template-columns: minmax(130px, 180px) 1fr;
  gap: 16px;
  align-items: center; }
.rsvp-qr-body img { width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(113, 71, 64, 0.14); }
.rsvp-qr-info { display: grid;
  gap: 6px;
  color: #6f3d36; }
.rsvp-qr-info span { font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(111, 61, 54, 0.62); }
.rsvp-qr-info strong { font-size: clamp(24px, 7vw, 36px);
  letter-spacing: .08em;
  line-height: 1; }
.rsvp-qr-info small { color: rgba(90, 62, 58, 0.72);
  font-size: 12px;
  line-height: 1.45; }
.rsvp-qr-actions { display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px; }
.rsvp-qr-actions button, .rsvp-qr-actions a { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  background: #9b5a50;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(155, 90, 80, 0.22); }
.rsvp-qr-actions a { background: rgba(155, 90, 80, 0.12);
  color: #8b4d45;
  box-shadow: none; }
@media (max-width: 560px) {
  .rsvp-qr-body { grid-template-columns: 1fr;
    justify-items: center;
    text-align: center; }
  .rsvp-qr-info { justify-items: center; }
  .rsvp-qr-actions { justify-content: center; }
  .rsvp-qr-actions button, .rsvp-qr-actions a { width: 100%; }
}
.rsvp-qr-card { width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; }
.rsvp-qr-copy, .rsvp-qr-body, .rsvp-qr-info, .rsvp-qr-actions { min-width: 0;
  max-width: 100%;
  box-sizing: border-box; }
.rsvp-qr-body { display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  grid-template-columns: none; }
.rsvp-qr-body img { flex: 0 1 132px;
  width: min(132px, 40%);
  min-width: 96px;
  max-width: 132px;
  box-sizing: border-box; }
.rsvp-qr-info { flex: 1 1 140px;
  min-width: 0; }
.rsvp-qr-info strong { display: block;
  max-width: 100%;
  font-size: clamp(19px, 5vw, 28px);
  letter-spacing: .045em;
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word; }
.rsvp-qr-info small { display: block;
  max-width: 100%;
  overflow-wrap: anywhere; }
.rsvp-qr-actions button, .rsvp-qr-actions a { min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center; }
@media (max-width: 390px) {
  .rsvp-qr-card { padding: 14px;
    border-radius: 18px; }
  .rsvp-qr-body { gap: 10px; }
  .rsvp-qr-body img { min-width: 86px;
    max-width: 108px;
    padding: 8px;
    border-radius: 14px; }
  .rsvp-qr-info strong { font-size: clamp(17px, 5.2vw, 22px);
    letter-spacing: .025em; }
  .rsvp-qr-actions { gap: 8px; }
  .rsvp-qr-actions button, .rsvp-qr-actions a { min-height: 40px;
    padding: 9px 12px; }
}
@media (max-width: 560px) {
  .rsvp-qr-body { justify-content: center;
    text-align: center; }
  .rsvp-qr-info { justify-items: center;
    text-align: center; }
}

/* ---- sections/09-final-polish-overrides.css ---- */
/* Optimized section: 09-final-polish-overrides.css. Generated from safe CSS prune. */
body > .wish-modal { position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147482000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 max(10px, var(--safe-right)) max(0px, var(--safe-bottom)) max(10px, var(--safe-left)) !important;
  pointer-events: none !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  overscroll-behavior: contain !important; }
body > .wish-modal[hidden] { display: none !important; }
body > .wish-modal .wish-modal-backdrop { position: fixed !important;
  inset: 0 !important;
  pointer-events: auto !important; }
body > .wish-modal .wish-modal-card { width: min(100%, 430px) !important;
  max-height: min(82vh, 650px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  transform: translate3d(0, 34px, 0) !important;
  -webkit-overflow-scrolling: touch !important; }
body > .wish-modal.is-active .wish-modal-card { transform: translate3d(0, 0, 0) !important; }
body.wish-modal-open .invite { touch-action: none !important; }
.gift-button[data-gift-button] { touch-action: manipulation !important; }
.intro-photo-a, .intro-photo-b { background-color: #1f1714 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important; }
.cover-content h2.hero-married-title { --hero-title-gold: #e9cd78;
  --hero-title-gold-soft: #f4dc95;
  --hero-title-shadow: rgba(72, 36, 10, .42);
  position: relative !important;
  width: min(100%, 430px) !important;
  min-height: clamp(128px, 34vw, 186px) !important;
  margin: 0 auto 12px !important;
  color: var(--hero-title-gold) !important;
  font-family: "Great Vibes", "Dancing Script", cursive !important;
  font-weight: 400 !important;
  font-size: clamp(68px, 17.5vw, 98px) !important;
  line-height: .82 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: isolate !important;
  text-shadow: none !important; }
.hero-married-title .hero-title-ghost { position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  display: block;
  width: max-content;
  max-width: 108%;
  font-size: .86em;
  color: var(--hero-title-gold-soft);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  filter: blur(12px);
  transform: translate3d(-38%, -54%, 0) scale(1.05) rotate(-2deg);
  text-shadow:
    0 9px 30px rgba(82, 45, 14, .28),
    0 0 22px rgba(233, 205, 120, .28);
  will-change: transform, opacity, filter; }
.hero-married-title .hero-title-main { position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  color: var(--hero-title-gold);
  pointer-events: none; }
.hero-married-title .hero-word { display: block;
  color: var(--hero-title-gold) !important;
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(48px, 0, 0) scale(.98);
  text-shadow:
    0 5px 18px var(--hero-title-shadow),
    0 1px 0 rgba(255, 248, 210, .30),
    0 0 16px rgba(233, 205, 120, .20);
  will-change: transform, opacity, filter; }
.hero-married-title .hero-word-we { margin-bottom: clamp(-18px, -3.6vw, -10px);
  transform: translate3d(54px, 0, 0) scale(.98); }
.hero-married-title .hero-word-married { margin-top: 0;
  transform: translate3d(42px, 0, 0) scale(.98); }
.cover-section.hero-title-animate .hero-married-title .hero-title-ghost { animation: hero-title-ghost-gold 1.28s cubic-bezier(.19,1,.22,1) .02s both; }
.cover-section.hero-title-animate .hero-married-title .hero-word-we { animation: hero-title-intro-b-word-gold 1.05s cubic-bezier(.19,1,.22,1) .16s both; }
.cover-section.hero-title-animate .hero-married-title .hero-word-married { animation: hero-title-intro-b-word-gold 1.05s cubic-bezier(.19,1,.22,1) .40s both; }
.cover-section.hero-title-animate .cover-subtitle { animation: hero-subtitle-intro-b 1.0s cubic-bezier(.19,1,.22,1) .78s both; }
@keyframes hero-title-ghost-gold { 0% {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(-34%, -54%, 0) scale(1.10) rotate(-2deg);
  }
  100% {
    opacity: .27;
    filter: blur(1.55px);
    transform: translate3d(-50%, -54%, 0) scale(1.00) rotate(-2deg);
  } }
@keyframes hero-title-intro-b-word-gold { 0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(48px, 0, 0) scale(.98);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  } }
@keyframes hero-subtitle-intro-b { 0% { opacity: 0; filter: blur(7px); transform: translate3d(34px, 0, 0); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } }
@media (max-width: 390px) {
  .cover-content h2.hero-married-title { font-size: clamp(62px, 17vw, 84px) !important;
    min-height: clamp(116px, 33vw, 158px) !important; }
  .hero-married-title .hero-title-ghost { max-width: 110%;
    font-size: .84em;
    transform: translate3d(-38%, -54%, 0) scale(.98) rotate(-2deg); }
  @keyframes hero-title-ghost-gold { 0% {
      opacity: 0;
      filter: blur(13px);
      transform: translate3d(-34%, -54%, 0) scale(1.02) rotate(-2deg);
    }
    100% {
      opacity: .28;
      filter: blur(1.6px);
      transform: translate3d(-50%, -54%, 0) scale(.94) rotate(-2deg);
    } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-married-title .hero-title-ghost { opacity: .27 !important;
    filter: blur(1.55px) !important;
    transform: translate3d(-50%, -54%, 0) scale(1.00) rotate(-2deg) !important;
    animation: none !important; }
  .hero-married-title .hero-word, .cover-section.hero-title-animate .cover-subtitle { opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-role-script span { opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important; }
}
.photo-card > .photo-role-script { position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 10px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #b88962 !important;
  font-family: "Great Vibes", "Dancing Script", cursive !important;
  font-size: clamp(30px, 8.2vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 248, 232, .78),
    0 4px 10px rgba(126, 74, 35, .18) !important;
  z-index: 5 !important; }
.photo-card > .photo-role-script span { display: inline-block !important;
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 22px, 0) scale(.94);
  animation: photo-role-letter-up .72s cubic-bezier(.19,1,.22,1) calc(.2s + var(--i) * .075s) both !important; }
.photo-card > img { position: relative;
  z-index: 1;
  display: block; }
@media (prefers-reduced-motion: reduce) {
  .photo-card > .photo-role-script span { opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important; }
}
.guest-salutation[hidden] { display: none !important; }
.guest-salutation { max-width: min(88%, 360px);
  margin: clamp(10px, 3vw, 16px) auto 0;
  padding: 0 6px;
  color: #e9cd78;
  font-family: "Dancing Script", "Great Vibes", "Sacramento", cursive;
  font-size: clamp(24px, 7.5vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  letter-spacing: .01em;
  text-shadow:
    0 1px 0 rgba(80, 45, 20, .34),
    0 4px 14px rgba(0, 0, 0, .28),
    0 0 18px rgba(233, 205, 120, .28);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(4px);
  pointer-events: none; }
.guest-salutation span, .guest-salutation strong { display: inline;
  font: inherit;
  color: inherit; }
.guest-salutation strong { font-weight: 500;
  overflow-wrap: anywhere; }
.guest-salutation.is-visible { animation: guest-salutation-rise .95s cubic-bezier(.19,1,.22,1) .08s both; }
@keyframes guest-salutation-rise { 0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 18px, 0) scale(.98);
  }
  72% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -2px, 0) scale(1.01);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  } }
@media (prefers-reduced-motion: reduce) {
  .guest-salutation.is-visible { animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important; }
}
.guest-salutation { display: none; }
.guest-salutation.is-visible, .guest-salutation:not([hidden]) { display: block; }
.ending-card { position: relative;
  overflow: hidden;
  isolation: isolate; }
.ending-card > img { position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /*
    Tan biến mạnh ở 20% phần đầu ảnh:
    - 0% đến 4% gần như mờ mạnh
    - 4% đến 20% chuyển dần sang ảnh rõ
    - từ 20% trở xuống giữ nguyên ảnh
  */
  -webkit-mask-image:
    radial-gradient(circle at 8% 4%, transparent 0 3px, #000 7px),
    radial-gradient(circle at 24% 9%, transparent 0 4px, #000 9px),
    radial-gradient(circle at 42% 3%, transparent 0 3px, #000 8px),
    radial-gradient(circle at 65% 8%, transparent 0 5px, #000 11px),
    radial-gradient(circle at 82% 5%, transparent 0 4px, #000 9px),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 4%,
      rgba(0,0,0,.42) 11%,
      rgba(0,0,0,.78) 17%,
      rgba(0,0,0,1) 22%,
      rgba(0,0,0,1) 100%);
  -webkit-mask-size:
    34px 34px,
    46px 46px,
    38px 38px,
    54px 54px,
    44px 44px,
    100% 100%;
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  -webkit-mask-position:
    0 0,
    12px 10px,
    22px 2px,
    5px 14px,
    30px 6px,
    0 0;
  mask-image:
    radial-gradient(circle at 8% 4%, transparent 0 3px, #000 7px),
    radial-gradient(circle at 24% 9%, transparent 0 4px, #000 9px),
    radial-gradient(circle at 42% 3%, transparent 0 3px, #000 8px),
    radial-gradient(circle at 65% 8%, transparent 0 5px, #000 11px),
    radial-gradient(circle at 82% 5%, transparent 0 4px, #000 9px),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 4%,
      rgba(0,0,0,.42) 11%,
      rgba(0,0,0,.78) 17%,
      rgba(0,0,0,1) 22%,
      rgba(0,0,0,1) 100%);
  mask-size:
    34px 34px,
    46px 46px,
    38px 38px,
    54px 54px,
    44px 44px,
    100% 100%;
  mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  mask-position:
    0 0,
    12px 10px,
    22px 2px,
    5px 14px,
    30px 6px,
    0 0; }
.ending-card::before { content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset: 0 0 auto 0;
  height: 24%;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.55) 0 1px, transparent 4px),
    radial-gradient(circle at 22% 42%, rgba(255,245,229,.38) 0 1px, transparent 5px),
    radial-gradient(circle at 38% 10%, rgba(255,255,255,.5) 0 1px, transparent 4px),
    radial-gradient(circle at 52% 50%, rgba(255,239,210,.35) 0 1px, transparent 5px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1px, transparent 4px),
    radial-gradient(circle at 86% 45%, rgba(255,241,221,.42) 0 1px, transparent 5px),
    linear-gradient(to bottom, rgba(251,246,238,.74), rgba(251,246,238,.18) 58%, transparent);
  background-size:
    42px 34px,
    58px 42px,
    48px 36px,
    64px 48px,
    52px 38px,
    60px 46px,
    100% 100%;
  mix-blend-mode: screen;
  opacity: .9; }
.ending-card::after { content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: 20%;
  background:
    linear-gradient(to bottom, rgba(250,244,235,.96) 0%, rgba(250,244,235,.48) 44%, rgba(250,244,235,0) 100%);
  opacity: .62; }
.ending-card { position: relative;
  overflow: hidden;
  isolation: isolate; }
.ending-card > img { position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-filter: saturate(.96) blur(.35px);
  filter: saturate(.96) blur(.35px); }
.ending-card::before { content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.28) 0 1px, transparent 5px),
    radial-gradient(circle at 32% 10%, rgba(255,255,255,.22) 0 1px, transparent 6px),
    radial-gradient(circle at 54% 22%, rgba(255,250,247,.20) 0 1px, transparent 5px),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.22) 0 1px, transparent 6px),
    radial-gradient(circle at 90% 24%, rgba(255,249,244,.18) 0 1px, transparent 5px),
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.82) 10%,
      rgba(255,255,255,.56) 24%,
      rgba(255,255,255,.24) 52%,
      rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  opacity: 1 !important;
  mix-blend-mode: screen; }
.ending-card::after { content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: 24%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.48) 38%,
    rgba(255,255,255,.12) 72%,
    rgba(255,255,255,0) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: .98; }
.countdown-sample-quote { color: #d88da8 !important;
  font-size: clamp(14px, 3.8vw, 18px) !important;
  line-height: 1.82 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(103, 44, 71, .14) !important; }
.calendar-sample-quote { color: #d88da8 !important;
  font-size: clamp(14px, 3.85vw, 18px) !important;
  line-height: 1.86 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(103, 44, 71, .08) !important; }
@keyframes wedding-letter-rise { 0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 18px, 0) scale(.96);
  }
  72% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -2px, 0) scale(1.015);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  } }
.photo-card { overflow: visible !important; }
.photo-card > .photo-role-script { position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: #b88962 !important;
  font-family: "Great Vibes", "Dancing Script", "Sacramento", cursive !important;
  font-size: clamp(30px, 8.2vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  z-index: 5 !important; }
.photo-card > .photo-role-script span, .letter-rise span { display: inline-block !important;
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 18px, 0);
  animation: wedding-letter-rise .72s cubic-bezier(.19, 1, .22, 1) calc(.16s + var(--i, 0) * .07s) both !important;
  will-change: opacity, transform, filter; }
.letter-rise { display: block; }
.letter-rise span { animation-delay: calc(.12s + var(--i, 0) * .055s) !important; }
.family-section .family-content { position: relative !important;
  padding-left: 22px !important;
  border-left: 1px solid rgba(135, 85, 43, .26) !important; }
.family-section .family-content::before { content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 9px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: #8a1713 !important;
  pointer-events: none !important; }
@media (max-width: 390px) {
  .family-section .family-content { padding-left: 19px !important; }
  .family-section .family-content::before { left: 7px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card > .photo-role-script span, .letter-rise span { opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important; }
}
.cover-content .tiny-date { display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto 10px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: rgba(255,255,255,.96) !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: clamp(15px, 4vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.32) !important; }
.cover-content .tiny-date i { display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 1px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-style: normal !important;
  line-height: 1 !important; }
.cover-content .tiny-date i::before { content: "." !important;
  color: rgba(255,255,255,.96) !important;
  font: inherit !important; }
.gallery-section .masonry-gallery { display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 8px !important;
  margin: 0 0 9px !important; }
.gallery-section .masonry-gallery img { display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  box-shadow: 0 7px 16px rgba(72,49,42,.16) !important; }
.gallery-section .gallery-feature { width: 100% !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 9px 20px rgba(72,49,42,.18) !important; }
.gallery-section .gallery-feature img { display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important; }
.gallery-section .gallery-feature img, .gallery-section .masonry-gallery img { cursor: zoom-in !important;
  transform-origin: center center !important; }
.gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { transition-property: opacity, transform, filter !important;
  transition-duration: .82s !important;
  transition-timing-function: cubic-bezier(.16, .88, .22, 1) !important;
  transition-delay: var(--fly-delay, .08s) !important;
  will-change: opacity, transform, filter !important; }
.gallery-section .gallery-feature img.fly-target:not(.is-visible), .gallery-section .masonry-gallery img.fly-target:not(.is-visible), .gallery-section.reveal.is-visible .gallery-feature img.fly-target:not(.is-visible), .gallery-section.reveal.is-visible .masonry-gallery img.fly-target:not(.is-visible) { opacity: 0 !important;
  transform: translate3d(var(--fly-x, 0vw), var(--fly-y, 42px), 0) scale(.68) rotate(var(--fly-start-rotate, -260deg)) !important;
  filter: blur(5px) saturate(.82) !important;
  transition-delay: 0s !important; }
.gallery-section .gallery-feature img.fly-target.is-visible, .gallery-section .masonry-gallery img.fly-target.is-visible, .gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible, .gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible { opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(360deg) !important;
  filter: blur(0) saturate(1) !important;
  transition-delay: var(--fly-delay, .08s) !important; }
.gallery-lightbox { grid-template-columns: 50px minmax(0, 1fr) 50px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  padding: 22px max(14px, var(--safe-right, 0px)) max(16px, var(--safe-bottom, 0px)) max(14px, var(--safe-left, 0px)) !important; }
.gallery-lightbox > .gallery-lightbox-image { grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  max-width: min(96vw, 920px) !important;
  max-height: calc(100dvh - 132px) !important;
  align-self: center !important;
  justify-self: center !important; }
.gallery-lightbox-nav { grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important; }
.gallery-lightbox-thumbs { grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  width: min(100%, 720px) !important;
  max-width: 100% !important;
  gap: 8px !important;
  padding: 2px 4px 8px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important; }
.gallery-lightbox-thumb { flex: 0 0 58px !important;
  width: 58px !important;
  height: 74px !important;
  padding: 2px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.14) !important;
  opacity: .68 !important;
  cursor: pointer !important;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease !important; }
.gallery-lightbox-thumb.is-active { border-color: rgba(255,255,255,.95) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important; }
.gallery-lightbox .gallery-lightbox-thumb img { display: block !important;
  grid-column: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  touch-action: manipulation !important; }
@media (max-width: 390px) {
  .cover-content .tiny-date { gap: 6px !important;
    font-size: 15px !important; }
  .gallery-section .masonry-gallery { gap: 7px !important; }
  .gallery-lightbox-thumb { flex-basis: 54px !important;
    width: 54px !important;
    height: 70px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-section .gallery-feature img.fly-target, .gallery-section .masonry-gallery img.fly-target { opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    will-change: auto !important; }
  .gallery-lightbox-thumb { transition: none !important; }
}
.family-section .photo-card { box-shadow:
    0 18px 34px rgba(70, 47, 39, .24),
    0 6px 14px rgba(70, 47, 39, .18) !important; }
.family-section .photo-card img { aspect-ratio: 3 / 4.55 !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  box-shadow:
    0 18px 32px rgba(62, 38, 30, .30),
    0 7px 14px rgba(62, 38, 30, .20) !important; }
.gallery-section .gallery-feature img.fly-target:not(.is-visible), .gallery-section.reveal.is-visible .gallery-feature img.fly-target:not(.is-visible) { opacity: 0 !important;
  transform: translate3d(86vw, 22px, 0) scale(.93) rotate(0deg) !important;
  filter: blur(4px) saturate(.86) !important; }
.gallery-section .gallery-feature img.fly-target.is-visible, .gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible { opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  filter: blur(0) saturate(1) !important;
  transition-duration: .9s !important;
  transition-delay: var(--fly-delay, .46s) !important; }
.interview-photo.story-quote-photo { isolation: isolate !important;
  overflow: hidden !important; }
.interview-photo.story-quote-photo img { opacity: 0 !important;
  transform-origin: center center !important;
  transform: scale(.72) !important;
  filter: blur(8px) saturate(.82) brightness(.76) !important;
  transition:
    opacity .85s ease,
    transform 1.2s cubic-bezier(.16, 1, .3, 1),
    filter 1.05s ease !important; }
.interview-section.is-visible .interview-photo.story-quote-photo img { opacity: 1 !important;
  transform: scale(1.045) !important;
  filter: blur(0) saturate(.94) contrast(.98) brightness(.82) !important; }
.interview-photo-quote { opacity: 0 !important;
  filter: blur(5px) !important;
  transform: translate(-145%, -50%) !important;
  transition:
    opacity .76s ease .42s,
    transform .9s cubic-bezier(.16, 1, .3, 1) .42s,
    filter .76s ease .42s !important; }
.interview-section.is-visible .interview-photo-quote { opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate(-50%, -50%) !important; }
@media (max-width: 390px) {
  .family-section .photo-card img { aspect-ratio: 3 / 4.65 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .family-section .photo-card img, .gallery-section .gallery-feature img.fly-target, .interview-photo.story-quote-photo img, .interview-photo-quote { opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important; }
  .interview-photo-quote { transform: translate(-50%, -50%) !important; }
}
.family-section .photo-card { position: relative !important;
  overflow: visible !important;
  box-shadow: none !important; }
.family-section .photo-card > .photo-role-script { z-index: 4 !important;
  text-shadow:
    0 1px 0 rgba(255, 248, 232, .78),
    0 4px 10px rgba(126, 74, 35, .14) !important; }
.family-section .photo-card img { position: relative !important;
  z-index: 1 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(12px 0 16px rgba(197, 144, 93, .30))
    drop-shadow(0 10px 14px rgba(62, 38, 30, .14)) !important; }
.family-section .photo-card::after { content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 62px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  border-radius: 7px !important;
  pointer-events: none !important;
  background:
    linear-gradient(103deg,
      rgba(255,255,255,0) 46%,
      rgba(255, 243, 205, .18) 64%,
      rgba(255, 255, 255, .42) 78%,
      rgba(255, 235, 190, .18) 100%),
    radial-gradient(circle at 92% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 34%) !important;
  mix-blend-mode: screen !important; }
.gallery-section .masonry-gallery img, .gallery-section .gallery-feature img { box-shadow: none !important;
  filter:
    drop-shadow(9px 0 13px rgba(196, 142, 91, .24))
    drop-shadow(0 8px 12px rgba(72,49,42,.12)) !important; }
.gallery-section .gallery-feature { position: relative !important;
  isolation: isolate !important;
  box-shadow: none !important; }
.gallery-section .gallery-feature::after { content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(102deg,
      rgba(255,255,255,0) 50%,
      rgba(255, 242, 205, .18) 67%,
      rgba(255,255,255,.38) 82%,
      rgba(255, 235, 190, .14) 100%),
    radial-gradient(circle at 91% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 36%) !important;
  mix-blend-mode: screen !important; }
.gallery-section .masonry-gallery img { background:
    linear-gradient(102deg,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.18) 74%,
      rgba(255, 238, 196, .12) 100%) !important; }
.family-section .photo-card img.fly-target.is-visible, .family-section.reveal.is-visible .photo-card img.fly-target.is-visible { filter:
    drop-shadow(12px 0 16px rgba(197, 144, 93, .30))
    drop-shadow(0 10px 14px rgba(62, 38, 30, .14)) !important; }
.gallery-section .masonry-gallery img.fly-target.is-visible, .gallery-section .gallery-feature img.fly-target.is-visible, .gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible, .gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible { filter:
    drop-shadow(9px 0 13px rgba(196, 142, 91, .24))
    drop-shadow(0 8px 12px rgba(72,49,42,.12)) !important; }
@media (max-width: 390px) {
  .family-section .photo-card::after { top: 60px !important; }
}
.interview-photo.story-quote-photo img { transition:
    opacity 1.15s ease,
    transform 1.65s cubic-bezier(.16, 1, .3, 1),
    filter 1.4s ease !important; }
.interview-photo-quote { transition:
    opacity 1.05s ease .68s,
    transform 1.28s cubic-bezier(.16, 1, .3, 1) .68s,
    filter 1.05s ease .68s !important; }
.countdown-grid b, .countdown-grid small { color: #990066 !important; }
.countdown-grid span { border: 1px solid rgba(153, 0, 102, .16) !important;
  box-shadow: 0 8px 22px rgba(153, 0, 102, .14) !important; }
.calendar-action { border-color: rgba(153, 0, 102, .24) !important;
  background: rgba(153, 0, 102, .10) !important;
  color: #990066 !important;
  box-shadow: 0 8px 18px rgba(153, 0, 102, .10) !important; }
.calendar-action:focus-visible, .calendar-action:hover { background: rgba(153, 0, 102, .16) !important;
  border-color: rgba(153, 0, 102, .38) !important;
  color: #990066 !important; }
@keyframes giftImageFloat { 0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
    filter: drop-shadow(0 9px 12px rgba(153, 0, 102, .16));
  }
  45% {
    transform: translate3d(0, -7px, 0) rotate(2deg) scale(1.06);
    filter: drop-shadow(0 15px 18px rgba(153, 0, 102, .24));
  }
  70% {
    transform: translate3d(0, -3px, 0) rotate(-1deg) scale(1.02);
  } }
@keyframes giftImageGlow { 0%, 100% { opacity: .38; transform: scale(.92); }
  50% { opacity: .72; transform: scale(1.08); } }
.gift-panel, .gift-present-button, .gift-modal-card, .gift-account-card, .gift-account-qr-wrap { border-color: rgba(153, 0, 102, .28) !important; }
.gift-present-button { min-height: 158px !important;
  padding: 20px 18px 24px !important;
  background: linear-gradient(180deg, #fff 0%, rgba(153, 0, 102, .045) 100%) !important;
  box-shadow: 0 18px 38px rgba(153, 0, 102, .11) !important; }
.gift-present-button::before { border-color: rgba(153, 0, 102, .36) !important; }
.gift-present-button::after { width: 114px !important;
  height: 114px !important;
  top: 8px !important;
  right: 20px !important;
  background: radial-gradient(circle, rgba(153, 0, 102, .16), rgba(153, 0, 102, 0) 68%) !important;
  animation: giftImageGlow 2.4s ease-in-out infinite !important; }
.gift-present-button:hover, .gift-present-button:focus-visible { border-color: rgba(153, 0, 102, .52) !important;
  box-shadow: 0 22px 48px rgba(153, 0, 102, .17) !important; }
.gift-image-icon { overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important; }
.gift-image-icon img { display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  pointer-events: none !important; }
.gift-present-icon.gift-image-icon { width: 102px !important;
  height: 72px !important;
  margin-bottom: 3px !important;
  animation: giftImageFloat 2.65s ease-in-out infinite !important; }
.gift-present-text, .gift-modal-head h2, .gift-account-bank, .gift-account-role { color: #990066 !important; }
.gift-modal-icon.gift-image-icon { width: 74px !important;
  height: 54px !important;
  margin-bottom: 10px !important;
  border-radius: 0 !important;
  animation: giftImageFloat 2.8s ease-in-out infinite !important; }
.gift-modal-close { background: rgba(153, 0, 102, .08) !important;
  color: #990066 !important; }
.gift-account-card::before, .gift-account-card.bride::before { background: linear-gradient(180deg, #990066, rgba(153, 0, 102, .38)) !important; }
.gift-copy-button, .gift-account-card.bride .gift-copy-button { background: #990066 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(153, 0, 102, .20) !important; }
.gift-button[data-gift-button] { width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 3px !important;
  border: 1px solid rgba(153, 0, 102, .34) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 8px 18px rgba(153, 0, 102, .16) !important;
  overflow: visible !important; }
@media (max-width: 390px) {
  .gift-present-button { min-height: 150px !important; }
  .gift-present-icon.gift-image-icon { width: 94px !important;
    height: 66px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-present-button::after, .gift-present-icon.gift-image-icon, .gift-modal-icon.gift-image-icon { animation: none !important;
    transform: none !important; }
}
.wish-bar .gift-button[data-gift-button] { width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(235, 93, 126, .68) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important; }
.gallery-section .gallery-feature.gallery-feature-top { margin: 0 0 9px !important; }
.gallery-section .gallery-feature.gallery-feature-bottom { margin: 9px 0 0 !important; }
.gallery-section .gallery-feature.gallery-feature-top img, .gallery-section .gallery-feature.gallery-feature-bottom img { aspect-ratio: 16 / 10 !important; }
.gallery-section .masonry-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  gap: 8px !important;
  margin: 0 !important; }
.gallery-section .masonry-gallery img { aspect-ratio: 3 / 4 !important;
  grid-column: auto !important;
  grid-row: auto !important; }
.gift-present-button { min-height: 198px !important;
  padding: 24px 18px 28px !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  overflow: hidden !important; }
.gift-present-button::after { top: 12px !important;
  right: 18px !important;
  z-index: 0 !important; }
.gift-present-icon.gift-image-icon { width: 124px !important;
  height: 88px !important;
  margin: 0 0 12px !important;
  flex: 0 0 auto !important; }
.gift-present-text { display: block !important;
  max-width: 100% !important;
  margin-top: 2px !important;
  line-height: 1.2 !important; }
.gift-present-button small { display: block !important;
  max-width: 92% !important;
  margin-top: 2px !important;
  line-height: 1.35 !important; }
@media (max-width: 390px) {
  .gift-present-button { min-height: 188px !important;
    padding: 22px 14px 25px !important; }
  .gift-present-icon.gift-image-icon { width: 114px !important;
    height: 82px !important;
    margin-bottom: 11px !important; }
  .gift-present-text { font-size: 19px !important; }
}

/* 2026-06-29: polish image cards for slower autoscroll viewing */
.family-section .photo-card img,
.gallery-section .gallery-feature,
.gallery-section .gallery-feature img,
.gallery-section .masonry-gallery img {
  border-radius: 12px !important;
}

.family-section .photo-card img,
.gallery-section .masonry-gallery img {
  box-shadow:
    0 12px 26px rgba(72, 49, 42, .22),
    0 4px 10px rgba(72, 49, 42, .14) !important;
}

.gallery-section .gallery-feature {
  overflow: hidden !important;
  box-shadow:
    0 12px 26px rgba(72, 49, 42, .22),
    0 4px 10px rgba(72, 49, 42, .14) !important;
}

.gallery-section .gallery-feature img {
  box-shadow: none !important;
}

.family-section .photo-card img.fly-target,
.gallery-section .gallery-feature img.fly-target,
.gallery-section .masonry-gallery img.fly-target {
  transition-duration: 2.25s !important;
  transition-timing-function: cubic-bezier(.14, .78, .22, 1) !important;
  transition-delay: var(--fly-delay, .55s) !important;
}

.family-section .photo-card img.fly-target.is-visible,
.gallery-section .gallery-feature img.fly-target.is-visible,
.gallery-section .masonry-gallery img.fly-target.is-visible,
.gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible,
.gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible,
.family-section.reveal.is-visible .photo-card img.fly-target.is-visible {
  transition-delay: var(--fly-delay, .55s) !important;
}

.family-section .left-card img.fly-target { --fly-delay: .55s !important; }
.family-section .right-card img.fly-target { --fly-delay: .86s !important; }
.gallery-section .gallery-feature-top img.fly-target { --fly-delay: .62s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(1) { --fly-delay: .88s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(2) { --fly-delay: 1.08s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(3) { --fly-delay: 1.28s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(4) { --fly-delay: 1.48s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(5) { --fly-delay: 1.68s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(6) { --fly-delay: 1.88s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(7) { --fly-delay: 2.08s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(8) { --fly-delay: 2.28s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(9) { --fly-delay: 2.48s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(10) { --fly-delay: 2.68s !important; }
.gallery-section .masonry-gallery img.fly-target:nth-child(n+11) { --fly-delay: 2.86s !important; }
.gallery-section .gallery-feature-bottom img.fly-target { --fly-delay: 2.95s !important; }

.interview-photo.story-quote-photo img {
  border-radius: 12px !important;
  transition:
    opacity 1.65s ease,
    transform 2.35s cubic-bezier(.14, .78, .22, 1),
    filter 1.95s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .family-section .photo-card img.fly-target,
  .gallery-section .gallery-feature img.fly-target,
  .gallery-section .masonry-gallery img.fly-target,
  .interview-photo.story-quote-photo img {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* 2026-07-04: soft white frame for the family invitation text block. */
.family-section .family-content {
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(230, 25, 25, .12) !important;
  border-left: 3px solid var(--wedding-red) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(72, 49, 42, .08) !important;
}
.family-section .family-content::before {
  content: none !important;
  display: none !important;
}

/* 2026-07-04: keep the story title on one line on mobile. */
.interview-section .signature-word,
.interview-section .signature-word.letter-rise {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 10px !important;
  white-space: nowrap !important;
  font-size: clamp(36px, 10.5vw, 50px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.family-section.reveal:not(.is-visible) .photo-card img.fly-target,
.family-section.reveal.is-visible .photo-card img.fly-target,
.family-section .photo-card img.fly-target:not(.is-visible),
.family-section .photo-card img.fly-target.is-visible,
.family-section.reveal.is-visible .photo-card img.fly-target.is-visible {
  transition-duration: 2.25s !important;
  transition-timing-function: cubic-bezier(.14, .78, .22, 1) !important;
}

/* 2026-06-29: slower story/interview reveal + music panel grouped into top button */
.interview-photo.story-quote-photo img {
  transition:
    opacity 1.9s ease,
    transform 2.75s cubic-bezier(.14, .78, .22, 1),
    filter 2.25s ease !important;
}

.interview-photo-quote {
  transition:
    opacity 1.35s ease .88s,
    transform 1.75s cubic-bezier(.14, .78, .22, 1) .88s,
    filter 1.35s ease .88s !important;
}

.music-control {
  position: sticky !important;
  top: 12px !important;
  z-index: 40 !important;
  display: block !important;
  width: 42px !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 12px 0 auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.music-control .music-toggle {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 2 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(5, 5, 5, .92) !important;
  border: 2px solid rgba(255,255,255,.96) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 22px rgba(44, 34, 32, .22),
    0 2px 0 rgba(255,255,255,.42) inset !important;
  pointer-events: auto !important;
}

.music-control .music-toggle:focus-visible {
  outline: 2px solid rgba(217, 113, 131, .62) !important;
  outline-offset: 3px !important;
}

.music-control .music-panel {
  position: absolute !important;
  top: 50px !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1 !important;
  width: min(232px, calc(100vw - 34px)) !important;
  margin: 0 !important;
  padding: 11px 12px 12px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-items: stretch !important;
  border-radius: 16px !important;
  background: rgba(255, 248, 246, .94) !important;
  border: 1px solid rgba(151, 103, 85, .18) !important;
  box-shadow:
    0 18px 38px rgba(64, 43, 38, .20),
    0 4px 12px rgba(64, 43, 38, .10) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, -8px, 0) scale(.97) !important;
  transform-origin: top right !important;
  pointer-events: none !important;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease !important;
}

.music-control .music-panel[hidden] {
  display: none !important;
}

.music-control .music-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}

.music-control .music-panel-title,
.music-control .music-volume-label {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #604c44 !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.music-control .music-volume-label {
  margin-top: 2px !important;
  color: rgba(96, 76, 68, .72) !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.music-control .music-panel-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}

.music-control .music-panel button {
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 9px !important;
  background: var(--rose) !important;
  color: #fff !important;
  font-family: "Montserrat", var(--font-sans, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.music-control .music-panel button:active {
  transform: translateY(1px) !important;
}

.music-control .music-panel input[type="range"] {
  grid-column: auto !important;
  width: 100% !important;
  min-height: 24px !important;
  accent-color: var(--rose) !important;
}

html[data-theme="dark"] .music-control .music-panel {
  background: rgba(48, 35, 34, .94) !important;
  border-color: rgba(255,236,229,.16) !important;
}

html[data-theme="dark"] .music-control .music-panel-title,
html[data-theme="dark"] .music-control .music-volume-label {
  color: #f8ebe6 !important;
}

@media (prefers-reduced-motion: reduce) {
  .interview-photo.story-quote-photo img,
  .interview-photo-quote,
  .music-control .music-panel {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}


/* 2026-06-29: intro-safe music + wish modal top fix + slower story/interview */
body.intro-running .music-control,
body.intro-running [data-music-toggle],
body.intro-running .music-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body > .wish-modal {
  align-items: center !important;
  justify-content: center !important;
  padding:
    max(56px, calc(var(--safe-top) + 44px))
    max(12px, var(--safe-right))
    max(20px, calc(var(--safe-bottom) + 16px))
    max(12px, var(--safe-left)) !important;
}

body > .wish-modal .wish-modal-card {
  width: min(calc(100vw - 28px), 430px) !important;
  max-height: min(78dvh, 640px) !important;
  border-radius: 16px !important;
  padding: 76px 22px calc(30px + var(--safe-bottom)) !important;
  overflow-y: auto !important;
  transform: translate3d(0, 18px, 0) scale(.985) !important;
}

body > .wish-modal.is-active .wish-modal-card {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body > .wish-modal .wish-modal-icon {
  top: 12px !important;
  width: 64px !important;
  height: 50px !important;
  border-radius: 16px 16px 18px 18px !important;
}

body > .wish-modal .wish-modal-icon::before {
  width: 98px !important;
  height: 18px !important;
  left: -17px !important;
  top: 21px !important;
}

body > .wish-modal .wish-modal-icon::after {
  right: -16px !important;
  top: 12px !important;
  width: 12px !important;
  height: 12px !important;
  box-shadow: -72px 6px 0 rgba(255, 194, 202, .66), -7px 11px 0 -3px rgba(255, 194, 202, .74) !important;
}

body > .wish-modal .wish-modal-icon span {
  font-size: 29px !important;
}

body > .wish-modal .wish-modal-close {
  top: 12px !important;
  right: 14px !important;
}

body > .wish-modal h2 {
  margin: 0 0 24px !important;
}

@media (max-width: 390px) {
  body > .wish-modal {
    padding:
      max(48px, calc(var(--safe-top) + 38px))
      10px
      max(16px, calc(var(--safe-bottom) + 12px))
      10px !important;
  }

  body > .wish-modal .wish-modal-card {
    width: min(calc(100vw - 20px), 410px) !important;
    max-height: min(80dvh, 620px) !important;
    padding: 70px 18px calc(26px + var(--safe-bottom)) !important;
  }

  body > .wish-modal .wish-modal-icon {
    top: 10px !important;
    width: 60px !important;
    height: 46px !important;
  }

  body > .wish-modal h2 {
    margin-bottom: 22px !important;
  }
}

.interview-photo.story-quote-photo img {
  transition:
    opacity 2.25s ease,
    transform 3.25s cubic-bezier(.14, .78, .22, 1),
    filter 2.65s ease !important;
}

.interview-photo-quote {
  transition:
    opacity 1.65s ease 1.05s,
    transform 2.05s cubic-bezier(.14, .78, .22, 1) 1.05s,
    filter 1.65s ease 1.05s !important;
}

@media (max-height: 560px) {
  body > .wish-modal {
    padding:
      max(30px, calc(var(--safe-top) + 20px))
      max(10px, var(--safe-right))
      max(12px, calc(var(--safe-bottom) + 8px))
      max(10px, var(--safe-left)) !important;
  }

  body > .wish-modal .wish-modal-card {
    max-height: calc(100dvh - 42px) !important;
    padding: 62px 20px calc(20px + var(--safe-bottom)) !important;
  }

  body > .wish-modal .wish-modal-icon {
    top: 8px !important;
    width: 58px !important;
    height: 42px !important;
  }

  body > .wish-modal .wish-modal-icon span {
    font-size: 26px !important;
  }

  body > .wish-modal h2 {
    margin-bottom: 16px !important;
    font-size: 25px !important;
  }

  body > .wish-modal .wish-modal-form {
    gap: 10px !important;
  }

  body > .wish-modal .wish-modal-form input {
    height: 48px !important;
  }

  body > .wish-modal .wish-modal-form textarea {
    min-height: 78px !important;
  }

  body > .wish-modal .wish-modal-submit {
    height: 48px !important;
    margin-top: 4px !important;
  }
}

/* FIX 29/06 - remove warm shine overlays, add pink countdown stroke, recolor ending message */
.family-section .photo-card::after,
.gallery-section .gallery-feature::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

.family-section .photo-card img,
.family-section .photo-card img.fly-target.is-visible,
.family-section.reveal.is-visible .photo-card img.fly-target.is-visible {
  filter: none !important;
  background: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 32px rgba(62, 38, 30, .24),
    0 7px 14px rgba(62, 38, 30, .16) !important;
}

.gallery-section .gallery-feature,
.gallery-section .masonry-gallery img {
  isolation: auto !important;
}

.gallery-section .gallery-feature img,
.gallery-section .masonry-gallery img,
.gallery-section .gallery-feature img.fly-target.is-visible,
.gallery-section .masonry-gallery img.fly-target.is-visible,
.gallery-section.reveal.is-visible .gallery-feature img.fly-target.is-visible,
.gallery-section.reveal.is-visible .masonry-gallery img.fly-target.is-visible {
  filter: none !important;
  background: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 12px 26px rgba(72, 49, 42, .18),
    0 4px 10px rgba(72, 49, 42, .10) !important;
}

.countdown-hero-title {
  color: #fffafc !important;
  -webkit-text-stroke: .8px #990066 !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.34),
    1px 0 0 rgba(153,0,102,.72),
    -1px 0 0 rgba(153,0,102,.72),
    0 1px 0 rgba(153,0,102,.72),
    0 -1px 0 rgba(153,0,102,.72),
    0 6px 16px rgba(153,0,102,.22) !important;
}

.ending-card-after-sweet figcaption h2,
.ending-card-after-sweet figcaption p {
  color: #CC313D !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.44),
    0 5px 14px rgba(204,49,61,.20) !important;
}


/* FIX 29/06 v37: Bride/Groom letter fly-in should start only when the family section is visible. */
.family-section.reveal:not(.is-visible) .photo-card > .photo-role-script span {
  display: inline-block !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
  transform: translate3d(0, 18px, 0) scale(.96) !important;
  animation: none !important;
  will-change: opacity, transform, filter !important;
}
.family-section.reveal.is-visible .photo-card > .photo-role-script span {
  animation: wedding-letter-rise 1.05s cubic-bezier(.19, 1, .22, 1) calc(.22s + var(--i, 0) * .09s) both !important;
}
.family-section.reveal.is-visible .photo-card.right-card > .photo-role-script span {
  animation-delay: calc(.34s + var(--i, 0) * .09s) !important;
}

/* FIX 29/06 v37: make the ghost layer behind “We got Married” slightly larger. */
.hero-married-title .hero-title-ghost {
  max-width: 116% !important;
  font-size: .94em !important;
}
@media (max-width: 390px) {
  .hero-married-title .hero-title-ghost {
    max-width: 118% !important;
    font-size: .92em !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .family-section .photo-card > .photo-role-script span {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}


/* Admin CMS Phase 1: content editor */
.admin-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.admin-tabs button,
.admin-content-actions button {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #8f4251;
  padding: 11px 18px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(157,91,105,.13);
  cursor: pointer;
}
.admin-tabs button.is-active,
.admin-content-actions button:last-child {
  color: #fff;
  background: linear-gradient(135deg, #ff6d8d, #cc313d);
}
.admin-panel { display: none; }
.admin-panel.is-active { display: block; }
.admin-content-card {
  border: 1px solid rgba(151,103,85,.14);
  background: rgba(255,255,255,.88);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(154, 105, 113, .13);
  padding: 20px;
}
.admin-content-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.admin-content-head p,
.admin-content-head h2 { margin: 0; }
.admin-content-head p {
  color: #cc313d;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.admin-content-head h2 {
  color: #4d3438;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.15;
}
.admin-content-head span,
.admin-content-note,
.admin-setting-field small,
.admin-token-field span {
  color: #8a6b61;
  font-size: 13px;
}
.admin-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.admin-token-field {
  display: grid;
  gap: 7px;
  margin: 12px 0 14px;
}
.admin-token-field input,
.admin-setting-field input,
.admin-setting-field textarea {
  width: 100%;
  border: 1px solid rgba(204,49,61,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: #4c3035;
  padding: 12px 14px;
  font: 600 14px/1.5 "Quicksand", system-ui, sans-serif;
  outline: none;
}
.admin-token-field input:focus,
.admin-setting-field input:focus,
.admin-setting-field textarea:focus {
  border-color: rgba(204,49,61,.62);
  box-shadow: 0 0 0 4px rgba(204,49,61,.08);
}
.admin-content-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 240, 244, .86);
}
.admin-content-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-content-form h3 {
  grid-column: 1 / -1;
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(204,49,61,.22);
  color: #cc313d;
  font-size: 18px;
}
.admin-setting-field {
  display: grid;
  gap: 7px;
}
.admin-setting-field span {
  color: #56363d;
  font-weight: 900;
  font-size: 14px;
}
.admin-setting-field textarea {
  min-height: 86px;
  resize: vertical;
}
.admin-setting-field textarea[data-large="true"] { min-height: 150px; }
.admin-setting-field small { word-break: break-all; }
.admin-content-form code { color: #cc313d; }
@media (max-width: 760px) {
  .admin-content-head { flex-direction: column; }
  .admin-content-actions { width: 100%; justify-content: stretch; }
  .admin-content-actions button { flex: 1 1 140px; }
  .admin-content-form { grid-template-columns: 1fr; }
}
@media print {
  .admin-tabs, .admin-content-card { display: none !important; }
}

/* Admin CMS Phase 2: media/image/music/QR editor */
.admin-media-form .admin-media-field {
  align-self: start;
}
.admin-media-preview {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed rgba(204,49,61,.22);
  border-radius: 16px;
  background: rgba(255, 247, 249, .78);
  overflow: hidden;
}
.admin-media-preview.is-empty {
  color: #9d7880;
  font-size: 13px;
  font-weight: 700;
  padding: 14px;
  text-align: center;
}
.admin-media-preview img,
.admin-media-preview video {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  display: block;
}
.admin-media-preview audio {
  width: calc(100% - 18px);
  margin: 10px 0;
}
.admin-media-card code,
.admin-content-head code {
  color: #cc313d;
  font-weight: 900;
}
@media (max-width: 760px) {
  .admin-media-preview { min-height: 74px; }
  .admin-media-preview img,
  .admin-media-preview video { max-height: 150px; }
}

/* Admin CMS Phase 3: direct image upload to Google Drive */
.admin-upload-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(204,49,61,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.admin-upload-box input[type="file"] {
  width: 100%;
  border: 1px dashed rgba(204,49,61,.28);
  border-radius: 12px;
  background: rgba(255,247,249,.9);
  color: #6b4650;
  padding: 9px;
  font-size: 13px;
}
.admin-upload-box button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a98, #cc313d);
  color: #fff;
  font-weight: 900;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(204,49,61,.16);
}
.admin-upload-box button:disabled {
  opacity: .62;
  cursor: wait;
}
.admin-upload-box em {
  color: #8a6b61;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.admin-upload-box em[data-type="success"] { color: #15764b; font-weight: 800; }
.admin-upload-box em[data-type="error"] { color: #cc313d; font-weight: 800; }



/* Admin CMS Phase 5.1: client-side image optimization before Drive upload */
.admin-upload-optimizer {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(204,49,61,.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,247,249,.96), rgba(255,255,255,.88));
  box-shadow: 0 12px 30px rgba(204,49,61,.08);
}
.admin-upload-optimizer strong {
  display: block;
  color: #cc313d;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 2px;
}
.admin-upload-optimizer p,
.admin-upload-optimizer small {
  margin: 0;
  color: #8a6b61;
  font-size: 13px;
  line-height: 1.5;
}
.admin-upload-optimizer label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #56363d;
  font-weight: 800;
  font-size: 13px;
}
.admin-upload-optimizer input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #cc313d;
}
.admin-upload-optimizer select {
  border: 1px solid rgba(204,49,61,.24);
  border-radius: 999px;
  background: #fff;
  color: #4c3035;
  padding: 8px 12px;
  font-weight: 800;
  outline: none;
}
@media (min-width: 761px) {
  .admin-upload-optimizer {
    grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .8fr) minmax(180px, .7fr);
    align-items: center;
  }
  .admin-upload-optimizer small { grid-column: 1 / -1; }
}

/* Admin CMS Phase 4: security, session login, backup/restore */
.admin-security-card code {
  color: #cc313d;
  font-weight: 900;
}
.admin-auth-box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr) auto;
  gap: 12px;
  align-items: end;
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid rgba(204,49,61,.18);
  border-radius: 18px;
  background: rgba(255,247,249,.9);
}
.admin-auth-box strong,
.admin-backup-card h3 {
  color: #4d3438;
  font-weight: 900;
}
.admin-auth-box p,
.admin-auth-box small,
.admin-backup-card p {
  color: #8a6b61;
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}
.admin-auth-box[data-auth-state="authenticated"] {
  border-color: rgba(21,118,75,.24);
  background: rgba(240,255,248,.88);
}
.admin-auth-box[data-auth-state="open"] {
  border-color: rgba(218,137,38,.24);
  background: rgba(255,248,235,.88);
}
.admin-auth-box button,
.admin-backup-card button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a98, #cc313d);
  color: #fff;
  font-weight: 900;
  padding: 11px 16px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(204,49,61,.16);
}
.admin-auth-box button:disabled,
.admin-backup-card button:disabled {
  opacity: .62;
  cursor: wait;
}
.admin-backup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.admin-backup-card {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid rgba(204,49,61,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  padding: 14px;
}
.admin-backup-card h3,
.admin-backup-card p {
  margin: 0;
}
.admin-backup-card input,
.admin-backup-card textarea {
  width: 100%;
  border: 1px solid rgba(204,49,61,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: #4c3035;
  padding: 12px 14px;
  font: 600 14px/1.5 "Quicksand", system-ui, sans-serif;
  outline: none;
}
.admin-backup-card textarea {
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.admin-backup-import {
  grid-column: 1 / -1;
}
.admin-backup-list {
  display: grid;
  gap: 10px;
}
.admin-backup-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed rgba(204,49,61,.22);
  border-radius: 16px;
  background: rgba(255,247,249,.78);
}
.admin-backup-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.admin-backup-item strong {
  color: #56363d;
}
.admin-backup-item span,
.admin-backup-item small {
  color: #8a6b61;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.admin-backup-item button {
  flex: 0 0 auto;
  padding: 9px 13px;
}
@media (max-width: 860px) {
  .admin-auth-box,
  .admin-backup-grid {
    grid-template-columns: 1fr;
  }
  .admin-auth-box {
    align-items: stretch;
  }
  .admin-backup-item {
    align-items: stretch;
    flex-direction: column;
  }
}

/* PHASE 5 PERFORMANCE: use WebP for CSS background assets when supported. */
@supports (background-image: none) {
  .name-signature i::before {
    background: none !important;
  }
  .calendar-grid .is-wedding::before,
  .countdown-section .calendar-grid .is-wedding::before {
    background: none !important;
  }
  .countdown-section {
    background: none !important;
  }
}

/* Final audit: keep sections fully rendered.
   content-visibility:auto can stall Chrome when intro, autoscroll, and reveal effects overlap inside .invite. */

/* 2026-06-29 final UI stability rescue.
   Keep the visual experience, but make text/media fail visible if an observer, cache, or animation frame is delayed. */
.intro-screen,
.intro-slideshow {
  background-color: #201815 !important;
}

.intro-photo-a {
  background-image: none !important;
}

.intro-photo-b {
  background-image: none !important;
}

.skip-btn {
  z-index: 80 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.intro-copy {
  pointer-events: none !important;
}

.photo-card > .photo-role-script,
.letter-rise,
.section-label,
.signature-word,
.split-main-title {
  opacity: 1 !important;
  visibility: visible !important;
}

.photo-card > .photo-role-script span,
.letter-rise span,
.family-section.reveal:not(.is-visible) .photo-card > .photo-role-script span,
.family-section.reveal.is-visible .photo-card > .photo-role-script span {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.family-section .photo-card img.fly-target,
.gallery-section .gallery-feature img.fly-target,
.gallery-section .masonry-gallery img.fly-target,
.interview-photo.story-quote-photo img,
.interview-photo-quote {
  transition-duration: .58s !important;
  transition-delay: 0s !important;
  will-change: transform, opacity !important;
}

.family-section .photo-card img.fly-target:not(.is-visible),
.gallery-section .gallery-feature img.fly-target:not(.is-visible),
.gallery-section .masonry-gallery img.fly-target:not(.is-visible),
.interview-photo.story-quote-photo img {
  opacity: .001 !important;
  transform: translate3d(0, 18px, 0) scale(.97) !important;
  filter: none !important;
}

.family-section .photo-card img.fly-target.is-visible,
.gallery-section .gallery-feature img.fly-target.is-visible,
.gallery-section .masonry-gallery img.fly-target.is-visible,
.interview-section.is-visible .interview-photo.story-quote-photo img {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  filter: none !important;
}

body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle,
.wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body > .wish-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, var(--safe-top)) max(12px, var(--safe-right)) max(18px, var(--safe-bottom)) max(12px, var(--safe-left)) !important;
}

body > .wish-modal .wish-modal-card {
  width: min(calc(100vw - 28px), 430px) !important;
  max-height: min(86dvh, 640px) !important;
  padding: 84px 18px 24px !important;
  border-radius: 16px !important;
  overflow: auto !important;
  transform: translate3d(0, 14px, 0) scale(.99) !important;
}

body > .wish-modal.is-active .wish-modal-card {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body > .wish-modal .wish-modal-icon {
  top: 14px !important;
  width: 58px !important;
  height: 44px !important;
  border-radius: 15px !important;
}

body > .wish-modal .wish-modal-icon::before,
body > .wish-modal .wish-modal-icon::after {
  display: none !important;
}

body > .wish-modal .wish-modal-icon span {
  font-size: 25px !important;
}

body > .wish-modal h2 {
  margin: 0 0 18px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

body > .wish-modal .wish-modal-form {
  gap: 12px !important;
  min-width: 0 !important;
}

body > .wish-modal .wish-modal-form input,
body > .wish-modal .wish-modal-form textarea,
body > .wish-modal .wish-modal-submit {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body > .wish-modal .wish-modal-form input {
  height: 50px !important;
}

body > .wish-modal .wish-modal-form textarea {
  min-height: 92px !important;
}

body > .wish-modal .wish-modal-submit {
  height: 52px !important;
  margin-top: 4px !important;
}

@media (max-height: 620px) {
  body > .wish-modal .wish-modal-card {
    max-height: calc(100dvh - 24px) !important;
    padding-top: 72px !important;
  }

  body > .wish-modal .wish-modal-icon {
    top: 10px !important;
    width: 52px !important;
    height: 38px !important;
  }

  body > .wish-modal h2 {
    margin-bottom: 12px !important;
    font-size: 22px !important;
  }

  body > .wish-modal .wish-modal-form input {
    height: 46px !important;
  }

  body > .wish-modal .wish-modal-form textarea {
    min-height: 76px !important;
  }

  body > .wish-modal .wish-modal-submit {
    height: 48px !important;
  }
}

/* 2026-06-29 phase 5.1 hotfix: stable intro, fixed wish controls, faster image motion. */
.intro-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147481000 !important;
  background: #201815 !important;
  touch-action: manipulation !important;
}

.intro-photo-a,
.intro-photo-b {
  background-color: #201815 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: 1;
}

.intro-photo-a {
  background-image: none !important;
}

.intro-photo-b {
  background-image: none !important;
}

.skip-btn {
  position: fixed !important;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  z-index: 2147481500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.intro-running .wish-stream,
body.intro-running .wish-bar,
body.intro-running .wish-panel-toggle,
body.intro-running .theme-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wish-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(100vw, 430px) !important;
  max-width: min(100vw, 430px) !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 2147481200 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  will-change: transform, opacity !important;
}

.wish-stream {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(92px + var(--safe-bottom)) !important;
  width: min(100vw, 430px) !important;
  max-width: min(100vw, 430px) !important;
  height: auto !important;
  max-height: 34vh !important;
  margin: 0 !important;
  padding: 0 82px 0 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 2147481190 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.wish-chip {
  max-width: 100% !important;
  margin: 0 0 7px 0 !important;
  overflow-wrap: anywhere !important;
}

.wish-panel-toggle {
  position: fixed !important;
  left: calc(50% + min(50vw, 215px) - 56px) !important;
  right: auto !important;
  bottom: calc(84px + var(--safe-bottom)) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147481210 !important;
  touch-action: manipulation !important;
  will-change: bottom, opacity !important;
}

.wish-panel-toggle:hover {
  transform: none !important;
}

.wish-panel-toggle.is-collapsed {
  bottom: calc(14px + var(--safe-bottom)) !important;
}

.invite.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  transform: translate3d(-50%, 110%, 0) !important;
  pointer-events: none !important;
}

.invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  transform: translate3d(-50%, 12px, 0) !important;
  pointer-events: none !important;
}

body > .wish-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body > .wish-modal .wish-modal-card {
  width: min(calc(100vw - 28px), 430px) !important;
  max-height: min(86vh, 640px) !important;
  max-height: min(86dvh, 640px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

body > .wish-modal .wish-modal-form,
body > .wish-modal .wish-modal-form input,
body > .wish-modal .wish-modal-form textarea,
body > .wish-modal .wish-modal-submit {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.photo-card > .photo-role-script,
.letter-rise,
.section-label,
.signature-word,
.split-main-title {
  opacity: 1 !important;
  visibility: visible !important;
}

.photo-card > .photo-role-script span,
.letter-rise span {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

.family-section .photo-card img.fly-target,
.gallery-section .gallery-feature img.fly-target,
.gallery-section .masonry-gallery img.fly-target,
.interview-photo.story-quote-photo img,
.interview-photo-quote {
  transition-property: opacity, transform !important;
  transition-duration: .72s !important;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1) !important;
  transition-delay: .08s !important;
  filter: none !important;
  will-change: auto !important;
}

.family-section .photo-card img.fly-target:not(.is-visible),
.gallery-section .gallery-feature img.fly-target:not(.is-visible),
.gallery-section .masonry-gallery img.fly-target:not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 14px, 0) scale(.985) !important;
  filter: none !important;
}

.family-section .photo-card img.fly-target.is-visible,
.gallery-section .gallery-feature img.fly-target.is-visible,
.gallery-section .masonry-gallery img.fly-target.is-visible,
.interview-section.is-visible .interview-photo.story-quote-photo img {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  filter: none !important;
  transition-delay: .06s !important;
}

.gallery-section .masonry-gallery img.fly-target:nth-child(n),
.gallery-section .gallery-feature-top img.fly-target,
.gallery-section .gallery-feature-bottom img.fly-target,
.family-section .left-card img.fly-target,
.family-section .right-card img.fly-target {
  --fly-delay: .06s !important;
}

.reaction-layer,
.heart-canvas {
  pointer-events: none !important;
}

/* 2026-06-29 phase 5.1 text visibility guard. */
.family-section.reveal:not(.is-visible) .photo-card > .photo-role-script span,
.family-section.reveal.is-visible .photo-card > .photo-role-script span,
.family-section.reveal.is-visible .photo-card.right-card > .photo-role-script span,
.family-section .photo-card > .photo-role-script span,
.invitation-section .letter-rise span,
.interview-section .letter-rise span,
.gallery-section .letter-rise span,
.section-label.letter-rise span,
.signature-word.letter-rise span {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* 2026-06-29 phase 5.1 hotfix2: restore wish controls under hero and keep intro inside phone frame. */
.intro-screen {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  z-index: 2147481000 !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #201815 !important;
  touch-action: manipulation !important;
}

.intro-screen.is-active {
  display: block !important;
}

.intro-slideshow,
.intro-shade,
.intro-copy {
  width: 100% !important;
  max-width: 100% !important;
}

.intro-photo-a,
.intro-photo-b {
  background-color: #201815 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: scale(1.015) !important;
}

.intro-copy {
  left: 0 !important;
  right: 0 !important;
  bottom: max(42px, calc(env(safe-area-inset-bottom, 0px) + 38px)) !important;
  min-height: clamp(184px, 28vh, 236px) !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.intro-title {
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(42px, 7vh, 64px) !important;
  max-width: 100% !important;
  padding: 0 16px !important;
  font-size: clamp(46px, 12.7vw, 64px) !important;
  line-height: .84 !important;
  box-sizing: border-box !important;
}

.intro-labels {
  left: clamp(22px, 8vw, 54px) !important;
  right: clamp(22px, 8vw, 54px) !important;
  bottom: 0 !important;
}

.skip-btn {
  position: absolute !important;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  z-index: 2147481500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Wish/reaction controls must live below hero, not fixed over the hero image. */
.wish-stream {
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: calc(64px + var(--safe-bottom)) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 78px 0 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  transform: none !important;
  z-index: 28 !important;
  pointer-events: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  will-change: opacity, transform !important;
}

.wish-bar {
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 74px !important;
  margin: 0 !important;
  padding: 8px 14px calc(8px + var(--safe-bottom)) !important;
  transform: none !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  will-change: opacity, transform !important;
}

.wish-panel-toggle {
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: calc(72px + var(--safe-bottom)) !important;
  width: 46px !important;
  min-height: 92px !important;
  margin: -92px 12px 0 auto !important;
  padding: 24px 0 10px !important;
  transform: none !important;
  z-index: 31 !important;
  touch-action: manipulation !important;
  will-change: bottom, opacity !important;
}

.wish-panel-toggle:hover {
  transform: translateY(-1px) !important;
}

.wish-panel-toggle.is-collapsed {
  bottom: calc(12px + var(--safe-bottom)) !important;
}

.invite.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  transform: translate3d(0, 110%, 0) !important;
  pointer-events: none !important;
}

.invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) !important;
  pointer-events: none !important;
}

body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle,
.wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wish-chip {
  max-width: min(100%, 286px) !important;
  margin: 0 0 7px 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 390px) {
  .wish-stream {
    bottom: calc(58px + var(--safe-bottom)) !important;
    padding-right: 68px !important;
  }

  .wish-bar {
    gap: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .wish-panel-toggle {
    width: 42px !important;
    min-height: 86px !important;
    margin-top: -86px !important;
    margin-right: 10px !important;
    bottom: calc(66px + var(--safe-bottom)) !important;
  }
}

/* phase51-hotfix2b: correct sticky intro offsets after resetting legacy fixed inset. */
.intro-screen {
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* 2026-06-29 phase 5.1 hotfix3: restore old bottom-fixed wish/reaction controls. */
body.intro-running .wish-stream,
body.intro-running .wish-bar,
body.intro-running .wish-panel-toggle,
body.intro-running .theme-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wish-stream {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(52px + var(--safe-bottom)) !important;
  width: min(100vw, 430px) !important;
  max-width: min(100vw, 430px) !important;
  height: 178px !important;
  max-height: 30vh !important;
  margin: 0 !important;
  padding: 0 78px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 0, 0) !important;
  transition: opacity .24s ease, transform .24s ease !important;
  z-index: 2147481190 !important;
  box-sizing: border-box !important;
}

.wish-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(100vw, 430px) !important;
  max-width: min(100vw, 430px) !important;
  min-height: 44px !important;
  max-height: 54px !important;
  margin: 0 !important;
  padding: 6px 7px calc(6px + var(--safe-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(248,233,229,0), rgba(248,233,229,.14) 34%, rgba(248,233,229,.30)) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  transform: translate3d(-50%, 0, 0) !important;
  transition: opacity .24s ease, transform .24s ease, max-height .24s ease, padding .24s ease !important;
  z-index: 2147481200 !important;
  box-sizing: border-box !important;
}

.wish-panel-toggle {
  position: fixed !important;
  left: calc(50% + min(50vw, 215px) - 51px) !important;
  right: auto !important;
  bottom: calc(50px + var(--safe-bottom)) !important;
  width: 39px !important;
  min-height: 75px !important;
  margin: 0 !important;
  padding: 19px 0 8px !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(255,150,173,.94), rgba(255,105,135,.92)) !important;
  box-shadow: 0 8px 18px rgba(212,81,113,.24) !important;
  transform: none !important;
  z-index: 2147481210 !important;
  touch-action: manipulation !important;
}

.wish-panel-toggle:hover {
  transform: none !important;
}

.wish-panel-toggle.is-collapsed {
  bottom: calc(8px + var(--safe-bottom)) !important;
}

.wish-panel-avatar {
  top: -5px !important;
  width: 31px !important;
  height: 31px !important;
  border-width: 1.5px !important;
}

.wish-panel-icon {
  width: 22px !important;
  height: 22px !important;
  font: 600 21px/1 "Montserrat", sans-serif !important;
}

.wish-panel-toggle.is-collapsed .wish-panel-icon {
  font-size: 20px !important;
}

.invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  transform: translate3d(-50%, 8px, 0) !important;
  pointer-events: none !important;
}

.invite.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  transform: translate3d(-50%, 14px, 0) !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}

body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle,
.wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wish-chip {
  max-width: min(305px, 100%) !important;
  margin: 0 0 7px 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 390px) {
  .wish-stream {
    bottom: calc(50px + var(--safe-bottom)) !important;
    height: 164px !important;
    padding-right: 68px !important;
    padding-left: 8px !important;
  }

  .wish-bar {
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .wish-panel-toggle {
    left: calc(50% + min(50vw, 215px) - 47px) !important;
    width: 36px !important;
    min-height: 70px !important;
    padding-top: 18px !important;
    bottom: calc(48px + var(--safe-bottom)) !important;
  }

  .wish-panel-toggle.is-collapsed {
    bottom: calc(8px + var(--safe-bottom)) !important;
  }

  .wish-panel-avatar {
    width: 29px !important;
    height: 29px !important;
  }
}

/* 2026-06-29 phase 5.1 hotfix4: keep wish controls fixed at the bottom edge of the phone frame, like the old sample. */
:root {
  --wish-control-left: max(0px, calc(50vw - 215px));
  --wish-control-width: min(100vw, 430px);
  --wish-control-bottom: 0px;
  --wish-toggle-left: calc(50vw + min(50vw, 215px) - 51px);
}

body.intro-running .wish-stream,
body.intro-running .wish-bar,
body.intro-running .wish-panel-toggle,
body.intro-running .theme-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wish-bar {
  position: fixed !important;
  left: var(--wish-control-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + var(--safe-bottom)) !important;
  width: var(--wish-control-width) !important;
  max-width: var(--wish-control-width) !important;
  min-height: 44px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 6px 7px calc(6px + var(--safe-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,246,247,.12) 38%, rgba(255,246,247,.22)) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transform: none !important;
  transition: opacity .24s ease, transform .24s ease, max-height .24s ease, padding .24s ease !important;
  z-index: 2147481200 !important;
  box-sizing: border-box !important;
}

.wish-stream {
  position: fixed !important;
  left: var(--wish-control-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + 52px + var(--safe-bottom)) !important;
  width: var(--wish-control-width) !important;
  max-width: var(--wish-control-width) !important;
  height: 178px !important;
  max-height: 30vh !important;
  margin: 0 !important;
  padding: 0 78px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity .24s ease, transform .24s ease !important;
  z-index: 2147481190 !important;
  box-sizing: border-box !important;
}

.wish-panel-toggle {
  position: fixed !important;
  left: var(--wish-toggle-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + 50px + var(--safe-bottom)) !important;
  width: 39px !important;
  min-height: 75px !important;
  margin: 0 !important;
  padding: 19px 0 8px !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(255,150,173,.94), rgba(255,105,135,.92)) !important;
  box-shadow: 0 8px 18px rgba(212,81,113,.24) !important;
  transform: none !important;
  z-index: 2147481210 !important;
  touch-action: manipulation !important;
}

.wish-panel-toggle:hover {
  transform: none !important;
}

.wish-panel-toggle.is-collapsed {
  bottom: calc(var(--wish-control-bottom) + 8px + var(--safe-bottom)) !important;
}

.invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  pointer-events: none !important;
}

.invite.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  transform: translate3d(0, 14px, 0) !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}

body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle,
.wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 390px) {
  .wish-stream {
    bottom: calc(var(--wish-control-bottom) + 50px + var(--safe-bottom)) !important;
    height: 164px !important;
    padding-right: 68px !important;
    padding-left: 8px !important;
  }

  .wish-bar {
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .wish-panel-toggle {
    left: var(--wish-toggle-left) !important;
    width: 36px !important;
    min-height: 70px !important;
    padding-top: 18px !important;
    bottom: calc(var(--wish-control-bottom) + 48px + var(--safe-bottom)) !important;
  }

  .wish-panel-toggle.is-collapsed {
    bottom: calc(var(--wish-control-bottom) + 8px + var(--safe-bottom)) !important;
  }
}


/* 2026-06-29 phase 5.1 hotfix5: fixed-bottom controls that cannot disappear after intro. */
:root {
  --wish-frame-width: min(100vw, 430px);
  --wish-control-left: max(0px, calc((100vw - var(--wish-frame-width)) / 2));
  --wish-control-width: var(--wish-frame-width);
  --wish-control-bottom: 0px;
  --wish-toggle-left: calc(var(--wish-control-left) + var(--wish-control-width) - 51px);
}
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-stream,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-bar,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-panel-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.wish-controls-live .wish-bar {
  position: fixed !important;
  left: var(--wish-control-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + var(--safe-bottom)) !important;
  width: var(--wish-control-width) !important;
  max-width: var(--wish-control-width) !important;
  min-height: 44px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 6px 7px calc(6px + var(--safe-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 2147481200 !important;
  box-sizing: border-box !important;
}
body.wish-controls-live .wish-stream {
  position: fixed !important;
  left: var(--wish-control-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + 52px + var(--safe-bottom)) !important;
  width: var(--wish-control-width) !important;
  max-width: var(--wish-control-width) !important;
  height: 178px !important;
  max-height: 30vh !important;
  margin: 0 !important;
  padding: 0 78px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: 2147481190 !important;
  box-sizing: border-box !important;
}
body.wish-controls-live .wish-panel-toggle {
  position: fixed !important;
  left: var(--wish-toggle-left) !important;
  right: auto !important;
  bottom: calc(var(--wish-control-bottom) + 50px + var(--safe-bottom)) !important;
  width: 39px !important;
  min-height: 75px !important;
  margin: 0 !important;
  padding: 19px 0 8px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 2147481210 !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
}
body.wish-controls-live .wish-panel-toggle.is-collapsed {
  bottom: calc(var(--wish-control-bottom) + 8px + var(--safe-bottom)) !important;
}
body.wish-controls-live .invite.wish-panel-collapsed .wish-bar,
body.wish-controls-live .invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.wish-modal-open.wish-controls-live .wish-stream,
body.wish-modal-open.wish-controls-live .wish-bar,
body.wish-modal-open.wish-controls-live .wish-panel-toggle,
body.wish-controls-live .wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 390px) {
  body.wish-controls-live .wish-stream {
    bottom: calc(var(--wish-control-bottom) + 50px + var(--safe-bottom)) !important;
    height: 164px !important;
    padding-right: 68px !important;
    padding-left: 8px !important;
  }
  body.wish-controls-live .wish-bar {
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  body.wish-controls-live .wish-panel-toggle {
    left: calc(var(--wish-control-left) + var(--wish-control-width) - 47px) !important;
    width: 36px !important;
    min-height: 68px !important;
    bottom: calc(var(--wish-control-bottom) + 48px + var(--safe-bottom)) !important;
  }
  body.wish-controls-live .wish-panel-toggle.is-collapsed {
    bottom: calc(var(--wish-control-bottom) + 8px + var(--safe-bottom)) !important;
  }
}
.guest-salutation:not([hidden]),
.guest-salutation.is-visible {
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* === PHASE 51 HOTFIX 8: fixed bottom buttons, no JS layout loop ===
   Cụm gửi lời chúc / bắn tim / quà / like được cố định bằng CSS thuần.
   Không phụ thuộc body.intro-running, Google Sheet, CMS, ResizeObserver hay scroll listener. */
:root {
  --wish-fixed-width: min(100vw, 430px);
  --wish-fixed-edge: max(8px, calc((100vw - 430px) / 2 + 8px));
}

.wish-bar,
body.wish-controls-live .wish-bar,
body.intro-running .wish-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 1200 !important;
  width: var(--wish-fixed-width) !important;
  max-width: 430px !important;
  max-height: 84px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 10px calc(8px + var(--safe-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
  background: linear-gradient(180deg, rgba(248,233,229,0), rgba(248,233,229,.82) 28%, rgba(248,233,229,.98)) !important;
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease !important;
  will-change: transform !important;
}

.wish-stream,
body.wish-controls-live .wish-stream,
body.intro-running .wish-stream {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(58px + var(--safe-bottom, 0px)) !important;
  z-index: 1198 !important;
  width: var(--wish-fixed-width) !important;
  max-width: 430px !important;
  height: 86px !important;
  margin: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.wish-panel-toggle,
body.wish-controls-live .wish-panel-toggle,
body.intro-running .wish-panel-toggle {
  position: fixed !important;
  left: auto !important;
  right: var(--wish-fixed-edge) !important;
  bottom: calc(48px + var(--safe-bottom, 0px)) !important;
  z-index: 1201 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 23px 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ff96ad 0%, #ff728d 48%, #ff5574 100%) !important;
  box-shadow: 0 13px 26px rgba(212, 81, 113, .35) !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.wish-panel-toggle.is-collapsed,
body.wish-controls-live .wish-panel-toggle.is-collapsed,
body.intro-running .wish-panel-toggle.is-collapsed {
  bottom: calc(8px + var(--safe-bottom, 0px)) !important;
  height: 58px !important;
  min-height: 58px !important;
  padding-top: 18px !important;
}

.wish-panel-avatar {
  width: 36px !important;
  height: 36px !important;
  top: -8px !important;
}

.wish-panel-icon {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  font: 700 22px/1 "Montserrat", sans-serif !important;
}

.wish-input-pill {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 7px 0 13px !important;
  border-radius: 999px !important;
}

.wish-input-pill input {
  height: 34px !important;
  font-size: 12px !important;
}

.wish-chat-submit,
.wish-bar .gift-button[data-gift-button],
.gift-button,
.heart-button {
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.love-shot-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 72px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.love-shot-icon {
  font-size: 18px !important;
}

.heart-button span {
  font-size: 18px !important;
}

.heart-button b {
  top: -7px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
}

.wish-chip {
  max-width: min(310px, calc(100vw - 92px)) !important;
  margin: 0 0 7px 12px !important;
  padding: 8px 11px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.invite.wish-panel-collapsed .wish-bar,
body.wish-controls-live .invite.wish-panel-collapsed .wish-bar,
body.intro-running .invite.wish-panel-collapsed .wish-bar,
body.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translate3d(-50%, 18px, 0) !important;
}

.invite.wish-panel-collapsed .wish-stream,
body.wish-controls-live .invite.wish-panel-collapsed .wish-stream,
body.intro-running .invite.wish-panel-collapsed .wish-stream {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 12px, 0) !important;
}

.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-stream,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-bar,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-panel-toggle,
body:has(.intro-screen.is-active:not(.is-hiding)) .wish-stream,
body:has(.intro-screen.is-active:not(.is-hiding)) .wish-bar,
body:has(.intro-screen.is-active:not(.is-hiding)) .wish-panel-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 374px) {
  .wish-bar,
  body.wish-controls-live .wish-bar,
  body.intro-running .wish-bar {
    gap: 4px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  .love-shot-button {
    min-width: 66px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .wish-panel-toggle,
  body.wish-controls-live .wish-panel-toggle,
  body.intro-running .wish-panel-toggle {
    width: 38px !important;
    min-width: 38px !important;
    right: max(6px, calc((100vw - 430px) / 2 + 6px)) !important;
  }
}

/* HOTFIX 8 compatibility: keep intro-hide selector parseable on browsers without :has(). */
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-stream,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-bar,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-panel-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@supports selector(body:has(.intro-screen)) {
  body:has(.intro-screen.is-active:not(.is-hiding)) .wish-stream,
  body:has(.intro-screen.is-active:not(.is-hiding)) .wish-bar,
  body:has(.intro-screen.is-active:not(.is-hiding)) .wish-panel-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* HOTFIX 9: keep bottom actions visible over the intro without disabling effects. */
.wish-stream,
body.wish-controls-live .wish-stream,
body.intro-running .wish-stream,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-stream {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(58px + var(--safe-bottom, 0px)) !important;
  z-index: 2147481790 !important;
  width: min(100vw, 430px) !important;
  max-width: 430px !important;
  height: 86px !important;
  margin: 0 !important;
  display: flex !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.wish-bar,
body.wish-controls-live .wish-bar,
body.intro-running .wish-bar,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 2147481800 !important;
  width: min(100vw, 430px) !important;
  max-width: 430px !important;
  min-height: 54px !important;
  max-height: 84px !important;
  margin: 0 !important;
  padding: 8px 10px calc(8px + var(--safe-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
  background: linear-gradient(180deg, rgba(248,233,229,0), rgba(248,233,229,.82) 28%, rgba(248,233,229,.98)) !important;
}

.wish-panel-toggle,
body.wish-controls-live .wish-panel-toggle,
body.intro-running .wish-panel-toggle,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-panel-toggle {
  position: fixed !important;
  left: auto !important;
  right: max(8px, calc((100vw - 430px) / 2 + 8px)) !important;
  bottom: calc(48px + var(--safe-bottom, 0px)) !important;
  z-index: 2147481810 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 23px 0 8px !important;
  display: flex !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  touch-action: manipulation !important;
}

.wish-panel-toggle.is-collapsed,
body.wish-controls-live .wish-panel-toggle.is-collapsed,
body.intro-running .wish-panel-toggle.is-collapsed {
  bottom: calc(8px + var(--safe-bottom, 0px)) !important;
  height: 58px !important;
  min-height: 58px !important;
  padding-top: 18px !important;
}

.invite.wish-panel-collapsed .wish-bar,
body.wish-controls-live .invite.wish-panel-collapsed .wish-bar,
body.intro-running .invite.wish-panel-collapsed .wish-bar,
body.wish-panel-collapsed .wish-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translate3d(-50%, 18px, 0) !important;
}

.invite.wish-panel-collapsed .wish-stream,
body.wish-controls-live .invite.wish-panel-collapsed .wish-stream,
body.intro-running .invite.wish-panel-collapsed .wish-stream,
body.wish-panel-collapsed .wish-stream,
body.wish-modal-open .wish-stream,
body.wish-modal-open .wish-bar,
body.wish-modal-open .wish-panel-toggle,
.wish-layer-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 374px) {
  .wish-bar,
  body.wish-controls-live .wish-bar,
  body.intro-running .wish-bar {
    gap: 4px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .love-shot-button {
    min-width: 66px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .wish-panel-toggle,
  body.wish-controls-live .wish-panel-toggle,
  body.intro-running .wish-panel-toggle {
    width: 38px !important;
    min-width: 38px !important;
    right: max(6px, calc((100vw - 430px) / 2 + 6px)) !important;
  }
}

/* PHASE 6.3 - Media runtime guard */
[data-media-status="loading"]{background-color:rgba(255,246,242,.72)}img[data-media-status="loading"]{background-image:linear-gradient(110deg,rgba(255,255,255,.16),rgba(255,255,255,.58),rgba(255,255,255,.16));background-size:220% 100%;animation:phase63-media-soft-loading 1.25s ease-in-out infinite}img[data-media-status="loaded"]{animation:none}img[data-media-status="error"]{background:linear-gradient(135deg,rgba(255,245,241,.96),rgba(238,211,203,.86));object-fit:contain;opacity:.86}[data-bg][data-media-status="error"]{background-image:linear-gradient(135deg,rgba(255,246,242,.96),rgba(232,205,195,.92))!important}@keyframes phase63-media-soft-loading{0%{background-position:180% 50%}100%{background-position:-80% 50%}}html.performance-lite .petal-layer,html.performance-lite .petal,html.performance-lite .floating-heart,html.performance-lite .sparkle{display:none!important}html.performance-lite .gallery-fly-image,html.performance-lite .photo-card img,html.performance-lite .reveal,html.performance-lite [data-letter-rise] span,html.performance-lite .hero-title-main,html.performance-lite .hero-title-ghost{filter:none!important;transition-duration:.28s!important;animation-duration:.45s!important;animation-delay:0s!important}html.performance-lite .light-video{opacity:.14!important}@media (prefers-reduced-motion:reduce){img[data-media-status="loading"]{animation:none!important}}

/* Phase 6.7 R2 guest manager */
.admin-guests-card .admin-content-note code,.admin-guest-import code{background:rgba(255,255,255,.65);border-radius:8px;padding:.08rem .32rem}.admin-guest-editor{margin:1rem 0;padding:1rem;border:1px solid rgba(160,90,110,.18);border-radius:22px;background:rgba(255,255,255,.62);box-shadow:0 12px 28px rgba(120,70,80,.08)}.admin-guest-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.admin-guest-form-grid label,.admin-guest-import{display:flex;flex-direction:column;gap:.35rem}.admin-guest-form-grid span{font-weight:700;color:#8f5a68}.admin-guest-form-grid input,.admin-guest-form-grid select,.admin-guest-form-grid textarea,.admin-guest-import textarea{width:100%;box-sizing:border-box;border:1px solid rgba(160,90,110,.22);border-radius:14px;padding:.72rem .85rem;background:rgba(255,255,255,.92);font:inherit;color:#56313a;outline:none}.admin-guest-form-grid textarea,.admin-guest-import textarea{min-height:96px;resize:vertical}.admin-guest-note-field{grid-column:1/-1}.admin-guest-actions{margin-top:.9rem}.admin-guest-import textarea{min-height:104px;margin-top:.65rem}.admin-guest-toolbar{align-items:center}.admin-guest-summary{display:block;margin:.75rem 0 1rem;color:#865260}.admin-guest-summary[data-type="success"]{color:#187447}.admin-guest-table td small{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8e7480;font-size:.72rem;margin-top:.2rem}.admin-guest-table td button{border:0;border-radius:999px;padding:.45rem .7rem;background:#fff0f5;color:#985066;font-weight:700;cursor:pointer}.admin-guest-table td button:hover{filter:brightness(.97)}.admin-guest-row-actions{display:flex;gap:.35rem;flex-wrap:wrap}.admin-guest-row-actions button[data-delete-guest]{background:#fff4ee;color:#b24932}@media(max-width:860px){.admin-guest-form-grid{grid-template-columns:1fr}.admin-guest-table-wrap{overflow-x:auto}.admin-guest-table{min-width:980px}}
.admin-public-id-note{display:block;color:#9b7b86;font-size:.7rem;margin-top:.16rem}@media(max-width:860px){.admin-guest-table{min-width:1180px}}

/* Phase 6.7.3 - route label/autoscroll visual polish hotfix */
.route-button{color:#fff8f4!important;visibility:visible!important;opacity:1!important;text-indent:0!important;overflow:visible!important}.wedding-events-section .reception-route-button{color:#fffaf7!important;font-weight:700!important}.route-button:empty::before{content:"Chỉ đường"}.ceremony-journey-section .side-route-button:empty::before,.image-road-block .side-route-button:empty::before{content:"CHỈ ĐƯỜNG"}.route-button.is-disabled{opacity:.72!important;pointer-events:none!important}.family-section.reveal:not(.is-visible) .photo-card,.family-section .photo-card:has(img.fly-target:not(.is-visible)),.gallery-section.reveal:not(.is-visible) .gallery-feature,.gallery-section .gallery-feature:has(img.fly-target:not(.is-visible)){background:transparent!important;box-shadow:none!important;filter:none!important}.family-section.reveal:not(.is-visible) .photo-card img,.family-section .photo-card img.fly-target:not(.is-visible),.gallery-section.reveal:not(.is-visible) .gallery-feature img,.gallery-section.reveal:not(.is-visible) .masonry-gallery img,.gallery-section .gallery-feature img.fly-target:not(.is-visible),.gallery-section .masonry-gallery img.fly-target:not(.is-visible){opacity:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}.gallery-section.reveal:not(.is-visible) .masonry-gallery img,.gallery-section .masonry-gallery img.fly-target:not(.is-visible){border-color:transparent!important}.gallery-section.reveal:not(.is-visible) .gallery-feature::after,.gallery-section .gallery-feature:has(img.fly-target:not(.is-visible))::after{content:none!important;display:none!important}
/* Phase 6.7.4: Lightbox zoom performance hotfix. Không giới hạn kích thước ảnh nguồn; chỉ tối ưu transform khi pinch/drag. */
.gallery-lightbox{overscroll-behavior:contain!important}.gallery-lightbox>.gallery-lightbox-image{contain:paint!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transform-style:preserve-3d!important;transition:none!important;will-change:transform!important}.gallery-lightbox.is-zoom-animating>.gallery-lightbox-image{transition:transform .18s cubic-bezier(.2,.72,.2,1)!important}.gallery-lightbox.is-gesturing>.gallery-lightbox-image{transition:none!important;box-shadow:none!important;cursor:grabbing!important}.gallery-lightbox.is-zoomed>.gallery-lightbox-image{cursor:grab!important;box-shadow:0 8px 26px rgba(0,0,0,.20)!important}.gallery-lightbox.is-gesturing .gallery-lightbox-thumbs{pointer-events:none!important;opacity:.28!important}.gallery-lightbox.is-zoomed .gallery-lightbox-nav{opacity:.42!important;pointer-events:none!important}@media (max-width:768px){.gallery-lightbox{touch-action:none!important}.gallery-lightbox>.gallery-lightbox-image{max-width:98vw!important;max-height:calc(100dvh - 116px)!important}}

/* Phase 6.7.5: wedding-red family palette hotfix */
:root{--wedding-red:#e61919;--wedding-red-deep:#b90000;--wedding-red-light:#ff3a3a;--wedding-gold-bright:#fff1a8;--wedding-gold-soft:#fff9d8}.family-section .family-content{border-left-color:var(--wedding-red)!important}.family-section .family-red-mark{background:linear-gradient(180deg,var(--wedding-red-light) 0%,var(--wedding-red) 46%,var(--wedding-red-deep) 100%)!important;box-shadow:0 10px 22px rgba(230,25,25,.18)!important}.family-section .family-red-mark i{background:#fff8f0!important;box-shadow:0 0 0 1px rgba(255,255,255,.58),0 0 8px rgba(255,216,77,.22)!important}.family-section .family-red-mark b{color:var(--wedding-red-deep)!important;background:radial-gradient(circle at 34% 28%,#fffdf0 0%,var(--wedding-gold-soft) 44%,var(--wedding-gold-bright) 100%)!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important;box-shadow:inset 0 0 0 1px rgba(255,255,235,.9),0 6px 12px rgba(120,0,0,.13)!important}.family-section .family-calligraphy,.family-section .family-calligraphy-top{color:#b8915a!important}

/* Phase 6.7.6 story corner background hotfix */
.interview-photo.story-quote-photo{border-radius:12px!important;overflow:hidden!important;background:transparent!important;clip-path:inset(0 round 12px)!important}.interview-photo.story-quote-photo img{border-radius:0!important;background:transparent!important;clip-path:none!important}.interview-photo.story-quote-photo::after{border-radius:inherit!important;clip-path:inset(0 round 12px)!important}

/* ---- Phase 6.7.7 album background + music playlist hotfix ---- */
.gallery-section,
.gallery-section.paper-section {
  background: #fffdfb !important;
  background-image: linear-gradient(180deg, #fff 0%, #fffdfb 52%, #fff7f2 100%) !important;
}
.gallery-section::before,
.gallery-section::after {
  background-color: transparent !important;
}
.gallery-section .section-label,
.gallery-section .section-title,
.gallery-section .gallery-transition-strip {
  background-color: transparent !important;
}
.music-panel {
  width: min(286px, calc(100vw - 36px)) !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 253, 251, .94) !important;
  border: 1px solid rgba(185, 124, 91, .20) !important;
}
.music-panel-title {
  grid-column: 1 / -1 !important;
  display: block !important;
  max-width: 100% !important;
  padding-right: 4px !important;
  color: #49352d !important;
  font-size: 11px !important;
}
.music-panel-actions {
  display: flex !important;
  grid-column: 1 / -1 !important;
  gap: 7px !important;
}
.music-panel-actions button {
  flex: 1 1 auto !important;
}
.music-track-list {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 6px !important;
  max-height: 172px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 2px 1px !important;
}
.music-track-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(185, 124, 91, .16) !important;
  border-radius: 12px !important;
  background: rgba(255, 246, 241, .82) !important;
  color: #5a4036 !important;
  text-align: left !important;
  box-shadow: none !important;
}
.music-track-item.is-active {
  border-color: rgba(215, 42, 64, .46) !important;
  background: linear-gradient(135deg, rgba(255, 230, 224, .98), rgba(255, 248, 237, .95)) !important;
  color: #b51d2e !important;
}
.music-track-name,
.music-track-artist {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.music-track-name {
  font: 800 11px/1.2 "Montserrat", var(--font-sans, sans-serif) !important;
}
.music-track-artist {
  color: rgba(82, 58, 48, .72) !important;
  font: 700 9px/1.2 "Montserrat", var(--font-sans, sans-serif) !important;
}
.music-volume-label {
  grid-column: 1 / -1 !important;
  margin-top: 1px !important;
  color: rgba(82, 58, 48, .68) !important;
  font: 800 9px/1 "Montserrat", var(--font-sans, sans-serif) !important;
}
@media (max-width: 430px) {
  .music-panel {
    width: min(278px, calc(100vw - 26px)) !important;
    left: auto !important;
    right: 10px !important;
  }
}

/* ---- Phase 6.7.8 album image-area only + music title-only hotfix ---- */
.gallery-section,.gallery-section.paper-section{background:var(--paper)!important;background-image:none!important}.gallery-section::before,.gallery-section::after,.gallery-section .section-label,.gallery-section .section-title,.gallery-section .gallery-transition-strip{background-color:transparent!important;background-image:none!important}.gallery-section .gallery-feature,.gallery-section .masonry-gallery,.gallery-section .gallery-feature img,.gallery-section .masonry-gallery img{background-color:#fff!important}.gallery-section .masonry-gallery{border-radius:18px!important}.music-track-item{align-items:center!important;padding-block:9px!important}.music-track-name{font-size:11px!important;line-height:1.25!important}.music-track-artist{display:none!important}

/* ---- Phase 6.7.9 gallery full image-area + R2 album image display hotfix ---- */
.gallery-section,.gallery-section.paper-section{background:var(--paper)!important;background-image:none!important}.gallery-section .section-label,.gallery-section .gallery-transition-strip{background:var(--paper)!important;background-image:none!important}.gallery-image-area{position:relative!important;z-index:1!important;width:calc(100% + 48px)!important;margin:0 -24px 0!important;padding:0 24px 24px!important;background:#fff!important;background-image:linear-gradient(180deg,#fff 0%,#fff 58%,#fffaf8 100%)!important;border-top:1px solid rgba(185,124,91,.10)!important;border-bottom:1px solid rgba(185,124,91,.22)!important;box-shadow:inset 0 10px 22px rgba(143,96,70,.035),inset 0 -10px 18px rgba(143,96,70,.035)!important}.gallery-image-area::after{content:""!important;position:absolute!important;left:24px!important;right:24px!important;bottom:0!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(169,103,73,.36),transparent)!important;pointer-events:none!important}.gallery-image-area .gallery-feature,.gallery-image-area .masonry-gallery{background:transparent!important}.gallery-image-area .gallery-feature-top{margin-top:0!important}.gallery-image-area .gallery-feature-bottom{margin-bottom:0!important}.gallery-image-area .gallery-feature img,.gallery-image-area .masonry-gallery img{background-color:#fff!important}.gallery-section .masonry-gallery img[data-media-status="loading"],.gallery-section .masonry-gallery img:not([src]){background:linear-gradient(135deg,#fff 0%,#fff8f6 100%)!important}@media (max-width:390px){.gallery-image-area{width:calc(100% + 40px)!important;margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}.gallery-image-area::after{left:20px!important;right:20px!important}}
/* ---- Phase 6.7.10 gallery white boundary + lower divider spacing hotfix ---- */
.gallery-section,.gallery-section.paper-section{background:var(--paper)!important;background-image:none!important;padding-bottom:0!important}.gallery-section .section-label{background:var(--paper)!important;background-image:none!important}.gallery-section .gallery-transition-strip{margin-bottom:0!important;border-bottom:1px solid rgba(151,103,85,.10)!important}.gallery-image-area{margin-top:0!important;padding-top:20px!important;padding-bottom:58px!important;border-top:0!important;border-bottom:1px solid rgba(185,124,91,.24)!important;background:#fff!important;background-image:linear-gradient(180deg,#fff 0%,#fff 72%,#fffaf7 100%)!important;box-shadow:inset 0 10px 22px rgba(143,96,70,.025),inset 0 -12px 20px rgba(143,96,70,.035)!important}.gallery-image-area::after{bottom:0!important;background:linear-gradient(90deg,transparent,rgba(169,103,73,.42),transparent)!important}.gallery-image-area .gallery-feature-bottom{margin-bottom:0!important}.gallery-section+.wedding-events-section{padding-top:20px!important}

/* ---- Phase 6.7.12 lightbox/story/smooth image reveal hotfix ---- */
.interview-photo.story-quote-photo,.interview-photo.story-quote-photo img,.interview-photo.story-quote-photo::after{border-radius:0!important;clip-path:none!important}.interview-photo.story-quote-photo{overflow:hidden!important;background:transparent!important}.family-section .photo-card img.fly-target,.gallery-section .gallery-feature img.fly-target,.gallery-section .masonry-gallery img.fly-target,.gallery-section .gallery-fly-image,.interview-photo.story-quote-photo img{backface-visibility:hidden!important;transform-origin:center center!important;transition-property:opacity,transform!important;transition-duration:.98s!important;transition-timing-function:cubic-bezier(.22,.92,.24,1)!important;filter:none!important;will-change:transform,opacity!important}.family-section .photo-card img.fly-target:not(.is-visible),.gallery-section.reveal:not(.is-visible) .gallery-feature img,.gallery-section.reveal:not(.is-visible) .masonry-gallery img,.gallery-section.reveal:not(.is-visible) .gallery-fly-image{opacity:0!important;transform:translate3d(var(--fly-x,0),var(--fly-y,24px),0) scale(.975) rotate(var(--fly-start-rotate,0deg))!important;filter:none!important;transition-delay:0s!important}.family-section .photo-card img.fly-target.is-visible,.gallery-section.reveal.is-visible .gallery-feature img,.gallery-section.reveal.is-visible .masonry-gallery img,.gallery-section.reveal.is-visible .gallery-fly-image,.interview-section.is-visible .interview-photo.story-quote-photo img{opacity:1!important;transform:translate3d(0,0,0) scale(1) rotate(0deg)!important;filter:none!important}.gallery-section.reveal.is-visible .gallery-feature img,.gallery-section.reveal.is-visible .masonry-gallery img,.gallery-section.reveal.is-visible .gallery-fly-image{transition-delay:var(--fly-delay,.06s)!important}


/* ---- Final Effect Pack: optimized full-page petal canvas ---- */
.petal-layer{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:7!important;
  pointer-events:none!important;
  overflow:hidden!important;
  transform:none!important;
  contain:strict!important;
  opacity:1!important;
  transition:opacity .28s ease, visibility .28s ease!important;
}
.petal-layer .petal{display:none!important;}
.petal-canvas{display:block!important;width:100%!important;height:100%!important;pointer-events:none!important;}
body.gallery-lightbox-open .petal-layer[data-hide-lightbox="true"]{opacity:0!important;visibility:hidden!important;}
.admin-setting-field select{
  width:100%;
  border:1px solid rgba(177,111,123,.28);
  border-radius:12px;
  background:#fff;
  color:#512e35;
  padding:11px 12px;
  font:inherit;
  outline:none;
  box-sizing:border-box;
}
.admin-setting-field select:focus{border-color:rgba(210,73,98,.68);box-shadow:0 0 0 3px rgba(210,73,98,.11);}


/* Final hotfix: transparent bottom wish controls + visible optimized petals */
.wish-bar,
body.wish-controls-live .wish-bar,
body.intro-running .wish-bar,
.invite > .intro-screen.is-active:not(.is-hiding) ~ .wish-bar {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.wish-bar::before,
.wish-bar::after {
  content: none !important;
  display: none !important;
}
.petal-layer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 2147480900 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}
.petal-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html.performance-lite .petal-layer[data-petal-layer] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html.performance-lite .petal-layer[data-petal-layer][data-reduce-lite="true"] {
  opacity: .72 !important;
}
body.gallery-lightbox-open .petal-layer[data-hide-lightbox="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 2026-07-04: align countdown pink with final Thank you and add safe scroll collapse. */
.countdown-section {
  --countdown-thank-pink: #CC313D;
  --countdown-thank-pink-soft: rgba(204, 49, 61, .16);
  --countdown-thank-pink-glow: rgba(204, 49, 61, .22);
}
.countdown-hero-title {
  color: #fffafc !important;
  -webkit-text-stroke: .8px var(--countdown-thank-pink) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.36),
    1px 0 0 rgba(204,49,61,.68),
    -1px 0 0 rgba(204,49,61,.68),
    0 1px 0 rgba(204,49,61,.68),
    0 -1px 0 rgba(204,49,61,.68),
    0 6px 16px var(--countdown-thank-pink-glow) !important;
}
.countdown-grid b,
.countdown-grid small {
  color: var(--countdown-thank-pink) !important;
}
.countdown-grid span {
  border: 1px solid var(--countdown-thank-pink-soft) !important;
  box-shadow: 0 8px 22px rgba(204, 49, 61, .14) !important;
}
.countdown-sample-quote,
.calendar-sample-quote {
  color: var(--countdown-thank-pink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.24), 0 6px 16px rgba(204,49,61,.13) !important;
}
.calendar-action {
  border-color: rgba(204, 49, 61, .24) !important;
  background: rgba(204, 49, 61, .10) !important;
  color: var(--countdown-thank-pink) !important;
  box-shadow: 0 8px 18px rgba(204, 49, 61, .10) !important;
}
.calendar-action:focus-visible,
.calendar-action:hover {
  background: rgba(204, 49, 61, .16) !important;
  border-color: rgba(204, 49, 61, .38) !important;
  color: var(--countdown-thank-pink) !important;
}
.countdown-section .calendar-grid .is-wedding::before {
  background: rgba(204, 49, 61, .18) !important;
  border-color: rgba(204, 49, 61, .26) !important;
  box-shadow: 0 8px 18px rgba(204, 49, 61, .16) !important;
}
.countdown-section .calendar-grid .is-wedding {
  color: var(--countdown-thank-pink) !important;
}
.calendar-grid .is-wedding::before,
.countdown-section .calendar-grid .is-wedding::before {
  content: "" !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.calendar-grid .is-wedding::after,
.countdown-section .calendar-grid .is-wedding::after {
  content: "" !important;
}
.countdown-section .countdown-hero-title,
.countdown-section > .countdown-grid,
.countdown-section > .inline-calendar,
.countdown-section > .calendar-actions,
.countdown-section > .countdown-sample-quote,
.countdown-section > .calendar-sample-quote {
  transform-origin: top center !important;
  transition:
    transform .42s cubic-bezier(.2, .8, .2, 1),
    opacity .34s ease,
    filter .34s ease !important;
  will-change: transform, opacity !important;
}
.countdown-section.is-scroll-expanded .countdown-hero-title,
.countdown-section.is-scroll-expanded > .countdown-grid,
.countdown-section.is-scroll-expanded > .inline-calendar,
.countdown-section.is-scroll-expanded > .calendar-actions,
.countdown-section.is-scroll-expanded > .countdown-sample-quote,
.countdown-section.is-scroll-expanded > .calendar-sample-quote {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
}
.countdown-section.is-scroll-collapsed .countdown-hero-title {
  opacity: .88 !important;
  transform: translate3d(0, -6px, 0) scale(.92) !important;
}
.countdown-section.is-scroll-collapsed > .countdown-grid {
  opacity: .92 !important;
  transform: translate3d(0, -8px, 0) scale(.90) !important;
  filter: saturate(.96) !important;
}
.countdown-section.is-scroll-collapsed > .countdown-sample-quote,
.countdown-section.is-scroll-collapsed > .calendar-sample-quote {
  opacity: .64 !important;
  transform: translate3d(0, -8px, 0) scale(.96) !important;
}
.countdown-section.is-scroll-collapsed > .inline-calendar,
.countdown-section.is-scroll-collapsed > .calendar-actions {
  opacity: .86 !important;
  transform: translate3d(0, -8px, 0) scale(.97) !important;
}
@media (prefers-reduced-motion: reduce) {
  .countdown-section .countdown-hero-title,
  .countdown-section > .countdown-grid,
  .countdown-section > .inline-calendar,
  .countdown-section > .calendar-actions,
  .countdown-section > .countdown-sample-quote,
  .countdown-section > .calendar-sample-quote {
    transition: none !important;
    transform: none !important;
  }
}

/* 2026-07-04: apply the scroll collapse/return motion to the whole invitation content. */
.invite > .section,
.invite > .story-transition-strip,
.invite > .sweet-transition-strip,
.invite > .ending-card {
  transform-origin: top center !important;
  transition:
    transform .42s cubic-bezier(.2, .8, .2, 1),
    opacity .34s ease,
    filter .34s ease !important;
  will-change: transform, opacity !important;
}
.invite.page-scroll-expanded > .section,
.invite.page-scroll-expanded > .story-transition-strip,
.invite.page-scroll-expanded > .sweet-transition-strip,
.invite.page-scroll-expanded > .ending-card {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
}
.invite.page-scroll-collapsed > .section,
.invite.page-scroll-collapsed > .story-transition-strip,
.invite.page-scroll-collapsed > .sweet-transition-strip,
.invite.page-scroll-collapsed > .ending-card {
  opacity: .92 !important;
  transform: translate3d(0, -7px, 0) scale(.975) !important;
  filter: saturate(.98) !important;
}
@media (prefers-reduced-motion: reduce) {
  .invite > .section,
  .invite > .story-transition-strip,
  .invite > .sweet-transition-strip,
  .invite > .ending-card {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* 2026-07-04: reusable two-way viewport reveal for the whole page. */
.invite.page-scroll-expanded > .section,
.invite.page-scroll-expanded > .story-transition-strip,
.invite.page-scroll-expanded > .sweet-transition-strip,
.invite.page-scroll-expanded > .ending-card,
.invite.page-scroll-collapsed > .section,
.invite.page-scroll-collapsed > .story-transition-strip,
.invite.page-scroll-collapsed > .sweet-transition-strip,
.invite.page-scroll-collapsed > .ending-card {
  opacity: inherit !important;
  transform: inherit !important;
  filter: inherit !important;
}
.reveal {
  transform-origin: center center !important;
  transition:
    opacity .58s ease,
    transform .68s cubic-bezier(.2, .8, .2, 1),
    filter .58s ease !important;
}
.reveal:not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 30px, 0) scale(.965) !important;
  filter: blur(2px) saturate(.94) !important;
  pointer-events: none !important;
}
.reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
  pointer-events: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal:not(.is-visible),
  .reveal.is-visible {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* 2026-07-04: beige lead-in area with white text and two-line couple names. */
.family-section,
.family-section.paper-section,
.invitation-section,
.invitation-section.paper-section {
  background: #D1C59E !important;
  background-image: none !important;
}
.family-section .family-calligraphy,
.family-section .family-calligraphy-top,
.family-section .name-signature,
.family-section .name-signature span,
.family-section .name-signature i,
.family-section .name-signature i::before,
.invitation-section .section-label,
.invitation-section .letter-rise span,
.invitation-section .invitation-message-card,
.invitation-section .invitation-message-card p,
.invitation-section .invitation-message-highlight,
.invitation-section .invitation-message-highlight span {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 5px 14px rgba(83,73,49,.12) !important;
}
.invitation-section .invitation-message-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.invitation-section .ornament-line {
  background: rgba(255,255,255,.62) !important;
}
.family-section .name-signature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) !important;
  align-items: center !important;
  width: calc(100% + 54px) !important;
  max-width: none !important;
  gap: 8px !important;
  margin: 32px -27px 4px !important;
  padding: 0 4px !important;
  font-size: clamp(36px, 11vw, 54px) !important;
  line-height: .86 !important;
}
.family-section .name-signature span {
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
  font: 300 clamp(36px, 11vw, 54px)/.88 "Quicksand", sans-serif !important;
}
.family-section .name-signature span:first-child {
  text-align: left !important;
}
.family-section .name-signature span:last-child {
  text-align: right !important;
}
.family-section .name-signature i {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  color: transparent !important;
}
.family-section .name-signature i::before {
  content: "\2665" !important;
  color: #fff !important;
  background: none !important;
  font: 700 24px/1 serif !important;
}
@media (max-width: 390px) {
  .family-section .name-signature {
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: clamp(36px, 10.8vw, 48px) !important;
  }
  .family-section .name-signature i {
    width: 26px !important;
    height: 26px !important;
  }
  .family-section .name-signature i::before {
    font-size: 23px !important;
  }
}

/* 2026-07-04: keep invitation card and original name styling while using the beige area. */
.family-section .photo-card > .photo-role-script,
.family-section .photo-card > .photo-role-script span,
.family-section .photo-card figcaption,
.family-section .name-signature,
.family-section .name-signature span {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 5px 14px rgba(83,73,49,.12) !important;
}
.family-section .name-signature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(52px, 16vw, 68px) minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
  column-gap: 10px !important;
  margin: 10px auto -20px !important;
  padding: 2px 0 0 !important;
  line-height: 1 !important;
}
.family-section .name-signature span {
  display: block !important;
  align-self: center !important;
  min-width: 0 !important;
  white-space: normal !important;
  font: 400 clamp(24px, 6.8vw, 31px)/.95 var(--font-name) !important;
  font-family: "Dancing Script", cursive !important;
}
.family-section .name-signature span:first-child {
  text-align: left !important;
}
.family-section .name-signature span:last-child {
  text-align: right !important;
}
.family-section .name-signature i {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: clamp(70px, 20vw, 86px) !important;
  height: clamp(70px, 20vw, 86px) !important;
  color: transparent !important;
  transform: translateY(12px) !important;
}
.family-section .name-signature i::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
}
.invitation-section .invitation-message-card {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(88, 68, 58, .08) !important;
  box-shadow: 0 8px 20px rgba(70, 47, 39, .08) !important;
  color: #655653 !important;
}
.invitation-section .invitation-message-card p {
  color: #655653 !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight {
  color: #b79a7d !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight span {
  color: #e6202f !important;
  text-shadow: none !important;
}
@media (max-width: 390px) {
  .family-section .name-signature {
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    margin-top: 8px !important;
  }
  .family-section .name-signature i {
    width: 54px !important;
    height: 54px !important;
  }
}

/* 2026-07-04: story timeline block after the English poem. */
.story-timeline-block {
  position: relative !important;
  width: calc(100% + 12px) !important;
  margin: 24px -6px 0 !important;
  padding: 0 0 10px !important;
  color: #3d3932 !important;
  font-family: "Quicksand", "Montserrat", sans-serif !important;
}
.story-timeline-lead {
  margin: 0 auto 24px !important;
  max-width: 390px !important;
  color: #3d3932 !important;
  font: 500 clamp(18px, 5.15vw, 24px)/1.42 "Cormorant Garamond", serif !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}
.story-timeline-track {
  position: relative !important;
  padding: 4px 8px 8px 34px !important;
}
.story-timeline-track::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 0 !important;
  bottom: 48% !important;
  width: 3px !important;
  background: #d7c99d !important;
  border-radius: 999px !important;
}
.story-timeline-item {
  position: relative !important;
  margin: 0 0 34px !important;
  text-align: left !important;
}
.story-timeline-item-right {
  margin-top: 38px !important;
  padding-right: 28px !important;
  text-align: right !important;
}
.story-timeline-item-right::before {
  content: "" !important;
  position: absolute !important;
  left: -19px !important;
  right: 1px !important;
  top: -52px !important;
  height: 98px !important;
  border-left: 3px solid #d7c99d !important;
  border-bottom: 3px solid #d7c99d !important;
  border-right: 3px solid #d7c99d !important;
  border-bottom-left-radius: 52px !important;
  border-top-right-radius: 52px !important;
  pointer-events: none !important;
}
.story-timeline-item-right::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 46px !important;
  bottom: -24px !important;
  width: 3px !important;
  background: #d7c99d !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
.story-timeline-node {
  position: absolute !important;
  z-index: 2 !important;
  left: -27px !important;
  top: 4px !important;
  width: 17px !important;
  height: 17px !important;
  border: 4px solid #d7c99d !important;
  border-radius: 999px !important;
  background: #fffaf3 !important;
  box-shadow: 0 0 0 5px #fffaf3 !important;
}
.story-timeline-item-right .story-timeline-node {
  left: auto !important;
  right: -35px !important;
  top: 42px !important;
}
.story-timeline-copy {
  position: relative !important;
  z-index: 1 !important;
}
.story-timeline-copy h3 {
  margin: 0 0 12px !important;
  color: #aaa085 !important;
  font: 500 clamp(22px, 6.2vw, 29px)/1.1 "Quicksand", sans-serif !important;
  letter-spacing: 0 !important;
}
.story-timeline-copy time {
  display: block !important;
  margin: 0 0 5px !important;
  color: #3d3932 !important;
  font: 600 clamp(15px, 4.3vw, 19px)/1.2 "Quicksand", sans-serif !important;
}
.story-timeline-copy p {
  margin: 0 0 22px !important;
  color: #3d3932 !important;
  font: 500 clamp(16px, 4.35vw, 21px)/1.55 "Quicksand", sans-serif !important;
  letter-spacing: 0 !important;
}
.story-timeline-photo {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fff !important;
}
.story-timeline-photo img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
.story-timeline-photo::before,
.story-timeline-photo::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #ffd337 !important;
  box-shadow: 0 0 0 8px rgba(255, 211, 55, .14) !important;
  pointer-events: none !important;
}
.story-timeline-photo::before {
  left: 12% !important;
  top: 18% !important;
}
.story-timeline-photo::after {
  right: 12% !important;
  bottom: 17% !important;
}
@media (max-width: 390px) {
  .story-timeline-block {
    width: calc(100% + 6px) !important;
    margin-left: -3px !important;
    margin-right: -3px !important;
  }
  .story-timeline-track {
    padding-left: 30px !important;
    padding-right: 5px !important;
  }
  .story-timeline-node {
    left: -24px !important;
  }
  .story-timeline-item-right {
    padding-right: 24px !important;
  }
  .story-timeline-item-right .story-timeline-node {
    right: -31px !important;
  }
}

/* 2026-07-04: refine story timeline spacing, square photos, and smaller type. */
.story-timeline-block {
  width: 100% !important;
  max-width: 100% !important;
  margin: 22px auto 0 !important;
  padding: 0 8px 10px !important;
}
.story-timeline-lead {
  max-width: 360px !important;
  margin-bottom: 22px !important;
  font: 500 clamp(15px, 4.25vw, 19px)/1.48 "Cormorant Garamond", serif !important;
}
.story-timeline-track {
  padding: 4px 26px 10px 44px !important;
}
.story-timeline-track::before {
  left: 20px !important;
  width: 3px !important;
  bottom: 55% !important;
}
.story-timeline-item {
  margin-bottom: 38px !important;
}
.story-timeline-item-right {
  margin-top: 48px !important;
  padding-right: 34px !important;
}
.story-timeline-item-right::before {
  z-index: 0 !important;
  left: -24px !important;
  right: 7px !important;
  top: -42px !important;
  height: 42px !important;
  border-width: 3px !important;
  border-bottom-left-radius: 42px !important;
  border-top-right-radius: 42px !important;
}
.story-timeline-item-right::after {
  right: 7px !important;
  top: 0 !important;
  bottom: -16px !important;
}
.story-timeline-node {
  left: -32px !important;
  top: 5px !important;
  width: 14px !important;
  height: 14px !important;
  border-width: 4px !important;
}
.story-timeline-item-right .story-timeline-node {
  right: -35px !important;
  top: -8px !important;
}
.story-timeline-copy {
  z-index: 2 !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 14px !important;
}
.story-timeline-copy h3 {
  margin-bottom: 9px !important;
  font: 500 clamp(18px, 5.2vw, 23px)/1.16 "Quicksand", sans-serif !important;
}
.story-timeline-copy time {
  margin-bottom: 5px !important;
  font: 600 clamp(12px, 3.7vw, 16px)/1.25 "Quicksand", sans-serif !important;
}
.story-timeline-copy p {
  margin-bottom: 18px !important;
  font: 500 clamp(13px, 3.9vw, 17px)/1.58 "Quicksand", sans-serif !important;
}
.story-timeline-photo {
  border-radius: 20px !important;
}
.story-timeline-photo img {
  aspect-ratio: 1 / 1 !important;
}
@media (max-width: 390px) {
  .story-timeline-block {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .story-timeline-track {
    padding-left: 40px !important;
    padding-right: 22px !important;
  }
  .story-timeline-track::before {
    left: 18px !important;
  }
  .story-timeline-node {
    left: -29px !important;
  }
  .story-timeline-item-right {
    padding-right: 30px !important;
  }
  .story-timeline-item-right::before {
    left: -22px !important;
    right: 5px !important;
  }
  .story-timeline-item-right::after {
    right: 5px !important;
  }
  .story-timeline-item-right .story-timeline-node {
    right: -32px !important;
  }
}

/* 2026-07-04: align the right timeline curve, node, and side rail. */
.story-timeline-track {
  padding-right: 14px !important;
}
.story-timeline-item-right {
  padding-right: 22px !important;
}
.story-timeline-item-right::before {
  right: 4px !important;
  top: -44px !important;
  height: 44px !important;
  border-top: 0 !important;
  border-bottom-left-radius: 44px !important;
  border-top-right-radius: 44px !important;
}
.story-timeline-item-right::after {
  right: 4px !important;
  top: 0 !important;
}
.story-timeline-item-right .story-timeline-node {
  right: -1px !important;
  top: -10px !important;
  width: 12px !important;
  height: 12px !important;
  border-width: 4px !important;
}
@media (max-width: 390px) {
  .story-timeline-track {
    padding-right: 12px !important;
  }
  .story-timeline-item-right {
    padding-right: 20px !important;
  }
  .story-timeline-item-right::before,
  .story-timeline-item-right::after {
    right: 4px !important;
  }
  .story-timeline-item-right .story-timeline-node {
    right: -1px !important;
  }
}

/* 2026-07-04: match reference corner: top rail rounds down, dot sits on vertical rail. */
.story-timeline-item-right::before {
  left: -24px !important;
  right: 4px !important;
  top: -38px !important;
  height: 72px !important;
  border: 0 !important;
  border-top: 3px solid #d7c99d !important;
  border-right: 3px solid #d7c99d !important;
  border-top-right-radius: 48px !important;
  border-bottom-left-radius: 0 !important;
  background: transparent !important;
}
.story-timeline-item-right::after {
  right: 4px !important;
  top: 34px !important;
  bottom: -16px !important;
}
.story-timeline-item-right .story-timeline-node {
  right: -1px !important;
  top: 24px !important;
}
@media (max-width: 390px) {
  .story-timeline-item-right::before {
    left: -22px !important;
    right: 4px !important;
    top: -36px !important;
    height: 68px !important;
    border-top-right-radius: 44px !important;
  }
  .story-timeline-item-right::after {
    right: 4px !important;
    top: 32px !important;
  }
  .story-timeline-item-right .story-timeline-node {
    right: -1px !important;
    top: 22px !important;
  }
}

/* 2026-07-04: restore both connector corners and lower the second story step. */
.story-timeline-item-right {
  margin-top: 66px !important;
}
.story-timeline-item-right::before {
  left: -24px !important;
  right: 4px !important;
  top: -58px !important;
  height: 58px !important;
  border: 0 !important;
  border-left: 3px solid #d7c99d !important;
  border-bottom: 3px solid #d7c99d !important;
  border-right: 3px solid #d7c99d !important;
  border-bottom-left-radius: 46px !important;
  border-top-right-radius: 46px !important;
  background: transparent !important;
}
.story-timeline-item-right::after {
  right: 4px !important;
  top: 0 !important;
  bottom: -16px !important;
}
.story-timeline-item-right .story-timeline-node {
  right: -1px !important;
  top: 34px !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 24px !important;
}
@media (max-width: 390px) {
  .story-timeline-item-right {
    margin-top: 62px !important;
  }
  .story-timeline-item-right::before {
    left: -22px !important;
    right: 4px !important;
    top: -54px !important;
    height: 54px !important;
    border-bottom-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
  }
  .story-timeline-item-right::after {
    right: 4px !important;
    top: 0 !important;
  }
  .story-timeline-item-right .story-timeline-node {
    right: -1px !important;
    top: 32px !important;
  }
  .story-timeline-item-right .story-timeline-copy {
    padding-top: 22px !important;
  }
}

/* 2026-07-04: rebuild story timeline from the provided SVG source. */
.story-timeline-block {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 22px auto 0 !important;
  padding: 0 8px 12px !important;
  color: #262626 !important;
  font-family: "Quicksand", "Montserrat", sans-serif !important;
  overflow: hidden !important;
}
.story-timeline-lead {
  max-width: 388px !important;
  margin: 0 auto 28px !important;
  color: #262626 !important;
  font: 500 clamp(15px, 4.25vw, 19px)/1.72 "Cormorant Garamond", serif !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}
.story-timeline-track {
  position: relative !important;
  width: 100% !important;
  padding: 0 0 4px !important;
}
.story-timeline-track::before,
.story-timeline-item::before,
.story-timeline-item::after,
.story-timeline-item-right::before,
.story-timeline-item-right::after {
  content: none !important;
  display: none !important;
}
.story-timeline-line {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.story-timeline-line path {
  fill: none !important;
  stroke: #d7c99d !important;
  stroke-width: 3.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.story-timeline-dot {
  position: absolute !important;
  z-index: 3 !important;
  width: 16px !important;
  height: 16px !important;
  border: 3px solid #d7c99d !important;
  border-radius: 50% !important;
  background: #fffaf3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.story-timeline-dot-left {
  left: 1px !important;
  top: 4px !important;
}
.story-timeline-dot-right {
  right: -1px !important;
  top: 49.2% !important;
}
.story-timeline-node {
  display: none !important;
}
.story-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}
.story-timeline-item-left {
  min-height: 700px !important;
  padding-left: 48px !important;
  padding-right: 6px !important;
  text-align: left !important;
}
.story-timeline-item-right {
  margin-top: 46px !important;
  padding-left: 34px !important;
  padding-right: 28px !important;
  text-align: right !important;
}
.story-timeline-copy {
  position: relative !important;
  z-index: 2 !important;
  padding-top: 0 !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 0 !important;
}
.story-timeline-copy h3 {
  margin: 0 0 12px !important;
  color: #aaa085 !important;
  font: 400 clamp(18px, 5.1vw, 21px)/1.25 "Quicksand", sans-serif !important;
  letter-spacing: 0 !important;
}
.story-timeline-copy time {
  display: block !important;
  margin: 0 0 7px !important;
  color: #262626 !important;
  font: 500 clamp(13px, 3.9vw, 15px)/1 "Quicksand", sans-serif !important;
}
.story-timeline-copy p {
  margin: 0 !important;
  color: #262626 !important;
  font: 400 clamp(13.5px, 3.95vw, 15.7px)/1.72 "Quicksand", sans-serif !important;
  letter-spacing: 0 !important;
}
.story-timeline-item-right .story-timeline-copy p {
  max-width: 354px !important;
  margin-left: auto !important;
  text-align: center !important;
}
.story-timeline-photo {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 334px !important;
  margin: 25px 0 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fffaf5 !important;
}
.story-timeline-item-right .story-timeline-photo {
  margin-left: auto !important;
}
.story-timeline-photo img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
@media (max-width: 380px) {
  .story-timeline-block {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .story-timeline-lead {
    font-size: 18px !important;
  }
  .story-timeline-item-left {
    min-height: 674px !important;
    padding-left: 42px !important;
  }
  .story-timeline-item-right {
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
  .story-timeline-copy h3 {
    font-size: 19px !important;
  }
  .story-timeline-copy p {
    font-size: 15px !important;
  }
}

/* 2026-07-04: timeline dot alignment + second-event spacing hotfix.
   Keeps the circular nodes centered on the SVG path and pulls the 13/12/2026 block upward. */
.story-timeline-dot-left {
  left: calc(2.8205128205% - 8px) !important;
  top: calc(0.3472222222% - 8px) !important;
}
.story-timeline-dot-right {
  left: calc(97.1794871795% - 8px) !important;
  right: auto !important;
  top: calc(49.3055555556% - 8px) !important;
}
.story-timeline-item-left {
  min-height: 610px !important;
}
.story-timeline-item-right {
  margin-top: 8px !important;
}
@media (max-width: 380px) {
  .story-timeline-item-left {
    min-height: 590px !important;
  }
  .story-timeline-item-right {
    margin-top: 4px !important;
  }
}

/* 2026-07-04: auto-height story timeline frame rebuild.
   The frame is now drawn by normal document flow: first item -> bridge -> second item.
   This prevents the connector from being pushed into the first photo when text/photo height changes. */
.story-timeline-block {
  overflow: visible !important;
}
.story-timeline-track {
  --tl-color: #d7c99d;
  --tl-line-width: 3px;
  --tl-left-x: 16px;
  --tl-right-x: 13px;
  --tl-bridge-h: 56px;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.story-timeline-line {
  display: none !important;
}
.story-timeline-track::before {
  content: none !important;
  display: none !important;
}
.story-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  isolation: isolate !important;
}
.story-timeline-item-left {
  min-height: 0 !important;
  padding-left: 48px !important;
  padding-right: 6px !important;
  text-align: left !important;
}
.story-timeline-item-left::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: var(--tl-left-x) !important;
  right: auto !important;
  top: 2px !important;
  bottom: calc(-1 * var(--tl-bridge-h) - 2px) !important;
  width: 0 !important;
  height: auto !important;
  border-left: var(--tl-line-width) solid var(--tl-color) !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  z-index: 0 !important;
}
.story-timeline-bridge {
  position: relative !important;
  display: block !important;
  height: var(--tl-bridge-h) !important;
  min-height: var(--tl-bridge-h) !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.story-timeline-bridge::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: var(--tl-left-x) !important;
  right: var(--tl-right-x) !important;
  top: 0 !important;
  height: calc(var(--tl-bridge-h) - 4px) !important;
  border-left: var(--tl-line-width) solid var(--tl-color) !important;
  border-bottom: var(--tl-line-width) solid var(--tl-color) !important;
  border-right: var(--tl-line-width) solid var(--tl-color) !important;
  border-top: 0 !important;
  border-bottom-left-radius: 46px !important;
  border-bottom-right-radius: 46px !important;
  background: transparent !important;
}
.story-timeline-item-right {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-left: 34px !important;
  padding-right: 28px !important;
  text-align: right !important;
}
.story-timeline-item-right::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: var(--tl-right-x) !important;
  top: calc(-1 * var(--tl-bridge-h) + 3px) !important;
  bottom: 8px !important;
  width: 0 !important;
  height: auto !important;
  border-right: var(--tl-line-width) solid var(--tl-color) !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  z-index: 0 !important;
}
.story-timeline-item-left::after,
.story-timeline-item-right::after {
  content: none !important;
  display: none !important;
}
.story-timeline-copy,
.story-timeline-photo {
  position: relative !important;
  z-index: 2 !important;
}
.story-timeline-dot {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  border: 3px solid var(--tl-color) !important;
  border-radius: 50% !important;
  background: #fffaf3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.story-timeline-dot-left {
  left: calc(var(--tl-left-x) + 1.5px) !important;
  top: -2px !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.story-timeline-dot-right {
  right: calc(var(--tl-right-x) + 1.5px) !important;
  top: 12px !important;
  left: auto !important;
  transform: translateX(50%) !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 0 !important;
}
.story-timeline-photo {
  margin-top: 25px !important;
}
.story-timeline-item-right .story-timeline-photo {
  margin-left: auto !important;
}
@media (max-width: 380px) {
  .story-timeline-track {
    --tl-left-x: 14px;
    --tl-right-x: 11px;
    --tl-bridge-h: 52px;
  }
  .story-timeline-item-left {
    min-height: 0 !important;
    padding-left: 42px !important;
  }
  .story-timeline-item-right {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
  .story-timeline-dot-right {
    top: 11px !important;
  }
}

/* 2026-07-04: center-driven dynamic timeline path fix.
   The rail is now one measured SVG path based on real DOM heights, so the right curve never flips upward or escapes the content box. */
.story-timeline-block {
  overflow: visible !important;
}
.story-timeline-track {
  --tl-color: #d7c99d;
  --tl-line-width: 3.2px;
  --tl-left-x: 16px;
  --tl-right-x: 13px;
  --tl-bridge-h: 42px;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.story-timeline-line,
.story-timeline-track::before,
.story-timeline-item::before,
.story-timeline-item::after,
.story-timeline-item-left::before,
.story-timeline-item-left::after,
.story-timeline-item-right::before,
.story-timeline-item-right::after,
.story-timeline-bridge::before,
.story-timeline-bridge::after {
  content: none !important;
  display: none !important;
}
.story-timeline-frame-svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.story-timeline-frame-svg path {
  fill: none !important;
  stroke: var(--tl-color) !important;
  stroke-width: var(--tl-line-width) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
.story-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  isolation: isolate !important;
}
.story-timeline-item-left {
  padding-left: 48px !important;
  padding-right: 6px !important;
  text-align: left !important;
}
.story-timeline-bridge {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  height: var(--tl-bridge-h) !important;
  min-height: var(--tl-bridge-h) !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.story-timeline-item-right {
  padding-left: 34px !important;
  padding-right: 28px !important;
  margin-top: 0 !important;
  text-align: right !important;
}
.story-timeline-copy,
.story-timeline-photo {
  position: relative !important;
  z-index: 2 !important;
}
.story-timeline-dot {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  border: 3px solid var(--tl-color) !important;
  border-radius: 50% !important;
  background: #fffaf3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.story-timeline-dot-left {
  left: var(--tl-left-x) !important;
  top: 8px !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}
.story-timeline-dot-right {
  right: var(--tl-right-x) !important;
  top: 22px !important;
  left: auto !important;
  transform: translate(50%, -50%) !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 0 !important;
}
.story-timeline-photo {
  margin-top: 25px !important;
}
.story-timeline-item-right .story-timeline-photo {
  margin-left: auto !important;
}
@media (max-width: 380px) {
  .story-timeline-track {
    --tl-left-x: 14px;
    --tl-right-x: 11px;
    --tl-bridge-h: 40px;
  }
  .story-timeline-item-left {
    padding-left: 42px !important;
  }
  .story-timeline-item-right {
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
  .story-timeline-dot-right {
    top: 21px !important;
  }
}

/* 2026-07-04: centerline-driven auto frame for story timeline.
   The connector now follows the real flow height of the first story item and turns
   into the right rail from the line center, so the rounded corner no longer flips upward. */
.story-timeline-track {
  --tl-color: #d7c99d;
  --tl-line-width: 3px;
  --tl-left-x: 18px;
  --tl-right-x: 18px;
  --tl-radius: 34px;
  --tl-bridge-h: 58px;
  --tl-bridge-y: 29px;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.story-timeline-line,
.story-timeline-track > svg.story-timeline-line {
  display: none !important;
}
.story-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  isolation: isolate !important;
}
.story-timeline-item-left {
  min-height: 0 !important;
  padding-left: 48px !important;
  padding-right: 6px !important;
  text-align: left !important;
}
.story-timeline-item-left::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: calc(var(--tl-left-x) - (var(--tl-line-width) / 2)) !important;
  right: auto !important;
  top: 6px !important;
  bottom: -1px !important;
  width: var(--tl-line-width) !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tl-color) !important;
  z-index: 0 !important;
}
.story-timeline-bridge {
  position: relative !important;
  display: block !important;
  height: var(--tl-bridge-h) !important;
  min-height: var(--tl-bridge-h) !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.story-timeline-bridge::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: calc(var(--tl-left-x) - (var(--tl-line-width) / 2)) !important;
  right: calc(var(--tl-right-x) + var(--tl-radius) - (var(--tl-line-width) / 2)) !important;
  top: -1px !important;
  height: var(--tl-bridge-y) !important;
  border-left: var(--tl-line-width) solid var(--tl-color) !important;
  border-bottom: var(--tl-line-width) solid var(--tl-color) !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom-left-radius: var(--tl-radius) !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
.story-timeline-bridge::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: calc(var(--tl-right-x) - (var(--tl-line-width) / 2)) !important;
  top: var(--tl-bridge-y) !important;
  width: var(--tl-radius) !important;
  height: calc(var(--tl-bridge-h) - var(--tl-bridge-y)) !important;
  border-top: var(--tl-line-width) solid var(--tl-color) !important;
  border-right: var(--tl-line-width) solid var(--tl-color) !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-top-right-radius: var(--tl-radius) !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
.story-timeline-item-right {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-left: 34px !important;
  padding-right: 28px !important;
  text-align: right !important;
}
.story-timeline-item-right::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: calc(var(--tl-right-x) - (var(--tl-line-width) / 2)) !important;
  top: 0 !important;
  bottom: 8px !important;
  width: var(--tl-line-width) !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tl-color) !important;
  z-index: 0 !important;
}
.story-timeline-item-left::after,
.story-timeline-item-right::after {
  content: none !important;
  display: none !important;
}
.story-timeline-copy,
.story-timeline-photo {
  position: relative !important;
  z-index: 2 !important;
}
.story-timeline-dot {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  border: 3px solid var(--tl-color) !important;
  border-radius: 50% !important;
  background: #fffaf3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.story-timeline-dot-left {
  left: var(--tl-left-x) !important;
  right: auto !important;
  top: -1px !important;
  transform: translateX(-50%) !important;
}
.story-timeline-dot-right {
  left: auto !important;
  right: var(--tl-right-x) !important;
  top: 17px !important;
  transform: translateX(50%) !important;
}
.story-timeline-item-right .story-timeline-copy {
  padding-top: 0 !important;
}
.story-timeline-photo {
  margin-top: 25px !important;
}
.story-timeline-item-right .story-timeline-photo {
  margin-left: auto !important;
}
@media (max-width: 380px) {
  .story-timeline-track {
    --tl-left-x: 16px;
    --tl-right-x: 16px;
    --tl-radius: 31px;
    --tl-bridge-h: 54px;
    --tl-bridge-y: 27px;
  }
  .story-timeline-item-left {
    min-height: 0 !important;
    padding-left: 42px !important;
  }
  .story-timeline-item-right {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
  .story-timeline-dot-right {
    top: 16px !important;
  }
}

/* 2026-07-04: single-source timeline frame cleanup.
   Keep only the measured SVG rail and disable every older CSS pseudo rail so no duplicate/broken line appears. */
.story-timeline-track::before,
.story-timeline-item::before,
.story-timeline-item::after,
.story-timeline-item-left::before,
.story-timeline-item-left::after,
.story-timeline-item-right::before,
.story-timeline-item-right::after,
.story-timeline-bridge::before,
.story-timeline-bridge::after,
.story-timeline-line,
.story-timeline-track > svg.story-timeline-line {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-timeline-frame-svg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.story-timeline-frame-svg path {
  fill: none !important;
  stroke: var(--tl-color) !important;
  stroke-width: var(--tl-line-width) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
.story-timeline-item-left,
.story-timeline-item-right,
.story-timeline-bridge {
  z-index: 1 !important;
}

/* 2026-07-04: center groom/bride names under their own photo columns.
   The bouquet is removed from grid flow so both names keep the same center as the two images. */
.family-section .name-signature {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px auto -20px !important;
  padding: 2px 2px 0 !important;
  line-height: 1 !important;
}
.family-section .name-signature span {
  display: block !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  padding-inline: 0 !important;
  text-align: center !important;
  white-space: normal !important;
}
.family-section .name-signature span:first-child {
  grid-column: 1 !important;
  text-align: center !important;
}
.family-section .name-signature span:last-child {
  grid-column: 2 !important;
  text-align: center !important;
}
.family-section .name-signature i {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  justify-self: auto !important;
  align-self: auto !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) !important;
}
@media (max-width: 390px) {
  .family-section .name-signature {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    margin-top: 8px !important;
  }
  .family-section .name-signature i {
    transform: translate(-50%, 7px) !important;
  }
}

/* 2026-07-04: scrollbar cleanup + single scroll-root stability fix.
   The invite remains the only scroll container; the outer browser/body scrollbar is hidden
   and no scrollbar gutter can push the right fixed controls inward. */
:root {
  --app-viewport-h: 100dvh;
  --phone-shell-y-pad: min(28px, 3dvh);
  --phone-shell-y-pad-double: min(56px, 6dvh);
}
html,
body {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.invite::-webkit-scrollbar,
.invite *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
.phone-shell {
  width: 100% !important;
  height: var(--app-viewport-h) !important;
  min-height: var(--app-viewport-h) !important;
  max-height: var(--app-viewport-h) !important;
  overflow: hidden !important;
  padding-top: var(--phone-shell-y-pad) !important;
  padding-bottom: var(--phone-shell-y-pad) !important;
}
.invite {
  height: min(932px, calc(var(--app-viewport-h) - var(--phone-shell-y-pad-double))) !important;
  min-height: min(680px, calc(var(--app-viewport-h) - var(--phone-shell-y-pad-double))) !important;
  max-height: calc(var(--app-viewport-h) - var(--phone-shell-y-pad-double)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}
@supports not (height: 100dvh) {
  :root {
    --app-viewport-h: 100vh;
  }
}
@media (max-width: 430px) {
  :root {
    --phone-shell-y-pad: 0px;
    --phone-shell-y-pad-double: 0px;
  }
  .phone-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .invite {
    width: 100vw !important;
    height: var(--app-viewport-h) !important;
    min-height: var(--app-viewport-h) !important;
    max-height: var(--app-viewport-h) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}



/* 2026-07-05: 3-item story timeline + admin-configurable content.
   A single SVG frame follows the real centerline of all items, while old pseudo rails stay off. */
.story-timeline-block {
  padding-bottom: 10px !important;
}
.story-timeline-track {
  --tl-color: #d7c99d;
  --tl-line-width: 3px;
  --tl-left-x: 18px;
  --tl-right-x: 18px;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.story-timeline-track::before,
.story-timeline-item::before,
.story-timeline-item::after,
.story-timeline-item-left::before,
.story-timeline-item-left::after,
.story-timeline-item-right::before,
.story-timeline-item-right::after,
.story-timeline-bridge::before,
.story-timeline-bridge::after,
.story-timeline-line,
.story-timeline-track > svg.story-timeline-line {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-timeline-frame-svg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.story-timeline-frame-svg path {
  fill: none !important;
  stroke: var(--tl-color) !important;
  stroke-width: var(--tl-line-width) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
.story-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  isolation: isolate !important;
}
.story-timeline-item-left {
  padding-left: 48px !important;
  padding-right: 7px !important;
  text-align: left !important;
}
.story-timeline-item-right {
  padding-left: 34px !important;
  padding-right: 28px !important;
  text-align: right !important;
}
.story-timeline-bridge {
  display: block !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.story-timeline-copy,
.story-timeline-photo {
  position: relative !important;
  z-index: 2 !important;
}
.story-timeline-copy time {
  display: block !important;
  margin: 0 0 6px !important;
  color: #2f2a2a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}
.story-timeline-copy h3 {
  margin-top: 0 !important;
}
.story-timeline-copy p {
  white-space: pre-line !important;
}
.story-timeline-dot {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  border: 3px solid var(--tl-color) !important;
  border-radius: 50% !important;
  background: #fffaf3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.story-timeline-dot-left {
  left: var(--tl-left-x) !important;
  right: auto !important;
  top: 9px !important;
  transform: translate(-50%, -50%) !important;
}
.story-timeline-dot-right {
  left: auto !important;
  right: var(--tl-right-x) !important;
  top: 17px !important;
  transform: translate(50%, -50%) !important;
}
.story-timeline-photo {
  margin-top: 24px !important;
}
.story-timeline-item-right .story-timeline-photo {
  margin-left: auto !important;
}
@media (max-width: 380px) {
  .story-timeline-track {
    --tl-left-x: 16px;
    --tl-right-x: 16px;
  }
  .story-timeline-item-left {
    padding-left: 42px !important;
    padding-right: 5px !important;
  }
  .story-timeline-item-right {
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
  .story-timeline-bridge {
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* 2026-07-05: story timeline multi-item connector clearance fix. */
.story-timeline-bridge{height:74px!important;min-height:74px!important;margin:10px 0 0!important}.story-timeline-item:not(:last-of-type) .story-timeline-photo{margin-bottom:4px!important}.story-timeline-frame-svg{z-index:1!important}.story-timeline-copy,.story-timeline-photo,.story-timeline-dot{z-index:2!important}.story-timeline-dot{z-index:4!important}@media(max-width:380px){.story-timeline-bridge{height:70px!important;min-height:70px!important}}

/* 2026-07-06: family section champagne palette + centered Our Family heading.
   This intentionally overrides older bright-red family rules without changing layout logic. */
:root {
  --family-bg: rgba(255, 250, 239, .90);
  --family-border: rgba(205, 178, 116, .48);
  --family-title: #8a642f;
  --family-text: #3f3028;
  --family-muted: #7d6c5c;
  --family-red: #9f2630;
  --family-red-light: #a82b34;
  --family-red-dark: #7f1d27;
  --family-shadow: rgba(120, 86, 40, .16);
  --wedding-red: #9f2630;
  --wedding-red-deep: #7f1d27;
  --wedding-red-light: #a82b34;
  --wedding-gold-bright: #fff4dc;
  --wedding-gold-soft: #fff9ee;
}
.family-section .family-calligraphy-top {
  position: relative !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 12px !important;
  padding: 0 10px !important;
  gap: 0 !important;
  text-align: center !important;
  color: #fffaf0 !important;
  font: 400 clamp(44px, 12.6vw, 66px)/.92 "Great Vibes", "Dancing Script", "Sacramento", cursive !important;
  letter-spacing: .01em !important;
  text-shadow: 0 2px 8px rgba(91, 70, 34, .22), 0 1px 0 rgba(255,255,255,.18) !important;
}
.family-section .family-calligraphy-top span {
  display: inline-block !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}
.family-section .family-list.family-invite-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
}
.family-section .family-content {
  background: var(--family-bg) !important;
  border: 1px solid var(--family-border) !important;
  border-left: 4px solid var(--family-red) !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 12px 30px var(--family-shadow) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: var(--family-text) !important;
  padding: 12px 12px 12px 16px !important;
}
.family-section .family-content::before {
  content: none !important;
  display: none !important;
}
.family-section .family-side + .family-side {
  margin-top: 13px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(205, 178, 116, .34) !important;
}
.family-section .family-side h3 {
  color: var(--family-title) !important;
  font: 700 clamp(12px, 3.5vw, 15px)/1.05 "Montserrat", var(--font-sans, sans-serif) !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.family-section .family-side strong {
  color: var(--family-text) !important;
  font: 700 clamp(10.5px, 3.05vw, 12.8px)/1.25 "Montserrat", var(--font-sans, sans-serif) !important;
  letter-spacing: .005em !important;
  text-align: left !important;
}
.family-section .family-side span {
  color: var(--family-muted) !important;
  font: 400 clamp(10.5px, 3vw, 12.6px)/1.2 "Montserrat", var(--font-sans, sans-serif) !important;
  text-align: left !important;
}
.family-section .family-red-mark {
  min-height: 154px !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--family-red-light) 0%, var(--family-red-dark) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 200, .18), 0 10px 24px rgba(107, 31, 31, .22) !important;
  overflow: hidden !important;
}
.family-section .family-red-mark i {
  background: #fffaf0 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important;
}
.family-section .family-red-mark b {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: var(--family-red) !important;
  background: #fff4dc !important;
  border: 1px solid rgba(205, 178, 116, .62) !important;
  box-shadow: 0 7px 16px rgba(120, 86, 40, .22) !important;
  text-shadow: none !important;
  font: 700 18px/1 "Times New Roman", serif !important;
}
.invite::before {
  color: #6d5845 !important;
  letter-spacing: .08em !important;
}
@media (max-width: 390px) {
  .family-section .family-calligraphy-top {
    margin-bottom: 10px !important;
    padding-inline: 8px !important;
    font-size: clamp(42px, 13.8vw, 56px) !important;
  }
  .family-section .family-list.family-invite-card {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important;
  }
  .family-section .family-content {
    padding: 10px 9px 10px 13px !important;
  }
  .family-section .family-red-mark {
    min-height: 148px !important;
  }
  .family-section .family-red-mark b {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
}

/* 2026-07-06: invitation beige card + Our Family clearance + scroll-chain lock.
   - The invitation message no longer uses the bright white box; it blends into the beige page.
   - Small invitation copy is slightly larger/bolder for better readability.
   - Our Family gets a real top clearance so the previous image cannot cover it.
   - The browser/body remains locked; only the .invite scroll root is allowed to move. */
:root {
  --lead-beige: #D1C59E;
  --lead-beige-soft: #d8cca8;
  --lead-white: #fffaf0;
}
html,
body {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
}
.phone-shell {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
.invite {
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}
.invitation-section,
.invitation-section.paper-section {
  background: var(--lead-beige) !important;
  background-image: none !important;
  color: var(--lead-white) !important;
}
.invitation-section .invitation-message-card {
  width: min(100%, 390px) !important;
  margin: 0 auto 12px !important;
  padding: 20px 18px 22px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 250, 240, .20) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 10px 24px rgba(95, 77, 43, .08) !important;
  color: var(--lead-white) !important;
  overflow: visible !important;
  overscroll-behavior: none !important;
}
.invitation-section .invitation-message-card p {
  color: var(--lead-white) !important;
  font-size: clamp(14.4px, 3.85vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: -.012em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 5px 14px rgba(83, 73, 49, .18) !important;
}
.invitation-section .invitation-message-card p + p {
  margin-top: 21px !important;
}
.invitation-section .invitation-message-highlight {
  color: #fff !important;
  font-size: clamp(15.5px, 4.1vw, 17px) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  text-shadow: 0 5px 14px rgba(83, 73, 49, .20) !important;
}
.invitation-section .invitation-message-highlight span {
  color: #b71f2d !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.18), 0 4px 8px rgba(95, 45, 45, .18) !important;
}
.invitation-section .ornament-line {
  background: rgba(255, 250, 240, .58) !important;
  opacity: .75 !important;
}
.family-section,
.family-section.paper-section {
  margin-top: 0 !important;
  padding-top: clamp(46px, 12vw, 72px) !important;
  overflow: visible !important;
  background: var(--lead-beige) !important;
  background-image: none !important;
  isolation: isolate !important;
}
.family-section .family-calligraphy-top {
  position: relative !important;
  z-index: 12 !important;
  margin: 0 auto clamp(18px, 4.8vw, 26px) !important;
  padding: 0 12px !important;
  min-height: 1.12em !important;
  line-height: 1.12 !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
}
.family-section .family-calligraphy-top span {
  line-height: 1.12 !important;
}
.family-section .family-list.family-invite-card {
  position: relative !important;
  z-index: 3 !important;
  margin-top: 0 !important;
}
@media (max-width: 390px) {
  .invitation-section .invitation-message-card {
    padding: 18px 13px 20px !important;
  }
  .invitation-section .invitation-message-card p {
    font-size: clamp(14px, 3.8vw, 15.2px) !important;
    line-height: 1.6 !important;
  }
  .family-section,
  .family-section.paper-section {
    padding-top: clamp(42px, 11.5vw, 60px) !important;
  }
  .family-section .family-calligraphy-top {
    margin-bottom: 18px !important;
  }
}

/* 2026-07-06: classic cream palette restore + mobile full-width hard fix.
   - Restore Our Family / groom bride / Invitation to the old warm cream-gold tone.
   - Return copy to golden-brown instead of white.
   - Force the phone layout to fill mobile visual width and prevent horizontal drift/side gaps. */
:root {
  --classic-cream: #d1c59e;
  --classic-cream-soft: #ded2ae;
  --classic-cream-deep: #c4b583;
  --classic-card: rgba(255, 248, 229, .52);
  --classic-card-strong: rgba(255, 250, 236, .70);
  --classic-gold: #b29463;
  --classic-gold-soft: rgba(205, 178, 116, .48);
  --classic-brown: #7b5b32;
  --classic-brown-deep: #5b4226;
  --classic-muted: #8b7658;
}
.family-section,
.family-section.paper-section,
.invitation-section,
.invitation-section.paper-section {
  background: linear-gradient(180deg, var(--classic-cream-soft) 0%, var(--classic-cream) 52%, var(--classic-cream-deep) 100%) !important;
  background-image: linear-gradient(180deg, var(--classic-cream-soft) 0%, var(--classic-cream) 52%, var(--classic-cream-deep) 100%) !important;
  color: var(--classic-brown) !important;
}
.family-section .family-calligraphy-top,
.family-section .family-calligraphy-top span,
.family-section .photo-card > .photo-role-script,
.family-section .photo-card > .photo-role-script span,
.family-section .photo-card figcaption,
.family-section .name-signature,
.family-section .name-signature span,
.invitation-section .section-label,
.invitation-section .letter-rise span {
  color: var(--classic-brown) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.26), 0 4px 14px rgba(91,70,34,.14) !important;
}
.family-section .family-calligraphy-top {
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 4.8vw, 26px) !important;
}
.family-section .family-content {
  background: var(--classic-card) !important;
  border: 1px solid var(--classic-gold-soft) !important;
  border-left: 3px solid var(--classic-gold) !important;
  color: var(--classic-brown-deep) !important;
  box-shadow: 0 10px 24px rgba(100, 79, 42, .10) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.family-section .family-side + .family-side {
  border-top-color: rgba(138, 100, 47, .24) !important;
}
.family-section .family-side h3 {
  color: var(--classic-brown) !important;
}
.family-section .family-side strong {
  color: var(--classic-brown-deep) !important;
}
.family-section .family-side span {
  color: var(--classic-muted) !important;
}
.family-section .family-red-mark {
  background: linear-gradient(180deg, #cfbf8f 0%, #bda66e 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 224, .24), 0 8px 20px rgba(93, 70, 35, .14) !important;
}
.family-section .family-red-mark i {
  background: #fffaf0 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important;
}
.family-section .family-red-mark b {
  color: var(--classic-brown) !important;
  background: #fff4dc !important;
  border-color: rgba(138, 100, 47, .34) !important;
  box-shadow: 0 6px 14px rgba(93,70,35,.16) !important;
}
.invitation-section .invitation-message-card {
  background: var(--classic-card-strong) !important;
  border: 1px solid rgba(138, 100, 47, .24) !important;
  box-shadow: 0 10px 24px rgba(100, 79, 42, .08) !important;
  color: var(--classic-brown) !important;
}
.invitation-section .invitation-message-card p {
  color: var(--classic-brown) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight {
  color: var(--classic-brown-deep) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight span {
  color: #b71f2d !important;
  text-shadow: none !important;
}
.invitation-section .ornament-line {
  background: rgba(138, 100, 47, .34) !important;
  opacity: .75 !important;
}
@media (max-width: 767px) {
  html,
  body {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #201815 !important;
  }
  .phone-shell {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: #201815 !important;
  }
  .invite {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    transform: none !important;
    scrollbar-gutter: auto !important;
  }
  .invite > .section,
  .invite > .paper-section,
  .invite > .sweet-invitation-section,
  .invite > .ending-card,
  .invite > .story-transition-strip,
  .invite > .sweet-transition-strip {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }
  .intro-screen {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .intro-slideshow,
  .intro-shade,
  .intro-copy {
    left: 0 !important;
    right: -2px !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  .intro-photo,
  .intro-photo-a,
  .intro-photo-b {
    inset: 0 -2px 0 0 !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
  }
  .family-section .family-calligraphy-top,
  .family-section .family-list.family-invite-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* 2026-07-06: unified paper cream sections + mobile right-gap hard fix.
   - Family / groom-bride / Invitation now share the same soft paper background as the story area.
   - Invitation no longer reads as a separate block; adjacent section seam is hidden.
   - Mobile intro and invite are expanded by a tiny right bleed to remove Safari right-side blank strip. */
:root {
  --unified-paper: #fbf8f1;
  --unified-paper-soft: #fffaf3;
  --unified-paper-card: rgba(255, 250, 242, .78);
  --unified-paper-card-strong: rgba(255, 250, 242, .86);
  --unified-brown: #8a633d;
  --unified-brown-deep: #65442a;
  --unified-muted: #9a7f5d;
  --unified-gold: #c8ad72;
  --unified-gold-soft: rgba(200, 173, 114, .36);
}
.family-section,
.family-section.paper-section,
.invitation-section,
.invitation-section.paper-section {
  background: var(--unified-paper) !important;
  background-image: none !important;
  color: var(--unified-brown) !important;
}
.family-section {
  padding-bottom: clamp(12px, 3vw, 20px) !important;
}
.invitation-section,
.invitation-section.paper-section {
  margin-top: -1px !important;
  padding-top: clamp(14px, 4vw, 24px) !important;
  padding-bottom: clamp(34px, 8vw, 48px) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.family-section + .invitation-section,
.family-section + .invitation-section.paper-section {
  margin-top: -1px !important;
}
.family-section::before,
.family-section::after,
.invitation-section::before,
.invitation-section::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.family-section .family-calligraphy-top,
.family-section .family-calligraphy-top span,
.family-section .photo-card > .photo-role-script,
.family-section .photo-card > .photo-role-script span,
.family-section .photo-card figcaption,
.family-section .name-signature,
.family-section .name-signature span,
.invitation-section .section-label,
.invitation-section .letter-rise span {
  color: var(--unified-brown) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 0 6px 18px rgba(112,82,45,.14) !important;
}
.family-section .family-calligraphy-top {
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 4.8vw, 26px) !important;
}
.family-section .family-list.family-invite-card {
  background: transparent !important;
  box-shadow: none !important;
}
.family-section .family-content {
  background: var(--unified-paper-card) !important;
  border: 1px solid var(--unified-gold-soft) !important;
  border-left: 3px solid var(--unified-gold) !important;
  color: var(--unified-brown-deep) !important;
  box-shadow: 0 10px 24px rgba(120, 86, 40, .08) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
}
.family-section .family-side + .family-side {
  border-top-color: rgba(138, 100, 47, .20) !important;
}
.family-section .family-side h3 {
  color: var(--unified-brown) !important;
}
.family-section .family-side strong {
  color: var(--unified-brown-deep) !important;
}
.family-section .family-side span {
  color: var(--unified-muted) !important;
}
.family-section .family-red-mark {
  background: linear-gradient(180deg, #d8c797 0%, #c9b57c 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 224, .32), 0 8px 20px rgba(93, 70, 35, .12) !important;
}
.family-section .family-red-mark i {
  background: #fffaf3 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16) !important;
}
.family-section .family-red-mark b {
  color: var(--unified-brown) !important;
  background: #fff6de !important;
  border-color: rgba(138, 100, 47, .30) !important;
  box-shadow: 0 6px 14px rgba(93,70,35,.14) !important;
}
.family-section .photo-card {
  background: transparent !important;
}
.family-section .photo-card img {
  box-shadow: 0 13px 28px rgba(98, 70, 35, .18) !important;
}
.invitation-section .section-label {
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 4vw, 20px) !important;
}
.invitation-section .invitation-message-card {
  background: var(--unified-paper-card-strong) !important;
  border: 1px solid var(--unified-gold-soft) !important;
  box-shadow: 0 10px 24px rgba(120, 86, 40, .08) !important;
  color: var(--unified-brown) !important;
}
.invitation-section .invitation-message-card p {
  color: var(--unified-brown) !important;
  font-weight: 540 !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight {
  color: var(--unified-brown-deep) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.invitation-section .invitation-message-highlight span {
  color: #c0333b !important;
  text-shadow: none !important;
}
.invitation-section .ornament-line {
  background: rgba(138, 100, 47, .24) !important;
  opacity: .45 !important;
}
@media (max-width: 767px) {
  html,
  body,
  .phone-shell {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .phone-shell,
  .invite {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }
  .invite {
    width: calc(100vw + 4px) !important;
    min-width: calc(100vw + 4px) !important;
    max-width: none !important;
    margin-right: -4px !important;
    background: var(--unified-paper) !important;
    background-image: none !important;
  }
  .invite > .section,
  .invite > .paper-section,
  .invite > .sweet-invitation-section,
  .invite > .ending-card,
  .invite > .story-transition-strip,
  .invite > .sweet-transition-strip {
    width: 100% !important;
    max-width: 100% !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .intro-screen,
  .intro-screen.is-active {
    width: calc(100vw + 6px) !important;
    min-width: calc(100vw + 6px) !important;
    max-width: none !important;
    margin-right: -6px !important;
    border-radius: 0 !important;
    background: #201815 !important;
  }
  .intro-slideshow,
  .intro-shade,
  .intro-copy {
    left: 0 !important;
    right: -8px !important;
    width: auto !important;
    min-width: calc(100vw + 8px) !important;
    max-width: none !important;
  }
  .intro-photo,
  .intro-photo-a,
  .intro-photo-b {
    inset: 0 -8px 0 0 !important;
    width: auto !important;
    min-width: calc(100vw + 8px) !important;
    max-width: none !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  .family-section,
  .family-section.paper-section,
  .invitation-section,
  .invitation-section.paper-section {
    background: var(--unified-paper) !important;
    background-image: none !important;
  }
}

/* 2026-07-06: keep any unavoidable mobile outer bleed color-matched. */
@media (max-width: 767px) {
  html,
  body,
  .phone-shell {
    background: var(--unified-paper) !important;
  }
  body.intro-running,
  body.intro-running .phone-shell {
    background: #201815 !important;
  }
}

.gallery-lightbox .gallery-lightbox-thumbs,.gallery-lightbox .gallery-lightbox-thumb{pointer-events:auto!important;touch-action:pan-x manipulation!important}.gallery-lightbox .gallery-lightbox-thumb img{pointer-events:none!important}

/* 2026-07-06: enlarge gift modal QR/details and split popup theme by side */
.gift-modal {
  padding: max(8px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) !important;
  place-items: start center !important;
  align-items: start !important;
}
.gift-modal-backdrop {
  background: rgba(34, 27, 22, .50) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.gift-modal-card {
  width: min(calc(100vw - 16px), 454px) !important;
  max-height: min(92dvh, 760px) !important;
  margin-top: clamp(8px, 3.2dvh, 28px) !important;
  padding: 13px 11px 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(204, 237, 252, .46), transparent 28%),
    radial-gradient(circle at 96% 100%, rgba(255, 222, 232, .45), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fcff 55%, #fff8fb 100%) !important;
  border: 1px solid rgba(122, 184, 214, .30) !important;
  box-shadow: 0 26px 66px rgba(37, 54, 66, .25) !important;
}
.gift-modal-close {
  top: 8px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(107, 169, 206, .12) !important;
  color: #367da6 !important;
  font-size: 24px !important;
}
.gift-modal-head {
  padding: 0 42px 8px !important;
  min-height: 0 !important;
}
.gift-modal-icon.gift-image-icon {
  width: 48px !important;
  height: 34px !important;
  margin-bottom: 4px !important;
  animation: giftImageFloat 3s ease-in-out infinite !important;
}
.gift-modal-head h2 {
  color: #8b6a42 !important;
  font-size: 28px !important;
  line-height: 1.08 !important;
}
.gift-modal-head small {
  margin-top: 4px !important;
  color: #8a7867 !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
}
.gift-account-list {
  gap: 12px !important;
}
.gift-account-card {
  padding: 12px 12px 13px 13px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(122, 184, 214, .30) !important;
  box-shadow: 0 14px 32px rgba(59, 95, 117, .12) !important;
}
.gift-account-card.groom {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(244,251,255,.98) 58%, rgba(235,248,255,.98) 100%) !important;
  border-color: rgba(89, 177, 224, .46) !important;
  box-shadow: 0 14px 34px rgba(65, 151, 197, .14) !important;
}
.gift-account-card.bride {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,248,251,.98) 58%, rgba(255,236,242,.98) 100%) !important;
  border-color: rgba(236, 156, 184, .48) !important;
  box-shadow: 0 14px 34px rgba(207, 113, 148, .14) !important;
}
.gift-account-card::before {
  width: 5px !important;
  background: linear-gradient(180deg, #5bb6e8 0%, #cceeff 100%) !important;
}
.gift-account-card.bride::before {
  background: linear-gradient(180deg, #ef9fba 0%, #ffe0ea 100%) !important;
}
.gift-account-top {
  padding-left: 3px !important;
  margin-bottom: 10px !important;
}
.gift-account-role {
  padding: 5px 12px !important;
  background: rgba(91, 182, 232, .16) !important;
  color: #2b7da9 !important;
  border: 1px solid rgba(91, 182, 232, .26) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.gift-account-card.bride .gift-account-role {
  background: rgba(239, 159, 186, .18) !important;
  color: #c86d8a !important;
  border-color: rgba(239, 159, 186, .30) !important;
}
.gift-account-top h3 {
  margin-top: 8px !important;
  color: #674832 !important;
  font-size: 23px !important;
  line-height: 1.12 !important;
}
.gift-account-card.groom .gift-account-top h3 {
  color: #276f98 !important;
}
.gift-account-card.bride .gift-account-top h3 {
  color: #b9637e !important;
}
.gift-account-body {
  grid-template-columns: minmax(138px, 42%) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}
.gift-account-qr-wrap {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 6px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(91, 182, 232, .36) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.82),
    0 10px 24px rgba(65, 151, 197, .12) !important;
}
.gift-account-card.bride .gift-account-qr-wrap {
  border-color: rgba(239, 159, 186, .38) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.82),
    0 10px 24px rgba(207, 113, 148, .12) !important;
}
.gift-account-qr {
  border-radius: 12px !important;
}
.gift-account-info p {
  margin: 0 0 7px !important;
  color: #5e5148 !important;
  font-size: 13.8px !important;
  line-height: 1.28 !important;
}
.gift-account-info span {
  color: #9d8d7e !important;
  font-size: 10.4px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  margin-bottom: 3px !important;
}
.gift-account-info b {
  color: #352b25 !important;
  font-size: 14.5px !important;
  line-height: 1.24 !important;
}
.gift-account-bank {
  color: #2b7da9 !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
}
.gift-account-card.bride .gift-account-bank {
  color: #c86d8a !important;
}
.gift-copy-button {
  margin-top: 12px !important;
  padding: 13px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #48aee0 0%, #2f8fbd 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 11px 24px rgba(65, 151, 197, .24) !important;
}
.gift-account-card.bride .gift-copy-button {
  background: linear-gradient(135deg, #ee9db8 0%, #d87598 100%) !important;
  box-shadow: 0 11px 24px rgba(207, 113, 148, .24) !important;
}
.gift-copy-toast {
  color: #2b8a63 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
@media (max-width: 390px) {
  .gift-modal {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .gift-modal-card {
    width: calc(100vw - 12px) !important;
    padding: 11px 9px 12px !important;
    margin-top: clamp(6px, 2.2dvh, 18px) !important;
  }
  .gift-modal-head {
    padding: 0 38px 7px !important;
  }
  .gift-modal-icon.gift-image-icon {
    width: 42px !important;
    height: 30px !important;
    margin-bottom: 3px !important;
  }
  .gift-modal-head h2 {
    font-size: 25px !important;
  }
  .gift-modal-head small {
    font-size: 11.8px !important;
  }
  .gift-account-card {
    padding: 11px 10px 12px 11px !important;
  }
  .gift-account-top h3 {
    font-size: 21px !important;
  }
  .gift-account-body {
    grid-template-columns: minmax(128px, 42%) minmax(0, 1fr) !important;
    gap: 11px !important;
  }
  .gift-account-info p {
    font-size: 12.8px !important;
    margin-bottom: 6px !important;
  }
  .gift-account-info span {
    font-size: 9.8px !important;
  }
  .gift-account-info b,
  .gift-account-bank {
    font-size: 13.2px !important;
  }
  .gift-copy-button {
    padding: 12px 14px !important;
    font-size: 12.8px !important;
  }
}
@media (max-width: 345px) {
  .gift-account-body {
    grid-template-columns: minmax(116px, 40%) minmax(0, 1fr) !important;
    gap: 9px !important;
  }
  .gift-account-info p {
    font-size: 12px !important;
  }
  .gift-account-info b,
  .gift-account-bank {
    font-size: 12.4px !important;
  }
}


/* 2026-07-10: Floral landing home screen matching the rose invitation mockup */
body.landing-active {
  overflow: hidden !important;
  background: #f6e4dc !important;
}
body.landing-active .phone-shell {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body.landing-active .wish-bar,
body.landing-active .wish-stream,
body.landing-active .wish-panel-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
}
.landing-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) 14px max(88px, calc(env(safe-area-inset-bottom) + 76px));
  background:
    radial-gradient(circle at 9% 11%, rgba(255,255,255,.92), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(255, 208, 198, .45), transparent 35%),
    linear-gradient(162deg, #fff8f4 0%, #f9e6df 46%, #efcec4 100%);
  color: #6e3430;
  font-family: "Cormorant Garamond", Georgia, serif;
  isolation: isolate;
  transition: opacity .55s ease, transform .55s ease, visibility .55s ease;
}
.landing-screen::before,
.landing-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  filter: saturate(1.06);
}
/* Large soft roses outside the card, like the mockup photo background */
.landing-screen::before {
  left: -82px;
  bottom: -72px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  opacity: .58;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(246, 180, 168, .55) 19px 24px, transparent 25px),
    radial-gradient(ellipse at 48% 32%, rgba(248, 190, 176, .72) 0 25px, transparent 27px),
    radial-gradient(ellipse at 66% 45%, rgba(236, 146, 142, .45) 0 34px, transparent 36px),
    radial-gradient(ellipse at 34% 58%, rgba(246, 190, 181, .62) 0 32px, transparent 34px),
    radial-gradient(circle at 50% 50%, rgba(236, 150, 145, .42), transparent 72%);
  transform: rotate(-20deg);
  filter: blur(.2px);
}
.landing-screen::after {
  right: -62px;
  top: 16%;
  width: 150px;
  height: 180px;
  opacity: .68;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(255, 216, 203, .80) 0 22px, transparent 24px),
    radial-gradient(ellipse at 62% 52%, rgba(242, 157, 151, .56) 0 31px, transparent 33px),
    radial-gradient(ellipse at 35% 62%, rgba(248, 192, 180, .56) 0 23px, transparent 25px),
    radial-gradient(circle at 55% 50%, rgba(237, 153, 148, .32), transparent 67%);
  transform: rotate(12deg);
}
body:not(.landing-active) .landing-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(.992);
}
.landing-bg-petals,
.landing-bg-petals i {
  position: absolute;
  pointer-events: none;
}
.landing-bg-petals { inset: 0; z-index: 1; overflow: hidden; }
.landing-bg-petals i {
  width: 38px;
  height: 21px;
  border-radius: 70% 20% 70% 24%;
  background: radial-gradient(circle at 34% 42%, rgba(255,255,255,.92), rgba(248, 154, 168, .50) 62%, rgba(248,154,168,0));
  opacity: .66;
  filter: blur(.1px);
}
.landing-bg-petals i:nth-child(1) { left: 8%; top: 17%; transform: rotate(-28deg) scale(.86); }
.landing-bg-petals i:nth-child(2) { right: 12%; top: 19%; transform: rotate(42deg) scale(.62); }
.landing-bg-petals i:nth-child(3) { left: 13%; bottom: 23%; transform: rotate(30deg) scale(.72); }
.landing-bg-petals i:nth-child(4) { right: 16%; bottom: 31%; transform: rotate(-16deg) scale(.86); }
.landing-bg-petals i:nth-child(5) { right: 5%; top: 48%; transform: rotate(13deg) scale(.70); }
.landing-bg-petals i:nth-child(6) { left: 38%; top: 7%; transform: rotate(24deg) scale(.54); }
.landing-bg-petals i:nth-child(7) { right: 38%; bottom: 13%; transform: rotate(-38deg) scale(.58); }
.landing-music-toggle {
  position: absolute;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  right: 16px;
  z-index: 6;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.98);
  background: #151515;
  color: #fff;
  display: grid;
  place-items: center;
  font: 900 23px/1 "Montserrat", sans-serif;
  box-shadow: 0 8px 24px rgba(85, 49, 45, .22);
  cursor: pointer;
}
.landing-card-shell {
  position: relative;
  z-index: 2;
  width: min(414px, 100%);
  min-height: min(706px, calc(100dvh - 96px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px 14px 18px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 249, 246, .48), rgba(255, 239, 233, .28));
}
.landing-kicker {
  margin: 0 0 10px;
  color: #8b4b43;
  font: 600 20px/1 "Dancing Script", "Great Vibes", cursive;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.landing-divider {
  width: 174px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.landing-divider::before,
.landing-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c89758);
}
.landing-divider::after { background: linear-gradient(90deg, #c89758, transparent); }
.landing-divider span {
  width: 13px;
  height: 13px;
  margin: 0 8px;
  transform: rotate(45deg);
  background: #c89758;
  border-radius: 3px 3px 6px 3px;
}
.landing-main-card {
  position: relative;
  width: min(318px, 82vw);
  min-height: 342px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 25px 31px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(180deg, rgba(255, 254, 246, .97), rgba(255, 248, 236, .94));
  border: 1px solid rgba(205, 162, 91, .58);
  border-radius: 132px 132px 4px 4px;
  box-shadow:
    0 19px 34px rgba(127, 77, 61, .18),
    0 2px 0 rgba(255,255,255,.76) inset,
    inset 0 0 0 7px rgba(255,255,255,.42);
}
.landing-main-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(199, 151, 79, .54);
  border-radius: 115px 115px 2px 2px;
  pointer-events: none;
}
.landing-card-ornament {
  position: absolute;
  top: 42px;
  color: #c99758;
  font-size: 31px;
  line-height: 1;
}
.landing-couple-title {
  margin: 46px 0 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: #72302d;
  font: 500 39px/1.12 "Cormorant Garamond", Georgia, serif;
  text-align: center;
  letter-spacing: -.036em;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.landing-couple-title i {
  font-style: normal;
  font-size: .88em;
  line-height: .9;
}
.landing-heart-line {
  position: relative;
  display: block;
  width: 118px;
  height: 16px;
  margin: 0 0 15px;
}
.landing-heart-line::before,
.landing-heart-line::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c99758);
}
.landing-heart-line::before { left: 0; }
.landing-heart-line::after { right: 0; transform: scaleX(-1); }
.landing-heart-line { color: #c99758; }
.landing-heart-line::selection { background: transparent; }
.landing-heart-line:after { }
.landing-heart-line::marker { display: none; }
.landing-heart-line + .landing-save-date::before {
  content: "♥";
  position: absolute;
  left: 50%;
  transform: translate(-50%, -23px);
  color: #c99758;
  font: 700 14px/1 "Montserrat", sans-serif;
}
.landing-save-date {
  position: relative;
  margin: 0 0 8px;
  color: #955955;
  font: 800 13px/1 "Montserrat", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.landing-date {
  color: #743b38;
  font: 600 25px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .10em;
}
.landing-small-ornament {
  margin-top: 18px;
  color: #c99758;
  font-size: 24px;
  line-height: 1;
}
.landing-flower,
.landing-sprig {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
/* Watercolor rose clusters drawn in CSS: top left, right side and lower left. */
.landing-flower-top,
.landing-flower-left,
.landing-flower-right {
  opacity: .95;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 8px rgba(125, 78, 66, .05));
}
.landing-flower-top {
  left: 5px;
  top: 8px;
  width: 160px;
  height: 138px;
  background:
    radial-gradient(ellipse at 30% 29%, rgba(236, 148, 142, .72) 0 14px, transparent 15px),
    radial-gradient(ellipse at 44% 20%, rgba(255, 204, 192, .92) 0 18px, transparent 19px),
    radial-gradient(ellipse at 63% 30%, rgba(246, 176, 164, .86) 0 17px, transparent 18px),
    radial-gradient(ellipse at 22% 48%, rgba(247, 184, 173, .78) 0 13px, transparent 14px),
    radial-gradient(ellipse at 80% 43%, rgba(249, 198, 183, .70) 0 12px, transparent 13px),
    radial-gradient(ellipse at 19% 75%, rgba(110, 139, 92, .46) 0 10px, transparent 11px),
    radial-gradient(ellipse at 52% 66%, rgba(103, 132, 88, .42) 0 11px, transparent 12px),
    radial-gradient(ellipse at 76% 74%, rgba(113, 142, 94, .38) 0 10px, transparent 11px);
  transform: rotate(-10deg);
}
.landing-flower-right {
  right: -7px;
  top: 132px;
  width: 178px;
  height: 208px;
  background:
    radial-gradient(ellipse at 70% 23%, rgba(246, 164, 157, .86) 0 18px, transparent 19px),
    radial-gradient(ellipse at 52% 38%, rgba(255, 205, 190, .94) 0 22px, transparent 23px),
    radial-gradient(ellipse at 77% 47%, rgba(236, 146, 142, .70) 0 18px, transparent 19px),
    radial-gradient(ellipse at 48% 63%, rgba(250, 188, 176, .85) 0 17px, transparent 18px),
    radial-gradient(ellipse at 82% 68%, rgba(249, 191, 178, .76) 0 15px, transparent 16px),
    radial-gradient(ellipse at 31% 24%, rgba(110, 139, 92, .50) 0 12px, transparent 13px),
    radial-gradient(ellipse at 34% 52%, rgba(103, 132, 88, .42) 0 11px, transparent 12px),
    radial-gradient(ellipse at 61% 78%, rgba(116, 144, 96, .36) 0 11px, transparent 12px);
  transform: rotate(15deg);
}
.landing-flower-left {
  left: 13px;
  top: 354px;
  width: 112px;
  height: 148px;
  background:
    radial-gradient(ellipse at 37% 28%, rgba(247, 184, 173, .82) 0 17px, transparent 18px),
    radial-gradient(ellipse at 60% 44%, rgba(236, 146, 142, .56) 0 14px, transparent 15px),
    radial-gradient(ellipse at 32% 61%, rgba(255, 206, 192, .78) 0 14px, transparent 15px),
    radial-gradient(ellipse at 72% 70%, rgba(108, 138, 93, .42) 0 9px, transparent 10px),
    radial-gradient(ellipse at 17% 44%, rgba(109, 139, 93, .36) 0 9px, transparent 10px);
  transform: rotate(-22deg);
}
.landing-sprig-right {
  right: 18px;
  top: 76px;
  width: 84px;
  height: 118px;
  opacity: .56;
  background:
    linear-gradient(72deg, transparent 48%, rgba(171, 139, 76, .56) 49% 51%, transparent 52%),
    radial-gradient(ellipse at 59% 22%, rgba(166, 136, 77, .58) 0 4px, transparent 5px),
    radial-gradient(ellipse at 42% 34%, rgba(166, 136, 77, .48) 0 4px, transparent 5px),
    radial-gradient(ellipse at 70% 43%, rgba(166, 136, 77, .50) 0 4px, transparent 5px),
    radial-gradient(ellipse at 48% 56%, rgba(166, 136, 77, .44) 0 4px, transparent 5px),
    radial-gradient(ellipse at 70% 70%, rgba(166, 136, 77, .40) 0 4px, transparent 5px);
}
.landing-quick-actions {
  width: min(330px, 88vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 16px;
}
.landing-quick-actions button,
.landing-quick-actions a {
  border: 0;
  background: transparent;
  color: #75413d;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.12;
  padding: 0;
}
.landing-quick-actions .landing-icon,
.landing-quick-actions span {
  width: 49px;
  height: 49px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.50);
  color: #9b5b53;
  font-size: 21px;
  box-shadow: inset 0 0 0 1px rgba(133, 74, 66, .06), 0 8px 18px rgba(138, 84, 75, .10);
}
.landing-enter-button {
  width: min(315px, 86vw);
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #cb8881 0%, #bb6e68 100%);
  color: #fff7f3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font: 900 15px/1 "Montserrat", sans-serif;
  letter-spacing: .15em;
  box-shadow: 0 16px 28px rgba(158, 83, 76, .28);
  cursor: pointer;
}
.landing-enter-button i {
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0;
}
.landing-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(0px, env(safe-area-inset-bottom));
  z-index: 5002;
  width: min(430px, 100vw);
  height: 76px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 8px 8px 10px;
  background: rgba(255, 250, 246, .95);
  border-top: 1px solid rgba(129, 71, 64, .12);
  box-shadow: 0 -10px 28px rgba(114, 71, 61, .12);
  backdrop-filter: blur(10px);
}
body:not(.landing-active) .landing-bottom-nav { display: none; }
.landing-bottom-nav button {
  border: 0;
  background: transparent;
  color: rgba(99, 55, 51, .63);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 700 10.5px/1.1 "Montserrat", sans-serif;
  cursor: pointer;
  padding: 0;
}
.landing-bottom-nav span { font-size: 22px; line-height: 1; }
.landing-bottom-nav .is-active { color: #803932; }
.landing-modal {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
.landing-modal[hidden] { display: none !important; }
.landing-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(55, 34, 30, .45);
  backdrop-filter: blur(6px);
}
.landing-modal-card {
  position: relative;
  z-index: 1;
  width: min(392px, 100%);
  max-height: min(760px, calc(100dvh - 42px));
  overflow: auto;
  border-radius: 28px;
  background: linear-gradient(180deg, #fffaf6 0%, #fff2ec 100%);
  border: 1px solid rgba(196, 142, 93, .22);
  box-shadow: 0 24px 70px rgba(62, 39, 34, .32);
  padding: 24px 18px 20px;
  color: #704137;
  text-align: center;
  scrollbar-width: none;
}
.landing-modal-card::-webkit-scrollbar { width: 0; }
.landing-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(133, 76, 69, .10);
  color: #7e403a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.landing-modal-eyebrow {
  margin: 0 0 4px;
  color: #c08a55;
  font: 800 11px/1 "Montserrat", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.landing-modal-card h2 {
  margin: 0 0 16px;
  color: #7e3e38;
  font: 600 32px/1 "Cormorant Garamond", Georgia, serif;
}
.landing-events-list {
  display: grid;
  gap: 12px;
  text-align: left;
}
.landing-event-card {
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(201, 151, 88, .25);
  padding: 15px 15px 14px;
  box-shadow: 0 10px 26px rgba(135, 80, 67, .09);
}
.landing-event-card h3 {
  margin: 0 0 8px;
  color: #8b4a40;
  font-size: 22px;
  line-height: 1.1;
}
.landing-event-card p {
  margin: 4px 0;
  color: #775047;
  font: 600 13px/1.4 "Montserrat", sans-serif;
}
.landing-event-card strong {
  display: block;
  margin-top: 8px;
  color: #5d3832;
  font-size: 14px;
  line-height: 1.35;
}
.landing-event-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.landing-event-actions a,
.landing-event-actions button,
.landing-rsvp-enter {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #c9837d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font: 800 12px/1 "Montserrat", sans-serif;
  cursor: pointer;
}
.landing-event-actions a { background: #d7a15f; }
.landing-rsvp-card p {
  margin: 0 0 18px;
  color: #775047;
  font: 600 15px/1.55 "Quicksand", sans-serif;
}
.landing-rsvp-enter {
  width: 100%;
  flex: none;
  background: linear-gradient(180deg, #c9837d, #b96a66);
}
body.landing-active .wish-modal,
body.landing-active .gift-modal {
  z-index: 8000 !important;
}
@media (min-width: 560px) {
  .landing-screen { padding-inline: 0; }
}
@media (max-height: 740px) {
  .landing-screen { padding-top: max(10px, env(safe-area-inset-top)); }
  .landing-card-shell { min-height: calc(100dvh - 88px); padding-top: 20px; }
  .landing-kicker { font-size: 18px; margin-bottom: 7px; }
  .landing-divider { margin-bottom: 10px; }
  .landing-main-card { min-height: 305px; padding-top: 38px; padding-bottom: 24px; }
  .landing-couple-title { font-size: 35px; margin-top: 40px; margin-bottom: 11px; }
  .landing-quick-actions { margin-top: 16px; margin-bottom: 12px; }
  .landing-enter-button { height: 53px; }
  .landing-flower-left { top: 325px; }
}
@media (max-width: 374px) {
  .landing-main-card { min-height: 300px; width: min(300px, 84vw); }
  .landing-couple-title { font-size: 33px; }
  .landing-quick-actions { gap: 6px; width: min(316px, 91vw); }
  .landing-quick-actions .landing-icon,
  .landing-quick-actions span { width: 44px; height: 44px; font-size: 19px; }
  .landing-enter-button { height: 52px; font-size: 13px; }
  .landing-bottom-nav { height: 72px; }
  .landing-bottom-nav button { font-size: 9.5px; }
}


/* 2026-07-10: premium floral landing V2 — inline SVG roses/leaves, 2 quick actions, 4-item nav */
body.landing-active {
  overflow: hidden !important;
  background: #f7e7df !important;
}
.landing-floral-defs { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
.landing-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
  padding: max(8px, env(safe-area-inset-top)) 0 max(82px, calc(env(safe-area-inset-bottom) + 72px)) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.96), transparent 29%),
    radial-gradient(circle at 91% 28%, rgba(243,184,169,.28), transparent 31%),
    radial-gradient(circle at 15% 91%, rgba(246,204,191,.42), transparent 36%),
    linear-gradient(155deg, #fffaf6 0%, #faeae3 48%, #efd2c8 100%) !important;
  color: #713833 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  isolation: isolate !important;
}
.landing-screen::-webkit-scrollbar { display: none !important; }
.landing-screen::before,
.landing-screen::after {
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  filter: blur(1px) !important;
}
.landing-screen::before {
  width: min(44vw, 260px) !important;
  height: min(44vw, 260px) !important;
  left: max(-90px, -18vw) !important;
  bottom: 2vh !important;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,240,234,.98) 0 18%, transparent 19%),
    radial-gradient(ellipse at 64% 30%, rgba(245,183,171,.78) 0 22%, transparent 23%),
    radial-gradient(ellipse at 33% 63%, rgba(239,157,153,.55) 0 24%, transparent 25%),
    radial-gradient(ellipse at 68% 66%, rgba(249,201,188,.84) 0 23%, transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(223,128,129,.38), transparent 70%) !important;
  opacity: .72 !important;
  transform: rotate(-15deg) !important;
}
.landing-screen::after {
  width: min(35vw, 210px) !important;
  height: min(35vw, 210px) !important;
  right: max(-74px, -15vw) !important;
  top: 13vh !important;
  background:
    radial-gradient(ellipse at 34% 30%, rgba(255,239,232,.96) 0 18%, transparent 19%),
    radial-gradient(ellipse at 67% 34%, rgba(245,177,166,.74) 0 22%, transparent 23%),
    radial-gradient(ellipse at 38% 69%, rgba(235,148,148,.54) 0 24%, transparent 25%),
    radial-gradient(ellipse at 70% 67%, rgba(250,204,190,.80) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(221,127,127,.34), transparent 70%) !important;
  opacity: .72 !important;
  transform: rotate(19deg) !important;
}
.landing-paper-grain {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .28 !important;
  background:
    repeating-radial-gradient(circle at 0 0, rgba(116,78,63,.045) 0 1px, transparent 1.4px 4px),
    repeating-linear-gradient(8deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px) !important;
  mix-blend-mode: multiply !important;
}
.landing-bg-petals { z-index: 1 !important; }
.landing-bg-petals i { opacity: .46 !important; filter: blur(.2px) !important; }
.landing-music-toggle {
  position: fixed !important;
  top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
  right: max(13px, calc(env(safe-area-inset-right) + 13px)) !important;
  z-index: 5010 !important;
  width: 46px !important;
  height: 46px !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  border-radius: 50% !important;
  background: rgba(25,24,23,.94) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(70,44,37,.25) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: transform .25s ease, background .25s ease !important;
}
.landing-music-toggle span { font: 800 21px/1 "Montserrat", sans-serif !important; }
.landing-music-toggle.is-playing span { animation: landingMusicPulse 1.6s ease-in-out infinite !important; }
.landing-music-toggle.is-unavailable { display: none !important; }
@keyframes landingMusicPulse { 0%,100% { transform: rotate(-5deg) scale(.96); } 50% { transform: rotate(7deg) scale(1.08); } }

.landing-card-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(430px, 100vw) !important;
  min-height: calc(100dvh - max(76px, calc(env(safe-area-inset-bottom) + 70px))) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(38px, 7vh, 70px) 18px 22px !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 33%, rgba(255,255,255,.72), transparent 44%),
    linear-gradient(180deg, rgba(255,252,248,.72), rgba(255,241,235,.50)) !important;
  box-shadow: inset 0 0 70px rgba(212,158,142,.08) !important;
}
.landing-floral-cluster {
  position: absolute !important;
  z-index: 5 !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: saturate(.96) drop-shadow(0 8px 10px rgba(100,68,57,.10)) !important;
}
.landing-floral-top-left {
  left: -10px !important;
  top: -8px !important;
  width: clamp(170px, 47vw, 222px) !important;
  height: auto !important;
  transform: rotate(-4deg) !important;
}
.landing-floral-right {
  right: -33px !important;
  top: clamp(108px, 17vh, 160px) !important;
  width: clamp(155px, 43vw, 205px) !important;
  height: auto !important;
  transform: rotate(2deg) !important;
}
.landing-floral-bottom-left {
  left: -24px !important;
  top: clamp(365px, 55vh, 475px) !important;
  width: clamp(132px, 37vw, 180px) !important;
  height: auto !important;
  transform: rotate(-5deg) !important;
}
.landing-kicker {
  position: relative !important;
  z-index: 6 !important;
  margin: 0 0 8px !important;
  color: #8b4d46 !important;
  font: 600 clamp(19px, 5vw, 23px)/1 "Dancing Script", "Great Vibes", cursive !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}
.landing-divider {
  position: relative !important;
  z-index: 6 !important;
  width: 168px !important;
  margin: 0 0 14px !important;
}
.landing-main-card {
  position: relative !important;
  z-index: 4 !important;
  width: min(326px, 84vw) !important;
  min-height: clamp(340px, 49vh, 432px) !important;
  padding: clamp(54px, 8vh, 76px) 24px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 164px 164px 9px 9px / 116px 116px 9px 9px !important;
  border: 1.6px solid rgba(202,151,81,.88) !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.94), transparent 42%),
    linear-gradient(180deg, rgba(255,253,248,.98), rgba(255,248,239,.97)) !important;
  box-shadow:
    0 18px 34px rgba(112,73,59,.16),
    0 2px 0 rgba(255,255,255,.95) inset,
    0 0 0 7px rgba(255,250,244,.42) !important;
  overflow: visible !important;
}
.landing-main-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 9px !important;
  border: 1px solid rgba(214,176,112,.30) !important;
  border-radius: 154px 154px 5px 5px / 108px 108px 5px 5px !important;
  pointer-events: none !important;
}
.landing-main-card::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 17px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(197,143,75,.52), transparent) !important;
}
.landing-card-ornament {
  margin: 0 0 clamp(20px, 3vh, 30px) !important;
  color: #c59a55 !important;
  font-size: clamp(25px, 7vw, 34px) !important;
}
.landing-couple-title {
  margin: 0 0 19px !important;
  color: #6d292a !important;
  font: 500 clamp(36px, 10.5vw, 48px)/1.08 "Cormorant Garamond", "Playfair Display", serif !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 1px 0 #fff !important;
}
.landing-couple-title span { display: block !important; white-space: nowrap !important; }
.landing-couple-title i {
  display: block !important;
  margin: 2px 0 4px !important;
  color: #7b3e3a !important;
  font: italic 500 .74em/1 "Cormorant Garamond", serif !important;
}
.landing-heart-line { margin: 1px 0 17px !important; }
.landing-save-date {
  margin: 0 0 10px !important;
  color: #925751 !important;
  font-size: 13px !important;
  letter-spacing: .23em !important;
}
.landing-date {
  color: #6f3130 !important;
  font-size: clamp(24px, 7.2vw, 31px) !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
}
.landing-small-ornament { margin-top: 18px !important; color: #c49850 !important; }

.landing-quick-actions {
  position: relative !important;
  z-index: 7 !important;
  width: min(250px, 72vw) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin: clamp(18px, 3vh, 28px) 0 15px !important;
}
.landing-quick-actions button,
.landing-quick-actions a {
  min-width: 0 !important;
  color: #75423e !important;
  font-size: 11.5px !important;
  line-height: 1.18 !important;
  gap: 8px !important;
}
.landing-quick-actions .landing-icon,
.landing-quick-actions span {
  width: 54px !important;
  height: 54px !important;
  background: rgba(249,232,225,.86) !important;
  color: #9a5d55 !important;
  border: 1px solid rgba(150,87,78,.09) !important;
  box-shadow: 0 8px 20px rgba(121,73,62,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.landing-enter-button {
  position: relative !important;
  z-index: 7 !important;
  width: min(318px, 86vw) !important;
  height: 57px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #cf8f87 0%, #b96d67 100%) !important;
  box-shadow: 0 14px 26px rgba(154,83,76,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.landing-enter-button:active { transform: translateY(1px) scale(.995) !important; }

.landing-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 5002 !important;
  width: min(430px, 100vw) !important;
  height: max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: start !important;
  padding: 9px 8px max(7px, env(safe-area-inset-bottom)) !important;
  background: rgba(255,250,246,.97) !important;
  border-top: 1px solid rgba(126,71,64,.12) !important;
  box-shadow: 0 -10px 30px rgba(104,65,56,.12) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
}
.landing-bottom-nav button { min-height: 48px !important; font-size: 10.5px !important; }
.landing-bottom-nav span { font-size: 23px !important; }

/* Retire old CSS flower placeholders; the SVG clusters above are the only landing florals. */
.landing-flower,
.landing-sprig { display: none !important; }

@media (max-height: 760px) {
  .landing-card-shell { justify-content: flex-start !important; padding-top: 24px !important; }
  .landing-kicker { font-size: 18px !important; }
  .landing-divider { margin-bottom: 8px !important; }
  .landing-main-card { min-height: 318px !important; padding-top: 48px !important; padding-bottom: 24px !important; }
  .landing-card-ornament { margin-bottom: 14px !important; }
  .landing-couple-title { font-size: 35px !important; margin-bottom: 12px !important; }
  .landing-heart-line { margin-bottom: 12px !important; }
  .landing-quick-actions { margin-top: 14px !important; margin-bottom: 12px !important; }
  .landing-enter-button { height: 52px !important; }
  .landing-floral-right { top: 108px !important; width: 160px !important; }
  .landing-floral-bottom-left { top: 345px !important; width: 140px !important; }
}
@media (max-width: 374px) {
  .landing-card-shell { padding-left: 12px !important; padding-right: 12px !important; }
  .landing-main-card { width: min(300px, 86vw) !important; }
  .landing-couple-title { font-size: 34px !important; }
  .landing-date { font-size: 24px !important; }
  .landing-floral-top-left { width: 170px !important; left: -18px !important; }
  .landing-floral-right { width: 150px !important; right: -38px !important; }
  .landing-floral-bottom-left { width: 128px !important; left: -28px !important; }
  .landing-quick-actions { width: 224px !important; gap: 20px !important; }
  .landing-enter-button { width: 88vw !important; font-size: 13px !important; }
}

/* Config-only content media: never paint bundled wedding photos as a CSS fallback. */
.name-signature i::before,
.calendar-grid .is-wedding::before,
.countdown-section .calendar-grid .is-wedding::before {
  background-image: none !important;
}
.name-signature i[data-bg] {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
.name-signature i[data-media-status="loaded"] { color: transparent !important; }
.calendar-grid .is-wedding::before,
.countdown-section .calendar-grid .is-wedding::before {
  width: 31px !important;
  height: 27px !important;
  border-radius: 55% 55% 50% 50% !important;
  background: linear-gradient(145deg, #e45a69, #c83249) !important;
  clip-path: polygon(50% 100%, 3% 43%, 4% 25%, 14% 8%, 31% 2%, 50% 17%, 69% 2%, 86% 8%, 96% 25%, 97% 43%) !important;
}
.countdown-section {
  background-image: var(--countdown-config-bg, none) !important;
  background-color: #b7a184 !important;
}
.intro-photo-a,
.intro-photo-b { background-image: none; }

/* Config-only media finishing rules */
.intro-photo-a,
.intro-photo-b { background-image: none !important; }
.gift-card-icon { width: 44px; height: 44px; display: block; color: currentColor; }


/* ==========================================================================
   2026-07-11 — Reference-matched floral opening screen
   Rebuilds the landing UI from the supplied mockup while preserving dynamic
   config text, calendar/check-in actions, popup navigation, and dual music.
   ========================================================================== */
body.landing-active {
  overflow: hidden !important;
  background: #efd5ca !important;
}

body.landing-active > .phone-shell {
  visibility: hidden !important;
  pointer-events: none !important;
}

.landing-screen {
  --landing-paper: #fff8f4;
  --landing-paper-deep: #f9e9e2;
  --landing-wine: #6f292b;
  --landing-rose: #bf7770;
  --landing-rose-dark: #aa5f5b;
  --landing-gold: #c89a4b;
  --landing-muted: #8a625d;
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.88), transparent 31%),
    radial-gradient(circle at 88% 24%, rgba(236,158,145,.28), transparent 30%),
    linear-gradient(145deg, #faeae3 0%, #efd2c6 100%) !important;
  color: var(--landing-wine) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  isolation: isolate !important;
}

.landing-phone-frame {
  position: relative !important;
  width: min(430px, 100vw) !important;
  height: 100dvh !important;
  min-height: 560px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.8), transparent 40%),
    linear-gradient(180deg, var(--landing-paper) 0%, #fdf3ee 100%) !important;
  box-shadow: 0 28px 80px rgba(91,52,43,.25) !important;
}

.landing-paper-grain {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .25 !important;
  background:
    repeating-radial-gradient(circle at 0 0, rgba(116,78,63,.05) 0 1px, transparent 1.3px 4px),
    repeating-linear-gradient(9deg, rgba(255,255,255,.24) 0 1px, transparent 1px 5px) !important;
  mix-blend-mode: multiply !important;
}

.landing-card-shell {
  position: absolute !important;
  inset: 0 0 max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: max(64px, calc(env(safe-area-inset-top) + 50px)) 18px 22px !important;
  background:
    radial-gradient(circle at 46% 29%, rgba(255,255,255,.62), transparent 37%),
    linear-gradient(180deg, rgba(255,250,247,.58), rgba(253,238,231,.38)) !important;
  box-shadow: none !important;
}
.landing-card-shell::-webkit-scrollbar { display: none !important; }

.landing-card-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 93% 8%, rgba(224,159,142,.13), transparent 22%),
    radial-gradient(ellipse at 7% 79%, rgba(226,156,143,.10), transparent 26%) !important;
}

.landing-floral-image {
  position: absolute !important;
  z-index: 6 !important;
  display: block !important;
  max-width: none !important;
  height: auto !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: saturate(.94) contrast(.98) drop-shadow(0 8px 12px rgba(110,69,56,.08)) !important;
  transform-origin: center !important;
}
.landing-floral-top-left {
  top: -12px !important;
  left: -7px !important;
  width: 166px !important;
  transform: rotate(-1deg) !important;
}
.landing-floral-right {
  top: clamp(126px, 16.5vh, 154px) !important;
  right: -8px !important;
  width: 174px !important;
  transform: rotate(.8deg) !important;
}
.landing-floral-bottom-left {
  top: clamp(362px, 46.5vh, 430px) !important;
  left: -2px !important;
  width: 126px !important;
  transform: rotate(-1deg) !important;
}

.landing-heading {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  text-align: center !important;
  margin: 17px 0 16px !important;
}
.landing-kicker {
  margin: 0 0 13px !important;
  color: #804340 !important;
  font: 600 22px/1.1 "Dancing Script", "Great Vibes", cursive !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.88) !important;
}
.landing-divider {
  position: relative !important;
  z-index: 1 !important;
  width: 170px !important;
  height: 18px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.landing-divider::before,
.landing-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--landing-gold)) !important;
}
.landing-divider::after { transform: scaleX(-1) !important; }
.landing-divider span {
  width: 12px !important;
  height: 12px !important;
  margin: 0 9px !important;
  border-radius: 8px 8px 3px 8px !important;
  background: var(--landing-gold) !important;
  transform: rotate(45deg) !important;
  box-shadow: none !important;
}

.landing-main-card {
  position: relative !important;
  z-index: 4 !important;
  width: min(318px, 82vw) !important;
  min-height: 386px !important;
  margin: 0 !important;
  padding: 57px 25px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 1.35px solid rgba(200,154,75,.86) !important;
  border-radius: 160px 160px 3px 3px / 112px 112px 3px 3px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.94), transparent 42%),
    linear-gradient(180deg, rgba(255,254,249,.99), rgba(255,249,241,.98)) !important;
  box-shadow:
    0 17px 24px rgba(103,66,53,.17),
    0 2px 0 rgba(255,255,255,.9) inset,
    0 0 0 6px rgba(255,250,245,.34) !important;
}
.landing-main-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(206,167,96,.24) !important;
  border-radius: 150px 150px 1px 1px / 104px 104px 1px 1px !important;
  pointer-events: none !important;
}
.landing-main-card::after {
  content: "" !important;
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  bottom: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(199,151,75,.55), transparent) !important;
}

.landing-card-ornament {
  position: relative !important;
  top: auto !important;
  width: 56px !important;
  height: 42px !important;
  margin: 0 0 25px !important;
  display: block !important;
  color: var(--landing-gold) !important;
  font-size: 0 !important;
}
.landing-card-ornament svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.landing-couple-title {
  margin: 0 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  color: var(--landing-wine) !important;
  font: 500 clamp(37px, 9.8vw, 45px)/1.08 "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.82) !important;
}
.landing-couple-title span {
  display: block !important;
  white-space: nowrap !important;
}
.landing-couple-title i {
  display: block !important;
  margin: 2px 0 4px !important;
  color: #7d3a3a !important;
  font: italic 500 .72em/1 "Cormorant Garamond", serif !important;
}

.landing-heart-line {
  position: relative !important;
  width: 140px !important;
  height: 18px !important;
  margin: 0 0 15px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--landing-gold) !important;
}
.landing-heart-line::before,
.landing-heart-line::after {
  content: "" !important;
  position: absolute !important;
  top: 9px !important;
  width: 54px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--landing-gold)) !important;
}
.landing-heart-line::before { left: 0 !important; }
.landing-heart-line::after { right: 0 !important; transform: scaleX(-1) !important; }
.landing-heart-line b {
  position: relative !important;
  z-index: 1 !important;
  font: 700 14px/1 Arial, sans-serif !important;
}
.landing-heart-line + .landing-save-date::before { display: none !important; }

.landing-save-date {
  margin: 0 0 9px !important;
  color: #94534f !important;
  font: 700 13px/1 "Montserrat", sans-serif !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
.landing-date {
  color: #71302f !important;
  font: 500 clamp(25px, 6.8vw, 30px)/1 "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
}
.landing-small-ornament {
  width: 84px !important;
  height: 23px !important;
  margin: 19px 0 0 !important;
  display: block !important;
  color: var(--landing-gold) !important;
  font-size: 0 !important;
}
.landing-small-ornament svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.landing-quick-actions {
  position: relative !important;
  z-index: 8 !important;
  width: min(250px, 70vw) !important;
  margin: 22px 0 16px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 34px !important;
}
.landing-quick-actions a,
.landing-quick-actions button {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #77423f !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: "Montserrat", sans-serif !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.landing-quick-actions b {
  max-width: 96px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.landing-action-icon {
  width: 55px !important;
  height: 55px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(138,77,70,.07) !important;
  background: rgba(241,218,210,.62) !important;
  color: #a7635d !important;
  box-shadow: 0 8px 18px rgba(118,71,61,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.landing-action-icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.landing-action-icon svg path:first-child { vector-effect: non-scaling-stroke !important; }
[data-landing-checkin] .landing-action-icon svg { fill: currentColor !important; stroke: none !important; }

.landing-enter-button {
  position: relative !important;
  z-index: 8 !important;
  width: min(304px, 82vw) !important;
  min-height: 54px !important;
  padding: 0 23px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ca8982 0%, #b96d67 100%) !important;
  color: #fffaf7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 13px 25px rgba(150,78,70,.27), inset 0 1px 0 rgba(255,255,255,.25) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .18s ease, filter .18s ease !important;
}
.landing-enter-button span {
  font: 700 15px/1 "Montserrat", sans-serif !important;
  letter-spacing: .15em !important;
}
.landing-enter-button svg {
  position: absolute !important;
  right: 24px !important;
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}
.landing-enter-button:active { transform: translateY(1px) scale(.995) !important; }

.landing-music-toggle {
  position: absolute !important;
  top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
  right: 14px !important;
  z-index: 30 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  border-radius: 50% !important;
  background: rgba(22,22,22,.96) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 22px rgba(65,40,34,.25) !important;
  cursor: pointer !important;
}
.landing-music-toggle svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
}
.landing-music-toggle.is-playing svg { animation: landingMusicPulse 1.5s ease-in-out infinite !important; }
.landing-music-toggle.is-unavailable { display: none !important; }

.landing-bottom-nav {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  transform: none !important;
  padding: 8px 8px max(7px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  background: rgba(255,250,247,.96) !important;
  border-top: 1px solid rgba(126,71,64,.10) !important;
  box-shadow: 0 -8px 22px rgba(100,61,52,.08) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
.landing-bottom-nav button {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(105,75,69,.69) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  font-family: "Montserrat", sans-serif !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.landing-bottom-nav button svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.landing-bottom-nav button:first-child svg { fill: currentColor !important; stroke: none !important; }
.landing-bottom-nav button b {
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
}
.landing-bottom-nav button.is-active { color: #81352f !important; }

/* The old procedural SVG/CSS flower implementations are intentionally retired. */
.landing-floral-defs,
.landing-floral-cluster,
.landing-flower,
.landing-sprig { display: none !important; }

@media (min-width: 600px) {
  .landing-phone-frame {
    height: min(920px, calc(100dvh - 28px)) !important;
    border-radius: 38px !important;
    border: 8px solid rgba(35,25,22,.95) !important;
    box-shadow:
      0 0 0 3px #b5815d,
      0 32px 90px rgba(84,48,39,.30) !important;
  }
  .landing-bottom-nav { border-radius: 0 0 29px 29px !important; }
}

@media (max-height: 790px) {
  .landing-card-shell {
    padding-top: max(42px, calc(env(safe-area-inset-top) + 34px)) !important;
  }
  .landing-heading { margin-top: 4px !important; margin-bottom: 9px !important; }
  .landing-kicker { font-size: 19px !important; margin-bottom: 8px !important; }
  .landing-main-card {
    width: min(302px, 82vw) !important;
    min-height: 330px !important;
    padding-top: 43px !important;
    padding-bottom: 22px !important;
  }
  .landing-card-ornament { width: 47px !important; height: 34px !important; margin-bottom: 14px !important; }
  .landing-couple-title { font-size: clamp(32px, 9vw, 39px) !important; margin-bottom: 12px !important; }
  .landing-heart-line { margin-bottom: 10px !important; }
  .landing-save-date { font-size: 11.5px !important; margin-bottom: 6px !important; }
  .landing-date { font-size: 24px !important; }
  .landing-small-ornament { margin-top: 12px !important; }
  .landing-quick-actions { margin-top: 14px !important; margin-bottom: 10px !important; }
  .landing-action-icon { width: 49px !important; height: 49px !important; }
  .landing-enter-button { min-height: 49px !important; }
  .landing-floral-right { top: 109px !important; width: 153px !important; }
  .landing-floral-bottom-left { top: 333px !important; width: 110px !important; }
}

@media (max-height: 660px) {
  .landing-heading { margin-top: 0 !important; }
  .landing-main-card { min-height: 300px !important; }
  .landing-quick-actions { margin-top: 12px !important; }
}

@media (max-width: 374px) {
  .landing-card-shell { padding-left: 10px !important; padding-right: 10px !important; }
  .landing-main-card { width: min(294px, 84vw) !important; }
  .landing-couple-title { font-size: 34px !important; }
  .landing-floral-top-left { width: 145px !important; left: -10px !important; }
  .landing-floral-right { width: 148px !important; right: -15px !important; }
  .landing-floral-bottom-left { width: 108px !important; left: -7px !important; }
  .landing-enter-button { width: 86vw !important; }
}

.landing-screen::before,
.landing-screen::after { display: none !important; }

.landing-screen {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .5s ease, transform .5s ease !important;
}
.landing-screen.is-leaving {
  opacity: 0 !important;
  transform: scale(1.012) !important;
  pointer-events: none !important;
}


/* ==========================================================================\n   2026-07-11 — Landing center / default frame / compact flower icon hotfix\n   - Removes the desktop faux-phone black/gold frame.\n   - Makes the opening panel center from the real viewport, independent of body/app widths.\n   - Restores the lightweight bouquet icon at its former compact size.\n   ========================================================================== */
body.landing-active {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
}

.landing-screen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.landing-phone-frame {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(430px, 100vw) !important;
  max-width: 430px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 54px rgba(91, 52, 43, .16) !important;
}

@supports not (height: 100dvh) {
  .landing-screen,
  .landing-phone-frame {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}

@media (min-width: 431px) {
  .landing-phone-frame {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(430px, calc(100vw - 28px)) !important;
    height: min(920px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(119, 75, 65, .12) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 68px rgba(91, 52, 43, .20) !important;
  }
  .landing-bottom-nav {
    border-radius: 0 0 21px 21px !important;
  }
}

/* Keep the landing nav above every decorative layer and preserve reliable taps. */
.landing-bottom-nav,
.landing-bottom-nav button,
[data-landing-album] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
[data-landing-album] {
  position: relative !important;
  z-index: 2 !important;
}
[data-landing-album].is-loading {
  opacity: .62 !important;
}

/* Lightweight bouquet icon in the floating wish control: compact, contained, no oversized crop. */
.wish-panel-avatar,
body.wish-controls-live .wish-panel-avatar,
body.intro-running .wish-panel-avatar {
  top: -4px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-width: 1px !important;
  background: rgba(255, 252, 246, .98) !important;
  box-shadow: 0 5px 11px rgba(48, 31, 32, .14) !important;
}
.wish-panel-avatar img,
body.wish-controls-live .wish-panel-avatar img,
body.intro-running .wish-panel-avatar img {
  width: 100% !important;
  height: 100% !important;
  padding: 2px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The bouquet between the groom/bride names also returns to the older compact visual size. */
.family-section .name-signature i {
  width: 52px !important;
  height: 48px !important;
  background-size: contain !important;
  transform: translate(-50%, 5px) !important;
}
@media (max-width: 390px) {
  .family-section .name-signature i {
    width: 46px !important;
    height: 43px !important;
    transform: translate(-50%, 5px) !important;
  }
}

/* ========================================================================== 
   LANDING MOTION ENHANCEMENT — subtle, GPU-friendly, and two-stage safe
   ========================================================================== */
.landing-screen.is-motion-preparing .landing-heading,
.landing-screen.is-motion-preparing .landing-main-card,
.landing-screen.is-motion-preparing .landing-quick-actions,
.landing-screen.is-motion-preparing .landing-enter-button {
  opacity: 0 !important;
}

.landing-screen.landing-motion-ready:not(.is-leaving) .landing-heading {
  animation: landingHeadingReveal .9s cubic-bezier(.2,.75,.24,1) .05s both !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-main-card {
  animation: landingCardReveal 1.05s cubic-bezier(.17,.82,.25,1) .16s both !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-quick-actions {
  animation: landingControlsReveal .8s cubic-bezier(.2,.75,.25,1) .72s both !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-enter-button {
  animation:
    landingControlsReveal .8s cubic-bezier(.2,.75,.25,1) .9s both,
    landingCtaBreath 2.7s ease-in-out 1.75s infinite !important;
}

.landing-couple-title > span {
  position: relative !important;
  display: block !important;
  transform-origin: center 70% !important;
}
.landing-couple-title.is-name-animating > span:first-of-type {
  animation: landingNameFloat 5.4s ease-in-out 1.7s infinite !important;
}
.landing-couple-title.is-name-animating > span:last-of-type {
  animation: landingNameFloat 5.4s ease-in-out 2.15s infinite reverse !important;
}
.landing-couple-title .landing-name-letter {
  display: inline-block !important;
  min-width: .03em !important;
  opacity: 1 !important;
  transform-origin: 50% 85% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity, filter !important;
}
.landing-couple-title.is-name-animating .landing-name-letter {
  animation: landingNameLetterReveal .78s cubic-bezier(.18,.84,.24,1.22) both !important;
  animation-delay: calc(.28s + (var(--line-index) * .5s) + (var(--letter-index) * .052s)) !important;
}
.landing-couple-title.is-name-animating > i {
  animation: landingAmpersandPulse 3.8s ease-in-out 1.25s infinite !important;
}

.landing-kicker {
  transform-origin: center !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-kicker {
  animation: landingKickerGlow 4.8s ease-in-out 1.15s infinite !important;
}
.landing-divider span,
.landing-heart-line b {
  animation: landingHeartBeat 2.25s ease-in-out 1.3s infinite !important;
}
.landing-card-ornament svg,
.landing-small-ornament svg {
  stroke-dasharray: 260 !important;
  stroke-dashoffset: 260 !important;
}
.landing-screen.landing-motion-ready .landing-card-ornament svg,
.landing-screen.landing-motion-ready .landing-small-ornament svg {
  animation: landingOrnamentDraw 1.45s ease-out .55s forwards !important;
}

.landing-floral-image {
  will-change: translate, filter !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-floral-top-left {
  animation: landingFloralDriftA 7.5s ease-in-out 1s infinite alternate !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-floral-right {
  animation: landingFloralDriftB 8.4s ease-in-out 1.3s infinite alternate !important;
}
.landing-screen.landing-motion-ready:not(.is-leaving) .landing-floral-bottom-left {
  animation: landingFloralDriftC 6.8s ease-in-out 1.6s infinite alternate !important;
}

.landing-bg-petals i {
  will-change: translate, opacity !important;
}
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(1) { animation: landingPetalDrift 7.4s ease-in-out .1s infinite alternate !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(2) { animation: landingPetalDrift 6.8s ease-in-out .6s infinite alternate-reverse !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(3) { animation: landingPetalDrift 8.2s ease-in-out 1.1s infinite alternate !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(4) { animation: landingPetalDrift 7.7s ease-in-out .3s infinite alternate-reverse !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(5) { animation: landingPetalDrift 6.5s ease-in-out 1.4s infinite alternate !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(6) { animation: landingPetalDrift 8.8s ease-in-out .8s infinite alternate-reverse !important; }
.landing-screen.landing-motion-ready .landing-bg-petals i:nth-child(7) { animation: landingPetalDrift 7.1s ease-in-out 1.8s infinite alternate !important; }

.landing-quick-actions > * .landing-action-icon {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}
.landing-screen.landing-motion-ready .landing-quick-actions > *:nth-child(1) .landing-action-icon {
  animation: landingActionFloat 3.9s ease-in-out 1.5s infinite !important;
}
.landing-screen.landing-motion-ready .landing-quick-actions > *:nth-child(2) .landing-action-icon {
  animation: landingActionFloat 3.9s ease-in-out 1.95s infinite reverse !important;
}
.landing-quick-actions > *:hover .landing-action-icon,
.landing-quick-actions > *:focus-visible .landing-action-icon {
  transform: translateY(-3px) scale(1.045) !important;
  box-shadow: 0 12px 24px rgba(118,71,61,.16), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.landing-enter-button {
  overflow: hidden !important;
  isolation: isolate !important;
  will-change: transform, box-shadow !important;
}
.landing-enter-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -45% auto -45% -38% !important;
  width: 32% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent) !important;
  transform: skewX(-18deg) translateX(-220%) !important;
  animation: landingCtaSheen 3.7s ease-in-out 1.55s infinite !important;
}
.landing-enter-button span,
.landing-enter-button svg {
  z-index: 3 !important;
}
.landing-enter-button svg {
  transform-origin: center !important;
  animation: landingHeartBeat 1.65s ease-in-out 1.25s infinite !important;
}
.landing-enter-button:hover,
.landing-enter-button:focus-visible {
  filter: saturate(1.08) brightness(1.035) !important;
  box-shadow: 0 16px 30px rgba(150,78,70,.34), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.landing-enter-button:active {
  animation-play-state: paused !important;
  transform: translateY(1px) scale(.985) !important;
}
.landing-cta-ripple {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: rgba(255,255,255,.62) !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: landingCtaRipple .68s ease-out forwards !important;
}

.landing-music-toggle.is-playing svg {
  transform-origin: center !important;
  animation: landingMusicNoteDance 1.55s ease-in-out infinite !important;
}

@keyframes landingHeadingReveal {
  0% { opacity: 0; transform: translateY(-13px); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes landingCardReveal {
  0% { opacity: 0; transform: translateY(24px) scale(.965); filter: blur(7px); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.006); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes landingControlsReveal {
  0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes landingNameLetterReveal {
  0% { opacity: 0; transform: translateY(24px) rotate(5deg) scale(.82); filter: blur(6px); }
  62% { opacity: 1; transform: translateY(-2px) rotate(-1deg) scale(1.035); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: blur(0); }
}
@keyframes landingNameFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}
@keyframes landingAmpersandPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  50% { transform: scale(1.1) rotate(-3deg); opacity: 1; }
}
@keyframes landingKickerGlow {
  0%, 100% { text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 0 0 rgba(181,102,92,0); }
  50% { text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 4px 14px rgba(181,102,92,.2); }
}
@keyframes landingHeartBeat {
  0%, 46%, 100% { transform: scale(1); }
  12% { transform: scale(1.14); }
  24% { transform: scale(.98); }
  34% { transform: scale(1.08); }
}
@keyframes landingOrnamentDraw {
  0% { stroke-dashoffset: 260; opacity: .2; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes landingFloralDriftA {
  0% { translate: 0 0; filter: saturate(.94) contrast(.98) drop-shadow(0 8px 12px rgba(110,69,56,.08)); }
  100% { translate: 2px 4px; filter: saturate(1) contrast(.99) drop-shadow(0 10px 15px rgba(110,69,56,.11)); }
}
@keyframes landingFloralDriftB {
  0% { translate: 0 0; filter: saturate(.94) contrast(.98) drop-shadow(0 8px 12px rgba(110,69,56,.08)); }
  100% { translate: -3px 3px; filter: saturate(1) contrast(.99) drop-shadow(0 11px 16px rgba(110,69,56,.11)); }
}
@keyframes landingFloralDriftC {
  0% { translate: 0 0; }
  100% { translate: 3px -2px; }
}
@keyframes landingPetalDrift {
  0% { translate: 0 0; opacity: .28; }
  45% { opacity: .55; }
  100% { translate: 7px 13px; opacity: .36; }
}
@keyframes landingActionFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes landingCtaBreath {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 13px 25px rgba(150,78,70,.27), inset 0 1px 0 rgba(255,255,255,.25); }
  50% { transform: translateY(-2px) scale(1.012); box-shadow: 0 18px 34px rgba(150,78,70,.36), 0 0 0 5px rgba(202,137,130,.10), inset 0 1px 0 rgba(255,255,255,.32); }
}
@keyframes landingCtaSheen {
  0%, 58% { transform: skewX(-18deg) translateX(-220%); opacity: 0; }
  66% { opacity: .9; }
  86%, 100% { transform: skewX(-18deg) translateX(560%); opacity: 0; }
}
@keyframes landingCtaRipple {
  0% { opacity: .78; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(32); }
}
@keyframes landingMusicNoteDance {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-screen.is-motion-preparing .landing-heading,
  .landing-screen.is-motion-preparing .landing-main-card,
  .landing-screen.is-motion-preparing .landing-quick-actions,
  .landing-screen.is-motion-preparing .landing-enter-button {
    opacity: 1 !important;
  }
  .landing-screen *,
  .landing-screen *::before,
  .landing-screen *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .landing-couple-title .landing-name-letter { opacity: 1 !important; transform: none !important; filter: none !important; }
}


/* 2026-07-11: restore landing ornaments + guest QR gate */
.landing-card-ornament {
  width: 88px !important;
  height: 50px !important;
  margin-bottom: 22px !important;
  overflow: visible !important;
}
.landing-card-ornament::before,
.landing-card-ornament::after {
  content: "" !important;
  position: absolute !important;
  top: 76% !important;
  width: 30px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(197,154,85,.76)) !important;
}
.landing-card-ornament::before {
  right: calc(100% + 5px) !important;
}
.landing-card-ornament::after {
  left: calc(100% + 5px) !important;
  transform: scaleX(-1) !important;
}
.landing-card-ornament svg,
.landing-small-ornament svg {
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}
.landing-screen.landing-motion-ready .landing-card-ornament svg,
.landing-screen.landing-motion-ready .landing-small-ornament svg {
  animation: landingOrnamentDraw 1.45s ease-out .45s both !important;
}
.landing-small-ornament {
  width: 122px !important;
  height: 29px !important;
  margin-top: 19px !important;
  overflow: visible !important;
}
.landing-small-ornament svg {
  stroke-width: 1.55 !important;
}

[data-landing-checkin] {
  position: relative !important;
}
[data-landing-checkin] small {
  min-height: 12px !important;
  margin-top: -3px !important;
  color: #a5766f !important;
  font: 700 8px/1 "Montserrat", sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
[data-landing-checkin].is-qr-ready .landing-action-icon {
  box-shadow:
    0 0 0 3px rgba(198,150,82,.13),
    0 8px 20px rgba(121,73,62,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}
[data-landing-checkin].is-qr-ready small {
  color: #b17d39 !important;
}
[data-landing-checkin].is-qr-locked .landing-action-icon {
  opacity: .78 !important;
}

.landing-qr-card {
  width: min(372px, 100%) !important;
  padding: 25px 20px 22px !important;
  overflow: hidden !important;
}
.landing-qr-ready[hidden],
.landing-qr-locked[hidden] {
  display: none !important;
}
.landing-qr-ready {
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
}
.landing-qr-image-wrap {
  width: min(252px, 72vw) !important;
  aspect-ratio: 1 !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid rgba(197,151,80,.35) !important;
  box-shadow: 0 15px 34px rgba(101,61,50,.14) !important;
}
.landing-qr-image-wrap img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}
.landing-qr-help {
  margin: 0 !important;
  color: #775047 !important;
  font: 600 13px/1.45 "Quicksand", sans-serif !important;
}
.landing-qr-id-line {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(201,151,88,.10) !important;
}
.landing-qr-id-line span {
  color: #9a7465 !important;
  font: 800 10px/1 "Montserrat", sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.landing-qr-id-line strong {
  color: #743632 !important;
  font: 800 18px/1 "Montserrat", sans-serif !important;
  letter-spacing: .08em !important;
}
.landing-qr-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}
.landing-qr-actions button,
.landing-qr-actions a,
.landing-qr-rsvp-button {
  min-height: 43px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font: 800 11px/1.2 "Montserrat", sans-serif !important;
}
.landing-qr-actions button {
  background: #d6a15f !important;
  color: #fff !important;
}
.landing-qr-actions a {
  background: #bf7772 !important;
  color: #fff !important;
}
.landing-qr-locked {
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
  padding: 5px 2px 2px !important;
}
.landing-qr-lock-icon {
  width: 82px !important;
  height: 82px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #bc7b72 !important;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.9), transparent 37%),
    linear-gradient(145deg, #fae5dd, #f4cfc5) !important;
  box-shadow: 0 12px 28px rgba(133,75,65,.14) !important;
}
.landing-qr-lock-icon svg {
  width: 43px !important;
  height: 43px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.landing-qr-locked h3 {
  margin: 0 !important;
  color: #7d3e38 !important;
  font: 600 25px/1.05 "Cormorant Garamond", Georgia, serif !important;
}
.landing-qr-locked p {
  margin: 0 !important;
  color: #775047 !important;
  font: 600 13.5px/1.55 "Quicksand", sans-serif !important;
}
.landing-qr-rsvp-button {
  width: 100% !important;
  margin-top: 3px !important;
  background: linear-gradient(180deg, #cd8b83, #b96864) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(155,83,75,.20) !important;
}
@media (max-width: 360px) {
  .landing-qr-actions {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-11: rebalance landing ornaments + mirror main event cards in landing popup */
.landing-main-card {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: 386px !important;
  padding: 38px 25px 27px !important;
}
.landing-card-ornament {
  position: relative !important;
  width: 52px !important;
  height: 35px !important;
  margin: 0 0 10px !important;
  flex: none !important;
  transform: none !important;
}
.landing-card-ornament::before,
.landing-card-ornament::after {
  top: 72% !important;
  width: 21px !important;
}
.landing-card-ornament::before { right: calc(100% + 6px) !important; }
.landing-card-ornament::after { left: calc(100% + 6px) !important; }
.landing-card-ornament svg { stroke-width: 2.35 !important; }
.landing-couple-title {
  margin: 0 0 11px !important;
  font-size: clamp(35px, 9.2vw, 43px) !important;
  line-height: 1.06 !important;
}
.landing-couple-title i { margin: 1px 0 3px !important; }
.landing-heart-line {
  height: 16px !important;
  margin: 0 0 10px !important;
}
.landing-heart-line::before,
.landing-heart-line::after { top: 8px !important; }
.landing-save-date { margin-bottom: 7px !important; }
.landing-date { font-size: clamp(23px, 6.4vw, 28px) !important; }
.landing-small-ornament {
  width: 94px !important;
  height: 22px !important;
  margin: 12px 0 0 !important;
  flex: none !important;
  transform: none !important;
}
.landing-small-ornament svg { stroke-width: 1.45 !important; }

.landing-events-modal .landing-modal-card {
  width: min(418px, calc(100vw - 24px)) !important;
  max-height: min(88dvh, 790px) !important;
  padding: 22px 12px 18px !important;
  border: 1px solid rgba(179, 145, 92, .24) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.62), transparent 26%),
    linear-gradient(180deg, #f5efe3 0%, #eee4d2 100%) !important;
  box-shadow: 0 26px 74px rgba(74, 52, 38, .28) !important;
}
.landing-events-modal .landing-modal-eyebrow {
  color: #b38a49 !important;
  letter-spacing: .2em !important;
}
.landing-events-modal .landing-modal-card h2 {
  margin-bottom: 18px !important;
  color: #332b27 !important;
  font-size: clamp(29px, 8vw, 36px) !important;
}
.landing-events-list {
  gap: 16px !important;
  text-align: center !important;
}
.landing-event-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 24px 17px 21px !important;
  border: 0 !important;
  border-radius: 27px !important;
  background: rgba(255,255,255,.96) !important;
  color: #171311 !important;
  text-align: center !important;
  box-shadow: 0 12px 26px rgba(83, 61, 44, .10) !important;
}
.landing-event-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(202, 170, 116, .16) !important;
  border-radius: 21px !important;
  pointer-events: none !important;
}
.landing-event-title {
  position: relative !important;
  margin: 0 0 7px !important;
  color: #171311 !important;
  text-transform: uppercase !important;
  font: 600 clamp(21px, 6vw, 29px)/1.07 "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: .025em !important;
}
.landing-event-time {
  position: relative !important;
  margin: 0 0 8px !important;
  color: #1e1a18 !important;
  text-transform: uppercase !important;
  font: 500 clamp(12px, 3.5vw, 14px)/1.2 "Montserrat", sans-serif !important;
  letter-spacing: .035em !important;
}
.landing-event-date {
  position: relative !important;
  margin: 0 0 8px !important;
  color: #b78940 !important;
  white-space: nowrap !important;
  font: 700 clamp(29px, 8.2vw, 39px)/1 "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: .055em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
.landing-event-lunar {
  position: relative !important;
  margin: 0 0 10px !important;
  color: #28221f !important;
  font: 500 clamp(11px, 3.15vw, 13px)/1.35 "Montserrat", sans-serif !important;
}
.landing-event-venue {
  position: relative !important;
  margin: 0 0 7px !important;
  color: #171311 !important;
  text-transform: uppercase !important;
  font: 600 clamp(19px, 5.5vw, 25px)/1.12 "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: .02em !important;
}
.landing-event-address {
  position: relative !important;
  margin: 0 !important;
  color: #28221f !important;
  font: 500 clamp(12px, 3.4vw, 14px)/1.38 "Montserrat", sans-serif !important;
}
.landing-event-actions {
  position: relative !important;
  justify-content: center !important;
  margin-top: 14px !important;
}
.landing-event-actions .landing-event-route {
  flex: 0 0 auto !important;
  min-width: 146px !important;
  min-height: 42px !important;
  padding: 10px 19px !important;
  border-radius: 999px !important;
  background: #c08357 !important;
  color: #fffaf6 !important;
  box-shadow: 0 8px 17px rgba(147, 91, 54, .22) !important;
  font: 700 13px/1 "Montserrat", sans-serif !important;
}
.landing-event-actions .landing-event-route.is-disabled {
  opacity: .55 !important;
  pointer-events: none !important;
}
@media (max-height: 700px) {
  .landing-main-card { min-height: 354px !important; padding-top: 31px !important; padding-bottom: 23px !important; }
  .landing-card-ornament { width: 47px !important; height: 31px !important; margin-bottom: 8px !important; }
  .landing-couple-title { font-size: 34px !important; margin-bottom: 8px !important; }
  .landing-heart-line { margin-bottom: 7px !important; }
  .landing-small-ornament { width: 86px !important; height: 20px !important; margin-top: 9px !important; }
}


/* ========================================================================== 
   2026-07-11 — iPhone viewport + deterministic 1+3x2+1 album layout hotfix
   ========================================================================== */
html.landing-mobile-viewport,
html.landing-mobile-viewport body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* UA/touch class is appended after all desktop frame media queries, so an iPhone
   can never inherit the centered desktop card with outer margins or rounded corners. */
html.landing-mobile-viewport .landing-screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--landing-viewport-width, 100vw) !important;
  min-width: var(--landing-viewport-width, 100vw) !important;
  max-width: var(--landing-viewport-width, 100vw) !important;
  height: var(--landing-viewport-height, var(--app-height, 100dvh)) !important;
  min-height: var(--landing-viewport-height, var(--app-height, 100dvh)) !important;
  max-height: var(--landing-viewport-height, var(--app-height, 100dvh)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html.landing-mobile-viewport .landing-phone-frame {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html.landing-mobile-viewport .landing-card-shell,
html.landing-mobile-viewport .landing-bottom-nav {
  border-radius: 0 !important;
}

@media (hover: none) and (pointer: coarse) {
  .landing-screen {
    width: var(--landing-viewport-width, 100vw) !important;
    height: var(--landing-viewport-height, var(--app-height, 100dvh)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .landing-phone-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

.gallery-image-area .gallery-feature[hidden],
.gallery-image-area .masonry-gallery[hidden] {
  display: none !important;
}

/* Complete the album layout that was truncated in the previous runtime hotfix. */
.gallery-image-area{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important}.gallery-image-area .gallery-feature,.gallery-image-area .masonry-gallery{width:100%!important;min-width:0!important}.gallery-image-area .gallery-feature{display:block!important;aspect-ratio:16/10!important;min-height:0!important;overflow:hidden!important;cursor:zoom-in!important}.gallery-image-area .masonry-gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:8px!important}.gallery-image-area .masonry-gallery>img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1.18!important;min-width:0!important;object-fit:cover!important;cursor:zoom-in!important}.gallery-image-area .gallery-feature>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;cursor:zoom-in!important}.gallery-section img[role=button]{pointer-events:auto!important;touch-action:manipulation!important}.calendar-grid .is-wedding,.countdown-section .calendar-grid .is-wedding{position:relative!important;isolation:isolate!important}.calendar-grid .is-wedding:before,.calendar-grid .is-wedding:after,.countdown-section .calendar-grid .is-wedding:before,.countdown-section .calendar-grid .is-wedding:after{content:none!important;display:none!important}.calendar-grid span>b{position:relative;z-index:2;font:inherit;color:inherit}.calendar-grid .calendar-wedding-marker{position:absolute!important;z-index:1!important;left:50%!important;top:50%!important;width:42px!important;height:38px!important;max-width:none!important;object-fit:contain!important;transform:translate(-50%,-50%)!important;pointer-events:none!important}@media(max-width:430px){.gallery-image-area{gap:9px!important}.gallery-image-area .masonry-gallery{gap:5px!important}.gallery-image-area .gallery-feature{aspect-ratio:16/10.5!important}.gallery-image-area .masonry-gallery>img{aspect-ratio:1/1.22!important}}
.landing-floral-top-left{top:-8px!important;left:-21px!important;width:clamp(172px,45vw,198px)!important;transform:none!important}.landing-floral-right{top:clamp(105px,14vh,128px)!important;right:-9px!important;width:clamp(176px,47vw,204px)!important;transform:none!important}.landing-floral-bottom-left{top:clamp(365px,47vh,420px)!important;left:-24px!important;width:clamp(142px,38vw,166px)!important;transform:none!important}.landing-card-ornament{width:62px!important;height:39px!important;margin:0 0 13px!important}.landing-card-ornament:before,.landing-card-ornament:after{content:none!important;display:none!important}.landing-card-ornament svg{stroke-width:1.75!important}.landing-small-ornament{width:104px!important;height:25px!important;margin:13px 0 0!important}.landing-small-ornament svg{stroke-width:1.35!important}.landing-gold-ornament{overflow:visible!important}.landing-gold-ornament path{fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}.landing-gold-sparkles{transform-box:fill-box;transform-origin:center;animation:landingGoldTwinkle 1.8s ease-in-out infinite alternate}@keyframes landingGoldTwinkle{from{opacity:.42;filter:drop-shadow(0 0 0 rgba(255,226,126,0))}to{opacity:1;filter:drop-shadow(0 0 2px #ffe68d)}}.landing-date{display:block!important;min-height:1em!important;font-family:"Playfair Display",Georgia,serif!important;font-style:normal!important;font-weight:500!important;font-variant-numeric:lining-nums tabular-nums!important;font-feature-settings:"lnum" 1,"tnum" 1!important;line-height:1!important;letter-spacing:.095em!important;vertical-align:baseline!important}@media(max-height:700px){.landing-floral-right{top:92px!important;width:172px!important}.landing-floral-bottom-left{top:326px!important;width:136px!important}}
.landing-main-card{min-height:422px!important;padding:43px 25px 32px!important;row-gap:3px!important}.landing-couple-title{line-height:1.12!important;margin-bottom:14px!important}.landing-couple-title i{margin:3px 0 5px!important}.landing-save-date{margin-top:2px!important;margin-bottom:10px!important}.landing-date{text-decoration:none!important;text-decoration-line:none!important;border:0!important;border-bottom:0!important;background:none!important;box-shadow:none!important}.landing-small-ornament{margin-top:17px!important}.landing-floral-bottom-left{top:clamp(276px,36vh,322px)!important;left:-25px!important;width:clamp(146px,39vw,170px)!important}.landing-quick-actions{margin-top:23px!important;margin-bottom:15px!important}.landing-enter-button{margin-top:2px!important}@media(max-height:700px){.landing-main-card{min-height:386px!important;padding-top:34px!important;padding-bottom:25px!important}.landing-floral-bottom-left{top:250px!important;width:139px!important}.landing-quick-actions{margin-top:14px!important;margin-bottom:10px!important}}
/* Wish thanks confirmation + config avatar + expanding record player. */
.wish-thanks-popup[hidden]{display:none!important}
.wish-thanks-popup{position:fixed!important;inset:0!important;z-index:2147483400!important;display:grid!important;place-items:center!important;padding:20px!important;opacity:0!important;visibility:hidden!important;transition:opacity .22s ease,visibility .22s ease!important}
.wish-thanks-popup.is-open{opacity:1!important;visibility:visible!important}
.wish-thanks-backdrop{position:absolute!important;inset:0!important;border:0!important;background:rgba(48,30,31,.44)!important;backdrop-filter:blur(5px)!important}
.wish-thanks-card{position:relative!important;width:min(330px,calc(100vw - 36px))!important;padding:26px 23px 22px!important;border:1px solid rgba(195,136,126,.25)!important;border-radius:24px!important;background:linear-gradient(180deg,#fffaf7,#fcebe7)!important;box-shadow:0 24px 64px rgba(69,38,39,.25)!important;text-align:center!important;transform:translateY(12px) scale(.96)!important;transition:transform .24s ease!important}
.wish-thanks-popup.is-open .wish-thanks-card{transform:none!important}
.wish-thanks-heart{display:grid!important;place-items:center!important;width:46px!important;height:46px!important;margin:0 auto 11px!important;border-radius:50%!important;background:#cf7780!important;color:#fff!important;font:700 22px/1 Arial,sans-serif!important;box-shadow:0 8px 20px rgba(178,83,95,.23)!important}
.wish-thanks-card h2{margin:0 0 10px!important;color:#7a373b!important;font:600 29px/1.05 "Cormorant Garamond",Georgia,serif!important}
.wish-thanks-card p{margin:0!important;color:#62494a!important;font:600 13.5px/1.62 "Quicksand","Montserrat",sans-serif!important}
.wish-thanks-close{min-width:104px!important;margin-top:18px!important;padding:11px 20px!important;border:0!important;border-radius:999px!important;background:#c86f78!important;color:#fff!important;font:700 12px/1 "Montserrat",sans-serif!important}
.wish-panel-avatar,body.wish-controls-live .wish-panel-avatar,body.intro-running .wish-panel-avatar{top:-8px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border:2px solid rgba(255,255,255,.96)!important;overflow:hidden!important}
.wish-panel-avatar img,body.wish-controls-live .wish-panel-avatar img,body.intro-running .wish-panel-avatar img{width:100%!important;height:100%!important;padding:0!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important}
.music-control .music-now-playing{position:absolute!important;top:0!important;right:0!important;z-index:1!important;width:42px!important;height:42px!important;padding:6px 48px 6px 14px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:999px!important;background-position:center!important;background-size:cover!important;color:#fff!important;box-shadow:0 9px 22px rgba(35,24,24,.24)!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;transition:width .55s cubic-bezier(.2,.8,.2,1),opacity .3s ease!important}
.music-control.is-meta-visible .music-now-playing{width:min(236px,calc(100vw - 30px))!important;opacity:1!important}
.music-now-playing span,.music-now-playing small{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;text-align:left!important;text-shadow:0 1px 5px rgba(0,0,0,.75)!important}
.music-now-playing span{font:700 11px/1.25 "Montserrat",sans-serif!important}.music-now-playing small{margin-top:2px!important;font:500 9px/1.2 "Montserrat",sans-serif!important;opacity:.85!important}
.music-control .music-toggle{z-index:3!important;overflow:hidden!important;background:radial-gradient(circle at 50% 50%,#111 0 19%,#2b2b2b 20% 23%,#080808 24% 38%,#292929 39% 42%,#050505 43% 58%,#252525 59% 62%,#030303 63% 100%)!important}
.music-control .music-toggle span{font-size:0!important;width:100%!important;height:100%!important}
.music-control .music-toggle::before{content:""!important;position:absolute!important;inset:8px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(255,255,255,.055),0 0 0 8px rgba(255,255,255,.035)!important}
.music-control .music-toggle::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:9px!important;height:9px!important;border:2px solid #1a0c0c!important;border-radius:50%!important;background:#d98a91!important;transform:translate(-50%,-50%)!important}
.music-control.is-playing .music-toggle{animation:musicRecordSpin 3.4s linear infinite!important}
@keyframes musicRecordSpin{to{transform:rotate(360deg)}}
/* Safari touch-scroll recovery + larger 3x2 album cells. */
html.landing-mobile-viewport .landing-card-shell,
.landing-card-shell{-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior-y:auto!important}
.landing-modal,.landing-modal-card,.landing-events-list{-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
.landing-modal-card{overflow-y:auto!important;overscroll-behavior-y:contain!important}
@supports(-webkit-touch-callout:none){.landing-modal-card{max-height:calc(var(--landing-viewport-height,100dvh) - 32px)!important}.landing-card-shell{overflow-y:scroll!important}}
.gallery-image-area{width:calc(100% + 28px)!important;max-width:none!important;margin-left:-14px!important;margin-right:-14px!important}
.gallery-image-area .masonry-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.gallery-image-area .masonry-gallery>img{width:100%!important;aspect-ratio:1/1.48!important;min-height:0!important;object-fit:cover!important}
@media(max-width:430px){.gallery-image-area{width:calc(100% + 34px)!important;margin-left:-17px!important;margin-right:-17px!important}.gallery-image-area .masonry-gallery{gap:5px!important}.gallery-image-area .masonry-gallery>img{aspect-ratio:1/1.55!important}}
/* Slower hero reveal after the landing screen leaves. */
.cover-section.hero-reveal-pending .hero-photo,.cover-section.hero-reveal-pending .cover-content{opacity:0!important}
.cover-section.hero-title-animate .hero-photo{animation:heroPhotoRevealSlow 2.65s cubic-bezier(.16,.78,.2,1) .08s both!important}
.cover-section.hero-title-animate .cover-content{animation:heroContentRevealSlow 1.75s cubic-bezier(.2,.72,.2,1) .38s both!important}
.cover-section.hero-title-animate .hero-married-title .hero-title-ghost{animation-duration:1.95s!important;animation-delay:.32s!important}
.cover-section.hero-title-animate .hero-married-title .hero-word-we{animation-duration:1.72s!important;animation-delay:.58s!important}
.cover-section.hero-title-animate .hero-married-title .hero-word-married{animation-duration:1.72s!important;animation-delay:.92s!important}
.cover-section.hero-title-animate .cover-subtitle{animation-duration:1.55s!important;animation-delay:1.3s!important}
@keyframes heroPhotoRevealSlow{0%{opacity:0;filter:blur(10px) saturate(.82);transform:scale(1.075)}100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}}
@keyframes heroContentRevealSlow{0%{opacity:0;filter:blur(7px);transform:translate3d(0,24px,0)}100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}
/* Compact one-screen landing for Safari/Messenger in-app viewports. */
@media (max-width: 430px) and (max-height: 780px) {
  .landing-card-shell{inset:0 0 max(62px,calc(env(safe-area-inset-bottom) + 56px))!important;padding:max(14px,calc(env(safe-area-inset-top) + 8px)) 12px 8px!important;overflow-y:auto!important}
  .landing-heading{margin:3px 0 7px!important}
  .landing-kicker{margin-bottom:5px!important;font-size:17px!important}
  .landing-divider{width:132px!important;height:10px!important}
  .landing-divider span{width:8px!important;height:8px!important;margin:0 7px!important}
  .landing-main-card{width:min(300px,80vw)!important;min-height:316px!important;padding:25px 20px 18px!important;row-gap:0!important}
  .landing-card-ornament{width:45px!important;height:28px!important;margin:0 0 6px!important}
  .landing-couple-title{margin:0 0 6px!important;font-size:clamp(31px,8.7vw,36px)!important;line-height:1.03!important}
  .landing-couple-title i{margin:0 0 2px!important}
  .landing-heart-line{height:12px!important;margin:0 0 5px!important}
  .landing-heart-line::before,.landing-heart-line::after{top:6px!important}
  .landing-save-date{margin:1px 0 5px!important;font-size:10.5px!important;line-height:1!important}
  .landing-date{font-size:clamp(21px,5.9vw,25px)!important;line-height:1!important}
  .landing-small-ornament{width:78px!important;height:18px!important;margin:7px 0 0!important}
  .landing-floral-top-left{top:-12px!important;left:-23px!important;width:160px!important}
  .landing-floral-right{top:78px!important;right:-12px!important;width:158px!important}
  .landing-floral-bottom-left{top:225px!important;left:-25px!important;width:128px!important}
  .landing-quick-actions{width:min(224px,66vw)!important;margin:7px 0 5px!important;gap:28px!important}
  .landing-quick-actions .landing-action-icon{width:48px!important;height:48px!important}
  .landing-quick-actions b{font-size:10.5px!important;line-height:1.08!important}
  .landing-quick-actions small{min-height:9px!important;font-size:7px!important}
  .landing-enter-button{width:min(300px,84vw)!important;min-height:44px!important;height:44px!important;margin:0!important;font-size:12px!important}
  .landing-bottom-nav{height:62px!important;min-height:62px!important}
  .landing-bottom-nav button{min-height:42px!important;font-size:9px!important;gap:2px!important}
  .landing-bottom-nav button svg{width:20px!important;height:20px!important}
}
@media (max-width: 430px) and (max-height: 680px) {
  .landing-card-shell{padding-top:max(8px,env(safe-area-inset-top))!important}
  .landing-heading{margin-bottom:4px!important}
  .landing-main-card{min-height:292px!important;padding-top:20px!important;padding-bottom:14px!important}
  .landing-couple-title{font-size:30px!important}
  .landing-quick-actions{margin-top:4px!important}
}
/* Extra-compact landing: guarantee CTA clearance above the bottom navigation. */
@media (max-width: 480px) and (max-height: 860px) {
  .landing-card-shell{inset:0 0 max(62px,calc(env(safe-area-inset-bottom) + 56px))!important;padding:max(5px,env(safe-area-inset-top)) 10px 10px!important;align-content:start!important}
  .landing-heading{margin:0 0 3px!important}
  .landing-kicker{margin:0 0 3px!important;font-size:15.5px!important;line-height:1!important}
  .landing-divider{width:116px!important;height:8px!important}
  .landing-main-card{width:min(292px,78vw)!important;min-height:270px!important;padding:15px 18px 12px!important;row-gap:0!important}
  .landing-main-card::before{inset:6px!important}
  .landing-card-ornament{width:38px!important;height:23px!important;margin:0 0 3px!important}
  .landing-couple-title{margin:0 0 3px!important;font-size:clamp(27px,7.8vw,32px)!important;line-height:.98!important}
  .landing-couple-title i{margin:-1px 0 1px!important}
  .landing-heart-line{width:112px!important;height:9px!important;margin:0 0 3px!important}
  .landing-heart-line::before,.landing-heart-line::after{top:4px!important;width:42px!important}
  .landing-heart-line b{font-size:10px!important}
  .landing-save-date{margin:0 0 3px!important;font-size:9.5px!important;letter-spacing:.18em!important}
  .landing-date{font-size:clamp(19px,5.4vw,23px)!important;line-height:.95!important}
  .landing-small-ornament{width:68px!important;height:15px!important;margin:4px 0 0!important}
  .landing-floral-top-left{top:-15px!important;left:-24px!important;width:148px!important}
  .landing-floral-right{top:58px!important;right:-14px!important;width:145px!important}
  .landing-floral-bottom-left{top:184px!important;left:-26px!important;width:114px!important}
  .landing-quick-actions{width:min(210px,62vw)!important;margin:4px 0 3px!important;gap:24px!important}
  .landing-quick-actions .landing-action-icon{width:42px!important;height:42px!important}
  .landing-quick-actions b{font-size:9.5px!important;line-height:1!important}
  .landing-quick-actions small{min-height:7px!important;margin-top:-2px!important;font-size:6.5px!important}
  .landing-enter-button{position:relative!important;z-index:10!important;width:min(292px,82vw)!important;min-height:42px!important;height:42px!important;margin:0 0 7px!important;font-size:11.5px!important}
}
@media (max-width: 480px) and (max-height: 700px) {
  .landing-main-card{min-height:250px!important;padding-top:12px!important;padding-bottom:9px!important}
  .landing-couple-title{font-size:27px!important}
  .landing-quick-actions .landing-action-icon{width:38px!important;height:38px!important}
  .landing-enter-button{height:40px!important;min-height:40px!important}
}
.landing-content-stack{display:contents}
@media (max-width:480px) and (max-height:860px){
  .landing-card-shell{justify-content:flex-start!important}
  .landing-content-stack{position:relative!important;width:100%!important;min-width:0!important;display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:center!important;margin-top:auto!important;margin-bottom:6px!important}
  .landing-enter-button{margin-bottom:0!important}
}
@media (max-width:480px) and (max-height:700px){
  .landing-content-stack{margin-bottom:4px!important}
}
/* Restore the original visual scale while keeping the stack bottom-anchored. */
@media (max-width:480px) and (max-height:860px){
  .landing-main-card{width:min(310px,82vw)!important;min-height:clamp(310px,44vh,380px)!important;padding:28px 22px 22px!important}
  .landing-main-card::before{inset:8px!important}
  .landing-card-ornament{width:52px!important;height:33px!important;margin:0 0 8px!important}
  .landing-couple-title{margin:0 0 8px!important;font-size:clamp(33px,9vw,40px)!important;line-height:1.04!important}
  .landing-couple-title i{margin:1px 0 3px!important}
  .landing-heart-line{width:132px!important;height:14px!important;margin:0 0 7px!important}
  .landing-heart-line::before,.landing-heart-line::after{top:7px!important;width:50px!important}
  .landing-heart-line b{font-size:13px!important}
  .landing-save-date{margin:1px 0 7px!important;font-size:11px!important;letter-spacing:.2em!important}
  .landing-date{font-size:clamp(23px,6.3vw,28px)!important;line-height:1!important}
  .landing-small-ornament{width:90px!important;height:21px!important;margin:10px 0 0!important}
  .landing-floral-top-left{top:-13px!important;left:-23px!important;width:166px!important}
  .landing-floral-right{top:88px!important;right:-12px!important;width:172px!important}
  .landing-floral-bottom-left{top:248px!important;left:-26px!important;width:136px!important}
  .landing-quick-actions{width:min(224px,66vw)!important;margin:7px 0 5px!important;gap:28px!important}
  .landing-quick-actions .landing-action-icon{width:46px!important;height:46px!important}
  .landing-quick-actions b{font-size:10.5px!important;line-height:1.05!important}
  .landing-enter-button{width:min(310px,84vw)!important;min-height:44px!important;height:44px!important;font-size:12px!important}
}
@media (max-width:480px) and (max-height:700px){
  .landing-main-card{min-height:300px!important;padding:22px 20px 17px!important}
  .landing-couple-title{font-size:32px!important}
  .landing-card-ornament{width:47px!important;height:29px!important;margin-bottom:5px!important}
  .landing-floral-right{top:76px!important;width:158px!important}
  .landing-floral-bottom-left{top:218px!important;width:124px!important}
  .landing-quick-actions .landing-action-icon{width:42px!important;height:42px!important}
}
/* Fill the measured top gap without moving the bottom-anchored CTA. */
@media (max-width:480px) and (max-height:860px){
  .landing-main-card{min-height:clamp(410px,calc(100dvh - 264px),590px)!important}
  .landing-floral-right{top:18%!important}
  .landing-floral-bottom-left{top:53%!important}
}
@media (max-width:480px) and (max-height:700px){
  .landing-main-card{min-height:clamp(390px,calc(100dvh - 264px),440px)!important}
}
/* Mobile viewport layout: pin both ends and let the invitation card fill the middle. */
@media (max-width:480px) and (max-height:860px){
  .landing-card-shell{padding-top:max(2px,env(safe-area-inset-top))!important}
  .landing-content-stack{height:100%!important;margin-top:0!important;margin-bottom:0!important}
  .landing-heading{flex:0 0 auto!important}
  .landing-main-card{flex:1 1 auto!important;min-height:0!important;height:auto!important}
  .landing-quick-actions{flex:0 0 auto!important}
  .landing-enter-button{flex:0 0 44px!important;margin-bottom:0!important}
}
@media (max-width:480px) and (max-height:700px){
  .landing-main-card{min-height:0!important;padding-top:18px!important;padding-bottom:13px!important}
  .landing-enter-button{flex-basis:40px!important}
}
/* Keep transparent route artwork on the invitation paper, including Safari compositing. */
.image-road-block .journey-road-figure{background:#f7f0e6!important;isolation:isolate!important}
.image-road-block .journey-road-figure img{background:#f7f0e6!important;mix-blend-mode:normal!important}
.guest-gallery-section{text-align:center}.guest-gallery-note{color:#866961}.guest-gallery-upload{display:grid;gap:10px;width:min(100%,330px);margin:14px auto 22px}.guest-gallery-upload button{border:0;border-radius:999px;padding:12px;background:#a34e58;color:#fff;font-weight:700}.guest-gallery-upload small{min-height:1.2em;color:#8f5556}.guest-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.guest-gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 5px 16px #80554b24}
.wedding-day-timeline-section{content-visibility:auto;contain-intrinsic-size:520px}.wedding-day-timeline{width:min(100%,420px);margin:0 auto;display:grid;gap:12px}.wedding-day-timeline article{display:grid;grid-template-columns:72px 1fr;gap:13px;align-items:center;padding:13px 15px;border:1px solid #c69b5f55;border-radius:16px;background:#fffdf8}.wedding-day-timeline time{font:700 18px/1 Georgia,serif;color:#9a5a47}.wedding-day-timeline h3{margin:0 0 3px;color:#6e3030;font-size:15px}.wedding-day-timeline p{margin:0;color:#7a675d;font-size:12px;line-height:1.4}
body.wedding-memory-mode .sweet-invitation-section,body.wedding-memory-mode [data-landing-qr-rsvp]{display:none!important}
/* Let the two script names increase the document flow instead of being clipped by the next card. */
.family-section{overflow:visible!important;padding-bottom:34px!important}.family-section .name-signature{margin-bottom:12px!important;overflow:visible!important}.family-section+.invitation-section{margin-top:0!important}
@media (max-width:480px) and (max-height:860px){.landing-content-stack{height:calc(100% - 50px)!important;margin-bottom:50px!important}}