/* Blog pages: same brand system as the home page */
:root{
  --canvas:#0B1424;--panel:#111D33;--accent:#C8875A;--accent-hover:#DA9D70;--accent-muted:rgba(200,135,90,.26);
  --signal:#E04A3C;--text-secondary:#A7B2C4;--text-primary:#F3ECE1;--line:rgba(243,236,225,.09);--line-strong:rgba(243,236,225,.42);
  --fd:'Alexandria',system-ui,sans-serif;--fb:'IBM Plex Sans Arabic',system-ui,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;
  --e-out:cubic-bezier(.22,1,.36,1);--gut:clamp(16px,4vw,56px);--max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--canvas);scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;color:var(--text-primary);font:400 17px/1.7 var(--fb);-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--e-out) both}
html[lang="ar"] body{font-size:18px;line-height:1.85}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1.12;margin:0;letter-spacing:-.018em;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{letter-spacing:0;line-height:1.35}
.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:100;background:var(--accent);color:var(--canvas);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transform:translateY(-160%);transition:transform .4s var(--e-out)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
main{position:relative;z-index:1}
.mono{font-family:var(--fm);letter-spacing:.06em}
html[lang="ar"] .mono,[lang="ar"] .mono{font-family:var(--fb);letter-spacing:0}

/* environment */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;width:80vmax;height:80vmax;border-radius:50%}
.g1{top:-30vmax;inset-inline-start:-20vmax;background:radial-gradient(circle,rgba(200,135,90,.07),rgba(200,135,90,0) 60%);animation:drift1 84s ease-in-out -20s infinite alternate}
.g2{bottom:-40vmax;inset-inline-end:-25vmax;background:radial-gradient(circle,rgba(86,116,170,.1),rgba(86,116,170,0) 62%);animation:drift2 96s ease-in-out -44s infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,22vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-16vmax,-18vmax) scale(.92)}}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* nav */
.nav{position:sticky;top:0;z-index:60;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut);border-bottom:1px solid var(--line);background:rgba(11,20,36,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:600 16px/1 var(--fd);letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:30px;margin:0;padding:0;list-style:none}
.nav-links a{font-size:14.5px;color:var(--text-secondary);text-decoration:none;transition:color .35s var(--e-out)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text-primary)}
.nav-r{display:flex;align-items:center;gap:12px}
.lang{min-width:46px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font:500 13px/1 var(--fm);cursor:pointer}
.lang:hover{border-color:var(--text-primary);background:rgba(243,236,225,.06)}
.lang [lang="ar"]{font:600 14px/1 var(--fb)}
.nav .btn{min-height:40px;padding:0 18px;font-size:14px}
@media (max-width:1000px){.nav-links{display:none}}
@media (max-width:540px){.nav .btn{display:none}}

/* buttons, labels */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;border:0;font:600 15.5px/1 var(--fb);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .35s var(--e-out),border-color .35s var(--e-out),transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.btn-p{background:var(--accent);color:#0B1424}
.btn-p:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(218,157,112,.75)}
.btn-g{color:var(--text-primary);border:1px solid var(--line-strong)}
.btn-g:hover{border-color:var(--text-primary);background:rgba(243,236,225,.07)}
@media (pointer:coarse){.btn,.lang{min-height:44px}}
.kick{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.kick::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
html[lang="ar"] .kick{font:500 14.5px/1.4 var(--fb);letter-spacing:0;text-transform:none}
.lede{margin-top:20px;max-width:58ch;color:var(--text-secondary);font-size:clamp(17px,1.3vw,20px)}
.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;text-decoration:none;min-height:44px}
.lnk:hover{color:var(--accent-hover)}
.arr{width:16px;height:16px;flex:none}
[dir="rtl"] .arr{transform:scaleX(-1)}

/* entrances */
.rv .st{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.rv.in .st{opacity:1;transform:none;transition-delay:calc(var(--i,0)*90ms)}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.wrap-n{max-width:760px;margin-inline:auto;padding:0 var(--gut)}
.wrap-w{max-width:1080px;margin-inline:auto;padding:0 var(--gut)}

/* list */
.bhead{padding:clamp(80px,14vh,140px) 0 20px}
.bhead h1{font-size:clamp(38px,5.4vw,72px);margin-top:20px;max-width:16ch}
.blist{padding:40px 0 clamp(80px,12vh,120px)}
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.agrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.acard{display:block;text-decoration:none;color:inherit}
.acard-in{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:border-color .5s var(--e-out),transform .5s var(--e-out)}
.acard:hover .acard-in{border-color:rgba(200,135,90,.4);transform:translateY(-4px)}
.acard-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#0F1A2E}
.acard-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-out)}
.acard:hover .acard-img img{transform:scale(1.04)}
.acard-ph{display:block;width:100%;height:100%;background:radial-gradient(circle at 30% 30%,rgba(200,135,90,.28),transparent 60%),radial-gradient(circle at 75% 70%,rgba(86,116,170,.28),transparent 60%)}
.acard-b{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.acard-m{font-size:12.5px;color:var(--text-secondary)}
.acard-t{font:600 20px/1.4 var(--fd)}
.acard-x{font-size:15px;line-height:1.65;color:var(--text-secondary)}
.acard.feat{grid-column:1/-1}
.acard.feat .acard-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.acard.feat .acard-img{aspect-ratio:auto;min-height:340px}
.acard.feat .acard-b{justify-content:center;padding:clamp(28px,4vw,56px)}
.acard.feat .acard-t{font-size:clamp(24px,2.6vw,36px);font-weight:800;line-height:1.25}
.empty{padding:48px 0;color:var(--text-secondary);font-size:19px}

/* article */
.post{padding:clamp(56px,10vh,100px) 0 0}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);text-decoration:none;font-size:15px;min-height:44px}
.back:hover{color:var(--text-primary)}
.arr.bk{transform:none}
[dir="rtl"] .arr.bk{transform:scaleX(-1)}
.pmeta{margin-top:24px;font-size:13px;color:var(--text-secondary)}
.phead h1{font-size:clamp(34px,4.6vw,58px);margin-top:14px}
.pcover{margin:clamp(36px,6vh,56px) auto 0}
.pcover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px solid var(--line)}
.prose{margin-top:clamp(40px,6vh,64px);font-size:19px;line-height:1.85;color:#E9E2D7}
.prose[lang="ar"]{font-size:20px;line-height:2}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin-top:1.8em;color:var(--text-primary)}
.prose h3{font-size:clamp(21px,2vw,26px);margin-top:1.6em;color:var(--text-primary)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose strong,.prose b{color:var(--text-primary);font-weight:600}
.prose blockquote{margin-inline:0;padding:6px 22px;border-inline-start:3px solid var(--accent);font-family:var(--fd);font-weight:600;font-size:1.12em;color:var(--text-primary)}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--accent)}
.prose img{width:100%;border-radius:16px;border:1px solid var(--line);margin-block:1.6em}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:14px;color:var(--text-secondary);margin-top:8px}
.prose hr{border:0;height:1px;background:var(--line);margin:2.2em 0}
.pfoot{margin-top:56px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14.5px}
.share .mono{color:var(--text-secondary);font-size:12.5px;text-transform:uppercase;letter-spacing:.14em}
.share a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--text-primary)}
.share a:hover{color:var(--accent)}
.author{display:flex;gap:24px;align-items:center;margin-top:40px;padding:28px;border-radius:20px;background:linear-gradient(160deg,#14223B,#0F1A2E);border:1px solid rgba(200,135,90,.3)}
.author img{width:96px;height:120px;object-fit:cover;border-radius:14px;flex:none}
.aname{font:800 20px/1.2 var(--fd)}
.abio{margin-top:8px;color:var(--text-secondary);font-size:15.5px;max-width:48ch}
.author .btn{margin-top:16px}
.more{padding-top:clamp(72px,10vh,110px)}
.mtitle{font-size:clamp(26px,2.8vw,36px);margin-bottom:28px}

/* closing band */
.bcta{position:relative;padding:clamp(80px,12vh,130px) var(--gut);border-top:1px solid var(--line);background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(200,135,90,.09),rgba(200,135,90,0) 70%)}
.bcta-in{max-width:760px;margin:0 auto;text-align:center}
.bcta h2{font-size:clamp(32px,4vw,54px);margin-top:18px}
.bcta .sub{margin:18px auto 0;color:var(--text-secondary);max-width:46ch}
.bcta .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* footer */
footer{position:relative;z-index:1;padding:64px var(--gut) 40px;border-top:1px solid var(--line)}
.foot{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.foot .tag{margin-top:14px;color:var(--text-secondary);font-size:15px}
.foot h3{font:500 12.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:16px}
html[lang="ar"] .foot h3{font:500 14px/1.2 var(--fb);letter-spacing:0;text-transform:none}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot a{text-decoration:none;color:var(--text-primary);display:inline-flex;align-items:center;min-height:36px;transition:color .35s var(--e-out)}
.foot a:hover{color:var(--accent)}
.legal{max-width:var(--max);margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--text-secondary)}

@media (max-width:1000px){
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acard.feat .acard-in{grid-template-columns:1fr}
  .acard.feat .acard-img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:640px){
  .agrid,.agrid.two{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .author{flex-direction:column;align-items:flex-start}
  .prose{font-size:18px}
  .prose[lang="ar"]{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv .st{opacity:1!important;transform:none!important}
}