:root{--paper:#f6f1e7;--ink:#542432;--wine:#681f32;--muted:#765f58;--line:#c6b6a4;--serif:'Noto Serif TC','Songti TC',serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}body.sealed{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ab784a;outline-offset:7px}::selection{background:#681f32;color:#fff7e6}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,p,figure{margin:0}h1,h2{font-weight:400;text-wrap:balance}button{border:0;background:none}button:disabled{cursor:wait}button[hidden],a[hidden],[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.monogram{font-family:Georgia,serif;font-style:italic;font-size:33px;letter-spacing:-4px}.monogram span{font-size:23px;padding:0 3px}.text-button{display:inline-flex;align-items:center;gap:14px;font-size:12px;padding:12px 0;letter-spacing:.08em}.text-button svg{width:19px;transition:transform .3s}.text-button:hover svg{transform:translateX(5px)}
.cover{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;isolation:isolate;background:#ece1cf url('assets/stationery.webp') center/cover no-repeat;min-height:540px;transition:opacity .8s ease,visibility .8s;overflow:hidden}.cover:before{content:'';position:absolute;inset:0;background:rgba(255,250,239,.19);z-index:-1}.cover-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:26px 4.5vw;color:#653b3d}.cover-edition,.small-date{font:10px Georgia,serif;letter-spacing:.2em}.cover-edition{position:absolute;left:50%;transform:translateX(-50%)}.cover-intro{text-align:center;margin-top:clamp(10px,3vh,38px);transition:opacity .45s,transform .6s}.cover-intro h1{font-size:clamp(24px,2.4vw,35px);line-height:1.8;letter-spacing:.15em}.cover-intro p{font-family:Georgia,serif;font-size:15px;font-style:italic;color:#785647;margin-top:12px}.envelope-stage{width:min(540px,70vw);aspect-ratio:1.57;position:relative;margin:auto 0;perspective:1500px;z-index:2;flex-shrink:0}
.envelope{position:absolute;inset:0;width:100%;height:100%;padding:0;transform:rotate(-6deg);transition:transform 1.1s var(--ease),filter 1s;filter:drop-shadow(3px 6px 3px #31101e2e) drop-shadow(7px 25px 18px #492b2538);outline-offset:15px!important;perspective:1500px}
.envelope:hover{transform:rotate(-4deg) translateY(-5px);filter:drop-shadow(3px 8px 4px #31101e24) drop-shadow(8px 29px 21px #492b2540)}
.envelope span{display:block}
.envelope-back,.envelope-front,.envelope-fold-left,.envelope-fold-right,.envelope-bottom,.flap-outside,.flap-inside{background-image:url('assets/burgundy-paper-v2.webp');background-size:390px 390px;background-color:#772d41;position:absolute;inset:0}
.envelope-back{border-radius:3px;box-shadow:inset 0 14px 20px #220b1680,inset 0 1px 1px #d6908960;filter:brightness(.66)}
.envelope-front{z-index:3;clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);filter:brightness(.85)}
.envelope-fold-left,.envelope-fold-right{z-index:4;pointer-events:none}
.envelope-fold-left{clip-path:polygon(0 0,53% 56%,0 100%);background-position:20% 40%;filter:brightness(1.06)}
.envelope-fold-right{clip-path:polygon(100% 0,47% 56%,100% 100%);background-position:70% 10%;filter:brightness(.83)}
.envelope-fold-left:after,.envelope-fold-right:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#ffffff12,transparent 35%,#220b1640)}
.envelope-bottom{clip-path:polygon(0 100%,0 99.5%,48.8% 47%,50% 46.5%,51.2% 47%,100% 99.5%,100% 100%);z-index:5;background-position:40% 80%;filter:drop-shadow(0 -1px 1px #eaa79a55)}
.envelope-bottom:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#1b081c24,transparent 50%,#eaaa9a16);box-shadow:inset 0 -2px 2px #310f2355}
.flap{position:absolute;left:0;top:0;width:100%;height:58%;z-index:6;transform-origin:50% 0;transform-style:preserve-3d;transform:rotateX(0deg);transition:transform 1.1s cubic-bezier(.4,0,.2,1) .25s,z-index 0s .8s}
.flap-outside,.flap-inside{clip-path:polygon(0 0,100% 0,51.5% 98.5%,50% 100%,48.5% 98.5%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-outside{background-position:center 30%;box-shadow:inset 0 1px 1px #edb5a94d}
.flap-outside:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f8c2aa12,transparent 40%,#320d2526)}
.flap-inside{transform:rotateY(180deg);filter:brightness(.82);box-shadow:inset 0 3px 9px #270a1c55}
.wax{position:absolute!important;left:calc(50% - 52px);bottom:-37px;width:104px;height:104px;z-index:2;transform:translateZ(2px);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(1px 3px 2px #260d1e80);transition:transform .35s,filter .35s}
.wax img{object-fit:contain}
.envelope-to{position:absolute;bottom:23%;left:0;width:100%;text-align:center;color:#f2ddc4;font-size:14px;letter-spacing:.25em;z-index:7;text-shadow:0 1px 0 #351123;transition:opacity .4s}
.envelope-sign{position:absolute;bottom:9%;right:7%;color:#eed4be;font-size:11px;letter-spacing:.13em;z-index:7;text-shadow:0 1px 0 #351123;transition:opacity .4s}
.letter-peek{position:absolute;inset:5% 4.5%;background:#faf0dc;z-index:2;padding:5%;box-shadow:0 1px 0 #e3cfb0,0 2px 0 #f9edda,0 3px 0 #c5ae8d,2px 5px 8px #32152336;display:flex!important;align-items:center;justify-content:center;gap:5%;isolation:isolate;transition:transform 1.6s cubic-bezier(.45,.03,.19,1),box-shadow 1.6s;transform:translateY(0);border-radius:1px}
.letter-peek:before{content:'';position:absolute;inset:0;background:url('assets/burgundy-paper-v2.webp') center/320px;filter:grayscale(1) brightness(3.5);opacity:.18;z-index:-1}
.letter-peek:after{content:'';position:absolute;inset:3%;border:1px solid #b5986c77;pointer-events:none}
.card-photo{width:30%;height:96%;box-shadow:1px 2px 3px #422c2220;flex-shrink:0}.card-photo img{object-position:50% 35%}
.card-print{flex:1}.peek-script{font:italic clamp(13px,1.7vw,22px) Georgia,serif;color:#795445}.peek-names{font-size:clamp(18px,2.3vw,31px);margin:17px 0;letter-spacing:.08em}.peek-names i{font-family:Georgia,serif;margin:0 5px}.peek-date{font:12px Georgia,serif;letter-spacing:.12em}.peek-invite{font-size:11px;margin-top:20px;letter-spacing:.04em}
.open-prompt{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.12em;margin:22px 0 10px;transition:opacity .4s}.prompt-rule{width:25px;height:1px;background:#906e59}
.cover-footer{display:flex;width:100%;align-items:center;justify-content:space-between;padding:20px 4.5vw 24px;font-size:11px;letter-spacing:.12em;color:#6b4942}
.cover.opening .envelope{transform:rotate(0) translateY(18%)}
.cover.opening .wax{transform:translateZ(5px) rotate(-7deg);filter:drop-shadow(2px 5px 3px #260d1e70)}
.cover.opening .flap{transform:rotateX(178deg);z-index:1}
.cover.opening .envelope-to,.cover.opening .envelope-sign,.cover.opening .open-prompt,.cover.opening .cover-intro{opacity:0}.cover.opening .cover-intro{transform:translateY(-20px)}
.cover.extracting .letter-peek{transform:translateY(-120%) rotate(-1deg);box-shadow:0 1px 0 #e3cfb0,0 2px 0 #f9edda,0 3px 0 #c5ae8d,5px 22px 25px #32152330}
.cover.presenting .letter-peek{z-index:9;transform:translateY(-40%) rotate(-2deg) scale(1.1);transition:transform 1s var(--ease),box-shadow 1s}
.cover.presenting .envelope-back,.cover.presenting .envelope-front,.cover.presenting .envelope-fold-left,.cover.presenting .envelope-fold-right,.cover.presenting .envelope-bottom,.cover.presenting .flap{opacity:0;transition:opacity .7s ease,transform .7s ease;transform:translateY(35%)}
.cover.presenting .flap{transform:translateY(35%) rotateX(178deg)}
.cover.dismissed{opacity:0;visibility:hidden;pointer-events:none}

/* A single sheet of red wedding stationery, designed from the phone out. */
:root{--paper:#faf5ec;--ink:#762737;--wine:#852b3c;--muted:#815b57;--line:#d5b8ad}
html{scroll-padding-top:24px}body{background:#6d2231;scrollbar-color:#af6770 #f5e9df;caret-color:var(--wine)}
:focus-visible{outline:2px solid #b18549;outline-offset:5px}h2:focus{outline:none}input,button,a{touch-action:manipulation}button:disabled{cursor:default;opacity:.4}a,button{min-height:44px}
#invitation{max-width:620px;margin:0 auto;background:var(--paper);box-shadow:10px 0 80px #28071040;overflow:clip}
.letter-heading{background:var(--wine) url('assets/burgundy-paper-v2.webp') center/440px;color:#f7e5d2;padding:28px 32px 68px;text-align:center}
.letter-dateline{display:flex;justify-content:space-between;align-items:center;font:12px Georgia,serif;letter-spacing:.08em;margin-bottom:35px}.letter-dateline span{font:12px var(--serif);letter-spacing:.1em}
.letter-heading h2{font-size:40px;line-height:1.5;letter-spacing:.12em}.letter-heading i{font:italic 32px Georgia,serif;letter-spacing:0;margin:0 5px;color:#e3bb92}.wedding-title{font-size:14px;letter-spacing:.3em;margin-top:10px}
.hero-photo{margin:-40px 32px 0;position:relative}.hero-photo img{height:auto;aspect-ratio:1.12;object-position:50% 36%;border:6px solid var(--paper);box-shadow:2px 7px 16px #3d161a18}.hero-photo figcaption{font:italic 16px Georgia,serif;text-align:right;padding:14px 4px;color:var(--muted)}
.personal-letter{padding:25px 38px 45px;font-size:16px;line-height:2.05;letter-spacing:.035em}.personal-letter p+p{margin-top:22px}.letter-signature{display:block;text-align:right;font-size:14px;margin-top:24px}
.gathering{margin:0 32px;padding:40px 0 42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.gathering h2{font-size:27px;line-height:1.65;letter-spacing:.055em}.event-date{margin:28px 0 24px}.event-date time{font:36px Georgia,serif;letter-spacing:.03em;display:block}.event-date>span{display:block;font-size:14px;margin-top:12px;letter-spacing:.05em}.event-date b{font-weight:400;padding-left:18px}.venue-block h3{font-weight:400;font-size:19px;margin:0 0 8px;line-height:1.7}.venue-block p{font-size:14px;line-height:1.8;color:var(--muted)}
.event-actions{display:flex;gap:24px;margin-top:24px}.event-actions>*{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line)}.event-actions svg{width:18px}.event-actions a:hover,.event-actions button:hover{border-color:var(--wine)}
.reply{padding:46px 32px 35px;scroll-margin-top:20px}.rsvp-progress{font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:16px}.rsvp-progress:empty{display:none}.reply h2{font-size:28px;line-height:1.65;letter-spacing:.04em;overflow-wrap:anywhere}.flow-description{font-size:15px;line-height:1.95;margin-top:18px;color:var(--muted)}
.flow-primary{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;background:var(--wine);color:var(--paper);padding:17px 20px;min-height:56px;margin-top:26px;font-size:16px;text-align:left;border:1px solid var(--wine);transition:background .2s}.flow-primary:hover{background:#6a1d2c}.flow-primary svg{width:20px}.flow-note,.draft-notice{font-family:system-ui,sans-serif;font-size:12px;line-height:1.8;color:var(--muted);margin-top:16px}.draft-notice strong{font-weight:600}.flow-label{display:block;margin:26px 0 12px;font-size:14px}
#guest-name{width:100%;border:0;border-bottom:1px solid var(--wine);background:#f0e5dc;padding:16px 12px;font:18px var(--serif);color:var(--ink);border-radius:0;min-height:56px}input::placeholder{color:#806660}input[aria-invalid=true]{outline:2px solid #aa283b;outline-offset:3px}.attendance-options{border:0;padding:0;margin:22px 0 0}.attendance-options label{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:17px 8px;cursor:pointer;min-height:80px}.attendance-options label:first-of-type{border-top:1px solid var(--line)}.attendance-options label:has(input:checked){background:#efded7}.attendance-options input{accent-color:var(--wine);width:20px;height:20px;flex:0 0 20px;margin:0}.attendance-options strong{display:block;font-weight:400;font-size:16px}.attendance-options small{display:block;font-size:12px;color:var(--muted);line-height:1.7;margin-top:5px}.guest-counter{display:flex;align-items:center;gap:14px;border-block:1px solid var(--line);padding:15px 0}.guest-counter button{width:48px;height:48px;font:24px Georgia,serif;border:1px solid var(--line)}.guest-counter input{width:70px;flex:1;min-width:0;background:none;border:0;text-align:center;color:var(--ink);font:36px Georgia,serif;appearance:textfield;-moz-appearance:textfield}.guest-counter input::-webkit-inner-spin-button{appearance:none}.guest-counter span{font-size:14px}.flow-back{display:block;text-decoration:underline;text-underline-offset:5px;color:var(--muted);font-size:14px;padding:14px 0;margin-top:8px}.flow-error{color:#a12532;font-family:system-ui,sans-serif;font-size:14px;line-height:1.7;margin-top:14px}.flow-error:empty{display:none}.reply-summary{margin:24px 0 0}.reply-summary>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:15px 0}.reply-summary dt{font-size:14px;color:var(--muted);flex-shrink:0}.reply-summary dd{font-size:16px;margin:0;text-align:right;overflow-wrap:anywhere}.signoff{text-align:center;font-size:23px;letter-spacing:.15em;padding:55px 0 20px}.signoff i{font:italic 23px Georgia,serif}.signoff span{display:block;font-size:12px;letter-spacing:.12em;margin-top:12px;color:var(--muted)}.page-footer{padding:20px 32px 30px;text-align:center;border-top:1px solid var(--line)}.page-footer>span{font:11px Georgia,serif;letter-spacing:.1em;display:block}.page-footer button{font-size:12px;margin-top:8px}
@media(min-width:701px){#invitation{margin:40px auto}.letter-heading{padding:40px 60px 80px}.letter-heading h2{font-size:50px}.hero-photo{margin:-40px 60px 0}.hero-photo img{aspect-ratio:1.1}.personal-letter{padding:35px 70px 55px;font-size:18px}.gathering{margin:0 65px;padding-block:50px}.reply{padding:50px 65px 40px}.reply h2{font-size:32px}.cover{min-height:0}}
@media(max-width:700px){.cover{min-height:0;background-position:45% center}.cover-header{padding:22px 7%}.cover-edition{display:none}.small-date{font-size:11px}.cover-intro{margin-top:4svh}.cover-intro h1{font-size:27px;line-height:1.8}.cover-intro p{font-size:14px}.envelope-stage{width:83vw;max-width:460px;margin:auto 0}.wax{width:86px;height:86px;left:calc(50% - 43px);bottom:-30px}.envelope-to{font-size:13px}.envelope-sign{font-size:11px;letter-spacing:.02em}.open-prompt{font-size:12px;gap:12px;margin:20px 0 10px;letter-spacing:.03em}.prompt-rule{width:18px}.cover-footer{justify-content:center;padding:8px 24px max(18px,env(safe-area-inset-bottom))}.cover-footer>span{display:none}.cover-footer button{font-size:12px}.peek-script{font-size:14px}.peek-names{font-size:20px;margin:12px 0}.peek-date{font-size:11px}.peek-invite{font-size:11px;line-height:1.8;margin-top:12px}}
@media(max-width:360px){.letter-heading{padding-inline:24px}.letter-heading h2{font-size:33px}.hero-photo{margin-inline:24px}.personal-letter{padding-inline:26px;font-size:15px}.gathering{margin-inline:24px}.gathering h2,.reply h2{font-size:25px}.reply{padding-inline:24px}.event-actions{gap:18px}.event-actions>*{font-size:13px}.cover-intro h1{font-size:24px}.wax{width:70px;height:70px;left:calc(50% - 35px);bottom:-24px}.envelope-to{font-size:11px}.envelope-sign{font-size:10px}.peek-names{font-size:17px}.peek-script{font-size:12px}.peek-invite{font-size:10px}}
@media(max-height:620px){.cover-header{padding-block:12px}.cover-intro{margin-top:0}.cover-intro h1{font-size:23px;line-height:1.6}.cover-intro p{margin-top:8px;font-size:12px}.envelope-stage{width:min(78vw,350px)}.open-prompt{margin:10px 0 0;font-size:11px}.cover-footer{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.envelope:hover{transform:rotate(-6deg)}}
.envelope:disabled{opacity:1}
.cover-edition,.small-date{font-size:11px}
@media(max-width:360px){.peek-invite,.envelope-sign{font-size:11px}}