:root{--bg:#f5f3fb;--ink:#1d1a33;--mute:#5b5878;--card:#fff;--line:#e3dff2;--a:#ffb703;--b:#ef476f;--c:#06d6a0;--d:#4361ee}
@media(prefers-color-scheme:dark){:root{--bg:#141126;--ink:#efecff;--mute:#aaa6c9;--card:#1d1936;--line:#2c2750}}
*{box-sizing:border-box}
body{margin:0;font:19px/2 Tajawal,"Noto Sans Arabic",sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.brand{font-family:"Readex Pro",Tajawal,sans-serif;line-height:1.5}
a{color:inherit}
header,main,footer{max-width:760px;margin:0 auto;padding-inline:20px}
body.home header,body.home main,body.home footer{max-width:940px}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-block:18px}
.brand{font-weight:700;font-size:26px;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand::before{content:"";width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--a),var(--b))}
nav a{display:inline-block;margin-inline-start:6px;padding:2px 14px;border-radius:99px;text-decoration:none;color:var(--mute);font-size:16px}
nav a:hover,nav a:focus-visible{background:var(--card);color:var(--ink)}
main{padding-bottom:40px}
h1{font-size:clamp(27px,5.5vw,40px);font-weight:700;margin:12px 0 14px}
.lead{font-size:21px;color:var(--mute);margin:0 0 28px}
article h2{font-size:23px;font-weight:600;margin:38px 0 4px;padding-inline-start:14px;border-inline-start:6px solid var(--a)}
article p,article li{max-width:36em}
li::marker{color:var(--b)}
strong{font-weight:600}
.note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 18px;font-size:16px;margin-top:32px}
.hero{background:linear-gradient(135deg,#231942,#4361ee);color:#fff;border-radius:28px;padding:34px 30px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin:6px 0 34px}
.hero h1{margin:0 0 10px;font-size:clamp(26px,5vw,40px)}
.hero p{margin:0;opacity:.92;max-width:30em}
.hero svg{height:150px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.post{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none}
.post .cover{height:128px}
.post .t{padding:12px 18px 18px}
.post h3{margin:0 0 4px;font-size:18px}
.post p{margin:0;color:var(--mute);font-size:15px;line-height:1.8}
.post:hover h3,.post:focus-visible h3{text-decoration:underline}
.cover{display:flex;justify-content:center;align-items:center;overflow:hidden}
.cover svg{height:100%;width:auto;max-width:100%}
article .cover{height:210px;border-radius:26px;margin:0 0 26px}
.c1{background:linear-gradient(135deg,#4361ee,#7209b7)}.c2{background:linear-gradient(135deg,#ef476f,#ff9e00)}
.c3{background:linear-gradient(135deg,#06d6a0,#118ab2)}.c4{background:linear-gradient(135deg,#7209b7,#ef476f)}
.c5{background:linear-gradient(135deg,#ff9e00,#ef476f)}.c6{background:linear-gradient(135deg,#118ab2,#06d6a0)}
.c7{background:linear-gradient(135deg,#3a0ca3,#4361ee)}
footer{padding-block:34px;color:var(--mute);font-size:15px}
footer a{margin-inline-end:16px}
a:focus-visible{outline:3px solid var(--a);outline-offset:3px}
@media(max-width:560px){.hero{grid-template-columns:1fr}.hero svg{display:none}}