/* ==========================================================================
   نثل NATHL
   الفكرة المركزية: النَّثْل — إخراج ما في الداخل وصبّه.
   الاسم فعل، وشكل الشعار كأس ينسكب، ومشكلة العميل أن الناس ما تعرف وش عندهم.
   فالموقع كله إخراج: المحاصيل، والحلا، والمكان.
   التوثيق الكامل للهوية في reference/brand.md
   ========================================================================== */

:root {
  /* ---- ألوان البروفايل، حرفياً (brand.md القسم 2) ---- */
  --white: #f1f1f2;
  --cream: #e1dfd4;
  --greige: #c8c4ba;
  --green: #576e67;
  --grey: #5f6062;

  /* ---- مشتقات: أخضر الهوية نفسه بإضاءة أخفض، صبغة وإشباع ثابتان ----
     الأخضر على الكريمي 4.10 فقط، أي لا يصلح نصاً صغيراً. فالحبر أخضرهم معتماً. */
  --ink: #364440;       /* إضاءة 24% — على الكريمي 7.63 */
  --ink-soft: #485b55;  /* إضاءة 32% — على الكريمي 5.41 */
  --green-deep: #2d3935;/* إضاءة 20% — الفوتر */

  /* ---- أدوار ---- */
  --surface: var(--cream);
  --surface-raised: var(--white);
  --on-dark: #ffffff;         /* على الأخضر 5.50 */
  --on-dark-soft: #e8edec;    /* على الأخضر 4.63، وعلى الأخضر الغامق 10.16 */
  --rule: rgba(54, 68, 64, 0.18);
  --rule-dark: rgba(255, 255, 255, 0.22);

  /* ---- تيبوغرافي ---- */
  --ar: "Alexandria", system-ui, sans-serif;
  --la: "Jost", "Alexandria", system-ui, sans-serif;

  /* ---- إيقاع ---- */
  --gutter: clamp(1rem, 5vw, 5rem);
  --measure: 62ch;
  --band: 104px;  /* دورة الموتيف الرأسية، brand.md القسم 4 */
  --tile-w: calc(var(--band) * 96.34 / 104);  /* عرض البلاطة عند ذلك الارتفاع */

  /* ---- حركة: شخصية واحدة اسمها «الرفع» ----
     كل شيء يطلع من تحت، لأن النثل إخراج ما في القاع إلى السطح. */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* منحنى الكتابة: شبه خطي بأطراف ليّنة. منحنى الواجهة أعلاه أُسّي، يقطع
     تسعين بالمئة من المسافة في ربع المدة، فيقرأ كوميض لا ككتابة. */
  --ease-draw: cubic-bezier(0.45, 0.05, 0.3, 1);
  --rise: 28px;
  --t-fast: 140ms;
  --t-ui: 240ms;
  --t-reveal: 760ms;

  /* ---- الشكل: قصّة المعيَّن ----
     لا استدارة في الموقع إطلاقاً. والزوايا تُقَصّ بزاوية 45 درجة، وهي
     زاوية المعيَّن نفسه: نقاط الشعار الثلاث معيَّنات، وبين كل موجتين في
     الباترون معيَّن. فالزرّ قطعة من الشكل نفسه لا مستطيل محايد. */
  --cut: 10px;
  /* نفس القصّة على لوح كبير: 10px على فتحة صورة بعرض نصف الشاشة تختفي،
     فتقرأ الفتحة مستطيلاً محايداً لا قطعةً من الشكل. */
  --cut-lg: clamp(16px, 2.2vw, 30px);

  /* ---- استدارة: قاعدة واحدة ----
     صفر في كل مكان. الانحناء الوحيد في الموقع هو الشعار والموتيف نفسهما،
     تماماً مثل مطبوعاتهم: العلب والكروت والأكياس كلها حواف قائمة. */
  --radius: 0;
}

/* ==========================================================================
   أساس
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--ar);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.is-dark :focus-visible { outline-color: var(--on-dark); }

::selection {
  background: var(--green);
  color: var(--on-dark);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--green);
  color: var(--on-dark);
  font-size: 0.9rem;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   تخطيط مشترك
   ========================================================================== */

.wrap {
  width: min(100%, 1320px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(4.75rem, 9vw, 8.5rem);
}

/* الهيدر المثبت لا يغطي القسم عند القفز إليه */
main section[id] { scroll-margin-top: 92px; }

.is-dark {
  background: var(--green);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   الشعار
   ثلاثة أنماط، كلها ملفات SVG مقنَّعة بـmask لا صوراً، فتأخذ لونها من
   currentColor وتبقى ملفاً واحداً مخزَّناً بدل تكرارها داخل كل صفحة.
   النسب مقيسة من الفيكتور الأصلي (brand.md القسم 3).
   -------------------------------------------------------------------------- */

.logo {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.logo--primary {
  aspect-ratio: 365.86 / 256.65;
  -webkit-mask-image: url("../img/logo-primary.svg");
  mask-image: url("../img/logo-primary.svg");
}

.logo--secondary {
  aspect-ratio: 663.84 / 113.04;
  -webkit-mask-image: url("../img/logo-secondary.svg");
  mask-image: url("../img/logo-secondary.svg");
}

.logo--mark {
  aspect-ratio: 272.48 / 147.95;
  -webkit-mask-image: url("../img/mark.svg");
  mask-image: url("../img/mark.svg");
}

/* علامة العنوان: الشريط الصغير المستخدم في البروفايل نفسه قبل كل عنوان صفحة */
.mark-rule {
  display: inline-block;
  width: 6px;
  height: 1.1em;
  margin-inline-end: 0.7rem;
  background: currentColor;
  vertical-align: -0.12em;
}

.h-section {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 4rem);
  font-weight: 500;
}

.lede {
  max-width: 46ch;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

.is-dark .lede { color: var(--on-dark-soft); }

.latin {
  font-family: var(--la);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ==========================================================================
   الموتيف
   شريط الباترون هو نفسه أيقونة الشعار مكررة.
   ========================================================================== */




/* شريط الموتيف: صفّان كاملان، وهي وحدة البلاطة نفسها. صفٌّ واحد يقطع
   الموتيف من نصفه لأن الصفوف متداخلة، ومطبوعاتهم دائماً صفّان فأكثر.
   يبقى في الهيرو وحده: الأقسام الداخلية حدودها صريحة بلا شريط وسيط.

   الغلاف يقصّ ويكشف، والطبقة الداخلية هي التي تتحرك. الحركة على
   transform وحده، فلا تُحرَّك خلفية ولا موضع قناع. */
.seam {
  position: relative;
  height: var(--band);
  overflow: hidden;
  color: var(--green);
  /* يُرسم من اليمين لليسار، نفس اتجاه كتابة الشعار فوقه، فيقرأ كخطٍّ
     يُمَدّ لا كعنصر يظهر فجأة */
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1000ms var(--ease-draw);
}

.seam > i {
  position: absolute;
  inset-block: 0;
  /* يسار فيزيائي لا منطقي: translateX يزيح لليسار دائماً مهما كان الاتجاه،
     فلا بد أن تكون البلاطة الزائدة على اليمين حتى تسدّ ما ينكشف. */
  left: 0;
  /* بلاطة زائدة على العرض، فالانزياح بمقدارها يعيد الشكل نفسه تماماً */
  width: calc(100% + var(--tile-w));
  /* قناع لا صورة خلفية: ملف SVG محمَّل كخلفية لا يرى لون العنصر،
     فـcurrentColor داخله لا يُحل أبداً. */
  background-color: currentColor;
  -webkit-mask-image: url("../img/band.svg");
  mask-image: url("../img/band.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: auto var(--band);
  mask-size: auto var(--band);
  /* ينساب باتجاه قراءة العربية، نفس اتجاه كتابة الشعار فوقه */
  animation: seam-flow 20s linear infinite;
}

@keyframes seam-flow {
  to { transform: translate3d(calc(var(--tile-w) * -1), 0, 0); }
}

.seam.is-in { clip-path: inset(0 0 0 0); }

.seam--on-dark { color: var(--on-dark); opacity: 0.32; }

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

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  transition: background-color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

/* الرابط هدفُ اللمس، والعنصر الداخلي هو الشعار. قِيس أن الرابط وحده
   مقنَّعاً بالشعار ارتفاعه 19px فقط (112 عرضاً على نسبة الشعار)، وهو
   أقل من نصف الحدّ الأدنى لهدف اللمس (44px). فصار الرابط علبةً
   بارتفاع 44 يتوسّطها الشعار، بلا أي تغيّر في حجمه الظاهر.
   وحُذف `role="img"` عنه: كان يُلغي دوره كرابط في قارئات الشاشة. */
.header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
}

.header__logo-mark { width: clamp(112px, 14vw, 152px); }

.header.is-stuck {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--rule);
}
.header.is-stuck .header__logo { color: var(--green); }
.header.is-stuck .nav a { color: var(--ink); }
.header.is-stuck .nav-toggle { color: var(--ink); }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}

.nav a {
  color: var(--on-dark);
  font-size: 0.94rem;
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;  /* ينمو من جهة البداية في RTL */
  transition: transform var(--t-ui) var(--ease);
}

.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 0.5rem;
  color: var(--on-dark);
  cursor: pointer;
}

/* ==========================================================================
   الأزرار
   ========================================================================== */

/* الزرّ مقصوص الزوايا بزاوية المعيَّن. مصمت دائماً لا محدَّد بإطار:
   الإطار مع القصّ ينقطع عند الأضلاع المائلة لأن القصّ يقطع الحد نفسه. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  border: 0;
  font-family: var(--ar);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut)
  );
  transition: background-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:active { transform: scale(0.97); }

/* القصّ يقصّ الـoutline أيضاً، فحلقة التركيز تُرسم للداخل */
.btn:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px currentColor;
}

.btn--solid {
  background: #ffffff;
  color: var(--green);       /* 5.48 على الأبيض */
}
.btn--solid:hover { background: var(--cream); color: var(--ink); }

.btn--ghost {
  background: var(--green-deep);
  color: #ffffff;            /* 12.01 على الأخضر الغامق */
}
.btn--ghost:hover { background: #222b28; }

/* ==========================================================================
   الهيرو
   حقل أخضر كامل، والشعار يكتب نفسه من اليمين لليسار مثل ما تُكتب الكلمة،
   لأن الاسم فعل: الموقع يبدأ بفعل النثل نفسه لا بصورة جاهزة.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: clamp(5rem, 12vh, 8rem) 0;
  background: var(--green);
  color: var(--on-dark);
  overflow: hidden;
}

/* علامة مائية: الأيقونة مكبَّرة بدرجة من نفس العائلة، مثل التيشيرت في البروفايل */


/* قضيب الموتيف الرأسي على حافة الحقل، مثل ما يحفّ كيسَ قهوتهم */


.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.1rem, 3.6vw, 3.2rem);
  justify-items: start;
  /* هامشان تلقائيان يوزّعان الفراغ حول الكتلة، فتبقى في الوسط
     مهما طال الحقل أو قصر. الدرزة تجلس بعدها عند الحافة. */
  margin-block: auto;
}

/* علامة مائية: الأيقونة مكبَّرة بدرجة من نفس العائلة، مثل التيشيرت في البروفايل.
   ترتفع وتهبط ببطء شديد، فالكأس الكبير يبقى حيّاً بلا أن يسرق النظر. */
.hero__ghost {
  position: absolute;
  inset-block-end: -14%;
  inset-inline-end: -20%;     /* الجهة اليسرى في RTL */
  width: min(98vw, 1200px);
  color: #ffffff;
  opacity: 0.085;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* القصّ محصور بوجود الجافاسكربت، فبدونه تبقى الزخرفة ظاهرة كاملة */
.js .hero__ghost {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 950ms var(--ease-draw) 420ms;
}

.hero.is-ready .hero__ghost {
  clip-path: inset(0 0 0 0);
  animation: ghost-rise 15s ease-in-out 1.4s infinite;
}

@keyframes ghost-rise {
  0%, 100% { transform: rotate(-6deg) translate3d(0, 0, 0); }
  50%      { transform: rotate(-4.6deg) translate3d(0, -26px, 0); }
}

/* قضيب الموتيف الرأسي على حافة الحقل، مثل ما يحفّ كيسَ قهوتهم.
   الموتيف فيه يصعد بلا توقف، وهذا لبّ الاسم: رفع ما في القاع إلى السطح. */
.hero__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(38px, 5vw, 74px);
  overflow: hidden;
  opacity: 0.17;
  pointer-events: none;
}

/* يُرسم من أسفل إلى أعلى: نفس اتجاه صعود الموتيف داخله */
.js .hero__rail {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 850ms var(--ease-draw) 540ms;
}

.hero.is-ready .hero__rail { clip-path: inset(0 0 0 0); }

.hero__rail > i {
  position: absolute;
  inset-inline: 0;
  top: 0;
  /* بلاطة زائدة على الارتفاع، فالصعود بمقدارها يعيد الشكل نفسه تماماً */
  height: calc(100% + var(--band));
  background-color: #ffffff;
  -webkit-mask-image: url("../img/band.svg");
  mask-image: url("../img/band.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: auto var(--band);
  mask-size: auto var(--band);
  animation: rail-rise 12s linear infinite;
}

@keyframes rail-rise {
  to { transform: translate3d(0, calc(var(--band) * -1), 0); }
}

/* شريط الهيرو جزء من تتابع الفتح لا من كشف التمرير: هو أسفل الحقل مباشرة،
   ومراقب التمرير يقصّ 12% من أسفل الإطار فلا يراه أصلاً، فكان ينتظر شبكة
   الأمان عند 2.5 ثانية ثم يظهر دفعة واحدة. */
.hero__seam {
  margin-block-start: 0;
  /* يأتي بعد الشعار والنص والقضيب، فيختم التتابع */
  transition-delay: 680ms;
}

.hero.is-ready .hero__seam { clip-path: inset(0 0 0 0); }

.hero__logo {
  width: clamp(230px, 34vw, 430px);
  color: var(--on-dark);
  /* المسح من اليمين لليسار: اتجاه كتابة العربية */
  clip-path: inset(0 0 0 100%);
}

.js .hero__logo { transition: clip-path 1000ms var(--ease-draw); }
.hero.is-ready .hero__logo { clip-path: inset(0 0 0 0); }







.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }



/* تتابع دخول الهيرو: كل عنصر يرتفع بعد الذي قبله بـ90 مللي */
.js .hero__inner > *:not(.hero__logo) {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-reveal) var(--ease),
              transform var(--t-reveal) var(--ease);
}

.hero.is-ready .hero__inner > *:not(.hero__logo) {
  opacity: 1;
  transform: none;
}

.hero.is-ready .hero__actions { transition-delay: 300ms; }

/* ==========================================================================
   قسم الاسم: تخطيط غير متناظر، النص الكبير يمين والشرح مزاح لأسفل اليسار
   ========================================================================== */

/* علامة وقف لا قسم: حشوتها أضيق، وإلا صار الفراغ فجوةً لا هواء */
.name {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 4.5vw, 4rem);
}



/* الرمز وحده يتوسط الفاصل، مثل زخرفة الطابع في آخر الفصل.
   متمركز عمداً وإن كانت الصفحة كلها محاذية للبداية: هو علامة وقف
   لا سطر يُقرأ، والتمركز يقول ذلك. */
.name__mark {
  width: clamp(88px, 13vw, 176px);
  margin-inline: auto;
  color: var(--green);
}





/* ==========================================================================
   المحاصيل
   شبكة غير متناظرة عمداً: البطاقات تختلف عرضاً وتُزاح رأسياً.
   الثلاث المتساوية المتجاورة ممنوعة.
   ========================================================================== */

.crops__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: end;
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}

.crops__head h2 { grid-column: 1 / span 6; }
.crops__head .lede { grid-column: 8 / span 5; }

.crops__list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  row-gap: 0;
  border-block-start: 1px solid var(--green);
}

/* بلا تعبئة ولا ظل ولا إزاحة: خط شعري واحد يفصل، والباقي فراغ.
   البطاقة المعبّأة تصرخ «صندوق»، والقائمة المصفوفة تقرأ كقائمة نبيذ. */
.crop {
  position: relative;
  display: grid;
  gap: 1.05rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--rule);
  transition: opacity var(--t-ui) var(--ease);
}

.crop:nth-child(1),
.crop:nth-child(2) { border-block-start: 0; }

.crop:nth-child(odd) { grid-column: 1 / span 6; }
.crop:nth-child(even) { grid-column: 7 / span 6; }

.crop__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.crop__name {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  font-weight: 500;
}

.crop__origin {
  font-family: var(--la);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.crop__notes {
  color: var(--ink-soft);
  max-width: 44ch;
}

.crop__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding-block-start: 1.05rem;
  border-block-start: 1px solid var(--rule);
}

.crop__spec div { display: grid; gap: 0.1rem; }

.crop__spec dt {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.crop__spec dd {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 500;
}

/* ==========================================================================
   المكان
   أربع فتحات غير متناظرة: عريضة وضيّقة بالتناوب على شبكة 12، وبإزاحتين
   رأسيتين. الشبكة المتساوية آمنة لكنها متوقَّعة، والتفاوت هو ما يمسك النظر.
   والفتحة مقصوصة الزاويتين 45 درجة كالأزرار والبطاقات، فهي قطعة من
   الشكل نفسه لا مستطيل محايد وُضعت فيه صورة.
   ========================================================================== */

/* شبكة الجوال شريط يمتدّ لحافتي الشاشة بهامش سالب، فأي خطأ في حسابه
   يخرج بتمرير أفقي في الصفحة كلها. القطع هنا يحصره في القسم.
   و`clip` لا `hidden`: الأخير ينشئ سياق تمرير يبتلع `scroll-margin-top`
   للروابط الداخلية. */
.place {
  overflow-x: clip;
}

.place__head {
  display: grid;
  gap: 0.9rem;
  padding-block-end: clamp(2rem, 4vw, 3.25rem);
}

/* عمودان × صفّان، بعدد الصور الأربع الواصلة فعلاً. */
.place__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}

/* الفتحة غلاف اللوح: هي ما يوضع في الشبكة ويحمل الإزاحة، واللوح
   داخلها يحمل النسبة والقصّ. */
.place__frame {
  position: relative;
  margin: 0;
  display: grid;
}

.place__plate {
  position: relative;
  display: block;
  overflow: hidden;
  /* شبح الحقل قبل أن يُصَبّ فيه: الفتحة الفارغة تماماً تقرأ ثقباً،
     والشبح يقرأ إناءً ينتظر. */
  background: rgba(87, 110, 103, 0.12);
  clip-path: polygon(
    var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
    calc(100% - var(--cut-lg)) 100%, 0 100%, 0 var(--cut-lg)
  );
}

/* كلها مربّعة ومتساوية الحجم بقرار يوسف، بلا تفاوت في المقاس ولا
   تراكب ولا إزاحة. */
.place__plate { aspect-ratio: 1; }

/* ==========================================================================
   التركيب: أربعة مربّعات متساوية في شبكة ٢×٢

   عمودان ضمنيان في `.place__grid` (`repeat(2, 1fr)`)، فلا حاجة
   لتخصيص `grid-column`/`grid-row` لكل فتحة: الوضع الضمني يرتّبها في
   العربية RTL من أعلى اليمين: البار، الجلسة (صفّ ١)، تفصيلة، الواجهة
   (صفّ ٢).
   ========================================================================== */

/* الحقل المصبوب: هو ما يحمل اللون والرمز والصورة، وهو ما يُصَبّ.
   منفصل عن الفتحة لأن الفتحة تحمل قصّ الزوايا، وعنصر واحد لا يحمل
   قناعَي clip-path معاً. */
.place__fill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--green);
}

/* الثاني والثالث غامقان، فلا يجاور مربّعٌ مربّعاً بلونه لا أفقياً ولا
   رأسياً (رقعة شطرنج على ٢×٢). واللون هنا حالة تحميل عابرة لا أكثر:
   الصورة تغطّي الحقل فور اكتمالها، فلا يظهر إلا قبلها أو لو فشل
   التحميل. */
.place__frame:nth-child(2) .place__fill,
.place__frame:nth-child(3) .place__fill { background: var(--green-deep); }

/* ---- الصبّ ----
   الحقل يُملأ من الأسفل إلى الأعلى، وهو معنى الاسم حرفياً: ما في القاع
   يطلع. ولذلك أُلغي الرفع العام عن الفتحة، فحركتان على شيء واحد تقرآن
   ارتباكاً لا قصداً. والصورة داخل الحقل نفسه، فهي تُصَبّ مثله عند وصولها. */
.js .place__frame[data-reveal] { opacity: 1; transform: none; }

.js .place__fill {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms var(--ease-draw);
}

.js .place__frame.is-in .place__fill { clip-path: inset(0 0 0 0); }

/* تتابع: تُصَبّ واحدة بعد واحدة لا دفعةً واحدة */
.js .place__frame:nth-child(2) .place__fill { transition-delay: 110ms; }
.js .place__frame:nth-child(3) .place__fill { transition-delay: 220ms; }
.js .place__frame:nth-child(4) .place__fill { transition-delay: 330ms; }

/* الصورة تملأ الحقل بحكم موضعها المطلق. */
.place__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.sweets {
  position: relative;
  background: var(--green-deep);
  color: var(--on-dark);
}

.sweets__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.sweets__head {
  grid-column: 1 / span 5;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-content: start;
}

.sweets__title {
  font-size: clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.sweets__myth {
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.24rem);
  line-height: 1.75;
  color: var(--on-dark-soft);
  max-width: 28ch;
}

/* ---- الكرت ---- */

.sweets__card {
  grid-column: 6 / span 7;
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  /* فراغ أسفل الكرت لحاشية الشريط، فلا يلتصق بآخر صنف */
  padding-block-end: calc(clamp(1.75rem, 3.4vw, 3rem) + var(--band) * 0.62);
  overflow: hidden;
}

/* حاشية الطباعة: الشريط عند الحافة السفلى، مثل كيس قهوتهم وكرت منيوهم */
.sweets__card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: calc(var(--band) * 0.5);
  background-color: var(--green);
  -webkit-mask-image: url("../img/band.svg");
  mask-image: url("../img/band.svg");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto var(--band);
  mask-size: auto var(--band);
  -webkit-mask-position: center top;
  mask-position: center top;
  opacity: 0.9;
  pointer-events: none;
}

.sweets__card-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--green);
}

.sweets__card-head h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
}

.sweets__card-head .latin { font-size: 0.76rem; color: var(--ink-soft); }

.sweets__list { display: grid; }

.sweet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.1vw, 1.5rem);
  border-block-end: 1px solid var(--rule);
}

.sweet:last-child { border-block-end: 0; padding-block-end: 0; }

.sweet__name {
  font-size: clamp(1.18rem, 1rem + 0.9vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
}

.sweet__latin {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--la);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.sweet__desc {
  grid-column: 1 / -1;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ==========================================================================
   زورونا
   ========================================================================== */

.visit__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.visit__head { grid-column: 1 / span 5; display: grid; gap: 1.25rem; }
.visit__facts { grid-column: 7 / span 6; display: grid; gap: 0; }
.map { grid-column: 1 / span 5; grid-row: 2; }

/* أوقات العمل ثلاثة صفوف: اليوم يميناً والوقت يساراً، بأرقام مصطفّة
   عموديّاً. الخانة داخلها LTR، فالمحاذاة المنطقية تدفعها للطرف الغلط. */
.hours { display: grid; gap: 0.45rem; }

.hours span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.hours b { font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; }

/* بلا فرض اتجاه: النص «6:30 ص إلى 3 ص» عربي فيه أرقام، وفرض LTR عليه
   يقذف الرقم إلى آخر السطر فيُقرأ «ص إلى 3 ص 6:30». الاتجاه الموروث
   يرتّبه صحيحاً، والمحاذاة تأتي من space-between في الصفّ لا من الاتجاه. */
.hours i {
  font-style: normal;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   الخريطة
   رسم ساكن من شوارع الحيّ الحقيقية بألوان الهوية، والعلامة عليه شعار نثل
   لا دبوساً. الرسم مُسقَط حول إحداثيات المقهى، فمركزه هو المقهى بالضبط
   ولا تحتاج العلامة ضبطاً يدوياً.
   ========================================================================== */

.map {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1000 / 720;
  background: var(--cream);
  border: 1px solid var(--rule);
  clip-path: polygon(
    var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
    calc(100% - var(--cut-lg)) 100%, 0 100%, 0 var(--cut-lg)
  );
  transition: border-color var(--t-ui) var(--ease);
}

.map:hover { border-color: var(--green); }

.map__plan {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* في مركز الرسم تماماً، وهو موضع المقهى */
.map__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(54px, 9vw, 74px);
  aspect-ratio: 1;
  background: var(--green);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  /* الظل الوحيد في الموقع مع الزر العائم: العلامة لازم تنفصل عن الرسم
     تحتها وإلا قُرئت جزءاً من الشوارع. */
  filter: drop-shadow(0 6px 18px rgba(23, 28, 27, 0.28));
}

.map__logo { width: 58%; color: var(--on-dark); }

.map__cta {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 0.75rem 1.15rem;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.86rem;
  font-weight: 500;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

.fact {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule);
}

.fact:first-child { border-block-start: 1px solid var(--rule); }

.fact dt {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.fact dd { margin: 0; font-weight: 500; }

.fact a { text-decoration: none; border-block-end: 1px solid var(--rule); }
/* الخط وحده يتلوّن بالأخضر لا النص: أخضر الهوية على الكريمي تباينه 4.10،
   أي دون حدّ AA للنص العادي. القاعدة نفسها في كل الموقع. */
.fact a:hover { border-block-end-color: var(--green); }

.social {
  display: flex;
  gap: 0.6rem;
  margin-block-start: 1.6rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  transition: background-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease),
              transform var(--t-fast) var(--ease);
}

.social a:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-dark);
}

.social a:active { transform: scale(0.97); }

.social svg { width: 19px; height: 19px; }

/* ==========================================================================
   الزر العائم للتواصل
   ========================================================================== */

.fab {
  position: fixed;
  inset-block-end: clamp(1rem, 2.5vw, 1.75rem);
  inset-inline-start: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 45;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

.fab__list {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

.fab__list li {
  /* مطويّة تماماً وهي مغلقة، فلا تأخذ مساحة ولا تُلتقط بالتاب */
  display: grid;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  visibility: hidden;
  transition: opacity var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease),
              visibility var(--t-ui);
}

.fab.is-open .fab__list li {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* ترتفع واحدة بعد واحدة، من الأقرب إلى الزرّ صعوداً */
.fab.is-open .fab__list li:nth-child(4) { transition-delay: 40ms; }
.fab.is-open .fab__list li:nth-child(3) { transition-delay: 90ms; }
.fab.is-open .fab__list li:nth-child(2) { transition-delay: 140ms; }
.fab.is-open .fab__list li:nth-child(1) { transition-delay: 190ms; }

/* الزرّ يطفو فوق ثلاثة حقول: الكريمي، وأخضر الهيرو، وأخضر الحلا الغامق.
   فلا يصلح لون من عائلتهم وحده، لأنه يذوب في أحدها حتماً. الحبر يظهر على
   الثلاثة، والظلّ يفصل حافته عن الغامق منها. وهو الظلّ الوحيد في الموقع:
   عنصر طافٍ يجب أن ينفصل عمّا تحته، وإلا بدا ملصوقاً. */
.fab__list a,
.fab__toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #ffffff;          /* 10.21 على الحبر */
  background: var(--ink);
  filter: drop-shadow(0 4px 14px rgba(23, 28, 27, 0.32));
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0 calc(100% - 8px), 0 8px
  );
  transition: background-color var(--t-ui) var(--ease),
              transform var(--t-fast) var(--ease);
}

/* ---- الحجاب ----
   القائمة مفتوحةً ترتفع فوق ما تحتها، فأي لمسة قريبة من أيقونة تصيب
   الأيقونة لا العنصر المقصود. قِيس على الجوال أن أيقونة إنستقرام
   تتقاطع 13px مع زرّ «المنيو» في الهيرو، والمشكلة أعمّ: القائمة تمرّ
   فوق ما صادفته عند أي موضع تمرير.
   فالحجاب يجعلها نافذة حوار: ما تحتها لا يُلمس، واللمسة الأولى تغلقها
   (مستمع النقر الخارجي في main.js يلتقطها لأنها خارج `.fab`).
   وهو بعد `.fab` في الماركب لا قبله، لأن الاختيار في CSS يمضي للأمام. */
.fab-scrim {
  position: fixed;
  inset: 0;
  z-index: 44;                /* تحت الزرّ (45) وفوق كل ما عداه */
  background: rgba(23, 28, 27, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-ui) var(--ease),
              visibility var(--t-ui);
}

.fab.is-open ~ .fab-scrim {
  opacity: 1;
  visibility: visible;
}

.fab__list a:hover { background: var(--green); }
.fab__toggle { width: 54px; height: 54px; position: relative; }
.fab__toggle:hover { background: var(--green); }

.fab__list a:active,
.fab__toggle:active { transform: scale(0.94); }

.fab__list a:focus-visible,
.fab__toggle:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.fab__list svg { width: 19px; height: 19px; }

.fab__icon {
  position: absolute;
  width: 22px;
  height: 22px;
  transition: opacity var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease);
}

.fab__icon--close { opacity: 0; transform: rotate(-45deg); }

.fab.is-open .fab__icon--open { opacity: 0; transform: rotate(45deg); }
.fab.is-open .fab__icon--close { opacity: 1; transform: none; }

/* ==========================================================================
   الفوتر
   ========================================================================== */

.footer {
  background: var(--green-deep);
  color: var(--on-dark);
  padding-block: clamp(3.25rem, 7vw, 5rem);
  /* حشوة سفلى تكفي لعلوّ الزرّ العائم، فلا يجلس فوق سطر الحقوق */
  padding-block-end: clamp(6rem, 9vw, 7rem);
}

.footer__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); }

/* الأعلى: الشعار في جهة، وروابط الموقع في الأخرى */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.footer__logo { width: clamp(104px, 13vw, 148px); color: var(--on-dark); }

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.1rem, 2.4vw, 2.1rem);
}

.footer__nav a {
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  text-decoration: none;
  padding-block: 0.2rem;
  border-block-end: 1px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.footer__nav a:hover {
  color: var(--on-dark);
  border-block-end-color: var(--on-dark);
}

/* الأسفل: سطران صغيران يفصلهما خط شعري عمّا فوقهما */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
  border-block-start: 1px solid var(--rule-dark);
  font-size: 0.87rem;
  color: var(--on-dark-soft);
}

.footer__by {
  font-family: var(--la);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}

.footer__bottom a { text-decoration: none; border-block-end: 1px solid var(--rule-dark); }
.footer__bottom a:hover { border-block-end-color: var(--on-dark); color: var(--on-dark); }

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

.menu-hero {
  background: var(--green);
  color: var(--on-dark);
  padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}

/* لافتة المنيو غلاف مثل هيرو الرئيسية: متمركزة وهادئة */
.menu-hero__inner {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.menu-hero__logo { width: clamp(150px, 21vw, 248px); color: var(--on-dark); }

/* قضبان الموتيف الرأسية التي تحفّ التركيب في كيس القهوة */




.menu-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  border-block-end: 1px solid var(--rule);
}

/* شريط التنقل يتبع نفس عرض ورقة المنيو */
.menu-nav .wrap { max-width: calc(820px + 2 * var(--gutter)); }

.menu-hero__label { font-size: 0.78rem; color: var(--on-dark-soft); }

.menu-nav ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  overflow-x: auto;
  padding-block: 1rem;
  scrollbar-width: none;
}
.menu-nav ul::-webkit-scrollbar { display: none; }

.menu-nav a {
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
  padding-block: 0.25rem;
  border-block-end: 1px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.menu-nav a:hover { color: var(--ink); }
/* الأخضر على الكريمي 4.10، دون AA للنص الصغير. فالنصّ يأخذ الحبر،
   والأكسنت يبقى في الخطّ تحته وهو زخرفة لا نصّ يُقرأ. */
.menu-nav a.is-current { color: var(--ink); border-block-end-color: var(--green); }

/* المنيو وجهة باركود داخل المحل، فيقرأ كورقة لا كصفحة عريضة:
   عرض محصور مثل كرت منيوهم المطبوع، والسعر قريب من اسم الصنف. */
.menu-section {
  max-width: 820px;
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  scroll-margin-top: 76px;
}

.menu-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block-end: 1.1rem;
  margin-block-end: 0.5rem;
  border-block-end: 1px solid var(--green);
}

.menu-section__head h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem); }

/* الأخضر على الكريمي 4.10، أي دون AA للنص الصغير. فهذي الملصقات اللاتينية
   الصغيرة تأخذ --ink-soft، وهو أخضرهم نفسه بإضاءة أخفض، 5.41 على الكريمي. */
.menu-section__head .latin { font-size: 0.8rem; color: var(--ink-soft); }

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
  gap: 0.2rem 1rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-block-end: 1px solid var(--rule);
}

.menu-item__name { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); font-weight: 500; }

.menu-item__latin {
  grid-column: 1;
  font-family: var(--la);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.menu-item__num {
  font-family: var(--la);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: start;
  color: var(--ink-soft);
}

.menu-item__num[data-empty] { color: var(--ink-soft); }

.menu-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
  gap: 1rem;
  padding-block-end: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ==========================================================================
   صفحة التحميل
   الشعار يُرسم كما يُرسم في الهيرو، ثم يرتفع الحقل كله ويكشف الموقع.
   الخروج بحركة CSS خالصة لا بجافاسكربت: لو تعطّل السكربت ترتفع كما هي
   ولا تحبس الزائر خلف شاشة خضراء.
   ========================================================================== */

/* الجلسة رأتها فعلاً: تُلغى تماماً لا تُخفى بعد عرضها */
.no-pre .preloader { display: none; }

/* مقلوبة عن الهيرو: ورق كريمي وحبر أخضر، فارتفاعها يكشف حقلاً أخضر
   تحتها. الانتقال من فاتح إلى داكن أقوى من فاتح إلى فاتح. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cream);
  animation: pre-lift 560ms var(--ease) 1180ms forwards;
}

.preloader__logo {
  width: clamp(190px, 26vw, 320px);
  color: var(--green);
  clip-path: inset(0 0 0 100%);
  animation: pre-draw 920ms var(--ease-draw) 120ms forwards;
}

@keyframes pre-draw {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes pre-lift {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ==========================================================================
   الكشف عند التمرير — «الرفع»
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-reveal) var(--ease),
              transform var(--t-reveal) var(--ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   شريط الملاحظة — يُحذف عند وصول محتوى العميل
   ========================================================================== */



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

@media (max-width: 900px) {

  .crops__head h2,
  .crops__head .lede { grid-column: 1 / -1; }

  /* عمود واحد حقيقي: إبقاء اثني عشر مساراً بفجوة واسعة يطلع بمجموع
     الفجوات أعرض من الشاشة، فينزلق المحتوى خارج الحافة. */
  .crops__list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* نفس وزن المحدِّد أعلاه: استعلام الوسائط لا يضيف أولوية، فلو كُتبت
     `.crop` وحدها لبقيت قاعدتا odd/even غالبتين وتراكبت البطاقات. */
  .crop:nth-child(odd),
  .crop:nth-child(even) { grid-column: 1 / -1; }

  .crop:nth-child(2) { border-block-start: 1px solid var(--rule); }
  .crop:nth-child(1) { border-block-start: 0; }

  /* على الجوال الخريطة تسبق التفاصيل: الزائر يريد «وين» قبل «متى»،
     والرسم يجيب عنها بلا قراءة. */
  .visit__head, .visit__facts { grid-column: 1 / -1; }
  .map { grid-column: 1 / -1; grid-row: auto; order: -1; }

  /* شريط أفقي لا كومة رأسية.
     أربع فتحات بعرض الشاشة فوق بعضها أطول من شاشتي جوال، والزائر يمرّ
     عليها بين «الحلا» و«وين نلقاكم». الشريط يردّها إلى ارتفاع صورة
     واحدة، ويبقي كل صورة كبيرة بدل أن يصغّرها.

     والمربّعات الأربعة بالحجم نفسه هنا أيضاً، فالشريط منتظم. */
  .place__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: auto;
    /* يمتد لحافتي الشاشة فيقرأ شريطاً متصلاً، والحشوة تعيد أول فتحة
       وآخرها إلى محاذاة بقية المحتوى. السالب يساوي الحشوة تماماً،
       فالمجموع عرض الشاشة بالضبط ولا يفيض. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* بدونه يحاذي التثبيتُ حافةَ الحاوية لا حافة الحشوة، فينزلق الشريط
       بمقدار الحشوة من نفسه (قِيس: scrollLeft=-20) وتلتصق أول فتحة
       بحافة الشاشة بينما العنوان فوقها مُزاح. */
    scroll-padding-inline: var(--gutter);
  }

  .place__grid::-webkit-scrollbar { display: none; }

  /* لا قواعد nth-child على الديسكتوب تحتاج مُدافعةً هنا (الشبكة تضع
     الفتحات ضمنياً)، فمحدِّد الفئة العادي يكفي. */
  .place__frame {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* 80vw على نسبة 1:1 تعطي عرضاً 80vw، يسع ويُبقي طرفاً ظاهراً من
     المربّع التالي فيُعرف أن الشريط يُمرَّر. */
  .place__plate { height: min(80vw, 360px); }

  /* عمود واحد حقيقي: إبقاء اثني عشر مساراً بفجوة واسعة يطلع بمجموع
     الفجوات أعرض من الشاشة، فينزلق المحتوى خارج الحافة. */
  .sweets__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .sweets__head, .sweets__card { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--green);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 380ms var(--ease), visibility 380ms;
  }

  .nav.is-open { transform: none; visibility: visible; }

  .nav ul { flex-direction: column; gap: 1.75rem; text-align: center; }
  .nav a { font-size: 1.3rem; color: var(--on-dark); }

  .nav-toggle { display: block; position: relative; z-index: 2; }

  /* الشعار يبقى فوق ستارة القائمة، فالزائر ما يفقد مكانه */
  .header__logo { position: relative; z-index: 2; }

  .nav.is-open ~ .nav-toggle,
  .header.is-stuck .nav.is-open ~ .nav-toggle { color: var(--on-dark); }

  /* الخطان يلتقيان في صليب: تغيّر الحالة مقروء بلا نص */
  .burger path {
    transform-origin: 13px 13px;
    transition: transform var(--t-ui) var(--ease);
  }
  .burger__top { transform: translateY(0) rotate(0); }
  .burger__bottom { transform: translateY(0) rotate(0); }

  .nav.is-open ~ .nav-toggle .burger__top { transform: translateY(5px) rotate(45deg); }
  .nav.is-open ~ .nav-toggle .burger__bottom { transform: translateY(-5px) rotate(-45deg); }

  .hero__ghost { inset-inline-end: -34%; width: 150vw; }
  .hero__rail { display: none; }

  /* البلاطة كلها تصغر، فيبقى الصفّان كاملين */
  :root { --band: 68px; }

  .fact { grid-template-columns: 1fr; gap: 0.15rem; }

  .menu-item,
  .menu-head-row { grid-template-columns: minmax(0, 1fr) 4rem 4rem; }

  .sweet { grid-template-columns: 1fr; }
  .sweet__latin { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   احترام تقليل الحركة
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal],
  .js .hero__inner > *:not(.hero__logo) {
    opacity: 1;
    transform: none;
  }

  .hero__logo,
  .js .hero__logo { clip-path: inset(0 0 0 0); }

  /* الحقل مصبوب سلفاً: لا يُصَبّ أمام من طلب تقليل الحركة. ولا يُعتمَد
     على تقصير المدة أعلاه وحده، لأن الحقل يبقى مقصوصاً حتى يصل المراقب. */
  .js .place__fill { clip-path: none; }


  .seam { clip-path: inset(0 0 0 0); }

  /* لا شاشة تحميل إطلاقاً: الزائر يصل للمحتوى فوراً */
  .preloader { display: none; }

  /* الزخرفة تبقى ظاهرة ساكنة: لا رسم ولا حلقات ولا انزياح */
  .hero__ghost, .hero.is-ready .hero__ghost { opacity: 0.085; animation: none; }
  .hero__rail { opacity: 0.17; }
  .js .hero__ghost,
  .js .hero__rail { clip-path: inset(0 0 0 0); }
  .hero__rail > i,
  .seam > i { animation: none; transform: none; }

}