@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@400;500&family=Mrs+Saint+Delafield&display=swap');

:root { color-scheme: light; font-family: 'Cormorant Garamond', Georgia, serif; color: #171715; background: #e9e8e5; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.invitation { position: relative; width: 100%; height: 100%; height: 100dvh; margin: auto; overflow: hidden; background: #faf9f7; touch-action: none; }
.page { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; visibility: hidden; transform: translateY(100%); transition: transform 550ms cubic-bezier(.22,.68,.12,1), visibility 550ms; background: #fff; }
.page.is-active { visibility: visible; transform: translateY(0); }
.page.is-before { transform: translateY(-100%); }
.page.is-leaving { visibility: visible; }
.video-page { background: #11120f; color: #fff; }
video { width: 100%; height: 100%; object-fit: contain; display: block; }
.script { font-family: 'Mrs Saint Delafield', 'Brush Script MT', cursive; font-weight: 400; line-height: 1.1; }
#welcome-video { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-error { position: absolute; bottom: 90px; left: 20px; right: 20px; text-align: center; color: #fff; }
.countdown-page { display: grid; place-items: center; background: #fff; }
.countdown-content { width: 100%; padding: 35px 20px; text-align: center; }
h1 { margin: 34px 0 8px; font-size: clamp(64px, 20vw, 98px); }
#countdown-title { margin: 0 0 8px; font-family: 'Allura', 'Brush Script MT', cursive; }
.countdown-content .flourish { margin-bottom: 32px; }
.flourish { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 27px; }
.flourish span { width: 68px; height: 1px; background: #7c7b76; }
.flourish img { display: block; width: 64px; height: 64px; object-fit: contain; }
.wedding-date { font-size: 19px; margin: 0 0 20px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 370px; margin: 0 auto; }
.countdown div + div { border-left: 1px solid #24242030; }
.countdown span { display: block; font-size: clamp(32px, 10vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown small { display: block; font-size: 12px; letter-spacing: .04em; margin-top: 12px; }
.artwork-page img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.venue-page, .rsvp-page { display: grid; place-items: center; }
.venue-artwork, .rsvp-artwork { position: relative; width: min(100%, calc(100dvh * 941 / 1672)); aspect-ratio: 941 / 1672; }
.maps-link { position: absolute; left: 20%; top: 53%; width: 62%; height: 7%; min-height: 44px; border-radius: 6px; -webkit-tap-highlight-color: #00000012; }
.maps-link:focus-visible { outline: 2px solid #242420; outline-offset: 3px; }
.rsvp-hotspot { position: absolute; left: 20%; top: 48%; width: 60%; height: 10%; min-height: 44px; background: transparent; border: 0; border-radius: 8px; }
#rsvp-dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 1px solid #b9b5ad; border-radius: 8px; color: #171715; background: #faf9f6; box-shadow: 0 18px 80px #0003; overscroll-behavior: contain; touch-action: pan-y; }
#rsvp-dialog::backdrop { background: #1515119c; backdrop-filter: blur(4px); }
.rsvp-panel { position: relative; padding: 34px 28px 22px; }
.dialog-close { position: absolute; top: 7px; right: 7px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; }
#rsvp-title { margin: 8px 0 0; text-align: center; font-family: 'Allura', 'Brush Script MT', cursive; font-size: clamp(48px, 15vw, 64px); line-height: 1.25; letter-spacing: .02em; }
#rsvp-dialog .flourish { margin-bottom: 20px; gap: 10px; }
#rsvp-dialog .flourish span { width: 54px; }
#rsvp-dialog .flourish img { width: 52px; height: 46px; }
.form-field { display: block; margin-top: 19px; font-size: 21px; }
.form-field input { display: block; width: 100%; margin-top: 7px; padding: 10px 12px; border: 1px solid #b9b5ad; border-radius: 4px; background: #ffffff80; color: #171715; font: inherit; font-size: 20px; }
.form-field input:focus { outline: 1px solid #514f46; outline-offset: 2px; }
.attendance { border: 0; padding: 0; margin: 25px 0; font-size: 20px; }
.attendance legend { margin-bottom: 10px; padding: 0; }
.attendance label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 30px; cursor: pointer; }
.attendance input { width: 20px; height: 20px; margin: 0; accent-color: #242420; }
.submit-rsvp { width: 100%; min-height: 49px; padding: 12px; background: #242420; color: #fff; border: 1px solid #242420; border-radius: 4px; font-size: 21px; letter-spacing: .03em; }
.submit-rsvp:disabled { opacity: .6; cursor: wait; }
.rsvp-status { font-size: 18px; line-height: 1.35; text-align: center; margin: 14px 0 0; }
.rsvp-status:empty { display: none; }
.rsvp-status[data-error='true'] { color: #8a2925; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.page-navigation { position: fixed; bottom: max(17px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 2px 7px; border-radius: 30px; background: #ffffffdf; z-index: 5; box-shadow: 0 1px 10px #0000000d; }
.page-navigation button { border: 0; width: 26px; height: 28px; padding: 0; display: grid; place-items: center; background: transparent; }
.page-navigation button::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #92928b; transition: width .2s; }
.page-navigation button[aria-current='step']::after { width: 14px; border-radius: 4px; background: #242420; }
.next-page { position: fixed; z-index: 5; bottom: max(15px, env(safe-area-inset-bottom)); right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #ffffffdf; color: #242420; line-height: 0; }
.next-page svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 600px) { .invitation { max-width: 480px; box-shadow: 0 0 80px #0002; } .next-page { right: max(16px, calc((100vw - 480px) / 2 + 16px)); } h1 { font-size: 96px; } }
@media (prefers-reduced-motion: reduce) { .page { transition: none; } }
@media (max-height: 520px) { h1 { margin-top: 12px; font-size: 60px; } .wedding-date { margin: 10px 0 16px; } }