:root{--ink:#070c26;--night:#0d1645;--lapis:#1a2a78;--gold:#d9ad55;--gold-hi:#f3d48b;--parchment:#f4ead2;
--mist:#aeb2cf;--line:rgba(217,173,85,.28);--veil:rgba(7,12,38,.72);
--display:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;--body:"Noto Naskh Arabic","Amiri","Segoe UI","Tahoma",sans-serif;
--gutter:max(16px,env(safe-area-inset-left,0px));--gutter-r:max(16px,env(safe-area-inset-right,0px));color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--parchment);font-family:var(--body);font-size:clamp(1rem,.96rem + .2vw,1.1rem);
line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold-hi);text-underline-offset:.25em}
a:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.35;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1080px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.bar{border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--parchment)}
.brand img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line)}
.brand b{font-family:var(--display);font-size:1.25rem}
.bar nav{display:flex;gap:18px;font-size:.95rem}
.bar nav a{color:var(--mist);text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--gold-hi)}
.crumbs{font-size:.88rem;color:var(--mist);padding-block:18px 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"‹";margin-inline-end:6px;color:var(--gold)}
.crumbs a{color:var(--mist)}
main{padding-block:12px 64px}
.dream{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:18px}
.dream h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin-bottom:10px}
.lead{color:var(--mist);font-size:1.1rem;margin-bottom:22px}
.panel{border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(13,22,69,.85),rgba(7,12,38,.85));
padding:22px 22px 20px;margin-top:20px}
.panel h2{font-size:1.35rem;color:var(--gold-hi);margin-bottom:10px}
.reading{font-size:1.15rem;line-height:2.1}
.quotes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quotes li{border-inline-start:2px solid var(--gold);padding-inline-start:14px;font-family:var(--display);font-size:1.15rem}
.src{margin-top:12px;font-size:.9rem;color:var(--mist)}
.long .reading+.reading{margin-top:14px}
.closing{margin-top:18px;color:var(--gold-hi);font-family:var(--display);font-size:1.15rem}
.adab{border-color:var(--gold)}
.note{font-size:.92rem;color:var(--mist)}
.art{position:sticky;top:16px;margin:0;border-radius:50% 50% 14px 14px/30% 30% 14px 14px;overflow:hidden;
border:1px solid var(--line);background:var(--night);aspect-ratio:9/16}
.art img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;text-decoration:none;font-weight:600;
background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--ink);margin-top:14px}
.more{margin-top:48px}
.more h2{font-size:1.5rem;margin-bottom:16px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.grid a{display:grid;gap:8px;text-decoration:none;color:var(--parchment)}
.grid img{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:50% 62%;border-radius:6px;border:1px solid var(--line);width:100%}
.grid b{font-family:var(--display);font-size:1.1rem;line-height:1.5}
.grid small{color:var(--mist);font-size:.82rem}
.grid a:hover b{color:var(--gold-hi)}
.hub h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin-top:18px}
.hub .lead{max-width:60ch;margin-top:10px}
.search{display:grid;gap:8px;margin:22px 0 28px;max-width:560px}
.search label{font-weight:600}
.search input{font:inherit;color:var(--parchment);background:var(--night);border:1px solid var(--line);border-radius:999px;
padding:10px 20px;width:100%}
.search input::placeholder{color:var(--mist)}
#count{font-size:.9rem;color:var(--mist);min-height:1.5em}
footer{border-top:1px solid var(--line);padding-block:28px;font-size:.92rem;color:var(--mist)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}
footer a{color:var(--mist)}
@media (max-width:760px){.dream{grid-template-columns:1fr}.art{position:static;max-width:320px;margin-inline:auto;order:-1}}