@font-face{font-family:Imperial;src:url(assets/script.woff);font-display:swap}@font-face{font-family:Garden;src:url(assets/display.woff);font-display:swap}@font-face{font-family:Ovo;src:url(assets/ovo.woff2);font-display:swap}@font-face{font-family:Source;src:url(assets/sans.woff);font-display:swap}@font-face{font-family:Amiri;src:url(assets/amiri.ttf);font-display:swap}
:root{--ivory:#f8f0dd;--gold:#a67d2b;--ink:#6c513f;--rose:#6c1526;--line:#cdbb98}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font:18px/1.65 Garden,Georgia,serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b58a3d;outline-offset:6px}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}main{max-width:760px;margin:auto;overflow:hidden}section{text-align:center;position:relative}.script{font-family:Imperial,cursive;font-weight:400;color:var(--gold)}h2.script{font-size:clamp(43px,6vw,53px);line-height:1.15}.arabic{font-family:Amiri,serif;line-height:2;direction:rtl}.tiny{font:12px/1.7 Source,sans-serif;letter-spacing:.6px;opacity:.8}.eyebrow{font:10px/1.5 Source,sans-serif;letter-spacing:3px;color:#8e6c2c}.hero{min-height:830px;height:100svh;max-height:1060px;position:relative;text-align:center;isolation:isolate}.swans{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.hero-wash{position:absolute;inset:0;background:linear-gradient(#f8f0dd15,#f8f0dd65 25%,#f8f0dd10 65%,var(--ivory));z-index:-2}.hero-copy{padding:100px 20px 0}.ceremony{font-size:37px;line-height:1.25;margin-top:22px}.hero-date{font:21px Ovo,serif;color:var(--gold);margin-top:7px}.hero h1{font-family:Imperial,cursive;font-size:clamp(74px,14vw,106px);font-weight:400;color:var(--gold);line-height:.95;margin:48px 0 30px;text-shadow:0 1px 1px #fff9e8}.hero h1 span{display:block}.hero h1 i{display:block;font-family:Imperial;font-weight:400;font-size:47px;line-height:1.2}.small{font-size:29px;line-height:1.3}.scroll{display:flex;flex-direction:column;align-items:center;margin-top:50px;text-decoration:none;color:var(--gold)}.scroll .script{font-size:29px}.scroll>span:last-child{font-size:32px;line-height:1;animation:bob 2s infinite}.sample{position:absolute;bottom:24px;left:20px;right:20px;font:10px/1.7 Source,sans-serif;letter-spacing:.7px;color:#8d795f}.paper{background-image:url(assets/art-00.png);background-size:100% 100%;background-repeat:no-repeat}.invitation{margin:12px 10px 0;padding:95px 75px 80px;min-height:710px}.flowers{position:absolute;width:34%;top:-135px;pointer-events:none;animation:sway 9s ease-in-out infinite}.flowers.left{left:8px;transform-origin:bottom left}.flowers.right{right:8px;transform-origin:bottom right;animation-delay:-4s}.bismillah{font-size:27px;color:var(--gold);margin-bottom:28px}.invitation h2{font-size:51px}.lifetime{font-size:33px;margin-top:18px;line-height:1.2}.dear{font-size:22px;margin-top:37px;margin-bottom:12px}.invitation>div>p:not(.script):not(.arabic){line-height:1.6}.quran{border-top:1px solid #c6ad7960;padding-top:22px;margin-top:30px}.quran .arabic{font-size:25px;color:var(--gold);margin-bottom:8px}.quran>p:nth-child(2){font-size:16px;font-style:italic}.quran a{font:11px Source,sans-serif;letter-spacing:1px;display:inline-block;margin-top:10px;text-decoration:none}.countdown-section{padding:85px 35px 80px}.countdown{display:flex;align-items:flex-start;justify-content:center;margin-top:35px;gap:15px;color:var(--gold)}.countdown>div{min-width:62px}.countdown strong{font:43px/1.3 Ovo,serif;font-weight:400;display:block;font-variant-numeric:tabular-nums;background:linear-gradient(110deg,#a68034,#d0b56c,#9e7628);background-clip:text;color:transparent}.countdown span{font:12px Source,sans-serif;display:block;margin-top:7px;letter-spacing:1px}.countdown>b{font-size:25px;font-weight:400;padding-top:7px}.countdown-section>.tiny{margin-top:25px}.schedule{padding:65px 70px 60px;margin:0 10px}.rose{width:65px;margin:27px auto 5px}.timeline{position:relative;margin:auto;max-width:450px;text-align:left}.timeline:before{content:'';position:absolute;left:39px;top:0;bottom:30px;width:1px;background:#a6927870}.timeline article{position:relative;display:flex;align-items:center;gap:30px;min-height:135px;padding:13px 0}.event-icon{position:relative;flex:0 0 80px;text-align:center;font-size:32px;color:var(--gold);background:#f4e8d5;border:1px solid #c7ac7e;border-radius:50%;width:60px;height:60px;flex-basis:60px;margin:0 10px;line-height:58px}.timeline h3{font-size:26px;font-weight:400;color:#927033}.timeline p{font:14px/1.7 Source,sans-serif;margin:5px 0}.timeline small{font-size:15px}.location{padding:75px 40px 65px}.palace{width:390px;margin:35px auto 12px;mix-blend-mode:multiply}.location h3{font-size:27px;font-weight:400}.location .tiny{margin-top:12px}.outline-button{display:inline-flex;gap:25px;align-items:center;border:1px solid #b48d46;padding:12px 24px;text-decoration:none;font:12px Source,sans-serif;letter-spacing:2px;border-radius:3px;margin-top:28px}.outline-button:hover{background:#ecdcb7}.ornament{width:130px;margin:45px auto 0}.notes{margin:0 10px;padding:80px 90px;min-height:450px;display:grid;place-items:center}.notes>div{position:relative;z-index:2}.notes h3{font-size:22px;font-weight:400;margin:25px 0 10px;color:#8a682e}.notes p{font-size:17px}.divider{display:block;color:var(--gold);margin:22px auto 0}.notes-flower{position:absolute;width:28%;pointer-events:none}.nf-left{left:0;bottom:0}.nf-right{right:0;top:0}.rsvp{padding:85px 50px 40px}.rsvp>p{margin-top:15px;font-size:17px}.rsvp-seal{border:0;background:none;display:block;width:190px;padding:0;margin:30px auto 0;transition:transform .3s}.rsvp-seal:hover{transform:scale(1.06)}.rsvp .open-caption{font-size:28px;margin-top:0}.form-card{text-align:left;margin:35px auto 0;padding:32px;border:1px solid #bf9f68;border-radius:22px;background:linear-gradient(130deg,#fffaf0,#f6e9d2);box-shadow:0 15px 45px #77512b13;outline:1px solid #d3ba8c;outline-offset:5px}.form-heading{text-align:center;margin-bottom:27px;padding-bottom:25px;border-bottom:1px solid #c8ac7a60}.form-heading>span{font-size:31px;color:var(--gold)}.form-heading h3{font-size:24px;font-weight:400;line-height:1.35}.form-heading p{font-family:Imperial;font-size:32px;color:var(--gold);margin-top:8px}form label,form legend{display:block;font:700 12px Source,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#68513a;margin-bottom:10px}input:not([type=radio]),textarea{width:100%;border:1.5px solid #ccba99;background:#fffcf6;border-radius:10px;min-height:54px;padding:13px 15px;font:17px Source,sans-serif;color:#5e4634;margin-bottom:23px}input:focus,textarea:focus{outline:3px solid #cfb78245;border-color:#a67d2b}textarea{resize:vertical}fieldset{padding:0;margin:0 0 22px;border:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}fieldset legend{margin-bottom:12px}.answer{margin:0;text-transform:none;letter-spacing:0;font-size:15px;cursor:pointer}.answer input{position:absolute;opacity:0;width:1px}.answer span{display:block;text-align:center;border:1.5px solid #cdbb9e;border-radius:10px;padding:15px 5px;background:#fffcf6}.answer input:checked+span{background:#e9d6af;border:2px solid #aa7f35;color:#62461d}.answer input:focus-visible+span{outline:3px solid #b08a45;outline-offset:3px}.gold-button{display:flex;align-items:center;justify-content:center;gap:25px;border:1px solid #846024;border-radius:10px;background:linear-gradient(110deg,#96712f,#b58e49);width:100%;padding:18px;color:white;font:700 14px Source,sans-serif;letter-spacing:2px}.form-note{font:12px/1.6 Source,sans-serif;text-align:center;margin-top:18px;color:#8a745b}#formStatus{font:14px/1.6 Source,sans-serif;margin-top:14px;text-align:center;color:#6a4c20}footer{text-align:center;padding:55px 25px 25px;position:relative}.farewell{font-size:45px}.couple-scene{position:relative;width:min(100%,500px);margin:25px auto 0}.couple{width:85%;margin:auto;position:relative;z-index:2}.couple-florals{position:absolute;width:100%;bottom:0;left:0;z-index:3;pointer-events:none}footer>.arabic{font-size:24px;margin:18px auto 0;color:var(--gold)}.footer-names{font-size:53px;line-height:1.2}.footer-tag{font:9px/1.8 Source,sans-serif;letter-spacing:2px;margin-top:16px}.back{display:inline-block;font:12px Source,sans-serif;margin-top:30px;text-decoration:none}.credit{font:10px Source,sans-serif;letter-spacing:1px;margin-top:32px;opacity:.65}.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}.reveal.in{opacity:1;transform:none}.opening{position:fixed;inset:0;z-index:100;background:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s,visibility 1s}.opening.out{opacity:0;visibility:hidden;pointer-events:none}.opening>p{font:27px Imperial;color:var(--gold);margin-top:20px}.skip{position:absolute;right:20px;bottom:20px;border:0;background:none;color:#8f795e;font:11px Source;letter-spacing:1px}.envelope{position:relative;width:min(360px,72vw);height:min(620px,69svh);background:linear-gradient(100deg,#ece4d4,#fffcf4 35%,#f1eadc);border:1px solid #ded2bd;box-shadow:0 20px 65px #6d503524;overflow:visible;perspective:1200px}.envelope-flowers{position:absolute;inset:2%;background:url(assets/art-23.png) center/100% 100% no-repeat;filter:grayscale(1);opacity:.3}.envelope:before,.envelope:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#c5baa57a;transform-origin:top}.envelope:before{left:0;transform:rotate(-31deg);height:59%}.envelope:after{right:0;transform:rotate(31deg);height:59%}.flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 55%);background:linear-gradient(140deg,#fffdf7,#ece4d6);transform-origin:top;transition:transform 1.4s ease;filter:drop-shadow(0 3px 2px #887357)}.seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);border:5px double #984c48;background:radial-gradient(circle at 30% 25%,#8c2631,#500513 75%);border-radius:48% 45% 47% 43%;width:95px;height:95px;display:flex;align-items:center;justify-content:center;color:#d6b575;font:39px Imperial;box-shadow:0 4px 6px #36110b70;transition:transform .8s,opacity .8s;z-index:5}.seal span{font-size:20px}.envelope.open .flap{transform:rotateX(175deg)}.envelope.open .seal{transform:translate(-50%,20px) scale(.8);opacity:0}.envelope.open{animation:envelope-leave 1.4s .7s forwards}@keyframes envelope-leave{to{transform:translateY(25vh);opacity:0}}@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}@keyframes bob{50%{transform:translateY(7px)}}[hidden]{display:none!important}
@media(min-width:900px){body{background:radial-gradient(ellipse at center,#fff9ed,#f8f0dd 65%)}.hero-copy{padding-top:120px}.hero{height:900px}.invitation{margin-top:0}}@media(max-width:540px){body{font-size:16px}.hero{min-height:740px;max-height:880px}.hero-copy{padding-top:90px}.hero h1{margin-top:44px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.ceremony{font-size:33px}.hero-date{font-size:18px}.hero h1{font-size:83px}.hero .small{font-size:25px}.invitation{padding:72px 38px 50px;min-height:700px;margin-top:20px}.flowers{top:-73px;width:39%}.bismillah{font-size:23px}.invitation h2{font-size:47px}.lifetime{font-size:29px}.dear{font-size:20px}.quran .arabic{font-size:22px}.quran>p:nth-child(2){font-size:15px}.countdown-section{padding:65px 20px}.countdown{gap:8px}.countdown>div{min-width:54px}.countdown strong{font-size:35px}.countdown span{font-size:10px}.countdown-section h2{font-size:39px}.schedule{padding:55px 24px 35px}.timeline article{gap:12px;min-height:130px}.timeline h3{font-size:25px}.timeline p{font-size:12px}.timeline small{font-size:13px}.event-icon{flex-basis:50px;width:50px;height:50px;line-height:48px;font-size:26px}.timeline:before{left:34px}.notes{padding:65px 44px}.notes h3{font-size:21px}.notes p{font-size:16px}.rsvp{padding:70px 24px 20px}.rsvp h2{font-size:40px}.form-card{padding:25px 20px}.form-heading h3{font-size:21px}.answer{font-size:13px}.farewell{font-size:40px}.footer-names{font-size:48px}.location{padding:65px 28px 50px}.location h2{font-size:41px}.location h3{font-size:24px}footer{padding-top:50px}.couple{width:92%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* The couple stands within a painted garden, with scenery on either side. */
.couple-scene{width:min(100%,650px);padding:190px 0 65px;background:linear-gradient(180deg,var(--ivory),transparent 13%,transparent 88%,var(--ivory)),url(assets/garden-backdrop.png) center center/cover no-repeat;isolation:isolate}.couple-scene:after{content:'';position:absolute;inset:0;box-shadow:inset 18px 0 25px -22px var(--ivory),inset -18px 0 25px -22px var(--ivory);pointer-events:none;z-index:4}.couple-scene .couple{width:61%;filter:drop-shadow(0 6px 6px #6e5c2b18)}.couple-florals{display:none}@media(max-width:540px){footer{padding-left:8px;padding-right:8px}.couple-scene{padding:135px 0 45px;margin-top:18px}.couple-scene .couple{width:69%}}
/* Reference opening: the original floral envelope and its opening film. */
.opening{background:#f9f0e0}.reference-envelope{position:relative;width:min(440px,90vw);height:min(78svh,785px);padding:0;border:0;background:none}.reference-envelope img{width:100%;height:100%;object-fit:contain}.opening-initials{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#741523,#4c0712);font:30px Imperial;color:#cbb17c;box-shadow:inset 0 0 0 1px #b5926450}.opening-film{position:fixed;inset:0;z-index:102;background:#f9f0e0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s}.opening-film.show{opacity:1}.opening-film.out{opacity:0;pointer-events:none;transition:opacity 1.4s}.opening-film video{width:100%;max-width:440px;height:100%;max-height:100svh;object-fit:contain}.music-button{position:fixed;bottom:20px;right:20px;z-index:50;width:56px;height:56px;border:1px solid #a16362;border-radius:50%;background:#5a0f1b;box-shadow:0 4px 15px #3b08142b;display:grid;place-items:center;color:#fff}.music-button svg{width:26px;height:26px;fill:currentColor}.music-button .pause-icon{display:none}.music-button.is-playing .pause-icon{display:block}.music-button.is-playing .play-icon{display:none}
/* The reference rose descends along a central itinerary as you scroll. */
.schedule{padding-left:45px;padding-right:45px}.schedule h2{margin-bottom:45px}.timeline{max-width:520px;position:relative;padding-top:20px}.timeline:before{left:50%;top:0;bottom:0;background:#aa95806b}.timeline:after{content:'';position:absolute;left:50%;top:0;width:1px;height:calc(var(--rose-progress,0)*100%);background:#b08239;pointer-events:none}.timeline article{display:block;min-height:140px;padding:25px 0;width:100%;position:relative}.timeline article>div{width:43%;text-align:right;position:relative;z-index:2}.timeline article:nth-of-type(even)>div{margin-left:57%;text-align:left}.timeline article:before{content:'';position:absolute;left:50%;top:48px;width:7px;height:7px;background:#9f8770;transform:translateX(-50%) rotate(45deg);transition:background .3s}.timeline article.passed:before{background:#b08239}.timeline .event-icon{display:none}.travel-rose{position:absolute;left:50%;top:0;width:58px;height:58px;object-fit:contain;z-index:5;transform:translateX(-50%);filter:drop-shadow(0 4px 4px #9d6a5420);pointer-events:none;will-change:transform}.timeline h3{font-family:Imperial;font-size:39px;color:#a67d2b;line-height:1.2}.timeline p{font-size:13px;line-height:1.6}.timeline small{font-size:14px;line-height:1.4;display:block}.falling-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}.falling-petals img{position:absolute;width:36px;will-change:transform;opacity:.9}.falling-petals img:nth-child(1){left:15%;top:0}.falling-petals img:nth-child(2){right:14%;top:15px}.falling-petals img:nth-child(3){left:3%;top:110px}.falling-petals img:nth-child(4){right:4%;top:140px}.falling-petals img:nth-child(5){left:10%;top:250px}.falling-petals img:nth-child(6){right:13%;top:290px}.location>h2,.location>.palace,.location>h3,.location>p,.location>a{position:relative;z-index:2}@media(max-width:540px){.schedule{padding-left:20px;padding-right:20px}.timeline article{min-height:150px}.timeline article>div{width:41%}.timeline article:nth-of-type(even)>div{margin-left:59%}.timeline h3{font-size:33px}.timeline p{font-size:11px}.timeline small{font-size:12px}.travel-rose{width:47px;height:47px}.opening-initials{font-size:27px}.music-button{width:48px;height:48px;bottom:14px;right:14px}}
