:root{--paper:#f6f4f0;--ink:#6f2a3b;--soft:#997c7e;--ivory:#f5f0e8;--line:#bdaaa7}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:#e9e4df;color:var(--ink);font-family:Amiri,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}button{touch-action:manipulation}main{width:100%;max-width:540px;margin:auto;background:var(--paper);box-shadow:0 0 70px #32151d17;opacity:0;transition:opacity 1.6s ease .4s;overflow:hidden}main.visible{opacity:1} .cover{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;background:transparent;opacity:1;overflow:hidden;transition:opacity .65s ease}.envelope-wrap{position:relative;width:100%;max-width:540px;height:100%;overflow:hidden;--seal-x:50%;--seal-y:51%;--seal-rx:14%;--seal-ry:10%}.envelope-photo,.opening-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.opening-film{opacity:0;pointer-events:none}.cover.playing .opening-film{opacity:1}.open-seal{position:absolute;z-index:3;left:calc(var(--seal-x) - var(--seal-rx));top:calc(var(--seal-y) - var(--seal-ry));width:calc(var(--seal-rx)*2);height:calc(var(--seal-ry)*2);border:0;border-radius:50%;background:transparent;cursor:pointer}.seal-ripple{position:absolute;inset:-7px;border:1px solid #fff9;border-radius:50%;box-shadow:0 0 16px #fff7;animation:breathe 3s infinite}.open-caption{position:absolute;bottom:max(5.5%,28px);left:17%;right:17%;z-index:4;border:1px solid #fff8;border-radius:30px;background:#f9f7f0df;color:#705c50;padding:10px 16px;font-size:17px;line-height:1.5;text-align:center;box-shadow:0 3px 18px #705c5012;transition:opacity .2s}.cover.playing .open-seal,.cover.playing .open-caption{opacity:0;visibility:hidden}.cover.revealing{opacity:0;pointer-events:none}.plain-open{position:absolute;bottom:2%;left:20%;right:20%;z-index:5;border:0;background:#f9f7f0e0;color:#705c50;font-size:13px;border-radius:20px;padding:6px}.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}@keyframes breathe{0%,100%{transform:scale(.95);opacity:.25}50%{transform:scale(1.06);opacity:.8}}main.visible{opacity:1;transition:opacity .65s ease}.hero-video{opacity:0;transition:opacity 2s ease}.ambient-ready .hero-video{opacity:1}
.hero{position:relative;height:100svh;min-height:690px;max-height:1100px;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}.hero-bg,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}.hero-copy{width:68%;max-width:340px;position:relative;padding-top:7px}.together{font-size:16px;line-height:1.5;margin:0 0 22px}h1{font-weight:400;line-height:1;margin:0}.first-name{display:block;font-family:'Aref Ruqaa',Amiri,serif;font-size:clamp(47px,13.4vw,66px);line-height:1.35;font-weight:400}.surname{display:block;font-size:14px;line-height:1.7;margin-top:3px}h1 em{display:block;font:23px Amiri,serif;line-height:1.2;margin:8px 0 6px}.scratch-area{margin:24px auto 0;width:min(100%,235px)}.scratch-shell{position:relative;height:71px;width:100%;overflow:hidden}.date-value{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.date-value>span{font-size:13px;line-height:1}.date-value strong{font:22px Georgia,serif;letter-spacing:1px;font-weight:400}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity 1s}.reveal-button{border:0;color:var(--soft);background:transparent;display:block;margin:7px auto 0;padding:0;font-size:12px;line-height:1.6}.reveal-button span{font:16px Georgia;margin-inline-start:6px}.reveal-note{font-size:12px;color:var(--soft);margin:7px 0 0;line-height:1.6}.hero-bow{display:block;width:125px;height:auto;margin:21px auto 11px;filter:drop-shadow(0 2px 2px #6a3a3c09)}.hero-place p{font-size:23px;margin:0;line-height:1.5}.hero-place>span{display:block;font-size:15px;line-height:1.6}.hero-place small{display:block;font-size:13px;line-height:1.6;margin-top:7px}.scroll-cue{display:block;text-decoration:none;font:24px Georgia,serif;color:var(--soft);line-height:1;margin:17px auto 0}.welcome{text-align:center;padding:65px 28px 115px}.intro-bow{display:block;width:155px;margin:0 auto 25px}.eyebrow{font-size:14px;color:var(--soft);margin:0 0 16px;line-height:1.6}h2{font:37px 'Aref Ruqaa',Amiri,serif;line-height:1.6;font-weight:400;margin:0 0 26px}.invitation-text{font-size:19px;line-height:2.05;margin:0 auto;max-width:390px}.couple-signature{font-family:'Aref Ruqaa',serif;font-size:29px;line-height:1.7;margin:28px 0 0}.couple-signature em,.closing-names em{font-family:Amiri,serif;font-size:.65em;font-style:normal;padding:0 8px}.countdown-section{position:relative;background:#6f2a3b url('assets/burgundy-tulle.webp') center/640px auto;padding:64px 0;color:var(--ivory);margin-top:-12px}.lace-edge{position:absolute;left:0;width:100%;height:auto;pointer-events:none;z-index:2}.lace-edge.top{top:0;transform:translateY(-48%) rotate(180deg)}.lace-edge.bottom{bottom:0;transform:translateY(48%)}.countdown-card{width:83%;max-width:440px;aspect-ratio:1627/1513;position:relative;margin:auto}.countdown-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.countdown-copy{position:absolute;inset:25% 13% 23%;display:flex;flex-direction:column;justify-content:center;gap:22px;text-align:center}.countdown-heading{font-family:'Aref Ruqaa',Amiri,serif;font-size:32px;line-height:1.5;margin:0}.locked-message{font-size:16px;margin:0 0 14px}.light-button{border:0;border-bottom:1px solid #f5f0e880;padding:2px 0;color:var(--ivory);background:transparent;font-size:13px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.countdown>div{display:flex;flex-direction:column;gap:9px;align-items:center}.countdown b{font:29px Georgia,serif;font-weight:400;font-variant-numeric:tabular-nums}.countdown span{font-size:12px}.venue{text-align:center;padding:112px 30px 76px}.venue h2{margin-bottom:30px}.venue-name{font-family:'Aref Ruqaa',serif;font-size:39px;line-height:1.5;margin:10px 0}.hotel{font-size:25px;line-height:1.6;margin:10px 0}.hotel-en{font:10px Georgia,serif;letter-spacing:3px;color:var(--soft);margin:12px 0 0}.venue-detail{margin-top:24px}.detail-ornament{font:43px Georgia,serif;line-height:1.5}.venue-detail p{font-size:17px;margin:10px 0}.venue-detail strong{font-size:29px;line-height:1.5;font-weight:400}.outline-button{display:inline-block;border:1px solid #a78b8b75;border-radius:40px;font-size:14px;padding:11px 31px;text-decoration:none;color:var(--ink);margin-top:30px}.closing{position:relative;text-align:center;padding:50px 44px 55px;background:#eeebe5a8}.pearl{position:absolute;width:27px;height:100%;object-fit:cover;opacity:.85;top:0;pointer-events:none}.pearl-right{right:0}.pearl-left{left:0}.closing-bow{width:130px;height:auto;margin:0 auto 20px}.closing>p{font-size:24px;line-height:1.9;margin:8px 0 28px}.with-love{font-size:15px;color:var(--soft)}.closing-names{font:38px 'Aref Ruqaa',serif;line-height:1.7;margin:15px 0 32px}.replay-button{border:0;background:transparent;border-bottom:1px solid #b39e9a;color:var(--soft);font-size:12px;padding:0 0 2px}@media(max-width:360px){.hero{min-height:660px}.hero-copy{width:70%}.together{font-size:14px;margin-bottom:17px}.first-name{font-size:46px}.surname{font-size:13px}.scratch-area{margin-top:18px}.hero-bow{width:110px;margin-top:16px}.hero-place p{font-size:21px}.invitation-text{font-size:17px}.countdown-heading{font-size:27px}.countdown-copy{gap:15px}.countdown b{font-size:25px}.closing>p{font-size:21px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-video{display:none}}
.together{font-size:15px;line-height:1.4;margin-bottom:16px}.first-name{font-size:clamp(45px,13.1vw,64px);line-height:1.2}.surname{line-height:1.4;margin-top:2px}h1 em{font-size:22px;line-height:1.15;margin:5px 0 3px}.scratch-area{margin-top:18px}.hero-bow{width:100px;margin:15px auto 8px}.hero-place p{font-size:21px;line-height:1.4}.hero-place>span{line-height:1.5}.hero-place small{line-height:1.4;margin-top:5px}.scroll-cue{margin-top:10px}@media(max-height:740px){.hero-copy{padding-top:0}.together{font-size:14px;margin-bottom:12px}.first-name{font-size:46px}.hero-bow{width:90px;margin-top:12px}.scratch-area{margin-top:15px}.hero-place p{font-size:20px}.scroll-cue{margin-top:7px}}
.date-value{display:block;text-align:center;top:0;right:0;bottom:0;left:0;padding-top:7px}.date-value>span{display:block;line-height:1.2;margin-bottom:9px}.date-value strong{display:block;white-space:nowrap;text-align:center}
/* Language selection always precedes the envelope. */
.language-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#e9e4df;overflow:auto}.language-content{width:100%;max-width:540px;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:90px 18%;background:url('assets/opening-inside-v28.webp') center/cover no-repeat;box-shadow:0 0 70px #32151d17}.language-kicker{font-size:16px;color:var(--soft);margin:0 0 25px}.language-kicker span{display:block;font:10px 'Cormorant Garamond',Georgia,serif;letter-spacing:3px;margin-top:8px}.language-couple-ar{font:42px 'Aref Ruqaa',Amiri,serif;line-height:1.6;margin:0}.language-couple-en{font:35px 'Great Vibes',cursive;line-height:1.4;margin:14px 0 0}.language-divider{font:35px Georgia,serif;color:#a98d8a;line-height:1;margin:25px 0}.language-content h1{font:25px Amiri,serif;line-height:1.6;margin:0}.language-subtitle{font:17px 'Cormorant Garamond',Georgia,serif;margin:5px 0 28px}.language-options{display:flex;flex-direction:column;width:100%;max-width:290px;gap:14px}.language-choice{position:relative;padding:12px 20px 14px;border:1px solid #bca6a185;border-radius:4px;color:var(--ink);background:#faf8f2ca;box-shadow:0 4px 14px #6f2a3b07;transition:background .2s,transform .2s}.language-choice:hover{background:#fffdf8;transform:translateY(-2px)}.language-choice strong{display:block;font:26px Amiri,serif;line-height:1.4}.language-choice small{display:block;font-size:12px;color:var(--soft);line-height:1.5}.language-choice[lang=en] strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px}.language-choice[lang=en] small{font:13px 'Cormorant Garamond',Georgia,serif}.language-choice>span{position:absolute;top:50%;transform:translateY(-50%);left:15px;font:18px Georgia,serif;color:#a98d8a}.language-choice[lang=en]>span{left:auto;right:15px}.change-language{display:block;border:0;background:transparent;color:var(--soft);font-size:13px;text-decoration:underline;text-underline-offset:4px;margin:24px auto 0;padding:4px 8px}html[lang=en] body{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .first-name{font-family:'Great Vibes',cursive;font-size:clamp(48px,13vw,62px);line-height:1.15;font-weight:400}html[lang=en] .surname{font-size:14px;line-height:1.5;letter-spacing:.6px}html[lang=en] h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;margin:7px 0}html[lang=en] .together{font-size:17px;line-height:1.3;margin-bottom:23px}html[lang=en] .hero-place p{font-size:23px;line-height:1.2}html[lang=en] .hero-place>span{font-size:18px;margin-top:7px}html[lang=en] .hero-place small{font-size:16px;margin-top:9px}html[lang=en] .open-caption{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px}html[lang=en] h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;line-height:1.15}html[lang=en] .eyebrow{font-size:15px;letter-spacing:.5px}html[lang=en] .invitation-text{font-size:21px;line-height:1.65;max-width:360px}html[lang=en] .couple-signature,html[lang=en] .closing-names{font-family:'Great Vibes',cursive}html[lang=en] .couple-signature em,html[lang=en] .closing-names em{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .countdown-heading{font-family:'Cormorant Garamond',Georgia,serif;font-size:31px}html[lang=en] .countdown span{font-size:12px}html[lang=en] .venue-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:35px;line-height:1.3}html[lang=en] .hotel-en{display:none}html[lang=en] .venue-detail p{font-size:20px}html[lang=en] .closing>p{font-size:25px;line-height:1.5}html[lang=en] .replay-button,html[lang=en] .change-language{font-size:15px}html[lang=en] .reveal-note{font-size:14px}.language-content{padding-inline:clamp(38px,16vw,86px)}@media(max-width:360px){.language-content{padding-inline:45px}.language-couple-ar{font-size:36px}.language-couple-en{font-size:31px}.language-kicker{margin-bottom:20px}.language-divider{margin:21px 0}.language-subtitle{font-size:15px}.language-choice strong{font-size:24px}html[lang=en] .first-name{font-size:47px}html[lang=en] .hero-place p{font-size:20px}html[lang=en] .closing>p{font-size:22px}}
/* Stable centered layout with enough room for both choices on short screens. */
.language-screen{display:block}.language-content{display:table;height:100svh;min-height:100svh;margin:0 auto;padding:0}.language-inner{display:table-cell;vertical-align:middle;text-align:center;padding:50px clamp(38px,16vw,86px)}.language-kicker{font-size:16px;line-height:1.3;margin:0 0 16px}.language-kicker span{line-height:1.2;margin-top:6px}.language-couple-ar{font-size:36px;line-height:1.4}.language-couple-en{font-size:32px;line-height:1.25;margin-top:8px}.language-divider{font-size:27px;line-height:1;margin:18px 0}.language-content h1{font-size:24px;line-height:1.3}.language-subtitle{font-size:16px;line-height:1.25;margin:4px 0 22px}.language-options{display:block;margin:0 auto}.language-choice{display:block;width:100%;padding:10px 17px 12px;margin:12px 0 0}.language-choice:first-child{margin-top:0}.language-choice strong,.language-choice[lang=en] strong{font-size:24px;line-height:1.3}.language-choice small,.language-choice[lang=en] small{font-size:12px;line-height:1.4}@media(max-height:740px){.language-kicker{display:none}.language-couple-ar{font-size:32px;line-height:1.3}.language-couple-en{font-size:28px}.language-divider{font-size:22px;margin:14px 0}.language-content h1{font-size:22px}.language-subtitle{font-size:15px;line-height:1.2;margin-bottom:18px}.language-choice strong,.language-choice[lang=en] strong{font-size:22px;line-height:1.25}.language-choice{margin-top:10px}}
.language-content{display:block;position:relative;height:100svh;min-height:680px;padding:0}.language-inner{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;padding:0 clamp(38px,16vw,86px)}.language-choice{height:82px;min-height:82px}.language-choice strong{position:absolute;top:10px;left:32px;right:32px}.language-choice small{position:absolute;bottom:12px;left:22px;right:22px}@media(max-height:740px){.language-choice{height:74px;min-height:74px}}

.language-choice{height:64px;min-height:64px;padding:0 20px;line-height:62px;font:26px/62px Amiri,serif}.language-choice[lang=en]{font-family:'Cormorant Garamond',Georgia,serif}.language-inner{top:50%;}.language-content{min-height:600px}

/* Language entry: a blank page with only the two language options. */
.language-screen{background:#fff;display:flex;align-items:center;justify-content:center;min-height:100svh;padding:24px}
.language-content{display:block;position:static;width:100%;max-width:290px;height:auto;min-height:0;margin:0;background:none;box-shadow:none;padding:0}
.language-inner{display:block;position:static;width:100%;padding:0;transform:none;text-align:center}
.language-options{display:block;width:100%;max-width:290px;margin:0 auto}
.language-choice{display:block;width:100%;height:64px;min-height:64px;margin:14px 0 0;padding:0 20px;border:1px solid #d8cecb;border-radius:4px;background:#fff;box-shadow:none;color:var(--ink);font:26px/62px Amiri,serif}
.language-choice:first-child{margin-top:0}.language-choice:hover{background:#faf8f5;transform:none}.language-choice[lang=en]{font-family:'Cormorant Garamond',Georgia,serif}

/* Refined language choices on the otherwise empty entry screen. */
.language-content,.language-options{max-width:258px}
.language-choice{position:relative;isolation:isolate;height:84px;min-height:84px;margin-top:24px;padding:0 24px;border:1px solid #b69a66;border-radius:2px;background:linear-gradient(135deg,#fffefa 0%,#f8f3e9 48%,#fffdf7 100%);color:#795f39;box-shadow:0 8px 26px #806d4510,inset 0 0 0 4px #fffdf8,inset 0 0 0 5px #cbb78e80;font:30px/82px Amiri,serif;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;background-clip:padding-box}
.language-choice[lang=en]{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;font-weight:500;letter-spacing:2px}
.language-choice::before,.language-choice::after{content:'';position:absolute;top:50%;width:20px;height:1px;background:linear-gradient(90deg,transparent,#b9a16f);pointer-events:none}
.language-choice::before{left:22px}.language-choice::after{right:22px;transform:rotate(180deg)}
.language-choice:hover{background:linear-gradient(135deg,#fffefa,#f5eddd,#fffdf7);border-color:#9b7e48;box-shadow:0 10px 30px #806d4520,inset 0 0 0 4px #fffdf8,inset 0 0 0 5px #bba16c99;transform:translateY(-2px)}
.language-choice:active{transform:translateY(0);box-shadow:0 3px 12px #806d4515,inset 0 0 0 4px #fffdf8,inset 0 0 0 5px #bba16c99}
.language-choice:focus-visible{outline:1px solid #9b7e48;outline-offset:7px}
@media(prefers-reduced-motion:reduce){.language-choice{transition:none}.language-choice:hover{transform:none}}

/* Small, soft language initials. */
.language-content,.language-options{max-width:210px}.language-options{display:flex;align-items:center;justify-content:center;gap:24px;flex-direction:row}
.language-choice,.language-choice:first-child{flex:0 0 78px;width:78px;height:78px;min-height:78px;margin:0;padding:0;border:1px solid #d3c3aa;border-radius:50%;background:linear-gradient(145deg,#fffefa,#f7f1e7);color:#8b7255;box-shadow:0 4px 15px #806d450c,inset 0 0 0 4px #fffdfa;font:35px/76px Amiri,serif;letter-spacing:0}
.language-choice[lang=en]{font-family:'Cormorant Garamond',Georgia,serif;font-size:31px;font-weight:400;letter-spacing:0}
.language-choice::before,.language-choice::after{display:none}
.language-choice:hover{border-color:#b6a080;background:#fbf7ef;box-shadow:0 6px 20px #806d4515,inset 0 0 0 4px #fffdfa;transform:translateY(-2px)}
.language-choice:active{transform:translateY(0);box-shadow:0 2px 8px #806d4510,inset 0 0 0 4px #fffdfa}

/* Engraved rectangular language plaques. */
.language-content,.language-options{max-width:336px}.language-options{gap:16px;width:100%;flex-direction:row;align-items:center;justify-content:center}
.language-choice,.language-choice:first-child{flex:1 1 0;width:auto;min-width:0;height:70px;min-height:70px;margin:0;padding:0 12px;border:1px solid #c9baa0;border-radius:3px;background:linear-gradient(145deg,#eee6d7,#f6f1e7 58%,#fdfaf4);color:#89724f;box-shadow:inset 0 2px 4px #806d4529,inset 0 -2px 2px #fffefb,0 1px 0 #fff,0 3px 9px #806d450a;font:28px/68px Amiri,serif;letter-spacing:0;text-shadow:0 1px 0 #fffdf6,0 -1px 1px #75603d38}
.language-choice[lang=en]{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:500;letter-spacing:.6px}
.language-choice::before{display:block;content:'';position:absolute;inset:5px;width:auto;height:auto;top:5px;left:5px;border:1px solid #b7a17a4d;border-radius:1px;background:none;box-shadow:0 1px 0 #fffaf1b0;pointer-events:none}.language-choice::after{display:none}
.language-choice:hover{border-color:#b4a07d;background:linear-gradient(145deg,#e9dfcd,#f4eddf 58%,#fcf8ef);box-shadow:inset 0 2px 5px #806d4533,inset 0 -2px 2px #fffefb,0 1px 0 #fff;transform:none}
.language-choice:active{box-shadow:inset 0 3px 7px #806d4538,inset 0 -1px 1px #fffefb;transform:none}
@media(max-width:360px){.language-options{gap:12px}.language-choice,.language-choice:first-child{padding:0 8px}.language-choice[lang=en]{font-size:24px}}

/* The Arabic invitation begins with Ar-Rum 30:21. */
.quran-opening{margin:0 auto 36px;text-align:center;color:var(--ink)}.quran-verse{font:16px/2 Amiri,serif;margin:0;text-wrap:pretty}.quran-reference{font:12px/1.7 Amiri,serif;color:var(--soft);margin:12px 0 0}
html[lang=ar] .hero{height:auto;min-height:max(100svh,1000px);max-height:none;padding:90px 0 65px}
html[lang=en] .quran-opening{display:block}
@media(max-width:360px){.quran-verse{font-size:15px}html[lang=ar] .hero{padding-top:85px;min-height:1020px}}

/* Traditional calligraphic Basmala begins the Arabic invitation. */
.basmala{font-family:Amiri,serif;font-size:clamp(16px,5.2vw,25px);font-weight:400;line-height:2.7;margin:0 auto 22px;color:var(--ink);text-align:center;white-space:nowrap;font-synthesis:none}
html[lang=ar] .hero{min-height:max(100svh,1090px)}
@media(max-width:360px){html[lang=ar] .hero{min-height:1110px}}

/* Family invitation immediately beneath the opening verse. */
html[lang=ar] .together{margin:0 0 28px;font-size:17px;line-height:1.8}.family-intro,.family-name,.family-invitation{display:block}.family-intro{font-size:15px;color:var(--soft);margin-bottom:7px}.family-name{font-size:20px;line-height:1.9}.family-invitation{font-size:16px;margin-top:9px}
html[lang=ar] .hero{min-height:max(100svh,1200px)}
@media(max-width:360px){.family-name{font-size:18px}.family-invitation{font-size:15px}html[lang=ar] .hero{min-height:1220px}}

/* The hosts appear alongside each other beneath the verse. */
.family-hosts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;margin:11px -24px 0}
.family-hosts .family-name{font-size:clamp(14px,3.9vw,19px);line-height:1.9;white-space:nowrap}
html[lang=ar] .family-intro{font-size:17px;color:var(--ink)}
@media(max-width:360px){.family-hosts{gap:8px;margin-inline:-25px}.family-hosts .family-name{font-size:clamp(12px,3.9vw,14px)}}
/* Full-screen invitation pages; each page advances after four seconds. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#invitation{position:fixed;inset:0;height:100dvh;max-height:100dvh;overflow:hidden;width:100%;max-width:540px;margin:auto}
#invitation>[data-page],html[lang=ar] #invitation>.hero{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}
#invitation>[data-page][hidden]{display:none!important}
.page-content{width:100%;flex:0 0 100%;padding:0 30px;transform-origin:center center;position:relative;z-index:1}
.intro-page .page-content{max-width:430px;flex-basis:auto;padding-inline:54px}.intro-page .quran-opening{margin-bottom:28px}.intro-page .together{margin-bottom:0!important}.intro-page .family-hosts{margin-inline:-22px}
#invitation .hero-copy{width:75%;max-width:340px;margin:auto;padding:0}
html[lang=ar] .hero .together{display:none}
#invitation .hero .page-content{padding:0}
.hero .first-name{font-size:clamp(43px,12vw,61px)}.hero .scratch-area{margin-top:18px}.hero .hero-bow{margin-top:15px;width:110px}.hero .scroll-cue{margin-top:12px}
.welcome .page-content{padding-inline:30px}.countdown-section .page-content{padding:0}.countdown-card{width:88%}
.closing .page-content{padding-inline:44px}.closing .page-content>p{font-size:24px;line-height:1.9;margin:8px 0 28px}
html[lang=en] .closing .page-content>p{font-size:25px;line-height:1.5}
.page-navigation{position:absolute;z-index:10;top:max(16px,env(safe-area-inset-top));left:22px;right:22px;display:flex;gap:6px;direction:ltr}
.page-navigation button{height:20px;flex:1;padding:8px 0;border:0;background:transparent;position:relative}
.page-navigation button::before,.page-navigation button>span{content:'';position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;background:#b9a39b55}
.page-navigation button>span{background:#997c7e;transform:scaleX(0);transform-origin:left}
.page-navigation button.passed>span{transform:scaleX(1)}
.page-navigation.timing button.current>span{animation:page-progress 4s linear forwards}
@keyframes page-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.is-active .page-content{animation:page-appear .4s ease both}
@keyframes page-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.is-active .page-content{animation:none}}

/* One ivory lace design across every invitation page. */
#invitation>[data-page]{background:var(--paper) url('assets/opening-inside-v28.webp') center/cover no-repeat;color:var(--ink)}
#invitation>[data-page]>.hero-bg,#invitation>[data-page]>.hero-video,#invitation>[data-page]>.lace-edge,#invitation>[data-page]>.pearl{display:none}
#invitation>[data-page]>.page-content{max-width:440px;flex-basis:100%;padding-inline:58px}
#invitation>.hero>.page-content{padding-inline:0}
#invitation>.intro-page>.page-content{max-width:430px;padding-inline:54px}
#invitation>.countdown-section>.page-content{padding-inline:54px}
#invitation .countdown-card{width:100%;max-width:none;aspect-ratio:auto;position:relative;margin:auto}
#invitation .countdown-frame{display:none}
#invitation .countdown-copy{position:relative;inset:auto;display:flex;flex-direction:column;gap:26px;text-align:center;color:var(--ink)}
#invitation .countdown-heading{font-size:34px;font-weight:400;line-height:1.6;margin:0;color:var(--ink)}
#invitation .locked-message{color:var(--soft)}
#invitation .light-button{color:var(--ink);border-bottom-color:#bdaaa7;font-size:15px}
#invitation .countdown{color:var(--ink);gap:12px;justify-content:center}
#invitation .countdown b{color:var(--ink)}
#invitation .countdown span{color:var(--soft)}
#invitation .countdown>div{border-color:#bdaaa7}
#invitation .closing .page-content>p{font-size:23px;line-height:1.8}
html[lang=en] #invitation .countdown-heading{font-size:34px;line-height:1.3}
@media(max-width:360px){#invitation>[data-page]>.page-content{padding-inline:48px}#invitation>.hero>.page-content{padding-inline:0}#invitation>.intro-page>.page-content{padding-inline:48px}#invitation>.countdown-section>.page-content{padding-inline:44px}#invitation .countdown{gap:8px}#invitation .countdown-heading{font-size:29px}}

/* A smaller Basmala placed high on the opening page. */
.intro-page>.basmala{position:absolute;z-index:3;top:max(58px,8dvh);left:0;right:0;width:100%;margin:0;font-size:clamp(13px,4vw,19px);line-height:2.3;pointer-events:none}
@media(max-height:600px){.intro-page>.basmala{top:42px;font-size:13px}.intro-page .page-content{padding-top:42px}}

/* A single balanced opening group sits inside the lace arch. */
#invitation>.intro-page>.page-content{position:absolute;top:clamp(96px,18dvh,170px);left:0;right:0;width:100%;margin:auto;transform-origin:top center;padding-top:0}
.intro-page .basmala{position:static;width:auto;font-size:clamp(13px,4vw,19px);line-height:2.3;margin:0 auto 18px;text-align:center}
.intro-page .quran-opening{margin-bottom:22px}.intro-page .quran-reference{margin-top:9px}
.intro-page .family-intro{margin-top:0}.intro-page .family-hosts{margin-top:8px}.intro-page .family-invitation{margin-top:10px}
@media(max-height:600px){#invitation>.intro-page>.page-content{top:90px;padding-top:0}.intro-page .basmala{font-size:13px;margin-bottom:12px}}

/* Larger hosts brought together around a central Arabic conjunction. */
.intro-page .family-hosts{display:grid;grid-template-columns:max-content auto max-content;justify-content:center;align-items:center;column-gap:8px;margin:10px -20px 0}
.intro-page .family-hosts .family-name{font-size:clamp(18px,4.9vw,23px);line-height:1.6;white-space:nowrap;text-align:center}
.host-title{display:block;font-size:.78em;line-height:1.8;color:var(--soft)}
.host-and{display:block;font:23px/1.5 'Aref Ruqaa',Amiri,serif;color:var(--ink);padding-top:19px}
@media(max-width:360px){.intro-page .family-hosts{column-gap:6px;margin-inline:-18px}.intro-page .family-hosts .family-name{font-size:18px}.host-and{font-size:21px}}

/* Dedicated, centered Quran page and a separate hosts page. */
#invitation>.intro-page>.page-content{position:relative;top:auto;left:auto;right:auto;margin:0;transform-origin:center center;padding:0 54px;max-width:440px}
.intro-page .quran-opening{margin:0}
.intro-page .basmala{font-size:clamp(17px,5.1vw,25px);line-height:2.5;margin:0 auto 30px}
.intro-page .quran-verse{font-size:clamp(23px,6vw,29px);line-height:2.05}
.intro-page .quran-reference{font-size:14px;margin-top:22px}
.hosts-page .together{margin:0!important}.hosts-page .family-intro{font-size:20px;margin-bottom:24px;color:var(--ink)}
.hosts-page .family-hosts{display:grid;grid-template-columns:max-content auto max-content;justify-content:center;align-items:center;gap:8px;margin:0 -20px}
.hosts-page .family-name{font-size:clamp(18px,4.9vw,23px);line-height:1.7;white-space:nowrap}
.hosts-page .family-invitation{margin-top:27px;font-size:19px;line-height:1.9}
.page-navigation.timing button.current>span{animation-duration:6s}
@media(max-width:360px){#invitation>.intro-page>.page-content{padding-inline:48px}.intro-page .quran-verse{font-size:22px}.intro-page .basmala{font-size:16px}.hosts-page .family-name{font-size:18px}}

/* The envelope plays its full physical opening with no added visual effects. */
.cover,.cover.revealing{transition:none;opacity:1}
#invitation,#invitation.visible{transition:none}
.seal-ripple{display:none;animation:none}
.intro-page.is-active .page-content{animation:none}
.hero.is-active .page-content{animation:none}

/* The paper appears first, followed by its content from top to bottom. */
#invitation>[data-page].is-active>.page-content{animation:writing-down 3s linear .35s both}
@keyframes writing-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content{animation:none;clip-path:none}}

/* Keep the actual final video frame behind the opening text: no background swap. */
.cover.opened-background{z-index:0;pointer-events:none;transition:none;background:var(--paper)}
.cover.opened-background .opening-film{opacity:1;visibility:visible}
.cover.opened-background .envelope-photo,.cover.opened-background .open-seal,.cover.opened-background .open-caption,.cover.opened-background .plain-open{visibility:hidden}
#invitation.over-envelope{z-index:1;background:transparent;box-shadow:none}
#invitation.over-envelope>.intro-page{background:transparent}
html[lang=en] #invitation.over-envelope>.hero{background:transparent}

.music-toggle{position:fixed;z-index:120;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,calc((100vw - 540px)/2 + 18px));width:42px;height:42px;border:1px solid #bdaaa780;border-radius:50%;background:#fbf8f0e8;color:var(--ink);font:24px/1 Georgia,serif;box-shadow:0 2px 12px #6f2a3b0c;display:flex;align-items:center;justify-content:center;padding:0}
.music-toggle.is-muted::after{content:'';position:absolute;width:25px;height:1px;background:currentColor;transform:rotate(-45deg)}

.music-toggle{width:auto;min-width:42px;gap:8px;border-radius:22px;padding:0 13px;height:40px;font-size:22px}.music-caption{font:13px/1.5 Amiri,serif}.music-toggle.is-muted::after{display:none}html[lang=en] .music-caption{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}

/* Align each host with the child whose wedding is being celebrated. */
#invitation>.hosts-page>.page-content{padding-top:0;padding-bottom:80px}
.hosts-page .family-intro{font-size:21px;margin:0 0 40px;line-height:1.8}
.hosts-page .family-hosts{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;margin:0 -20px;align-items:start}
.host-column{display:flex;flex-direction:column;align-items:center;min-width:0}
.hosts-page .family-hosts .family-name{font-size:clamp(21px,5.8vw,27px);line-height:1.7;white-space:nowrap}
.hosts-page .host-title{font-size:.72em;line-height:1.9;margin-bottom:2px}
.hosts-page .host-child{display:block;font:clamp(38px,11vw,54px)/1.65 'Aref Ruqaa',Amiri,serif;margin-top:22px;color:var(--ink);white-space:nowrap}
.hosts-page .host-and{font-size:24px;padding-top:27px}
.hosts-page .family-invitation{font-size:18px;margin-top:32px}
@media(max-width:360px){#invitation>.hosts-page>.page-content{padding-bottom:60px}.hosts-page .family-intro{margin-bottom:30px;font-size:19px}.hosts-page .family-hosts .family-name{font-size:20px}.hosts-page .host-child{font-size:38px;margin-top:17px}.hosts-page .family-invitation{font-size:16px;margin-top:25px}}

/* Invitation sentence precedes the couple's aligned names. */
.hosts-page .couple-children{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin:18px -20px 0}
.hosts-page .couple-children .host-child{margin:0}
.hosts-page .couple-and{font:26px/1.6 'Aref Ruqaa',Amiri,serif;color:var(--ink)}
.hosts-page .family-invitation{font-size:17px;margin-top:26px;white-space:normal}
@media(max-width:360px){.hosts-page .family-invitation{font-size:15px;margin-top:22px}.hosts-page .couple-children{margin-top:16px}}

/* Calligraphic conjunctions and a paired wedding-name composition. */
.hosts-page .family-hosts{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:7px;align-items:center}
.hosts-page .host-and,.hosts-page .couple-and{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:48px;padding:0;font-family:'Aref Ruqaa',Amiri,serif;font-weight:400;font-size:31px;line-height:1;color:var(--ink);overflow:visible}
.hosts-page .host-and{margin-top:24px;align-self:center}
.hosts-page .host-and::before,.hosts-page .host-and::after,.hosts-page .couple-and::before,.hosts-page .couple-and::after{content:'';position:absolute;left:5px;width:20px;height:7px;border-top:1px solid #b29a7e;border-radius:50%;pointer-events:none;opacity:.7}
.hosts-page .host-and::before,.hosts-page .couple-and::before{top:0;transform:rotate(-16deg)}
.hosts-page .host-and::after,.hosts-page .couple-and::after{bottom:-1px;transform:rotate(164deg)}
.hosts-page .couple-children{position:relative;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);column-gap:7px;align-items:center;margin-top:27px;padding:12px 0 18px}
.hosts-page .couple-children .host-child{position:relative;display:block;font-family:'Aref Ruqaa',Amiri,serif;font-weight:700;font-size:clamp(38px,10.8vw,54px);line-height:1.7;padding:0 0 10px;text-shadow:0 1px 0 #fffdf7;isolation:isolate}
.hosts-page .couple-children .host-child::after{content:'';display:block;position:absolute;bottom:4px;left:15%;width:70%;height:12px;border-bottom:1px solid #b29a7e99;border-radius:0 0 65% 45%;transform:rotate(-5deg)}
.hosts-page .couple-children .host-child:last-child::after{transform:rotate(5deg);border-radius:0 0 45% 65%}
.hosts-page .couple-and{font-size:36px;height:58px;margin-bottom:8px}
.hosts-page .couple-and::before{top:0}.hosts-page .couple-and::after{bottom:0}
@media(max-width:360px){.hosts-page .family-hosts,.hosts-page .couple-children{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:5px}.hosts-page .host-and,.hosts-page .couple-and{width:26px}.hosts-page .couple-children .host-child{font-size:38px}.hosts-page .host-and{font-size:28px}.hosts-page .couple-and{font-size:32px}}

/* Bespoke Arabic name artworks, normalized to matching visual proportions. */
.hosts-page .couple-children{margin-top:25px;padding:8px 0 12px}
.hosts-page .couple-children .host-child{display:flex;align-items:center;justify-content:center;width:100%;height:116px;margin:0;padding:0;font-size:0;line-height:0;text-shadow:none}
.hosts-page .couple-children .host-child::after{display:none}
.name-art{display:block;width:100%;height:100%;overflow:visible}
.hosts-page .couple-and{margin-bottom:0}
@media(max-width:360px){.hosts-page .couple-children .host-child{height:100px}}

/* Unified calligraphic composition with the conjunction woven into the names. */
.hosts-page .couple-children.couple-artwork{display:block;height:150px;max-width:none;margin:24px -24px 0;padding:0}
@media(max-width:360px){.hosts-page .couple-children.couple-artwork{height:128px;margin-inline:-22px}}

/* Keep every calligraphic stroke within the inner lace opening. */
.hosts-page .couple-children.couple-artwork{width:100%;max-width:280px;height:auto;aspect-ratio:3/1;margin:24px auto 0;padding:0 8px;overflow:hidden}
.hosts-page .couple-artwork .name-art{display:block;width:100%;height:100%;overflow:hidden}
@media(max-width:360px){.hosts-page .couple-children.couple-artwork{width:100%;height:auto;margin:22px auto 0;padding-inline:10px}}

/* Slower line reveal with larger text; the couple artwork keeps its exact dimensions. */
#invitation>[data-page].is-active>.page-content{animation-duration:4.5s;animation-delay:.35s}
.hosts-page .family-intro{font-size:24px;margin-bottom:30px;line-height:1.8}
.hosts-page .family-hosts .family-name{font-size:clamp(23px,6.4vw,30px);line-height:1.65}
.hosts-page .family-invitation{font-size:20px;line-height:1.9;margin-top:24px}
#invitation>.hosts-page>.page-content{padding-bottom:60px}
.intro-page .quran-verse{font-size:clamp(25px,6.4vw,31px);line-height:1.95}
#invitation .welcome .invitation-text{font-size:22px;line-height:1.9}
#invitation .eyebrow{font-size:16px}
#invitation .closing .page-content>p{font-size:25px;line-height:1.8}
html[lang=ar] #invitation .hero-place p{font-size:25px}
html[lang=ar] #invitation .hero-place>span{font-size:17px}
html[lang=ar] #invitation .hero-place small{font-size:15px}
@media(max-width:360px){.hosts-page .family-intro{font-size:22px;margin-bottom:26px}.hosts-page .family-hosts .family-name{font-size:22px}.hosts-page .family-invitation{font-size:18px;margin-top:22px}.intro-page .quran-verse{font-size:23px}#invitation>.hosts-page>.page-content{padding-bottom:45px}#invitation .welcome .invitation-text{font-size:20px}}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content{animation:none}}

/* More legible host-page text with stronger weight and safe narrow-screen wrapping. */
.hosts-page .family-intro{font-size:27px;line-height:1.6;margin-bottom:28px}
.hosts-page .family-hosts .family-name{font-size:clamp(28px,7.2vw,34px);font-weight:700;line-height:1.5;white-space:normal;word-break:normal}
.hosts-page .host-title{font-size:19px;font-weight:400;line-height:1.7;color:var(--ink);margin-bottom:5px}
.hosts-page .family-invitation{font-size:23px;line-height:1.7;margin-top:22px}
#invitation>.hosts-page>.page-content{padding-bottom:40px}
@media(max-width:360px){.hosts-page .family-intro{font-size:24px;line-height:1.6;margin-bottom:22px}.hosts-page .family-hosts .family-name{font-size:26px;line-height:1.45}.hosts-page .host-title{font-size:18px}.hosts-page .family-invitation{font-size:21px;line-height:1.6;margin-top:18px}#invitation>.hosts-page>.page-content{padding-bottom:25px}}

/* The opening family invitation is set as two bold, generous lines. */
.hosts-page .family-intro{font-family:Amiri,serif;font-weight:700;font-size:32px;line-height:1.65;margin-bottom:24px}
.family-intro-love,.family-intro-honour{display:block;white-space:nowrap}
.hosts-page .family-intro-love{font-size:1em}.hosts-page .family-intro-honour{font-size:.92em;margin-top:2px}
@media(max-width:360px){.hosts-page .family-intro{font-size:29px;line-height:1.6;margin-bottom:20px}}

/* Make the opening expression substantially more prominent. */
.hosts-page .family-intro-love{font-size:clamp(38px,11.2vw,52px);font-weight:700;line-height:1.45}
.hosts-page .family-intro-honour{margin-top:8px}
@media(max-width:360px){.hosts-page .family-intro-love{font-size:38px}}

/* A balanced host page, constrained to the lace frame's clear central area. */
#invitation>.hosts-page>.page-content{max-width:420px;padding-inline:clamp(46px,15vw,64px);padding-bottom:20px}
.hosts-page .family-intro{margin-bottom:20px;line-height:1.5}
.hosts-page .family-intro-love{font-size:36px;line-height:1.45}
.hosts-page .family-intro-honour{margin-top:4px}
.hosts-page .family-hosts{width:100%;margin:0;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:6px}
.hosts-page .family-hosts .family-name{font-size:clamp(23px,6.3vw,28px);line-height:1.45;white-space:normal;overflow-wrap:normal}
.hosts-page .host-title{font-size:18px;margin-bottom:4px}
.hosts-page .host-and{width:26px;font-size:28px}
.hosts-page .family-invitation{font-size:20px;line-height:1.7;margin-top:20px}
#invitation>.hosts-page.is-active>.page-content{animation-duration:5.2s;animation-delay:.2s}
@media(max-width:360px){#invitation>.hosts-page>.page-content{padding-inline:46px;padding-bottom:12px}.hosts-page .family-intro-love{font-size:34px}.hosts-page .family-intro{margin-bottom:18px}.hosts-page .family-hosts .family-name{font-size:23px}.hosts-page .family-invitation{font-size:18px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){#invitation>.hosts-page.is-active>.page-content{animation:none}}

/* The opening phrase and the host names share the same responsive size. */
.hosts-page .family-intro-love,.hosts-page .family-hosts .family-name{font-size:clamp(23px,6.3vw,28px)}
@media(max-width:360px){.hosts-page .family-intro-love,.hosts-page .family-hosts .family-name{font-size:23px}}
/* Day and eight independently scratched date digits. */
#invitation>.date-page>.page-content{max-width:440px;padding:0 44px}
.date-page .date-page-title{font:36px/1.6 'Aref Ruqaa',Amiri,serif;font-weight:400;margin:0 0 29px;color:var(--ink)}
.date-label{font:23px/1.6 Amiri,serif;margin:0 0 12px;color:var(--ink)}
.scratch-item{position:relative;overflow:hidden;border:1px solid #bdaaa74d;background:#faf7f1;isolation:isolate}
.day-slot{width:188px;height:76px;margin:0 auto;border-radius:5px}
.scratch-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink);font:700 25px/1 Amiri,serif}
.day-slot .scratch-value{font-size:32px}
.date-page .scratch-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .3s;cursor:crosshair}
.date-label-number{margin:28px 0 15px}
.date-digits{display:flex;align-items:center;justify-content:center;width:100%;gap:3px;max-width:344px;margin:0 auto}
.digit-slot{flex:1 1 0;min-width:0;max-width:38px;aspect-ratio:1/1;border-radius:50%}
.date-separator{flex:0 0 5px;color:var(--soft);font:18px/1 Georgia,serif}
.date-scratch-hint{font:14px/1.8 Amiri,serif;color:var(--soft);margin:22px 0 0}
.date-page .reveal-note{font-size:16px;margin-top:16px}
.date-page .scroll-cue{margin:25px auto 0}
.date-page .is-revealed{border-color:#bdaaa79c}
html[lang=en] .date-page .date-page-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px}
html[lang=en] .date-page .date-label,html[lang=en] .date-page .date-scratch-hint{font-family:'Cormorant Garamond',Georgia,serif}
html[lang=en] .date-page .scratch-value{font-family:'Cormorant Garamond',Georgia,serif}
@media(max-width:360px){#invitation>.date-page>.page-content{padding-inline:36px}.date-page .date-page-title{font-size:32px;margin-bottom:23px}.day-slot{width:170px;height:70px}.date-digits{gap:2px}.digit-slot .scratch-value{font-size:22px}.date-scratch-hint{font-size:13px}}
/* Square, ordered date reveals in the same Amiri typography as the hosts. */
.date-page .date-page-title{font-family:Amiri,serif;font-weight:700;font-size:32px;line-height:1.6}
.date-page .date-label{font-family:Amiri,serif;font-weight:700;font-size:25px}
.date-page .day-slot{border-radius:4px}
.date-page .digit-slot{border-radius:3px}
.date-page .scratch-value{font-family:Amiri,serif;font-weight:700}
.date-page .scratch-item.is-next{border-color:#6f2a3b;box-shadow:0 0 0 1px #6f2a3b22}
.date-page .scratch-item.is-locked .scratch-canvas{cursor:not-allowed}
.date-page .date-scratch-hint{min-height:26px}
.fireworks-canvas{position:absolute!important;inset:0;width:100%;height:100%;z-index:12;pointer-events:none;transition:none}
.save-date{font:700 28px/1.6 Amiri,serif;color:var(--ink);margin:14px 0 0;animation:save-date-appear .5s ease both}
@keyframes save-date-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html[lang=en] .save-date{font-family:'Cormorant Garamond',Georgia,serif}
@media(max-width:360px){.date-page .date-page-title{font-size:29px}.date-page .date-label{font-size:23px}.save-date{font-size:26px}}
@media(prefers-reduced-motion:reduce){.save-date{animation:none}}

/* A narrower date row safely inset from the lace, and a slower calm reveal. */
#invitation>.date-page>.page-content{max-width:410px;padding-inline:clamp(52px,16vw,72px)}
.date-page .date-digits{width:94%;max-width:234px;gap:2px;margin-inline:auto}
.date-page .digit-slot{max-width:27px;flex:1 1 0}
.date-page .date-separator{flex-basis:4px;font-size:16px}
.date-page .digit-slot .scratch-value{font-size:20px}
.date-page .day-slot{max-width:100%;width:170px}
#invitation>.date-page.is-active>.page-content{animation-duration:7.5s;animation-delay:.4s;animation-timing-function:ease-in-out}
@media(max-width:360px){#invitation>.date-page>.page-content{padding-inline:52px}.date-page .date-digits{width:100%;max-width:212px}.date-page .digit-slot .scratch-value{font-size:18px}.date-page .day-slot{width:155px}}
@media(prefers-reduced-motion:reduce){#invitation>.date-page.is-active>.page-content{animation:none}}
/* Compact day box, then countdown and a genuine add-to-calendar action. */
.date-page .date-page-title{font-size:30px;line-height:1.5;margin-bottom:23px}
.date-page .day-slot{width:126px;height:48px}
.date-page .day-slot .scratch-value{font-size:28px}
.date-page .date-countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:260px;margin:22px auto 0;direction:ltr}
.date-countdown>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.date-countdown b{font:700 23px/1.3 Amiri,serif;font-variant-numeric:tabular-nums}
.date-countdown span{font:13px/1.5 Amiri,serif;color:var(--soft)}
.date-page .save-date{display:table;margin:18px auto 0;padding:6px 25px;border:1px solid #a58c6b;border-radius:3px;background:#faf5eae8;text-decoration:none;font:700 24px/1.5 Amiri,serif;color:var(--ink)}
.calendar-options{display:block;margin:7px auto 0;padding:3px 6px;border:0;background:transparent;color:var(--soft);font:12px/1.5 Amiri,serif;text-decoration:underline;text-underline-offset:3px}
.calendar-menu{margin:8px auto 0;padding:7px;background:#faf7f0;border:1px solid #cdbdb0;border-radius:3px;max-width:240px}
.calendar-menu a{display:block;padding:7px;color:var(--ink);font:14px/1.6 Amiri,serif;text-decoration:none}
.date-page.is-complete .date-scratch-hint,.date-page.is-complete .reveal-note{display:none}
.date-page.is-complete .date-page-title{margin-bottom:13px;font-size:28px}
.date-page.is-complete .date-label{font-size:21px;margin-bottom:8px}
.date-page.is-complete .date-label-number{margin-top:18px}
.date-page.is-complete .scroll-cue{margin-top:13px}
html[lang=en] .date-countdown b,html[lang=en] .date-countdown span,html[lang=en] .calendar-options,html[lang=en] .calendar-menu a,html[lang=en] .date-page .save-date{font-family:'Cormorant Garamond',Georgia,serif}
@media(max-width:360px){.date-page .date-page-title{font-size:27px}.date-page .day-slot{width:116px;height:45px}.date-countdown b{font-size:21px}.date-page .save-date{font-size:22px}}

/* Open only on the seal; unhurried text on every invitation page. */
.open-caption{pointer-events:none;cursor:default;margin:0}
#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation-duration:8s;animation-delay:.4s;animation-timing-function:linear}
.page-navigation.timing button.current>span{animation-duration:var(--page-duration,14400ms)}
.venue .calendar-options{margin-top:10px}.venue .calendar-menu{background:#faf7f0f2}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation:none}}

.page-arrows{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;justify-content:space-between;gap:28px;width:min(70%,300px);z-index:40;pointer-events:auto}.page-arrows button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:5px 13px;border:1px solid #782e4040;border-radius:4px;background:#faf7f0df;color:#742b3e;font:18px Georgia,serif;cursor:pointer}.page-arrows button span{font:16px inherit}.page-arrows button:disabled{opacity:.25;cursor:default}.page-arrows button:focus-visible{outline:2px solid #742b3e;outline-offset:3px}

.music-toggle{left:50%;right:auto;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom))}.page-arrows{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 52px)}

.hosts-page .family-hosts .family-name{font-size:clamp(25px,6.8vw,30px)}
.date-page .date-digits{width:100%;max-width:258px;gap:2px}.date-page .digit-slot{max-width:30px}.date-page .digit-slot .scratch-value{font-size:22px}
@media(max-width:360px){.hosts-page .family-hosts .family-name{font-size:25px}.date-page .date-digits{max-width:232px}.date-page .digit-slot .scratch-value{font-size:20px}}

.hosts-page .family-hosts{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:2px}.hosts-page .family-hosts .family-name{font-size:clamp(27px,7.3vw,33px)}.hosts-page .host-and{width:20px}.hosts-page .host-and::before,.hosts-page .host-and::after{left:2px;width:16px}
@media(max-width:360px){.hosts-page .family-hosts .family-name{font-size:27px}}

#invitation>.venue>.page-content{padding-inline:46px;padding-bottom:65px}.venue h2{font-size:35px;margin:0 0 14px}.venue-art{display:block;width:100%;height:auto;max-height:30svh;object-fit:contain;margin:0 auto 16px}.venue-hotel{font:30px/1.5 'Aref Ruqaa',Amiri,serif;margin:0 0 6px}.venue-meeting{font:24px/1.6 Amiri,serif;margin:0 0 17px}.venue-maps{display:flex;justify-content:center;gap:34px;margin:0 auto 15px}.venue-maps a{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);text-decoration:none;font:13px Georgia,serif;min-width:70px;min-height:58px}.venue-maps svg{width:31px;height:34px}.venue .outline-button{margin-top:0;font-size:15px;padding:7px 15px}.venue .calendar-options{font-size:12px;margin-top:5px}html[lang=en] .venue-hotel,html[lang=en] .venue-meeting{font-family:'Cormorant Garamond',Georgia,serif}

.page-arrows[hidden]{display:none}.date-page .scroll-cue{display:none}.venue-art{mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 88%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 88%,transparent);-webkit-mask-composite:source-in}

.venue h2,.venue .venue-hotel,.venue .venue-meeting{font-family:Amiri,serif;font-weight:700}.venue h2{font-size:30px;line-height:1.5}.venue .venue-hotel{font-size:28px}.venue .venue-meeting{font-size:25px}html[lang=en] .venue h2,html[lang=en] .venue .venue-hotel,html[lang=en] .venue .venue-meeting{font-family:'Cormorant Garamond',Georgia,serif}
#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation-timing-function:cubic-bezier(.33,0,.67,1)}
@keyframes writing-down{0%{clip-path:inset(0 0 100% 0);opacity:0}10%{opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
#dateCountdown:not([hidden]),.calendar-menu:not([hidden]){animation:save-date-appear .9s cubic-bezier(.22,1,.36,1) both}
@media(max-width:360px){.venue h2{font-size:27px}}@media(prefers-reduced-motion:reduce){#dateCountdown:not([hidden]),.calendar-menu:not([hidden]){animation:none}}

.venue-hall{font:700 24px/1.5 Amiri,serif;margin:0 0 8px}.venue .venue-hotel{margin-bottom:2px}html[lang=en] .venue-hall{font-family:'Cormorant Garamond',Georgia,serif}
.date-page #dateCountdown[hidden]{display:grid!important;visibility:hidden}.date-page .date-countdown{min-height:64px;margin-top:20px;padding-top:12px;border-top:1px solid #bdaaa760;align-items:center}.date-page .date-countdown>div{min-width:0}.date-page .date-countdown b{font-family:Amiri,serif;font-size:24px;color:var(--ink)}.date-page .date-countdown span{font-size:15px}.date-page.is-complete .date-page-title{font-size:30px;margin-bottom:23px}.date-page.is-complete .date-label{font-size:25px;margin-bottom:12px}.date-page.is-complete .date-label-number{margin-top:22px}.date-page.is-complete .date-scratch-hint{display:block;visibility:hidden}.date-page .page-content{transition:transform .7s cubic-bezier(.22,1,.36,1)}
@media(max-width:360px){.date-page.is-complete .date-page-title{font-size:27px}.date-page.is-complete .date-label{font-size:23px}.date-page .date-countdown b{font-size:22px}}

#invitation>.venue>.page-content{padding-top:clamp(38px,7svh,65px);padding-bottom:24px}.venue h2{margin-bottom:20px}.venue-art{margin-bottom:20px}.venue-maps{margin-top:20px;margin-bottom:0;position:relative;z-index:5}.venue-maps a{pointer-events:auto;touch-action:manipulation;padding:7px;min-width:88px;min-height:64px}.venue-maps a:active{opacity:.65}

.venue-blessing{font:700 24px/1.6 Amiri,serif;margin:32px 0 0;color:var(--ink)}html[lang=en] .venue-blessing{font-family:'Cormorant Garamond',Georgia,serif}

.page-arrows{left:0;right:0;transform:none;width:100%;max-width:none;padding-inline:18px;bottom:max(14px,env(safe-area-inset-bottom));gap:0;justify-content:space-between}.page-arrows button{padding:5px 9px;font-size:17px}.page-arrows button span{font-size:15px}

.hosts-page .family-intro-love{font-size:clamp(29px,7.8vw,35px)}.hosts-page .family-intro-honour{font-size:clamp(27px,7.1vw,32px);font-weight:700;line-height:1.5}.hosts-page .family-intro{margin-bottom:18px}.venue-blessing{margin-top:12px}
#invitation .welcome .eyebrow,#invitation .welcome h2,#invitation .welcome .invitation-text{font-family:Amiri,serif;font-weight:700;color:var(--ink)}#invitation .welcome .eyebrow{font-size:28px;line-height:1.5;margin-bottom:18px}#invitation .welcome h2{font-size:30px;line-height:1.5;margin-bottom:22px}#invitation .welcome .invitation-text{font-size:24px;line-height:1.85;margin:0 auto}.welcome .intro-bow{width:110px;margin-bottom:20px}.welcome-monogram{font:48px/1.6 'Aref Ruqaa',Amiri,serif;color:var(--ink);margin:25px auto 0;letter-spacing:8px;text-align:center}.welcome-monogram::before,.welcome-monogram::after{content:'❧';display:inline-block;font:22px Amiri,serif;letter-spacing:0;margin:0 15px;color:var(--soft)}.welcome-monogram::after{transform:scaleX(-1)}html[lang=en] #invitation .welcome .eyebrow,html[lang=en] #invitation .welcome h2,html[lang=en] #invitation .welcome .invitation-text{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .welcome-monogram{font-family:'Great Vibes',cursive}
@media(max-width:360px){.hosts-page .family-intro-love{font-size:29px}.hosts-page .family-intro-honour{font-size:27px}#invitation .welcome .invitation-text{font-size:22px}.welcome-monogram{font-size:43px}}

#invitation>.welcome>.page-content{padding-inline:54px;padding-bottom:40px}.welcome-signoff{width:115px;margin:28px auto 0 0;text-align:center;direction:rtl}.welcome-signoff>p{font:400 20px/1.6 Amiri,serif;margin:0 0 6px;color:var(--soft)}.welcome-signoff img{display:block;width:110px;height:80px;object-fit:contain;margin:auto}.welcome-signoff>div{font:38px/1.5 'Great Vibes',cursive;color:var(--ink)}#invitation .welcome .invitation-text{font-size:23px;line-height:1.85}#invitation .welcome .eyebrow{margin-bottom:20px}#invitation .welcome h2{margin-bottom:22px}@media(max-width:360px){#invitation>.welcome>.page-content{padding-inline:46px}#invitation .welcome .invitation-text{font-size:21px}.welcome-signoff{margin-top:22px}}

/* Balanced welcome composition inside the lace frame. */
#invitation>.welcome>.page-content{max-width:440px;padding:16px 58px 38px;transform-origin:center center}#invitation .welcome .eyebrow{font-size:25px;line-height:1.6;margin:0 0 12px;color:var(--soft);font-weight:400}#invitation .welcome h2{font-size:30px;line-height:1.55;margin:0 0 24px}#invitation .welcome .invitation-text{font-size:22px;line-height:1.95;font-weight:400;max-width:310px;text-align:center;text-wrap:pretty}.welcome-signoff{width:100px;margin:26px auto 0 0}.welcome-signoff>p{font-size:18px;line-height:1.5;margin:0 0 4px;font-weight:400}.welcome-signoff img{width:92px;height:66px;object-fit:contain}.welcome-signoff>div{line-height:1}html[lang=en] #invitation .welcome .invitation-text{font-size:23px;line-height:1.65}@media(max-width:360px){#invitation>.welcome>.page-content{padding-inline:48px}#invitation .welcome .eyebrow{font-size:23px}#invitation .welcome h2{font-size:27px;margin-bottom:20px}#invitation .welcome .invitation-text{font-size:20px;line-height:1.9}.welcome-signoff{margin-top:22px}}@media(max-height:680px){#invitation>.welcome>.page-content{padding-top:8px;padding-bottom:24px}#invitation .welcome h2{margin-bottom:16px}.welcome-signoff{margin-top:18px}.welcome-signoff img{height:58px}}

:root{--ink:#6f2a3b;--soft:#6f2a3b}.welcome-signoff{margin-left:auto;margin-right:auto}.welcome-signoff>p{color:var(--ink)}#invitation [data-page] .page-content,#invitation [data-page] .page-content p,#invitation [data-page] .page-content h1,#invitation [data-page] .page-content h2,#invitation [data-page] .page-content span,#invitation [data-page] .page-content strong,#invitation [data-page] .page-content b{color:var(--ink)}.welcome-signoff img{width:100px;height:80px}.welcome-signoff{width:115px}

#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation-duration:5.5s;animation-delay:.3s;animation-timing-function:cubic-bezier(.33,0,.67,1)}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation:none}}

#invitation>.final-details>.page-content{padding:0 55px;max-width:430px}.final-details h2{font:700 30px/1.5 Amiri,serif;margin:0 0 12px}.final-hotel{font:22px/1.6 Amiri,serif;margin:0 0 22px}.final-map-links{display:grid;gap:12px;margin:0 auto 26px;max-width:265px}.final-map-links a{display:flex;align-items:center;gap:14px;padding:10px 17px;border:1px solid #6f2a3b40;border-radius:5px;color:var(--ink);text-decoration:none;background:#faf7f080;font:18px Georgia,serif;min-height:52px;direction:ltr}.final-map-links svg{width:25px;height:30px}.final-map-links a span:last-child{margin-left:auto}.final-reminder{font:700 25px/1.6 Amiri,serif;margin:0 0 12px}.final-details .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 auto 24px;direction:ltr}.final-details .countdown b{font:700 27px/1.4 Amiri,serif}.final-details .countdown span{font:15px/1.5 Amiri,serif}.final-details .outline-button{display:table;margin:0 auto 8px;font-size:20px;padding:9px 20px}.final-ics{display:block;font:14px/1.6 Amiri,serif;color:var(--ink);text-underline-offset:4px}html[lang=en] .final-details h2,html[lang=en] .final-hotel,html[lang=en] .final-reminder{font-family:'Cormorant Garamond',Georgia,serif}

.close-invitation{display:block;margin:24px auto 12px;border:1px solid #6f2a3b60;border-radius:4px;background:#faf7f080;padding:10px 28px;color:var(--ink);font:22px/1.5 Amiri,serif;min-height:48px}.final-map-links,.final-map-links a{position:relative;z-index:10;pointer-events:auto}.final-map-links a{touch-action:manipulation;cursor:pointer}.final-map-links svg,.final-map-links span{pointer-events:none}.final-map-links a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation-duration:7s;animation-delay:.3s;animation-timing-function:linear}.final-map-links a,#finalCalendar,#finalIcs{pointer-events:auto;touch-action:manipulation;position:relative;z-index:15}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation:none}}

.closing-film{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:540px;height:100dvh;object-fit:cover;z-index:110;opacity:0;pointer-events:none;transition:opacity .65s ease}.closing-film.ready{opacity:1}#invitation.closing-fade{opacity:0;transition:opacity .65s ease}

.date-page .date-digits{direction:ltr!important;flex-direction:row!important;unicode-bidi:isolate}.date-page .digit-slot,.date-page .date-separator{direction:ltr;unicode-bidi:isolate}.final-map-links a{isolation:isolate;pointer-events:auto;touch-action:manipulation;min-height:56px}

.date-digits [data-digit="0"]{order:9}.date-digits [data-digit="1"]{order:10}.date-digits [data-digit="2"]{order:6}.date-digits [data-digit="3"]{order:7}.date-digits [data-digit="4"]{order:1}.date-digits [data-digit="5"]{order:2}.date-digits [data-digit="6"]{order:3}.date-digits [data-digit="7"]{order:4}.date-digits .date-separator:nth-child(3){order:8}.date-digits .date-separator:nth-child(6){order:5}

#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation-duration:8s;animation-delay:.3s;animation-timing-function:linear}.welcome-signoff img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){#invitation>[data-page].is-active>.page-content,#invitation>.hosts-page.is-active>.page-content,#invitation>.date-page.is-active>.page-content{animation:none}}

.welcome-signoff img{width:118px;height:92px;object-fit:contain;filter:none;image-rendering:auto}.welcome-signoff{width:125px}.final-map-links a{cursor:pointer;-webkit-touch-callout:default}

.final-date{font:700 22px/1.7 Amiri,serif;margin:0 auto 19px;text-align:center}.final-map-links{margin-bottom:19px}html[lang=en] .final-date{font-family:'Cormorant Garamond',Georgia,serif}

.cover.closed-hold .open-caption,.cover.closed-hold .open-seal,.cover.closed-hold .plain-open{visibility:hidden;pointer-events:none}

.hosts-page .couple-artwork .name-art{width:100%;max-width:310px;height:auto;aspect-ratio:1810/320;mix-blend-mode:multiply}.hosts-page .couple-artwork{max-width:100%;padding-inline:0;aspect-ratio:auto;margin-top:24px;margin-bottom:10px}

#invitation .welcome .welcome-longing{font:400 23px/1.7 Amiri,serif;margin:22px 0 0;color:var(--ink)}.welcome .welcome-signoff{margin-top:16px}html[lang=en] #invitation .welcome .welcome-longing{font-family:'Cormorant Garamond',Georgia,serif}

.hosts-page .couple-artwork{width:100%;max-width:100%;padding:0;margin-top:27px;margin-bottom:12px;overflow:visible}.hosts-page .couple-artwork .name-art{display:block;width:100%;max-width:none;height:auto;aspect-ratio:1810/320;filter:drop-shadow(.35px 0 0 #6f2a3b) drop-shadow(-.35px 0 0 #6f2a3b);mix-blend-mode:normal}

.hosts-page .couple-children.couple-artwork{width:100%;max-width:100%;height:auto;aspect-ratio:1810/320;padding:0;margin:27px auto 12px;overflow:visible}

.date-page .full-date-slot{position:relative;width:100%;max-width:258px;height:59px;margin:0 auto;border:1px solid #bdaaa780;border-radius:5px;overflow:hidden;background:transparent}.date-page .full-date-slot .scratch-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(22px,6vw,28px)/1.3 Amiri,serif;white-space:nowrap;color:var(--ink)}.date-page .weekday-visible{position:relative;margin-inline:auto;background:transparent;border:0}.date-page .weekday-visible .scratch-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.full-date-slot canvas{transition:opacity 1s ease}

html[lang=en] .hosts-page .family-intro,html[lang=en] .hosts-page .family-name,html[lang=en] .hosts-page .family-invitation{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .hosts-page .family-intro-love{font-size:28px;white-space:normal;line-height:1.25}html[lang=en] .hosts-page .family-intro-honour{font-size:23px;line-height:1.4;margin-top:8px}html[lang=en] .hosts-page .family-hosts .family-name{font-size:25px;line-height:1.2;overflow-wrap:normal}html[lang=en] .hosts-page .host-title{font-size:18px;margin-bottom:5px}html[lang=en] .hosts-page .host-and{font-family:'Cormorant Garamond',Georgia,serif;margin-top:15px}html[lang=en] .hosts-page .family-invitation{font-size:23px;line-height:1.45;margin-top:25px}html[lang=en] .hosts-page .couple-children.english-couple{display:flex;align-items:center;justify-content:center;gap:13px;aspect-ratio:auto;margin-top:27px;font:42px/1.5 'Great Vibes',cursive}html[lang=en] .english-couple em{font:25px 'Cormorant Garamond',Georgia,serif}html[lang=en] .intro-page .basmala{font:21px/1.45 'Cormorant Garamond',Georgia,serif;margin-bottom:25px}html[lang=en] .intro-page .quran-verse{font:23px/1.55 'Cormorant Garamond',Georgia,serif}html[lang=en] .intro-page .quran-reference{font:15px/1.5 'Cormorant Garamond',Georgia,serif}html[lang=en] .date-page .date-page-title,html[lang=en] .date-page .date-label,html[lang=en] .date-page .full-date-slot .scratch-value{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .date-page .full-date-slot .scratch-value{font-size:24px}html[lang=en] .date-countdown b,html[lang=en] .date-countdown span{font-family:'Cormorant Garamond',Georgia,serif}html[lang=en] .english-initials{display:block;font:46px/1.4 'Great Vibes',cursive;color:var(--ink)}
@media(max-width:360px){html[lang=en] .hosts-page .couple-children.english-couple{font-size:36px;gap:9px}html[lang=en] .hosts-page .family-hosts .family-name{font-size:23px}html[lang=en] .intro-page .quran-verse{font-size:21px}}

html[lang=en] #invitation .hosts-page .family-intro-love,html[lang=en] #invitation .venue h2,html[lang=en] #invitation .date-page .date-page-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;line-height:1.4;font-weight:500}html[lang=en] #invitation .hosts-page .family-intro-honour{font-size:21px;font-weight:400;color:var(--ink)}html[lang=en] #invitation .hosts-page .family-name{font-size:25px;font-weight:500;line-height:1.25}html[lang=en] #invitation .hosts-page .family-invitation{font-size:23px;font-weight:400;line-height:1.65}html[lang=en] #invitation .venue-hotel{font-size:29px;font-weight:500;line-height:1.4}html[lang=en] #invitation .venue-hall,html[lang=en] #invitation .venue-meeting{font:400 24px/1.55 'Cormorant Garamond',Georgia,serif}html[lang=en] #invitation .venue-blessing{font:400 21px/1.55 'Cormorant Garamond',Georgia,serif}html[lang=en] #invitation .date-label{font:400 24px/1.5 'Cormorant Garamond',Georgia,serif}html[lang=en] .welcome-signoff>p{font:400 20px/1.5 'Cormorant Garamond',Georgia,serif}html[lang=en] .welcome-signoff img{width:118px;height:92px;object-fit:contain}html[lang=en] #invitation .welcome .welcome-longing{font-size:22px;line-height:1.5}html[lang=en] .intro-page .quran-opening{max-width:310px;margin:auto}

html[lang=en] #invitation>[data-page]>.page-content{max-width:440px;padding-inline:54px}html[lang=en] #invitation .intro-page .basmala{font:400 22px/1.55 'Cormorant Garamond',Georgia,serif;margin:0 0 23px}html[lang=en] #invitation .intro-page .quran-verse{font:400 23px/1.65 'Cormorant Garamond',Georgia,serif;text-align:center;text-wrap:pretty}html[lang=en] #invitation .intro-page .quran-reference{font:400 13px/1.5 'Cormorant Garamond',Georgia,serif;margin-top:18px}html[lang=en] #invitation .page-content{overflow-wrap:normal;word-break:normal}html[lang=en] #invitation .family-intro-love,html[lang=en] #invitation .family-intro-honour{white-space:normal}html[lang=en] #invitation .english-couple{flex-wrap:wrap}html[lang=en] #invitation .page-content>p{max-width:100%}@media(max-width:360px){html[lang=en] #invitation>[data-page]>.page-content{padding-inline:48px}html[lang=en] #invitation .intro-page .quran-verse{font-size:21px}html[lang=en] #invitation .intro-page .basmala{font-size:20px}}

html[lang=en] #invitation .intro-page .quran-verse{font-size:25px;line-height:1.55}html[lang=en] #invitation .intro-page .basmala{font-size:23px;line-height:1.45;margin-bottom:20px}html[lang=ar] #invitation .intro-page .quran-verse{font-size:clamp(28px,7.7vw,35px);line-height:1.9}@media(max-width:360px){html[lang=en] #invitation .intro-page .quran-verse{font-size:23px}html[lang=en] #invitation .intro-page .basmala{font-size:21px}}

/* Stable optical centering across both invitation editions. */
#invitation>[data-page]{align-items:center;justify-content:center}#invitation>[data-page]>.page-content,html[lang=en] #invitation>[data-page]>.page-content{position:relative;top:auto;left:auto;right:auto;margin:0 auto;padding-top:0;padding-bottom:0;transform-origin:center center;transition:none;text-align:center}#invitation .intro-page .quran-opening{width:100%;max-width:none;margin:0 auto;text-align:center}html[lang=en] #invitation .intro-page .quran-verse{font-size:28px;line-height:1.36;font-weight:400;margin:0;text-align:center}html[lang=en] #invitation .intro-page .basmala{font-size:21px;line-height:1.35;margin:0 auto 20px}html[lang=en] #invitation .intro-page .quran-reference{font-size:12px;line-height:1.4;margin:17px auto 0}html[lang=ar] #invitation .intro-page .quran-verse{font-size:clamp(29px,7.9vw,36px);line-height:1.7}#invitation .intro-page .quran-reference{font-style:normal}#invitation .page-content p,#invitation .page-content h2{font-style:normal}.welcome-signoff{margin-left:auto;margin-right:auto}@keyframes save-date-appear{from{opacity:0}to{opacity:1}}
@media(max-width:360px){html[lang=en] #invitation .intro-page .quran-verse{font-size:26px;line-height:1.35}html[lang=en] #invitation .intro-page .basmala{font-size:20px}}

#invitation .intro-page .basmala{display:block;position:static;width:100%;max-width:100%;white-space:normal;text-align:center;margin-left:auto;margin-right:auto}html[lang=en] #invitation .intro-page .basmala{font-size:20px;line-height:1.35;margin-bottom:18px}html[lang=en] #invitation .intro-page .quran-verse{font-size:30px;line-height:1.3}html[lang=en] #invitation .intro-page .quran-reference{font-size:12px;line-height:1.35;margin-top:14px}.date-page .full-date-slot.is-revealed{border-color:transparent;box-shadow:none;background:transparent}.date-page .date-countdown{border-top:0;padding-top:0}@media(max-width:360px){html[lang=en] #invitation .intro-page .quran-verse{font-size:28px}html[lang=en] #invitation .intro-page .basmala{font-size:19px}}

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/fonts/playfair-display.woff') format('woff')}
html[lang=en] #invitation .page-content p,html[lang=en] #invitation .page-content h2,html[lang=en] #invitation .family-name,html[lang=en] #invitation .family-intro-love,html[lang=en] #invitation .family-intro-honour,html[lang=en] #invitation .family-invitation,html[lang=en] #invitation .host-title,html[lang=en] #invitation .date-label,html[lang=en] #invitation .scratch-value,html[lang=en] #invitation .date-countdown{font-family:'Playfair Display',Georgia,serif!important;font-weight:400;letter-spacing:.1px}html[lang=en] #invitation .welcome .eyebrow{font-size:22px;line-height:1.5}html[lang=en] #invitation .welcome h2{font-size:28px;line-height:1.4}html[lang=en] #invitation .welcome .invitation-text{font-size:21px;line-height:1.65}html[lang=en] #invitation .intro-page .quran-verse{font-size:27px;line-height:1.42}html[lang=en] #invitation .intro-page .basmala{font-size:18px;line-height:1.5}html[lang=en] #invitation .hosts-page .family-hosts .family-name{font-size:22px;line-height:1.4}html[lang=en] #invitation .family-invitation{font-size:20px;line-height:1.6}html[lang=en] #invitation .date-countdown b,html[lang=en] #invitation .date-countdown span{font-family:'Playfair Display',Georgia,serif!important}.date-page .full-date-slot,.date-page .full-date-slot.is-next,.date-page .full-date-slot.is-revealed{border:0!important;box-shadow:none!important;outline:0;background:transparent}.date-page .full-date-slot canvas{border:0;box-shadow:none}.date-page .full-date-slot:focus-within{outline:0}

#invitation .date-countdown{box-sizing:border-box;max-width:100%;width:100%;gap:5px;padding-inline:0;margin-inline:auto}#invitation .date-countdown>div{min-width:0;max-width:100%}#invitation .date-countdown b{display:block;max-width:100%;font-size:clamp(19px,5.7vw,24px);line-height:1.4}#invitation .date-countdown span{display:block;max-width:100%;font-size:clamp(11px,3.2vw,14px);white-space:normal;line-height:1.5}html[lang=en] #invitation .hosts-page .family-hosts .family-name{overflow-wrap:normal;word-break:normal;white-space:normal}html[lang=en] #invitation .english-couple>span{font-variant:normal;text-transform:none}html[lang=en] #invitation .page-content{max-width:430px}#invitation .page-content .family-hosts{max-width:100%;margin-inline:auto}html[lang=en] #invitation .date-page>.page-content{padding-inline:56px}.date-page .full-date-slot{max-width:100%}

html[lang=en] #invitation .hosts-page .family-intro-love,html[lang=en] #invitation .hosts-page .family-intro-honour,html[lang=en] #invitation .hosts-page .family-name,html[lang=en] #invitation .hosts-page .host-title,html[lang=en] #invitation .hosts-page .family-invitation{font-family:'Cormorant Garamond',Georgia,serif!important}html[lang=en] #invitation .hosts-page .host-title{display:block;font-size:19px;line-height:1.3;margin:0 auto 7px}html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:36px;font-weight:500;line-height:1.4;gap:10px;flex-wrap:nowrap}html[lang=en] #invitation .english-couple>span{font-family:inherit;font-style:normal;text-transform:none}html[lang=en] #invitation .english-couple em{font:italic 25px 'Cormorant Garamond',Georgia,serif}.date-page .full-date-slot{width:min(100%,210px);max-width:210px;height:46px}.date-page .full-date-slot .scratch-value{font-size:23px!important;line-height:1.25}#invitation .date-page .date-countdown{width:min(100%,210px);max-width:210px;gap:3px;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px auto 0}#invitation .date-page .date-countdown b{font-size:20px;line-height:1.35}#invitation .date-page .date-countdown span{font-size:10px;line-height:1.4;letter-spacing:0}html[lang=en] #invitation .date-page .date-countdown b,html[lang=en] #invitation .date-page .date-countdown span{font-family:'Cormorant Garamond',Georgia,serif!important}#invitation .date-page .page-content{padding-inline:60px!important}@media(max-width:360px){#invitation .date-page .page-content{padding-inline:54px!important}.date-page .full-date-slot,#invitation .date-page .date-countdown{max-width:195px}.date-page .full-date-slot .scratch-value{font-size:21px!important}html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-size:31px;gap:7px}}

@font-face{font-family:'Pinyon Script';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/pinyon-script.woff') format('woff')}html[lang=en] #invitation .hosts-page .family-hosts .family-name{font-family:'Pinyon Script',cursive!important;font-size:30px;font-weight:400;line-height:1.45;letter-spacing:0;font-style:normal}html[lang=en] #invitation .hosts-page .host-title{font-family:'Pinyon Script',cursive!important;font-size:25px;line-height:1.3;margin-bottom:7px}html[lang=en] #invitation .hosts-page .host-and{font-family:'Pinyon Script',cursive!important;font-size:30px}html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-family:'Pinyon Script',cursive!important;font-size:43px;font-weight:400;line-height:1.4;gap:12px;letter-spacing:0}html[lang=en] #invitation .hosts-page .english-couple em{font-family:'Pinyon Script',cursive!important;font-style:normal;font-size:30px}html[lang=en] #invitation .hosts-page .english-couple>span{font-family:'Pinyon Script',cursive!important}@media(max-width:360px){html[lang=en] #invitation .hosts-page .family-hosts .family-name{font-size:27px}html[lang=en] #invitation .hosts-page .host-title{font-size:23px}html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-size:37px;gap:8px}}

html[lang=en] #invitation .hosts-page .family-hosts{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:5px;width:100%;max-width:100%;align-items:start;margin-inline:auto}html[lang=en] #invitation .hosts-page .host-column{min-width:0;width:100%}html[lang=en] #invitation .hosts-page .family-hosts .family-name{display:grid;grid-template-rows:26px 51px 41px;gap:3px;align-items:center;margin:0;line-height:1.3;width:100%;font-size:27px}html[lang=en] #invitation .hosts-page .host-title{display:block;font:400 19px/26px 'Pinyon Script',cursive!important;margin:0;align-self:center}html[lang=en] #invitation .hosts-page .host-first{display:block;font:400 34px/1.4 'Pinyon Script',cursive;white-space:nowrap}html[lang=en] #invitation .hosts-page .host-surname{display:block;font:400 27px/1.4 'Pinyon Script',cursive;white-space:nowrap}html[lang=en] #invitation .hosts-page .host-and{align-self:center;margin:0;width:20px;font-size:26px}@media(max-width:360px){html[lang=en] #invitation .hosts-page .family-hosts{gap:3px;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}html[lang=en] #invitation .hosts-page .host-first{font-size:30px}html[lang=en] #invitation .hosts-page .host-surname{font-size:24px}html[lang=en] #invitation .hosts-page .host-title{font-size:18px!important}}

html[lang=en] #invitation .hosts-page .family-hosts .family-name{font-family:'Playfair Display',Georgia,serif!important;grid-template-rows:23px 43px 36px;gap:4px;font-weight:500}html[lang=en] #invitation .hosts-page .family-hosts .host-title{font:400 16px/23px 'Playfair Display',Georgia,serif!important;letter-spacing:.3px}html[lang=en] #invitation .hosts-page .family-hosts .host-first{font:500 26px/1.5 'Playfair Display',Georgia,serif!important;letter-spacing:0}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font:500 20px/1.5 'Playfair Display',Georgia,serif!important;letter-spacing:0}html[lang=en] #invitation .hosts-page .family-hosts .host-and{font:400 26px/1.4 'Cormorant Garamond',Georgia,serif!important}@media(max-width:360px){html[lang=en] #invitation .hosts-page .family-hosts .host-first{font-size:23px!important}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font-size:18px!important}}

html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-size:36px;gap:10px}html[lang=en] #invitation .hosts-page .english-couple em{font-size:26px}html[lang=en] #invitation .hosts-page .family-hosts .family-name{font-family:'Pinyon Script',cursive!important;grid-template-rows:24px 45px 39px;gap:4px}html[lang=en] #invitation .hosts-page .family-hosts .host-title{font:400 19px/24px 'Pinyon Script',cursive!important;letter-spacing:0}html[lang=en] #invitation .hosts-page .family-hosts .host-first{font:400 33px/1.35 'Pinyon Script',cursive!important;letter-spacing:0;-webkit-text-stroke:.15px currentColor}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font:400 28px/1.35 'Pinyon Script',cursive!important;letter-spacing:0;-webkit-text-stroke:.15px currentColor}html[lang=en] #invitation .hosts-page .family-hosts .host-and{font-family:'Pinyon Script',cursive!important}@media(max-width:360px){html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-size:32px;gap:8px}html[lang=en] #invitation .hosts-page .family-hosts .host-first{font-size:30px!important}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font-size:25px!important}}

html[lang=en] #invitation .hosts-page .family-hosts{width:92%;max-width:270px;margin-inline:auto;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:5px}html[lang=en] #invitation .hosts-page .family-hosts .family-name{grid-template-rows:23px 39px 35px;gap:3px}html[lang=en] #invitation .hosts-page .family-hosts .host-title{font-size:17px!important}html[lang=en] #invitation .hosts-page .family-hosts .host-first{font-size:28px!important;line-height:1.35}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font-size:23px!important;line-height:1.35}html[lang=en] #invitation .hosts-page .couple-children.english-couple{width:90%;max-width:260px;margin-inline:auto;font-size:31px;gap:8px}html[lang=en] #invitation .hosts-page .english-couple em{font-size:23px}@media(max-width:360px){html[lang=en] #invitation .hosts-page .family-hosts .host-first{font-size:25px!important}html[lang=en] #invitation .hosts-page .family-hosts .host-surname{font-size:21px!important}html[lang=en] #invitation .hosts-page .couple-children.english-couple{font-size:28px;gap:7px}}

html[lang=en] .venue-blessing{display:none}

html[lang=ar] #invitation .hosts-page .host-title{display:block;margin:0 auto 5px;font-size:19px;line-height:1.4;text-align:center}

html[lang=en] #invitation .hosts-page .english-couple .child-name{position:relative;display:inline-block}html[lang=en] #invitation .hosts-page .english-couple .child-name::before{content:attr(data-relation);position:absolute;left:50%;bottom:calc(100% - 2px);transform:translateX(-50%);white-space:nowrap;font:400 13px/1.2 'Cormorant Garamond',Georgia,serif;color:var(--ink);letter-spacing:.2px;pointer-events:none}

/* Location page shares the existing lace background and invitation typography. */
#invitation .address-page .page-content{padding-inline:58px}
.address-page h2{font:700 30px/1.5 Amiri,serif;margin:0 0 24px}
.address-page .address-hotel{font:700 27px/1.6 Amiri,serif;margin:0}
.address-page .address-hall{font:700 24px/1.6 Amiri,serif;margin:5px 0 22px}
.address-page .address-date{font:700 22px/1.7 Amiri,serif;margin:0 0 23px}
.address-page .final-time{display:inline-block;margin-top:5px}
.address-map-links{display:flex;justify-content:center;gap:28px;margin:0 auto 22px}
.address-map-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:80px;min-height:76px;padding:4px;color:var(--ink);text-decoration:none;font:14px/1.5 Georgia,serif;touch-action:manipulation}
.address-map-links img{display:block;width:36px;height:36px;pointer-events:none}
.address-map-links span{pointer-events:none}
.address-calendar{position:relative;height:156px;min-height:156px;font:20px/1.5 Amiri,serif;color:var(--ink);max-width:100%;margin:auto}
.address-calendar summary{list-style:none;cursor:pointer;border-bottom:1px solid #6f2a3b60;display:inline-block;min-height:44px;padding:7px 5px;touch-action:manipulation}
.address-calendar summary::-webkit-details-marker{display:none}
.calendar-choices{position:absolute;top:51px;left:0;right:0;display:flex;flex-direction:column;align-items:center;margin:0;gap:4px}
.calendar-choices a{font:16px/1.5 Amiri,serif;color:var(--ink);min-height:38px;padding:7px 4px;touch-action:manipulation}
html[lang=en] #invitation .address-page h2{font-size:28px;line-height:1.4}
html[lang=en] #invitation .address-page .address-hotel{font-size:23px;line-height:1.5}
html[lang=en] #invitation .address-page .address-hall{font-size:20px;line-height:1.5}
html[lang=en] #invitation .address-page .address-date{font-size:18px;line-height:1.7}
html[lang=en] .address-calendar,html[lang=en] .calendar-choices a{font-family:'Playfair Display',Georgia,serif;font-size:15px}
@media(max-width:360px){.address-page .address-hotel{font-size:24px}.address-page .address-date{font-size:20px}.address-map-links{gap:20px}}
/* Keep Safari native panning and selection out of the scratch surface. */
.date-page .full-date-slot,.date-page .scratch-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}

/* Reserve the center for the icon-only sound control; let corner labels wrap. */
.music-toggle{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;gap:0}
.music-toggle .music-caption{display:none}
.music-toggle>span:first-child{display:flex;align-items:center;justify-content:center}
.music-toggle.is-muted::after{display:block;width:27px;height:1.5px;pointer-events:none}
.page-arrows{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:end;pointer-events:none}
.page-arrows button{pointer-events:auto;min-width:0;max-width:100%;gap:5px;white-space:normal;line-height:1.3}
.page-arrows button:first-child{grid-column:1;justify-self:start}
.page-arrows button:last-child{grid-column:3;justify-self:end}
.page-arrows button span{min-width:0;white-space:normal;line-height:1.3}
html[lang=en] .page-arrows button,html[lang=en] .page-arrows button span{font-size:14px}

/* Keep the English welcome heading comfortably inside the lace frame. */
html[lang=en] #invitation .welcome .eyebrow{display:block;width:100%;max-width:100%;margin-inline:auto;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center;font-size:22px;line-height:1.5;letter-spacing:0}
@media(max-width:360px){html[lang=en] #invitation .welcome .eyebrow{font-size:20px}}

/* Approved Tajawal for ordinary Arabic copy; names and Quran retain their own styling. */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/tajawal-regular.woff') format('woff')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/tajawal-medium.woff') format('woff')}
html[lang=ar] #invitation .family-intro,
html[lang=ar] #invitation .family-intro-love,
html[lang=ar] #invitation .family-intro-honour,
html[lang=ar] #invitation .family-invitation,
html[lang=ar] #invitation .date-page h2,
html[lang=ar] #invitation .date-page p,
html[lang=ar] #invitation .date-page .scratch-value,
html[lang=ar] #invitation .date-countdown b,
html[lang=ar] #invitation .date-countdown span,
html[lang=ar] #invitation .venue h2,
html[lang=ar] #invitation .venue p,
html[lang=ar] #invitation .welcome .eyebrow,
html[lang=ar] #invitation .welcome h2,
html[lang=ar] #invitation .welcome .invitation-text,
html[lang=ar] #invitation .welcome-longing,
html[lang=ar] #invitation .welcome-signoff>p,
html[lang=ar] #invitation .address-page h2,
html[lang=ar] #invitation .address-page p,
html[lang=ar] #invitation .address-page .final-time,
html[lang=ar] #invitation .address-calendar,
html[lang=ar] #invitation .calendar-choices a,
html[lang=ar] #invitation .page-arrows button,
html[lang=ar] .open-caption{font-family:'Tajawal',sans-serif!important;font-weight:400}
html[lang=ar] #invitation .family-intro-love,
html[lang=ar] #invitation .family-intro-honour,
html[lang=ar] #invitation .date-page h2,
html[lang=ar] #invitation .date-label,
html[lang=ar] #invitation .welcome .eyebrow,
html[lang=ar] #invitation .welcome h2,
html[lang=ar] #invitation .venue h2,
html[lang=ar] #invitation .address-page h2{font-weight:500}

@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/tajawal-bold.woff) format("woff")}
html[lang=ar] #invitation .date-page .weekday-visible .scratch-value,html[lang=ar] #invitation .date-page .full-date-slot .scratch-value{font-weight:700}

/* RSVP uses the same frame and fonts, and waits for the guest. */
.rsvp-page h2{font-size:28px;line-height:1.5;margin:0 0 12px}
.rsvp-page .rsvp-intro{font-size:21px;line-height:1.6;margin:0 0 12px}
.rsvp-page .rsvp-explanation{font-size:16px;line-height:1.7;margin:0 0 22px}
.rsvp-page form{text-align:start;width:100%}
.rsvp-page label{display:block;font-size:16px;line-height:1.5;margin:0 0 6px}
.rsvp-page input{display:block;width:100%;min-width:0;height:46px;border:1px solid #6f2a3b55;border-radius:4px;background:#faf7f0df;color:var(--ink);font:inherit;font-size:19px;line-height:1.5;padding:8px 10px;margin:0 0 17px}
.rsvp-page button{width:100%;min-height:46px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);font:inherit;font-size:19px;padding:9px;touch-action:manipulation}
.rsvp-page button:disabled{opacity:.6;cursor:wait}
.rsvp-page .rsvp-status{min-height:66px;font-size:15px;line-height:1.6;margin:14px 0 0;text-align:center}
.rsvp-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html[lang=ar] #invitation .rsvp-page,html[lang=ar] #invitation .rsvp-page h2,html[lang=ar] #invitation .rsvp-page p{font-family:'Tajawal',sans-serif}
html[lang=en] #invitation .rsvp-page,html[lang=en] #invitation .rsvp-page input,html[lang=en] #invitation .rsvp-page button{font-family:'Playfair Display',Georgia,serif}
html[lang=en] #invitation .rsvp-page h2{font-size:27px}
html[lang=en] #invitation .rsvp-page .rsvp-intro{font-size:18px}
html[lang=en] #invitation .rsvp-page .rsvp-explanation{font-size:14px}
html[lang=en] #invitation .rsvp-page label{font-size:14px}
/* Raise the countdown within its reserved space and strengthen its Arabic text. */
#invitation .date-page .date-countdown{position:relative;top:-14px}
html[lang=ar] #invitation .date-page .date-countdown b,
html[lang=ar] #invitation .date-page .date-countdown span{font-family:'Tajawal',sans-serif!important;font-weight:700}
html[lang=ar] #invitation .hosts-page .family-hosts .family-name,
html[lang=ar] #invitation .hosts-page .family-hosts .host-title{font-family:'Tajawal',sans-serif!important;font-weight:500}

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cormorant-bold.woff') format('woff')}
html[lang=en] #invitation .date-page .weekday-visible .scratch-value,
html[lang=en] #invitation .date-page .weekday-visible .scratch-value span,
html[lang=en] #invitation .date-page .full-date-slot .scratch-value,
html[lang=en] #invitation .date-page .date-countdown b,
html[lang=en] #invitation .date-page .date-countdown span{font-weight:700!important}
html[lang=en] #invitation .date-page .date-countdown{top:-24px}

/* Individual/family choices stay within the same RSVP form width. */
#invitation .rsvp-page #rsvpForm .rsvp-type{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0;width:100%;border:0;padding:0;margin:0 0 16px}
#invitation .rsvp-page #rsvpForm .rsvp-type label{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #6f2a3b55;border-radius:4px;min-height:44px;margin:0;padding:7px 4px;font-size:16px;line-height:1.4;cursor:pointer}
#invitation .rsvp-page #rsvpForm .rsvp-type input{appearance:auto;-webkit-appearance:radio;width:15px;height:15px;min-height:0;flex:0 0 15px;padding:0;margin:0;accent-color:var(--ink);border:0}
#invitation .rsvp-page #rsvpForm .rsvp-type label:has(input:checked){background:#6f2a3b12;border-color:var(--ink)}
#invitation .rsvp-page #rsvpForm .rsvp-type:disabled{opacity:.7}
html[lang=en] #invitation .rsvp-page #rsvpForm .rsvp-type label{font-size:13px}
/* Keep RSVP controls inset from the inner lace frame in both languages. */
#invitation>.rsvp-page>.page-content{max-width:390px;padding-inline:60px;min-width:0}
#invitation .rsvp-page #rsvpForm{box-sizing:border-box;width:100%;max-width:220px;min-width:0;margin-inline:auto}
#invitation .rsvp-page #rsvpForm input,#invitation .rsvp-page #rsvpForm button{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin-inline:0}
#invitation .rsvp-page #rsvpForm input{appearance:none;-webkit-appearance:none}
#invitation .rsvp-page #rsvpForm label{max-width:100%;white-space:normal;overflow-wrap:break-word}
#invitation .rsvp-page .rsvp-intro,#invitation .rsvp-page .rsvp-explanation{max-width:250px;margin-inline:auto}
@media(max-width:360px){#invitation>.rsvp-page>.page-content{padding-inline:54px}#invitation .rsvp-page #rsvpForm{max-width:210px}}

/* Improve RSVP legibility without widening its framed form. */
#invitation .rsvp-page h2{font-weight:700!important;line-height:1.4;margin-bottom:10px}
#invitation .rsvp-page .rsvp-intro{font-weight:500!important;line-height:1.5;margin-bottom:10px}
#invitation .rsvp-page .rsvp-explanation{font-size:17px;line-height:1.55;font-weight:500!important;margin-bottom:16px}
#invitation .rsvp-page #rsvpForm label{font-size:17px;line-height:1.45;font-weight:500;margin-bottom:5px}
#invitation .rsvp-page #rsvpForm .rsvp-type{margin-bottom:13px;gap:8px}
#invitation .rsvp-page #rsvpForm .rsvp-type label{font-size:18px;font-weight:500;margin:0}
#invitation .rsvp-page #rsvpForm input:not([type=radio]){height:44px;font-size:20px;font-weight:500;margin-bottom:13px;border-color:#6f2a3b80}
#invitation .rsvp-page #rsvpForm button{font-weight:500;font-size:19px}
#invitation .rsvp-page .rsvp-status{font-size:16px;font-weight:500;line-height:1.5;min-height:56px;margin-top:10px}
html[lang=en] #invitation .rsvp-page .rsvp-explanation{font-size:15px}
html[lang=en] #invitation .rsvp-page #rsvpForm label{font-size:16px}
html[lang=en] #invitation .rsvp-page #rsvpForm .rsvp-type label{font-size:15px}