:root{color-scheme:light;--wine:#781e27;--deep-wine:#46151d;--gold:#edcf97;--gold-muted:#d3ad73;--paper:#faf3e6;--ink:#612832;--sans:"PingFang SC","Microsoft YaHei",sans-serif;--serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;font-family:var(--serif);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:#291419;background:radial-gradient(ellipse at 50% 40%,#612830 0,#30181e 50%,#1c1418 100%);color:var(--gold);min-height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden}.share-thumb{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid currentColor;outline-offset:6px}button,a{user-select:none}button:disabled{cursor:default}p,h1,h2{margin:0}button{color:inherit}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.invitation-shell{isolation:isolate;position:relative;width:100%;max-width:480px;height:100svh;height:100dvh;background:var(--wine);overflow:hidden;perspective:1500px;box-shadow:0 24px 100px #0005}.envelope,.page{background-color:var(--wine);background-image:linear-gradient(180deg,#4d0c1618,#4d0c1620),url("assets/wedding-art.webp");background-position:center;background-size:cover}.envelope{overflow-y:auto;overscroll-behavior:contain;position:absolute;inset:0;z-index:10;text-align:center;display:flex;flex-direction:column;align-items:center;padding:calc(34px + env(safe-area-inset-top)) 28px calc(25px + env(safe-area-inset-bottom));transform-origin:left center;backface-visibility:hidden;transition:transform 1.25s cubic-bezier(.65,.05,.25,1),opacity .8s ease .35s;will-change:transform}.envelope.is-opening{transform:rotateY(-105deg);opacity:0;pointer-events:none}.cover-border,.page-frame{position:absolute;inset:16px;border:1px solid #dfba7447;pointer-events:none}.cover-border:before,.page-frame:before{content:"";position:absolute;inset:5px;border:1px solid #dfba741c}.cover-top{display:flex;align-items:center;justify-content:center;gap:14px;font-family:Georgia,serif;font-size:.75rem;letter-spacing:.22em;color:#efd9b2}.tiny-diamond{font-size:1rem}.cover-prelude{font-size:.875rem;letter-spacing:.32em;margin-top:clamp(28px,6.5svh,62px)}.double-happiness{width:clamp(148px,25svh,230px);height:clamp(148px,25svh,230px);display:grid;place-items:center;position:relative;margin:clamp(28px,5.6svh,54px) 0 clamp(24px,4.2svh,38px)}.double-happiness:before,.double-happiness:after{content:"";position:absolute;inset:14%;border:1px solid #ddbd795e;transform:rotate(45deg)}.double-happiness:after{inset:11%;border-color:#ddbd7925}.double-happiness span{position:relative;font-size:clamp(100px,17svh,155px);line-height:1;font-weight:400;text-shadow:1px 2px 0 #7d411c,0 0 32px #f5be4910;color:#f0d19a}.cover-title{font-size:1.25rem;letter-spacing:.4em;margin-right:-.4em}.cover-names{display:flex;justify-content:center;align-items:center;gap:20px;font-size:1.8rem;font-weight:400;letter-spacing:.16em;margin-top:25px;white-space:nowrap}.cover-names i{font:italic 1.5rem Georgia,serif;color:var(--gold-muted);letter-spacing:0}.cover-date{font:1rem Georgia,serif;letter-spacing:.28em;margin-top:21px;padding-left:.28em}.cover-action{margin-top:auto;padding-top:28px}.open-button{display:flex;align-items:center;justify-content:center;gap:28px;min-height:54px;min-width:220px;padding:13px 27px;border:1px solid #edcf9780;border-radius:2px;background:linear-gradient(105deg,#f6dfae,#dfb979);color:#65212c;font-size:1rem;letter-spacing:.25em;box-shadow:0 8px 25px #26050d24;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.open-button:after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-25deg);background:linear-gradient(90deg,transparent,#fff8,transparent);animation:button-shimmer 5s ease-in-out 2s infinite}.open-button:active{transform:scale(.97)}.button-arrow{font-family:var(--sans);font-size:1.2rem;letter-spacing:0}.cover-action p{font-size:.75rem;letter-spacing:.18em;margin-top:16px;color:#e5c69ebf}.cover-bottom{font-size:.75rem;letter-spacing:.24em;margin-top:clamp(25px,4svh,44px);color:#dfbd91a6}
.invitation-pages{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;scrollbar-width:none;visibility:hidden;overscroll-behavior-y:contain}.invitation-pages::-webkit-scrollbar{display:none}.invitation-shell.is-open .invitation-pages{visibility:visible}.page{min-height:100%;position:relative;scroll-snap-align:start;overflow:hidden;outline:none!important;display:flex}.page-content{width:100%;min-height:100%;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(45px + env(safe-area-inset-top)) 35px calc(85px + env(safe-area-inset-bottom))}.eyebrow{font-size:.75rem;letter-spacing:.25em;line-height:1.5;font-family:Georgia,var(--serif);color:var(--gold-muted)}.hero-content{justify-content:center}.hero-content>.eyebrow{margin-bottom:25px}.small-seal{display:grid;place-items:center;width:36px;height:36px;border:1px solid #e6c68994;font-size:1.6rem;border-radius:2px;transform:rotate(-7deg)}.script-word{font-family:"Baskerville","Palatino Linotype",Georgia,serif;font-style:italic;font-size:2rem;color:#e6cda880;letter-spacing:.015em;margin-top:25px}.hero-title{font-size:clamp(2.45rem,6.7svh,3.6rem);font-weight:400;line-height:1.5;letter-spacing:.22em;margin-right:-.22em;margin-top:7px;text-shadow:0 2px 14px #300b1544}.hero-verse{font-size:.875rem;line-height:1.9;letter-spacing:.08em;color:#ecd5b4;margin-top:15px}.couple-names{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:36px}.couple-names>div{display:flex;flex-direction:column;gap:9px}.person-label{font-size:.75rem;letter-spacing:.25em;color:#dbb68a}.person-name{font-size:1.9rem;letter-spacing:.18em;line-height:1.5;white-space:nowrap}.couple-amp{font:italic 1.7rem Georgia,serif;padding-top:22px;color:#cf9f6a}.fine-divider{width:125px;display:flex;align-items:center;gap:12px;margin:25px 0 20px}.fine-divider:before,.fine-divider:after{content:"";height:1px;background:#d6ac7370;flex:1}.fine-divider span{font-size:.9rem;color:#d3ab74}.hero-date{font-family:Georgia,serif;font-size:1.5rem;letter-spacing:.17em}.hero-weekday{font-size:.875rem;line-height:1.8;letter-spacing:.04em;margin-top:12px;color:#e0c5a3}.text-next{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;border:0;background:transparent;color:#e5c69eba;font-size:.875rem;letter-spacing:.12em;margin-top:24px;padding:10px}.text-next span{font-family:var(--sans);animation:hint-bob 2.4s ease-in-out infinite}.text-next.dark{color:#86555b;margin-top:19px}
.date-page{background-image:radial-gradient(ellipse at 0% 0%,#e0c59838,transparent 60%),radial-gradient(ellipse at 100% 100%,#e9c5a82a,transparent 50%);background-color:var(--paper);color:var(--ink)}.date-page:before{content:"囍";position:absolute;right:-32px;top:20px;font-size:210px;line-height:1;color:#ab775308;transform:rotate(12deg);pointer-events:none}.date-content{justify-content:center;padding-left:35px;padding-right:35px}.date-content .eyebrow{color:#976c51}.section-title{font-size:2rem;letter-spacing:.2em;font-weight:400;line-height:1.6;margin-top:12px;margin-right:-.2em}.invitation-copy{font-size:1rem;line-height:2;letter-spacing:.025em;margin-top:19px;color:#855b5e}.calendar{width:100%;margin-top:27px;padding:20px 15px 15px;border-top:1px solid #b98c673d;border-bottom:1px solid #b98c673d}.calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}.calendar-month{font-size:1.3rem;letter-spacing:.16em}.calendar-heading>span:last-child{font-family:Georgia,serif;font-size:.75rem;letter-spacing:.1em;color:#99786a}.calendar table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:Georgia,var(--serif)}.calendar th{font-weight:400;font-family:var(--serif);font-size:.75rem;color:#957c71;height:29px}.calendar td{height:35px;text-align:center;font-size:.875rem}.calendar td>span{width:30px;height:30px;display:inline-grid;place-items:center}.calendar .wedding-day>span{color:#fff3dc;background:var(--wine);border-radius:50%;box-shadow:0 0 0 3px #781e2710}.calendar .wedding-day{position:relative}.calendar .wedding-day:after{content:"♥";position:absolute;font-size:8px;bottom:-1px;left:50%;transform:translateX(-50%);color:var(--wine)}.calendar-caption{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.75rem;line-height:1.8;margin-top:18px;color:#8c5c5b;flex-wrap:wrap}.calendar-heart{font-family:var(--sans);font-size:.8rem;color:var(--wine)}.event-details{width:100%;margin:22px 0 0}.event-details>div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:10px 0;line-height:1.7}.event-details dt{font-size:.875rem;letter-spacing:.12em;flex-shrink:0;color:#977269}.event-details dd{font-size:1rem;margin:0;text-align:right;overflow-wrap:anywhere}.date-closing{font-size:.875rem;line-height:1.8;letter-spacing:.07em;margin-top:18px;color:#9b7870}
.closing-page{background-position:center 65%}.closing-content{justify-content:center}.closing-seal{font-size:5rem;line-height:1.2;color:#e8c78b;margin-top:32px;margin-bottom:27px}.closing-title{font-size:2rem;font-weight:400;line-height:1.8;letter-spacing:.16em;margin-right:-.16em}.closing-content .fine-divider{margin:27px 0}.closing-copy{font-size:1rem;line-height:2;letter-spacing:.04em;color:#e6caa7}.closing-names{display:flex;justify-content:center;align-items:center;gap:20px;font-size:1.6rem;letter-spacing:.13em;margin-top:34px}.closing-amp{font:italic 1.2rem Georgia,serif;color:#cba06e}.closing-signoff{font-size:.875rem;letter-spacing:.3em;margin-top:14px;color:#ddbc94}.closing-date{font:1rem Georgia,serif;letter-spacing:.2em;margin-top:26px}.replay-button{display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid #dfc08a50;border-radius:2px;background:#5c121920;font-size:.875rem;letter-spacing:.12em;min-height:44px;padding:10px 24px;margin-top:35px;transition:background .2s}.replay-button:hover{background:#e3c08a17}.replay-button span{font-family:var(--sans);font-size:1.2rem}.closing-footnote{font-size:.75rem;letter-spacing:.14em;color:#d8b48c9c;margin-top:27px}
.page-nav{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;background:#3a111cba;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #d3ad732d;border-radius:30px;padding:4px 17px;box-shadow:0 5px 25px #24081215;transition:background .4s,color .4s;color:#e8d0ad}.nav-item{border:0;background:transparent;font-size:.75rem;letter-spacing:.14em;display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 4px;white-space:nowrap;opacity:.6;transition:opacity .3s}.nav-item.is-active{opacity:1}.nav-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .3s}.nav-item.is-active .nav-dot{opacity:1}.nav-line{width:13px;height:1px;background:currentColor;opacity:.25}.page-nav.on-paper{background:#f7eddede;color:#6f343c;border-color:#9d735136}.ambient-particles{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:hidden;opacity:.6}.particle{position:absolute;bottom:-15px;width:3px;height:3px;background:#ffe3a6;border-radius:50%;opacity:0;animation:float-up var(--duration,15s) linear var(--delay,0s) infinite;box-shadow:0 0 5px #f5ce7780}.reveal{opacity:0;transform:translateY(18px);transition:opacity .95s ease,transform .95s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0s)}.page.is-visible .reveal{opacity:1;transform:translateY(0)}.desktop-note{display:none}.noscript-note{position:fixed;bottom:0;left:0;right:0;background:var(--paper);color:var(--ink);padding:12px;text-align:center;z-index:30;font-size:.875rem}
@keyframes float-up{0%{transform:translate(0,0);opacity:0}12%{opacity:.65}80%{opacity:.3}100%{transform:translate(35px,-100svh);opacity:0}}@keyframes button-shimmer{0%,55%{transform:translateX(-120%) skewX(-25deg)}85%,100%{transform:translateX(220%) skewX(-25deg)}}@keyframes hint-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(min-width:760px){body{padding:24px 0}.invitation-shell{height:calc(100svh - 48px);height:calc(100dvh - 48px);max-height:920px;min-height:560px;border-radius:5px;outline:1px solid #d4b28138}.desktop-note{display:flex;position:fixed;color:#d4b38b6b;font-size:.875rem;letter-spacing:.3em;line-height:2.5;pointer-events:none}.desktop-note-left{right:calc(50% + 290px);top:40%;gap:24px;writing-mode:vertical-rl}.desktop-note-right{left:calc(50% + 280px);bottom:18%;writing-mode:vertical-rl;gap:19px;font-family:Georgia,serif;font-size:.75rem;letter-spacing:.2em}.cover-prelude{margin-top:clamp(24px,5svh,50px)}.double-happiness{width:clamp(140px,22svh,215px);height:clamp(140px,22svh,215px);margin:clamp(25px,5svh,40px) 0 26px}.double-happiness span{font-size:clamp(100px,16svh,148px)}.cover-names{margin-top:22px}.cover-bottom{margin-top:25px}.page-content{padding-top:34px;padding-bottom:80px}.hero-title{font-size:clamp(2.4rem,6svh,3.35rem)}.hero-content>.eyebrow{margin-bottom:16px}.hero-content .script-word{margin-top:19px}.hero-content .couple-names{margin-top:25px}}
@media(max-height:740px){.envelope{padding-top:calc(27px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom))}.cover-prelude{margin-top:25px}.double-happiness{width:143px;height:143px;margin:26px 0}.double-happiness span{font-size:103px}.cover-title{font-size:1.1rem}.cover-names{font-size:1.65rem;margin-top:19px}.cover-date{margin-top:17px}.cover-action{padding-top:24px}.cover-bottom{margin-top:24px}.page-content{padding-top:calc(32px + env(safe-area-inset-top));padding-bottom:calc(82px + env(safe-area-inset-bottom))}.hero-content>.eyebrow{margin-bottom:18px}.script-word{margin-top:18px;font-size:1.7rem}.hero-title{font-size:2.5rem}.hero-verse{margin-top:12px}.couple-names{margin-top:25px}.fine-divider{margin:18px 0}.hero-weekday{margin-top:10px}.text-next{margin-top:16px}.date-content{padding-top:calc(35px + env(safe-area-inset-top))}.invitation-copy{margin-top:13px}.calendar{margin-top:20px;padding-top:15px}.event-details{margin-top:14px}.date-closing{margin-top:12px}.closing-seal{font-size:4rem;margin:23px 0 18px}.closing-content .fine-divider{margin:20px 0}.closing-names{margin-top:25px}.closing-date{margin-top:19px}.replay-button{margin-top:24px}.closing-footnote{margin-top:18px}}
@media(max-height:610px){.envelope{overflow-y:auto}.cover-prelude{margin-top:18px}.double-happiness{width:110px;height:110px;margin:22px 0}.double-happiness span{font-size:80px}.cover-names{margin-top:16px}.cover-action{padding-top:22px}.cover-bottom{margin-top:20px}.page-content{min-height:620px}.cover-top{font-size:.7rem}.cover-action p{margin-top:12px}}
@media(max-width:360px){.envelope{padding-left:20px;padding-right:20px}.cover-top{gap:9px;letter-spacing:.16em}.cover-names{gap:15px;font-size:1.6rem}.page-content{padding-left:27px;padding-right:27px}.hero-title{font-size:2.4rem}.couple-names{gap:22px}.person-name{font-size:1.7rem}.section-title{font-size:1.8rem}.calendar{padding-left:7px;padding-right:7px}.closing-title{font-size:1.85rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}.ambient-particles{display:none}.reveal{transform:none}.envelope.is-opening{transform:none}}

.envelope>*{flex-shrink:0}

/* Soft paper palette: September invitation refresh. */
:root{--wine:#a35043;--deep-wine:#754438;--gold:#554c3b;--gold-muted:#887246;--paper:#faf6ee;--ink:#514d40}
body{background:radial-gradient(ellipse at 50% 40%,#f5f0e5,#d8dfd2);color:var(--ink)}
.invitation-shell{background:var(--paper);box-shadow:0 24px 90px #53604424}
.envelope,.page{background-color:#f5efe3;background-image:radial-gradient(ellipse at 0% 0%,#d9dfc6aa,transparent 50%),radial-gradient(ellipse at 100% 100%,#e8d4b5aa,transparent 50%),repeating-linear-gradient(0deg,#88724604 0 1px,transparent 1px 4px);color:var(--ink)}
.hero-page{background-color:#faf7f0}.closing-page{background-color:#e9eee3;background-image:radial-gradient(ellipse at 100% 0%,#f8f3e6,transparent 70%)}
.cover-border,.page-frame{border-color:#a68c5355}.cover-border:before,.page-frame:before{border-color:#a68c5328}
.cover-top,.cover-action p,.cover-bottom,.hero-verse,.hero-weekday,.closing-copy,.closing-signoff,.closing-footnote,.text-next{color:#70654f}
.double-happiness span,.closing-seal,.small-seal{color:#a35043;text-shadow:none}.double-happiness:before,.double-happiness:after{border-color:#b2945f66}
.hero-title{text-shadow:none}.script-word{color:#879273}.person-label{color:#7b765e}.desktop-note{color:#69735c}
.open-button{background:#69765b;color:#fffaf0;border-color:#69765b;box-shadow:0 8px 22px #69765b26}
.page-nav,.page-nav.on-paper{background:#faf7eeeF;color:#555f48;border-color:#a5ab9570}.replay-button{background:#ffffff44;border-color:#8a936655;color:#555f48}
.particle{background:#b1945d;box-shadow:none}.ambient-particles{opacity:.35}
.letter-note{margin-top:25px;padding:22px 14px;border-top:1px solid #bca77b50;border-bottom:1px solid #bca77b50;width:100%;font-size:.875rem;line-height:2.15;color:#6f6958}.letter-heading{font-size:1rem;color:#59634d;margin-bottom:10px;letter-spacing:.13em}
.guest-notes{width:100%;margin-top:18px;text-align:left;border-top:1px solid #bca77b44}.guest-notes details{border-bottom:1px solid #bca77b44}.guest-notes summary{cursor:pointer;list-style:none;padding:15px 2px;font-size:.875rem;display:flex;justify-content:space-between;color:#59634d}.guest-notes summary::-webkit-details-marker{display:none}.guest-notes details[open] summary span{transform:rotate(45deg)}.guest-notes details p{font-size:.85rem;line-height:1.95;color:#716b5a;padding:0 2px 17px}.guest-notes summary:focus-visible{outline:2px solid #69765b;outline-offset:2px}
.hero-content{padding-top:48px;padding-bottom:95px}.hero-title{font-size:2.8rem}.hero-content .couple-names{margin-top:25px}