/* Printed blue invitation reference. The opening cover and feature behavior stay intact. */

/* Envelope screen lifts completely up off-screen like an opening curtain - never dissolves midway */
.invite-opening .envelope-screen {
  transform: translateY(-100vh) !important;
  opacity: 1 !important;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.invite-opening .envelope-box,
.invite-opening .envelope-card {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-40px) !important;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.invite-open .envelope-screen {
  display: none !important;
  visibility: hidden !important;
}

/* Invitation card emerges smoothly from bottom upward */
body:not(.invite-open):not(.invite-opening) .app-container {
  opacity: 0 !important;
  transform: translateY(min(50vh, 320px)) !important;
  pointer-events: none !important;
}

body.invite-opening .app-container {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s !important;
  will-change: transform, opacity;
}

body.invite-open .app-container {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Ensure hero section stays solid and visible during card entrance */
body.invite-opening #hero,
body.invite-open #hero,
body.invite-opening #hero .hero-inner-stage,
body.invite-opening #hero .hero-title-box,
body.invite-opening #hero .hero-names,
body.invite-opening #hero .hero-photo-arch-wrap,
body.invite-opening #hero .hero-couple-photo,
body.invite-opening #hero .hero-date-wrap,
body.invite-opening #hero .hero-quote-box {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Envelope card spacing */
.envelope-card {
  gap: 18px !important;
}
.envelope-card .envelope-date {
  margin: 0 !important;
}
.envelope-card .envelope-invite-text {
  margin: 0 !important;
}

.app-container {
  --print-paper: #fbf9f2;
  --blue-paper: var(--print-paper);
  --edge-flower-size: 210px;
  --edge-flower-outset: 150px;
  --reveal-duration: 5s;
  --slide-distance-wide: 140px;
  --slide-distance-medium: 95px;
  width: min(100%, 900px);
  max-width: 900px;
  background-color: var(--print-paper);
  padding-bottom: 34px;
  box-shadow: 0 9px 36px rgba(28, 57, 86, .12);
}

.app-container > :is(#couple-portraits,#wedding-info,#gallery,#reception,#venue,#timeline,#countdown,#dresscode,#love-story,#guestbook,#gift) {
  width: calc(100% - 44px);
  max-width: 560px;
  margin: 0 auto 26px;
}
.app-container > :is(#wedding-info,#reception) { max-width: 840px; }

.app-container :is(#couple-portraits,#wedding-info,#gallery,#reception,#venue,#timeline,#countdown,#dresscode,#guestbook,#gift) .block-title,
.app-container #reception-bride .rb-heading,
.app-container #dresscode .dresscode-subtitle {
  font-family: "Alex Brush", "Pattaya", cursive !important;
  font-size: clamp(1.8rem, 5.5vw, 44px) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
}
.app-container .block-title::after { font-size: .7rem !important; width: 90px !important; margin-top: 9px !important; }

/* Names, photo and initials compose a single printed hero. */
.app-container #hero.hero-section { width: calc(100% - 32px); max-width: 870px; margin: 0 auto 24px; position: relative; z-index: 2; overflow: visible !important; }
#hero .hero-inner-stage { padding-bottom: 14px; overflow: visible !important; }
#hero .hero-title-box { padding: 27px 18px 18px; background: none; }
#hero .hero-kicker-wrap { margin: 0; }
#hero .hero-kicker { font-family: var(--font-sans); font-size: clamp(1.05rem, 3.5vw, 1.25rem); font-weight: 700; letter-spacing: .22em; }
#hero .hero-photo-arch-wrap { position: relative; aspect-ratio: 4 / 5.2; margin: 0; isolation: isolate; }
#hero .hero-photo-arch-wrap:not(.has-photo) { background: #3978a5; }
#hero .hero-couple-photo { clip-path: none; }
#hero .hero-couple-photo img { object-position: center 28%; }
#hero .hero-couple-photo::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,47,82,.25), transparent 37%, transparent 80%, rgba(13,47,82,.06));
  pointer-events: none;
}
#hero .hero-names {
  position: absolute;
  z-index: 5;
  top: 26px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(560px, calc(100% - 56px));
  text-align: left;
  text-shadow: 0 2px 16px rgba(0,0,0,.12);
}
#hero .hero-name-groom,
#hero .hero-name-bride {
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 7.6vw, 3.3rem);
  font-weight: 400;
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
}
#hero .hero-name-groom {
  display: block;
}
#hero .hero-name-pair {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  margin-top: 12px !important;
}
#hero .hero-names .amp {
  color: #fff !important;
  align-self: center !important;
  font-family: "Alex Brush", cursive !important;
  font-size: 1.75rem !important;
  line-height: 0.9 !important;
  margin: 0 !important;
}
#hero .hero-name-bride { text-align: right; }
.couple-monogram { position: relative; font-family: "Cormorant Garamond", Georgia, serif; color: var(--blue-900); font-weight: 400; line-height: .9; letter-spacing: -.13em; }
.couple-monogram[hidden] { display: none !important; }
.couple-monogram [data-monogram="secondary"] { display: inline-block; transform: translateY(.23em); margin-left: -.12em; }
.monogram-amp { position: absolute; font-family: "Alex Brush", cursive; font-size: .32em; letter-spacing: 0; top: 43%; left: 42%; }
#hero .hero-monogram { position: absolute; z-index: 4; left: 12%; bottom: 17%; font-size: clamp(6.5rem, 25vw, 10.5rem); color: #5f91bb; opacity: .92; }
#hero .hero-date-wrap { position: relative; padding: 21px 34px 0; overflow: visible !important; }
#hero .hero-date-flower { display: none !important; }
#hero .hero-date-flowers { position: absolute; z-index: 10; top: 18px; right: -130px; width: 220px; height: 300px; transform: rotate(-10deg); transform-origin: center; pointer-events: none; }
#hero .hero-date-flowers img { position: absolute; right: 10px; width: 200px; height: auto; opacity: .85; }
#hero .hero-date-flowers img:first-child { top: 0; }
#hero .hero-date-flowers img:last-child { bottom: 0; }
#hero .hero-date { max-width: 360px; }
.hero-date-weekday,.hero-date-year { font-family: var(--font-sans); font-size: .78rem; font-weight: 600; }
.hero-date-main { border: 0; margin-inline: 5px; }
.hero-date-main strong { font-family: var(--font-sans); font-size: 2.85rem; line-height: 1; font-weight: 600; }
.hero-date-main small { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .12em; }
#hero .hero-quote-box { width: calc(100% - 50px); max-width: 480px; margin-top: 18px; }
#hero .hero-quote-text { font-family: "Cormorant Garamond", "Lora", Georgia, serif; font-size: 1.12rem; font-weight: 400; font-style: italic; letter-spacing: .02em; line-height: 1.65; }
#hero .hero-invite-guest { margin-top: 18px; font-size: 1.12rem; }
#hero .hero-quote-heart { margin-top: 8px; font-size: 1rem; }

/* Four retained card types become light paper frames. */
#wedding-info .red-card,
#reception .reception-card,
#reception-bride .bride-reception-card {
  border: 1px solid rgba(77,115,155,.24);
  border-radius: 1px;
  background: var(--paper-grain), var(--print-paper);
  box-shadow: none;
  padding: 32px 23px;
}
#reception-bride { max-width: 864px; margin: 0 auto 26px; padding-inline: 12px; }
#wedding-info { position: relative; isolation: isolate; }
#wedding-info .red-card { position: relative; z-index: 1; }
#wedding-info .ceremony-flowers { display: none !important; }
#wedding-info .wedding-info-flowers { position: absolute; z-index: 3; bottom: 25px; left: -125px; width: 220px; height: 300px; transform: rotate(10deg); transform-origin: center; pointer-events: none; }
#wedding-info .wedding-info-flowers img { position: absolute; left: 10px; width: 200px; height: auto; opacity: .85; }
#wedding-info .wedding-info-flowers img:first-child { top: 0; }
#wedding-info .wedding-info-flowers img:last-child { bottom: 0; }
#wedding-info .family-side { border: 0; border-radius: 0; background: none; padding: 10px 6px; }
#wedding-info .parents-grid { gap: 0 22px; }
#wedding-info .family-side small { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .14em; }
#wedding-info .family-side h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.65; margin: 4px 0; white-space: nowrap !important; }
#wedding-info .family-side p { font-size: 1.02rem; }
#wedding-info .couple-highlight-names { padding: 4px 0; margin-bottom: 16px; }
#wedding-info .groom-name,#wedding-info .bride-name { font-family: "Alex Brush", "Pattaya", cursive; font-size: clamp(1.8rem, 6.5vw, 2.6rem); font-weight: 400; }
#wedding-info .ceremony-time-badge { border: 0; border-block: 1px solid var(--blue-line); border-radius: 0; background: none; padding: 14px 3px; }
#reception .reception-date-num { font-family: var(--font-sans); font-size: 4.2rem; font-weight: 500; }
#reception .calendar-paper { border: 0; background: none; box-shadow: none; }
#reception .reception-actions { gap: 12px; }
#reception .btn-gold-outline,#reception .btn-cream-solid,#venue .venue-direction-btn,#reception-bride .rb-direction {
  min-height: 40px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .075em;
  box-shadow: none !important;
}
#reception .btn-gold-outline {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--blue-700, #2d5f8b) !important;
  background: rgba(255, 255, 255, .75) !important;
  color: var(--blue-800, #194a80) !important;
  padding: 9px 24px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: all .2s ease;
}
#reception .btn-gold-outline[hidden],
#reception #btn-add-calendar[hidden] {
  display: none !important;
}
#reception .btn-gold-outline span {
  text-decoration: none !important;
}
#reception .btn-gold-outline:hover {
  background: var(--blue-800, #194a80) !important;
  color: #ffffff !important;
  border-color: var(--blue-800, #194a80) !important;
}
#reception { position: relative; isolation: isolate; }
#reception .reception-card { position: relative; z-index: 1; }
#reception .reception-heading,
#reception .block-title,
#reception-bride .rb-heading {
  white-space: nowrap !important;
}
#reception .reception-flowers-top { position: absolute; z-index: 3; top: 25px; right: -90px; width: 220px; height: 300px; transform: rotate(-10deg); transform-origin: center; pointer-events: none; }
#reception .reception-flowers-top img { position: absolute; right: 10px; width: 200px; height: auto; opacity: .85; }
#reception .reception-flowers-top img:first-child { top: 0; }
#reception .reception-flowers-top img:last-child { bottom: 0; }
#reception .reception-flowers-bottom { position: absolute; z-index: 3; bottom: 25px; left: -125px; width: 220px; height: 300px; transform: rotate(10deg); transform-origin: center; pointer-events: none; }
#reception .reception-flowers-bottom img { position: absolute; left: 10px; width: 200px; height: auto; opacity: .85; }
#reception .reception-flowers-bottom img:first-child { top: 0; }
#reception .reception-flowers-bottom img:last-child { bottom: 0; }

/* Rectangular photographs and panels, without torn edges. */
#hero .hero-photo-arch-wrap,
#hero .hero-couple-photo,
#gallery .gallery-carousel,
#venue .map-embed-wrapper,
#countdown .countdown-card {
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
}
#couple-portraits .couple-portraits-card { padding: 22px 0 18px; }
#couple-portraits .couple-portrait { padding: 0 0 14px; }
.couple-portrait-photo-wrap { border-radius: 0; }
.couple-portrait-name { font-size: .88rem; letter-spacing: .045em; }
.couple-portrait-quote { font-size: .92rem; }
.app-container > #gallery { width: calc(100% - 32px); max-width: 560px; padding: 0 0 18px; }
#gallery .section-header { position: absolute; left: 15px; right: 15px; top: 30px; z-index: 30; margin: 0; pointer-events: none; }
.app-container #gallery .block-title { color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.app-container #gallery .block-title::after { display: none !important; }
#gallery .gallery-carousel { aspect-ratio: 4 / 5.2; min-height: 0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
#gallery .carousel-slide,#gallery .carousel-slide img { border: 0; border-radius: 12px; box-shadow: none; }
#gallery .carousel-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(11,37,64,.12), transparent 30%); pointer-events: none; border-radius: 12px; }
#gallery .carousel-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); color: #333; z-index: 25; }
#gallery .carousel-dots { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; justify-content: safe center !important; gap: 8px !important; padding: 4px 2px !important; width: 100% !important; max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#gallery .carousel-dots::-webkit-scrollbar { display: none; }
#gallery .carousel-dot { flex: 0 0 calc((100% - 32px) / 5) !important; min-width: 58px; max-width: 95px; aspect-ratio: 3 / 4; height: auto; border: 2px solid transparent !important; border-radius: 8px !important; opacity: .85; background: none !important; padding: 0 !important; overflow: hidden; cursor: pointer; transition: opacity .2s ease, border-color .2s ease; }
#gallery .carousel-dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; pointer-events: none; }
#gallery .carousel-dot.active { border: 2px solid var(--blue-800, #194a80) !important; opacity: 1 !important; transform: none !important; }
.lightbox-modal { z-index: 2100; }
#venue { padding: 21px 20px 26px; }
#venue .venue-heading { font-size: clamp(1.5rem, 5.2vw, 2.7rem) !important; white-space: nowrap !important; }
#venue .venue-name { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; }
#venue .venue-address { font-size: 1rem; }
#venue .map-embed-wrapper { border: 0; border-radius: 0; box-shadow: none; }

/* The program keeps its oval frame and gets the matching initials. */
#timeline { padding: 12px 18px 20px; }
#timeline .timeline-card { padding: 48px 30px 36px; background: var(--paper-grain), var(--print-paper); text-align: center; }
#timeline .card-heading {
  max-width: none !important;
  white-space: nowrap !important;
  font-size: clamp(1.6rem, 5vw, 42px) !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
#timeline .card-heading::after { display: none !important; }
#timeline .timeline-monogram { display: table; margin: 11px auto 27px; padding-bottom: .2em; font-size: 4.7rem; }
#timeline .timeline-list {
  display: flex !important;
  flex-direction: column !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 16px !important;
}
#timeline .timeline-item {
  display: grid !important;
  grid-template-columns: auto auto !important;
  gap: 18px !important;
  min-height: 26px !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: start !important;
}
#timeline .timeline-event-icon { display: none !important; }
#timeline .timeline-left { width: auto !important; padding: 0 !important; text-align: left !important; }
#timeline .timeline-right { width: auto !important; padding: 0 !important; text-align: left !important; }
#timeline .timeline-time,#timeline .timeline-text { font-family: var(--font-sans); font-size: .98rem; font-weight: 500; line-height: 1.5; }
#timeline .timeline-time { font-weight: 600; min-width: 62px; text-align: left; }
#timeline::after { display: none; }

/* A watercolor blue strip gives the countdown its own rhythm. */
#countdown .countdown-card {
  padding: 38px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff !important;
  background: var(--paper-grain), linear-gradient(135deg, #417ea8, #235584) !important;
}
#countdown .countdown-card::before { display: none !important; }
.app-container #countdown .block-title { color: #fff !important; }
.app-container #countdown .block-title::after { color: #fff !important; background: none !important; }
#countdown .countdown-heart-icon { background: none !important; color: #fff !important; width: 30px; height: 30px; margin-bottom: 12px; }
#countdown .countdown-card .count-box { background: none !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.35) !important; box-shadow: none !important; border-radius: 0 !important; }
#countdown .countdown-card .count-box:last-child { border-right: 0 !important; }
#countdown .countdown-card .count-box .num { color: #fff !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 3rem !important; font-weight: 400 !important; }
#countdown .countdown-card .count-box .lbl,#countdown .countdown-subtitle,#countdown .countdown-quote { color: #f2f6fa !important; }
#countdown .countdown-card .count-box .lbl { font-family: var(--font-sans) !important; font-size: .6rem !important; letter-spacing: .12em !important; }
#countdown .countdown-subtitle { font-size: .95rem !important; color: #f2f6fa !important; }
#countdown .countdown-quote { font-size: .9rem !important; color: #f2f6fa !important; }

/* Dress details keep only the palette guidance. */
.app-container > #dresscode { position: relative; width: calc(100% - 32px); max-width: 560px; }
#dresscode .dresscode-flowers { position: absolute; z-index: 3; top: 45px; left: calc((100% - min(100vw, 900px)) / 2 - 85px); width: 220px; height: 300px; transform: rotate(10deg); transform-origin: center; pointer-events: none; }
#dresscode .dresscode-flowers img { position: absolute; left: 10px; width: 200px; height: auto; opacity: .85; }
#dresscode .dresscode-flowers img:first-child { top: 0; }
#dresscode .dresscode-flowers img:last-child { bottom: 0; }
#dresscode .dresscode-card { padding: 0 0 26px; }
#dresscode .dresscode-note {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--blue-700, #34649b);
  margin-bottom: 20px;
}
#dresscode .dresscode-palettes { max-width: 480px; margin-inline: auto; padding-inline: 8px; gap: clamp(12px, 3vw, 24px); }
#dresscode .dresscode-item { max-width: 105px; min-width: 60px; }
#dresscode .dresscode-swatch { width: 38px; height: 38px; box-shadow: 0 3px 10px rgba(25, 74, 128, .15); border: 2px solid rgba(255, 255, 255, .9); }
#dresscode .dresscode-name {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue-900, #123f74);
  letter-spacing: .01em;
  white-space: nowrap;
}
#guestbook .guestbook-card { padding: 22px 15px 20px; max-width: 410px; }
#guestbook .guestbook-form .form-input,#guestbook .guestbook-form .form-textarea { border-radius: 2px; background: rgba(255,255,255,.42); }
#guestbook .wish-item { font-size: .9rem; padding-inline: 10px; }
#guestbook .wishes-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(25, 74, 128, .35) transparent;
}
#guestbook .wishes-list::-webkit-scrollbar { width: 5px; }
#guestbook .wishes-list::-webkit-scrollbar-track { background: rgba(25, 74, 128, .05); border-radius: 10px; }
#guestbook .wishes-list::-webkit-scrollbar-thumb { background: rgba(25, 74, 128, .35); border-radius: 10px; }
#guestbook .wishes-list::-webkit-scrollbar-thumb:hover { background: rgba(25, 74, 128, .6); }
#gift { position: relative; padding: 28px 12px; }
#timeline .timeline-flowers,
#gift .gift-flowers { position: absolute; z-index: 3; top: 24px; right: calc((100% - min(100vw, 900px)) / 2 - 80px); width: 220px; height: 300px; transform: rotate(-10deg); transform-origin: center; pointer-events: none; }
#timeline .timeline-flowers img,
#gift .gift-flowers img { position: absolute; right: 10px; width: 200px; height: auto; opacity: .85; }
#timeline .timeline-flowers img:first-child,
#gift .gift-flowers img:first-child { top: 0; }
#timeline .timeline-flowers img:last-child,
#gift .gift-flowers img:last-child { bottom: 0; }
#gift .gift-edge-flower { display: none !important; }
#gift .gift-envelope-box { width: 220px; max-width: 82vw; }
#gift .gift-envelope-img {
  animation: giftEnvelopeFloat 3s ease-in-out infinite !important;
  transform-origin: center bottom;
  will-change: transform;
}
@keyframes giftEnvelopeFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-9px) rotate(-2.5deg) scale(1.03);
  }
  50% {
    transform: translateY(-14px) rotate(0deg) scale(1.05);
  }
  75% {
    transform: translateY(-7px) rotate(2.5deg) scale(1.03);
  }
}
.app-container footer { padding-top: 16px; background: none; }
.app-container .gift-thankyou-text { max-width: 390px; margin-inline: auto; font-size: 1.2rem; }
.app-container .gift-brand-footer { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .12em; }

@media (max-width: 600px) {
  .app-container {
    --edge-flower-size: 170px;
    --edge-flower-outset: 110px;
    --slide-distance-wide: 75px;
    --slide-distance-medium: 50px;
  }
  .envelope-card { gap: 16px !important; }
  .envelope-card .envelope-date { margin: 0 !important; }
  .envelope-card .envelope-invite-text { margin: 0 !important; }
  .app-container > :is(#couple-portraits,#wedding-info,#gallery,#reception,#venue,#timeline,#countdown,#dresscode,#guestbook,#gift) { margin-bottom: 22px; }
  .app-container #hero.hero-section { width: calc(100% - 20px); overflow: visible !important; }
  #hero .hero-inner-stage { overflow: visible !important; }
  #hero .hero-names { top: 16px; left: 0; right: 0; margin: 0 auto; width: calc(100% - 42px); }
  #hero .hero-name-groom,#hero .hero-name-bride { font-size: clamp(1.85rem, 7.8vw, 2.75rem); }
  #hero .hero-name-pair { margin-top: 10px !important; gap: 4px !important; }
  #hero .hero-names .amp { font-size: 1.55rem !important; line-height: 0.85 !important; margin: 0 !important; }
  #hero .hero-date-wrap { padding-inline: 20px; overflow: visible !important; }
  #hero .hero-date-flower { display: none !important; }
  #hero .hero-date-flowers { width: 160px; height: 230px; right: -70px; top: 150px; z-index: 10; }
  #hero .hero-date-flowers img { width: 140px; }
  #hero .hero-monogram { font-size: clamp(6rem, 27vw, 8rem); }
  .hero-date-weekday,.hero-date-year { font-size: .66rem; }
  .hero-date-main strong { font-size: 2.5rem; }
  #hero .hero-quote-text { font-size: .98rem; }
  #wedding-info .red-card,#reception .reception-card,#reception-bride .bride-reception-card { padding: 28px 15px; }
  #wedding-info .parents-grid { gap: 0 6px !important; }
  #wedding-info .family-side { padding: 6px 2px !important; }
  #wedding-info .family-side h4 {
    white-space: nowrap !important;
    font-size: clamp(0.72rem, 3.4vw, 0.85rem) !important;
    line-height: 1.55 !important;
  }
  #wedding-info .family-side p { font-size: .8rem; }
  #wedding-info .groom-name,#wedding-info .bride-name { font-size: 1.85rem; }
  #wedding-info .wedding-info-flowers { width: 160px; height: 230px; left: -105px; bottom: -40px; }
  #wedding-info .wedding-info-flowers img { width: 140px; }
  #reception .reception-flowers-top { width: 160px; height: 230px; right: -80px; top: 75px; }
  #reception .reception-flowers-top img { width: 140px; }
  #reception .reception-flowers-bottom { width: 160px; height: 230px; left: -105px; bottom: 15px; }
  #reception .reception-flowers-bottom img { width: 140px; }
  #reception .reception-heading,
  #reception .block-title,
  #reception-bride .rb-heading {
    white-space: nowrap !important;
    font-size: clamp(1.32rem, 5.8vw, 1.85rem) !important;
  }
  .app-container > #gallery,.app-container > #timeline,.app-container > #dresscode,.app-container > #gift { width: calc(100% - 20px); }
  #dresscode .dresscode-flowers { width: 160px; height: 230px; left: calc((100% - min(100vw, 900px)) / 2 - 95px); top: 85px; }
  #dresscode .dresscode-flowers img { width: 140px; }
  #timeline .timeline-flowers,
  #gift .gift-flowers { width: 160px; height: 230px; right: calc((100% - min(100vw, 900px)) / 2 - 60px); }
  #timeline .timeline-flowers img,
  #gift .gift-flowers img { width: 140px; }
  #gift .gift-edge-flower { display: none !important; }
  #gift .gift-envelope-box { width: 195px; }
  #gallery .carousel-dots { gap: 6px; padding: 4px 0; max-height: none; }
  #gallery .carousel-dot { flex: 0 0 calc((100% - 24px) / 4.2) !important; min-width: 54px; }
  #gallery .section-header { top: 25px; }
  #venue { padding-inline: 8px; }
  #venue .venue-heading { font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important; white-space: nowrap !important; }
  #timeline { padding-inline: 7px; }
  #timeline .timeline-card { padding: 48px 18px 31px; }
  #timeline .card-heading {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(1.35rem, 5.8vw, 1.95rem) !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }
  #timeline .timeline-list {
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 auto !important;
    gap: 14px !important;
  }
  #timeline .timeline-item {
    grid-template-columns: auto auto !important;
    gap: 16px !important;
  }
  #timeline .timeline-time,#timeline .timeline-text { font-size: .92rem !important; }
  #timeline .timeline-time { min-width: 54px !important; }
  #countdown .countdown-card { padding: 24px 12px 26px; }
  #countdown .countdown-card .count-box .num { font-size: 2.45rem; }
  #dresscode .dresscode-note { width: calc(100% - 30px); font-size: 0.98rem; }
  #dresscode .dresscode-palettes { gap: 8px; padding-inline: 4px; }
  #dresscode .dresscode-item { max-width: 82px; }
  #dresscode .dresscode-name { font-family: var(--font-serif); font-size: 0.82rem; }
}