@font-face{font-family:Amiri;src:url('assets/fonts/amiri.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Amiri;src:url('assets/fonts/amiri-bold.ttf') format('truetype');font-display:swap;font-weight:700}
@font-face{font-family:Ruqaa;src:url('assets/fonts/aref-ruqaa.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:NotoArabic;src:url('assets/fonts/noto-arabic.ttf') format('truetype');font-display:swap;font-weight:400}
:root{--paper:#f4f2e8;--ivory:#faf8ef;--sage:#70785b;--olive:#424c36;--muted:#737862;--gold:#a29265;--pale-gold:#d8cca3;--body:NotoArabic,Arial,sans-serif;--serif:Amiri,'Times New Roman',serif;--display:Ruqaa,Amiri,serif;--max:560px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:110px}body{margin:0;color:var(--olive);background:#d9dacc;font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased}body.sealed{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #8c7138;outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}button svg,a svg{flex:none}.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.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}main[inert]{visibility:hidden}.ambient-backdrop{position:fixed;inset:-40px;background:linear-gradient(#e0e0d5cf,#c4c7b9e8),url('assets/garden-atelier.webp') center/cover;filter:blur(18px);z-index:-1}.site-shell{width:100%;max-width:var(--max);margin:auto;overflow:clip;background:var(--paper);box-shadow:0 0 120px #454c3020}.eyebrow{font-size:10px;font-weight:400;line-height:2;letter-spacing:.04em}.section-pad{padding:78px 40px}.section-title{font-family:var(--display);font-size:43px;line-height:1.7;font-weight:400;margin:7px 0 32px}.desktop-note{position:fixed;top:44%;display:flex;align-items:center;flex-direction:column;gap:17px;width:calc((100vw - var(--max))/2);text-align:center;color:#596044;font-family:var(--serif);z-index:1;pointer-events:none}.desktop-note-right{right:0}.desktop-note-left{left:0}.desktop-note>span:not(.note-rule){font-size:27px}.desktop-note small{font-family:var(--body);font-size:10px;opacity:.75}.note-rule{height:64px;width:1px;background:linear-gradient(transparent,#a99f7c)}
/* An illustrated cover, opening like a pair of silk curtains. */
.cover{position:fixed;inset:0;max-width:var(--max);margin:auto;z-index:30;display:grid;place-items:center;overflow:hidden;background:var(--paper);isolation:isolate;transition:visibility 1.6s}.cover-art,.hero-art{position:absolute;inset:0;background:url('assets/garden-atelier.webp') center/cover no-repeat;z-index:-2}.cover-art{animation:cover-breathe 14s ease-in-out infinite alternate}.cover-light{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#fffdf33b 0%,#f4f0df15 40%,transparent 72%)}.cover-content{position:relative;text-align:center;padding:18vh 26px 10vh;width:100%;z-index:2;display:flex;flex-direction:column;align-items:center;transition:opacity .65s,transform .85s}.cover-eyebrow{font-size:10px;margin-bottom:21px}.seal{position:relative;width:94px;height:94px;border-radius:50%;margin:0 auto 21px;background:radial-gradient(ellipse at 30% 24%,#ddd2ad,#c4b785 47%,#a89b6b);box-shadow:inset 0 0 0 1px #eddfb2,inset 0 0 0 5px #c0b281,inset 0 0 0 6px #e1d4a4,0 7px 25px #77684626;color:#71633e}.seal::after{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid #a99a6b}.seal-ring{position:absolute;inset:-6px;border:1px solid #b6a3747d;border-radius:50%;animation:ring-glow 5s ease-in-out infinite}.seal-letter{font:59px var(--display);position:absolute;text-shadow:0 1px 1px #efdfb1}.seal-letter.first{right:16px;top:1px}.seal-letter.second{left:20px;top:25px;font-size:47px;transform:rotate(-12deg)}.seal-spark{position:absolute;left:25px;top:15px;font-size:10px;color:#eee0b2}.cover-invitation{font-family:var(--serif);font-size:18px;line-height:1.7}.cover-names{display:flex;align-items:center;justify-content:center;gap:19px;font-family:var(--display);font-size:clamp(43px,10.7vw,66px);font-weight:400;line-height:1.7;margin:2px 0 0;text-shadow:0 2px 12px #f8f4e7b0}.cover-names i{font:italic 26px var(--serif);color:var(--gold);align-self:center;margin-top:15px}.cover-line{font-family:var(--serif);font-size:21px;line-height:1.8;margin:0 0 15px;color:#6a7159}.cover-date{font-family:Georgia,serif;font-size:18px;letter-spacing:.16em;color:#656b50}.cover-date span{margin:0 7px;color:var(--gold)}.open-invitation{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:21px;min-width:219px;min-height:53px;border-radius:32px;background:linear-gradient(120deg,#7b8265,#4f5a40);color:#fffbee;margin:28px auto 12px;font-size:12px;padding:13px 25px;box-shadow:0 9px 30px #4a523d25,inset 0 0 0 1px #ffffff35;transition:transform .3s,box-shadow .3s}.open-invitation:hover{transform:translateY(-3px);box-shadow:0 13px 35px #4a523d35}.open-invitation .icon{width:19px;height:19px}.button-sheen{position:absolute;inset:-50% -100%;transform:rotate(-25deg) translateX(-70%);background:linear-gradient(90deg,transparent 46%,#fff5 50%,transparent 54%);animation:sheen 5s ease-in-out infinite;pointer-events:none}.cover-footnote{font-size:9px;color:#6e745b}.cover-curtain{position:absolute;z-index:1;top:0;bottom:0;width:50%;opacity:0;background:linear-gradient(90deg,#f3eddb55,#f9f6e9f0 90%);transition:transform 1.5s cubic-bezier(.22,1,.36,1),opacity .25s;pointer-events:none}.curtain-right{right:0;transform-origin:right center}.curtain-left{left:0;transform-origin:left center;scale:-1 1}.cover.opening .cover-content{opacity:0;transform:translateY(-14px) scale(.96)}.cover.opening .cover-curtain{opacity:1}.cover.opening .curtain-right{transform:translateX(105%)}.cover.opening .curtain-left{transform:translateX(105%)}.cover.opening .cover-art,.cover.opening .cover-light{opacity:0;transition:opacity 1s .2s}.cover.opening{background:transparent;pointer-events:none;visibility:hidden}.cover.gone{display:none}
/* Portrait hero, with the typography doing the talking. */
.hero{position:relative;isolation:isolate;min-height:900px;height:100svh;max-height:1120px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 40px 130px}.hero-art{inset:-1%;animation:garden-light 14s ease-in-out infinite alternate}.hero-haze{position:absolute;inset:12% 13% 19%;z-index:-1;background:radial-gradient(ellipse,#f9f5e145,transparent 71%)}.hero-topline{position:absolute;top:10.8%;display:flex;gap:16px;align-items:center;font-family:var(--serif);font-size:20px}.tiny-flower{font-family:serif;color:var(--gold);font-size:9px}.hero-content{width:100%;padding-top:5px}.hero-intro{font-family:var(--serif);font-size:18px;line-height:1.8;margin:0 0 21px}.couple{display:flex;flex-direction:column;align-items:center}.profession{font-size:10px;color:#697054;line-height:1.8;margin-bottom:0}.given-name{font-family:var(--display);font-weight:400;font-size:100px;line-height:1.12;padding:4px 0 16px;text-shadow:0 2px 20px #f8f3e780;white-space:nowrap}.groom .given-name{font-size:87px}.family-name{font-family:var(--serif);font-size:26px;line-height:1.15;margin-top:-5px}.union{display:flex;align-items:center;justify-content:center;gap:15px;height:36px;color:var(--gold);margin:4px 0 6px}.union span{width:37px;height:1px;background:linear-gradient(90deg,transparent,#b09e6c)}.union span:last-child{rotate:180deg}.union i{font-family:var(--serif);font-size:24px;line-height:1.5}.hero-event{margin:31px auto 0;display:flex;flex-direction:column;gap:5px;font-family:var(--serif);font-size:19px;line-height:1.6}.hero-event b{font-family:var(--body);font-size:10px;font-weight:400}.scroll-cue{position:absolute;bottom:40px;left:0;right:0;display:flex;align-items:center;flex-direction:column;gap:10px;font-size:9px;color:#4b543d}.scroll-line{width:1px;height:27px;background:linear-gradient(#7a805b,transparent);animation:scroll-hint 2.4s infinite}.is-open .hero-topline{animation:rise-in 1.2s .25s both}.is-open .hero-content{animation:rise-in 1.5s .5s both}.is-open .scroll-cue{animation:rise-in 1s 1.1s both}
/* A small, deliberate story rather than a grid of cards. */
.blessing{text-align:center;position:relative;background:radial-gradient(ellipse at 20% 30%,#e6e8d8,transparent 55%),var(--paper);padding-top:69px;padding-bottom:75px}.botanical-divider{display:flex;align-items:center;justify-content:center;gap:17px;margin-bottom:35px}.botanical-divider>span{height:1px;width:48px;background:#b9b39469}.botanical-divider svg{width:68px;height:34px;fill:none;stroke:#8b9472;stroke-width:1.1}.poem{font:400 43px/1.7 var(--display);margin:15px 0 22px}.poem em{font-style:normal;color:#858b6e}.invitation-copy{font:18px/2.2 var(--serif);color:#71775f}.signature{margin-top:30px;font:38px/1.5 var(--display)}.signature i{font:italic 22px var(--serif);color:var(--gold);margin:0 10px}.our-day{position:relative;text-align:center;background:#eceee2;border-top:1px solid #dedfce;border-bottom:1px solid #dadcc9}.our-day::before{content:'';position:absolute;inset:14px;border:1px solid #c2c4a84d;pointer-events:none}.date-composition{display:flex;align-items:center;justify-content:center;gap:22px;margin:5px auto 25px}.date-side{width:80px;display:flex;flex-direction:column;align-items:center;gap:7px}.date-side>span{font:14px var(--serif);color:#848a71}.date-side strong{font:400 23px var(--serif)}.date-side .year{font-family:Georgia,serif;font-size:22px;font-weight:400;letter-spacing:.05em}.date-number{border-inline:1px solid #c5c6af;padding:0 26px;display:flex;flex-direction:column;align-items:center;min-width:135px}.date-number>span{font:88px/.95 Georgia,serif;font-weight:400;letter-spacing:-.07em;padding-inline-end:6px;color:#626e4e}.date-number>small{font:23px/1.8 var(--serif);margin-top:6px;color:#7b8265}.time-line{display:flex;justify-content:center;align-items:center;gap:10px;font-size:11px;margin-bottom:25px}.time-line .icon{width:19px;height:19px;color:#939c79}.button{min-height:49px;border-radius:4px;display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:12px 22px;font-size:11px;line-height:1.8;transition:background .3s,transform .3s,box-shadow .3s}.button:hover{transform:translateY(-2px)}.button .icon{width:19px;height:19px}.button-outline{border:1px solid #aeb395;background:transparent;color:#566043}.button-outline:hover{background:#f6f5ebaa}.button-solid{border:1px solid #697450;background:#697450;color:var(--ivory);box-shadow:0 6px 18px #4c593018}.button-solid:hover{background:#535e3e;box-shadow:0 9px 20px #4c593025}.countdown-wrap{margin:44px auto 0;border-top:1px solid #d5d9c4;padding-top:24px}.countdown-wrap>p{font-size:10px;color:#80866d;margin-bottom:20px}.countdown{display:flex;align-items:flex-start;justify-content:center;gap:15px;direction:rtl;font-variant-numeric:tabular-nums}.countdown>div{display:flex;flex-direction:column;align-items:center;min-width:42px;gap:5px}.countdown span{font:34px/1 Georgia,serif;color:#626d4e}.countdown small{font-size:9px;color:#8b907a}.countdown i{font:20px/1 Georgia,serif;color:#bbc0a7;margin-top:5px;font-style:normal}.location-section{position:relative;isolation:isolate;text-align:center;background:#f5f3e9;padding-bottom:80px}.location-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(#f5f3e9f7,#f5f3e9d9 55%,#f5f3e9aa),url('assets/garden-atelier.webp') center 69%/140% auto;opacity:.65}.location-content{position:relative}.location-section .section-title{margin-bottom:30px}.map-art{position:relative;max-width:360px;margin:0 auto 22px;isolation:isolate}.map-art svg{display:block;width:100%;height:auto;border:1px solid #c6c8b5;border-radius:130px;padding:5px;background:#f7f5eb;box-shadow:0 14px 30px #6f765512}.map-caption{position:absolute;right:19%;top:53%;font:19px var(--serif);color:#747b60}.map-note{display:block;font-size:7px;color:#8e937c;margin-top:10px}.venue-name{font:39px/1.4 var(--display);margin:5px 0 0}.venue-street{font:22px var(--serif);color:#7b8268;margin:3px 0 24px}.location-section .button{min-width:245px}.button .arrow{margin-inline-start:15px;width:17px}.closing{position:relative;text-align:center;isolation:isolate;min-height:570px;padding-top:66px;padding-bottom:150px;background:radial-gradient(ellipse at 50% 70%,#c9cdb8,#dfe2d0 70%);border-top:1px solid #d6d9c4}.closing::before{content:'';position:absolute;inset:18px 22px 105px;border:1px solid #afba954f;border-radius:180px 180px 0 0;z-index:-1}.closing-star{display:block;color:#a29568;font-size:24px;line-height:1;margin-bottom:20px}.closing-title{font:43px/1.6 var(--display);margin:13px 0 20px}.closing-title em{font-style:normal;color:#788260}.closing-copy{font:18px/1.9 var(--serif);color:#6f785b}.closing-names{font:38px/1.5 var(--display);margin-top:22px}.closing-names i{font:italic 22px var(--serif);color:#9b9062;margin:0 8px}.closing-date{font:12px Georgia,serif;letter-spacing:.18em;color:#8b9378;margin-top:10px}.share-text{background:none;font-size:10px;display:inline-flex;gap:9px;align-items:center;color:#626e4c;border-bottom:1px solid #9da988;padding:8px 0;margin-top:24px}.share-text .icon{width:15px;height:15px}.closing-flourish{position:absolute;bottom:111px;left:0;right:0;color:#a2ac8a;font-size:12px}
/* The fixed tools are deliberately as small as a piece of jewellery. */
.floating-nav{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;width:min(calc(100% - 32px),450px);transform:translate(-50%,120px);z-index:20;display:flex;align-items:center;justify-content:space-around;padding:10px 10px 8px;border:1px solid #ffffffe0;background:#fbfaf0e8;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:25px;box-shadow:0 8px 40px #3b472d25,0 1px 0 #ffffffb3 inset;transition:transform .9s cubic-bezier(.2,.8,.2,1) .8s}.is-open .floating-nav{transform:translate(-50%,0)}.floating-nav>button,.floating-nav>a{position:relative;width:65px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;border-radius:15px;color:#798266;font-size:8px;line-height:1.5;padding:4px;transition:color .3s,background .3s}.floating-nav .icon{width:21px;height:21px}.floating-nav .nav-main{background:#747e5e;color:#f6f3e5;min-height:61px;min-width:64px;margin-top:-20px;box-shadow:0 4px 12px #717e592b;border:4px solid #f8f7ed;border-radius:20px}.floating-nav>button:hover,.floating-nav>a:hover{background:#e6e9d9;color:#475137}.floating-nav .nav-main:hover{background:#626d4f;color:#fff}.sound-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#89945e;top:2px;right:18px;opacity:0}.playing .sound-dot{opacity:1;animation:ring-glow 2s infinite}.playing .icon{animation:music-sway 2s infinite alternate}
.modal{width:min(calc(100% - 38px),410px);border:1px solid #dbd9c3;background:#f8f6ec;color:var(--olive);border-radius:160px 160px 12px 12px;padding:64px 28px 31px;text-align:center;box-shadow:0 25px 100px #212a2b40}.modal::backdrop{background:#2c382a85;backdrop-filter:blur(6px)}.modal h2{font:38px/1.8 var(--display);font-weight:400}.modal p:not(.eyebrow){font:17px/1.9 var(--serif);color:#777e64;margin:8px 0 22px}.modal .button{width:100%;margin:6px 0}.modal-star{display:block;color:var(--gold);font-size:21px;margin-bottom:12px}.modal-close{position:absolute;left:20px;top:28px;background:none;padding:8px;border-radius:50%;color:#858d70}.modal-close .icon{width:18px;height:18px}#share-url{width:100%;background:#edeee3;border:1px solid #d0d4bd;color:#6a7355;border-radius:4px;font:11px Arial,sans-serif;padding:14px;margin-bottom:8px}.toast{position:fixed;z-index:60;bottom:110px;left:50%;transform:translate(-50%,10px);padding:12px 25px;border-radius:30px;background:#485438;color:#faf9f1;font-size:11px;text-align:center;max-width:calc(100% - 30px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 5px 18px #3d49252b}.toast.show{visibility:visible;opacity:1;transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform 1s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.petal{position:fixed;z-index:40;pointer-events:none;top:-20px;width:9px;height:15px;border-radius:80% 0 80% 30%;background:linear-gradient(120deg,#fffdf1,#e8dfbd);box-shadow:0 0 10px #d7cea530;animation:petal-fall var(--duration,6s) linear var(--delay,0s) forwards;left:var(--left,50%)}
@keyframes cover-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes garden-light{from{transform:scale(1.02);filter:brightness(1)}to{transform:scale(1.045);filter:brightness(1.045)}}@keyframes ring-glow{0%,100%{opacity:.5}50%{opacity:1}}@keyframes sheen{0%,35%{transform:rotate(-25deg) translateX(-70%)}75%,100%{transform:rotate(-25deg) translateX(70%)}}@keyframes scroll-hint{0%,100%{transform:scaleY(.65);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes music-sway{from{rotate:-7deg}to{rotate:7deg}}@keyframes petal-fall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}10%{opacity:.9}85%{opacity:.75}100%{transform:translate3d(var(--drift,100px),105vh,0) rotate(400deg);opacity:0}}
.modal-close{left:50%;top:17px;transform:translateX(-50%)}
.profession{font-size:11px}.hero-event b{font-size:12px}.floating-nav>button,.floating-nav>a{font-size:9px}
@media(min-width:900px){.cover{box-shadow:0 0 120px #454c3020}.hero{min-height:950px}.cover-content{padding-top:17vh;padding-bottom:10vh}}
@media(max-width:899px){.desktop-note{display:none}}
@media(max-width:560px){.hero{min-height:800px;max-height:1020px;padding-inline:30px}.hero-topline{top:11%}.hero-intro{font-size:17px}.given-name{font-size:90px}.groom .given-name{font-size:79px}.family-name{font-size:25px}.hero-event{margin-top:26px}.hero-content{padding-top:16px}.cover-names{gap:16px}.section-pad{padding-inline:32px}.section-title{font-size:40px}}
@media(max-width:375px){.cover-content{padding-inline:18px}.cover-names{font-size:41px;gap:13px}.cover-eyebrow{margin-bottom:15px}.seal{width:83px;height:83px;margin-bottom:17px}.seal-letter.first{right:12px;top:-3px}.seal-letter.second{left:16px;top:20px}.cover-line{font-size:19px}.cover-footnote{font-size:8px}.section-pad{padding-inline:25px}.date-composition{gap:13px}.date-number{padding-inline:20px;min-width:108px}.date-side{width:70px}.date-number>span{font-size:75px}.countdown{gap:11px}.given-name{font-size:85px}.groom .given-name{font-size:73px}}
@media(max-height:740px){.cover-content{padding-top:13vh;padding-bottom:9vh}.cover-eyebrow{margin-bottom:11px}.seal{width:76px;height:76px;margin-bottom:13px}.seal-letter.first{font-size:50px;right:12px;top:0}.seal-letter.second{font-size:40px;left:15px;top:21px}.cover-names{font-size:44px}.cover-date{font-size:15px}.cover-line{font-size:19px;margin-bottom:8px}.open-invitation{margin-top:20px;min-height:47px}.cover-invitation{font-size:17px}.cover-footnote{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.petal{display:none}}