@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════
   النهار الفلسطينية — ستايل البيت (نفس معمار تريو هب · منجز · GO11)
   شريط عائم زجاجي · eyebrow بنقطة · عنوان ضخم بتظليل · بطاقات كحلية
   بوسم برتقالي · زوايا كبيرة · reveal عند التمرير · توهّج يتبع الماوس
   ══════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f3efe8;
  --paper-2:    #ffffff;
  --ink:        #14202e;
  --ink-2:      #35404e;
  --muted:      #6a7280;
  --faint:      #9aa3ae;
  --line:       rgba(20, 32, 46, .10);
  --line-2:     #d8dce2;

  --accent:      #f4622a;         /* برتقالي الشعار — التعبئة والحدود */
  --accent-ink:  #b8410f;         /* نفس الدرجة معتمة — للنصوص الصغيرة */
  --accent-soft: #ffe2d4;         /* تظليل الكلمة المميّزة وخلفيات الوسوم */
  --navy:        #1b3a6b;         /* كحلي الشعار — الأسطح الداكنة */
  --navy-deep:   #12294d;
  --gold:        #d4a537;         /* ذهبي الشعار — التأكيد الأعلى */
  --gold-soft:   #f7ecd0;
  --green:       #1faa6e;
  --live:        #e5342a;

  --display: 'Cairo', system-ui, sans-serif;
  --body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
  --num:     'Rubik', system-ui, sans-serif;   /* أرقام لاتينية — لا يُستعمل على نص عربي */

  --glass-bg: rgba(255, 255, 255, .46);
  --glass-bd: rgba(255, 255, 255, .74);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.92),
              inset 0 -10px 26px rgba(255,255,255,.22),
              0 26px 60px rgba(27, 58, 107, .13),
              0 6px 16px rgba(0,0,0,.04);

  --ease: cubic-bezier(.2, .8, .3, 1);
  --pop:  cubic-bezier(.22, 1, .36, 1);   /* تباطؤ أسّي، لا ارتداد */

  --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
  --cw: 1240px;
  --r:   .8rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* غسلة اللون خلف الصفحة — أربع تدرّجات شعاعية بألوان الهوية */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 88% -6%,  rgba(244, 98, 42, .16), transparent 60%),
    radial-gradient(52vw 46vh at 4% 8%,    rgba(27, 58, 107, .12), transparent 62%),
    radial-gradient(46vw 40vh at 78% 62%,  rgba(212, 165, 55, .13), transparent 64%),
    radial-gradient(50vw 44vh at 12% 92%,  rgba(244, 98, 42, .10), transparent 62%);
}

/* لا letter-spacing على العربية: الموجب يفصل الحروف الموصولة والسالب يجعلها تتراكب */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  text-align: start;
  /* pretty لا balance: الأخير يوزّع الأسطر بالتساوي فيترك العنوان العربي
     الطويل متعرّج الحافة؛ pretty يعالج السطر اليتيم فقط. */
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
time, .num { font-family: var(--num); font-variant-numeric: tabular-nums; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--accent); border: 3px solid var(--paper); border-radius: 99px;
}

.wrap { max-width: var(--cw); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; inset-inline-start: 50%; top: -120px; transform: translateX(50%);
  background: var(--accent); color: #fff; padding: .7rem 1.4rem;
  border-radius: 0 0 var(--r) var(--r); z-index: 999; transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-sh);
}

/* ── الشريط العائم ──────────────────────────────────────────── */
.navwrap { position: sticky; top: 0; z-index: 90; padding: 1rem var(--gutter) 0; }

#hdr {
  max-width: var(--cw); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem .7rem 1.15rem;
  border-radius: var(--r-xl);
  transform-origin: center top;
  /* لا نحرّك padding: يسبب إعادة تخطيط في كل إطار. الحجم يتغيّر
     عبر transform في الجافاسكربت، وهو تركيب لا تخطيط. */
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              transform .35s var(--ease);
}

.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand svg { flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--navy); }
.brand-txt span { font-size: .68rem; color: var(--accent-ink); font-weight: 600; margin-top: .2rem; }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.nav a {
  padding: .5rem .85rem; border-radius: 99px; font-size: .95rem; font-weight: 500;
  color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--paper-2); color: var(--navy); font-weight: 700; }

.navtools { display: flex; align-items: center; gap: .5rem; flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.15rem; border-radius: 99px;
  font-family: var(--body); font-size: .92rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--pop), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(27,58,107,.6); }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn.ghost:hover { background: var(--paper-2); border-color: var(--accent); color: var(--accent-ink); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(-3px); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }

/* ── الشريط على الجوال ──────────────────────────────────────
   القائمة الأفقية كانت تفيض خارج القبّة وتقصّ الأقسام، والزرّ
   الهامبرغر كان مخفياً دائماً فما في طريقة توصل للباقي. */
@media (max-width: 900px) {
  #hdr { gap: .5rem; padding: .6rem .75rem; }
  .burger { display: block; }
  .navtools .btn { display: none; }
  /* القائمة أُبعدت للطرف المقابل للشعار: كانت ملتصقة فيه لأن .nav صار
     مطلقاً فخرج من التدفّق ولم يبقَ ما يفصل الطرفين. */
  .navtools { margin-inline-start: auto; }
  .brand-txt b { font-size: 1.15rem; }

  .nav {
    position: absolute; inset-inline: 0; top: calc(100% + .5rem);
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: .5rem;
    box-shadow: 0 18px 40px -14px rgba(27,58,107,.28);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .3s var(--ease), opacity .2s var(--ease), visibility .2s;
  }
  .nav.open { max-height: 70vh; overflow-y: auto; opacity: 1; visibility: visible; }
  .nav a { padding: .7rem .9rem; border-radius: .7rem; font-size: 1rem; }
  #hdr { position: relative; }

  /* الزرّ يصير علامة × وهي مفتوحة */
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ── شريط الأخبار المتحرك ─────────────────────────────────────
   موضعه تحت القبّة لا فوقها: أول ما يقرأه الزائر خبر اليوم،
   لا سطر عناوين متحركة يسبق المحتوى ويزاحمه. */
.tickerwrap { padding-inline: var(--gutter); margin-block: clamp(1.4rem, 3vw, 2.4rem); }
.ticker {
  max-width: var(--cw); margin-inline: auto;
  display: flex; align-items: center; gap: .9rem;
  border-radius: 99px; padding: .45rem .55rem; overflow: hidden;
}
.ticker-tag {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .85rem;
  padding: .38rem .95rem; border-radius: 99px; white-space: nowrap;
}
.ticker-tag .dot { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* حاوية قاصّة — تمنع العناوين المتحركة من المرور تحت وسم «آخر الأخبار» */
.ticker-view { flex: 1; overflow: hidden; min-width: 0; }
.ticker-track { display: flex; gap: 2.2rem; white-space: nowrap; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
/* في RTL المحتوى يفيض إلى اليسار، فالتمرير يكون نحو اليمين (+) لا نحو اليسار */
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(50%) } }
.ticker-track a { font-size: .9rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: .5rem; }
.ticker-track a:hover { color: var(--accent-ink); }
.ticker-track .sep { width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent); flex: none; }

/* ── ترويسة القسم ───────────────────────────────────────────── */
/* إيقاع واحد لكل الأقسام: مسافة متساوية فوق وتحت.
   كانت 73px فوق و0 تحت، فبدت الأقسام ملتصقة بما تحتها ومنفصلة عمّا فوقها. */
.sec { padding-block: clamp(2rem, 4.5vw, 3.4rem); }
.sec--first { padding-top: clamp(1.4rem, 3vw, 2.2rem); }
/* الصفحة كتلة واحدة متصلة — لا فواصل ولا خلفيات متناوبة بين الأقسام */
.sec--sunk { background: none; border: 0; margin: 0; padding-bottom: clamp(2rem, 4.5vw, 3.4rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .95rem; border-radius: 99px;
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
  transition: transform .25s var(--pop);
}
.eyebrow:hover { transform: translateY(-2px) scale(1.02); }
.eyebrow .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin: .9rem 0 1.6rem;
}
.sec-title { font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.22; }
/* تمييز الكلمة: باللون وحده.
   جُرّب التدرّج اللوني فوقع الشريط تحت الكلمة (نزلات العربية عميقة)،
   ثم اللوح المحشو فقرأ كزر لا كتشديد. اللون لا يمكن أن يختلّ محاذاةً
   مع أي خط أو لغة، وهو التشديد المعتاد في التايبوغرافي العربي الرصين. */
.sec-title .hl { color: var(--accent); }
.more { font-size: .93rem; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: .4rem; }
.more:hover { color: var(--accent); }
.more .arr { transition: transform .2s var(--ease); }
.more:hover .arr { transform: translateX(-4px); }

/* ── بطاقات الأخبار ─────────────────────────────────────────── */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 24vw, 19rem), 1fr)); }

.card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -20px rgba(27,58,107,.32); }

.card-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .3s var(--ease); z-index: 0;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(244,98,42,.14), transparent 65%);
}
.card:hover .card-glow { opacity: 1; }

.card-top {
  background: var(--navy); color: #fff;
  padding: 1.4rem 1.3rem 1.5rem;
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; gap: .7rem;
}
.card-tag {
  align-self: flex-start;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .74rem;
  padding: .28rem .8rem; border-radius: 99px;
}
.card-top h3 { font-size: 1.12rem; line-height: 1.5; color: #fff; }
.card-top p {
  margin: 0; font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.72);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  padding: .85rem 1.3rem; font-size: .78rem; color: var(--muted);
}
.card-foot .sec-pill { color: var(--navy); font-weight: 700; }

/* سطر البيانات المشترك (قسم · وقت · مؤشر التغطية).
   قاعدة عامة مقصودة: تُستعمل في البطاقة العريضة وصفوف القوائم معاً،
   وغيابها يجعل العناصر تلتصق بلا مسافات. */
.meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .85rem;
  font-size: .76rem; color: var(--muted);
}
.meta .sec-pill { color: var(--navy); font-weight: 700; }
.meta time { font-variant-numeric: tabular-nums; }

/* ── الصور ──────────────────────────────────────────────────
   إطار مربّع مثبَّت على أعلى الصورة: ٦٠٪ من صور الأخبار طولية و٤٠٪ عرضية،
   ولا نسبة واحدة ترضي الاثنين، والتثبيت على الأعلى يمنع قصّ الرؤوس. */
.media, .mini {
  display: block; position: relative; overflow: hidden;
  background: var(--navy-deep);
}
.media img, .mini img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 0%;
  transition: transform .6s var(--ease);
}
.media { aspect-ratio: 16 / 9; }
.card-media:hover .media img { transform: scale(1.04); }

.media .credit {
  position: absolute; inset-inline-end: .5rem; bottom: .45rem;
  font-size: .68rem; color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.42); padding: .12rem .5rem; border-radius: 99px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mini .credit { display: none; }

/* وسم القسم فوق الصورة */
.card-media { position: relative; display: block; }
.card-media .card-tag, .front-media .card-tag {
  position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 3;
}
.card-tag {
  align-self: flex-start; background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .74rem;
  padding: .28rem .8rem; border-radius: 99px;
}

/* البطاقة صارت: صورة فوق ← نص ← تذييل */
.card-top { padding: 1rem 1.15rem 1.1rem; gap: .5rem; background: transparent; color: inherit; flex: 1; }
.card-top h3 { color: var(--ink); font-size: 1.05rem; }
.card-top p { color: var(--muted); }

/* صف القائمة: مصغّرة + نص */

/* صورة صفحة الخبر */
.art-media { margin: 1.6rem 0 0; }
.art-media .media { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }

@media (max-width: 640px) {
  .mini { width: 60px; height: 60px; }
}

/* ── قوائم بعمودين ─────────────────────────────────────────
   الصف الممتد بعرض الصفحة يترك فراغاً كبيراً لأن العنوان أقصر من السطر. */
@media (min-width: 900px) {
  .list--2 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    column-gap: 2.2rem;
  }
  .list--2 > li { border-top: 1px solid var(--line); }
  .list--2 > li:nth-child(2) { border-top: 1px solid var(--line); }
  .list--2 > li:first-child, .list--2 > li:nth-child(2) { border-top: 0; }
}

/* النسبة لا تُطبع فوق الصورة — كانت تزاحم العنوان وتشوّش البطاقة.
   ترخيص المشاع الإبداعي يوجب ذكر المصوّر، فيُذكر في تعليق أسفل صورة
   المقال وفي صفحة /credits/ الجامعة، لا فوق كل مصغّرة. */
.media .credit, .mini .credit { display: none; }

/* ── صدر الصفحة: بطاقة عريضة للرئيسي ثم ثلاث بطاقات ──────── */
.v3-lead {
  display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}
@media (min-width: 900px) { .v3-lead { grid-template-columns: 1.05fr 1fr; align-items: stretch; } }
.v3-media { position: relative; display: block; }
.v3-media .media { aspect-ratio: 16 / 10; height: 100%; }
@media (min-width: 900px) { .v3-media .media { position: absolute; inset: 0; aspect-ratio: auto; } }
.v3-media .card-tag { position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 2; }
.v3-text { padding: clamp(1.2rem, 2.6vw, 2.2rem); display: grid; gap: .7rem; align-content: center; }
.v3-text h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.34; }
.v3-text h2 a:hover { color: var(--accent-ink); }
.v3-text .dek { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.8; }

/* ── صفوف القوائم ───────────────────────────────────────────
   المكوّن كامل هنا: فقدان list-style وحده كان يُظهر نقاط القائمة،
   وفقدان .cov كان يُلصق أرقام المؤشر بالنص. */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line); }
.list a {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .95rem;
  align-items: start; padding-block: .95rem;
}
.list .mini {
  grid-column: 2; grid-row: span 2;
  flex: none; width: 86px; height: 64px; border-radius: .6rem; overflow: hidden;
}
.list .row-body { grid-column: 1; min-width: 0; display: grid; gap: .45rem; }
.list h3 { font-size: 1rem; line-height: 1.5; font-weight: 700; }
.list a:hover h3 { color: var(--accent-ink); }

@media (min-width: 900px) {
  /* عمودان ثابتان لا auto-fit: الأخير كان يقفز إلى ثلاثة أعمدة
     على الشاشات العريضة فتتبعثر الصفوف ويلتفّ سطر البيانات. */
  .list--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.6rem); }
  .list--2 > li { border-top: 1px solid var(--line); }
  .list--2 > li:first-child, .list--2 > li:nth-child(2) { border-top: 0; }
}
@media (max-width: 520px) {
  .list .mini { width: 68px; height: 52px; }
  .list h3 { font-size: .95rem; }
}

/* ── مؤشر التغطية ───────────────────────────────────────────
   ميزة الموقع الوحيدة التي لا يملكها المنافسون. */
.cov {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  padding: .16rem .55rem; border-radius: 99px;
}
.cov i { display: inline-flex; gap: 2px; line-height: 0; }
.cov-1 { background: rgba(20,32,46,.06); color: var(--muted); }
.cov-2 { background: var(--accent-soft); color: var(--accent-ink); }
.cov-3 { background: var(--gold-soft); color: #8a6a18; }
.card-foot .cov-2, .v3-text .cov-2 { background: var(--accent); color: #fff; }
.card-foot .cov-3, .v3-text .cov-3 { background: var(--gold); color: var(--navy-deep); }

/* ══════════════════════════════════════════════════════════════
   المكوّنات المفقودة — أُعيدت كاملة بعد أن أزالتها تعديلات متتابعة
   على الملف. مُجمَّعة هنا عمداً ليسهل التحقق من اكتمالها.
   ══════════════════════════════════════════════════════════════ */

/* ── صفحة المقال ────────────────────────────────────────────── */
.article { max-width: 44rem; margin-inline: auto; }
.crumbs {
  display: flex; flex-wrap: wrap; gap: .3rem .45rem;
  font-size: .82rem; color: var(--muted); margin-bottom: 1rem;
}
.crumbs a { color: var(--accent-ink); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { opacity: .45; }

.art-head { padding-top: clamp(.5rem, 2vw, 1.2rem); }
.art-head h1 { font-size: clamp(1.65rem, 4.2vw, 2.6rem); line-height: 1.28; }
.art-head .dek { margin: 1.05rem 0 0; font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); }
.byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.3rem;
  margin-top: 1.3rem; padding: .9rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .84rem; color: var(--muted);
}
.byline strong { color: var(--ink); font-weight: 700; }
.byline .by {
  color: var(--ink); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--accent-soft); padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
.byline .by:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ── فريق التحرير ── */
.article > .note {
  margin: 0; padding: 1.05rem 1.2rem;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: 12px; background: var(--gold-soft);
  font-size: .9rem; line-height: 1.8; color: var(--ink-2); text-align: start;
}
.mgrid {
  display: grid; gap: 1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.mcard {
  display: flex; align-items: center; gap: .95rem;
  padding: 1.05rem 1.15rem; border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper-2); text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mcard:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(27, 58, 107, .09);
}
.mavatar {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
}
.mcard:hover .mavatar { background: var(--accent); }
.mtext { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.mtext strong { font-size: 1rem; color: var(--ink); }
.mtext span { font-size: .82rem; color: var(--muted); line-height: 1.55; }

.prose { font-size: 1.05rem; line-height: 1.85; text-align: start; }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 { font-size: 1.42rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.14rem; margin-top: 1.9rem; }
.prose h2 + p, .prose h3 + p { margin-top: .8rem; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li + li { margin-top: .5rem; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose blockquote {
  margin-inline: 0; padding: 1.2rem 1.4rem 1.2rem 1.4rem;
  border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line);
  font-size: 1.06rem; position: relative;
}
.prose blockquote::before {
  content: "»"; position: absolute; top: .1rem; inset-inline-start: .7rem;
  font-family: var(--display); font-size: 2.4rem; line-height: 1;
  color: var(--accent); opacity: .22;
}
.prose blockquote p { margin: 0; }
.prose mark { background: var(--gold-soft); padding: 0 .2em; border-radius: 3px; }

/* ── ترويسة الصفحات الثابتة والأقسام ───────────────────────── */
.page-hero { padding: clamp(1.6rem, 4vw, 2.8rem) 0 0; }
/* الترويسة تشترك مع المتن في العمود نفسه، وإلا نتجت حافتان مختلفتان */
.page-hero .wrap > * { max-width: 44rem; margin-inline: auto; }
.page-hero .subnav { max-width: none; }
.page-hero h1 { font-size: clamp(1.85rem, 4.6vw, 2.9rem); margin-top: .7rem; }
.page-hero p { margin: .85rem 0 0; color: var(--ink-2); font-size: 1.05rem; }

.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.subnav a {
  padding: .4rem .95rem; border-radius: 99px; font-size: .87rem;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.subnav a:hover { border-color: var(--accent); color: var(--accent-ink); }
.subnav a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }

/* ── الذيل ──────────────────────────────────────────────────── */
.foot { margin-top: clamp(2.6rem, 6vw, 4.5rem); background: var(--navy-deep); color: rgba(255,255,255,.72); }
.foot .stitch { height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold) 60%, var(--accent)); }

.f-in {
  padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 720px)  { .f-in { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .f-in { grid-template-columns: 1.8fr 1fr 1fr 1.1fr; } }

.f-brand { display: grid; gap: .9rem; align-content: start; }
.f-brand .brand { gap: .55rem; }
.f-brand .brand-txt b { color: #fff; font-size: 1.25rem; }
.f-brand .brand-txt span { color: var(--gold); }
.f-brand p { margin: 0; font-size: .9rem; line-height: 1.85; max-width: 42ch; }

.f-in h2 {
  font-size: .82rem; color: var(--gold); margin-bottom: .95rem;
  font-family: var(--body); font-weight: 700;
}
.f-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.f-in a { font-size: .9rem; transition: color .18s var(--ease); }
.f-in a:hover { color: #fff; }

.f-contact { display: grid; gap: .55rem; align-content: start; }
.f-contact a { font-family: var(--num); font-size: .92rem; direction: ltr; text-align: start; }
.f-contact .note { font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.55); margin: .4rem 0 0; }

.f-bot {
  padding: 1.1rem 0 1.8rem; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  justify-content: space-between; align-items: center; font-size: .8rem;
}
.f-bot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.f-bot a:hover { color: #fff; }

/* ── الفوتر على الجوال ──────────────────────────────────────
   بعمود واحد كان يطلع 1159px على شاشة 812px: جدار روابط أطول من
   الشاشة نفسها. عمودان يقصّوه للنصف ويخلّوه يُقرأ بنظرة واحدة. */
@media (max-width: 719px) {
  /* عمودان: «الأقسام» و«المؤسسة» جنب بعض، والتعريف والتواصل بعرض كامل.
     بعمود واحد كان الفوتر 1159px على شاشة 812px — أطول من الشاشة نفسها. */
  .f-in { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.2rem; padding-top: 1.9rem; }
  .f-brand, .f-contact { grid-column: 1 / -1; }
  .f-in ul { gap: .45rem; }
  .f-in h2 { margin-bottom: .55rem; font-size: .78rem; }
  .f-in a { font-size: .87rem; }
  .f-brand p { font-size: .85rem; line-height: 1.75; }
  .f-contact { gap: .4rem; }
  .f-bot { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ═══ قسم شؤون إسرائيلية — لوح رصد داكن ═══════════════════════
   لا يقرأ مثل بقية الأقسام عن قصد: القسم متابعة متسلسلة لما ينشره
   الطرف الآخر، فالترقيم والخلفية الداكنة يفصلانه بصرياً عن النهار. */
.isr-hero {
  background: var(--navy-deep); color: #fff;
  padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.isr-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 700; color: var(--gold);
  padding: .3rem .8rem; border: 1px solid rgba(212,165,55,.42); border-radius: 99px;
}
.isr-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px rgba(229,52,42,.22);
}
.isr-hero h1 {
  color: #fff; font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin: .75rem 0 .5rem;
}
.isr-hero p { color: rgba(255,255,255,.7); max-width: 52ch; font-size: .96rem; line-height: 1.8; }
.isr-hero .subnav { margin-top: 1.2rem; }
.isr-hero .subnav a { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.2); }
.isr-hero .subnav a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.isr-num {
  font-family: var(--display); font-weight: 900; font-size: 1.05rem;
  color: var(--accent); line-height: 1; flex: none;
}
.isr-num.lead { font-size: 1.5rem; display: block; margin-bottom: .5rem; }

.isr-lead {
  display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--navy); border: 1px solid rgba(255,255,255,.09);
  margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}
@media (min-width: 900px) { .isr-lead { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.isr-lead-media { position: relative; display: block; }
.isr-lead-media .media { aspect-ratio: 16 / 10; height: 100%; }
@media (min-width: 900px) { .isr-lead-media .media { position: absolute; inset: 0; aspect-ratio: auto; } }
.isr-lead-text { padding: clamp(1.3rem, 2.8vw, 2.3rem); align-content: center; display: grid; }
.isr-lead-text h2 { font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.38; color: #fff; }
.isr-lead-text h2 a { color: inherit; }
.isr-lead-text h2 a:hover { color: var(--gold); }
.isr-lead-text p { color: rgba(255,255,255,.66); margin: .7rem 0 0; line-height: 1.8; font-size: .95rem; }
.isr-lead-text time { display: block; margin-top: .9rem; font-size: .8rem; color: rgba(255,255,255,.45); }

.isr-feed { list-style: none; margin: 0; padding: 0; }
.isr-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.isr-row:first-child { border-top: 0; }
.isr-link { display: block; min-width: 0; }
.isr-link h3 { font-size: 1.06rem; line-height: 1.55; font-weight: 700; }
.isr-link:hover h3 { color: var(--accent-ink); }
.isr-link p { margin: .35rem 0 0; color: var(--muted); font-size: .89rem; line-height: 1.75; }
.isr-link time { display: block; margin-top: .45rem; font-size: .78rem; color: var(--faint); }

/* ═══ قسم ترجمات — قصاصات صحف ════════════════════════════════
   المادة منقولة عن صحافة أجنبية، فالشكل قصاصة مقصوصة: شريط لوني
   أعلى القصاصة ووسم يذكّر القارئ أن الأصل ليس عربياً. */
.tr-hero { padding: clamp(1.6rem, 4vw, 2.8rem) 0 0; }
.tr-hero .wrap > * { max-width: 46rem; margin-inline: auto; }
.tr-hero .subnav { max-width: none; }
.tr-hero h1 { font-size: clamp(1.85rem, 4.6vw, 2.9rem); margin-top: .7rem; }
.tr-hero p { color: var(--ink-2); line-height: 1.85; margin-top: .6rem; }

.tr-tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: 0;
  color: var(--navy); background: var(--gold-soft);
  border: 1px solid rgba(212,165,55,.5);
  padding: .2rem .6rem; border-radius: 4px;
}

.tr-feature {
  display: grid; gap: 0; margin: clamp(1.4rem, 3vw, 2.2rem) 0;
  background: var(--paper-2); border: 1px solid var(--line);
  border-top: 4px solid var(--gold); border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
@media (min-width: 900px) { .tr-feature { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.tr-feature-media { position: relative; display: block; }
.tr-feature-media .media { aspect-ratio: 16 / 10; height: 100%; }
@media (min-width: 900px) { .tr-feature-media .media { position: absolute; inset: 0; aspect-ratio: auto; } }
.tr-feature-text { padding: clamp(1.3rem, 2.8vw, 2.2rem); display: grid; align-content: center; gap: .65rem; justify-items: start; }
.tr-feature-text h2 { font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.38; }
.tr-feature-text h2 a:hover { color: var(--accent-ink); }
.tr-feature-text p { color: var(--ink-2); line-height: 1.8; margin: 0; }
.tr-feature-text time { font-size: .8rem; color: var(--faint); }

.tr-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tr-clip {
  background: var(--paper-2); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 0 0 12px 12px;
  padding: 1.05rem 1.15rem 1.2rem;
  display: grid; gap: .55rem; justify-items: start; align-content: start;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tr-clip:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(27,58,107,.3); }
.tr-clip h3 { font-size: 1.02rem; line-height: 1.55; font-weight: 700; }
.tr-clip a:hover h3 { color: var(--accent-ink); }
.tr-clip p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.75; }
.tr-clip time { font-size: .77rem; color: var(--faint); }