/* Subset of the upstream variable font: 111KB -> 82KB, same 100-900 weight
   axis, same GSUB/GPOS so Arabic shaping and the zero-width non-joiner are
   untouched. What was dropped is Latin Extended-A/B — accented letters that
   appear in the odd European name and fall back to a system face when they
   do, exactly as the Afghani sign and the rate arrows already do, since
   Vazirmatn never carried those either.
   The FILENAME changed on purpose: the old one is cached for a year with
   immutable, so replacing its contents would have reached nobody.

   font-display is `optional`, not `swap`, and that is the CLS fix.

   Lighthouse named this file as the layout-shift culprit outright: desktop CLS
   0.224, of which 0.214 was one block moving when the font arrived. Measured
   directly on the live site, swapping the font moved 62 of 65 elements by up to
   73px and changed the document height by 71px. line-height here is a unitless
   number so line boxes do not change; what changes is where headlines WRAP, and
   a lead title that breaks over three lines instead of two pushes the whole
   page down.

   `optional` gives the font a short window and then commits: it is either used
   from the first paint or not used for that page view at all. There is no
   third moment at which text can reflow, so font-driven CLS becomes zero
   rather than smaller.

   The cost is real and worth stating: a first-time visitor on a slow
   connection reads that one page in the system font. The font is cached from
   then on, so every later page and every returning reader gets Vazirmatn
   immediately — and with the HTML now served from Cloudflare's edge in ~120ms,
   the font request starts early enough that most visitors clear the window on
   the first page too.

   To go back, this word is the only edit: `optional` -> `swap`. */
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-subset.woff2)format("woff2-variations");font-weight:100 900;font-style:normal;font-display:optional}
:root{
--brand:#c62128;--brand-ink:#9e181e;--brand-deep:#631114;--foot:#16181d;--foot-deep:#0f1114;
--bg:#fff;--bg-2:#f6f7f9;--bg-3:#eceff3;
/* --ink-3 was #686e78. On --bg-3 that measured 4.45:1 — a fail by 0.05
   against the 4.5 minimum, which is exactly the kind of near-miss an audit
   catches and a person never does. #646a74 clears it on every ground the
   token is used against and is a shade darker, nothing more. */
--ink:#16181c;--ink-2:#4a4f57;--ink-3:#646a74;
--line:#e3e6ea;--line-2:#d3d8de;
--shadow:0 1px 2px rgb(16 18 22/.06),0 8px 24px rgb(16 18 22/.06);
--r:10px;--r-s:6px;
--wrap:1280px;--read:1120px;--side:336px;--gap:var(--s-5);
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:40px;--s-8:56px;
--band:#12141a;--ai:#1f6feb;
--f-1:.75rem;--f-2:.8125rem;--f-3:.875rem;--f-4:1rem;
--f-5:clamp(1rem,.95rem + .22vw,1.125rem);
--f-6:clamp(1.125rem,1.02rem + .44vw,1.375rem);
--f-7:clamp(1.5rem,1.39rem + .44vw,1.75rem);
--f-8:clamp(1.5rem,1.18rem + 1.33vw,2.25rem);
--f-9:clamp(1.625rem,1.26rem + 1.56vw,2.5rem);
color-scheme:light dark
}
@media(prefers-color-scheme:dark){:root{--foot:#14161b;--foot-deep:#0d0f13;--brand:#ef3a42;--brand-ink:#c62128;--bg:#0f1115;--bg-2:#171a20;--bg-3:#1f232b;--ink:#e9ebee;--ink-2:#adb4be;--ink-3:#848b96;--line:#272c34;--line-2:#333a44;--shadow:0 1px 2px rgb(0 0 0/.4),0 8px 24px rgb(0 0 0/.3);--band:#1f232b;--ai:#58a6ff}}
:root[data-theme=dark]{--foot:#14161b;--foot-deep:#0d0f13;--brand:#ef3a42;--brand-ink:#c62128;--bg:#0f1115;--bg-2:#171a20;--bg-3:#1f232b;--ink:#e9ebee;--ink-2:#adb4be;--ink-3:#848b96;--line:#272c34;--line-2:#333a44;--shadow:0 1px 2px rgb(0 0 0/.4),0 8px 24px rgb(0 0 0/.3);--band:#1f232b;--ai:#58a6ff}
:root[data-theme=light]{--foot:#16181d;--foot-deep:#0f1114;--brand:#c62128;--brand-ink:#9e181e;--bg:#fff;--bg-2:#f6f7f9;--bg-3:#eceff3;--ink:#16181c;--ink-2:#4a4f57;--ink-3:#646a74;--line:#e3e6ea;--line-2:#d3d8de;--shadow:0 1px 2px rgb(16 18 22/.06),0 8px 24px rgb(16 18 22/.06);--band:#12141a;--ai:#1f6feb}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:56px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:Vazirmatn,system-ui,sans-serif;font-size:var(--f-4);line-height:1.75;background:var(--bg);color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01";}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{line-height:1.5;font-weight:700;text-wrap:balance}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:var(--s-3) var(--s-4)}
.skip:focus{inset-inline-start:0}
/* ---- layout standard ----
   Two widths, used deliberately:

   .wrap  — the page gutter container (--wrap). Exactly one per <main>, and
            never combined with a measure class on the same element.
   .col   — reading measure (--read), centred inside .wrap. Single column.
   .reader— reading measure (--read), centred inside .wrap. Content + sidebar.

   Index and dashboard pages (archives, home) stay at .wrap. Detail pages put
   ALL their content — breadcrumbs, heading, body, related — inside .col or
   .reader, so every detail page starts and ends on the same x regardless of
   whether it has a sidebar. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-4)}
.col{width:100%;max-width:var(--read);margin-inline:auto}
.ico{flex:none}
/* ---- header ----
   Two bands, not three. A red masthead carries the brand, the date and search;
   the sticky menu bar below it also carries the language switcher, which is
   what let the old topbar disappear without losing either of its two pieces.
   The switcher lives inside .nav on purpose: on mobile that same markup lands
   at the foot of the drawer, so the languages are never printed twice. */
.masthead{background:var(--brand)}
.masthead .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:56px}
.masthead__end{display:flex;align-items:center;gap:var(--s-3);margin-inline-start:auto}
.masthead__date{font-size:var(--f-1);color:rgb(255 255 255/.82);white-space:nowrap;font-variant-numeric:tabular-nums}
.brand{display:flex}
.brand img{width:132px;height:auto}
.iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-s);color:#fff;transition:background .15s}
.iconbtn:hover{background:rgb(255 255 255/.14)}
.iconbtn:focus-visible{outline-color:#fff}
.nav{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav .wrap{display:flex;align-items:center;gap:var(--s-3)}
.nav__list{display:flex;align-items:center;gap:var(--s-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav__list::-webkit-scrollbar{display:none}
.nav__list a{display:block;padding:10px var(--s-3);font-size:var(--f-3);font-weight:600;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav__list a:hover,.nav__list a[aria-current]{color:var(--brand);border-bottom-color:var(--brand)}
.nav__list a[aria-current]{font-weight:700}
.nav.is-stuck{box-shadow:var(--shadow)}
/* The globe is why this reads as a language control rather than five stray
   words at the end of the menu — without it the switcher is present but not
   findable, which is the same as absent. Default state is the flat row; the
   summary only becomes a button in the middle band, see below. */
.langs{position:relative;display:flex;align-items:center;gap:var(--s-2);flex:none;padding-inline-start:var(--s-3);border-inline-start:1px solid var(--line)}
.langs__mark{display:none;place-items:center;flex:none;color:var(--ink-3)}
.langs__list{display:flex;align-items:center;gap:2px}
.langs a{display:block;font-size:var(--f-2);font-weight:600;color:var(--ink-2);padding:var(--s-1) var(--s-2);border-radius:var(--r-s);transition:color .15s,background .15s}
.langs a:hover{color:var(--ink);background:var(--bg-3)}
.langs a[aria-current]{color:var(--brand);background:var(--bg-3)}
/* Middle band: the menu needs every pixel, so the switcher gives them back.
   The strip also gets a fade at its leading edge — a headline clipped against
   a hard border reads as a bug, the same headline fading out reads as «scroll». */
@media(min-width:769px) and (max-width:1023px){
.nav__list{mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.langs{padding-inline-start:var(--s-2)}
.langs__mark{display:grid;width:34px;height:34px;border-radius:var(--r-s);transition:background .15s,color .15s}
.langs__mark:hover{background:var(--bg-3);color:var(--ink)}
.langs.is-open .langs__mark{background:var(--bg-3);color:var(--brand)}
/* Pinned by its inline-END edge: the switcher sits at the very end of the row,
   so a panel anchored the other way would open past the edge of the window. */
.langs__list{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:45;flex-direction:column;align-items:stretch;gap:0;min-width:150px;padding:var(--s-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.langs:not(.is-open) .langs__list{display:none}
.langs__list a{padding:var(--s-2) var(--s-3)}
}
.sentinel{position:absolute;width:1px;height:1px}
.searchpanel{background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:var(--s-3)}
.searchpanel[hidden]{display:none}
.searchform{display:flex;gap:var(--s-2);max-width:620px;margin-inline:auto}
.searchform input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s-3) var(--s-3);font-size:var(--f-3)}
.searchform button{display:grid;place-items:center;width:46px;background:var(--brand);color:#fff;border-radius:var(--r);transition:background .15s}
.searchform button:hover{background:var(--brand-ink)}
.burger{display:none}
.overline{display:block;font-size:var(--f-1);font-weight:700;color:var(--brand);letter-spacing:.2px;line-height:1.5;margin-bottom:var(--s-1)}
.metabar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-1)}
.meta{font-size:var(--f-1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ph{display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-3),var(--bg-2));border-radius:inherit}
.shead{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);padding-bottom:var(--s-2);border-bottom:2px solid var(--line)}
.shead__title{position:relative;font-size:var(--f-6);font-weight:800;padding-inline-start:var(--s-3)}
.shead__title::before{content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:5px;height:22px;background:var(--brand);border-radius:3px}
.shead__more{display:inline-flex;align-items:center;gap:var(--s-1);margin-inline-start:auto;font-size:var(--f-2);font-weight:600;color:var(--ink-3);transition:color .15s}
.shead__more:hover{color:var(--brand)}
.shead--invert{border-bottom-color:rgb(255 255 255/.14)}
.shead--invert .shead__title{color:#fff}
.shead--invert .shead__more{color:rgb(255 255 255/.65)}
.shead--invert .shead__more:hover{color:#fff}
.lead__media,.card__media,.item__media,.mcard__media{display:block;overflow:hidden;border-radius:var(--r);background:var(--bg-3)}
.lead__media img,.lead__media .ph,.card__media img,.card__media .ph,.mcard__media img,.mcard__media .ph{width:100%;aspect-ratio:16/9;object-fit:cover;transition:scale .4s ease}
.lead:hover .lead__media img,.card:hover .card__media img,.mcard:hover .mcard__media img{scale:1.04}
.lead__title a,.card__title a,.item__title a,.line__title a,.mcard__title a{transition:color .15s}
.lead__title a:hover,.card__title a:hover,.item__title a:hover,.line__title a:hover,.mcard__title a:hover{color:var(--brand)}
.lead{display:flex;flex-direction:column}
.lead__body{padding-top:var(--s-3);display:flex;flex-direction:column;flex:1}
.lead__title{font-size:var(--f-8);font-weight:800;line-height:1.45;margin-block:var(--s-2) var(--s-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lead__sum{color:var(--ink-2);font-size:var(--f-3);line-height:1.85;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card{display:flex;flex-direction:column;height:100%}
.card__media{margin-bottom:var(--s-3)}
.card__title{font-size:var(--f-5);font-weight:700;line-height:1.55;margin-block:var(--s-1) var(--s-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card__sum{flex:1;font-size:var(--f-2);color:var(--ink-3);line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card .metabar{margin-top:var(--s-2)}
.item{display:flex;gap:var(--s-3);align-items:flex-start;height:100%}
.item__media{flex:none;width:104px}
.item__media img,.item__media .ph{width:104px;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-s)}
.item__body{flex:1;min-width:0;display:flex;flex-direction:column}
.item__title{flex:1;font-size:var(--f-3);font-weight:600;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.line__title{font-size:var(--f-3);font-weight:600;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.mcard{display:flex;flex-direction:column}
.mcard__media{position:relative;border-radius:var(--r-s)}
.mcard__badge{position:absolute;inset-block-end:8px;inset-inline-start:8px;display:grid;place-items:center;width:34px;height:34px;background:rgb(0 0 0/.58);color:#fff;border-radius:50%;backdrop-filter:blur(4px)}
.mcard__title{font-size:var(--f-3);font-weight:600;line-height:1.65;margin-top:var(--s-2);color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.mcard--big{grid-column:1/-1}
.mcard--big .mcard__badge{width:44px;height:44px;inset-block-end:12px;inset-inline-start:12px}
.mcard--big .mcard__title{font-size:var(--f-5);font-weight:700;-webkit-line-clamp:2}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--f-1);color:var(--ink-3)}
.crumbs li{display:flex;align-items:center;gap:var(--s-2)}
.crumbs li+li::before{content:"›";color:var(--line-2)}
.crumbs a{transition:color .15s}
.crumbs a:hover{color:var(--brand)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4)}
.share__label{font-size:var(--f-1);font-weight:700;color:var(--ink-3);margin-inline-end:var(--s-1)}
.share__btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.share__btn:hover{color:#fff;border-color:transparent}
.share__btn--telegram:hover{background:#229ed9}
.share__btn--whatsapp:hover{background:#25d366}
.share__btn--facebook:hover{background:#1877f2}
.share__btn--twitter:hover{background:#0f1419}
.share__copy:hover{background:var(--brand)}
.share__copy .ico:last-child,.share__copy.is-done .ico:first-child{display:none}
.share__copy.is-done .ico:last-child{display:block}
.share__copy.is-done{background:#16a34a;border-color:transparent;color:#fff}
.share__native{width:auto;gap:var(--s-2);padding-inline:var(--s-4);grid-auto-flow:column;background:var(--brand);border-color:transparent;color:#fff;font-size:var(--f-2);font-weight:700}
.share__native[hidden]{display:none}
.share__native:hover{background:var(--brand-ink);color:#fff}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.stack--sep>*+*{padding-top:var(--s-3);border-top:1px solid var(--line)}
.stack--fill{flex:1;justify-content:space-between}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5);margin-top:var(--s-4)}
.pairs>*{padding-top:var(--s-4);border-top:1px solid var(--line)}
.promos{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.promo{border-radius:var(--r);overflow:hidden}
.promo--brand,.promo--neutral{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;padding:var(--s-5) var(--s-5)}
.promo--brand{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff}
.promo--neutral{background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.promo__body{flex:1;min-width:min(100%,280px)}
.promo__eyebrow{display:inline-block;font-size:var(--f-1);font-weight:700;padding:var(--s-1) var(--s-3);border-radius:100px;margin-bottom:var(--s-2);background:rgb(255 255 255/.2)}
.promo--neutral .promo__eyebrow{background:var(--bg-3);color:var(--brand)}
.promo__title{font-size:var(--f-6);font-weight:800;line-height:1.5}
.promo__text{font-size:var(--f-2);line-height:1.85;margin-top:var(--s-2);max-width:74ch;opacity:.88}
.promo__cta{display:inline-flex;align-items:center;gap:var(--s-1);flex:none;padding:var(--s-3) var(--s-5);border-radius:100px;font-size:var(--f-3);font-weight:700;background:#fff;color:var(--brand-deep);transition:scale .15s,box-shadow .15s}
.promo--neutral .promo__cta{background:var(--brand);color:#fff}
.promo__cta:hover{scale:1.03;box-shadow:0 6px 18px rgb(0 0 0/.18)}
.promo--image{display:block}
.promo--image img{width:100%;height:auto}

/* ---- contributor call-to-action ----
   Three shapes of one offer: a hero strip on the home page and service pages,
   a sidebar panel on hubs, and a single line after an article. Lives in
   base.css because it appears on pages that load different stylesheets, and a
   CTA that renders unstyled reads as a broken page. */
.contrib{margin-block:var(--s-6)}
.contrib--hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-5) var(--s-7);align-items:center;padding:var(--s-6);border-radius:var(--r);background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:var(--shadow)}
.contrib__eyebrow{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--f-1);font-weight:700;padding:var(--s-1) var(--s-3);border-radius:100px;background:rgb(255 255 255/.18)}
.contrib__title{font-size:var(--f-7);font-weight:800;line-height:1.45;margin-top:var(--s-3)}
.contrib__text{font-size:var(--f-3);line-height:1.9;margin-top:var(--s-2);max-width:62ch;opacity:.92}
.contrib__points{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-4)}
.contrib__points li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--f-2);font-weight:600}
.contrib__points .ico{opacity:.85}
.contrib__aside{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2)}
.contrib__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-radius:100px;font-size:var(--f-3);font-weight:700;background:#fff;color:var(--brand-deep);transition:scale .15s,box-shadow .15s}
.contrib__cta:hover{scale:1.03;box-shadow:0 6px 18px rgb(0 0 0/.2)}
.contrib__cta--lg{padding-block:var(--s-4);font-size:var(--f-5)}
.contrib__or{font-size:var(--f-1);text-align:center;opacity:.8;margin-top:var(--s-1)}
.contrib__channels{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.contrib__channel{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-2) var(--s-3);border-radius:100px;border:1px solid rgb(255 255 255/.35);font-size:var(--f-1);font-weight:600;color:#fff;transition:background .15s}
.contrib__channel:hover{background:rgb(255 255 255/.16)}

.contrib--inline{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:var(--r);background:var(--bg-2)}
.contrib--inline .contrib__mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff}
.contrib--inline .contrib__body{flex:1;min-width:min(100%,240px)}
.contrib--inline .contrib__title{font-size:var(--f-5);margin-top:0;color:var(--ink)}
.contrib--inline .contrib__text{font-size:var(--f-2);color:var(--ink-2);opacity:1;margin-top:2px}
.contrib--inline .contrib__cta{flex:none;background:var(--brand);color:#fff}
.contrib--inline .contrib__cta:hover{background:var(--brand-ink)}

/* .panel--contribute is NOT here: .panel is defined further down this file and
   would win on equal specificity, repainting the box grey while its text stayed
   white. Those rules live directly after .panel instead. */

@media(max-width:900px){
.contrib--hero{grid-template-columns:1fr;padding:var(--s-5);gap:var(--s-4)}
.contrib__aside{align-items:stretch}
}
@media(max-width:520px){
.contrib--inline{padding:var(--s-4)}
.contrib--inline .contrib__cta{width:100%}
}
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.panel{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4)}
.panel .shead{margin-bottom:var(--s-3)}
.panel .shead__title{font-size:var(--f-5)}
/* Panel skins. Must follow .panel — same specificity, so order decides. */
.panel--contribute{background:linear-gradient(160deg,var(--brand),var(--brand-deep));border-color:transparent;color:#fff;gap:var(--s-2)}
.panel--contribute .contrib__title{font-size:var(--f-5);font-weight:800;line-height:1.5;margin-top:var(--s-2)}
.panel--contribute .contrib__text{font-size:var(--f-2);line-height:1.8;margin-top:var(--s-1);opacity:.9}
.panel--contribute .contrib__cta{margin-top:var(--s-3)}
.panel--signup{background:var(--bg-3);gap:var(--s-2)}
.panel--signup .signup__title{font-size:var(--f-5);font-weight:800;line-height:1.5}
.panel--signup .signup__text{font-size:var(--f-2);line-height:1.8;color:var(--ink-2)}
.panel--signup .aform{margin-top:var(--s-2)}
.panel--signup .afield{margin-top:0}
.panel--signup input[type=email]{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-s);padding:var(--s-3);font-size:var(--f-3)}
.panel--signup input[type=email]:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgb(198 33 40/.14)}
.panel--signup button{width:100%;margin-top:var(--s-2);padding:var(--s-3);border-radius:var(--r-s);background:var(--brand);color:#fff;font-size:var(--f-3);font-weight:700;transition:background .15s}
.panel--signup button:hover:not(:disabled){background:var(--brand-ink)}
.panel--signup button:disabled{opacity:.6;cursor:progress}
.panel--signup .formmsg{margin-top:var(--s-2);font-size:var(--f-1);line-height:1.7;font-weight:600}
.panel--signup .formmsg.is-ok{color:#16a34a}
.panel--signup .formmsg.is-error{color:var(--brand)}
.panel--signup .formmsg.is-busy{color:var(--ink-3)}
.panel--signup .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.panel--signup .signup__note{display:flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2);font-size:var(--f-1);color:var(--ink-3)}
.ranked{counter-reset:r;display:flex;flex-direction:column;gap:var(--s-3)}
.ranked li{counter-increment:r;display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--f-3);font-weight:600;line-height:1.6}
.ranked li a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ranked li::before{content:counter(r);flex:none;width:24px;height:24px;display:grid;place-items:center;background:var(--bg-3);color:var(--brand);border-radius:var(--r-s);font-size:var(--f-1);font-weight:800}
.ranked li:first-child::before{background:var(--brand);color:#fff}
.ranked a{transition:color .15s}
.ranked a:hover{color:var(--brand)}
.dossiers{display:flex;flex-direction:column;gap:var(--s-2)}
.dossier{display:block;background:var(--bg);border:1px solid var(--line);border-inline-start:3px solid var(--brand);padding:var(--s-2) var(--s-3);transition:border-color .15s,background .15s}
.dossier:hover{background:var(--bg-3)}
.dossier__title{display:block;font-size:var(--f-3);font-weight:600;line-height:1.6}
.dossier__count{font-size:var(--f-1);color:var(--ink-3)}
.dossier:hover .dossier__title{color:var(--brand)}
/* ---- reader: shared content + sidebar layout ----
   Used by articles, provinces and any other two-column page. Lives here rather
   than in single.css because only articles load that file, and a page whose
   markup says .reader but whose CSS never arrives drops its sidebar below the
   content. */
.reader{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--s-7);align-items:start;width:100%;max-width:var(--read);margin-inline:auto;padding-block:var(--s-5)}
.reader__main{min-width:0}
.reader__side{display:flex;flex-direction:column;gap:var(--s-4)}
@media(max-width:1024px){
.reader{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:768px){
.reader{padding-block:var(--s-4);gap:var(--s-5)}
}

/* ---- exchange rates band ----
   Each cell stacks name over price so a long multiplier ("۱۰۰٬۰۰۰ ریال ایران")
   and a short one ("دالر") stay legible at the same width instead of one being
   truncated to fit the other. */
/* ---- shared page furniture ----
   Used by articles, archives, provinces, weather and the rates page alike.
   These lived in page-specific stylesheets before, which meant any new page
   that reused the markup silently rendered unstyled — exactly what happened to
   the rates page. One definition, loaded everywhere. */
.archead{padding-block:var(--s-5) var(--s-4);border-bottom:2px solid var(--line);margin-bottom:var(--s-5)}
.archead__title{font-size:var(--f-8);font-weight:800}
.archead--detail .archead__title{font-size:var(--f-9)}
.archead__desc{margin-top:var(--s-3);max-width:74ch;font-size:var(--f-3);line-height:1.9;color:var(--ink-2)}
.crumbs{padding-block:var(--s-4) 0}
.empty{padding:var(--s-7) 0;text-align:center;color:var(--ink-3)}

/* Long-form body copy. */
.prose{font-size:1.0625rem;line-height:2.1;color:var(--ink)}
.prose>*+*{margin-top:1.35em}
.prose p{text-align:justify;text-justify:inter-word}
.prose h2{font-size:var(--f-6);font-weight:800;margin-top:1.9em;scroll-margin-top:80px}
.prose h3{font-size:var(--f-5);font-weight:700;margin-top:1.7em;scroll-margin-top:80px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
.prose strong{font-weight:700}
.prose img,.prose iframe,.prose video{max-width:100%;height:auto;border-radius:var(--r)}
.prose ul,.prose ol{padding-inline-start:1.5em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li+li{margin-top:.5em}
.prose table{width:100%;border-collapse:collapse;font-size:var(--f-3)}
.prose th,.prose td{padding:var(--s-2) var(--s-3);border:1px solid var(--line);text-align:start}
.prose th{background:var(--bg-2);font-weight:700}

/* Accordion FAQ. */
.faq,.pvnear{margin-top:var(--s-6)}
.faq h2,.pvnear h2{font-size:var(--f-6);font-weight:800;margin-bottom:var(--s-3)}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-top:var(--s-2);background:var(--bg-2)}
.faq summary{cursor:pointer;padding:var(--s-3) var(--s-4);font-size:var(--f-3);font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:inline-end;color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 var(--s-4) var(--s-4);font-size:var(--f-3);line-height:1.95;color:var(--ink-2)}

/* Related-links chips. */
.related{margin-top:var(--s-6)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{padding:var(--s-2) var(--s-4);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;font-size:var(--f-2);color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.chip:hover{background:var(--brand);border-color:var(--brand);color:#fff}

.ratebar{margin-top:var(--s-6);padding-block:var(--s-5);background:var(--bg-2);border-block:1px solid var(--line)}
.ratebar__head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ratebar__mark{flex:none;width:5px;height:18px;background:var(--brand);border-radius:3px}
.ratebar__title{font-size:var(--f-4);font-weight:800}
.ratebar__base{font-size:var(--f-1);font-weight:600;color:var(--ink-3);background:var(--bg-3);border-radius:100px;padding:3px var(--s-2)}
.ratebar__stamp{margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--f-1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ratebar__dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgb(22 163 74/.15)}

.ratebar__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.rate{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding:var(--s-3) var(--s-4);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:inherit;transition:border-color .15s,box-shadow .15s}
.ratebar__note a{color:var(--brand);font-weight:600}
.rate:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.rate__name{display:flex;align-items:baseline;gap:var(--s-1);font-size:var(--f-2);font-weight:600;color:var(--ink-2);min-width:0}
.rate__mult{flex:none;font-size:var(--f-1);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rate__code{flex:none;margin-inline-start:auto;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);background:var(--bg-3);border-radius:var(--r-s);padding:1px 5px;direction:ltr}
.rate__value{display:flex;align-items:baseline;gap:var(--s-1)}
.rate__price{font-size:var(--f-7);font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rate__unit{font-size:var(--f-2);font-weight:600;color:var(--ink-3)}
.rate__trend{display:inline-flex;align-items:center;font-size:10px;line-height:1;padding:3px 6px;border-radius:100px;margin-inline-start:var(--s-1);translate:0 -3px}
.rate__trend--up{color:#16a34a;background:rgb(22 163 74/.12)}
.rate__trend--down{color:var(--brand);background:rgb(214 40 48/.12)}
.ratebar__note{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--f-1);color:var(--ink-3);line-height:1.7}
@media(prefers-color-scheme:dark){.rate__trend--down{background:rgb(239 58 66/.15)}}
:root[data-theme=dark] .rate__trend--down{background:rgb(239 58 66/.15)}
:root[data-theme=light] .rate__trend--down{background:rgb(214 40 48/.12)}
@media(max-width:820px){
.ratebar__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
.ratebar{padding-block:var(--s-4)}
.ratebar__list{grid-template-columns:1fr;gap:var(--s-2)}
.rate{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-2) var(--s-3)}
.rate__name{flex:1}
.rate__code{margin-inline-start:0}
.rate__price{font-size:var(--f-5)}
}
.foot{margin-top:var(--s-8);background:var(--foot);border-top:3px solid var(--brand);color:rgb(255 255 255/.72);font-size:var(--f-2)}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6);padding-block:var(--s-7)}
.foot__brand img{margin-bottom:var(--s-3)}
.foot__brand p{line-height:1.9;max-width:46ch}
.foot__social{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.foot__social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgb(255 255 255/.2);border-radius:50%;color:#fff;transition:background .15s,border-color .15s}
.foot__social a:hover{background:rgb(255 255 255/.14);border-color:transparent}
.foot__col h3{color:#fff;font-size:var(--f-3);margin-bottom:var(--s-3)}
.foot__col ul{display:flex;flex-direction:column;gap:var(--s-2)}
.foot__col a{transition:color .15s}
.foot__col a:hover{color:#fff}
.foot__bottom{background:var(--foot-deep);border-top:1px solid rgb(255 255 255/.08);padding-block:var(--s-4);font-size:var(--f-1)}
@media(max-width:1024px){
:root{--gap:var(--s-4)}
.grid--4{grid-template-columns:repeat(2,1fr)}
.foot__top{grid-template-columns:1fr 1fr;gap:var(--s-5)}
.foot__brand{grid-column:1/-1}
}
@media(max-width:768px){
.burger{display:grid}
.masthead .wrap{min-height:52px}
.brand img{width:118px}
.masthead__date{display:none}
.nav{position:fixed;inset-block-start:0;inset-inline-start:0;width:min(78vw,320px);height:100dvh;background:var(--bg);border:0;border-inline-end:1px solid var(--line);translate:calc(var(--slide,-100%)) 0;transition:translate .25s ease;z-index:60;overflow-y:auto;padding-top:var(--s-4)}
html[dir=rtl] .nav{--slide:100%}
.nav.is-open{translate:0 0}
.nav .wrap{padding-inline:0;flex-direction:column;align-items:stretch;gap:0}
.nav__list{flex-direction:column;align-items:stretch;overflow:visible;flex:none}
.nav__list a{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);border-inline-start:3px solid transparent}
.nav__list a:hover,.nav__list a[aria-current]{border-bottom-color:var(--line);border-inline-start-color:var(--brand)}
.langs{position:static;flex-wrap:nowrap;align-items:flex-start;gap:var(--s-2);padding:var(--s-4);border-inline-start:0;border-top:1px solid var(--line)}
.langs__mark{display:none}
.langs__list{flex-wrap:wrap;gap:var(--s-1)}
.langs a{border:1px solid var(--line)}
.scrim{position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:50;opacity:0;transition:opacity .25s}
.scrim.is-on{opacity:1}
.grid--3,.grid--2{grid-template-columns:repeat(2,1fr)}
.foot{margin-top:var(--s-6)}
.foot__top{grid-template-columns:1fr;gap:var(--s-5);padding-block:var(--s-5)}
}
@media(max-width:520px){
.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
}