@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Great+Vibes&display=swap');
:root{--paper:#fff9ef;--ink:#492c37;--wine:#861e46;--gold:#977944;--line:#d8c7a5;--serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.5}body.is-opening{overflow:hidden}a{color:inherit;text-underline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--wine);outline-offset:7px}button{font-family:inherit}h1,h2,h3,p{margin:0}h2{font-size:clamp(32px,4.5vw,48px);font-weight:500;line-height:1.16}h3{font-size:42px;font-weight:500;color:var(--wine)}.opening{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:100dvh;padding:30px 20px;background:#fff9ef url('assets/floral-canopy.jpg') center/cover no-repeat;transition:opacity .7s ease,visibility .7s ease}.opening::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,#fff9ef66 35%,#fff9efbb);z-index:-1}.opening-intro{font-size:27px;max-width:280px;text-align:center;font-style:italic;line-height:1.25}.envelope{position:relative;width:min(560px,90vw);height:clamp(220px,55vw,350px);perspective:1100px;filter:drop-shadow(0 14px 20px #492c3725)}.envelope-back{position:absolute;inset:0;background:#eedec5;border:1px solid var(--line);border-radius:5px;z-index:1}.envelope-front{position:absolute;inset:0;z-index:4;background:linear-gradient(130deg,#fff9ec,#eddfca);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);border-radius:5px}.envelope-flap{position:absolute;inset:0;z-index:5;background:linear-gradient(#fff9eb,#f5e9d5);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:top;transition:transform 1s ease,z-index 0s .45s}.letter-preview{position:absolute;inset:14px 22px;background:#fffcf5;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);transition:transform 1.1s .4s ease}.letter-preview span{font-size:30px;color:var(--wine)}.letter-preview i{font-family:var(--script);font-size:30px}.seal{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:6;width:94px;height:94px;border-radius:50%;border:5px double #c7a15b;box-shadow:0 3px 8px #57391b40,inset 0 0 0 3px #f4dfae;background:radial-gradient(circle at 35% 30%,#f4e2b7,#d8b675);color:#624922;cursor:pointer;transition:opacity .35s,transform .35s}.seal span{font-size:25px}.seal i{font-size:20px}.tap-hint{font-size:17px;letter-spacing:.06em}.opening-date{font-size:16px;color:#6c5060;text-align:center}.opening.opened .envelope-flap{transform:rotateX(180deg);z-index:1}.opening.opened .seal{opacity:0;transform:translate(-50%,-50%) scale(.75)}.opening.opened .letter-preview{transform:translateY(-90px)}.opening.dismissed{opacity:0;visibility:hidden;pointer-events:none}.hero{position:relative;min-height:100dvh;background:var(--paper) url('assets/floral-canopy.jpg') center top/cover no-repeat;padding:25px 36px 60px;display:flex;flex-direction:column;align-items:center}.hero::before{position:absolute;inset:0;content:'';background:linear-gradient(180deg,transparent 15%,#fff9ef99 42%,#fff9efdd 100%)}nav{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;width:min(1200px,100%);font-size:17px;background:#fff9efed;padding:8px 16px;border:1px solid #d8c7a566}.monogram{text-decoration:none;font-size:28px;color:var(--wine)}.monogram i{font-family:var(--script);font-size:25px}.hero-content{position:relative;text-align:center;max-width:950px;width:100%;padding-top:clamp(85px,12vh,150px);margin:auto}.eyebrow{font-family:Georgia,serif;font-size:13px;text-transform:uppercase;letter-spacing:.16em;background:#fff9efec;padding:4px 10px;display:inline-block}.invitation-line{font-size:22px;margin:14px 0 28px}h1{font-weight:400;color:var(--wine);font-size:clamp(47px,6.5vw,86px);line-height:1.06}h1 span{display:block}h1 em{display:block;font-family:var(--script);font-size:.68em;line-height:1.25;padding:4px 0}.date-lockup{display:flex;align-items:center;justify-content:center;gap:22px;margin:32px 0 20px;font-size:22px}.date-lockup strong{font-size:38px;font-weight:500;border-left:1px solid var(--gold);border-right:1px solid var(--gold);padding:0 23px;color:var(--wine);white-space:nowrap}.date-lockup i{font-family:var(--script);font-size:26px}.hero-place{font-size:23px;line-height:1.3}.hero-place span{font-size:19px}.text-link{display:inline-block;font-size:17px;margin-top:25px}.countdown-section{text-align:center;padding:90px 24px;border-top:1px solid #d8c7a56b;background:#fffaf3}.script-heading{font-family:var(--script);font-size:clamp(30px,4vw,40px);line-height:1.3;padding-bottom:12px;color:var(--wine)}.countdown{display:flex;gap:clamp(14px,5vw,55px);justify-content:center;margin:35px 0 22px}.countdown div{display:flex;flex-direction:column;min-width:65px}.countdown strong{font-size:clamp(38px,6vw,58px);color:var(--wine);font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}.countdown span{font-size:16px;margin-top:7px}#countdown-note{font-size:17px}.celebrations{position:relative;background:#fff9ef url('assets/floral-columns.jpg') center/cover no-repeat;padding:90px 40px}.celebrations::before{position:absolute;inset:0;content:'';background:#fff9ef55}.section-heading{position:relative;text-align:center;max-width:750px;margin:0 auto 45px}.events{position:relative;max-width:940px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}.event{background:#fffaf2f2;border:1px solid var(--line);padding:40px 24px;text-align:center;box-shadow:0 9px 30px #7051260b}.event-date{display:flex;flex-direction:column;align-items:center;line-height:1.3;color:#70583c;font-size:18px}.event-date strong{font-size:76px;font-weight:400;color:var(--wine);line-height:1.12}.event-details{margin-top:25px;border-top:1px solid var(--line);padding-top:22px}.event-details p{font-size:21px;line-height:1.5}.event-time{margin:7px 0 18px}.calendar-link{font-size:16px;display:inline-block;margin-top:26px;color:var(--wine)}.venue{text-align:center;padding:110px 24px 100px;background:var(--paper) url('assets/floral-canopy.jpg') center top/cover no-repeat;background-blend-mode:multiply;position:relative}.venue::before{position:absolute;inset:0;content:'';background:linear-gradient(#fff9ef88,#fff9efed)}.venue-inner{position:relative;max-width:650px;margin:auto}.venue h2{font-size:clamp(40px,6vw,62px);color:var(--wine);margin:15px 0}.venue-copy{max-width:410px;margin:25px auto;font-size:23px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:13px 30px;background:var(--wine);color:#fff9ef;text-decoration:none;font-size:18px;border:1px solid var(--wine);transition:background .2s,transform .2s}.button:hover{background:#641530;transform:translateY(-2px)}footer{padding:50px 24px 35px;border-top:1px solid var(--line);text-align:center;background:#fffaf3}footer .script-heading{font-size:30px}.footer-names{font-size:29px;color:var(--wine)}footer>p:last-of-type{font-size:17px;margin-top:9px}footer a{font-size:15px;display:inline-block;margin-top:25px}.reveal{opacity:1;transform:none}.motion-enabled .reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}.motion-enabled .reveal.visible{opacity:1;transform:none}
@media(max-width:650px){body{font-size:18px}.hero{padding:20px 20px 50px;background-size:auto 100%;background-position:center top}nav{font-size:15px}.monogram{font-size:24px}.hero-content{padding-top:85px}.invitation-line{font-size:19px;max-width:260px;margin:15px auto 28px}h1{font-size:clamp(43px,10.3vw,65px)}.eyebrow{font-size:12px;letter-spacing:.12em}.date-lockup{gap:13px;font-size:18px;margin-top:28px}.date-lockup strong{font-size:29px;padding:0 13px}.hero-place{font-size:21px}.hero-place span{font-size:18px}.countdown-section{padding:65px 20px}.countdown div{min-width:56px}.countdown{gap:15px}.countdown span{font-size:14px}.celebrations{padding:65px 20px;background-size:auto 100%;background-position:center}.events{grid-template-columns:1fr;max-width:420px;gap:24px}.event{padding:32px 22px}.event-date strong{font-size:65px}.section-heading{margin-bottom:30px}.venue{padding:85px 22px}.opening-intro{font-size:24px}.opening{gap:26px}.seal{width:78px;height:78px}.seal span{font-size:22px}.letter-preview span{font-size:24px}.footer-names{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-enabled .reveal{opacity:1;transform:none}}
/* The reference is a single vertical invitation, including on desktop. */
body{background:#ece4d9}main{max-width:560px;margin:0 auto;background:var(--paper);box-shadow:0 0 70px #49302020}.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}.opening{background-image:url('assets/floral-columns.jpg');background-size:cover}.opening-intro{font-family:var(--script);font-size:32px;max-width:320px}.hero{min-height:94svh;padding:70px 28px 35px;background-image:url('assets/floral-columns.jpg');background-size:auto 100%;background-position:center}.hero::before{background:#fff9ef44}.hero-content{margin:auto;padding:35px 20px 0;background:#fffaf3ec;border:1px solid var(--line);box-shadow:0 8px 26px #49302014;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:.12em;background:transparent;padding:0}.invitation-line{font-size:19px;line-height:1.5;max-width:250px;margin:18px auto 27px}h1{font-size:clamp(37px,8.3vw,54px);line-height:1.13}h1 em{font-size:32px;margin:13px 0}.wedding-date{font-size:22px;margin:28px 0 22px;color:var(--wine)}.hero-place{font-size:19px;line-height:1.45}.hero-place span{font-size:17px}.invitation-art{width:calc(100% + 40px);height:125px;object-fit:cover;object-position:center;display:block;margin:25px -20px 0}.countdown-section{padding:70px 23px 60px;min-height:80svh;display:flex;align-items:center;justify-content:center;background:#fff9ef url('assets/floral-canopy.jpg') center/cover no-repeat;position:relative;border:0}.countdown-section::before{position:absolute;inset:0;content:'';background:#fff9ef77}.countdown-section>.reveal{position:relative;width:100%}.countdown-section .script-heading{font-size:44px;margin:10px 0 22px}.save-date{margin:0 auto 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffaf2f5;border-radius:12px;max-width:225px;padding:18px;border:1px solid var(--line);box-shadow:0 8px 24px #492c3715}.save-date span{font-size:18px}.save-date strong{font-size:86px;font-weight:400;line-height:1.1;color:var(--wine)}.countdown-section h2{font-family:var(--script);font-size:35px;line-height:1.3;color:var(--wine)}.countdown{gap:10px;margin:23px 0 18px}.countdown div{background:#fffaf3ed;border:1px solid var(--line);border-radius:10px;min-width:64px;padding:13px 5px}.countdown strong{font-size:31px}.countdown span{font-size:14px}#countdown-note{font-size:16px}.celebrations{padding:0;background:none}.celebrations::before{display:none}.events{display:flex;flex-direction:column;gap:0;max-width:none}.event{position:relative;isolation:isolate;min-height:98svh;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;box-shadow:none;padding:90px 45px;background:#fff9ef url('assets/floral-columns.jpg') center/auto 100% no-repeat}.event::before{position:absolute;z-index:-1;content:'';inset:55px 30px;background:#fffaf3f5;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #492c3719}.event:nth-child(2){background-image:url('assets/floral-canopy.jpg')}.event-date{font-size:17px}.event-date strong{font-size:72px}.event-details{padding-top:18px;margin-top:20px}.event-details h3{font-family:var(--script);font-size:45px;line-height:1.3}.event-details p{font-size:20px;line-height:1.4}.event-time{margin:8px 0 15px}.event-art{width:100%;height:95px;object-fit:cover;display:block;margin:24px auto 18px;border-radius:3px}.location-link{display:flex;width:100%;min-height:45px;border-radius:6px;font-size:17px;padding:8px 15px}.calendar-link{font-size:15px;margin-top:17px}.venue{padding:70px 35px;min-height:65svh;display:flex;align-items:center;justify-content:center;background-image:url('assets/floral-columns.jpg')}.venue-inner{padding:30px 15px;background:#fffaf3ed}.venue h2{font-size:38px}.venue-copy{font-size:21px}.venue .script-heading{font-size:31px}.venue .button{border-radius:6px}footer{padding:55px 30px 40px}footer .script-heading{font-size:44px}footer>p:nth-child(2){font-size:20px;max-width:310px;margin:0 auto 28px}.opening-date{background:#fffaf3dc;padding:5px 10px}.envelope{width:min(510px,90vw)}
@media(max-width:400px){.hero{padding:50px 20px 25px}.hero-content{padding:30px 14px 0}h1{font-size:36px}.invitation-art{width:calc(100% + 28px);margin-left:-14px;margin-right:-14px}.event{padding:75px 40px}.event::before{inset:45px 25px}.countdown div{min-width:59px}.countdown{gap:8px}.countdown-section .script-heading{font-size:39px}}

.envelope{width:min(430px,92vw);height:min(57svh,510px)}.envelope-front{background:linear-gradient(#fff9eecc,#eddfcadd),url(assets/floral-columns.jpg) center/cover}.envelope-flap{background:linear-gradient(#fff9eede,#f5e9d5e8),url(assets/floral-columns.jpg) center/cover}.opening{gap:22px}.letter-preview span{font-size:clamp(26px,6vw,34px)}

/* Separate seal, hinge, letter, and reveal phases preserve paper depth. */
.envelope{perspective:1500px;overflow:visible;isolation:isolate}
.envelope-flap{backface-visibility:visible;transform-style:preserve-3d;transform-origin:50% 0;transition:none;filter:drop-shadow(0 3px 2px #674f2820)}
.letter-preview{inset:15px 20px 20px;border-radius:3px;transition:none;background:#fffcf5 url(assets/floral-garland.png) center bottom/100% auto no-repeat;padding:22px 10px 80px;justify-content:center}
.letter-preview span{line-height:1.3;text-align:center}
.envelope-front{box-shadow:inset 0 -3px 12px #8b693b10}
.seal{transition:none;touch-action:manipulation;box-shadow:0 5px 12px #57391b30,inset 0 0 0 3px #f4dfae}
.seal:disabled{cursor:default}.opening.dismissed{transition:none}