@font-face{font-family:Moul;src:url('assets/fonts/moul.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Noto Serif Khmer';src:url('assets/fonts/noto-serif-khmer.ttf') format('truetype');font-display:swap}
@font-face{font-family:Cormorant;src:url('assets/fonts/cormorant-garamond.ttf') format('truetype');font-display:swap}
:root{--forest:#173e30;--forest-dark:#102b22;--ivory:#f8f1df;--celadon:#a6b497;--gold:#b29455;--brown:#6c5740;--ink:#243b2b;--muted:#646951;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--forest-dark);color:var(--ink);font:17px/1.9 'Noto Serif Khmer',serif;min-width:280px}
body:not(.entered){overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.toolbar{position:fixed;z-index:30;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:flex;gap:8px}
.quiet-button{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 15px;background:#f8f1dfed;color:var(--forest);border:1px solid #b2945555;border-radius:50px;font:14px/1.4 system-ui,sans-serif;transition:transform 150ms var(--ease),background-color 150ms var(--ease)}
.quiet-button:hover{background:#fff9e9}
.quiet-button:active,.primary-button:active{transform:scale(.96)}
.sound-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.sound-control[aria-pressed=true]{background:var(--forest);color:var(--ivory)}
.entrance{position:fixed;inset:0;z-index:20;background:var(--ivory);display:grid;place-items:center;overflow-y:auto;isolation:isolate}
.entrance-landscape{position:absolute;inset:0;z-index:-1;background:linear-gradient(#f8f1dfee 0%,#f8f1dfef 50%,#f8f1df80 100%),url('assets/garden.png') center 70%/cover;opacity:.75}
.entrance-content{display:flex;align-items:center;flex-direction:column;width:100%;padding:64px 20px 26px;gap:22px}
.entrance-heading{text-align:center;margin:0}
.khmer-display{font-family:Moul,serif;font-weight:400;line-height:1.9;margin:0;color:var(--brown);font-size:clamp(15px,2vw,20px);letter-spacing:0}
.entrance-heading h1{font:400 clamp(25px,3vw,39px)/1.2 Cormorant,serif;margin:8px 0 0;color:var(--forest)}
.entrance-heading h1 span{color:var(--gold);font-style:italic;padding:0 6px}
.envelope-scene{position:relative;width:min(360px,70vw,44svh);aspect-ratio:748/984;perspective:1200px;isolation:isolate}
.envelope{position:absolute;inset:0;filter:drop-shadow(0 12px 15px #3d402520)}
.envelope-lining{position:absolute;inset:0;border:1px solid #cab78a88;border-radius:4px;background:var(--ivory)}
.envelope-body{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 49%,100% 49%,100% 100%,0 100%);border-radius:4px;z-index:3}
.sheet-art{position:absolute;width:207.353%;height:103.049%;left:-105.749%;top:-1.423%;max-width:none;pointer-events:none}
.flap{position:absolute;inset:0;z-index:4;transform-origin:50% 3%;backface-visibility:hidden;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 24%,98% 27%,95% 28%,90% 28%,89% 32%,87% 36%,83% 38%,80% 38%,76% 36%,75% 39%,73% 41%,69% 43%,63% 44%,59% 45%,55% 48%,50% 50%,45% 48%,41% 45%,37% 44%,31% 43%,27% 41%,25% 39%,24% 36%,20% 38%,17% 38%,13% 36%,11% 32%,10% 28%,5% 28%,2% 27%,0 24%)}
.lotus-seal{position:absolute;z-index:5;left:41%;top:45.5%;width:18%;height:6.5%;overflow:hidden}
.lotus-seal img{position:absolute;width:1151.961%;height:1585.369%;left:-815.27%;top:-721.89%;max-width:none}
.guest-address{position:absolute;z-index:6;top:55%;left:7%;width:86%;text-align:center;pointer-events:none}
.guest-address p{margin:0;color:var(--brown);font-size:14px;line-height:1.9}
.guest-address .guest-name{font-size:clamp(17px,2.2vw,22px);line-height:1.9;margin:9px auto 0;color:var(--forest);overflow-wrap:anywhere}
.guest-address .guest-name[lang=en]{font-family:Cormorant,serif;font-size:27px;line-height:1.35}
.invitee-name-frame{position:relative;display:block;width:fit-content;max-width:100%;min-width:0;min-height:0;padding:5px 14px;background:transparent;overflow-wrap:anywhere}
.invitee-name-frame:before{content:'';position:absolute;inset:0;border:12px solid transparent;border-image:url('assets/invitee-outline-frame.svg') 18 / 12px / 0 stretch;pointer-events:none}
.guest-address .guest-name.is-long{font-size:clamp(14px,1.8vw,18px);line-height:1.55}
.envelope-hit{position:absolute;z-index:7;inset:0;background:transparent;border:0;border-radius:5px}
.envelope-hit:hover{box-shadow:0 0 0 1px #b2945577}
.letter{position:absolute;inset:6% 7% 4%;z-index:2;display:flex;align-items:center;flex-direction:column;justify-content:flex-start;padding:18px 12px;background:var(--ivory);border:1px solid var(--gold);outline:1px solid #b2945566;outline-offset:-6px;opacity:0}
.letter-crest{width:23%;height:25%;object-fit:contain;margin-bottom:12px}
.letter .khmer-display{font-size:12px}
.letter-names{font:400 27px/1.05 Cormorant,serif;margin:12px 0;text-align:center;color:var(--forest)}
.letter-names span{font-style:italic;color:var(--gold);font-size:22px}
.letter-date{font:14px/1.5 system-ui,sans-serif;color:var(--brown);margin-top:14px}
.entrance-actions{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:min(360px,100%)}
.primary-button{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:0;padding:9px 28px;background:var(--forest);color:var(--ivory);border:1px solid #b29455;border-radius:3px;box-shadow:inset 0 0 0 3px var(--forest),inset 0 0 0 4px #b2945544;text-decoration:none;min-height:56px;transition:transform 150ms var(--ease),background-color 150ms var(--ease)}
.primary-button:hover{background:#244c38}
.primary-button span:first-child{font-size:16px}
.primary-button span[lang=en]{font:12px/1.6 system-ui,sans-serif;color:#f1dfb6}
/* Quiet, real-text controls; the envelope carries the elaborate ornament. */
.primary-button.ceremony-button{width:224px;max-width:100%;min-height:64px;padding:5px 26px;border:1px solid #b2945577;border-radius:4px;box-shadow:none;gap:1px;transition:transform 150ms var(--ease),background-color 150ms var(--ease),color 150ms var(--ease)}
.ceremony-button span:first-child{font-size:16px;line-height:1.9}
.ceremony-button span[lang=en]{font-size:12px;line-height:1.6;color:#e1d7b8}
.primary-button.ceremony-button:disabled{opacity:.65}
.primary-button.ceremony-button.button-ivory{position:relative;background:#f8f1dfb3;color:var(--forest);border-color:#b2945588;border-radius:2px}
.ceremony-button.button-ivory:before{content:'';position:absolute;inset:4px;border:1px solid #b2945530;pointer-events:none}
.primary-button.ceremony-button.button-ivory:hover{background:#fff9e9}
.ceremony-button.button-ivory span[lang=en]{color:var(--brown)}
.primary-button.ceremony-button.button-editorial{background:transparent;color:var(--forest);border:0;border-radius:0;position:relative}
.ceremony-button.button-editorial:after{content:'';position:absolute;bottom:4px;width:70px;height:1px;background:var(--gold);pointer-events:none}
.primary-button.ceremony-button.button-editorial:hover{background:#a6b49718}
.ceremony-button.button-editorial span[lang=en]{color:var(--brown)}
.primary-button.ceremony-button.button-stylized{position:relative;isolation:isolate;width:244px;min-height:68px;padding:9px 30px 5px;border:0;border-radius:2px;box-shadow:none;background:transparent}
.primary-button.ceremony-button.button-stylized:hover{background:transparent}
.ceremony-button.button-stylized>span{position:relative;z-index:1}
/* Display only the frame silhouette; the original generated pixels stay unchanged. */
.ceremony-button.button-stylized:before{content:'';position:absolute;inset:0;z-index:0;background:url('assets/slim-engraved-frame-v1.png') 50% 44.7458%/101.5873% 162.3679% no-repeat;clip-path:polygon(5.06% 7.2%,44.5% 7.2%,45.3% 4.2%,47.4% 7.2%,48.7% 4.4%,50% 0,51.3% 4.4%,52.6% 7.2%,54.7% 4.2%,55.5% 7.2%,94.94% 7.2%,100% 26.4%,100% 79.5%,94.94% 100%,5.06% 100%,0 79.5%,0 26.4%);pointer-events:none;transition:filter 150ms var(--ease)}
.ceremony-button.button-stylized:hover:before{filter:brightness(1.06)}
/* A quiet crop of the envelope's guilloche/kbach field, below the live labels. */
.ceremony-button.button-stylized:after{content:'';position:absolute;inset:12px 10px 8px;z-index:0;background:url('assets/envelope.png') 14% 22%/330% 1000% no-repeat;opacity:.32;clip-path:polygon(5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%,0 22%);mask-image:linear-gradient(to right,#000,#0008 28%,#0008 72%,#000);pointer-events:none}
.ceremony-button.button-stylized span[lang=en]{color:#efe4c4}
.entrance-date{font:14px/1.4 system-ui,sans-serif;color:var(--brown);margin:0}
.skip-button{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));right:20px;z-index:40;background:var(--ivory);border:1px solid #b2945555;color:var(--forest);border-radius:30px;min-height:44px;padding:8px 16px;font:14px system-ui,sans-serif}
.revealing .entrance{animation:quiet-fade .65s ease-out both;pointer-events:none}
.invitation-paper{position:relative;width:min(100%,900px);margin:0 auto;background:var(--ivory);box-shadow:0 0 80px #0002}
.invitation-cover{position:relative;background:var(--ivory)}
.invitation-cover:before{content:'';position:absolute;inset:0;z-index:1;background:url('assets/garden.png') center top/100% 100% no-repeat;mask-image:linear-gradient(to right,#000 0%,#000 3.5%,transparent 9%,transparent 91%,#000 96.5%,#000 100%),linear-gradient(to bottom,#000 0%,#000 2%,transparent 12%);pointer-events:none}
.invitation-cover:after{content:'';position:absolute;bottom:0;left:0;right:0;height:calc(min(100vw,900px)*1.5);background:url('assets/garden.png') center bottom/100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,transparent 26%,#000 38%,#000 100%);clip-path:inset(0 3% 1.5%);pointer-events:none}
.cover-text{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;text-align:center;margin:0 auto;width:70%;padding:62px 10px calc(min(100vw,900px)*1.12)}
.couple-crest{width:74px;height:95px;object-fit:contain;margin-bottom:20px}
.wedding-title{font-size:clamp(16px,2.7vw,25px);color:var(--forest)}
.english-eyebrow{font:13px/1.6 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.cover-text h2{font:400 clamp(38px,5.4vw,60px)/1.03 Cormorant,serif;margin:8px 0 24px;color:var(--forest);display:flex;flex-direction:column;align-items:center}
.cover-text h2 span{font-size:.72em;color:var(--gold);font-style:italic;margin:2px 0}
.guest-dedication{border-top:1px solid #b2945555;width:min(100%,350px);padding-top:16px}
.guest-dedication>span{font-size:15px;color:var(--brown)}
.guest-dedication p{font-size:clamp(18px,2.4vw,22px);margin:5px 0 14px;line-height:1.9;overflow-wrap:anywhere}
.guest-dedication p[lang=en]{font:28px/1.3 Cormorant,serif}
.guest-dedication p.invitee-name-frame{margin:12px auto 14px}
.guest-dedication p.invitee-name-frame.is-long{font-size:18px;line-height:1.65}
.cover-date{font:14px/1.5 system-ui,sans-serif;margin:4px 0 12px;color:var(--brown)}
.text-link{font:14px/1.6 system-ui,sans-serif;color:var(--forest);text-decoration-color:#b29455;text-underline-offset:6px;padding:10px 0}
.celebration{padding:40px clamp(28px,6vw,96px) 78px;text-align:center;scroll-margin-top:0}
.section-rule{display:flex;align-items:center;justify-content:center;gap:18px;max-width:320px;margin:0 auto 30px;color:var(--gold)}
.section-rule:before,.section-rule:after{content:'';height:1px;background:#b2945566;width:90px}
.section-rule span{font-size:30px;line-height:1}
.section-khmer{font-size:clamp(16px,2.6vw,22px);color:var(--forest)}
.celebration h2{font:400 clamp(32px,4vw,46px)/1.1 Cormorant,serif;margin:16px 0;color:var(--forest)}
.welcome-copy{font:400 21px/1.6 Cormorant,serif;max-width:510px;margin:22px auto 36px;color:var(--brown)}
.event-details{border-top:1px solid #b2945555;border-bottom:1px solid #b2945555;display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:28px 0;margin:0 auto 30px;max-width:620px}
.event-details>div:last-child{grid-column:1/-1}
.detail-label{font:12px/1.5 system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.event-details p{font:400 23px/1.3 Cormorant,serif;margin:8px 0 0}
.venue-note{display:block;font:14px/1.6 system-ui,sans-serif;color:var(--brown);margin-top:8px}
.map-button{font:14px/1.5 system-ui,sans-serif;min-height:52px;margin-bottom:50px;padding:12px 26px}
.closing{font:21px/1.6 Cormorant,serif;color:var(--brown);margin:0}
.closing span{font-size:28px;color:var(--forest)}
.entered main{animation:invitation-enter .9s ease-out both}
@keyframes quiet-fade{to{opacity:0}}
@keyframes invitation-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1100px){body.entered{background:linear-gradient(#102b22d9,#102b22ed),url('assets/garden.png') center/cover fixed}}
@media(max-width:600px){.toolbar{top:max(12px,env(safe-area-inset-top));right:12px}.quiet-button{padding:6px 12px}.entrance-content{padding-top:68px;gap:20px}.entrance-heading h1{font-size:28px}.envelope-scene{width:min(335px,79vw,47svh)}.entrance-landscape{background-size:auto,auto 110%;background-position:center,center bottom}.cover-text{width:74%;padding-top:74px}.couple-crest{width:60px;height:76px;margin-bottom:12px}.wedding-title{font-size:16px}.cover-text h2{font-size:clamp(35px,11vw,43px);margin-bottom:22px}.english-eyebrow{font-size:12px;margin-top:14px}.cover-date{font-size:13px}.guest-dedication{padding-top:12px}.guest-dedication>span{font-size:14px}.guest-dedication p{font-size:18px}.celebration{padding-top:34px}.welcome-copy{font-size:21px}.event-details{grid-template-columns:1fr;gap:26px}.event-details>div:last-child{grid-column:auto}}
@media(max-height:700px){.entrance-content{gap:12px;padding:54px 16px 16px}.entrance-heading .khmer-display{font-size:14px}.entrance-heading h1{font-size:26px}.envelope-scene{width:min(300px,72vw,43svh)}.entrance-actions{gap:9px}.primary-button{padding:5px 24px;min-height:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
body.reduce-motion{scroll-behavior:auto}body.reduce-motion *{animation:none!important;transition:none!important}