/* فلسطين برس — ورقة أنماط واحدة بتوكنات.
   اللونان مقيسان من ملفّ الشعار لا مختارَين بالعين:
   الأحمر #e70f13 والحبر #232a2e.

   كلّ ما يلي بخصائص منطقية (`inset-inline-*`، `margin-block-*`) لا فيزيائية،
   فأي نسخة LTR لاحقاً تنقلب وحدها بلا ورقة ثانية. */

:root{
  --red:#e70f13;          /* أحمر العلامة — مقيس */
  --red-d:#c00b0f;        /* أغمق للمرور والتركيز */
  --ink:#232a2e;          /* الحبر — مقيس */
  --ink-2:#4a545a;
  --muted:#6f7a80;
  --line:#e4e7e9;
  --line-2:#cfd5d8;
  --paper:#ffffff;
  --wash:#f6f7f8;         /* أرضية بديلة تفصل الأقسام */
  --dark:#171c1f;         /* أغمق من الحبر: الترويسة الجانبية والتذييل */
  --r:14px; --r-s:10px; --r-l:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rail:76px;            /* عرض الشريط الجانبي على سطح المكتب */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Rubik,"Segoe UI",Tahoma,sans-serif;
  font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased}

/* الأرقام لاتينية بعرض ثابت. والخطّ العربي يرسم اللاتينية أضيق فتبدو باهتة
   داخل نصٍّ عربي — `tabular-nums` يسوّي أعمدة التواريخ في القوائم. */
.num,time{font-variant-numeric:tabular-nums;letter-spacing:0}

/* لا `letter-spacing` موجب على العربية أبداً: يفصل الحروف الموصولة فتنكسر
   الكلمة. اللاتينية وحدها تقبله. */
h1,h2,h3,h4,.kicker{letter-spacing:0}
:lang(en){letter-spacing:normal}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.28}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
.pad{padding-block:clamp(38px,4.4vw,64px)}
.wash{background:var(--wash)}

/* رابط التخطّي — أوّل ما يصله من يتنقّل بالمفاتيح */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{inset-inline-start:0}

::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ═══ القشرة: شريط جانبي ثابت + محتوى مزاح ═════════════════════════════ */
/* الشريط على حافّة **البداية** (يمين في العربية) بـ`inset-inline-start`،
   فينقلب وحده في أي نسخة LTR. */
.rail{position:fixed;inset-block:0;inset-inline-start:0;width:var(--rail);
  background:var(--dark);display:flex;flex-direction:column;align-items:center;
  gap:2px;padding-block:18px;z-index:70}
.rail a{display:flex;flex-direction:column;align-items:center;gap:5px;
  width:60px;padding:11px 4px;border-radius:var(--r-s);color:#8e999f;
  font-size:10.5px;font-weight:500;text-align:center;line-height:1.2;
  transition:color .16s var(--ease),background .16s var(--ease)}
.rail a:hover{color:#fff;background:rgba(255,255,255,.07)}
.rail a[aria-current]{color:#fff;background:var(--red)}
.rail .ic{width:21px;height:21px}
.shell{margin-inline-start:var(--rail)}

/* ═══ شريط العاجل ══════════════════════════════════════════════════════ */
.ticker{display:flex;align-items:stretch;background:var(--ink);color:#fff;
  overflow:hidden}
.ticker-l{display:flex;align-items:center;gap:7px;background:var(--red);
  padding-inline:16px;font-size:13px;font-weight:700;flex:none;white-space:nowrap}
.ticker-l .ic-s{width:15px;height:15px}
.ticker-t{overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(to left,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* اللحظة الحركية الوحيدة في الموقع: العناوين تمرّ. الشريط مكرّر مرّتين في
   الترميز ليكون المرور بلا قفزة. `-50%` لأن المحتوى نسختان. */
.ticker-run{display:flex;gap:34px;padding-block:11px;white-space:nowrap;
  width:max-content;animation:run 60s linear infinite}
.ticker-run a{font-size:13.5px;color:#dfe4e6}
.ticker-run a:hover{color:#fff}
.ticker:hover .ticker-run{animation-play-state:paused}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker-run{animation:none}
  .ticker-t{overflow-x:auto}
}

/* ═══ الترويسة ═════════════════════════════════════════════════════════ */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px);border-block-end:1px solid var(--line)}
.top-in{max-width:1180px;margin-inline:auto;padding-inline:24px;
  display:flex;align-items:center;gap:22px;min-height:74px}
.brand img{height:38px;width:auto}
.nav{display:flex;gap:3px;margin-inline-start:auto;font-size:14.5px;
  font-weight:500}
.nav a{padding:8px 11px;border-radius:8px;color:var(--ink-2);
  transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--wash)}
.nav a[aria-current]{color:var(--red);font-weight:700}
.top-r{display:flex;gap:6px;align-items:center}
.ib{display:inline-flex;align-items:center;justify-content:center;width:40px;
  height:40px;border-radius:10px;border:0;background:none;color:var(--ink);
  cursor:pointer;transition:background .15s}
.ib:hover{background:var(--wash)}
.ib .ic{width:21px;height:21px}
.burger{display:none}

/* ═══ الدرج ════════════════════════════════════════════════════════════ */
.drawer{position:fixed;inset:0;z-index:90;background:var(--paper);
  height:100dvh;display:flex;flex-direction:column;padding:0 22px 22px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.drawer[hidden]{display:none}
.drawer.open{opacity:1;transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  min-height:74px;border-block-end:1px solid var(--line);flex:none}
.drawer-top img{height:34px;width:auto}
.drawer-nav{display:flex;flex-direction:column;padding-block:14px;overflow-y:auto}
.drawer-nav a{padding:12px 0;font-size:17px;font-weight:600;
  border-block-end:1px solid var(--line)}
.drawer-nav a[aria-current]{color:var(--red)}
.drawer-pol{display:flex;flex-wrap:wrap;gap:8px 16px;padding-block-start:16px;
  border-block-start:1px solid var(--line);font-size:13.5px;color:var(--muted);
  flex:none}

/* ═══ الصدارة ══════════════════════════════════════════════════════════ */
.hero{padding-block:clamp(22px,2.6vw,34px) 0}
/* `stretch` لا `start`: الطابور الجانبي يمتدّ بارتفاع الصدارة، ورابط
   «كل الأخبار» يُدفع إلى أسفله بـ`margin-block-start:auto` فيقف عند
   حافّتها لا في منتصفها. */
.hero-in{display:grid;grid-template-columns:1.62fr 1fr;gap:26px;
  align-items:stretch}

/* العنوان على **لوح مصمت** لا على تدرّج فوق الصورة: قيست الحالتان، وأسوأ
   بكسل في التدرّج 3.53:1 حتى بتعتيم 85٪ — دون الحدّ. اللوح يعطي ≥9:1. */
.lead{display:block;border-radius:var(--r-l);overflow:hidden;
  background:var(--ink);color:#fff}
.lead-img{aspect-ratio:16/10;overflow:hidden;background:var(--dark)}
.lead-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.lead:hover .lead-img img{transform:scale(1.03)}
.lead-b{padding:22px 24px 24px}
.lead-b h2{font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.3}
.lead-s{margin:10px 0 0;color:#c3cbcf;font-size:15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.lead .meta{margin:14px 0 0;color:#93a0a6}

.hero-side{display:flex;flex-direction:column;gap:2px}
.side-h{font-size:13px;font-weight:700;color:var(--red);
  padding-block-end:10px;border-block-end:2px solid var(--red);margin-block-end:6px}
.lr{display:grid;grid-template-columns:74px 1fr;gap:13px;align-items:center;
  padding-block:13px;border-block-end:1px solid var(--line)}
.lr-t{width:74px;height:74px;border-radius:var(--r-s);overflow:hidden;
  background:var(--wash)}
.lr-t img{width:100%;height:100%;object-fit:cover}
.lr h3{font-size:15px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.lr:hover h3{color:var(--red)}
.side-all{display:inline-flex;align-items:center;gap:7px;
  margin-block-start:auto;padding-block-start:14px;
  font-size:14px;font-weight:600;color:var(--red)}
.side-all .ic{width:17px;height:17px}

/* ═══ ترويسة القسم ═════════════════════════════════════════════════════ */
/* بلا سطرٍ تمهيديّ فوق العنوان: الزخرفة تسرق من العنوان وزنه. العنوان يقف
   بنفسه والشرح تحته. */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-block-end:22px;padding-block-end:14px;
  border-block-end:2px solid var(--ink)}
.sh h2{font-size:clamp(1.2rem,2vw,1.6rem)}
.sh p{margin:5px 0 0;color:var(--muted);font-size:14.5px}
.more{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14px;
  font-weight:600;color:var(--red)}
.more .ic{width:17px;height:17px}
.more:hover{color:var(--red-d)}

/* سطر النسبة — المصدر أوّلاً لأنّ الموقع ناقلٌ لا مصدرٌ أوّل */
.meta{display:flex;align-items:center;gap:9px;margin:8px 0 0;font-size:12.5px;
  color:var(--muted)}

/* موضع الصورة الغائبة — يقول ما ينقص بدل أن يخترع صورة */
.ph{display:grid;place-items:center;width:100%;height:100%;
  background:var(--wash);color:var(--line-2)}
.ic-ph{width:30%;max-width:44px;height:auto}

/* ═══ التخطيط ١: تيّار — صفوف بمصغّرة مربّعة ═══════════════════════════ */
.stream{display:flex;flex-direction:column}
/* مقاسٌ واحد لكلّ الصفوف: صفٌّ أوّل عريض ثم مربّعاتٌ صغيرة كان يُقرأ
   خطأً في الترتيب — العين تظنّ الصغيرَ أقلّ أهميّة لا أحدثَ ورودًا. */
.row{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:center;
  padding-block:16px;border-block-end:1px solid var(--line)}
.row-t{width:230px;height:153px;border-radius:var(--r-s);overflow:hidden;
  background:var(--wash)}
.row-t img{width:100%;height:100%;object-fit:cover}
.row h3{font-size:16.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.row:hover h3{color:var(--red)}
.row-1{padding-block-start:0}
.row-1 h3{font-size:clamp(1.05rem,1.7vw,1.3rem);-webkit-line-clamp:2}
.row-s{margin:8px 0 0;color:var(--muted);font-size:14.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stream .row:last-child{border-block-end:0}

/* ═══ التخطيط ٢: مجلّة — رئيسي + ثانويّان + صفوف ═══════════════════════ */
.mag{display:grid;grid-template-columns:1.5fr 1fr;gap:26px}
.mag-big{grid-row:span 2}
.mag-img{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  background:var(--wash);margin-block-end:14px}
.mag-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.mag-big:hover .mag-img img{transform:scale(1.03)}
.mag-big h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.32}
.mag-big p{margin:9px 0 0;color:var(--muted);font-size:15px}
.mag-side{display:flex;flex-direction:column;gap:4px}
.mini{display:grid;grid-template-columns:88px 1fr;gap:13px;align-items:center;
  padding-block:12px;border-block-end:1px solid var(--line)}
.mini-t{width:88px;height:88px;border-radius:var(--r-s);overflow:hidden;
  background:var(--wash)}
.mini-t img{width:100%;height:100%;object-fit:cover}
.mini h3{font-size:15px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mini:hover h3{color:var(--red)}
.mag-rest{display:flex;flex-direction:column;gap:2px}
.tight{padding-block:11px;border-block-end:1px solid var(--line)}
.tight h3{font-size:15px;line-height:1.5}
.tight:hover h3{color:var(--red)}
.mag-rest .tight:last-child{border-block-end:0}

/* ═══ التخطيط ٣: ملفّ مرقّم بلا صور ════════════════════════════════════ */
/* الترقيم هنا يحمل معلومةً — ترتيب الملفّ — وهو الاستثناء الوحيد لقاعدة
   «لا أرقام أقسام». */
.dossier{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.dos{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-block:18px;
  border-block-end:1px solid var(--line);align-items:start}
.dos-n{font-size:15px;font-weight:800;color:var(--red);padding-block-start:2px}
.dos h3{font-size:17px;line-height:1.44}
.dos p{margin:7px 0 0;color:var(--muted);font-size:14.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dos:hover h3{color:var(--red)}

/* ═══ التخطيط ٤: سجلّ — بيانات ومواقف، الصورة تُضعفها ══════════════════ */
.ledger{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.led{display:grid;grid-template-columns:1fr auto;gap:18px;
  align-items:center;padding:15px 18px;border-block-end:1px solid var(--line);
  transition:background .15s}
.led:last-child{border-block-end:0}
.led:hover{background:var(--wash)}
.led h3{font-size:15.5px;line-height:1.5;font-weight:500}
.led time{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ═══ التخطيط ٥: بطاقات — حين تكون الصورة جزءاً من الخبر ═══════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper);transition:border-color .18s,transform .18s var(--ease)}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-t{aspect-ratio:3/2;background:var(--wash);overflow:hidden}
.card-t img{width:100%;height:100%;object-fit:cover}
.card-b{padding:15px 16px 17px}
.card h3{font-size:16px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ الأكثر قراءة ═════════════════════════════════════════════════════ */
.mr-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.mr{display:grid;grid-template-columns:auto 64px 1fr;gap:14px;align-items:center;
  padding-block:12px;border-block-end:1px solid var(--line-2)}
.mr-t{width:64px;height:64px;border-radius:var(--r-s);overflow:hidden;
  background:var(--wash)}
.mr-t img{width:100%;height:100%;object-fit:cover}
.mr-n{font-size:20px;font-weight:800;color:var(--line-2);min-width:24px}
.mr:hover .mr-n{color:var(--red)}
.mr h3{font-size:15.5px;line-height:1.5;font-weight:500}
.mr:hover h3{color:var(--red)}

/* ═══ شريط المصادر ═════════════════════════════════════════════════════ */
.srcs{background:var(--ink);color:#c9d0d4}
.srcs-in{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.srcs h2{color:#fff;font-size:1.3rem;margin-block-end:8px}
.srcs p{margin:0;font-size:15px}
.srcs a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--red);text-decoration-thickness:2px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{padding:8px 15px;border:1px solid #3a4348;border-radius:999px;
  font-size:13.5px;color:#e2e7e9}

/* ═══ الصفحات الداخلية ═════════════════════════════════════════════════ */
/* ترويسة القسم صفٌّ واحد لا ثلاثة أسطر مكدّسة: العنوان والشرح على حافّة
   البداية، والعدّاد على الحافّة المقابلة. الشكل السابق كان يترك ثلثَي العرض
   بياضاً لأنّ ثلاثة أسطر قصيرة تتراصّ في عمودٍ واحد وسط صفحةٍ عرضها 1180.
   والصفّ يملأ العرض بمعلومةٍ في كلّ طرف بدل أن يملأه بفراغ. */
.ph-head{padding-block:clamp(26px,3vw,38px) clamp(18px,2.2vw,26px);
  border-block-end:1px solid var(--line)}
.ph-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ph-n{margin:0;flex:none;font-size:13px;color:var(--muted);
  padding-block-end:4px}
.ph-head h1{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.15}
.ph-head p{margin:7px 0 0;color:var(--muted);font-size:16.5px;max-width:62ch}
.ph-lede{font-size:19px;line-height:1.7;color:var(--ink);font-weight:500;
  margin-block-end:22px}

/* متن القراءة: 65–72 حرفاً. أوسع من ذلك تتعب العين في العودة إلى بداية
   السطر التالي، وهو أثقل على العربية لتقارب أشكال الحروف. */
.prose{max-width:68ch}
.prose p{font-size:17px;line-height:1.85;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.rules{display:grid;gap:2px;margin:0}
.rules div{padding-block:17px;border-block-end:1px solid var(--line)}
.rules dt{font-size:16px;font-weight:700;margin-block-end:6px}
.rules dd{margin:0;color:var(--ink-2);font-size:16px;line-height:1.8}
.empty{padding:22px;background:var(--wash);border-radius:var(--r);
  color:var(--muted);font-size:15px;margin:0}

/* ═══ صفحة الخبر ═══════════════════════════════════════════════════════ */
.art{padding-block:26px 0}
.crumbs{display:flex;gap:9px;font-size:13px;color:var(--muted);
  margin-block-end:14px}
.crumbs a:hover{color:var(--red)}
.art h1{font-size:clamp(1.6rem,3.3vw,2.5rem);line-height:1.28;max-width:22ch}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-block-start:16px;font-size:13.5px;color:var(--muted)}
.rt{display:inline-flex;align-items:center;gap:9px}
.rt::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--line-2)}
.art-fig{margin:24px 0 0}
.art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-l);background:var(--wash)}
.art-fig .ph{aspect-ratio:16/9;border-radius:var(--r-l)}
/* تعليق الصورة يقول من أين هي — و`bdi` تعزل أي نصٍّ لاتينيّ داخل عربي،
   فبدونها ينقلب ترتيبه. */
.art-fig figcaption{margin-block-start:10px;font-size:13px;color:var(--muted)}
.art-body{max-width:68ch;padding-block:26px 40px}
.art-lede{font-size:19.5px;line-height:1.75;font-weight:500;color:var(--ink)}
.art-body p{font-size:17px;line-height:1.9;color:var(--ink-2)}
/* روابط المتن وحدها — `\.art-body a` كان يصيب الزرّ أيضاً فيلوّن نصّه
   بالأحمر على خلفيةٍ حمراء، فيختفي تماماً وهو موجود. لا يكشفه فحصٌ
   بنيويّ: الترميز سليم والنصّ في مكانه. */
.art-body p a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.art-src{margin-block:28px;padding:20px 22px;background:var(--wash);
  border-radius:var(--r);display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.art-src p{margin:0;font-size:15px;color:var(--ink-2)}
.share{display:flex;align-items:center;gap:10px;font-size:14px;
  color:var(--muted)}
.share a{display:inline-flex;width:38px;height:38px;align-items:center;
  justify-content:center;border-radius:50%;background:var(--wash);
  color:var(--ink-2);transition:background .15s,color .15s}
.share a:hover{background:var(--red);color:#fff}
.share .ic{width:19px;height:19px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  border-radius:999px;background:var(--red);color:#fff;font-size:14.5px;
  font-weight:600;border:1px solid var(--red);white-space:nowrap;
  transition:background .16s,border-color .16s}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn .ic{width:17px;height:17px}
.btn-l{background:none;color:var(--ink);border-color:var(--line-2)}
.btn-l:hover{background:var(--wash);border-color:var(--ink)}

/* ═══ البحث ════════════════════════════════════════════════════════════ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.sform{display:flex;gap:10px;margin-block-end:14px}
.sform input{flex:1;min-width:0;padding:13px 18px;font:inherit;font-size:16px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--paper);
  color:var(--ink)}
.sform input::placeholder{color:var(--muted)}
.sform input:focus{outline:2px solid var(--red);outline-offset:1px;
  border-color:transparent}
.note{color:var(--muted);font-size:14px;margin-block-end:26px}

/* ═══ 404 ══════════════════════════════════════════════════════════════ */
.e404{padding-block:clamp(50px,8vw,110px);border:0;text-align:center}
.e404 p{margin-inline:auto}
.e-n{font-size:clamp(3rem,9vw,6rem);font-weight:800;color:var(--red);
  line-height:1;margin:0 0 10px}
.e-btns{display:flex;gap:11px;justify-content:center;margin-block-start:26px;
  flex-wrap:wrap}

/* ═══ التذييل ══════════════════════════════════════════════════════════ */
.foot{background:var(--dark);color:#9aa4aa;padding-block:48px 22px;
  margin-block-start:0}
.foot-in{max-width:1180px;margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:34px}
.f-brand img{height:34px;width:auto;margin-block-end:14px}
.f-brand p{font-size:14.5px;max-width:42ch;line-height:1.8}
.f-soc{display:flex;gap:8px;margin-block-start:16px}
.f-soc a{display:inline-flex;width:38px;height:38px;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(255,255,255,.07);
  color:#c3ccd0;transition:background .15s,color .15s}
.f-soc a:hover{background:var(--red);color:#fff}
.f-soc .ic{width:18px;height:18px}
.foot h4{color:#fff;font-size:14px;margin-block-end:12px}
/* روابط أعمدة التذييل وحدها — `.foot-in a` كان يصيب أيقونات المنصّات أيضاً
   فيفرض عليها `display:block` بنفس تخصيص `.f-soc a` ويغلبها بالترتيب، فيسقط
   التوسيط وتقف الأيقونة في زاوية قرصها (يسار 20 وأعلى 5 من أصل 38).
   المحدِّد الابنيّ يستثنيها بنيوياً لا بالترتيب. */
.foot-in > div > a{display:block;font-size:14.5px;padding-block:5px;color:#9aa4aa;
  transition:color .15s}
.foot-in > div > a:hover{color:#fff}
.f-bar{max-width:1180px;margin-inline:auto;padding-inline:24px;
  margin-block-start:34px;padding-block-start:20px;
  border-block-start:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:nowrap;
  font-size:12.5px}

/* ═══ أسطح المتصفّح ════════════════════════════════════════════════════ */
/* ما لم نرسمه يحمل التصميم أيضاً: التحديد والمؤشّر وشريط التمرير. تركُها
   على الافتراضي يجعل الصفحة تبدو **مركَّبة** لا مبنيّة. */
html{scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ═══ التابلت ═════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .cards{grid-template-columns:repeat(2,1fr)}
  .srcs-in{grid-template-columns:1fr}
}

@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:30px}
  .mag{grid-template-columns:1fr;gap:20px}
  .mag-big{grid-row:auto}
  .dossier,.mr-list{grid-template-columns:1fr;gap:0}
  .led{gap:6px 14px}
}

/* ═══ الجوال ══════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .ph-in{flex-direction:column;align-items:flex-start;gap:8px}
  .ph-n{padding-block-end:0}
  /* الشريط الجانبي يختفي والمقاصد تنتقل إلى شريطٍ سفليّ يصله الإبهام */
  .rail{inset-block:auto 0;inset-inline:0;width:auto;height:auto;
    flex-direction:row;justify-content:space-around;padding:6px 4px;
    border-block-start:1px solid rgba(255,255,255,.1);
    padding-block-end:calc(6px + env(safe-area-inset-bottom))}
  .rail a{width:auto;flex:1;padding:7px 2px;font-size:9.5px;gap:3px}
  .rail .ic{width:19px;height:19px}
  .shell{margin-inline-start:0;padding-block-end:74px}

  .wrap,.top-in,.foot-in,.f-bar{padding-inline:16px}
  .top-in{min-height:62px;gap:12px}
  .brand img{height:32px}
  .ticker-l{padding-inline:12px;font-size:12px}

  .lead-b{padding:17px 18px 19px}
  .lead-b h2{font-size:1.22rem}
  .lead-s{display:none}      /* العنوان يكفي في العرض الضيّق */

  .mini,.lr{grid-template-columns:92px 1fr;gap:13px}
  .mini-t,.lr-t{width:92px;height:92px}
  /* على الجوال المصغّرة العريضة تخنق العنوان — تصير مربّعةً للجميع */
  .row{grid-template-columns:104px 1fr;gap:13px}
  .row-t{width:104px;height:104px}
  .row h3,.mini h3{font-size:15px}
  .cards{grid-template-columns:1fr}
  .sh{flex-direction:column;align-items:flex-start;gap:10px}

  .art h1{max-width:none}
  .art-src{flex-direction:column;align-items:flex-start}
  .sform{flex-direction:column}
  .sform .btn{justify-content:center}

  /* التذييل **ثلاثة أعمدة جنب بعضها** لا عمود ولا عمودين: العمود الواحد
     يدفع التذييل إلى أسفلٍ سحيق فلا يصله أحد، والعمودان يُنزلان الثالث
     لصفٍّ ثانٍ فيبدو التوزيع مائلاً. وكتلة الشعار تمتدّ عرضاً. */
  .foot-in{grid-template-columns:repeat(3,1fr);gap:22px 14px}
  .f-brand{grid-column:1/-1}
  .foot-in > div > a{font-size:13px}
  .foot h4{font-size:13px}
  .f-bar{flex-direction:column;gap:6px;font-size:11.5px}
}

@media(max-width:400px){
  .rail a span{font-size:9px}
  .e-btns .btn{flex:1 1 100%;justify-content:center}
}