:root{--cream:#fffaf2;--paper:#f3e7d6;--brown:#62422f;--caramel:#a7774d;--line:#d9c1a3;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:110px}body{margin:0;background:#e7dbca;color:var(--brown);font:16px/1.75 var(--sans)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #9a653a;outline-offset:5px}h1,h2,p{margin:0}img{max-width:100%}main{max-width:900px;margin:auto;background:var(--cream);box-shadow:0 0 100px #67452f12}h2{font:500 clamp(28px,6.5vw,36px)/1.16 var(--serif);margin:12px 0 20px;text-wrap:balance}.section{padding:44px 30px}.eyebrow{font-size:12px;letter-spacing:.13em;line-height:1.7;font-weight:500}.button{display:flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--brown);border-radius:8px;background:var(--brown);color:var(--cream);text-decoration:none;padding:14px 20px;min-height:54px;cursor:pointer;font-size:15px;font-weight:500;transition:background .2s,box-shadow .2s,transform .2s}.button:hover{background:#7c5439;box-shadow:0 5px 15px #67452f20;transform:translateY(-2px)}.button:active{transform:translateY(0)}.button span{font-size:22px;line-height:1}
.welcome{position:fixed;inset:0;z-index:10;overflow:auto;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,#fffaf2 10%,#edddc5 100%);padding:30px 20px}.welcome-inner{width:min(100%,370px);padding-block:20px}.intro{font:italic 24px/1.4 var(--serif);margin:20px 0 34px}.envelope{height:210px;position:relative;margin:0 12px 32px;background:#dcc3a0;border-radius:5px;box-shadow:0 20px 40px #68432920}.letter{position:absolute;background:var(--cream);inset:-5px 22px 30px;border:1px solid var(--line);padding:20px;transform:rotate(-4deg);font:24px var(--serif)}.letter strong{display:block;font:55px 'Parisienne',cursive;margin-top:10px}.envelope-front{position:absolute;inset:0;background:linear-gradient(148deg,transparent 49.7%,#e9d5b9 50%) left/50.1% 100%,linear-gradient(-148deg,transparent 49.7%,#dfc6a4 50%) right/50.1% 100%;background-repeat:no-repeat;border-bottom:1px solid #ccb18e}.seal{position:absolute;left:calc(50% - 29px);bottom:32px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#a77846;color:#fff0d6;border:4px double #d4ae78;box-shadow:0 3px 5px #68432920;font:italic 35px var(--serif)}.opening-note{font:italic 19px var(--serif);margin-top:20px}.welcome.leaving{animation:leave .4s forwards}body.opening{overflow:hidden}.opening .sticky-rsvp{display:none}
.hero{position:relative;isolation:isolate;padding:32px 24px 24px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#efdfc8 0%,#fffaf2 68%);text-align:center}.hero-frame{position:relative;z-index:1}.hero .eyebrow{max-width:80%;margin:auto;font-size:11px}.hero h1{margin:14px 0 0;font-weight:400}.hero h1 span{display:block;font:italic 18px/1.25 var(--serif)}.hero h1 .occasion{font:500 27px/1.2 var(--serif);margin-bottom:4px}.hero h1 strong{position:relative;z-index:2;display:block;font:normal clamp(78px,23vw,115px)/1.13 'Parisienne',cursive;color:#885735;margin-top:3px;padding-inline:10px}.hero-art{display:block;width:244px;height:302px;object-fit:cover;object-position:center 57%;margin:-9px auto 0;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 65% 56% at 50% 49%,#000 62%,transparent 99%)}.hero-date{font-size:12px;letter-spacing:.06em;margin-top:8px;font-weight:500}.hero-date span{padding:0 5px}.scroll-note{display:block;font:italic 18px var(--serif);text-decoration:none;margin-top:15px}.scroll-note span{display:inline-block;margin-left:8px;font:16px var(--sans)}.edge-balloon{position:absolute;right:-25px;top:68px;width:108px;height:155px;overflow:hidden;opacity:.42;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000 45%,transparent 73%);animation:float 9s ease-in-out infinite;pointer-events:none}.edge-balloon img{position:absolute;max-width:none;width:155px;top:-15px;left:-32px}.spark{position:absolute;color:#a87944;pointer-events:none;animation:twinkle 6s ease-in-out infinite}.spark-one{font-size:33px;left:19px;top:215px}.spark-two{font-size:18px;right:32px;bottom:92px;animation-delay:2s}
.message{position:relative;border-top:1px solid #dfcbae;text-align:left;padding-top:34px}.message h2{font-size:32px;max-width:370px}.message .eyebrow{padding-right:22px}.message p:not(.eyebrow){line-height:1.85;margin-bottom:16px;max-width:560px}.message .ornament{position:absolute;right:26px;top:24px;font:36px var(--serif);color:var(--caramel)}.heart{font:32px var(--serif);color:var(--caramel);display:block}.message>.heart{margin-top:18px}.count-section{background:var(--paper);text-align:center;border-block:1px solid #dfcbae;padding-block:30px}.count-section h2{font-size:28px;margin-bottom:22px}.date-count-group{display:flex;flex-direction:column;align-items:center;gap:22px}.date-detail{display:grid;grid-template-columns:auto auto;column-gap:14px;text-align:left;align-items:center;order:-1}.date-detail strong{font:64px/.9 var(--serif);grid-column:1;grid-row:1/3}.date-detail>span:first-child{grid-column:2;font-size:12px;letter-spacing:.14em}.date-detail>span:last-child{grid-column:2;font-size:15px}.countdown{width:100%;max-width:410px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:20px}.countdown div+div{border-left:1px solid var(--line)}.countdown strong{display:block;font:500 clamp(34px,10vw,46px)/1 var(--serif);font-variant-numeric:tabular-nums}.countdown span{display:block;font-size:12px;margin-top:9px}
.location{text-align:left;position:relative;padding-bottom:30px}.location>.ornament{position:absolute;right:30px;top:30px;font-size:40px;color:var(--caramel)}.location>.eyebrow{padding-right:28px}.location h2{font:400 18px var(--sans);margin:18px 0 8px}.location-card{border-left:2px solid var(--line);padding:0 0 0 20px}.venue{font:500 46px/1.1 var(--serif)}.fine-line{display:none}.location-card>p:not(.venue){margin-top:14px;font-size:15px}.location-card .button{margin-top:20px;max-width:350px}.gifts{margin:0 25px 34px;padding:18px 20px 18px 9px;display:flex;align-items:center;gap:15px;background:#f3e7d6;border:1px solid #e4cfb2;border-radius:12px}.gifts h2{font-size:26px;margin:0 0 5px}.gifts p{font:21px/1.35 var(--serif);max-width:250px}.little-bear{display:block;flex:0 0 82px;width:82px;height:100px;position:relative;overflow:hidden;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000 50%,transparent 76%)}.little-bear img{position:absolute;width:154px;max-width:none;left:-21px;top:-106px}.rsvp{background:#ecdbc3;text-align:center;border-block:1px solid #d7b995;scroll-margin-top:20px}.rsvp h2{font-size:36px;margin-bottom:10px}.deadline{font-size:15px}.rsvp-buttons{display:grid;gap:12px;max-width:370px;margin:24px auto 0}.rsvp .eyebrow{font-size:11px}footer{text-align:center;padding-top:28px;padding-bottom:115px}footer .heart{margin:0 0 14px}footer h2{font-size:27px;margin:0 0 15px}footer p:not(.eyebrow){font-size:14px}.signature{display:block;font:55px/1.3 'Parisienne',cursive;margin:18px 0 6px}.music{position:fixed;bottom:calc(17px + env(safe-area-inset-bottom));right:16px;z-index:5;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:#fffaf2f5;box-shadow:0 3px 14px #67452f18;color:var(--brown);font-size:25px;cursor:pointer}.music[aria-pressed=true]{background:var(--brown);color:var(--cream)}.sticky-rsvp{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:16px;right:78px;z-index:5;min-height:54px;padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--brown);color:var(--cream);border:1px solid #fffaf250;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;box-shadow:0 5px 22px #51321f30}.sticky-rsvp span{font-size:21px}.reveal{opacity:1}.reveal.arriving{animation:reveal .65s ease-out both}[hidden]{display:none!important}@keyframes reveal{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes leave{to{opacity:0}}@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.8}}
@media(min-width:700px){main{margin-block:24px;border:1px solid var(--line)}.hero{padding:48px 50px 32px}.hero-frame{display:grid;grid-template-columns:1.1fr 1fr;align-content:center;align-items:center;min-height:410px}.hero .eyebrow{grid-column:1;margin:0;max-width:none;align-self:end}.hero h1{grid-column:1;align-self:start;margin-top:16px}.hero h1 strong{font-size:115px}.hero-art{grid-column:2;grid-row:1/5;width:310px;height:390px;margin:0}.hero-date{grid-column:1;margin:0;align-self:start}.scroll-note{grid-column:1;margin:0}.edge-balloon{right:-10px;top:20px}.spark-one{top:46px;left:32px}.section{padding-inline:60px}.message{display:grid;grid-template-columns:1fr 1.3fr;gap:0 36px}.message .eyebrow,.message h2,.message>.heart{grid-column:1}.message p:not(.eyebrow){grid-column:2;grid-row:1/4;margin:0}.message p:not(.eyebrow)+p{grid-row:4}.message>.heart{grid-row:4}.date-count-group{flex-direction:row;justify-content:center;gap:35px}.date-detail{flex-shrink:0}.countdown{border-top:0;padding:0;border-left:1px solid var(--line);padding-left:20px}.location{padding-block:38px}.location-card{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.location-card .button{grid-column:2;grid-row:1/3;align-self:center;margin:0}.gifts{max-width:580px;margin:0 auto 36px}.rsvp{padding-block:38px}.rsvp-buttons{max-width:400px}footer{padding-bottom:35px}.sticky-rsvp{display:none}.music{right:max(22px,calc((100vw - 900px)/2 + 20px));bottom:22px}}
@media(max-width:360px){.section{padding-inline:22px}.hero{padding-inline:18px}.hero h1 strong{font-size:78px}.hero-art{height:270px;width:220px}.hero-date{font-size:11px}.eyebrow{font-size:11px}.gifts{margin-inline:18px;padding-inline:8px;gap:9px}.gifts p{font-size:20px}.sticky-rsvp{font-size:13px}.countdown strong{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep the fixed controls in their own mobile dock, outside the reading area. */
@media(max-width:699px){main{height:calc(100svh - 88px - env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-bottom:20px}footer{padding-bottom:35px}.edge-balloon{height:92px;top:70px;right:-20px}}
@media(min-width:700px){.music{right:max(16px,calc((100vw - 900px)/2 - 66px))}.edge-balloon{height:92px}}
@media(prefers-reduced-motion:reduce){main{scroll-behavior:auto}}