/* TASHREEF interior v4.0 — the opening scene lives in motion.css/motion.js (rev 3.4) and is untouched. */
@font-face{font-family:Amiri;src:url('assets/fonts/Amiri-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('assets/fonts/CormorantGaramond.ttf') format('truetype');font-weight:300 700;font-display:swap}

:root{
  --burgundy:#461c2a;--burgundy-2:#63283b;--ivory:#fcfaf6;--paper:#f7f2ea;--canvas:#efe8de;
  --gold:#ddab52;--gold-ink:#94703a;--gold-line:#cdb68c;--line:#e3d8c7;--muted:#7a6862;
  --display:Amiri,serif;--ui:Plex,system-ui,sans-serif;--latin:Cormorant,Georgia,serif;
  --radius:3px;--shadow:0 1px 0 #fff inset,0 24px 60px -24px #3a141f40,0 2px 6px #3a141f12;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui);color:var(--burgundy);background:var(--canvas);min-height:100svh;overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 50% at 50% 0%,#f8f3ec 0%,transparent 70%)}
button,input,output{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}
svg{width:1em;height:1em;flex:none}
.en{font-family:var(--latin);direction:ltr;unicode-bidi:isolate}
.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}
[hidden]{display:none!important}

/* Top bar */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(10px,env(safe-area-inset-top)) clamp(16px,4vw,40px) 10px;background:#efe8dee6;backdrop-filter:blur(10px);border-bottom:1px solid #e3d8c780}
.wordmark{font:26px/1 var(--display);color:var(--burgundy);text-decoration:none;display:flex;gap:10px;align-items:baseline;min-height:44px;align-items:center}
.wordmark span{font:500 10px var(--latin);letter-spacing:3px;color:var(--gold-ink)}
.topbar-end{display:flex;gap:8px;align-items:center}
.sample-pill{font:11px/1 var(--ui);color:var(--burgundy-2);border:1px solid var(--gold-line);background:#fcfaf6b3;border-radius:999px;padding:7px 11px;white-space:nowrap}
.language{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:0;background:transparent;border-radius:999px;font-size:13px;transition:background .2s}
.language svg{font-size:17px;color:var(--gold-ink)}.language:hover{background:#e6dccd}

/* Layout */
.invitation-layout{padding:clamp(20px,4vw,56px) clamp(14px,4vw,40px) 0}
.reading-column{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;min-width:0}
.info-column{display:grid;gap:20px;align-content:start;min-width:0}
@media(min-width:900px){
  .reading-column{grid-template-columns:minmax(0,520px) minmax(0,440px);justify-content:center;gap:56px;align-items:start}
  .replay-wrap{grid-column:1/-1}
}

/* Card */
.paper{position:relative;isolation:isolate;background:var(--ivory);border:1px solid #e9dfd0;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:520px;width:100%;margin:0 auto}
.paper:before{content:'';position:absolute;inset:0;z-index:-2;background:var(--ivory) url('assets/03-card-approved.png') center/260% auto no-repeat;opacity:.55}
.paper:after{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 18% 0%,#fff9 0%,transparent 55%)}
.arch{position:absolute;inset:clamp(14px,4%,22px);z-index:-1;pointer-events:none}
.arch svg{width:100%;height:100%}
.card-content{padding:clamp(70px,19%,104px) clamp(26px,9%,52px) clamp(34px,8%,48px);text-align:center}
.crest{font-size:22px;color:var(--gold-ink);display:block;margin:0 auto 18px}
.verse{font:clamp(19px,5.2vw,23px)/2 var(--display);margin:0 auto;max-width:21em;text-wrap:balance}
.verse-ref{font:11px/1.6 var(--ui);color:var(--muted);margin:4px 0 26px}
.hosts p{margin:0;font:14px/2 var(--ui)}
.hosts .en{font-family:var(--latin);font-size:18px;line-height:1.35;color:var(--muted);margin-top:6px}
.names{margin:26px 0 8px;outline:none}
.names-ar{font:400 clamp(42px,12.5vw,62px)/1.45 var(--display);margin:0;display:flex;justify-content:center;align-items:baseline;gap:.22em;flex-wrap:wrap}
.and-ar{font-size:.55em;color:var(--gold-ink)}
.names-en{font:400 clamp(25px,7vw,32px)/1.2 var(--latin);color:#76594a;margin:2px 0 0;letter-spacing:.3px}
.names-en span{font-style:italic;color:var(--gold-ink);padding:0 .15em}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 22px;color:var(--gold-ink)}
.ornament i{height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.ornament i:last-child{transform:scaleX(-1)}.ornament svg{font-size:14px}
.card-facts{display:grid;grid-template-columns:1fr auto 1fr;margin:0;align-items:center}
.card-facts>div{padding:4px clamp(6px,3vw,16px)}
.card-facts>div+div{border-inline-start:1px solid var(--line)}
.card-facts dt{font:10.5px/1.4 var(--ui);color:var(--gold-ink);margin-bottom:6px}
.card-facts dd{margin:0;font:14px/1.6 var(--ui)}
.card-facts .en{display:block;font-size:15px;line-height:1.3;color:var(--muted)}
.fact-main dd{font-size:13px}
.fact-main b{display:block;font:400 40px/1.1 var(--display);color:var(--burgundy)}
.card-venue{font:14px/1.8 var(--ui);margin:22px 0 0;color:var(--burgundy-2)}
.card-venue .en{display:block;font-size:16px;color:var(--muted)}
.closing{font:clamp(22px,6vw,26px)/1.6 var(--display);margin:22px 0 10px}
.paper .sample{display:inline-block;font:10.5px var(--ui);color:var(--muted);border-top:1px solid var(--line);padding-top:8px}

/* Shared panels */
.details,.rsvp-card{background:var(--ivory);border:1px solid #e9dfd0;border-radius:var(--radius);padding:clamp(24px,6vw,36px);box-shadow:0 12px 32px -22px #3a141f33}
.section-head{margin-bottom:18px}
.section-kicker{display:block;font:12px/1.6 var(--ui);color:var(--gold-ink)}
h2{font:400 clamp(28px,7.5vw,34px)/1.4 var(--display);margin:2px 0 0}
html[lang=en] h2,html[lang=en] h3{font-family:var(--latin);font-weight:500}
.facts{list-style:none;margin:0;padding:0}
.fact{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.fact-icon{font-size:22px;color:var(--gold-ink);margin-top:2px;padding:9px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;box-sizing:border-box}
.fact>div{min-width:0;flex:1}
.fact-label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.fact strong{display:block;font:400 17px/1.6 var(--ui)}
.fact-sub{display:block;font-size:12px;color:var(--muted);line-height:1.7}
.link-action{border:0;background:none;padding:6px 0;min-height:44px;font-size:13px;color:var(--gold-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold-line)}
.link-action:hover{color:var(--burgundy)}
.local-result{margin:0!important;overflow-wrap:anywhere}
.fine-print{font:12px/1.85 var(--ui);color:var(--muted);margin:10px 0 16px}
.fine-print.center{text-align:center}
.map-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.outline{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:10px 14px;background:transparent;border:1px solid var(--gold-line);border-radius:var(--radius);font-size:14px;color:var(--burgundy);transition:background .2s,border-color .2s,transform .15s}
.outline svg{font-size:18px;color:var(--gold-ink)}
.outline:hover:not(:disabled){background:#f3ece1;border-color:var(--gold-ink)}
.outline:active:not(:disabled){transform:scale(.985)}
.outline:disabled{color:#8a7d76;background:#f4efe7;border-style:dashed;border-color:#d8ccba}
.outline:disabled svg{color:#a8998a}
.outline.wide{width:100%}
.rsvp-card{text-align:center;background:var(--ivory) linear-gradient(180deg,#fcfaf6,#f6efe4)}
.rsvp-star{font-size:22px;color:var(--gold-ink)}
.rsvp-lede{font-size:14px;line-height:1.9;color:var(--muted);margin:6px 0 20px}
.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;padding:12px 20px;background:var(--burgundy);border:1px solid var(--burgundy);border-radius:var(--radius);color:var(--ivory);font-size:15px;transition:background .2s,transform .15s,box-shadow .2s}
.primary svg{font-size:18px;color:#e8c98e;transition:transform .25s}
.primary:hover{background:var(--burgundy-2);box-shadow:0 10px 24px -12px #461c2a99}
.primary:hover svg{transform:translateX(-3px)}
.primary:active{transform:scale(.99)}
html[dir=ltr] .primary svg{transform:scaleX(-1)}html[dir=ltr] .primary:hover svg{transform:scaleX(-1) translateX(-3px)}
.brand-footer{text-align:center;padding:12px 0 4px;color:var(--gold-ink)}
.brand-footer strong{display:block;font:400 22px var(--display)}
.brand-footer .en{display:block;font-size:11px;letter-spacing:4px;margin-top:2px}
.brand-footer .fine-print{max-width:28em;margin:10px auto 0}

/* RSVP dialog */
dialog{border:0;border-radius:6px;background:var(--ivory);color:var(--burgundy);padding:0;width:min(480px,calc(100% - 24px));max-height:calc(100svh - 24px);box-shadow:0 40px 120px #20091266;overscroll-behavior:contain}
dialog[open]{animation:dialog-in .28s cubic-bezier(.2,.7,.2,1)}
dialog::backdrop{background:#230e1bc2;backdrop-filter:blur(6px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 10px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ivory);z-index:1}
html[dir=rtl] .dialog-header{padding:10px 20px 10px 14px}
.close{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;border-radius:50%;font-size:20px}
.close:hover{background:#f0e8dc}
.rsvp-content{padding:24px clamp(20px,6vw,32px) 28px}
.rsvp-content h2{font-size:clamp(28px,7vw,32px)}
.english-sub{font:22px/1.3 var(--latin);color:#81694e;margin:0 0 20px}
html[dir=rtl] .english-sub{text-align:right}
fieldset{border:0;padding:0;margin:0;min-width:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:104px;justify-content:center;padding:14px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff8;text-align:center;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s}
.choice svg{font-size:20px;color:#b3a594;margin-bottom:4px;transition:color .2s,transform .25s}
.choice small{font:16px/1.2 var(--latin);color:var(--muted)}
html[lang=en] .choice small{display:none}
.choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.choice:hover{border-color:var(--gold-line)}
.choice:has(input:checked){border-color:var(--burgundy);background:#f3e9e6;box-shadow:inset 0 0 0 1px var(--burgundy)}
.choice:has(input:checked) svg{color:var(--burgundy);transform:scale(1.12)}
.choice:has(input:focus-visible){outline:2px solid var(--gold-ink);outline-offset:3px}
.field-label{display:block;font-size:13px;margin:20px 0 8px}
input[type=text]{display:block;width:100%;min-height:52px;padding:12px 14px;border:1px solid #d6c8b4;border-radius:var(--radius);background:#fff;font-size:16px;color:var(--burgundy)}
input[type=text]:focus{outline:none;border-color:var(--gold-ink);box-shadow:0 0 0 3px #ddab5233}
input[aria-invalid=true]{border-color:#8b2635}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;border:1px solid #d6c8b4;border-radius:var(--radius);background:#fff;min-height:52px}
.step{height:52px;border:0;background:transparent;font-size:18px;display:grid;place-items:center;color:var(--burgundy)}
.step:hover:not(:disabled){background:#f3ece1}.step:disabled{color:#cdbfae}
.stepper output{text-align:center;font:400 22px var(--display)}
.submit{margin-top:24px}
.error{color:#8b2635;font-size:13px;line-height:1.8;margin:8px 0 0}
#rsvp-success{text-align:center;padding-top:6px}#rsvp-success:focus{outline:none}
.success-mark{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 14px;border:1px solid var(--gold-line);border-radius:50%;font-size:26px;color:var(--gold-ink);animation:mark-in .5s ease both}
@keyframes mark-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
#rsvp-success h3{font:400 26px/1.5 var(--display);margin:0}
#success-summary{font-size:15px;line-height:1.9;overflow-wrap:anywhere;margin:8px 0}

/* English direction */
html[lang=en] .details,html[lang=en] .rsvp-content{direction:ltr;text-align:left}
html[lang=en] .topbar{direction:ltr}
html[lang=en] .countdown-label,html[lang=en] .fact strong,html[lang=en] .fine-print{font-family:var(--ui)}

/* Small screens */
@media(max-width:520px){.wordmark span{display:none}.topbar{gap:6px}}
@media(max-width:380px){
  .topbar .sample-pill{font-size:10px;padding:6px 8px}
  .wordmark span{display:none}
  .language{padding:0 8px}
  .card-facts dd{font-size:12.5px}.card-facts .en{font-size:13px}
  .fact-main b{font-size:34px}
  .choices{gap:8px}
}
.nojs{text-align:center;padding:20px;font-size:13px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* single-language card */
html[lang=ar] .en-only{display:none!important}
html[lang=en] .ar-only{display:none!important}
.paper[lang=en] .names-en{font-size:clamp(30px,8.5vw,44px);margin:0;white-space:nowrap;color:var(--burgundy)}
.paper[lang=en] .hosts p,.paper[lang=en] .card-facts dd,.paper[lang=en] .card-venue{font-family:var(--latin);font-size:17px;line-height:1.5}
.paper[lang=en] .card-facts dt{font-family:var(--latin);letter-spacing:2px;text-transform:uppercase}
.card-facts b{display:block}
.guest-line{font:13px/1.6 var(--ui);color:var(--gold-ink);margin:4px 0 14px}
.paper[lang=en] .guest-line{font:italic 16px/1.4 var(--latin)}

/* countdown */
.countdown{position:relative;overflow:hidden;padding:20px 16px 16px;border-radius:var(--radius);background:radial-gradient(120% 90% at 50% 0%,#7a3449 0%,var(--burgundy-2) 35%,var(--burgundy) 100%);color:var(--ivory);margin-bottom:10px;text-align:center;border:1px solid rgba(221,171,82,.35);box-shadow:inset 0 0 0 4px rgba(70,28,42,.6),inset 0 0 0 5px rgba(221,171,82,.22)}
.countdown::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,231,180,.12) 50%,transparent 60%);background-size:250% 100%;animation:cd-shine 6s ease-in-out infinite;pointer-events:none}
@keyframes cd-shine{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
.countdown-title{margin:0 0 14px;font:13px/1.4 var(--ui);color:#e6c58a}
html[lang=en] .countdown-title{font:italic 17px/1.3 var(--latin);letter-spacing:.5px}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:inherit}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px 9px;border:1px solid rgba(221,171,82,.45);border-radius:40px 40px 6px 6px;background:linear-gradient(180deg,rgba(252,250,246,.07),rgba(252,250,246,.01))}
.cd-num{font:400 clamp(24px,7vw,32px)/1 var(--display);background:linear-gradient(180deg,#f6e2b4,#ddab52 55%,#b98a3f);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
html[lang=en] .cd-num{font-family:var(--latin);font-weight:500}
.cd-unit{font:11px/1 var(--ui);color:#eadbd0}
html[lang=en] .cd-unit{letter-spacing:1.5px;text-transform:uppercase;font-size:9.5px}
.cd-progress{position:relative;height:1px;background:rgba(221,171,82,.25);margin:18px 6px 10px}
.cd-progress i{position:absolute;top:-1px;height:3px;border-radius:2px;display:block;inset-inline-start:0;background:linear-gradient(90deg,#b98a3f,#f0d59c);transition:width 1s linear}
.cd-progress svg{position:absolute;width:14px;height:14px;inset-inline-end:-7px;top:-7px;color:#e6c58a}
.countdown-label{margin:0;font-size:13px;color:#eadbd0}
@media (prefers-reduced-motion:reduce){.countdown::before{animation:none}}