:root{--green:#234c35;--forest:#163a27;--dark:#12301f;--sage:#e8eee0;--cream:#fbfaf5;--paper:#fffefa;--text:#274b35;--gold:#bb9a60;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--script:'Great Vibes','Brush Script MT',cursive;--sans:'Be Vietnam Pro',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{padding:0;margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}body.is-locked{overflow:hidden}a{color:inherit}img{display:block;max-width:100%}button,select,input,textarea{font:inherit}button{cursor:pointer}::selection{background:#bdd0b0;color:var(--forest)}.progress-track{height:3px;background:transparent;position:fixed;left:0;top:0;width:100%;z-index:100}.progress-fill{width:0;height:100%;background:var(--gold);transition:width .1s linear}.section-width{max-width:980px;margin-left:auto;margin-right:auto}.eyebrow{text-align:center;font-size:10px;letter-spacing:.24em;font-weight:500;line-height:1.85}.serif-title{text-align:center;font:400 clamp(40px,6vw,70px)/1.08 var(--serif);margin:14px 0 20px}.serif-title em{font-weight:300}.script-word{font:400 clamp(60px,8vw,105px)/.9 var(--script);text-align:center;margin:0;color:var(--green)}
/* ceremonial opening: independent from the reference brand */
.opening{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;color:#f1e6bf;overflow:hidden;isolation:isolate;transition:opacity 1s ease,visibility 1s ease}.opening-left,.opening-right{position:absolute;top:0;bottom:0;width:50%;background-color:#193d29;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 6px),radial-gradient(ellipse at 45% 30%,#285138 0%,#143321 75%);box-shadow:inset 0 0 90px rgba(0,0,0,.19);transition:transform 1.35s cubic-bezier(.77,0,.15,1)}.opening-left{left:0;border-right:1px solid rgba(0,0,0,.45)}.opening-right{right:0;border-left:1px solid rgba(255,255,255,.045)}.opening-content{z-index:1;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;width:min(90%,500px);padding:40px 20px}.opening-small{font:400 10px var(--sans);letter-spacing:.28em;opacity:.67;line-height:1.8}.opening-script{font:400 clamp(105px,14vw,165px)/1 var(--script);margin:30px 0 -7px;color:#e6dcbb}.opening-date{font:300 clamp(35px,5vw,59px)/1.15 var(--serif);letter-spacing:.12em;margin:0}.opening-line{width:60px;border-top:1px solid #baaf88;margin:40px auto 31px;opacity:.65}.opening-couple{font:400 15px var(--serif);letter-spacing:.16em;margin:0 0 7px}.opening-digits{font:400 13px var(--serif);letter-spacing:.27em;margin:0 0 26px}.wax{position:relative;display:grid;place-items:center;border:0;width:103px;height:103px;border-radius:49% 54% 52% 45%;background:radial-gradient(circle at 40% 25%,#84af85 0%,#326a45 40%,#0e3822 73%,#062c1a 100%);box-shadow:0 7px 17px rgba(0,0,0,.55),inset 0 0 0 5px rgba(8,46,23,.6),inset 0 0 0 8px #6e9f6d,0 0 0 7px rgba(29,68,42,.67);color:#e7d7a5;transition:transform .3s,filter .3s}.wax:after{content:'';position:absolute;inset:13px;border:1px dotted rgba(225,208,147,.8);border-radius:50%}.wax:hover,.wax:focus-visible{transform:scale(1.07);filter:brightness(1.16)}.wax-inner{font:500 29px var(--serif);letter-spacing:-.08em;text-shadow:0 2px 1px #1c3c23}.wax-inner span{font-size:17px;padding:0 3px}.opening-instruction{font-size:9px;letter-spacing:.18em;margin:33px 0 0;opacity:.8;line-height:2.1}.opening-instruction span{display:block;font:30px var(--serif);animation:float 2s infinite}.opening.is-open{opacity:0;visibility:hidden;pointer-events:none}.opening.is-open .opening-left{transform:translateX(-105%)}.opening.is-open .opening-right{transform:translateX(105%)}@keyframes float{50%{transform:translateY(8px)}}
/* hero */
.hero{min-height:760px;height:100svh;position:relative;background:#254934;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;animation:heroZoom 16s ease-out both}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,25,16,.50) 0%,rgba(2,15,9,.06) 27%,rgba(9,25,16,.2) 48%,rgba(2,15,9,.67) 100%)}@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}.hero-content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8vh 22px 16vh;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.22)}.hero-script{font:400 clamp(68px,10vw,132px)/.9 var(--script);margin:0 auto 15vh;color:#fff9ed}.hero-pretitle{font:400 11px var(--sans);letter-spacing:.4em;margin:0 0 12px}.hero-names{font:300 clamp(56px,8vw,116px)/.92 var(--serif);letter-spacing:.025em;margin:0;white-space:nowrap}.hero-names span{font:400 .7em var(--script);padding:0 .03em;text-transform:none}.hero-divider{height:1px;background:rgba(255,255,255,.67);width:78px;margin:22px auto}.hero-date{font:400 clamp(22px,2.4vw,34px)/1.2 var(--serif);letter-spacing:.25em;margin:0}.hero-caption{font:italic 22px var(--serif);margin:15px 0 0}.hero-down{z-index:2;position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);text-align:center;font:400 9px var(--sans);letter-spacing:.22em;white-space:nowrap;text-decoration:none}.hero-down span{display:block;font-size:23px;margin-top:10px;animation:float 2s infinite}
/* story */
.story{position:relative;overflow:hidden;text-align:center;min-height:630px;padding:110px 24px 125px}.story-monogram{display:flex;align-items:baseline;justify-content:center;font:300 110px/1 var(--serif);margin:0 auto 38px;color:var(--green);letter-spacing:-.11em}.story-monogram i{font:400 74px var(--script);margin:0 -9px;transform:translateY(9px)}.story .serif-title{margin-top:10px}.fine-line{width:72px;height:1px;background:var(--gold);margin:27px auto}.story-text{font:400 clamp(15px,1.7vw,18px)/2.05 var(--sans);max-width:650px;margin:0 auto;position:relative;z-index:1;color:#536450}.story-text em{color:var(--green)}.story-quote{display:none}.lily{position:absolute;pointer-events:none;user-select:none}.lily-story{width:242px;right:-80px;top:96px;opacity:.20;transform:rotate(18deg)}
/* asymmetric story photos */
.photo-poem{background:#f6f6f0;padding:100px 25px}.photo-poem-grid{display:grid;grid-template-columns:1.05fr .65fr .95fr;gap:35px;align-items:center}.photo-poem figure{margin:0}.photo-poem img{height:550px;width:100%;object-fit:cover;box-shadow:0 14px 45px rgba(19,42,22,.10)}.photo-poem figcaption{font:italic 23px var(--serif);margin-top:14px;display:flex;justify-content:space-between;align-items:center;color:var(--green)}.photo-poem figcaption span{font:9px var(--sans);letter-spacing:.16em}.photo-second{transform:translateY(100px)}.photo-second img{height:435px}.photo-poem-note{text-align:center;align-self:center}.photo-poem-note .script-word{font-size:70px;transform:rotate(-8deg);margin-bottom:36px}.photo-poem-note h2{font:300 29px/1.3 var(--serif);letter-spacing:.08em;margin:0}.photo-poem-note p{font:300 13px/2 var(--sans);margin-top:23px;color:#748072}
.picture-break{height:min(86vw,720px);min-height:500px;background:#173a28;position:relative;overflow:hidden;display:flex;align-items:end;justify-content:center}.picture-break>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}.picture-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,25,15,.58),transparent 58%)}.picture-script{position:relative;color:#fff;margin:0 20px 45px;text-align:center;font:400 clamp(63px,10vw,143px)/1 var(--script);text-shadow:0 2px 11px #163622}
/* formal invitation */
.invitation{background:#eef0e7;padding:110px 20px}.invite-paper{position:relative;text-align:center;background:var(--paper);overflow:hidden;border:1px solid #dfe2d5;padding:85px 30px 75px;box-shadow:0 18px 80px rgba(38,66,43,.06);isolation:isolate}.invite-paper:before,.invite-paper:after{content:'';position:absolute;inset:16px;border:1px solid #c2c9b9;pointer-events:none;z-index:0}.invite-paper:after{inset:23px;border-color:#e5e6db}.invite-paper>*:not(.lily){position:relative;z-index:1}.lily-invite{z-index:0!important;width:214px;right:-66px;top:-82px;opacity:.18;transform:rotate(-29deg)}.invite-overline{font:400 16px/1.5 var(--serif);letter-spacing:.19em;margin:40px auto 38px}.parents{display:flex;justify-content:center;gap:6vw;align-items:stretch}.parents>div:not(.parents-rule){width:40%;max-width:300px}.parents h3{font:500 20px var(--serif);margin:0 0 14px}.parents p{font:400 clamp(13px,1.5vw,16px)/1.7 var(--serif);margin:0}.parents-rule{width:1px;background:var(--green);opacity:.65}.invite-greeting{font:400 16px/2.1 var(--serif);margin:47px 0 25px}.invite-names{font:400 clamp(47px,7vw,88px)/1.07 var(--serif);letter-spacing:.05em;margin:0;word-spacing:.04em}.invite-names span{font:400 .75em var(--script);display:inline-block;margin:0 .12em}.invite-ornament{font:24px var(--serif);color:var(--gold);margin:22px 0 28px}.invite-detail h3{font:400 22px var(--serif);letter-spacing:.09em;margin:10px auto 8px}.invite-detail>p{font:400 16px/1.8 var(--serif);margin:6px auto}.invite-detail>p.invite-time{font:400 18px/1.9 var(--serif);margin:10px auto 8px;letter-spacing:.02em}.invite-time-focus{display:inline-block;font:400 clamp(36px,5.2vw,60px)/.9 var(--serif);font-style:italic;color:var(--green);letter-spacing:.015em;padding:0 .12em;vertical-align:-0.08em;text-shadow:0 1px 0 rgba(255,255,255,.5)}.date-frame{display:flex;align-items:center;justify-content:center;gap:32px;color:var(--green);margin:18px 0}.date-frame>span{font:400 15px/1.4 var(--serif);letter-spacing:.1em;border-top:1px solid #819583;border-bottom:1px solid #819583;padding:8px 2px;min-width:95px}.date-frame strong{font-size:20px;font-weight:400}.date-frame>b{font:300 clamp(95px,12vw,145px)/.9 var(--serif)}.invite-venue-small{margin:18px 0 0!important}.invite-venue{margin-top:0!important;font-size:clamp(23px,3vw,32px)!important;letter-spacing:.02em!important}.invite-address{font-style:italic!important}.link-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid var(--green);border-radius:100px;padding:11px 22px;font:500 11px var(--sans);letter-spacing:.1em;text-decoration:none;margin-top:18px;transition:color .25s,background .25s}.link-button:hover{color:white;background:var(--green)}.link-button span:first-child{font-size:19px}.invite-foot{font:italic 400 22px var(--serif);margin:42px auto 0;max-width:440px}
/* album */
.gallery{padding:110px 28px 135px;text-align:center}.gallery .serif-title{font-size:80px}.gallery-sub{font:italic 22px var(--serif);margin:-5px auto 42px}.gallery-grid{display:grid;grid-template-columns:1.15fr .85fr .8fr;grid-template-rows:265px 265px;gap:14px}.gallery-tile{display:block;overflow:hidden;padding:0;border:0;background:#e2e9e1;cursor:zoom-in}.gallery-tile img{height:100%;width:100%;object-fit:cover;transition:transform .6s ease}.gallery-tile:hover img{transform:scale(1.05)}.gallery-tall{grid-row:span 2}.gallery-hint{font:400 9px var(--sans);letter-spacing:.19em;margin:24px 0 0;color:#849183}
/* countdown */
.countdown-section{min-height:515px;position:relative;overflow:hidden;background:#fdfcf9;text-align:center;padding:100px 20px 90px;isolation:isolate}.countdown-section .script-word{margin-bottom:21px}.countdown-section .eyebrow{margin-bottom:42px}.lily-countdown{width:310px;bottom:-120px;left:-86px;transform:rotate(52deg);opacity:.12;z-index:-1}.timer{display:flex;align-items:start;justify-content:center;gap:14px}.timer div{display:flex;flex-direction:column;min-width:95px;gap:16px}.timer strong{font:400 clamp(47px,6vw,76px)/1 var(--serif)}.timer span{font:400 10px var(--sans);letter-spacing:.14em}.timer i{font:400 clamp(32px,5vw,55px)/1 var(--serif);font-style:normal;opacity:.6}.countdown-foot{font:400 13px var(--serif);letter-spacing:.14em;margin:34px auto 0}
/* rsvp */
.rsvp{background:#eaf0e4;padding:110px 18px 115px}.rsvp-wrap{max-width:710px;position:relative;text-align:center}.rsvp-wrap .serif-title{margin:14px auto 21px;font-size:76px}.rsvp-description{font:400 14px/2.1 var(--sans);max-width:600px;margin:0 auto 42px;color:#657662}.lily-rsvp{width:202px;right:-140px;top:132px;opacity:.16;transform:rotate(-17deg)}.rsvp-form{position:relative;max-width:565px;margin:auto;text-align:left;display:flex;flex-direction:column;gap:9px}.rsvp-form label{font:500 11px var(--sans);letter-spacing:.07em;margin-top:14px}.rsvp-form label span{color:#a0794c}.rsvp-form input,.rsvp-form select,.rsvp-form textarea{width:100%;padding:16px 17px;border:1px solid #94a695;background:rgba(255,255,255,.73);outline:none;border-radius:9px;color:var(--forest);font:400 14px var(--sans);transition:box-shadow .2s,border-color .2s}.rsvp-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 7 6 6 6-6' stroke='%23234c35' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:45px}.rsvp-form textarea{resize:vertical;min-height:100px}.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(33,91,54,.12)}.rsvp-form ::placeholder{color:#94a195}.party-size-wrap{display:flex;flex-direction:column;gap:9px}.party-size-wrap[hidden]{display:none}.rsvp-submit{border:1px solid #164227;background:#154428;color:#fff;border-radius:100px;padding:18px 22px;font:500 12px var(--sans);letter-spacing:.11em;margin-top:22px;display:flex;gap:16px;justify-content:center;align-items:center;transition:background .2s,transform .2s}.rsvp-submit:hover{transform:translateY(-2px);background:#28613c}.rsvp-submit:disabled{opacity:.65;cursor:wait}.form-status{min-height:24px;font:400 13px/1.7 var(--sans);text-align:center;margin:8px auto 0}.form-status.is-error{color:#8f372e}.form-status.is-success{color:#245e36}.bot-field{position:absolute!important;left:-9999px!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
/* closing */
.thankyou{min-height:600px;height:78vh;position:relative;display:flex;align-items:center;justify-content:center;background:var(--forest);overflow:hidden}.thankyou>img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:50% 38%}.thankyou-overlay{position:absolute;inset:0;background:rgba(7,25,14,.62)}.thankyou-content{position:relative;text-align:center;color:white;max-width:530px;padding:50px 24px}.thankyou-content .script-word{color:white;font-size:105px;margin-bottom:48px}.thankyou-content p:not(.script-word){font:400 15px/2.1 var(--sans);margin:0 0 9px}.thankyou-content span{display:block;margin-top:45px;font:400 10px var(--sans);letter-spacing:.21em}.footer{background:#173a29;color:#f4f2e9;padding:28px;display:flex;align-items:center;justify-content:space-around;gap:15px}.footer>span{font:400 30px var(--serif);letter-spacing:.05em}.footer>span i{font:400 25px var(--script)}.footer p,.footer a{font:400 10px var(--sans);letter-spacing:.11em;text-decoration:none}
/* floating music and gallery modal */
.music-toggle{position:fixed;left:19px;right:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;border:1px solid rgba(30,73,43,.3);background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:12px 17px;box-shadow:0 5px 23px rgba(4,34,17,.25);font:500 10px var(--sans);letter-spacing:.1em}.music-toggle .music-icon{font-size:20px;line-height:1}.music-toggle.playing .music-icon{animation:musicPulse 1.2s infinite}.music-toggle:hover{background:#2c6443}@keyframes musicPulse{50%{transform:rotate(13deg) scale(1.13)}}.lightbox{border:0;padding:0;margin:auto;background:#102b1d;color:white;max-height:100dvh;max-width:100vw;width:100vw;height:100dvh;overflow:hidden}.lightbox::backdrop{background:rgba(0,0,0,.9)}.lightbox img{width:100%;height:100%;object-fit:contain}.lightbox button{position:absolute;z-index:2;border:0;background:rgba(10,40,20,.6);border-radius:50%;color:white;display:grid;place-items:center;width:44px;height:44px;font:36px var(--serif)}.lightbox-close{right:20px;top:20px}.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}.lightbox-index{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font:400 12px var(--sans);letter-spacing:.12em}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.reveal.in-view{opacity:1;transform:translateY(0)}
@media(max-width:900px){.photo-poem-grid{gap:22px}.photo-poem img{height:470px}.photo-second img{height:385px}.photo-poem-note .script-word{font-size:60px}.photo-poem-note h2{font-size:22px}.gallery-grid{grid-template-rows:220px 220px}}
@media(max-width:600px){.eyebrow{font-size:8px;letter-spacing:.18em}.opening-small{font-size:8px}.opening-script{font-size:130px}.opening-date{font-size:43px}.opening-couple{font-size:15px}.opening-content{transform:translateY(-12px)}.hero{height:100svh;min-height:620px}.hero-photo{object-position:49% 39%}.hero-content{padding-bottom:16vh}.hero-script{font-size:91px;margin-bottom:auto;margin-top:65px}.hero-pretitle{font-size:9px;letter-spacing:.24em}.hero-names{font-size:clamp(51px,12vw,72px)}.hero-date{font-size:24px}.hero-caption{font-size:19px}.hero-down{bottom:28px}.story{min-height:0;padding:105px 27px 100px}.story-monogram{font-size:100px;margin-bottom:32px}.story .serif-title{font-size:43px}.story-text{font-size:12px;line-height:2.2}.story-quote{font-size:23px}.lily-story{width:172px;right:-68px;top:104px;opacity:.12}.photo-poem{padding:62px 20px 98px}.photo-poem-grid{grid-template-columns:1fr 1fr;gap:16px;align-items:start}.photo-first{grid-column:1 / -1;margin:0 18% 0 0!important}.photo-first img{height:auto;aspect-ratio:3/3.7;object-fit:cover}.photo-first figcaption{font-size:21px}.photo-poem-note{grid-column:1;grid-row:2;align-self:center;padding:10px 0}.photo-poem-note .script-word{font-size:51px;margin-bottom:25px}.photo-poem-note h2{font-size:20px}.photo-poem-note p{font-size:11px}.photo-second{grid-column:2;grid-row:2;transform:translateY(24px)}.photo-second img{height:auto;aspect-ratio:3/4.5}.photo-second figcaption{font-size:17px}.picture-break{height:72vh;min-height:460px}.picture-break>img{object-position:50% 38%}.picture-script{font-size:72px;margin-bottom:50px}.invitation{padding:42px 13px}.invite-paper{padding:68px 20px 64px}.invite-paper:before{inset:10px}.invite-paper:after{inset:15px}.invite-paper .eyebrow{font-size:7px}.lily-invite{width:164px;right:-62px;top:-61px}.invite-overline{font-size:16px;margin:33px auto 36px}.parents{gap:10px}.parents>div:not(.parents-rule){width:47%}.parents h3{font-size:20px;margin-bottom:11px}.parents p{font-size:12px;line-height:1.7}.invite-greeting{font-size:15px;line-height:1.8;margin:43px auto 31px;max-width:305px}.invite-names{font-size:clamp(42px,12vw,62px);white-space:nowrap}.invite-ornament{margin:21px 0 26px}.invite-detail h3{font-size:18px}.invite-detail>p{font-size:15px}.date-frame{gap:18px}.date-frame>span{min-width:56px;font-size:12px;line-height:1.15}.date-frame strong{font-size:18px}.date-frame>b{font-size:90px}.invite-venue{font-size:21px!important}.invite-address{font-size:14px!important}.link-button{font-size:9px;padding:12px 13px;gap:7px}.invite-foot{font-size:18px;margin-top:32px}.gallery{padding:93px 17px 95px}.gallery .serif-title{font-size:60px}.gallery-sub{font-size:19px}.gallery-grid{gap:8px;grid-template-columns:1fr 1fr;grid-template-rows:205px 170px 205px}.gallery-tall{grid-row:span 2}.gallery-tile:last-child{grid-column:2}.countdown-section{min-height:0;padding:95px 11px 90px}.countdown-section .script-word{font-size:70px}.countdown-section .eyebrow{margin-bottom:36px}.lily-countdown{width:260px;bottom:-92px;left:-90px}.timer{gap:4px}.timer div{min-width:65px;gap:12px}.timer strong{font-size:52px}.timer span{font-size:8px}.timer i{font-size:32px}.countdown-foot{font-size:12px}.rsvp{padding:93px 23px 85px}.rsvp-wrap .serif-title{font-size:57px}.rsvp-description{font-size:12px;line-height:2.1;margin-bottom:30px}.lily-rsvp{width:174px;right:-80px;top:72px;opacity:.1}.rsvp-form label{font-size:10px}.rsvp-form input,.rsvp-form textarea,.rsvp-form select{font-size:13px}.rsvp-submit{font-size:10px;letter-spacing:.05em}.thankyou{height:68vh;min-height:500px}.thankyou-content .script-word{font-size:80px;margin-bottom:32px}.thankyou-content p:not(.script-word){font-size:12px}.footer{flex-direction:column;gap:9px;padding:34px 12px}.footer p,.footer a{font-size:9px;margin:0}.music-toggle{right:13px;bottom:calc(13px + env(safe-area-inset-bottom,0px));font-size:9px;padding:10px 14px}.music-toggle .music-icon{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important}.hero-photo{animation:none}.wax,.opening-left,.opening-right,.opening{transition:none}}
/* Mobile safeguards for decorative elements */
.rsvp{overflow:hidden}
@media(max-width:600px){.invite-names{font-size:clamp(33px,9.5vw,44px);letter-spacing:0}}

.thankyou>img{object-position:62% 22%}
@media(max-width:900px){.thankyou>img{object-position:66% 18%}}
@media(max-width:600px){.thankyou>img{object-position:68% 14%}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}.gallery-tall{grid-row:span 2}.gallery-tile img{aspect-ratio:auto}}

/* Customized final thank-you and direct hero start */
.thankyou-content{max-width:690px}
.thankyou-content .thankyou-message{max-width:590px;margin:0 auto;line-height:2.05;font-size:16px}
@media (max-width:600px){.thankyou-content{padding:36px 22px}.thankyou-content .thankyou-message{font-size:13px;line-height:1.95}.thankyou-content .script-word{margin-bottom:28px}.thankyou-content span{margin-top:32px}}

/* ===== TRANG & LONG : ALBUM / CALENDAR / WEDDING GIFT ===== */
.gallery-grid{grid-template-rows:none;grid-auto-rows:255px;gap:13px}
.gallery-tile{min-height:0}
.gallery-tile img{object-fit:cover;object-position:center 32%}
.gallery-tall img{object-position:center 42%}
.gallery-portrait img{object-position:center 33%}
.map-actions{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:6px}
.map-shared{font:500 10px var(--sans);letter-spacing:.11em;text-decoration:underline;text-underline-offset:5px;color:#3c634c}
.calendar-section{background:#f9f7f1;padding:115px 26px}
.calendar-layout{display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,5vw,100px);align-items:center}
.calendar-copy .eyebrow{text-align:left}
.calendar-copy .serif-title{text-align:left;font-size:clamp(43px,5.5vw,70px)}
.calendar-copy>p{font:400 15px/1.9 var(--sans);color:#667565;max-width:465px}
.calendar-copy>p strong{color:var(--forest);font-weight:600}
.calendar-copy .calendar-place{font-size:13px;color:var(--green);margin-top:26px}
.calendar-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}
.calendar-cta{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:13px 16px;border:1px solid #9da99b;color:#234c35;text-align:center;text-decoration:none;font:500 10px/1.5 var(--sans);letter-spacing:.045em;transition:all .2s}
.calendar-cta.primary{background:#224b36;border-color:#224b36;color:#fff}
.calendar-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(34,75,54,.10)}
.calendar-copy .calendar-note{font-size:10px;color:#849083;margin-top:18px;line-height:1.8}
.calendar-paper{background:#fffefa;border:1px solid #d8ded3;padding:38px 38px 30px;box-shadow:0 14px 54px rgba(29,61,39,.07)}
.cal-head{display:flex;align-items:baseline;justify-content:space-between;color:#27543b;border-bottom:1px solid #dfe7df;padding-bottom:23px;margin-bottom:26px}
.cal-head span{font:italic 47px/1 var(--serif)}.cal-head b{font:400 20px var(--serif)}
.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
.cal-weekdays{font:500 11px var(--sans);color:#77907a;margin-bottom:17px}
.cal-day{font:400 14px/1 var(--serif);aspect-ratio:1;display:flex;justify-content:center;align-items:center;position:relative;color:#4c5e4c}
.cal-day.event-date{border-radius:50%;background:#234d35;color:#fff;font-size:22px}
.cal-day.event-date i{position:absolute;bottom:-11px;color:#bb9a60;font:18px var(--serif)}
.cal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #dfe7df;margin-top:28px;padding-top:18px;font:400 12px var(--sans);letter-spacing:.02em}
.cal-footer em{font:italic 22px var(--serif)}
.gift{background:#f3f4ed;padding:112px 24px}
.gift-inner{text-align:center}.gift .serif-title{margin-top:13px}
.gift-intro{max-width:610px;margin:0 auto 43px;color:#697669;font:400 14px/2 var(--sans)}
.gift-panel{width:min(100%,850px);margin:auto;background:#fffefa;display:grid;grid-template-columns:minmax(180px,.83fr) 1.17fr;box-shadow:0 16px 60px rgba(31,71,44,.07);border:1px solid #e6e8dd;text-align:left;min-height:385px}
.gift-portrait{min-height:330px;overflow:hidden}.gift-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.gift-details{padding:44px 44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.gift-label{font:500 10px var(--sans);letter-spacing:.13em;color:#809083;margin:0 0 17px}
.gift-details h3{font:400 clamp(39px,5vw,62px)/1.03 var(--serif);color:#244a36;margin:0 0 25px}
.gift-bank{font:400 23px var(--serif);margin:0 0 6px;color:#4e6456}
.gift-account{font:500 22px var(--serif);margin:0 0 24px;color:#254f38;letter-spacing:.025em}
.gift-open{border:0;background:#254f38;color:white;padding:17px 23px;text-align:center;font:500 10px var(--sans);letter-spacing:.05em;line-height:1.6}
.gift-open:hover{background:#35684c}
.gift-note{font:italic 17px/1.5 var(--serif);color:#818d81;margin:24px 0 0}
.gift-modal{padding:0;border:0;width:min(520px,calc(100vw - 26px));max-width:100%;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;background:#fdfbf6;box-shadow:0 20px 80px rgba(0,0,0,.24)}
.gift-modal::backdrop{background:rgba(12,28,17,.75)}
.gift-modal-card{position:relative}.gift-close{position:absolute;right:12px;top:12px;width:42px;height:42px;background:rgba(255,255,255,.92);color:#233c2b;font:300 34px/1 Arial,sans-serif;border:0;z-index:1}
.gift-modal-photo{width:100%;height:300px;object-fit:cover;object-position:center 29%}
.gift-modal-info{display:grid;grid-template-columns:minmax(120px,39%) 1fr;gap:16px;padding:24px;align-items:center;color:#28513a}
.gift-qr-wrap{padding:6px;background:white;box-shadow:0 0 0 1px #e7e8e1}
.gift-qr-wrap img{width:100%;aspect-ratio:1;object-fit:contain;image-rendering:auto}
.gift-modal-text{min-width:0}.gift-modal-text>span{font:italic 28px var(--serif)}
.gift-modal-text h2{font:400 clamp(20px,4vw,31px)/1.1 var(--serif);margin:3px 0 13px;border-bottom:1px solid #718472;padding-bottom:11px}
.gift-modal-text p{font:400 24px var(--serif);margin:0 0 3px}.gift-modal-text strong{display:block;font:400 24px var(--serif)}
.gift-copy{background:none;border:1px solid #64826f;color:#315b40;padding:10px 12px;font:500 9px/1.4 var(--sans);margin-top:16px}
.gift-copy-status{min-height:18px;font:400 12px var(--sans);margin:0 24px 20px;color:#366a48}
@media(max-width:900px){.gallery-grid{grid-auto-rows:220px}.calendar-section{padding:80px 22px}.calendar-layout{gap:25px}.calendar-paper{padding:30px 24px}}
@media(max-width:600px){
.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:168px;gap:9px}
.gallery-tall{grid-row:span 2}
.gallery-tall img{object-position:50% 45%}
.gallery-tile img{object-position:50% 30%;aspect-ratio:unset}
.calendar-section{padding:84px 20px}
.calendar-layout{grid-template-columns:1fr;gap:29px}
.calendar-copy .eyebrow{text-align:center}.calendar-copy .serif-title{text-align:center}
.calendar-copy>p{text-align:center;margin-left:auto;margin-right:auto;font-size:13px}
.calendar-buttons{justify-content:center;margin-top:25px}
.calendar-cta{width:100%}
.calendar-paper{width:min(100%,420px);margin:auto;padding:28px 21px 24px}
.cal-head span{font-size:40px}.cal-weekdays,.cal-grid{gap:5px}
.gift{padding:75px 19px}.gift-panel{grid-template-columns:1fr;max-width:430px}
.gift-portrait{height:240px;min-height:0}.gift-portrait img{object-position:50% 25%}
.gift-details{padding:28px 25px;align-items:center;text-align:center}
.gift-details h3{margin-bottom:19px}.gift-note{font-size:16px}
.gift-modal-photo{height:245px}
.gift-modal-info{padding:17px;gap:11px;grid-template-columns:44% 1fr}
.gift-modal-text>span{font-size:24px}.gift-modal-text h2{font-size:20px}.gift-modal-text p,.gift-modal-text strong{font-size:21px}
.gift-copy{padding:8px 9px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.calendar-cta{transition:none}}

/* Oct 24 refinements: inline gift card in RSVP and precise pin link */
.gift-rsvp-action{max-width:565px;margin:22px auto 0;text-align:center}
.gift-rsvp-button{display:flex;justify-content:center;align-items:center;gap:16px;width:100%;border-radius:999px;background:#234c35;color:#fff;min-height:56px;font:500 12px var(--sans);letter-spacing:.11em}
.gift-rsvp-button:hover{background:#326747}
.map-hint{max-width:460px;margin:12px auto 0;font:400 12px/1.6 var(--sans);color:#55705b;text-align:center}
.map-inline{font:500 14px/1.9 var(--sans);color:#295b3c;text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){.gift-rsvp-action{margin-top:24px}.gift-rsvp-button{font-size:12px}.photo-first img{object-position:50% 30%}.photo-second img{object-position:50% 37%}}

.story .serif-title{max-width:1100px;margin-left:auto;margin-right:auto}
.map-actions .link-button{min-width:min(100%,360px)}

/* 11-photo release: matching RSVP actions & refined small-screen typography.
   Keep the CSS together so the two buttons cannot silently diverge at mobile breakpoints. */
.rsvp-submit,
.gift-rsvp-button{
  width:100%;
  min-height:58px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 13px;
  border-radius:100px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.045em;
  text-align:center;
  white-space:normal;
}
.gift-rsvp-button{margin:0;border:1px solid #164227}
.form-status:empty{display:none}
.gift-rsvp-action{margin-top:20px}
/* keep blank confirmation area absent until user actually submits */
@media(max-width:600px){
  body{overflow-wrap:break-word}
  .section-width{max-width:100%}
  .story{padding:82px 22px 88px}
  .story-monogram{font-size:84px;margin-bottom:24px}
  .story .serif-title{
    font-size:clamp(31px,8.9vw,43px);
    line-height:1.16;
    letter-spacing:-.012em;
    margin:14px auto 20px;
    text-wrap:balance;
  }
  .story-text{font-size:13px;line-height:1.85;max-width:35ch}
  .fine-line{margin:23px auto}
  .photo-poem{padding:64px 17px 96px}
  .photo-poem-grid{column-gap:14px;row-gap:22px}
  .photo-poem-note h2{font-size:clamp(17px,4.8vw,21px);line-height:1.35}
  .photo-poem-note p{font-size:12px;line-height:1.75}
  .invitation{padding:36px 10px}
  .invite-paper{padding:61px 18px 58px}
  .invite-greeting{font-size:14px;line-height:1.8;margin:35px auto 26px}
  .invite-venue{font-size:clamp(18px,5vw,21px)!important;line-height:1.35}
  .invite-address{font-size:13px!important;line-height:1.7}
  .invite-foot{line-height:1.5}
  .gallery{padding:76px 15px 82px}
  .gallery .serif-title{font-size:clamp(45px,11.8vw,60px);margin:10px auto 15px;line-height:1.05}
  .gallery-sub{font-size:17px;line-height:1.45;margin-bottom:28px}
  .gallery-grid{gap:9px;grid-auto-rows:clamp(155px,45vw,202px)}
  .gallery-tile:last-child{grid-column:auto}
  .gallery-hint{font-size:9px;letter-spacing:.1em;line-height:1.7}
  .calendar-section{padding:70px 17px}
  .calendar-copy>p{font-size:13px;line-height:1.85}
  .countdown-section{padding:80px 12px 75px}
  .rsvp{padding:80px 18px 82px}
  .rsvp-wrap .serif-title{font-size:clamp(45px,12vw,57px);line-height:1.07;margin:12px auto 18px}
  .rsvp-description{font-size:13px;line-height:1.85;margin:0 auto 27px;max-width:37ch}
  .rsvp-form{gap:9px}
  .rsvp-form label{font-size:11px;line-height:1.6;letter-spacing:.04em}
  .rsvp-form input,.rsvp-form textarea,.rsvp-form select{font-size:14px;line-height:1.55}
  .rsvp-submit,.gift-rsvp-button{
    font-family:var(--sans);
    font-size:clamp(12px,3.25vw,13px);
    font-weight:600;
    letter-spacing:.025em;
    line-height:1.5;
    padding:16px 11px;
    min-height:58px;
  }
  .rsvp-submit{margin-top:18px}
  .gift-rsvp-action{margin-top:18px}
  .gift-modal-photo{height:220px}
  .gift-modal-text h2{line-height:1.3}
  .thankyou-content{padding:38px 22px}
  .thankyou-content .script-word{font-size:clamp(64px,17vw,82px);margin-bottom:23px}
  .thankyou-content p:not(.script-word){font-size:13px;line-height:1.8}
}
@media(max-width:360px){
  .rsvp{padding-left:15px;padding-right:15px}
  .rsvp-submit,.gift-rsvp-button{font-size:12px;letter-spacing:0;gap:7px;padding:16px 8px}
  .gift-modal-info{grid-template-columns:1fr;justify-items:center;text-align:center;gap:13px}
  .gift-qr-wrap{max-width:185px;width:100%}
  .gift-modal-text h2{font-size:22px}
}


/* --------------------------------------------------------------
   TRANG & LONG — CINEMATIC SCROLL MOTION
   Inspired by subtle editorial video transitions. No added intro
   screen. Animations transform/opacity for smooth phone scrolling.
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .reveal {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 30px, 0);
    transition:
      opacity 940ms cubic-bezier(.2, .7, .24, 1),
      transform 940ms cubic-bezier(.2, .7, .24, 1),
      filter 940ms ease;
    transition-delay: var(--motion-delay, 0ms);
  }
  html.motion-ready .reveal.in-view {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0);
  }

  /* Visual rhythm, similar to animated chapter titles in the sample. */
  html.motion-ready .motion-word {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    padding-bottom: .13em;
    margin-bottom: -.13em;
  }
  html.motion-ready .motion-word-inner {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .82em, 0);
    transition:
      transform 890ms cubic-bezier(.19, .78, .24, 1),
      opacity 770ms ease;
    transition-delay: calc(120ms + var(--motion-word-index, 0) * 65ms);
  }
  html.motion-ready .motion-title.in-view .motion-word-inner,
  html.motion-ready .motion-title.motion-entered .motion-word-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Photo frames are revealed as if film is slowly developing. */
  html.motion-ready .photo-first img,
  html.motion-ready .photo-second img {
    transform: scale(1.055);
    transition: transform 1550ms cubic-bezier(.18,.74,.21,1);
  }
  html.motion-ready .photo-first.in-view img,
  html.motion-ready .photo-second.in-view img { transform: scale(1); }

  html.motion-ready .gallery-tile.reveal {
    filter: none;
    opacity: 0;
    transform: translate3d(0,36px,0) scale(.975);
    transition:
      opacity 880ms ease,
      transform 900ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--motion-delay, 0ms);
  }
  html.motion-ready .gallery-tile.reveal.in-view {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
  html.motion-ready .gallery-tile img {
    transform: scale(1.07);
    transition: transform 1500ms cubic-bezier(.21,.75,.21,1), filter 950ms ease;
    filter: saturate(.86);
  }
  html.motion-ready .gallery-tile.in-view img { transform: scale(1); filter: saturate(1); }
  @media (hover:hover) {
    html.motion-ready .gallery-tile.in-view:hover img { transform: scale(1.055); }
  }

  /* Gentle cover drift creates movement without jumping during scroll. */
  html.motion-ready .hero-photo {
    animation: motionHeroFilm 19s ease-out both;
    transform-origin: center 42%;
  }
  @keyframes motionHeroFilm {
    0% { transform: scale(1.095) translate3d(0,8px,0); }
    100% { transform: scale(1.015) translate3d(0,0,0); }
  }

  html.motion-ready .hero-script.reveal,
  html.motion-ready .hero-pretitle.reveal,
  html.motion-ready .hero-names.reveal,
  html.motion-ready .hero-date.reveal,
  html.motion-ready .hero-caption.reveal {
    transform: translate3d(0,24px,0);
    filter: blur(6px);
    transition-duration: 1150ms;
  }
  html.motion-ready .hero-script.in-view,
  html.motion-ready .hero-pretitle.in-view,
  html.motion-ready .hero-names.in-view,
  html.motion-ready .hero-date.in-view,
  html.motion-ready .hero-caption.in-view { transform: translate3d(0,0,0);filter:blur(0); }
  html.motion-ready .hero-script { --motion-delay: 110ms; }
  html.motion-ready .hero-pretitle { --motion-delay: 460ms; }
  html.motion-ready .hero-names { --motion-delay: 690ms; }
  html.motion-ready .hero-date { --motion-delay: 920ms; }
  html.motion-ready .hero-caption { --motion-delay: 1050ms; }

  html.motion-ready .story .fine-line,
  html.motion-ready .hero-divider {
    transform-origin: center;
    animation: motionLineDraw 1500ms cubic-bezier(.21,.7,.25,1) both;
    animation-play-state: paused;
  }
  html.motion-ready .story.motion-entered .fine-line,
  html.motion-ready .hero-divider { animation-play-state: running; }
  @keyframes motionLineDraw { from { transform: scaleX(.04); opacity:.1; } to { transform:scaleX(1);opacity:1; } }

  /* full-width photographic chapters */
  html.motion-ready .picture-break>img,
  html.motion-ready .thankyou>img {
    transform: translate3d(0, var(--scene-shift, 0px), 0) scale(1.09);
    transition: transform 130ms linear;
    will-change: auto;
  }
  html.motion-ready .picture-break .picture-script {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.18,.75,.2,1);
  }
  html.motion-ready .picture-break.motion-entered .picture-script { opacity:1; transform:none; }
  html.motion-ready .thankyou .script-word,
  html.motion-ready .thankyou .thankyou-message,
  html.motion-ready .thankyou-content span {
    opacity:0;
    transform:translate3d(0,20px,0);
    transition:opacity 1000ms ease, transform 1000ms cubic-bezier(.2,.7,.2,1);
  }
  html.motion-ready .thankyou.motion-entered .script-word {opacity:1;transform:none;transition-delay:120ms}
  html.motion-ready .thankyou.motion-entered .thankyou-message {opacity:1;transform:none;transition-delay:330ms}
  html.motion-ready .thankyou.motion-entered .thankyou-content span {opacity:1;transform:none;transition-delay:540ms}

  html.motion-ready .invite-ornament { animation: motionStarGlow 4.5s ease-in-out infinite alternate; }
  @keyframes motionStarGlow { to { opacity:.62; transform:rotate(18deg) scale(.88); } }

  html.motion-ready .lily-story,
  html.motion-ready .lily-rsvp {
    animation: motionBloom 6.5s ease-in-out infinite alternate;
  }
  @keyframes motionBloom { to { opacity:.37; filter:saturate(1.06); } }

  html.motion-ready .timer #seconds { animation: motionSecondGlow 1s ease-in-out infinite alternate; }
  @keyframes motionSecondGlow { to {opacity:.77} }

  /* Subtle feedback on the action controls. */
  html.motion-ready .link-button,
  html.motion-ready .calendar-cta,
  html.motion-ready .rsvp-submit,
  html.motion-ready .gift-rsvp-button {
    transition: transform 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
  }
  html.motion-ready .link-button:active,
  html.motion-ready .calendar-cta:active,
  html.motion-ready .rsvp-submit:active,
  html.motion-ready .gift-rsvp-button:active {transform:scale(.978)}
}
@media (max-width:600px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready .reveal {filter:blur(2px); transform:translate3d(0,22px,0); transition-duration:740ms,740ms,740ms;}
  html.motion-ready .hero-script.reveal,
  html.motion-ready .hero-pretitle.reveal,
  html.motion-ready .hero-names.reveal,
  html.motion-ready .hero-date.reveal,
  html.motion-ready .hero-caption.reveal { transform:translate3d(0,15px,0);filter:blur(3px) }
  html.motion-ready .hero-script.reveal.in-view,
  html.motion-ready .hero-pretitle.reveal.in-view,
  html.motion-ready .hero-names.reveal.in-view,
  html.motion-ready .hero-date.reveal.in-view,
  html.motion-ready .hero-caption.reveal.in-view { transform:none;filter:none }
  html.motion-ready .gallery-tile.reveal { transform:translate3d(0,20px,0) scale(.985); transition-duration:660ms,720ms }
  html.motion-ready .gallery-tile.reveal.in-view { transform:none; }
  html.motion-ready .picture-break>img,
  html.motion-ready .thankyou>img { transform: translate3d(0,var(--scene-shift, 0px),0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-word-inner { opacity:1!important;transform:none!important;transition:none!important }
  html.motion-ready .picture-break .picture-script,
  html.motion-ready .thankyou .script-word,
  html.motion-ready .thankyou .thankyou-message,
  html.motion-ready .thankyou-content span {opacity:1!important;transform:none!important;transition:none!important}
  html.motion-ready .hero-photo,
  html.motion-ready .picture-break>img,
  html.motion-ready .thankyou>img {animation:none!important;transform:none!important;transition:none!important}
}

/* First-screen title sequence must start reliably even if it is already in
   the viewport before the IntersectionObserver executes. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .hero-script.in-view,
  html.motion-ready .hero-pretitle.in-view,
  html.motion-ready .hero-names.in-view,
  html.motion-ready .hero-date.in-view,
  html.motion-ready .hero-caption.in-view {
    animation-name:motionHeroLetterbox;
    animation-duration:1250ms;
    animation-timing-function:cubic-bezier(.17,.7,.2,1);
    animation-fill-mode:both;
  }
  html.motion-ready .hero-script.in-view{animation-delay:130ms}
  html.motion-ready .hero-pretitle.in-view{animation-delay:410ms}
  html.motion-ready .hero-names.in-view{animation-delay:630ms}
  html.motion-ready .hero-date.in-view{animation-delay:920ms}
  html.motion-ready .hero-caption.in-view{animation-delay:1090ms}
  @keyframes motionHeroLetterbox {
    from {opacity:0;transform:translate3d(0,26px,0);filter:blur(7px)}
    to {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
  }
}

@media(max-width:600px){.story .serif-title{font-size:clamp(38px,12vw,58px);line-height:1.16}.invite-names{font-size:clamp(54px,13vw,76px);line-height:1.03;letter-spacing:.03em}.invite-names span{margin:0 .08em}}


/* ===== 2026-10-26: FIX CHỮ ĐIỆN THOẠI & CHUYỂN NHẠC BÊN TRÁI ===== */
/* Giữ nút nhạc sát góc trái, tránh lấn các nút RSVP hoặc thông báo browser. */
.music-toggle {
  left: calc(18px + env(safe-area-inset-left, 0px));
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 680px) {
  .music-toggle {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Tên cô dâu chú rể không được mất nét chữ do bộ hiệu ứng tách từ.
     Kích thước được giới hạn cho màn hình 320–430px. */
  .invite-names,
  html.motion-ready .invite-names,
  html.motion-ready .invite-names.reveal {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(5px, 2vw, 12px);
    width: 100%;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    font-size: clamp(32px, 9.7vw, 46px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    word-spacing: 0;
    overflow-wrap: normal;
    text-align: center;
  }
  .invite-names span,
  html.motion-ready .invite-names span {
    font-size: .78em;
    display: inline-block;
    margin: 0 .02em;
    white-space: nowrap;
  }

  /* Mobile Safari có thể không kích hoạt IntersectionObserver chính xác
     sau khi đổi tab / khôi phục trang: tiêu đề phải luôn đọc được. */
  html.motion-ready .story .serif-title.reveal,
  html.motion-ready .gallery .serif-title.reveal,
  html.motion-ready .rsvp .serif-title.reveal,
  html.motion-ready .calendar-copy .serif-title.reveal,
  html.motion-ready .hero-names.reveal,
  html.motion-ready .invite-overline.reveal,
  html.motion-ready .invite-greeting.reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  html.motion-ready .motion-title .motion-word-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .story .serif-title {
    font-size: clamp(36px, 10.2vw, 48px) !important;
    line-height: 1.19 !important;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

@media(max-width:600px){.invite-detail>p.invite-time{font-size:19px;line-height:2}.invite-time-focus{font-size:clamp(34px,9vw,46px);padding:0 .18em;transform:translateY(1px)}}

@media(max-width:600px){.invite-time-focus{font-size:clamp(40px,12vw,56px);padding:0 .1em;vertical-align:-0.06em}.invite-detail>p.invite-time{font-size:19px;line-height:2}}


/* Gold line-art 02: meaningful visibility with delicate strokes and generous white space. */
.lily{pointer-events:none;user-select:none;filter:drop-shadow(0 1px 0 rgba(215,192,136,.13))}
.story .lily-story{width:290px;right:-38px;top:72px;opacity:.75;z-index:0}
.story>*:not(.lily){position:relative;z-index:1}
.invite-paper .lily-invite{width:288px;right:-48px;top:-22px;opacity:.78;z-index:0!important}
.invite-paper>*:not(.lily){position:relative;z-index:1}
.countdown-section .lily-countdown{width:345px;left:-75px;bottom:-110px;opacity:.65;z-index:0}
.countdown-section>*:not(.lily){position:relative;z-index:1}
.rsvp-wrap .lily-rsvp{width:258px;right:-88px;top:100px;opacity:.72;z-index:0}
.rsvp-wrap>*:not(.lily){position:relative;z-index:1}
@media (max-width:600px){
  .story .lily-story{width:194px;right:-67px;top:74px;opacity:.57}
  .invite-paper .lily-invite{width:200px;right:-49px;top:-12px;opacity:.62}
  .countdown-section .lily-countdown{width:260px;left:-85px;bottom:-90px;opacity:.58}
  .rsvp-wrap .lily-rsvp{width:190px;right:-73px;top:70px;opacity:.54}
}
@media(prefers-reduced-motion:reduce){.lily{animation:none!important;transition:none!important}}


/* Blush dahlia floral variant — 27/10/2026 */
.lily{pointer-events:none;user-select:none;filter:drop-shadow(0 10px 24px rgba(183,120,137,.10));mix-blend-mode:multiply}
.story .lily-story{width:280px;right:-34px;top:72px;opacity:.46;transform:rotate(10deg)}
.invite-paper .lily-invite{width:260px;right:-45px;top:-20px;opacity:.42;transform:rotate(-12deg)}
.countdown-section .lily-countdown{width:300px;left:-62px;bottom:-95px;opacity:.34;transform:rotate(18deg)}
.rsvp-wrap .lily-rsvp{width:220px;right:-72px;top:92px;opacity:.36;transform:rotate(-10deg)}
@media (max-width: 600px){
  .story .lily-story{width:182px;right:-58px;top:74px;opacity:.36}
  .invite-paper .lily-invite{width:176px;right:-45px;top:-10px;opacity:.34}
  .countdown-section .lily-countdown{width:220px;left:-78px;bottom:-80px;opacity:.28}
  .rsvp-wrap .lily-rsvp{width:165px;right:-68px;top:66px;opacity:.30}
}


/* Patch: keep original beginning image, adjust final thank-you image framing */
.thankyou>img{object-position:52% 24%}
@media(max-width:900px){.thankyou>img{object-position:51% 20%}}
@media(max-width:600px){.thankyou>img{object-position:49% 18%}}


/* Thank-you popup after confirmed RSVP. Scoped to avoid changing any other section. */
.rsvp-thanks-modal{
  box-sizing:border-box;
  width:min(500px,calc(100vw - 30px));
  max-width:100%; max-height:min(88dvh,780px);
  padding:0; border:0; border-radius:2px;
  overflow-y:auto;overscroll-behavior:contain;
  background:#fdfcf8;color:#28513a;
  box-shadow:0 22px 85px rgba(0,0,0,.26);
}
.rsvp-thanks-modal::backdrop{background:rgba(13,33,23,.72);backdrop-filter:blur(3px)}
.rsvp-thanks-card{position:relative;overflow:hidden;text-align:center}
.rsvp-thanks-close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(35,76,53,.20);border-radius:50%;
  color:#20432f;background:rgba(255,255,255,.91);
  font:300 32px/1 Arial,sans-serif;cursor:pointer;
}
.rsvp-thanks-close:focus-visible{outline:2px solid #20432f;outline-offset:2px}
.rsvp-thanks-photo{
  width:100%;height:310px;display:block;
  object-fit:cover;object-position:50% 13%;
  background:#e7e3df;
}
.rsvp-thanks-content{padding:25px 34px 31px;background:#fdfcf8}
.rsvp-thanks-title{font:italic 400 48px/1.08 var(--serif);color:#28513a;margin:0 0 15px}
.rsvp-thanks-content p{
  font:400 15px/1.85 var(--serif);color:#475f4c;
  max-width:420px;margin:0 auto;
}
.rsvp-thanks-signature{
  display:block;color:#7a8876;
  margin-top:23px;font:500 10px/1.6 var(--sans);letter-spacing:.18em;
}
@media(max-width:600px){
  .rsvp-thanks-modal{width:min(420px,calc(100vw - 24px));max-height:87dvh}
  .rsvp-thanks-photo{height:clamp(205px,35dvh,270px);object-position:50% 13%}
  .rsvp-thanks-content{padding:23px 22px 26px}
  .rsvp-thanks-title{font-size:43px;margin-bottom:13px}
  .rsvp-thanks-content p{font-size:14px;line-height:1.8}
  .rsvp-thanks-signature{font-size:9px;margin-top:19px}
  .rsvp-thanks-close{width:39px;height:39px;right:10px;top:10px}
}
@media(prefers-reduced-motion:reduce){.rsvp-thanks-modal,.rsvp-thanks-modal *{animation:none!important;transition:none!important}}


/* Bride invitation: additional ceremony details and two-date calendar (28 & 29 Nov 2026). */
.wedding-event-divider{display:flex;align-items:center;justify-content:center;gap:22px;max-width:310px;margin:48px auto 42px;color:var(--gold);font:20px var(--serif)}
.wedding-event-divider::before,.wedding-event-divider::after{content:"";height:1px;flex:1;background:#d8d9c9}
.wedding-ceremony{margin-bottom:28px}
.wedding-ceremony .invite-address{max-width:560px;margin-left:auto;margin-right:auto}
.wedding-ceremony .map-actions{margin:24px auto 0}
.wedding-calendar-events{display:grid;gap:14px;margin:26px 0}
.wedding-calendar-event{display:flex;align-items:center;gap:17px;padding:16px 17px;background:#fffefa;border:1px solid #dee5da;text-align:left}
.wedding-event-day{font:400 45px/.9 var(--serif);color:#275139;min-width:85px;white-space:nowrap}
.wedding-event-day span{font-size:22px}
.wedding-event-detail{display:flex;flex-direction:column;gap:6px;min-width:0}
.wedding-event-detail strong{font:500 12px/1.4 var(--sans);letter-spacing:.085em;color:#275139}
.wedding-event-detail small{font:400 12px/1.6 var(--sans);color:#6d7b6e}
.wedding-calendar-second-map{font:400 13px/1.7 var(--sans);color:#647563;margin:8px 0 20px}
.wedding-calendar-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:20px;color:#46644d;font:400 11px/1.5 var(--sans)}
.wedding-calendar-legend span{display:flex;align-items:center;gap:7px}
.wedding-calendar-legend i{display:inline-block;flex:0 0 8px;height:8px;border-radius:50%;background:var(--green)}
.calendar-paper .cal-day.event-date{font-weight:500}
.calendar-paper .cal-day.event-date::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(187,154,96,.36);border-radius:50%;pointer-events:none}
@media(max-width:600px){
  .wedding-event-divider{margin:33px auto 30px}
  .wedding-ceremony{margin-bottom:24px}
  .wedding-ceremony>h3:first-child{font-size:20px}
  .wedding-calendar-event{gap:12px;padding:14px 12px}
  .wedding-event-day{font-size:42px;min-width:74px}
  .wedding-event-day span{font-size:19px}
  .wedding-event-detail strong{font-size:11px}
  .wedding-event-detail small{font-size:11px}
  .wedding-calendar-legend{gap:9px;font-size:10px}
  .wedding-calendar-second-map{font-size:12px}
}