:root{--ivory:#F7F3E9;--beige:#C6AD7C;--green:#243B29;--deep:#16261A;--sand:#EAE6DA;--ink:#243B29;--muted:rgba(36,59,41,.7);--line:rgba(36,59,41,.14);--line-l:rgba(247,243,233,.16);--muted-l:rgba(247,243,233,.7);--gut:max(16px,5vw)}
*{box-sizing:border-box}
html{background:var(--ivory);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,system-ui,sans-serif;font-size:1.0625rem;line-height:2}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--beige);outline-offset:3px}
/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(247,243,233,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:block;width:60px;height:auto}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{text-decoration:none;font-size:.9rem;padding:8px 14px;border-radius:999px}
.top nav a:hover{background:rgba(36,59,41,.07)}
.top nav a.cta{background:var(--green);color:var(--ivory)}
/* breadcrumb + hero */
.crumb{font-size:.82rem;color:var(--muted);padding-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.hero{padding-block:24px 36px;border-bottom:1px solid var(--line)}
.tag{display:inline-block;background:var(--green);color:var(--ivory);font-size:.8rem;padding:4px 12px;border-radius:999px;margin-bottom:16px}
h1{font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.35;margin:0;text-wrap:balance;max-width:24ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;color:var(--muted);font-size:.88rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--muted);max-width:62ch;margin:20px 0 0}
/* layout */
.layout{display:grid;gap:40px;padding-block:40px 80px}
article{max-width:70ch}
article h2{font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.5;margin:48px 0 12px;color:var(--green)}
article h3{font-size:1.15rem;font-weight:500;margin:28px 0 6px}
article p{margin:0 0 16px}
article ul,article ol{padding-inline-start:22px;margin:0 0 18px}
article li{margin-bottom:8px}
article li::marker{color:var(--beige)}
article strong{color:var(--green);font-weight:500}
article a{color:var(--green);text-decoration-color:var(--beige);text-underline-offset:4px}
.note{background:var(--sand);border-inline-start:3px solid var(--beige);padding:16px 20px;margin:24px 0;border-radius:4px;font-size:.98rem}
.toc{border:1px solid var(--line);padding:20px 22px;border-radius:12px;margin:8px 0 8px}
.toc b{display:block;margin-bottom:8px;font-weight:500}
.toc ol{margin:0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:.95rem}
.tbl{overflow-x:auto}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:start;vertical-align:top}
th{font-weight:500;color:var(--green);background:var(--sand)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:500;color:var(--green);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--beige);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:10px 0 0;color:var(--muted)}
.cta-box{background:var(--green);color:var(--ivory);padding:28px;border-radius:16px;margin-top:48px;display:grid;gap:14px}
.cta-box h2{color:var(--ivory);margin:0;font-size:1.5rem}
.cta-box p{margin:0;color:var(--muted-l)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding-inline:24px;border-radius:999px;background:var(--beige);color:var(--deep);text-decoration:none;font-weight:500;justify-self:start}
aside .card{border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:10px;position:sticky;top:90px}
aside h2{font-size:1rem;font-weight:500;margin:0}
aside ul{list-style:none;margin:0;padding:0;display:grid}
aside li a{display:block;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.6}
aside li a:hover{color:var(--beige)}
/* list page */
.grid{display:grid;gap:16px;padding-block:40px 80px}
.post{display:grid;gap:10px;border:1px solid var(--line);border-radius:16px;padding:24px;text-decoration:none;transition:border-color .3s,background .3s}
.post:hover{border-color:var(--green);background:#fbf8f1}
.post h2{font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:1.3rem;line-height:1.5;margin:0;color:var(--green)}
.post p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.85}
.post small{color:var(--muted)}
/* footer */
footer{background:var(--deep);color:var(--ivory);padding-block:48px}
footer .wrap{display:grid;gap:22px}
footer .logo{width:110px}
footer p{margin:0;color:var(--muted-l);font-size:.9rem}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer nav a{text-decoration:none;color:var(--muted-l);font-size:.9rem}
footer nav a:hover{color:var(--ivory)}
@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 300px;gap:64px}
  .grid{grid-template-columns:repeat(2,1fr)}
  footer .wrap{grid-template-columns:auto 1fr;align-items:center}
}
@media (max-width:600px){.top nav a:not(.cta){display:none}}