@font-face{font-family:"Alexandria";src:url("/fonts/alexandria-arabic-400-800.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url("/fonts/aref-ruqaa-arabic-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Amiri";src:url("/fonts/amiri-arabic-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--green:#0f5c50;--deep:#082d29;--gold:#c59a4a;--gold-light:#e4c980;--cream:#fff9ea;--paper:#f5f0e4;--surface:#fffdf7;--ink:#17332d;--muted:#6f6a5e;--line:#ded2bb}
*{box-sizing:border-box}html{background:var(--deep);scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,var(--deep) 0 300px,var(--paper) 300px);color:var(--ink);font-family:Alexandria,Tahoma,Arial,sans-serif;min-height:100vh}
a{color:inherit}.site-head{max-width:960px;margin:auto;padding:34px 20px 56px;color:var(--cream);text-align:center}.mark{display:block;width:68px;height:68px;margin:auto}.brand{font:700 clamp(2.2rem,8vw,3rem)/1.3 "Aref Ruqaa",serif;margin:.35rem 0 0}.motto{color:var(--gold-light);font:400 1.3rem/1.8 Amiri,serif}.breadcrumbs{max-width:960px;margin:0 auto 12px;padding:0 18px;color:#5f5a50;font-size:.8rem}.breadcrumbs a{color:var(--green);text-decoration:none}.breadcrumbs span{margin:0 .35rem;color:#9f9278}
main{width:min(930px,calc(100% - 28px));margin:-34px auto 48px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,5vw,48px);box-shadow:0 26px 70px -45px #000}h1,h2,h3{font-family:"Aref Ruqaa",serif;color:var(--green)}h1{font-size:clamp(2rem,6vw,3.1rem);line-height:1.5;margin:0 0 12px}h2{font-size:clamp(1.45rem,4vw,1.85rem);margin:34px 0 10px}h3{font-size:1.25rem;margin:.1rem 0 .45rem}.lead{font:400 1.24rem/2 Amiri,serif;color:#4e4a41}p,li{line-height:2}p{margin:.4rem 0 1rem}.eyebrow{color:#9c6d21;font-size:.8rem;font-weight:750;letter-spacing:.03em}.note{padding:15px 17px;border:1px solid #dfd0af;border-radius:16px;background:#fff8e8;color:#544e43}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:14px;text-decoration:none;font-weight:750}.primary{background:var(--green);color:#fff}.secondary{border:1px solid #cfbe99;background:#fffaf0;color:var(--green)}.btn:focus-visible,.item:focus-visible{outline:3px solid rgba(15,92,80,.25);outline-offset:3px}
.feature-grid,.reciter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.card{display:block;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fffaf0;text-decoration:none}.card p{font-size:.91rem;margin:0}.card.link:hover{border-color:#c5a66a;box-shadow:0 12px 28px -24px #4a3215}.card strong{display:block;color:var(--green);margin-bottom:.35rem}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;margin:14px 0 0}.item{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 10px;border:1px solid var(--line);border-radius:13px;background:#fffaf0;color:var(--green);text-align:center;text-decoration:none;font-size:.9rem;font-weight:700}.item:hover{border-color:#c7aa70;background:#fff7e5}.item small{display:block;color:var(--muted);font-size:.7rem;font-weight:500}.listen-list{display:grid;gap:9px;margin-top:16px}.listen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#fffaf0;color:var(--green);text-decoration:none;font-weight:750}.listen::after{content:"استماع ←";color:#986b23;font-size:.75rem;white-space:nowrap}
footer{padding:0 20px 34px;color:rgba(255,249,234,.72);text-align:center;font-size:.78rem}footer a{color:var(--gold-light)}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}
@media(max-width:640px){body{background:linear-gradient(180deg,var(--deep) 0 260px,var(--paper) 260px)}.site-head{padding-top:28px}.feature-grid,.reciter-grid{grid-template-columns:1fr}main{padding:23px 19px;border-radius:22px}.link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listen{align-items:flex-start;flex-direction:column}.listen::after{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}