/*
 * Studio Pearl & Sage — visual demo
 * A reversible override layer built around the cool white/grey studio photos.
 */

:root {
  --paper: #f1f4f4;
  --paper-soft: #fcfcf9;
  --paper-deep: #dfe5e6;
  --ink: #20292e;
  --muted: #68757b;
  --brown: #684b54;
  --rose: #e6aaa8;
  --rose-deep: #b96972;
  --gold: #c4a15d;
  --studio-pearl: #f5f4f1;
  --studio-white: #fffdf9;
  --studio-cloud: #dfe5e6;
  --studio-silver: #aeb8bc;
  --studio-graphite: #20292e;
  --studio-slate: #68757b;
  --studio-sage: #86a273;
  --studio-sage-deep: #607d54;
  --studio-blush: #e6aaa8;
  --studio-coral: #d97f7f;
  --studio-berry: #774957;
  --studio-champagne: #c4a15d;
  --studio-line: rgba(76, 91, 97, 0.18);
  --studio-shadow: 0 24px 60px rgba(29, 40, 45, 0.12);
}

html,
body {
  background: #edf1ef !important;
  color: var(--studio-graphite) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 255, 255, 0.98), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(230, 170, 168, 0.2), transparent 27rem),
    radial-gradient(circle at 92% 88%, rgba(134, 162, 115, 0.18), transparent 30rem),
    linear-gradient(145deg, #f7f4f2, #e5eceb 52%, #fff8f5);
}

.invite {
  background:
    linear-gradient(rgba(247, 249, 248, 0.96), rgba(247, 249, 248, 0.96)),
    repeating-linear-gradient(90deg, rgba(76, 91, 97, 0.025) 0 1px, transparent 1px 11px) !important;
  border-color: rgba(76, 91, 97, 0.14) !important;
  box-shadow: var(--studio-shadow) !important;
}

/* Landing: cool pearl paper with quiet botanical detail. */
.landing-screen {
  color: var(--studio-graphite) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.98), transparent 34%),
    radial-gradient(circle at 91% 22%, rgba(235, 176, 174, 0.28), transparent 34%),
    radial-gradient(circle at 8% 86%, rgba(151, 180, 130, 0.2), transparent 32%),
    linear-gradient(145deg, #fffaf7 0%, #edf2ef 56%, #f8eceb 100%) !important;
}

.landing-phone-frame {
  background: rgba(247, 249, 248, 0.4) !important;
}

.landing-paper-grain {
  opacity: 0.22 !important;
  mix-blend-mode: multiply;
}

.landing-floral-image {
  filter: saturate(0.92) brightness(1.04) contrast(0.96) !important;
  opacity: 0.74 !important;
}

.landing-floral-right {
  opacity: 0.64 !important;
}

.landing-bg-petals i {
  background: rgba(217, 127, 127, 0.25) !important;
  box-shadow: none !important;
}

/* Keep the motion delicate so it supports, rather than competes with, the studio portrait. */
.petal-layer {
  opacity: 0.15 !important;
  filter: saturate(0.78) !important;
}

.couple-portrait__role,
.couple-portrait__name {
  color: var(--studio-graphite) !important;
}

.couple-portrait__rule,
.couple-portrait__rule::before,
.couple-portrait__rule::after {
  color: var(--studio-sage) !important;
  border-color: rgba(98, 118, 86, 0.48) !important;
}

.couple-portrait__frame {
  background: linear-gradient(155deg, #eef2f2 0%, #d5ddde 100%) !important;
  border-color: rgba(98, 118, 86, 0.42) !important;
  box-shadow: 0 20px 44px rgba(35, 46, 51, 0.11) !important;
}

.couple-portrait__garland,
.couple-portrait__bottom {
  filter: saturate(0.86) brightness(1.03) !important;
  opacity: 0.84 !important;
}

.family-showcase__title {
  color: var(--studio-berry) !important;
  text-shadow: none !important;
}

.family-showcase__ornament,
.family-divider,
.family-card__rule,
.family-card__pin {
  color: var(--studio-sage) !important;
  border-color: rgba(98, 118, 86, 0.42) !important;
}

.family-card {
  background: rgba(252, 252, 249, 0.88) !important;
  border-color: rgba(128, 149, 111, 0.38) !important;
  box-shadow: 0 22px 46px rgba(35, 46, 51, 0.09) !important;
}

.family-card__eyebrow {
  color: var(--studio-sage-deep) !important;
}

.family-card__names {
  color: var(--studio-graphite) !important;
}

.family-card__address {
  color: var(--studio-slate) !important;
}

.family-card__flower,
.family-card__home-image,
.family-divider__ornament-image {
  filter: saturate(0.88) brightness(1.02) !important;
  opacity: 0.84 !important;
}

.landing-kicker,
.landing-save-date,
.landing-date,
.landing-couple-title,
.landing-couple-title i {
  color: var(--studio-berry) !important;
  text-shadow: none !important;
}

.landing-divider span,
.landing-heart-line::before,
.landing-heart-line::after {
  background: var(--studio-silver) !important;
}

.landing-heart-line b {
  color: var(--studio-coral) !important;
}

.landing-main-card {
  border: 1px solid rgba(196, 161, 93, 0.34) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.99), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(230, 170, 168, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(245, 246, 241, 0.97)) !important;
  box-shadow:
    0 24px 54px rgba(30, 42, 47, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.landing-main-card::before {
  border-color: rgba(196, 161, 93, 0.46) !important;
}

.landing-main-card::after {
  background: linear-gradient(90deg, transparent, rgba(217, 127, 127, 0.38), transparent) !important;
}

.landing-gold-ornament {
  filter: sepia(0.2) saturate(1.1) brightness(0.96) !important;
}

.landing-quick-actions > button,
.landing-quick-actions > a {
  color: var(--studio-graphite) !important;
}

.landing-action-icon {
  color: var(--studio-berry) !important;
  border-color: rgba(217, 127, 127, 0.3) !important;
  background: rgba(255, 244, 241, 0.9) !important;
  box-shadow: 0 9px 22px rgba(48, 65, 70, 0.1) !important;
}

.landing-enter-button {
  color: #fff !important;
  border-color: #c56f78 !important;
  background: linear-gradient(100deg, #bd6672, #dd8b86) !important;
  box-shadow: 0 14px 30px rgba(185, 86, 99, 0.26) !important;
}

.landing-enter-button:hover,
.landing-enter-button:focus-visible {
  background: linear-gradient(100deg, #a95463, #ca7775) !important;
  border-color: #a95463 !important;
}

.landing-bottom-nav {
  border-color: rgba(76, 91, 97, 0.14) !important;
  background: rgba(249, 250, 248, 0.92) !important;
  box-shadow: 0 -12px 34px rgba(37, 50, 55, 0.08) !important;
  backdrop-filter: blur(18px);
}

.landing-bottom-nav button {
  color: var(--studio-slate) !important;
}

.landing-bottom-nav button.is-active {
  color: var(--studio-coral) !important;
}

.landing-music-toggle {
  color: #fff !important;
  background: linear-gradient(145deg, rgba(119, 73, 87, 0.94), rgba(185, 105, 114, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}

/* Hero: keep the original gold typography and leave the portrait unobstructed. */
.cover-section {
  background: #dfe5e6 !important;
}

.hero-photo {
  background-color: #dfe5e6 !important;
  background-image: url("https://wedding-r2-upload.anhkhanhlv9.workers.dev/media/wedding-media/2026/08/images.hero/1785588259564-30-Duy-Khanh1863-optimized-e2cfa4b93d904fc2.jpg") !important;
  background-position: center 28% !important;
  background-size: cover !important;
  filter: none !important;
}

.hero-photo.media-error {
  background-color: #dfe5e6 !important;
  background-image: url("https://wedding-r2-upload.anhkhanhlv9.workers.dev/media/wedding-media/2026/08/images.hero/1785588259564-30-Duy-Khanh1863-optimized-e2cfa4b93d904fc2.jpg") !important;
}

.cover-content {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Pearl paper system. */
.paper-section,
.section.paper-section,
.family-section,
.invitation-section,
.interview-section,
.gallery-section,
.guest-gallery-section,
.wedding-events-section,
.ceremony-journey-section,
.countdown-section,
.wedding-day-timeline-section,
.sweet-invitation-section {
  color: var(--studio-graphite) !important;
  background: var(--studio-white) !important;
}

.interview-section,
.guest-gallery-section,
.ceremony-journey-section,
.wedding-day-timeline-section {
  background: var(--studio-pearl) !important;
}

.section-title,
.section-label,
.signature-word,
.split-main-title,
.countdown-hero-title,
.family-calligraphy span,
.name-signature span {
  color: var(--studio-graphite) !important;
  text-shadow: none !important;
}

.section-label,
.reception-card-time,
.reception-card-lunar,
.ceremony-time,
.ceremony-lunar {
  color: var(--studio-sage-deep) !important;
}

.ornament-line,
.story-transition-strip::before,
.story-transition-strip::after {
  border-color: var(--studio-line) !important;
  background-color: var(--studio-silver) !important;
}

/* Cards and portraits. */
.family-list.family-invite-card,
.invitation-message-card,
.reception-card,
.ceremony-card,
.calendar,
.rsvp-card,
.gift-panel,
.guest-gallery-card,
.wedding-day-timeline article {
  color: var(--studio-graphite) !important;
  border-color: var(--studio-line) !important;
  background: rgba(252, 252, 249, 0.94) !important;
  box-shadow: 0 18px 44px rgba(34, 47, 52, 0.09) !important;
}

.family-section .family-content {
  color: var(--studio-graphite) !important;
  background: linear-gradient(145deg, #fcfcf9, #edf1f1) !important;
}

.family-section .family-side h3,
.family-section .family-side strong,
.family-section .family-side span,
.invitation-message-card,
.invitation-message-card p {
  color: var(--studio-graphite) !important;
}

.family-section .family-red-mark {
  background: linear-gradient(160deg, #2b373c, #1c2529) !important;
}

.family-section .family-red-mark b,
.invitation-message-highlight,
.invitation-message-highlight span {
  color: var(--studio-blush) !important;
}

.photo-card {
  border: 1px solid rgba(76, 91, 97, 0.16) !important;
  background: #f8faf9 !important;
  box-shadow: 0 16px 38px rgba(31, 44, 49, 0.12) !important;
}

.photo-card img,
.gallery-grid img,
.gallery-feature img,
.story-photo img,
.story-timeline-media img {
  filter: saturate(0.92) contrast(1.02) !important;
}

/* Event and calendar accents. */
.wedding-events-section .reception-card,
.ceremony-journey-section .ceremony-card {
  background: linear-gradient(160deg, #fcfcf9, #edf1f1) !important;
}

.wedding-events-section .reception-card::before,
.ceremony-journey-section .ceremony-card::before {
  border-color: rgba(128, 149, 111, 0.28) !important;
}

.reception-card-title,
.reception-card-date,
.reception-card-venue,
.ceremony-title,
.ceremony-day,
.ceremony-month,
.ceremony-year,
.ceremony-venue {
  color: var(--studio-graphite) !important;
}

.reception-card-address,
.ceremony-lunar,
.wedding-day-timeline article p {
  color: var(--studio-slate) !important;
}

.route-button,
.reception-route-button,
.side-route-button,
.calendar-action,
.rsvp-submit,
.gift-open-button {
  color: #fff !important;
  border-color: var(--studio-graphite) !important;
  background: var(--studio-graphite) !important;
  box-shadow: 0 12px 26px rgba(32, 41, 46, 0.16) !important;
}

.route-button:hover,
.calendar-action:hover,
.rsvp-submit:hover,
.gift-open-button:hover {
  border-color: var(--studio-sage-deep) !important;
  background: var(--studio-sage-deep) !important;
}

.countdown-grid span {
  border-color: var(--studio-line) !important;
  background: rgba(252, 252, 249, 0.88) !important;
  box-shadow: 0 14px 30px rgba(34, 47, 52, 0.08) !important;
}

.countdown-grid b,
.calendar-grid .is-wedding,
.calendar-grid .is-wedding::before {
  color: var(--studio-sage-deep) !important;
}

.calendar-header,
.calendar-grid {
  color: var(--studio-graphite) !important;
}

/* Forms and overlays. */
.rsvp-field input,
.rsvp-field select,
.rsvp-field textarea,
.wish-modal-form input,
.wish-modal-form textarea {
  color: var(--studio-graphite) !important;
  border-color: rgba(76, 91, 97, 0.2) !important;
  background: #f7f9f8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.rsvp-field input:focus,
.rsvp-field select:focus,
.rsvp-field textarea:focus {
  border-color: var(--studio-sage) !important;
  box-shadow: 0 0 0 3px rgba(128, 149, 111, 0.14) !important;
}

.music-player,
.wish-controls,
.wish-modal-card,
.gift-modal-card,
.landing-modal-card {
  border-color: rgba(76, 91, 97, 0.18) !important;
  background: rgba(249, 250, 248, 0.94) !important;
  color: var(--studio-graphite) !important;
  box-shadow: 0 22px 54px rgba(25, 37, 42, 0.18) !important;
  backdrop-filter: blur(16px);
}

.wish-controls button,
.theme-toggle {
  border-color: rgba(76, 91, 97, 0.18) !important;
  background: rgba(249, 250, 248, 0.9) !important;
  color: var(--studio-graphite) !important;
}

html[data-theme="dark"] body {
  color: #f1f4f3 !important;
  background: #151b1e !important;
}

html[data-theme="dark"] .invite,
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 {
  color: #f1f4f3 !important;
  background: #1d2529 !important;
  border-color: rgba(223, 229, 230, 0.12) !important;
}

@media (max-width: 640px) {
  .hero-photo {
    background-position: 50% 22% !important;
  }

  .landing-floral-image {
    opacity: 0.42 !important;
  }

  .landing-main-card {
    box-shadow: 0 18px 38px rgba(30, 42, 47, 0.12) !important;
  }
}

@media (min-width: 900px) {
  .landing-main-card,
  .landing-quick-actions,
  .landing-enter-button {
    top: -42px !important;
  }

  .hero-photo {
    background-color: #dfe5e6 !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

}

/* Final accent pass requested for the invitation: one clear, youthful pink. */
:root {
  --wedding-accent: #ff6388;
  --wedding-accent-deep: #e84f75;
  --wedding-accent-soft: rgba(255, 99, 136, 0.12);
  --wedding-accent-line: rgba(255, 99, 136, 0.34);
}

/* Invitation copy uses the same pearl canvas as the surrounding page. */
.invitation-section {
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 99, 136, 0.08), transparent 25rem),
    var(--studio-white) !important;
}

.invitation-message-card {
  color: var(--studio-graphite) !important;
  border: 1px solid var(--wedding-accent-line) !important;
  background: rgba(255, 253, 249, 0.86) !important;
  box-shadow: 0 18px 42px rgba(95, 66, 74, 0.09) !important;
}

.invitation-message-card p {
  color: #4c5559 !important;
}

.invitation-message-highlight,
.invitation-message-highlight span {
  color: var(--wedding-accent) !important;
}

/* Section headings unified with #FF6388. */
.family-showcase__title,
.family-calligraphy span,
.couple-portrait__role,
.photo-role-script,
.invitation-section .section-label,
.interview-section .signature-word,
.gallery-section .section-label,
.guest-gallery-section .section-label,
.wedding-events-section .split-main-title,
.wedding-events-section .save-word,
.wedding-events-section .date-word,
.wedding-events-section .reception-card-date,
.countdown-section .countdown-hero-title,
.wedding-day-timeline-section .section-label,
.wedding-day-timeline-section .section-title,
.wedding-day-timeline article time,
.wedding-day-timeline article h3 {
  color: var(--wedding-accent) !important;
  -webkit-text-fill-color: var(--wedding-accent) !important;
  text-shadow: none !important;
}

.couple-portrait__rule,
.couple-portrait__rule::before,
.couple-portrait__rule::after,
.ornament-line {
  color: var(--wedding-accent) !important;
  border-color: var(--wedding-accent-line) !important;
}

/* Blend the route artwork into its section instead of showing a beige rectangle. */
.ceremony-journey-section {
  background: #f7f0e7 !important;
}

.journey-road-block,
.journey-road-figure {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.journey-road-figure img {
  display: block;
  background: transparent !important;
  mix-blend-mode: multiply;
  filter: saturate(0.9) brightness(1.015) !important;
}

.ceremony-journey-section .ceremony-card {
  background: rgba(255, 253, 249, 0.68) !important;
  border-color: var(--wedding-accent-line) !important;
}

/* Filled actions use the accent; navigation/icon buttons carry it as their ink. */
.landing-enter-button,
.landing-qr-rsvp-button,
[data-landing-qr-copy],
.route-button,
.reception-route-button,
.side-route-button,
.calendar-action,
.rsvp-submit,
.guest-gallery-upload button,
.gift-present-button,
.gift-copy-button,
.wish-modal-submit,
.wish-thanks-close,
.music-player button {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
  box-shadow: 0 12px 26px rgba(255, 99, 136, 0.24) !important;
}

.landing-enter-button:hover,
.landing-qr-rsvp-button:hover,
.route-button:hover,
.calendar-action:hover,
.rsvp-submit:hover,
.guest-gallery-upload button:hover,
.wish-modal-submit:hover {
  border-color: var(--wedding-accent-deep) !important;
  background: var(--wedding-accent-deep) !important;
}

.landing-action-icon,
.landing-music-toggle,
.music-toggle,
.wish-open-pill,
.love-shot-button,
.gift-button,
.heart-button,
.wish-panel-toggle,
.gift-modal-close,
.wish-modal-close,
.landing-modal-close {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
}

.landing-bottom-nav button,
.landing-bottom-nav button.is-active,
.skip-btn,
[data-wish-like] {
  color: var(--wedding-accent) !important;
}

.rsvp-field input:focus,
.rsvp-field select:focus,
.rsvp-field textarea:focus,
.wish-modal-form input:focus,
.wish-modal-form textarea:focus {
  border-color: var(--wedding-accent) !important;
  box-shadow: 0 0 0 3px var(--wedding-accent-soft) !important;
}

.countdown-grid b,
.calendar-grid .is-wedding,
.calendar-grid .is-wedding::before {
  color: var(--wedding-accent) !important;
}

/* Higher-specificity legacy controls that still carry the former brown theme. */
.landing-screen .landing-event-route,
.wedding-events-section .route-button.reception-route-button,
.ceremony-journey-section .route-button.side-route-button {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
  box-shadow: 0 12px 26px rgba(255, 99, 136, 0.24) !important;
}

body .wish-controls .gift-button,
body .wish-controls .wish-panel-toggle {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
}

body .invite .wedding-events-section .save-date-script .save-word,
body .invite .wedding-events-section .save-date-script .date-word {
  color: var(--wedding-accent) !important;
  -webkit-text-fill-color: var(--wedding-accent) !important;
  background: none !important;
  text-shadow: none !important;
  animation: none !important;
}

body .gift-button,
body .wish-panel-toggle {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
}

body .invite .invitation-section .invitation-message-card p {
  color: #4c5559 !important;
  -webkit-text-fill-color: #4c5559 !important;
  animation: none !important;
}

body.wish-controls-live .wish-bar .gift-button {
  color: #fff !important;
  border-color: var(--wedding-accent) !important;
  background: var(--wedding-accent) !important;
  animation: none !important;
}

/* Requested follow-up: story timeline headings use the shared accent. */
.interview-section .story-timeline-copy h3 {
  color: var(--wedding-accent) !important;
  -webkit-text-fill-color: var(--wedding-accent) !important;
  text-shadow: none !important;
}

/* The route artwork has a sampled #F7F0E7 canvas; use it edge-to-edge. */
body .invite .ceremony-journey-section,
body .invite .ceremony-journey-section.paper-section,
body .invite .ceremony-journey-section .journey-road-block,
body .invite .ceremony-journey-section .journey-road-figure {
  background: #f7f0e7 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .invite .ceremony-journey-section .journey-road-figure img {
  width: 100% !important;
  height: auto !important;
  background: #f7f0e7 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Restore the original gift card and transparent wish/reaction controls. */
body .invite .gift-present-button {
  color: #6a4a35 !important;
  border: 1px solid rgba(186, 165, 138, 0.26) !important;
  background: linear-gradient(180deg, #fff 0%, #fbf7f1 100%) !important;
  box-shadow: 0 16px 36px rgba(92, 72, 52, 0.11) !important;
}

body .wish-bar,
body.wish-controls-live .wish-bar {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body .wish-open-pill,
body .love-shot-button,
body .heart-button {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: transparent !important;
  background: rgba(52, 47, 45, 0.26) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
}

body.wish-controls-live .wish-bar .gift-button {
  color: rgba(255, 255, 255, 0.95) !important;
  border: 0 !important;
  background: rgba(235, 93, 126, 0.68) !important;
  box-shadow: none !important;
  animation: none !important;
}

body .wish-panel-toggle,
body.wish-controls-live .wish-panel-toggle {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(180deg, #ff96ad 0%, #ff728d 48%, #ff5574 100%) !important;
  box-shadow: 0 13px 26px rgba(212, 81, 113, 0.35) !important;
}

/* Compact the three consecutive narrative sections without crowding content. */
.family-section.family-showcase {
  padding-top: clamp(30px, 4vw, 48px) !important;
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}

.family-showcase__header {
  margin-bottom: clamp(18px, 2.5vw, 30px) !important;
}

.family-showcase__ornament {
  margin-top: 12px !important;
}

.family-showcase__grid {
  margin-bottom: clamp(24px, 3vw, 38px) !important;
}

.invitation-section,
.invitation-section.paper-section {
  padding-top: clamp(12px, 2vw, 20px) !important;
  padding-bottom: clamp(18px, 2.5vw, 28px) !important;
}

.invitation-section .section-label {
  margin-bottom: 10px !important;
}

.invitation-section .invitation-message-card {
  margin-bottom: 4px !important;
}

.interview-section,
.interview-section.paper-section {
  padding-top: clamp(16px, 2.5vw, 28px) !important;
}

.interview-section .signature-word {
  margin-bottom: 12px !important;
}

.theme-toggle,
[data-theme-toggle] {
  display: none !important;
}

@media (max-width: 430px) {
  .family-section.family-showcase {
    padding-top: 24px !important;
    padding-bottom: 22px !important;
  }

  .family-showcase__header {
    margin-bottom: 14px !important;
  }

  .family-showcase__grid {
    margin-bottom: 22px !important;
  }

  .invitation-section,
  .invitation-section.paper-section {
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }

  .interview-section,
  .interview-section.paper-section {
    padding-top: 14px !important;
  }
}

/* Album story v16 — final sizing and overlays measured from the Zenlove reference. */
.album-story-canvas {
  width: min(calc(100% - 24px), 430px);
}

.album-red-script {
  font-family: "Dancing Script", "Sacramento", cursive;
  font-weight: 400;
}

.album-opening {
  column-gap: 6px;
}

.album-outline-hearts {
  gap: 7px;
  font-size: clamp(28px, 8.5vw, 39px);
}

.album-outline-hearts--top {
  padding-bottom: 9px;
}

.album-photo--opening-left {
  width: 100%;
  aspect-ratio: .66;
}

.album-photo--opening-right {
  width: 100%;
  aspect-ratio: .72;
}

.album-outline-hearts--lower {
  justify-content: flex-end;
  padding: 10px 5px 0 0;
  font-size: clamp(22px, 6.5vw, 30px);
}

.album-opening-script {
  margin: 5px 8% 12px 0 !important;
  font-size: clamp(25px, 7.2vw, 33px);
  letter-spacing: 0;
}

.album-photo--opening-wide {
  width: 82%;
  aspect-ratio: 1.48;
}

.album-vow-countdown {
  padding: 13px 0 25px;
}

.album-vow-countdown > p {
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 1.45;
}

.album-countdown {
  gap: 7px;
  margin-top: 13px;
}

.album-countdown > span {
  width: clamp(42px, 12vw, 51px);
  min-height: clamp(43px, 12vw, 52px);
  padding: 5px 2px;
  border-radius: 6px;
}

.album-countdown b {
  font-size: clamp(15px, 4.3vw, 19px);
}

.album-countdown small {
  margin-top: 2px;
  font-size: clamp(8px, 2.3vw, 10px);
}

.album-best-scene {
  position: relative;
  display: block;
  width: 88%;
  margin: 0 auto;
}

.album-photo--best {
  width: 74%;
  aspect-ratio: .79;
}

.album-best-words {
  position: absolute;
  top: 18%;
  left: 65%;
  gap: clamp(12px, 4vw, 18px);
  width: 39%;
  font-size: clamp(24px, 7vw, 31px);
  line-height: .92;
  transform: rotate(-5deg);
  z-index: 2;
}

.album-promise-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(92px, .55fr);
  align-items: start;
  width: 88%;
  margin: 13px auto 30px;
}

.album-promise-row p {
  padding-top: 2px;
  font-size: clamp(10px, 2.85vw, 12px);
  line-height: 1.55;
  text-align: center;
}

.album-sprig {
  width: 138%;
  max-height: 205px;
  margin: -14px 0 0 -28%;
}

.album-photo--landscape {
  width: 82%;
  aspect-ratio: 1.5;
}

.album-english-note {
  padding: 7px 3% 10px;
  font-size: clamp(9px, 2.6vw, 11px);
  line-height: 1.25;
}

.album-photo-pair {
  gap: 5px;
}

.album-photo-pair .album-photo {
  aspect-ratio: .69;
}

.album-choice-quote {
  padding: 8px 0 25px;
  font-size: clamp(9px, 2.55vw, 11px);
  line-height: 1.3;
}

.album-finale {
  grid-template-columns: 46% 27% 27%;
  min-height: clamp(410px, 116vw, 505px);
}

.album-finale-script {
  gap: clamp(8px, 2.8vw, 12px);
  padding: 18px 0 0 3%;
  font-size: clamp(27px, 8vw, 35px);
  line-height: .95;
}

.album-photo--final-main {
  grid-column: 2 / 4;
  width: 100%;
  aspect-ratio: .65;
}

.album-painted-hearts {
  font-size: clamp(23px, 6.5vw, 29px);
}

.album-finale-note {
  padding: 15px 1px 0 4px;
  font-size: clamp(9px, 2.6vw, 11px);
  line-height: 1.45;
}

.album-photo--final-left,
.album-photo--final-right {
  aspect-ratio: .68;
}

.album-photo--final-left {
  width: 96%;
}

.album-photo--final-right {
  width: 96%;
}

.album-story-canvas .album-photo img.fly-target {
  opacity: 0;
  transform: translate3d(var(--fly-x, 0), 24px, 0) scale(.965);
  filter: blur(2px) saturate(.9);
  transition: transform .92s cubic-bezier(.2,.76,.24,1), opacity .78s ease, filter .92s ease;
  transition-delay: var(--fly-delay, 0s);
  will-change: transform, opacity, filter;
}

.album-story-canvas .album-photo img.fly-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0) saturate(1);
}

.album-story-canvas .album-reveal-target {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(1.5px);
  transition: transform .78s cubic-bezier(.2,.76,.24,1), opacity .68s ease, filter .78s ease;
  transition-delay: var(--album-reveal-delay, 0s);
}

.album-story-canvas .album-reveal-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .album-story-canvas .album-photo img.fly-target,
  .album-story-canvas .album-reveal-target {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
  }
}

/* Exact Aquarelle family from Zenlove thiep-cuoi-11-pre for the couple names. */
.family-section .photo-card figcaption,
.family-section .couple-portrait__name,
.family-section .name-signature span {
  font-family: "UTM Aquarelle", "Great Vibes", cursive !important;
  font-size: clamp(32px, 8.7vw, 52px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* Wedding-day timeline rebuilt from the reference composition. */
.wedding-day-timeline-section,
.wedding-day-timeline-section.section {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 0 -50vw !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.wedding-day-timeline {
  --timeline-pink: #ff6388;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(330px, 75vw, 410px);
  width: 100%;
  max-width: none;
  padding: clamp(12px, 3vw, 20px) 0 clamp(22px, 5vw, 34px);
  overflow: hidden;
  color: var(--timeline-pink);
  background: #fff;
}

.wedding-day-timeline-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .76), rgba(255, 255, 255, .76)), var(--timeline-background, none);
  background-position: center 34%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.82);
  transform: scale(1.025);
}

.wedding-day-timeline-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06) 52%, rgba(255,255,255,.32));
}

.wedding-day-timeline-title {
  position: relative;
  z-index: 2;
  align-self: start;
  margin: 0 auto;
  color: var(--timeline-pink);
  font: 500 clamp(58px, 16vw, 86px)/.9 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.055em;
  text-align: center;
  text-transform: uppercase;
}

.wedding-day-timeline-track {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  min-height: 156px;
  margin-top: clamp(70px, 17vw, 104px);
}

.wedding-day-timeline-line {
  position: absolute;
  z-index: 0;
  top: 67px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--timeline-pink);
  transform-origin: left center;
}

.wedding-day-timeline-events {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--timeline-columns, 4), minmax(0, 1fr));
  width: 100%;
}

.wedding-day-timeline-event {
  display: grid;
  grid-template-rows: 49px 36px auto auto;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.wedding-day-timeline-icon {
  display: block;
  width: clamp(43px, 12vw, 68px);
  height: 49px;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(.86);
}

.wedding-day-timeline-marker {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  margin-top: 10px;
  background: var(--timeline-pink);
  transform: rotate(45deg);
}

.wedding-day-timeline-marker::before {
  content: "";
  position: absolute;
  left: -8.5px;
  top: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--timeline-pink);
}

.wedding-day-timeline-marker::after {
  content: "";
  position: absolute;
  left: 0;
  top: -8.5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--timeline-pink);
}

.wedding-day-timeline-time,
.wedding-day-timeline-label {
  margin: 0;
  color: var(--timeline-pink);
  font-family: "Quicksand", "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

.wedding-day-timeline-time {
  font-size: clamp(15px, 4.2vw, 21px);
  font-variant-numeric: lining-nums tabular-nums;
}

.wedding-day-timeline-label {
  max-width: 9ch;
  margin-top: 4px;
  font-size: clamp(13px, 3.55vw, 18px);
}

.wedding-day-timeline-note {
  position: relative;
  z-index: 2;
  width: min(92%, 620px);
  margin: 18px auto 0;
  color: var(--timeline-pink);
  font: 500 clamp(12px, 3vw, 16px)/1.5 "Quicksand", sans-serif;
  text-align: center;
}

@media (max-width: 370px) {
  .wedding-day-timeline-label {
    font-size: 12px;
  }
}

/* Overlapping bride/groom portrait collage with the extracted bouquet. */
.editorial-couple-collage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(20px, 6vw, 72px) !important;
  width: min(100%, 820px) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 32px) clamp(8px, 2.5vw, 24px) clamp(32px, 5vw, 58px) !important;
  overflow: visible !important;
  isolation: isolate;
}

.editorial-couple-collage .couple-portrait {
  position: relative;
  z-index: 2;
  width: 100%;
}

.editorial-couple-collage .couple-portrait--groom {
  margin-right: 6%;
}

.editorial-couple-collage .couple-portrait--bride {
  z-index: 3;
  margin-top: clamp(54px, 9vw, 102px);
  margin-left: -6%;
}

.editorial-couple-collage .couple-portrait__frame {
  position: relative;
  z-index: 2;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  padding: clamp(5px, 1vw, 9px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(84, 72, 66, 0.12) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(44, 36, 32, 0.15) !important;
}

.editorial-couple-collage .couple-portrait__frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.editorial-couple-collage .couple-portrait__identity {
  position: relative;
  z-index: 7;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  color: #172035;
}

.editorial-couple-collage .couple-portrait--groom .couple-portrait__identity {
  margin: 8px 8% 0 auto;
  text-align: center;
  transform: rotate(-2deg);
}

.editorial-couple-collage .couple-portrait--bride .couple-portrait__identity {
  margin: 0 auto 9px 14%;
  text-align: center;
  transform: rotate(2deg);
}

.editorial-couple-collage .couple-portrait__role {
  display: block !important;
  margin: 0 !important;
  padding: 0.08em 0.16em !important;
  color: #ff6388 !important;
  -webkit-text-fill-color: #ff6388 !important;
  background: none !important;
  filter: none !important;
  font: 400 clamp(30px, 5vw, 50px)/0.82 "Great Vibes", "Dancing Script", cursive !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  animation: none !important;
}

.editorial-couple-collage .couple-portrait__name {
  display: block !important;
  margin: 0 !important;
  color: #1e1720 !important;
  font: 600 clamp(15px, 2.2vw, 22px)/1.1 "Cormorant Garamond", serif !important;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.editorial-couple-bouquet {
  position: absolute;
  top: clamp(70px, 12vw, 128px);
  left: 50%;
  z-index: 6;
  display: block;
  width: clamp(112px, 25%, 218px);
  height: auto;
  max-width: none !important;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 18%;
  filter: drop-shadow(0 12px 15px rgba(34, 43, 31, 0.2));
  animation: editorialBouquetFloat 5.4s ease-in-out infinite;
}

.family-showcase.is-visible .editorial-couple-collage .couple-portrait--groom {
  animation: editorialPortraitLeft 0.85s cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.family-showcase.is-visible .editorial-couple-collage .couple-portrait--bride {
  animation: editorialPortraitRight 0.9s 0.12s cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

@keyframes editorialPortraitLeft {
  from { opacity: 0; transform: translate3d(-26px, 20px, 0) rotate(-1.5deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes editorialPortraitRight {
  from { opacity: 0; transform: translate3d(28px, 24px, 0) rotate(1.5deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes editorialBouquetFloat {
  0%, 100% { transform: translateX(-50%) rotate(-0.8deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(0.8deg) translateY(-5px); }
}

@media (max-width: 430px) {
  .editorial-couple-collage {
    gap: 18px !important;
    padding: 14px 1px 34px !important;
  }

  .editorial-couple-collage .couple-portrait--groom {
    margin-right: 5%;
  }

  .editorial-couple-collage .couple-portrait--bride {
    margin-top: 48px;
    margin-left: -5%;
  }

  .editorial-couple-collage .couple-portrait__frame {
    padding: 5px !important;
  }

  .editorial-couple-collage .couple-portrait__role {
    font-size: clamp(27px, 9vw, 38px) !important;
  }

  .editorial-couple-collage .couple-portrait__name {
    font-size: clamp(12px, 3.7vw, 15px) !important;
  }

  .editorial-couple-collage .couple-portrait--groom .couple-portrait__identity {
    margin-right: 2%;
  }

  .editorial-couple-collage .couple-portrait--bride .couple-portrait__identity {
    margin-left: 12%;
  }

  .editorial-couple-bouquet {
    top: 62px;
    width: clamp(104px, 29vw, 132px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-couple-bouquet,
  .family-showcase.is-visible .editorial-couple-collage .couple-portrait {
    animation: none !important;
  }
}

/* Editorial family introduction inspired by the approved reference layout. */
.cover-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: clamp(96px, 16vw, 180px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0), rgba(255, 253, 249, 0.72) 62%, #fffdf9 100%);
}

.family-section.family-showcase {
  margin-top: -1px !important;
  padding: 0 14px 30px !important;
  background: #fffdf9 !important;
}

.wedding-editorial-header {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 22px 16px 16px;
  color: #171312;
  text-align: center;
}

.wedding-editorial-couple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(10px, 3vw, 26px);
  width: min(100%, 560px);
  margin: 0 auto;
}

.wedding-editorial-person {
  display: grid;
  gap: 5px;
  text-align: center;
}

.wedding-editorial-person span {
  color: #322521;
  font: 500 clamp(12px, 1.5vw, 16px)/1 "Cormorant Garamond", serif;
  letter-spacing: 0.04em;
}

.wedding-editorial-person strong {
  color: #090807;
  font: 600 clamp(27px, 4vw, 43px)/1.05 "Cormorant Garamond", serif;
  white-space: nowrap;
}

.wedding-editorial-couple > i {
  align-self: end;
  padding-bottom: 4px;
  color: #b99d79;
  font-size: clamp(14px, 2vw, 20px);
  font-style: normal;
}

.wedding-editorial-script {
  margin: clamp(24px, 4vw, 40px) 0 2px;
  color: #bea486;
  font: 400 clamp(64px, 10vw, 104px)/0.88 "The Nautigal", "Great Vibes", cursive;
  letter-spacing: 0.025em;
}

.wedding-editorial-subtitle {
  margin: 0;
  color: #3e2524;
  font: 600 clamp(16px, 2.1vw, 24px)/1.2 "Cormorant Garamond", serif;
  letter-spacing: 0.045em;
}

.wedding-editorial-words {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 620px);
  margin: clamp(24px, 4vw, 38px) auto 0;
  color: #3f3430;
  font: 500 clamp(12px, 1.5vw, 16px)/1 Montserrat, sans-serif;
  letter-spacing: 0.08em;
}

.wedding-editorial-photo {
  width: min(100%, 860px);
  margin: 0 auto;
  overflow: hidden;
  background: #edf0ef;
}

.wedding-editorial-photo img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}

.wedding-editorial-photo figcaption {
  margin: 0;
  padding: 7px 14px 6px;
  color: #fff;
  background: #111;
  font: 500 clamp(10px, 1.3vw, 13px)/1.15 Montserrat, sans-serif;
  text-align: center;
}

.wedding-editorial-invitation {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px) 18px clamp(20px, 3vw, 30px);
  color: #2f2522;
  text-align: center;
  font: 500 clamp(16px, 2vw, 21px)/1.48 "Cormorant Garamond", serif;
}

.wedding-editorial-invitation p {
  margin: 0;
}

.wedding-editorial-invitation p + p {
  margin-top: 13px;
}

.wedding-editorial-invitation span {
  color: var(--wedding-accent);
}

.family-showcase__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 5vw, 70px) !important;
  align-items: start !important;
  width: min(100%, 820px);
  margin: 0 auto clamp(24px, 4vw, 40px) !important;
}

.family-divider {
  display: none !important;
}

.family-card {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.family-card__flower,
.family-card__home-image,
.family-card__rule {
  display: none !important;
}

.family-card__eyebrow {
  margin: 0 0 4px !important;
  color: #13100f !important;
  font: 700 clamp(21px, 3vw, 30px)/1 "Cormorant Garamond", serif !important;
  letter-spacing: 0 !important;
}

.family-card__names {
  color: #2e2421 !important;
  font: 500 clamp(14px, 1.8vw, 18px)/1.35 "Cormorant Garamond", serif !important;
}

.family-card__address {
  display: block !important;
  margin: 8px 0 0 !important;
  color: #5c4a43 !important;
  font: 500 clamp(12px, 1.5vw, 15px)/1.3 "Cormorant Garamond", serif !important;
}

.family-card__pin {
  display: none !important;
}

.couple-showcase {
  width: min(100%, 820px) !important;
  margin: 0 auto !important;
  gap: clamp(14px, 4vw, 34px) !important;
}

.couple-portrait__role,
.couple-portrait__rule,
.couple-portrait__garland,
.couple-portrait__name,
.couple-portrait__bottom {
  display: none !important;
}

.couple-portrait__frame {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #edf0ef !important;
  box-shadow: none !important;
}

.interview-section,
.interview-section.paper-section {
  padding-top: 22px !important;
}

@media (max-width: 430px) {
  .cover-section::after {
    height: 112px;
  }

  .family-section.family-showcase {
    padding: 0 12px 22px !important;
  }

  .wedding-editorial-header {
    padding: 16px 4px 13px;
  }

  .wedding-editorial-person strong {
    font-size: clamp(24px, 7.2vw, 31px);
  }

  .wedding-editorial-script {
    margin-top: 25px;
    font-size: clamp(62px, 20vw, 82px);
  }

  .wedding-editorial-subtitle {
    font-size: clamp(15px, 4.6vw, 19px);
  }

  .wedding-editorial-words {
    margin-top: 24px;
    font-size: 11px;
  }

  .wedding-editorial-photo {
    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .wedding-editorial-photo img {
    aspect-ratio: 4 / 3;
  }

  .wedding-editorial-photo figcaption {
    padding: 6px 8px 5px;
    font-size: 9px;
  }

  .wedding-editorial-invitation {
    padding: 24px 8px 20px;
    font-size: clamp(14px, 4.2vw, 17px);
    line-height: 1.42;
  }

  .family-showcase__grid {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .family-card {
    padding-inline: 0 !important;
  }

  .family-card__eyebrow {
    font-size: clamp(19px, 6vw, 24px) !important;
  }

  .family-card__names {
    font-size: clamp(12px, 3.7vw, 15px) !important;
  }

  .family-card__address {
    font-size: clamp(11px, 3.2vw, 13px) !important;
  }
}

/* Keep collage geometry authoritative after the broader family layout rules. */
.family-section .editorial-couple-collage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 6vw, 72px) !important;
  width: min(100%, 820px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

@media (max-width: 430px) {
  .family-section .editorial-couple-collage {
    gap: 18px !important;
    padding: 14px 1px 34px !important;
  }
}

/* 2026-08-07 editorial schedule, arch calendar and album rebuild. */
.family-section .editorial-couple-collage {
  width: min(100%, 720px) !important;
  padding-inline: clamp(8px, 3vw, 22px) !important;
  justify-items: center !important;
}

.family-section .editorial-couple-collage .couple-portrait {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.family-section .editorial-couple-collage .couple-portrait__identity,
.family-section .editorial-couple-collage .couple-portrait--groom .couple-portrait__identity,
.family-section .editorial-couple-collage .couple-portrait--bride .couple-portrait__identity {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
  transform: none !important;
}

.family-section .editorial-couple-collage .couple-portrait__role {
  font-family: "The Nautigal", "Dancing Script", cursive !important;
  font-size: clamp(30px, 5vw, 48px) !important;
  font-weight: 400 !important;
  line-height: .76 !important;
}

.family-section .editorial-couple-collage .couple-portrait__name {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(15px, 2vw, 21px) !important;
  letter-spacing: .06em !important;
}

.landing-quick-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.landing-quick-actions > button {
  min-width: 0 !important;
  padding-inline: 5px !important;
}

.landing-quick-actions > button b {
  font-size: clamp(9px, 2.45vw, 12px) !important;
  line-height: 1.2 !important;
}

.landing-upload-card {
  width: min(92vw, 520px) !important;
  max-height: min(84vh, 680px) !important;
  overflow: auto !important;
  padding: 30px 22px 24px !important;
  background: #fffdfb !important;
}

.landing-upload-card > h2 {
  margin: 0 0 8px !important;
  color: #ff6388 !important;
  font: 600 clamp(27px, 7vw, 38px)/1.05 "Cormorant Garamond", serif !important;
}

.landing-upload-card .guest-gallery-note {
  margin: 0 auto 15px !important;
  color: #5d5657 !important;
  font-size: 13px !important;
}

.landing-upload-card .guest-gallery-upload {
  display: grid !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

.landing-upload-card .guest-gallery-upload[hidden] {
  display: none !important;
}

.guest-upload-drop {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 144px;
  padding: 20px;
  border: 1px dashed rgba(255, 99, 136, .65);
  border-radius: 24px;
  background: #fff7f9;
  color: #6a5058;
  cursor: pointer;
}

.guest-upload-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.guest-upload-drop > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ff6388;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.guest-upload-drop strong {
  font: 600 17px/1.2 "Cormorant Garamond", serif;
}

.guest-upload-drop small { color: #94888b; }

.landing-upload-card .guest-gallery-upload > button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #ff6388;
  color: #fff;
  font-weight: 700;
}

.landing-upload-card .guest-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.landing-upload-card .guest-gallery-grid img {
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  border-radius: 11px !important;
}

.wedding-logistics-section {
  position: relative;
  display: grid !important;
  gap: clamp(30px, 7vw, 58px) !important;
  padding: clamp(30px, 6vw, 60px) clamp(16px, 5vw, 48px) !important;
  background: #fffdfb !important;
  overflow: hidden !important;
}

.ceremony-calendar-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 34px);
  align-items: stretch;
}

.ceremony-card--editorial {
  display: grid !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 14px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 9px 25px rgba(64, 45, 47, .07) !important;
  color: #8f1828 !important;
  text-align: center !important;
}

.ceremony-card--editorial .ceremony-card-photo {
  width: calc(100% + 28px);
  height: clamp(66px, 12vw, 108px);
  margin: 0 -14px 6px;
  overflow: hidden;
}

.ceremony-card--editorial .ceremony-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.ceremony-card--editorial .ceremony-script {
  margin: 0 !important;
  color: #b21f31 !important;
  font: 400 clamp(28px, 4.3vw, 42px)/.72 "The Nautigal", cursive !important;
}

.ceremony-card--editorial .ceremony-title {
  margin: 2px 0 8px !important;
  color: #9e1e2d !important;
  font: 600 clamp(18px, 2.8vw, 26px)/1 "Cormorant Garamond", serif !important;
  letter-spacing: .025em !important;
}

.ceremony-card--editorial .ceremony-weekday {
  margin: 0 !important;
  color: #9e1e2d !important;
  font: 600 clamp(17px, 2.6vw, 23px)/1.1 "Cormorant Garamond", serif !important;
}

.ceremony-card--editorial .ceremony-date-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 3px 0 0 !important;
}

.ceremony-card--editorial .ceremony-month,
.ceremony-card--editorial .ceremony-year {
  display: grid !important;
  place-items: center !important;
  min-height: 34px !important;
  border-block: 1px solid #3b3032 !important;
  color: #9e1e2d !important;
  font: 500 clamp(14px, 2vw, 19px)/1 "Cormorant Garamond", serif !important;
  white-space: nowrap;
}

.ceremony-card--editorial .ceremony-day {
  color: #981624 !important;
  font: 700 clamp(42px, 6vw, 60px)/.9 "Cormorant Garamond", serif !important;
}

.ceremony-card--editorial .ceremony-clock {
  margin: 2px 0 !important;
  color: #8f1828 !important;
  font: 600 clamp(15px, 2vw, 18px)/1.2 "Cormorant Garamond", serif !important;
}

.ceremony-card--editorial .ceremony-lunar,
.ceremony-card--editorial .ceremony-venue {
  margin: 0 !important;
  color: #373235 !important;
  font: 500 clamp(11px, 1.6vw, 14px)/1.35 "Quicksand", sans-serif !important;
}

.wedding-logistics-section .journey-road-block {
  margin: 0 auto !important;
  width: min(100%, 720px) !important;
}

.wedding-logistics-section .journey-road-figure {
  overflow: hidden !important;
  border-radius: 20px !important;
  background: var(--studio-paper) !important;
}

.wedding-logistics-section .journey-road-figure img {
  display: block;
  width: 100% !important;
  height: auto !important;
  mix-blend-mode: multiply;
}

.arch-calendar-card {
  position: relative;
  width: min(100%, 420px);
  margin: 16px auto 0;
  padding: 62px 20px 26px;
  background: #fff;
  color: #271f22;
  text-align: center;
}

.arch-calendar-title {
  position: absolute;
  z-index: 5;
  top: 2px;
  left: 50%;
  width: calc(100% - 20px);
  height: 88px;
  transform: translateX(-50%);
  overflow: visible;
}

.arch-calendar-title path { fill: none; }
.arch-calendar-title text {
  fill: #241d20;
  font: 500 17px/1 "Cormorant Garamond", serif;
  letter-spacing: .12em;
}

.arch-calendar-photo {
  position: relative;
  height: clamp(455px, 120vw, 560px);
  overflow: hidden;
  border-radius: 210px 210px 0 0;
  background: #ece8e5;
}

.arch-calendar-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.calendar-orb {
  position: absolute;
  z-index: 3;
  left: -5%;
  bottom: 9%;
  display: grid;
  place-items: center;
  width: 90%;
  aspect-ratio: 1;
  padding: 15% 10% 12%;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 0 35px rgba(255,255,255,.26);
  backdrop-filter: blur(2px);
}

.calendar-orb .calendar {
  width: 100%;
  color: #9f1c2d !important;
}

.calendar-orb .calendar-header { display: none !important; }
.calendar-orb .calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: clamp(5px, 1.6vw, 9px) !important;
}

.calendar-orb .calendar-grid > span {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #9e1e2d !important;
  font: 600 clamp(9px, 2.6vw, 13px)/1 "Cormorant Garamond", serif !important;
}

.calendar-orb .calendar-grid > span.is-muted b { opacity: 0 !important; }
.calendar-orb .calendar-grid > span.is-wedding b {
  position: relative;
  z-index: 2;
  color: #fff !important;
}

.calendar-orb .calendar-wedding-marker {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 35px !important;
  height: 35px !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .92 !important;
}

.arch-calendar-script {
  margin: 12px 0 -4px !important;
  color: #8f1828 !important;
  font: 400 30px/.9 "The Nautigal", cursive !important;
}

.arch-calendar-quote {
  margin: 0 !important;
  font: 500 15px/1.35 "Cormorant Garamond", serif !important;
}

.arch-calendar-card .calendar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 16px !important;
}

.arch-calendar-card .calendar-action {
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff6388 !important;
  color: #fff !important;
  font-size: 10px !important;
  text-decoration: none !important;
}

.editorial-love-album {
  position: relative;
  padding: clamp(34px, 7vw, 62px) clamp(16px, 5vw, 44px) clamp(70px, 12vw, 110px) !important;
  background: #fff !important;
  overflow: hidden !important;
}

.editorial-album-header {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
  text-align: center;
}

.editorial-heart-row {
  display: block;
  color: #d71f2e;
  font: 300 clamp(34px, 7vw, 54px)/1 "Cormorant Garamond", serif;
  letter-spacing: .13em;
}

.editorial-album-header p {
  margin: -4px 0 0 !important;
  color: #d71f2e !important;
  font: 400 clamp(28px, 5vw, 42px)/.9 "The Nautigal", cursive !important;
}

.editorial-album-header h2 {
  margin: 5px 0 0 !important;
  color: #1e1b1c !important;
  font: 600 clamp(28px, 5vw, 48px)/1 "Cormorant Garamond", serif !important;
  letter-spacing: .08em !important;
}

.editorial-album-grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: dense;
  gap: clamp(7px, 2vw, 14px) !important;
}

.editorial-album-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #f2f0ee;
}

.editorial-album-frame img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.editorial-album-frame--1 { grid-row: span 2; min-height: clamp(300px, 65vw, 520px); }
.editorial-album-frame--2,
.editorial-album-frame--3 { min-height: clamp(145px, 31vw, 250px); }
.editorial-album-frame--4,
.editorial-album-frame--7 { grid-column: 1 / -1; min-height: clamp(250px, 59vw, 460px); }
.editorial-album-frame--5,
.editorial-album-frame--6 { min-height: clamp(250px, 54vw, 420px); }
.editorial-album-frame--8 { grid-column: 1 / -1; min-height: clamp(300px, 68vw, 540px); }

.editorial-album-script {
  position: relative;
  z-index: 3;
  margin: 22px 0 4px !important;
  color: #d71f2e !important;
  font: 400 clamp(34px, 7vw, 54px)/.85 "The Nautigal", cursive !important;
  text-align: right !important;
}

.editorial-album-note {
  position: relative;
  z-index: 3;
  width: min(72%, 430px);
  margin: 0 0 0 auto !important;
  color: #312b2d !important;
  font: 500 clamp(12px, 2vw, 15px)/1.65 "Quicksand", sans-serif !important;
  text-align: right !important;
}

.editorial-baby-sprig {
  position: absolute;
  z-index: 2;
  left: -4%;
  bottom: -1%;
  width: clamp(120px, 30vw, 230px);
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
}

.lightbox-album-section {
  padding: 0 0 clamp(28px, 6vw, 52px) !important;
  background: #5d744f !important;
  overflow: hidden !important;
}

.lightbox-album-section[hidden] { display: none !important; }

.lightbox-album-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: clamp(26px, 6vw, 52px) clamp(22px, 5vw, 46px) clamp(20px, 4vw, 34px);
  background: #fffaf2;
  color: #36513b;
}

.lightbox-album-heading span,
.lightbox-album-heading strong {
  font: 600 clamp(38px, 8vw, 70px)/.9 "Cormorant Garamond", serif;
  letter-spacing: .04em;
}

.lightbox-album-heading strong { text-align: right; }
.lightbox-album-heading em {
  align-self: end;
  color: #252125;
  font: 400 clamp(34px, 6vw, 50px)/1 "The Nautigal", cursive;
}

.lightbox-album-stage {
  position: relative;
  margin: 18px clamp(14px, 4vw, 28px) 12px;
  min-height: clamp(430px, 110vw, 720px);
  overflow: hidden;
  border-radius: 28px;
  background: #f4f4f3;
}

.lightbox-album-main {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.lightbox-album-main img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
}

.lightbox-album-main > span {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #26342a;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.lightbox-album-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #314534;
  font-size: 36px;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.lightbox-album-arrow.prev { left: 14px; }
.lightbox-album-arrow.next { right: 14px; }

.lightbox-album-thumbs {
  display: flex;
  gap: 9px;
  padding: 0 clamp(14px, 4vw, 28px) 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.lightbox-album-thumb {
  flex: 0 0 clamp(72px, 19vw, 112px);
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 11px;
  background: #e9ece8;
  scroll-snap-align: start;
}

.lightbox-album-thumb.is-active { border-color: #fff; }
.lightbox-album-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 560px) {
  .family-section .editorial-couple-collage {
    width: calc(100% - 10px) !important;
    gap: 14px !important;
    padding-inline: 4px !important;
  }

  .family-section .editorial-couple-collage .couple-portrait__role {
    font-size: clamp(27px, 8vw, 35px) !important;
  }

  .ceremony-calendar-stack {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ceremony-card--editorial {
    width: min(100%, 390px);
    margin-inline: auto;
  }

  .arch-calendar-card { padding-inline: 10px; }
  .arch-calendar-photo { height: clamp(440px, 126vw, 520px); }
  .calendar-orb { bottom: 10%; width: 94%; }
  .lightbox-album-stage { min-height: clamp(390px, 116vw, 590px); }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-album-frame img { animation: none !important; }
}

/* 2026-08-07 hotfix: restore upload, ceremony order and reference calendar proportions. */
.landing-upload-card .guest-gallery-upload {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.landing-upload-card .guest-upload-drop {
  position: relative !important;
  cursor: pointer !important;
}

.landing-upload-card .guest-upload-drop input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.wedding-logistics-section {
  gap: clamp(22px, 5vw, 38px) !important;
  padding-bottom: clamp(22px, 5vw, 38px) !important;
}

.ceremony-calendar-stack {
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.ceremony-card--editorial {
  width: min(100%, 390px) !important;
  margin-inline: auto !important;
  padding: 28px 18px 24px !important;
}

.ceremony-card--editorial .ceremony-title {
  margin-bottom: 10px !important;
}

.ceremony-calendar-stack .journey-road-block {
  order: initial !important;
  width: min(100%, 430px) !important;
  margin: 0 auto !important;
}

.ceremony-calendar-stack .journey-road-figure {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ceremony-calendar-stack .journey-route-actions {
  margin-top: 10px !important;
}

.arch-calendar-card {
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
  padding: 44px 10px 18px !important;
}

.arch-calendar-title {
  top: 0 !important;
  width: calc(100% - 10px) !important;
  height: 58px !important;
}

.arch-calendar-title text {
  font-size: 16px !important;
  letter-spacing: .1em !important;
}

.arch-calendar-photo {
  height: clamp(470px, 125vw, 545px) !important;
  border-radius: 190px 190px 0 0 !important;
}

.arch-calendar-photo > img {
  object-position: center center !important;
}

.calendar-orb {
  left: -2% !important;
  bottom: 8% !important;
  width: 74% !important;
  aspect-ratio: 1 !important;
  padding: 12% 9% 10% !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.52) !important;
  box-shadow: none !important;
  backdrop-filter: blur(1.5px) !important;
}

.calendar-orb .calendar {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.calendar-orb .calendar-grid {
  width: 100% !important;
  height: auto !important;
  gap: 4px 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.calendar-orb .calendar-grid > span {
  width: auto !important;
  min-height: 0 !important;
  font-size: clamp(9px, 2.3vw, 11px) !important;
}

.calendar-orb .calendar-wedding-marker {
  width: 27px !important;
  height: 27px !important;
}

.arch-calendar-script {
  margin: 8px 0 -2px !important;
  color: #9e1e2d !important;
  font: 400 clamp(30px, 9vw, 40px)/.82 "The Nautigal", cursive !important;
}

.arch-calendar-quote {
  margin: 0 !important;
  color: #9e1e2d !important;
  font: 400 clamp(19px, 5.7vw, 27px)/.9 "The Nautigal", cursive !important;
}

.editorial-love-album {
  margin-top: 0 !important;
  padding-top: clamp(26px, 5vw, 42px) !important;
}

.editorial-album-grid:empty {
  display: none !important;
}

.editorial-album-frame {
  opacity: 1 !important;
  visibility: visible !important;
}

.editorial-album-frame img {
  opacity: 1 !important;
  visibility: visible !important;
}

.lightbox-album-section {
  display: block !important;
  min-height: 460px !important;
}

@media (min-width: 860px) {
  .ceremony-calendar-stack {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr) minmax(0, 1fr) !important;
    align-items: center !important;
  }
}

/* Album story v3 — rebuilt from the supplied six-screen editorial reference. */
.album-story-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(34px, 8vw, 70px) 0 clamp(54px, 12vw, 100px) !important;
  overflow: hidden;
  color: #161616;
  background: #fff !important;
}

.album-story-canvas {
  width: min(calc(100% - 34px), 720px);
  margin: 0 auto;
  font-family: "Quicksand", "Nunito Sans", sans-serif;
}

.album-story-canvas figure,
.album-story-canvas p {
  margin: 0;
}

.album-photo {
  overflow: hidden;
  background: #f4f3f1;
}

.album-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.album-red-script {
  color: #d1262f;
  font-family: "The Nautigal", "Dancing Script", cursive;
  font-weight: 400;
}

.album-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: clamp(14px, 4vw, 30px);
  align-items: start;
}

.album-outline-hearts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.6vw, 21px);
  color: #e12632;
  font-family: Arial, sans-serif;
  font-size: clamp(39px, 11vw, 70px);
  font-weight: 200;
  line-height: .75;
}

.album-outline-hearts--top {
  grid-column: 1;
  grid-row: 1;
  padding: 0 0 clamp(15px, 4vw, 30px);
}

.album-photo--opening-left {
  grid-column: 1;
  grid-row: 2 / span 2;
  width: 92%;
  justify-self: end;
  aspect-ratio: .72;
}

.album-photo--opening-right {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 96%;
  justify-self: start;
  aspect-ratio: .77;
}

.album-outline-hearts--lower {
  grid-column: 2;
  grid-row: 3;
  padding: clamp(22px, 5vw, 40px) 0 5px;
  font-size: clamp(31px, 9vw, 57px);
}

.album-opening-script {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: end;
  margin: clamp(8px, 2vw, 18px) 2% clamp(16px, 4vw, 32px) 0 !important;
  font-size: clamp(34px, 9vw, 62px);
  line-height: .9;
  letter-spacing: .025em;
  transform: rotate(-2deg);
}

.album-photo--opening-wide {
  grid-column: 1 / -1;
  grid-row: 5;
  width: 88%;
  justify-self: center;
  aspect-ratio: 1.3;
}

.album-vow-countdown {
  padding: clamp(34px, 8vw, 64px) 0 clamp(20px, 5vw, 40px);
  text-align: center;
}

.album-vow-countdown > p {
  font-size: clamp(13px, 3.1vw, 18px);
  line-height: 1.75;
}

.album-countdown {
  display: flex;
  justify-content: center;
  gap: clamp(9px, 3vw, 22px);
  margin-top: clamp(18px, 4vw, 30px);
}

.album-countdown > span {
  display: grid;
  place-items: center;
  width: clamp(52px, 14vw, 82px);
  min-height: clamp(55px, 15vw, 88px);
  padding: 7px 3px;
  border-radius: 9px;
  color: #fff;
  background: #b52228;
}

.album-countdown b {
  font-size: clamp(19px, 5vw, 28px);
  line-height: 1;
}

.album-countdown small {
  margin-top: 4px;
  font-size: clamp(10px, 2.7vw, 14px);
  font-weight: 700;
}

.album-best-scene {
  display: grid;
  grid-template-columns: minmax(0, 4.1fr) minmax(86px, 1.35fr);
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
  width: 92%;
  margin: 0 auto;
}

.album-photo--best {
  aspect-ratio: 1.32;
}

.album-best-words {
  display: flex;
  flex-direction: column;
  gap: clamp(17px, 5vw, 40px);
  font-size: clamp(32px, 8vw, 56px);
  line-height: .75;
  transform: rotate(-3deg);
}

.album-promise-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, .8fr);
  align-items: center;
  width: 88%;
  margin: clamp(30px, 8vw, 62px) auto clamp(24px, 6vw, 46px);
}

.album-promise-row p {
  font-size: clamp(12px, 3vw, 17px);
  line-height: 1.75;
}

.album-sprig {
  width: 122%;
  max-height: 300px;
  margin-left: -17%;
  object-fit: contain;
  transform: rotate(2deg);
}

.album-photo--landscape {
  width: 92%;
  margin: 0 auto !important;
  aspect-ratio: 1.56;
}

.album-english-note {
  padding: clamp(18px, 4vw, 30px) 4%;
  text-align: center;
  font-size: clamp(11px, 2.8vw, 16px);
  line-height: 1.35;
}

.album-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 1.5vw, 12px);
}

.album-photo-pair .album-photo {
  aspect-ratio: .74;
}

.album-choice-quote {
  padding: clamp(15px, 4vw, 30px) 1% clamp(34px, 9vw, 70px);
  text-align: center;
  font-size: clamp(11px, 2.75vw, 16px);
  line-height: 1.38;
}

.album-choice-quote span {
  color: #d1262f;
}

.album-finale {
  display: grid;
  grid-template-columns: 31% 39% 30%;
  grid-template-rows: auto auto auto;
  align-items: start;
  min-height: clamp(500px, 130vw, 910px);
}

.album-finale-script {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 4vw, 36px);
  padding: clamp(9px, 3vw, 24px) 0 0 2%;
  font-size: clamp(33px, 9vw, 62px);
  line-height: .82;
  transform: rotate(-4deg);
  z-index: 2;
}

.album-photo--final-main {
  grid-column: 2 / 4;
  grid-row: 1;
  width: 83%;
  justify-self: start;
  aspect-ratio: .73;
}

.album-painted-hearts {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin: -7px 1px 0 0;
  color: #d1262f;
  font-size: clamp(27px, 7vw, 48px);
  letter-spacing: -.35em;
  transform: rotate(-23deg);
}

.album-finale-note {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  padding: clamp(20px, 5vw, 42px) 0 0 5px;
  text-align: right;
  font-size: clamp(11px, 2.8vw, 16px);
  line-height: 1.55;
}

.album-photo--final-left,
.album-photo--final-right {
  grid-row: 3;
  align-self: end;
  aspect-ratio: .74;
}

.album-photo--final-left {
  grid-column: 1 / 2;
  width: 94%;
}

.album-photo--final-right {
  grid-column: 2 / 4;
  width: 76%;
  justify-self: end;
}

@media (max-width: 430px) {
  .album-story-canvas {
    width: calc(100% - 28px);
  }

  .album-opening-script {
    white-space: nowrap;
  }

  .album-promise-row {
    width: 96%;
  }

  .album-finale {
    min-height: 570px;
  }
}

/* v17 authoritative album geometry + uniform scroll motion. Keep this block last. */
.album-story-v3 .album-best-scene {
  position: relative !important;
  display: block !important;
  width: 88% !important;
  margin: 0 auto !important;
}

.album-story-v3 .album-photo--best {
  width: 74% !important;
  height: auto !important;
  aspect-ratio: .78 !important;
}

.album-story-v3 .album-photo--best img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.album-story-v3 .album-best-words {
  position: absolute !important;
  top: 17% !important;
  left: 63% !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(13px, 4vw, 19px) !important;
  width: 39% !important;
  font-size: clamp(24px, 7vw, 31px) !important;
  line-height: .92 !important;
  transform: rotate(-5deg) !important;
  pointer-events: none;
}

.album-story-v3 .album-finale {
  display: grid !important;
  grid-template-columns: calc(50% - 3px) calc(50% - 3px) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 6px !important;
  row-gap: 12px !important;
  align-content: start !important;
  align-items: start !important;
  min-height: 0 !important;
}

.album-story-v3 .album-finale-script {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 17px 0 0 3% !important;
  gap: clamp(8px, 2.8vw, 13px) !important;
  font-size: clamp(27px, 8vw, 35px) !important;
  line-height: .94 !important;
}

.album-story-v3 .album-photo--final-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  aspect-ratio: .65 !important;
  justify-self: stretch !important;
}

.album-story-v3 .album-painted-hearts {
  grid-column: 2 !important;
  grid-row: 1 !important;
  z-index: 4 !important;
}

.album-story-v3 .album-finale-note {
  grid-column: 2 !important;
  grid-row: 2 !important;
  padding: 0 2px 0 6px !important;
  align-self: start !important;
  font-size: clamp(9px, 2.6vw, 11px) !important;
  line-height: 1.45 !important;
}

.album-story-v3 .album-photo--final-left,
.album-story-v3 .album-photo--final-right {
  grid-row: 3 !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  margin: 0 !important;
}

.album-story-v3 .album-photo--final-left {
  grid-column: 1 !important;
  aspect-ratio: .61 !important;
}

.album-story-v3 .album-photo--final-right {
  grid-column: 2 !important;
  aspect-ratio: .70 !important;
}

.album-story-v3 .album-photo--final-left img,
.album-story-v3 .album-photo--final-right img {
  object-fit: cover !important;
  object-position: center !important;
}

/* All primary sections use the same slower Zenlove-style reveal. */
.invite .reveal,
html.performance-lite .invite .reveal {
  transform-origin: center center !important;
  transition-property: opacity, transform, filter !important;
  transition-duration: 1.45s !important;
  transition-timing-function: cubic-bezier(.32, .04, .18, 1) !important;
  animation-duration: 1.45s !important;
}

.invite .reveal:not(.is-visible),
html.performance-lite .invite .reveal:not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 44px, 0) scale(.975) !important;
  filter: blur(2px) saturate(.94) !important;
}

.invite .reveal.is-visible,
html.performance-lite .invite .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
}

.gallery-section.reveal.is-visible .album-story-canvas .album-photo img.fly-target:not(.is-visible),
.album-story-canvas .album-photo img.fly-target:not(.is-visible),
html.performance-lite .album-story-canvas .album-photo img.fly-target:not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(var(--fly-x, 0), 32px, 0) scale(.97) !important;
  filter: blur(2px) saturate(.9) !important;
  transition: opacity 1.65s linear, transform 1.75s cubic-bezier(.32,.04,.18,1), filter 1.65s linear !important;
  transition-delay: 0s !important;
}

.gallery-section.reveal.is-visible .album-story-canvas .album-photo img.fly-target.is-visible,
.album-story-canvas .album-photo img.fly-target.is-visible,
html.performance-lite .album-story-canvas .album-photo img.fly-target.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) saturate(1) !important;
  transition: opacity 1.65s linear, transform 1.75s cubic-bezier(.32,.04,.18,1), filter 1.65s linear !important;
  transition-delay: var(--fly-delay, .08s) !important;
}

.album-story-canvas .album-reveal-target,
html.performance-lite .album-story-canvas .album-reveal-target {
  transition: opacity 1.5s linear, transform 1.65s cubic-bezier(.32,.04,.18,1), filter 1.5s linear !important;
}

@media (prefers-reduced-motion: reduce) {
  .invite .reveal,
  html.performance-lite .invite .reveal {
    transition-property: opacity, transform, filter !important;
    transition-duration: 1.45s !important;
    transition-timing-function: cubic-bezier(.32, .04, .18, 1) !important;
    animation-duration: 1.45s !important;
  }

  .invite .reveal:not(.is-visible) {
    opacity: 0 !important;
    transform: translate3d(0, 44px, 0) scale(.975) !important;
    filter: blur(2px) saturate(.94) !important;
  }

  .invite .reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: none !important;
  }

  .album-story-canvas .album-photo img.fly-target,
  .album-story-canvas .album-reveal-target {
    transition-duration: 1.65s !important;
    animation-duration: 1.65s !important;
  }
}

/* v18 authoritative calendar placement — intentionally last. */
.wedding-logistics-section .arch-calendar-card {
  position: relative !important;
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
  padding: 20px 10px 18px !important;
  overflow: visible !important;
}

.wedding-logistics-section .arch-calendar-title {
  position: absolute !important;
  z-index: 6 !important;
  top: -8px !important;
  left: 50% !important;
  width: calc(100% - 24px) !important;
  height: 46px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.wedding-logistics-section .arch-calendar-title text {
  font-size: 15px !important;
  letter-spacing: .105em !important;
}

.wedding-logistics-section .arch-calendar-photo {
  position: relative !important;
  height: clamp(470px, 125vw, 545px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 190px 190px 0 0 !important;
}

.wedding-logistics-section .arch-calendar-photo .calendar-orb {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 1% !important;
  width: 78% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.22) !important;
  box-shadow: none !important;
  backdrop-filter: blur(.65px) !important;
  -webkit-backdrop-filter: blur(.65px) !important;
  transform: translateX(-50%) !important;
  transform-origin: center bottom !important;
}

.wedding-logistics-section .calendar-orb .calendar,
.wedding-logistics-section .calendar-orb .calendar-grid,
.wedding-logistics-section .calendar-orb .calendar-grid > span {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 430px) {
  .wedding-logistics-section .arch-calendar-card {
    padding-top: 18px !important;
  }

  .wedding-logistics-section .arch-calendar-title {
    top: -9px !important;
    height: 44px !important;
  }

  .wedding-logistics-section .arch-calendar-photo .calendar-orb {
    bottom: .75% !important;
    width: 78% !important;
    background: rgba(255,255,255,.18) !important;
  }
}

/* v19: title and photo share one positioning frame, removing the detached white gap. */
.wedding-logistics-section .arch-calendar-card {
  padding: 0 10px 18px !important;
}

.wedding-logistics-section .arch-calendar-frame {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 42px !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-title {
  position: absolute !important;
  z-index: 7 !important;
  top: -1px !important;
  left: 50% !important;
  width: 100% !important;
  height: 54px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-title text {
  fill: #211a1d !important;
  font: 500 20px/1 "Cormorant Garamond", serif !important;
  letter-spacing: .085em !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-photo {
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 430px) {
  .wedding-logistics-section .arch-calendar-card {
    padding-top: 0 !important;
  }

  .wedding-logistics-section .arch-calendar-frame {
    padding-top: 40px !important;
  }

  .wedding-logistics-section .arch-calendar-frame > .arch-calendar-title {
    top: -2px !important;
    height: 52px !important;
  }

  .wedding-logistics-section .arch-calendar-frame > .arch-calendar-title text {
    font-size: 19px !important;
    letter-spacing: .08em !important;
  }
}

/* v20: the curved title is physically inside the photo, so no spacer can separate them. */
.wedding-logistics-section .arch-calendar-frame {
  padding-top: 0 !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-photo {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
}

.wedding-logistics-section .arch-calendar-photo > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 190px 190px 0 0 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.wedding-logistics-section .arch-calendar-photo > .arch-calendar-title {
  position: absolute !important;
  z-index: 8 !important;
  top: -2px !important;
  left: 50% !important;
  width: 100% !important;
  height: 66px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.wedding-logistics-section .arch-calendar-photo > .arch-calendar-title text {
  fill: #211a1d !important;
  stroke: rgba(255,255,255,.92) !important;
  stroke-width: 2.2px !important;
  paint-order: stroke fill !important;
  font: 600 22px/1 "Cormorant Garamond", serif !important;
  letter-spacing: .075em !important;
}

@media (max-width: 430px) {
  .wedding-logistics-section .arch-calendar-frame {
    padding-top: 0 !important;
  }

  .wedding-logistics-section .arch-calendar-photo > .arch-calendar-title {
    top: -1px !important;
    height: 64px !important;
  }

  .wedding-logistics-section .arch-calendar-photo > .arch-calendar-title text {
    font-size: 21px !important;
    letter-spacing: .07em !important;
  }
}

/* v21: keep the complete text arc inside the photo viewBox. */
.wedding-logistics-section .arch-calendar-photo > .arch-calendar-title {
  top: 10px !important;
  height: 64px !important;
}

/* v22: reserve space between ceremony and calendar, then draw the title outside the arch. */
.wedding-logistics-section .arch-calendar-card {
  margin: clamp(46px, 12vw, 58px) auto 0 !important;
  padding: 0 10px 18px !important;
}

.wedding-logistics-section .arch-calendar-frame {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-title {
  position: absolute !important;
  z-index: 8 !important;
  top: 32px !important;
  left: 50% !important;
  width: 100% !important;
  height: 64px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-title text {
  fill: #211a1d !important;
  stroke: none !important;
  paint-order: normal !important;
  font: 600 21px/1 "Cormorant Garamond", serif !important;
  letter-spacing: .07em !important;
}

.wedding-logistics-section .arch-calendar-frame > .arch-calendar-photo {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 190px 190px 0 0 !important;
  background: #ece8e5 !important;
}

@media (max-width: 430px) {
  .wedding-logistics-section .arch-calendar-card {
    margin-top: 50px !important;
  }

  .wedding-logistics-section .arch-calendar-frame > .arch-calendar-title {
    top: 31px !important;
    height: 64px !important;
  }

  .wedding-logistics-section .arch-calendar-frame > .arch-calendar-title text {
    font-size: 20px !important;
    letter-spacing: .065em !important;
  }
}

/* v23: Vu Quy + route artwork + Thành Hôn form one edge-to-edge continuous strip. */
.invite > .wedding-logistics-section,
.wedding-logistics-section.section,
.wedding-logistics-section.paper-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}

.wedding-logistics-section > .ceremony-calendar-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wedding-logistics-section .ceremony-card--editorial {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 28px clamp(20px, 6vw, 34px) 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.wedding-logistics-section .ceremony-calendar-stack > .journey-road-block,
.wedding-logistics-section .journey-road-block.image-road-block {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--studio-paper, #f7f0e7) !important;
  box-shadow: none !important;
}

.wedding-logistics-section .journey-road-figure {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--studio-paper, #f7f0e7) !important;
  box-shadow: none !important;
}

.wedding-logistics-section .journey-road-figure img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.wedding-logistics-section .journey-route-actions {
  margin: 0 !important;
}

@media (min-width: 860px) {
  .wedding-logistics-section > .ceremony-calendar-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v24: normalize date typography and baselines across both calendar treatments. */
.wedding-logistics-section .ceremony-date-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(10px, 3vw, 16px) !important;
  min-height: 58px !important;
  line-height: 1 !important;
}

.wedding-logistics-section .ceremony-month,
.wedding-logistics-section .ceremony-year {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(15px, 4vw, 17px) !important;
  font-weight: 500 !important;
  font-style: normal !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;
  white-space: nowrap !important;
}

.wedding-logistics-section .ceremony-day {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 46px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  white-space: nowrap !important;
}

.wedding-logistics-section .ceremony-clock {
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

.wedding-logistics-section .calendar-orb .calendar-grid > span,
.wedding-logistics-section .calendar-orb .calendar-grid > span > b {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  white-space: nowrap !important;
}

.wedding-logistics-section .calendar-orb .calendar-grid > span {
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 430px) {
  .wedding-logistics-section .ceremony-date-row {
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) !important;
  }

  .wedding-logistics-section .ceremony-day {
    width: 66px !important;
    min-width: 66px !important;
    font-size: 43px !important;
  }
}

/* Album geometry v18: preserve the portrait source and stagger equal-size finale frames. */
.album-story-v3 .album-photo--landscape {
  width: 82% !important;
  margin: clamp(30px, 7vw, 52px) auto 0 !important;
  aspect-ratio: 2 / 3 !important;
}

.album-story-v3 .album-photo--landscape img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Zenlove-derived one-shot element transitions: 1.3s + .3s delay + ease-out. */
html body .invite .reveal,
html body .invite .reveal:not(.is-visible),
html body .invite .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

html body .invite .zl-motion-ready {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: auto !important;
}

html body .invite .zl-motion-ready:not(.zl-motion-visible) {
  opacity: 0 !important;
  animation: none !important;
  translate: 0 0;
}

html body .invite .zl-motion-ready.zl-motion-visible {
  opacity: 1 !important;
  will-change: translate, opacity !important;
  animation-duration: var(--zl-duration, 1.3s) !important;
  animation-delay: var(--zl-delay, .3s) !important;
  animation-timing-function: var(--zl-easing, ease-out) !important;
  animation-fill-mode: both !important;
  animation-iteration-count: 1 !important;
}

html body .invite .zl-motion-ready.zl-motion-complete {
  will-change: auto !important;
}

html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-up"] {
  animation-name: zlSlideInUp !important;
}

html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-right"] {
  animation-name: zlSlideInLeft !important;
}

html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-left"] {
  animation-name: zlSlideInRight !important;
}

@keyframes zlSlideInUp {
  from { translate: 0 100%; visibility: visible; }
  to { translate: 0 0; }
}

@keyframes zlSlideInLeft {
  from { translate: -100% 0; visibility: visible; }
  to { translate: 0 0; }
}

@keyframes zlSlideInRight {
  from { translate: 100% 0; visibility: visible; }
  to { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html body .invite .zl-motion-ready.zl-motion-visible {
    opacity: 1 !important;
    animation-duration: var(--zl-duration, 1.3s) !important;
    animation-delay: var(--zl-delay, .3s) !important;
    animation-timing-function: var(--zl-easing, ease-out) !important;
    animation-fill-mode: both !important;
    animation-iteration-count: 1 !important;
  }

  html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-up"] {
    animation-name: zlSlideInUp !important;
  }

  html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-right"] {
    animation-name: zlSlideInLeft !important;
  }

  html body .invite .zl-motion-ready.zl-motion-visible[data-zl-motion="slide-left"] {
    animation-name: zlSlideInRight !important;
  }
}

/* Album typography v19: lighter outline hearts and airier editorial scripts. */
.album-story-v3 .album-outline-hearts > span {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(30px, 8vw, 42px) !important;
  aspect-ratio: 32 / 29 !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 27S2 18.7 2 9.6C2 5.4 5.2 2 9.3 2c2.8 0 5.3 1.6 6.7 4 1.4-2.4 3.9-4 6.7-4C26.8 2 30 5.4 30 9.6 30 18.7 16 27 16 27Z' fill='none' stroke='%23e12632' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.album-story-v3 .album-outline-hearts--lower > span {
  width: clamp(20px, 5.5vw, 29px) !important;
  aspect-ratio: 30 / 32 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 32'%3E%3Cpath d='M15.4 29.1C11.1 24.6 4.3 18.8 2.7 12.4 1.5 7.8 3.6 3.4 7.6 2.5c3.1-.7 6.4 1.2 7.8 4.3 1.7-3.2 5.1-5.1 8.2-4.1 4 1.2 5.7 5.8 4.1 10.3-2.2 6.3-8.2 11.9-12.3 16.1Z' fill='none' stroke='%23e12632' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.6 29.8C10 25 3.8 19.5 2 13.2M16.1 29.8c3.8-5.2 9.5-10.4 11.2-16.3M15.8 7.7c1.5-2.6 4.5-4.3 7.2-3.6' fill='none' stroke='%23e12632' stroke-width='.72' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") !important;
}

.album-story-v3 .album-outline-hearts--lower > span:nth-child(1) {
  transform: rotate(-5deg) !important;
}

.album-story-v3 .album-outline-hearts--lower > span:nth-child(2) {
  transform: rotate(3deg) !important;
}

.album-story-v3 .album-outline-hearts--lower > span:nth-child(3) {
  transform: rotate(-2deg) !important;
}

.album-story-v3 .album-finale-script {
  gap: clamp(18px, 5.4vw, 29px) !important;
  padding-top: clamp(17px, 4vw, 27px) !important;
  font-size: clamp(36px, 10.4vw, 48px) !important;
  line-height: .96 !important;
}

.album-story-v3 .album-best-words {
  top: 13% !important;
  gap: clamp(22px, 6.2vw, 34px) !important;
  width: 41% !important;
  font-size: clamp(31px, 8.8vw, 42px) !important;
  line-height: .96 !important;
}

.album-story-v3 .album-english-note {
  padding-top: clamp(14px, 3.5vw, 24px) !important;
  padding-bottom: clamp(28px, 7vw, 48px) !important;
}

.album-story-v3 .album-finale {
  row-gap: 12px !important;
  padding-bottom: clamp(34px, 8vw, 54px) !important;
}

.album-story-v3 .album-photo--final-left,
.album-story-v3 .album-photo--final-right {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  align-self: start !important;
  margin-top: clamp(38px, 9vw, 58px) !important;
}

.album-story-v3 .album-photo--final-left {
  transform: translateY(clamp(-38px, -6vw, -24px)) !important;
}

.album-story-v3 .album-photo--final-right {
  transform: translateY(0) !important;
}

.album-story-v3 .album-photo--final-left img,
.album-story-v3 .album-photo--final-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Final authority: Aquarelle names and the new horizontal wedding timeline. */
html body .invite .family-section .photo-card figcaption,
html body .invite .family-section .couple-portrait__name,
html body .invite .family-section .name-signature span {
  font-family: "UTM Aquarelle", "Great Vibes", cursive !important;
  font-size: clamp(32px, 8.7vw, 52px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body .invite .family-section .editorial-couple-collage .couple-portrait__name {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(19px, 5.35vw, 29px) !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  text-align: center !important;
  overflow: visible !important;
}

html body .invite .family-section .editorial-couple-collage .couple-portrait__frame {
  box-sizing: border-box !important;
  padding: 0 !important;
  border: clamp(5px, 1.45vw, 8px) solid #fff !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(44, 36, 32, 0.15) !important;
}

html body .invite .gallery-section.album-story-v3 {
  padding-bottom: 10px !important;
}

html body .invite .album-story-v3 .album-finale {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body .invite .wedding-day-timeline {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  gap: 0 !important;
}

html body .invite .wedding-day-timeline article.wedding-day-timeline-event {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 49px 36px auto auto !important;
  gap: 0 !important;
  align-items: initial !important;
  justify-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

html body .invite .wedding-day-timeline article.wedding-day-timeline-event time.wedding-day-timeline-time,
html body .invite .wedding-day-timeline article.wedding-day-timeline-event p.wedding-day-timeline-label,
html body .invite .wedding-day-timeline p.wedding-day-timeline-note {
  color: var(--timeline-pink) !important;
  font-family: "Quicksand", "Montserrat", sans-serif !important;
}

html body .invite .wedding-day-timeline article.wedding-day-timeline-event time.wedding-day-timeline-time {
  font-size: clamp(15px, 4.2vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body .invite .wedding-day-timeline article.wedding-day-timeline-event p.wedding-day-timeline-label {
  max-width: 9ch !important;
  margin: 4px 0 0 !important;
  font-size: clamp(13px, 3.55vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body .invite .wedding-day-timeline p.wedding-day-timeline-note {
  width: min(92%, 620px) !important;
  margin: 18px auto 0 !important;
  font-size: clamp(12px, 3vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}