/* Layout: sticky header with a pages drawer, narrow reading column, soft emerald and gold on mint. RTL Urdu. */
:root{
  --bg:#EFF6F2; --paper:#FAFDFB; --tint:#E1EFE8; --sky:#E3EEF3;
  --ink:#15302A; --muted:#506960; --emerald:#1E6F5C; --emerald-ink:#FFFFFF;
  --gold:#B88A2C; --line:#C7DCD2; --rose:#F3E4E4;
  --ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",serif;
  --ar:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --ui:"Noto Naskh Arabic","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1A16; --paper:#112620; --tint:#16302A; --sky:#142A33;
  --ink:#E7F1EC; --muted:#9CB7AC; --emerald:#5CC2A6; --emerald-ink:#0B1A16;
  --gold:#E2BD6B; --line:#26463C; --rose:#2B1F22; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1A16; --paper:#112620; --tint:#16302A; --sky:#142A33;
  --ink:#E7F1EC; --muted:#9CB7AC; --emerald:#5CC2A6; --emerald-ink:#0B1A16;
  --gold:#E2BD6B; --line:#26463C; --rose:#2B1F22; color-scheme:dark}

*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ur);font-size:.8rem;line-height:2.15;
  padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
a{color:var(--emerald)}
img{max-width:100%;height:auto;display:block}
.site{max-width:46rem;margin:0 auto}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);border-bottom:1px solid var(--line);
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:0}
.top-in{padding:4px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);line-height:1.9;min-width:0}
.brand .bt{display:flex;flex-direction:column;min-width:0}
.logo{flex-shrink:0}
.brand b{font-size:.84rem;font-weight:700}
.brand small{font-size:.76rem;color:var(--muted);line-height:1.4;font-family:var(--ui)}
.tools{display:flex;gap:8px;flex-shrink:0}
.chip{font-family:var(--ui);font-size:.78rem;line-height:1.4;cursor:pointer;background:var(--tint);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 16px}
.chip:hover{border-color:var(--emerald)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.mainnav{flex-basis:100%;display:none;font-family:var(--ui);max-height:72vh;overflow-y:auto;padding-bottom:8px}
.mainnav.open{display:block}
.mm,.mm ul{list-style:none;margin:0;padding:0}
.mm>li{border-top:1px solid var(--line)}
.mm>li:first-child{border-top:0}
.top-link,.dd>button{display:block;width:100%;text-align:start;font:inherit;font-size:.8rem;line-height:1.6;padding:9px 4px;background:none;border:0;color:var(--ink);text-decoration:none;cursor:pointer}
.dd>button::after{content:"▾";float:inline-end;color:var(--gold)}
.dd>button[aria-expanded="true"]::after{content:"▴"}
.mm .on,.mm a[aria-current="page"]{color:var(--emerald);font-weight:700}
.dd ul{padding:0 10px 8px}
.dd ul a{display:block;padding:6px 8px;border-radius:8px;font-size:.78rem;line-height:1.6;color:var(--ink);text-decoration:none}
.dd ul a:hover{background:var(--tint)}
@media (min-width:900px){
  .menu-toggle{display:none}
  .mainnav{display:block;flex-basis:100%;order:3;max-height:none;overflow:visible;padding:0;border-top:1px solid var(--line)}
  .top-in{flex-wrap:wrap}
  .mm{display:flex;gap:2px;align-items:center;justify-content:space-between}
  .mm>li{border:0;position:relative}
  .top-link,.dd>button{width:auto;padding:8px 10px;border-radius:10px;font-size:.78rem}
  .top-link:hover,.dd>button:hover{background:var(--tint)}
  .dd ul{position:absolute;inset-inline-start:0;top:100%;min-width:15rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 12px 30px rgba(10,40,30,.18);z-index:60}
}
.crumb{font-family:var(--ui);font-size:.82rem;color:var(--muted);line-height:1.8;margin:0 0 4px}
.crumb a{color:var(--muted)}

/* hero */
.hero{padding:22px 0 10px}
.band{display:block;width:100%;height:46px;border-radius:12px;margin-bottom:14px}
.scene{display:block;width:100%;height:clamp(84px,17vw,124px);border-radius:14px;margin-bottom:14px;border:1px solid var(--line)}
.scene.big{height:clamp(110px,24vw,170px)}
.eyebrow{font-family:var(--ui);color:var(--gold);font-weight:700;margin:0;font-size:.78rem;line-height:2}
h1{font-size:clamp(.92rem,3.1vw,1.15rem);line-height:2;margin:0 0 4px;font-weight:700;text-wrap:balance}
.lede{font-size:.78rem;line-height:2;color:var(--muted);margin:0}
.portrait{margin:16px 0}
.portrait img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 8px 28px rgba(20,60,50,.14)}
.portrait.tall{max-width:24rem;margin-inline:auto}
.portrait figcaption,.cap{font-family:var(--ui);font-size:.85rem;line-height:1.9;color:var(--muted);padding:4px 6px}

/* text */
h2{font-size:.86rem;line-height:2.1;margin:30px 0 4px;color:var(--emerald);font-weight:700;text-wrap:balance}
h3{font-size:.8rem;line-height:2.1;margin:18px 0 0;font-weight:700}
p{margin:0 0 12px}
ul,ol{padding-inline-start:1.4em;margin:0 0 14px}
li{margin-bottom:4px}
.aya{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px 8px;margin:18px 0;text-align:center}
.aya .ar{font-family:var(--ar);font-size:1.08rem;line-height:2.2;margin:0 0 4px;color:var(--ink)}
.aya .tr{margin:0;font-size:.78rem}
.aya .ref{font-family:var(--ui);font-size:.82rem;line-height:1.9;color:var(--gold);margin:0 0 6px;font-weight:700}
.saying{background:var(--tint);border-radius:16px;padding:12px 18px 6px;margin:16px 0}
.saying p{margin:0 0 6px}
.saying .ref{font-family:var(--ui);font-size:.82rem;line-height:1.9;color:var(--muted)}
.note{background:var(--sky);border-radius:14px;padding:8px 16px 0;margin:16px 0;font-size:.76rem;line-height:2.1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px 16px 4px;min-width:0}
.card h3{margin:0;color:var(--emerald)}
.card p{font-size:.76rem;line-height:2.1}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
.pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:14px 0}
.pagegrid a,.pagegrid span{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px 14px;text-decoration:none;color:var(--ink);font-size:1rem;line-height:2.1}
.pagegrid a:hover{border-color:var(--emerald)}
.pagegrid .soon{opacity:.55;border-style:dashed}
.pagegrid small{display:block;font-family:var(--ui);font-size:.75rem;line-height:1.6;color:var(--gold);padding-bottom:4px}
.tbl{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.76rem;line-height:2}
th,td{border-bottom:1px solid var(--line);padding:4px 10px;text-align:start;vertical-align:top}
th{color:var(--gold);font-family:var(--ui);font-size:.85rem}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:34px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.pager a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:4px 16px;text-decoration:none;color:var(--ink);line-height:2.1;min-width:0}
.pager small{display:block;font-family:var(--ui);font-size:.72rem;color:var(--gold);line-height:1.6}
.foot{margin:34px calc(-1*max(16px,env(safe-area-inset-left,0px))) 0;background:var(--tint);border-top:1px solid var(--line);
  padding:26px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));font-size:.8rem;line-height:2.1}
.foot-in{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px}
.fabout p{margin:0 0 8px}
.fbrand{font-size:.9rem;font-weight:700;color:var(--emerald)}
.fcontact{font-family:var(--ui);font-size:.9rem;line-height:1.9;color:var(--muted);direction:ltr;text-align:start}
.fcontact span{display:block;direction:rtl;color:var(--gold);font-weight:700}
.fmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.fcol h3{font-size:.82rem;margin:0 0 2px;color:var(--emerald)}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0}
.fcol a,.fbase a{font-family:var(--ui);font-size:.76rem;line-height:2;color:var(--ink);text-decoration:none}
.fcol a:hover,.fbase a:hover{color:var(--emerald);text-decoration:underline}
.fbase{max-width:72rem;margin:18px auto 0;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.fbase p{margin:0}
@media (min-width:900px){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.copy{font-family:var(--ui);font-size:.85rem;line-height:1.4;cursor:pointer;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-inline-start:8px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.kv .card p{font-family:var(--ui);direction:ltr;text-align:start;overflow-wrap:anywhere;line-height:1.9}
@media (prefers-reduced-motion:no-preference){main>*{animation:rise .5s ease-out both}@keyframes rise{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* islamic illustrations: colours follow the theme */
.scene .e,.strip .e,.logo .e{fill:var(--emerald)}
.scene .g,.strip .g,.logo .g{fill:var(--gold)}
.scene .bgc{fill:var(--tint)}
.scene .pg{fill:var(--paper)}
.scene .tilebg{fill:url(#tile)}
.scene .gl,.logo .gl2{fill:none;stroke:var(--gold);stroke-width:1.4}
.strip{display:block;width:100%;height:24px}
.strip.head .bgc{fill:var(--paper)}
.strip.foot-strip{height:44px;margin-top:30px}
.strip.foot-strip .bgc{fill:var(--bg)}
.foot{margin-top:0}
.flogo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
h2{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.7 6.3L21 5l-2.3 6.3L23 12l-4.3.7L21 19l-6.3-2.3L12 23l-2.7-6.3L3 19l2.3-6.3L1 12l4.3-.7L3 5l6.3 2.3z' fill='none' stroke='%23B88A2C' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .85em/15px;padding-right:23px}

/* back button and quick links bar */
.topbar{display:flex;align-items:center;gap:10px;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:5px max(16px,env(safe-area-inset-right,0px)) 5px max(16px,env(safe-area-inset-left,0px));background:var(--emerald);color:var(--emerald-ink);font-family:var(--ui);font-size:.8rem}
.backbtn{flex-shrink:0;font:inherit;font-size:.8rem;cursor:pointer;background:rgba(255,255,255,.16);color:inherit;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;line-height:1.7}
.backbtn:hover{background:rgba(255,255,255,.28)}
.quick{display:flex;align-items:center;gap:4px;overflow-x:auto;white-space:nowrap;min-width:0;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick .ql{opacity:.75;padding-inline:4px 6px}
.quick a{color:inherit;text-decoration:none;padding:3px 10px;border-radius:999px;line-height:1.7}
.quick a:hover,.quick a[aria-current="page"]{background:rgba(255,255,255,.22)}
:root[data-theme="dark"] .topbar{background:var(--tint);color:var(--ink)}
/* slides */
.slides{position:relative;margin:4px 0 18px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--tint)}
.slide{display:flex;padding:14px 18px 44px;min-height:190px;text-align:center;flex-direction:column;justify-content:center}
.slides.js .slide{display:none}
.slides.js .slide.on{display:flex;animation:sfade .5s ease}
@keyframes sfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slides.js .slide.on{animation:none}}
.slides:not(.js) .slide{border-bottom:1px solid var(--line);min-height:0;padding-bottom:14px}
.slide .lab{font-family:var(--ui);font-size:.74rem;font-weight:700;color:var(--gold);margin:0;line-height:1.9;letter-spacing:.02em}
.slide .sa{font-family:var(--ar);font-size:1.2rem;line-height:2.1;margin:2px 0;color:var(--ink)}
.slide .st{margin:0;font-size:.76rem;line-height:2.1}
.slide .st.big{font-size:.86rem;line-height:2.2;margin:6px 0}
.slide .sr{margin:0;font-family:var(--ui);font-size:.75rem;color:var(--muted);line-height:1.9}
.s-q{background:linear-gradient(160deg,#1E6F5C,#154c40);color:#FFFFFF}
.s-q .sa{color:#F4D58D}.s-q .lab{color:#F4D58D}.s-q .sr{color:#C9E6DB}
.s-h{background:var(--paper)}
.s-s{background:linear-gradient(160deg,#F8EBCB,#EBD49B);color:#2A2210}
.s-s .lab{color:#8A6516}.s-s .sr{color:#5E4A18}
:root[data-theme="dark"] .s-s{background:linear-gradient(160deg,#3A3015,#2B2410);color:#F3E6BD}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .s-s{background:linear-gradient(160deg,#3A3015,#2B2410);color:#F3E6BD}:root:not([data-theme="light"]) .s-s .lab{color:#E2BD6B}:root:not([data-theme="light"]) .s-s .sr{color:#CDBB86}}
.sctl{position:absolute;inset-inline:0;bottom:6px;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.sctl button{pointer-events:auto;font-family:var(--ui);font-size:1.1rem;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:50%;border:1px solid rgba(128,128,128,.45);background:rgba(255,255,255,.7);color:#15302A}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:rgba(128,128,128,.5);display:block}
.dots i.on{background:var(--gold)}
.slides:not(.js) .sctl{display:none}

.brand b,.top-link,.dd>button{white-space:nowrap}
.strip.head{height:26px}

/* credential line, quick links band, footer accordions, pager */
.cred{margin:8px 0 0;font-family:var(--ui);font-size:.74rem;line-height:1.9;color:var(--emerald);background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:4px 12px}
.qband{margin:26px 0 0;padding:10px 0 4px;border-top:1px solid var(--line)}
.qband h3{margin:0 0 4px;font-size:.8rem;color:var(--gold);font-family:var(--ui)}
.qband .qs{display:flex;flex-wrap:wrap;gap:6px}
.qband a{font-family:var(--ui);font-size:.76rem;line-height:1.7;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.qband a:hover{border-color:var(--emerald);color:var(--emerald)}
.pager{margin-top:22px}
.fmap{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:700px){.fmap{grid-template-columns:repeat(3,1fr);align-items:start}}
details.fcol{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 12px}
details.fcol summary{cursor:pointer;list-style:none;font-weight:700;font-size:.82rem;color:var(--emerald);line-height:2.3}
details.fcol summary::-webkit-details-marker{display:none}
details.fcol summary::after{content:"▾";float:inline-end;color:var(--gold)}
details.fcol[open] summary::after{content:"▴"}
details.fcol ul{padding-bottom:8px}
.tbl td.ar{font-weight:700;color:var(--emerald);text-align:center;width:50%}
.tbl td[colspan]{color:var(--muted);font-size:.95em}
figure.photo{margin:14px 0}
figure.photo img{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 6px 20px rgba(20,60,50,.12)}
figure.photo figcaption{font-size:.72rem;text-align:center;margin-top:6px;opacity:.85}
figure.photo.narrow{max-width:360px;margin-inline:auto}
.verses{display:grid;gap:10px;margin:12px 0}
.verse{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card,transparent)}
.verse .m{font-weight:700;color:var(--emerald);text-align:center;line-height:2.1;margin:0 0 4px}
.verse .t{margin:0;font-size:.95em;color:var(--muted)}