:root{--ivory:#F8F2E6;--paper:#FCF8EF;--sand:#E8D8BE;--sand-d:#CDB48E;--sage:#9FAF93;--sage-l:#CBD5BF;--sage-d:#566A58;--sea:#A8D1CC;--sea-l:#D2E6E1;--sea-d:#34726F;--terra:#C0623F;--terra-d:#9E4829;--ink:#33403C;
--u:min(1vw,5.6px);--pad:max(22px,calc((100vw - 560px)/2));
--serif:'Bodoni Moda','Bodoni 72',Didot,'Playfair Display',Georgia,serif;--sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--ivory);color:var(--ink);font:300 16px/1.65 var(--sans);overflow-x:hidden;min-width:320px}
body.locked{overflow:hidden;height:100dvh}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:400}
main{overflow-x:clip}
section{position:relative;overflow:hidden;padding:calc(var(--u)*22) var(--pad)}
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--terra);transform-origin:0 50%;transform:scaleX(0);z-index:90}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;border:0;border-radius:99px;background:var(--terra-d);color:var(--ivory);font:400 15px var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .3s,transform .3s}
.btn:hover{background:var(--terra);transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--sea-d);outline-offset:3px}
.big-n{position:absolute;top:calc(var(--u)*4);right:calc(var(--pad) - 8px);font:italic 400 calc(var(--u)*44)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(192,98,63,.45);pointer-events:none;z-index:0}
.sm{font:italic 400 calc(var(--u)*7)/1.1 var(--serif);color:var(--sage-d);position:relative;z-index:1}
.kick{font:italic 400 18px var(--serif);color:var(--terra-d)}
.hd{font:400 calc(var(--u)*14)/.95 var(--serif);letter-spacing:-.02em;position:relative;z-index:1}
.hd .ln{display:block;overflow:hidden;padding:.06em .1em .12em 0}.hd .ln b{display:block;font-weight:400}.hd .l2{padding-left:calc(var(--u)*12)}.hd i{color:var(--terra-d)}
.lead{font:400 19px/1.6 var(--serif);position:relative;z-index:1}

/* reveal */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .ln b[data-r]{opacity:1;transform:translateY(112%);transition-duration:1.1s}
.js .ir[data-r]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s cubic-bezier(.7,0,.2,1)}
.js .ir[data-r] img{transform:scale(1.3);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.js [data-r].in,.js .ln b[data-r].in{opacity:1;transform:none}
.js .ir[data-r].in{clip-path:inset(0)}.js .ir[data-r].in img{transform:none}
.js [data-chars] .c{display:inline-block;opacity:0;transform:translateY(55%) rotate(5deg);transition:opacity .9s calc(var(--i)*.07s),transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.07s)}
.js [data-chars].in .c{opacity:1;transform:none}

/* cover */
.cover{position:fixed;inset:0;z-index:100;background:var(--ivory);display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) var(--pad) max(18px,env(safe-area-inset-bottom));clip-path:inset(0);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1);overflow:hidden}
.cover.gone{clip-path:inset(0 0 100% 0)}
.cv-bar{display:flex;justify-content:space-between;font:italic 400 14px var(--serif);color:var(--sage-d);border-bottom:1px solid var(--sand-d);padding-bottom:8px}
.cv-stage{position:relative;flex:1;min-height:0;margin:10px 0}
.cv-sun{position:absolute;right:-4%;top:1%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--terra);animation:rise 2s .2s both cubic-bezier(.2,.7,.2,1)}
.cv-block{position:absolute;left:0;top:16%;width:62%;bottom:0;background:var(--sea);animation:fade 1.6s .1s both}
.cv-photo{position:absolute;left:15%;right:8%;top:7%;bottom:7%;overflow:hidden;border-top-right-radius:min(44vw,210px);animation:wipe 1.8s .3s both cubic-bezier(.7,0,.2,1)}
.cv-photo img{width:100%;height:100%;object-fit:cover;object-position:28% 62%;animation:zoom 3s .3s both cubic-bezier(.2,.7,.2,1)}
.cv-names{position:absolute;inset:0;pointer-events:none;font:italic 400 clamp(60px,calc(var(--u)*23),128px)/.85 var(--serif);letter-spacing:-.03em}
.cv-names span{position:absolute;animation:up 1.3s .9s both cubic-bezier(.2,.7,.2,1)}
.n1{left:-2px;top:2%}.n2{right:-2px;bottom:3%;animation-delay:1.1s!important}
.amp{left:4%;bottom:15%;font-size:.5em;color:var(--terra-d);animation-delay:1.3s!important}
.cv-vert{position:absolute;right:-6px;top:30%;writing-mode:vertical-rl;font:400 13px var(--sans);letter-spacing:.3em;color:var(--sage-d)}
.cv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;animation:fade 1.4s 1.5s both}
.cv-to{font-size:13px;line-height:1.3;color:var(--sage-d)}.cv-foot .btn{padding:0 22px;white-space:nowrap;flex:none}.cv-to b{display:block;font:400 19px var(--serif);color:var(--ink);margin-top:2px;max-width:46vw;overflow-wrap:anywhere}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes zoom{from{transform:scale(1.35)}to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

/* 01 spread */
.spread{background:var(--ivory)}
.spread .kick{margin-bottom:12px;position:relative;z-index:1}
.seal{position:absolute;width:calc(var(--u)*27);right:calc(var(--u)*-4);bottom:calc(var(--u)*-10);z-index:2;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cols{display:grid;grid-template-columns:1fr;gap:26px;margin-top:calc(var(--u)*10);max-width:340px;position:relative}
.dropcap::first-letter{float:left;font:italic 400 calc(var(--u)*24)/.8 var(--serif);color:var(--terra-d);padding:6px 10px 0 0}
.tide{display:block;height:calc(var(--u)*34);margin-left:calc(var(--u)*-22);margin-right:calc(var(--u)*8);background:radial-gradient(circle at 50% 100%,transparent 0 14px,rgba(52,114,111,.55) 14px 15px,transparent 15px 22px,rgba(52,114,111,.4) 22px 23px,transparent 23px 30px,rgba(52,114,111,.28) 30px 31px,transparent 31px) 0 0/44px 22px,linear-gradient(var(--sea-l),var(--sage-l));border-top-left-radius:calc(var(--u)*30)}
.vert{position:absolute;right:8px;bottom:calc(var(--u)*12);writing-mode:vertical-rl;font:italic 400 13px var(--serif);color:var(--sage-d)}

/* bands */
.band{position:relative;z-index:3;width:112%;margin:-14px -6% -14px;padding:14px 0;overflow:hidden;transform:rotate(-2.4deg);color:var(--ivory);font:italic 400 22px var(--serif)}
.band.sage{background:var(--sage-d)}.band.terra{background:var(--terra-d);transform:rotate(2deg)}
.band div{display:flex;width:max-content;animation:mq 60s linear infinite}.band span{white-space:pre;padding-right:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* 02 couple */
.couple{background:var(--sand)}
.orb{position:absolute;right:-12%;top:30%;width:calc(var(--u)*76);aspect-ratio:1;border-radius:50%;background:var(--sea);opacity:.8}
.couple .sm{margin-bottom:calc(var(--u)*12)}
.who{position:relative;z-index:1;max-width:340px}
.who h3{font:italic 400 clamp(60px,calc(var(--u)*24),124px)/.9 var(--serif);letter-spacing:-.03em}
.who p{font-size:15px;line-height:1.6;margin-top:10px;padding-left:14px;border-left:2px solid var(--terra)}
.who.b{margin:0 0 0 auto;text-align:right}.who.b p{padding:0 14px 0 0;border:0;border-right:2px solid var(--terra)}
.amp2{display:block;position:relative;z-index:2;font:italic 400 calc(var(--u)*34)/1 var(--serif);color:var(--terra-d);margin:calc(var(--u)*-3) 0 calc(var(--u)*-6) calc(var(--u)*30)}

/* 03 story */
.story{background:var(--ivory)}
.story .hd{font-size:calc(var(--u)*26);margin-bottom:calc(var(--u)*6)}
.s-photo{position:relative;width:calc(var(--u)*58);max-width:290px;margin:0 0 calc(var(--u)*10) auto;z-index:1}
.s-back{position:absolute;left:-26%;top:9%;width:100%;height:100%;background:var(--sea-l);border-bottom-left-radius:calc(var(--u)*30)}
.s-photo .ir{position:relative;border-top-left-radius:calc(var(--u)*40);overflow:hidden;outline:1px solid var(--terra);outline-offset:8px}
.s-photo img{width:100%;height:auto}
.tl{list-style:none;position:relative;padding-left:26px;z-index:1}
.tl::before,.tl-line{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-left:1px dashed var(--sand-d)}
.tl-line{border-left:2px solid var(--terra);bottom:auto;height:var(--h,0)}
.tl li{position:relative;padding:calc(var(--u)*13) 0 calc(var(--u)*4);max-width:330px}
.tl li::before{content:"";position:absolute;left:-31px;top:calc(var(--u)*17);width:11px;height:11px;border-radius:50%;background:var(--ivory);border:2px solid var(--terra)}
.rn{position:absolute;top:calc(var(--u)*2);left:0;font:italic 400 calc(var(--u)*28)/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--sage);z-index:-1}
.tl li.r{margin-left:auto;text-align:right}.tl li.r .rn{left:auto;right:0}
.tl h3{font:italic 400 calc(var(--u)*10)/1.1 var(--serif);color:var(--sea-d)}.tl p{margin-top:8px}

/* 04 date */
.date{background:var(--sea-l)}
.date .sm{margin-bottom:calc(var(--u)*6)}
.d-big{position:relative;height:calc(var(--u)*62)}
.d-big b{display:block;font:400 calc(var(--u)*62)/.85 var(--serif);color:var(--terra-d);letter-spacing:-.05em}
.d-big .mo{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*36);font:italic 400 calc(var(--u)*17)/1 var(--serif);color:var(--ink);z-index:2}
.d-big .yr{position:absolute;right:-2px;top:0;writing-mode:vertical-rl;font:400 calc(var(--u)*17)/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--sea-d)}
.d-day{font:italic 400 20px var(--serif);margin:calc(var(--u)*6) 0 calc(var(--u)*8)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:320px;text-align:center;font-size:14px;border-top:1px solid var(--sea-d);padding-top:10px}
.cal b{font:italic 400 13px var(--serif);color:var(--sea-d)}.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:50%}.cal .on{background:var(--terra-d);color:var(--ivory);font-weight:500}
.count{display:flex;margin-top:calc(var(--u)*10);border-top:1px solid var(--sea-d);border-bottom:1px solid var(--sea-d);max-width:380px}
.count p{flex:1;text-align:center;padding:12px 0;font-size:13px;color:var(--sage-d)}.count p+p{border-left:1px solid var(--sea-d)}
.count b{display:block;font:400 calc(var(--u)*10)/1.1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}

/* 05 details */
.details{background:var(--sage-l);padding-top:calc(var(--u)*30);padding-bottom:calc(var(--u)*26)}
.details::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.18) 22px 23px)}
.paper{position:relative;z-index:1;max-width:400px;margin:0 auto;background:var(--paper);padding:calc(var(--u)*17) calc(var(--u)*9) calc(var(--u)*13);text-align:center;box-shadow:0 1px 0 #fff inset,0 18px 40px -18px rgba(51,64,60,.45);transform:rotate(-1deg)}
.js .paper[data-r]{transform:translateY(40px) rotate(-1deg)}.js .paper[data-r].in{transform:rotate(-1deg)}
.paper::before{content:"";position:absolute;inset:10px;border:1px solid var(--terra);outline:1px solid var(--sand-d);outline-offset:-5px;pointer-events:none}
.wax{position:absolute;top:calc(var(--u)*-8);left:50%;margin-left:calc(var(--u)*-9);width:calc(var(--u)*18);aspect-ratio:1;display:grid;place-items:center;border-radius:50% 46% 52% 48%;background:radial-gradient(circle at 35% 30%,#d9825f,var(--terra-d) 70%);color:var(--ivory);font:italic 400 calc(var(--u)*5.4) var(--serif);box-shadow:0 6px 10px -4px rgba(0,0,0,.35)}
.paper .sm{color:var(--sea-d)}
.pn{font:400 calc(var(--u)*13)/1 var(--serif);margin:calc(var(--u)*5) 0 12px}.pn i{color:var(--terra-d)}
.pd{font:italic 400 20px var(--serif)}
.menu{margin:calc(var(--u)*9) 0;text-align:left}
.menu div{display:flex;align-items:baseline;gap:8px;padding:8px 0}
.menu dt{flex:1;display:flex;gap:8px;font:400 19px var(--serif)}.menu dt::after{content:"";flex:1;border-bottom:1px dotted var(--sand-d);transform:translateY(-5px)}
.menu dd{font-size:15px;color:var(--terra-d);font-weight:400}
.pv{font:400 15px/1.5 var(--sans);color:var(--sage-d)}
.ribbon{position:absolute;left:0;right:0;bottom:-1px;height:14px;background:repeating-linear-gradient(90deg,var(--sea) 0 14px,var(--sage-l) 14px 28px)}

/* 06 gallery */
.gallery{background:var(--sand)}
.gallery .hd{margin-bottom:calc(var(--u)*10)}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;position:relative;z-index:1}
.g{border:0;padding:0;cursor:zoom-in;overflow:hidden;background:var(--sand-d);aspect-ratio:1}
.g:nth-child(4n+1){aspect-ratio:3/4}.g:nth-child(4n+2){margin-top:calc(var(--u)*10)}.g:nth-child(4n+4){aspect-ratio:3/4}
.g:nth-child(5n){grid-column:1/-1;aspect-ratio:16/10}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.g:hover img{transform:scale(1.06)}
.lb{position:fixed;inset:0;z-index:200;background:rgba(36,46,43,.96);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb[hidden]{display:none}.lb img{max-width:88vw;max-height:80dvh;object-fit:contain;animation:fade .5s}
.lb button{position:absolute;background:none;border:0;color:var(--ivory);cursor:pointer;font:400 15px var(--sans)}
.lb-x{top:max(16px,env(safe-area-inset-top));right:18px;padding:10px}.lb-n{top:50%;font-size:44px!important;padding:12px;transform:translateY(-50%)}.lb-p{left:2px}.lb-nx{right:2px}
.lb-c{position:absolute;bottom:22px;color:var(--sand);font:italic 15px var(--serif)}

/* 07 location */
.loc{background:var(--ivory)}
.loc .hd{margin-bottom:calc(var(--u)*8)}
.map{position:relative;margin:calc(var(--u)*9) 0 calc(var(--u)*10) 12px}
.map::before{content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid var(--terra)}
.map iframe{position:relative;display:block;width:100%;height:300px;border:0;border-top-right-radius:calc(var(--u)*34);filter:sepia(.3) saturate(.75) hue-rotate(-12deg)}

/* 08 closing */
.closing{min-height:100svh;padding:0;background:var(--ivory)}
.sky{position:absolute;inset:0;background:linear-gradient(var(--sand) 0,#F1C9A6 48%,#E9A67F 66%)}
.sun{position:absolute;left:50%;margin-left:calc(var(--u)*-22);width:calc(var(--u)*44);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FBE3C4,#F2B58F 70%);top:calc(48% - var(--sp,0)*90px);box-shadow:0 0 0 calc(var(--u)*6) rgba(251,227,196,.35),0 0 0 calc(var(--u)*13) rgba(251,227,196,.18)}
.sea{position:absolute;left:0;bottom:0;width:100%;height:46%}
.sea path{animation:sway 8s ease-in-out infinite alternate}.w1{fill:var(--sea)}.w2{fill:#74B0AA;animation-duration:10s!important}.w3{fill:var(--sea-d);animation-duration:12s!important}
@keyframes sway{to{transform:translateX(-40px)}}
.cl-in{position:relative;z-index:2;min-height:100svh;padding:calc(var(--u)*24) var(--pad) calc(var(--u)*14);display:flex;flex-direction:column;align-items:center;text-align:center}
.cl-in .lead{max-width:300px}
.thanks{font:italic 400 clamp(52px,calc(var(--u)*19),104px)/1 var(--serif);margin-top:calc(var(--u)*8);color:var(--ink)}
.sign{margin-top:auto;font:italic 400 calc(var(--u)*9)/1 var(--serif);color:var(--ivory)}

@media (min-width:700px){.cols{max-width:420px}.tl li{max-width:420px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js [data-r],.js [data-chars] .c{opacity:1!important;transform:none!important;clip-path:none!important}.js .ln b[data-r]{transform:none!important}.js .paper[data-r]{transform:rotate(-1deg)!important}}