:root{color-scheme:light;--ink:#354e5e;--accent:#bfd6e5;--blue:#e3edf4;--paper:#fbf6ed;--beige:#e9e0d3;--muted:#65737c;--line:#cedbe2;--serif:"Cormorant Garamond","Palatino Linotype",Georgia,serif;--script:"Great Vibes","Palatino Linotype",cursive;--arabic:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--beige);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #63849b;outline-offset:5px}
[hidden]{display:none!important}
p,h1,h2,h3{margin:0}
.arabic{font-family:var(--arabic);font-style:normal;letter-spacing:0;word-spacing:normal}
.cover{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:30px 18px}
.closed-card{position:relative;width:min(100%,460px);background:var(--paper);border-top:9px solid var(--accent);box-shadow:0 15px 55px #4a514b12;overflow:hidden}
.closed-card:before{content:"";position:absolute;inset:15px;border:1px solid var(--line);pointer-events:none}
.cover-copy{min-height:610px;padding:57px 34px 51px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cover-basmala{font-size:1.65rem;line-height:2;max-width:100%}
.cover-label{font-size:.875rem;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-top:32px;color:var(--muted)}
.cover-names{display:flex;flex-direction:column;align-items:center;padding:24px 0 9px;font-family:var(--script);font-size:4.55rem;line-height:1.12;font-weight:400}
.cover-names>span{padding:0 15px}
.cover-names i{font-family:var(--serif);font-size:2rem;color:#6c899a;font-weight:400;line-height:1.2;margin:3px 0 9px}
.section-rule{width:50px;height:1px;background:var(--accent);margin:29px auto}
.cover .section-rule{margin:10px auto 20px;width:34px}
.cover-date{font-size:1.4rem;letter-spacing:.08em;line-height:1.5;font-variant-numeric:lining-nums}
.open-button{margin-top:27px;padding:16px 25px;min-height:51px;background:var(--blue);color:var(--ink);border:1px solid var(--accent);border-radius:2px;font-family:var(--sans);font-size:.875rem;letter-spacing:.02em;transition:background .2s,transform .2s;max-width:100%}
.open-button:hover{background:#d3e4ef;transform:translateY(-2px)}
.open-button:active{transform:translateY(0)}
.cover.leaving .closed-card{animation:cover-away .48s cubic-bezier(.45,0,.2,1) both}
.invitation{max-width:960px;margin:32px auto 0;padding:0 24px 26px;animation:unfold .8s cubic-bezier(.2,.6,.3,1) both;outline:none}
.paper{position:relative;background:var(--paper);border-top:10px solid var(--accent);box-shadow:0 15px 55px #4a514b0f;overflow:hidden}
.paper-inner{padding:64px 11% 55px;text-align:center}
.basmala{font-size:2.1rem;line-height:2;padding-inline:2%}
.verse{font-size:1.86rem;line-height:1.95;text-wrap:pretty}
.latin{font-family:var(--serif);font-size:1.45rem;line-height:1.55;font-style:italic;text-wrap:pretty}
.verse-translation{margin-top:21px;color:#455e6c}
.arabic-invitation{font-size:1.8rem;line-height:2}
.invitation-text p+p{margin-top:24px}
#invitation-title{font-family:var(--script);font-size:clamp(3rem,8vw,5.6rem);font-weight:400;line-height:1.5;padding:0 0 7px}
#invitation-title>span{display:inline-block;padding:0 .025em}
#invitation-title em{font-family:var(--serif);font-weight:400;font-size:.62em;font-style:normal;display:inline-block;padding:0 .06em;color:#6c899a}
#invitation-title+.section-rule{display:none}
.details{display:grid;grid-template-columns:1fr .9fr 1.25fr;margin:14px -5% 0;padding-top:28px;border-top:1px solid var(--line)}
.detail{position:relative;padding:0 14px 5px;min-width:0}
.detail+.detail{border-left:1px solid var(--line)}
.detail-language+.detail-language{margin-top:18px}
.detail h2{font-size:1.5rem;font-weight:500;line-height:1.4;margin-bottom:9px}
.detail h3{font-size:1.15rem;font-weight:500;line-height:1.5;color:var(--muted);margin-bottom:3px}
.detail p{font-size:1.32rem;line-height:1.4;font-variant-numeric:lining-nums}
.detail strong{font-weight:500}
.detail .arabic h3{font-size:1.15rem;line-height:1.7}
.detail .arabic p{font-size:1.3rem;line-height:1.75}
.detail .postal{font-family:var(--serif);font-size:1.18rem;line-height:1.3;display:inline-block}
.rsvp{margin:37px -2% 0;padding:28px 27px;background:var(--blue);border-radius:3px}
.rsvp p{font-size:1.3rem;line-height:1.5;text-wrap:pretty}
.rsvp p+p{margin-top:13px}
.rsvp p.arabic{font-size:1.38rem;line-height:1.85}
.rsvp strong{font-weight:600}
.signoff .section-rule{display:none}
.signoff p{font-family:var(--script);font-size:2.2rem;line-height:1.5;margin-top:36px}
.close-button{display:block;padding:14px 20px;margin:20px auto 0;min-height:46px;background:transparent;color:var(--muted);border:1px solid #b4b9b9;border-radius:2px;font-family:var(--sans);font-size:.875rem}
.close-button:hover{background:var(--blue);color:var(--ink)}
.no-script{padding:20px;font-size:1.2rem;line-height:1.6;text-align:center}
@keyframes cover-away{to{opacity:0;transform:perspective(1000px) rotateY(-10deg) translateY(-12px) scale(.96)}}
@keyframes unfold{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.invitation{padding:0 14px 20px;margin-top:14px}.paper-inner{padding:50px 8% 46px}.basmala{font-size:1.85rem}.verse{font-size:1.65rem;line-height:2}.arabic-invitation{font-size:1.62rem}.latin{font-size:1.35rem;line-height:1.55}.details{grid-template-columns:1fr 1fr;margin-inline:0;row-gap:25px}.detail-location{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:17px;padding-top:24px;border-top:1px solid var(--line)}.detail-location.detail{border-left:0}.detail-location .detail-language{margin-top:0}.detail p{font-size:1.25rem}.detail-location .postal{font-size:1.1rem}.rsvp{margin-top:30px}.signoff p{font-size:2rem}}
@media(max-width:520px){.cover{padding:20px 15px}.cover-copy{min-height:580px;padding:44px 29px 41px}.cover-basmala{font-size:1.45rem}.cover-label{margin-top:27px;font-size:.875rem;letter-spacing:.1em}.cover-names{font-size:4.1rem;padding-top:26px}.cover-names i{font-size:1.9rem}.cover-date{font-size:1.35rem}.open-button{padding:15px 18px;margin-top:25px;font-size:.875rem}.invitation{padding-inline:10px;margin-top:10px}.paper{border-top-width:7px}.paper-inner{padding:35px 8% 37px}.basmala{font-size:1.6rem;line-height:2;padding-inline:0}.verse{font-size:1.46rem;line-height:2.05}.latin{font-size:1.3rem;line-height:1.55}.arabic-invitation{font-size:1.5rem;line-height:2}.verse-translation{margin-top:19px}.invitation-text p+p{margin-top:23px}.section-rule{margin-block:27px}#invitation-title{font-size:3.05rem;line-height:1.65;padding:0}#invitation-title em{font-size:.6em}.details{display:block;margin-top:22px;padding-top:25px}.detail{padding:0 0 23px;display:block;border-left:0!important}.detail+.detail{margin-top:0;padding-top:25px;border-top:1px solid var(--line)}.detail h2{font-size:1.5rem}.detail h3{font-size:1.13rem}.detail p{font-size:1.36rem}.detail .arabic h3{font-size:1.16rem}.detail .arabic p{font-size:1.4rem}.detail .detail-language+.detail-language{margin-top:15px}.detail-location .postal{font-size:1.29rem;line-height:1.35}.rsvp{margin:13px -2% 0;padding:23px 18px}.rsvp p{font-size:1.25rem;line-height:1.5}.rsvp p.arabic{font-size:1.36rem;line-height:1.85}.signoff p{font-size:1.9rem;margin-top:29px}}
@media(max-width:350px){.cover-copy{padding-inline:24px;min-height:545px}.cover-basmala{font-size:1.25rem}.cover-names{font-size:3.6rem}.paper-inner{padding-inline:7%}.basmala{font-size:1.4rem}.verse{font-size:1.4rem}#invitation-title{font-size:2.6rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.open-button:hover{transform:none}}

/* Tactile stationery and the envelope opening. */
.cover{position:relative;min-height:100svh;flex-direction:column;justify-content:center;gap:0;padding:32px 18px 85px;overflow:hidden;background:#f8f4ed}
.cover-heading{position:relative;z-index:10;text-align:center;transition:opacity .4s,transform .4s}
.cover-label{margin:0;font-size:.75rem;letter-spacing:.18em;color:#69747a}
.cover-names{display:block;margin:15px 0 1px;padding:0;font-size:clamp(2.8rem,7vw,4.3rem);line-height:1.45;white-space:normal}
.cover-names span{font-family:var(--serif);font-size:.65em;font-style:italic;margin:0 3px;color:#7898ac;padding:0}
.cover-date{font-size:1.15rem;letter-spacing:.035em;line-height:1.5}
.envelope-stage{isolation:isolate;position:relative;width:min(580px,95vw);aspect-ratio:1;perspective:1400px;margin-top:max(-232px,-38vw);margin-bottom:-20px;transform:translateY(-5px);overflow:visible}
.envelope-back,.envelope-pocket{position:absolute;inset:0;pointer-events:none;will-change:clip-path,opacity,transform}
.envelope-back{z-index:1;clip-path:inset(47% 0 0 0);transition:clip-path .12s .34s}
.envelope-back img,.envelope-pocket img{width:100%;height:100%;object-fit:fill;display:block}
.envelope-pocket{z-index:4;clip-path:polygon(4.8% 47%,50% 71.5%,95.2% 47%,100% 47%,100% 100%,0 100%,0 47%)}
.envelope-flap{position:absolute;left:4.8%;top:40.25%;width:90.4%;height:54%;transform-origin:50% 12.5%;transform:rotateX(0deg);z-index:6;backface-visibility:hidden;will-change:transform;transition:transform .88s cubic-bezier(.55,.05,.3,1),opacity .25s .6s}
.envelope-flap img{display:block;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 3px 3px #75685613)}
.letter-preview{position:absolute;z-index:2;left:15%;top:47%;width:70%;height:44%;padding:5% 4%;background:#faf6ee url('assets/invitation-paper.webp') center/100% 100%;box-shadow:0 2px 10px #62574615;text-align:center;opacity:0;transform:translateY(0) rotate(-1deg);transition:transform 1.1s cubic-bezier(.22,.6,.24,1) .68s,opacity .3s .4s;will-change:transform}
.letter-basmala{font-size:clamp(.8rem,2.5vw,1.35rem);line-height:1.7}
.letter-announcement{font-family:var(--sans);font-size:clamp(.65rem,1.9vw,.8rem);letter-spacing:.09em;text-transform:uppercase;margin-top:9px;color:var(--muted)}
.letter-names{font-family:var(--script);font-size:clamp(1.7rem,4.8vw,3rem);line-height:1.5;margin-top:8px}
.letter-names span{font-family:var(--serif);font-size:.65em;font-style:italic}
.letter-rule{display:block;width:23px;height:1px;background:var(--accent);margin:8px auto}
.letter-date{margin-top:9px;font-size:clamp(.85rem,2.5vw,1.2rem);line-height:1.5}
.envelope-hit{position:absolute;inset:47% 5% 8.5%;border:0;background:transparent;z-index:8;cursor:pointer}
.cover-actions{position:relative;z-index:12;text-align:center;transition:opacity .3s,transform .3s}
.cover-actions .open-button{margin:0;background:#dce9f1;border-color:#bbcfdc;color:#354e5e;padding-inline:29px}
.cover-hint{font-size:1rem;color:#7a817d;font-style:italic;margin-top:14px}
.cover.opening .cover-heading{opacity:0;transform:translateY(-15px);pointer-events:none}
.cover.opening .cover-actions{opacity:0;transform:translateY(15px);pointer-events:none}
.cover.opening .envelope-hit{pointer-events:none}
.cover.opening .envelope-flap{transform:rotateX(-178deg);opacity:0}
.cover.opening .envelope-back{clip-path:inset(0 0 0 0)}
.cover.opening .letter-preview{opacity:1;transform:translateY(-83%) rotate(0)}
.cover.opening.finishing .envelope-stage{transition:opacity .4s,transform .6s;opacity:0;transform:translateY(-25px) scale(1.05)}
.invitation{animation:paper-reveal .75s ease both;padding-bottom:95px}
.paper{isolation:isolate;background:#faf6ee;border-top:0;box-shadow:0 13px 55px #62574612}
.paper-art{position:absolute;z-index:-1;inset-inline:0;background-image:url('assets/invitation-paper.webp');background-size:100% auto;background-repeat:no-repeat;pointer-events:none}
.paper-art-top{top:0;height:330px;background-position:center top;mask-image:linear-gradient(#000 60%,transparent)}
.paper-art-bottom{bottom:0;height:320px;background-position:center bottom;mask-image:linear-gradient(transparent,#000 40%)}
.paper:after{content:"";position:absolute;inset:20px;z-index:-1;border:1px solid #d7e0e0;pointer-events:none}
.paper-inner{padding:82px 11% 64px}
.music-button{position:fixed;right:20px;bottom:18px;z-index:30;display:flex;align-items:center;gap:9px;min-height:46px;padding:11px 16px;border:1px solid #bfd0da;border-radius:30px;background:#f3f7f9f5;color:#354e5e;font-family:var(--sans);font-size:.875rem;box-shadow:0 3px 18px #42576716}
.music-button span{font-family:Georgia,serif;font-size:1.2rem}
.music-button:hover{background:#e6eff5}
.music-panel{position:fixed;bottom:18px;right:20px;z-index:35;width:340px;max-width:calc(100vw - 28px);background:#f7f8f7;border:1px solid #c8d5db;box-shadow:0 12px 60px #23333e26;border-radius:8px;overflow:hidden;font-family:var(--sans);text-align:left}
.music-header{display:flex;align-items:center;justify-content:space-between;padding:11px 13px 10px}
.music-header h2{font-family:var(--serif);font-size:1.3rem;line-height:1.15;font-weight:500}
.music-header p{font-size:.75rem;line-height:1.5;color:var(--muted);margin-top:3px}
#music-close{border:0;background:transparent;color:#486172;font-family:var(--sans);font-size:1.5rem;width:44px;height:44px;flex-shrink:0}
.player-slot{width:100%;height:200px;min-width:200px;background:#e4e9eb}
.player-slot iframe{display:block;width:100%;height:200px;min-width:200px;border:0}
.music-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px 5px}
#player-toggle{padding:9px 14px;min-height:42px;border:1px solid #b6cbd9;background:#e1edf4;color:var(--ink);border-radius:3px;font: .875rem var(--sans)}
#player-toggle:disabled{opacity:.6;cursor:default}
.music-controls a{font-size:.8125rem;color:#476a80;padding:10px 0;text-underline-offset:3px}
.music-status{font-size:.75rem;line-height:1.5;padding:4px 13px 12px;color:var(--muted)}
body.player-open{padding-bottom:355px}
@keyframes paper-reveal{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1100px){.cover{padding-top:25px}.envelope-stage{width:min(550px,65vh);margin-top:max(-220px,-26vh);margin-bottom:-20px}.cover-names{font-size:3.9rem}.cover-heading .cover-date{font-size:1.15rem}}
@media(max-width:760px){.paper-inner{padding:67px 9% 51px}.paper-art-top{height:220px}.paper-art-bottom{height:220px}}
@media(max-width:520px){.cover{padding:30px 12px 90px;justify-content:center;min-height:100svh}.cover-label{font-size:.75rem;letter-spacing:.15em}.cover-names{font-size:3.05rem;padding:0;margin-top:13px}.cover-date{font-size:1.1rem}.envelope-stage{width:100vw;max-width:450px;margin-top:max(-180px,-40vw);margin-bottom:-18px}.cover-actions .open-button{font-size:.875rem;padding:15px 24px}.cover-hint{margin-top:12px;font-size:.9375rem}.paper:after{inset:11px}.paper-inner{padding:44px 8.5% 41px}.paper-art-top,.paper-art-bottom{height:160px}.music-button{bottom:13px;right:13px;font-size:.8125rem;padding:10px 14px}.music-panel{bottom:13px;right:13px;width:308px;max-width:calc(100vw - 26px)}.letter-preview{padding-top:5%}}
@media(prefers-reduced-motion:reduce){.cover.opening .envelope-flap{display:none}.cover.opening .letter-preview{transform:none}.cover.opening .cover-heading,.cover.opening .cover-actions{transform:none}.invitation{animation:none}}