@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-DemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Black.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --ink:#0B1F3A; --soft:#4B5560; --paper:#FBFCFC; --surface:#FFFFFF;
  --accent:#1B7FFF; --accent-deep:#1567D6; --tint:#E6F1FF;
  --accent-ai:#00D4FF; --accent-ai-deep:#007F99; --accent-ai-bg:#E3FBFF;
  --line:rgba(11,31,58,.14); --line-soft:rgba(11,31,58,.07); --code-bg:#0B1F3A; --code-fg:#E7EEF7;
}
:root[data-theme="dark"]{
  --ink:#EAF0F7; --soft:#98A6B6; --paper:#081220; --surface:#0E1B2C;
  --accent:#00D4FF; --accent-deep:#00D4FF; --tint:rgba(0,212,255,.13);
  --accent-ai:#00D4FF; --accent-ai-deep:#00D4FF; --accent-ai-bg:rgba(0,212,255,.13);
  --line:rgba(234,240,247,.16); --line-soft:rgba(234,240,247,.08); --code-bg:#04101E; --code-fg:#DCE7F5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EAF0F7; --soft:#98A6B6; --paper:#081220; --surface:#0E1B2C;
    --accent:#00D4FF; --accent-deep:#00D4FF; --tint:rgba(0,212,255,.13);
    --accent-ai:#00D4FF; --accent-ai-deep:#00D4FF; --accent-ai-bg:rgba(0,212,255,.13);
    --line:rgba(234,240,247,.16); --line-soft:rgba(234,240,247,.08); --code-bg:#04101E; --code-fg:#DCE7F5;
  }
}
html,body{margin:0;padding:0;background:var(--paper);}
*{box-sizing:border-box;}
/* DESIGN.md §3.2 — IRANSansX replaces the Google-Fonts-hosted Vazirmatn; self-hosted
   like the rest of the site instead of a third-party font CDN. */
body{font-family:'IRANSansX',Vazirmatn,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-deep);text-decoration:none;text-underline-offset:.28em;text-decoration-thickness:1px;border-bottom:1px solid color-mix(in oklab, var(--accent) 45%, transparent);}
a:hover{color:var(--ink);border-bottom-color:var(--ink);}
::selection{background:var(--tint);color:var(--ink);}

/* header */
.bsite-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--paper) 88%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.bsite-header-inner{max-width:1180px;margin:0 auto;padding:14px clamp(18px,4vw,40px);display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.bsite-brand{display:flex;align-items:baseline;gap:10px;margin-inline-end:auto;text-decoration:none;border:0;}
.bsite-brand span:first-child{font-weight:900;font-size:20px;color:var(--ink);}
.bsite-brand .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;}
.bsite-brand span:last-child{font-weight:500;font-size:15px;color:var(--soft);}
.bsite-navlinks{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:9999px;}
.bsite-navlinks a{border:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:9999px;color:var(--soft);}
.bsite-navlinks a.active{background:var(--ink);color:var(--paper);}
.bsite-navlinks a:hover:not(.active){color:var(--ink);}
.theme-toggle{border:1px solid var(--line);background:transparent;color:var(--soft);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:9999px;}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
/* DESIGN.md §3.4 — the CTA is a clickable primary action, so it takes rounded.sm
   (8px), never a pill; pills stay reserved for tags/toggles below. */
.bsite-cta{border:0;background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:8px;}
.bsite-cta:hover{background:var(--accent-deep);color:#fff;border:0;}

/* shared page shell */
.bwrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px);}

/* footer */
.bsite-footer{border-top:1px solid var(--line);margin-top:40px;}
.bsite-footer-inner{max-width:1180px;margin:0 auto;padding:28px clamp(18px,4vw,40px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:var(--soft);}
.bsite-footer-inner b{font-weight:800;color:var(--ink);}
.bsite-footer-inner .site-tag{margin-inline-start:auto;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;}

/* mono label */
.mono-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--soft);}

/* category pills (functional filter) */
.cat-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--soft);}
.cat-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:9999px;background:transparent;border:1px solid var(--line);color:var(--soft);font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;}
.cat-pill .n{opacity:.6;font-weight:500;}
.cat-pill.active{background:var(--tint);color:var(--accent-deep);border-color:transparent;}
.cat-pill.active.all{background:var(--ink);color:var(--paper);}

/* post row */
.post-row{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);align-items:flex-start;padding:clamp(28px,4vw,46px) 0;border-bottom:1px solid var(--line);transition:background .15s;}
.post-row:hover{background:linear-gradient(to left, transparent, var(--tint) 70%);}
.post-num{flex:0 0 auto;width:clamp(64px,9vw,120px);font-weight:200;font-size:clamp(44px,7vw,86px);line-height:.8;color:var(--accent);opacity:.55;}
.post-body{flex:1 1 420px;min-width:260px;}
.post-meta-row{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--soft);margin-bottom:12px;flex-wrap:wrap;}
.post-meta-row .tag{font-weight:700;color:var(--accent-deep);}
.post-meta-row .sep{width:14px;height:1px;background:var(--line);}
.post-title{margin:0 0 12px;font-weight:800;font-size:clamp(23px,3.3vw,38px);line-height:1.28;max-width:22ch;text-wrap:balance;}
.post-title a{color:inherit;border:0;}
.post-title a:hover{color:var(--accent);border:0;}
.post-dek{margin:0;color:var(--soft);font-size:clamp(14.5px,1.5vw,16.5px);max-width:56ch;text-wrap:pretty;}
.post-read{flex:0 0 auto;align-self:stretch;display:flex;align-items:flex-end;padding-bottom:4px;}
.post-read a{font-size:13px;font-weight:700;color:var(--ink);border:0;display:inline-flex;align-items:center;gap:8px;}
.post-read a:hover{color:var(--accent);border:0;}
.post-read .arrow{font-family:'JetBrains Mono',monospace;font-size:15px;}

/* numbered section heading (articles) */
.snum{display:flex;gap:clamp(12px,2vw,22px);align-items:baseline;margin:clamp(40px,6vw,64px) 0 18px;border-top:1px solid var(--line);padding-top:20px;}
.snum:first-of-type{margin-top:0;}
.snum .n{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.1em;}
.snum h2{margin:0;font-weight:800;font-size:clamp(24px,3.2vw,36px);line-height:1.25;color:var(--ink);}

.article-body p{margin:0 0 20px;color:var(--soft);text-wrap:pretty;}
.article-body p.lede{font-weight:300;font-size:clamp(20px,2.5vw,27px);line-height:1.65;color:var(--ink);margin-bottom:28px;}
.article-body ul.plain,.article-body ol.plain{margin:0 0 34px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.article-body ul.plain li{display:flex;gap:12px;align-items:flex-start;color:var(--soft);}
.article-body ul.plain li .dot{flex:0 0 auto;width:6px;height:6px;margin-top:.75em;background:var(--accent);}
.article-body ol.plain{gap:16px;}
.article-body ol.plain li{display:flex;gap:14px;align-items:flex-start;color:var(--soft);}
.article-body ol.plain li .num{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line);display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--accent-deep);}
.article-body code{font-family:'JetBrains Mono',monospace;direction:ltr;unicode-bidi:isolate;font-size:.86em;background:var(--tint);padding:2px 6px;}
.article-body h3{margin:0 0 14px;font-weight:700;font-size:clamp(18px,2.1vw,22px);color:var(--soft);}

.code-block{margin:0 0 12px;background:var(--code-bg);border-inline-start:3px solid var(--accent);}
.code-block-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.1);font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(231,238,247,.6);letter-spacing:.08em;}
.code-block pre{margin:0;padding:18px 16px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.85;color:var(--code-fg);text-align:left;direction:ltr;unicode-bidi:isolate;}

.tip-box{margin:0 0 40px;padding:22px 24px;background:var(--tint);border-inline-start:3px solid var(--accent);}
.tip-box .mono-label{color:var(--accent-deep);margin-bottom:8px;display:block;}
.tip-box p{margin:0;font-size:15.5px;color:var(--ink);text-wrap:pretty;}

.article-body .tbl-wrap{overflow-x:auto;margin:0 0 34px;}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px;}
.article-body th{text-align:right;padding:12px 14px 12px 0;border-bottom:2px solid var(--ink);font-weight:700;font-size:13px;color:var(--soft);}
.article-body th:first-child{padding-inline-end:14px;}
.article-body th.result{color:var(--accent-deep);padding:12px 0 12px 14px;}
.article-body td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line-soft);font-weight:600;color:var(--ink);}
.article-body td.before{color:var(--soft);font-weight:400;padding:14px;}
.article-body td.after{font-weight:700;padding:14px 0 14px 14px;}

.takeaway-box{margin:clamp(44px,6vw,72px) 0;padding:clamp(24px,3.4vw,38px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--ink);}
.takeaway-box h2{margin:0 0 18px;font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--ink);}
.takeaway-box ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:15.5px;}
.takeaway-box li{display:flex;gap:12px;align-items:flex-start;color:var(--soft);}
.takeaway-box li .n{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);padding-top:.35em;}

.cta-band{margin:0 0 clamp(40px,5vw,64px);padding:clamp(28px,4vw,44px);background:var(--ink);color:var(--paper);display:flex;flex-wrap:wrap;gap:24px;align-items:center;}
.cta-band h2{margin:0 0 8px;font-weight:800;font-size:clamp(22px,2.8vw,30px);color:var(--paper);}
.cta-band p{margin:0;font-size:15px;opacity:.72;max-width:44ch;text-wrap:pretty;color:var(--paper);}
.cta-band a{flex:0 0 auto;background:var(--accent);color:#fff;font-weight:700;font-size:15.5px;padding:15px 30px;border:0;}
.cta-band a:hover{background:#fff;color:var(--ink);border:0;}

.sources-box{border-top:1px solid var(--line);padding-top:22px;}
.sources-box ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--soft);}
.sources-box li{display:flex;gap:10px;}
.sources-box li .idx{color:var(--accent);}

.article-aside{flex:1 1 230px;min-width:220px;position:sticky;top:88px;align-self:flex-start;}
.aside-block{border-top:2px solid var(--ink);padding-top:14px;margin-bottom:32px;}
.aside-block.next{border-top:1px solid var(--line);}
.aside-block nav{display:flex;flex-direction:column;gap:11px;font-size:13.5px;}
.aside-block nav a{color:var(--soft);border:0;display:flex;gap:10px;}
.aside-block nav a:hover{color:var(--accent);border:0;}
.aside-block nav a .idx{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6;}
.aside-block .next-links{display:flex;flex-direction:column;gap:18px;}
.aside-block .next-links a{color:var(--ink);border:0;font-weight:700;font-size:14.5px;line-height:1.5;}
.aside-block .next-links a:hover{color:var(--accent);border:0;}

.crumb-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--soft);padding:22px 0;}
.crumb-nav a{color:var(--soft);border:0;}
.crumb-nav a:hover{color:var(--accent);border:0;}
