/* ══════════════════════════════════════════════════════════════════════════
   blog.css — بلاگ توییک‌فا: صفحه فهرست، صفحه نوشته، و اسلایدر تازه.

   چرا فایل جدا (مثل panel.css و text.css): این کلاس‌ها فقط در دو صفحه لازم‌اند و
   بردنشان به site.css همه ۲۵ صفحه را بی‌دلیل سنگین می‌کرد. هیچ توکنی اینجا
   تعریف نمی‌شود؛ همه از site.css می‌آیند.

   ترتیب بارگذاری: site.css ← text.css (فقط در صفحه نوشته، برای prose و toc) ←
   این فایل.

   🔴 همه کلاس‌ها پیشوند دارند (b- فهرست، bp- نوشته، tfs- اسلایدر). قاعده ثبت‌شده:
   در صفحه‌ای که پوسته مشترک دارد، نام کلاس عمومی (card، dots، tier، post، meta)
   ممنوع است، چون هدر و فوتر همان فضای نام را دارند و بی‌صدا بازطراحی می‌شوند.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
   ۰. رنگ شاخه‌ها
   چهار شاخه واقعی تاکسونومی سایت، هرکدام با یکی از رنگ‌های خود برند.
   این تزئین نیست: چیپ روی هر کارت می‌گوید کاربر کجای بلاگ است.
   ═════════════════════════════════════════════════════════════════ */
.b-sec{--bcc:var(--gc-violet-rgb);--bci:var(--gc-violet-ink)}
[data-b="news"]  {--bcc:var(--gc-cyan-rgb);   --bci:var(--gc-cyan)}
[data-b="review"]{--bcc:var(--gc-violet-rgb); --bci:var(--gc-violet-ink)}
[data-b="bhelp"] {--bcc:var(--gc-gold-rgb);   --bci:var(--gc-gold)}
[data-b="art"]   {--bcc:var(--gc-success-rgb);--bci:var(--gc-success-ink)}

/* ═════════════════════════════════════════════════════════════════
   ۱. سر صفحه فهرست — تیتر و جست‌وجو در یک ردیف
   عمدا زیر تیتر جمله توضیحی ندارد. الگوی ثبت‌شده مالک: هر جمله توضیحی
   زیر تیتر حذف می‌شود؛ خود تیتر و شبکه پایینش کارش را می‌کنند.
   ═════════════════════════════════════════════════════════════════ */
/* ⚠ .b-head حذف شد (دستور مالک: چیپ «بلاگ» و تیتر «بررسی، بنچمارک، خبر» هر دو
   اضافه بودند). فاصلهٔ بالای صفحه که از padding همان سرصفحه می‌آمد اینجا
   منتقل شد، وگرنه کارت منتخب می‌چسبید زیرِ هدر. */
.b-sec{padding-top:clamp(30px,4vw,50px)}
/* تیترِ صفحه فقط برای خواننده‌های صفحه و موتور جست‌وجو. جای معمولِ این کار:
   بیرونِ کادرِ دید، نه display:none — با none اصلا خوانده نمی‌شود. */
.b-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.b-find{position:relative;flex:0 1 300px;min-width:210px}
.b-find .inp{height:44px;padding-inline:42px 16px;font-size:14px}
.b-find svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gc-text-low);pointer-events:none}
.b-find .x{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;background:0;color:var(--gc-text-low);cursor:pointer;
  border-radius:8px;display:none;place-items:center}
.b-find.has .x{display:grid}
.b-find .x:hover{background:var(--gc-tint-1);color:var(--gc-text)}

/* ═════════════════════════════════════════════════════════════════
   ۲. ریل دسته‌ها — دو طبقه واقعی از درخت تاکسونومی سایت
   ردیف دوم فقط وقتی می‌آید که شاخه‌ای انتخاب شده باشد و بچه داشته باشد.
   ═════════════════════════════════════════════════════════════════ */
.b-rail{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.b-t{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--gc-text-mid);cursor:pointer;
  background:var(--gc-tint-0);border:0;box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.b-t:hover{background:var(--gc-tint-1);color:var(--gc-text)}
/* 🔴 اینجا رقم فارسی است، پس font-latin ممنوع: Poppins گلیف فارسی ندارد و
   عدد به Segoe می‌افتد، یعنی وسط چیپ یک فونت غریبه. */
.b-t b{font-weight:500;font-size:12px;color:var(--gc-text-low)}
.b-t[aria-pressed="true"]{color:var(--gc-text);font-weight:700;
  background:rgba(var(--bcc),.16);box-shadow:inset 0 0 0 1px rgba(var(--bcc),.42)}
.b-t[aria-pressed="true"] b{color:var(--bci)}
.b-t:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}

/* ردیف دوم: باز و بسته شدنش باید دیده شود، وگرنه ناگهان یک ردیف اضافه می‌شود */
.b-sub{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s var(--ease-ui),opacity .22s var(--ease-ui)}
.b-sub.on{grid-template-rows:1fr;opacity:1}
.b-sub > div{overflow:hidden;min-height:0}
.b-sub .in2{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.b-t2{padding:7px 13px;border-radius:999px;font-family:inherit;font-size:12.5px;
  color:var(--gc-text-low2);cursor:pointer;background:0;border:0;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);transition:color .16s,background .16s}
.b-t2:hover{color:var(--gc-text);background:var(--gc-tint-0)}
.b-t2[aria-pressed="true"]{color:var(--gc-text);background:rgba(var(--bcc),.13);
  box-shadow:inset 0 0 0 1px rgba(var(--bcc),.34)}
.b-t2 b{font-weight:500;font-size:11.5px;color:var(--gc-text-low);margin-inline-start:6px}
.b-t2:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}

/* ═════════════════════════════════════════════════════════════════
   ۲.۵ هیروی مطالب منتخب
   در وردپرس با تیک «منتخب» روی خود نوشته پر می‌شود. ترکیبش همان کارت دوتکه‌ای
   است که تایید شده (متن راست، تصویر چپ)، ولی بزرگ‌تر و قابل تعویض.

   حرکت: هر اسلاید یک ورود پلکانی دارد و تصویرش آرام بزرگ می‌شود، و نوار زیر تب
   فعال پر می‌شود تا بگوید چقدر تا اسلاید بعد مانده.
   🟢 هیچ‌کدام حلقه آزاد نیست: با هر تعویض از صفر شروع می‌شوند، پس حساب هم‌فازی
   (کف ۱۴۱ ثانیه) اصلا موضوعیت ندارد.
   ═════════════════════════════════════════════════════════════════ */
.b-hero{position:relative;margin-top:clamp(18px,2.4vw,28px);border-radius:var(--r-md);
  overflow:hidden;background:var(--gc-surface);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.b-hero-stage{position:relative;min-height:clamp(360px,33vw,430px)}

/* 🔴 پس‌زمینهٔ مات و «فیدِ روی هم»، نه کراس‌فید. قبلا قدیمی به صفر می‌رفت و
   تازه از صفر می‌آمد؛ وسطِ راه هر دو نیمه‌شفاف بودند و تیرگیِ پشتشان از میان
   هر دو دیده می‌شد ⇒ هر تعویض یک دیپِ تیره داشت — همان «fadeout عکس داخل
   اسلایدشو که تو چشم می‌زنه». حالا قدیمی (data-prev) کاملا مات می‌ماند و
   تازه رویش فید می‌شود: هیچ لحظه‌ای پوشش کم نمی‌شود، پس هیچ دیپی نیست و
   عملا هیچ فیدـاوتی دیده نمی‌شود، فقط فیدـاین. پس‌زمینهٔ مات هم لازمهٔ همین
   است، هم هر درزِ زیرپیکسلیِ مرزِ عکس/متن را هم‌رنگِ خودش می‌کند. */
.b-hs{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  background:var(--gc-surface);
  opacity:0;visibility:hidden;z-index:1;
  transition:opacity .45s var(--ease-ui),visibility .45s}
.b-hs[data-on="1"]{opacity:1;visibility:visible;z-index:3}
.b-hs[data-prev="1"]{opacity:1;visibility:visible;z-index:2;transition:none}
/* زومِ آرامِ عکسِ قدیمی ادامه پیدا می‌کند نه اینکه ریست شود: مقدارِ animation
   عینا همان است، پس مرورگر آن را ادامه می‌دهد و عکسِ زیرین وسطِ پوشیده‌شدن
   به عقب نمی‌پرد. */
.b-hs[data-prev="1"] .b-hs-ph img{animation:bhKen 9s ease-out forwards}
/* ═════ درزِ لبهٔ عکس — علتِ واقعی، بعد از سه فیکسِ بی‌اثر ═══════════════
   مالک (خانه‌های E1..E4 روی شبکه، یعنی یک نوارِ تمام‌قدِ عمودی روی لبهٔ راستِ
   عکس): «گاهی این سایه یکنواخته و چسبیده به سمت راست، گاهی نچسبیده و درحد
   یکی دو پیکسل فاصله داره که باعث میشه تصویر پشت بدون اون سایهٔ fade شده
   دیده بشه».

   یعنی گرادیانِ تیره‌کننده گاهی به لبهٔ راستِ کادرِ عکس **نمی‌رسد** و یکی دو
   پیکسلِ آخر، عکسِ خام و روشن دیده می‌شود. چرا: عکسِ در حالِ زوم لایهٔ گرافیکیِ
   جداست و برشِ آن را کامپوزیتور روی پیکسلِ کاملِ دستگاه گِرد می‌کند؛ ولی
   گرادیان در لایهٔ والد و روی همان مرزِ کسری با محوِ لبه کشیده می‌شود. این دو
   لبه یکی نمی‌مانند و هر بار که لایهٔ عکس وسطِ زوم از نو رستر می‌شود، اختلاف
   عوض می‌شود ⇒ «گاهی هست، گاهی نیست».

   🔴 چرا فیکس‌های قبلی هیچ اثری نداشتند: هر سه (هم‌رنگ‌کردنِ پس‌زمینه،
   بیرون‌زدگیِ یک‌پیکسلی، will-change) سعی داشتند آن دو لبه را **بر هم منطبق**
   کنند. منطبق‌کردنِ دو لبه‌ای که دو لایهٔ متفاوت آن‌ها را گِرد می‌کنند، شدنی
   نیست. راهِ درست: کاری کن که آنجا اصلا لبه‌ای نباشد.

   درمان: یک مستطیلِ مات از **ستونِ متن** روی سه پیکسلِ آخرِ کادرِ عکس می‌افتد.
   لبه‌های آن مستطیل هیچ‌کدام روی لبهٔ عکس نیستند، پس هر شکافی که آنجا بیفتد
   پوشیده می‌شود. برای اینکه خودِ این مستطیل دیده نشود، گرادیان در همان ۶
   پیکسلِ آخر ۱۰۰٪ مات شده (پلهٔ صافِ ۶px پایین‌تر) — یعنی جایی که پوشانده
   می‌شود از قبل هم دقیقا همین رنگ بوده.
   ⚠ سایه با آفستِ -3px و بدونِ گستردگی است نه spread: با spread حلقه‌ای دورِ
   هر چهار طرف می‌ساخت و خطِ موییِ خودِ کارت (.b-hero) را می‌پوشاند. */
.b-hs-tx{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,3vw,42px);min-width:0;
  position:relative;z-index:1;box-shadow:-12px 0 0 0 var(--gc-surface)}
/* موقعِ انیمیشنِ ورود/خروجِ صفحه (کلاسِ tf-anim از site.js) عکس نباید لایهٔ
   گرافیکیِ جدا داشته باشد؛ لایهٔ جدا داخلِ نیایِ در حالِ حرکت جداگانه گِرد
   می‌شود و شکاف را برمی‌گرداند. paused است نه none: با none ترنسفرم به
   scale(1) می‌پرد و پرشِ دیداری می‌سازد.
   ⚠ گزینشگر باید `.b-hs` را هم داشته باشد. با `html.tf-anim .b-hs-ph img`
   وزنش از `.b-hs[data-on="1"] .b-hs-ph img` کمتر می‌شد و **شورت‌هندِ**
   `animation` آن قاعده، play-state را دوباره running می‌کرد. اندازه گرفتم:
   will-change عوض می‌شد ولی play-state نه — تلهٔ ساکت. */
html.tf-anim .b-hs .b-hs-ph img{animation-play-state:paused;will-change:auto}
.b-hs-tx h2{margin:14px 0 12px;font-size:clamp(21px,2.5vw,31px);font-weight:800;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-hs-tx p{margin:0;font-size:14px;color:var(--gc-text-low2);line-height:2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-hs-tx .b-when{margin-top:18px}
/* ═════ محوشدگی با ماسک، نه با روکش ════════════════════════════════════
   🔴 چرا شکل عوض شد: با روکشِ گرادیان (`::after`) دو چیزِ جدا داشتیم — عکسی که
   لایهٔ گرافیکیِ خودش را دارد، و روکشی که در لایهٔ والد کشیده می‌شود. لبهٔ برشِ
   این دو را کامپوزیتور جدا گِرد می‌کند و یکی-دو پیکسل از هم فاصله می‌گیرند ⇒
   شکاف. تا وقتی کارت ساکن بود پوششِ ماتِ ۱۲px قایمش می‌کرد، ولی موقعِ انیمیشنِ
   خروجِ صفحه دوباره برمی‌گشت (مالک: «روی ۱۰۰٪ هست، روی ۹۰٪ نیست»).

   ماسک این را از ریشه می‌بندد: ماسک روی **خودِ همین کادر** اعمال می‌شود، پس
   محوشدگی و برش یک عملیاتِ واحدند و ذاتا نمی‌توانند از هم جدا شوند — چه عکس
   لایهٔ جدا داشته باشد چه نه، چه کارت ساکن باشد چه در حالِ پرواز.
   جایی که ماسک شفاف است پس‌زمینهٔ .b-hs دیده می‌شود که همان --gc-surface است،
   پس ظاهر عینا همان چیزی است که بود.
   ⚠ #fff نه #000: با mask-mode:alpha و luminance هر دو درست کار می‌کند.
   ⚠ ::after را برنگردان — با هم که باشند محو دوبار اعمال می‌شود و نوارِ
   محوشدگی به‌طرزِ محسوسی تیره‌تر می‌شود. */
.b-hs-ph{position:relative;overflow:hidden;background:var(--gc-surface);
  -webkit-mask-image:linear-gradient(to left,transparent 0,transparent 12px,#fff 26%);
  mask-image:linear-gradient(to left,transparent 0,transparent 12px,#fff 26%)}
/* برای مرورگرِ بدونِ ماسک، همان روکشِ قبلی برمی‌گردد تا لبه بی‌محو نماند */
@supports not (mask-image:linear-gradient(#fff,#fff)){
  .b-hs-ph::after{content:'';position:absolute;inset:0;
    background:linear-gradient(to left,
      var(--gc-surface) 0,var(--gc-surface) 12px,transparent 26%)}
}
/* ⚠ بیرون‌زدگیِ inset:-1px برداشته شد: روی لبهٔ راست دقیقا ضدِ خودش کار می‌کرد،
   چون تضمین می‌کرد آن‌طرفِ خطِ برش عکسِ خام وجود دارد — یعنی همان چیزی که در
   شکاف دیده می‌شد. حالا عکس دقیقا به اندازهٔ کادر است.
   will-change می‌ماند: لایه را ثابت نگه می‌دارد تا وسطِ زوم از نو رستر نشود. */
.b-hs-ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;will-change:transform}

/* ورود پلکانی فقط روی اسلاید فعال */
@keyframes bhIn{from{opacity:0;transform:translateY(14px)}}
@keyframes bhKen{from{transform:scale(1)}to{transform:scale(1.07)}}
.b-hs[data-on="1"] .b-cat{animation:bhIn .5s var(--ease-ui) .05s backwards}
.b-hs[data-on="1"] h2{animation:bhIn .5s var(--ease-ui) .13s backwards}
.b-hs[data-on="1"] p{animation:bhIn .5s var(--ease-ui) .21s backwards}
.b-hs[data-on="1"] .b-when{animation:bhIn .5s var(--ease-ui) .29s backwards}
/* forwards عمدی است نه both: اگر انیمیشن اجرا نشود تصویر روی مقیاس ۱ می‌ماند
   که حالت سالم است. با both روی from قفل می‌شد. */
.b-hs[data-on="1"] .b-hs-ph img{animation:bhKen 9s ease-out forwards}

/* نوار تب پایین هیرو: عنوان کوتاه هر منتخب + نوار پرشونده */
.b-hero-nav{display:flex;border-top:1px solid var(--gc-hairline);background:rgba(0,0,0,.24)}
.b-hdot{flex:1 1 0;min-width:0;position:relative;border:0;cursor:pointer;background:0;
  font-family:inherit;font-size:12.5px;line-height:1.7;color:var(--gc-text-low2);
  text-align:start;padding:13px 15px 15px;overflow:hidden;
  transition:color .2s ease,background .2s ease}
.b-hdot + .b-hdot{box-shadow:inset 1px 0 0 var(--gc-hairline)}
.b-hdot:hover{color:var(--gc-text);background:rgba(255,255,255,.04)}
.b-hdot:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-3px}
/* ⚠ اسمش `.num` بود و عوض شد: پوسته `.inp.num` را با --font-latin دارد و اینجا
   رقم فارسی می‌نشیند. همان تله «رقم فارسی داخل Poppins»، بار دوم. */
.b-hdot .b-idx{display:block;font-size:11px;font-weight:700;color:var(--gc-text-low);
  margin-bottom:3px}
.b-hdot .lbl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-weight:500}
.b-hdot[aria-selected="true"]{color:var(--gc-text);background:rgba(255,255,255,.05)}
.b-hdot[aria-selected="true"] .b-idx{color:var(--bci)}
.b-hdot .bar{position:absolute;inset-inline-start:0;bottom:0;width:100%;height:2px;
  background:rgb(var(--bcc));transform:scaleX(0);transform-origin:100% 50%}
@keyframes bhBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.b-hdot[aria-selected="true"] .bar{animation:bhBar var(--dur,7000ms) linear forwards}
.b-hero.hold .b-hdot[aria-selected="true"] .bar{animation-play-state:paused}

/* ═════════════════════════════════════════════════════════════════
   ۳. نوشته شاخص
   ═════════════════════════════════════════════════════════════════ */
/* 🔴 تصویر سمت **چپ** (دستور مالک: «این همون عکسش سمت چپ باشه قشنگ تره»).
   در RTL ستون دوم سمت چپ است، پس متن اول می‌آید و تصویر دوم. روی موبایل با
   order تصویر می‌رود بالا، عین بقیه کارت‌ها. */
.b-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  background:var(--gc-surface);border-radius:var(--r-md);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);margin-top:30px;
  transition:box-shadow .25s var(--ease-ui)}
.b-lead:hover{box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.b-lead .ph{position:relative;overflow:hidden;background:var(--gc-elevated);min-height:230px}
.b-lead .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-ui)}
.b-lead:hover .ph img{transform:scale(1.04)}
.b-lead .tx{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.b-lead h2{margin:13px 0 10px;font-size:clamp(19px,2.1vw,25px);font-weight:800;line-height:1.65}
.b-lead p{margin:0;font-size:14px;color:var(--gc-text-low2);line-height:2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-lead .b-when{margin-top:18px}

/* ═════════════════════════════════════════════════════════════════
   ۳.۵ بخش‌های دسته‌ای صفحه فهرست
   🔴 دستور مالک: «طراحی صفحه اصلی خیلی یکنواخته، هیچ ایده پردازی، نوع نمایش،
   دسته بندی یا هیچی نداره». پس چهار نوع نمایش متفاوت روی یک صفحه می‌نشیند:
     ۱ کارت شاخص دوتکه (تصویر چپ)      ۳ کارت معمولی شبکه‌ای
     ۲ کارت بزرگ با متن روی تصویر      ۴ ردیف شماره‌دار فشرده
   و هر شاخه بخش خودش را دارد با رنگ و شمار و راه رفتن به فهرست کاملش.
   ═════════════════════════════════════════════════════════════════ */
.b-band{margin-top:clamp(38px,4.5vw,60px)}
.b-sh{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.b-sh h2{margin:0;font-size:clamp(17px,1.9vw,21px);font-weight:800;display:flex;
  align-items:center;gap:10px;white-space:nowrap}
.b-sh h2 i{width:9px;height:9px;border-radius:50%;background:rgb(var(--bcc));flex:none;
  box-shadow:0 0 0 4px rgba(var(--bcc),.18)}
.b-sh .ln{flex:1;height:1px;background:linear-gradient(to left,rgba(var(--bcc),.4),transparent)}
.b-sh .all{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;
  font-weight:700;color:var(--bci);padding:6px 12px;border-radius:999px;
  background:rgba(var(--bcc),.1);transition:background .18s ease}
.b-sh .all:hover{background:rgba(var(--bcc),.2)}
.b-sh .all svg{width:13px;height:13px}
/* ⚠ اسمش `.n` بود و عوض شد: پوسته `.who .n` را با --font-latin دارد و یک نام
   دوحرفی عمومی، دقیقا همان تله «رقم فارسی داخل Poppins» را دعوت می‌کند. */
.b-sh .b-num{font-size:12.5px;color:var(--gc-text-low);font-weight:500;flex:none}

/* ── چیدمان شاخص: یک کارت بزرگ و چهار کارت معمولی ─────────────────
   بخش دوم آینه بخش اول است تا صفحه دو بار یک ریتم را تکرار نکند. */
.b-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;gap:18px}
.b-feat > .b-big{grid-column:1 / span 2;grid-row:1 / span 2}
.b-feat.rev > .b-big{grid-column:3 / span 2}

/* کارت بزرگ: متن روی خود تصویر. تنها جایی از صفحه که این‌طور است. */
.b-big{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  min-height:clamp(280px,26vw,360px);background:var(--gc-elevated);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);isolation:isolate}
.b-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  transition:transform .55s var(--ease-ui)}
.b-big:hover img{transform:scale(1.05)}
.b-big .ov{display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  min-height:inherit;padding:clamp(18px,2vw,26px);
  background:linear-gradient(180deg,rgba(8,8,10,.15) 0,rgba(8,8,10,.1) 34%,
             rgba(8,8,10,.72) 66%,rgba(8,8,10,.96) 100%)}
.b-big h3{margin:11px 0 0;font-size:clamp(16px,1.75vw,21px);font-weight:800;line-height:1.75;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-big .b-when{margin-top:12px}

/* ── ردیف شماره‌دار: سومین نوع نمایش، برای شاخه‌های کم‌نوشته ────── */
.b-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,3vw,40px)}
.b-mini{display:flex;align-items:center;gap:14px;padding-block:14px;
  border-top:1px solid var(--gc-hairline)}
.b-mini:first-of-type{border-top:0;padding-top:4px}
.b-mini .rank{font-size:19px;font-weight:800;color:rgba(var(--bcc),.55);flex:none;
  width:24px;text-align:center;transition:color .2s ease}
.b-mini:hover .rank{color:rgb(var(--bcc))}
/* ═══ درزِ لبه هنگامِ زومِ هاور ، همان خانواده‌ای که `.b-hs` و `.b-big` قبلا گرفتند
   مالک ۲۴ مرداد: «اون مشکل سایه‌ای که قبلا داشتیم، تو بعضی باکس‌های بلاگ وقتی
   موس می‌ره روی عکس و زوم می‌شه مشاهده می‌شه همچنان».

   شرطِ ساختاریِ درز: کادری که هم گوشهٔ گرد دارد هم می‌بُرد، و بچه‌اش با ترنسفرم
   زوم می‌شود. آن‌وقت بچه لایهٔ گرافیکیِ خودش را می‌گیرد و برشِ گِردشده را
   کامپوزیتور جدا از والد گِرد می‌کند ⇒ یکی-دو پیکسل درز.

   جارو زدم و دیدم `.b-big` از قبل `isolation:isolate` دارد و درست است، ولی
   `.b-mini .ph` و `.b-c .ph` هیچ لنگرِ لایه‌ای ندارند. همان درمانِ `.b-big` روی
   این دو هم گذاشته شد.
   ⚠ روی `.b-c` خودِ کارت گوشه را دارد و `.ph` می‌بُرد، پس هر دو لنگر می‌خواهند.
   ⚠ ندیدمش (پنل مرورگر باز نبود) ، شرطِ ساختاری‌اش اندازه‌گیری شد نه پیکسلش. */
.b-mini .ph,.b-c .ph,.b-c{isolation:isolate}
.b-mini .ph,.b-c .ph{transform:translateZ(0)}

.b-mini .ph{width:76px;height:54px;border-radius:10px;overflow:hidden;flex:none;
  background:var(--gc-elevated);position:relative}
.b-mini .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease-ui)}
.b-mini:hover .ph img{transform:scale(1.07)}
.b-mini .tx{min-width:0}
.b-mini h3{margin:0 0 5px;font-size:13.5px;font-weight:700;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .18s ease}
.b-mini:hover h3{color:var(--bci)}

/* ═════════════════════════════════════════════════════════════════
   ۴. شبکه کارت‌ها
   ═════════════════════════════════════════════════════════════════ */
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));
  gap:22px;margin-top:22px}
.b-c{display:flex;flex-direction:column;background:var(--gc-surface);border-radius:var(--r-md);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:transform .22s var(--ease-ui),box-shadow .22s var(--ease-ui)}
.b-c:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.b-c .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--gc-elevated)}
.b-c .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease-ui)}
.b-c:hover .ph img{transform:scale(1.05)}
.b-c .tx{padding:15px 17px 18px;display:flex;flex-direction:column;flex:1}
.b-c h3{margin:11px 0 0;font-size:14.5px;font-weight:700;line-height:1.9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-c .b-when{margin-top:auto;padding-top:13px}
.b-c[hidden]{display:none}

/* کارت بدون تصویر شاخص. یکی از ۱۲۰ نوشته واقعا تصویر ندارد، پس حالت خالی
   طراحی می‌شود نه اینکه کارت خراب رندر شود. */
.b-noimg{display:grid;place-items:center;position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 0,rgba(var(--bcc),.14),transparent 70%),var(--gc-elevated)}
.b-noimg svg{width:40px;height:40px;color:rgba(var(--bcc),.5)}

/* چیپ دسته و تاریخ */
.b-cat{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:rgba(var(--bcc),.14);color:var(--bci)}
.b-cat i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.b-when{font-size:12px;color:var(--gc-text-low);display:flex;align-items:center;gap:8px}

/* ═════════════════════════════════════════════════════════════════
   ۵. پایین فهرست
   ═════════════════════════════════════════════════════════════════ */
/* نوار «داری نوشته‌های یک نویسنده را می‌بینی» */
.b-authbar{margin-bottom:16px}
.b-authbar[hidden]{display:none}

.b-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:38px}
.b-count{font-size:12.5px;color:var(--gc-text-low)}
.b-none{text-align:center;padding:64px 20px;color:var(--gc-text-low);display:none}
.b-none.on{display:block}
.b-none .big{font-size:15.5px;color:var(--gc-text-mid);margin-bottom:6px}

/* ورود پلکانی بعد از عوض‌شدن فیلتر. سقف شش پله، وگرنه با ۹۲ کارت
   ردیف‌های پایین «انتظار» می‌شوند. */
@keyframes bIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.b-grid.shuf .b-c:not([hidden]){animation:bIn .34s var(--ease-ui) backwards}
.b-grid.shuf .b-c:not([hidden]):nth-child(6n+2){animation-delay:.03s}
.b-grid.shuf .b-c:not([hidden]):nth-child(6n+3){animation-delay:.06s}
.b-grid.shuf .b-c:not([hidden]):nth-child(6n+4){animation-delay:.09s}
.b-grid.shuf .b-c:not([hidden]):nth-child(6n+5){animation-delay:.12s}
.b-grid.shuf .b-c:not([hidden]):nth-child(6n+6){animation-delay:.15s}

/* ═════════════════════════════════════════════════════════════════
   ۶. صفحه نوشته — هیرو
   تصویر شاخص تمام‌عرض با پرده تیره. متن پلکانی می‌آید (چیپ، تیتر، امضا).
   ═════════════════════════════════════════════════════════════════ */
/* 🔴 عمدا زیر هدر نمی‌رود. برای رفتن زیر هدر باید با margin منفی به اندازه
   ارتفاع هدر بالا کشیده شود، ولی ارتفاع واقعی هدر دو حالت دارد (۷۳ باز و ۶۱
   فشرده) و هر عددی که اینجا بنویسم در یکی از دو حالت شکاف باز می‌کند. همان
   باگ ثبت‌شده --hdr-h . پس هیرو در جریان عادی می‌نشیند و به‌جایش بلندتر است. */
.bp-hero{position:relative;isolation:isolate;min-height:clamp(330px,44vw,470px);
  display:flex;align-items:flex-end;padding-bottom:clamp(26px,3.4vw,42px)}
.bp-hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bp-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* 🔴 پرده باید **زیر خود متن** تیره باشد، نه فقط ته قاب. با تصویر شاخص روشن
   (دستور مالک: «الان یک عکس با تم روشن باشه هیچی دیده نمیشه از تیتر») پرده
   قبلی وسط قاب فقط ۰.۴ بود و تیتر گم می‌شد. حالا از ۵۵٪ ارتفاع به بعد،
   یعنی دقیقا جایی که چیپ و تیتر و امضا می‌نشینند، تقریبا مات است. */
.bp-hero .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.80) 0,rgba(8,8,10,.34) 24%,
                             rgba(8,8,10,.72) 55%,rgba(8,8,10,.94) 78%,rgba(8,8,10,.99) 100%),
             linear-gradient(220deg,rgba(var(--bcc),.30),transparent 58%)}
/* و یک سایه روی خود حروف، برای تصویرهایی که حتی زیر پرده هم روشن‌اند */
.bp-hero .wrap{text-shadow:0 2px 16px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.bp-hero .bp-chips,.bp-hero .bp-av{text-shadow:none}
.bp-hero .wrap{position:relative;z-index:1;width:100%}
/* 🔴 دور دوم همین ایراد: «همچنان این بخش خوانایی و جداشوندگی مناسبی با عکس
   بک گراند ندارن». پرده عمودی بالای قاب کم‌رنگ است (باید تصویر دیده شود)، پس
   نان سوخاری و چیپ‌ها **زمینه خودشان** را می‌گیرند: یک قرص تیره با بلور، که
   روی هر تصویری، روشن یا تیره، جدا دیده می‌شود. */
.bp-crumb{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;
  color:var(--gc-text-mid);margin-top:clamp(26px,3vw,38px);
  padding:7px 14px;border-radius:999px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bp-crumb a:hover{color:#fff}
.bp-crumb i{opacity:.4;font-style:normal}
.bp-crumb span{color:#fff;font-weight:700}
.bp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* چیپ روی تصویر: پس‌زمینه تیره مات به‌جای ته‌رنگ نیمه‌شفاف، و خط دور رنگی */
.bp-hero .b-cat{background:rgba(8,8,10,.7);backdrop-filter:blur(10px);color:var(--bci);
  box-shadow:inset 0 0 0 1px rgba(var(--bcc),.55);padding:6px 13px}
.bp-hero h1{margin:14px 0 0;font-size:clamp(24px,3.4vw,42px);font-weight:800;line-height:1.55;
  max-width:min(100%,760px);text-wrap:balance}
.bp-by{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:20px;
  font-size:13px;color:var(--gc-text-mid)}
/* 🔴 پدینگ باید منطقی باشد نه فیزیکی. با `padding:5px 12px 5px 5px` در صفحهٔ
   راست‌چین ۱۲ پیکسل می‌افتاد سمتِ **آواتار** و ۵ پیکسل سمتِ متن؛ یعنی دایرهٔ
   آواتار از لبهٔ کپسول فاصله می‌گرفت و متن به لبهٔ دیگر می‌چسبید — همان
   «بک‌گراندش خرابه». با inline-start/end آواتار در لبه لانه می‌کند و متن جا
   می‌گیرد، و کلِ کپسول همان‌قدر که مالک خواست به چپ می‌آید. */
.bp-by .who2{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--gc-text);
  padding-block:5px;padding-inline:5px 12px;border-radius:999px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .18s ease}
.bp-by a.who2:hover{box-shadow:inset 0 0 0 1px rgba(var(--bcc),.6)}
/* بقیه ردیف امضا هم روی تصویر روشن باید خوانده شود */
.bp-by em{background:rgba(8,8,10,.5);backdrop-filter:blur(8px);padding:5px 11px;border-radius:999px}
.bp-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,rgba(var(--bcc),.95),rgba(var(--bcc),.5))}
.bp-by .dot{width:3px;height:3px;border-radius:50%;background:var(--gc-text-low);flex:none}
.bp-by em{font-style:normal;display:inline-flex;align-items:center;gap:6px;color:var(--gc-text-low2)}
.bp-by svg{width:14px;height:14px;opacity:.75}

/* نوار پیشرفت خواندن. ۲ پیکسل و نه ۱: خط مو روی نمایشگر مالک شکننده دیده می‌شود. */
.bp-prog{position:fixed;top:var(--hdr-h);inset-inline:0;height:2px;z-index:90;
  background:linear-gradient(90deg,rgb(var(--bcc)),var(--bci));
  transform-origin:100% 50%;transform:scaleX(0);will-change:transform;
  transition:transform .09s linear}
html[dir="ltr"] .bp-prog{transform-origin:0 50%}

/* ═════════════════════════════════════════════════════════════════
   ۷. بدنه نوشته
   ═════════════════════════════════════════════════════════════════ */
.bp-body{padding-block:clamp(34px,4vw,54px) clamp(48px,6vw,80px)}
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(28px,4vw,58px);
  align-items:start;max-width:1140px;margin-inline:auto}
/* 🔴 هیچ سقف عرضی روی متن نیست. سقف 74ch در text.css و سقف 70ch خودم، متن را
   نصفِ ستون می‌کردند در حالی که تصویرها تمام‌عرض بودند («متن باید کل عرض رو
   بپوشونه، نصفه است»). حالا متن و رسانه هم‌عرضند. */
.bp-art .prose{max-width:none}
.bp-art .prose > h2{font-size:clamp(19px,2.1vw,23px);margin:46px 0 14px}
.bp-art .prose > h2:first-child{margin-top:0}
/* جاستیفای، دستور مالک. آخرین خط طبق جهت خودش می‌چسبد (پیش‌فرض auto) و
   شکستن کلمه خاموش است تا واژه فارسی وسط از هم نپاشد. */
.bp-art .prose > p{margin:0 0 16px;text-align:justify;hyphens:none}

/* ── خط تیتر، خودکار روی هر تیتری که نویسنده بنویسد ────────────────
   🔴 دستور مالک: «کلا تبدیل به یک کدی کن که هروقت نویسنده یه تیتر نوشت خود به
   خود اون بیاد». پس هیچ مارک‌آپ اضافه‌ای لازم نیست: خودِ h2/h3 فلکس می‌شود و
   خط، یک ::after است. روی تیتر فارسی خط به چپ کشیده می‌شود و روی تیتر انگلیسی
   (که blog.js خودش dir=ltr می‌زند) به راست. یعنی یک قاعده، هر دو زبان.
   ⚠ تیتر دوخطی: خط وسطِ ارتفاع می‌نشیند نه روی خط آخر. عمدی است، چون
   هم‌ترازی با خط آخر نیاز به اندازه‌گیری در JS دارد و ارزشش را ندارد. */
/* 🔴 فلکس فقط وقتی امن است که محتوای تیتر **یک** آیتم باشد. اول بدون این کار
   کردم و هر span لاتین داخل تیتر یک آیتم جدا شد، پس gap بین تک‌تک واژه‌ها
   افتاد و تیتر «حذف Hyper-Threading در Core Ultra» با فاصله‌های عجیب رندر شد.
   blog.js محتوای هر تیتر را در یک span می‌پیچد (.b-ht) و آن‌وقت gap فقط بین
   متن و خط می‌افتد. تا وقتی JS نیامده، تیتر عادی و سالم است. */
.bp-art .prose h2:has(> .b-ht),
.bp-art .prose h3:has(> .b-ht){display:flex;align-items:center;gap:14px}
.bp-art .prose .b-ht{flex:0 1 auto;min-width:0}
.bp-art .prose h2 > .b-ht + .b-hl,
.bp-art .prose h3 > .b-ht + .b-hl{flex:1 1 auto;min-width:28px;height:1px;
  background:linear-gradient(to left,rgba(var(--bcc),.55),rgba(var(--bcc),0))}
/* تیتر انگلیسی: کل بلوک چپ‌به‌راست، پس خط از کنارش به راست می‌رود */
.bp-art .prose h2[dir="ltr"],
.bp-art .prose h3[dir="ltr"]{font-family:var(--font-latin)}
.bp-art .prose h2[dir="ltr"] > .b-hl,
.bp-art .prose h3[dir="ltr"] > .b-hl{background:linear-gradient(to right,rgba(var(--bcc),.55),rgba(var(--bcc),0))}

/* تصویر تک — بدون خط جداکننده بالا و پایین.
   نسخه فعلی سایت بین هر دو عنصر یک <hr> تمام‌عرض دارد (۲۶ تا فقط در همین
   نوشته). ریتم را فاصله می‌سازد، نه خط. */
.bp-fig{margin:30px 0;border-radius:var(--r-md);overflow:hidden;background:var(--gc-elevated);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.bp-fig img{width:100%;display:block}
.bp-fig figcaption{font-size:12.5px;color:var(--gc-text-low);padding:11px 16px;line-height:1.85;
  border-top:1px solid var(--gc-hairline)}

/* ── مطالب مشابه، وسط مطلب ────────────────────────────────────────
   دستور مالک: مثل قالب Jannah وسط نوشته پیشنهاد بدهیم (برای سئو هم خوب است)،
   ولی «خلاقانه‌تر و زیباتر». نسخه Jannah یک تیتر خط‌دار است و دو کارت لخت.
   اینجا یک تخته جدا با ته‌رنگ شاخه است تا خواننده بفهمد بخشی از متن نیست، و
   هر کارت یک ردیف افقی با شماره و تصویر و پیکانی که با hover جلو می‌آید. */
.bp-more{margin:38px 0;padding:20px clamp(16px,2vw,22px);border-radius:var(--r-md);
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(var(--bcc),.11),rgba(255,255,255,.02) 46%),var(--gc-surface);
  box-shadow:inset 0 0 0 1px rgba(var(--bcc),.24)}
.bp-more > .kick3{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  color:var(--bci);margin-bottom:4px}
.bp-more > .kick3 svg{width:15px;height:15px}
.bp-more-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
.bp-sug{display:flex;align-items:center;gap:13px;padding:11px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);transition:background .2s ease,transform .2s var(--ease-ui)}
.bp-sug:hover{background:rgba(var(--bcc),.14);transform:translateY(-2px)}
.bp-sug .ph{width:82px;height:58px;border-radius:9px;overflow:hidden;flex:none;
  background:var(--gc-elevated)}
.bp-sug .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease-ui)}
.bp-sug:hover .ph img{transform:scale(1.08)}
.bp-sug .tx{min-width:0;flex:1}
.bp-sug h4{margin:0 0 5px;font-size:13.5px;font-weight:700;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-sug .go2{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--bcc),.16);color:var(--bci);opacity:0;transform:translateX(6px);
  transition:opacity .2s ease,transform .2s var(--ease-ui)}
.bp-sug:hover .go2{opacity:1;transform:none}
.bp-sug .go2 svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.bp-sug .go2{opacity:1;transform:none}}

/* تیتر بخش بنچمارک: یک نوار باریک به‌جای تیتر وسط‌چین + دو خط.
   🔴 کل بلوک ltr است (دستور مالک: «تیترهای انگلیسی باید سمت چپ برن»)، پس تیتر
   سمت چپ می‌نشیند و خط از کنارش به راست کشیده می‌شود. */
.bp-mark{display:flex;align-items:center;gap:14px;margin:52px 0 18px;direction:ltr}
.bp-mark h2{margin:0;font-size:clamp(18px,2vw,22px);font-weight:800;white-space:nowrap;
  font-family:var(--font-latin)}
.bp-mark span{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--bcc),.5),transparent)}

/* ═════════════════════════════════════════════════════════════════
   ۸. اسلایدر tfs
   جانشین بلوک tweakfa/slideshow . داده ورودی همان است (آرایه آدرس تصویر)،
   پس نوشته‌های موجود بدون تغییر روی این قالب می‌نشینند. نام اسلاید (data-name)
   اختیاری است و اگر نبود، نوار پایین به‌جای اسم، تصویر کوچک نشان می‌دهد.

   🔴 حالت پایه (بدون کلاس .on) یک ردیف اسکرول‌شونده ساده است. کلاس .on را فقط
   JS می‌گذارد. پس اگر JS اجرا نشود یا خطا بدهد، هیچ اسلایدی «برای همیشه نامرئی»
   نمی‌ماند؛ همان چیزی دیده می‌شود که وردپرس امروز نشان می‌دهد.
   ═════════════════════════════════════════════════════════════════ */
/* 🔴 اسلایدر عمدا چپ‌به‌راست است (دستور مالک): تصویر اول سمت چپ می‌نشیند و به
   سمت راست ورق می‌خورد. محتوایش هم لاتین است (نمودار و عکس محصول). فقط
   برچسب‌های فارسی داخلش دوباره rtl می‌شوند، وگرنه «۱ از ۱۲» جابه‌جا می‌شود. */
.tfs{margin:30px 0;direction:ltr;--tfs-h:360px;--tfs-step:280px;--tfs-sign:1}

/* زیرنویس خود اسلایدر: جای منبع داده. بلوک فعلی وردپرس این را ندارد و
   بنچمارک بدون منبع، ادعاست. متن فارسی است، پس از ltr خود اسلایدر برمی‌گردد. */
.tfs > figcaption{font-size:12.5px;color:var(--gc-text-low);margin-top:11px;line-height:1.85;
  direction:rtl;text-align:right}
.tfs-track{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0;scrollbar-width:thin}
.tfs-slide{flex:0 0 86%;scroll-snap-align:center;margin:0;position:relative;
  border-radius:var(--r-md);overflow:hidden;background:var(--gc-elevated);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.tfs-slide img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.tfs-arw,.tfs-strip,.tfs-bar,.tfs-zoom{display:none}

/* ── حالت ارتقایافته ─────────────────────────────────────────────── */
.tfs.on .tfs-stage{position:relative;height:var(--tfs-h);overflow:clip;touch-action:pan-y}
.tfs.on .tfs-track{display:block;overflow:visible;height:100%;scroll-snap-type:none}
/* will-change: اسلایدها دائم با translate+scale جابه‌جا می‌شوند و بدونِ لایهٔ
   ثابت، خطِ موی دورشان حینِ حرکت فلیکر می‌زد (ارتقا و تنزلِ لایه وسطِ ترنزیشن).
   حداکثر ~۱۲ اسلاید در صفحه است، هزینه‌اش ناچیز است. */
.tfs.on .tfs-slide{position:absolute;top:0;left:50%;height:100%;width:auto;
  will-change:transform,opacity;
  aspect-ratio:var(--tfs-ar,16/9);
  transform:translateX(-50%)
            translateX(calc(var(--tfs-sign) * var(--d,0) * var(--tfs-step) + var(--tfs-dx,0px)))
            scale(var(--sc,1));
  transition:transform .52s var(--ease-unfold),opacity .42s var(--ease-ui),
             filter .42s var(--ease-ui);
  cursor:zoom-in;--sc:.8;opacity:0;visibility:hidden;z-index:1}
.tfs.on .tfs-slide[data-d="0"]{--sc:1;opacity:1;visibility:visible;z-index:4;
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong),0 22px 54px rgba(0,0,0,.5)}
.tfs.on .tfs-slide[data-d="1"],
.tfs.on .tfs-slide[data-d="-1"]{--sc:.87;opacity:.42;visibility:visible;z-index:3;
  filter:saturate(.55)}
.tfs.on .tfs-slide[data-d="2"],
.tfs.on .tfs-slide[data-d="-2"]{--sc:.79;opacity:.14;visibility:visible;z-index:2;
  filter:saturate(.3)}
.tfs.on .tfs-slide[data-d="0"] img{cursor:zoom-in}
.tfs.on.drag .tfs-slide{transition:none}
.tfs.on.drag .tfs-stage{cursor:grabbing}

/* برچسب اسم روی خود اسلاید فعال — وقتی نوار پایین تصویرکی است، اسم
   جایی باید نوشته شود. */
.tfs-name{position:absolute;left:0;bottom:0;z-index:2;max-width:64%;
  font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;
  font-size:12.5px;font-weight:600;color:#fff;padding:8px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,rgba(8,8,10,.9),rgba(8,8,10,.55) 70%,rgba(8,8,10,0));
  opacity:0;transition:opacity .3s var(--ease-ui);pointer-events:none}
.tfs.on .tfs-slide[data-d="0"] .tfs-name{opacity:1}
.tfs.solo .tfs-name{opacity:1}
.tfs.names .tfs-name{display:none}   /* وقتی نوار پایین خودش اسم دارد، تکرار نشود */

/* ── فلش‌ها ───────────────────────────────────────────────────────
   🔴 دو مسیر SVG جدا نوشته می‌شوند و هیچ‌کدام با CSS آینه نمی‌شوند. یک بار
   فلش «بعدی» هم مسیر چپ‌گرا داشت هم scaleX(-1) گرفت و هر دو فلش یک سمت را
   نشان دادند. */
.tfs.on .tfs-arw{display:grid;place-items:center;position:absolute;top:50%;z-index:6;
  width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(13,11,19,.78);backdrop-filter:blur(9px);color:var(--gc-text);
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong);
  transition:background .18s ease,transform .18s ease,opacity .18s ease}
.tfs.on .tfs-arw:hover{background:rgba(var(--gc-violet-rgb),.62);transform:scale(1.07)}
.tfs.on .tfs-arw:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.tfs.on .tfs-arw[disabled]{opacity:.28;pointer-events:none}
.tfs.on .tfs-arw svg{width:19px;height:19px}
/* 🔴 در RTL اسلاید بعدی سمت **چپ** می‌نشیند (sign منفی)، پس دکمه «بعدی» هم باید
   چپ باشد و «قبلی» راست. نسخه اول برعکس بود و در رندر دیده شد.
   جایشان به لبه خود کارت فعال بند است نه به لبه صحنه، وگرنه وسط فضای خالی
   یا روی اسلاید همسایه شناور می‌مانند. --tfs-w را JS از عرض واقعی کارت می‌دهد. */
.tfs.on .tfs-arw.p{inset-inline-start:max(6px,calc(50% - var(--tfs-w,60%)/2 - 22px))}
.tfs.on .tfs-arw.n{inset-inline-end:max(6px,calc(50% - var(--tfs-w,60%)/2 - 22px))}
/* 🔴 صفت hidden کافی نبود: قاعده بالا display:grid می‌دهد و از استایل پیش‌فرض
   مرورگر برای [hidden] قوی‌تر است، پس روی قاب تک‌تصویر هر دو فلش دیده می‌شدند.
   ⚠ و سه کلاس لازم شد نه دو تا: `.tfs.on .tfs-count{display:block}` پایین‌تر
   در همین فایل است و با ویژگی برابر برنده می‌شد، پس شمارنده «۱ از ۱» می‌ماند
   و روی برچسب اسم می‌افتاد. */
.tfs.on.solo .tfs-arw,.tfs.on.solo .tfs-count{display:none}

/* ── زوم ─────────────────────────────────────────────────────────── */
/* 🔴 جای این دو با left/right **فیزیکی** تعیین می‌شود، نه inline-start/end.
   چون برای خوانا ماندن متن فارسی روی خودشان direction:rtl گذاشته‌ام و
   inline-start نسبت به direction خودِ عنصر حساب می‌شود ⇒ جایشان برعکس می‌شد و
   دکمه زوم می‌افتاد روی برچسب اسم. اسلایدر ltr است، پس: زوم راست، شمارنده چپ. */
.tfs.on .tfs-zoom{display:inline-flex;align-items:center;gap:7px;position:absolute;
  z-index:6;right:max(10px,calc(50% - var(--tfs-w,60%)/2 + 12px));left:auto;
  bottom:10px;height:34px;padding:0 13px;border:0;
  border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;
  background:rgba(13,11,19,.78);backdrop-filter:blur(9px);color:var(--gc-text-mid);
  direction:rtl;
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong);transition:color .18s,background .18s}
.tfs.on .tfs-zoom:hover{color:var(--gc-text);background:rgba(var(--gc-violet-rgb),.5)}
.tfs.on .tfs-zoom:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.tfs.on .tfs-zoom svg{width:15px;height:15px}

/* ── نوار پایین: تب‌ها یا تصویرک‌ها، با قرص لغزان ──────────────────
   🔴 عمدا justify-content:center ندارد. با مرکزچینی، به‌محض سرریز شدن نوار،
   offsetLeft منفی می‌شود و قرص دقیقا به‌اندازه سرریز جابه‌جا می‌افتد. این باگ
   یک بار در همین سایت اتفاق افتاد و فقط با فونت جایگزین دیده می‌شد. */
.tfs.on .tfs-bar{display:block;position:relative;margin-top:14px}
/* position:relative اجباری است: قرص باید فرزند همین نوار باشد تا با اسکرول
   نوار جابه‌جا شود، و offsetLeft تب‌ها هم نسبت به همین نوار حساب شود. */
/* width:max-content + margin auto ⇒ با تب کم، نوار جمع و وسط است؛ با تب زیاد
   تمام‌عرض می‌شود و اسکرول می‌خورد. عمدا به‌جای justify-content:center، چون
   مرکزچینی به‌محض سرریز offsetLeft را منفی می‌کند و قرص جابه‌جا می‌افتد. */
.tfs-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;position:relative;
  width:max-content;max-width:100%;margin-inline:auto;
  padding:4px;border-radius:999px;background:var(--gc-tint-0);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.tfs.on .tfs-strip{display:flex}
.tfs-strip::-webkit-scrollbar{display:none}
.tfs-tab{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;border:0;border-radius:999px;background:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--gc-text-low2);white-space:nowrap;
  transition:color .2s ease}
.tfs-tab .n2{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate}
.tfs-tab:hover{color:var(--gc-text)}
.tfs-tab[aria-selected="true"]{color:#fff;font-weight:700}
.tfs-tab:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-2px}
.tfs-tab img{width:30px;height:22px;object-fit:cover;border-radius:5px;display:block;
  background:#fff;opacity:.55;transition:opacity .2s ease}
.tfs-tab[aria-selected="true"] img{opacity:1}
/* قرص: با translate روی offsetLeft/offsetTop می‌نشیند و left ثابت صفر است.
   فرمول قدیمی (عرض نوار منهای offsetLeft) در سرریز خراب می‌شد چون عرض نوار
   «دیده‌شده» است و offsetLeft در مختصات «محتوا». */
.tfs-pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;
  background:rgba(var(--bcc,var(--gc-violet-rgb)),.85);
  transition:transform .34s var(--ease-unfold),width .34s var(--ease-unfold);
  pointer-events:none}

/* ── شمارنده ─────────────────────────────────────────────────────── */
.tfs-count{position:absolute;z-index:6;bottom:12px;direction:rtl;
  left:max(12px,calc(50% - var(--tfs-w,60%)/2 + 12px));right:auto;
  font-size:12px;color:var(--gc-text-mid);background:rgba(13,11,19,.78);
  backdrop-filter:blur(9px);padding:5px 12px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);pointer-events:none;display:none}
.tfs.on .tfs-count{display:block}
.tfs-count b{color:var(--gc-text);font-weight:700}

/* ── لایت‌باکس ───────────────────────────────────────────────────── */
/* 🔴 با کلاس .on و ترنزیشن باز نمی‌شود، با انیمیشن و fill-mode:backwards باز
   می‌شود. دلیلش قاعده ثبت‌شده است: هر حالتی که «تا وقتی JS کلاس نزده نامرئی
   است» یک راه دارد که برای همیشه نامرئی بماند. این‌طور اگر انیمیشن هم اجرا
   نشود، لایت‌باکس دیده می‌شود. */
/* ── مودال تصویر، به سبک پاپ‌آپ خود برنامه فونیکس ──────────────────
   🔴 دستور مالک: «عکس رو با یک انیمیشن بزرگ کن و اطرافش رو بلر و تاریک کن، یعنی
   همچنان محتوای سایت ویزیبل باشه». پرده قبلی ۹۴٪ مات بود و صفحه کاملا محو
   می‌شد. عددها از خود برنامه برداشته شده‌اند نه از چشم:
   `app/styles.css` ⇒ `--gc-scrim: rgba(3,4,6,.72)` و `backdrop-filter: blur(6px)`
   و کارت با `border-radius:16px` و ورودِ `cubic-bezier(.2,.8,.2,1)`.

   ⚠ هیچ animation یا transitionی برای باز شدن ندارد؛ ورود را JS با Web Animations
   می‌سازد که fill پیش‌فرضش none است. یعنی حالت استراحتِ کارت همان حالت نهایی
   است و در هیچ محیطی «نامرئی» گیر نمی‌کند. */
.tfs-lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,3vw,40px);
  background:rgba(3,4,6,.72);backdrop-filter:blur(6px)}
/* will-change: کارت با FLIP پرواز می‌کند؛ بدونِ لایهٔ ازپیش‌ساخته، لحظهٔ شروعِ
   انیمیشن ارتقای لایه خودش یک پرش/فلیکر می‌سازد. یک عنصرِ موقتی است، ارزان. */
.tfs-lb-card{display:flex;flex-direction:column;min-height:0;
  width:min(1180px,100%);max-height:100%;will-change:transform;
  background:var(--gc-surface);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong),0 34px 90px rgba(0,0,0,.62)}
.tfs-lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex:none;padding:12px 14px;color:var(--gc-text-mid);font-size:13px;
  border-bottom:1px solid var(--gc-hairline)}
.tfs-lb-top .t{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;
  color:var(--gc-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 🔴 باگ واقعی که مالک دید و «زوم اصلا کار نمیکنه» گزارش شد:
   با `max-height:100%` تصویر مهار **نمی‌شد**. اندازه‌گیری: قاب ۶۶۰ پیکسل ولی
   تصویر ۱۳۶۷ پیکسل، یعنی ۷۰۰ پیکسل از پایین صفحه می‌زد بیرون و دکمه‌های بستن
   و فلش‌ها از دید خارج می‌شدند. درصدِ max-height روی آیتم گرید قابل‌اتکا نیست.
   جواب قطعی: خودِ تصویر ۱۰۰٪ در ۱۰۰٪ قاب باشد و contain جا بدهد. */
/* 🔴 نسخه دوم همین باگ: با `height:100%` هم مهار نشد. اندازه‌گیری نشان داد ردیف
   گرید خودِ قاب auto است، پس درصدِ ارتفاع روی فرزند **حلقوی** می‌شود و مرورگر
   آن را auto می‌گیرد؛ تصویر ۶۹۱ پیکسل شد داخل قابِ ۶۶۰. جوابِ بی‌ابهام:
   تصویر absolute با هر چهار inset، پس اندازه‌اش کاملا از قاب تعیین می‌شود و
   هیچ درصدی در کار نیست. */
/* 🔴 سه بار اندازه‌گیری لازم شد تا این درست شود:
   ۱. `max-height:100%` اصلا اعمال نشد ⇒ تصویر ۷۰۰ پیکسل از صفحه می‌زد بیرون.
   ۲. `height:100%` روی آیتم گرید **حلقوی** شد (ردیف auto بود) ⇒ باز هم ۶۹۱ در ۶۶۰.
   ۳. `inset` تنها، تصویر را کش نمی‌دهد: img یک replaced element است و با
      top/bottom هم ارتفاع ذاتی خودش را می‌گیرد ⇒ صفر در صفر شد.
   جواب: absolute (پس از چیدمان قاب بیرون است و حلقه‌ای نمی‌ماند) **به‌علاوه**
   عرض و ارتفاع صریح. درصد اینجا به padding-box خود قاب برمی‌گردد که قطعی است. */
.tfs-lb-fig{position:relative;flex:1 1 auto;min-height:0;padding:14px}
.tfs-lb-fig img{position:absolute;top:14px;left:14px;
  width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain;
  border-radius:8px;background:#fff}
/* 🔴 اندازه واقعی، نه فقط «جا شدن». نمودارهای بنچمارک ۱۴۱۶ در ۱۵۷۵ اند و روی
   گوشی ۳۹۰ پیکسلی حتی داخل لایت‌باکس هم عددهاشان خوانده نمی‌شود. با یک ضربه
   تصویر به اندازه اصلی می‌رود و قاب اسکرول می‌خورد. */
/* ⚠ حالت «اندازه اصلی / جا بشه» و دکمه‌اش کلا حذف شدند (دستور مالک). روی گوشی
   زوم خود مرورگر جایش را می‌گیرد، چون viewport این صفحه‌ها user-scalable را
   نمی‌بندد. */
.tfs-lb-top .rt{display:flex;align-items:center;gap:10px;flex:none}
/* 🔴 direction:ltr روی این نوار اجباری است: ترتیب DOM «قبلی، شمارنده، بعدی» است
   و چون body راست‌به‌چپ است، دکمه «قبلی» سمت راست می‌افتاد در حالی که آیکنش
   چپ‌گرا بود، یعنی دقیقا همان «فلش سمت چپ و راستش برعکسه». اسلایدر خودش هم
   چپ‌به‌راست است، پس اینجا هم همان. متن فارسی شمارنده جدا rtl می‌شود. */
.tfs-lb-bot{display:flex;align-items:center;justify-content:center;gap:14px;
  flex:none;padding:12px 18px;direction:ltr;border-top:1px solid var(--gc-hairline)}
.tfs-lb-card.one .tfs-lb-bot{display:none}
.tfs-lb-x{width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;display:grid;
  place-items:center;background:var(--gc-tint-1);color:var(--gc-text);flex:none}
.tfs-lb-x:hover{background:var(--gc-tint-2)}
.tfs-lb-x:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.tfs-lb .tfs-arw2{width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;display:grid;
  place-items:center;background:var(--gc-tint-1);color:var(--gc-text)}
.tfs-lb .tfs-arw2:hover{background:rgba(var(--gc-violet-rgb),.55)}
.tfs-lb .tfs-arw2[disabled]{opacity:.3;pointer-events:none}
.tfs-lb .tfs-arw2:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.tfs-lb .tfs-arw2 svg{width:19px;height:19px}
/* نوار ltr است تا فلش‌ها با آیکنشان بخوانند، ولی خود شمارنده فارسی است.
   ⚠ اینجا direction بی‌خطر است چون آیتم فلکس است و هیچ inset-inline ندارد؛
   همان تله‌ای که یک بار دکمه زوم را جابه‌جا کرد. */
.tfs-lb-n{font-size:12.5px;color:var(--gc-text-low);direction:rtl}
body.tfs-lock{overflow:hidden}

/* ═════════════════════════════════════════════════════════════════
   ۹. ته نوشته — برچسب، هم‌رسانی، نویسنده، قبلی و بعدی، مشابه، دیدگاه
   ═════════════════════════════════════════════════════════════════ */
.bp-end{margin-top:44px;padding-top:26px;border-top:1px solid var(--gc-hairline);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.bp-tags{display:flex;flex-wrap:wrap;gap:8px}
.bp-tag{font-size:12.5px;padding:6px 13px;border-radius:999px;color:var(--gc-text-mid);
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:color .16s,background .16s}
.bp-tag:hover{color:var(--gc-text);background:var(--gc-tint-1)}
.bp-share{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--gc-text-low)}
.bp-sh{width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;display:grid;
  place-items:center;background:var(--gc-tint-0);color:var(--gc-text-mid);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:color .18s,background .18s,transform .18s}
.bp-sh:hover{color:#fff;background:rgba(var(--sc2,var(--gc-violet-rgb)),.7);transform:translateY(-2px)}
.bp-sh:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.bp-sh svg{width:16px;height:16px}

.bp-author{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 18px;
  border-radius:var(--r-md);background:var(--gc-surface);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.bp-author .bp-av{width:42px;height:42px;font-size:17px}
.bp-author .nm{font-size:14.5px;font-weight:700}
.bp-author .sub2{font-size:12.5px;color:var(--gc-text-low)}
.bp-author .go{margin-inline-start:auto}

.bp-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.bp-n{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:background .18s,box-shadow .18s}
.bp-n:hover{background:var(--gc-tint-1);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.bp-n .k2{font-size:12px;color:var(--gc-text-low);display:flex;align-items:center;gap:7px}
.bp-n .k2 svg{width:13px;height:13px}
.bp-n .t2{font-size:13.5px;font-weight:700;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-n.nx{text-align:end}
.bp-n.nx .k2{justify-content:flex-end}

.bp-h3{margin:44px 0 16px;font-size:17px;font-weight:800}
.bp-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}

.bp-cm{margin-top:44px;padding:18px 20px;border-radius:var(--r-md);background:var(--gc-surface);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.bp-cm-h{display:flex;align-items:center;justify-content:space-between;gap:14px}
.bp-cm-h h3{margin:0;font-size:15px;font-weight:700}
/* رقم فارسی، پس عمدا .ltr نگرفت (Poppins گلیف فارسی ندارد) */
.bp-cm-h .cnum{color:var(--gc-text-low);font-weight:500}
.bp-cm .st{margin:12px 0 0;font-size:13.5px;color:var(--gc-text-low2)}
.bp-cm-box[hidden]{display:none}
.bp-cm-box{margin-top:14px}

/* ═════════════════════════════════════════════════════════════════
   ۱۰. فهرست کناری صفحه نوشته
   ═════════════════════════════════════════════════════════════════ */
.bp-side{position:sticky;top:calc(var(--hdr-h) + 24px)}
.bp-side .toc{position:static;max-height:calc(100vh - var(--hdr-h) - 60px)}
.bp-toc-m{display:none}

/* ═════════════════════════════════════════════════════════════════
   ۱۱. ریسپانسیو
   ═════════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .bp-grid{grid-template-columns:minmax(0,1fr)}
  .bp-side{display:none}
  /* روی موبایل فهرست چسبان جا نمی‌شود، پس یک بازشو بالای متن می‌آید */
  .bp-toc-m{display:block;margin-bottom:26px;border-radius:var(--r-md);
    background:var(--gc-surface);box-shadow:inset 0 0 0 1px var(--gc-hairline);overflow:hidden}
  .bp-toc-m > summary{list-style:none;cursor:pointer;padding:14px 18px;font-size:13.5px;
    font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .bp-toc-m > summary::-webkit-details-marker{display:none}
  .bp-toc-m > summary svg{width:15px;height:15px;transition:transform .24s var(--ease-ui)}
  .bp-toc-m[open] > summary svg{transform:rotate(180deg)}
  .bp-toc-m .list{padding:0 12px 12px}
}
@media (max-width:1000px){
  .b-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-feat > .b-big,.b-feat.rev > .b-big{grid-column:1 / span 2;grid-row:auto}
}
@media (max-width:900px){
  .b-hs{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .b-hs-ph{order:-1;min-height:190px}
  /* روی موبایل عکس بالاست و متن پایین، پس مرزِ مشترک افقی است: هم پلهٔ صافِ
     گرادیان و هم پوششِ ماتِ ستونِ متن باید ۹۰ درجه بچرخند. */
  /* روی موبایل عکس بالاست و متن پایین ⇒ ماسک و پوشش هر دو ۹۰ درجه می‌چرخند */
  .b-hs-ph{-webkit-mask-image:linear-gradient(to top,transparent 0,transparent 12px,#fff 55%);
    mask-image:linear-gradient(to top,transparent 0,transparent 12px,#fff 55%)}
  .b-hs-tx{box-shadow:0 -12px 0 0 var(--gc-surface)}
  .b-hero-stage{min-height:520px}
  .b-hdot .lbl{-webkit-line-clamp:1}
}
@media (max-width:780px){
  .b-lead{grid-template-columns:minmax(0,1fr)}
  .b-lead .ph{min-height:0;aspect-ratio:16/9;order:-1}   /* تصویر بالا، عین کارت‌ها */
  .b-lead .tx{padding:20px}
  .b-find{flex:1 1 100%}
  .bp-end{flex-direction:column;align-items:flex-start}
  .bp-hero h1{max-width:none}
  .tfs.on .tfs-arw{width:38px;height:38px;margin-top:-19px}
  .tfs.on .tfs-arw.p{inset-inline-end:6px}
  .tfs.on .tfs-arw.n{inset-inline-start:6px}
  .tfs-lb-fig{padding:0 8px}
}
@media (max-width:620px){
  /* 🔴 عنوان روی تب باریک به «بررس…» می‌رسد که دو تبِ کنار هم را از هم جدا
     نمی‌کند. پس روی موبایل فقط شماره می‌ماند و نوار پرشونده، یعنی یک نشانگر
     تمیز به‌جای یک برچسب ناخوانا. */
  .b-hdot .lbl{display:none}
  .b-hdot{text-align:center;padding:12px 6px 14px}
  .b-hdot .b-idx{margin-bottom:0;font-size:12.5px}
}
@media (max-width:560px){
  .b-grid,.b-feat{grid-template-columns:minmax(0,1fr)}
  .b-feat > .b-big,.b-feat.rev > .b-big{grid-column:auto}
  .b-sh .ln{display:none}
  .b-sh{flex-wrap:wrap}
  .bp-author{flex-wrap:wrap}
  .bp-author .go{margin-inline-start:0;width:100%}
}

/* ═════════════════════════════════════════════════════════════════
   ۱۲. حرکت‌نخواستن
   site.css هر transition و animation را می‌کشد، ولی حالت پنهانِ **ایستا**
   را نمی‌شناسد. اینجا اسلایدهای غیرفعال حالت ایستای opacity/visibility
   دارند، پس باید خودمان خنثی‌شان کنیم وگرنه اسلایدر یک قاب خالی می‌شود.
   ═════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  /* هیرو خودش جلو نمی‌رود (JS تایمر را نمی‌سازد) و نوار پرشونده هم معنی ندارد،
     پس نوار روی حالت پر می‌ماند تا تب فعال بی‌نشانه نشود. */
  .b-hdot[aria-selected="true"] .bar{transform:scaleX(1)}
  .tfs.on .tfs-slide[data-d="1"],.tfs.on .tfs-slide[data-d="-1"],
  .tfs.on .tfs-slide[data-d="2"],.tfs.on .tfs-slide[data-d="-2"]{opacity:0;visibility:hidden}
  .tfs.on .tfs-slide[data-d="0"]{opacity:1;visibility:visible}
  .b-sub{opacity:1}
  .bp-prog{transition:none}
}

/* ═════════════════════════════════════════════════════════════════
   ۹. آرشیو دسته — صفحه‌ای که سمت سرور رندر می‌شود
   🔴 چیپ‌ها اینجا لینک واقعی‌اند نه دکمه. دلیلش دو چیز است: صفحه آرشیو اصلا
   ماژول فیلتر کلاینتی را اجرا نمی‌کند (عمدا id="bRail" ندارد)، و دکمه بدون
   جاوااسکریپت هیچ کاری نمی‌کند.
   ⚠ .b-t خودش display:inline-flex دارد و روی <a> سالم است، ولی .b-t2 ندارد و
   روی <a> اینلاین می‌شود و ارتفاع و ترازش می‌شکند.
   ═════════════════════════════════════════════════════════════════ */
a.b-t2{display:inline-flex;align-items:center}

/* ⚠ ردیف زیردسته‌ها در آرشیو همیشه باز است. باز و بسته شدنش کار جاوااسکریپت
   فهرست بود؛ اینجا کلاس on را خود سرور می‌گذارد. */

.b-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:38px}
.b-pg{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:12px;
  font-size:13.5px;font-weight:500;color:var(--gc-text-mid);
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:background .18s ease,color .18s ease}
.b-pg:hover{background:var(--gc-tint-1);color:var(--gc-text)}
.b-pg[aria-current="page"]{color:var(--gc-text);font-weight:700;
  background:rgba(var(--bcc),.16);box-shadow:inset 0 0 0 1px rgba(var(--bcc),.42)}
/* سه‌نقطه بین شماره‌ها: نه قاب دارد نه کلیک می‌شود */
.b-pg.gap{background:none;box-shadow:none;min-width:22px;padding:0;cursor:default}
.b-pg:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}

/* دسته‌ای که هنوز نوشته‌ای ندارد */
.b-empty{padding:38px 0;text-align:center;color:var(--gc-text-mid);font-size:14px}