/* Personal invitation copy and two-event layout; original artwork and animation styles are retained. */
.intro-couple { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 12px; color: #624021; }
.intro-envelope-content .intro-couple__name { width: 100%; margin: 0; font: 300 clamp(28px, 8.5vw, 40px)/1.3 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; text-align: center; white-space: nowrap; font-kerning: normal; font-optical-sizing: auto; text-shadow: none; }
.intro-couple__join { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; padding: 5px 0 7px; }
.intro-couple__join::before, .intro-couple__join::after { content: ''; width: 28px; height: 1px; background: #a7793b55; }
.intro-couple__and { padding-inline: 2px; color: #97703e; font: 400 27px/1 'Great Vibes', 'Cormorant Garamond', cursive; letter-spacing: 0; text-transform: none; }
/* Opening: the desk backdrop and frame dissolve while the envelope halves part, revealing the hero beneath. */
.intro-splash::before, .intro-splash::after { transition: opacity 1s cubic-bezier(.22, 1, .36, 1); }
.intro-splash.is-opening::before, .intro-splash.is-opening::after { opacity: 0; }
.intro-envelope-stage { transition: border-color .8s ease-out, box-shadow .8s ease-out; }
.intro-splash.is-opening .intro-envelope-stage { border-color: transparent; box-shadow: none !important; }
@media (min-width: 900px) {
  .intro-splash { transition: background-color 1s cubic-bezier(.22, 1, .36, 1); }
  .intro-splash.is-opening { background-color: transparent !important; }
}
.intro-seal-hint { z-index: 26; transition: opacity .15s ease-out; }
.intro-seal-hint text { fill: #8c632e; font: 600 21px Cinzel, Georgia, serif; letter-spacing: .26em; text-transform: uppercase; animation: intro-seal-hint 2.4s ease-in-out 1.2s infinite both; }
@keyframes intro-seal-hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.intro-date { color: #8c632e; font: 500 10px/1.6 Cinzel, Georgia, serif; letter-spacing: .26em; text-transform: uppercase; }
@media (max-height: 650px) {
  .intro-couple { padding-top: 4px; }
  .intro-envelope-content .intro-couple__name { font-size: clamp(26px, 8vw, 34px); }
  .intro-couple__join { padding-block: 2px; }
  .intro-couple__and { font-size: 23px; }
}
.family-story__qualification { margin: 9px 0 0; color: #856044; font: italic 17px/1.4 'Cormorant Garamond', Georgia, serif; }
.family-story__intro { text-wrap: balance; }
.wedding-details--personal { height: auto; min-height: 0; }
.wedding-details--personal .wedding-details__content { display: block; width: 100%; max-width: 1180px; height: auto; min-height: 0; padding: 56px 24px 76px; }
.wedding-details--personal .wedding-details__card { height: auto; min-height: 0; }
.wedding-details--personal .wedding-calendar--shared { width: min(100%, 520px); margin: 0 auto 34px; border-radius: 14px; }
.wedding-calendar__legend { margin-top: 16px; color: #856044; font: italic 15px/1.5 'Cormorant Garamond', Georgia, serif; text-align: center; }
.wedding-calendar--shared .is-wedding-day { background: #93651c; border-radius: 50%; }
.wedding-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wedding-event { min-width: 0; display: flex; flex-direction: column; padding: 30px 24px 24px; border: 1px solid #a9772c47; border-radius: 16px; background: linear-gradient(135deg, #fffdf89c, #f6e6ca55); }
.wedding-event__eyebrow { color: #94621d; font: 600 10px/1.5 Cinzel, Georgia, serif; text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.wedding-event__title { color: #4a301d; font: 500 36px/1.25 'Cormorant Garamond', Georgia, serif; text-align: center; margin: 8px 0; }
.wedding-event__date { color: #68401a; font: 22px/1.4 'Cormorant Garamond', Georgia, serif; text-align: center; margin-bottom: 20px; }
.wedding-event .wedding-fact { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 0; align-items: start; }
.wedding-event .wedding-fact > svg { width: 38px; height: 38px; padding: 9px; }
.wedding-event .wedding-fact p { font-size: 9px; }
.wedding-event .wedding-fact h4 { color: #38251a; margin-top: 7px; font: 500 23px/1.3 'Cormorant Garamond', Georgia, serif; text-wrap: balance; overflow-wrap: break-word; }
.wedding-event .wedding-fact span { color: #68401a; display: block; margin-top: 7px; font: 18px/1.4 'Cormorant Garamond', Georgia, serif; }
.wedding-event__venue { flex: 1; }
.wedding-event__actions { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px; }
.wedding-event__actions .wedding-calendar__action, .wedding-event__actions .wedding-directions { width: 100%; margin: 0; min-height: 42px; }
.wedding-event .wedding-map { width: 100%; margin: 0; }
.wedding-event .wedding-map__frame { height: 210px; min-height: 0; }
.wedding-map__search { min-height: 210px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; text-decoration: none; color: #80501d; background: #fffaf180; }
.wedding-map__search span { font: 21px/1.4 'Cormorant Garamond', Georgia, serif; }
.wedding-map__search small { font: 12px/1.5 Georgia, serif; text-decoration: underline; text-underline-offset: 3px; }
.wedding-event .wedding-map__heading { gap: 8px; }
.wedding-event .wedding-map__heading > span { color: #68401a; font: 14px/1.3 'Cormorant Garamond', Georgia, serif; }
.wedding-blessing-mark { display: block; color: #9d681e; font: 46px/1 Georgia, serif; margin-bottom: 20px; }
@media (max-width: 699px) {
  .wedding-events { grid-template-columns: 1fr; gap: 24px; }
  .wedding-details--personal .wedding-details__content { padding: 54px 20px 58px; max-width: 520px; }
  .wedding-event { padding: 26px 18px 20px; }
  .wedding-event__title { font-size: 32px; }
  .invitation-hero__name { font-size: clamp(23px, 6.7vw, 37px); }
}
@media (min-width: 700px) and (max-width: 899px) {
  .wedding-details--personal .wedding-details__content { padding-left: 24px; padding-right: 24px; }
  .wedding-events { gap: 18px; }
  .wedding-event { padding-left: 18px; padding-right: 18px; }
}

/* Warm ivory, antique gold, and generous spacing carry the invitation into its practical details. */
:root { --invite-ink: #49301f; --invite-gold: #906122; --invite-paper: #fcf7ee; }
html { scroll-padding-top: 76px; }
.invitation-shell :is(a, button, input):focus-visible { outline: 2px solid var(--invite-gold); outline-offset: 5px; }
.invitation-shell :is(section, article)[id] { scroll-margin-top: 0; }
.hero-date-note { display: flex; flex-direction: column; align-items: center; gap: 9px; width: fit-content; margin: 25px auto 0; padding: 5px 12px; color: #573519; text-decoration: none; }
.hero-date-note > span { font: 600 12px/1.5 Cinzel, Georgia, serif; letter-spacing: .16em; }
.hero-date-note small { font: italic 15px/1.5 'Cormorant Garamond', Georgia, serif; }
.hero-date-note:hover small { text-decoration: underline; text-underline-offset: 4px; }
.guest-nav { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px 64px; min-height: 66px; background: #fcf7eef5; border-bottom: 1px solid #a9772c30; box-shadow: 0 5px 20px #49301f08; }
.guest-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; color: var(--invite-ink); font: 600 10px/1.3 Cinzel, Georgia, serif; letter-spacing: .1em; text-decoration: none; white-space: nowrap; border-radius: 30px; transition: background .2s, color .2s; }
.guest-nav a:hover { background: #93651c12; }
.guest-guide { padding: 76px 24px 65px; color: var(--invite-ink); background: radial-gradient(ellipse at 50% 0, #f1e2c9a3, transparent 70%), var(--invite-paper); text-align: center; border-bottom: 1px solid #a9772c26; }
.guest-guide__eyebrow { margin: 0 0 17px; font: 600 10px/1.6 Cinzel, Georgia, serif; letter-spacing: .18em; color: var(--invite-gold); text-wrap: balance; }
.guest-guide h2 { margin: 0; font: 500 clamp(34px, 4vw, 52px)/1.1 'Cormorant Garamond', Georgia, serif; text-wrap: balance; }
.guest-guide__intro { margin: 18px auto 34px; max-width: 420px; font: 19px/1.5 'Cormorant Garamond', Georgia, serif; color: #795a42; text-wrap: balance; }
.guest-guide__events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; border-block: 1px solid #a9772c45; }
.guest-guide__event { display: flex; align-items: center; gap: 22px; text-align: left; padding: 28px 30px; color: inherit; text-decoration: none; transition: background .2s; }
.guest-guide__event + .guest-guide__event { border-left: 1px solid #a9772c45; }
.guest-guide__event:hover { background: #a9772c09; }
.guest-guide__date { display: flex; flex: 0 0 56px; flex-direction: column; text-align: center; color: var(--invite-gold); }
.guest-guide__date > span { font: 600 10px/1.4 Cinzel, Georgia, serif; letter-spacing: .17em; text-transform: uppercase; }
.guest-guide__date strong { font: 500 48px/1.1 'Cormorant Garamond', Georgia, serif; }
.guest-guide__event-copy { display: flex; flex: 1; flex-direction: column; gap: 7px; font: 17px/1.3 'Cormorant Garamond', Georgia, serif; }
.guest-guide__event-copy strong { font-size: 28px; font-weight: 500; }
.guest-guide__event-copy .guest-guide__day { font: 11px/1.4 Georgia, serif; color: #795a42; }
.guest-guide__arrow { color: var(--invite-gold); font: 24px Georgia, serif; }
.guest-guide__footnote { margin: 26px 0 0; color: #795a42; font: italic 17px/1.5 'Cormorant Garamond', Georgia, serif; }
.wedding-details--personal .wedding-details__content { padding-top: 70px; padding-bottom: 90px; }
.wedding-details--personal .wedding-calendar--shared { background: #fffaf3bf; border-color: #a9772c3d; margin-bottom: 44px; }
.wedding-event { position: relative; padding: 38px 30px 28px; background: linear-gradient(155deg, #fffcf6f2, #faf0dfed); border-color: #a9772c50; border-radius: 18px; box-shadow: 0 14px 42px #49301f09; }
.wedding-event::before { content: ''; position: absolute; top: 0; left: 35%; right: 35%; height: 2px; background: linear-gradient(90deg, transparent, #b48a45, transparent); }
.wedding-event__eyebrow { font-size: 10px; letter-spacing: .12em; }
.wedding-event__title { margin: 12px 0 8px; font-size: 42px; }
.wedding-event__date { margin-bottom: 20px; }
.wedding-event .wedding-fact p { font-size: 10px; letter-spacing: .16em; }
.wedding-event__actions { gap: 12px; margin-top: 22px; }
.wedding-event__actions .wedding-directions { min-height: 48px; background: #49301f; color: #fffaf2; border-color: #49301f; box-shadow: none; transition: background .2s; }
.wedding-event__actions .wedding-directions:hover { background: #77512b; }
.wedding-event__actions .wedding-calendar__action { justify-content: center; min-height: 44px; border: 1px solid #a9772c50; border-radius: 28px; font-size: 10px; }
.wedding-event .wedding-map__heading { flex-wrap: wrap; row-gap: 12px; }
.wedding-event .wedding-map__heading > span { font-size: 16px; }
.wedding-event .wedding-map__heading a { min-height: 36px; display: inline-flex; align-items: center; }
.rsvp-card__welcome p, .rsvp-note { font-size: 16px; line-height: 1.5; }
.rsvp-section__header > span { font-size: 18px; line-height: 1.5; }
.rsvp-field > span, .rsvp-guests > p, .rsvp-meal legend { font-size: 10px; line-height: 1.5; }
.rsvp-counter__label strong, .rsvp-meal__copy strong { font-size: 18px; line-height: 1.2; }
.rsvp-counter__label small, .rsvp-meal__copy small, .rsvp-meal__copy em { font-size: 12px; line-height: 1.4; }
.rsvp-counter__controls { gap: 0; }
.rsvp-counter__controls button { min-width: 44px; min-height: 44px; }
.rsvp-counter__controls output { min-width: 20px; }
.rsvp-meal label:has(input:focus-visible) { outline: 2px solid var(--invite-gold); outline-offset: 3px; }
.rsvp-card > button { font-size: 10px; min-height: 52px; }
@media (max-width: 699px) {
  .guest-nav { gap: 4px; padding: 8px 58px 8px 8px; min-height: 60px; }
  .guest-nav a { padding-inline: 12px; font-size: 9px; letter-spacing: .02em; }
  .guest-guide { padding: 52px 24px 42px; }
  .guest-guide__events { grid-template-columns: 1fr; }
  .guest-guide__event { padding: 24px 6px; gap: 18px; }
  .guest-guide__event + .guest-guide__event { border-left: 0; border-top: 1px solid #a9772c30; }
  .guest-guide__intro { font-size: 18px; margin-bottom: 28px; }
  .guest-guide__eyebrow { font-size: 9px; }
  .hero-date-note { margin-top: 19px; gap: 5px; }
  .hero-date-note > span { font-size: 10px; letter-spacing: .11em; }
  .hero-date-note small { font-size: 14px; }
  .wedding-event { padding: 30px 18px 20px; }
  .wedding-event__title { font-size: 36px; }
  .wedding-event__eyebrow { font-size: 9px; }
  .wedding-details--personal .wedding-details__content { padding: 56px 18px 64px; }
  .rsvp-card { padding-inline: 18px; }
  .rsvp-counter { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html, html.scroll-smooth { scroll-behavior: auto !important; }
  .invitation-shell *, .intro-splash * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-falling-leaves { display: none; }
}

/* Mobile hero: give the couple's names room to breathe below the quote. */
@media (max-width: 899px) {
  .invitation-hero__heading .invitation-hero__groom { margin-top: clamp(34px, 6svh, 52px); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .invitation-hero__heading .invitation-hero__groom { margin-top: 24px; }
}