/* ==========================================================
   استانداردِ واحدِ نوشتار و دکمه — همان مقادیرِ سایت اصلی
   ----------------------------------------------------------
   دو سایت یک برند دارند و تا امروز عددهایشان جدا نوشته
   می‌شد؛ نتیجه‌اش این بود که دکمهٔ کارتِ درون‌متن و کارتِ
   پایانِ صفحه دو ظاهر داشتند. این بلوک دقیقاً معادلِ
   econ_standards_tokens() در studiare-child است.
   ========================================================== */
:root {
	--econ-font: "IRANYekanXFaNum", "IRANYekanXVFaNumVF", system-ui, sans-serif;

	--econ-text: 17px;
	--econ-text-sm: 15px;
	--econ-text-xs: 14px;

	--econ-lh: 1.9;
	--econ-lh-tight: 1.6;
	--econ-para-gap: 1.45em;
	--econ-list-gap: .45em;

	--econ-h2: 27px;
	--econ-h2-lh: 1.35;
	--econ-h3: 22px;
	--econ-h3-lh: 1.45;
	--econ-h4: 18px;
	--econ-h4-lh: 1.5;

	--econ-navy: #0A0830;
	--econ-gold: #CCB070;
	--econ-gold-dark: #7A5D22;
	--econ-cream: #F8F4EB;
	--econ-cream-hover: #EFE5D0;
	--econ-line: #DCCB9F;
	--econ-line-hover: #CCAF72;
	--econ-ink: #3A3630;
	--econ-muted: #5A5959;
	--econ-btn-text: #3D2E0F;

	--econ-btn-radius: 15px;
	--econ-btn-pad: 17px 30px;
	--econ-btn-weight: 500;
	--econ-btn-size: 15px;
	--econ-focus: #8D703D;
}

@media (max-width: 767px) {
	:root {
		--econ-btn-radius: 10px;
		--econ-btn-pad: 12px 22px;
	}
}

/* ==========================================================
   اصلاح‌های برندیِ مجله — روی دموی Times
   عمداً کوچک و هدفمند: فقط جایی که دمو با هویتِ برند اختلاف
   دارد. طراحیِ خودِ دمو و ساختارِ منویش دست نمی‌خورد.
   ========================================================== */

:root {
	--ecm-navy: #0a0830;
	--ecm-gold: #ccb070;
	--ecm-gold-hover: #bb9e5d;
}

/* ── ۱) دکمه‌های فوتر ──
   قاعدهٔ `footer-standards.css` اعمال می‌شود (ارتفاع و padding
   درست است) ولی رنگش را چیزی در دموی Times بازنویسی می‌کند و
   `--ec-btn-text` هم روی این نصب `#000` تعریف شده. با ویژگیِ
   بالاتر و !important قطعی می‌شود؛ اندازه‌گیری‌شده: پیش از این
   پس‌زمینه سفید و متن مشکی بود. */
#footer.ec-footer .ec-cert__row button,
#footer.ec-footer .ec-newsletter__row button,
footer.ec-footer .ec-cert__row button,
footer.ec-footer .ec-newsletter__row button {
	background: var(--ecm-gold) !important;
	color: var(--ecm-navy) !important;
	border: 0 !important;
}

#footer.ec-footer .ec-cert__row button:hover,
#footer.ec-footer .ec-newsletter__row button:hover,
footer.ec-footer .ec-cert__row button:hover,
footer.ec-footer .ec-newsletter__row button:hover {
	background: var(--ecm-gold-hover) !important;
	color: var(--ecm-navy) !important;
}

/* ── دکمهٔ «ورود به آکادمی» (نوارِ پیش‌از‌فوتر) ──
   سایت اصلی این دکمه را **سرمه‌ای با متنِ سفید** دارد، نه طلایی
   (اندازه‌گیری‌شده: bg rgb(10,8,48) · color #fff · radius 10px ·
   padding 9px 20px · وزن ۷۰۰ · ۱۴px). قاعدهٔ پیشینِ من طلایی‌اش
   کرده بود که با سایت اصلی نمی‌خواند. */
.ec-precta .ec-precta__btn,
#footer.ec-footer .ec-precta__btn {
	background: var(--ecm-navy) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px;
	padding: 9px 20px;
	font-weight: 700;
	font-size: 14px;
}

.ec-precta .ec-precta__btn:hover {
	background: #120e42 !important;
	color: #fff !important;
}

/* ── ۲) تیترهای مشکی → سرمه‌ایِ برند ──
   دموی Times تیترها را مشکی می‌گذارد. سایت اصلی سرمه‌ای
   #0a0830 دارد و مالک خواست هر تیترِ مشکی به همان برسد.

   ناحیه‌های تیره (فوتر، هدر، اسلایدر، ویجت‌های dark-skin) کنار
   گذاشته شده‌اند: آن‌جا تیتر سفید است و سرمه‌ای‌کردنش یعنی
   متنِ نامرئی. */
#content .post-title,
#content .post-title a,
#content .entry-title,
#content .entry-title a,
#content .mag-box-title,
#content .mag-box-title h3,
#content .section-title,
#content .entry-content h2,
#content .entry-content h3,
#content .entry-content h4,
.container .widget-title,
.container .the-global-title {
	color: var(--ecm-navy);
}

#content .post-title a:hover,
#content .entry-title a:hover {
	color: var(--ecm-gold-hover);
}

/* ناحیه‌های تیره دست‌نخورده می‌مانند */
.dark-skin .post-title,
.dark-skin .post-title a,
.dark-skin .widget-title,
.dark-skin .the-global-title,
#footer .widget-title,
#footer .the-global-title,
#footer .post-title,
#footer .post-title a,
.ec-footer .post-title,
.ec-footer .post-title a,
.main-slider .post-title,
.main-slider .post-title a,
.tie-slider-widget .post-title,
.tie-slider-widget .post-title a {
	color: inherit;
}

/* ── ۳) دسترس‌پذیری ──
   دو ایرادی که لایت‌هاوسِ موبایل گرفت و با CSS درست می‌شود. */

/* هدفِ لمسی: لینکِ تیترِ روی تصویر ۲۹۶×۲۱ بود؛ استاندارد ۲۴px
   ارتفاعِ کمینه می‌خواهد. با line-height و padding به ۲۶ می‌رسد
   بدون اینکه چیدمان جابه‌جا شود. */
.thumb-title a,
.thumb-content .thumb-title a {
	display: inline-block;
	line-height: 1.7;
	padding-block: 2px;
}

/* لینک‌های «وارد شده‌اید به‌عنوان…» در فرمِ دیدگاه کنتراستِ
   ۱٫۹۷ داشتند (فقط برای کاربرِ واردشده دیده می‌شود). */
#respond .logged-in-as a,
#commentform .logged-in-as a {
	color: var(--ecm-navy);
	text-decoration: underline;
}

/* ── ۴) کارتِ تبلیغِ دوره‌ها ──
   هم‌زبان با کارت‌های سایت اصلی: سرمهٔ برند، لبهٔ طلایی نازک،
   و دکمهٔ سرمه‌ای با متنِ سفید (همان قرارِ .ec-precta__btn). */
.econ-cc {
	margin: 28px 0;
	padding: 22px 24px;
	border: 1px solid rgba(204, 176, 112, 0.45);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(10, 8, 48, 0.03), rgba(10, 8, 48, 0.06));
}

.econ-cc__h {
	margin: 0 0 6px;
	color: var(--ecm-navy);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.6;
}

.econ-cc__sub {
	margin: 0 0 14px;
	color: #4a4a55;
	font-size: 14px;
	line-height: 1.9;
}

.econ-cc__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.econ-cc__item { margin: 0; }

.econ-cc__link {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(10, 8, 48, 0.14);
	border-radius: 999px;
	background: #fff;
	color: var(--ecm-navy);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
}

.econ-cc__link:hover {
	border-color: var(--ecm-gold);
	color: var(--ecm-navy);
}

/* ── دکمهٔ کارتِ پایانِ صفحه ──
   دو گونه کارتِ تبلیغ دوره داریم: کارتِ درون‌متن (.ec-cc) و
   کارتِ پایانِ صفحه (.econ-cc). دومی سرمه‌ایِ توپر بود و اولی
   کرم با هاورِ سرمه‌ای؛ یعنی یک جزء با دو ظاهر. این‌جا همان
   نشانه‌های .ec-cc__cta برداشته می‌شود تا هر دو یکی باشند. */
.econ-cc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 12px 24px;
	border-radius: 15px;
	background: var(--ecc2-btn-bg, #f8f4eb);
	color: var(--ecc2-btn-tx, #7a5f2e) !important;
	border: 1px solid var(--ecc2-btn-bd, #ccaf72);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease,
	            border-color .18s ease, box-shadow .18s ease;
}

.econ-cc__btn:hover,
.econ-cc__btn:focus-visible {
	background: var(--ecc2-navy, #0a0830);
	border-color: #CCB070;
	color: #fff !important;
	box-shadow: 1px 1px 6px 1px rgba(10, 8, 48, .18);
}

.econ-cc__btn:focus-visible {
	outline: 2px solid var(--ecc2-gold, #ccb070);
	outline-offset: 2px;
}

.econ-cc-wrap { margin-block: 24px; }

@media (max-width: 600px) {
	.econ-cc { padding: 18px 16px; }
	.econ-cc__list { gap: 6px; }
}


/* ─────────────────────────────────────────────────────────────
   پردهٔ تیرهٔ اسلایدر — econ-slider-scrim

   عنوانِ اسلاید سفید است و روی تصویرِ پس‌زمینه می‌نشیند، ولی آن
   تصویر با data-bg تنبل بار می‌شود. تا لحظهٔ آمدنش زمینه سفید
   است و عنوان عملاً نامرئی — لایت‌هاوس کنتراست ۱٫۰۵ اندازه گرفت.
   دو لایه چاره است: زمینهٔ سرمه‌ایِ جایگزین روی خودِ اسلاید، و
   یک پردهٔ گرادیانی زیرِ متن که به تصویر وابسته نیست. با هر دو،
   متنِ سفید در همهٔ حالت‌ها بالای ۷:۱ کنتراست دارد.
   ───────────────────────────────────────────────────────────── */

.tie-main-slider .slide,
.tie-main-slider .grid-item,
.boxed-slider .slide,
.tie-slick-slider .grid-item {
	background-color: var(--ecm-navy, #0a0830);
}

.tie-main-slider .thumb-overlay,
.boxed-slider .thumb-overlay,
.tie-slick-slider .thumb-overlay {
	background-image: linear-gradient(
		to top,
		rgba(8, 6, 38, 0.92) 0%,
		rgba(8, 6, 38, 0.66) 40%,
		rgba(8, 6, 38, 0.18) 74%,
		rgba(8, 6, 38, 0) 100%
	);
}

.tie-main-slider .thumb-title a,
.tie-main-slider .thumb-desc,
.tie-main-slider .thumb-meta,
.tie-main-slider .thumb-meta a {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}


/* ─────────────────────────────────────────────────────────────
   دسترس‌پذیریِ لینک‌ها — econ-a11y-links

   ۱) دکمهٔ «همهٔ دوره‌ها»: قالب قاعدهٔ «.entry-content a» را با
      !important دارد و ویژگی‌اش از «.econ-cc__btn» بیشتر است،
      پس متنِ دکمه سرمه‌ای روی سرمه‌ای می‌افتاد (کنتراست ۲٫۸۳).
      این‌جا ویژگی بالاتر برده می‌شود، نه این‌که قاعدهٔ قالب
      دست بخورد.

   ۲) لینک‌های داخلِ متن: رنگشان با متنِ اطراف فقط ۱٫۹۷:۱ فرق
      دارد و معیار ۳:۱ است. بسیاری از آن‌ها style درون‌خطی
      دارند، پس تغییرِ رنگ کارساز نیست؛ زیرخط تزئین است و
      مستقل از رنگ، شرطِ WCAG را برآورده می‌کند — و برای
      کاربرِ نابیناى رنگ هم تنها نشانهٔ قابل‌اتکاست.
   ───────────────────────────────────────────────────────────── */

.econ-cc a.econ-cc__btn,
.entry-content .econ-cc a.econ-cc__btn,
#tie-wrapper .econ-cc a.econ-cc__btn {
	/* ⚠ پیش از این #fff بود چون پس‌زمینه سرمه‌ای بود. حالا که
	   دکمه کرم است، سفید روی کرم نامرئی می‌شود. */
	color: var(--ecc2-btn-tx, #7a5f2e) !important;
	text-decoration: none !important;
}

.econ-cc a.econ-cc__btn:hover,
.entry-content .econ-cc a.econ-cc__btn:hover,
#tie-wrapper .econ-cc a.econ-cc__btn:hover,
.econ-cc a.econ-cc__btn:focus-visible,
.entry-content .econ-cc a.econ-cc__btn:focus-visible,
#tie-wrapper .econ-cc a.econ-cc__btn:focus-visible {
	color: #fff !important;
	background: var(--ecc2-navy, #0a0830);
	border-color: #CCB070;
}

.entry-content p a:not(.econ-cc__btn):not(.econ-cc__link):not(.more-link),
.entry-content li a:not(.econ-cc__btn):not(.econ-cc__link):not(.more-link) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content p a:hover:not(.econ-cc__btn),
.entry-content li a:hover:not(.econ-cc__btn) {
	text-decoration-thickness: 2px;
}

.econ-cc a.econ-cc__link,
.entry-content .econ-cc a.econ-cc__link {
	text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────
   econ-cc-specificity

   قالب این قاعده را دارد:
     html #the-post .entry-content a:not(.shortc-button){color:#2a4fcc!important}
   ویژگی‌اش (۱,۲,۲) است، پس قاعده‌های سبک‌ترِ بالا — حتی با
   !important — بازنده بودند و متنِ دکمه سرمه‌ای روی سرمه‌ای
   می‌ماند. این بلوک فقط ویژگی را یک پله بالاتر می‌برد و به
   قاعدهٔ قالب دست نمی‌زند، تا لینک‌های دیگرِ متن همان‌طور
   بمانند که هستند.
   ───────────────────────────────────────────────────────────── */

html body #the-post .entry-content a.econ-cc__btn,
html body .entry-content a.econ-cc__btn,
html body .econ-cc a.econ-cc__btn {
	color: #fff !important;
	background: var(--ecm-navy, #0a0830);
	text-decoration: none !important;
}

html body #the-post .entry-content a.econ-cc__btn:hover,
html body .entry-content a.econ-cc__btn:hover,
html body .econ-cc a.econ-cc__btn:hover {
	color: #fff !important;
	background: #120e42;
}

/* قرص‌های دوره هم رنگِ برند بگیرند، نه آبیِ پیش‌فرضِ قالب */
html body #the-post .entry-content a.econ-cc__link,
html body .entry-content a.econ-cc__link,
html body .econ-cc a.econ-cc__link {
	color: var(--ecm-navy, #0a0830) !important;
	text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────
   econ-ticker-target

   لینکِ نوارِ «خبر فوری» ۳۱۳×۱۷ پیکسل بود؛ معیارِ WCAG 2.2
   برای هدفِ لمسی ۲۴×۲۴ است. ارتفاع با line-height باز می‌شود
   نه با padding، چون نوار ارتفاعِ ثابت دارد و padding آن را
   سرریز می‌کرد. همین قاعده برای نقطه‌های اسلایدر هم هست که
   هدفِ کوچکی دارند.
   ───────────────────────────────────────────────────────────── */

.breaking-news a,
.breaking-news li a,
[id^="ticker-content-"] a,
[id^="ticker-"] p a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
	vertical-align: middle;
}

.tie-slick-dots li button,
.slick-dots li button {
	min-width: 24px;
	min-height: 24px;
}


/* ─────────────────────────────────────────────────────────────
   econ-breaking-bar

   نوارِ «خبر فوری» زمینهٔ سفید دارد ولی رنگِ متنِ لینکش از
   متغیرِ روشنِ بلوک می‌آید (#eff1fb) — کنتراست ۱٫۱۲، یعنی
   عملاً نامرئی. متن به سرمه‌ای برند می‌رود که هم خوانا باشد
   هم با بقیهٔ سایت یکدست. برچسبِ «خبر فوری» هم از مشکیِ خام
   به سرمه‌ای می‌آید؛ قاعدهٔ قالب با شناسه نوشته شده، پس
   این‌جا !important لازم است نه ویژگیِ بیشتر.
   ───────────────────────────────────────────────────────────── */

html body .breaking-news-outer .ticker-content a,
html body .breaking-news-outer .breaking-news a,
html body [id^="ticker-content-"] a,
html body [id^="ticker-"] p a {
	color: var(--ecm-navy, #0a0830) !important;
}

html body .breaking-news-outer .ticker-content a:hover,
html body [id^="ticker-content-"] a:hover {
	color: #2a4fcc !important;
	text-decoration: underline;
}

html body .breaking-news-outer .breaking-title::before {
	background: var(--ecm-navy, #0a0830) !important;
}


/* ─────────────────────────────────────────────────────────────
   econ-rating-box — جعبهٔ امتیازِ خوانندگان

   تَقییم جعبه را برای «نقدِ محصول» ساخته: خلاصهٔ نقد، معیارها
   و نمرهٔ نهایی. برای مقالهٔ تحلیلی هیچ‌کدام معنا ندارد و خالی
   می‌ماند. سه بخشِ خالی جمع می‌شوند و تنها ستارهٔ خواننده
   می‌ماند؛ قابْ هم رنگِ برند می‌گیرد تا مثل بقیهٔ کارت‌های
   سایت دیده شود.
   ───────────────────────────────────────────────────────────── */

.review-box .review-summary:empty,
.review-box .review-final-score:empty,
.review-box .review-short-summary:empty,
.review-box .user-rate-wrap:empty {
	display: none;
}

.review-box {
	border: 1px solid rgba(10, 8, 48, .12);
	border-radius: 14px;
	padding: 18px 20px;
	margin-block: 28px;
	background: #fbfbfd;
}

.review-box .review-box-header,
.review-box .review-box-header .the-subtitle {
	color: var(--ecm-navy, #0a0830);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	border: 0;
	padding: 0;
	background: none;
}

.review-box .user-rate-wrap,
.review-box .review-users-rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #2c2f34;
}

/* ستاره‌ها هدفِ لمسیِ ۲۴ پیکسلی داشته باشند */
.review-box .review-stars a,
.review-box .wrap-stars a,
.review-box .user-rating-stars a {
	min-width: 24px;
	min-height: 24px;
	display: inline-block;
}


/* فقط امتیازِ خواننده: بخشِ نمرهٔ تحریریه جمع شود */
body.econ-rating-users-only .review-box .review-summary { display: none; }

.review-box .user-rate-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
}

.review-box .user-rating-text { display: inline-flex; align-items: center; gap: 6px; }
.review-box .user-rate { margin: 0; }
.review-box .taq-clear { display: none; }
.review-box .user-rate-image { cursor: pointer; }


/* ─────────────────────────────────────────────────────────────
   فرمِ درجای خبرنامه — .ecnw

   در کارتِ سایدبار و در بلوکِ بزرگِ صفحهٔ اصلی. کارتِ سایدبار
   باریک است، پس چیدمان ستونی است و در فضای بازتر دو ستونه
   می‌شود. دکمه هم‌قدِ ورودی می‌ماند تا ردیف نشکند.
   ───────────────────────────────────────────────────────────── */

.ecnw { margin: 0; }

.ecnw__hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.ecnw__label {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.ecnw__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.ecnw__input {
	/* ⚠ flex-basis اینجا نباید عدد باشد: در ستونِ باریکِ ویجت
	   ردیف عمودی می‌شود و آن عدد به **ارتفاع** بدل می‌شود؛
	   فیلد ۱۹۰ پیکسل قد می‌کشید و وقتی این شیوه‌نامه دیر
	   می‌رسید، جمع‌شدنش یک جهشِ چیدمان می‌ساخت. `auto` در هر دو
	   جهت درست است و min-width کارِ پایه را می‌کند. */
	flex: 1 1 auto;
	min-width: 190px;
	height: 46px;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid rgba(10, 8, 48, .22);
	border-radius: 10px;
	background: #fff;
	color: #2c2f34;
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
}

.ecnw__input::placeholder { color: #8a8d93; }

.ecnw__input:focus-visible {
	outline: 2px solid var(--ecm-navy, #0a0830);
	outline-offset: 1px;
	border-color: transparent;
}

.ecnw__input[aria-invalid="true"] {
	border-color: #c62828;
	outline: 2px solid #c62828;
	outline-offset: 1px;
}

.ecnw__btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ecm-gold, #ccb070);
	color: var(--ecm-navy, #0a0830);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
}

.ecnw__btn:hover { background: #bfa05c; }
.ecnw__btn:focus-visible { outline: 2px solid var(--ecm-navy, #0a0830); outline-offset: 2px; }
.ecnw__btn[disabled] { opacity: .65; cursor: progress; }

.ecnw__msg {
	min-height: 18px;
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.7;
}

.ecnw__msg.is-ok   { color: #15803d; }
.ecnw__msg.is-err  { color: #c62828; }
.ecnw__msg.is-busy { opacity: .75; }

.ecnw__note {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: #6b6f76;
}

/* در ستونِ باریکِ سایدبار، دکمه تمام‌پهنا بهتر می‌نشیند */
.widget .ecnw__row,
.subscribe-widget-content .ecnw__row { flex-direction: column; }
.widget .ecnw__btn,
.subscribe-widget-content .ecnw__btn { width: 100%; }

/* بلوکِ تیرهٔ خبرنامه: متن روشن باشد */
.subscribe-widget-content .ecnw__note { color: inherit; opacity: .75; }


/* ─────────────────────────────────────────────────────────────
   econ-tags-card — کارتِ برچسب‌ها، عیناً مثل سایت اصلی

   در سایت اصلی برچسب‌ها همان پوستهٔ فهرست و منابع و
   تولیدکنندگان را دارند: زمینهٔ کم‌رنگ، گوشهٔ ۱۴px، و نوارِ
   طلاییِ ۴px در آغاز. جنه به‌جایش یک ردیفِ ساده می‌سازد
   (post-bottom-tags). مقدارها از توکن‌های مشترک خوانده می‌شود
   تا اگر روزی پوسته عوض شد، این کارت هم با بقیه برود.

   اندازه‌های قرص از سایت اصلی اندازه‌گیری شد: زمینهٔ سفید،
   قابِ طلاییِ نیمه‌شفاف، گوشهٔ کامل، ۵px/۱۲px و ۱۳px.
   ───────────────────────────────────────────────────────────── */

.post-bottom-tags,
.post-bottom-meta.post-bottom-tags {
	margin: var(--ec-card-gap, 26px) 0;
	padding: var(--ec-card-pad, 16px 20px);
	border: 1px solid var(--ec-card-line, rgba(10, 8, 48, .12));
	border-inline-start: var(--ec-accent, 4px) solid var(--ec-gold, #ccb070);
	border-radius: var(--ec-card-radius, 14px);
	background: var(--ec-card-bg, rgba(10, 8, 48, .03));
}

.post-bottom-tags .post-bottom-meta-title {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: var(--ec-h, 17px);
	font-weight: 700;
	line-height: var(--ec-h-lh, 1.6);
	color: var(--ec-navy, #0a0830);
	text-transform: none;
	letter-spacing: 0;
	opacity: 1;
}

.post-bottom-tags .post-bottom-meta-title .tie-icon-tags { display: none; }

.post-bottom-tags .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.post-bottom-tags .tagcloud a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid rgba(204, 176, 112, .5);
	border-radius: 999px;
	background: #fff;
	color: #616875;
	font-size: 13px !important;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.post-bottom-tags .tagcloud a:hover,
.post-bottom-tags .tagcloud a:focus-visible {
	border-color: var(--ec-gold, #ccb070);
	color: var(--ec-navy, #0a0830);
	text-decoration: none;
}

/* اندازهٔ متنِ داخلِ کارت‌ها با سایت اصلی یکی شود */
.econ-toc,
.econ-credits,
.econ-src,
.econ-more,
.post-bottom-tags {
	font-size: 16.8px;
	line-height: 1.7;
}

/* عنوانِ کارت‌ها در سایت اصلی justify است */
.econ-toc .econ-toc__h,
.econ-credits .econ-credits__h,
.econ-src .econ-src__h,
.econ-more .econ-more__h {
	text-align: justify;
}


/* econ-tags-specificity — قاعدهٔ قرصِ برچسب در جنه ویژگیِ
   بالاتری دارد و رنگِ آبیِ قالب و قابِ خاکستری را برمی‌گرداند.
   این بلوک فقط یک پله بالاتر می‌رود تا رنگ‌ها همان سایت اصلی
   بماند (متنِ خاکستری، قابِ طلاییِ نیمه‌شفاف). */

html body .post-bottom-tags .tagcloud a,
html body .post-bottom-meta.post-bottom-tags .tagcloud a,
html body #tie-wrapper .post-bottom-tags .tagcloud a {
	color: #616875 !important;
	border-color: rgba(204, 176, 112, .5) !important;
	background: #fff !important;
	text-decoration: none !important;
}

html body .post-bottom-tags .tagcloud a:hover,
html body #tie-wrapper .post-bottom-tags .tagcloud a:hover {
	color: var(--ec-navy, #0a0830) !important;
	border-color: var(--ec-gold, #ccb070) !important;
}


/* econ-tags-id-level — قاعدهٔ قالب شناسه دارد:
     html #the-post .entry-content a:not(.shortc-button){color:…!important}
   ویژگی‌اش (۱,۲,۲) است و هر گزینندهٔ بدونِ شناسه — حتی با
   !important — بازنده است. پس این‌جا هم شناسه می‌آید. */

html #the-post .post-bottom-tags .tagcloud a,
html #the-post .post-bottom-meta .tagcloud a,
html body #the-post .post-bottom-tags .tagcloud a {
	color: #616875 !important;
	background: #fff !important;
	border: 1px solid rgba(204, 176, 112, .5) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

html #the-post .post-bottom-tags .tagcloud a:hover,
html #the-post .post-bottom-meta .tagcloud a:hover,
html body #the-post .post-bottom-tags .tagcloud a:hover {
	color: var(--ec-navy, #0a0830) !important;
	border-color: var(--ec-gold, #ccb070) !important;
}


/* econ-tags-win — قاعدهٔ قالب این است:
     html #the-post .entry-content a:not(.shortc-button)
   و `:not(.shortc-button)` خودش یک کلاس به ویژگی اضافه می‌کند،
   پس (۱,۲,۲) می‌شود — دقیقاً برابرِ بلوکِ قبلی، و ترتیبِ سند
   برنده را تعیین می‌کرد (استایلِ درون‌خطیِ قالب بعد از فایلِ
   ما می‌آید). این‌جا `.entry-content` هم در زنجیره می‌آید تا
   ویژگی (۱,۳,۲) شود و دیگر به ترتیب وابسته نباشد. */

html #the-post .entry-content .post-bottom-tags .tagcloud a,
html #the-post .entry-content .post-bottom-meta .tagcloud a {
	color: #616875 !important;
	background: #fff !important;
	border: 1px solid rgba(204, 176, 112, .5) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

html #the-post .entry-content .post-bottom-tags .tagcloud a:hover,
html #the-post .entry-content .post-bottom-tags .tagcloud a:focus-visible,
html #the-post .entry-content .post-bottom-meta .tagcloud a:hover {
	color: var(--ec-navy, #0a0830) !important;
	border-color: var(--ec-gold, #ccb070) !important;
}


/* ─────────────────────────────────────────────────────────────
   صفحهٔ ۴۰۴ — عیناً همان قواعدِ سایت اصلی (بخش ۳۷ style.css)
   تا کاربر در هر دو سایت یک تجربه ببیند.
   ───────────────────────────────────────────────────────────── */

.econ-404 {
	text-align: center;
	padding: 60px 20px;
	max-width: 700px;
	margin-inline: auto;
}

.econ-404 img { margin-inline: auto; }

.econ-404 h1 {
	margin: 0 0 10px;
	font-size: clamp(22px, 3.2vw, 30px);
	color: var(--ecm-navy, #0a0830);
}

.econ-404 p { margin: 0; color: #5a5959; }

.econ-404__actions {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.econ-404__actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.econ-404__actions .btn-primary {
	background: var(--ecm-navy, #0a0830);
	color: #fff !important;
	border: 1px solid var(--ecm-navy, #0a0830);
}

.econ-404__actions .btn-primary:hover { background: #120e42; color: #fff !important; }

.econ-404__actions .btn-ghost {
	background: #fff;
	color: var(--ecm-navy, #0a0830) !important;
	border: 1px solid rgba(204, 176, 112, .6);
}

.econ-404__actions .btn-ghost:hover { border-color: var(--ecm-gold, #ccb070); }

.econ-404__search { margin-top: 30px; }

.econ-404__search input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid rgba(10, 8, 48, .22);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 14px;
}

.econ-404__search input[type="search"]:focus-visible {
	outline: 2px solid var(--ecm-navy, #0a0830);
	outline-offset: 1px;
}

.econ-404__results {
	text-align: right;
	margin-top: 10px;
	padding: 0;
	list-style: none;
}

.econ-404__results li { margin: 0 0 6px; }

.econ-404__suggested { margin-top: 40px; text-align: right; }

.econ-404__suggested h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ecm-navy, #0a0830);
	margin: 0 0 10px;
}

.econ-404__suggested ul { margin: 0; padding-inline-start: 20px; }
.econ-404__suggested li { margin: 0 0 6px; }

/* لیبل فقط برای صفحه‌خوان — display:none آن را از درختِ
   دسترس‌پذیری هم حذف می‌کند، پس الگوی visually-hidden. */
.econ-404__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ecnw-column-fix — در ستونِ باریکِ ویجت، ردیف عمودی می‌شود و
   `flex: 1 1 190px` که برای چیدمانِ افقی نوشته شده بود به
   **ارتفاعِ** ۱۹۰ پیکسلی بدل می‌شد؛ فیلدِ ایمیل شبیهِ textarea
   می‌شد. در حالتِ ستونی رشد و پایه خنثی می‌شود. */

.widget .ecnw__row .ecnw__input,
.subscribe-widget-content .ecnw__row .ecnw__input,
.ecnw__row[style] .ecnw__input {
	flex: 0 0 auto;
	height: 46px;
	min-height: 46px;
	max-height: 46px;
}

.widget .ecnw__row,
.subscribe-widget-content .ecnw__row { align-items: stretch; gap: 10px; }


/* ecnw-icon-clear — ویجتِ خبرنامهٔ جنه یک آیکونِ پاکتِ نامه را
   به‌صورت background-image روی ورودی می‌گذارد. متنِ راهنما
   (placeholder) در RTL از همان سمت شروع می‌شود و روی آیکون
   می‌افتاد. آیکون برداشته می‌شود: کارت خودش بالای فرم یک
   پاکتِ بزرگ دارد و تکرارش نه لازم است نه جا دارد. */

.widget .ecnw__input,
.subscribe-widget-content .ecnw__input,
.ecnw .ecnw__input {
	background-image: none !important;
	background-position: initial !important;
	padding-inline: 14px;
	text-align: start;
}


/* ─────────────────────────────────────────────────────────────
   econ-footer-join

   نوارِ «ورود به آکادمی» (.ec-precta) و خودِ فوتر هر دو ۳۸px
   فاصلهٔ بالا گرفته بودند، پس بینشان یک نوارِ سفید می‌افتاد.
   فاصله فقط بالای نوارِ نخست می‌ماند و دو بخش به هم می‌چسبند.
   ───────────────────────────────────────────────────────────── */

.ec-precta + .ec-footer,
.ec-precta ~ .ec-footer {
	margin-block-start: 0;
}


/* ─────────────────────────────────────────────────────────────
   econ-social — شبکه‌های اجتماعیِ ما، بالای مطلب
   ───────────────────────────────────────────────────────────── */

.econ-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 4px;
}

.econ-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(204, 176, 112, .5);
	border-radius: 10px;
	background: #fff;
	color: var(--ecm-navy, #0a0830);
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

html body .econ-social .econ-social__link { color: var(--ecm-navy, #0a0830); text-decoration: none; }

.econ-social__link:hover,
.econ-social__link:focus-visible {
	background: var(--ecm-navy, #0a0830);
	border-color: var(--ecm-navy, #0a0830);
	color: #fff;
}

html body .econ-social .econ-social__link:hover { color: #fff; }

.econ-social__link svg { display: block; }


/* econ-social-center — ردیفِ شبکه‌ها و دکمه‌های هم‌رسانی
   وسط‌چین شوند؛ راست‌چین بودنشان کنارِ عنوانِ وسط‌چینِ مطلب
   ناهماهنگ دیده می‌شد. */

.econ-social { justify-content: center; }

.share-buttons-top .share-links,
.share-buttons.share-buttons-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	float: none;
}

.share-buttons-top .share-links a { float: none; margin: 0; }


/* ─────────────────────────────────────────────────────────────
   econ-byline-fix — سطرِ «ترجمه / ناظر علمی» زیر نامِ نویسنده

   مارک‌آپ درست بود ولی شیوه‌نامه‌اش روی مجله نبود، پس متن با
   اندازهٔ تیترِ مقاله و رنگِ لینکِ قالب چاپ می‌شد و دو خط جا
   می‌گرفت. حالا مثل بقیهٔ فرادادهٔ بالای مطلب است: کوچک، کم‌رنگ،
   یک‌خطی و در ادامهٔ همان ردیف.
   ───────────────────────────────────────────────────────────── */

.econ-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: #6b6f76;
}

.econ-byline .econ-role { display: inline-flex; gap: 4px; align-items: baseline; }

.econ-byline .econ-role b {
	font-weight: 600;
	color: #6b6f76;
	font-size: 13px;
}

html body .econ-byline a,
html body #the-post .econ-byline a {
	color: var(--ecm-navy, #0a0830);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(204, 176, 112, .55);
}

html body .econ-byline a:hover { border-bottom-color: var(--ecm-gold, #ccb070); }

/* ─────────────────────────────────────────────────────────────
   جعبهٔ امتیاز — تیتر مثل بقیهٔ کارت‌ها، ستاره‌ها وسط‌چین

   تیتر از کلاسِ .the-global-title جنه یک خطِ کوتاه زیرِ خودش
   می‌گرفت که هیچ‌کدام از کارت‌های دیگر ندارند.
   ───────────────────────────────────────────────────────────── */

.review-box .review-box-header::before,
.review-box .review-box-header::after,
.review-box .review-box-header .the-subtitle::before,
.review-box .review-box-header .the-subtitle::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: none !important;
}

.review-box .review-box-header,
.review-box .review-box-header .the-subtitle {
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-align: right;
}

.review-box .user-rate-wrap,
.review-box .review-users-rate {
	justify-content: center;
	text-align: center;
	padding: 12px 10px;
	border-radius: 10px;
}

.review-box .user-rating-text { justify-content: center; }


/* ecnw-no-glyph — جنه روی فرمِ ویجتِ خبرنامه یک ::before با فونتِ
   آیکونیِ خودش (tiefonticon) می‌گذارد که position:absolute است و
   دقیقاً روی ورودی می‌افتد؛ متنِ راهنما از زیرش رد می‌شد.
   background-image نبود، پس قاعدهٔ قبلی به آن نمی‌رسید.
   کارت خودش بالای فرم یک پاکتِ بزرگ دارد و تکرارش لازم نیست. */

.ecnw::before,
.ecnw::after,
.widget .ecnw::before,
.subscribe-widget-content .ecnw::before {
	content: none !important;
	display: none !important;
}

/* تلهٔ ربات باید کاملاً از دید بیرون باشد — برچسبِ درونش هم */
.ecnw__hp,
.ecnw__hp * {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

/* =========================================================
   کارایی: رزرو ارتفاع اسلایدر و مهارِ تیکر  (۱۶ سپتامبر ۲۰۲۶)

   لایت‌هاوس موبایل روی /mag/ امتیاز ۴۲ داد. تفکیک کار رشتهٔ اصلی
   نشان داد مقصر جاوااسکریپت نیست:

     Style & Layout      ۴۵۵۷ms
     Script Evaluation    ۳۸۹ms

   دو علت جدا اندازه‌گیری شد:

   ۱) CLS ‏۰٫۷۴۴ — تمامش یک جهش. اسلایدر نخست min-height ندارد و
      ارتفاعش را فقط پس از اجرای JS می‌گیرد؛ تا آن لحظه بخشِ
      «تازه‌ترین خبرها» (۱۹۳۳px) بالاتر نشسته و بعد یک‌باره پایین
      می‌پرد. ارتفاع نهایی اندازه‌گیری شد: ۲۲۶px زیر ۷۶۸ و ۱۵۵px
      بالاتر.

      ⚠ عمداً min-height و نه aspect-ratio: نسخهٔ aspect-ratio یک
      بار روی جنه امتحان شد و CLS را سیزده برابر کرد.

   ۲) TBT ‏۲۸۰۰ms — تیکرِ خبر فوری را velocity.js بی‌وقفه انیمیت
      می‌کند و چون هیچ containment ندارد، هر فریم کل درختِ چیدمانِ
      سند را کثیف می‌کند. اندازه‌گیری روی صفحهٔ زنده (۲۰ بار
      forced layout، بدون throttle):

        با تیکر   ۱۹۵٫۱ms
        بدون تیکر ۱۱۰٫۵ms      →  ۴۴٪ هزینهٔ چیدمان

      تیکر در پیکسل ۳۰۴۹ صفحه است، یعنی در نمای اول اصلاً دیده
      نمی‌شود. contain آن را از چیدمانِ سند جدا می‌کند و
      content-visibility وقتی بیرون از کادر دید است رندرش را
      کنار می‌گذارد — بدون آنکه قابلیت حذف شود.
      contain-intrinsic-size لازم است وگرنه خودِ
      content-visibility جهش می‌سازد.
   ========================================================= */

.is-first-section .slider-area {
	min-height: 226px;
}

@media (min-width: 768px) {
	.is-first-section .slider-area {
		min-height: 155px;
	}
}

.breaking-news-outer {
	contain: layout paint style;
	content-visibility: auto;
	contain-intrinsic-size: auto 40px;
}

/* =========================================================
   کارایی ۲: کنارگذاشتنِ رندرِ بخش‌های پایینِ صفحهٔ اصلی

   صفحهٔ اصلی مجله ۱۲۸۸۸ پیکسل ارتفاع دارد (موبایل) و مرورگر برای
   هر بازمحاسبهٔ چیدمان کلِ این درخت را می‌پیماید. اندازه‌گیری روی
   صفحهٔ زنده، میانهٔ سه اجرا، ۲۰ بار forced layout:

     بدون کنارگذاشتن   ۱۳۶٫۱ms
     با کنارگذاشتن      ۴۲٫۷ms      →  ۶۹٪ کمتر

   چهار بخشِ زیر در هر دو عرض پایین‌ترِ نمای اول‌اند، پس رندرشان تا
   لحظهٔ اسکرول لازم نیست. content-visibility رندر را کنار می‌گذارد
   و contain-intrinsic-size جای آن را نگه می‌دارد تا جهشِ چیدمان
   پدید نیاید.

   کلیدواژهٔ auto در contain-intrinsic-size یعنی «اگر یک بار
   رندر شده، همان اندازهٔ واقعی را به خاطر بسپار»؛ عددِ کنارش فقط
   حدسِ نخستین بازدید است. ارتفاع‌ها در هر دو عرض اندازه‌گیری شد:

     بخش            موبایل ۳۷۵   دسکتاپ ۱۲۸۰
     section-433        ۸۷۵          ۸۱۰
     section-8712      ۲۲۷۱          ۹۹۴
     section-1508      ۴۱۵۶         ۱۷۵۱
     section-9047      ۱۵۲۱          ۷۸۸

   ⚠ بخش ۶۲۸۳ («تازه‌ترین خبرها») عمداً بیرون ماند: روی دسکتاپ از
   پیکسل ۳۰۶ شروع می‌شود و بخشی از آن در نمای اول است.
   ========================================================= */

#tiepost-1809-section-433,
#tiepost-1809-section-8712,
#tiepost-1809-section-1508,
#tiepost-1809-section-9047 {
	content-visibility: auto;
}

#tiepost-1809-section-433  { contain-intrinsic-size: auto 875px; }
#tiepost-1809-section-8712 { contain-intrinsic-size: auto 2271px; }
#tiepost-1809-section-1508 { contain-intrinsic-size: auto 4156px; }
#tiepost-1809-section-9047 { contain-intrinsic-size: auto 1521px; }

@media (min-width: 768px) {
	#tiepost-1809-section-433  { contain-intrinsic-size: auto 810px; }
	#tiepost-1809-section-8712 { contain-intrinsic-size: auto 994px; }
	#tiepost-1809-section-1508 { contain-intrinsic-size: auto 1751px; }
	#tiepost-1809-section-9047 { contain-intrinsic-size: auto 788px; }
}