/* An uninterrupted invitation, with generous controls and touch feedback. */
.reading-progress { top: 0; }
#invitation { scroll-margin-top: 0; }
#invitation > section { scroll-margin-top: 24px; }
.hero { min-height: max(760px, 100svh); }
.hero-family-line {
  width: min(430px, 100%); margin: -6px auto 6px; color: #f0f5ff;
  filter: drop-shadow(0 2px 5px #102c6640);
}
.hero-family-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-family-line text { fill: currentColor; font: 500 31px var(--serif); letter-spacing: .01em; }

/* A small keepsake portrait beneath the couple's names. */
.couple-portrait { width: 224px; max-width: 70%; margin: 25px auto 23px; }
.couple-portrait-frame {
  position: relative; padding: 7px; border: 1px solid #f3f8ff;
  border-radius: 120px 120px 13px 13px;
  background: linear-gradient(135deg, #f4f9ff, #a1b8d5 34%, #dceaff 56%, #8fa9cf 78%, #e8f3ff);
  box-shadow: 0 0 0 3px #153575, 0 0 0 4px #b9d3f178, 0 12px 26px #071d4c55;
}
.couple-portrait-frame::after {
  content: ''; position: absolute; inset: 4px; border: 1px solid #f2f8ffb3;
  border-radius: 116px 116px 9px 9px; pointer-events: none;
}
.couple-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.08;
  object-fit: cover; object-position: 33% 50%; border-radius: 112px 112px 7px 7px;
}
.portrait-butterfly {
  position: absolute; z-index: 3; width: 46px; height: 46px;
  pointer-events: none; filter: drop-shadow(0 3px 3px #081e5e55);
  --wing-speed: 1.7s; --wing-delay: -.4s; opacity: 0;
  --flight-duration: 3.8s; --flight-delay: 0s;
}
.portrait-butterfly-left { left: 1px; top: 15px; --perch-angle: -28deg; --flight-bank: 22deg; transform: rotate(var(--perch-angle)); filter: saturate(.65) brightness(1.2) drop-shadow(0 3px 3px #081e5e55); }
.portrait-butterfly-right { right: -1px; top: 8px; width: 50px; height: 50px; --perch-angle: 25deg; --flight-bank: -25deg; transform: rotate(var(--perch-angle)); --wing-speed: 1.95s; --wing-delay: -1.2s; --flight-duration: 4.1s; --flight-delay: .2s; }
.portrait-butterfly .butterfly-wings { transform: none; }
.portrait-butterfly .natural-wing-left { animation-name: portrait-wing-left; }
.portrait-butterfly .natural-wing-right { animation-name: portrait-wing-right; }
.couple-portrait:hover .portrait-butterfly .natural-wing { animation-duration: .65s; }
.couple-portrait[data-portrait-state="arriving"] .portrait-butterfly {
  animation: portrait-arrive var(--flight-duration) cubic-bezier(.36,.08,.3,1) var(--flight-delay) both;
  will-change: transform, opacity;
}
.couple-portrait[data-portrait-state="arriving"] .natural-wing { animation-duration: .32s; }
.couple-portrait[data-portrait-state="arriving"] .natural-wing-left { animation-name: natural-wing-left; }
.couple-portrait[data-portrait-state="arriving"] .natural-wing-right { animation-name: natural-wing-right; }
.couple-portrait[data-portrait-state="settled"] .portrait-butterfly { opacity: 1; }
.couple-portrait[data-portrait-state="waiting"] .natural-wing,
.portrait-flight-suspended .portrait-butterfly,
.portrait-flight-suspended .natural-wing,
.hero:not(.scene-active) .portrait-butterfly .natural-wing,
body.motion-paused .portrait-butterfly .natural-wing { animation-play-state: paused; }
@keyframes portrait-arrive {
  0% { opacity: 0; transform: translate3d(var(--arrival-x), var(--arrival-y), 0) rotate(var(--flight-bank)) scale(1.22); }
  10% { opacity: 1; }
  34% { transform: translate3d(calc(var(--arrival-x) * .72), calc(var(--arrival-y) * .48), 0) rotate(calc(var(--flight-bank) * -1)) scale(1.14); }
  61% { transform: translate3d(calc(var(--arrival-x) * .36), calc(var(--arrival-y) * .67), 0) rotate(var(--flight-bank)) scale(1.08); }
  84% { transform: translate3d(calc(var(--arrival-x) * .06), -12px, 0) rotate(var(--perch-angle)) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--perch-angle)) scale(1); }
}
@keyframes portrait-wing-left { from { transform: rotateY(-8deg); } to { transform: rotateY(35deg); } }
@keyframes portrait-wing-right { from { transform: rotateY(8deg); } to { transform: rotateY(-35deg); } }
@media (prefers-reduced-motion: reduce) {
  .couple-portrait .portrait-butterfly { animation: none !important; }
  .couple-portrait[data-portrait-state="arriving"] .portrait-butterfly { opacity: 1; }
}

/* A formal date inscription, readable at a glance on a phone. */
.wedding-moment { width: min(100%, 520px); margin: 34px auto 24px; text-align: center; color: #fff; }
.moment-weekday { margin: 0 0 4px; font: italic 500 29px/1.2 var(--serif); color: #d7e8ff; }
.moment-date { display: block; font: 500 clamp(35px, 4.2vw, 52px)/1.2 var(--serif); letter-spacing: -.02em; }
.moment-time { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px auto 0; padding: 13px 12px 15px; border-block: 1px solid #c7ddff88; width: fit-content; min-width: 315px; }
.moment-time time { white-space: nowrap; font: 500 44px/1 var(--serif); }
.moment-time time span { font-size: .55em; letter-spacing: .02em; }
.moment-caption { border-left: 1px solid #c7ddff70; padding-left: 22px; max-width: 160px; font: italic 500 22px/1.15 var(--serif); color: #d7e8ff; text-align: left; }
.hero .scroll-cue { min-height: 64px; padding: 17px 25px; border-radius: 10px; }
.hero .scroll-cue span { font-size: 15px; }

/* Transparent ornament headers, with uninterrupted reading surfaces for names. */
.cathedral-group .sponsor-list { display: grid; gap: 9px; }
.cathedral-group .sponsor-list > div { background: #f6faff; border: 1px solid #c5d8f1; border-radius: 7px; padding: 20px 22px; line-height: 1.45; }
.cathedral-group .sponsor-list > div:nth-child(even) { background: #e8f1ff; }
.cathedral-group .sponsor-list > div:last-child { border: 1px solid #c5d8f1; }
.sponsor-list span { min-width: 0; overflow-wrap: break-word; }
.cathedral-group .ceremony-people { gap: 18px; padding: 0; }
.ceremony-people > div { background: #f6fafff5; border: 1px solid #c5d8f1; border-radius: 7px; padding: 20px; }

.enter-button, .outline-link, .calendar-button, .confirm-button,
#view-guide, .replay-button, .garden-invitation {
  min-height: 66px;
  font-size: 15px;
  line-height: 1.45;
  padding: 18px 27px;
  border-radius: 10px;
  transition: scale .16s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.enter-button { min-width: 310px; }
.outline-link { min-width: 270px; }
.calendar-button { min-width: 400px; }
.enter-button .icon, .confirm-button .icon { width: 29px; height: 29px; }
.text-link { min-height: 52px; font-size: 14px; }
.select-wrap select { min-height: 60px; font-size: 16px; }
.swatch-row { flex-wrap: wrap; justify-content: center; gap: 10px; }
.swatch { width: 52px; height: 52px; flex: 0 0 52px; }
.rsvp-choices label { min-height: 86px; padding: 18px 17px; font-size: 16px; }
.rsvp-choices label > span:nth-of-type(2) { font-size: 15px; line-height: 1.35; }
.rsvp-choices label small { font-size: 12px; line-height: 1.5; }
.rsvp-choices .choice-icon { flex-shrink: 0; }
#guest-options label { min-height: 54px; font-size: 16px; }
.gift-action-label { min-height: 56px; padding: 13px 15px; font-size: 14px; }
.contact-links > a, .contact-links > button {
  min-height: 78px; padding: 16px 23px; font-size: 15px;
  grid-template-rows: 23px 22px; column-gap: 12px;
}
.contact-links > a > span, .contact-links > button > span:last-child { font-size: 13px; }
.coordinator-contact { position: relative; z-index: 2; max-width: 640px; margin: 42px auto 0; }
.coordinator-intro { margin: 0 auto 22px; font-size: 15px; line-height: 1.7; color: #536f9a; text-wrap: balance; }
.coordinator-role { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; color: #5479ad; }
#coordinator-heading { margin: 0; font: 400 clamp(30px, 3vw, 38px)/1.25 var(--serif); color: #234d80; text-wrap: balance; }
.coordinator-contact .contact-links { margin: 26px auto 0; }
.coordinator-contact .contact-links > a { min-width: 225px; }
@media(max-width:650px) {
  .coordinator-contact { margin-top: 34px; }
  .coordinator-intro { max-width: 300px; font-size: 14px; }
  .coordinator-role { font-size: 10px; letter-spacing: .12em; }
  .coordinator-contact .contact-links > a { min-width: 0; }
}
.dialog-close { width: 54px; height: 54px; min-height: 54px; }
footer { padding-bottom: 108px; }
footer button { min-height: 52px; font-size: 13px; }
.experience-controls {
  top: auto; right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  height: auto; padding: 4px; border-radius: 34px;
  box-shadow: 0 5px 20px #173d8826;
  transition: opacity .18s ease, translate .18s ease;
}
.experience-controls button { min-width: 54px; min-height: 52px; height: 52px; padding: 12px 14px; font-size: 13px; }
.gate-bottom button { min-height: 52px; font-size: 12px; padding: 12px 16px; }

:is(button, a.outline-link, .contact-links a, a.text-link) { touch-action: manipulation; }
:is(button, a.outline-link, .contact-links a, a.text-link):active:not(:disabled) { scale: .97; filter: brightness(1.12); }
.rsvp-choices label:active, #guest-options label:active { background-color: #dbeaff; }
.fairy-sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 250; pointer-events: none; }
#welcome > .flutter-performance { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

@media (max-width: 650px) {
  .hero { min-height: 0; }
  .hero-family-line { margin-bottom: 6px; }
  .couple-portrait { width: 190px; margin: 23px auto 24px; }
  .couple-portrait-frame { padding: 6px; }
  .portrait-butterfly-left { top: 11px; width: 39px; height: 39px; }
  .portrait-butterfly-right { top: 6px; width: 43px; height: 43px; }
  .wedding-moment { margin-top: 30px; margin-bottom: 23px; }
  .moment-weekday { font-size: 26px; }
  .moment-date { font-size: clamp(32px, 9vw, 38px); }
  .moment-time { min-width: 0; width: min(100%, 310px); gap: 16px; padding: 14px 8px; margin-top: 15px; }
  .moment-time time { font-size: 39px; }
  .moment-caption { font-size: 20px; max-width: 134px; padding-left: 16px; }
  .hero .scroll-cue { min-height: 62px; padding: 16px 23px; }
  .hero .scroll-cue span { font-size: 14px; }
  .cathedral-group .sponsor-list > div { padding: 18px 16px; gap: 12px; font-size: 23px; }
  .cathedral-group .sponsor-list > .party-pair { gap: 11px; padding: 18px 12px; }
  .ceremony-people > div { padding: 17px 14px; }
  .enter-button { min-width: min(260px, 80vw); min-height: 62px; padding: 15px 17px; font-size: 14px; gap: 11px; }
  .outline-link { min-width: 0; max-width: 310px; min-height: 64px; font-size: 15px; }
  .calendar-button { min-width: 0; width: 100%; min-height: 66px; padding: 15px 16px; font-size: 14px; gap: 10px; }
  .confirm-button, #view-guide, .replay-button, .garden-invitation { min-height: 62px; font-size: 14px; padding: 16px 18px; }
  .gift-action-label { min-height: 54px; font-size: 13px; }
  .contact-links > a, .contact-links > button { min-height: 76px; padding: 15px 18px; font-size: 15px; }
  .experience-controls { top: auto; right: max(13px, env(safe-area-inset-right)); bottom: max(13px, env(safe-area-inset-bottom)); }
  .experience-controls button { width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 12px; }
  .experience-controls .motion-symbol { font-size: 19px; }
  .gate-bottom button { min-height: 48px; font-size: 11px; padding: 10px 13px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .enter-button { min-height: 52px; padding: 10px 19px; font-size: 13px; }
  .gate-bottom button { min-height: 44px; padding: 8px 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(button, a.outline-link, .contact-links a, a.text-link) { transition: none; }
  :is(button, a.outline-link, .contact-links a, a.text-link):active { scale: none; }
}