:root{--dark:#202326;--gold:#c89955;--paper:#f5f1e9;--white:#fff;--text:#343434}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font-family:"Tajawal",sans-serif;line-height:1.85}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.blog-header{background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px max(5vw,24px);position:sticky;top:0;z-index:5}.blog-header .brand{font-size:1.25rem;font-weight:800}.blog-header .brand b{color:var(--gold)}.blog-header nav{display:flex;gap:22px;flex-wrap:wrap}.blog-header nav a:hover{color:var(--gold)}.blog-hero{background:linear-gradient(135deg,#25292c,#3a3f42);color:#fff;text-align:center;padding:88px 20px}.blog-hero small{color:var(--gold);font-weight:800}.blog-hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.15;margin:12px 0}.blog-hero p{max-width:720px;margin:auto;color:#d9d9d9}.blog-wrap{width:min(1160px,92%);margin:60px auto}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.post-card{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 10px 35px #20232612}.post-card img{width:100%;height:220px;object-fit:cover}.post-card div{padding:24px}.post-card time{color:#8a6634;font-size:.9rem}.post-card h2{font-size:1.35rem;line-height:1.45;margin:8px 0}.post-card p{color:#666}.post-card strong{color:#8a6634}.article{width:min(850px,92%);margin:55px auto;background:#fff;padding:clamp(25px,5vw,64px);box-shadow:0 14px 45px #20232612}.breadcrumbs{color:#806238;font-size:.92rem}.article h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.25;color:var(--dark);margin:20px 0}.article h2{color:var(--dark);font-size:1.6rem;margin-top:38px}.article .lead{font-size:1.17rem;color:#555}.article img{width:100%;max-height:430px;object-fit:cover;margin:30px 0}.article ul{padding-right:22px}.article a{color:#8a6634;font-weight:800}.article-toc{background:#f7f2e9;border-right:4px solid var(--gold);padding:20px 24px;margin:28px 0}.article-toc h2{font-size:1.25rem;margin:0 0 10px}.article-toc ol{margin:0;padding-right:22px}.article-keywords{background:#faf7f1;padding:20px 24px;margin-top:32px}.article-keywords ul{columns:2;margin-bottom:0}.article-faq details{border-top:1px solid #eadfce;padding:14px 0}.article-faq summary{cursor:pointer;font-weight:800;color:var(--dark)}.article .cta{background:var(--dark);color:#fff;padding:30px;margin-top:40px}.article .cta h2{color:#fff;margin-top:0}.article .cta a{display:inline-block;background:var(--gold);color:#161616;font-weight:800;padding:11px 20px}.blog-footer{background:#17191b;color:#ccc;text-align:center;padding:28px}.blog-footer a{color:var(--gold)}
@media(max-width:800px){.post-grid{grid-template-columns:1fr}.article-keywords ul{columns:1}.blog-header{align-items:flex-start}.blog-header nav{gap:12px;font-size:.9rem}.blog-hero{padding:65px 18px}.post-card img{height:240px}}

/* Article polish: stronger contrast, clearer hover states, and calmer long-form reading. */
.post-card{border:1px solid rgba(32,35,38,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.post-card:hover{transform:translateY(-6px);border-color:rgba(200,153,85,.38);box-shadow:0 18px 42px rgba(32,35,38,.17)}
.post-card:hover h2{color:#6f4a18}
.post-card strong,.post-card a strong{transition:color .18s ease}
.post-card:hover strong{color:#5f3d11}
.article{border:1px solid rgba(32,35,38,.07);border-radius:10px}
.article h2{line-height:1.45;padding-bottom:8px;border-bottom:1px solid #efe5d6}
.article h3{position:relative;margin:24px 0 9px;padding-right:18px;color:#2b2f32;font-size:1.18rem;line-height:1.65}
.article h3:before{content:"";position:absolute;right:0;top:.82em;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(200,153,85,.16)}
.article p{margin:0 0 15px}
.article a{color:#6f4a18;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(111,74,24,.34);transition:color .18s ease,background .18s ease,text-decoration-color .18s ease}
.article a:hover,.article a:focus-visible{color:#1f2326;background:#fff3dd;text-decoration-color:#c89955;outline:none}
.article-toc{border:1px solid #eadcc8;border-right:5px solid var(--gold);border-radius:10px;background:linear-gradient(180deg,#fff9ef,#f7f2e9)}
.article-toc a{display:inline-block;padding:3px 0;color:#5f3d11;text-decoration:none}
.article-toc a:hover,.article-toc a:focus-visible{color:#202326;background:#ffe9bf;border-radius:6px;padding-inline:6px}
.article-keywords{border:1px solid #eadfce;border-radius:10px}
.article-faq details{transition:background .18s ease,padding-inline .18s ease}
.article-faq details:hover{background:#fff8ec;padding-inline:12px}
.article-faq summary:hover{color:#6f4a18}
.article .cta{border-radius:10px;background:linear-gradient(135deg,#202326,#111820);box-shadow:0 16px 34px rgba(17,24,32,.18)}
.article .cta a{border-radius:999px;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease}
.article .cta a:hover,.article .cta a:focus-visible{background:#fff;color:#202326;transform:translateY(-2px)}
@media(max-width:800px){.article{width:min(100% - 24px,850px);margin:32px auto;padding:24px 18px;border-radius:8px}.article h1{font-size:clamp(1.7rem,8vw,2.35rem)}.article h2{font-size:1.35rem}.article h3{font-size:1.08rem}.article-toc{padding:17px 18px}.article-faq details:hover{padding-inline:8px}}