/* =========================================================
   ANTHRO — REFINEMENT LAYER
   طبقة التوحيد البصري، تُحمَّل بعد كل الأنماط.

   لماذا ملفّ مستقلّ لا تعديل في مكانه؟ لأنّ ما يلي ليس إصلاح
   قواعد متفرّقة بل فرض نظام واحد فوق ثلاثة ملفّات نمت في أوقات
   مختلفة. جمعه هنا يجعل «ما الذي تغيّر في التصميم» سؤالاً له
   إجابة واحدة قابلة للمراجعة والتراجع.

   المرجع: دليل الهويّة البصريّة — كريمي واسع، زيتوني للبنية،
   نحاسي للتأكيد وحده، ومساحات تنفّس كبيرة.
   ========================================================= */


/* =========================================================
   1. نظام المقاييس
   القيم كانت متناثرة (48/56/64/72/80/100…). سلّم واحد يُنهي
   التذبذب بين الأقسام ويجعل الإيقاع الرأسي مقصوداً.
   ========================================================= */
:root {
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* إيقاع الأقسام — يتنفّس أكثر على الشاشات الكبيرة */
  --section-y: clamp(56px, 7vw, 104px);

  /* أنصاف أقطار موحّدة */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ظلال أخفّ: دليل الهويّة ورقيّ لا زجاجي */
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, .04);
  --shadow-md: 0 2px 8px rgba(31, 31, 31, .05), 0 12px 28px -18px rgba(31, 31, 31, .18);
  --shadow-lg: 0 4px 14px rgba(31, 31, 31, .06), 0 28px 60px -32px rgba(31, 31, 31, .26);

  --hairline: 1px solid rgba(107, 111, 74, .14);
}

.section-space { padding-block: var(--section-y); }


/* =========================================================
   2. الترويسة
   كانت عناصر القائمة متلاصقة (gap:4px بلا حشوة) فتُقرأ ككتلة
   واحدة: «الرئيسيةالمقالاتالبودكاست».
   ========================================================= */
.site-header {
  background: rgba(246, 243, 236, .88);
  border-bottom: 1px solid rgba(107, 111, 74, .10);
  box-shadow: none;
}
.site-header.scrolled {
  background: rgba(246, 243, 236, .96);
  box-shadow: var(--shadow-sm);
}

.nav-list { gap: 2px; }

.nav-list > li > a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--olive-text);
  transition: background .2s ease, color .2s ease;
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a {
  background: rgba(107, 111, 74, .09);
  color: var(--olive-dk);
}

.header-inner { gap: var(--sp-3); }

/* الشعار يستحقّ مساحته — كان مضغوطاً بجانب المبدّلات */
.logo { flex-shrink: 0; }
.logo-icon svg { width: 34px; height: 38px; }


/* =========================================================
   3. الأزرار
   ثلاثة أشكال فقط، بحواف دائريّة كما في مطبوعات الهويّة.
   ========================================================= */
.btn {
  padding: 12px 26px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-width: 1.5px;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}
.btn--primary:hover { background: var(--olive-dk); border-color: var(--olive-dk); }

.btn--outline {
  background: transparent;
  border-color: rgba(107, 111, 74, .35);
  color: var(--olive-dk);
}
.btn--outline:hover { border-color: var(--olive); background: rgba(107, 111, 74, .06); }

/* على الصور الداكنة */
.btn--ghost {
  background: rgba(246, 243, 236, .12);
  border-color: rgba(246, 243, 236, .45);
  color: var(--cream);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(246, 243, 236, .2); border-color: var(--cream); }

.btn--lg { padding: 15px 34px; font-size: .98rem; }


/* =========================================================
   4. الهيرو
   كان بارتفاع الشاشة كاملة (100svh) وبعنوان زيتوني على صورة
   مضيئة — أي عنوان غير مقروء يملأ الشاشة ويدفع كل المحتوى تحته.
   الآن: ارتفاع مضبوط، تعتيم كافٍ، ونصّ كريمي كما في الدليل.
   ========================================================= */
.hero {
  min-height: min(78svh, 720px);
}

.hero-content {
  padding-top: calc(var(--hdr-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  max-width: 940px;
  margin-inline: auto;
}

.hero-title {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(31, 31, 31, .45);
  margin-bottom: var(--sp-3);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(.98rem, .93rem + .3vw, 1.15rem);
  line-height: 1.85;
  color: rgba(246, 243, 236, .88);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  text-shadow: 0 1px 12px rgba(31, 31, 31, .4);
}

/* شريط الوسوم العلوي: نصّ متباعد لا كبسولة ثقيلة — كما في الدليل */
.hero-eyebrow {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: var(--sp-4);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(246, 243, 236, .82);
  text-shadow: 0 1px 10px rgba(31, 31, 31, .5);
}
.hero-eyebrow .eyebrow-dot { display: none; }

/* تعتيم أقوى وأنعم: النصّ يقرأ، والصورة تبقى حاضرة */
.hero-overlay {
  background:
    linear-gradient(to bottom,
      rgba(31, 31, 31, .58) 0%,
      rgba(31, 31, 31, .42) 38%,
      rgba(45, 40, 30, .72) 100%);
}

/*
 * النقش فوق الصورة كان ظاهراً بوضوح — خطوط متموّجة عبر السماء.
 * النقش لغة خلفيّات لا طبقة فوق التصوير.
 */
.hero-geo-pattern { opacity: .06; }

.hero-ctas { gap: var(--sp-2); }

/* شريط الإحصاءات: كان صندوقاً داكناً غريباً عن اللوحة */
.hero-stats-bar {
  background: rgba(31, 31, 31, .28);
  border-top: 1px solid rgba(246, 243, 236, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stat-n { font-size: 1.5rem; font-weight: 700; }
.stat-l { font-size: .74rem; letter-spacing: .06em; }
.stat-sep { background: rgba(246, 243, 236, .18); }


/* =========================================================
   5. عناوين الأقسام
   وحدة الشكل: سطر صغير + خطّ + معيّن الهويّة.
   ========================================================= */
.sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--copper-text);
  margin-bottom: var(--sp-2);
}
.sec-line {
  width: 34px;
  height: 1.5px;
  background: var(--copper);
  flex-shrink: 0;
}

.sec-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
  line-height: 1.32;
  color: var(--olive-dk);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

/* المعيّن من قفل الشعار — فاصل بصري للهويّة */
.anthro-diamond,
.sec-diamond::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: var(--sp-4) auto;
  background: var(--copper);
  transform: rotate(45deg);
}


/* =========================================================
   6. البطاقات
   كانت الشارة صندوقاً داكناً ثقيلاً، والحدود منقّطة، والظلّ زجاجيّاً.
   الدليل ورقيّ: حواف رفيعة، ظلّ خافت، ونصّ يتنفّس.
   ========================================================= */
.art-card {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.art-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(107, 111, 74, .22);
}

.art-card .art-body { padding: var(--sp-3); gap: 10px; }

.art-card .art-title { font-size: 1.02rem; line-height: 1.5; }
.art-card .art-title a { color: var(--dark); }
.art-card:hover .art-title a { color: var(--olive-dk); }

/* سطر «الشكل / السلسلة»: زجاج خفيف لا صندوق أسود */
.art-card .art-kicker {
  inset-inline-start: 14px;
  inset-block-end: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: .68rem;
  letter-spacing: .04em;
  background: rgba(31, 31, 31, .42);
  border: 1px solid rgba(246, 243, 236, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.art-card .art-byline { font-size: .78rem; }
.art-card .art-excerpt { font-size: .86rem; line-height: 1.75; }

/* الحد المنقّط في التذييل كان أكثر عنصر يُشعِر بالقِدَم */
.art-card .art-footer {
  border-top: var(--hairline);
  padding-top: 12px;
  font-size: .73rem;
}

/* النقش خلف الصورة الاحتياطيّة: أهدأ، وبتدرّج يعطيه عمقاً */
.art-card--pattern .art-img { background: var(--sand); }
.art-card .art-img-pattern { opacity: .38; background-size: 150px; }
.art-card--pattern .art-img::after {
  background: linear-gradient(140deg, rgba(107, 111, 74, .14), rgba(196, 122, 68, .10));
}

.art-grid { gap: var(--sp-3); }


/* =========================================================
   7. النقوش
   كانت ظاهرة جداً على الأرضيات الفاتحة فتُشوّش القراءة.
   ========================================================= */
.pattern-topography,
.pattern-sadu,
.pattern-weave,
.pattern-palm,
.pattern-mudbrick { background-size: 340px; }

body.pattern-topography { background-image: none; }

.section-space.pattern-sadu,
.section-space.pattern-weave,
.section-space.pattern-palm,
.section-space.pattern-topography,
.section-space.pattern-mudbrick { position: relative; }


/* =========================================================
   8. رؤوس الصفحات الداخليّة
   توحيد الأرشيف والتصنيف والكاتب والبرامج على شكل واحد.
   ========================================================= */
.archive-header {
  padding-block: calc(var(--hdr-h) + var(--sp-5)) var(--sp-5);
  background: linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%);
  border-bottom: var(--hairline);
}
.archive-header-inner { max-width: 68ch; }

.archive-title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.24;
  color: var(--olive-dk);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.archive-desc {
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--olive-text);
  max-width: 62ch;
}

/*
 * المسار كان يتراكب مع الترويسة الثابتة، ويتكسّر رأسياً فوق
 * الخلفيّات الداكنة لأنّ عناصره كانت كتليّة.
 */
/*
 * ‏.cat-bc كان يضبط justify-content بلا display:flex — وهي
 * خاصّية لا أثر لها على عنصر كتليّ. فكانت روابط المسار تنزل
 * سطراً تحت سطر في أربعة عشر قالباً: الحلقة والموسم والتصنيف
 * والكاتب والبرامج وغيرها. إضافته هنا تُصلحها كلّها معاً.
 */
.archive-breadcrumb,
.breadcrumb,
.cat-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: .8rem;
}
.archive-breadcrumb .bc-link,
.breadcrumb .bc-link,
.cat-bc .bc-link { color: var(--olive-text); }
.archive-breadcrumb .bc-sep,
.breadcrumb .bc-sep,
.cat-bc .bc-sep { color: var(--sand-md); line-height: 1; }
.archive-breadcrumb .bc-current,
.breadcrumb .bc-current,
.cat-bc .bc-current { color: var(--olive-dk); font-weight: 600; }

.articles-count-badge {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(107, 111, 74, .09);
  color: var(--olive-dk);
  font-size: .78rem;
  font-weight: 700;
}


/* =========================================================
   9. الأسطح الداكنة
   الزيتوني الداكن هو سطح الهويّة الداكن — لا الفحمي.
   وكل نصّ فوقه كريمي، بلا استثناء.
   ========================================================= */
.training-hero,
.training-promo,
.author-hero,
.cat-hero {
  background: var(--olive-dk);
  color: var(--cream);
}

.training-hero :is(h1, h2, h3),
.training-promo :is(h1, h2, h3),
.author-hero :is(h1, h2, h3),
.cat-hero :is(h1, h2, h3),
.nl-section :is(h1, h2, h3),
.site-footer :is(h1, h2, h3, h4, h5) { color: var(--cream); }

.training-hero .sec-label,
.training-promo .sec-label,
.author-hero .sec-label { color: var(--copper-lt); }
.training-hero .sec-line,
.training-promo .sec-line,
.author-hero .sec-line { background: var(--copper-lt); }

.training-hero .bc-link,
.training-hero .bc-current { color: rgba(246, 243, 236, .78); }
.training-hero .bc-sep { color: rgba(246, 243, 236, .4); }

/* النشرة البريديّة: كانت زيتونيّة فاتحة بنقش صاخب */
.nl-section {
  background: var(--olive-dk);
  color: var(--cream);
  padding-block: var(--section-y);
}
.nl-section .pattern-weave,
.nl-section::before { opacity: .05; }

/* الفوتر كان فحميّاً بنقش مربّعات ظاهر — خارج لوحة الهويّة */
.site-footer { background: #23241A; }
.site-footer::before,
.site-footer .ft-pattern { opacity: .04; }
.ft-head {
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--copper-lt);
  margin-bottom: var(--sp-2);
}
.site-footer a { color: rgba(246, 243, 236, .72); }
.site-footer a:hover { color: var(--cream); }
.ft-bottom { border-top: 1px solid rgba(246, 243, 236, .1); }


/* =========================================================
   10. التصوير
   الدليل يعرض صوراً بنبرة دافئة موحّدة. مكتبة الوسائط لن تكون
   كذلك، فنُوحّدها عرضاً: تشبّع أقلّ ودفء أعلى قليلاً.
   ========================================================= */
.art-card .art-img-el,
.article-hero-img,
.poem-card__media img,
.contributor-card__img {
  filter: saturate(.88) contrast(1.03) sepia(.06);
}

.art-card:hover .art-img-el { filter: saturate(1) contrast(1.04) sepia(.03); }


/* =========================================================
   11. البرامج — اتّساق مع بقيّة الموقع
   ========================================================= */
.training-index__link,
.teaching-unit,
.ask-item__link,
.poem-card,
.contributor-card {
  border: var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.training-index__link:hover,
.ask-item__link:hover,
.poem-card:hover,
.contributor-card:hover {
  border-color: rgba(107, 111, 74, .24);
  box-shadow: var(--shadow-md);
}

.training-index__num,
.teaching-unit__num {
  width: 42px;
  height: 42px;
  font-size: .92rem;
  background: rgba(107, 111, 74, .1);
  color: var(--olive-dk);
}

.training-hero__title,
.training-promo__title { color: var(--cream); }

.training-hero__cta,
.training-promo__cta { margin-top: var(--sp-4); }


/* =========================================================
   12. لوحة التصفية
   ========================================================= */
.filter-panel {
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: none;
}
.filter-group__title { letter-spacing: .12em; }
.filter-option__label { border-radius: 8px; }


/* =========================================================
   13. المقال
   ========================================================= */
.article-main-title {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.24;
  color: var(--cream);
  text-wrap: balance;
}
.article-lead {
  font-size: 1.06rem;
  line-height: 1.9;
  color: rgba(246, 243, 236, .9);
  max-width: 60ch;
}
.article-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(31, 31, 31, .5) 0%,
    rgba(31, 31, 31, .55) 45%,
    rgba(45, 40, 30, .88) 100%);
}
.article-category-tag {
  border-radius: 100px;
  padding: 5px 15px;
  font-size: .74rem;
  letter-spacing: .06em;
  background: rgba(196, 122, 68, .9);
  color: var(--cream);
}

.entry-content :is(h2, h3, h4) { color: var(--olive-dk); }
.entry-content a { color: var(--copper-text); text-underline-offset: .22em; }


/* =========================================================
   14. حالات الفراغ والتحميل
   ========================================================= */
.results-empty {
  border: 1px dashed rgba(107, 111, 74, .22);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
}


/* =========================================================
   15. تفاصيل ختاميّة
   ========================================================= */
::selection { background: var(--olive); color: var(--cream); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .art-card:hover,
  .training-index__link:hover,
  .poem-card:hover,
  .contributor-card:hover { transform: none; }
}


/* =========================================================
   16. البطاقة البطلة في الرئيسية
   إعادة بناء البطاقة في المرحلة 02 أعطت .art-card .art-img
   نسبة أبعاد ثابتة، فكسرت الصفّ الأفقي للبطاقة البطلة:
   عمود الصورة انكمش وترك الجسد صندوقاً أبيض طويلاً فارغاً.
   ========================================================= */
.art-card--hero {
  flex-direction: row;
  align-items: stretch;
}
.art-card--hero .art-img-link {
  width: 54%;
  flex-shrink: 0;
  display: block;
}
.art-card--hero .art-img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}
.art-card--hero .art-body {
  padding: var(--sp-5);
  justify-content: center;
  gap: 12px;
}
.art-card--hero .art-title--lg { font-size: 1.45rem; line-height: 1.4; }

.art-card--side .art-img { aspect-ratio: auto; height: 168px; }
.art-card--side .art-body { padding: var(--sp-3); }

.featured-layout { gap: var(--sp-3); align-items: stretch; }
.featured-layout > .art-card--hero { height: 100%; }

@media (max-width: 900px) {
  .art-card--hero { flex-direction: column; }
  .art-card--hero .art-img-link { width: 100%; }
  .art-card--hero .art-img { min-height: 0; aspect-ratio: 16 / 9; }
  .art-card--hero .art-body { padding: var(--sp-3); }
}


/* =========================================================
   17. بطاقات المحاور في الرئيسية
   ========================================================= */
.cat-card {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(107, 111, 74, .22);
}
.cat-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(107, 111, 74, .09);
  color: var(--olive);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: var(--sp-2);
}
.cat-icon-wrap svg { width: 26px; height: 26px; }
.cat-name { font-size: 1rem; margin-bottom: 6px; color: var(--dark); }
.cat-desc { font-size: .84rem; line-height: 1.75; }
.cat-badge {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(196, 122, 68, .1);
  color: var(--copper-text);
  font-size: .72rem;
  font-weight: 700;
}
.cats-grid { gap: var(--sp-3); }


/* =========================================================
   18. رأس القسم
   ========================================================= */
.sec-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.sec-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--copper-text);
  white-space: nowrap;
}
.sec-more:hover { color: var(--olive-dk); }


/* =========================================================
   19. النقوش — قرار تصميمي
   دليل الهويّة يضع النقوش في لوحة «الأنماط البصريّة» كمواد
   للأسطح والمطبوعات، ومحاكاة الموقع فيه أرضيّة كريميّة نظيفة
   خلف البطاقات. النقش خلف شبكة بطاقات يتنافس مع المحتوى
   ويُتعِب العين، فنُبقيه حيث يعمل: الأسطح الداكنة والرؤوس.
   ========================================================= */
.cats-section,
.featured-section,
.grid-section,
.discovery,
.contributors,
.poetry-list,
.teaching-units,
.training-index,
.ask-series {
  background-image: none;
}

/* على الأسطح الداكنة يبقى النقش نسيجاً لا ضجيجاً */
.training-hero,
.training-promo,
.nl-section,
.site-footer,
.archive-header--series,
.archive-header--teaching,
.archive-header--poetry,
.archive-header--contributors,
.archive-header--full {
  background-blend-mode: soft-light;
}

/* الأرضيّة العامّة نظيفة */
body { background-image: none; }


/* =========================================================
   20. الشبكات — إصلاحات تخطيط
   ========================================================= */

/*
 * auto-fill يُبقي أعمدة وهميّة فارغة حين تقلّ العناصر عن عدد الأعمدة،
 * فتنكمش البطاقتان في نصف الصفحة ويبقى النصف الآخر فراغاً.
 * auto-fit يطوي الأعمدة الفارغة فتتمدّد العناصر الموجودة.
 */
.poem-grid,
.contributors-grid,
.author-results,
.art-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

/* البطاقات تتساوى في الارتفاع داخل الصفّ */
.contributor-card,
.poem-card,
.ask-item,
.cat-card { height: 100%; }

.contributor-card__link,
.poem-card__link,
.cat-card { display: flex; flex-direction: column; height: 100%; }
.contributor-card__link { flex-direction: row; }
.poem-card__link > .poem-card__author { margin-top: auto; }

.art-grid { align-items: stretch; }
.art-card { height: 100%; }

/* المسار يبدأ من حافّة القراءة لا من منتصف الصفحة */
.archive-breadcrumb,
.breadcrumb { justify-content: flex-start; }

/* الأرضيّة خلف كل شيء كريميّة — كانت بيضاء تظهر أسفل الفوتر */
html { background: var(--cream); }


/* =========================================================
   21. الترويسة — إعادة بناء التراتب
   ---------------------------------------------------------
   المشكلة لم تكن في مسافة أو لون، بل في غياب التراتب:
   خمسة عناصر بوزن بصريّ واحد في صفّ واحد. وأبرزها كان
   مبدّل اللغة — أداة يستعملها الزائر مرّة واحدة إن استعملها.

   الترتيب الآن: علامة (الأقوى) ← تنقّل (المهمّ) ← أدوات (الأخفّ).
   ========================================================= */

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 74px;
}

/* ---------- 1. العلامة ---------- */
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-brand .logo { gap: 10px; }
.header-brand .logo-icon svg { width: 32px; height: 36px; }
.logo-en { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.logo-ar { font-size: .74rem; letter-spacing: .1em; opacity: .72; line-height: 1; }


/* ---------- 2. التنقّل ---------- */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav-list { gap: 0; flex-wrap: nowrap; }

.nav-list > li > a {
  position: relative;
  display: block;
  padding: 9px 15px;
  border-radius: 0;
  background: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--olive-text);
  white-space: nowrap;
  transition: color .18s ease;
}

/*
 * المؤشّر خطّ تحت العنصر لا كبسولة ممتلئة.
 * الكبسولة كانت تُنافس الشعار على الانتباه، والخطّ تقليد
 * تحريري يقول «أنت هنا» دون أن يصرخ.
 */
.nav-list > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.nav-list > li > a:hover { color: var(--olive-dk); background: none; }
.nav-list > li > a:hover::after { transform: scaleX(.5); }

.nav-list > li.current-menu-item > a,
.nav-list > li.current_page_item > a,
.nav-list > li.current-menu-parent > a {
  color: var(--olive-dk);
  font-weight: 700;
  background: none;
}
.nav-list > li.current-menu-item > a::after,
.nav-list > li.current_page_item > a::after,
.nav-list > li.current-menu-parent > a::after { transform: scaleX(1); }


/* ---------- 3. الأدوات ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-divider {
  width: 1px;
  height: 20px;
  background: rgba(107, 111, 74, .18);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--olive-text);
  background: none;
  transition: background .18s ease, color .18s ease;
}
.icon-btn:hover { background: rgba(107, 111, 74, .09); color: var(--olive-dk); }


/* ---------- مبدّل اللغة: نصّ لا كبسولة ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.lang-switch__item {
  padding: 4px 8px;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--olive-text);
  background: none;
  transition: color .18s ease;
}
.lang-switch__item:hover { background: none; color: var(--olive-dk); }

.lang-switch__item.is-current {
  background: none;
  color: var(--olive-dk);
  font-weight: 700;
}

/* فاصل رفيع بين اللغتين بدل خلفيّة ممتلئة */
.lang-switch__item + .lang-switch__item { border-inline-start: 1px solid rgba(107, 111, 74, .22); }

.lang-switch__item.is-empty { opacity: .35; }


/* ---------- سلوك الترويسة عند التمرير ---------- */
.site-header {
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled .header-inner { height: 64px; }
.site-header.scrolled .header-brand .logo-icon svg { width: 28px; height: 32px; }


/* ---------- نقاط الانكسار ---------- */

/* تحت 1180: السياق يختفي — القائمة تُغني عنه والمساحة أثمن */
@media (max-width: 1180px) {
  .nav-list > li > a { padding-inline: 11px; font-size: .88rem; }
}

@media (max-width: 1024px) {
  .header-inner { gap: var(--sp-3); }
  .nav-list > li > a { padding-inline: 8px; font-size: .85rem; }
  .logo-ar { display: none; }
}

/* تحت 900: القائمة تنتقل إلى درج الجوّال */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .lang-switch__item { padding-inline: 6px; font-size: .74rem; }
}

@media (max-width: 560px) {
  .header-divider { display: none; }
  .header-actions { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-list > li > a::after { transition: none; }
}


/* =========================================================
   22. الانتقال أسفل الترويسة
   رأس الصفحة الداخليّة كان يبدأ باللون الرملي بينما الترويسة
   كريميّة، فينشأ خطّ فاصل حادّ يبدو كحدّ مرسوم لا كانتقال.
   الآن: غسلة رمليّة خفيفة تذوب في الكريمي.
   ========================================================= */
.archive-header {
  background:
    linear-gradient(180deg, rgba(231, 225, 212, .55) 0%, rgba(231, 225, 212, 0) 72%),
    var(--cream);
  border-bottom: 1px solid rgba(107, 111, 74, .10);
}

/* الرؤوس الداكنة تحتفظ بسطحها */
.archive-header--series,
.archive-header--teaching,
.archive-header--poetry,
.archive-header--contributors,
.archive-header--full { background-color: var(--cream); }


/* =========================================================
   23. الخطّ الزيتوني تحت الترويسة
   ---------------------------------------------------------
   طبقة البحث تُطوى بـ max-height:0 مع overflow:hidden، لكنّ
   border-bottom يقع خارج صندوق المحتوى فيبقى مرسوماً حتى
   والارتفاع صفر. النتيجة: خطّ زيتوني صريح بعرض 2px أسفل
   الترويسة في كل صفحة من الموقع، بلا أي سبب ظاهر.
   قِسته من لقطة الشاشة: rgb(107,111,74) — الزيتوني كامل التشبّع.
   ========================================================= */
.search-overlay { border-bottom: 0; }
.search-overlay.open { border-bottom: 1px solid rgba(107, 111, 74, .16); }


/* =========================================================
   24. القائمة المنسدلة
   ---------------------------------------------------------
   القائمة السابقة كانت صندوقاً ضخماً معلّقاً بلا صلة بمُطلِقه:
   حشوة مفرطة، وعناصر متباعدة، وحافّة تتجاوز حدود العلامة.
   الآن: مثبّتة تحت العنصر مباشرة، بعرض محسوب، وسهم يربطها
   بمصدرها فيُقرأ الظهور كامتداد لا كطبقة عائمة.
   ========================================================= */

.nav-list > li { position: relative; }

/* السهم يدور عند الفتح — إشارة حالة لا زخرفة */
.nav-caret {
  margin-inline-start: 5px;
  vertical-align: -1px;
  opacity: .5;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.nav-list > li:hover > a .nav-caret,
.nav-list > li.is-open > a .nav-caret { opacity: 1; }
.nav-list > li.is-open > a .nav-caret { transform: rotate(180deg); }

/* ---------- الصندوق ---------- */
.nav-list .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-start: 50%;
  z-index: 200;

  width: 264px;
  padding: 8px;
  margin: 0;

  background: var(--white);
  border: 1px solid rgba(107, 111, 74, .13);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);

  list-style: none;

  /* مخفيّة بصريّاً لا بـ display: يسمح بحركة دخول وخروج */
  opacity: 0;
  visibility: hidden;
  transform: translateX(50%) translateY(-6px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.4, 0, .2, 1), visibility .2s;
}

/* السهم الصغير الذي يربطها بالعنصر */
.nav-list .sub-menu::before {
  content: "";
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(50%) rotate(45deg);
  background: var(--white);
  border-inline-start: 1px solid rgba(107, 111, 74, .13);
  border-block-start: 1px solid rgba(107, 111, 74, .13);
  border-start-start-radius: 3px;
}

/* جسر غير مرئي يمنع انغلاقها عند عبور المؤشّر إليها */
.nav-list > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  height: 12px;
}

.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu,
.nav-list > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

/* ---------- العناصر داخلها ---------- */
.nav-list .sub-menu li { position: static; }

.nav-list .sub-menu a {
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border-radius: 9px;
  transition: background .16s ease;
}
.nav-list .sub-menu a:hover,
.nav-list .sub-menu a:focus-visible { background: rgba(107, 111, 74, .07); }

.nav-list .sub-menu a::after { display: none; }

.sub-menu__label {
  font-size: .89rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
}
.sub-menu__desc {
  font-size: .74rem;
  font-weight: 400;
  color: var(--olive-text);
  line-height: 1.55;
}
.nav-list .sub-menu a:hover .sub-menu__label { color: var(--olive-dk); }

.nav-list .sub-menu .current-menu-item > a { background: rgba(107, 111, 74, .09); }
.nav-list .sub-menu .current-menu-item .sub-menu__label { color: var(--olive-dk); }

/* الأب المفتوح يبقى مُعلَّماً */
.nav-list > li.is-open > a { color: var(--olive-dk); }

/* على الحواف: لو تجاوزت الصندوق حدّ النافذة نُثبّتها من الطرف */
.nav-list > li:last-child .sub-menu,
.nav-list > li:nth-last-child(2) .sub-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(0) translateY(-6px);
}
.nav-list > li:last-child:hover .sub-menu,
.nav-list > li:last-child.is-open .sub-menu,
.nav-list > li:nth-last-child(2):hover .sub-menu,
.nav-list > li:nth-last-child(2).is-open .sub-menu { transform: translateX(0) translateY(0); }
.nav-list > li:last-child .sub-menu::before,
.nav-list > li:nth-last-child(2) .sub-menu::before {
  inset-inline-start: auto;
  inset-inline-end: 22px;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-list .sub-menu,
  .nav-caret { transition: none; }
}


/* =========================================================
   25. درج الجوّال — القائمة نفسها بمستويين
   ========================================================= */
.mobile-nav-list .sub-menu {
  position: static;
  width: auto;
  padding: 0 0 8px;
  margin-inline-start: 14px;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  border-inline-start: 1px solid rgba(107, 111, 74, .18);
}
.mobile-nav-list .sub-menu::before { display: none; }
.mobile-nav-list .sub-menu a { padding: 7px 14px; }
.mobile-nav-list .sub-menu__desc { display: none; }
.mobile-nav-list .nav-caret { display: none; }



/* =========================================================
   26. مقال بلا صورة بارزة
   الهيرو عند 75vh بلا صورة = كتلة لون فارغة تدفع النصّ خارج
   الشاشة. الارتفاع يتبع المحتوى لا العكس.
   ========================================================= */
.article-hero--flat { min-height: 0; }
.article-hero--flat .article-hero-content {
  padding-top: calc(var(--hdr-h) + var(--sp-6));
  padding-bottom: var(--sp-6);
}
.article-hero--flat .article-hero-img--pattern { opacity: .5; }


/* =========================================================
   27. المسار فوق الصور الداكنة
   كان رماديّاً باهتاً على صورة — بالكاد يُقرأ.
   ========================================================= */
.article-hero .breadcrumb { font-size: .82rem; }
.article-hero .breadcrumb .bc-link { color: rgba(246, 243, 236, .78); }
.article-hero .breadcrumb .bc-link:hover { color: var(--cream); }
.article-hero .breadcrumb .bc-sep { color: rgba(246, 243, 236, .42); }
.article-hero .breadcrumb .bc-current { color: rgba(246, 243, 236, .9); }


/* =========================================================
   28. ودجات ووردبريس الافتراضيّة
   الشريط الجانبي للمقال يقبل ودجات، وأي ودجت افتراضي كان يخرج
   بنمط ووردبريس الخام — حقل أبيض وزرّ أسود بجانب تصميم مصقول.
   نُنسّق ما قد يضعه المحرّر فعلاً: بحث، مقالات حديثة، تصنيفات،
   أرشيف، وسوم.
   ========================================================= */
.sidebar-widget {
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.sidebar-widget:last-child { margin-bottom: 0; }

.sidebar-widget .widget-heading,
.sidebar-widget .wp-block-heading,
.sidebar-widget h2,
.sidebar-widget h3 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--olive-text);
  margin: 0 0 var(--sp-2);
  padding-bottom: 10px;
  border-bottom: var(--hairline);
}

/* القوائم: مقالات حديثة، تصنيفات، أرشيف */
.sidebar-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.sidebar-widget li { margin: 0; }
.sidebar-widget li a {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--dark);
  transition: background .16s ease, color .16s ease;
}
.sidebar-widget li a:hover { background: rgba(107, 111, 74, .07); color: var(--olive-dk); }

/* نموذج البحث */
.sidebar-widget form,
.sidebar-widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
  border: 0;
}
.sidebar-widget input[type="search"],
.sidebar-widget .wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid var(--sand-md);
  border-radius: var(--r-sm);
}
.sidebar-widget input[type="search"]:focus-visible,
.sidebar-widget .wp-block-search__input:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
  border-color: transparent;
}
.sidebar-widget input[type="submit"],
.sidebar-widget button[type="submit"],
.sidebar-widget .wp-block-search__button {
  flex-shrink: 0;
  padding: 10px 18px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: var(--cream);
  background: var(--olive);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background .18s ease;
}
.sidebar-widget input[type="submit"]:hover,
.sidebar-widget button[type="submit"]:hover,
.sidebar-widget .wp-block-search__button:hover { background: var(--olive-dk); }
.sidebar-widget .wp-block-search__label { display: none; }

/* سحابة الوسوم */
.sidebar-widget .tag-cloud-link,
.sidebar-widget .wp-block-tag-cloud a {
  display: inline-block;
  margin: 0 0 6px 6px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: .76rem !important;
  font-weight: 600;
  color: var(--olive-dk);
  background: var(--sand);
}
.sidebar-widget .tag-cloud-link:hover,
.sidebar-widget .wp-block-tag-cloud a:hover { background: var(--olive); color: var(--cream); }

/* التعليقات الحديثة */
.sidebar-widget .wp-block-latest-comments__comment {
  font-size: .84rem;
  line-height: 1.7;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: var(--hairline);
}
.sidebar-widget .wp-block-latest-comments__comment:last-child { border: 0; margin: 0; padding: 0; }
.sidebar-widget .wp-block-latest-comments__comment-date { font-size: .72rem; color: var(--olive-text); }

/* التواريخ في المقالات الحديثة */
.sidebar-widget .wp-block-latest-posts__post-date {
  display: block;
  font-size: .72rem;
  color: var(--olive-text);
}


/* =========================================================
   29. النشرة — الشرك ورسائل الحالة
   ========================================================= */
.nl-hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nl-note { transition: color .2s ease; }
.nl-note.is-error   { color: var(--copper-lt); font-weight: 600; }
.nl-note.is-success { color: var(--cream); font-weight: 600; }

.nl-form button[disabled] { opacity: .6; cursor: wait; }


/* =========================================================
   30. البودكاست — الطبقة الأساسيّة
   ---------------------------------------------------------
   قوالب البودكاست كُتبت في مواجهة ملفّ اسمه podcast.css لم
   يدخل الثيم قطّ. النتيجة: ٥٢ كلاساً من ٩٧ بلا أي قاعدة —
   الهيرو والبطاقات ومشغّل الصوت كلّها تتكدّس ككتل خام. لذلك
   بدت صفحات البودكاست وكأنّها من موقع آخر.

   ما يلي هو الأساس الغائب، مبنيّاً على نفس الرموز التي يستعملها
   بقيّة الموقع — فلا تعود هذه الصفحات غريبة عن أخواتها.
   ========================================================= */

/* ---------------------------------------------------------
   30.0 مرادفات الألوان
   تسع قواعد في anthro-inner.css تنادي var(--c-olive) و
   var(--c-copper) وأخواتهما، وهي أسماء غير معرَّفة في الثيم
   كلّه. فكانت القيم الاحتياطيّة هي التي تظهر فعلاً — ونحاسها
   ‎#C47A6A‎ ورديّ لا نحاسيّ، وكريمها ‎#EFE1D4‎ أغمق من كريم
   الهويّة. أي أنّ صفحات البودكاست كانت تُلوَّن خارج اللوحة.

   نُعرّف المرادفات مرّة واحدة بدل تعديل تسعة مواضع.
   --------------------------------------------------------- */
:root {
  --c-olive:  var(--olive);
  --c-cream:  var(--cream);
  --c-sand:   var(--sand);
  --c-copper: var(--copper);
  --c-dark:   var(--dark);
  --c-muted:  var(--olive-text);
}


/* ---------------------------------------------------------
   30.1 هيرو البودكاست
   السطح الداكن في الهويّة زيتونيّ لا أسود؛ فالتعتيم فوق الصورة
   زيتونيّ داكن، ومقاس العنوان هو نفسه مقاس عناوين الأرشيف.
   --------------------------------------------------------- */
.pod-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--hdr-h) + var(--sp-6)) var(--sp-6);
  background: var(--olive-dk);
  color: var(--cream);
}

.pod-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* الصور في الهويّة هادئة لا فاقعة */
  filter: saturate(.72) contrast(1.02);
}

.pod-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(77, 80, 53, .82) 0%, rgba(77, 80, 53, .94) 100%);
}

.pod-hero-content {
  position: relative;
  z-index: 1;
  max-width: 68ch;
}

.pod-eyebrow { margin-bottom: var(--sp-3); }
.pod-eyebrow span:not(.sec-line) { color: var(--sand); }
.pod-eyebrow .sec-line { background: var(--copper); }

.pod-hero-title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.24;
  color: var(--cream);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

.pod-hero-desc {
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(246, 243, 236, .82);
  max-width: 62ch;
  margin: 0;
}

.pod-hero-platforms { margin-top: var(--sp-4); }

/*
 * صفحة الحلقة والموسم: الهيرو فيهما مسار تنقّل فقط، فلا داعي
 * لارتفاع صفحةٍ كاملة. نضبطه على قدر محتواه.
 */
.pod-hero--single,
.pod-hero--season {
  min-height: 0;
  padding-block: calc(var(--hdr-h) + var(--sp-4)) var(--sp-4);
}
/* محتوى هذين الهيروين محاذٍ للبداية، فلا يُتوسَّط مسارهما */
.pod-hero--single .cat-bc,
.pod-hero--season .cat-bc {
  padding-top: 0;
  justify-content: flex-start;
  margin-bottom: 0;
}
.pod-hero .cat-bc .bc-sep { color: rgba(246, 243, 236, .45); }


/* ---------------------------------------------------------
   30.2 تبويبات المواسم
   بطاقة لكل موسم لا زرّ: الاسم وعدد الحلقات معاً يجعلان
   الاختيار مفهوماً قبل الضغط.
   --------------------------------------------------------- */
.seasons-section {
  padding-block: var(--sp-5);
  background: var(--cream);
  border-bottom: var(--hairline);
}

.seasons-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-2);
}

.season-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 18px;
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
  color: var(--olive-dk);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.season-tab:hover {
  border-color: rgba(107, 111, 74, .24);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.season-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(107, 111, 74, .1);
  color: var(--olive-dk);
  font-size: .92rem;
  font-weight: 700;
}

.season-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.season-name {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
}
.season-count {
  font-size: .78rem;
  color: var(--olive-text);
}

.season-tab.active {
  background: var(--olive);
  border-color: var(--olive);
}
.season-tab.active .season-num {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}


/* ---------------------------------------------------------
   30.3 قائمة الحلقات
   صفّ عريض لكل حلقة — كما تُعرض البودكاستات فعلاً — لا شبكة
   بطاقات. الرقم ثمّ الصورة ثمّ النصّ ثمّ الأدوات.
   --------------------------------------------------------- */
.episodes-list-full {
  display: grid;
  gap: var(--sp-2);
}

.ep-item {
  display: grid;
  grid-template-columns: auto 128px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ep-item:hover {
  border-color: rgba(107, 111, 74, .24);
  box-shadow: var(--shadow-md);
}

/*
 * الرقم ثانويّ لكنّه يجب أن يُقرأ. الرملي على بطاقة بيضاء يعطي
 * ‎1.59:1‎ — أي لا شيء تقريباً. هذا زيتوني بدرجة اللون والتشبّع
 * نفسيهما، أُنزلت إضاءته حتى ‎3.1:1‎ وهي عتبة WCAG للنصّ الكبير.
 */
.ep-item-num {
  flex: 0 0 auto;
  min-width: 2.5ch;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #919664;
  font-variant-numeric: tabular-nums;
}

.ep-item-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* زرّ التشغيل يظهر عند المرور، ويبقى ظاهراً دوماً على اللمس */
.ep-item-play {
  position: absolute;
  inset: 0;
  background: rgba(77, 80, 53, .42);
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
.ep-item:hover .ep-item-play,
.ep-item-play:focus-visible { opacity: 1; }

@media (hover: none) {
  .ep-item-play { opacity: 1; background: rgba(77, 80, 53, .28); }
}

.ep-item-body { min-width: 0; }

.ep-item-title {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 6px;
}
.ep-item-title a { color: var(--olive-dk); }
.ep-item-title a:hover { color: var(--copper-text); }

.ep-item-desc {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--olive-text);
  margin: 0 0 8px;
}

.ep-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .78rem;
  color: var(--olive-text);
}

.ep-item-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.ep-save-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--olive-text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ep-save-btn:hover,
.ep-save-btn.is-saved {
  background: rgba(107, 111, 74, .1);
  border-color: rgba(107, 111, 74, .24);
  color: var(--olive-dk);
}

.ep-new-badge {
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(196, 122, 68, .12);
  color: var(--copper-text);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   30.4 بطاقة المشغّل الكامل
   --------------------------------------------------------- */
.full-player-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5);
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.full-player-art { position: relative; }

.player-art-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* القرص: إشارة إلى الصوت، يدور فقط أثناء التشغيل */
.vinyl-disc {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(31, 31, 31, .92) 0 3px, rgba(31, 31, 31, .74) 3px 4px);
  display: grid;
  place-items: center;
}
.vinyl-center {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--copper);
}
.vinyl-disc.is-playing { animation: anthro-spin 3.4s linear infinite; }

@keyframes anthro-spin { to { transform: rotate(360deg); } }

.player-art-waves {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
.player-art-waves span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: rgba(246, 243, 236, .8);
  animation: anthro-wave 1.4s ease-in-out infinite;
}
.player-art-waves span:nth-child(2) { animation-delay: .2s; }
.player-art-waves span:nth-child(3) { animation-delay: .4s; }
.player-art-waves span:nth-child(4) { animation-delay: .6s; }
.player-art-waves span:nth-child(5) { animation-delay: .8s; }

.full-player-info { min-width: 0; }

.ep-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  color: var(--olive-text);
  margin-bottom: var(--sp-2);
}
.ep-num { font-weight: 700; color: var(--olive-dk); }

/*
 * ‏.ep-dur كان كريمياً بشفافيّة ٥٠٪ — لوناً وُضع يوم كان هذا
 * السطر فوق الهيرو الداكن. صار السطر داخل بطاقة بيضاء، فاختفت
 * المدّة تماماً. اللون هنا لون السطر الذي تعيش فيه.
 */
.full-player-card .ep-dur,
.full-player-card .ep-date { color: var(--olive-text); }

.full-ep-title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--olive-dk);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

.full-ep-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--olive-text);
  margin: 0 0 var(--sp-3);
}


/* ---------------------------------------------------------
   30.5 مشغّل الصوت
   --------------------------------------------------------- */
.audio-player {
  padding: var(--sp-3);
  background: var(--cream);
  border: var(--hairline);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
}

.ap-waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 46px;
  margin-bottom: var(--sp-2);
}
/* يبنيها podcast.js بعد قراءة الصوت — قبلها لا نحجز فراغاً */
.ap-waveform:empty { display: none; }

.ap-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.ap-time {
  font-size: .76rem;
  color: var(--olive-text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.ap-bar {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 100px;
  background: var(--sand-md);
  cursor: pointer;
}
.ap-played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 100px;
  background: var(--copper);
}
.ap-thumb {
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 3px rgba(196, 122, 68, .2);
}

.ap-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.ap-btn {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--olive-dk);
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease;
}
.ap-btn:hover { background: rgba(107, 111, 74, .1); }

.ap-skip {
  position: relative;
  width: 42px;
  height: 42px;
}
.ap-skip span {
  position: absolute;
  font-size: .56rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ap-playpause {
  width: 58px;
  height: 58px;
  background: var(--olive);
  color: var(--cream);
}
.ap-playpause:hover { background: var(--olive-dk); }

.ap-speed {
  padding: 6px 12px;
  border: var(--hairline);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--olive-dk);
  cursor: pointer;
  user-select: none;
}
.ap-speed:hover { background: rgba(107, 111, 74, .1); }

.ap-volume-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
}
.ap-vol { width: 38px; height: 38px; }

.ap-vol-bar {
  position: relative;
  width: 72px;
  height: 5px;
  border-radius: 100px;
  background: var(--sand-md);
  cursor: pointer;
}
.ap-vol-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--olive);
}


/* ---------------------------------------------------------
   30.6 المنصّات والوسوم وحالة غياب الصوت
   --------------------------------------------------------- */
.platforms-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.platforms-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--olive-text);
}

.platform-btn {
  padding: 8px 16px;
  border: var(--hairline);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--olive-dk);
  transition: background .2s ease, border-color .2s ease;
}
.platform-btn:hover {
  background: rgba(107, 111, 74, .1);
  border-color: rgba(107, 111, 74, .24);
}

/* فوق الهيرو الداكن تنقلب الألوان */
.pod-hero .platforms-label { color: rgba(246, 243, 236, .8); }
.pod-hero .platform-btn {
  color: var(--cream);
  border-color: rgba(246, 243, 236, .32);
}
.pod-hero .platform-btn:hover {
  background: rgba(246, 243, 236, .14);
  border-color: rgba(246, 243, 236, .5);
}

.ep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ep-tag-item {
  padding: 5px 13px;
  border-radius: 100px;
  background: rgba(107, 111, 74, .09);
  color: var(--olive-dk);
  font-size: .76rem;
  font-weight: 600;
}

.ep-no-audio {
  border-radius: var(--r-md);
  border-inline-start-width: 3px;
}


/* ---------------------------------------------------------
   30.7 الاستجابة
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .full-player-card {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
  .full-player-art { max-width: 280px; }
}

@media (max-width: 700px) {
  .ep-item {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--sp-2);
  }
  /* الرقم يسقط على الجوّال، والأدوات تنزل تحت النصّ */
  .ep-item-num { display: none; }
  .ep-item-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .ep-item-desc { display: none; }

  .ap-volume-wrap { display: none; }
  .ap-controls { justify-content: center; }
}


/* =========================================================
   31. الصفحات الثابتة — من نحن، تواصل معنا، الشروط، الخصوصية
   ---------------------------------------------------------
   كانت هذه الصفحات الأربع أضعف ما في الموقع، لثلاثة أسباب
   منفصلة اجتمعت في مكان واحد:

   ١. الشارة فوق العنوان تحمل صنفين: ‎.about-eyebrow‎ يجعلها
      inline-flex أي بعرض محتواها، و‎.sec-label‎ يجعلها flex أي
      بعرض السطر كلّه. الثاني يفوز في التتالي، فتمدّدت حبّة
      الحدود النحاسيّة عبر الصفحة وبدت شريطاً فارغاً مكسوراً.

   ٢. ترويسة الصفحة تدرّج من الزيتوني الداكن إلى ‎#1a1a10‎ —
      أي إلى ما يقارب الأسود، وهو ليس في لوحة الهويّة. ودليل
      الهويّة يُظهر الموقع فاتحاً كريميّاً في أساسه، والداكن
      للأزرار والتذييل لا لرؤوس الصفحات. وبقيّة الصفحات
      (الأرشيف، الشِّعر، التدريس) فاتحة أصلاً، فبدت هذه غريبة
      بينها.

   ٣. النصّ يمتدّ بعرض الحاوية كاملاً بلا مقاس قراءة، وعناوينه
      ملتصقة بفقراتها.
   ========================================================= */

/* ---- ١. الشارة تعود إلى حجمها ---- */
.about-eyebrow.sec-label {
  display: inline-flex;
  width: auto;
  max-width: max-content;
}

/* ---- ٢. مقاسات الترويسة ---- */
/*
 * اللون والصورة يأتيان من القسم ٣٤ الذي يوحّد كل رؤوس الموقع.
 * هنا المقاسات وحدها — والمحاذاة إلى بداية السطر لأنّ محتوى
 * هذا الرأس نصّي لا متوسّط.
 */
.page-hero.about-hero .about-title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.24;
}

.page-hero.about-hero .about-lead {
  font-size: 1.02rem;
  line-height: 1.9;
  max-width: 62ch;
}

.page-hero.about-hero .cat-bc {
  justify-content: flex-start;
  margin-bottom: var(--sp-3);
}


/* ---- ٣. مقاس قراءة وإيقاع رأسي ---- */
.anthro-page .entry-content {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--dark);
}

.anthro-page .entry-content > * + * { margin-top: var(--sp-3); }

.anthro-page .entry-content :is(h2, h3, h4) {
  color: var(--olive-dk);
  line-height: 1.35;
  text-wrap: balance;
}
.anthro-page .entry-content h2 {
  font-size: 1.5rem;
  margin-top: var(--sp-6);
}
.anthro-page .entry-content h3 {
  font-size: 1.2rem;
  margin-top: var(--sp-5);
}

/* أوّل عنوان لا يحتاج فراغاً فوقه */
.anthro-page .entry-content > :first-child { margin-top: 0; }

.anthro-page .entry-content a {
  color: var(--copper-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.anthro-page .entry-content a:hover { color: var(--olive-dk); }

.anthro-page .entry-content :is(ul, ol) { padding-inline-start: 1.4em; }
.anthro-page .entry-content li + li { margin-top: var(--sp-1); }

/*
 * صفحة «تواصل معنا» سطورها أزواج «عنوان: بريد». الخطّ الفاصل
 * يمنحها بنية بدل أن تبدو فقرات متلاصقة.
 */
.anthro-page .entry-content p strong:first-child {
  color: var(--olive-dk);
}


/* =========================================================
   32. الرئيسية — الهيرو وفق دليل الهويّة
   ---------------------------------------------------------
   نموذج الموقع في الدليل يُعطي الهيرو لشعار العلامة: عنوان
   واحد، وسم تحته، وزرّ واحد فوق صورة طبيعيّة. ثمّ صفّ من أربع
   بطاقات بأيقونات خطّية.

   وأضفنا بينهما شريط المقال المميّز: منصّة نشر لا تُخفي أحدث
   ما نشرت خلف تمريرة كاملة.
   ========================================================= */

/* ---- شريط المقال المميّز ---- */
.feat-strip {
  background: var(--cream);
  border-bottom: var(--hairline);
}

.feat-strip__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  color: var(--olive-dk);
}

.feat-strip__img {
  flex: 0 0 auto;
  width: 78px;
  height: 56px;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
}

.feat-strip__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.feat-strip__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--copper-text);
}

.feat-strip__title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  /* سطر واحد: الشريط إشارة لا بطاقة */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feat-strip__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: var(--hairline);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.feat-strip__link:hover .feat-strip__cta {
  background: rgba(107, 111, 74, .1);
  border-color: rgba(107, 111, 74, .24);
}
.feat-strip__link:hover .feat-strip__title { color: var(--copper-text); }

/* السهم يشير إلى جهة القراءة */
[dir="rtl"] .feat-strip__cta svg { transform: scaleX(-1); }

@media (max-width: 700px) {
  .feat-strip__link {
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
  }
  .feat-strip__cta { display: none; }
  .feat-strip__title { -webkit-line-clamp: 2; }
}


/* ---- بطاقات الأقسام: أيقونات خطّية كما في الدليل ---- */
.cat-icon-wrap {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(107, 111, 74, .08);
  color: var(--olive);
}
.cat-icon-wrap svg {
  width: 26px;
  height: 26px;
}
.cat-card:hover .cat-icon-wrap {
  background: rgba(196, 122, 68, .12);
  color: var(--copper-text);
}


/* ---- الهيرو: عنوان العلامة ---- */
.hero-sub {
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: rgba(246, 243, 236, .86);
}

/*
 * زرّ واحد في الهيرو الآن، فلا داعي لتوزيع صفّ من زرّين.
 */
.hero-ctas { justify-content: flex-start; }


/* =========================================================
   33. فيديو الحلقة
   الحقل اختياري، فالقسم كلّه لا يُطبَع إن كان فارغاً.
   ========================================================= */
.ep-video-section {
  padding-block: var(--sp-5) 0;
}

.ep-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--olive-dk);
  box-shadow: var(--shadow-md);
}
.ep-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   34. رأس مصوّر واحد لكل الصفحات
   ---------------------------------------------------------
   كان في الموقع ستّ عائلات رؤوس: الأرشيف بتدرّج رملي فاتح،
   والتصنيف والكاتب والتدريب بزيتوني مصمت، والبودكاست والرئيسية
   بصورة. ستّة مظاهر لشيء واحد.

   الآن جميعها رأس مصوّر واحد: صورة، فوقها تعتيم زيتوني من لوحة
   الهويّة، ونصّ كريمي. الصورة تختلف بين الصفحات (inc/hero.php)،
   والبنية واحدة.

   لماذا التعتيم زيتوني لا أسود؟ لأنّ الأسود ليس في اللوحة، ولأنّ
   الزيتوني يربط الصورة بالعلامة بدل أن يطفئها.
   ========================================================= */

.archive-header,
.page-hero,
.cat-hero,
.author-hero,
.training-hero,
.error-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding-block: calc(var(--hdr-h) + var(--sp-6)) var(--sp-6);

  background-color: var(--olive-dk);
  background-image: var(--page-hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: var(--cream);
  border-bottom: 0;
}

/*
 * التعتيم. أثقل في الأسفل قليلاً: النصّ يجلس هناك، وأعلى الصورة
 * يبقى مقروءاً.
 */
.archive-header::after,
.page-hero::after,
.cat-hero::after,
.author-hero::after,
.training-hero::after,
.error-hero::after {
  content: '';
  /*
   * ‏display صريح: anthro-main.css يُطفئ ‎.cat-hero::after‎ و
   * ‎.author-hero::after‎ بـ display:none. تصريح content وحده
   * يُعيد المحتوى ويترك العنصر مُطفأً — فبقيت صفحتا التصنيف
   * والكاتب بصورة بلا تعتيم، ونصّهما غير مقروء فوقها.
   */
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  /*
   * قوّة التعتيم مقيسة لا مُقدَّرة: عند ‎.78‎ في الأعلى كان الشرح
   * (كريمي بشفافيّة ‎.84‎) يقع على أفتح مواضع الصورة فينزل تحت
   * ‎4.5:1‎. هذه القيم تُبقي أضعف نصّ فوق العتبة على الصور الأربع.
   */
  background: linear-gradient(
    180deg,
    rgba(77, 80, 53, .86) 0%,
    rgba(77, 80, 53, .93) 60%,
    rgba(77, 80, 53, .96) 100%
  );
}

/*
 * المحاذاة: هيرو الرئيسية متوسّط، وهو المرجع الذي تُقاس عليه
 * بقيّة الصفحات. فتتوسّط كلّها.
 */
.archive-header,
.page-hero,
.training-hero,
.error-hero { text-align: center; }

.archive-header-inner,
.about-hero-content,
.training-hero__inner {
  max-width: 68ch;
  margin-inline: auto;
}

.archive-desc,
.about-lead,
.training-hero__lede { margin-inline: auto; }

.archive-breadcrumb,
.page-hero .cat-bc,
.training-hero .breadcrumb { justify-content: center; }

.page-hero.about-hero .cat-bc { justify-content: center; }

.articles-count-badge,
.training-hero__meta { margin-inline: auto; }

/*
 * ‏.sec-label‎ و‎.about-eyebrow‎ حاويتان مرنتان: ‎margin:auto‎ وحده
 * لا يُزيحهما ما دام عرضهما كامل السطر. التوسيط يكون بمحاذاة
 * محتواهما، مع ‎max-content‎ لمن له حدود مرئيّة.
 */
.archive-header .sec-label,
.page-hero .sec-label,
.cat-hero .sec-label,
.training-hero .sec-label,
.error-hero .sec-label { justify-content: center; }

.page-hero .about-eyebrow {
  margin-inline: auto;
  max-width: max-content;
}

/* الصورة نفسها تهدأ قليلاً — نبرة التصوير في الدليل ترابيّة لا فاقعة */
.archive-header,
.page-hero,
.cat-hero,
.author-hero,
.training-hero,
.error-hero { background-blend-mode: normal; }


/* ---- العناوين ---- */
.archive-title,
.about-title,
.cat-hero-title,
.author-hero-name,
.training-hero__title,
.error-title {
  color: var(--cream);
  text-wrap: balance;
}

/* ---- الشروح ---- */
/*
 * الشرح هو أضعف نصّ في الرأس. حُسبت القيمة لا قُدِّرت: مع تعتيم
 * ‎.86‎ فوق بكسل أبيض خالص — أسوأ حالة ممكنة — تعطي ‎.84‎ نسبة
 * ‎4.18:1‎ أي دون العتبة، و‎.92‎ تعطي ‎4.65:1‎. رفع الشفافيّة أبقى
 * للصورة من زيادة التعتيم.
 */
.archive-desc,
.about-lead,
.cat-hero-desc,
.author-hero-bio,
.training-hero__lede,
.error-text {
  color: rgba(246, 243, 236, .92);
}

/* ---- المسار ---- */
.archive-header .bc-link,
.page-hero .bc-link,
.cat-hero .bc-link,
.author-hero .bc-link,
.training-hero .bc-link,
.archive-breadcrumb .bc-link { color: rgba(246, 243, 236, .78); }

.archive-header .bc-link:hover,
.page-hero .bc-link:hover,
.archive-breadcrumb .bc-link:hover { color: var(--cream); }

.archive-header .bc-sep,
.page-hero .bc-sep,
.cat-hero .bc-sep,
.author-hero .bc-sep,
.archive-breadcrumb .bc-sep { color: rgba(246, 243, 236, .40); }

.archive-header .bc-current,
.page-hero .bc-current,
.cat-hero .bc-current,
.author-hero .bc-current,
.archive-breadcrumb .bc-current { color: var(--cream); }


/* ---- الشارات والتسميات فوق الصورة ---- */
.archive-header .sec-label,
.page-hero .sec-label,
.cat-hero .sec-label,
.training-hero .sec-label { color: var(--sand); }

.archive-header .sec-line,
.page-hero .sec-line,
.cat-hero .sec-line,
.training-hero .sec-line { background: var(--copper-lt); }

/*
 * الشارات وحدها تأخذ الحبّة الشفّافة. ‏.cat-hero-meta‎ و
 * ‎.author-hero-stats‎ حاويتان مرنتان لا شارتان — إعطاؤهما حدوداً
 * يرسم صندوقاً بعرض الصفحة حول شارة صغيرة في وسطه.
 */
.articles-count-badge,
.training-hero__meta,
.cat-art-count,
.au-stat {
  background: rgba(246, 243, 236, .14);
  border: 1px solid rgba(246, 243, 236, .26);
  color: var(--cream);
}

/*
 * ‏.training-hero__meta‎ لم يكن شارة أصلاً بل نصّاً عارياً، فأعطته
 * الحدود صندوقاً ملتصقاً بحروفه. الهندسة هنا تجعله حبّة مثل
 * أخواته في بقيّة الرؤوس.
 */
.training-hero__meta {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.6;
}

.cat-hero-meta,
.author-hero-stats {
  background: none;
  border: 0;
  color: var(--cream);
}

.page-hero .about-eyebrow {
  color: var(--copper-lt);
  border-color: rgba(232, 169, 106, .42);
  background: rgba(232, 169, 106, .12);
}

/* أيقونة التصنيف ودائرة صورة الكاتب */
.cat-hero-icon {
  background: rgba(246, 243, 236, .14);
  color: var(--cream);
}
.author-hero-photo {
  border: 3px solid rgba(246, 243, 236, .3);
}

/*
 * الأنماط الزخرفيّة رُسمت لخلفيّة فاتحة. فوق صورة معتّمة تتحوّل
 * إلى ضجيج، فنُخفّتها بدل حذفها.
 */
.archive-header.pattern-topography,
.archive-header.pattern-sadu,
.archive-header.pattern-weave,
.archive-header.pattern-palm,
.archive-header.pattern-mudbrick,
.training-hero.pattern-weave { background-blend-mode: normal; }

.archive-header[class*="pattern-"]::before,
.training-hero[class*="pattern-"]::before,
.page-hero::before { opacity: .18; }


/* ---- روابط الكاتب فوق الصورة ---- */
.author-hero-links a {
  color: var(--cream);
  border-color: rgba(246, 243, 236, .3);
}
.author-hero-links a:hover {
  background: rgba(246, 243, 236, .14);
  border-color: rgba(246, 243, 236, .5);
}

/* ---- زرّ التدريب فوق الصورة ---- */
.training-hero__cta .btn--primary {
  background: var(--copper);
  color: #fff;
}
.training-hero__cta .btn--primary:hover { background: var(--copper-text); }


/* ---- صفحة 404: الرقم الكبير ---- */
.error-hero .error-num,
.error-hero .err-num { color: rgba(246, 243, 236, .16); }

/*
 * حقل البحث في صفحة 404 كان أبيض على فاتح. فوق الصورة يحتاج
 * حدّاً يفصله.
 */
.error-hero .search-form,
.error-hero form {
  border: 1px solid rgba(246, 243, 236, .28);
  border-radius: 100px;
}


/* ---- الشاشات الصغيرة ---- */
@media (max-width: 700px) {
  .archive-header,
  .page-hero,
  .cat-hero,
  .author-hero,
  .training-hero,
  .error-hero {
    padding-block: calc(var(--hdr-h) + var(--sp-4)) var(--sp-4);
  }
}


/* =========================================================
   35. صفحتا «من نحن» و«تواصل معنا»
   ---------------------------------------------------------
   كانتا أضعف صفحتين في الموقع: فقرات متلاصقة وثلاثة أسطر بريد.
   وهما أوّل ما يفتحه باحث يفكّر في الكتابة معنا، ومموّل يدرس
   المشروع، وصحفي يقتبس منه.
   ========================================================= */

/* ---------------------------------------------------------
   35.1 بيان المشروع
   --------------------------------------------------------- */
.about-statement .entry-content {
  max-width: 62ch;
  margin-inline: auto;
  font-size: 1.12rem;
  line-height: 2;
  color: var(--dark);
}
.about-statement .entry-content > * + * { margin-top: var(--sp-3); }
.about-statement .entry-content :is(h2, h3) {
  color: var(--olive-dk);
  margin-top: var(--sp-5);
  line-height: 1.35;
}
.about-statement .entry-content h2 { font-size: 1.45rem; }
.about-statement .entry-content h3 { font-size: 1.18rem; }
.about-statement .entry-content > :first-child { margin-top: 0; }


/* ---------------------------------------------------------
   35.2 الأركان الأربعة
   وسم العلامة نفسه في دليل الهويّة، مبسوطاً.
   --------------------------------------------------------- */
.about-pillars { background: var(--cream); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-3);
}

.pillar-card {
  padding: var(--sp-4);
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pillar-card:hover {
  border-color: rgba(107, 111, 74, .24);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pillar-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(107, 111, 74, .08);
  color: var(--olive);
}
.pillar-card__icon svg { width: 25px; height: 25px; }

.pillar-card__title {
  font-size: 1.08rem;
  color: var(--olive-dk);
  margin: 0 0 8px;
}
.pillar-card__desc {
  font-size: .92rem;
  line-height: 1.85;
  color: var(--olive-text);
  margin: 0;
}


/* ---------------------------------------------------------
   35.3 المبادئ التحريريّة — على السطح الداكن
   --------------------------------------------------------- */
.about-principles {
  padding-block: var(--section-y);
  background: var(--olive-dk);
  color: var(--cream);
}

.principles-inner {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.principles-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.3;
  color: var(--cream);
  margin: var(--sp-2) 0 0;
  text-wrap: balance;
}

.principles-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.principle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(246, 243, 236, .14);
}
.principle:last-child { border-bottom: 0; padding-bottom: 0; }

.principle__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(246, 243, 236, .12);
  color: var(--copper-lt);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.principle__text {
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(246, 243, 236, .92);
}

@media (max-width: 860px) {
  .principles-inner { grid-template-columns: 1fr; gap: var(--sp-4); }
}


/* ---------------------------------------------------------
   35.4 فريق التحرير
   --------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-4) var(--sp-3);
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--olive-dk);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.team-card:hover {
  border-color: rgba(107, 111, 74, .24);
  box-shadow: var(--shadow-md);
}

.team-card__photo {
  width: 76px;
  height: 76px;
  margin-bottom: var(--sp-1);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
}

.team-card__name { font-weight: 600; font-size: .98rem; }

.team-card__field {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--olive-text);
}

.team-card__count {
  margin-top: 4px;
  padding: 3px 11px;
  border-radius: 100px;
  background: rgba(107, 111, 74, .09);
  color: var(--olive-dk);
  font-size: .72rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   35.5 دعوتا الختام
   --------------------------------------------------------- */
.about-cta { padding-block: 0 var(--section-y); }

.cta-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
}

.cta-box {
  padding: var(--sp-5);
  background: var(--sand);
  border-radius: var(--r-xl);
}
.cta-box__title {
  font-size: 1.25rem;
  color: var(--olive-dk);
  margin: 0 0 8px;
}
.cta-box__desc {
  font-size: .96rem;
  line-height: 1.9;
  color: var(--olive-text);
  margin: 0 0 var(--sp-3);
}

/*
 * ‏.btn--ghost‎ أبيضُ نصٍّ على أبيضَ شفّاف — صُمّم لسطح داكن أو
 * صورة. فوق الرملي الفاتح يختفي تماماً. هنا نُعيده حدّاً زيتونياً.
 */
.cta-box .btn--ghost {
  background: transparent;
  color: var(--olive-dk);
  border: 2px solid rgba(107, 111, 74, .3);
  backdrop-filter: none;
}
.cta-box .btn--ghost:hover {
  background: rgba(107, 111, 74, .1);
  border-color: rgba(107, 111, 74, .55);
}


/* ---------------------------------------------------------
   35.6 قنوات التواصل
   --------------------------------------------------------- */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
}

.channel-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
}

.channel-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(196, 122, 68, .1);
  color: var(--copper-text);
}
.channel-card__icon svg { width: 23px; height: 23px; }

.channel-card__title {
  font-size: 1.05rem;
  color: var(--olive-dk);
  margin: 0 0 6px;
}
.channel-card__desc {
  font-size: .9rem;
  line-height: 1.85;
  color: var(--olive-text);
  margin: 0 0 var(--sp-3);
  flex: 1 1 auto;
}

.channel-card__mail {
  align-self: flex-start;
  padding: 7px 14px;
  border: var(--hairline);
  border-radius: 100px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--olive-dk);
  transition: background .2s ease, border-color .2s ease;
}
.channel-card__mail:hover {
  background: rgba(107, 111, 74, .1);
  border-color: rgba(107, 111, 74, .24);
}


/* ---------------------------------------------------------
   35.7 لوحة النموذج
   --------------------------------------------------------- */
.contact-form-section { padding-block: 0 var(--section-y); }

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: var(--cream);
  border: var(--hairline);
  border-radius: var(--r-xl);
}

.contact-panel__title {
  font-size: 1.4rem;
  color: var(--olive-dk);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
.contact-panel__note {
  font-size: .94rem;
  line-height: 1.9;
  color: var(--olive-text);
  margin: 0;
}
.contact-panel__content {
  margin-top: var(--sp-3);
  font-size: .94rem;
  line-height: 1.9;
  color: var(--olive-text);
}

.contact-form { display: grid; gap: var(--sp-3); }

.cf-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.cf-field { display: flex; flex-direction: column; gap: 7px; }

.cf-field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--olive-dk);
}
.cf-field label span { color: var(--copper-text); }

.cf-field input,
.cf-field select,
.cf-field textarea {
  padding: 11px 14px;
  background: #fff;
  border: 1px solid rgba(107, 111, 74, .2);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: .95rem;
  color: var(--dark);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cf-field textarea { resize: vertical; min-height: 140px; line-height: 1.8; }

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107, 111, 74, .14);
}

/* الشرك: مخفيّ عن العين وعن قارئ الشاشة، ظاهر للآليّات */
.cf-hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cf-submit { justify-self: flex-start; }
.cf-submit[disabled] { opacity: .6; cursor: wait; }

.cf-note {
  margin: 0;
  min-height: 1.4em;
  font-size: .88rem;
  transition: color .2s ease;
}
.cf-note.is-error { color: var(--copper-text); font-weight: 600; }
.cf-note.is-success { color: var(--olive-dk); font-weight: 600; }

@media (max-width: 860px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
}


/* =========================================================
   36. «اسأل أنثرو» و«الكتيّب الرقمي» وشعار الفوتر
   ---------------------------------------------------------
   السبب الجذري لرداءة القسمين لم يكن في تصميمهما: أنماطهما
   تعيش في anthro-inner.css، وكان الملفّ يُستثنى من الرئيسية.
   فكان الـ grid الذي يوزّع بطاقاتهما غائباً، وتتراصّ عناصرها
   في سطر واحد. حُمِّل الملفّ الآن (functions.php)، وما يلي
   صقل فوق ذلك.
   ========================================================= */

/* ---------------------------------------------------------
   36.1 اسأل أنثرو
   بوّابة الدخول لمن يقترب من الحقل لأوّل مرّة، فتستحقّ أن
   تبدو مدعوّة لا قائمة روابط.
   --------------------------------------------------------- */
.ask-series { background: var(--cream); }

/*
 * ‏auto-fit لا عمودان ثابتان: ثلاث بطاقات في عمودين تترك
 * فراغاً في الصفّ الثاني. هكذا تملأ الثلاث عرضها على الشاشات
 * الواسعة وتنزل إلى عمودين ثمّ واحد بحسب المتاح.
 */
@media (min-width: 780px) {
  .ask-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-2);
  }
}

.ask-item__link {
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ask-item__link:hover {
  border-color: rgba(196, 122, 68, .38);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ask-item__mark {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
  background: rgba(196, 122, 68, .12);
  color: var(--copper-text);
  transition: background .2s ease, color .2s ease;
}

.ask-item__q {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--olive-dk);
}
.ask-item__link:hover .ask-item__q { color: var(--copper-text); }

.ask-item__a {
  font-size: .88rem;
  line-height: 1.8;
}

.ask-item__by {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--olive-text);
}

.ask-series__lede {
  max-width: 62ch;
  margin-bottom: var(--sp-4);
  color: var(--olive-text);
}

.ask-series__all { margin-top: var(--sp-2); }


/* ---------------------------------------------------------
   36.2 الكتيّب الرقمي
   --------------------------------------------------------- */
.training-promo__inner { gap: var(--sp-6); }

.training-promo__lede {
  max-width: 54ch;
  color: rgba(246, 243, 236, .86);
}

.training-promo__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.training-promo__index {
  color: var(--copper-lt);
  font-weight: 600;
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.training-promo__index:hover { color: var(--cream); }

/* الفهرس: خطوط فاصلة رفيعة تجعله يُقرأ فهرساً لا قائمة روابط */
.training-promo__list { gap: 0; }

.training-promo__list li + li {
  border-top: 1px solid rgba(246, 243, 236, .12);
}

.training-promo__list a {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: center;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  line-height: 1.6;
}

.training-promo__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(246, 243, 236, .1);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.training-promo__list a:hover .training-promo__num {
  background: var(--copper);
  color: var(--cream);
}

/*
 * ‏«+ ٤ فصول أخرى» ليس فصلاً فلا رقم له، فكان نصّه يقع في
 * العمود الأوّل — عرضه ‎34px‎ — فينكسر على ثلاثة أسطر. يمتدّ
 * على العمودين لأنّه سطر واحد لا بند مُرقَّم.
 */
.training-promo__rest a {
  display: block;
  grid-template-columns: none;
  padding-inline-start: 12px;
  font-size: .86rem;
}
.training-promo__rest a:hover { color: var(--cream); }


/* ---------------------------------------------------------
   36.3 شعار الفوتر
   ---------------------------------------------------------
   علامة الشعار رسم SVG يأخذ لونه من currentColor، و‎.logo-icon‎
   يفرض الزيتوني. على سطح الفوتر الداكن يعطي ذلك ‎3.14:1‎ —
   بينما كلمة «Anthro» بجانبه كريميّة عند ‎14.87:1‎. فتظهر
   الكلمة ويكاد المُجسَّم يختفي، وهو أوضح ما يكون على الجوّال
   حيث يتوسّط العمود وحده.

   الكريمي يرفعه إلى ‎14.87:1‎ فيتساوى مع الكلمة التي يقف معها.
   --------------------------------------------------------- */
.logo--ft { color: var(--cream); }
.logo--ft .logo-icon { color: var(--cream); }
.logo--ft .logo-en { color: var(--cream); }
.logo--ft .logo-ar { color: rgba(246, 243, 236, .62); }

/* الشعار على أي سطح داكن آخر يتبع القاعدة نفسها */
.site-footer .logo-icon,
.nl-section .logo-icon { color: var(--cream); }

@media (max-width: 900px) {
  /* العمود يتوسّط على الجوّال، فيتوسّط الشعار معه */
  .ft-brand { align-items: flex-start; }
}


/* =========================================================
   37. إيقاع الرئيسية
   ---------------------------------------------------------
   قياس الصفحة المرجعيّة أعطى نتيجة مضادّة للحدس: أقسامها عشرة
   وأقسامنا أحد عشر. الفرق ليس في العدد بل في <b>تبدّل كثافة
   الشبكة</b> — عندها ‎2 → 1 → 2 → 2 → 4‎، وعندنا شبكة واحدة
   بكثافة ثابتة لكل قسم.

   الصفحة التي لا تتبدّل شبكتها تُقرأ جدولاً. وهذا القسم يبني
   التبدّل: صفّان، ثمّ بطاقة عريضة واحدة، ثمّ صفّان.
   ========================================================= */

.mosaic {
  display: grid;
  gap: var(--sp-3);
}

.mosaic__row {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 760px) {
  .mosaic__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__row--wide { grid-template-columns: minmax(0, 1fr); }
}

/*
 * البطاقة العريضة: صورة إلى جانب نصّ. هي كسر الإيقاع نفسه،
 * فتأخذ مساحة أكبر وعنواناً أكبر.
 */
@media (min-width: 760px) {
  .art-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .art-card--wide .art-img-link { height: 100%; }
  .art-card--wide .art-img {
    height: 100%;
    min-height: 300px;
  }
  .art-card--wide .art-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .art-card--wide .art-title {
    font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
    line-height: 1.4;
  }
  .art-card--wide .art-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ---------------------------------------------------------
   37.1 التدريس — قائمة مُرقَّمة لا شبكة صور
   شكل مختلف عن جاريه عمداً: التبدّل هو المقصود.
   --------------------------------------------------------- */
.home-teaching { background: var(--sand); }

.home-teaching__lede {
  max-width: 62ch;
  margin: 0 0 var(--sp-4);
  color: var(--olive-text);
  line-height: 1.9;
}

.unit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

@media (min-width: 900px) {
  .unit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
}

.unit-item__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 16px;
  background: #fff;
  border: var(--hairline);
  border-radius: var(--r-lg);
  color: var(--olive-dk);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.unit-item__link:hover {
  border-color: rgba(107, 111, 74, .26);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.unit-item__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(107, 111, 74, .1);
  color: var(--olive-dk);
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.unit-item__link:hover .unit-item__num {
  background: var(--copper);
  color: var(--cream);
}

.unit-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.unit-item__name { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.unit-item__desc {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--olive-text);
}

.unit-item__count {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(107, 111, 74, .09);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   37.2 الشِّعر — نصّ بلا صور
   أوضح مواضع كسر الإيقاع: لا صورة ولا بطاقة، بل قصيدة.
   --------------------------------------------------------- */
.home-poetry {
  background: var(--olive-dk);
  color: var(--cream);
}

.home-poetry .sec-more { color: var(--copper-lt); }
.home-poetry .sec-more:hover { color: var(--cream); }

.poem-row {
  display: grid;
  gap: var(--sp-2);
}

@media (min-width: 720px) {
  .poem-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
}

.poem-brief__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  border-inline-start: 2px solid rgba(246, 243, 236, .18);
  color: var(--cream);
  transition: border-color .2s ease;
}
.poem-brief__link:hover { border-inline-start-color: var(--copper); }

.poem-brief__title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--cream);
  text-wrap: balance;
}
.poem-brief__link:hover .poem-brief__title { color: var(--copper-lt); }

.poem-brief__line {
  margin: 0;
  font-size: .9rem;
  line-height: 1.95;
  color: rgba(246, 243, 236, .8);
}

.poem-brief__by {
  margin-top: auto;
  font-size: .76rem;
  font-weight: 600;
  color: var(--copper-lt);
}


/* =========================================================
   38. صفحات السلاسل والشِّعر
   ========================================================= */

/* ---------------------------------------------------------
   38.1 عنوان صفحة السلسلة — كان غير مرئي
   ---------------------------------------------------------
   ‏anthro-inner.css يُلوّن ‎.archive-header--series .archive-title‎
   بالزيتوني الداكن. كان ذلك صحيحاً يوم كان رأس الصفحة فاتحاً،
   ثمّ صارت الرؤوس مصوّرة داكنة (القسم ٣٤) فبقيت القاعدة كما هي
   وتخصيصها أقوى — فصار العنوان زيتونيّاً داكناً فوق تعتيم زيتوني
   داكن، أي غير مقروء.

   والأثر ليس صفحة واحدة: كل السلاسل الستّ — اسأل أنثرو، ومن
   الحقل، وقراءة في الذاكرة، ولغة وهُويّة، وشهادات، ومواد وأشياء
   — كانت تُعرَض بلا عنوان ظاهر.
   --------------------------------------------------------- */
.archive-header--series .archive-title,
.archive-header--poetry .archive-title,
.archive-header--teaching .archive-title,
.archive-header--contributors .archive-title,
.archive-header--full .archive-title,
.archive-header--taxonomy .archive-title,
.archive-header--search .archive-title { color: var(--cream); }

.archive-header--series .archive-desc,
.archive-header--poetry .archive-desc,
.archive-header--teaching .archive-desc,
.archive-header--contributors .archive-desc,
.archive-header--full .archive-desc { color: rgba(246, 243, 236, .92); }


/* ---------------------------------------------------------
   38.2 صفحة الشِّعر
   ---------------------------------------------------------
   ‏auto-fill مع ‎1fr‎ يمنح العمود الواحد كامل العرض، فكانت
   القصيدة الوحيدة تمتدّ ‎1440px‎ وتُقرأ شريطاً لا قصيدة.

   والشِّعر لا يُقرأ في عرض المقال أصلاً: السطر الطويل يكسر الوزن
   البصري. فنحدّ البطاقة بمقاس قراءة الشِّعر ونتوسّطها.
   --------------------------------------------------------- */
/*
 * \u200Fauto-fit لا auto-fill: الثاني يُبقي المسارات الفارغة قائمة،
 * فتقف القصيدة الوحيدة في أوّل مسار — أقصى اليمين — وتُترك
 * ثلاثة مسارات فارغة إلى جوارها. و auto-fit يطوي الفارغ منها
 * فيتمدّد المسار الباقي ويتوسّط ما فيه.
 */
.poem-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  justify-items: center;
  gap: var(--sp-3);
}

.poem-card {
  width: 100%;
  max-width: 46ch;
  border: var(--hairline);
  border-radius: var(--r-lg);
}
.poem-card:hover {
  border-color: rgba(196, 122, 68, .38);
  box-shadow: var(--shadow-md);
}

.poem-card__link {
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.poem-card__title {
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  line-height: 1.45;
  color: var(--olive-dk);
  text-wrap: balance;
}
.poem-card:hover .poem-card__title { color: var(--copper-text); }

/*
 * المطلع: أسطره مقصودة فنحفظها، والخطّ النحاسي يميّزه عن نثر
 * البطاقات في بقيّة الموقع.
 */
.poem-card__opening {
  padding-inline-start: var(--sp-2);
  border-inline-start: 2px solid rgba(196, 122, 68, .35);
  font-size: .95rem;
  line-height: 2.1;
  color: var(--olive-text);
}

.poem-card__author {
  margin-top: 2px;
  color: var(--copper-text);
}

/* الصفحة نفسها تتنفّس أكثر: الشِّعر لا يُزاحَم */
.poetry-list .container { max-width: 1000px; }


/* ---------------------------------------------------------
   38.3 صفحة السلسلة — تنفّس وترتيب
   --------------------------------------------------------- */
.archive-header--series .articles-count-badge { margin-top: var(--sp-3); }

/*
 * «سلاسل أخرى» شريط تنقّل بين السلاسل. كان يلتصق بأسفل الشبكة
 * بلا فاصل، فيُقرأ امتداداً لها لا قسماً مستقلّاً.
 */
.tax-switcher {
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: var(--hairline);
}


/* =========================================================
   39. الرأس المصوّر — كهيرو الرئيسية
   ---------------------------------------------------------
   القسم ٣٤ وحّد الرؤوس لكنّه غسلها بتعتيم زيتوني مسطّح بكثافة
   ‎.86‎ في كل نقطة. النتيجة: نصّ مقروء وصورة شبه ممحوّة.

   وهيرو الرئيسية يفعلها على نحو أفضل، وسرّه شيئان:

   ١. التعتيم <b>متدرّج لا مسطّح</b>: خفيف في الأعلى حيث لا نصّ
      فتظهر الصورة، وكثيف في الأسفل حيث يجلس النصّ.
   ٢. لونه الداكن ‎#1F1F1F‎ لا الزيتوني. والفرق مقيس: عند كثافة
      ‎.70‎ يعطي الداكن ‎4.94:1‎ للشرح، بينما الزيتوني عند الكثافة
      نفسها يعطي ‎3.16:1‎ — دون العتبة. أي أنّ الانتقال إلى الداكن
      يسمح بتعتيم أخفّ <b>وتباين أعلى</b> في آن.

   فالصورة تظهر، والنصّ يُقرأ، والرأس يتّسع.
   ========================================================= */

.archive-header,
.page-hero,
.cat-hero,
.author-hero,
.training-hero,
.error-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: clamp(440px, 60vh, 660px);
  padding-block: calc(var(--hdr-h) + var(--sp-6)) var(--sp-6);

  /* الصورة تُعرض بنبرتها لا مطفأة */
  background-color: var(--dark);
  filter: none;
}

/*
 * التدرّج: شفاف تقريباً في الأعلى، كثيف في الأسفل. القيم نفسها
 * التي يستعملها هيرو الرئيسية حتى لا يفترق رأسان في موقع واحد.
 */
.archive-header::after,
.page-hero::after,
.cat-hero::after,
.author-hero::after,
.training-hero::after,
.error-hero::after {
  /*
   * طبقتان، وكلتاهما مقصودة.
   *
   * جرّبتُ أوّلاً تدرّجاً واحداً بنسب مئويّة، فرسب على صورتين:
   * صفحة التصنيف ‎2.37:1‎ و«من نحن» ‎3.39:1‎. السبب أنّ النسبة
   * المئويّة تتبع ارتفاع الرأس لا موضع النصّ، والصور تختلف في
   * سطوعها عند ذلك الموضع — فكل صورة جديدة يرفعها المحرّر قمار.
   *
   * الطبقة الأولى تُثبّت الأمر: تعتيم بارتفاع <b>ثابت بالبكسل</b>
   * مربوط بأسفل الرأس حيث يجلس النصّ دائماً، فلا يتعلّق بارتفاع
   * الرأس ولا بالصورة. والثانية مسحة خفيفة تربط الأعلى بالعلامة
   * وتُبقي الصورة ظاهرة.
   */
  background:
    linear-gradient(
      to top,
      rgba(31, 31, 31, .90) 0,
      rgba(31, 31, 31, .74) 210px,
      rgba(31, 31, 31, 0) 400px
    ),
    linear-gradient(
      to bottom,
      rgba(31, 31, 31, .08) 0%,
      rgba(31, 31, 31, .34) 100%
    );
}

/* الصورة نفسها: تشبّع طبيعي، فالنبرة الترابيّة في الأصل */
.archive-header,
.page-hero,
.cat-hero,
.author-hero,
.training-hero,
.error-hero { background-blend-mode: normal; }

/*
 * ظلّ خفيف تحت النصّ: شبكة أمان لبقعة فاتحة غير متوقّعة في صورة
 * يرفعها المحرّر لاحقاً. لا يُرى، ويمنع أسوأ حالة.
 */
.archive-title,
.about-title,
.cat-hero-title,
.author-hero-name,
.training-hero__title,
.error-title,
.archive-desc,
.about-lead,
.cat-hero-desc,
.author-hero-bio,
.training-hero__lede {
  text-shadow: 0 1px 12px rgba(31, 31, 31, .45);
}

/* المسار يعلو المحتوى، فيبقى في المنطقة الأخفّ — نُقوّيه وحده */
.archive-header .cat-bc,
.page-hero .cat-bc,
.archive-breadcrumb,
.cat-hero .cat-bc,
.author-hero .cat-bc {
  text-shadow: 0 1px 10px rgba(31, 31, 31, .7);
}

/* الأنماط الزخرفيّة فوق صورة ظاهرة تصير ضجيجاً */
.archive-header[class*="pattern-"]::before,
.training-hero[class*="pattern-"]::before,
.author-hero::before,
.page-hero::before { opacity: .10; }


/* ---------------------------------------------------------
   39.1 الشاشات الصغيرة
   الارتفاع الكبير على شاشة قصيرة يدفع المحتوى كلّه تحت الطيّة.
   --------------------------------------------------------- */
@media (max-width: 700px) {
  .archive-header,
  .page-hero,
  .cat-hero,
  .author-hero,
  .training-hero,
  .error-hero {
    min-height: clamp(320px, 46vh, 420px);
    padding-block: calc(var(--hdr-h) + var(--sp-4)) var(--sp-4);
  }
}

/* شاشة قصيرة وعريضة (حاسوب محمول صغير): لا نملأ الشاشة كلّها */
@media (max-height: 620px) {
  .archive-header,
  .page-hero,
  .cat-hero,
  .author-hero,
  .training-hero,
  .error-hero { min-height: 380px; }
}

/* ═══════════════════════════════════════════════════════════════
   ٤٠ — الشِّعر: البيت سطر
   القصيدة بلا كسر سطر نثرٌ رديء. المتن يُخزَّن بأسطر، فيجب أن
   تُعرض بها. pre-line يحفظ السطر ويطوي المسافات الزائدة.
   ═══════════════════════════════════════════════════════════════ */

.poem-brief__line,
.poem-card__opening {
  white-space: pre-line;
  text-wrap: pretty;
}

/* البيت الطويل يُلفّ بإزاحة، فيُقرأ اللفّ امتداداً لا بيتاً جديداً */
.poem-card__opening {
  padding-inline-start: var(--sp-2);
  text-indent: 0;
}

/* بطاقات القصائد متساوية الارتفاع في الصفّ — القصيدة القصيرة
   لا تترك فجوة تُقرأ خطأً */
.poem-grid { align-items: start; }

/* ═══════════════════════════════════════════════════════════════
   ٤١ — رأس البودكاست يلحق بالبقيّة
   ---------------------------------------------------------------
   القسم ٣٩ وحّد رؤوس الموقع، لكن رأس البودكاست بُني بفئات خاصّة
   (‎pod-hero‎ وطبقتَي ‎-bg‎ و‎-overlay‎) فلم يشمله التوحيد، وبقي
   وحده على الطريقة القديمة: تعتيم زيتوني ‎.82→.94‎ فوق صورة
   مخفوضة التشبّع ‎.72‎. أي غسلتان فوق بعضهما — فالصورة تكاد تختفي.

   نُطبّق عليه المعادلة نفسها المقيسة في ٣٩: داكن ‎#1F1F1F‎ متدرّج
   بدل الزيتوني المسطّح، وبلا خفض تشبّع.
   ═══════════════════════════════════════════════════════════════ */

.pod-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 60vh, 660px);
  background-color: var(--dark);
}

/* الصورة بنبرتها — الغسل يأتي من الطبقة التي فوقها، لا منها */
.pod-hero-bg { filter: none; }

.pod-hero-overlay {
  background:
    linear-gradient(to top,
      rgba(31, 31, 31, .90) 0,
      rgba(31, 31, 31, .74) 210px,
      rgba(31, 31, 31, 0)   400px),
    linear-gradient(to bottom,
      rgba(31, 31, 31, .08) 0%,
      rgba(31, 31, 31, .34) 100%);
}

/* الموجة الصوتيّة زخرفة، فلا تزاحم النصّ على الوضوح */
.pod-hero .pod-wave,
.pod-hero-wave { opacity: .38; }

@media (max-width: 767px) {
  .pod-hero { min-height: 380px; }
}

/*
 * نصّ رأس البودكاست: القسم ٣٩ يمنح كل عناوين الرؤوس ظلّاً واقياً،
 * لكن فئات البودكاست خاصّة فلم تدخل القائمة. والقياس أظهر الأثر:
 * سطر الشرح على صورة الدرعيّة نزل إلى \u200E1.23:1\u200E عند المئين التسعين —
 * أي أنّ عُشر ما يلامسه من خلفيّة بلون النصّ تقريباً.
 */
.pod-hero-title,
.pod-hero-desc,
.pod-hero .pod-eyebrow,
.pod-hero-meta,
.pod-count {
  text-shadow: 0 1px 12px rgba(31, 31, 31, .55);
}

/*
 * والتدرّج يرتفع أعلى ممّا في القسم ٣٩: الموجة الصوتيّة تحتلّ
 * الشريط السفلي، فيجلس النصّ أعلى من موضعه في بقيّة الرؤوس —
 * فوق منطقة كان التدرّج قد تلاشى فيها.
 */
.pod-hero-overlay {
  background:
    linear-gradient(to top,
      rgba(31, 31, 31, .90) 0,
      rgba(31, 31, 31, .78) 340px,
      rgba(31, 31, 31, 0)   580px),
    linear-gradient(to bottom,
      rgba(31, 31, 31, .10) 0%,
      rgba(31, 31, 31, .38) 100%);
}

/*
 * مصغّرة «ذات صلة»: أرضيّة زيتونيّة لما لا صورة له، تحتها الصورة
 * إن وُجدت. القالب كان يرسم التدرّج ثابتاً فوق الجميع.
 */
.related-img {
  background-image: linear-gradient(135deg, var(--olive), var(--olive-dk));
  background-size: cover;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   ٤٢ — المحتوى غير المترجَم داخل صفحة إنجليزيّة
   ---------------------------------------------------------------
   فقرة عربيّة ترث \u200Edir="ltr"\u200E من \u200E<html>\u200E فتقفز فواصلها إلى أوّل
   السطر. الوسم في inc/translate.php يُصلح الاتّجاه، وهذا يُصلح
   المظهر: النصّ العربيّ يستعيد خطّه ومقاسه، والإشارة تُقرأ
   إشارةً لا عنواناً.
   ═══════════════════════════════════════════════════════════════ */

.anthro-untranslated {
  margin: 0 0 var(--sp-4);
  padding: 10px 14px;
  border-inline-start: 3px solid var(--copper);
  border-radius: var(--r-sm);
  background: rgba(196, 122, 68, .07);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--olive-text);
}

.anthro-ar-block {
  font-family: var(--font-ar, inherit);
  text-align: right;
}

/* الاتّجاه يعود للعربيّة داخل الكتلة، بما فيها القوائم والاقتباس */
.anthro-ar-block :is(p, h2, h3, h4, ul, ol, li, blockquote, figcaption) {
  direction: rtl;
  text-align: right;
}

.anthro-ar-block blockquote {
  border-inline-start: 3px solid var(--sand-md);
  border-inline-end: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ٤٣ — تعليق عربيّ داخل صفحة إنجليزيّة
   ---------------------------------------------------------------
   تعليق القارئ لا يُترجَم — ترجمة كلام أحدٍ نيابةً عنه تزوير.
   لكنّه بلا وسم يرث \u200Edir="ltr"\u200E من الصفحة، فتقفز فواصله إلى أوّل
   السطر ويصير رديء القراءة حتى لقارئه. الوسم في inc/translate.php
   يُصلح الاتّجاه، وهذا يُصلح المحاذاة.
   ═══════════════════════════════════════════════════════════════ */

.comment--ar .comment-content,
.comment--ar .comment-text,
.comment--ar .comment-body p {
  direction: rtl;
  text-align: right;
}

/* الاسم يبقى في موضعه من التخطيط، ويستقيم ترتيب حروفه وحده */
.comment--ar .comment-author bdi { unicode-bidi: isolate; }

/* ═══════════════════════════════════════════════════════════════
   ٤٤ — رؤوس الجوّال: النصّ يملأ الرأس، فالتعتيم يجب أن يملأه
   ---------------------------------------------------------------
   تدرّج القسم ٣٩ مربوط بأسفل الرأس، لأنّ النصّ على سطح المكتب
   يجلس هناك. وعلى الجوّال ينقلب الأمر: الرأس يقصر والنصّ يتمدّد
   فيملؤه كلّه — فيقع المسار والعنوان فوق منطقة كان التدرّج قد
   تلاشى فيها.

   القياس على صفحة الدليل بعرض ٣٩٠: المسار ‎1.20:1‎ والعنوان
   ‎2.07:1‎. أي أنّ العنوان يُقرأ بصعوبة والمسار لا يُقرأ.

   والكثافة هنا محسوبة لا مُقدَّرة: فوق سماء بيضاء خالصة —
   وهي أسوأ ما يمكن أن يرفعه المحرّر — يعطي ‎.66‎ نحو ‎5.2:1‎.
   فالضمان لأي صورة قادمة، لا لهذه وحدها.

   وتبقى الصورة مقروءة: ‎.66‎ تُخفّف التفاصيل ولا تمحوها، وعلى
   شاشة ٣٩٠ بكسل لا يُدرَك من التفاصيل ما يُخسر.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  .archive-header::after,
  .page-hero::after,
  .cat-hero::after,
  .author-hero::after,
  .training-hero::after,
  .error-hero::after {
    background: linear-gradient(
      to top,
      rgba(31, 31, 31, .92) 0%,
      rgba(31, 31, 31, .80) 45%,
      rgba(31, 31, 31, .66) 100%
    );
  }

  /* البودكاست له طبقة خاصّة (القسم ٤١) */
  .pod-hero-overlay {
    background: linear-gradient(
      to top,
      rgba(31, 31, 31, .92) 0%,
      rgba(31, 31, 31, .80) 45%,
      rgba(31, 31, 31, .66) 100%
    );
  }

  /* رأس المقال المفرد */
  .article-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(31, 31, 31, .66) 0%,
      rgba(31, 31, 31, .78) 45%,
      rgba(31, 31, 31, .92) 100%
    );
  }

  /*
   * والمسار أضعف ما في الرأس: خطّ رفيع بحجم صغير. يأخذ ظلّاً
   * أقوى من الظلّ العامّ — شبكة أمان ثانية تحت التعتيم.
   */
  .archive-breadcrumb,
  .cat-bc,
  .breadcrumb {
    text-shadow: 0 1px 10px rgba(31, 31, 31, .85);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ٤٥ — رابط التخطّي
   ---------------------------------------------------------------
   مخفيّ حتى يصله التركيز، ثمّ يظهر في أعلى الصفحة. لا يُزاح
   خارج الشاشة بـ ‎display:none‎ لأنّ ذلك يُخرجه من ترتيب التركيز
   فيصير بلا وظيفة.
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(50%);
  z-index: 2000;

  padding: 12px 24px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--olive-dk);
  color: var(--cream);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(31, 31, 31, .3);
  transition: top .18s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--copper);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}