@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:wght@400;500;600&display=swap');
:root{--ink:#273c54;--blue:#a7bed4;--display:"Cormorant Garamond",Georgia,serif;--body:"DM Sans",sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 36%,#eff4f8 0,#e3edf5 49%,#cadce9 100%);color:var(--ink);font-family:var(--body)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;background:repeating-linear-gradient(112deg,transparent 0 3px,#fff4 4px 5px)}
header{position:fixed;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,3vw,34px) clamp(16px,4vw,62px);pointer-events:none}
header span:first-child{font:600 clamp(17px,2vw,24px)/1 var(--display)}
header i{font-weight:500}
.header-date,.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.23em}
main{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;outline-offset:-3px}
.scene{min-height:100%;padding:clamp(48px,9dvh,78px) 16px;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;perspective:950px}
.cover-inner{text-align:center;width:min(100%,650px)}
p,h1,h2{margin:0}
h1,h2{font-family:var(--display);font-weight:600;line-height:.95;text-wrap:balance}
h1{font-size:clamp(2.4rem,8.4vw,5.7rem);margin:.16em 0 .36em}
h1 i,h2 i{font-weight:500;color:#587796}
.envelope{display:block;position:relative;isolation:isolate;width:min(100%,490px,72dvh);aspect-ratio:1.65;margin:0 auto 24px;background:#aec5dc;border-radius:5px;box-shadow:0 23px 38px -17px #2c476481,0 4px 8px #39547021;perspective:850px}
.lining,.fold,.flap,.flowers{position:absolute;inset:0;pointer-events:none}
.lining{background:radial-gradient(ellipse at 4% 84%,#f4f4e2b8,transparent 64%),linear-gradient(132deg,#e4ebf5,#abc3db);border-radius:inherit}
.fold{clip-path:polygon(0 0,50% 65%,100% 0,100% 100%,0 100%);background:linear-gradient(30deg,#e9eff3,#b9cee2 48%,#d9e5ef)}
.flap{clip-path:polygon(0 0,100% 0,56% 61%,50% 65%,44% 61%);background:linear-gradient(155deg,#d8e5f0,#a8bfd7 73%);transform-origin:top;transition:transform .65s}
.envelope:hover .flap,.cover.opening .flap{transform:rotateX(43deg)}
.envelope .flowers{inset:auto auto -12% -6%;width:58%;aspect-ratio:1;opacity:.94}
.flowers{background:url('botanical.png') center/contain no-repeat}
.seal{display:grid;place-content:center;position:absolute;left:50%;top:61%;transform:translate(-50%,-50%) rotate(-8deg);width:clamp(40px,12%,63px);aspect-ratio:1;border-radius:49% 46% 52% 46%;background:radial-gradient(circle at 36% 29%,#eff0d7,#c4bd93 70%);box-shadow:inset 0 0 0 4px #e3dabb,inset 0 0 0 6px #a8946055,0 3px 8px #3c405851;font:600 clamp(.82rem,2.8vw,1.25rem)/1 var(--display);color:#4f4e3d;display:flex;align-items:center;justify-content:center;gap:.15em}
.open{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:.77rem;letter-spacing:.13em;border:1px solid #6e87a178;border-radius:99px;padding:.8em 1.35em;background:#ffffff66}
.open:hover{background:#fff}
.card{position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,500px);min-height:min(478px,70dvh);padding:clamp(24px,5dvh,51px) clamp(16px,5vw,54px);text-align:center;background:radial-gradient(ellipse at 0 100%,#d8e5f4,transparent 59%),#fffdf8;box-shadow:0 22px 48px -25px #334c6b82,0 4px 12px #344d671c;overflow:hidden}
.card::before{content:"";position:absolute;inset:9px;border:1px solid #8195ac59;pointer-events:none}
.card .flowers{inset:auto auto -15% -14%;width:65%;aspect-ratio:1;z-index:-1;opacity:.5}
.copy{position:relative;width:100%;display:grid;justify-items:center;gap:clamp(7px,1.8dvh,17px)}
.copy p:not(.eyebrow){font-size:clamp(.8rem,2.65vw,.98rem);line-height:1.5;text-wrap:pretty}
.copy .blessing{font:italic 500 clamp(1.12rem,4.6vw,1.65rem)/1.15 var(--display)!important}
.copy h2{font-size:clamp(2rem,8.5vw,4rem)}
.ornament{color:#6784a0;font-size:1.25rem;line-height:1}
.invite .copy>p:last-child{max-width:31ch}
.portrait{width:min(100%,415px);border-radius:47% 47% 3px 3px / 24% 24% 3px 3px;background:radial-gradient(ellipse at 78% 90%,#d8e2f7,transparent 66%),#fffdf8}
.portrait::before,.groom::before,.venue::before,.family::before{border-radius:inherit}
.portrait .flowers{inset:auto -14% -10% auto;transform:scaleX(-1)}
.groom{border-radius:19px;background:radial-gradient(ellipse at 95% 0,#b8cce1,transparent 62%),#f5f8fa}
.groom .flowers{inset:-17% -17% auto auto;transform:rotate(175deg);opacity:.4}
.date{width:min(100%,400px);border-radius:48% 48% 45% 45% / 12% 12% 12% 12%;background:radial-gradient(ellipse at 20% 100%,#e9e5f5,transparent 58%),#fffefa}
.date h2 span{font-size:1.55em}
.venue{border-radius:50% 50% 50% 50% / 11% 11% 11% 11%;min-height:min(400px,69dvh);background:radial-gradient(ellipse at 8% 100%,#c3d7ed,transparent 62%),#fafbf8}
.venue .flowers{inset:auto -12% -26% auto;transform:scaleX(-1)}
.family{border-radius:4px 4px 44% 44% / 4px 4px 13% 13%;background:radial-gradient(ellipse at 50% 100%,#d9e7ee,transparent 64%),#fffdf8}
.family .flowers{inset:auto auto -23% 14%;width:72%}
nav{position:fixed;z-index:3;display:flex;gap:2px;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid #fff9;background:#f6fbffbc;border-radius:99px;padding:2px 7px;box-shadow:0 4px 15px #3c567819}
nav a{display:grid;width:24px;height:24px;place-items:center;border-radius:50%}
nav a::before{content:"";width:6px;height:6px;background:#7c96ad;border-radius:50%;transition:transform .25s}
nav a[aria-current]::before{background:#344e69;transform:scale(1.55)}
a:focus-visible{outline:2px solid #344e69;outline-offset:3px}
@supports(animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.scene>div,.scene>article{animation:unfold linear both;animation-timeline:view();animation-range:entry 55% exit 45%}
.scene:nth-child(even){--tilt:-11deg}
@keyframes unfold{0%{transform:translateY(24px) rotateX(-22deg) rotate(var(--tilt,9deg)) scale(.89);opacity:0}42%,58%{transform:none;opacity:1}100%{transform:translateY(-24px) rotateX(19deg) rotate(var(--tilt,9deg)) scale(.89);opacity:0}}
}}
@media(max-height:460px) and (orientation:landscape){.cover-inner h1{font-size:2.4rem}.envelope{width:39dvh;margin-bottom:10px}.card{min-height:0}.copy h2{font-size:2.1rem}.copy{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}