*{box-sizing:border-box}html,body{width:100%;margin:0;padding:0;background:#f8ecef;scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}.desktop-bg{position:fixed;inset:-40px;z-index:-2;background:linear-gradient(#eebec788,#df9ead99),url("../assets/images/cover-garden-bg.png") center/cover;filter:blur(28px) saturate(.82);transform:scale(1.12)}.desktop-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 36%,#563b454f 100%)}.wrap{width:100%;max-width:430px;margin:auto;background:#f8ecef;box-shadow:0 0 40px #0002;position:relative}.page{position:relative;width:100%;overflow:hidden;background:#f8ecef;line-height:0}.master-page{width:100%;height:auto;display:block;transform:scale(1.018);transition:transform 1.4s ease,filter 1.2s ease;filter:saturate(.98) brightness(.995)}.page.in .master-page{transform:scale(1)}.shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 15%,rgba(255,255,255,.32),transparent 18%),linear-gradient(120deg,transparent 0 44%,rgba(255,255,255,.12) 49%,transparent 54%);mix-blend-mode:screen;opacity:.35}.global-petals{position:fixed;z-index:20;inset:0;overflow:hidden;pointer-events:none}.petal{position:fixed;z-index:20;top:-40px;width:13px;height:9px;background:linear-gradient(135deg,#f8a9b8,#ffcdd6);border-radius:70% 15% 70% 15%;pointer-events:none;opacity:.78;animation:fall linear forwards}.global-petals .petal{position:absolute}.global-petals .petal.burst{animation-name:cover-petal-burst}.music{position:fixed;z-index:40;right:max(14px,calc((100vw - 430px)/2 + 14px));top:18px;width:42px;height:42px;border-radius:50%;border:1px solid #fff9;background:#ffffffc7;backdrop-filter:blur(10px);box-shadow:0 6px 18px #7e37452a;display:grid;place-items:center;color:#a33a4c;font-size:18px;line-height:1;user-select:none;cursor:pointer}.music.spin{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(720deg);opacity:.15}}.dots{position:fixed;z-index:35;right:max(7px,calc((100vw - 430px)/2 + 7px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}.dots a{width:6px;height:6px;border-radius:50%;background:#fff9;box-shadow:0 1px 5px #0002;border:1px solid #a64c5b55}.dots a.active{height:18px;border-radius:6px;background:#b63d53}.venue-hit,.contact-left,.contact-right,.rsvp-hit{position:absolute;z-index:8;border:0;background:transparent;cursor:pointer}.venue-hit{left:28%;right:28%;bottom:12%;height:7%;border-radius:60px}.contact-left,.contact-right{left:16%;right:16%;height:7%;border-radius:60px}.contact-left{bottom:29%}.contact-right{bottom:19%}.rsvp-hit{left:25%;right:25%;bottom:17%;height:7%;border-radius:60px}.toast{position:fixed;z-index:60;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:#2b2022e8;color:white;padding:10px 16px;border-radius:99px;font-size:12px;line-height:1;transition:.25s}.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}


/* PAGE 01: reference plate with only the two supplied transparent figures overlaid. */
.page-cover{aspect-ratio:853/1844;background:#f7d9df;isolation:isolate;transition:opacity .78s ease,transform .78s cubic-bezier(.22,.7,.3,1)}
.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.cover-photo-reveal{position:absolute;z-index:2;inset:0;overflow:visible;pointer-events:none}
.cover-couple{position:absolute;display:block;width:147%;height:auto;left:50%;bottom:7%;transform:translateX(-46%);visibility:visible;opacity:1;filter:sepia(.025) drop-shadow(0 3px 5px #845c4820)}
.cover-cartoon{position:absolute;z-index:3;left:-7%;bottom:8%;height:35%;pointer-events:none}
.cover-cartoon img{display:block;width:auto;height:100%;background:transparent;border:0;box-shadow:none;filter:sepia(.025) drop-shadow(0 2px 3px #845c481a)}
.cover-button-visual,.cover-front-flowers{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none}
.cover-button-visual{z-index:4;-webkit-mask-image:radial-gradient(ellipse 40% 6% at 50% 88%,#000 67%,transparent 100%);mask-image:radial-gradient(ellipse 40% 6% at 50% 88%,#000 67%,transparent 100%)}
.cover-front-flowers{z-index:3;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 79%,rgba(0,0,0,.18) 84%,rgba(0,0,0,.6) 90%,#000 97%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 79%,rgba(0,0,0,.18) 84%,rgba(0,0,0,.6) 90%,#000 97%)}
.cover-enter{position:absolute;z-index:5;left:24%;bottom:9%;width:52%;height:6.5%;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;touch-action:manipulation}
.page-cover .petal{position:absolute;z-index:6;opacity:.6;will-change:transform,opacity;animation:cover-petal-fall 9s linear forwards}
.page-cover .petal.burst{animation:cover-petal-burst 1.1s ease-out forwards}
@keyframes cover-petal-fall{from{transform:translate3d(0,0,0) rotate(0);opacity:0}12%{opacity:.6}to{transform:translate3d(var(--x),950px,0) rotate(280deg);opacity:0}}
@keyframes cover-petal-burst{from{transform:translate3d(0,0,0) rotate(0);opacity:.7}to{transform:translate3d(var(--x),75px,0) rotate(130deg);opacity:0}}
.cover-enter:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cover-enter:active{transform:scale(.985)}
.cover-enter:disabled{cursor:default}
.cover-leaving{opacity:.18;transform:scale(.992)}
#p2.page-arriving{animation:page2-arrive .95s cubic-bezier(.22,.7,.3,1) both}
@keyframes page2-arrive{from{opacity:.25;transform:translateY(18px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
.music.spin{animation-duration:7s}

/* PAGE 02: magazine-style portrait collage over the final reference plate. */
.page-meet{aspect-ratio:941/1672;isolation:isolate;background:#fae9e5}
.meet-bg{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.meet-card{position:absolute;z-index:3;padding:2% 2% 0;background:linear-gradient(145deg,#fffdf7,#f8eee5);box-shadow:0 10px 24px rgba(111,65,60,.2);transform-origin:center;line-height:1;color:#a92f3f}
.meet-groom{left:4.5%;top:31.5%;width:49%;height:35%;transform:rotate(5deg)}
.meet-bride{right:4.5%;top:47%;width:45%;height:35%;transform:rotate(-5.5deg)}
.meet-photo{width:100%;height:72%;overflow:hidden;background:#ead8cf}
.meet-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.meet-groom .meet-photo img{object-position:50% 50%}
.meet-bride .meet-photo img{object-position:50% 48%}
.meet-caption{position:relative;height:28%;padding:3% 5% 2%;background:linear-gradient(180deg,#fffdf8,#f7e9df);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.meet-caption em{position:absolute;right:5%;top:-35%;font:italic 500 clamp(24px,8vw,39px)/1 Georgia,"Times New Roman",serif;color:#bd3d4c}
.meet-caption strong{font:500 clamp(18px,5.4vw,27px)/1.1 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:.15em}
.meet-caption span{margin-top:5%;font:500 clamp(8px,2.5vw,12px)/1 Georgia,"Times New Roman",serif;letter-spacing:.18em}
.meet-tape{position:absolute;z-index:4;left:34%;top:-2.8%;width:33%;height:6.5%;background:rgba(226,188,169,.72);box-shadow:inset 0 0 10px #fff7;transform:rotate(-2deg)}
.meet-bride .meet-tape{left:37%;background:rgba(218,151,157,.7);transform:rotate(2deg)}
.meet-petals{position:absolute;z-index:5;inset:0;overflow:hidden;pointer-events:none}
.meet-petals i{position:absolute;top:-9%;width:10px;height:7px;border-radius:75% 20% 70% 20%;background:linear-gradient(135deg,#f5a7b6,#dc6f87);opacity:0;will-change:transform,opacity;animation:meet-petal-fall 11s linear infinite}
.meet-petals i:nth-child(1){left:8%;animation-delay:-2s;--drift:42px}
.meet-petals i:nth-child(2){left:31%;animation-delay:-8s;animation-duration:13s;--drift:-30px}
.meet-petals i:nth-child(3){left:58%;animation-delay:-5s;animation-duration:12s;--drift:36px}
.meet-petals i:nth-child(4){left:78%;animation-delay:-10s;animation-duration:14s;--drift:-38px}
.meet-petals i:nth-child(5){left:92%;animation-delay:-4s;animation-duration:15s;--drift:22px}
@keyframes meet-petal-fall{0%{transform:translate3d(0,-8vh,0) rotate(0) scale(.8);opacity:0}12%{opacity:.58}82%{opacity:.46}100%{transform:translate3d(var(--drift),112vh,0) rotate(330deg) scale(1.08);opacity:0}}

/* PAGE 03: keep the approved artwork and replace only its live countdown/photo areas. */
.page-day{isolation:isolate}
.page-day>.master-page{position:relative;z-index:1}
.day-countdown-intro{position:absolute;z-index:4;left:31%;top:30.55%;width:38%;margin:0;padding:.35% 0;background:linear-gradient(90deg,rgba(248,226,217,0),#f8e2da 12%,#f8e2da 88%,rgba(248,226,217,0));color:#9d2734;text-align:center;font:500 clamp(10px,3.7vw,18px)/1.35 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:.22em;white-space:nowrap}
.day-countdown{position:absolute;z-index:4;left:20.7%;top:34.05%;width:58.7%;height:9.15%;display:grid;grid-template-columns:repeat(4,1fr);gap:2.8%}
.day-countdown-cell{min-width:0;border:2px solid #742029;border-radius:14% 14% 12% 12%;background:linear-gradient(145deg,#902d34,#7f2029 72%,#6f1c24);box-shadow:inset 0 0 0 1px rgba(255,223,211,.5),0 3px 8px rgba(91,30,38,.2);color:#fff5ec;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.day-countdown-cell strong{font:400 clamp(27px,10vw,48px)/.92 Georgia,"Times New Roman",serif;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
.day-countdown-cell span{margin-top:10%;font:500 clamp(9px,3vw,14px)/1 "STKaiti","KaiTi",serif;text-align:center}
.day-countdown-cell small{display:block;margin-top:20%;font:400 clamp(6px,1.8vw,9px)/1 Georgia,"Times New Roman",serif;letter-spacing:.04em}
.day-photo-card{position:absolute;z-index:5;right:-3.7%;top:69.3%;width:28.5%;height:23.6%;margin:0;padding:2.2% 2.2% 4.9%;background:linear-gradient(145deg,#fffdf8,#f3e4d7);box-shadow:0 9px 18px rgba(91,49,45,.22);transform:rotate(12.5deg);transform-origin:center;line-height:1;overflow:hidden}
.day-photo-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#efe0d4}
.day-photo-card figcaption{position:absolute;left:0;right:0;bottom:1.5%;color:#5e342f;text-align:center;font:italic 500 clamp(8px,2.6vw,13px)/1.1 Georgia,"Times New Roman",serif;white-space:nowrap}
.day-28-pulse{position:absolute;z-index:3;left:69.2%;top:65.7%;width:7.9%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 0 rgba(145,29,42,.22);animation:day-28-breathe 3.2s ease-in-out infinite;pointer-events:none}
@keyframes day-28-breathe{0%,100%{box-shadow:0 0 0 0 rgba(145,29,42,.08)}50%{box-shadow:0 0 0 7px rgba(145,29,42,.14)}}
.page-timeline .master-page{opacity:.94;transform:translateY(12px) scale(1.006);transition:opacity .85s ease,transform .85s cubic-bezier(.22,.7,.3,1)}
.page-timeline.in .master-page{opacity:1;transform:translateY(0) scale(1)}
.page-venue .venue-hit{z-index:8;left:29.4%;right:29.4%;top:75.6%;bottom:auto;height:6.6%;touch-action:manipulation}
.map-sheet{position:fixed;z-index:80;inset:0;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
.map-sheet.is-open{visibility:visible;pointer-events:auto}
.map-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(57,34,40,.34);opacity:0;transition:opacity .28s ease}
.map-sheet.is-open .map-sheet-backdrop{opacity:1}
.map-sheet-panel{position:relative;width:min(100%,430px);padding:14px 18px max(18px,env(safe-area-inset-bottom));border:1px solid rgba(190,139,116,.52);border-radius:24px 24px 0 0;background:linear-gradient(165deg,#fffaf4,#f9e9e8);box-shadow:0 -12px 34px rgba(83,45,51,.2);transform:translateY(105%);transition:transform .34s cubic-bezier(.22,.7,.3,1);line-height:1.35;color:#8d3542}
.map-sheet.is-open .map-sheet-panel{transform:translateY(0)}
.map-sheet-handle{width:68px;margin:0 auto 8px;border-top:1px solid #dca6aa;color:#bd5968;text-align:center;font-size:11px;line-height:8px}
.map-sheet-panel h2{margin:8px 0 12px;text-align:center;font:500 16px/1.4 "STKaiti","KaiTi",serif;letter-spacing:.15em}
.map-sheet-options{overflow:hidden;border:1px solid rgba(195,144,126,.42);border-radius:17px;background:rgba(255,255,255,.58)}
.map-sheet-options button,.map-sheet-cancel{display:block;width:100%;min-height:52px;border:0;background:transparent;color:#7f303d;font:500 16px/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;touch-action:manipulation}
.map-sheet-options button+button{border-top:1px solid rgba(183,121,119,.16)}
.map-sheet-options button:active,.map-sheet-cancel:active{background:rgba(220,153,162,.12)}
.map-sheet-cancel{margin-top:10px;border:1px solid rgba(195,144,126,.32);border-radius:15px;background:rgba(255,255,255,.42);color:#95616a}
body.map-sheet-open{overflow:hidden}
.rsvp-hit{left:25%;right:25%;bottom:26.4%;height:6.5%}
.page-ending{aspect-ratio:941/1672;background:#f7dedc;isolation:isolate}
.page-ending::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,235,226,.18),rgba(249,211,216,.1));opacity:.42;transition:opacity .65s ease}
.page-ending .ending-page-image{display:block;width:100%;height:auto;object-fit:contain;object-position:center;opacity:.82;transform:translate3d(0,7px,0);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.3,1);filter:none}
.page-ending.in::after{opacity:0}
.page-ending.in .ending-page-image{opacity:1;transform:translate3d(0,0,0)}

/* PAGE 08: real RSVP controls aligned to the approved artwork. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.page-rsvp{isolation:isolate}
.page-rsvp>.master-page{position:relative;z-index:1}
.rsvp-form{position:absolute;z-index:8;inset:0;color:#943b49;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.25}
.rsvp-field{position:absolute;display:block;margin:0}
.rsvp-field input,.rsvp-field textarea{display:block;width:100%;height:100%;margin:0;border:1px solid rgba(191,104,116,.42);outline:0;background:rgba(255,249,246,.9);box-shadow:inset 0 1px 3px rgba(124,71,72,.05);color:#713942;font:400 clamp(13px,3.6vw,16px)/1.25 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.rsvp-field input::placeholder,.rsvp-field textarea::placeholder{color:rgba(145,94,101,.52)}
.rsvp-field input:focus,.rsvp-field textarea:focus{border-color:rgba(177,72,91,.72);box-shadow:0 0 0 2px rgba(209,121,137,.12),inset 0 1px 3px rgba(124,71,72,.04)}
.rsvp-name,.rsvp-phone{left:28%;width:50.8%;height:3.75%}
.rsvp-name{top:34.25%}
.rsvp-phone{top:40.95%}
.rsvp-name input,.rsvp-phone input{border-radius:999px;padding:0 4%}
.rsvp-guests{left:28%;top:47.6%;width:50.8%;height:3.75%;display:grid;grid-template-columns:28% 44% 28%;overflow:hidden;border:1px solid rgba(191,104,116,.42);border-radius:999px;background:rgba(255,249,246,.9);box-shadow:inset 0 1px 3px rgba(124,71,72,.05)}
.rsvp-guests button,.rsvp-guests output{min-width:0;border:0;background:transparent;color:#9a4250;font:500 clamp(16px,5vw,22px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;display:grid;place-items:center;touch-action:manipulation}
.rsvp-guests output{font-size:clamp(14px,4vw,18px);font-variant-numeric:tabular-nums}
.rsvp-guests button:active{background:rgba(207,111,129,.12)}
.rsvp-guests button:disabled{opacity:.3}
.rsvp-note{left:28%;top:55.45%;width:50.8%;height:7.7%}
.rsvp-field textarea{padding:3.2% 4%;border-radius:16px;resize:none;overflow:auto;line-height:1.45;overscroll-behavior:contain;touch-action:pan-y}
.rsvp-note-count{position:absolute;left:67%;top:63.1%;width:11.4%;height:1.5%;padding-top:.2%;background:#f8e9e4;color:#ad6670;text-align:right;font:400 clamp(8px,2.3vw,11px)/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums}
.rsvp-status{position:absolute;left:27%;top:65.1%;width:46%;min-height:1.6%;margin:0;color:#a8394a;text-align:center;font:500 clamp(9px,2.5vw,12px)/1.25 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.rsvp-submit{position:absolute;left:26.5%;top:68%;width:46%;height:5.75%;padding:0;border:0;border-radius:999px;background:transparent;color:transparent;font:500 clamp(17px,5.2vw,24px)/1 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:.12em;cursor:pointer;touch-action:manipulation}
.rsvp-submit:focus-visible{outline:2px solid rgba(255,255,255,.95);outline-offset:2px}
.rsvp-submit:disabled{color:#fff8f2;background:linear-gradient(180deg,#d9808a,#c96975);box-shadow:inset 0 0 0 1px rgba(255,235,209,.72),0 3px 9px rgba(126,54,63,.16);cursor:wait}
.rsvp-success{position:absolute;z-index:9;left:18%;top:32%;width:64%;height:38%;padding:12% 7%;border:1px solid rgba(195,133,126,.45);border-radius:28px;background:linear-gradient(150deg,rgba(255,251,246,.97),rgba(249,226,224,.96));box-shadow:0 14px 34px rgba(106,59,63,.17);color:#913947;text-align:center;line-height:1.6;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rsvp-success[hidden]{display:none}
.rsvp-success strong{font:500 clamp(19px,5.7vw,27px)/1.55 "STKaiti","KaiTi","Songti SC",serif;letter-spacing:.05em}
.rsvp-success span{margin-top:7%;font:400 clamp(11px,3vw,14px)/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#a16269}
@media(max-width:430px){.wrap{box-shadow:none}.dots{right:7px}.music{right:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.petal{display:none}}