@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{--moss:#46543b;--deep:#2d3827;--cream:#f7f5ee;--pink:#e4c4bf;--muted:#737966;--line:#d5d8cb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--cream);color:var(--deep);font-family:'Be Vietnam Pro',sans-serif;font-weight:300;line-height:1.8}body.locked{overflow:hidden}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.3}h2{font-size:clamp(32px,4vw,52px)}em{font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bd817c;outline-offset:5px}img{display:block;width:100%;height:100%;object-fit:cover}.eyebrow{display:block;font-size:10px;font-weight:500;letter-spacing:3px}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:13px 25px;background:var(--moss);color:var(--cream);border:1px solid var(--moss);font-size:12px;letter-spacing:1px;transition:background .2s}.button:hover{background:var(--deep)}.envelope{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--moss);padding:24px;transition:opacity .7s,visibility .7s}.envelope.opened{opacity:0;visibility:hidden;pointer-events:none}.invitation{position:relative;width:min(460px,100%);padding:50px 25px;text-align:center;border:1px solid #c6cbb8;background:var(--cream);box-shadow:0 20px 80px #1a251950}.invitation:before{content:'';position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none}.invitation h1{font-size:clamp(32px,6vw,46px);margin:10px 0 20px}.invitation h1 em{color:#a97873}.lotus{font-size:65px;line-height:1.4;color:var(--moss)}.invitation-date{letter-spacing:5px;font-size:12px}.rule{width:60px;height:1px;background:var(--pink);margin:22px auto}.invitation p{margin-bottom:6px;font-size:13px}.invitation .guest{font-family:'Playfair Display',serif;font-size:25px;margin:10px 0 25px}.invitation small{display:block;font-size:10px;margin-top:25px;letter-spacing:1px}.navigation{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:var(--cream);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}.brand{font-family:'Playfair Display',serif;font-size:26px;letter-spacing:5px}.brand i{font-size:19px;color:#a97873}.navigation nav{display:flex;gap:32px;font-size:11px}.hero{height:calc(100svh - 70px);min-height:570px;max-height:1000px;position:relative;color:white}.hero picture{position:absolute;inset:0}.hero img{object-position:center 38%}.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#172417c9,transparent 85%)}.hero-text{position:absolute;bottom:10%;left:8%}.hero h2{font-size:clamp(44px,6vw,84px);margin:20px 0;line-height:1.16}.hero h2 em{font-size:.7em;color:#eed7cc}.hero-text p{letter-spacing:6px;font-size:14px}.hero-link{display:inline-block;font-size:10px;letter-spacing:1px;margin-top:12px;border-bottom:1px solid #ffffff6b;padding-bottom:8px}.side-note{position:absolute;right:30px;top:50%;writing-mode:vertical-rl;letter-spacing:4px;font-size:9px}.section{padding:100px 7%;scroll-margin-top:20px}.welcome{text-align:center;padding-top:110px;padding-bottom:90px}.welcome h2{margin:28px 0}.welcome h2 em{color:var(--moss)}.welcome p{font-size:13px;line-height:2.1;color:var(--muted)}.botanical{display:block;font-size:65px;color:var(--moss);line-height:1.4;margin-top:25px}.families{background:#eef0e6}.section-heading{text-align:center;margin-bottom:55px}.section-heading h2{margin:20px 0}.section-heading p{font-size:12px;color:var(--muted)}.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:950px;margin:auto;text-align:center}.portrait{height:440px;max-width:330px;margin:0 auto 30px;overflow:hidden;border-radius:160px 160px 0 0}.portrait img{object-position:50% 32%}.bride{margin-top:65px}.family-grid h3{font-size:27px;margin:14px 0 20px}.family-grid p{font-size:12px}.family-grid strong{font-weight:500}.address{color:var(--muted);font-size:11px!important}.photo-interlude{height:600px;position:relative;color:white}.photo-interlude img{object-position:center 50%}.photo-interlude:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#22311ad9,transparent 95%)}.photo-interlude>div{position:absolute;bottom:55px;left:7%;z-index:1}.photo-interlude h2{margin:15px 0 0;font-size:clamp(30px,4vw,48px)}.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1050px;margin:auto}.event{border:1px solid var(--line);padding:40px 25px;text-align:center;position:relative}.event-index{font-size:10px;letter-spacing:2px;color:var(--muted)}.event h3{font-size:32px;margin:24px 0 8px}.venue{font-size:12px;min-height:24px}.date-block{display:flex;align-items:center;justify-content:center;gap:25px;margin:24px 0}.date-block span{font-size:10px;letter-spacing:1px;line-height:2}.date-block strong{font-family:'Playfair Display',serif;font-size:74px;font-weight:400;line-height:1.2;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 22px}.event>p{font-size:11px}.event .lunar{font-style:italic;color:var(--muted);margin-bottom:24px}.event-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:25px}.text-button{background:none;border:0;color:var(--moss);font-size:11px;padding:10px}.countdown-wrap{text-align:center;margin-top:65px}.countdown-wrap>p{font-size:12px}.countdown{display:flex;justify-content:center;gap:40px;margin-top:20px}.countdown strong{display:block;font-family:'Playfair Display',serif;font-size:44px;font-weight:400}.countdown span{font-size:10px;letter-spacing:2px}.album{background:#eef0e6}.gallery{columns:3;column-gap:18px;max-width:1150px;margin:auto}.gallery button{display:block;width:100%;padding:0;border:0;margin:0 0 18px;break-inside:avoid;overflow:hidden;background:var(--line)}.gallery img{height:auto;transition:transform .5s}.gallery button:hover img{transform:scale(1.035)}.closing{text-align:center;background:var(--moss);color:var(--cream);padding:80px 20px}.closing .botanical{color:var(--pink);margin:0 0 25px}.closing h2{font-size:clamp(26px,3.5vw,42px);margin:25px 0 30px}.closing p{font-family:'Playfair Display',serif;font-size:25px;margin-bottom:10px}.closing-date{font-size:10px;letter-spacing:3px}footer{text-align:center;background:var(--deep);color:#cad0c0;padding:18px;font-size:9px;letter-spacing:1px}dialog{padding:0;background:#111e;width:100vw;max-width:none;height:100svh;max-height:none;border:0;color:white}dialog::backdrop{background:#111e}dialog[open]{display:flex;align-items:center;justify-content:center}dialog img{width:calc(100% - 100px);height:88%;object-fit:contain}dialog button{position:absolute;background:none;border:0;color:white;font-size:42px;padding:10px 18px}#close-lightbox{top:8px;right:12px;font-size:35px}#previous-photo{left:0}#next-photo{right:0}#photo-counter{position:absolute;bottom:0;font-size:11px} @media(min-width:1500px){.hero-text{left:12%}}@media(max-width:759px){.navigation{height:60px;padding:0 20px}.navigation nav{gap:16px;font-size:9px}.brand{font-size:22px}.hero{min-height:560px;height:calc(100svh - 60px)}.hero img{object-position:50% 28%}.hero-text{left:25px;bottom:8%}.hero-text .eyebrow{letter-spacing:2px;font-size:8px}.side-note{right:12px}.hero h2{font-size:45px}.section{padding:65px 22px}.eyebrow{font-size:8px;letter-spacing:2px}.welcome p{font-size:12px}.desktop{display:none}.family-grid{gap:45px;grid-template-columns:1fr}.portrait{height:400px;width:80%;max-width:310px}.bride{margin-top:0}.family-grid h3{font-size:26px}.photo-interlude{height:420px}.photo-interlude img{object-position:57% center}.photo-interlude>div{left:22px;bottom:35px}.photo-interlude h2{font-size:30px}.event-grid{grid-template-columns:1fr;gap:20px}.event{padding:30px 16px}.section-heading{margin-bottom:35px}.countdown{gap:25px}.countdown strong{font-size:36px}.gallery{columns:2;column-gap:10px}.gallery button{margin-bottom:10px}.closing{padding:60px 20px}.closing h2{font-size:27px}.invitation{padding:40px 20px}.invitation .eyebrow{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.lotus{width:90px;height:65px;margin:20px auto}.botanical{width:85px;height:60px;margin:30px auto 0}.closing .botanical{margin:0 auto 25px}.botanical img,.lotus img{object-fit:contain}

.portrait.groom img{object-position:50% 65%}
.music-toggle{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:110;display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 15px;border:1px solid #c7cdb7;background:#f7f5eef5;color:var(--moss);border-radius:30px;box-shadow:0 4px 22px #17241726;font-size:10px;letter-spacing:.5px}.music-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--moss);color:var(--cream);font-size:17px}.music-toggle.playing .music-icon{animation:music-pulse 2s ease-in-out infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes music-pulse{50%{box-shadow:0 0 0 5px #46543b18}}@media(max-width:759px){.music-toggle{right:12px;font-size:10px;padding:8px 12px}}@media(prefers-reduced-motion:reduce){.music-toggle.playing .music-icon{animation:none}}
.photo-tools{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:20px;align-items:center;padding:8px 16px;border:1px solid #ffffff33;border-radius:25px;background:#182016e6;white-space:nowrap;z-index:2}.photo-tools button{position:static;font-size:11px;padding:4px;color:white}.photo-tools a{font-size:11px;color:white}.zoomed[open]{display:block;padding:65px 20px 110px;overflow:auto}.zoomed #lightbox-image{width:200%;height:auto;max-width:none;object-fit:contain}.zoomed #close-lightbox,.zoomed #previous-photo,.zoomed #next-photo,.zoomed #photo-counter{position:fixed;z-index:3}.zoomed #previous-photo,.zoomed #next-photo{top:45%}dialog #photo-counter{position:fixed;bottom:0;left:50%;transform:translateX(-50%)}dialog:not(.zoomed) #lightbox-image{height:calc(100% - 140px)}@media(max-width:759px){.photo-tools{gap:15px;padding:8px 12px}dialog:not(.zoomed) #lightbox-image{width:calc(100% - 60px)}}

.event-actions a.button{gap:10px}.directions-icon{display:block;width:15px;height:15px;flex:0 0 15px}