@font-face{font-family:Amiri;src:url('assets/amiri.ttf');font-display:swap}@font-face{font-family:Kufi;src:url('assets/reem-kufi.ttf');font-weight:400 700;font-display:swap}
:root{--paper:#faf8f3;--white:#fffefb;--ink:#34312b;--gold:#85632e;--muted:#716a5d;--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box}html{background:#e9e6df}body{margin:0 auto;position:relative;max-width:480px;min-height:100svh;background:var(--paper);color:var(--ink);font:18px/1.7 Amiri,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.masthead{position:absolute;inset:20px 24px auto;z-index:4;display:flex;justify-content:center;pointer-events:none}.masthead a{pointer-events:auto}.masthead img{display:block;width:60px;height:60px}.masthead>span,.masthead time{display:none}main{min-height:100svh}.invitation{position:relative;min-height:100svh;isolation:isolate;overflow:hidden}.letter{position:relative;z-index:2;min-width:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:105px 30px 78px}.cover{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}.occasion{font-size:21px;margin:0;color:var(--gold)}h1{font-family:Kufi,sans-serif;font-size:clamp(67px,20vw,91px);font-weight:400;line-height:1.9;margin:0;letter-spacing:0;white-space:nowrap}.welcome{font-size:18px;margin:0 0 17px}.date{display:flex;justify-content:center;align-items:center;gap:16px;font-size:18px}.date-number{font-size:26px}.hijri-date{font-size:17px;color:var(--muted);margin:5px 0 0}.open-key{display:flex;position:relative;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--gold);padding:0;width:100%;margin:28px 0 0;min-height:48px}.envelope-art{position:relative;display:block;width:min(100%,280px);height:156px;background:#eee8dc;perspective:700px;isolation:isolate}.envelope-art::before{content:'';position:absolute;inset:0;background:#f4f0e7;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}.envelope-art::after{content:'';position:absolute;inset:0;background:#e7dfce;clip-path:polygon(0 100%,50% 45%,100% 100%);z-index:1}.envelope-flap{position:absolute;inset:0;background:#fcfaf5;clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top center;z-index:2;transition:transform .75s var(--ease)}.envelope-seal{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#d4b879;z-index:3;display:grid;place-items:center;transition:opacity .25s}.envelope-seal img{width:43px;height:43px}.key-icon{display:none}.open-label{font-size:18px}.small-note{font-size:16px;margin:8px 0 0;color:var(--muted)}.still-life{position:absolute;inset:0;margin:0;z-index:-1;opacity:.12;overflow:hidden}.still-life>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 65%}.still-life figcaption{display:none}.inside{width:100%;text-align:center;outline:none;min-width:0}.basmala{font-size:25px;color:var(--gold);margin:0 0 15px}.verse{font-size:20px;line-height:1.95;margin:0 auto 18px;max-width:370px}.verse cite{display:block;font-size:15px;font-style:normal;color:var(--muted);margin-top:8px}.blessing{font-size:17px;margin:0 0 8px}.inside h2{font-family:Amiri,serif;font-weight:400;color:var(--gold);font-size:29px;line-height:1.6;margin:0 0 15px}.personal{font-size:19px;margin:0;overflow-wrap:break-word}.inside-date{font-size:23px;margin:22px 0 0}.prayer{font-size:21px;line-height:1.7;margin:20px 0;color:var(--gold)}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.actions button,.actions a{font-size:18px;min-height:48px;background:var(--gold);color:var(--white);border:0;padding:10px 25px}.actions button span{margin-right:12px}.text-button{background:none;border:0;color:var(--muted);font-size:16px;min-height:44px;padding:8px 20px;margin-top:10px}.letter:has(.inside:not([hidden])){padding-top:110px}.invitation:has(.inside:not([hidden])) .still-life{opacity:.07}.status{position:fixed;bottom:20px;left:20px;right:20px;max-width:400px;background:var(--ink);color:var(--white);padding:12px 18px;margin:auto;z-index:10;text-align:center;font-size:16px}.status:empty{display:none}.cinematic{display:none!important}footer{position:absolute;bottom:12px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:14px;z-index:3}footer>a:first-child{padding:5px 10px;font-size:16px}.music-credit{font-size:13px;direction:ltr;unicode-bidi:isolate}.no-script{text-align:center}.cover.opening .envelope-flap{transform:rotateX(165deg)}.cover.opening .envelope-seal{opacity:0}.cover.opening{animation:open-letter 1.2s var(--ease) both}.inside.entering{animation:reveal-letter .8s var(--ease) both}.inside.entering>*{animation:reveal-line .7s var(--ease) backwards}.inside.entering>:nth-child(2){animation-delay:.08s}.inside.entering>:nth-child(4){animation-delay:.16s}.inside.entering>:nth-child(6){animation-delay:.24s}@keyframes open-letter{0%,40%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-36px)}}@keyframes reveal-letter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes reveal-line{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* B: a picture held in a tall architectural arch. */
[data-design=arch] .masthead img{width:50px;height:50px}[data-design=arch] .still-life{opacity:1;inset:88px 54px auto;height:32svh;border-radius:180px 180px 0 0}[data-design=arch] .still-life>img{object-position:center 64%}[data-design=arch] .letter{padding:calc(32svh + 104px) 24px 80px;align-items:flex-start}[data-design=arch] .occasion{font-size:19px}[data-design=arch] h1{font-size:74px;line-height:1.7}[data-design=arch] .welcome{font-size:17px;margin-bottom:12px}[data-design=arch] .envelope-art{display:none}[data-design=arch] .key-icon{display:block}[data-design=arch] .open-key{margin-top:16px;gap:5px}[data-design=arch] .small-note{display:none}[data-design=arch] .letter:has(.inside:not([hidden])){padding-top:112px}[data-design=arch] .invitation:has(.inside:not([hidden])) .still-life{inset:0;height:100%;border-radius:0;opacity:.07}[data-design=arch] .cover.opening{animation:arch-open 1.2s var(--ease) both}@keyframes arch-open{to{opacity:0;transform:scale(1.08)}}
/* C: silk and white roses behind a single paper insert. */
[data-design=silk] .still-life{opacity:1}[data-design=silk] .still-life>img{object-position:43% center}[data-design=silk] .letter{padding:130px 24px 95px}[data-design=silk] .cover{background:rgba(255,254,251,.94);padding:24px 16px 22px}[data-design=silk] .envelope-art{display:none}[data-design=silk] .key-icon{display:block}[data-design=silk] h1{font-size:76px}[data-design=silk] .welcome{font-size:17px}[data-design=silk] .open-key{margin-top:22px}[data-design=silk] .small-note{display:none}[data-design=silk] .inside{background:rgba(255,254,251,.96);padding:26px 18px}[data-design=silk] .letter:has(.inside:not([hidden])){padding:100px 18px 90px}[data-design=silk] .invitation:has(.inside:not([hidden])) .still-life{opacity:1}[data-design=silk] .cover.opening{animation:silk-open 1.2s var(--ease) both}@keyframes silk-open{to{opacity:0;transform:translateY(-24px) scale(.96)}}
@media(max-height:740px){.masthead{top:12px}.masthead img{width:48px!important;height:48px!important}.letter{padding-top:76px;padding-bottom:64px}h1{font-size:74px;line-height:1.7}.welcome{font-size:17px;margin-bottom:9px}.open-key{margin-top:17px}.envelope-art{height:128px;width:240px}.date-number{font-size:24px}.hijri-date{font-size:16px}.small-note{margin-top:5px}.letter:has(.inside:not([hidden])){padding-top:85px}.verse{font-size:19px}.inside h2{font-size:27px}.prayer{font-size:20px}[data-design=arch] .still-life{inset:70px 60px auto;height:27svh}[data-design=arch] .letter{padding-top:calc(27svh + 78px)}[data-design=arch] h1{font-size:66px}[data-design=silk] .letter{padding-top:92px;padding-bottom:76px}[data-design=silk] h1{font-size:70px}}
@media(max-width:350px){.letter{padding-inline:23px}h1{font-size:69px}.welcome{font-size:16px}.envelope-art{width:230px}.date{gap:11px}[data-design=arch] .still-life{left:45px;right:45px}[data-design=arch] h1{font-size:63px}[data-design=silk] h1{font-size:64px}[data-design=silk] .cover{padding-inline:12px}.verse{font-size:18px}.personal{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-height:740px){h1{font-size:64px;line-height:1.6}.occasion{font-size:20px}.welcome{font-size:16px;margin-bottom:8px}.envelope-art{height:100px}.open-key{margin-top:12px;gap:8px}.small-note{display:none}.letter{padding-top:70px;padding-bottom:65px}[data-design=arch] h1{font-size:61px;line-height:1.6}[data-design=arch] .letter{padding-top:calc(25svh + 75px)}[data-design=arch] .still-life{height:25svh}[data-design=silk] h1{font-size:64px}}

.cover-gathering{font-size:16px;margin:8px 0 0;color:var(--gold)}#venue{font-size:23px;margin:20px 0 5px;color:var(--gold)}#gathering{font-size:19px;margin:0 0 20px}.actions a{background:#eee8dc;color:var(--ink)}[data-design=arch] .still-life{width:min(58%,240px);left:50%;right:auto;transform:translateX(-50%);border-radius:130px 130px 0 0}[data-design=arch] .invitation:has(.inside:not([hidden])) .still-life{width:auto;transform:none;left:0;right:0}[data-design=silk] footer{background:rgba(255,254,251,.95);padding:5px;bottom:8px}@media(max-height:740px){.cover-gathering{font-size:15px;margin-top:5px}.open-key{margin-top:10px}.envelope-art{height:90px}[data-design=arch] .still-life{width:190px;border-radius:100px 100px 0 0}}
/* The opening contains only the monogram and the opening object. */
.cover>.occasion,.cover>h1,.cover>.welcome,.cover>.date,.cover>.hijri-date,.cover>.cover-gathering,.cover>.small-note{display:none}.lock-art,.chandelier{display:none}.inside-name{font-family:Amiri,serif!important;font-size:78px!important;line-height:1.8!important;margin:0 0 8px!important;font-weight:400;letter-spacing:0}.inside .basmala{margin-top:0}.cover .open-key{margin:0}.letter{padding-top:105px;padding-bottom:90px}.masthead{top:24px}[data-design=silk] .cover{background:none;padding:0}[data-design=silk] .key-icon{background:rgba(255,254,251,.96);padding:25px;width:150px;height:110px}[data-design=silk] .open-label{background:rgba(255,254,251,.96);padding:3px 20px}[data-design=royal] .still-life{display:none}[data-design=royal] .letter{padding:95px 20px 85px}[data-design=royal] .open-key{width:280px;height:330px;position:relative;isolation:isolate}[data-design=royal] .lock-art{display:block;position:absolute;top:0;left:20px;width:240px;height:240px}[data-design=royal] .lock-art img{display:block;width:100%;height:100%;object-fit:contain}[data-design=royal] .envelope-art{display:none}[data-design=royal] .key-icon{display:block;position:absolute;width:145px;height:58px;left:50%;top:235px;transform:translateX(-50%);transform-origin:left center}[data-design=royal] .open-label{position:absolute;bottom:0;font-size:18px}[data-design=royal] .cover.opening{animation:royal-cover 2.8s ease both}[data-design=royal] .opening .key-icon{animation:key-insert 2.3s cubic-bezier(.45,0,.25,1) both}[data-design=royal] .opening .lock-art{animation:unlock-plate 2.8s var(--ease) both}[data-design=royal] .chandelier{display:block;max-width:235px;width:70%;height:auto;margin:-30px auto 0}[data-design=royal] .inside.entering .chandelier{animation:chandelier-reveal 1.4s var(--ease) both;transform-origin:top center}[data-design=royal] .letter:has(.inside:not([hidden])){padding-top:90px}[data-design=arch] .letter{align-items:center}[data-design=arch] .cover{padding-top:20px}
@keyframes key-insert{0%,10%{transform:translateX(-50%) translateY(0);opacity:1}42%{transform:translateX(25px) translateY(-144px) scaleX(-1);opacity:1}65%{transform:translateX(-4px) translateY(-144px) scaleX(-1);opacity:1}84%{transform:translateX(-4px) translateY(-144px) scaleX(-1) rotateX(80deg);opacity:1}100%{transform:translateX(-4px) translateY(-144px) scaleX(-1) rotateX(80deg);opacity:0}}@keyframes unlock-plate{0%,62%{transform:scale(1);opacity:1}100%{transform:scale(3.4);opacity:0}}@keyframes royal-cover{0%,65%{opacity:1}100%{opacity:0}}@keyframes chandelier-reveal{from{opacity:0;transform:translateY(-22px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@media(max-height:740px){.inside-name{font-size:72px!important}[data-design=royal] .open-key{transform:scale(.88)}[data-design=royal] .letter{padding-top:80px;padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Gilded cartouche controls, matching the antique lock and chandelier. */
.actions{flex-direction:column;align-items:center;gap:13px;margin-top:20px}.actions a{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;width:100%;max-width:308px;padding:13px 35px;background:linear-gradient(105deg,#e6d1a1 0%,#fff8e9 45%,#e4cd97 100%);color:#513a19;border:1px solid #af8944;border-radius:999px;font-size:20px;transition:transform .2s ease,filter .2s ease}.actions a::before{content:'';position:absolute;inset:4px;border:1px solid #c5a36a;border-radius:inherit;pointer-events:none}.actions a::after{content:'◆';position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:8px;color:#9c783a}.actions a:hover{filter:brightness(1.03);transform:translateY(-2px)}.actions a:active{transform:translateY(0) scale(.98)}.actions a img{flex:none}.text-button{color:#89662d;font-size:17px;margin-top:17px}.actions a:focus-visible{outline-color:#85632e;outline-offset:5px}
/* Complete pearl-glass and antique-gold treatment. */
html{background:#e8e3d8}body{background:#f2eee5}.invitation{background:transparent}[data-design=royal] .still-life{display:block;opacity:.8;position:absolute;inset:0;z-index:-2}[data-design=royal] .still-life>img{object-position:39% center;filter:saturate(.65)}.letter::before{content:'';position:absolute;inset:14px 14px 74px;z-index:-1;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.88);border-radius:32px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 42px rgba(77,57,25,.1),inset 0 1px 0 rgba(255,255,255,.98)}[data-design=royal] .invitation:has(.inside:not([hidden])) .still-life{opacity:.65}[data-design=royal] .letter:has(.inside:not([hidden])){padding:90px 32px 110px}.inside{position:relative}.inside-name{color:#655029;text-shadow:0 1px 0 rgba(255,255,255,.9)}.basmala,.prayer{color:#755422}.verse,.personal{color:#302d26}footer{background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 8px;border:1px solid rgba(255,255,255,.8);border-radius:18px;left:14px;right:14px;bottom:12px;gap:0}.music-credit{font-size:12px}.actions a{background:linear-gradient(120deg,rgba(255,255,255,.75),rgba(255,249,230,.38) 50%,rgba(255,255,255,.65));border:1px solid rgba(166,126,59,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 20px rgba(98,73,32,.07);color:#61471f}.actions a::before{border-color:rgba(179,142,77,.4)}.actions a:hover{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 white,0 8px 24px rgba(98,73,32,.12)}.text-button{padding-inline:28px;border-bottom:1px solid rgba(150,114,52,.35)}[data-design=arch] .letter::before{inset:12px 12px 74px}[data-design=arch] .still-life{z-index:1}[data-design=arch] .invitation:has(.inside:not([hidden])) .still-life{z-index:-2;opacity:.16}[data-design=silk] .cover{background:rgba(255,255,255,.12);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:24px;padding:30px 10px}[data-design=silk] .inside{background:none;padding:12px 8px}[data-design=silk] .key-icon{background:none}[data-design=silk] .open-label{background:none}[data-design=silk] .invitation:has(.inside:not([hidden])) .still-life{opacity:.5}.key-icon{object-fit:contain}.open-label{color:#765523;text-shadow:0 1px 0 rgba(255,255,255,.8)}@media(prefers-reduced-transparency:reduce){.letter::before{background:rgba(255,254,249,.97)}.actions a{background:#fbf7ed}}@supports not (backdrop-filter:blur(1px)){.letter::before{background:rgba(255,254,249,.94)}}
/* Precisely registered tip and shaft axis for the 360 x 132 vector key. */
[data-design=royal] .open-key{height:360px}[data-design=royal] .key-icon{width:220px;height:80.667px;left:calc(50% - 3.667px);top:69.53px;transform:translate(-84px,160px);transform-origin:3.667px 42.47px;clip-path:inset(0);object-fit:fill;will-change:transform,opacity,clip-path}[data-design=royal] .opening .key-icon{animation:registered-key 3.6s cubic-bezier(.42,0,.28,1) both}[data-design=royal] .opening .lock-art{animation:registered-plate 3.6s var(--ease) both}[data-design=royal] .cover.opening{animation:registered-cover 3.6s ease both}@keyframes registered-key{0%,10%{transform:translate(-84px,160px);clip-path:inset(0);opacity:1}38%{transform:translate(68px,0);clip-path:inset(0);opacity:1}56%{transform:translate(0,0);clip-path:inset(0);opacity:1}70%{transform:translate(-24px,0);clip-path:inset(0 0 0 27.667px);opacity:1}85%{transform:translate(-24px,0) rotateX(78deg);clip-path:inset(0 0 0 27.667px);opacity:1}96%,100%{transform:translate(-24px,0) rotateX(78deg);clip-path:inset(0 0 0 27.667px);opacity:0}}@keyframes registered-plate{0%,78%{transform:scale(1);opacity:1}100%{transform:scale(3.4);opacity:0}}@keyframes registered-cover{0%,88%{opacity:1}100%{opacity:0}}.open-key:focus-visible{outline-offset:10px;border-radius:20px}

[data-design=arch] .still-life{z-index:3}[data-design=arch] .key-icon{width:135px;height:50px}[data-design=silk] .key-icon{width:200px;height:110px;padding:20px}[data-design=silk] .cover{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}


[data-design=royal] .key-icon{left:calc(50% - 4.05px);top:69.11px}

/* Personal photograph, with a readable glass layer over the invitation. */
[data-design=royal] .still-life,[data-design=royal] .invitation:has(.inside:not([hidden])) .still-life{opacity:1}
[data-design=royal] .still-life>img{object-position:50% 24%;filter:none}
[data-design=royal] .letter::before{background:rgba(255,251,242,.48);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
[data-design=royal] .letter:has(.inside:not([hidden]))::before{background:linear-gradient(180deg,rgba(255,251,242,.48),rgba(255,251,242,.86) 38%,rgba(255,251,242,.94));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
[data-design=royal] .open-label{background:rgba(255,251,242,.88);border:1px solid rgba(181,144,76,.65);border-radius:30px;padding:3px 26px;bottom:-5px}
@media(prefers-reduced-transparency:reduce){[data-design=royal] .letter::before,[data-design=royal] .letter:has(.inside:not([hidden]))::before{background:rgba(255,251,242,.94)}}

.inside-name{font-family:Kufi,sans-serif!important;font-size:clamp(27px,8.4vw,40px)!important;line-height:1.9!important;font-weight:500;white-space:nowrap;margin:12px 0 22px!important}

@font-face{font-family:InvitationDiwani;src:url("assets/diwani-letter.ttf") format("truetype");font-display:swap}.inside-name{font-family:InvitationDiwani,serif!important;font-size:clamp(54px,15vw,72px)!important;font-weight:400;line-height:1.45!important;white-space:nowrap;margin:12px 0 24px!important}