:root { --w-ink: #29465d; --w-deep: #203b50; --w-coral: #dcb66f; --w-paper: #fffaf1; --w-line: rgb(41 70 93 / 18%); --w-sans: 'Segoe UI Variable Text', 'Segoe UI', Arial, sans-serif; --w-name-serif: 'Bodoni MT', Didot, 'Times New Roman', serif; --w-invite-serif: 'Times New Roman', Times, serif; }
@property --hero-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wedding-page { margin: 0; color: var(--w-ink); background: var(--w-paper); font-family: var(--w-sans); font-size: 15px; line-height: 1.6; font-synthesis: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; }
.wedding-couple-name { font-family: var(--w-name-serif); font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.wedding-page h1, .wedding-page h2, .wedding-page h3, .wedding-page p { margin-top: 0; }
.wedding-page h2 { margin-bottom: 1.6rem; font-family: 'Great Vibes', cursive; font-size: clamp(3.5rem, 7vw, 6.8rem); font-weight: 400; line-height: .95; letter-spacing: .01em; }
.wedding-page h2 em { color: var(--w-coral); font-style: normal; }
.wedding-page .skip-link { position: fixed; z-index: 50; top: 1rem; left: 1rem; padding: .7rem 1rem; color: #fff; background: var(--w-deep); transform: translateY(-150%); }
.wedding-page .skip-link:focus { transform: none; }
.wedding-nav { position: fixed; z-index: 40; top: 0; right: 0; left: 0; display: flex; align-items: center; min-height: 4.5rem; padding: .8rem clamp(1.5rem, 5vw, 5rem); overflow: hidden; border-bottom: 1px solid transparent; color: #fff; background: transparent; box-shadow: none; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.wedding-nav::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgb(169 216 245 / 15%), transparent 38%), linear-gradient(90deg, transparent, rgb(255 255 255 / 3%) 50%, transparent); content: ''; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.wedding-nav.is-scrolled { color: #fff; border-bottom-color: rgb(169 216 245 / 22%); background: linear-gradient(105deg, #061a31, var(--w-deep) 48%, #092847); box-shadow: 0 10px 30px rgb(0 0 0 / 24%), inset 0 -1px rgb(255 255 255 / 4%); }
.wedding-nav.is-scrolled::before { opacity: 1; }
.wedding-logo { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: baseline; gap: .22rem; margin: 0; color: inherit; font-family: 'Great Vibes', cursive; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: .01em; text-decoration: none; opacity: 0; transform: translate(-50%, calc(-50% - 1rem)); transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1); pointer-events: none; white-space: nowrap; }
.wedding-nav.is-scrolled .wedding-logo { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.wedding-logo::before, .wedding-logo::after { width: clamp(2rem, 7vw, 6rem); height: 1px; flex: none; background: linear-gradient(90deg, transparent, rgb(169 216 245 / 72%)); content: ''; }
.wedding-logo::after { background: linear-gradient(90deg, rgb(169 216 245 / 72%), transparent); }
.wedding-logo:hover { text-shadow: 0 0 1.3rem rgb(169 216 245 / 38%); }
.wedding-logo span, .footer-mark span { color: var(--w-coral); }
.wedding-logo span { margin: 0 .18em; }
.wedding-links { position: fixed; z-index: 35; right: clamp(1rem, 2vw, 2rem); bottom: max(1.5rem, env(safe-area-inset-bottom)); left: auto; display: grid; gap: .55rem; width: min(14rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid rgb(169 216 245 / 20%); border-radius: 1.35rem; background: linear-gradient(145deg, rgb(13 53 89 / 72%), rgb(5 25 47 / 84%)); box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 8%); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.wedding-links a { position: relative; display: flex; align-items: center; min-height: 3rem; padding: .65rem .85rem; overflow: hidden; border: 1px solid rgb(169 216 245 / 28%); border-radius: .9rem; color: rgb(255 255 255 / 88%); background: rgb(7 29 54 / 44%); box-shadow: inset 0 1px rgb(255 255 255 / 7%); font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: color .25s ease, transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.wedding-links a::before { width: .38rem; height: .38rem; flex: none; margin-right: .75rem; border: 1px solid var(--w-coral); border-radius: 50%; background: rgb(169 216 245 / 8%); content: ''; box-shadow: 0 0 0 .2rem rgb(169 216 245 / 6%); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.wedding-links a span { display: none; }
.wedding-links a::after { position: absolute; top: .55rem; bottom: .55rem; left: 0; width: 2px; border-radius: 2px; background: var(--w-coral); content: ''; transform: scaleY(0); transition: transform .25s ease; }
.wedding-links a:hover { border-color: rgb(169 216 245 / 70%); color: #fff; background: rgb(22 73 112 / 78%); box-shadow: 0 .55rem 1.2rem rgb(0 0 0 / 16%), inset 0 1px rgb(255 255 255 / 10%); transform: translateX(-.3rem); }
.wedding-links a:hover::before { background: var(--w-coral); box-shadow: 0 0 .8rem rgb(169 216 245 / 75%); transform: scale(1.08); }
.wedding-links a:hover::after, .wedding-links a:focus-visible::after { transform: scaleY(1); }
.wedding-links a:focus-visible { outline: 2px solid var(--w-coral); outline-offset: 2px; }
.music-toggle, .nav-toggle { border: 0; color: inherit; background: transparent; font: inherit; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.music-toggle { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.music-toggle span:first-child { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid rgb(169 216 245 / 68%); border-radius: 50%; color: var(--w-coral); background: rgb(169 216 245 / 7%); font-size: 1rem; transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.nav-toggle { display: none; position: absolute; left: clamp(1.5rem, 5vw, 5rem); gap: .27rem; width: 2rem; padding: .35rem 0; }
.nav-toggle span { display: block; width: 1.8rem; height: 1px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded='true'] span:first-child { transform: translateY(.37rem) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:last-child { transform: translateY(-.37rem) rotate(-45deg); }
.wedding-nav .music-toggle { position: fixed; z-index: 35; right: clamp(1rem, 2vw, 2rem); bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 5.05rem); left: auto; width: min(14rem, calc(100vw - 2rem)); min-height: 3.7rem; justify-content: center; padding: .7rem 1rem; border: 1px solid rgb(169 216 245 / 38%); border-radius: 1.15rem; color: #fff; background: linear-gradient(135deg, rgb(15 61 101 / 88%), rgb(6 28 52 / 92%)); box-shadow: 0 .9rem 2rem rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 12%); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.wedding-nav .music-toggle:hover { border-color: rgb(169 216 245 / 75%); background: linear-gradient(135deg, rgb(22 77 117 / 94%), rgb(7 34 63 / 96%)); box-shadow: 0 1rem 2.4rem rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 14%); transform: translateY(-2px); }
.wedding-nav .music-toggle:focus-visible { outline: 2px solid var(--w-coral); outline-offset: 3px; }
.wedding-nav .music-toggle[aria-pressed='true'] span:first-child { color: var(--w-deep); background: var(--w-coral); box-shadow: 0 0 1rem rgb(169 216 245 / 62%); animation: music-pulse 1.8s ease-in-out infinite; }
.wedding-drawer { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; display: none; align-content: start; width: min(86vw, 390px); padding: 2rem clamp(1.5rem, 5vw, 3rem); color: #fff; background: linear-gradient(160deg, #092f5b, #061a31); box-shadow: 1.5rem 0 4rem rgb(0 0 0 / 28%); transform: translateX(-105%); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.wedding-drawer.is-open { transform: translateX(0); }
.drawer-backdrop { position: fixed; z-index: 50; inset: 0; background: rgb(3 16 31 / 58%); backdrop-filter: blur(4px); }
.drawer-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 4rem; }
.drawer-head p { margin: 0; font-family: 'Great Vibes', cursive; font-size: 2.25rem; line-height: 1; }
.drawer-head p span { color: var(--w-coral); }
.drawer-close { border: 0; color: #fff; background: transparent; font-size: 2rem; font-weight: 200; line-height: 1; cursor: pointer; }
.drawer-kicker { margin-bottom: 1.2rem; color: var(--w-coral); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; }
.wedding-drawer .music-toggle { margin-top: 3rem; justify-content: start; }
body.drawer-open { overflow: hidden; }
.wedding-hero { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; color: #fff; background: var(--w-deep); }
.hero-photo, .hero-video, .hero-wash { position: absolute; inset: 0; }
.hero-photo { z-index: 1; background: url('/src/assets/images/HDWD6040.jpg') 58% 58% / cover; animation: hero-in 1.2s ease both; filter: saturate(.88); }
.hero-video { z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-wash { z-index: 2; background: linear-gradient(90deg, rgb(7 29 54 / 64%), rgb(7 29 54 / 20%)), linear-gradient(0deg, rgb(7 29 54 / 62%), transparent 60%); }
.hero-content { position: relative; z-index: 3; width: min(100% - 4rem, 960px); text-align: center; animation: rise-in .9s .25s ease both; }
.hero-kicker, .eyebrow, .hero-date { font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.hero-kicker { margin-bottom: 1.5rem; }
.hero-date { margin: 0 0 2rem; color: var(--w-coral); }
.hero-content h1 { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); margin: 0; font-family: 'Great Vibes', cursive; font-size: clamp(5rem, 9vw, 8.5rem); font-weight: 400; line-height: .85; text-shadow: 0 10px 30px rgb(0 0 0 / 25%); }
.hero-content h1 span { display: inline-block; padding: .18em .03em .2em; margin: -.18em -.03em -.2em; color: transparent; background: linear-gradient(110deg, #fff 25%, #fff 40%, #f6e8d2 47%, #d8b77f 52%, #fff8eb 58%, #fff 68%, #fff 100%); background-size: 280% 100%; background-position: 100% 50%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--w-name-serif); font-size: .64em; font-weight: 500; letter-spacing: .055em; line-height: 1.12; text-transform: uppercase; white-space: nowrap; animation: hero-name-float 5.5s ease-in-out infinite alternate, hero-name-shimmer 8.5s ease-in-out infinite; will-change: transform, text-shadow, background-position; }
.hero-content h1 span:last-child { animation-delay: -2.75s, -3.5s; }
.hero-content h1 i { color: var(--w-coral); font-family: Georgia, 'Times New Roman', serif; font-size: .46em; font-weight: 400; font-style: italic; line-height: 1; text-shadow: 0 0 1.2rem rgb(169 216 245 / 25%); animation: hero-ampersand-glow 3.2s ease-in-out infinite; }
.hero-copy { margin: 2.5rem 0 0; font-size: 1rem; }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: clamp(3rem, 12vh, 7rem); color: inherit; font-size: .65rem; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.scroll-cue__label { opacity: .78; transition: opacity .25s ease; }
.scroll-cue__indicator { position: relative; width: 1.45rem; height: 2.25rem; border: 1px solid rgb(255 255 255 / 72%); border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(169 216 245 / 8%), 0 0 1rem rgb(169 216 245 / 12%); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.scroll-cue__indicator::after { position: absolute; top: .38rem; left: 50%; width: .24rem; height: .42rem; border-radius: 999px; background: var(--w-coral); box-shadow: 0 0 .55rem rgb(169 216 245 / 72%); content: ''; animation: scroll-cue-dot 1.8s ease-in-out infinite; }
.scroll-cue:hover .scroll-cue__label { opacity: 1; }
.scroll-cue:hover .scroll-cue__indicator { border-color: var(--w-coral); box-shadow: inset 0 0 0 1px rgb(169 216 245 / 12%), 0 0 1.25rem rgb(169 216 245 / 28%); transform: translateY(.12rem); }
.scroll-cue:focus-visible { border-radius: .2rem; outline: 2px solid var(--w-coral); outline-offset: .45rem; }
.hero-stamp { position: absolute; top: clamp(5.5rem, 9vw, 8rem); right: 5%; z-index: 3; display: flex; width: 4.2rem; height: 4.2rem; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 55%); border-radius: 50%; font-family: 'Great Vibes', cursive; text-align: center; box-shadow: 0 0 0 .22rem rgb(255 255 255 / 7%), 0 .6rem 1.5rem rgb(0 0 0 / 18%); animation: stamp-spin 14s linear infinite; }
.hero-stamp > img { display: block; width: 100%; height: 100%; flex: 0 0 auto; border-radius: 50%; }
.hero-stamp > span { display: block; width: 72%; font-size: .56rem; line-height: 1.05; white-space: nowrap; }
.hero-stamp > i { display: block; margin: .05rem 0; color: var(--w-coral); font-family: Georgia, serif; font-size: .42rem; font-style: italic; line-height: .8; }
.hero-stamp small { display: block; margin-top: .22rem; font-family: var(--w-sans); font-size: .24rem; font-weight: 600; line-height: 1; letter-spacing: .09em; text-transform: uppercase; }
.section-frame { width: min(100% - 2rem, 1100px); margin: auto; padding: clamp(6rem, 12vw, 12rem) 0; }
.story-section, .details-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(3rem, 9vw, 10rem); }
.story-section { position: relative; width: min(100% - 2rem, 1200px); grid-template-columns: minmax(0, .95fr) auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.story-section::before { position: absolute; z-index: -1; top: 10%; right: -12vw; width: 32rem; height: 32rem; border-radius: 50%; background: radial-gradient(circle, rgb(169 216 245 / 12%), transparent 68%); content: ''; pointer-events: none; }
.story-section .section-intro { align-self: center; }
.story-section .section-intro h2 { max-width: 8ch; margin-bottom: 0; color: var(--w-ink); font-size: clamp(4.5rem, 7vw, 7rem); line-height: .88; }
.story-section .section-intro h2 em { display: block; margin-top: .42em; color: #8fc8ea; font-size: .65em; line-height: .95; }
.story-divider { display: flex; width: 1.5rem; min-height: 27rem; flex-direction: column; align-items: center; justify-content: center; color: #73a9ca; }
.story-divider::before, .story-divider::after { width: 1px; flex: 1; background: linear-gradient(transparent, rgb(115 169 202 / 55%)); content: ''; }
.story-divider::after { background: linear-gradient(rgb(115 169 202 / 55%), transparent); }
.story-divider span { display: grid; width: 2rem; height: 2rem; flex: none; margin: .75rem 0; place-items: center; border: 1px solid rgb(115 169 202 / 28%); border-radius: 50%; font-family: Georgia, serif; font-size: 1rem; transform: rotate(-18deg); }
.details-section .section-intro { order: 2; }
.details-section .details-layout { order: 1; }
.eyebrow { margin-bottom: 1.5rem; color: var(--w-coral); }
.story-copy { align-self: center; max-width: 36rem; padding-top: 0; font-family: 'Times New Roman', Times, serif; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.9; font-kerning: normal; }
.story-copy p { margin-bottom: 2rem; }
.drop-cap::first-letter { float: left; margin: -.2rem .45rem 0 0; color: var(--w-coral); font-family: 'Great Vibes', cursive; font-size: 5rem; line-height: .75; }
.story-signature { margin-top: 3.25rem; font-family: 'Great Vibes', cursive; font-size: 2.35rem; line-height: 1; }
.story-signature strong { display: block; margin-top: .55rem; color: #8fc8ea; font-size: 3.25rem; font-weight: 400; }
.portrait-section { position: relative; min-height: min(75vw, 720px); overflow: hidden; background: var(--w-deep); }
.portrait-video, .portrait-image { position: absolute; inset: 0; }
.portrait-video { z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(.82) brightness(.88); opacity: .9; transform: scale(1.025); }
.portrait-image { z-index: 1; background: url('/src/assets/images/HD%200.jpg') center 42% / cover; filter: saturate(.78); animation: portrait-drift 16s ease-in-out infinite alternate; transform-origin: 52% 48%; will-change: transform; }
.portrait-section::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgb(7 29 54 / 58%), transparent 70%); content: ''; }
.portrait-quote { position: relative; z-index: 3; padding: clamp(4rem, 15vw, 12rem) clamp(1rem, 9vw, 10rem); color: #fff; font-family: 'Great Vibes', cursive; font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: .95; animation: portrait-quote-float 6s ease-in-out infinite alternate; }
.portrait-quote--secondary { position: absolute; right: clamp(1.5rem, 6vw, 7rem); bottom: clamp(3rem, 7vw, 6rem); max-width: 11ch; margin: 0; padding: 0; color: rgb(255 255 255 / 88%); font-size: clamp(2.2rem, 4vw, 4.1rem); line-height: 1.02; text-align: right; text-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 28%); animation-delay: -3s; }
.details-section { position: relative; align-items: start; column-gap: clamp(3rem, 9vw, 10rem); row-gap: clamp(2.5rem, 5vw, 4.5rem); padding-top: clamp(6rem, 10vw, 9rem); padding-bottom: clamp(6rem, 10vw, 9rem); }
.details-section::before { position: absolute; top: 4rem; left: 0; width: 4rem; height: 1px; background: var(--w-coral); content: ''; }
.details-section .section-intro { position: sticky; top: 7rem; order: 1; }
.details-section .details-layout { order: 2; }
.details-section .section-intro h2 { max-width: none; margin-bottom: 1.3rem; font-size: clamp(3.8rem, 6vw, 5.8rem); }
.details-section .section-intro::after { display: block; width: 3.2rem; height: 1px; margin-top: 2rem; background: var(--w-line); content: ''; }
.details-layout { position: relative; padding: .8rem; border: 1px solid rgb(184 137 79 / 24%); background: rgb(255 252 246 / 48%); box-shadow: 0 1.8rem 4.5rem rgb(91 65 54 / 9%); }
.details-layout::before { position: absolute; top: -.45rem; right: 2.25rem; left: 2.25rem; height: 1px; background: linear-gradient(90deg, transparent, #d9a75f, transparent); content: ''; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 1.35rem 1.5rem 1.55rem; border: 0; border-bottom: 1px solid rgb(184 137 79 / 22%); background: transparent; box-shadow: none; }
.countdown div { display: grid; gap: .2rem; padding: .25rem 1rem; text-align: center; }
.countdown div + div { border-left: 1px solid var(--w-line); }
.countdown strong { font-family: 'Great Vibes', cursive; font-size: 3.5rem; font-weight: 400; line-height: 1; }
.countdown span, .event-time { color: var(--w-coral); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.wedding-day-status { margin: .8rem 0 0; padding: 1.5rem; border-top: 1px solid var(--w-line); color: #987044; font-family: 'Great Vibes', cursive; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.2; text-align: center; }
.wedding-day-status[data-state='today'] { color: var(--w-deep); background: linear-gradient(120deg, rgb(169 216 245 / 18%), rgb(242 207 145 / 16%)); }
.event-list { position: relative; display: grid; gap: 1.6rem; margin-top: 2.5rem; padding-left: 1.35rem; }
.event-list::before { position: absolute; top: 1rem; bottom: 1rem; left: .35rem; width: 1px; background: var(--w-line); content: ''; }
.event-list--single { margin-top: .8rem; padding-left: 0; }
.event-list--single::before { display: none; }
.event-list--single .event-item--featured { min-height: 10.5rem; margin: 0; align-items: center; padding: 1.8rem clamp(1.4rem, 4vw, 2.5rem); }
.event-list article { position: relative; display: flex; gap: 1.2rem; }
.event-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; border: 1px solid var(--w-coral); color: var(--w-coral); font-size: .65rem; }
.event-list h3 { margin: .2rem 0 .35rem; font-family: 'Great Vibes', cursive; font-size: 2.5rem; font-weight: 400; line-height: 1; }
.event-list p { margin: 0; font-size: .85rem; }
.event-item--featured { margin: .25rem -.9rem -.25rem; padding: 1.35rem .9rem; border: 1px solid #0c3d67; background: linear-gradient(110deg, #0c3d67, #092847); box-shadow: 0 1rem 2.5rem rgb(7 29 54 / 22%), inset 0 1px rgb(255 255 255 / 16%); }
.event-item--featured .event-icon { color: var(--w-deep); background: var(--w-coral); border-color: var(--w-coral); font-weight: 700; }
.event-item--featured .event-icon { width: 4.2rem; height: 4.8rem; grid-template-rows: auto auto; align-content: center; gap: .05rem; border-radius: 2.2rem 2.2rem 0 0; }
.event-item--featured .event-icon strong { font-family: 'Great Vibes', cursive; font-size: 2rem; font-weight: 400; line-height: .9; }
.event-item--featured .event-icon small { font-size: .48rem; font-weight: 700; letter-spacing: .16em; }
.event-item--featured h3 { color: #fff; font-size: 2.8rem; text-shadow: 0 2px 12px rgb(0 0 0 / 22%); }
.event-item--featured .event-time { color: #d7efff; font-weight: 700; }
.event-item--featured > div > p:last-child { color: #fff; }
.details-layout .event-list article { animation: event-pop-in .6s ease both; }
.details-layout .event-list article:nth-child(2) { animation-delay: .08s; }
.details-layout .event-list article:nth-child(3) { animation-delay: .16s; }
.details-layout .event-list article:nth-child(4) { animation-delay: .24s; }
.text-link { display: inline-flex; gap: .6rem; margin-top: 3rem; border-bottom: 1px solid var(--w-coral); color: var(--w-coral); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.venue-map { grid-column: 1 / -1; order: 3; margin-top: 0; overflow: hidden; border: 1px solid rgb(23 59 92 / 16%); background: #fff; box-shadow: 0 1.5rem 4rem rgb(23 59 92 / 12%); }
.venue-map__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); color: #fff; background: linear-gradient(115deg, #092f5b, var(--w-deep)); }
.venue-map__heading .eyebrow { margin-bottom: .45rem; color: var(--w-coral); }
.venue-map__heading h3 { display: flex; align-items: baseline; gap: clamp(.8rem, 1.5vw, 1.15rem); margin: .15rem 0 .8rem; line-height: 1; }
.venue-map__heading .venue-script { color: #fffaf0; font-family: 'Great Vibes', cursive; font-size: clamp(3rem, 4vw, 3.9rem); font-weight: 400; text-shadow: 0 .35rem 1rem rgb(74 38 24 / 18%); }
.venue-map__heading .venue-name { color: #f2cf91; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 2.7vw, 2.65rem); font-weight: 400; letter-spacing: .12em; text-shadow: 0 .2rem .7rem rgb(74 38 24 / 18%); }
.venue-map__heading p:last-child { max-width: 42rem; margin: 0; color: rgb(255 255 255 / 72%); font-size: .88rem; }
.venue-map__heading .text-link { flex: none; margin: 0; color: var(--w-coral); text-decoration: none; white-space: nowrap; }
.venue-map__frame { position: relative; min-height: 28rem; background: #dce8ef; }
.venue-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-section { padding: 0 clamp(1rem, 6vw, 7rem) clamp(7rem, 13vw, 13rem); }
.gallery-heading { width: min(100%, 1100px); margin: 0 auto 4rem; text-align: center; }
.gallery-heading h2 { margin-bottom: 0; }
.gallery-grid { display: grid; grid-template-columns: 1.1fr .8fr .8fr; gap: 1rem; max-width: 1200px; margin: auto; }
.gallery-image { min-height: 25rem; background-position: center; background-size: cover; }
.gallery-image--one { background-image: url('/src/assets/images/HD%203.jpg'); }
.gallery-image--two { margin-top: 4rem; background-image: url('/src/assets/images/HD%201.jpg'); }
.gallery-image--three { margin-top: 1rem; background-image: url('/src/assets/images/HD%206.jpg'); }
.gallery-image--four { margin-top: -3rem; background-image: url('/src/assets/images/HD%204.jpg'); }
.gallery-image--five { margin-top: 1rem; background-image: url('/src/assets/images/anh-in-khung.jpg'); }
.rsvp-section { position: relative; padding: clamp(6rem, 12vw, 10rem) 1rem; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgb(40 94 135 / 38%), transparent 45%), var(--w-deep); }
.rsvp-section::before, .rsvp-section::after { position: absolute; border: 1px solid rgb(169 216 245 / 16%); border-radius: 50%; content: ''; pointer-events: none; }
.rsvp-section::before { top: -18rem; left: -12rem; width: 38rem; height: 38rem; }
.rsvp-section::after { right: -15rem; bottom: -22rem; width: 46rem; height: 46rem; }
.rsvp-card { position: relative; z-index: 1; width: min(100%, 980px); margin: auto; padding: clamp(2.5rem, 6vw, 5.5rem); border-radius: .25rem; color: var(--w-ink); background: rgb(243 247 250 / 97%); box-shadow: 0 2.5rem 7rem rgb(0 0 0 / 28%); }
.rsvp-card::before { position: absolute; inset: .75rem; border: 1px solid rgb(23 59 92 / 10%); content: ''; pointer-events: none; }
.rsvp-intro { position: relative; max-width: 42rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.rsvp-intro .eyebrow, .rsvp-form-heading .eyebrow, .rsvp-dialog .eyebrow { margin-bottom: .7rem; color: #5685a4; }
.rsvp-ornament { display: block; margin-bottom: .65rem; color: #73a9ca; font-family: Georgia, serif; font-size: 1.35rem; line-height: 1; }
.rsvp-intro h2 { margin-bottom: 1rem; font-family: 'Great Vibes', cursive; font-size: clamp(3.8rem, 7vw, 5.4rem); font-weight: 400; line-height: 1.08; letter-spacing: .01em; text-transform: none; }
.rsvp-lead { max-width: 35rem; margin: 0 auto; color: rgb(23 59 92 / 72%); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.95rem, 2vw, 1.08rem); line-height: 1.8; }
.rsvp-lead .wedding-couple-name { display: inline-block; color: #a97943; font-size: 1.45em; line-height: 1; white-space: nowrap; }
.rsvp-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.85rem, 2vw, 1.25rem); }
.rsvp-option { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; min-height: 8.75rem; padding: 1.5rem 1.6rem; border: 1px solid rgb(23 59 92 / 16%); border-radius: .2rem; color: var(--w-ink); background: rgb(255 255 255 / 58%); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; }
.rsvp-option:hover { border-color: rgb(86 133 164 / 60%); background: #fff; box-shadow: 0 1rem 2.5rem rgb(23 59 92 / 10%); transform: translateY(-3px); }
.rsvp-option:focus-visible { outline: 2px solid #5685a4; outline-offset: 3px; }
.rsvp-option[aria-pressed='true'] { border-color: #73a9ca; background: rgb(169 216 245 / 18%); box-shadow: inset 0 0 0 1px rgb(115 169 202 / 16%), 0 1rem 2.5rem rgb(23 59 92 / 8%); }
.rsvp-option__icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgb(86 133 164 / 45%); border-radius: 50%; color: #5685a4; font-family: Georgia, serif; font-size: 1rem; transition: color .3s ease, background .3s ease, transform .3s ease; }
.rsvp-option[aria-pressed='true'] .rsvp-option__icon { color: #fff; background: #5685a4; transform: scale(1.05); }
.rsvp-option__copy { display: grid; min-width: 0; gap: .45rem; }
.rsvp-option__copy strong { font-family: Arial, 'Segoe UI', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .045em; line-height: 1.45; text-transform: uppercase; }
.rsvp-option__copy small { color: rgb(23 59 92 / 64%); font-family: var(--w-sans); font-size: .86rem; line-height: 1.6; }
.rsvp-option__arrow { color: #5685a4; font-size: 1rem; transition: transform .3s ease; }
.rsvp-option:hover .rsvp-option__arrow { transform: translateX(.25rem); }
.rsvp-form-panel { width: min(calc(100% - 2rem), 760px); max-height: min(78dvh, 700px); padding: clamp(2.5rem, 6vw, 4.5rem); overflow: auto; border: 0; color: var(--w-ink); background: var(--w-paper); box-shadow: 0 2rem 7rem rgb(35 23 16 / 40%); }
.rsvp-form-panel::backdrop { background: rgb(35 23 16 / 64%); backdrop-filter: blur(7px); }
.rsvp-form-panel[open] { animation: rsvp-dialog-in .4s ease both; }
.rsvp-form-panel__close { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; padding: 0; place-items: center; border: 1px solid rgb(103 71 51 / 22%); border-radius: 50%; color: var(--w-ink); background: rgb(255 255 255 / 52%); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease; }
.rsvp-form-panel__close:hover { color: #fff; background: var(--w-ink); transform: rotate(5deg); }
.rsvp-form-panel__close:focus-visible { outline: 2px solid #a97943; outline-offset: 3px; }
.rsvp-form-heading { margin-bottom: 2.75rem; text-align: center; }
.rsvp-form-heading h3, .rsvp-success h3 { margin: 0 0 .7rem; font-family: 'Great Vibes', cursive; font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 400; line-height: 1; }
.rsvp-form-heading > p:last-child { margin: 0; color: rgb(23 59 92 / 68%); font-family: Georgia, 'Times New Roman', serif; }
.rsvp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; text-align: left; }
.rsvp-field { display: grid; align-content: start; gap: .55rem; }
.rsvp-field--wide { grid-column: 1 / -1; }
.rsvp-field label, .rsvp-diet legend { color: rgb(23 59 92 / 72%); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rsvp-field label span { color: #9b4d55; }
.rsvp-field input, .rsvp-field select { width: 100%; min-height: 3.35rem; padding: .7rem .15rem; border: 0; border-bottom: 1px solid rgb(23 59 92 / 28%); border-radius: 0; color: var(--w-ink); background: transparent; font: inherit; font-size: .95rem; outline: none; transition: border-color .25s ease, background .25s ease; }
.rsvp-field input::placeholder { color: rgb(23 59 92 / 42%); }
.rsvp-field input:focus, .rsvp-field select:focus { border-color: #5685a4; background: rgb(169 216 245 / 8%); }
.rsvp-field input[aria-invalid='true'] { border-color: #a34853; background: rgb(163 72 83 / 6%); }
.rsvp-field-error { margin: 0; color: #973f4a; font-size: .72rem; }
.rsvp-diet { grid-column: 1 / -1; margin: .25rem 0 0; padding: 0; border: 0; }
.rsvp-diet legend { margin-bottom: .85rem; padding: 0; }
.rsvp-diet-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rsvp-pill { position: relative; display: block; cursor: pointer; }
.rsvp-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rsvp-pill span { display: flex; align-items: center; min-height: 3.5rem; padding: .85rem 1rem; border: 1px solid rgb(23 59 92 / 16%); color: rgb(23 59 92 / 72%); background: rgb(255 255 255 / 50%); font-size: .82rem; transition: border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease; }
.rsvp-pill input:checked + span { border-color: #73a9ca; color: var(--w-ink); background: rgb(169 216 245 / 18%); box-shadow: inset 0 0 0 1px rgb(115 169 202 / 10%); }
.rsvp-pill input:focus-visible + span { outline: 2px solid #5685a4; outline-offset: 2px; }
.rsvp-pill span::before { width: .55rem; height: .55rem; flex: none; margin-right: .65rem; border: 1px solid #73a9ca; border-radius: 50%; content: ''; transition: background .25s ease, box-shadow .25s ease; }
.rsvp-pill input:checked + span::before { background: #5685a4; box-shadow: inset 0 0 0 2px var(--w-paper); }
.rsvp-vegetarian-count { animation: rsvp-reveal .4s ease both; }
.rsvp-vegetarian-count[hidden] { display: none; }
.button-submit { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: center; justify-content: center; min-width: 15rem; min-height: 3.6rem; margin-top: .8rem; padding: 1rem 1.7rem; border: 1px solid var(--w-ink); color: #fff; background: var(--w-ink); font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; box-shadow: 0 .8rem 1.7rem rgb(23 59 92 / 18%); transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.button-submit:hover:not(:disabled) { color: var(--w-ink); background: transparent; box-shadow: none; transform: translateY(-2px); }
.button-submit:focus-visible, .rsvp-success button:focus-visible, .rsvp-dialog__close:focus-visible, .rsvp-dialog__submit:focus-visible { outline: 2px solid #5685a4; outline-offset: 3px; }
.button-submit:disabled { cursor: wait; opacity: .65; }
.button-submit__arrow { margin-left: 1.1rem; font-size: 1rem; }
.rsvp-form[aria-busy='true'] .button-submit__arrow { animation: rsvp-loading 1s ease-in-out infinite; }
.form-status { grid-column: 1 / -1; min-height: 1.5rem; margin: -.7rem 0 0; color: #973f4a; font-size: .78rem; text-align: center; }
.form-status[data-state='progress'] { color: rgb(23 59 92 / 65%); }
.rsvp-success { padding: 2rem 1rem .5rem; text-align: center; animation: rsvp-reveal .55s ease both; }
.rsvp-success > span { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; place-items: center; border: 1px solid #73a9ca; border-radius: 50%; color: #5685a4; font-size: 1.35rem; }
.rsvp-success p { max-width: 31rem; margin: 0 auto 2rem; color: rgb(23 59 92 / 68%); font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; }
.rsvp-success button { padding: .75rem 0; border: 0; border-bottom: 1px solid #5685a4; color: #5685a4; background: transparent; font: inherit; font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.rsvp-dialog { width: min(calc(100% - 2rem), 600px); padding: clamp(2.5rem, 7vw, 4.5rem); border: 0; color: var(--w-ink); background: var(--w-paper); box-shadow: 0 2rem 7rem rgb(0 0 0 / 38%); text-align: center; }
.rsvp-dialog::backdrop { background: rgb(3 16 31 / 68%); backdrop-filter: blur(7px); }
.rsvp-dialog[open] { animation: rsvp-dialog-in .4s ease both; }
.rsvp-dialog__ornament { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.2rem; place-items: center; border: 1px solid #73a9ca; border-radius: 50%; color: #5685a4; font-family: Georgia, serif; font-size: 1.25rem; }
.rsvp-dialog h2 { margin: 0 0 1.5rem; color: var(--w-ink); font-family: 'Great Vibes', cursive; font-size: clamp(3.4rem, 9vw, 5.5rem); font-weight: 400; line-height: 1; text-transform: none; }
.rsvp-dialog__copy { max-width: 28rem; margin: auto; color: rgb(23 59 92 / 72%); font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; line-height: 1.8; }
/* Use a stable Vietnamese-capable text face throughout RSVP copy. */
.rsvp-lead,
.rsvp-option__copy small,
.rsvp-form-heading > p:last-child,
.rsvp-success p,
.rsvp-dialog__copy {
	font-family: var(--w-sans);
	font-kerning: normal;
	letter-spacing: normal;
}
.rsvp-dialog__copy p:last-child { margin-bottom: 0; color: var(--w-ink); font-style: italic; }
.rsvp-dialog__entry-copy { max-width: 25rem; margin: 0 auto 1.5rem; color: rgb(23 59 92 / 72%); font-size: .9rem; line-height: 1.7; }
.rsvp-decline-form { display: grid; max-width: 24rem; margin: auto; text-align: left; }
.rsvp-decline-form label { color: rgb(23 59 92 / 72%); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rsvp-decline-form label span { color: #9b4d55; }
.rsvp-decline-form input { width: 100%; min-height: 3.4rem; padding: .75rem .15rem; border: 0; border-bottom: 1px solid rgb(23 59 92 / 28%); border-radius: 0; color: var(--w-ink); background: transparent; font: inherit; font-size: .95rem; outline: none; transition: border-color .25s ease, background .25s ease; }
.rsvp-decline-form input:focus { border-color: #5685a4; background: rgb(169 216 245 / 8%); }
.rsvp-decline-form input[aria-invalid='true'] { border-color: #a34853; background: rgb(163 72 83 / 6%); }
.rsvp-decline-form .rsvp-field-error { margin-top: .45rem; }
.rsvp-dialog__status { min-height: 1.4rem; margin: .85rem 0 0; color: #5685a4; font-size: .76rem; text-align: center; }
.rsvp-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.25rem; }
.rsvp-dialog__close, .rsvp-dialog__submit { min-width: 8rem; padding: .85rem 1.5rem; font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .25s ease, background .25s ease, opacity .25s ease; }
.rsvp-dialog__close { border: 1px solid #5685a4; color: #5685a4; background: transparent; }
.rsvp-dialog__submit { border: 1px solid var(--w-ink); color: #fff; background: var(--w-ink); }
.rsvp-dialog__close:hover { color: #fff; background: #5685a4; }
.rsvp-dialog__submit:hover:not(:disabled) { color: var(--w-ink); background: transparent; }
.rsvp-dialog__submit:disabled { cursor: wait; opacity: .62; }
.wedding-footer { display: grid; justify-items: center; gap: .6rem; padding: 4rem 1rem; color: #29465d; background-color: #fbf2d9; background-image: linear-gradient(rgb(251 242 217 / 88%), rgb(251 242 217 / 88%)), url('/src/assets/images/botanical-corner-blue.png'); background-position: center, right 15% center; background-size: auto, min(34rem, 48vw) auto; background-repeat: no-repeat; border-top: 1px solid rgb(41 70 93 / 18%); text-align: center; }
.wedding-footer p { margin: 0; color: rgb(41 70 93 / 68%); font-size: .75rem; }
.wedding-page .footer-mark { font-family: var(--w-name-serif); font-size: min(3rem, 5.5vw); line-height: 1.3; white-space: nowrap; letter-spacing: .025em; }
.footer-date { letter-spacing: .15em; }
/* Warm sunset palette */
.wedding-nav.is-scrolled { color: #654936; border-bottom-color: rgb(199 157 93 / 18%); background: linear-gradient(105deg, #fffdf8, #fbf0d8 48%, #fffaf0); box-shadow: 0 8px 24px rgb(105 77 48 / 10%), inset 0 -1px rgb(255 255 255 / 72%); }
.wedding-nav::before { background: radial-gradient(circle at 50% 0%, rgb(255 238 191 / 30%), transparent 44%), linear-gradient(90deg, transparent, rgb(255 255 255 / 46%) 50%, transparent); }
.wedding-nav.is-scrolled .wedding-logo span { color: #c58a45; }
.wedding-nav.is-scrolled .wedding-logo::before { background: linear-gradient(90deg, transparent, rgb(185 142 81 / 38%)); }
.wedding-nav.is-scrolled .wedding-logo::after { background: linear-gradient(90deg, rgb(185 142 81 / 38%), transparent); }
.wedding-links { padding: 0; border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.wedding-links a { border-color: rgb(244 211 151 / 88%); color: #29465d; background: linear-gradient(115deg, #f5dcaa 5%, #edc786 52%, #e4b36d 100%); background-size: 180% 100%; box-shadow: 0 .85rem 2rem rgb(169 125 68 / 16%), inset 0 1px rgb(255 255 255 / 66%); animation: rsvp-button-glow 3.2s ease-in-out infinite; }
.wedding-links a::before { border-color: #29465d; background: #29465d; box-shadow: 0 0 0 .2rem rgb(255 247 207 / 42%); animation: rsvp-dot-pulse 1.8s ease-in-out infinite; }
.wedding-links a:hover { border-color: #f8dfad; color: #203b50; background: linear-gradient(135deg, #f8e4bc, #efc987); box-shadow: 0 1rem 2.3rem rgb(169 125 68 / 20%), inset 0 1px rgb(255 255 255 / 76%); }
.wedding-links a:hover::before { background: #f8d18d; box-shadow: 0 0 .8rem rgb(255 216 148 / 68%); }
.wedding-nav .music-toggle { border-color: rgb(247 220 169 / 90%); color: #29465d; background: linear-gradient(135deg, #f8e4bb, #edca8d); box-shadow: 0 .9rem 2rem rgb(169 125 68 / 14%), inset 0 1px rgb(255 255 255 / 72%); }
.wedding-nav .music-toggle span:first-child { border-color: rgb(41 70 93 / 38%); color: #29465d; background: rgb(255 255 255 / 24%); }
.wedding-nav .music-toggle:hover { border-color: #f9e4ba; background: linear-gradient(135deg, #fbebcc, #f0cf94); box-shadow: 0 1rem 2.4rem rgb(169 125 68 / 18%), inset 0 1px rgb(255 255 255 / 82%); }
.wedding-nav .music-toggle[aria-pressed='true'] span:first-child { color: #765548; background: #f8d18d; box-shadow: 0 0 1rem rgb(255 215 145 / 58%); }
.wedding-drawer { color: #29465d; background-color: #fbf2d9; background-image: linear-gradient(rgb(251 242 217 / 84%), rgb(251 242 217 / 84%)), url('/src/assets/images/botanical-corner-blue.png'); background-position: center, right bottom; background-size: auto, 120% auto; background-repeat: no-repeat; }
.wedding-drawer .drawer-close { color: #29465d; }
.wedding-drawer .drawer-kicker { color: #b2874d; }
.wedding-hero { background: #203b50; }
.hero-photo { filter: saturate(.94) sepia(.08) brightness(1.06); }
.hero-wash { background: radial-gradient(circle at 50% 18%, rgb(255 215 145 / 24%), transparent 52%), linear-gradient(90deg, rgb(91 61 43 / 30%), rgb(225 174 100 / 6%), rgb(91 61 43 / 26%)), linear-gradient(0deg, rgb(79 52 39 / 34%), transparent 58%); }
.hero-date { color: #a4572f; font-weight: 700; text-shadow: 0 1px 8px rgb(255 244 218 / 42%), 0 1px 2px rgb(87 50 32 / 18%); }
.portrait-section { background: #203b50; }
.portrait-image { filter: saturate(.9) sepia(.1) brightness(1.07); }
.portrait-section::after { background: radial-gradient(circle at 50% 28%, rgb(255 218 151 / 20%), transparent 52%), linear-gradient(90deg, rgb(83 55 42 / 38%), rgb(208 157 91 / 5%) 48%, rgb(83 55 42 / 30%)); }
.event-item--featured { border-color: #c17d4d; background: linear-gradient(110deg, #b87348, #71442f); box-shadow: 0 1rem 2.5rem rgb(92 49 29 / 22%), inset 0 1px rgb(255 248 235 / 20%); }
.event-item--featured .event-time { color: #f2dfbd; }
.story-section .section-intro h2 em, .story-signature strong { color: #c89f64; }
.story-section::before { background: radial-gradient(circle, rgb(216 180 119 / 13%), transparent 68%); }
.story-divider, .countdown span, .event-time, .text-link, .venue-map__heading .eyebrow { color: #b8894f; }
.story-divider::before, .story-divider::after { background: linear-gradient(transparent, rgb(184 137 79 / 52%)); }
.story-divider::after { background: linear-gradient(rgb(184 137 79 / 52%), transparent); }
.story-divider span { border-color: rgb(184 137 79 / 32%); }
.venue-map__heading { background: radial-gradient(circle at 12% 0%, rgb(222 179 106 / 23%), transparent 34%), linear-gradient(115deg, #294d66, #203b50 62%, #172e40); }
.venue-map__frame { background: #f3dfc5; }
.rsvp-section { background: radial-gradient(circle at 50% 0%, rgb(255 255 255 / 72%), transparent 46%), linear-gradient(135deg, #fff8e8, #f8edcf 56%, #f4e6c5); }
.rsvp-section::before { top: 0; right: 0; left: auto; width: min(38rem, 58vw); height: min(48rem, 88%); border: 0; border-radius: 0; background: url('/src/assets/images/botanical-corner-blue.png') right top / contain no-repeat; opacity: .13; filter: grayscale(1) sepia(.15); }
.rsvp-section::after { right: auto; bottom: -5rem; left: -4rem; width: min(28rem, 46vw); height: min(36rem, 65%); border: 0; border-radius: 0; background: url('/src/assets/images/botanical-corner-blue.png') right bottom / contain no-repeat; opacity: .09; filter: grayscale(1) sepia(.15); transform: rotate(180deg); }
.rsvp-card { border: 1px solid rgb(41 70 93 / 10%); background: rgb(255 251 241 / 94%); box-shadow: 0 2.5rem 7rem rgb(41 70 93 / 14%); backdrop-filter: blur(2px); }
.rsvp-intro .eyebrow, .rsvp-form-heading .eyebrow, .rsvp-dialog .eyebrow, .rsvp-ornament, .rsvp-option__arrow { color: #a97943; }
.rsvp-lead { color: rgb(103 71 51 / 72%); }
.rsvp-option { border-color: rgb(151 105 69 / 22%); color: #674733; background: rgb(255 252 247 / 58%); }
.rsvp-option:hover { border-color: rgb(185 137 79 / 58%); background: #fffdfa; box-shadow: 0 1rem 2.5rem rgb(103 71 51 / 9%); }
.rsvp-option:focus-visible { outline-color: #b8894f; }
.rsvp-option__icon { border-color: rgb(184 137 79 / 52%); color: #a97943; background: rgb(240 194 123 / 7%); }
.rsvp-option__copy small { color: rgb(103 71 51 / 66%); }
.rsvp-option[aria-pressed='true'], .rsvp-pill input:checked + span { border-color: #c49a63; background: rgb(216 180 119 / 18%); }
.rsvp-option[aria-pressed='true'] .rsvp-option__icon { color: #fff; background: #9b6f42; }

/* Refined save-the-date composition */
.details-section {
	width: min(100% - 3rem, 1180px);
	isolation: isolate;
}
.details-section::before {
	top: 4.25rem;
	width: 3.5rem;
	background: linear-gradient(90deg, #d8a55e, rgb(216 165 94 / 18%));
}
.details-section::after {
	position: absolute;
	z-index: -1;
	top: 12%;
	right: -12%;
	width: min(38vw, 32rem);
	height: min(38vw, 32rem);
	border-radius: 50%;
	background: radial-gradient(circle, rgb(232 195 135 / 14%), transparent 68%);
	content: '';
	pointer-events: none;
}
.details-section .section-intro {
	padding: 1.25rem 0 0 clamp(.25rem, 2vw, 1.5rem);
}
.details-section .section-intro .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: 1.15rem;
	color: #b77b3f;
}
.details-section .section-intro .eyebrow::after {
	width: 2.5rem;
	height: 1px;
	background: linear-gradient(90deg, #d5a15e, transparent);
	content: '';
}
.details-section .section-intro h2 {
	color: #684836;
	line-height: .9;
	text-shadow: 0 .35rem 1.5rem rgb(105 69 46 / 7%);
}
.details-section .section-intro h2 em {
	display: block;
	margin-top: .18rem;
	color: #e9b968;
	font-size: clamp(2.15rem, 3.2vw, 3.25rem);
	line-height: 1.05;
	text-wrap: balance;
}
.details-section .section-intro::after {
	width: 4.5rem;
	background: linear-gradient(90deg, rgb(104 72 54 / 30%), transparent);
}
.details-layout {
	padding: .7rem;
	overflow: hidden;
	border-color: rgb(184 137 79 / 28%);
	border-radius: .15rem;
	background: linear-gradient(145deg, rgb(255 254 250 / 88%), rgb(255 246 232 / 62%));
	box-shadow: 0 2rem 5rem rgb(91 65 54 / 12%), 0 .2rem .75rem rgb(91 65 54 / 5%), inset 0 1px rgb(255 255 255 / 92%);
}
.details-layout::before {
	top: 0;
	right: 3rem;
	left: 3rem;
	background: linear-gradient(90deg, transparent, #d9a75f 22%, #f4d69b 50%, #d9a75f 78%, transparent);
}
.details-layout::after {
	position: absolute;
	inset: .42rem;
	z-index: 2;
	border: 1px solid rgb(184 137 79 / 9%);
	content: '';
	pointer-events: none;
}
.details-layout .countdown {
	min-height: 8.4rem;
	align-items: center;
	padding: 1.25rem 1.1rem 1.4rem;
	background: linear-gradient(180deg, rgb(255 255 255 / 50%), transparent);
}
.details-layout .countdown div {
	position: relative;
	gap: .35rem;
}
.details-layout .countdown strong {
	color: #71513f;
	font-size: clamp(3.1rem, 4.2vw, 3.8rem);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 .3rem .8rem rgb(105 69 46 / 8%);
}
.details-layout .countdown span {
	font-weight: 650;
	letter-spacing: .18em;
}
.details-layout .event-item--featured {
	position: relative;
	align-items: center;
	gap: clamp(1.15rem, 2.5vw, 1.75rem);
	min-height: 11rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	overflow: hidden;
	border-color: rgb(233 198 132 / 48%);
	background: radial-gradient(circle at 8% 0%, rgb(226 180 96 / 22%), transparent 34%), linear-gradient(118deg, #315873 0%, #29485f 52%, #20394d 100%);
	box-shadow: 0 1rem 2.7rem rgb(14 34 49 / 24%), inset 0 1px rgb(255 246 219 / 16%);
}
.details-layout .event-item--featured::before {
	position: absolute;
	top: -80%;
	right: 12%;
	width: 7rem;
	height: 260%;
	background: linear-gradient(90deg, transparent, rgb(255 238 203 / 8%), transparent);
	content: '';
	pointer-events: none;
	transform: rotate(18deg);
}
.details-layout .event-item--featured::after {
	position: absolute;
	right: 1.1rem;
	bottom: -.7rem;
	color: rgb(255 239 208 / 6%);
	content: '24';
	font-family: 'Great Vibes', cursive;
	font-size: 7.5rem;
	line-height: 1;
	pointer-events: none;
}
.details-layout .event-item--featured > * {
	position: relative;
	z-index: 1;
}
.details-layout .event-icon {
	width: 4.35rem;
	height: 5rem;
	border-color: #f1c87f;
	background: linear-gradient(155deg, #f8d793, #efbd69);
	box-shadow: 0 .75rem 1.6rem rgb(62 32 20 / 22%), inset 0 1px rgb(255 253 241 / 65%);
}
.details-layout .event-item--featured > div { display: grid; min-width: 0; align-content: center; }
.details-layout .event-item--featured .event-kicker { margin: 0 0 .35rem; color: #f4dfbd; font-size: .63rem; font-weight: 700; letter-spacing: .2em; line-height: 1.3; text-transform: uppercase; }
.details-layout .event-item--featured h3 {
	margin: 0 0 .6rem;
	font-size: clamp(2.45rem, 3.5vw, 3.05rem);
	line-height: 1;
}
.details-layout .event-item--featured .event-date-primary { color: #fffaf0; font-family: var(--w-name-serif); font-size: clamp(2rem, 3.1vw, 2.8rem); font-weight: 500; letter-spacing: .025em; line-height: 1.05; text-shadow: 0 .25rem .9rem rgb(54 28 19 / 20%); }
.details-layout .event-item--featured .event-date-primary span { display: inline-block; margin-left: .2em; color: #f5dfbb; font-family: var(--w-sans); font-size: .34em; font-weight: 650; letter-spacing: .08em; vertical-align: .28em; white-space: nowrap; }
.details-layout .event-item--featured > div > p:last-child {
	max-width: 29rem;
	color: rgb(255 255 255 / 86%);
	font-size: .8rem;
	line-height: 1.55;
}
/* Keep every occurrence of the couple's name in the Save-the-Date serif. */
.wedding-page .wedding-couple-name {
	font-family: var(--w-name-serif);
	font-weight: 500;
	letter-spacing: .055em;
	text-transform: uppercase;
}
/* Classic navy invitation typography for the RSVP content. */
.rsvp-card,
.rsvp-form-panel,
.rsvp-dialog {
	--rsvp-blue: #294f6d;
	--rsvp-blue-soft: #5f7d93;
	--rsvp-line: rgb(41 79 109 / 25%);
	color: var(--rsvp-blue);
}
.rsvp-option__copy strong,
.rsvp-option__copy small,
.rsvp-lead,
.rsvp-form-heading > p:last-child,
.rsvp-field label,
.rsvp-field input,
.rsvp-field select,
.rsvp-diet legend,
.rsvp-pill span,
.rsvp-success p,
.rsvp-dialog__entry-copy,
.rsvp-dialog__copy,
.rsvp-decline-form label,
.rsvp-decline-form input {
	font-family: var(--w-invite-serif);
}
.rsvp-option__copy strong { color: var(--rsvp-blue); font-size: .95rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.rsvp-option__copy small,
.rsvp-lead,
.rsvp-form-heading > p:last-child,
.rsvp-success p,
.rsvp-dialog__entry-copy,
.rsvp-dialog__copy { color: var(--rsvp-blue-soft); }
.rsvp-field label,
.rsvp-diet legend,
.rsvp-decline-form label { color: var(--rsvp-blue); font-weight: 700; letter-spacing: .11em; }
.rsvp-field input,
.rsvp-field select,
.rsvp-decline-form input { border-bottom-color: var(--rsvp-line); color: var(--rsvp-blue); font-size: 1rem; }
.rsvp-field input::placeholder,
.rsvp-decline-form input::placeholder { color: rgb(41 79 109 / 46%); }
.rsvp-option__icon,
.rsvp-option__arrow,
.rsvp-ornament,
.rsvp-success > span,
.rsvp-dialog__ornament { border-color: rgb(41 79 109 / 38%); color: var(--rsvp-blue); }
.rsvp-option:hover { border-color: rgb(41 79 109 / 52%); }
.rsvp-option[aria-pressed='true'],
.rsvp-pill input:checked + span { border-color: rgb(41 79 109 / 52%); background: rgb(41 79 109 / 8%); }
.rsvp-option[aria-pressed='true'] .rsvp-option__icon { background: var(--rsvp-blue); }
.rsvp-pill span { border-color: rgb(41 79 109 / 20%); color: var(--rsvp-blue); }
.rsvp-pill span::before { border-color: #4f7c9d; }
.rsvp-pill input:checked + span::before { background: var(--rsvp-blue); }
.button-submit { border-color: var(--rsvp-blue); background: var(--rsvp-blue); font-family: var(--w-invite-serif); }
.button-submit:hover:not(:disabled) { color: var(--rsvp-blue); }
/* Sunset stationery cards with a subtle botanical print. */
.venue-map__heading {
	color: #29465d;
	background-color: #edc987;
	background-image: linear-gradient(105deg, rgb(250 232 192 / 96%), rgb(239 204 139 / 91%)), url('/src/assets/images/botanical-corner-blue.png');
	background-position: center, right 8% center;
	background-size: auto, min(29rem, 44vw) auto;
	background-repeat: no-repeat;
}
.venue-map__heading .eyebrow { color: #a97833; }
.venue-map__heading .venue-script { color: #29465d; text-shadow: none; }
.venue-map__heading .venue-name { color: #9f702f; text-shadow: none; }
.venue-map__heading p:last-child { color: rgb(41 70 93 / 76%); }
.venue-map__heading .text-link { border-bottom-color: #a97833; color: #29465d; }
.details-layout .event-item--featured {
	border-color: rgb(203 157 84 / 38%);
	background-color: #edc987;
	background-image: linear-gradient(110deg, rgb(249 227 184 / 97%) 0%, rgb(239 202 133 / 92%) 66%, rgb(231 185 111 / 86%) 100%), url('/src/assets/images/botanical-corner-blue.png');
	background-position: center, right center;
	background-size: auto, min(22rem, 48%) auto;
	background-repeat: no-repeat;
	box-shadow: 0 1rem 2.7rem rgb(169 125 68 / 16%), inset 0 1px rgb(255 255 255 / 58%);
}
.details-layout .event-item--featured::before { background: linear-gradient(90deg, transparent, rgb(255 251 231 / 24%), transparent); }
.details-layout .event-item--featured::after { color: rgb(41 70 93 / 8%); }
.details-layout .event-item--featured .event-kicker { color: #9b6c2e; }
.details-layout .event-item--featured .event-date-primary { color: #29465d; text-shadow: none; }
.details-layout .event-item--featured .event-date-primary span { color: #365b73; }
.details-layout .event-item--featured > div > p:last-child { color: rgb(41 70 93 / 78%); }
.details-layout .event-icon { border-color: rgb(156 108 43 / 32%); color: #29465d; background: linear-gradient(155deg, #fff0c8, #efc873); box-shadow: 0 .75rem 1.6rem rgb(169 125 68 / 18%), inset 0 1px rgb(255 255 255 / 72%); }
@keyframes hero-in { from { transform: scale(1.06); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes rise-in { from { transform: translateY(1.5rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scroll-cue-dot {
	0% { opacity: 0; transform: translate(-50%, 0); }
	20% { opacity: 1; }
	70%, 100% { opacity: 0; transform: translate(-50%, .9rem); }
}
@keyframes rsvp-reveal { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes rsvp-dialog-in { from { opacity: 0; transform: scale(.96) translateY(.75rem); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes rsvp-loading { 50% { transform: translateX(.35rem); opacity: .45; } }
@keyframes event-pop-in { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes music-pulse { 50% { box-shadow: 0 0 1.4rem rgb(169 216 245 / 82%); transform: scale(1.06); } }
@keyframes rsvp-button-glow {
	0%, 100% { border-color: rgb(249 211 145 / 48%); background-position: 100% 50%; box-shadow: inset 0 1px rgb(255 244 218 / 16%); }
	50% { border-color: rgb(255 226 169 / 88%); background-position: 0 50%; box-shadow: 0 0 1rem rgb(246 193 111 / 22%), inset 0 1px rgb(255 250 236 / 28%); }
}
@keyframes rsvp-dot-pulse {
	0%, 100% { background: rgb(255 224 166 / 10%); box-shadow: 0 0 0 .2rem rgb(247 205 131 / 8%); }
	50% { background: #f8d18d; box-shadow: 0 0 .75rem rgb(255 216 148 / 78%), 0 0 0 .25rem rgb(247 205 131 / 12%); }
}
@keyframes hero-border-run { to { --hero-border-angle: 360deg; } }
@keyframes stamp-spin { to { transform: rotate(360deg); } }
@keyframes hero-name-float {
	from { text-shadow: 0 .5rem 1.4rem rgb(0 0 0 / 22%); transform: translateY(0); }
	to { text-shadow: 0 .8rem 2rem rgb(0 0 0 / 30%), 0 0 1.6rem rgb(255 255 255 / 10%); transform: translateY(-.18rem); }
}
@keyframes hero-name-shimmer {
	0%, 22% { background-position: 100% 50%; }
	58%, 100% { background-position: -30% 50%; }
}
@keyframes portrait-drift {
	from { transform: scale(1.015) translate3d(-.35%, 0, 0); }
	to { transform: scale(1.075) translate3d(.45%, -.45%, 0); }
}
@keyframes portrait-quote-float {
	from { text-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 20%); transform: translateY(0); }
	to { text-shadow: 0 .8rem 2rem rgb(0 0 0 / 32%); transform: translateY(-.25rem); }
}
@keyframes hero-ampersand-glow {
	0%, 100% { opacity: .78; text-shadow: 0 0 .8rem rgb(169 216 245 / 24%); transform: scale(.96); }
	50% { opacity: 1; text-shadow: 0 0 1.6rem rgb(169 216 245 / 68%); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.wedding-links a, .wedding-links a::before, .wedding-nav .music-toggle { transition: none; animation: none; }
	.wedding-nav .music-toggle[aria-pressed='true'] span:first-child { animation: none; }
	.hero-stamp { animation: none; transform: rotate(-12deg); }
	.hero-content h1 span, .hero-content h1 i { animation: none; }
	.hero-content h1 span { background-position: 50% 50%; }
	.portrait-image, .portrait-quote { animation: none; }
}
@media (max-width: 720px) {
	.wedding-nav { min-height: 4rem; padding: .75rem 1rem; }
	.wedding-logo { font-size: clamp(1.65rem, 7vw, 2.15rem); }
	.nav-toggle { left: 1rem; display: none; }
	.wedding-drawer { display: none; width: min(88vw, 360px); padding: 1.5rem 1.25rem; }
	.drawer-head { margin-bottom: 3rem; }
	.drawer-head p { font-size: 2rem; }
	.wedding-drawer .wedding-links { display: none; }
	.wedding-links { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: auto; width: calc((100vw - 2.25rem) / 2); max-width: 11rem; gap: 0; padding: .3rem; border-radius: 1rem; }
	.wedding-links a { min-height: 2.75rem; justify-content: center; padding: .45rem .5rem; font-size: .5rem; letter-spacing: .06em; text-align: center; }
	.wedding-links a::before { display: none; }
	.wedding-nav .music-toggle { right: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .75rem; width: calc((100vw - 2.25rem) / 2); max-width: 11rem; min-height: 3.35rem; padding: .5rem .6rem; border-radius: 1rem; font-size: .54rem; }
	.wedding-nav .music-toggle span:first-child { width: 1.75rem; height: 1.75rem; }
	.wedding-hero { display: grid; min-height: 100svh; padding-bottom: 0; }
	.hero-photo { position: absolute; inset: 3.5rem 0 0; width: auto; height: auto; min-height: 0; max-height: none; background-image: url('/src/assets/images/anh-in-khung.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; animation: none; }
	.hero-wash { inset: 0; height: auto; min-height: 0; max-height: none; background: radial-gradient(circle at 50% 20%, rgb(255 218 151 / 20%), transparent 48%), linear-gradient(180deg, rgb(105 72 50 / 20%), rgb(74 48 37 / 48%)); }
	.hero-content { width: min(100% - 2rem, 360px); margin: 0 auto; padding-top: 2rem; }
	.hero-kicker, .hero-date { font-size: .58rem; letter-spacing: .18em; }
	.hero-kicker { margin-bottom: 1.2rem; }
	.hero-date { margin-bottom: 1.8rem; }
	.hero-content h1 { display: flex; flex-direction: column; gap: .05rem; width: 100%; font-size: clamp(4rem, 17vw, 5.8rem); line-height: .82; }
	.hero-content h1 span { display: block; min-width: 0; white-space: nowrap; }
	.hero-content h1 i { display: block; margin: .15rem 0; font-size: .42em; line-height: .7; }
	.hero-copy { margin-top: 2rem; font-size: .78rem; line-height: 1.7; }
	.scroll-cue { margin-top: 2.5rem; font-size: .57rem; }
	.hero-stamp { top: 5rem; right: 1rem; bottom: auto; width: 3.5rem; height: 3.5rem; }
	.hero-stamp > span { width: 74%; font-size: .46rem; }
	.hero-stamp > i { font-size: .36rem; }
	.hero-stamp small { margin-top: .18rem; font-size: .21rem; }
	.section-frame { width: min(100% - 2rem, 520px); padding: 5rem 0; }
	.story-section, .details-section { grid-template-columns: 1fr; gap: 1.25rem; }
	.story-section { gap: 1.75rem; overflow: hidden; }
	.story-section::before { top: 24%; right: -18rem; }
	.story-section .section-intro h2 { max-width: 9ch; font-size: clamp(3.8rem, 16vw, 5.2rem); }
	.story-section .section-intro h2 em { margin-top: .32em; font-size: .62em; }
	.story-divider { width: 100%; min-height: 1.5rem; flex-direction: row; }
	.story-divider::before, .story-divider::after { width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgb(115 169 202 / 48%)); }
	.story-divider::after { background: linear-gradient(90deg, rgb(115 169 202 / 48%), transparent); }
	.story-divider span { width: 1.75rem; height: 1.75rem; margin: 0 .65rem; font-size: .85rem; }
	.details-section .section-intro, .details-section .details-layout { order: initial; }
	.details-section { width: min(100% - 2rem, 520px); }
	.details-section .section-intro { padding: 0; }
	.details-section .section-intro .eyebrow { margin-bottom: .8rem; }
	.details-section .section-intro .eyebrow::after { width: 1.8rem; }
	.details-section .section-intro h2 em { margin-top: .2rem; font-size: clamp(1.9rem, 8.4vw, 2.65rem); line-height: 1.08; }
	.details-section::after { top: 8%; right: -45%; width: 24rem; height: 24rem; }
	.venue-map { order: initial; margin-top: .5rem; }
	.venue-map__heading { align-items: start; flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.25rem; }
	.venue-map__heading h3 { font-size: 3rem; }
	.venue-map__heading p:last-child { font-size: .8rem; line-height: 1.6; }
	.venue-map__heading .text-link { white-space: normal; }
	.venue-map__frame { min-height: 22rem; }
	.details-section { padding-top: 5rem; padding-bottom: 5rem; }
	.details-section::before { top: 2.5rem; width: 2.5rem; }
	.details-section .section-intro { position: static; }
	.story-section h2 { font-size: clamp(3.35rem, 15vw, 5rem); }
	.details-section .section-intro h2 { max-width: none; font-size: clamp(3.3rem, 13vw, 4.4rem); line-height: .92; }
	.story-copy { padding-top: 0; font-size: .92rem; line-height: 1.85; }
	.story-signature { margin-top: 2.5rem; }
	.story-signature strong { font-size: 2.7rem; }
	.portrait-section { min-height: 88svh; }
	.portrait-image { background-position: 48% center; }
	.portrait-section::after { background: radial-gradient(circle at 50% 24%, rgb(255 218 151 / 18%), transparent 46%), linear-gradient(180deg, rgb(91 61 44 / 34%) 0%, transparent 34%, transparent 62%, rgb(72 47 37 / 52%) 100%); }
	.portrait-quote { position: absolute; top: 3rem; right: 1.15rem; left: 1.15rem; margin: 0; padding: 0; font-size: clamp(2.55rem, 11.5vw, 3.4rem); line-height: 1.02; text-shadow: 0 .4rem 1.25rem rgb(0 0 0 / 34%); }
	.portrait-quote--secondary { top: auto; right: 1.15rem; bottom: 2rem; left: 1.15rem; max-width: none; padding: 0; font-size: clamp(1.55rem, 6.8vw, 2rem); line-height: 1.08; text-align: center; }
	.details-layout { padding: .45rem; }
	.details-layout::after { inset: .28rem; }
	.details-layout .countdown { min-height: 6.9rem; }
	.countdown { grid-template-columns: repeat(4, 1fr); gap: 0; padding: .8rem .35rem; }
	.countdown div { padding: .25rem .2rem; }
	.countdown strong, .details-layout .countdown strong { font-size: 2.7rem; }
	.countdown span, .event-time { font-size: .56rem; }
	.event-list { margin-top: 2rem; padding-left: 1rem; }
	.event-list--single { margin-top: .45rem; padding-left: 0; }
	.event-list--single .event-item--featured { min-height: 9.5rem; gap: 1rem; padding: 1.35rem 1rem; }
	.details-layout .event-item--featured::after { right: .4rem; bottom: -.45rem; font-size: 6rem; }
	.event-item--featured .event-icon { width: 3.5rem; height: 4.15rem; }
	.event-item--featured .event-icon strong { font-size: 1.7rem; }
	.event-list h3, .details-layout .event-item--featured h3 { margin-bottom: .45rem; font-size: clamp(2rem, 9vw, 2.35rem); line-height: 1.02; }
	.details-layout .event-item--featured .event-kicker { margin-bottom: .3rem; font-size: .55rem; }
	.details-layout .event-item--featured .event-date-primary { margin-bottom: .55rem; font-size: clamp(1.65rem, 7.7vw, 2.1rem); }
	.details-layout .event-item--featured .event-date-primary span { display: block; margin: .35rem 0 0; font-size: .38em; vertical-align: 0; }
	.details-layout .event-item--featured > div > p:last-child { font-size: .72rem; line-height: 1.45; }
	.gallery-section { padding: 0 1rem 5rem; }
	.gallery-heading { margin-bottom: 2.5rem; }
	.gallery-heading h2 { font-size: clamp(3.2rem, 14vw, 4.8rem); }
	.gallery-grid { grid-template-columns: 1fr; gap: .75rem; }
	.gallery-image, .gallery-image--one, .gallery-image--two, .gallery-image--three, .gallery-image--four, .gallery-image--five { min-height: 18rem; margin-top: 0; }
	.gallery-image--two { min-height: 24rem; }
	.rsvp-section { padding: 5rem .75rem; }
	.rsvp-card { padding: 3rem 1.25rem; }
	.rsvp-card::before { inset: .45rem; }
	.rsvp-intro { margin-bottom: 2.25rem; }
	.rsvp-intro h2 { font-size: 1.3rem; letter-spacing: .12em; }
	.rsvp-lead { font-size: .9rem; }
	.rsvp-choice-grid { grid-template-columns: 1fr; gap: .75rem; }
	.rsvp-option { grid-template-columns: 2.5rem 1fr auto; min-height: 7.5rem; padding: 1.15rem; }
	.rsvp-option__icon { width: 2.5rem; height: 2.5rem; }
	.rsvp-form-panel { width: calc(100% - 1.5rem); max-height: 84dvh; padding: 3.5rem 1.25rem 2rem; }
	.rsvp-form-heading { margin-bottom: 2.25rem; }
	.rsvp-form { grid-template-columns: 1fr; gap: 1.5rem; }
	.rsvp-field--wide, .rsvp-diet, .button-submit, .form-status { grid-column: auto; width: 100%; }
	.rsvp-diet-options { grid-template-columns: 1fr; }
	.rsvp-pill span { min-height: 3.25rem; }
	.button-submit { margin-top: .75rem; }
	.rsvp-dialog { padding: 3rem 1.5rem; }
	.wedding-footer { padding: 3rem 1rem; }
}
@media (max-width: 420px) {
	.details-layout .countdown {
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
		padding: .55rem;
	}
	.details-layout .countdown div {
		min-height: 5.25rem;
		align-content: center;
	}
	.details-layout .countdown div + div { border-left: 1px solid var(--w-line); }
	.details-layout .countdown div:nth-child(3) {
		border-top: 1px solid var(--w-line);
		border-left: 0;
	}
	.details-layout .countdown div:nth-child(4) { border-top: 1px solid var(--w-line); }
	.event-list--single .event-item--featured {
		align-items: flex-start;
		gap: .85rem;
		padding: 1.25rem .85rem;
	}
	.details-layout .event-item--featured h3 { font-size: 2rem; }
	.details-layout .event-item--featured > div > p:last-child { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
	.scroll-cue__indicator::after { animation: none; opacity: 1; transform: translate(-50%, .35rem); }
	.rsvp-form[aria-busy='true'] .button-submit__arrow { animation: none; }
}

@media (min-width: 1200px) {
	.wedding-hero { background: linear-gradient(135deg, #745947, #9a7759 50%, #694f41); }
	.hero-photo { top: 1.25rem; right: auto; bottom: 1.25rem; left: 50%; width: min(calc(100% - 2.5rem), 150svh); overflow: hidden; border-radius: clamp(4rem, 8vw, 9rem) clamp(4rem, 8vw, 9rem) 2rem 2rem; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 0 1.5rem 4rem rgb(55 35 27 / 28%), 0 0 1.4rem rgb(244 190 103 / 18%); translate: -50% 0; }
	.hero-photo::after { position: absolute; z-index: 2; inset: 0; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--hero-border-angle), transparent 0 12%, rgb(255 219 151 / 24%) 20%, #ffe0a0 27%, #fff3cf 30%, #e9ae51 34%, transparent 43% 70%, rgb(244 187 91 / 18%) 79%, #f6c56f 86%, transparent 94%); content: ''; pointer-events: none; animation: hero-border-run 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
	.hero-wash { background: radial-gradient(circle at 50% 16%, rgb(255 219 151 / 28%), transparent 50%), linear-gradient(90deg, rgb(75 50 39 / 42%), rgb(220 169 99 / 5%) 34%, rgb(220 169 99 / 5%) 66%, rgb(75 50 39 / 42%)), linear-gradient(0deg, rgb(72 47 37 / 34%), transparent 60%); }
	.portrait-section { min-height: 100svh; background: linear-gradient(135deg, #705545, #967357 50%, #674d40); }
	.portrait-section { perspective: 1600px; }
	.portrait-image { top: 1.5rem; right: auto; bottom: 1.5rem; left: 50%; width: min(calc(100% - 4rem), 100svh); border: 1px solid rgb(255 220 153 / 44%); border-radius: clamp(5rem, 10vw, 11rem) 2rem clamp(5rem, 10vw, 11rem) 2rem; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: -1.2rem 1.5rem 3.5rem rgb(50 31 24 / 32%), .7rem -.5rem 2rem rgb(255 207 128 / 10%), inset 0 0 0 1px rgb(255 246 222 / 10%); rotate: y -1.5deg; translate: -50% 0; }
	.portrait-section::after { background: radial-gradient(circle at 50% 25%, rgb(255 218 151 / 20%), transparent 50%), linear-gradient(90deg, rgb(72 47 37 / 50%), rgb(207 157 91 / 4%) 38%, rgb(207 157 91 / 4%) 62%, rgb(72 47 37 / 46%)); }
	.portrait-quote { width: min(42%, 560px); padding-left: clamp(2rem, 8vw, 9rem); font-size: clamp(3.5rem, 5.5vw, 6.5rem); }
}

/* Desktop save-the-date layout */
@media (min-width: 900px) {
	.details-section { grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr); align-items: center; column-gap: clamp(3rem, 6vw, 6rem); row-gap: clamp(3.5rem, 6vw, 5rem); }
	.details-section .section-intro { position: static; top: auto; align-self: center; padding: 0 0 0 clamp(.25rem, 1.5vw, 1rem); }
	.details-section .section-intro h2 { max-width: none; margin-bottom: 0; font-size: clamp(3.8rem, 4.4vw, 5.2rem); line-height: .92; }
	.details-section .section-intro h2 em { display: block; font-size: clamp(2.2rem, 2.6vw, 3.1rem); }
	.details-section .section-intro::after { margin-top: 2.5rem; }
	.details-section .details-layout { width: 100%; min-width: 0; align-self: center; }
	.details-layout .event-item--featured { min-height: 11rem; }
	.details-layout .event-item--featured > div { min-width: 0; }
	.details-layout .event-item--featured h3 { font-size: clamp(2.4rem, 3.2vw, 2.95rem); line-height: 1; white-space: normal; }
	.details-layout .event-item--featured > div > p:last-child { font-size: .78rem; line-height: 1.5; }
	.venue-map { position: relative; z-index: 1; width: 100%; margin-top: 0; }
}
/* Champagne-gold palette; decorative florals intentionally removed. */
.wedding-page {
	--w-ink: #6f502b;
	--w-deep: #9a6b2f;
	--w-coral: #d7aa58;
	--w-line: rgb(139 96 41 / 20%);
}
.wedding-drawer,
.wedding-footer { background-image: none; }
.rsvp-section::before,
.rsvp-section::after { display: none; background-image: none; content: none; }
.wedding-hero,
.portrait-section { background: linear-gradient(135deg, #b58a4a, #d5ad68 50%, #8e642d); }
.details-layout .event-item--featured {
	border-color: #eee2c4;
	background: radial-gradient(circle at 8% 0%, rgb(255 255 255 / 82%), transparent 40%), linear-gradient(118deg, #fffaf0 0%, #fbf1d8 54%, #f6e7c1 100%);
	box-shadow: 0 1rem 2.7rem rgb(137 98 42 / 7%), inset 0 1px rgb(255 255 255 / 88%);
}
.venue-map__heading {
	color: #6f502b;
	background: radial-gradient(circle at 12% 0%, rgb(255 255 255 / 84%), transparent 40%), linear-gradient(115deg, #fffaf0, #fbf1d9 62%, #f5e6be);
}
.venue-map__heading .venue-name,
.venue-map__heading .eyebrow,
.venue-map__heading .text-link { color: #765322; }
.venue-map__heading .venue-script { color: #6f502b; }
.details-layout .event-item--featured .event-kicker,
.details-layout .event-item--featured .event-date-primary,
.details-layout .event-item--featured .event-date-primary span,
.details-layout .event-item--featured > div > p:last-child { color: #6f502b; text-shadow: none; }
.details-layout .event-item--featured::after { color: rgb(118 83 34 / 7%); }
.details-layout .event-item--featured::before {
	top: -1.5rem;
	right: -1.25rem;
	width: 13rem;
	height: 13rem;
	background: url('/src/assets/images/botanical-corner-blue.png') right top / contain no-repeat;
	opacity: .27;
	filter: saturate(.65) brightness(.82);
	transform: none;
}
.venue-map__heading { position: relative; isolation: isolate; overflow: hidden; }
.venue-map__heading::before,
.venue-map__heading::after {
	position: absolute;
	z-index: 0;
	width: clamp(12rem, 25vw, 20rem);
	height: clamp(12rem, 25vw, 20rem);
	background: url('/src/assets/images/botanical-corner-blue.png') right top / contain no-repeat;
	content: '';
	opacity: .27;
	filter: saturate(.65) brightness(.82);
	pointer-events: none;
}
.venue-map__heading::before { top: -3rem; right: -2rem; }
.venue-map__heading::after { bottom: -4rem; left: -3rem; transform: rotate(180deg); }
.venue-map__heading > * { position: relative; z-index: 1; }

/* Visible botanical accents for the open corners of the invitation. */
.story-section { isolation: isolate; }
.story-section::before,
.story-section::after {
	position: absolute;
	z-index: 0;
	width: clamp(15rem, 24vw, 23rem);
	height: clamp(18rem, 30vw, 28rem);
	border: 0;
	border-radius: 0;
	background: url('/src/assets/images/botanical-corner-blue.png') right center / contain no-repeat;
	content: '';
	opacity: .27;
	filter: saturate(.65) brightness(.82);
	pointer-events: none;
}
.story-section::before { top: 1rem; right: -4rem; }
.story-section::after { bottom: 1rem; left: -4rem; transform: rotate(180deg); }
.story-section > * { position: relative; z-index: 1; }

.rsvp-section::before,
.rsvp-section::after {
	display: block;
	content: '';
	opacity: .27;
	filter: saturate(.65) brightness(.82);
}
.rsvp-section::before { top: -3rem; right: -2rem; width: min(34rem, 46vw); height: min(43rem, 78%); }
.rsvp-section::after { bottom: -4rem; left: -3rem; width: min(30rem, 42vw); height: min(38rem, 70%); }

.venue-map__heading::before,
.venue-map__heading::after { opacity: .27; }
.details-layout .event-item--featured::before { opacity: .27; }

.wedding-footer { position: relative; isolation: isolate; overflow: hidden; min-height: 15rem; align-content: center; }
.wedding-footer::before,
.wedding-footer::after {
	position: absolute;
	z-index: 0;
	width: clamp(14rem, 22vw, 21rem);
	height: clamp(16rem, 25vw, 24rem);
	background: url('/src/assets/images/botanical-corner-blue.png') right center / contain no-repeat;
	content: '';
	opacity: .27;
	filter: saturate(.65) brightness(.82);
	pointer-events: none;
}
.wedding-footer::before { top: -4rem; right: -1rem; }
.wedding-footer::after { bottom: -5rem; left: -2rem; transform: rotate(180deg); }
.wedding-footer > * { position: relative; z-index: 1; }

.rsvp-card::before {
	background-image: url('/src/assets/images/botanical-corner-blue.png');
	background-position: right -2rem top -2rem;
	background-size: clamp(14rem, 23vw, 21rem) auto;
	background-repeat: no-repeat;
	filter: saturate(.65) brightness(.82);
}
.rsvp-card::after {
	position: absolute;
	z-index: 0;
	bottom: .75rem;
	left: .75rem;
	width: clamp(14rem, 23vw, 21rem);
	height: clamp(17rem, 28vw, 25rem);
	background: url('/src/assets/images/botanical-corner-blue.png') right center / contain no-repeat;
	content: '';
	opacity: .27;
	filter: saturate(.65) brightness(.82);
	transform: rotate(180deg);
	pointer-events: none;
}
.rsvp-card > * { position: relative; z-index: 1; }

@media (max-width: 700px) {
	.story-section::before,
	.story-section::after { width: 14rem; height: 18rem; opacity: .22; }
	.rsvp-section::before,
	.rsvp-section::after { width: 16rem; height: 22rem; opacity: .22; }
	.wedding-footer::before,
	.wedding-footer::after { width: 13rem; height: 17rem; opacity: .22; }
	.rsvp-card::before { background-size: 13rem auto; }
	.rsvp-card::after { bottom: .45rem; left: .45rem; width: 13rem; height: 17rem; opacity: .22; }
}
.venue-map__frame { background: #f3dfbd; }
.rsvp-card,
.rsvp-form-panel,
.rsvp-dialog {
	--rsvp-blue: #765322;
	--rsvp-blue-soft: #9a7541;
	--rsvp-line: rgb(118 83 34 / 26%);
}
.rsvp-option__icon,
.rsvp-option__arrow,
.rsvp-ornament,
.rsvp-success > span,
.rsvp-dialog__ornament { border-color: rgb(151 108 45 / 40%); }
.rsvp-option:hover,
.rsvp-option[aria-pressed='true'],
.rsvp-pill input:checked + span { border-color: rgb(151 108 45 / 56%); }
.rsvp-option[aria-pressed='true'],
.rsvp-pill input:checked + span { background: rgb(214 170 88 / 14%); }
.rsvp-pill span::before { border-color: #a87935; }
.wedding-footer,
.wedding-footer p { color: #765322; }
.wedding-footer { border-top-color: rgb(139 96 41 / 18%); }