/* =====================================================================
   بنو خروص — نظام التصميم
   الألوان مستمدة من: حجر الحجر الغربي، رمل الوادي، سعف النخيل،
   طين البيوت القديمة، ونحاس أواني الفلج.
   ===================================================================== */

:root {
  /* اللوحة اللونية */
  --night: #14100B;          /* ليل الجبل */
  --basalt: #221A12;         /* حجر بازلتي */
  --earth: #3A2C1F;          /* طين */
  --stone: #8E7D66;          /* حجر */
  --sand: #E8DAC0;           /* رمل الوادي */
  --paper: #FAF5EC;          /* ورق مخطوط — فاتح */
  --palm: #3D5A38;           /* أخضر نخيل */
  --palm-lt: #7A9660;        /* سعف مضاء */
  --copper: #B0703C;         /* نحاس */
  --copper-lt: #DCA063;      /* نحاس مضاء */
  --rust: #8E4B2E;

  --rule-dark: rgba(232, 218, 192, 0.16);
  --rule-light: rgba(34, 26, 18, 0.14);

  /* الطباعة */
  --display: 'Aref Ruqaa', 'Amiri', Georgia, serif;
  --kufi: 'Reem Kufi', 'Aref Ruqaa', sans-serif;
  --quote: 'Amiri', 'Aref Ruqaa', Georgia, serif;
  --body: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* ذهب الزخرفة */
  --gold-1: #F4DCA8;
  --gold-2: #D9A85C;
  --gold-3: #A6743A;
  --gold-deep: #5E3E1C;
  --ink: #0B0806;
  --naskh: 'Noto Naskh Arabic', 'Amiri', serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.87rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.4rem, 1.6rem + 4.4vw, 5.4rem);

  --wrap: 1180px;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --sec-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- الخريطة: سطوح فاتحة ورموز الطبقات ---- */
  --paper-lt: #FBF7EF;       /* قسم الخريطة — أفتح من الورق */
  --canvas: #FFFFFF;         /* لوحة المخطط */
  --canvas-line: #E4DCCB;    /* حدّ شعري */
  --canvas-grid: #EFE8DA;    /* تضاريس خافتة */
  --map-home: #9A5A28;       /* الموطن التاريخي — نحاس عميق */
  --m-sea: #DCE9EF;          /* بحر عُمان والخليج */
  --m-out: #EFEAE0;          /* خارج عُمان */
  --m-land: #FDFAF4;         /* يابسة */
  --m-mtn: #E6DAC5;          /* جبال الحجر */
  --m-mtn-ln: #CBBA9C;
  --m-sand: #F4E8CE;         /* رمال */
  --m-farm: #C6D6B4;         /* سهل زراعي */
  --m-river: #9DBECD;
  --map-sites: #3D5A38;      /* المواقع الأثرية — سعف */
  --map-mentioned: #3A4E6B;  /* وجود مذكور — أزرق حجري */
  --map-unverified: #6B5B45; /* يحتاج تحققًا — حجر */
}

/* ---------- الأساس ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.85;
  color: var(--basalt);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.35; margin: 0; }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }

:focus-visible {
  outline: 2px solid var(--copper-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--copper); color: var(--night); padding: .6rem 1rem; z-index: 200;
}
.skip:focus { inset-inline-start: 0; }

/* ---------- شريط التنقل ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 16, 11, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--sand);
}
.nav__in { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.nav__brand {
  font-family: var(--display); font-size: var(--step-1);
  text-decoration: none; white-space: nowrap; letter-spacing: .2px;
}
.nav__brand span { color: var(--copper-lt); }
.nav__links { display: flex; gap: .2rem; margin-inline-start: auto; flex-wrap: wrap; }
.nav__links a {
  text-decoration: none; font-size: var(--step--1); color: rgba(232,218,192,.72);
  padding: .45rem .6rem; border-radius: 3px; transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--sand); background: rgba(232,218,192,.08); }
.nav__toggle {
  display: none; margin-inline-start: auto; background: none; border: 1px solid var(--rule-dark);
  color: var(--sand); font-family: var(--body); font-size: var(--step--1);
  padding: .4rem .75rem; border-radius: 3px; cursor: pointer;
}

/* ---------- الواجهة الرئيسية ---------- */
.hero { position: relative; background: var(--night); color: var(--sand); overflow: hidden; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art svg { width: 100%; height: 100%; display: block; }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(232,218,192,.055) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero__in {
  position: relative; z-index: 2;
  padding-block: clamp(5rem, 4rem + 11vw, 11rem) clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__eyebrow {
  font-size: var(--step--1); letter-spacing: .32em; color: var(--copper-lt);
  margin-bottom: 1.4rem; display: flex; align-items: center; gap: .9rem;
}
.hero__eyebrow::after { content: ''; height: 1px; flex: 1; max-width: 180px; background: linear-gradient(to left, var(--copper), transparent); }
.hero h1 { font-size: var(--step-4); max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero h1 em { font-style: normal; color: var(--copper-lt); display: block; }
.hero__lede { max-width: 56ch; font-size: var(--step-1); color: rgba(232,218,192,.82); margin-top: 1.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; align-items: center; }
.hero__meta { margin-top: 3rem; font-size: var(--step--1); color: rgba(232,218,192,.5); display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.hero__caption {
  position: absolute; z-index: 2; inset-block-end: 1rem; inset-inline-start: 0; inset-inline-end: 0;
  font-size: .72rem; color: rgba(232,218,192,.42); text-align: center;
}

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.6rem; border-radius: 2px; text-decoration: none;
  font-family: var(--body); font-size: var(--step-0); cursor: pointer;
  border: 1px solid var(--copper); background: var(--copper); color: #17110A;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover { background: var(--copper-lt); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--sand); border-color: var(--rule-dark); }
.btn--ghost:hover { background: rgba(232,218,192,.08); color: var(--sand); }

/* ---------- بنية الأقسام ---------- */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--dark { background: var(--night); color: var(--sand); }
.sec--sand { background: var(--sand); }
.sec--stone { background: var(--paper-lt); color: var(--basalt); }

.sec__head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); max-width: 74ch; }
.sec__num {
  font-size: var(--step--1); letter-spacing: .3em; color: var(--copper);
  display: block; margin-bottom: .7rem;
}
.sec--dark .sec__num { color: var(--copper-lt); }
.sec__head h2 { font-size: var(--step-3); }
.sec__head p { margin: 1rem 0 0; max-width: 62ch; opacity: .82; }

/* ---------- شارات الحالة ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; line-height: 1; padding: .38rem .6rem;
  border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--verified { color: #3E6B3B; border-color: rgba(62,107,59,.4); background: rgba(62,107,59,.09); }
.chip--local { color: #9A6321; border-color: rgba(154,99,33,.4); background: rgba(154,99,33,.09); }
.chip--research { color: #6A5B49; border-color: rgba(106,91,73,.4); background: rgba(106,91,73,.08); }
.sec--dark .chip--verified { color: var(--palm-lt); border-color: rgba(122,150,96,.42); background: rgba(122,150,96,.12); }
.sec--dark .chip--local { color: var(--copper-lt); border-color: rgba(220,160,99,.42); background: rgba(220,160,99,.12); }
.sec--dark .chip--research { color: rgba(232,218,192,.62); border-color: rgba(232,218,192,.28); background: rgba(232,218,192,.06); }

/* مفتاح التصنيف */
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.legend > div { background: var(--night); padding: 1.3rem 1.4rem; }
.legend p { margin: .7rem 0 0; font-size: var(--step--1); color: rgba(232,218,192,.65); line-height: 1.7; }

/* الإسناد */
.refs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .74rem; margin-top: .9rem; }
.refs__label { opacity: .55; }
.ref {
  display: inline-block; min-width: 1.5rem; text-align: center;
  border: 1px solid var(--copper); color: var(--copper);
  padding: .1rem .35rem; border-radius: 2px; text-decoration: none; font-size: .72rem;
  transition: background .15s;
}
.ref:hover { background: var(--copper); color: var(--night); }
.sec--dark .ref { border-color: rgba(220,160,99,.5); color: var(--copper-lt); }
.pending { font-size: .74rem; opacity: .6; margin-top: .8rem; font-style: italic; }
.conflict-note {
  margin-top: .9rem; font-size: .78rem; border-inline-start: 2px solid var(--rust);
  padding-inline-start: .75rem; color: var(--rust); line-height: 1.6;
}
.sec--dark .conflict-note { color: var(--copper-lt); border-color: var(--copper); }

/* المرشّحات */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; align-items: center; }
.filters__label { font-size: var(--step--1); opacity: .55; margin-inline-end: .4rem; }
.fbtn {
  font-family: var(--body); font-size: var(--step--1); cursor: pointer;
  background: transparent; border: 1px solid var(--rule-light); color: inherit;
  padding: .45rem .95rem; border-radius: 2px; transition: all .18s;
}
.sec--dark .fbtn { border-color: var(--rule-dark); }
.fbtn:hover { border-color: var(--copper); }
.fbtn[aria-pressed="true"], .fbtn[aria-selected="true"] { background: var(--copper); border-color: var(--copper); color: #17110A; }

/* ---------- الخط الزمني: قناة الفلج ---------- */
.era { margin-bottom: 2.5rem; }
.era__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; padding-inline-start: 2.6rem; }
.era__head h3 { font-size: var(--step-1); color: var(--copper-lt); }
.era__head span { font-size: var(--step--1); opacity: .5; }

.falaj { position: relative; padding-inline-start: 2.6rem; }
.falaj::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 9px; width: 2px;
  background: linear-gradient(to bottom, rgba(220,160,99,.05), rgba(220,160,99,.55), rgba(220,160,99,.05));
}
.falaj::after {
  content: ''; position: absolute; inset-inline-start: 8px; top: 0; width: 4px; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--copper-lt), transparent);
  filter: blur(1px); opacity: .85;
  animation: flow 9s linear infinite;
}
@keyframes flow { from { top: -60px; } to { top: 100%; } }

.tl { position: relative; padding-block: .2rem 2.2rem; }
.tl__node {
  position: absolute; inset-inline-start: -2.6rem; top: .55rem;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--copper); background: var(--night);
  display: grid; place-items: center;
}
.tl__node::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-lt); }
.tl__node--local::after { background: var(--copper); opacity: .55; }
.tl__node--research::after { background: transparent; border: 1px solid rgba(232,218,192,.4); }
.tl__date {
  font-family: var(--display); font-size: var(--step-1); color: var(--sand);
  display: block; margin-bottom: .25rem;
}
.tl__title { font-size: var(--step-1); margin-bottom: .5rem; }
.tl__body { color: rgba(232,218,192,.72); max-width: 62ch; margin: 0; }
.tl__place { font-size: .74rem; color: rgba(232,218,192,.45); margin-top: .6rem; }
.tl__top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }

/* ---------- البطاقات ---------- */
.grid { display: grid; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.sec--dark .grid { background: var(--rule-dark); border-color: var(--rule-dark); }

.card { background: var(--paper); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.sec--sand .card { background: var(--sand); }
.sec--dark .card { background: var(--night); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .7rem; }
.card h3 { font-size: var(--step-1); }
.card__role { font-size: .78rem; color: var(--copper); letter-spacing: .04em; }
.sec--dark .card__role { color: var(--copper-lt); }
.card__dates {
  font-size: .78rem; opacity: .6; margin-top: .3rem; display: block;
  font-variant-numeric: tabular-nums;
}
.card p { margin: .9rem 0 0; opacity: .85; font-size: var(--step--1); line-height: 1.85; }
.card__kind {
  font-size: .7rem; letter-spacing: .18em; opacity: .45; display: block; margin-bottom: .5rem;
}
.card--empty { border-inline-start: 2px solid var(--stone); }
.empty-note {
  margin-top: 1rem; font-size: .8rem; padding: .9rem 1rem;
  border: 1px dashed var(--rule-light); color: inherit; opacity: .75; line-height: 1.7;
}
.sec--dark .empty-note { border-color: var(--rule-dark); }

/* ---------- شجرة النسب ---------- */
.lineage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.chain { list-style: none; margin: 0; padding: 0; position: relative; }
.chain li { position: relative; padding-inline-start: 2.2rem; padding-block: .55rem; }
.chain li::before {
  content: ''; position: absolute; inset-inline-start: 7px; top: 0; bottom: 0; width: 1px;
  background: var(--rule-light);
}
.chain li:first-child::before { top: 50%; }
.chain li:last-child::before { bottom: 50%; }
.chain li::after {
  content: ''; position: absolute; inset-inline-start: 3px; top: calc(50% - 4px);
  width: 9px; height: 9px; border: 1px solid var(--copper); background: var(--sand); transform: rotate(45deg);
}
.chain__name { font-family: var(--display); font-size: var(--step-1); }
.chain li:first-child .chain__name { color: var(--copper); font-size: var(--step-2); }
.chain__note { font-size: .78rem; opacity: .62; display: block; }
.chain__alt { font-size: .78rem; color: var(--rust); display: block; }

.warnbox {
  border: 1px solid var(--copper); background: rgba(176,112,60,.07);
  padding: 1.4rem 1.5rem;
}
.warnbox h3 { font-size: var(--step-1); margin-bottom: .8rem; color: var(--rust); }
.warnbox p { margin: 0 0 .9rem; font-size: var(--step--1); line-height: 1.85; }
.warnbox p:last-child { margin-bottom: 0; }

/* ---------- الخريطة ---------- */
.map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
.map__canvas {
  position: relative; border: 1px solid var(--canvas-line);
  background: var(--canvas);
  aspect-ratio: 25 / 18; overflow: hidden;
}
.map__canvas svg.terrain { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- طبقة الأساس: Natural Earth 1:10m ---- */
.m-sea   { fill: var(--m-sea); stroke: none; }
.m-out   { fill: var(--m-out); stroke: #D8CFBE; stroke-width: .6; }
.m-land  { fill: var(--m-land); stroke: #C0AE90; stroke-width: 1.2; }
.m-sand  { fill: var(--m-sand); stroke: none; }
.m-mtn   { fill: var(--m-mtn); stroke: var(--m-mtn-ln); stroke-width: .7; }
.m-mtn-bg{ fill: #EDE4D2; stroke: none; }
.m-farm  { fill: var(--m-farm); stroke: none; }
.m-river { fill: none; stroke: var(--m-river); stroke-width: .9; }
.m-frame { fill: none; stroke: #B8A88C; stroke-width: 1.2; }
.m-zoom  { fill: none; stroke: var(--map-home); stroke-width: 1.6; stroke-dasharray: 5 4; }
.m-tie   { fill: none; stroke: var(--map-home); stroke-width: .9; stroke-dasharray: 3 4; opacity: .55; }
.m-terrace { fill: none; stroke: var(--m-farm); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.m-wadi  { fill: none; stroke: var(--map-sites); stroke-width: 2.2; opacity: .6; stroke-linecap: round; stroke-linejoin: round; }

.map__pins { position: absolute; inset: 0; }

/* عناوين اللوحات */
.map__cap {
  position: absolute; font-size: .72rem; letter-spacing: .04em;
  color: rgba(34,26,18,.62); background: rgba(255,255,255,.78);
  padding: .12rem .45rem; border-radius: 2px; pointer-events: none;
}
.map__cap--a { left: 62%; top: 1.2%; }
.map__cap--b { left: 4%; top: 1.2%; }
.map__cap--c { left: 10%;  top: 54%; }

/* موضع تقريبي: حلقة متقطعة — الشكل يحمل المعنى لا اللون */
.pin--approx .pin__dot {
  background: var(--canvas); border-style: dashed !important;
  border-width: 2px !important; border-color: var(--map-unverified) !important;
}
.pin--approx .pin__label { opacity: .82; font-style: italic; }

/* مفتاح التضاريس */
.terrainkey { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: var(--step--1); }
.terrainkey li { display: flex; align-items: center; gap: .6rem; }
.tk { width: 15px; height: 11px; flex: none; border-radius: 2px; border: 1px solid rgba(34,26,18,.16); }
.tk--mtn  { background: var(--m-mtn); }
.tk--farm { background: var(--m-farm); }
.tk--sand { background: var(--m-sand); }
.tk--sea  { background: var(--m-sea); }
.tk--wadi { background: var(--map-sites); height: 3px; border: 0; }

/* العلامة نقطة إرساء بلا أبعاد: الإحداثيّ يقع على مركزها تمامًا.
   الاتجاه هنا هندسي لا نصّي — left يقيس من يسار الخريطة في الحالين. */
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 0; height: 0; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--basalt); font-family: var(--body);
}
.pin__dot {
  position: absolute; inset-inline: auto; left: -5.5px; top: -5.5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--map-home); border: 1.5px solid var(--map-home);
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px rgba(154,90,40,.20);
}
.pin__label {
  position: absolute; top: calc(-.72em + var(--ldy, 0em)); left: 11px; white-space: nowrap;
  direction: rtl; font-size: .74rem; line-height: 1.4;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px var(--canvas);
  text-shadow:
     1px  0 0 var(--canvas), -1px  0 0 var(--canvas),
     0  1px 0 var(--canvas),  0 -1px 0 var(--canvas);
}
.pin--flip .pin__label { left: auto; right: 11px; }

/* خط وصل رفيع حين تُزاح التسمية عن نقطتها */
.pin__tie {
  position: absolute; left: 7px; top: 0; width: 1px;
  height: calc(var(--ldy, 0em) * -1); background: var(--map-unverified); opacity: .45;
}
.pin__tie[style], .pin__tie { transform-origin: top; }
.pin--flip .pin__tie { left: auto; right: 7px; }

/* الشكل يحمل المعنى مع اللون، لا اللون وحده */
.pin[data-layer="sites"] .pin__dot {
  background: var(--map-sites); border-color: var(--map-sites);
  border-radius: 2px; transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px rgba(61,90,56,.20);
}
.pin[data-layer="mentioned"] .pin__dot {
  background: var(--canvas); border: 2px solid var(--map-mentioned);
  box-shadow: 0 0 0 3px var(--canvas);
}
.pin[data-layer="unverified"] .pin__dot {
  background: var(--canvas); border: 2px dashed var(--map-unverified);
  box-shadow: 0 0 0 3px var(--canvas);
}
.pin[aria-pressed="true"] { z-index: 6; }
.pin[aria-pressed="true"] .pin__label { font-weight: 500; color: var(--map-home); }
.pin[aria-pressed="true"] .pin__dot { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 7px rgba(154,90,40,.28); }
.pin[hidden] { display: none; }

.map__side { display: flex; flex-direction: column; gap: 1.2rem; }
.layers { display: flex; flex-direction: column; gap: .1rem; }
.layer {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .6rem .2rem; border-bottom: 1px solid var(--rule-light); font-size: var(--step--1);
}
.layer input { accent-color: var(--map-home); width: 15px; height: 15px; }
.layer__key { width: 11px; height: 11px; flex: none; }
.layer__key--home { border-radius: 50%; background: var(--map-home); }
.layer__key--sites { background: var(--map-sites); transform: rotate(45deg); }
.layer__key--mentioned { border-radius: 50%; border: 2px solid var(--map-mentioned); }
.layer__key--unverified { border-radius: 50%; border: 2px dashed var(--map-unverified); }

.map__detail {
  border: 1px solid var(--canvas-line); background: var(--canvas);
  padding: 1.2rem 1.3rem; min-height: 170px;
}
.map__detail h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.map__detail p { font-size: var(--step--1); color: rgba(34,26,18,.78); margin: .6rem 0 0; }
.map__hint { font-size: .78rem; opacity: .62; }

/* ---------- الشعر ---------- */
.poem { background: var(--paper); padding: 1.6rem 1.5rem; }
.poem__title { font-family: var(--naskh); font-size: var(--step-2); }
.poem__author { font-size: var(--step--1); color: var(--copper); margin-top: .3rem; }
.poem__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .74rem; opacity: .6; margin-top: .8rem; }
.poem__rules { margin-top: 1.2rem; padding: 1.1rem 1.2rem; background: rgba(142,125,102,.07); border: 1px dashed var(--rule-light); }
.poem__lines { display: flex; flex-direction: column; gap: .85rem; margin-bottom: .9rem; }
.poem__lines i { display: block; height: 1px; background: repeating-linear-gradient(to left, var(--rule-light) 0 12px, transparent 12px 20px); }
.poem__lines i:nth-child(2) { width: 82%; }
.poem__lines i:nth-child(3) { width: 64%; }
.poem__state { font-size: .8rem; opacity: .7; margin: 0; font-family: var(--naskh); }

/* ---------- الجداول ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule-light); }
.sec--dark .table-wrap { border-color: var(--rule-dark); }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 560px; }
th, td { text-align: start; padding: .95rem 1.1rem; border-bottom: 1px solid var(--rule-light); vertical-align: top; }
.sec--dark th, .sec--dark td { border-color: var(--rule-dark); }
th { font-weight: 600; font-size: .78rem; letter-spacing: .1em; opacity: .6; }
tr:last-child td { border-bottom: 0; }

/* ---------- استمارة الأرشيف ---------- */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .78rem; opacity: .65; }
.field input, .field select, .field textarea {
  background: rgba(232,218,192,.05); border: 1px solid var(--rule-dark); color: var(--sand);
  padding: .7rem .8rem; font-family: var(--body); font-size: var(--step--1); border-radius: 2px;
}
.field--full { grid-column: 1 / -1; }
.form__note { grid-column: 1 / -1; font-size: .78rem; opacity: .55; margin: 0; }

/* ---------- التذييل ---------- */
.foot { background: #0E0B07; color: rgba(232,218,192,.6); padding-block: 3.5rem 2.5rem; font-size: var(--step--1); }
.foot__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.foot h3 { font-size: var(--step-0); color: var(--sand); margin-bottom: .8rem; }
.foot a { color: rgba(232,218,192,.6); text-decoration: none; display: block; padding: .18rem 0; }
.foot a:hover { color: var(--copper-lt); }
.foot__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); font-size: .76rem; opacity: .6; }

/* ---------- صفحة المصادر ---------- */
.page-head { background: var(--night); color: var(--sand); padding-block: clamp(4rem, 3rem + 6vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-head h1 { font-size: var(--step-3); max-width: 20ch; }
.page-head p { max-width: 62ch; color: rgba(232,218,192,.72); margin-top: 1.2rem; }
.src { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding-block: 1.6rem; border-bottom: 1px solid var(--rule-light); }
.src__id { font-family: var(--display); font-size: var(--step-2); color: var(--copper); line-height: 1; }
.src h3 { font-size: var(--step-1); }
.src__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .78rem; opacity: .6; margin-top: .4rem; }
.src__url { font-size: .76rem; color: var(--copper); word-break: break-all; display: inline-block; margin-top: .7rem; }
.src:target { background: rgba(176,112,60,.08); }

/* ---------- الجوال ---------- */
@media (max-width: 900px) {
  .lineage, .map { grid-template-columns: 1fr; }
  /* على الشاشات الضيّقة تُخفى التسميات بدل أن تُقصّ نصفَ ظاهرة:
     العلامة تكبر لتُلمس بالإصبع، والاسم يظهر في البطاقة أسفلها. */
  .pin__label, .pin__tie { display: none; }
  .pin__dot { left: -7px; top: -7px; width: 14px; height: 14px; }
  .pin::after { content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; }
  .map__cap { font-size: .62rem; }
  .map__canvas { aspect-ratio: 25 / 18; }
}
@media (max-width: 720px) {
  .nav__links {
    display: none; position: absolute; top: 62px; inset-inline: 0;
    background: var(--night); border-bottom: 1px solid var(--rule-dark);
    flex-direction: column; padding: .6rem 4vw 1rem;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: .7rem .2rem; border-bottom: 1px solid var(--rule-dark); }
  .nav__toggle { display: block; }
  .pin__label { display: none; }
  .pin__dot { width: 14px; height: 14px; }
  .hero__meta { flex-direction: column; gap: .3rem; }
  .card { padding: 1.3rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
  .nav, .hero__art, .filters, .btn { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   إضافات نسخة الصفحات المتعددة
   ===================================================================== */

/* القسم النشط في الشريط */
.nav__links a.is-active {
  color: var(--copper-lt);
  background: rgba(220,160,99,.10);
  box-shadow: inset 0 -2px 0 var(--copper);
}

/* عدّادات الواجهة */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.counter {
  background: var(--sand);
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.counter strong {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--copper);
}
.counter span {
  font-size: var(--step--1);
  opacity: .78;
  line-height: 1.6;
}

/* بطاقات فهرس الأقسام */
.card--link {
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, transform .18s ease;
}
.card--link:hover {
  background: var(--paper);
  transform: translateY(-2px);
}
.card--link h3 { color: var(--copper); }

/* تنقل بين الصفحات */
.pagenav {
  background: var(--basalt);
  color: var(--sand);
  border-block-start: 1px solid var(--rule-dark);
}
.pagenav__in {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  flex-wrap: wrap;
}
.pagenav__link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  color: var(--sand);
  padding: .6rem .1rem;
}
.pagenav__link span {
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(232,218,192,.5);
}
.pagenav__link strong {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--copper-lt);
}
.pagenav__link:hover strong { color: var(--sand); }
.pagenav__link--next { text-align: end; }

/* =====================================================================
   تحديث الطباعة — كوفي للعناصر الوظيفية، نسخ للمتن
   ===================================================================== */
.nav__brand,
.nav__links a,
.nav__toggle,
.sec__num,
.hero__eyebrow,
.fbtn,
.btn,
.chip,
.card__kind,
.card__dates,
.refs__label,
.filters__label,
.layer,
.pin__label,
.src__meta,
th {
  font-family: var(--kufi);
  font-weight: 500;
}

.sec__head h2,
.card h3,
.era__head h3,
.tl__title,
.foot h3,
.poem__title,
.src h3 {
  font-family: var(--display);
}

.tl__date { font-family: var(--kufi); letter-spacing: 0; }

/* =====================================================================
   إضافات نسخة الأرشفة: الروابط الدائمة، صناديق الاستشهاد، القوائم النصية
   لا تُعدَّل الألوان ولا الخطوط — تُعاد استعمال متغيرات النظام كما هي.
   ===================================================================== */

.permalink{
  display:inline-block;margin-top:.9rem;font-size:.78rem;letter-spacing:.02em;
  color:var(--gold,#D9A85C);text-decoration:none;border-bottom:1px solid transparent;
  opacity:.75;transition:opacity .18s ease,border-color .18s ease;
}
.permalink:hover,.permalink:focus-visible{opacity:1;border-bottom-color:currentColor}

.verified-on{
  margin:.55rem 0 0;font-size:.72rem;opacity:.5;letter-spacing:.02em;
}

.crumbs{
  font-size:.8rem;opacity:.6;margin-bottom:1.4rem;
}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.crumbs a:hover{border-bottom-color:currentColor}

.cite{
  margin-top:2.2rem;padding:1.6rem 1.5rem;
  border:1px solid rgba(217,168,92,.28);border-radius:.5rem;
  background:rgba(217,168,92,.045);
}
.cite h3{margin:0 0 .9rem;font-size:1rem;letter-spacing:.01em}
.cite__block{margin:1rem 0;position:relative}
.cite__kind{
  display:block;font-size:.72rem;opacity:.55;margin-bottom:.4rem;letter-spacing:.04em;
}
.cite pre{
  margin:0;padding:.85rem 1rem;overflow-x:auto;
  background:rgba(0,0,0,.22);border-radius:.35rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;line-height:1.75;direction:ltr;text-align:left;
  white-space:pre-wrap;word-break:break-word;
}
.cite__copy{
  margin-top:.5rem;font-size:.72rem;padding:.3rem .8rem;
}
.cite__note{font-size:.76rem;opacity:.6;margin:.7rem 0 0;line-height:1.8}
.cite__note code{
  direction:ltr;display:inline-block;font-size:.72rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;
}

.villages__note{font-size:.85rem;opacity:.68;margin:0 0 1.2rem;line-height:1.9}
.villages{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.55rem;
}
.villages li{
  padding:.55rem .8rem;font-size:.85rem;
  border:1px solid rgba(255,255,255,.09);border-radius:.35rem;
  background:rgba(255,255,255,.02);
}

.map__list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.map__list li{
  padding:1.1rem 1.2rem;border:1px solid var(--rule-light);
  border-radius:.45rem;background:var(--canvas);
}
.map__list li strong{font-size:1rem;margin-inline-end:.6rem}
.map__list li p{margin:.6rem 0 0;font-size:.88rem;line-height:1.9;opacity:.82}

@media print{
  .nav,.pagenav,.filters,.cite__copy,.nav__toggle{display:none!important}
  body{background:#fff;color:#111}
  .sec,.sec--dark{background:none!important}
  .card,.tl,.src,.poem{break-inside:avoid;border-color:#ccc}
  .permalink::after{content:" (" attr(href) ")";font-size:.7em;opacity:.6}
}


/* =====================================================================
   القسم التاسع: التحقيق في كتب الأنساب — أنماط إضافية فقط
   لا يُعدَّل أي متغيّر أو قاعدة قائمة؛ كل ما يلي يعيد استعمال نظام
   الألوان والخطوط كما هو.
   ===================================================================== */

.chainquote{
  font-family:var(--font-serif,'Amiri',serif);
  font-size:var(--step-0);line-height:2.05;
  margin:.9rem 0 1.1rem;padding:1rem 1.1rem;
  border-inline-start:2px solid var(--gold,#D9A85C);
  background:rgba(217,168,92,.06);border-radius:0 .35rem .35rem 0;
}
.sec--sand .chainquote{background:rgba(120,86,40,.07)}

.via{
  font-size:.76rem;opacity:.6;margin:.7rem 0 0;letter-spacing:.01em;
}

.was{
  margin:.5rem 0 0;padding:.8rem 1rem;
  border:1px dashed var(--rule-dark,rgba(255,255,255,.18));
  border-radius:.35rem;opacity:.72;
  text-decoration-line:line-through;text-decoration-thickness:1px;
  text-decoration-color:rgba(180,60,50,.45);
}
.sec--sand .was{border-color:var(--rule-light,rgba(0,0,0,.14))}

ol.steps{
  margin:1rem 0 0;padding-inline-start:1.3rem;
}
ol.steps li{
  margin-bottom:.7rem;line-height:1.95;font-size:var(--step--1);
}
ol.steps li::marker{color:var(--gold,#D9A85C);font-weight:700}

table caption{
  caption-side:top;text-align:start;
  padding:.9rem 1rem;font-size:.8rem;opacity:.62;letter-spacing:.02em;
}
td.pages{
  white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:var(--font-serif,'Amiri',serif);font-size:1.05em;
}

@media print{
  .chainquote{background:none;border-inline-start-color:#999}
  .was{opacity:1}
}

/* ---------- بيان المصدر في صفحة النسب ---------- */
.srcgrid{display:grid;gap:.75rem;margin:0 0 1.1rem}
.srcrow{
  display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.9rem;
  align-items:start;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule-dark,rgba(255,255,255,.14));
}
.srcrow:last-child{border-bottom:0;padding-bottom:0}
.srcrow dt{
  font-family:var(--display);font-size:.8rem;letter-spacing:.02em;
  color:var(--copper);margin:0;
}
.srcrow dd{margin:0;font-size:var(--step--1);line-height:1.85}
.sec--sand .srcrow{border-bottom-color:var(--rule-light,rgba(0,0,0,.12))}
@media (max-width:560px){
  .srcrow{grid-template-columns:1fr;gap:.25rem}
}

/* جدول التدقيق: عمود «ما في النسخة الرقمية» يُعرض بخط أحادي ليبين التصحيف */
#esaafReadings td:first-child{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;direction:rtl;
}

/* ---------- عدّاد الزوار ---------- */
.visits{white-space:nowrap;font-variant-numeric:tabular-nums}
.visits[hidden]{display:none}

@media print{
  .visits{display:none}
}