:root{--wine:#5a081f;--wine-dark:#390815;--cream:#faf6f0;--gold:#e8c98b;--bronze:#9a683c;--ink:#4b3428;--serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--page-width:640px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px;background:#211518}body{margin:0;color:var(--ink);font:16px/1.85 var(--serif);-webkit-text-size-adjust:100%;text-size-adjust:100%}button,a,input,video{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}button{color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #be934d;outline-offset:6px}button:disabled{cursor:default}img,video{display:block;max-width:100%}button svg{width:22px;height:22px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400;line-height:1.5}h2{font-size:clamp(1.45rem,5.7vw,2rem);letter-spacing:.08em}p{overflow-wrap:break-word}[hidden]{display:none!important}.page-shell{position:relative;max-width:var(--page-width);margin:auto;background:var(--cream);box-shadow:0 0 80px #0004;overflow:hidden;overflow:clip}.skip-link{position:fixed;top:-80px;left:12px;z-index:30;background:var(--cream);padding:10px}.skip-link:focus{top:12px}.eyebrow{font:500 .75rem/1.8 var(--sans);letter-spacing:.24em}.section-pad{padding:64px max(24px,env(safe-area-inset-right)) 64px max(24px,env(safe-area-inset-left));text-align:center}.wine-section{background:var(--wine);color:var(--cream)}.cream-section{background:var(--cream);color:var(--wine)}.wine-section .eyebrow{color:var(--gold)}.cream-section .eyebrow{color:var(--bronze)}.section-subtitle{margin-top:12px;font-size:.95rem;opacity:.76}.ornament{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--bronze);font:24px/1 Georgia,serif}.ornament span{height:1px;max-width:70px;width:20%;background:linear-gradient(90deg,transparent,currentColor)}.ornament span:last-child{transform:rotate(180deg)}.ornament.gold{color:var(--gold)}
/* Opening: the original envelope film, with real button semantics. */
.envelope{display:none}.js .envelope{display:block;position:fixed;inset:0;z-index:20;max-width:var(--page-width);margin:auto;background:#ebe6dc;overflow:hidden;transition:opacity .9s ease,visibility .9s}.envelope-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.envelope-shade{position:absolute;inset:0;background:linear-gradient(#22150418,transparent 35%,#efe8df30)}.envelope-heading{position:absolute;top:max(7%,calc(env(safe-area-inset-top) + 20px));left:20px;right:20px;text-align:center;color:#69533e}.envelope-heading p{margin-top:9px;font-size:1rem;letter-spacing:.15em}.envelope-invite{position:absolute;left:24px;right:24px;top:36%;text-align:center;display:flex;flex-direction:column;align-items:center;color:#623e29;transition:opacity .4s,transform .8s}.envelope-date{font:12px/1.8 Georgia,serif;letter-spacing:.23em}.envelope-invite h1{font-size:clamp(2rem,9vw,3.2rem);letter-spacing:.16em;margin:9px 0 3px;padding-left:.16em}.envelope-subtitle{font-size:.9rem;letter-spacing:.12em}.seal-button{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;border:1px solid #e8c98b;margin:28px 0 16px;background:radial-gradient(circle at 32% 24%,#97304a,#5a081f 64%,#340716);box-shadow:0 6px 16px #47271238,inset 0 0 0 4px #6b1c31,inset 0 0 0 5px #c09b6880;color:var(--gold);transition:transform .25s}.seal-button:hover{transform:translateY(-3px)}.seal-button:active{transform:scale(.95)}.seal-mark{font-size:34px;line-height:1}.envelope-hint{font-size:.8rem;letter-spacing:.14em;color:#6d5543}.envelope-skip{position:absolute;bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px));left:50%;transform:translateX(-50%);border:0;background:#faf6f0c9;border-radius:24px;padding:10px 22px;font-size:.875rem;white-space:nowrap;color:#674835}.envelope-heading,.envelope-skip{transition:opacity .35s}.envelope.opening .envelope-invite{opacity:0;transform:translateY(-18px);pointer-events:none}.envelope.opening .envelope-heading{opacity:0}.envelope.is-open{opacity:0;visibility:hidden;pointer-events:none}.envelope.is-open .envelope-invite{opacity:0}.gate-locked{overflow:hidden}
/* Looping portrait hero: svh prevents browser chrome from cutting off text. */
.hero{position:relative;min-height:650px;height:100vh;height:100svh;isolation:isolate;overflow:hidden;background:#f5e6cf}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:-3}.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#fff6e2b0 0%,#fff5e751 23%,transparent 48%,#1b111200 75%,#26131955 100%)}.hero-heading{padding:calc(52px + env(safe-area-inset-top)) 22px 0;text-align:center;color:#4f352a}.hero-heading .eyebrow{font-size:.7rem;letter-spacing:.2em}.hero-heading h2{font-size:clamp(2.65rem,11vw,4.5rem);line-height:1.4;letter-spacing:.14em;margin:16px 0 0;padding-left:.14em;text-shadow:0 2px 16px #fff6}.hero-script{font:italic clamp(1.05rem,4vw,1.5rem)/1.7 Georgia,serif}.hero .ornament{margin:20px auto 16px;color:#876a4b}.hero-date{font:clamp(1.25rem,5vw,1.7rem)/1.6 Georgia,serif;letter-spacing:.19em}.hero-time{font:1rem/1.8 var(--sans);letter-spacing:.1em;margin-top:7px}.hero-time span{font:14px var(--serif);margin-left:6px}.hero-location{font-size:.8rem;margin:8px auto 0;max-width:25em;letter-spacing:.025em}.discover{position:absolute;bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;color:#fff7e9;text-shadow:0 1px 7px #2c162c;font:500 .8rem/1.5 var(--sans);letter-spacing:.2em;min-height:60px;padding:6px 10px}.discover svg{width:20px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;animation:discover 2s ease-in-out infinite}.motion-button{position:absolute;bottom:max(40px,calc(env(safe-area-inset-bottom) + 30px));right:max(18px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;background:#432b22c9;border:1px solid #e8c98b9c;border-radius:50%;color:#efd9b1}.motion-button svg{grid-area:1/1;stroke:currentColor;fill:none;stroke-width:1.6}.motion-button .icon-play{fill:currentColor;stroke:none}.motion-button .icon-pause{display:none}.motion-button[aria-pressed=true] .icon-pause{display:block}.motion-button[aria-pressed=true] .icon-play{display:none}@keyframes discover{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.letter{position:relative;padding-top:56px;padding-bottom:74px}.letter::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:20px;background:var(--cream);clip-path:polygon(0 95%,12% 40%,24% 70%,39% 20%,52% 65%,69% 30%,83% 75%,100% 0,100% 100%,0 100%)}.letter .ornament{margin-bottom:29px}.letter h2{margin-top:14px;margin-bottom:24px}.letter p:not(.eyebrow){font-size:1rem;line-height:2.15}.letter p+p{margin-top:18px}.letter .letter-signature{color:var(--gold);letter-spacing:.14em;font-size:.875rem!important;margin-top:30px}
.celebration{padding-bottom:30px}.celebration h2{margin-top:12px}.event-date{display:flex;flex-direction:column;align-items:center;margin:30px auto 28px}.event-date>span:first-child{font:1.1rem Georgia,serif;letter-spacing:.3em;padding-left:.3em}.event-date strong{font:clamp(3.5rem,14vw,5rem)/1.35 Georgia,serif;letter-spacing:.02em}.event-date strong span{font-size:2.7rem;font-style:italic;font-weight:400;color:#b58c63}.event-date>span:last-child{font-size:.875rem;letter-spacing:.15em}.fine-rule{height:1px;max-width:240px;background:linear-gradient(90deg,transparent,#b9916680,transparent);margin:auto}.countdown-label{font-size:.875rem;margin:28px 0 16px;color:#805944}.countdown{display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,2.8vw,20px);font-family:Georgia,serif}.countdown div{min-width:46px;display:flex;flex-direction:column}.countdown strong{font-size:clamp(1.7rem,6.8vw,2.5rem);line-height:1.2;font-weight:400;font-variant-numeric:tabular-nums}.countdown b{font-size:1.5rem;font-weight:400;opacity:.3;line-height:1.2}.countdown div span{font:10px/1.7 var(--sans);letter-spacing:.03em;margin-top:10px;color:#936c59}
/* Coverflow keeps slides absolutely contained, allowing touch scrolling vertically. */
.gallery{padding-top:50px;padding-left:0;padding-right:0;overflow:hidden;background:radial-gradient(ellipse at center,#fffdf9 20%,transparent 75%),var(--cream)}.gallery>.eyebrow,.gallery>h2,.gallery>.section-subtitle{padding:0 20px}.gallery h2{margin-top:10px}.gallery .section-subtitle{font-style:italic;color:#936c59}.gallery-stage{height:440px;height:clamp(345px,104vw,600px);position:relative;perspective:1100px;margin-top:35px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}.gallery-slide{position:absolute;top:12px;left:50%;width:68%;height:calc(100% - 35px);margin:0;transform:translateX(-50%) scale(.65);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;pointer-events:none;border-radius:14px;overflow:hidden;background:#e6d6c7;box-shadow:0 12px 28px #4427132e;border:1px solid #fff8}.gallery-slide img{width:100%;height:100%;object-fit:cover;pointer-events:none}.gallery-slide.is-active{opacity:1;z-index:4;transform:translateX(-50%) translateZ(0);pointer-events:auto}.gallery-slide.is-prev{opacity:.6;z-index:3;transform:translateX(-111%) scale(.84) rotateY(25deg)}.gallery-slide.is-next{opacity:.6;z-index:3;transform:translateX(11%) scale(.84) rotateY(-25deg)}.gallery-slide.is-back{opacity:.18;z-index:1;transform:translateX(-50%) scale(.72)}.gallery-arrow{position:absolute;top:48%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;border:1px solid #edd7af66;background:#482f23bd;border-radius:50%;color:#f3dfb9;width:44px;height:44px;box-shadow:0 2px 10px #30221515}.gallery-arrow svg{fill:none;stroke:currentColor;stroke-width:1.7}.gallery-arrow.prev{left:15px}.gallery-arrow.next{right:15px}.gallery-controls{display:flex;gap:25px;align-items:center;justify-content:center;margin-top:10px}.photo-counter{display:flex;gap:12px;align-items:center;font:1.05rem Georgia,serif;color:#886d50}.counter-line{height:1px;width:25px;background:#b39978}.photo-counter>span:first-child{color:var(--wine)}.gallery-controls button{background:transparent;border:0;border-bottom:1px solid #c9b498;color:#866348;font-size:.875rem;padding:8px 2px;min-height:44px}.gallery-hint{font-size:.8rem;color:#957b63;margin-top:12px;letter-spacing:.08em}
.film{padding-left:20px;padding-right:20px;background:linear-gradient(150deg,#640d28,#44091c)}.film h2{margin-top:12px}.film .section-subtitle{font-size:.95rem;margin-top:10px}.film-frame{position:relative;border:1px solid #e8c98b80;padding:5px;margin-top:32px;background:#260811}.film-frame video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 50%;background:#260811}.film-overlay{position:absolute;inset:5px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(#18061430,#180614a8);color:var(--cream)}.film-play{width:64px;height:64px;border:1px solid #f1dfb9;border-radius:50%;display:grid;place-items:center;background:#e8c98b20}.film-play svg{width:29px;height:29px;fill:#fff1d7;transform:translateX(2px)}.film-overlay>span:nth-child(2){font-size:1rem;letter-spacing:.12em}.film-overlay small{font:12px var(--sans);letter-spacing:.15em;opacity:.76}.film-frame.is-playing .film-overlay{display:none}.film-frame.is-playing video{object-fit:contain}.film-note{color:var(--gold);margin-top:25px;font-size:.9rem;letter-spacing:.12em}.video-error{font-size:14px;margin-top:15px}
.venue{padding-top:65px;padding-bottom:65px}.venue h2{margin-top:12px}.venue-card{margin-top:30px;padding:24px 18px 30px;border:1px solid #b995638c;outline:1px solid #b995632e;outline-offset:6px;background:#fffcf763}.venue-topline{display:flex;justify-content:space-between;font:10px/1.8 var(--sans);letter-spacing:.16em;color:#967144;margin-bottom:28px}.venue-card .ornament{margin-bottom:20px}.venue-card h3{font-size:clamp(1.2rem,4.8vw,1.6rem);line-height:1.8;letter-spacing:.035em}.venue-hall{font-size:1.05rem;letter-spacing:.18em;margin-top:12px;color:#9b7345}.venue-rule{width:40px;height:1px;background:#b79b74;margin:26px auto}.venue-date{font-size:.875rem}.venue-time{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:8px}.venue-time strong{font:2rem Georgia,serif}.venue-time span{font-size:.875rem}.venue-wish{font-size:.9rem;color:#a48567;margin-top:22px}
.rsvp{padding-bottom:calc(35px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at top,#73122f,var(--wine-dark) 80%)}.rsvp .ornament{margin-bottom:28px}.rsvp h2{margin:14px 0 22px}.rsvp>p:not(.eyebrow){line-height:2}.rsvp-link{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:14px 28px;margin:30px auto 0;max-width:330px;border:1px solid #ffedc7;background:linear-gradient(125deg,#eddbb1,#d7b57b);color:#4c1221;text-decoration:none;letter-spacing:.09em;font-size:1.05rem;box-shadow:0 8px 24px #16020b33;transition:filter .2s,transform .2s}.rsvp-link:hover{filter:brightness(1.06);transform:translateY(-2px)}.rsvp .rsvp-note{margin-top:13px;font-size:.8rem;color:#d8bb96;letter-spacing:.06em}.footer-monogram{font-size:40px;color:var(--gold);opacity:.85;margin:42px 0 3px}.rsvp .footer-date{font:14px/1.6 Georgia,serif;letter-spacing:.2em;color:var(--gold)}.rsvp .footer-script{font:italic .875rem/1.8 Georgia,serif;margin:10px auto 25px;opacity:.55}.replay{border:0;background:none;color:#d7b899;border-bottom:1px solid #d7b89950;padding:9px 12px;min-height:44px;font-size:.8rem;letter-spacing:.1em}
@media(min-width:700px){body{padding:28px 0}.page-shell{border:1px solid #bc9a4f38}.hero{max-height:1000px}.envelope{border-left:1px solid #bc9a4f38;border-right:1px solid #bc9a4f38}.section-pad{padding-left:42px;padding-right:42px}.gallery{padding-left:0;padding-right:0}.hero-heading{padding-top:70px}.hero-location{font-size:.95rem}.gallery-stage{height:600px}.gallery-slide{width:64%}.gallery-arrow.prev{left:30px}.gallery-arrow.next{right:30px}}
@media(max-width:359px){.section-pad{padding-left:18px;padding-right:18px}.gallery{padding-left:0;padding-right:0}.hero-heading{padding-left:16px;padding-right:16px;padding-top:42px}.hero-heading .eyebrow{font-size:10px;letter-spacing:.1em}.hero-location{max-width:19em}.envelope-invite{left:16px;right:16px}.envelope-invite h1{font-size:2.15rem}.envelope-subtitle{font-size:.8rem}.gallery-arrow.prev{left:8px}.gallery-arrow.next{right:8px}.countdown{gap:7px}.countdown div{min-width:43px}.venue-card{padding-left:12px;padding-right:12px}.venue-card h3{font-size:1.18rem}.rsvp h2{font-size:1.4rem}}
@media(max-height:620px){.envelope-heading{top:25px}.envelope-invite{top:26%}.envelope-heading p{display:none}.seal-button{margin-top:15px;margin-bottom:10px;width:68px;height:68px}.hero{min-height:610px}}
@media(orientation:landscape) and (max-height:500px){.envelope-heading{top:15px}.envelope-invite{top:19%;gap:0}.envelope-invite h1{font-size:1.8rem;margin:0}.envelope-subtitle{display:none}.seal-button{width:60px;height:60px;margin:10px 0 7px}.seal-mark{font-size:26px}.envelope-skip{bottom:12px;font-size:12px;padding:6px 15px}.envelope-hint{font-size:12px}.hero-video{object-position:center 45%}}
/* Transparent frame animation reveals the already painted hero beneath it. */
.envelope-poster,.envelope-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.envelope.opening{background:transparent}
.envelope.opening .envelope-poster,.envelope.opening .envelope-shade{visibility:hidden}
.envelope.opening .envelope-skip{opacity:0;pointer-events:none}
.js .envelope{transition:opacity .22s ease,visibility .22s}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:-3}
.hero-video{opacity:0;z-index:-2;transition:opacity .18s ease}
.hero-video.has-frame{opacity:1}
.hero-wash{z-index:-1}
.music-toggle{position:fixed;z-index:10;top:max(14px,calc(env(safe-area-inset-top) + 10px));right:max(14px,calc((100vw - var(--page-width))/2 + 16px));display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 13px;color:#f7e2b9;background:#4b1728eb;border:1px solid #d7b77c99;border-radius:24px;box-shadow:0 3px 15px #2d111926;font:12px/1.5 var(--sans);letter-spacing:.02em}
/* The playback indicator rotates only while music is playing. */
.music-toggle .music-notes{font:22px/1 Georgia,serif;display:inline-block;transform-box:view-box;transform-origin:50% 50%;animation:music-spin 6s linear infinite paused!important}.music-toggle[aria-pressed=true] .music-notes{animation-play-state:running!important}.music-toggle[aria-pressed=false]{background:#34282deb;color:#d6c6ae}
@keyframes music-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.venue-location{margin-top:34px}.location-address{font-size:1rem;line-height:1.8}.location-transit{color:#977045;font-size:.875rem;margin-top:7px}.map-panel{margin-top:23px;border:1px solid #c9aa7f;background:#f3eadc}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;font-size:.95rem;letter-spacing:.08em}.map-heading span:last-child{font:12px var(--sans);color:#977045;letter-spacing:.06em}.map-panel iframe{display:block;width:100%;height:440px;border:0;background:#f0ede7;color-scheme:light}.map-caption{font-size:.8rem;color:#977045;margin-top:12px;line-height:1.8}.map-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:19px}.map-actions a{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 120px;border:1px solid #ac8354;padding:11px 14px;text-decoration:none;font-size:.95rem;min-height:48px;background:#fff9ef}.map-actions a:first-child{background:var(--wine);color:var(--cream);border-color:var(--wine)}.map-tip{font-size:.8rem;line-height:1.8;margin-top:12px;color:#93775f}
@media(max-width:359px){.music-toggle{top:max(8px,env(safe-area-inset-top));right:10px;padding:6px 10px;min-height:42px}.map-panel iframe{height:420px}}
/* Flow-based envelope also remains usable with large system text: it can scroll. */
.js .envelope{display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.envelope-heading{position:relative;top:auto;left:auto;right:auto;flex-shrink:0;width:calc(100% - 40px);margin-top:clamp(20px,6vh,60px)}
.envelope-invite{position:relative;left:auto;right:auto;top:auto;flex-shrink:0;width:calc(100% - 48px);margin:auto 24px;padding:38px 0 30px}
.envelope-skip{position:relative;bottom:auto;left:auto;transform:none;flex-shrink:0;margin:0 auto 26px;z-index:1}
#heroTitle:focus{outline:none}
@media(orientation:landscape) and (max-height:500px){.envelope-heading{margin-top:12px}.envelope-invite{padding:12px 0}.envelope-skip{margin-bottom:12px}}