/* ============================================================
   VENTURA — components
   ------------------------------------------------------------
   Logical properties only. No left, no right, no margin-left.
   One stylesheet serves both directions, because a second
   stylesheet is a second place for a bug to hide.
   ============================================================ */

/* ---------- 1. BILINGUAL DOM ------------------------------- */
/* Both languages ship in the HTML so search engines read both.
   CSS hides the inactive one. No script injects copy, so a page
   with a failed script still reads correctly.                  */
html[lang="ar"] [data-only="en"] { display: none !important; }
html[lang="en"] [data-only="ar"] { display: none !important; }

/* ---------- 1ب. اتجاه العربية ومحاذاتها --------------------- */
/* العربية تُحاذى يميناً أو وسطاً، ولا شيء ثالث.
   والمصيدة أن text-align: end يعني اليسار في اتجاه RTL — فبدا صحيحاً في
   الكود، وحاذى الأسعار والإجماليات يساراً في صفحة عربية. هذه القاعدة تُصلح
   أي موضع يفوتنا، و build/check-links.py يفشل على end في أي ملف.

   و start هي الكلمة الصحيحة لا right: في RTL تعني اليمين وفي LTR اليسار،
   فالقاعدة واحدة تخدم الاتجاهين. وكتابة right هنا كانت ستعمل وتُفشل الفحص
   بحقّ — لأن ملفاً واحداً يخدم الاتجاهين، ومن كتب right مرّة كتبها ثانية في
   موضع لا يقصد فيه العربية. */
html[dir="rtl"] { text-align: start; }
html[dir="rtl"] dd,
html[dir="rtl"] th,
html[dir="rtl"] td,
html[dir="rtl"] [class*="total"],
html[dir="rtl"] [class*="price"] { text-align: start; }
html[dir="rtl"] .center,
html[dir="rtl"] .slot,
html[dir="rtl"] .stepper input { text-align: center; }

/* تباعد الحروف يفكّ الكلمة العربية، وحروفها لا كبيرة ولا صغيرة.
   و.eyebrow مُصلَح في brand.css عند تعريفه، فلا يُكرَّر هنا. */
html[lang="ar"] .fact-l,
html[lang="ar"] .foot-h,
html[lang="ar"] .wz-steps li,
html[lang="ar"] .tag { letter-spacing: 0; text-transform: none; }

/* ---------- 2. NUMBERS ------------------------------------- */
/* Digits, times, ranges, prices and phone numbers are isolated.
   Without this, an Arabic paragraph reorders 08:00 - 18:00 and
   +968 7245 6333 on screen while the source looks right.        */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-latin);
}

/* ---------- 3. LAYOUT ------------------------------------- */
.wrap {
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section-tint {
  background-color: var(--sand-soft);
  /* The topographic contour pattern is part of the identity, so it belongs in
     the stylesheet rather than being pasted into pages one at a time. */
  background-image: url("../assets/topo-pattern.svg");
  /* نمطٌ واحد يغطّي القسم بدل تكرار صغير: خطوط الكنتور تُقرأ خريطةً عند هذا
     المقياس، وتُقرأ نسيجاً عند التكرار. والقيم من المالك. */
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  position: relative;
}
/* نمط الكنتور في كل قسم بشفافية خفيفة — نسيج العلامة لا زخرفة تُضاف. */
.section-topo { position: relative; isolation: isolate; }
.section-topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("../assets/topo-pattern.svg");
  background-size: 620px auto;
  filter: invert(1);
  opacity: .06;
  pointer-events: none;
}
.section-inverse { background: var(--bg-inverse); color: var(--ink-inverse); }
.section-inverse .lead { color: var(--ink-inverse-muted); }

.prose { max-inline-size: var(--maxw-text); }
.prose p { margin-block: 0 var(--s-4); line-height: var(--lh-body); }
.prose h2 { margin-block: var(--s-7) var(--s-3); }
.prose h2:first-child { margin-block-start: 0; }

.lead { font-size: var(--fs-lead); color: var(--ink-muted); max-inline-size: 60ch; }
.fine { font-size: var(--fs-body-sm); color: var(--ink-muted); margin-block-start: var(--s-4); }
.muted { color: var(--ink-muted); }
.eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-block-end: var(--s-3);
}

/* ---------- 4. SKIP LINK ---------------------------------- */
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4);
  z-index: 100; background: var(--accent); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
}
.skip-link:focus { inset-block-start: var(--s-3); }

/* ---------- 5. HEADER ------------------------------------- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.head-row {
  display: flex; align-items: center; gap: var(--s-5);
  min-block-size: var(--header-h);
}
.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { display: block; block-size: 45px; inline-size: auto; }
.nav { display: flex; gap: var(--s-5); flex: 1 1 auto; }
.nav-link {
  font-size: var(--fs-body-sm); color: var(--ink); text-decoration: none;
  padding-block: var(--s-2); border-block-end: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.nav-link:hover { border-block-end-color: var(--accent); }
.nav-link[aria-current="page"] { border-block-end-color: var(--accent); font-weight: 500; }
.head-side { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.lang-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); font: inherit; font-size: var(--fs-body-sm);
  color: var(--ink); cursor: pointer;
}
.menu-btn { display: none; background: none; border: 0; cursor: pointer; padding: var(--s-2); }
.menu-btn span { display: block; inline-size: 22px; block-size: 2px; background: var(--ink); margin-block: 4px; }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  /* القائمة تُفتح كاملة الشاشة لا قائمة صغيرة معلّقة: الإصبع تحتاج مساحة،
     والقائمة المعلّقة على هاتف تُغلق بالخطأ عند أول تمرير.

     و 100dvh لا 100vh: على متصفّح الهاتف يتقلّص شريط العنوان عند التمرير،
     و vh يقيس الحالة الكبيرة فيبقى آخر عنصرين تحت الحافة لا يُصل إليهما.
     وهذا هو نصف سبب أن القائمة «لا تظهر بالكامل».                          */
  .nav {
    position: fixed; inset-block-start: var(--header-h); inset-inline: 0;
    max-block-size: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; gap: 0; background: var(--bg);
    border-block-end: 1px solid var(--line);
    padding: var(--s-4) var(--gutter) var(--s-6);
    box-shadow: var(--sh-3);
  }
  .nav:not(.is-open) { display: none; }
  .nav-link {
    padding-block: var(--s-4); border-block-end: 1px solid var(--line);
    font-size: var(--fs-lead);
  }
  .nav-link:last-child { border-block-end: 0; }

  /* واتساب واللغة ينزلان إلى القائمة. كانا في الترويسة مع الشعار وزرّ
     القائمة، فازدحم السطر على ٣٦٠ بكسل وخرج أحدهما عن الشاشة. */
  .head-side .btn-ghost { display: none; }
  .nav .nav-actions { display: flex; gap: var(--s-3); padding-block-start: var(--s-5); }
}
.nav-actions { display: none; }
@media (max-width: 900px) { .nav .nav-actions { display: flex; } }

/* ---------- 6ب. شريط الحجز الملتصق على الهاتف ------------ */
/* السعر والزرّ أسفل الشاشة بعد أن يمرّ الزائر البانر، ويُختفي عند المعالج
   نفسه — زرّ يقود إلى ما هو أمامك بالفعل يشوّش لا يساعد.

   والظهور يعتمد على صنف يضيفه js/main.js. فمن لا جافاسكربت لديه لا يرى
   الشريط، ويبقى زرّ الحجز في البانر وفي المعالج — لا شيء يُفقد.           */
.book-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: none; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  padding-block-end: max(var(--s-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform var(--t) var(--ease-enter);
}
.book-bar.is-up { transform: none; }
.book-bar .card-price { font-size: var(--fs-h4); }
@media (max-width: 900px) { .book-bar { display: flex; } }

/* ---------- 6. BUTTONS ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 500;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.btn-primary:hover { background: var(--terracotta-dk); }
/* الحدّ الرملي أظهر من الحدّ الشفيف على سطح داكن، فالزرّ الثانوي يُرى. */
.btn-ghost {
  border-color: rgba(219, 198, 161, .34); color: var(--ink); background: transparent;
}
.btn-ghost:hover { border-color: var(--sand); }
.section-inverse .btn-ghost { border-color: var(--line-dark); color: var(--ink-inverse); }
.btn-sm { padding: var(--s-2) var(--s-4); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }

/* ---------- 7. ICONS ------------------------------------- */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ic { inline-size: 24px; block-size: 24px; flex: 0 0 auto; color: var(--accent); }

/* ---------- 8. HERO ------------------------------------- */
/* البانر بارتفاع مقصود: ٨٠vh على الهاتف و٩٠vh على الحاسب، لا ارتفاع
   يقرّره الحشو وحده. وكلمة VENTURA خلف النصّ بحدّ رملي رقيق كما في الهوية. */
.hero {
  position: relative; background: var(--bg); color: var(--ink-inverse);
  min-block-size: 80vh; display: grid; align-items: end;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { min-block-size: 90vh; } }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* الصورة تُرى. وكانت بشفافية ٦٠٪ تحت تدرّج يبدأ صلباً من الأسفل إلى ٣٤٪، وقد
   جعلنا المحتوى في الأسفل — فبقيت الصورة مطفأة في ثلثها وباهتة فوقه، وقرأها
   الناظر «صورة اختفت». والصواب: صورة شبه كاملة، وتدرّجٌ يصلب في آخر مسافة
   تحت النصّ وحدها. */
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .92; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 74%, transparent) 18%,
    color-mix(in srgb, var(--bg) 22%, transparent) 44%,
    transparent 66%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding-block: clamp(56px, 9vw, 120px);
  max-inline-size: 46rem;
}
.hero-title { font-size: var(--fs-h1); line-height: var(--lh-tight); margin-block: 0 var(--s-4); }
.hero .lead { color: var(--ink-inverse-muted); }
.hero-text { background: var(--bg-raised); min-block-size: 0; align-items: center; }
.hero-text::after { content: none; }

/* الكلمة النصّية خلف المحتوى: حدٌّ رملي رقيق بشفافية ٧٪ ولا حشو لها. */
.hero-word {
  position: absolute; inset-block-end: -.12em; inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--font-latin); font-weight: 700;
  font-size: clamp(5rem, 19vw, 20rem); line-height: .8;
  letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(219, 198, 161, .07);
  pointer-events: none; user-select: none; white-space: nowrap;
  z-index: 0;
}
@media (max-width: 640px) { .hero-word { display: none; } }

/* ---------- 9. CARDS ----------------------------------- */
.cards {
  display: grid; gap: var(--s-5); margin-block-start: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--sh-1);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
/* الحدّ يتحوّل رملياً والصورة تكبر داخل إطارها. البطاقة نفسها لا ترتفع
   كثيراً — حركة بمقدار سطر تُقرأ حياةً، وبمقدار أكثر تُقرأ اهتزازاً. */
.card:hover, .card:focus-visible {
  box-shadow: var(--sh-2); transform: translateY(-3px);
  border-color: rgba(219, 198, 161, .38);
}
.card-media { overflow: hidden; }
.card-img {
  inline-size: 100%; aspect-ratio: 3 / 2; block-size: auto; object-fit: cover;
  display: block; transition: transform var(--t-slow) var(--ease-out);
}
.card:hover .card-img { transform: scale(1.03); }
.card-body { padding: var(--s-5); flex: 1 1 auto; }
/* بطاقة بلا صورة — الأرجوحة حتى تصل صورتها — كان نصّها يعلق في أعلاها
   وتحته فراغ بطول الصورة الغائبة. فيُوسَّط النصّ عمودياً، فتبدو البطاقة
   مقصودة لا ناقصة. */
.card:not(:has(.card-media)) .card-body {
  display: flex; flex-direction: column; justify-content: center;
}
.card-body h3 { margin-block: var(--s-3) var(--s-2); color: var(--sand); }
.card-place {
  font-size: var(--fs-eyebrow); color: var(--ink-muted);
  margin-block: var(--s-3) 0;
}
/* السعر والزرّ في سطر واحد، ويلتفّان إلى سطرين إن ضاق العرض.
   وكان الزرّ يُسحق: السعر بحجم fs-h3 ونطاقٌ فيه رقمان وعملتان يأخذ العرض
   كلّه، والزرّ مرنٌ افتراضياً فتقلّص حتى صار دائرةً مقطوعة تقرأ «اح الآ».
   فالزرّ الآن لا يتقلّص ولا ينكسر نصّه، والسعر هو الذي يتراجع.             */
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--line);
}
.card-cta { flex: 0 0 auto; white-space: nowrap; }
/* السعر بطل البطاقة لا سطر فيها: رملي ذهبي، ووزن ٧٠٠. والحجم يتنفّس مع
   عرض البطاقة، فنطاقٌ من رقمين لا يدفع الزرّ خارجها. */
.card-price {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  flex: 1 1 auto; min-inline-size: 0;
  font-size: clamp(1.05rem, .82rem + .7vw, var(--fs-h3));
  font-weight: 700; color: var(--sand); line-height: 1.15;
}
.card-price .sep { color: var(--ink-muted); font-size: .6em; }
.card-price .price-cur { color: var(--ink-muted); font-size: .5em; }
.card-price .price { white-space: nowrap; }
.card-go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent); font-size: var(--fs-body-sm); font-weight: 500;
}
.card-go svg { inline-size: 18px; block-size: 18px; }
/* السهم يشير إلى جهة القراءة، فينقلب مع الاتجاه بلا قاعدة ثانية. */
html[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.tag {
  font-size: var(--fs-body-sm); color: var(--olive);
  background: color-mix(in srgb, var(--olive) 12%, transparent);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
}

/* ---------- 10. OPTIONS -------------------------------- */
.opts { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }
.opt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.opt-main { flex: 1 1 20rem; }
.opt-main h3 { margin-block: 0 var(--s-2); }
.opt-dur {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-body-sm); color: var(--ink-muted); margin-block: 0 var(--s-2);
}
.opt-price { font-size: var(--fs-h3); font-weight: 700; }
.price { display: inline-flex; align-items: baseline; gap: .25em; }
.price-cur { font-size: .62em; color: var(--ink-muted); }

/* ---------- 11. FACTS / STEPS -------------------------- */
.facts {
  list-style: none; padding: 0; margin-block-start: var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.fact {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-3);
  align-items: start; padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card);
}
.fact .ic { grid-row: span 2; }
.fact-l { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.fact-v { font-size: var(--fs-body-sm); }

.steps { margin-block-start: var(--s-6); padding-inline-start: var(--s-6); max-inline-size: var(--maxw-text); }
.steps li { margin-block-end: var(--s-4); line-height: var(--lh-body); }

/* ---------- 12. GALLERY / POSTS ------------------------ */
.gallery, .posts {
  display: grid; gap: var(--s-4); margin-block-start: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; }
.gallery img { inline-size: 100%; block-size: 220px; object-fit: cover; display: block; }

/* المعرض يُمرَّر أفقياً على الهاتف لا يمدّ الصفحة: شبكة من ثمان صور تصير
   شريطاً طويلاً يدفع كل ما بعده إلى الأسفل. و scroll-snap يجعل التمرير
   يتوقّف عند صورة كاملة لا بين صورتين. */
@media (max-width: 760px) {
  .gallery {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure {
    flex: 0 0 78%; scroll-snap-align: start;
  }
}
.post-card {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--t) var(--ease);
}
.post-card:hover, .post-card:focus-visible { border-color: rgba(219, 198, 161, .38); }
.post-card img { inline-size: 100%; block-size: 170px; object-fit: cover; }
.post-card .pc-body { padding: var(--s-4); }
.post-card h3 { font-size: var(--fs-h4); margin-block: var(--s-2); color: var(--sand); }
.post-meta { font-size: var(--fs-body-sm); color: var(--ink-muted); }

/* ---------- 13. FAQ ----------------------------------- */
.faq-item {
  border-block-end: 1px solid var(--line); padding-block: var(--s-4);
}
.faq-item summary { cursor: pointer; font-weight: 500; }
.faq-item p { margin-block: var(--s-3) 0; color: var(--ink-muted); }

/* ---------- 14. FORMS -------------------------------- */
.form-wrap { max-inline-size: 40rem; }
.form { margin-block-start: var(--s-6); display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
label { font-size: var(--fs-body-sm); font-weight: 500; }
input, select, textarea {
  font: inherit; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--ink);
  inline-size: 100%; text-align: start;
  /* color-scheme يُخبر المتصفّح أن السطح داكن، فيرسم سهم select ومنتقي
     التاريخ وشريط التمرير فاتحة. وبدونه يرسمها داكنة على داكن — والتقويم
     الأصلي على الهاتف يصير غير مقروء، وهو المكوّن الذي اخترناه لأنه مألوف. */
  color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: rgba(246, 243, 238, .4); }
.form-msg.is-bad { color: var(--terracotta-lt); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.phone-row { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--s-2); }

/* Consents are native checkboxes inside labels. A legal record must not
   depend on a script having loaded.                                      */
.consents { display: grid; gap: var(--s-4); margin-block-start: var(--s-2); }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  align-items: start; font-weight: 400; font-size: var(--fs-body-sm);
  line-height: var(--lh-body); cursor: pointer;
}
.consent input[type="checkbox"] {
  inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--accent);
}
.form-msg { font-size: var(--fs-body-sm); min-block-size: 1.4em; }
/* الفاتح من اللونين على سطح داكن: terracotta-dk و olive يسقط تباينهما
   إلى ما دون 4.5:1 على #0E1011، فلا يقرأهما من ضعف بصره. */
.form-msg.is-bad { color: var(--terracotta-lt); }
.form-msg.is-ok { color: var(--olive-lt); }

/* ---------- 15. NOTES ------------------------------- */
/* الرقعة على سمة داكنة: سطح مرفوع بحدّ ملوّن. و«رملي بشفافية ٣٠٪» كان يعطي
   كتلة فاتحة تكسر الصفحة. */
.note {
  border-inline-start: 3px solid var(--accent); padding: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--line); border-inline-start-width: 3px;
  border-inline-start-color: var(--accent);
  border-radius: var(--r-sm); margin-block: var(--s-5);
}
.note-plain { border-inline-start-color: var(--stone); }
.note-warn { border-inline-start-color: var(--terracotta-lt); }
mark.pending {
  background: var(--terracotta); color: #fff; padding: 0 .4em;
  border-radius: var(--r-sm); font-family: var(--font-latin); font-size: .85em;
}

/* ---------- 16. FOOTER ------------------------------ */
.site-foot {
  background: var(--bg-raised); color: var(--ink-inverse);
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-5);
}
.foot-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.foot-brand img { block-size: 50px; inline-size: auto; }
.foot-place { color: var(--ink-inverse-muted); font-size: var(--fs-body-sm); margin-block-start: var(--s-3); }
.foot-h { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand); margin-block: var(--s-4) var(--s-2); }
.foot-col p { margin-block: 0 var(--s-2); font-size: var(--fs-body-sm); }
.foot-link { color: var(--ink-inverse); text-decoration: none; border-block-end: 1px solid var(--line-dark); }
.foot-link:hover { border-block-end-color: var(--sand); }
.foot-base {
  margin-block-start: var(--s-7); padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-dark);
  font-size: var(--fs-body-sm); color: var(--ink-inverse-muted);
}
.link-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }

/* ---------- 17. الشريط النصّي المتحرّك ------------------ */
/* نسختان متجاورتان من النصّ تنزلقان بـ translateX. النسخة الثانية تُخفى عن
   قارئ الشاشة، والشريط كله aria-hidden لأنه زخرفة ونصّه مكرّر في الصفحة.

   ولا <marquee> ولا جافاسكربت: الأولى وسم مهجور، والثانية تحسب موضعاً في
   كل إطار على المعالج المركزي. و translateX وحده يعمل على المعالج الرسومي،
   فيمرّ بسلاسة على هاتف متوسّط.

   والسرعة أربعون ثانية للدورة الكاملة — بطيءٌ يُقرأ لا يدوخ.              */
/* شريط عريض لافت. والمقاسان مربوطان برمز واحد: كان الحرف ٣٣ بكسلاً والحشو
   ثابتاً، فيُقطع أعلى الحرف وأسفله. والآن يُشتقّ الحشو من مقاس الحرف، فأيّ
   تغيير في الثاني يضبط الأول معه ولا يعود أحد يقصّ حرفاً بلا أن يدري.

   والسرعة تُرفع مع المقاس: حرفٌ أكبر يقطع مسافة أطول في العين، فأربعون ثانية
   تصير خمسين ليبقى الإيقاع نفسه — بطيءٌ يُقرأ لا يدوخ.                     */
.marquee {
  --marquee-size: 33px;
  --marquee-speed: 50s;
  overflow: hidden; background: var(--bg);
  border-block: 1px solid rgba(219, 198, 161, .2);
  padding-block: calc(var(--marquee-size) * .42);
  user-select: none;
}
/* على الهاتف يصغر الحرف: ٣٣ بكسلاً على ٣٦٠ بكسل عرضاً يمرّ كلمةً واحدة في
   الشاشة، فيُقرأ الشريط كلمات متقطّعة لا عبارة. */
@media (max-width: 640px) {
  .marquee { --marquee-size: 20px; --marquee-speed: 34s; }
}
.marquee-track {
  display: flex; inline-size: max-content;
  /* الاتجاه هنا ltr دائماً وإن كانت الصفحة عربية: الانزلاق حركة بصرية لا
     نصّ يُقرأ سطراً، ولو تبع الاتجاه لانقلب معنى الترتيب بين اللغتين. */
  direction: ltr;
  animation: marquee-slide var(--marquee-speed) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
/* الفواصل تتّسع مع الحرف كذلك، وإلّا التصقت العبارات في شريط عريض. */
.marquee-group {
  display: flex; align-items: center;
  gap: calc(var(--marquee-size) * 1.1);
  padding-inline-end: calc(var(--marquee-size) * 1.1); flex: 0 0 auto;
}
.marquee-item {
  font-size: var(--marquee-size); color: var(--sand); white-space: nowrap;
  font-weight: 500; line-height: 1.15;
}
.marquee-item[lang="en"] { letter-spacing: .18em; text-transform: uppercase; }
/* النجمة تتبع الحرف ولا تبقى ١١ بكسلاً بجانب حرفٍ ثلاثة أضعافها. */
.marquee-star {
  color: var(--accent); font-size: calc(var(--marquee-size) * .42);
  flex: 0 0 auto;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 18. حركة الدخول -------------------------- */
/* المشهد يُبنى أمام الزائر في ثانية واحدة ثم يسكن.

   والقاعدة التي تحكم هذا كلّه: المحتوى مقروء من أول إطار. الحركة تُزيّن
   الظهور ولا تُنشئه — فلو تعطّلت CSS أو أُلغيت الحركة بقي كل شيء ظاهراً.
   ولهذا لا نبدأ من opacity: 0 في الوسم، بل نضيفها بصنف يُطبّق داخل
   @media (prefers-reduced-motion: no-preference) وحده.                   */
@media (prefers-reduced-motion: no-preference) {
  .enter > * { animation: enter-rise .9s var(--ease-enter) both; }
  .enter > .eyebrow      { animation-delay: .70s; }
  .enter > .hero-title   { animation-delay: .82s; }
  .enter > .lead         { animation-delay: .94s; }
  .enter > .btn-row      { animation-delay: 1.10s; }

  .hero-media img { animation: enter-settle 1.4s var(--ease-enter) both .4s; }
  .hero-word      { animation: enter-fade 1.2s var(--ease-enter) both .40s; }
  .marquee        { animation: enter-fade .8s var(--ease-enter) both 1.30s; }

  /* قسمٌ يدخل الشاشة يظهر ويصعد عشرين بكسلاً، مرة واحدة لا كلما مُرّ عليه.
     و js/main.js يضيف is-in عبر IntersectionObserver ثم يتوقّف عن مراقبته. */
  .reveal { opacity: 0; transform: translateY(20px);
            transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
  .reveal.is-in { opacity: 1; transform: none; }
}

@keyframes enter-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }
/* الصورة تتقلّص من ١.٠٦ إلى ١.٠٠ فتبدو مستقرّة لا داخلة. والشفافية النهائية
   تُطابق ما في .hero-media img — ولو اختلفتا لأطفأت الحركةُ الصورةَ عند
   انتهائها، وهو خطأ يظهر بعد ثانية فلا يُلاحَظ في المراجعة. */
@keyframes enter-settle {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: .92; transform: scale(1); }
}

/* ---------- 19. MOTION OFF -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important;
      animation-iteration-count: 1 !important; }
  .btn:hover, .card:hover { transform: none; }
  /* الشريط يسكن ويبقى نصّه ظاهراً — لا يُخفى، فهو جزء من المشهد. */
  .marquee-track { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 20. HOWTO — كتلة الدليل ----------------- */
/* الرموز هنا  --s-6  و --r-lg  بشرطةٍ قبل الاسم، كما في brand.css. وكُتبت
   أوّل مرّة  --s6  و --r3  بلا شرطة: متغيّرٌ غير معرَّف يُسقِط الخاصية
   كلَّها لا يُعطيها صفراً — فلم يكن ثمّة فراغٌ ولا استدارةٌ ولا حدود،
   والخطوات جاءت ملتصقةً فوق بعضها. والدرس أنّ خطأ الرمز لا يظهر خطأً في
   الصفحة، يظهر تصميماً رديئاً.

   وكل خطوةٍ بطاقةٌ لها حدٌّ وخلفيةٌ خفيفة: الفصل بخطٍّ وحده لا يكفي حين
   تكون الخطوة سطرين ونصفَ شاشةٍ من الصورة — العين تحتاج حدوداً تقول
   «هذه واحدة». */
.howto {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  counter-reset: howto;
  display: grid;
  gap: var(--s-5);
}

.howto-step {
  counter-increment: howto;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.howto-body { position: relative; padding-inline-start: 3.4rem; }

/* الرقم في دائرة على حافة البداية. و inset-inline-start منطقيّ فينتقل
   إلى اليمين في العربية بلا قاعدة ثانية. */
.howto-body::before {
  content: counter(howto);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .1em;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(219, 198, 161, .1);
  border: 1px solid var(--line);
  color: var(--sand);
  font-family: var(--font-latin);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.howto-body h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
  color: var(--sand);
}
.howto-body p {
  margin: 0 0 var(--s-4);
  max-inline-size: 60ch;
  line-height: var(--lh-body);
}
.howto-body p:last-child { margin-block-end: 0; }

.howto-note {
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--accent);
  background: rgba(0, 0, 0, .22);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
}

/* الصورة داخل إطارٍ له حاشية: لقطةٌ ملتصقةٌ بحدّ البطاقة تبدو خطأً في
   التصميم لا صورةً مقصودة. والسقف يمنع لقطة صفحةٍ كاملة من أن تشغل
   شاشتين — تُصغَّر بنسبتها ولا تُقتطَع. */
.howto-shot {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.howto-shot img {
  display: block;
  inline-size: 100%;
  max-block-size: 46vh;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.howto-shot figcaption {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}

@media (min-width: 960px) {
  /* النصّ أوّلاً ثم اللقطة، والنصّ أعرض: من قرأ الخطوة نظر إلى الصورة
     ليتأكّد، لا العكس.
     و align-items: center لا start: الصورة أطول من نصّها دائماً، فمع start
     يلتصق النصّ بالأعلى ويبقى تحته فراغٌ طويل يُقرأ سهواً في التصميم.
     والتوسيط يقسم الفراغ نصفين فيبدو مقصوداً — وهو مقصود. */
  .howto-step {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6);
  }
  .howto-shot img { max-block-size: 34vh; }
}