:root{--paper:#f7f4ed;--ink:#35332e;--muted:#77736a;--header:4.5rem}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body,main,header,footer,section{max-width:100%}
main,section{width:100%}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--paper);color:var(--ink);font:16px/1.8 "Noto Serif SC",serif}
img{display:block;max-width:100%}
a{color:inherit}
.site-header{height:var(--header);position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:#f7f4edeb;border-bottom:1px solid #35332e18;backdrop-filter:blur(10px)}
.brand{text-decoration:none;font-family:Georgia,serif;letter-spacing:.28em}
.site-nav{display:flex;gap:clamp(1rem,2.6vw,2.3rem)}
.site-nav a{font-size:.75rem;letter-spacing:.15em;text-decoration:none}
.menu-toggle{display:none;border:0;background:0;width:2.5rem}
.menu-toggle span{display:block;height:1px;margin:.4rem;background:var(--ink)}
.hero{min-height:100svh;display:flex;justify-content:flex-end;padding:clamp(7.5rem,16vh,11rem) 8% 5rem;color:#fff;background:linear-gradient(#0000,#111a1245),url("images/optimized/hero.jpg") center/cover}
.hero-copy{width:min(28rem,49%);text-align:center;text-shadow:0 1px 7px #15201599}
.eyebrow{margin:0 0 .6rem;font:.67rem Georgia,serif;letter-spacing:.28em}
.hero h1{margin:0;font-size:clamp(1.7rem,3vw,3rem);font-weight:500;letter-spacing:.12em;white-space:nowrap}
.hero h1 span{font:.7em Georgia,serif}
.hero-date{margin:1rem 0 .15rem;font-family:Georgia,serif;letter-spacing:.22em}
.hero-place{margin:.15rem 0;font-size:.85rem}
.button{display:inline-block;padding:.7rem 1.3rem;border:1px solid var(--ink);font-size:.76rem;letter-spacing:.16em;text-decoration:none}
.button--light{border-color:#fffd;color:#fff}
.hero-invitation-panel{width:100%;padding:clamp(2.2rem,5vw,3.8rem) 1.35rem;text-align:center;background:#f7f4ed;border-bottom:1px solid #6d62502b}
.hero-invitation-panel p{margin:0 0 1.2rem;font-size:clamp(.88rem,1.5vw,1rem);letter-spacing:.08em;color:#5b554c}
.hero-invitation-panel:before{content:"";display:block;width:2.2rem;height:1px;margin:0 auto 1.25rem;background:#756b5c80}
.scroll-cue{position:absolute;bottom:1.5rem;left:50%;color:#fff;text-decoration:none}
.scroll-cue span{font-size:.54rem;letter-spacing:.18em}
.section{padding:clamp(4.5rem,10vw,8.5rem) clamp(1.35rem,7vw,7rem)}
.section-heading{text-align:center}
.section h2{margin:0;font-size:clamp(1.7rem,3vw,2.45rem);font-weight:500;letter-spacing:.18em}
.rule{display:block;width:2.5rem;height:1px;margin:1.3rem auto 2.4rem;background:var(--ink)}
.section-intro{max-width:28rem;margin:-.8rem auto 2.5rem;color:var(--muted);font-size:.88rem}
.story{min-height:clamp(42rem,100vh,58rem);display:flex;align-items:flex-start;justify-content:flex-end;padding-top:clamp(4.5rem,8vw,7.5rem);background:#f7f4ed url("images/optimized/photo3.jpg") left center/auto 100% no-repeat}
.story-copy{width:min(43%,31rem);margin-right:clamp(1rem,5vw,6rem);padding:clamp(1rem,2vw,2rem) clamp(.5rem,2vw,1.6rem);text-shadow:0 1px 0 #fff8}
.story-copy .rule{margin-left:0}
.story-text{color:#555149;line-height:1.9}
.story-text p{margin:0 0 1.25rem}
.signature{margin:1.4rem 0 0;font:2.4rem "Zhi Mang Xing",cursive}
.wedding{position:relative;isolation:isolate;overflow:hidden;background:#eee7d8 url("images/optimized/photo2.jpg") right bottom/min(100%,900px) auto no-repeat}
.wedding-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f8f5eeee,#f8f5eeb9 54%,#f8f5ee14)}
.info-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:66rem;margin:auto;border-block:1px solid #44372859}
.info-item{min-height:14.5rem;margin:1.25rem 0;padding:1.7rem 1rem;text-align:center;border-left:1px solid #44372859;background:#faf7ef6b}
.info-item:first-child{border-left:0}
.info-mark{margin:0 0 1rem;font:.7rem Georgia,serif;color:#aaa398}
.info-item h3{margin:0;font-size:.95rem;font-weight:500;letter-spacing:.18em}
.info-item p:not(.info-mark){margin:.2rem 0;color:var(--muted);font-size:.82rem}
.info-item .info-main{margin-top:.8rem;color:var(--ink);font-size:1.05rem}
.info-main--en{font:.84rem Georgia,serif!important}
.text-link{display:inline-block;margin-top:1.3rem;font-size:.78rem;border-bottom:1px solid;text-decoration:none}
.gallery{position:relative;max-width:1160px;margin:auto;padding-top:clamp(5.5rem,12vw,9rem);overflow:hidden}
.gallery:before{content:"";position:absolute;inset:1.7rem 4% auto;height:1px;background:#483a4b47}
.gallery-ornament{position:absolute;width:5rem;height:4.5rem;opacity:.6}
.gallery-ornament span,.gallery-ornament i,.gallery-ornament b{position:absolute;display:block;border:1px solid #80735f;border-radius:50%}
.gallery-ornament span{width:2.1rem;height:2.1rem;left:1.45rem;top:1.25rem}
.gallery-ornament i{width:.9rem;height:1.7rem;left:.4rem;top:.7rem;transform:rotate(-30deg)}
.gallery-ornament b{width:1rem;height:1.8rem;right:.3rem;top:.4rem;transform:rotate(38deg)}
.gallery-ornament:after{content:"";position:absolute;width:1px;height:4.5rem;left:2.4rem;background:#80735f;transform:rotate(-18deg)}
.gallery-ornament--top{top:2.8rem;right:7%}
.gallery-ornament--bottom{bottom:3rem;left:7%;transform:scaleX(-1)}
.magazine-gallery{width:min(100%,59rem);margin:auto;display:grid;gap:clamp(2.8rem,7vw,6.5rem)}
.gallery-photo{margin:0;overflow:hidden;background:#e9e1d4;box-shadow:0 .65rem 1.6rem #40301c1a}
.gallery-photo img{width:100%;height:100%;object-fit:cover}
.photo--one{width:min(76%,30rem);justify-self:center;aspect-ratio:2/3}
.photo-pair,.photo-collage{display:grid;align-items:end;gap:clamp(1rem,4vw,3rem)}
.photo-pair{grid-template-columns:1.18fr .82fr}
.photo--two,.photo--four{aspect-ratio:3/2}
.photo--three,.photo--five,.photo--six,.photo--seven,.photo--eight{aspect-ratio:2/3}
.photo-collage{grid-template-columns:1.1fr .9fr;width:90%;justify-self:center}
.photo--seven{width:min(68%,26rem);justify-self:end}
.photo--eight{width:min(88%,38rem);justify-self:center}
.gallery-closing{margin:clamp(4.5rem,9vw,7rem) auto 0;text-align:center}
.gallery-closing p{margin:0;letter-spacing:.08em}
.gallery-closing span{display:block;margin:.9rem 0 .15rem;font-size:1.25rem}
.gallery-closing small{font:.68rem Georgia,serif;letter-spacing:.32em}
.rsvp{text-align:center;background:#efebe2}
.rsvp-note{color:var(--muted);font-size:.72rem}
footer{padding:3.7rem 1.25rem;text-align:center;color:var(--paper);background:var(--ink)}
footer h2{margin:0;font-size:1.15rem;font-weight:400}
footer p,footer small{font-family:Georgia,serif}
#bgMusic{display:none}
#musicBtn{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;width:2.65rem;height:2.65rem;padding:0;border:1px solid #6d6250;background:#f7f2e7e8;color:#4d463c;border-radius:50%;box-shadow:0 .25rem .9rem #3e321e20;font:1rem Georgia,serif;line-height:1;backdrop-filter:blur(5px);cursor:pointer}
#musicBtn span{display:block;transform-origin:center}
#musicBtn.is-playing span{animation:music-spin 5s linear infinite}
.hero,.story,.wedding,.gallery,.rsvp,.magazine-gallery,.photo-pair,.photo-collage,.info-grid{min-width:0;max-width:100%}
.gallery-photo,.gallery-photo img,.story-copy,.hero-copy,.section-heading{max-width:100%}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease var(--delay,0ms),transform .75s ease var(--delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes music-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){:root{--header:4rem}
.menu-toggle{display:block}
.site-nav{position:absolute;top:100%;inset-inline:0;display:grid;max-height:0;overflow:hidden;background:#f7f4edfa}
.site-nav.is-open{max-height:22rem}
.site-nav a{padding:.85rem;text-align:center}
.hero{justify-content:center;padding:clamp(5.6rem,12svh,7.8rem) 1.25rem 4.5rem}
.hero-copy{width:min(100%,22rem)}
.hero h1{font-size:clamp(1.5rem,7vw,2rem)}
.section{width:100%;max-width:100%;margin-inline:0}
.hero,.story,.wedding,.gallery,.rsvp{width:100%;max-width:100%;margin-inline:0;overflow-x:hidden}
.story{min-height:46rem;align-items:flex-start;justify-content:flex-end;padding:3.2rem 1rem 3rem;background-size:cover;background-position:center}
.story-copy{width:50%;max-width:50%;margin:0;padding:.6rem 0 0 .45rem;transform:none;text-shadow:0 1px 0 #fff}
.story-copy h2{font-size:clamp(1.35rem,6vw,1.8rem)}
.story-text{font-size:clamp(.76rem,3.25vw,.86rem);line-height:1.72}
.story-text p{margin-bottom:.85rem}
.signature{font-size:2rem}
.wedding{background-size:cover;background-position:center}
.info-grid{grid-template-columns:1fr;max-width:23rem}
.info-item{min-height:auto;margin:0;padding:2.1rem 1.25rem;border-left:0;border-top:1px solid #44372859}
.info-item:first-child{border-top:0}
.magazine-gallery{gap:3.6rem}
.photo--one{width:82%}
.photo-pair{grid-template-columns:1fr .8fr;gap:.9rem}
.photo-collage{width:92%;gap:.9rem}
.photo-pair,.photo-collage{max-width:100%;min-width:0}
.gallery-photo,.gallery-photo img{max-width:100%}
.photo--seven{width:75%;justify-self:center}
.photo--eight{width:92%}
#musicBtn{right:max(.85rem,env(safe-area-inset-right));bottom:max(.85rem,env(safe-area-inset-bottom));width:2.5rem;height:2.5rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
}