/* ============================================================
   جَازن اسبريسو بار — جيزان، حي السويس
   الفكرة المركزية: «لافتة مضيئة طوال الليل».
   المكان بار صغير يشتغل 24 ساعة، وأبرز ما فيه لافتته الأمبر
   المتوهجة بحروف حمراء فوق واجهة ألواح خشب. الموقع مبني حولها:
   هيرو ليلي تشتعل فيه اللافتة، وأقسام نهارية بكريم شارتهم.

   الألوان كلها معيَّنة من بكسلات صورنا:
   توهج اللافتة، حروفها، خشب الواجهة، بلاط الأرض، وعتمة الداخل.

   نظام الاستدارة الموثق:
   البطاقات والصور = 14px، الأزرار = حبة كاملة (999px)،
   اللافتة وحدها = 10px (نسبة لوحة اللافتة الحقيقية). لا رابع لها.
   أكسنت واحد: أمبر اللافتة. أحمر الحروف يعيش داخل اللافتة فقط
   لأنه جزء من رسمها، لا لون واجهة.
   ============================================================ */

:root {
  /* ── الحجر: أسطح الموقع الكبرى ──
     بيج بلاطة الكوفي نفسها، مقيسٌ من صورة الجدار: الوجه (155,126,91)
     وانحراف التموّج ±10.8. والنقشة مبنيّة لا مقصوصة — بلاطة واحدة
     متصلة بلا فواصل ولا شبكة، وضجيجها ملتفّ فتتكرر بلا خط ظاهر
     مهما امتدّ السطح، وتبقى حادّة على أي كثافة بكسل. */
  --stone: #9B7E5B;        /* وجه الحجر */
  --stone-2: #A98C68;      /* أفتح درجة، لأعلى التدرّجات */
  --stone-deep: #7E6444;   /* أغمق، للحواف والفواصل */
  --stone-tex: url("../img/stone.webp");

  /* الليل بقي حبراً لا سطحاً: خطوط الفنجان الداكنة، ونص الزر
     الأمبر، وزر «المنيو كامل» — كلها تحتاج غامقاً ولو صارت
     الأسطح فاتحة */
  --night: #241811;
  --night-2: #301E13;
  --amber: #F3C44A;        /* توهج اللافتة الصالح للواجهة */
  --amber-core: #FEF05F;   /* قلب التوهج، من مركز اللافتة */
  --amber-deep: #D98E2B;   /* حافة التوهج */
  --sign-red: #BF4F0F;     /* حروف JAZN على اللافتة */
  /* لوحة اللافتة: شمبانيا لا ذهب. أفتح فتقترب من كريم شارة اللوقو
     (#F8F0F0) وتُبرز الأحمر أكثر، وتبقى فيها دفء ضوء يكفي أن تقرأ
     العين لوحةً مضيئة لا ورقةً بيضاء. توهجها من لونها هو، فلو بقي
     أمبر لبان حوله هالة غريبة عن اللوحة */
  --sign-core: #FFF8DE;    /* قلب الإضاءة */
  --sign-face: #F6E4BE;    /* وجه اللوحة */
  --sign-edge: #DFC79A;    /* حافتها */
  --sign-halo: #F2DFB4;    /* لون الهالة حولها */
  /* كل ما يقرأ «مضيئاً» في الواجهة يأخذ من هنا: اللافتة والزرّان
     والأيقونات الصغيرة. مصدر ضوءٍ واحد في المكان، فلونٌ واحد له */
  --led: var(--sign-face);
  /* حروف اللافتة كما قِيست من صورتها (#B84808)، لا الأحمر العام:
     أدقّ شبهاً، وتباينه على وجه اللافتة 4.22 بدل 3.86 */
  --led-ink: #B84808;
  --cream: #FBF6F2;        /* خلفية شارة اللوقو */
  --cream-2: #F1E7DD;      /* كريم أعمق للأسطح */
  --wood: #B8935E;         /* خشب البار، من صورة g11 */
  --wood-deep: #7C5922;    /* خشب أغمق، من صورة g19 */
  --terra: #95552F;        /* جدار التراكوتا الداخلي */
  --ink: #2E2019;          /* حبر بني داكن على الكريم */
  --ink-soft: #6D5849;     /* نص ثانوي على الكريم */
  --sand: #C9B8A4;         /* نص ثانوي على الليل */
  --logo: #886460;         /* بني اللوقو الوردي، من بكسلاته */

  --font-head: "Amiri", serif;
  --font-body: "Amiri", serif;
  --font-latin: "Amiri", serif;
  /* خطّ المتن: تجوّل. لا يحلّ محلّ أميري بل يقاسمه — أميري يحمل
     الشخصية في العناوين والاسم، وتجوّل يحمل ما يُقرأ فعلاً */
  --font-read: "Tajawal", "Amiri", sans-serif;

  --radius: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* تجاوزٌ ثم استقرار: الشيء الحيّ لا يقف عند هدفه من أول مرة */
  --ease-back: cubic-bezier(0.34, 1.5, 0.5, 1);
  --t-ui: 220ms;
  --t-reveal: 700ms;

  --header-h: 66px;
}

/* ---------- أساس ---------- */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip يقصّ بلا ما يصنع حاوية تمرير، وhidden يصنعها فيكسر
     position:sticky للأبناء — ومشهد الفنجان قائم عليه. القديمة
     تبقى للمتصفحات اللي ما تعرف clip، والأحدث تفوز */
  overflow-x: hidden;
  overflow-x: clip;
}

/* height:auto إلزامي: بدونه تفوز سمة height في الـHTML على aspect-ratio فتمتد الصور */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* رمز الريال السعودي: مُعرَّف مرة في الصفحة ويُستدعى بـ use */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sar {
  display: inline-block;
  font-size: 0.95em;
  line-height: 0;
  vertical-align: -0.03em;
  margin-inline-start: 0.1em;
}
.sar svg { width: 0.9em; height: 1em; fill: currentColor; display: block; }

/* مخفي عن العين، مقروء لقارئ الشاشة ومحرك البحث */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--amber); color: var(--night); }

:focus-visible {
  outline: 3px solid var(--sign-red);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-night :focus-visible { outline-color: var(--amber); }

main section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

.section { padding-block: clamp(72px, 11vw, 120px); }

.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  line-height: 1.5;
}

.section-lead {
  margin-top: 14px;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.on-night .section-lead { color: var(--sand); }

/* التحويم على اللمس: سفاري يثبّت :hover بعد اللمسة فتبقى الحالة
   مضيئةً حتى تُضغط بقعةٌ أخرى — والزائر يقرأها اختياراً قائماً لا
   أثرَ ضغطةٍ انقضى (وهذا ما بلّغ عنه: زرُّ الانستقرام يرجع منوّراً).
   فالتحويم لِمن يملك مؤشّراً يحوّم به، واللمسُ له :active وحده. */

/* ---------- الهيدر ---------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--cream);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-ui) var(--ease-out),
              border-color var(--t-ui) var(--ease-out);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--stone) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: color-mix(in srgb, var(--amber) 22%, transparent);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: inline-flex; align-items: center; transition: opacity var(--t-ui) var(--ease-out); }
@media (hover: hover) {
  .brand:hover { opacity: 0.8; }
}
.brand img { height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
/* الرابط النشط يضيء بلون اللافتة، مثل ما تضيء لافتتنا */
.site-nav a:focus-visible { opacity: 1; }
@media (hover: hover) { .site-nav a:hover { opacity: 1; } }
.site-nav a[aria-current="true"] { color: var(--amber); opacity: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 55%, transparent); }

/* ---------- الأزرار ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 140ms var(--ease-out),
              background-color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out),
              color var(--t-ui) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 19px; height: 19px; flex: none; }

/* «الليدات» كلها من زجاجة واحدة: الزر الأساسي والزر العائم يأخذان
   لون لوحة اللافتة نفسه لا الأمبر. المكان فيه مصدر ضوءٍ واحد،
   فلونان مضيئان مختلفان يقرآن خللاً في الإضاءة لا تنوّعاً. */
.btn-amber {
  background: radial-gradient(120% 180% at 50% 0%, var(--sign-core) 0%, var(--sign-face) 60%, var(--sign-edge) 100%);
  /* حروفه بحروف اللافتة لا بالحبر: الزر صار زجاجها، فيكمل الشبه.
     واللون مقيسٌ من صورة اللافتة نفسها */
  color: var(--led-ink);
  box-shadow: 0 6px 26px -8px color-mix(in srgb, var(--sign-halo) 70%, transparent);
}
@media (hover: hover) {
  .btn-amber:hover { background: var(--sign-core); }
}

.btn-line-cream { border-color: color-mix(in srgb, var(--cream) 45%, transparent); color: var(--cream); background: transparent; }
@media (hover: hover) {
  .btn-line-cream:hover { border-color: var(--cream); }
}

.btn-line-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
@media (hover: hover) {
  .btn-line-ink:hover { background: var(--ink); color: var(--cream); }
}

.btn-night { background: var(--night); color: var(--cream); }
@media (hover: hover) {
  .btn-night:hover { background: var(--night-2); }
}

/* ---------- الهيرو: الليل واللافتة ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  background:
    var(--stone-tex),
    radial-gradient(120% 85% at 50% 0%, var(--stone-2) 0%, var(--stone) 58%);
  color: var(--cream);
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: 46px;
  position: relative;
}
/* ألواح خشب الواجهة: حد سفلي بخامة أعمدتهم الرأسية */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--wood-deep) 0 14px,
    color-mix(in srgb, var(--wood-deep) 72%, var(--stone-deep)) 14px 16px
  );
  opacity: 0.85;
}

.hero-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 2.6vh, 26px);
}

/* ── اللافتة: إعادة بناء لافتتنا الحقيقية، وتشتعل عند الدخول ── */
.sign {
  /* الشدّة أخفض مما كانت (42/20): كل ما فتحت اللوحة قلّ الفرق
     بينها وبين هالتها، فالهالة القوية تصير ضباباً حولها لا ضوءاً
     منها */
  --glow: 0 0 44px 6px color-mix(in srgb, var(--sign-halo) 34%, transparent),
          0 0 120px 20px color-mix(in srgb, var(--sign-halo) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  /* الحشو الأفقي هو الي يضبط استطالة اللوحة، نسبة لوحتهم الحقيقية عريضة */
  padding: clamp(20px, 3.4vw, 32px) clamp(58px, 15vw, 142px);
  border-radius: 10px;
  background:
    radial-gradient(85% 130% at 50% 45%, var(--sign-core) 0%, var(--sign-face) 55%, var(--sign-edge) 100%);
  box-shadow: var(--glow), inset 0 0 0 1px color-mix(in srgb, var(--sign-red) 18%, transparent);
  color: var(--sign-red);
  user-select: none;
}
/* اللوقو نفسه مقصوصاً من وردماركنا وملوّناً بأحمر اللافتة، لا خط نصي */
.sign-mark {
  width: auto;
  height: clamp(4.6rem, 13vw, 7rem);
}

/* اشتعال اللافتة: ومضات فلورسنت قصيرة ثم ثبات */
@keyframes sign-on {
  0%   { opacity: 0.25; box-shadow: none; }
  18%  { opacity: 0.9;  box-shadow: var(--glow); }
  26%  { opacity: 0.35; box-shadow: none; }
  38%  { opacity: 1;    box-shadow: var(--glow); }
  46%  { opacity: 0.55; box-shadow: none; }
  60%, 100% { opacity: 1; box-shadow: var(--glow); }
}

/* ورفّة عابرة كل أربع ثوانٍ: لافتة النيون ما تشتعل مرة وتستقر إلى
   الأبد، تظل ترفّ. نبضتان قصيرتان في آخر الدورة والباقي ثبات —
   فتلمحها العين ولا تُتعبها.

   النسب أُعيد حسابها مع الدورة: الرفّة نفسها تبقى ٠٫٣٩ ثانية كما
   كانت (وهي ما تراه العين)، والذي تغيّر هو كم تتكرر. لو تُركت
   النسب على حالها لانضغطت الرفّة نفسها فصارت تشنّجاً. */
@keyframes sign-flicker {
  0%, 86.5%   { opacity: 1;    box-shadow: var(--glow); }
  88.25%      { opacity: 0.45; box-shadow: none; }
  90.9%       { opacity: 1;    box-shadow: var(--glow); }
  93.5%       { opacity: 0.3;  box-shadow: none; }
  96.1%, 100% { opacity: 1;    box-shadow: var(--glow); }
}

/* الاشتعال أولاً، ثم الرفّة تتسلّم بعده (الأخيرة تفوز على الخاصية
   نفسها) — فلا تنقطع اللافتة بين الاثنتين */
.sign.is-on {
  animation: sign-on 1.1s steps(1, end) both,
             sign-flicker 4s steps(1, end) 1.3s infinite;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  border-radius: 999px;
  padding: 6px 16px;
}
.hero-badge svg { width: 17px; height: 17px; }

.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  /* صُغّر مرّتين: الأولى لأن أميري يركّب أعرض في الوزن الثقيل،
     والثانية بعد تبديل الخطّ — تجوّل أعرض عيناً من أميري على نفس
     المقاس، فاستعاد العنوان حجمه المزاحِم للّافتة. */
  font-size: clamp(1.48rem, 4.5vw, 2.6rem);
  line-height: 1.5;
  max-width: 16ch;
}

.hero-sub {
  max-width: 46ch;
  font-size: clamp(0.98rem, 2.6vw, 1.1rem);
  color: var(--sand);
  text-wrap: balance;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- الفنجان يهبط ----------
   رسمة الديمي-تاس بين الهيرو والمحصول، يرسمها cup.js كاملة على
   canvas. CSS ما تعطيه غير الصندوق واللون تحته.

   مخفي افتراضياً ولا يكشفه إلا cup.js بعد ما يتأكد أن canvas شغال:
   المشهد زخرفة بحتة، فلو تعذّر الرسم الأنظف أن يوصل الهيرو قسم
   المحصول مباشرة بدل فراغ بطول شاشة. */

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

   الطول = زمن المشهد: 100 للشاشة المثبَّتة + الباقي زمناً. وهو
   على الجوال أقصر منه على الديسكتوب: التمرير بالإبهام أغلى من
   عجلة الفأرة. وبـlvh لا svh حتى تغطي الشاشةَ المثبتةُ كامل
   المنفذ ولو اختفى شريط عنوان الجوال، وإلا بان شريط ليل تحت
   البحر الكريمي. */

.cup-band {
  display: none;
  position: relative;
  z-index: 1;             /* يرسم فوق القسم المسحوب خلفه */
  /* شاشة واحدة لا مسار: المشهد صار يعمل بساعته لا بالتمرير، فما
     عاد للمسار الطويل معنى — كان يوجد الزمنَ الذي تمشي فيه الحركة،
     والزمن الآن من الساعة. وقسم المحصول مسحوبٌ شاشةً لفوق فيقع
     خلف المشهد تماماً، فيكشفه الذوبان في مكانه بلا تمرير. */
  height: 100vh;
  height: 100lvh;
  /* المشهد زخرفة فوق قسم المحصول المسحوب خلفه، وبعد الذوبان يبقى
     في مكانه بشفافية صفر — والعنصر الشفاف يلتقط اللمس. فبغير هذا
     تُبتلع كل لمسةٍ على أول شاشة من القسم (جُرّب فالتقطها الكانفس). */
  pointer-events: none;
}
@media (min-width: 700px) {
  .cup-band { height: 100vh; height: 100lvh; }
}
.cup-band.on { display: block; }

/* الليل على المرحلة لا على الشريط: خلفية الشريط تغطي القسم
   المسحوب خلفه، فلو بقيت مكانها كشف التذويبُ خلفيةً لا محتوى */
.cup-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--stone);
}
.cup-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* مع تفضيل تقليل الحركة ما في مشهد يُمرَّر عليه، فلا داعي لمسار */
.cup-band.still { height: 100vh; height: 100lvh; }

/* ─── التسليم: القسم يُركن خلف المشهد لا تحته ───
   قسم المحصول بعد الشريط في ترتيب الصفحة، فأقرب موضع ممكن له هو
   أسفل الشاشة — فمهما قصّرنا الفجوة يظل عليك تنزل شاشة كاملة في
   كريم فاضٍ بعد ما تكتمل الموجة. فنسحبه شاشةً كاملة لفوق: يصير
   مركوناً خلف المشهد المثبَّت في موضعه النهائي، محجوباً بالكانفس
   العاتم، فلحظة يذوب الكانفس (cup.js) ينكشف جاهزاً مكان الأبيض
   نفسه بلا تمرير. وبما أن البحر والقسم بنفس الكريم، ما تشوف
   تذويباً: تشوف النص يظهر في الفراغ.

   والسحب يقصّ شاشة من طول الصفحة كذلك — تمرير أقل لا أكثر. */
.cup-band.on:not(.still) + .crops {
  position: relative;
  z-index: 0;
  margin-top: -100vh;
  margin-top: -100lvh;
  /* الحشوة ترجع كاملة بل أوسع: القسم صار يستقر ورأسه عند أعلى
     الشاشة، فالعنوان يحتاج مسافة تبعده عن الهيدر الثابت */
  padding-top: clamp(96px, 15vw, 150px);
  /* وهي نفسها تغني عن هامش التمرير: رابط «المحصول» لازم يهبط عند
     رأس القسم بالضبط، فهناك يكون المشهد قد ذاب. لو أبقيناه ٧٧px
     نزل قبلها فوصل والكانفس لسّه عاتم يحجب القسم */
  scroll-margin-top: 0;
}

/* ---------- المحصول ---------- */

.crops { background: var(--cream); }

.crops-head { max-width: 640px; }

.crop-grid {
  margin-top: clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
}

/* بطاقة المحصول: «خانة مضيئة» مثل رفوفهم المضيئة بالضبط:
   جوف دافئ يضيء من فوق وحد خشبي رفيع */
.crop {
  position: relative;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--amber) 14%, var(--cream-2)) 0%, var(--cream-2) 34%);
  border: 1px solid color-mix(in srgb, var(--wood) 45%, transparent);
  border-top: 3px solid var(--wood);
  padding: 22px 20px 20px;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
@media (hover: hover) {
  .crop:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--wood-deep) 55%, transparent);
  }
}

/* كانت مصغّرة دائرية بجانب الاسم، وحُذفت: صورة صينية التقديم نفسها
   تتكرر على المحاصيل الستة، فلا تفرّق بينها ولا تصف واحداً منها —
   والاسم والمعالجة يقولان أكثر منها. فبقي الصفّ بلا صورة، ولا
   يحتاج flex لعنصرٍ واحد. */
.crop-top { display: block; }
.crop h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
}
.crop-process { font-size: 0.83rem; color: var(--ink-soft); }

.crop-notes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.crop-notes span {
  font-size: 0.8rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--wood) 20%, var(--cream));
  border-radius: 999px;
  padding: 2px 11px;
}

.crop-prices {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--wood) 55%, transparent);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.crop-prices > div + div { border-inline-start: 1px solid color-mix(in srgb, var(--wood) 35%, transparent); }
.crop-prices i {
  font-style: normal;
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.crop-prices b {
  font-weight: 700;
  font-size: 1.06rem;
}
.crop-prices .sar { color: var(--ink-soft); }

.crops-note {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- الحلا والمنيو ---------- */

.sweets { background: var(--cream-2); }

.sweets-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.sweet-grid {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.sweet {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--wood) 30%, transparent);
}
.sweet img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.sweet figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.97rem;
}
.sweet .price { color: var(--sign-red); font-weight: 700; white-space: nowrap; }
.sweet .price .sar { color: var(--ink-soft); }

/* ---------- المكان ---------- */

.place {
  background:
    var(--stone-tex),
    radial-gradient(110% 70% at 50% 100%, var(--stone-2) 0%, var(--stone) 62%);
  color: var(--cream);
}

.place-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.place-copy p {
  margin-top: 14px;
  color: var(--sand);
  max-width: 46ch;
  font-size: 1.03rem;
}
.place-copy p strong { color: var(--cream); font-weight: 600; }
/* الجملة الختامية تُقفل الفقرة، فتُرفع درجة على بقية النص */
.place-copy .place-close { margin-top: 20px; color: var(--cream); font-weight: 600; }

.place-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.place-gallery figure {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--amber) 18%, transparent);
}
.place-gallery img { width: 100%; height: 100%; object-fit: cover; }
.place-gallery figure:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 9; }
.place-gallery figure:nth-child(n+2) { aspect-ratio: 4 / 5; }

/* اقتباس حرفي من تقييماتهم */
.place-quote {
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
}
.place-quote blockquote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.7;
  max-width: 26ch;
  margin-inline: auto;
}
.place-quote figcaption {
  margin-top: 14px;
  color: var(--sand);
  font-size: 0.95rem;
}
.rating-line {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.rating-line .stars { display: inline-flex; gap: 3px; color: var(--amber); }
.rating-line .stars svg { width: 19px; height: 19px; }

/* دعوة التقييم: تسكن تحت تقييم الغير مباشرةً، وهي اللحظة التي
   يخطر فيها للزائر أن يضيف تقييمه. حبة كاملة مثل بقية الأزرار،
   وحدّها خافت لأنها دعوة لا مطلب — والنجمة وحدها أمبر، فتلتقطها
   العين وتربطها بنجوم التقييم فوقها بلا صراخ. عند اللمس يشتعل
   الحدّ أمبر بهالة، مثل ما تشتعل اللافتة. */
.rating-cta { margin-top: 26px; }
.btn-rate {
  border-color: color-mix(in srgb, var(--cream) 28%, transparent);
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  padding-block: 11px;
  font-size: 0.97rem;
}
.btn-rate svg { color: var(--led); }
.btn-rate:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 70%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  box-shadow: 0 6px 30px -10px color-mix(in srgb, var(--amber) 55%, transparent);
}
@media (hover: hover) {
  .btn-rate:hover {
  border-color: color-mix(in srgb, var(--amber) 70%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  box-shadow: 0 6px 30px -10px color-mix(in srgb, var(--amber) 55%, transparent);
  }
}

/* ---------- متجر جَازن ---------- */

.store { background: var(--cream); }

.store-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  background: var(--cream-2);
  border: 1px solid color-mix(in srgb, var(--wood) 40%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.store-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.store-copy { padding: clamp(20px, 3vw, 36px); padding-inline-start: 0; }
.store-copy h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
}
.store-copy p { margin-top: 10px; color: var(--ink-soft); max-width: 42ch; }
.store-price {
  margin-top: 14px;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--sign-red);
}
.store-price .sar { color: var(--ink-soft); }

/* ---------- الزيارة ---------- */

.visit { background: var(--cream-2); }

.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.visit-list { list-style: none; margin-top: clamp(22px, 3vw, 34px); display: grid; gap: 0; }
.visit-list li {
  display: flex;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--wood) 40%, transparent);
}
.visit-list li:first-child { border-top: 1px solid color-mix(in srgb, var(--wood) 40%, transparent); }
.visit-list svg { width: 24px; height: 24px; flex: none; color: var(--sign-red); margin-top: 3px; }
.visit-list .v-label { font-weight: 600; display: block; }
.visit-list .v-value { color: var(--ink-soft); }

.visit-actions { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }

/* الخريطة نفسها بدل صورة الواجهة: الزائر يشوف مكانهم فوراً */
.visit-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wood) 40%, transparent);
  background: var(--cream);
  aspect-ratio: 4 / 3;
}
.visit-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- زر التواصل العائم ---------- */
/* شخصيته مأخوذة من اللافتة: قرص أمبر متوهج، وأقراص ليلية تطلع منه بالتتابع */

.social-fab {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px; /* في RTL يعني اليمين */
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.social-fab__btn {
  /* التوهج في متغيّر لا في box-shadow مباشرة: الرفّة (fab-flicker)
     والتحويم كلاهما يحتاجه، ولو كتبناه في الخاصية نفسها لأكلت
     الحركةُ حالةَ التحويم. هكذا تبدّل الحالةُ المتغيّرَ وتقرؤه
     الحركة كما هو */
  --fab-glow:
    0 0 26px 3px color-mix(in srgb, var(--sign-halo) 55%, transparent),
    0 10px 24px -8px rgba(20, 12, 6, 0.55);
  --fab-dark: 0 10px 24px -8px rgba(20, 12, 6, 0.55);

  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--sign-red);
  background: radial-gradient(80% 110% at 50% 40%, var(--sign-core) 0%, var(--sign-face) 58%, var(--sign-edge) 100%);
  box-shadow: var(--fab-glow);
  transition: transform 260ms var(--ease-back), box-shadow var(--t-ui) var(--ease-out);
}

/* حلقة تنبثق من الزر لحظة الفتح — الأثر الذي تتركه ضغطة على شيء
   مضيء. تُرسم في طبقة خلفه فلا تزيح شيئاً ولا تلتقط النقر */
.social-fab__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--sign-face) 75%, transparent);
  opacity: 0;
  pointer-events: none;
}
.social-fab.is-open .social-fab__btn::after { animation: fab-ring 620ms var(--ease-out) 1; }
@keyframes fab-ring {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.85); }
}

.social-fab__btn svg {
  width: 25px; height: 25px; grid-area: 1 / 1;
  transition: opacity 200ms var(--ease-out), transform 320ms var(--ease-back);
}
.social-fab__btn .i-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
@media (hover: hover) {
  .social-fab__btn:hover {
    transform: translateY(-3px) scale(1.05);
    --fab-glow:
      0 0 36px 6px color-mix(in srgb, var(--sign-halo) 72%, transparent),
      0 14px 28px -8px rgba(20, 12, 6, 0.6);
  }
}
.social-fab__btn:active { transform: scale(0.92); }

/* الرفّة نفسها على الزر: نفس الدورة ونفس التأخير الابتدائي، فتغمز
   اللافتة والزر معاً — يقرأان دائرة كهربائية واحدة لا زينتين.
   والخفوت هنا بـbrightness لا بـopacity: الزر يطفو فوق أقسام
   كريمية، فشفافيته تجعله يبهت لا يرفّ. */
@keyframes fab-flicker {
  0%, 86.5%   { box-shadow: var(--fab-glow); filter: brightness(1); }
  88.25%      { box-shadow: var(--fab-dark); filter: brightness(0.66); }
  90.9%       { box-shadow: var(--fab-glow); filter: brightness(1); }
  93.5%       { box-shadow: var(--fab-dark); filter: brightness(0.55); }
  96.1%, 100% { box-shadow: var(--fab-glow); filter: brightness(1); }
}
.social-fab__btn { animation: fab-flicker 4s steps(1, end) 1.3s infinite; }

.social-fab.is-open .social-fab__btn .i-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.social-fab.is-open .social-fab__btn .i-close { opacity: 1; transform: rotate(0deg) scale(1); }

.social-fab__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  visibility: hidden; /* يشيلها من ترتيب التركيز وهي مقفلة */
}
.social-fab__list a {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--led);
  background: color-mix(in srgb, var(--night) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--led) 55%, transparent);
  /* حلقة داكنة تفصلها عن الكريم، وتوهج خافت يفصلها عن الليل */
  box-shadow:
    0 0 0 1px rgba(20, 12, 6, 0.22),
    0 0 14px 1px color-mix(in srgb, var(--led) 20%, transparent),
    0 10px 22px -8px rgba(20, 12, 6, 0.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  /* تخرج من داخل الزر لا من تحتها: صغيرة ومزاحة نحوه، فتقرأ
     العينُ أنها انبثقت منه */
  transform: translateY(16px) translateX(6px) scale(0.55);
  /* الإغلاق أسرع من الفتح وبلا تجاوز: الفتح دعوة والإغلاق تنفيذ.
     والتأخير معكوس هنا فتنسحب الأبعد أولاً */
  transition:
    opacity 130ms var(--ease-out),
    transform 170ms cubic-bezier(0.4, 0, 0.9, 0.5),
    background 180ms var(--ease-out),
    color 180ms var(--ease-out);
  transition-delay: calc((1 - var(--i)) * 40ms);
}
.social-fab__list svg { width: 21px; height: 21px; }
@media (hover: hover) {
  .social-fab__list a:hover {
    background: var(--led);
    color: var(--night);
    border-color: var(--led);
  }
}
.social-fab__list a:active { transform: scale(0.95); }

.social-fab.is-open .social-fab__list { visibility: visible; }
.social-fab.is-open .social-fab__list a {
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 420ms var(--ease-back),
    background 180ms var(--ease-out),
    color 180ms var(--ease-out);
  transition-delay: calc(var(--i) * 65ms);
}

@media (max-width: 640px) {
  .social-fab { inset-block-end: 16px; inset-inline-start: 16px; }
  .social-fab__btn { width: 52px; height: 52px; }
}


/* ---------- التذييل ---------- */

.site-footer {
  background-image: var(--stone-tex), linear-gradient(var(--stone), var(--stone));
  color: var(--sand);
  /* بلا حشوة سفلية: شريط الحقوق يلصق بأسفل الصفحة، والمسافة فوقه
     من هامشه هو. والعلوية نزلت من 52–84 إلى 34–46 مع ضغط التذييل */
  padding-block: clamp(34px, 4.4vw, 46px) 0;
  text-align: center;
}

/* ثلاثة صفوف متتابعة بدل ثلاثة أعمدة: العمودان كانا يفرشان الروابط
   الخمس رأسياً فيطول التذييل شاشةً كاملة على الجوال. الروابط في
   سطرٍ واحد يلتفّ عند الحاجة، والعناوين («تصفّح»، «تابعنا») حُذفت
   لأن خمسة روابط في سطرٍ لا تحتاج عنواناً يشرحها. */
.footer-top {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.6vw, 24px);
}

.footer-brand img { height: 56px; width: auto; }
.footer-tagline {
  margin-top: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(16px, 3.4vw, 30px);
}
.footer-nav a {
  color: var(--sand);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t-ui) var(--ease-out);
}
@media (hover: hover) {
  .footer-nav a:hover { color: var(--cream); }
}

.footer-social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 28px);
}
.footer-social a {
  color: var(--sand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 0.9rem;
  transition: color var(--t-ui) var(--ease-out);
}
@media (hover: hover) {
  .footer-social a:hover { color: var(--cream); }
}
.footer-social svg { width: 18px; height: 18px; flex: none; }
.footer-social .handle { font-family: var(--font-latin); }

.footer-bottom {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--amber) 14%, transparent);
  text-align: center;
  font-size: 0.85rem;
}
/* الاسم بلا خطٍّ تحته: يبقى رابطاً ويُعرَف بوزنه لا بخطّه.
   والخط يعود عند التحويم وحده، فلا يفقده من يتصفح بلوحة مفاتيح */
/* الخطّ تحت الاسم هنا مقصود، بخلاف ما كان: السطر كله هادئ خافت
   إلا كلمة واحدة، فالخطّ هو ما يقول للعين إنها رابط. ولونه أخفت من
   الحرف نفسه فلا يزاحمه، ويشتدّ عند التحويم والتركيز. */
.footer-bottom a {
  color: var(--cream);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--cream) 45%, transparent);
  transition: text-decoration-color var(--t-ui) var(--ease-out);
}
.footer-bottom a:focus-visible { text-decoration-color: var(--cream); }
@media (hover: hover) { .footer-bottom a:hover { text-decoration-color: var(--cream); } }

/* شريط الحقوق: آخر ما في الصفحة، بعرضها كاملاً.
   لونه ليلٌ مدفوءٌ بالخشب فيبين شريطاً مستقلاً تحت التذييل بلا
   حدٍّ مرسوم — والفرق لونيّ لا خطّي، أهدأ للعين. */
.footer-legal {
  background: color-mix(in srgb, var(--stone-deep) 100%, var(--stone));
  color: var(--sand);
  padding-block: 13px;
  margin-top: clamp(18px, 2.4vw, 26px);
  text-align: center;
  font-size: 0.83rem;
  letter-spacing: 0.01em;
}
.footer-legal [data-year] { font-family: var(--font-latin); }

/* ============================================================
   صفحة المنيو
   ============================================================ */

/* أرض صفحة المنيو هي أرض الرئيسية نفسها: حجر جَازن بنقشته. وكانت
   كريماً مسطّحاً، فتقرأ العينُ صفحتين من موقعين.

   والأقسام تصير ألواحاً كريمية تطفو عليه — لا نصّاً مباشراً على
   الحجر: النصّ الداكن على الحجر تباينه دون الحد، وهذا القسم كلّه
   قراءة. فيتكرّر ترتيب الرئيسية نفسه: حجرٌ خلف، وكريمٌ يُقرأ عليه. */
.menu-page {
  background-image: var(--stone-tex), linear-gradient(var(--stone), var(--stone));
  background-size: 1000px 1000px, auto;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* main هنا هو الحاوية نفسها، فالمسافات والفواصل عليها */
.menu-page main.container {
  display: grid;
  gap: clamp(14px, 2.4vw, 20px);
  padding-block: clamp(18px, 3vw, 30px) clamp(34px, 5vw, 52px);
}

.mp-header {
  background-image: var(--stone-tex), linear-gradient(var(--stone), var(--stone));
  color: var(--cream);
  padding-block: 26px 20px;
}
.mp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mp-header .brand img { height: 52px; }
.mp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--sand);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color var(--t-ui) var(--ease-out);
}
@media (hover: hover) {
  .mp-back:hover { color: var(--amber); }
}
.mp-back svg { width: 18px; height: 18px; }

.mp-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--stone) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 20%, transparent);
}
.mp-tabs-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mp-tabs-inner::-webkit-scrollbar { display: none; }
.mp-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 16px;
  color: var(--sand);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  border-bottom: 2.5px solid transparent;
  transition: color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.mp-tabs a.is-active { color: var(--amber); border-bottom-color: var(--amber); }

/* الأقسام شفافة تماماً: الحجر يمرّ خلفها كما هو في الرئيسية،
   ويبقى منها إطارٌ رفيع يحدّ القسم. والنصّ يقلب فاتحاً لأنه صار
   على الحجر لا على لوح. */
.mp-section {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cream) 24%, transparent);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px) clamp(18px, 3.4vw, 30px);
}

.mp-section-head h2,
.mp-item__name { color: var(--cream); }
.mp-item { border-bottom-color: color-mix(in srgb, var(--cream) 22%, transparent); }
.mp-section-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
}
.mp-section-head p { color: var(--cream); font-size: 0.9rem; }

.mp-list { list-style: none; margin-top: 18px; display: grid; gap: 0; }
.mp-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px dashed color-mix(in srgb, var(--wood) 50%, transparent);
}
.mp-item img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--cream-2);
}
.mp-item__body { flex: 1; min-width: 0; }
.mp-item__name { font-weight: 600; font-size: 1.02rem; }
.mp-item__note { color: var(--cream); font-size: 0.85rem; margin-top: 2px; }
.mp-item__price {
  flex: none;
  font-weight: 700;
  font-size: 1.1rem;
  color: #FFF6E2;
  white-space: nowrap;
}
.mp-item__price .sar { color: color-mix(in srgb, #FFF6E2 70%, transparent); }

/* الحلويات: بطاقات بصور */

/* هذا السطر خارج الألواح، يقع على الحجر مباشرة — فحبرُ الأسطح
   الكريمية لا يصلح له: كان --ink-soft فتباينه على الحجر 1.9.
   يأخذ كريم الأسطح الحجرية ووزناً يكفي لمقاسه الصغير. */
.mp-foot {
  padding-block: 36px 60px;
  text-align: center;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- الحركة: «اللافتة تشتعل» ----------
   دخول الأقسام: ظهور مع انزياح بسيط، IntersectionObserver فقط،
   وشبكة أمان تظهر كل شيء بعد 2.5 ثانية مهما صار. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .sign.is-on { animation: none; }
  .btn, .crop, .brand, .site-nav a { transition: none; }
  /* الزر العائم يفتح فوراً بلا انزلاق ولا تتابع، ولا يرفّ:
     من طلب تقليل الحركة لا يريد وميضاً متكرراً في زاوية عينه.
     وقاعدة الفتح مكرّرة هنا لأن أسبقيتها أعلى من قاعدة العنصر */
  .social-fab__btn, .social-fab__btn svg, .social-fab__list a { transition: none; }
  .social-fab.is-open .social-fab__list a { transition: none; transition-delay: 0s; }
  .social-fab__btn { animation: none; }
  .social-fab.is-open .social-fab__btn::after { animation: none; }
}

/* ---------- استجابة ---------- */

@media (max-width: 900px) {
  .crop-grid { grid-template-columns: repeat(2, 1fr); }
  .sweet-grid { grid-template-columns: repeat(2, 1fr); }
  .place-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map { aspect-ratio: 16 / 11; }
  .store-card { grid-template-columns: 1fr; }
  .store-card img { aspect-ratio: 16 / 10; }
  .store-copy { padding: 22px; padding-top: 0; }
}

@media (max-width: 640px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 0.86rem; }
  .brand img { height: 38px; }
  .crop-grid { grid-template-columns: 1fr; }
  .sweet-grid { grid-template-columns: repeat(2, 1fr); }
  .sign { padding-inline: clamp(62px, 20vw, 104px); }
  .place-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* عنوان الهيرو وفقرات «بار» بخطّ المتن: هذان أطولُ ما يُقرأ في
   الصفحة، وقد اختيرا بالعين من سبع عيّنات معروضة على القسم نفسه */
.hero h1,
.place-copy p { font-family: var(--font-read); }

/* ── النص على الحجر: فاتح ──
   والثانوي كالأساسي لا أخفت منه. الرملي (#C9B8A4) كان يقرأ ثانوياً
   على الليل لأن الفرق بينه وبين الكريمي كبير هناك، أما على الحجر
   فيقرأ باهتاً كأن شفافيته ناقصة — لأنه لونٌ متوسط على أرضية
   متوسطة. فيصير الكريم نفسه، والترتيب البصري يحمله المقاس والوزن
   لا خفوت اللون. وتباينه يقفز من 2.39 إلى 3.54.

   قرارُ صاحب الموقع بعد عرض البدائل: النص أبيض والحجر يبقى بلونه
   الفاتح كما هو. والقياس مُثبَتٌ هنا لا مخفيّ — الكريمي على الحجر
   يعطي 3.6 والرملي 2.4، ومعيار AA للنص العادي 4.5 (وللنص الكبير
   3.0، فالعناوين وحدها تعبره). فمن أراد رفع الوضوح لاحقاً فالطريق
   معروف: تعتيم الحجر لا تغيير النص — بطبقة داكنة فوق النقشة —
   وعندها يقفز الكريمي إلى 9.2.

   ولذلك رُفع الرملي درجةً عن أصله (#C9B8A4 → #DACBB8): لا يبلغ
   الحد لكنه يقلّل الفرق، والسطر الثانوي هو أضعف ما على الحجر. */
.site-header,
.hero.on-night,
.place.on-night,
.site-footer,
.mp-header,
.mp-tabs {
  --sand: var(--cream);
}

/* وروابط الهيدر كانت بشفافية 0.85: على الليل تخفت بذوق، وعلى الحجر
   تزيد الطين بلّة فتقرأ رمادية. تُرفع على الحجر وحده */
.site-header .site-nav a { opacity: 1; }

/* الأكسنت على الحجر: الأمبر أفتح من الحجر فيُرى فوقه، والأحمر
   أغمق منه بشعرة (1.27) فيغرق فيه — فالنجوم والأيقونات أمبر.
   والرابط النشط لا يُميَّز باللون وحده: نصّه بلون إخوته ويحمل
   الفرقَ وزنُه وخطٌّ أمبر تحته. وهذا أصحّ على أي حال. */
.site-header .site-nav a[aria-current="true"],
.mp-tabs a.is-active {
  color: var(--cream);
  font-weight: 600;
  text-shadow: none;
  border-bottom: 2px solid var(--led);
}
.site-header .site-nav a[aria-current="true"] { padding-bottom: 4px; }

/* لونها كان أبيض الصفحة نفسه (#FBF6F2) تماماً كالعنوان، لكنها
   تُقرأ أخفت منه: مقاسها أصغر ووزنها 500، فقلم أميري يرقّ فيها
   ويقلّ ما يصل العينَ من البياض. فالعلاج في الوزن لا في اللون. */
.hero-badge {
  color: var(--cream);
  font-weight: 700;
  border-color: color-mix(in srgb, var(--cream) 45%, transparent);
}
.hero-badge svg,
.rating-line .stars { color: var(--led); }

/* شريط الحقوق: أغمق سطحٍ في الصفحة، ونصّه فاتح مثل بقية الحجر */
.footer-legal { color: var(--cream-2); }

/* النقشة: بلاطة واحدة كبيرة، لا شبكة صغيرة مكرّرة */
.site-header,
.hero.on-night,
.place.on-night,
.site-footer,
.mp-header {
  background-size: 1000px 1000px, auto;
  background-repeat: repeat, no-repeat;
}