:root{
  --wine:#651329; --wine2:#8d2441; --ink:#21161b; --muted:#77676d;
  --cream:#fffaf7; --paper:#fffefd; --soft:#f8ecee; --line:#eadcdf;
  --blush:#efbac5; --gold:#c99a60; --shadow:0 22px 70px rgba(72,18,36,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Tajawal",system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
img{display:block;width:100%}
button,a{font:inherit}
button{cursor:pointer}
.wrap{width:min(1040px,calc(100% - 30px));margin:auto}
.serif{font-family:"Noto Naskh Arabic","Times New Roman",serif}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;padding:14px 0;pointer-events:none}
.topbar .inside{display:flex;justify-content:space-between;align-items:center}
.brand{pointer-events:auto;color:white;background:rgba(35,12,20,.28);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);padding:9px 12px;border-radius:99px;font-size:12px;font-weight:800}
.music{pointer-events:auto;border:1px solid rgba(255,255,255,.16);background:rgba(35,12,20,.28);backdrop-filter:blur(12px);color:white;padding:9px 13px;border-radius:99px;font-size:12px}
.section{padding:88px 0}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--wine)}
.head{text-align:center;max-width:720px;margin:0 auto 46px}
.head h2{font-size:clamp(39px,7vw,67px);line-height:1.05;color:#401723;margin:10px 0}
.head p{color:var(--muted);line-height:1.85;margin:0}
.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:999px;padding:14px 22px;background:var(--wine);color:white;font-weight:800;text-decoration:none;box-shadow:0 12px 30px rgba(101,19,41,.22)}
.btn.light{background:white;color:var(--wine)}
.reveal{opacity:0;transform:translateY(18px);transition:.65s cubic-bezier(.2,.8,.2,1)}
.reveal.on{opacity:1;transform:none}
footer{padding:38px 0;text-align:center;color:#9c878d;font-size:11px;border-top:1px solid var(--line)}
@media(max-width:600px){
 .wrap{width:min(100% - 24px,1040px)}
 .section{padding:72px 0}
 .topbar{padding:10px 0}
 .brand,.music{font-size:11px;padding:8px 10px}
}

.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;color:white;background:linear-gradient(145deg,#2c101a,#6e1730 60%,#a34d5f)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,215,222,.17),transparent 25%),radial-gradient(circle at 12% 82%,rgba(208,164,106,.13),transparent 24%)}
.hero-content{position:relative;z-index:2;padding:100px 0 60px}.env{width:210px;height:138px;margin:26px auto 28px;position:relative;filter:drop-shadow(0 22px 30px rgba(0,0,0,.25))}
.envbase{position:absolute;inset:0;background:#eed2c2;border-radius:8px}.envbase:before{content:"";position:absolute;inset:0;background:#fff0e5;clip-path:polygon(0 0,50% 57%,100% 0)}.envbase:after{content:"";position:absolute;inset:0;background:#e4c1b2;clip-path:polygon(0 100%,0 35%,50% 66%,100% 35%,100% 100%)}.seal{position:absolute;z-index:3;left:50%;top:55%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--wine);display:grid;place-items:center}
.hero h1{font-size:clamp(52px,10vw,92px);line-height:1;margin:10px 0;color:white}.hero h1 span{color:#f3b5c1}.hero p{max-width:600px;margin:0 auto 26px;color:#e9d9de;line-height:1.9}
.songbar{background:white;border-bottom:1px solid var(--line)}.songin{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 0;direction:rtl}.songmeta{display:flex;gap:11px;align-items:center}.disc{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#25161c 9% 23%,#651329 24%)}.songmeta small{display:block;color:var(--muted)}
.letters{background:linear-gradient(180deg,#fffaf7,#f9edef)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.letter{border:1px solid var(--line);background:white;border-radius:21px;padding:21px;text-align:right;direction:rtl;box-shadow:0 10px 34px rgba(74,20,37,.06);transition:.2s}.letter:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.icon{width:40px;height:40px;border-radius:13px;background:#f7e1e5;display:grid;place-items:center;color:var(--wine);font-size:18px;margin-right:auto}.letter h3{font-size:23px;color:#401723;margin:15px 0 7px}.letter p{font-size:12px;color:var(--muted);margin:0}
.photoSec{background:white}.photos{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:12px}.ph{border-radius:21px;overflow:hidden;min-height:300px}.ph:first-child{grid-row:span 2;min-height:612px}.ph img{height:100%;object-fit:cover}
.finalNote{margin-top:18px;border-radius:24px;background:#34131f;color:white;padding:27px;direction:rtl;text-align:right}.finalNote p{color:#dfcbd1;line-height:1.9;margin:7px 0 0}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:16px}.modal.show{display:grid}.backdrop{position:absolute;inset:0;background:rgba(26,8,14,.82);backdrop-filter:blur(8px)}.note{position:relative;z-index:2;width:min(590px,100%);max-height:88vh;overflow:auto;background:#fffaf2;border-radius:24px;padding:32px;direction:rtl;text-align:right}.note img{height:240px;object-fit:cover;border-radius:17px}.note h3{font-size:30px;color:var(--wine);margin:18px 0 10px}.note p{white-space:pre-line;line-height:2;color:#5b4850}.close{position:absolute;left:14px;top:12px;border:0;background:#f8e9e6;color:var(--wine);width:34px;height:34px;border-radius:50%}
@media(max-width:720px){.grid{grid-template-columns:1fr 1fr}.photos{grid-template-columns:1fr 1fr}.ph:first-child{grid-column:1/-1;grid-row:auto;min-height:410px}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.photos{grid-template-columns:1fr}.ph,.ph:first-child{min-height:340px}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* Demo photo finishing */
.photo img,.ph img,.tile img,.note img{
  filter:saturate(.88) contrast(.98) brightness(.96);
}

.langToggle{pointer-events:auto;border:1px solid rgba(255,255,255,.16);background:rgba(35,12,20,.28);backdrop-filter:blur(12px);color:#fff;padding:9px 12px;border-radius:99px;font-size:11px;font-weight:800;margin-inline-end:6px}

body.en{direction:ltr;font-family:Inter,Arial,sans-serif}
body.en .copy,body.en .paper,body.en .letter,body.en .wish,body.en .note,body.en .finalNote{text-align:left;direction:ltr}
body.en .songin{direction:ltr}