/* ==========================================================================
   المكوّنات — النسخة 4a
   كل القيم منقولة حرفيًا من كود التسليم المرجعي.
   لا زخرفة · لا حدود مقطّعة كعنصر جمالي · لا border-radius عام.
   البنية تُرسم بالخطوط والفراغ وحدهما.
   ========================================================================== */

/* ==========================================================================
   الشريط العلوي الحبري
   ========================================================================== */
.topbar {
  background: var(--ink); color: #9BA49E;
  font-size: 12.5px; letter-spacing: .01em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-inline: var(--pad); min-height: 42px;
}
/* العنوان يتقلّص أولًا ولا يلفّ: هو أقلّ عناصر الشريط أهمّية، ووجوده
   كاملًا في التذييل. لفّه كان يمدّ الشريط إلى سطرين على اللابتوب. */
.topbar__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar__side { display: flex; align-items: center; gap: 16px; flex: none; }
/* ❗ رابط الطوارئ أهمّ عنصر في الشريط كلّه، وكان أخفت من العنوان
   المجاور. صار له إطار وأرضية خفيفة فيُقرأ زرًّا لا نصًّا عابرًا. */
.topbar__emg {
  display: inline-flex; align-items: center; gap: 9px; color: var(--red-pale);
  text-decoration: none; font-weight: 400; white-space: nowrap;
  padding: 5px 12px; border: 1px solid rgba(193,39,45,.45);
  background: rgba(193,39,45,.10);
  transition: color .3s, background .3s, border-color .3s;
}
.topbar__emg:hover { color: #fff; background: rgba(193,39,45,.28); border-color: rgba(193,39,45,.8); }
.topbar__dot { width: 6px; height: 6px; background: var(--red); display: block; border-radius: 50%; flex: none; }
/* ❗ كان نصًّا عاريًا بفاصل معلّق على حافّة الشاشة فبدا شظيّةً لا زرًّا.
   إطارٌ صريح يجعله عنصر تحكّم مقروءًا. */
.topbar__lang {
  display: inline-flex; align-items: center; justify-content: center;
  color: #9BA49E; text-decoration: none; letter-spacing: .14em; font-size: 11.5px;
  min-width: 40px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.22);
  transition: color .3s, border-color .3s, background .3s;
}
.topbar__lang:hover { color: var(--gold); border-color: rgba(201,169,97,.6); background: rgba(201,169,97,.08); }

/* ==========================================================================
   شريط التنقّل
   ========================================================================== */
/* ❗ position: relative ليست زينة. قائمة الهاتف موضوعة بـabsolute
   وtop:100%، وبلا سياق تموضع هنا كانت تُحسب من الكتلة الأولى —
   فتُفتح على بُعد 812 بكسل أسفل الشاشة. أي أن زرّ القائمة كان يعمل
   والقائمة تُفتح **خارج الشاشة** فيبدو الزرّ معطّلًا.
   فحص HTTP لا يمسك هذا: القائمة موجودة في HTML وسمة data-open
   تتغيّر — العطل في الهندسة وحدها. قِيس في DOM حيّ. */
.mainnav {
  position: relative;
  display: flex; align-items: center; gap: 40px;
  padding-inline: var(--pad); height: 98px; background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 -3px 0 -2px var(--gold);
}
.brand { display: flex; align-items: center; gap: 18px; margin-inline-end: auto; text-decoration: none; color: var(--ink); }
/* ❗ حالتان متضادّتان لا حالة واحدة.
   الشعار المرفوع: **لا إطار ولا أرضية بيضاء**. الشريط أرضيته
   `--paper` المائل إلى العاج، ومربّع أبيض بحدّ فوقه يُقرأ رقعةً
   ملصوقة لا شعارًا — وهو ما كان يحدث حرفيًّا. الشعار يقف على
   أرضية الشريط نفسها فيندمج.
   والنائب الفارغ: يحتاج الإطار — بلا حدّ لا يُرى أنه خانة تنتظر صورة.
   ولا عرض ثابت: الارتفاع يُثبَّت والعرض يتبع النسبة، فالشعار الطويل
   (كشعار المشفى) لا يُسحق في مربّع، والعريض لا يترك فراغين. */
.brand__mark { flex: none; display: grid; place-items: center; }
.brand__mark--img { background: none; border: 0; padding: 0; }
/* ❗ القياس على الصورة لا على الغلاف، وبـmax-height لا height: 100%.
   الغلاف بارتفاع 52 والصورة بـheight:100% أعطت 96×144 — أي أن الصورة
   فاضت عن غلافها ثلاثة أضعاف. النسبة تُحسب من الارتفاع الأقصى وحده. */
.brand__mark--img img {
  max-height: 52px; width: auto; max-width: 120px;
  object-fit: contain; display: block;
  /* دمج الحوافّ البيضاء المتبقّية في PNG غير شفّاف مع أرضية الشريط.
     الشفّاف لا يتأثّر، وغير الشفّاف يفقد المربّع الأبيض الظاهر. */
  mix-blend-mode: multiply;
}
.brand__mark--empty {
  width: 52px; height: 52px; border: 1px dashed var(--rule-2);
  font-size: 9px; color: var(--gold-text);
  text-align: center; line-height: 1.25; background: none;
  overflow: hidden; padding: 3px;
}
/* ❗ اسم المشفى لا يلفّ. لمّا مُنعت بنود القائمة من اللفّ ضاقت المساحة
   على الشعار فانكسر الاسم سطرين («مشفى حلب / الجامعي») — الاسم أثبت
   عنصر في الصفحة، والقائمة هي ما يتقلّص لا هو. */
.brand { flex: none; min-width: 0; }
.brand__text { line-height: 1.25; min-width: 0; }
/* ❗ display: block — كانا span متجاورين بلا عرض كتلة، فيُرسمان في سطر
   واحد: «مشفى حلب الجامعي جامعة حلب». وmargin-top: 3px على الثاني
   يكشف أن التكديس هو المقصود منذ البداية. والعطل يظهر بكامله في
   الإنكليزية: «Aleppo University Hospital» + «University of Aleppo»
   في سطر واحد = 323 بكسل في شاشة 375، فيفيض المستند أفقيًّا
   (قِيس: scrollWidth = 460). */
.brand__name { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brand__sub { display: block; font-size: 11px; color: var(--gold-text); letter-spacing: .16em; margin-top: 3px; white-space: nowrap; }

.mainnav__links { display: flex; gap: 30px; font-size: 14.5px; font-weight: 400; list-style: none; margin: 0; padding: 0; }
/* ❗ لا يلفّ عنوان قائمة أبدًا. عند ضيق الشاشة كانت عناصر القائمة
   تنكسر سطرين داخل كل بند («المراكز / والوحدات») فيصير الشريط
   شبكة كلمات مبعثرة — قيس على 1280: ارتفاع البند 55 بكسل بدل 36.
   البنود تضيق بالمسافة والقياس، وحين لا تكفي تُطوى في زرّ القائمة. */
.mainnav__links a {
  color: var(--text-2); text-decoration: none; padding: 8px 2px;
  white-space: nowrap;
  transition: color .3s, box-shadow .3s;
}
.mainnav__links a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.mainnav__links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }

/* زرّ القائمة — ثلاثة خطوط تتحوّل إلى × عند الفتح.
   44×44 هدف لمس كامل، والخطوط مرسومة لا محارف. */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule-2);
  color: var(--ink); font-family: inherit; cursor: pointer;
  width: 46px; height: 46px; padding: 0; flex: none;
  align-items: center; justify-content: center;
  transition: border-color .3s, background .3s;
}
.nav-toggle:hover { border-color: var(--gold); background: rgba(201,169,97,.08); }
.nav-toggle__bars { display: block; position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; inset-inline: 0; height: 2px; background: var(--ink);
  transition: transform .28s ease, opacity .2s ease, top .28s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars span { transition: none; }
}

/* ==========================================================================
   الهيرو — ملمس طباعة لا ملمس ويب
   ========================================================================== */
.hero { position: relative; height: 768px; background: var(--ink); overflow: hidden; }
.hero__img {
  position: absolute; inset: -2%;
  /* ليس تدرّجًا رماديًا كاملًا: الصورة ملتقطة في ضوء ذهبي، وتجريدها منه
     يجعل المقدّمة باردة ويقطعها عن لوحة الورق والذهبي. نزع ثلثَي التشبّع
     يُبقي الانضباط الطباعي ويُبقي الدفء. */
  filter: grayscale(.62) sepia(.14) contrast(1.06) brightness(.94) saturate(1.15);
  animation: slowzoom 30s ease-out both;
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil, .hero__veil-b, .hero__lines { position: absolute; inset: 0; pointer-events: none; }
.hero__veil {
  background: linear-gradient(to left, rgba(9,14,11,.97) 0%, rgba(9,14,11,.86) 42%,
              rgba(9,14,11,.3) 78%, rgba(9,14,11,0) 100%);
}
.hero__veil-b { background: linear-gradient(to top, rgba(9,14,11,.6) 0%, rgba(9,14,11,0) 34%); }
/* طبقة الخطوط: إحساس الطباعة المطبوعة */
.hero__lines {
  opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.hero__body {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; padding-inline: var(--pad);
}
.hero__col {
  max-width: 730px; border-inline-start: 1px solid rgba(201,169,97,.5); padding-inline-start: 36px;
}
.hero__kicker {
  display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .3em; color: var(--gold);
  animation: rise .95s cubic-bezier(.22,.61,.36,1) both .2s;
}
.hero h1 {
  margin: 0 0 30px; font-size: 98px; font-weight: 600; line-height: .99;
  letter-spacing: -.035em; color: #fff;
  animation: rise .95s cubic-bezier(.22,.61,.36,1) both .32s;
}
.hero h1 .lite { color: var(--gold-light); }
.hero__lede {
  margin: 0 0 46px; font-size: 19.5px; font-weight: 300; line-height: 2;
  color: #C6CFC9; max-width: 46ch;
  animation: rise .95s cubic-bezier(.22,.61,.36,1) both .46s;
}
.hero__actions {
  display: flex; gap: 12px; pointer-events: auto;
  animation: rise .95s cubic-bezier(.22,.61,.36,1) both .6s;
}

/* ==========================================================================
   الأزرار
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; min-height: 58px; padding-inline: 34px;
  font-family: inherit; font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
}
.btn--gold { background: var(--gold); color: var(--ink); font-weight: 500; transition: background .35s, box-shadow .35s; }
.btn--gold:hover { background: var(--gold-hover); color: var(--ink); box-shadow: 0 10px 26px rgba(201,169,97,.28); }
.btn--outline { border: 1px solid rgba(255,255,255,.34); color: #fff; transition: background .35s, border-color .35s; }
.btn--outline:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.7); color: #fff; }
.btn--red {
  background: var(--red); color: #fff; font-size: 16.5px; font-weight: 500;
  padding-inline: 36px; transition: background .35s, box-shadow .35s;
}
.btn--red:hover { background: var(--red-hover); color: #fff; box-shadow: 0 12px 30px rgba(193,39,45,.35); }
/* ❗ داخل قسم الطوارئ صارت الأرضية حمراء، فزرٌّ أحمر عليها يختفي:
   الفرق بين #C1272D و#7E1519 ضئيل. يُقلب أبيضَ بنصّ أحمر عميق —
   نسبة 10.46 وانفصالٌ لا يُخطئه أحد في لحظة يحتاجها. */
.emg .btn--red {
  background: #fff; color: var(--red-950);
  box-shadow: none; font-weight: 600;
}
.emg .btn--red:hover {
  background: var(--red-pale); color: var(--red-950);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* ==========================================================================
   اللوحة المتراكبة — تقطع أسفل الهيرو
   ========================================================================== */
.overlap {
  position: relative; z-index: 3; margin: -78px var(--pad) 0;
  background: var(--panel); border-top: 2px solid var(--gold);
  box-shadow: 0 24px 60px -28px rgba(12,17,14,.42);
}
.overlap__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.gate {
  display: flex; flex-direction: column; gap: 10px; padding: 34px;
  color: var(--ink); text-decoration: none; transition: background .35s;
}
.gate:hover { background: #F7F5EF; color: var(--ink); }
.gate + .gate { border-inline-start: 1px solid var(--rule-panel); }
.gate__label { font-size: 11px; letter-spacing: .22em; color: var(--gold-text); }
.gate__title {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 17.5px; font-weight: 500; letter-spacing: -.015em;
}
.gate__arrow { font-size: 14px; color: var(--gold-text); transition: transform .35s; }
.gate__arrow--red { color: var(--red); }

/* ==========================================================================
   شريط الأرقام
   ========================================================================== */
.stats { padding: 96px var(--pad) 100px; background: var(--paper); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 44px; }
.stat { padding-top: 22px; border-top: 1px solid var(--rule-2); }
.stat:first-child { border-top: 2px solid var(--ink); }
.stat__n {
  display: block; font-size: 62px; font-weight: 200; color: var(--green-num);
  line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.stat__l { display: block; margin-top: 18px; font-size: 13.5px; letter-spacing: .02em; color: var(--text-2); }

/* ==========================================================================
   ثلاثة أدوار
   ========================================================================== */
.roles { padding: 0 var(--pad) 118px; background: var(--paper); }
.roles__grid {
  display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 88px;
  align-items: start; padding-top: 70px; border-top: 1px solid var(--rule);
}
.roles__aside { border-inline-start: 1px solid var(--gold); padding-inline-start: 28px; }
.roles__aside h2 { margin: 20px 0 22px; font-size: 56px; line-height: 1.06; }
/* ❗ صنف صريح لا `.roles__aside p`. الوسم داخل الصنف وزنه (0,1,1)
   ويتفوّق على `.kicker` بوزن (0,1,0) فيسرق لونه الذهبي. هذا رابع ظهور
   للنمط نفسه في المشروع — القاعدة في مهارة auh-site: نطّق التنسيق
   بالكتلة أو بصنف خاصّ، لا بالوسم داخل صنف. */
.roles__lede { margin: 0; font-size: 16.5px; line-height: 2; color: var(--text-2); }
.role {
  display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 28px;
  padding: 38px 0; border-top: 1px solid var(--rule-2); transition: background .35s;
}
.role:last-child { border-bottom: 1px solid var(--rule-2); }
.role:hover { background: var(--paper-2); }
.role__n { font-size: 12px; letter-spacing: .14em; color: var(--gold); padding-top: 12px; }
.role h3 { margin: 0 0 12px; }
.role p { margin: 0; font-size: 16.5px; line-height: 2; color: var(--text-2); max-width: 58ch; }

/* ==========================================================================
   لوحة الاقتباس — صورة ثنائية اللون
   ========================================================================== */
/* ==========================================================================
   شريط الصور — رمادي ← لون عند التحويم
   ========================================================================== */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--rule); }
.photo { margin: 0; background: var(--paper); min-width: 0; }
.photo__frame { position: relative; height: 372px; overflow: hidden; filter: grayscale(1) contrast(1.06); transition: filter .7s ease; }
.photo:hover .photo__frame { filter: grayscale(0) contrast(1); }
.photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { padding: 22px 26px 26px; font-size: 13.5px; color: var(--text-2); }
.photo__n { display: block; font-size: 10.5px; letter-spacing: .24em; color: var(--gold-text); margin-bottom: 8px; }

/* ==========================================================================
   الاختصاصات
   ========================================================================== */
.specs { padding: 118px var(--pad); background: var(--paper-2); }
.specs__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
  padding-bottom: 30px; border-bottom: 1px solid var(--ink); margin-bottom: 56px;
}
.specs__head h2 { margin: 18px 0 0; font-size: 56px; }
.linkline {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px;
  color: var(--green); text-decoration: none; padding-bottom: 8px;
  box-shadow: inset 0 -1px 0 var(--gold); transition: gap .35s, color .35s;
  white-space: nowrap;
}
.linkline:hover { gap: 22px; color: var(--green-lift); }

.specs__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 60px; }
.speccol h3 {
  margin: 0 0 2px; display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; color: var(--gold-text);
  padding-bottom: 16px; border-bottom: 1px solid var(--rule-head);
}
.speccol h3 span { font-weight: 300; color: #9A9F9A; }
.speccol ul { list-style: none; padding: 0; margin: 0; }
/* الخطّ الذهبي عند التحويم + إزاحة النصّ + خلفية بيضاء */
.speccol a {
  display: block; padding: 15px 12px; font-size: 16px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule-list);
  transition: background .35s, padding .35s, box-shadow .35s;
}
.speccol a:hover {
  background: #fff; color: var(--ink);
  padding-inline-start: 22px; box-shadow: inset 3px 0 0 var(--gold);
}
.speccol a.is-emg { color: var(--red); font-weight: 400; }
.speccol a.is-emg:hover { color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.speccol a.is-prep {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--text-2);
}
.speccol a.is-prep:hover { box-shadow: none; }
.tag-prep {
  font-size: 11px; color: var(--amber-text); border: 1px solid rgba(124,95,27,.45);
  padding: 2px 9px; white-space: nowrap;
}
.units-card { padding: 36px; background: var(--green); color: #fff; border-top: 2px solid var(--gold); }
.units-card p:first-child { margin: 0 0 16px; font-size: 11px; letter-spacing: .26em; color: var(--gold); }
.units-card__t { margin: 0 0 24px; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.units-card a {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gold-dim);
  text-decoration: none; padding-bottom: 6px; box-shadow: inset 0 -1px 0 rgba(220,196,140,.5);
  transition: gap .35s;
}
.units-card a:hover { gap: 22px; color: var(--gold-dim); }

/* ==========================================================================
   الطوارئ — أرضية حبرية وشريط أحمر جانبي. لا لوحة حمراء كاملة.
   ========================================================================== */
/* ❗ أحمر عميق لا --red: الأخير أرضيةً يُسقط الذهبي إلى 2.60 والنصّ
   الخافت إلى 3.55. --red-950 مقيس ويمرّر كل نصوص القسم. */
.emg { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); background: var(--red-950); color: #fff; }
/* الحدّ كان أحمر على حبريّ؛ على أرضية حمراء يذوب — يصير ذهبيًّا. */
.emg__main { padding: 96px var(--pad); border-inline-start: 4px solid var(--gold); order: 2; }
.emg__main h2 { margin: 20px 0 24px; font-size: 56px; }
/* ❗ الوسم h1 على صفحة الطوارئ وh2 على الرئيسية — المحدِّد يشمل
   الاثنين. تخصيصه بـh2 وحده ترك عنوان صفحة الطوارئ بالرمادي
   الخافت على أرضية حمراء: 1.9 فقط، أي غير مقروء عمليًّا. */
.emg .lite, .emg__main h2 .lite { color: #F0D7D8; }
.emg .kicker { color: #F0D7D8; }
.emg__lede { margin: 0 0 40px; font-size: 18.5px; line-height: 2; max-width: 47ch; color: #EEDCDC; }
.emg__side { padding: 96px var(--pad); display: grid; gap: 34px; align-content: center; order: 1; }
.emg__label { display: block; font-size: 11px; letter-spacing: .26em; color: #E3BFC0; margin-bottom: 12px; }
.emg__note {
  display: block; font-size: 14.5px; line-height: 1.85; color: #C3CCC6;
  padding-inline-start: 18px; border-inline-start: 1px solid rgba(255,255,255,.2);
}
.emg__val { display: block; font-size: 23px; font-weight: 500; letter-spacing: -.02em; }

/* ==========================================================================
   التذييل — ثلاثة أعمدة: الهوية · التنقّل · الطوارئ
   النسخة الأولى كانت أربعة أعمدة تكرّر روابط الشريط العلوي مرّتين،
   فوقها شريط بوابات بأربع بطاقات كبيرة. ثلاث نسخ من القائمة نفسها في
   أسفل كل صفحة ضجيج لا تنظيم.
   ========================================================================== */
.site-footer {
  padding: 72px var(--pad) 34px; background: var(--ink); color: #98A19B;
  border-top: 2px solid var(--gold);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px;
  padding-bottom: 46px;
}
.footer__name { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -.025em; }
.footer__sub { margin-top: 6px; font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.footer__addr { margin: 22px 0 0; font-size: 14px; line-height: 1.95; max-width: 30ch; }
.site-footer h2 {
  margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: .22em; color: var(--gold);
}
.footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer__nav a {
  color: #D6DDD8; text-decoration: none; font-size: 14.5px;
  display: inline-flex; align-items: center; min-height: 32px; transition: color .3s;
}
.footer__nav a:hover { color: var(--gold); }
.footer__emgline { margin: 0 0 14px; font-size: 14.5px; line-height: 1.9; color: #C3CCC6; }
.footer__emg .linkline { color: var(--gold-dim); box-shadow: inset 0 -1px 0 rgba(220,196,140,.5); }
.footer__emg .linkline:hover { color: var(--gold); }
.footer__base {
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12.5px; color: #727A75;
}

/* ==========================================================================
   الخدمات السريعة — الملف التعريفي §٣
   بطاقات كبيرة بحدود لا بظلال: البنية تُرسم بالخطّ والفراغ، والذهبي
   يُحجَز للحافّة النشطة وحدها كي يبقى دالًّا.
   ========================================================================== */
.quick { padding: 92px var(--pad) 96px; background: var(--paper); }
.quick__head { border-inline-start: 1px solid var(--gold); padding-inline-start: 28px; margin-bottom: 44px; }
.quick__head h2 { margin: 16px 0 0; font-size: 44px; line-height: 1.1; }
.quick__grid {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border: 1px solid var(--rule);
}
.qcard {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--paper-2); padding: 26px 24px; min-height: 92px;
  text-decoration: none; color: var(--ink);
  transition: background .28s ease, box-shadow .28s ease;
}
.qcard:hover { background: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.qcard__t { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.qcard__arrow { color: var(--gold-text); font-size: 17px; flex: none; transition: transform .28s ease; }
.qcard:hover .qcard__arrow { transform: translateX(-4px); }
[dir="ltr"] .qcard:hover .qcard__arrow { transform: translateX(4px); }
/* الأحمر للطوارئ وحدها — يعمل بندرته. */
.qcard--red .qcard__t { color: var(--red); font-weight: 600; }
.qcard--red .qcard__arrow { color: var(--red); }
.qcard--red:hover { box-shadow: inset 0 -3px 0 var(--red); }

/* ==========================================================================
   القيم المؤسسية — الملف التعريفي §٢٤
   ========================================================================== */
/* ❗ الأخضر أرضيةً لا لمسة: القسم يقطع تتابع الورق فيعطي الصفحة
   إيقاعًا، والأخضر هو لون الهوية. وكل نصوصه مقيسة على #0B2F25:
   أبيض 14.51 · خافت 8.82 · ذهبي 6.45 — كلّها فوق الحدّ بمريح. */
.values { padding: 88px var(--pad) 92px; background: var(--green); color: #fff; }
.values__head { border-inline-start: 1px solid var(--gold); padding-inline-start: 28px; margin-bottom: 40px; }
.values__head .kicker { color: var(--gold-light, #DCC48C); }
.values__head h2 { margin: 16px 0 0; font-size: 44px; line-height: 1.1; color: #fff; }
.values__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.value {
  display: flex; align-items: baseline; gap: 16px;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,.14);
}
/* ❗ --gold-text مضبوط للقراءة على **الورق**؛ على الأخضر يخفت.
   الذهبي الفاتح هو المقيس لهذه الأرضية. */
.value__n { font-size: 13px; font-weight: 300; color: #DCC48C; flex: none;
  font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.value__t { font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: #fff; }

@media (max-width: 900px) {
  .quick { padding-block: 62px 66px; }
  .quick__head { margin-bottom: 30px; padding-inline-start: 18px; }
  .quick__head h2, .values__head h2 { font-size: 32px; }
  .qcard { padding: 20px 18px; min-height: 76px; }
  .qcard__t { font-size: 16px; }
  .values { padding-block: 60px 64px; }
  .values__head { margin-bottom: 26px; padding-inline-start: 18px; }
  .value { padding: 18px 0; }
  .value__t { font-size: 17px; }
}

/* ==========================================================================
   خطّ الزمن — محطّات المشفى على سطر واحد
   ========================================================================== */
.tl { padding: 104px var(--pad) 112px; background: var(--paper-2); }
.tl__head { border-inline-start: 1px solid var(--gold); padding-inline-start: 28px; margin-bottom: 74px; }
.tl__head h2 { margin: 18px 0 0; font-size: 52px; line-height: 1.08; }
.tl__head h2 .lite { color: var(--text-muted); font-weight: 200; }

.tl__track {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
}
/* الخطّ الجامع يمرّ خلف النقاط — يُرسم مرّة لا خمسًا */
.tl__track::before {
  content: ''; position: absolute; inset-inline: 0; top: 52px; height: 1px;
  background: var(--rule-head);
}
.tl__stop { position: relative; padding-inline-end: 30px; }
.tl__year {
  display: block; height: 42px; font-size: 33px; font-weight: 200;
  line-height: 1; color: var(--green-num); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tl__dot {
  display: block; position: relative; z-index: 1;
  width: 9px; height: 9px; margin-top: 16px;
  background: var(--paper-2); box-shadow: 0 0 0 1px var(--gold) inset;
}
.tl__label {
  display: block; margin-top: 26px; max-width: 21ch;
  font-size: 14.5px; line-height: 1.9; color: var(--text-2);
}
/* المحطّة الأخيرة هي الحاضر: نقطة مصمتة ونصّ بلون الحبر */
.tl__stop--now .tl__dot { background: var(--gold); }
.tl__stop--now .tl__label { color: var(--ink-2); }

/* ==========================================================================
   نائب الصورة — يُقرأ «هنا صورة لم تصل بعد» لا «الصورة تعطّلت»
   المربّع الأسود كان يبدو عطلًا؛ زوايا إطار رفيعة وأرضية ورقية تقول
   إن الموضع محجوز عن قصد.
   ========================================================================== */
.ph {
  position: relative; height: 100%;
  display: grid; place-items: center;
  background: var(--paper-2);
  background-image: repeating-linear-gradient(-45deg,
    rgba(12,17,14,.035) 0 1px, transparent 1px 10px);
}
/* زاويتان متقابلتان تكفيان للإيحاء بإطار — أربع تُثقل */
.ph::before, .ph::after {
  content: ''; position: absolute; width: 24px; height: 24px;
  border: 1px solid var(--rule-head); pointer-events: none;
}
.ph::before { top: 18px; inset-inline-start: 18px; border-inline-end: 0; border-bottom: 0; }
.ph::after  { bottom: 18px; inset-inline-end: 18px; border-inline-start: 0; border-top: 0; }
.ph__hint {
  font-size: 12px; color: var(--text-3); letter-spacing: .1em;
  text-align: center; padding: 20px; max-width: 26ch; line-height: 1.9;
}
/* على الأرضيات الداكنة (المقدّمة والاقتباس) تُقلب الأرضية لا التصميم */
.hero__img .ph {
  background: #15201B;
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.03) 0 1px, transparent 1px 10px);
}
.hero__img .ph::before, .hero__img .ph::after,
.hero__img .ph__hint { color: #7E8A83; }

/* ==========================================================================
   التجاوب — 1240 / 1024 / 768 / 480
   ========================================================================== */
@media (max-width: 1240px) {
  .hero h1 { font-size: 78px; }
  .roles__grid { grid-template-columns: 320px minmax(0,1fr); gap: 56px; }
  .specs__grid { gap: 0 36px; }
}

/* ❗ نقطة الطيّ 1120 لا 768. ثمانية بنود عربية + الشعار لا تتّسع في
   1280 بكسل: قِيس فعلًا فانكسر كل بند سطرين. أضيق من ذلك تُطوى
   القائمة في الزرّ — الطيّ المبكر أنظف من الحشر. */
/* ❗ القياسات ليست تخمينًا: الشريط الكامل يحتاج 1375 بكسل (شعار 317 +
   قائمة 898 + فجوة 40 + هامشان 120). فوق 1400 يُعرض كما صُمِّم؛
   بين 1240 و1400 يضيق بالقياس والمسافة فيتّسع في 1280 و1366 —
   وهما مقاسا أكثر اللابتوبات؛ ودون ذلك يُطوى في الزرّ.
   ونقطة الطيّ 1240 هي نقطة `--pad` نفسها لا رقمًا جديدًا: عند 1160
   كان الفائض بكسلين اثنين — هامش لا يُعتمد عليه عبر المتصفّحات. */
@media (max-width: 1400px) {
  .mainnav { gap: 24px; }
  .mainnav__links { gap: 18px; font-size: 13.5px; }
  .brand { gap: 14px; }
  .brand__mark--img img { max-height: 44px; max-width: 100px; }
  .brand__mark--empty { width: 46px; height: 46px; }
  .brand__name { font-size: 17px; }
  .brand__sub { font-size: 10px; letter-spacing: .12em; }
}
/* ❗ قائمة تتجاوز تسعة بنود لا تتّسع في أعرض لابتوب: تُطوى في الزرّ
   فوق 1240 أيضًا. الصنف من PHP لأن CSS لا تَعُدّ العناصر. */
@media (max-width: 1600px) {
  .mainnav--many .mainnav__links {
    display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 40;
    flex-direction: column; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 32px -22px rgba(12,17,14,.55);
    padding: 0; font-size: 15px;
  }
  .mainnav--many[data-open="true"] .mainnav__links { display: flex; }
  .mainnav--many .mainnav__links li + li { border-top: 1px solid var(--rule-4); }
  .mainnav--many .mainnav__links a {
    padding: 15px var(--pad); min-height: 52px; display: flex; align-items: center; color: var(--ink);
  }
  .mainnav--many .mainnav__links a:hover { background: var(--paper-2); box-shadow: none; }
  .mainnav--many .mainnav__links a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--red); background: var(--paper-2);
  }
  .mainnav--many .nav-toggle { display: inline-flex; }
}

@media (max-width: 1240px) {
  .mainnav { height: 74px; gap: 16px; }
  .nav-toggle { display: inline-flex; }
  .mainnav__links {
    display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 40;
    flex-direction: column; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 32px -22px rgba(12,17,14,.55);
    padding: 0; font-size: 15px;
  }
  .mainnav[data-open="true"] .mainnav__links { display: flex; }
  .mainnav__links li + li { border-top: 1px solid var(--rule-4); }
  .mainnav__links a {
    padding: 15px var(--pad); min-height: 52px; display: flex; align-items: center;
    color: var(--ink);
  }
  .mainnav__links a:hover { background: var(--paper-2); box-shadow: none; }
  .mainnav__links a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--red); background: var(--paper-2);
  }
  .brand__sub { font-size: 10px; }
}
@media (max-width: 1024px) {
  .hero { height: 640px; }
  .hero h1 { font-size: 64px; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .stat:nth-child(2) { border-top: 2px solid var(--ink); }
  .roles__grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .emg { grid-template-columns: minmax(0,1fr); }
  .emg__main, .emg__side { order: unset; }
  .specs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   الهاتف — إعادة بناء لا تصغير
   خمسة أعمدة على شاشة 375 تعني 68 بكسل للعمود الواحد: سنةٌ من أربعة
   أرقام ونصٌّ من 21 محرفًا في عمود بعرض إصبع. الخطّ الزمني يُبنى
   عموديًّا بمسار جانبي، لا يُضغط أفقيًّا.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tl { padding-block: 64px 68px; }
  .tl__head { margin-bottom: 40px; padding-inline-start: 18px; }
  .tl__track { grid-template-columns: minmax(0,1fr); gap: 0; padding-inline-start: 26px; }
  /* المسار يصير خطًّا رأسيًّا على حافّة البداية بدل خطّ أفقي فوق الكل */
  .tl__track::before {
    inset-inline: auto; inset-inline-start: 4px;
    top: 8px; bottom: 8px; width: 1px; height: auto;
  }
  .tl__stop {
    padding-inline-end: 0; padding-block: 0 26px;
    display: grid; grid-template-columns: auto minmax(0,1fr);
    column-gap: 16px; align-items: start;
  }
  .tl__dot { grid-column: 1; grid-row: 1 / span 2; margin-top: 12px; margin-inline-start: -26px; }
  .tl__year { grid-column: 2; grid-row: 1; height: auto; font-size: 30px; }
  /* ❗ السنة تحمل dir="ltr" (لأجل «2011–2024»)، فـtext-align: start
     يعني عندها **اليسار** حتى داخل صفحة عربية — فتنفصل السنة إلى
     حافّة والنصّ إلى الأخرى. المحاذاة تُؤخذ من اتجاه الصفحة لا من
     اتجاه العنصر. */
  [dir="rtl"] .tl__year { text-align: right; }
  [dir="ltr"] .tl__year { text-align: left; }
  .tl__label { grid-column: 2; grid-row: 2; margin-top: 6px; max-width: none; font-size: 14.5px; line-height: 1.8; }
}

@media (max-width: 768px) {
  .brand__mark--img img { max-height: 38px; max-width: 86px; }
  .brand__mark--empty { width: 40px; height: 40px; }
  .brand__name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
  .brand__sub { overflow: hidden; text-overflow: ellipsis; }
  /* ❗ صمّام أمان: الإنكليزية أعرض من العربية بمرّة وربع إلى مرّة ونصف،
     والاسم قد يطول في لغة ثالثة. يتقلّص بالنقاط ولا يدفع الصفحة. */
  .brand { gap: 12px; flex: 1; min-width: 0; }

  .hero { height: 520px; }
  .hero h1 { font-size: 44px; margin-bottom: 20px; }
  .hero__lede { font-size: 16px; margin-bottom: 30px; }
  .hero__col { padding-inline-start: 20px; }
  .btn { min-height: 52px; padding-inline: 24px; font-size: 15px; }

  /* اللوحة المتراكبة تصير عمودية بلا هامش سالب */
  .overlap { margin: 0; }
  .overlap__grid { grid-template-columns: minmax(0,1fr); }
  .gate + .gate { border-inline-start: 0; border-top: 1px solid var(--rule-panel); }

  .stats { padding-block: 56px 60px; }
  .stat__n { font-size: 46px; }
  .roles { padding-bottom: 70px; }
  .roles__aside h2, .specs__head h2, .emg__main h2 { font-size: 38px; }
  .role { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 26px 0; }
  .role__n { padding-top: 0; }

  /* ❗ على الهاتف يتكدّس عمودا لوحة الطوارئ فوق بعضهما، فتتلاصق حشوتان
     من 60 بكسل = 120 بكسل من السواد الفارغ بين النصّ والذي يليه. قِيس
     على 375: فجوة 175 بكسل. تُخفَّض، ويفصل بينهما خطّ فلا تُقرأ فراغًا. */
  .emg__main { padding-block: 52px 40px; }
  .emg__side { padding-block: 36px 52px; gap: 26px; border-top: 1px solid rgba(255,255,255,.14); }

  .photos { grid-template-columns: minmax(0,1fr); }
  .photo__frame { height: 260px; }

  .specs { padding-block: 70px; }
  .specs__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
  .specs__grid { grid-template-columns: minmax(0,1fr); gap: 40px; }

  .footer-grid { grid-template-columns: minmax(0,1fr); gap: 34px; padding-bottom: 34px; }

  /* أهداف اللمس 44px — التسليم §٦.٣. تُطبَّق على الهاتف حيث اللمس فعليّ:
     على الحاسب يبقى الشريط العلوي 46px كما تحدّده المواصفة. */
  /* ❗ سطر واحد لا ثلاثة. كان الشريط يتكوّم عموديًّا على الهاتف
     (76 بكسل ارتفاعًا، و«EN» وحدها في سطر) — 150 بكسل من الزينة
     قبل أول كلمة من المحتوى. العنوان يُخفى: مكانه التذييل، ورابط
     الطوارئ هو ما يجب أن يبقى في متناول الإبهام. */
  .topbar__addr { display: none; }
  .topbar__inner { justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 5px; }
  .topbar__side { flex: 1; justify-content: space-between; gap: 12px; }
  /* هدفا لمس كاملان: قِيس فزرّ اللغة 34 بكسل — دون الحدّ الأدنى 44. */
  .topbar__emg { flex: 1; justify-content: center; min-height: 40px; padding-block: 0; }
  .topbar__lang { min-height: 40px; }
  .brand { min-height: 44px; }
  .linkline { min-height: 44px; }
  .site-footer ul a { min-height: 44px; }
  .gate { padding-block: 22px; }
}

@media (max-width: 480px) {
  .topbar { font-size: 11.5px; }
  .topbar__emg { gap: 7px; padding-inline: 8px; }
  .topbar__lang { min-width: 36px; padding-inline: 8px; }
  /* ❗ كان هنا: «لا تخفيض للهيرو دون 520px — قيمة محدَّدة في تسليم 4a
     §٦.٣». نُقضت القاعدة عن قصد وبقياس: الصفحة الرئيسية كانت 9918
     بكسل على شاشة 375 — **12.2 شاشة** — والهيرو وحده يملأ الشاشة
     الأولى كاملةً قبل أن يبدأ أي محتوى. القيمة الآن 440.
     التسليم المرجعي وُضع لشاشة عريضة؛ ما يخدم القارئ على الهاتف
     يُقاس على الهاتف. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  /* ❗ عمود واحد لأربعة أرقام = 614 بكسل لأربع كلمات. مربّع 2×2 يعرضها
     دفعةً واحدة، ويقرأ أسرع، ويوفّر أكثر من 200 بكسل. */
  .stats__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 18px; }
  .stat:nth-child(2) { border-top: 2px solid var(--ink); }
  .stat__n { font-size: 38px; }
  .stat__l { margin-top: 10px; font-size: 12.5px; }
  .roles__aside h2, .specs__head h2, .emg__main h2 { font-size: 28px; }
}



/* ==========================================================================
   الطيّ — details/summary أصيل، بلا مكتبة وبلا مورد خارجي
   ==========================================================================
   على الشاشة الكبيرة: عنوان عادي تمامًا كما كان — لا سهم ولا مؤشّر يد.
   على الصغيرة: صفٌّ قابل للّمس بسهم يدور. المحتوى في HTML مفتوحًا دائمًا،
   وapp.js هو من يطويه — فمن عطّل جافاسكربت يرى كل شيء.
   ========================================================================== */
.fold__sum { list-style: none; display: block; }
.fold__sum::-webkit-details-marker { display: none; }
.fold__sum > h2, .fold__sum > h3 { margin: 0; }
.fold__chev { display: none; }

@media (max-width: 860px) {
  .fold__sum {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    cursor: pointer; min-height: 52px; user-select: none;
    border-bottom: 1px solid var(--rule-4);
  }
  .fold[open] > .fold__sum { border-bottom-color: transparent; }
  /* ❗ حدود **فيزيائية** لا منطقية: border-inline-end في RTL هو الحدّ
     الأيسر، فيصير السهم «‹» بدل «⌄». السهم يشير إلى أسفل في الاتجاهين
     — فهو يصف حركة الفتح لا جهة الكتابة. */
  .fold__sum::after {
    content: ''; flex: none; width: 9px; height: 9px; margin-inline-start: auto;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .25s ease;
    opacity: .55;
  }
  .fold[open] > .fold__sum::after { transform: translateY(1px) rotate(-135deg); }
  .fold__sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .fold__sum::after { transition: none; }
  }
}

/* ==========================================================================
   طبقة الهاتف — إعادة بناء الإيقاع الرأسي
   ==========================================================================
   ❗ قِيست الصفحة الرئيسية على 375: **9918 بكسل = 12.2 شاشة**. الأرقام
      لا الانطباع هي ما وجّه كل قيمة هنا. الحشوات المصمّمة لشاشة عريضة
      تتحوّل على الهاتف إلى فراغ يفصل القارئ عن التالي، لا إلى تنفّس.
   ========================================================================== */
@media (max-width: 768px) {
  /* الهيرو — 520 كان يملأ الشاشة كلّها قبل أن يبدأ المحتوى */
  .hero { height: 440px; }
  .hero h1 { font-size: 38px; margin-bottom: 16px; }
  .hero__lede { font-size: 15.5px; line-height: 1.85; margin-bottom: 24px; }
  .hero__kicker { margin-bottom: 14px; }

  .stats { padding-block: 44px 46px; }
  .roles { padding-block: 52px 54px; }
  .homenews { padding-block: 52px 56px; }
  .photos__head { margin-bottom: 26px; }
  .photo__frame { height: 220px; }
  .specs { padding-block: 52px 56px; }
  .tl { padding-block: 56px 58px; }

  /* عناوين الأقسام: 38 بكسل على شاشة 375 تأكل سطرين ونصفًا */
  .roles__aside h2, .specs__head h2, .emg__main h2, .tl__head h2,
  .homenews__head h2 { font-size: 30px; line-height: 1.15; }
  /* ❗ الاقتباس ليس عنوانًا: خمسة أسطر بارتفاع سطر 1.15 تتلاصق فتُقرأ
     كتلةً لا جملة. له قياسه وتنفّسه. */

  /* ── الخط الزمني: خمسة أعمدة في 339 بكسل = شريط بعرض 68 بكسل ──
     كل محطّة كانت عمودًا نحيلًا ارتفاعه 258 بكسل. يصير رأسيًّا:
     الخطّ الجامع ينزل على الحافّة، والنقاط عليه، والسنة بجانب نصّها. */
  .tl__head { margin-bottom: 34px; padding-inline-start: 18px; }
  .tl__track {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-start: 26px;
  }
  .tl__track::before {
    inset-inline: auto; inset-inline-start: 4px;
    top: 10px; bottom: 10px; height: auto; width: 1px;
  }
  .tl__stop {
    padding: 0 0 24px 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px; align-items: baseline;
  }
  .tl__stop:last-child { padding-bottom: 0; }
  .tl__year { height: auto; font-size: 25px; }
  .tl__dot {
    position: absolute; inset-inline-start: -26px; top: 9px;
    margin: 0; width: 9px; height: 9px;
  }
  .tl__label { margin-top: 0; max-width: none; font-size: 14px; line-height: 1.75; }

  /* ❗ ارتفاع السطر 2 صُمِّم لعمود عريض. على عمود 339 بكسل يصير الفراغ
     بين السطرين أوسع من أن تتماسك الفقرة، والفقرة تطول بلا فائدة.
     1.75 يقرأ أسهل ويكسب مئات البكسلات في الصفحة كلّها. */
  .roles__lede, .role p, .emg__lede, .prose p, .prose li,
  .newsitem__ex, .spec__lede { font-size: 15.5px; line-height: 1.75; }
  .role { padding-block: 20px; }
  .role h3 { margin-bottom: 8px; }

  /* الصور: ثلاث لقطات بارتفاع كامل تحت بعضها = شاشتان */
  .photo__frame { height: 190px; }
  .photo__cap { padding-block: 16px 22px; }

  /* ── الاختصاصات: المجموعات مطويّة، فتُقرأ البنية قبل التفاصيل ── */
  .specs__grid { gap: 0; }
  .speccol + .speccol { margin-top: 4px; }
  /* ❗ العنوان نفسه flex بحدّ سفلي خاصّ به، فينكمش داخل الـsummary
     ويحمل خطًّا ثانيًا بعرض النصّ وحده. الحدّ يعود إلى الصفّ، والعنوان
     يتمدّد ليدفع العدد إلى الطرف كما هو مقصود. */
  .speccol > .fold__sum > h3 {
    margin: 0; flex: 1; padding-bottom: 0; border-bottom: 0; gap: 12px;
  }
  .speccol ul { padding-top: 6px; padding-bottom: 18px; }

  /* ── التذييل: 855 بكسل، أطول من شاشة كاملة ── */
  .site-footer { padding-block: 40px 24px; }
  .footer-grid { gap: 26px; padding-bottom: 26px; }
  .footer__name { font-size: 19px; }
  .footer__addr { margin-top: 14px; font-size: 13.5px; line-height: 1.75; max-width: none; }
  .footer__uni { margin-top: 16px; max-width: 76px; }
  /* ❗ العنوان المطويّ فقط يفقد هامشه — لأنه صار صفّ الطيّ نفسه.
     «الإسعاف والطوارئ» ليس مطويًّا، وتصفير هامشه ألصقه بنصّه. */
  .fold__sum > h2 { margin-bottom: 0; }
  .fold[open] > .fold__sum > h2 { margin-bottom: 10px; }
  .footer__emg h2 { margin-bottom: 10px; }
  .footer__nav ul { gap: 0; padding-bottom: 10px; }
  .footer__nav a { min-height: 44px; }
  .footer__emgline { margin-bottom: 10px; font-size: 14px; }
  .footer__base { padding-top: 18px; font-size: 12px; }

  /* ── شكل التذييل على الهاتف ──────────────────────────────────
     ❗ الأعمدة الثلاثة تتكدّس فتصير قائمة نصوص متساوية الوزن: لا
        يُعرف أين تنتهي مجموعة وتبدأ أخرى، ولا أيّها الأهمّ. ثلاثة
        تدابير: خطّ فاصل بين المجموعات · صفّ الطيّ يُقرأ زرًّا بسهم
        يدور · وكتلة الطوارئ تُحاط بإطار فتُقرأ الأهمّ لا الأخيرة. */
  .footer-grid > * + * { border-top: 1px solid rgba(255,255,255,.10); padding-top: 22px; }

  .fold__sum {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 48px; cursor: pointer; list-style: none;
  }
  .fold__sum::-webkit-details-marker { display: none; }
  /* السهم مرسوم بحدَّين لا محرف أيقونة — سياسة المحتوى تمنع الموارد
     الخارجية، والمحرف يختلف رسمه بين الأنظمة. */
  .fold__sum::after {
    content: ''; width: 8px; height: 8px; flex: none; margin-inline-start: auto;
    border-inline-end: 1.5px solid var(--gold); border-block-end: 1.5px solid var(--gold);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
  }
  .fold[open] > .fold__sum::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .footer__nav a { padding-inline-start: 2px; }
  .footer__nav li + li a { border-top: 1px solid rgba(255,255,255,.06); }

  .footer__emg {
    border: 1px solid rgba(220,196,140,.28); padding: 16px 16px 18px;
    background: rgba(220,196,140,.05);
  }
  .footer__emg h2 { margin-top: 0; }
  .footer-grid > .footer__emg { padding-top: 16px; }

  .footer__uni { margin-inline-start: 0; }

  /* ❗ زرّ «تحرير هذه الصفحة» ثابت في الزاوية السفلية، فيغطّي سطر
     الحقوق على الهاتف. المساحة تُضاف **فقط حين يكون الزرّ موجودًا**
     — أي للمشرف وحده. الزائر لا يدفع ثمن فراغ لا سبب له.
     ومن لا يدعم :has() يرى التداخل كما كان: تدهور مقبول لمشرف. */
  body:has(.edentry) .site-footer { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .fold__sum::after { transition: none; }
}

/* نائب الصورة في الهيرو: يُزاح إلى الزاوية السفلية كي لا يصطدم بالعنوان.
   يبقى ظاهرًا عمدًا — يخبر المالك بأي لقطة ينقص، ويختفي وحده حين تُرفع. */
.hero__img .ph { place-items: end start; }
.hero__img .ph__hint { padding: 0 var(--pad) 26px; opacity: .55; }
@media (max-width: 768px) { .hero__img .ph__hint { font-size: 10.5px; } }

/* ==========================================================================
   الصفحات الداخلية — قالب موحّد
   ترويسة (kicker + عنوان بوزنين + سطر تعريف + خطّ ذهبي عمودي)
   ← أقسام مفصولة بخطوط ١px ← بوابات ← تذييل.
   ========================================================================== */
.pagehead { background: var(--paper); padding: 82px var(--pad) 70px; border-bottom: 1px solid var(--rule); }
.pagehead__in { border-inline-start: 2px solid var(--gold); padding-inline-start: 30px; max-width: 900px; }
.pagehead h1 { margin: 18px 0 0; font-size: 56px; line-height: 1.04; }
.pagehead__lede { margin: 22px 0 0; font-size: 19.5px; font-weight: 300; line-height: 2; color: var(--text-2); max-width: 60ch; }

.block { padding: 78px var(--pad); background: var(--paper); border-bottom: 1px solid var(--rule); }
.block--alt { background: var(--paper-2); }
.block--ink { background: var(--ink); color: #fff; border-bottom: 0; }
.block__head { margin-bottom: 42px; }
.block__head h2 { margin: 14px 0 0; font-size: 34px; letter-spacing: -.03em; }
.block--ink .block__head h2 { color: #fff; }
.block__lede { margin: 16px 0 0; font-size: 16.5px; line-height: 2; color: var(--text-2); max-width: 62ch; }
.block--ink .block__lede { color: #C3CCC6; }

/* شبكة بنود مرقّمة — تُستعمل في «عن المشفى» و«التعليم» و«المرضى» */
.items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 60px; }
.item {
  display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 22px;
  padding: 30px 0; border-top: 1px solid var(--rule-2); transition: background .35s;
}
.item:hover { background: var(--paper-2); }
.item__n { font-size: 12px; letter-spacing: .14em; color: var(--gold); padding-top: 9px; }
.item h3 { margin: 0 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.item p { margin: 0; font-size: 15.5px; line-height: 1.95; color: var(--text-2); }

/* قائمة بسيطة بخطوط فاصلة */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 17px 0; border-top: 1px solid var(--rule-2); font-size: 16.5px; line-height: 1.9; }
.rows li:last-child { border-bottom: 1px solid var(--rule-2); }

/* بطاقات الأخبار — القالب نفسه في القائمة وعلى الرئيسية */
/* ❗ الفواصل حدودٌ على البطاقات لا فجوةٌ فوق خلفية ملوّنة.
   الحيلة الشائعة (gap:1px + خلفية --rule على الحاوية) تعمل ما دامت
   الصفوف ممتلئة، لكن خبرًا واحدًا في شبكة من ثلاثة أعمدة يترك 844
   بكسل من الرمادي فارغةً بجانب البطاقة — قيس فعلًا: بطاقة 421 في
   حاوية 1265. وأوّل خبر ينشره المشفى سيكون واحدًا. */
.news { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: var(--paper); }
/* الرابط يلفّ البطاقة كلها: هدف لمس بحجم البطاقة لا بحجم سطر العنوان. */
.newsitem { background: var(--paper); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; transition: background .35s;
  border-inline-start: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.newsitem:nth-child(3n+1) { border-inline-start: 0; }
.newsitem:hover { background: var(--panel); color: var(--ink); }
/* الرمادي ثم اللون عند الحوم — المعالجة نفسها في .photo__frame،
   وهي توقيع بصري للموقع لا زخرفة موضعية. */
.newsitem__frame { position: relative; height: 208px; overflow: hidden;
  background: var(--paper-2); filter: grayscale(1) contrast(1.06); transition: filter .7s ease; }
.newsitem:hover .newsitem__frame { filter: grayscale(0) contrast(1); }
.newsitem__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsitem__frame > .ph { position: absolute; inset: 0; }
.newsitem__body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.newsitem__meta { display: flex; gap: 14px; font-size: 11px; letter-spacing: .18em; color: var(--gold-text); margin-bottom: 16px; }
.newsitem h3 { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.5; }
.newsitem p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.newsitem__more { margin-top: 20px; padding-top: 4px; font-size: 11.5px; letter-spacing: .16em;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: 12px;
  transition: gap .35s ease; }
.newsitem:hover .newsitem__more { gap: 20px; }

/* قسم الأخبار على الرئيسية — ترويسته على نمط .specs__head نفسه */
.homenews { padding: 78px var(--pad); background: var(--paper); border-bottom: 1px solid var(--rule); }
.homenews__head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 42px; }
.homenews__head h2 { margin: 18px 0 0; font-size: 56px; letter-spacing: -.035em; }

/* صفحة الخبر الواحد */
.newscover { margin: 0; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.newscover img { width: 100%; height: clamp(260px, 46vh, 520px); object-fit: cover; display: block; }
.newscover > .ph { height: clamp(260px, 46vh, 520px); }
.newscover figcaption { padding: 14px var(--pad); font-size: 12.5px; line-height: 1.8; color: var(--text-3); }
.newsbody { max-width: 68ch; }
.newsbody__foot { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); }

/* بيانات التواصل */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 60px; }
.contact__row { padding: 26px 0; border-top: 1px solid var(--rule-2); }
.contact__k { display: block; font-size: 11px; letter-spacing: .22em; color: var(--gold-text); margin-bottom: 10px; }
.contact__v { display: block; font-size: 19px; font-weight: 400; letter-spacing: -.02em; }
.contact__note { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

/* صفحة اختصاص مفرد */
.deptmeta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 44px; }
.deptmeta__cell { padding: 24px 0; border-top: 1px solid var(--rule-2); }
.deptmeta__k { display: block; font-size: 11px; letter-spacing: .22em; color: var(--gold-text); margin-bottom: 8px; }
.deptmeta__v { display: block; font-size: 18px; font-weight: 400; }

.backlink {
  display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px;
  color: var(--text-2); text-decoration: none; margin-bottom: 26px;
  transition: gap .35s, color .35s;
}
.backlink:hover { gap: 20px; color: var(--ink); }

.notice {
  border-inline-start: 3px solid var(--gold); background: var(--paper-2);
  padding: 22px 26px; font-size: 15.5px; line-height: 1.95; color: var(--text-2);
  max-width: 68ch;
}
.notice--red { border-inline-start-color: var(--red); }

@media (max-width: 1024px) {
  .items, .contact, .deptmeta { grid-template-columns: minmax(0,1fr); }
  /* ❗ الأخبار عمودان لا عمود واحد هنا. البطاقة صارت تحمل صورة، فالعمود
     الواحد على شاشة 1000 بكسل يعطي بطاقات بعرض الشاشة كاملًا وصورًا
     ضخمة — وثلاثة أخبار تملأ شاشتين. العمود الواحد يبدأ من 768. */
  .news { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .newsitem:nth-child(3n+1) { border-inline-start: 1px solid var(--rule); }
  .newsitem:nth-child(2n+1) { border-inline-start: 0; }
  .homenews { padding: 56px var(--pad); }
  .homenews__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .homenews__head h2 { font-size: 38px; }
  .newsitem__frame { height: 200px; }
}
@media (max-width: 768px) {
  .news { grid-template-columns: minmax(0,1fr); }
  .newsitem { border-inline-start: 0; }
  .newsitem__frame { height: 230px; }
  /* الحشوة تتبع --pad لا رقمًا خاصًّا: نصّ البطاقة يقف على الخطّ
     الرأسي نفسه الذي يقف عليه عنوان الصفحة فوقه. */
  .newsitem__body { padding: 24px var(--pad) 28px; }
  .pagehead { padding-block: 48px 40px; }
  .pagehead h1 { font-size: 34px; }
  .pagehead__lede { font-size: 16.5px; }
  .block { padding-block: 48px; }
  .block__head h2 { font-size: 26px; }
}

/* ❗ الأرضية هنا داكنة، فـmultiply لا يصلح — يبتلع الشعار. الشفّاف
   يندمج وحده؛ وغير الشفّاف يُخفَّف حدّه بأرضية عاجية رقيقة مضبوطة
   على شكل الشعار لا مربّع حوله. */
.footer__uni {
  margin-top: 24px; max-width: 96px; height: auto; display: block;
  opacity: .92; filter: brightness(1.02);
}

/* ==========================================================================
   وضع التحرير المباشر — لا يظهر لزائر إطلاقًا
   ========================================================================== */
.edbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px var(--pad); background: var(--gold); color: var(--ink);
  font-size: 13.5px; font-weight: 400;
}
.edbar__tag { font-weight: 600; letter-spacing: .04em; }
.edbar__hint { color: #4A3C1B; }
.edbar__spacer { margin-inline-start: auto; }
.edbar__btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  background: rgba(12,17,14,.08); color: var(--ink); text-decoration: none;
  border: 1px solid rgba(12,17,14,.22);
}
.edbar__btn:hover { background: rgba(12,17,14,.16); color: var(--ink); }
.edbar__btn--out { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.edbar__btn--out:hover { background: #000; color: var(--gold); }

/* النصّ القابل للتعديل: خطّ متقطّع خفيف لا يزحزح التخطيط */
.ed { cursor: pointer; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(201,169,97,.85); }
.ed:hover { background: rgba(201,169,97,.16); }
.ed.is-on { background: rgba(201,169,97,.3); box-shadow: 0 0 0 2px var(--gold); }
.ed:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.edpanel {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 95;
  width: min(calc(100vw - 40px), 420px);
  background: var(--panel); border: 1px solid var(--rule-2);
  box-shadow: 0 24px 60px -24px rgba(12,17,14,.5); padding: 18px;
}
.edpanel[hidden] { display: none; }
.edpanel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.edpanel__title { font-size: 15px; font-weight: 500; margin-inline-end: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edpanel__x { background: none; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--text-2); min-height: 34px; min-width: 34px; }
.edpanel__lbl { display: block; font-size: 11px; letter-spacing: .18em; color: var(--gold-text); margin-bottom: 6px; }
.edpanel__ta {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.8; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-2); padding: 10px 12px; resize: vertical;
}
.edpanel__note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.edpanel__acts { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.edpanel__acts .btn { min-height: 42px; padding-inline: 20px; font-size: 14.5px; }
.edpanel__msg { font-size: 13px; }
.edpanel__msg.is-ok { color: var(--green); }
.edpanel__msg.is-bad { color: var(--red-deep); }

/* مدخل التحرير للمشرف وهو يتصفّح الموقع */
.edentry {
  position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--gold); text-decoration: none; font-size: 14px;
  box-shadow: 0 10px 26px -10px rgba(12,17,14,.6);
}
.edentry:hover { background: #000; color: var(--gold); }

@media (max-width: 768px) {
  .edbar__hint { display: none; }
  .edpanel { inset-inline: 12px; bottom: 12px; width: auto; }
}

/* ---- أغلفة الأقسام في وضع التحرير ---- */
.edsec { position: relative; outline: 1px dashed rgba(201,169,97,.55); outline-offset: -1px; }
.edsec.is-hidden { opacity: .42; outline-color: var(--red); }
.edsec.is-busy { opacity: .6; pointer-events: none; }
.edsec__bar {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 70;
  display: flex; align-items: center; gap: 4px;
  background: var(--ink); color: var(--gold); padding: 4px 6px;
  font-size: 12px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
}
.edsec__name { padding-inline: 6px; white-space: nowrap; max-width: 26ch;
  overflow: hidden; text-overflow: ellipsis; }
.edsec__b {
  background: rgba(255,255,255,.1); border: 0; color: var(--gold);
  font: inherit; font-size: 12px; cursor: pointer;
  min-width: 30px; min-height: 30px; padding: 0 8px;
}
.edsec__b:hover { background: var(--gold); color: var(--ink); }
.edsec__b--t { min-width: 52px; }
.edsec.is-hidden .edsec__b--t { background: var(--red); color: #fff; }