:root{--g1:#0f2a22;--g2:#16392e;--gold:#c9a24b;--gold2:#e6c878;--bg:#faf6ec;--ink:#1c2a25}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--ink);line-height:1.8}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* الترويسة بزخرفة هندسية إسلامية */
.hero{background-color:var(--g1);
 background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 14l26 26-26 26-26-26z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E");
 border-top:3px solid var(--gold);color:#fff;text-align:center}
.hero-inner{padding:2rem 1rem 1.2rem}
.portrait img,.portrait-ph{width:190px;height:230px;object-fit:cover;object-position:top;margin:0 auto;display:block;border-radius:50% 50% 8px 8px/40% 40% 8px 8px;border:3px solid var(--gold)}
.portrait-ph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:var(--gold2)}
.title{font-family:'Amiri',serif;font-size:2.4rem;color:var(--gold2);margin-top:.8rem;text-shadow:0 2px 8px #0008}
.subtitle{font-family:'Amiri',serif;font-size:1.3rem;color:#e9e2cc}
.meta{margin:.8rem 0}
.date{display:inline-block;border:1px solid var(--gold);border-radius:30px;padding:.15rem 1.2rem;font-size:.95rem;color:var(--gold2)}
.social{display:flex;gap:.6rem;justify-content:center;margin-top:.6rem}
.social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold2);transition:.2s}
.social a:hover{background:var(--gold);color:var(--g1)}

.nav{background:rgba(8,24,19,.92);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);position:sticky;top:0;z-index:50}
.nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.2rem;padding:.6rem 1rem}
.nav a{font-weight:600;font-size:.95rem;color:#f1ead2;padding:.2rem .3rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--gold2);border-color:var(--gold)}
.burger{display:none;background:none;border:0;color:var(--gold2);font-size:1.6rem;padding:.4rem 1rem;cursor:pointer;width:100%;text-align:right}

/* الأقسام */
.sec{max-width:1100px;margin:0 auto;padding:3rem 1.2rem}
.sec.alt{max-width:none;background:#f1e9d2}
.sec.alt>*{max-width:1100px;margin-inline:auto}
.sec-title{text-align:center;margin-bottom:1.8rem;position:relative;font-family:'Amiri',serif;font-size:1.8rem;color:var(--g2)}
.sec-title span{background:var(--bg);padding:0 1.2rem;position:relative;z-index:1}
.sec.alt .sec-title span{background:#f1e9d2}
.sec-title::before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* شريط الأخبار */
.slider{position:relative;padding:0 3rem}
.track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;background:#fff;border:1px solid #e3d6ae;border-radius:6px;padding:1.2rem;text-align:center;box-shadow:0 2px 10px #0000000f;display:flex;flex-direction:column;gap:.6rem}
.tag{color:var(--gold);font-size:.8rem}
.card h3{font-size:1.02rem;font-weight:600;color:var(--g2);flex:1}
.card a{color:var(--gold);font-weight:700}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);background:var(--g1);color:var(--gold2);font-size:1.5rem;cursor:pointer}
.arrow.prev{right:0}.arrow.next{left:0}

/* روابط سريعة */
.quick{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;padding:1rem 1.2rem 0;max-width:1100px;margin:auto}
.quick a{flex:1 1 170px;text-align:center;padding:.9rem;background:var(--g2);color:var(--gold2);border:1px solid var(--gold);border-radius:6px;font-weight:700;transition:.2s}
.quick a:hover{background:var(--gold);color:var(--g1)}

.quote-sec blockquote{background:var(--g2);color:#f5efd9;padding:2rem;border-radius:8px;border-right:5px solid var(--gold);font-family:'Amiri',serif;font-size:1.5rem;text-align:center}
.bio{background:#fff;padding:1.6rem;border-radius:8px;border:1px solid #e3d6ae}
.facts{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.4rem 1.5rem}
.facts b{color:var(--gold)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.box{background:#fff;border:1px solid #e3d6ae;border-top:4px solid var(--gold);padding:1.4rem;border-radius:6px}
.box h3{color:var(--g2);margin-bottom:.4rem}
.video .thumb{aspect-ratio:16/9;background:var(--g1);display:flex;align-items:center;justify-content:center;color:var(--gold2);font-size:2.5rem;border-radius:6px;border:1px solid var(--gold)}
.video h4{margin-top:.5rem;font-size:1rem}
.more{text-align:center;margin-top:1.4rem}
.more a{color:var(--gold);font-weight:700;border-bottom:1px solid}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.gallery div{aspect-ratio:4/3;background:linear-gradient(135deg,var(--g2),var(--g1));border:1px solid var(--gold);border-radius:6px}

.footer{background:var(--g1);color:#e9e2cc;border-top:3px solid var(--gold);margin-top:2rem}
.foot-grid{max-width:1100px;margin:auto;padding:2.5rem 1.2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.footer h4{color:var(--gold2);font-family:'Amiri',serif;font-size:1.3rem;margin-bottom:.5rem}
.footer a{display:block}.footer a:hover{color:var(--gold2)}
.copy{text-align:center;padding:1rem;background:#08170f;font-size:.85rem}

@media(max-width:800px){
 .title{font-size:1.8rem}
 .card{flex-basis:85%}
 .slider{padding:0 2.4rem}
 .burger{display:block}
 .nav ul{display:none;flex-direction:column;align-items:center}
 .nav.open ul{display:flex}
}
.gallery a{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--gold);border-radius:6px;background:#fff}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.gallery a:hover img{transform:scale(1.05)}
.portrait img{background:#fff}
.ayat{background:var(--g2);color:#f5efd9;padding:2rem 1.4rem;border-radius:8px;border:1px solid var(--gold);text-align:center}
.aya{font-family:'Amiri',serif;font-size:1.8rem;line-height:2.2;margin-bottom:1rem}
.aya small{display:block;font-size:.95rem;color:var(--gold2)}
.ayat audio{width:100%;max-width:480px;margin-top:.5rem}
/* Refined visual identity */
:root{--g1:#102c25;--g2:#21473b;--gold:#ab853f;--gold2:#e5c986;--bg:#fbf8f1;--ink:#24392f}
body{overflow-wrap:anywhere}main{overflow:hidden}section,footer{scroll-margin-top:110px}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold2);outline-offset:5px}
.skip{position:fixed;top:-100px;right:20px;z-index:1000;background:var(--bg);padding:12px}.skip:focus{top:10px}
.hero{border-top:5px solid var(--gold);position:relative;overflow:hidden;background-image:radial-gradient(ellipse at 15% 70%,#385b454d,transparent 65%)}
.hero::after{content:'◆';position:absolute;left:-70px;top:-220px;font-size:660px;line-height:1;color:#c9a24b08;pointer-events:none}
.hero-inner{max-width:1180px;margin:auto;padding:70px 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;text-align:right;position:relative;z-index:1}
.eyebrow{color:var(--gold2);font-size:.8rem;letter-spacing:1px;margin-bottom:24px;display:flex;align-items:center;gap:15px}.eyebrow::before{content:'';height:1px;width:45px;background:var(--gold)}
.title{font-size:clamp(2.5rem,4.5vw,4.2rem);line-height:1.5;font-weight:400;text-shadow:none;margin:0}.subtitle{font-size:1.6rem;margin:10px 0 22px;color:#ede7d8}
.meta{margin:20px 0 28px}.date{border:0;border-radius:0;padding:0;font-size:.85rem;color:#d3d8cd}
.portrait{position:relative;padding:14px;border:1px solid #c9a24b66;border-radius:180px 180px 5px 5px;max-width:360px;width:100%;justify-self:center;box-shadow:20px 20px 0 #c9a24b08}
.portrait img{width:100%;height:430px;border:0;border-radius:170px 170px 2px 2px;object-position:top}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}.button{display:inline-flex;gap:35px;align-items:center;padding:12px 24px;background:var(--gold2);color:var(--g1);font-weight:700;border:1px solid var(--gold2);border-radius:3px;font-size:.85rem;transition:transform .2s}.button:hover{transform:translateY(-3px)}.button.secondary{background:transparent;color:var(--gold2);border-color:#c9a24b70}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px max(24px,calc((100% - 1180px)/2));background:#102c25f5;backdrop-filter:blur(12px);box-shadow:0 5px 24px #0001;border-top:1px solid #c9a24b33;border-bottom:0}
.nav .brand{font-family:'Amiri',serif;font-size:1.2rem;color:var(--gold2);line-height:1.4;white-space:nowrap;padding:0}.brand small{display:block;font-family:'Cairo',sans-serif;font-size:.6rem;color:#bfcabc;margin-top:4px}.nav ul{gap:3px 8px;padding:0;margin-right:25px}.nav a{font-size:.72rem}.burger{width:auto}
.sec{padding:65px 28px;max-width:1180px}.sec-title{font-size:2.3rem;font-weight:400;margin-bottom:36px}.sec-title span{padding:0 30px}.sec-title::before{opacity:.6}
.card{padding:24px;border-radius:8px;border:1px solid #d9ccb54d;box-shadow:0 8px 30px #24392f07;gap:12px;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px #24392f12}.news-ornament{height:80px;display:grid;place-items:center;font-size:35px;color:var(--gold);background:linear-gradient(135deg,#f5efdf,#eae1cb);border-radius:4px}.card h3{font-size:1rem;line-height:1.9}.tag{font-size:.7rem}.card a{font-size:.8rem}.arrow{width:36px;height:36px;border-width:1px}
.quick{max-width:1124px;padding:22px;gap:12px;background:#efe8d9;border-radius:8px;margin-bottom:15px}.quick a{font-size:.82rem;padding:16px 10px;background:transparent;color:var(--g2);border-color:#b9a57866;border-radius:4px}.quick a:hover{background:var(--g1);color:var(--gold2)}
.quote-sec blockquote{position:relative;padding:55px 35px;font-size:1.8rem;font-weight:400;border:1px solid #ab853f55;border-radius:6px;background:linear-gradient(120deg,var(--g1),var(--g2));box-shadow:0 12px 40px #102c2510}.quote-sec blockquote::before{content:'“';display:block;color:var(--gold2);font-size:5rem;line-height:.7;margin-bottom:24px}
.bio{padding:35px;border:1px solid #e6ddcd;border-radius:6px;line-height:2.2}.bio-feature{display:grid;grid-template-columns:220px 1fr;gap:35px;align-items:center}.bio-feature img{width:100%;height:280px;object-fit:cover;object-position:top;border-radius:110px 110px 4px 4px}.facts{border-top:1px solid #e7dfd0;padding-top:18px;margin-top:22px;font-size:.9rem}
.sec.alt{background:#f1ecdf}.sec.alt .sec-title span{background:#f1ecdf}.video{padding:12px;background:white;border:1px solid #e6ddcd;border-radius:6px}.video .thumb{background:radial-gradient(circle,#2d5546,var(--g1));border:0;border-radius:4px}.video h4{padding:8px;font-weight:600}.gallery{gap:20px}.gallery a{border:0;border-radius:140px 140px 5px 5px;box-shadow:0 10px 25px #102c2510}.gallery a:nth-child(even){margin-top:35px}.gallery img{transition:transform .5s}
.ayat{padding:40px;border-radius:6px;background:var(--g1);border:1px solid #ab853f66}.aya{font-size:1.8rem}.footer{border-top:1px solid var(--gold);margin-top:30px}.foot-grid{max-width:1180px;padding:50px 28px}.footer p,.footer a{font-size:.85rem;color:#c4cfc5}.footer h4{font-size:1.5rem}.copy{background:#0c221c;color:#9cad9e;font-size:.75rem}
.lightbox{border:1px solid #b49156;border-radius:8px;padding:45px 20px 20px;background:#102c25;color:#fff;max-width:90vw;max-height:90vh;margin:auto}.lightbox::backdrop{background:#061510e8;backdrop-filter:blur(6px)}.lightbox img{display:block;max-height:70vh;max-width:80vw;object-fit:contain;margin:auto}.lightbox p{text-align:center;font-size:.85rem;padding-top:10px}.lightbox-close{position:absolute;top:4px;left:12px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}.back-top{position:fixed;bottom:22px;left:22px;background:var(--g1);color:var(--gold2);border:1px solid var(--gold);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;z-index:20}
@media(prefers-reduced-motion:no-preference){.reveal-pending{opacity:0;transform:translateY(16px);transition:opacity .65s,transform .65s}.reveal-pending.visible{opacity:1;transform:none}}
@media(max-width:1050px){.nav{flex-wrap:wrap;padding:15px 24px}.nav ul{margin:12px 0 0;width:100%;justify-content:center}.hero-inner{gap:35px;padding:50px 28px}.portrait img{height:380px}}
@media(max-width:800px){section,footer{scroll-margin-top:90px}.nav{flex-wrap:wrap}.burger{display:block}.nav ul{display:none;gap:12px;padding:15px 0}.nav.open ul{display:flex}.nav a{font-size:.9rem}.nav .brand{font-size:1.2rem}.hero-inner{grid-template-columns:1fr;text-align:center;gap:32px;padding:42px 24px}.hero-copy{order:2}.portrait{max-width:260px}.portrait img{height:310px}.title{font-size:2.6rem}.eyebrow{justify-content:center;margin-bottom:14px}.hero-actions{justify-content:center}.subtitle{font-size:1.3rem}.sec{padding:45px 20px}.sec-title{font-size:1.9rem}.sec-title span{padding:0 14px}.bio-feature{grid-template-columns:1fr;gap:24px}.bio-feature img{max-width:210px;justify-self:center;height:260px}.bio{padding:24px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery a:nth-child(even){margin-top:20px}.gallery a{border-radius:80px 80px 4px 4px}.quick{margin:0 20px;padding:14px}.quick a{flex-basis:135px}.ayat{padding:26px 20px}.aya{font-size:1.5rem}.quote-sec blockquote{padding:35px 22px;font-size:1.5rem}.grid3{grid-template-columns:1fr}.back-top{bottom:14px;left:14px}}
@media(prefers-reduced-motion:reduce){html,.track{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Portrait gallery */
#gallery{background:#f3efe6;padding-top:65px;padding-bottom:50px}.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}.gallery-kicker{color:#8c7045;font-size:.75rem;letter-spacing:.08em;margin-bottom:8px}.gallery-heading h2{font-family:Amiri,serif;font-size:2.8rem;color:#183d31;margin:0;line-height:1.3}.gallery-intro{color:#6a716b;margin-top:8px;font-size:.9rem}.gallery-total{font-family:Amiri,serif;font-size:2.6rem;color:#9e8050;border-right:1px solid #d6c7ad;padding-right:24px;line-height:1.2}.gallery-total small{display:block;font-family:Cairo,sans-serif;font-size:.7rem;color:#6a716b;margin-top:8px}
#gallery .gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}#gallery .gallery-card{position:relative;aspect-ratio:3/4;margin:0;border-radius:8px;border:1px solid #cbbb9e;background:radial-gradient(ellipse at 50% 25%,#3d5a49,#142f26 85%);box-shadow:0 8px 24px #183d3110;text-decoration:none;isolation:isolate;transition:transform .3s,box-shadow .3s}#gallery .gallery-card:nth-child(even){margin:0}#gallery .gallery-card img{object-fit:contain;object-position:center bottom;height:100%;width:100%;padding:18px 8px 0;transition:transform .5s}#gallery .gallery-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px #183d3124}#gallery .gallery-card:hover img{transform:scale(1.035)}.gallery-number{position:absolute;top:14px;right:14px;z-index:2;color:#e4d5b7;font-size:.7rem;letter-spacing:.08em;border:1px solid #e4d5b744;background:#142f2666;border-radius:30px;padding:3px 10px}.gallery-caption{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:38px 16px 16px;background:linear-gradient(transparent,#091d17ee);color:#fff;font-size:.73rem;z-index:2}.gallery-caption small{display:block;color:#dbc39a;font-size:.63rem;margin-top:5px}.gallery-expand{display:grid;place-items:center;width:32px;height:32px;border:1px solid #dbc39a77;border-radius:50%;font-size:1.15rem;flex-shrink:0}.gallery-hint{text-align:center;color:#7a7e76;font-size:.73rem;margin-top:24px}#gallery a:focus-visible,.lightbox button:focus-visible{outline:3px solid #c9a66c;outline-offset:4px}
.lightbox{width:min(980px,94vw);max-width:94vw;max-height:94vh;max-height:94dvh;padding:0;border:1px solid #b4915666;border-radius:12px;background:radial-gradient(ellipse at center,#284336,#0c211a);overflow:auto;box-shadow:0 30px 100px #0008}.lightbox::backdrop{background:#05110df2;backdrop-filter:blur(10px)}.lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #ffffff12;color:#dbc39a;font-size:.8rem}.lightbox .lightbox-close{position:static;width:36px;height:36px;line-height:1;border:1px solid #ffffff30;border-radius:50%;font-size:26px}.lightbox-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;padding:16px 18px;gap:12px}.lightbox .lightbox-image{width:100%;height:58vh;height:58dvh;max-height:620px;max-width:100%;object-fit:contain;touch-action:pan-y}.lightbox-prev,.lightbox-next{width:44px;height:44px;border:1px solid #dbc39a66;border-radius:50%;background:#ffffff08;color:#f3e3c8;font-size:24px;cursor:pointer}.lightbox button:hover{background:#ffffff15}.lightbox-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;color:#e5ddcc}.lightbox .lightbox-info p{padding:0;font-size:.8rem;text-align:right}.lightbox-count{direction:ltr;color:#c7ac7c;font-size:.8rem;white-space:nowrap}.lightbox-thumbs{display:flex;justify-content:center;gap:10px;padding:16px 20px 20px}.lightbox-thumbs button{width:50px;height:62px;border:1px solid #ffffff25;border-radius:5px;background:#ffffff08;padding:3px;cursor:pointer;opacity:.55}.lightbox-thumbs button[aria-pressed=true]{border:2px solid #d6b779;opacity:1}.lightbox .lightbox-thumbs img{height:100%;width:100%;object-fit:contain}
@media(max-width:900px){#gallery .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.gallery-caption{font-size:.85rem}}@media(max-width:500px){#gallery{padding-top:40px}.gallery-heading h2{font-size:2.2rem}.gallery-total{font-size:2rem;padding-right:14px}.gallery-total small{font-size:.6rem}#gallery .gallery{gap:10px}.gallery-caption{padding:30px 10px 12px;font-size:.65rem}.gallery-caption small{font-size:.57rem}.gallery-expand{width:25px;height:25px}.gallery-number{top:10px;right:10px}.lightbox-stage{grid-template-columns:32px minmax(0,1fr) 32px;padding:12px 8px;gap:4px}.lightbox-prev,.lightbox-next{width:30px;height:36px;font-size:20px}.lightbox .lightbox-image{height:54vh;height:54dvh}.lightbox-info{padding:0 14px}.lightbox .lightbox-info p{font-size:.68rem}.lightbox-toolbar{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){#gallery .gallery-card,#gallery .gallery-card img{transition:none}}
