/* =====================================================================
   NAVIDIX — the article page.

   Lifted out of article.html so the two pages that show an article can
   never drift apart: the generated articles/<slug>.html, which carries
   its text in the HTML for a crawler to read, and article.html, which
   still renders from the network for anything published from the panel.

   One file, one look, whichever route the reader arrived by.
   ===================================================================== */
@font-face{font-family:'Estedad';src:url('/assets/estedad-var.woff2')format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/assets/inter-var.woff2')format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}

:root{--bg:#08090B;--pane:#11151B;--line:#262A31;--ink:#EDF2FA;--ink2:#C8D0DA;
  --mute:#8C939B;--dim:#6B7280;--ember:#E5202A;--link:#7FB8FF}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Estedad','IRANSans',Tahoma,sans-serif;font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased}
.lat{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}

.sitebar{border-bottom:1px solid var(--line);background:rgba(8,9,11,.9);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.sitebar .row{max-width:760px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;gap:14px}
.sitebar a{color:var(--mute);text-decoration:none;font-size:13px}
.sitebar a:hover{color:var(--ink)}
.home{display:flex;align-items:center;gap:9px;color:var(--ink)!important;
  font-weight:700;letter-spacing:.16em;font-size:12.5px}
.sp{flex:1}

/* 68ch is the measure a long Persian paragraph reads at without the eye
   losing the line on the way back. The list page is a grid and wide; this
   one is a column and is not. */
/* nvx-topbar.js replaces .sitebar with a position:fixed bar and adds no
   top padding of its own, so 55px of every page sits under it. Pages
   with a tall hero never notice; this one opens on a single small line
   and lost it entirely. The bar's height plus the breathing room the
   page wanted in the first place. */
.wrap{max-width:760px;margin:0 auto;padding:93px 22px 90px}
.eyebrow{font-size:11.5px;letter-spacing:.14em;color:var(--dim);margin:0 0 10px}
h1{font-size:clamp(24px,4vw,34px);font-weight:700;margin:0 0 10px;line-height:1.55}
.meta{color:var(--dim);font-size:12.5px;margin:0 0 22px}
.cover{width:100%;border-radius:15px;display:block;margin:0 0 26px;border:1px solid var(--line)}
.lede{color:var(--ink2);font-size:16px;line-height:2.1;margin:0 0 26px;
  border-inline-start:2px solid var(--ember);padding-inline-start:15px}

.body{font-size:15.5px;line-height:2.15;color:var(--ink2)}
.body h2{font-size:20px;color:var(--ink);margin:34px 0 10px;line-height:1.65}
.body h3{font-size:17px;color:var(--ink);margin:28px 0 8px;line-height:1.7}
.body h4,.body h5{font-size:15.5px;color:var(--ink);margin:22px 0 6px}
.body p{margin:0 0 17px}
.body ul,.body ol{margin:0 0 17px;padding-inline-start:22px}
.body li{margin:0 0 7px}
.body a{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(127,184,255,.3)}
.body a:hover{border-bottom-color:var(--link)}
.body img{max-width:100%;height:auto;border-radius:11px;display:block;margin:20px 0}
.body code{font-family:'Inter',ui-monospace,monospace;font-size:13px;background:#0E1116;
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;direction:ltr;
  unicode-bidi:isolate}
.body blockquote{margin:0 0 17px;padding:2px 15px;border-inline-start:2px solid var(--line);
  color:var(--mute)}
.body strong{color:var(--ink);font-weight:700}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:30px 0 0;
  border-top:1px solid var(--line);padding-top:20px}
.tag{font-size:11.5px;color:var(--mute);border:1px solid var(--line);
  border-radius:6px;padding:2px 9px}

.state{color:var(--dim);font-size:13.5px;line-height:2.1;
  border:1px dashed var(--line);border-radius:14px;padding:26px 22px;margin:26px 0}
.state b{color:var(--ink2);display:block;font-weight:700;margin-bottom:4px}
.state a{color:var(--link);text-decoration:none}

.back{display:inline-block;margin-top:34px;color:var(--link);text-decoration:none;
  font-size:13.5px}

@media (max-width:640px){.wrap{padding:81px 15px 70px}}