:root{
  --navy:#1C2E3D;--navy-2:#243A4C;--blue:#3A6485;--panel:#E7EDF1;--panel-2:#F2F5F8;
  --paper:#FFFFFF;--surface:#FAF7F0;--ink:#28323B;--muted:#5C6B77;
  --brass:#A98944;--brass-ink:#86692C;--brass-lt:#CDB273;
  --line:rgba(28,46,61,.14);--line-lt:rgba(255,255,255,.16);
  --serif:"Spectral",Georgia,serif;--sans:"Libre Franklin",system-ui,sans-serif;--arabic:"Amiri",serif;
  --hdr:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px)}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.62;font-size:16.5px;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:34px;padding-right:34px}
.label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.label.gold{color:var(--brass-ink)}
.muted{color:var(--muted)}
.ar{display:inline-block;transition:transform .2s}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--blue);border-bottom:1.5px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.lnk:hover{border-color:var(--blue)}
a:hover .ar,.lnk:hover .ar{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:600;padding:12px 22px;border-radius:3px;background:var(--blue);color:#fff;transition:background .2s,box-shadow .2s}
.btn:hover{background:var(--navy)}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--navy);background:#fff}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--blue)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.hdr-top{display:flex;align-items:center;gap:26px;height:var(--hdr)}
.brand{flex-shrink:0}
.brand img{height:42px;width:auto}
.nav{display:flex;align-items:stretch;height:100%;margin-left:8px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:0 13px;font-size:.94rem;font-weight:500;color:var(--navy);position:relative;height:100%}
.nav-btn::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-btn:hover::after,.nav-btn.current::after,.nav-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.chev{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .2s}
[aria-expanded="true"] .chev,.open>.dw-btn .chev,details[open] .chev{transform:translateY(1px) rotate(-135deg)}
.hdr-actions{display:flex;align-items:center;gap:18px;margin-left:auto;flex-shrink:0}
.search-mini{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.9rem}
.search-mini:hover{color:var(--navy)}
.lang{font-size:.82rem;font-weight:600;color:var(--muted)}
.lang button{padding:2px 3px;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--navy)}
.donate{font-size:.85rem;font-weight:600;color:#fff;background:var(--navy);padding:9px 17px;border-radius:3px;transition:background .2s}
.donate:hover{background:var(--blue)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--navy)}

/* ---------- mega menu ---------- */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 26px 40px -30px rgba(28,46,61,.45);display:none}
.mega.open{display:block;animation:drop .18s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-inner{display:grid;grid-template-columns:270px 1fr 250px;gap:44px;padding-top:36px;padding-bottom:40px}
.mega-intro .label{margin-bottom:10px}
.mega-intro h2{font-family:var(--serif);font-weight:500;font-size:1.65rem;color:var(--navy);line-height:1.2;margin-bottom:12px}
.mega-intro p{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:20px}
.mega-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:26px 34px;border-left:1px solid var(--line);padding-left:40px;align-content:start}
.mg h3{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.mg a{display:block;padding:8px 0}
.mg a b{display:block;font-weight:600;font-size:.93rem;color:var(--navy);transition:color .15s}
.mg a span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:2px}
.mg a:hover b{color:var(--blue)}
.soon{font-style:normal;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink);font-weight:600;margin-left:7px;white-space:nowrap}
.mega-feat{align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px 22px;display:flex;flex-direction:column;transition:border-color .2s}
.mega-feat:hover{border-color:var(--blue)}
.mega-feat svg{width:24px;height:24px;color:var(--blue);margin-bottom:14px}
.mega-feat .label{margin-bottom:8px;color:var(--brass-ink)}
.mega-feat h4{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--navy);line-height:1.3;margin-bottom:6px}
.mega-feat p{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.mega-feat .lnk{align-self:flex-start}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;left:0;right:0;top:var(--hdr);bottom:0;background:#fff;z-index:79;overflow-y:auto;display:none;border-top:1px solid var(--line)}
.drawer.open{display:block}
.dw-item{border-bottom:1px solid var(--line)}
.dw-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-family:var(--serif);font-size:1.3rem;color:var(--navy);text-align:left}
.dw-panel{display:none;padding:0 22px 22px}
.dw-item.open .dw-panel{display:block}
.dw-panel .intro{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.dw-panel h3{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-ink);font-weight:600;margin:16px 0 4px}
.dw-panel a.dl{display:block;padding:10px 0;border-top:1px solid var(--line)}
.dw-panel a.dl b{display:block;font-size:.95rem;color:var(--navy);font-weight:600}
.dw-panel a.dl span{display:block;font-size:.84rem;color:var(--muted);line-height:1.45}
.dw-panel .lnk{margin-top:16px}
.dw-foot{padding:22px;display:flex;flex-wrap:wrap;gap:14px 24px;font-size:.92rem;color:var(--muted)}

/* ---------- shared page pieces ---------- */
.page[hidden]{display:none}
.sec{padding-top:104px;padding-bottom:104px}
.sec.tint{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:44px}
.sec-head h2,.h2{font-family:var(--serif);font-weight:500;font-size:2rem;color:var(--navy);line-height:1.15;margin-top:8px}
.sec-head p{color:var(--muted);margin-top:12px;max-width:580px}
.sec-head .lnk{flex-shrink:0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#EDF2F5;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%233A6485' stroke-opacity='.12' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 36H16M56 36H72M36 0V16M36 56V72'/%3E%3C/g%3E%3C/svg%3E");background-position:right top;-webkit-mask-image:linear-gradient(to left,#000 12%,transparent 58%);mask-image:linear-gradient(to left,#000 12%,transparent 58%);pointer-events:none}
.hero-inner{position:relative}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding-top:92px;padding-bottom:96px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,4.3vw,3.4rem);line-height:1.1;color:var(--navy);letter-spacing:-.01em;margin-top:20px}
.hero .sub{font-size:1.1rem;color:var(--muted);margin-top:22px;max-width:540px}
.searchbar{display:flex;margin-top:32px;max-width:500px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(28,46,61,.06)}
.searchbar:focus-within{border-color:var(--blue)}
.searchbar input{flex:1;min-width:0;border:0;padding:14px 16px;font:inherit;font-size:.95rem;background:transparent;color:var(--ink)}
.searchbar input:focus{outline:none}
.searchbar button{background:var(--blue);color:#fff;padding:0 20px;display:flex;align-items:center}
.searchbar button:hover{background:var(--navy)}
.hero-cta{display:flex;align-items:center;gap:26px;margin-top:26px;flex-wrap:wrap}
.feature{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:130px 130px 6px 6px;overflow:hidden;padding:66px 34px 34px;text-align:center}
.feature::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;background:var(--panel);border-bottom:1px solid var(--line)}
.fmark{position:relative;display:block;width:30px;height:30px;color:var(--blue);margin:-16px auto 20px}
.feature .label{color:var(--brass-ink);margin-bottom:16px}
.feature h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.28;color:var(--navy);margin-bottom:12px}
.feature p{font-size:.93rem;color:var(--muted);margin-bottom:22px}

/* ---------- hero showcase (rotating, CMS-fed) ---------- */
.stage{display:grid;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface)}
.slide{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.slide.on{opacity:1;visibility:visible}
.media{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.media .tag{position:absolute;left:16px;top:16px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--navy);background:var(--brass-lt);padding:5px 10px;border-radius:2px}
.m-verse{background:var(--navy);flex-direction:column;gap:14px}
.m-verse .fmark{margin:0;color:var(--brass-lt)}
.m-verse p{font-family:var(--arabic);font-size:clamp(1.45rem,5.6vw,2.1rem);line-height:1.7;color:var(--panel);text-align:center;padding:0 20px;max-width:100%}
.m-person{background:var(--navy-2)}
.m-person img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--navy-2),0 0 0 5px var(--brass-lt)}
.m-books{background:var(--panel);gap:0}
.bk{width:58px;height:86px;border-radius:2px;margin-left:-14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-family:var(--serif);font-size:.8rem;color:rgba(255,255,255,.9);box-shadow:0 6px 14px -8px rgba(28,46,61,.6);position:relative}
.bk::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.25)}
.b1{background:#4F7C85;transform:rotate(-8deg) translateY(10px)}
.b2{background:#9A4B50;transform:rotate(-4deg) translateY(4px)}
.b3{background:#5E8650;transform:rotate(0)}
.b4{background:#B08E3E;transform:rotate(4deg) translateY(4px)}
.b5{width:96px;height:136px;margin-left:-6px;background:#6B4F66;z-index:2;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:12px 10px 12px 14px;font-size:.78rem;transform:rotate(3deg) translateY(-4px);text-align:left;line-height:1.2}
.b5 b{font-weight:500;font-size:.92rem;margin-bottom:6px}
.b5 em{position:absolute;top:10px;left:14px;font-style:normal;font-family:var(--sans);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--brass-lt);padding:3px 6px;border-radius:2px}
.m-photo img{width:100%;height:100%;object-fit:cover}
.m-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,46,61,.05),rgba(28,46,61,.45))}
.m-photo .tag{z-index:1}
.sbody{padding:26px 32px 30px;display:flex;flex-direction:column;flex:1}
.sbody .label{margin-bottom:10px}
.sbody h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.25;color:var(--navy);margin-bottom:8px}
.sbody p{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.84rem;margin-bottom:16px}
.facts dt{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);padding-top:3px}
.sbody .lnk{align-self:flex-start;margin-top:2px}
.snav{display:flex;align-items:center;gap:10px;margin-top:14px}
.stabs{display:flex;flex:1;gap:6px}
.stabs button{flex:1;text-align:left;font-size:.78rem;font-weight:600;color:var(--muted);padding:6px 0 10px;position:relative}
.stabs button[aria-selected="true"]{color:var(--navy)}
.stabs i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);overflow:hidden}
.stabs i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}
.stabs button[aria-selected="true"] i::after{animation:fill 7s linear forwards}
.showcase.paused .stabs button[aria-selected="true"] i::after{animation-play-state:paused}
.stabs button.seen i::after{transform:scaleX(1);background:var(--brass-lt)}
@keyframes fill{to{transform:scaleX(1)}}
.spause{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:3px;color:var(--navy);flex-shrink:0}
.spause:hover{background:var(--panel-2)}
.ic-pause{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.spause[aria-pressed="true"] .ic-pause{width:0;height:0;border-left:10px solid currentColor;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.pillar{grid-column:span 2;background:#fff;padding:34px 30px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:background .2s}
.pillar.big{grid-column:span 3;padding:40px 38px 34px}
.pillar:hover{background:var(--surface)}
.arw{position:absolute;top:10px;right:26px;font-family:var(--arabic);font-size:3.8rem;line-height:1.3;color:var(--panel);pointer-events:none}
.pillar .label{color:var(--brass-ink);margin-bottom:12px;position:relative}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;color:var(--navy);margin-bottom:10px;position:relative}
.pillar.big h3{font-size:1.95rem}
.pillar p{font-size:.93rem;color:var(--muted);margin-bottom:18px;position:relative;max-width:460px}
.inside{display:flex;flex-wrap:wrap;row-gap:4px;font-size:.84rem;color:var(--ink);margin-bottom:24px}
.inside li:not(:last-child)::after{content:"·";margin:0 9px;color:var(--brass)}
.go{margin-top:auto;font-weight:600;font-size:.88rem;color:var(--blue);display:inline-flex;gap:8px}

/* ---------- lists ---------- */
.latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.col-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.col-head h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--navy)}
.list{border-top:1px solid var(--line)}
.row{display:flex;gap:16px;align-items:baseline;padding:17px 4px;border-bottom:1px solid var(--line);transition:padding-left .2s}
.row:hover{padding-left:10px}
.row .ref{font-family:var(--serif);font-style:italic;color:var(--blue);font-size:.92rem;min-width:48px;flex-shrink:0}
.row .t{font-family:var(--serif);font-size:1.07rem;color:var(--navy);line-height:1.35}
.row .k{margin-left:auto;padding-left:12px;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}

/* ---------- courses ---------- */
.tracks{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.stack{display:grid;gap:26px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 28px;display:flex;flex-direction:column;transition:border-color .2s}
a.ccard:hover{border-color:var(--blue)}
.ccard.pending{background:var(--surface);border-style:dashed}
.track-k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);font-weight:600;margin-bottom:14px}
.ccard h4{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--navy);line-height:1.25;margin-bottom:10px}
.ccard.lead h4{font-size:1.8rem}
.ccard p{font-size:.93rem;color:var(--muted);margin-bottom:22px}
.ccard .lnk{align-self:flex-start;margin-top:auto}
.cfoot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px;font-size:.84rem;color:var(--muted)}
.cfoot b{color:var(--blue);font-weight:600}

/* ---------- navy duʿā band ---------- */
.band-navy{background:var(--navy);color:#fff}
.dua-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.band-navy .label{color:var(--brass-lt)}
.arabic{font-family:var(--arabic);direction:rtl;font-size:2.05rem;line-height:2.15;color:var(--panel);margin-top:18px}
.tr{font-family:var(--serif);font-style:italic;font-size:1.26rem;line-height:1.5;margin-bottom:14px}
.src{font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--brass-lt);margin-bottom:28px}
.dua-links{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-lt)}
.dua-links a{padding:15px 4px;font-size:.88rem;font-weight:600;border-bottom:1px solid var(--line-lt);display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.9)}
.dua-links a:nth-child(odd){padding-right:20px;border-right:1px solid var(--line-lt)}
.dua-links a:nth-child(even){padding-left:20px}
.dua-links a:hover{color:#fff}

/* ---------- resource scroll ---------- */
.res-scroll{display:flex;gap:18px;overflow-x:auto;padding:2px 2px 18px;scroll-snap-type:x proximity}
.res-scroll::-webkit-scrollbar{height:5px}
.res-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rescard{flex:0 0 232px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px 20px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.rescard:hover{border-color:var(--blue);transform:translateY(-2px)}
.rescard.hl{background:#fff;border-color:var(--brass)}
.rescard .cat{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-ink);font-weight:600;margin-bottom:12px}
.rescard h3{font-family:var(--serif);font-weight:500;font-size:1.14rem;color:var(--navy);margin-bottom:8px}
.rescard p{font-size:.86rem;color:var(--muted);line-height:1.5;flex:1;margin-bottom:16px}
.count{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.count strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1rem;color:var(--navy);letter-spacing:0;text-transform:none}

/* ---------- publications ---------- */
.pub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pub{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;transition:border-color .2s}
.pub:hover{border-color:var(--blue)}
.cover{height:150px;border-radius:2px;background:linear-gradient(150deg,var(--blue),var(--navy));position:relative;margin-bottom:18px;display:flex;align-items:flex-end;padding:14px 14px 14px 22px;min-width:0;overflow:hidden}
.cover::after{content:"";position:absolute;left:9px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.28)}
.cover span{font-family:var(--serif);color:#fff;font-size:.95rem;line-height:1.25;opacity:.94}
.cover.cover-img{padding:8px;align-items:center;justify-content:center;background:var(--surface)}
.cover.cover-img::after{display:none}
.cover.cover-img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:0}
.cover.c2{background:linear-gradient(150deg,#9C7C3A,#5E4A1E)}
.cover.c3{background:linear-gradient(150deg,#5E7A8E,#2D4353)}
.cover.c5{background:linear-gradient(150deg,#7A5C74,#4A3446)}
.cover.c4{background:linear-gradient(150deg,#7E8F6A,#3F4E33)}
.pub h4{font-family:var(--serif);font-weight:500;font-size:1.06rem;color:var(--navy);line-height:1.3;margin-bottom:6px}
.pub p{font-size:.84rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
.price{margin-top:auto;font-size:.86rem;font-weight:600;color:var(--navy)}

/* ---------- support + footer ---------- */
.support{background:var(--surface);border-top:1px solid var(--line)}
.support-inner{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-top:76px;padding-bottom:76px}
.support h2{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.3;color:var(--navy);max-width:600px;margin-top:14px}
.support p{color:var(--muted);margin-top:10px}
.ftr{background:var(--navy);color:rgba(255,255,255,.78);padding-top:80px;padding-bottom:38px}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:44px;padding-bottom:50px;border-bottom:1px solid var(--line-lt)}
.ftr-brand b{font-family:var(--serif);color:#fff;font-size:1.24rem;display:block;font-weight:500}
.ftr-brand span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lt);font-weight:600;display:block;margin-top:4px}
.ftr-brand p{margin-top:18px;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:300px}
.ftr h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:16px;font-weight:600}
.ftr-col a{display:block;font-size:.92rem;padding:6px 0}
.ftr-col a:hover{color:#fff}
.news p{font-size:.9rem;color:rgba(255,255,255,.62);margin-bottom:16px;line-height:1.55}
.news form{display:flex;border:1px solid var(--line-lt);border-radius:3px;overflow:hidden}
.news input{flex:1;min-width:0;background:transparent;border:0;padding:11px 13px;font:inherit;font-size:.88rem;color:#fff}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news input:focus{outline:none}
.news button{background:var(--brass);color:var(--navy);padding:0 16px;font-weight:600;font-size:.85rem}
.news-lang{font-size:.84rem;margin-top:12px;color:rgba(255,255,255,.62)}
.news-lang b{color:#fff;font-weight:600}
.news-lang a{text-decoration:underline;text-underline-offset:3px}
.ftr-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:.8rem;color:rgba(255,255,255,.5);flex-wrap:wrap}

/* ---------- inner page head ---------- */
.pagehead{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehead .wrap{position:relative;padding-top:52px;padding-bottom:60px}
.ph-ar{position:absolute;right:4%;top:18px;font-family:var(--arabic);font-size:9rem;line-height:1.2;color:var(--panel-2);pointer-events:none}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--muted);margin-bottom:34px}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.45}
.pagehead h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.1;color:var(--navy);margin-top:14px;max-width:820px}
.lede{font-size:1.1rem;color:var(--muted);max-width:680px;margin-top:18px}
.orient{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:5px;margin-top:40px;background:var(--surface)}
.orient.four{grid-template-columns:repeat(4,1fr)}
.orient>div{padding:24px 26px;border-right:1px solid var(--line)}
.orient>div:last-child{border-right:0}
.orient h2{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-ink);font-weight:600;margin-bottom:8px}
.orient p{font-size:.93rem;line-height:1.55}
.updated{font-size:.82rem;color:var(--muted);margin-top:14px}

/* ---------- Qur'an page ---------- */
.qsearch{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;margin-top:28px}
.qsearch:focus-within{border-color:var(--blue)}
.qsearch input{flex:1;min-width:0;border:0;height:62px;padding:0 20px;font:inherit;font-size:1.05rem;color:var(--ink)}
.qsearch input:focus{outline:none}
.qsearch button{background:var(--blue);color:#fff;padding:0 28px;font-weight:600}
.qsearch button:hover{background:var(--navy)}
.browse-by{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font-size:.88rem;color:var(--muted)}
.browse-by a{color:var(--blue);font-weight:600}
.week{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;margin-top:56px;align-items:start}
.weekcard{display:block;background:var(--navy);color:#fff;border-radius:4px;padding:34px 34px 30px;transition:background .2s}
.weekcard:hover{background:var(--navy-2)}
.weekcard .label{color:var(--brass-lt)}
.weekcard .ayah{font-family:var(--arabic);direction:rtl;font-size:1.75rem;line-height:1.9;color:var(--panel);margin:18px 0 6px;display:block}
.weekcard .gloss{font-family:var(--serif);font-style:italic;font-size:1rem;color:rgba(255,255,255,.72);display:block;margin-bottom:22px}
.weekcard h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.25;margin-bottom:6px}
.weekcard .ref{font-size:.84rem;color:rgba(255,255,255,.62);display:block;margin-bottom:22px}
.weekcard .lnk{color:#fff;border-color:rgba(255,255,255,.3)}
.srows{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:1fr 240px 24px;gap:40px;align-items:start;padding:30px 12px;border-bottom:1px solid var(--line);transition:background .2s}
.srow:hover{background:#fff}
.srow h3{font-family:var(--serif);font-weight:500;font-size:1.42rem;color:var(--navy);margin-bottom:6px}
.srow p{color:var(--muted);font-size:.95rem;max-width:620px}
.was{display:block;font-size:.8rem;color:var(--brass-ink);font-style:italic;margin-top:8px}
.tbc{display:block;font-size:.8rem;color:var(--brass-ink);margin-top:8px}
.srow dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.85rem;padding-top:6px}
.srow dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;font-weight:600;padding-top:3px}
.srow .ar{color:var(--blue);font-size:1.2rem;padding-top:4px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;padding:26px 24px;transition:border-color .2s}
.rel:hover{border-color:var(--blue)}
.rel .label{margin-bottom:12px}
.rel h3{font-family:var(--serif);font-weight:500;font-size:1.22rem;color:var(--navy);line-height:1.3;margin-bottom:8px}
.rel p{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.rel .go{margin-top:auto}

/* ---------- resource (leaf) page ---------- */
.guide{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:26px 28px;background:#fff;margin-top:36px}
.doc{width:60px;height:76px;background:var(--surface);border:1px solid var(--line);border-radius:2px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--brass-ink)}
.doc::before{content:"";position:absolute;top:-1px;right:-1px;width:16px;height:16px;background:linear-gradient(225deg,#fff 50%,var(--line) 50%)}
.doc::after{content:"";position:absolute;left:12px;right:12px;top:18px;height:22px;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 6px)}
.guide h2{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--navy);margin:6px 0 4px}
.guide p{font-size:.92rem;color:var(--muted)}
.guide-acts{display:flex;gap:10px;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-size:.84rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend b{color:var(--ink);font-weight:600}
.leaf{padding-top:72px;padding-bottom:104px}
.leaf-grid{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + 32px)}
.toc .label{margin-bottom:14px;color:var(--muted)}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);font-size:.9rem;color:var(--muted);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--navy)}
.toc a.on{border-color:var(--blue);color:var(--navy);font-weight:600}
.group{margin-bottom:72px;scroll-margin-top:calc(var(--hdr) + 24px)}
.group:last-child{margin-bottom:0}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.group-head h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:var(--navy)}
.from{font-size:.82rem;color:var(--muted)}
.from a{color:var(--blue);font-weight:600}
.items{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:1fr 160px 120px;gap:24px;align-items:start;padding:20px 2px;border-bottom:1px solid var(--line)}
.item h3{font-size:1rem;font-weight:600;color:var(--navy);line-height:1.4}
.item h3 a:hover{color:var(--blue)}
.item p{font-size:.88rem;color:var(--muted);margin-top:4px;line-height:1.5}
.by{font-style:italic}
.code{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue);margin-right:6px}
.fmt{display:flex;align-items:center;gap:8px;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--muted);padding-top:4px}
.fmt i{width:9px;height:9px;flex-shrink:0;border-radius:1px;background:var(--blue)}
.fmt.pdf i{background:var(--brass)}
.fmt.both i{background:linear-gradient(135deg,var(--blue) 50%,var(--brass) 50%)}
.fmt.video i{background:transparent;border-left:9px solid var(--navy);border-top:5px solid transparent;border-bottom:5px solid transparent;width:0;height:0;border-radius:0}
.fmt.course i{background:var(--navy);border-radius:50%}
.fmt.slides i{background:transparent;border:1.5px solid var(--brass)}
.acts{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:.86rem;font-weight:600;padding-top:1px}
.acts a{color:var(--blue)}
.acts a:hover{text-decoration:underline;text-underline-offset:3px}
.acts a.alt{color:var(--muted);font-weight:500}
.more-courses{display:none}
.items.expanded .more-courses{display:grid}
.show-all{margin-top:18px;font-weight:600;font-size:.9rem;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
details.preview{grid-column:1/-1}
details.preview summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--brass-ink);padding:4px 0}
details.preview summary::-webkit-details-marker{display:none}
.reading{margin-top:14px;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:30px 34px;max-width:700px}
.rsrc{display:block;font-size:.76rem;color:var(--muted);letter-spacing:.02em;margin-bottom:14px}
.reading h4{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--navy);margin-bottom:6px}
.reading dt{font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--navy);margin-top:20px}
.reading dd{font-family:var(--serif);font-size:1.04rem;line-height:1.7;margin-top:6px}
.rnote{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:24px}
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.books .cover{height:110px}
.note-line{font-size:.88rem;color:var(--muted);margin-top:20px}
.note-line a{color:var(--blue);font-weight:600}
.occasions{display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.occasions a{flex:1 1 180px;padding:20px 4px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.12rem;color:var(--navy);display:flex;justify-content:space-between;gap:10px;padding-right:24px}
.occasions a:hover{color:var(--blue)}

/* ---------- prototype helpers ---------- */
.proto{position:fixed;left:16px;bottom:16px;z-index:90;background:var(--navy);color:#fff;border-radius:4px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);font-size:.8rem;display:flex;align-items:center;gap:2px;padding:5px 5px 5px 14px;max-width:calc(100% - 32px)}
.proto b{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin-right:8px;white-space:nowrap}
.proto a{padding:6px 10px;border-radius:3px;color:rgba(255,255,255,.75);white-space:nowrap}
.proto a:hover{color:#fff}
.proto a.on{background:rgba(255,255,255,.13);color:#fff}
.proto .x{width:28px;height:28px;color:rgba(255,255,255,.6);font-size:1.1rem;flex-shrink:0}
.proto.hide{display:none}
.toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:4px;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:95;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .mega-inner{grid-template-columns:240px 1fr}
  .mega-feat{display:none}
  .nav-btn{padding:0 10px}
  .search-mini span{display:none}
  .pub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .nav,.search-mini,.lang,.mega{display:none!important}
  .burger{display:flex;margin-left:0}
  .hdr-actions{gap:10px}
  .brand img{height:34px}
  .sec{padding-top:76px;padding-bottom:76px}
  .hero-inner{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:72px}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar.big{grid-column:auto;padding:30px 24px 26px}
  .latest-grid,.tracks,.dua-inner,.week{grid-template-columns:1fr;gap:48px}
  .stack{gap:20px}
  .support-inner{flex-direction:column;align-items:flex-start;gap:32px;padding-top:72px;padding-bottom:72px}
  .ftr{padding-top:84px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:48px}
  .ftr-brand,.news{grid-column:1/-1}
  .orient,.orient.four{grid-template-columns:1fr}
  .orient>div{border-right:0;border-bottom:1px solid var(--line)}
  .orient>div:last-child{border-bottom:0}
  .srow{grid-template-columns:1fr;gap:16px;padding:26px 4px}
  .srow .ar{display:none}
  .related,.books{grid-template-columns:1fr}
  .guide{grid-template-columns:1fr;gap:18px}
  .doc{display:none}
  .leaf{padding-top:40px}
  .leaf-grid{grid-template-columns:1fr;gap:28px}
  .toc{position:sticky;top:var(--hdr);z-index:5;background:#fff;display:flex;overflow-x:auto;gap:4px;border-bottom:1px solid var(--line);margin:0 -22px;padding:0 22px}
  .toc .label{display:none}
  .toc a{border-left:0;border-bottom:2px solid transparent;padding:14px 10px;white-space:nowrap}
  .toc a.on{border-bottom-color:var(--blue)}
  .item{grid-template-columns:1fr;gap:10px}
  .acts{flex-direction:row;align-items:center;gap:18px}
  .pagehead .wrap{padding-top:36px;padding-bottom:48px}
  .ph-ar{font-size:6rem;right:-10px;top:40px}
  .arw{font-size:3rem}
}
@media (max-width:560px){
  .hero::before{-webkit-mask-image:linear-gradient(to bottom,transparent 35%,#000 75%);mask-image:linear-gradient(to bottom,transparent 35%,#000 75%)}
  .wrap{padding-left:22px;padding-right:22px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .pub-grid{grid-template-columns:1fr}
  .dua-links{grid-template-columns:1fr}
  .dua-links a:nth-child(odd),.dua-links a:nth-child(even){padding-left:4px;padding-right:4px;border-right:0}
  .arabic{font-size:1.75rem}
  .reading{padding:22px 20px}
  .donate{padding:8px 13px}
  .proto{left:10px;right:10px;bottom:10px;max-width:none;overflow-x:auto}
  .proto b{display:none}
  .guide-acts{flex-direction:column}
  .guide-acts .btn{width:100%}
  .ph-ar{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* ---------- WordPress / theme extras ---------- */
.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){.admin-bar .hdr{top:46px}}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:8px 14px}
.skip-link:focus{left:16px;top:16px}
.hdr-search{position:relative}
.hdr-search-panel{display:none;position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px;box-shadow:0 16px 30px -18px rgba(28,46,61,.5);z-index:90;width:min(380px,calc(100vw - 48px))}
.hdr-search.open .hdr-search-panel{display:block}
.hdr-search-panel .searchbar{margin:0;max-width:none}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.entry-content{max-width:720px}
.entry-content > * + *{margin-top:1em}
.entry-content h2,.entry-content h3{font-family:var(--serif);color:var(--navy);font-weight:500;line-height:1.25}
.entry-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pagination-ali{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pagination-ali a,.pagination-ali span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;font-weight:600;font-size:.88rem}
.pagination-ali .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.facet-bar{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px}
.facet-bar label{display:flex;flex-direction:column;gap:4px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.facet-bar select,.facet-bar input{font:inherit;font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);border:1px solid var(--line);padding:8px 10px;border-radius:3px;background:#fff;min-width:140px}
.notice-archive{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px 24px;margin:28px 0 8px;color:var(--muted)}
.notice-archive strong{color:var(--navy)}
.empty-state{padding:56px 0;color:var(--muted);max-width:560px}
.empty-state h2{font-family:var(--serif);color:var(--navy);font-weight:500;margin-bottom:10px}
.verse-head .arabic{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:18px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.84rem;color:var(--muted)}
.sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.selfpaced-card{max-width:640px;background:var(--surface);border:1px dashed var(--line);border-radius:4px;padding:36px 32px;margin-top:36px}
.hadith-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;background:var(--navy);color:#fff;border-radius:4px;padding:40px 36px;margin-top:36px}
.hadith-cta h2{font-family:var(--serif);font-weight:500;font-size:1.8rem;color:#fff;margin:10px 0 12px}
.hadith-cta p{color:rgba(255,255,255,.72)}
.hadith-cta .btn{background:var(--brass);color:var(--navy)}
.hadith-cta .btn:hover{background:var(--brass-lt)}
.search-hit .k{min-width:auto}
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 48px;align-items:start}
.woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:auto!important;max-width:none}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products{grid-column:1/-1;clear:both;width:100%}
.woocommerce div.product .related.products,.woocommerce div.product .upsells.products{margin-top:16px}
.woocommerce .related.products > h2,.woocommerce .upsells.products > h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--navy);margin:0 0 20px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.woocommerce ul.products li.product{width:100%!important;max-width:none!important;margin:0!important;float:none!important;clear:none!important;display:flex;min-width:0;padding:0}
.woocommerce ul.products li.product .pub{flex:1;width:100%;min-width:0}
.woocommerce div.product div.images img,.woocommerce-product-gallery__image img{width:auto;max-width:100%;height:auto;margin-inline:auto;object-fit:contain;object-position:center}
.woocommerce .price{margin-top:auto;font-size:.86rem;font-weight:600;color:var(--navy)}
.woo-notice{background:var(--surface);border:1px solid var(--line);padding:14px 18px;border-radius:4px;margin-bottom:24px}
.ali-form{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;max-width:420px;background:#fff;margin-top:18px}
.ali-form input{flex:1;min-width:0;border:0;padding:12px 14px;font:inherit}
.ali-form button{background:var(--blue);color:#fff;padding:0 18px;font-weight:600}
.donate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
.donate-card{border:1px solid var(--line);border-radius:4px;padding:24px;background:var(--surface)}
.donate-card h2{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--navy);margin-bottom:8px}
@media (max-width:900px){
  .hadith-cta,.donate-grid,.woocommerce div.product{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr}
}