/* ═══════════════════════════════════════════════════════════════════
   SAHAB — style.css (v2 · full rewrite)
   «Above the clouds» — editorial dark luxury for a Levantine table
   fifty-two floors over Downtown Dubai.

   Identity tokens (fixed):  bg #0C0F14 · ink #EFE7D8 · copper #C6A15B
   Copper is reserved for INTERACTIVE elements only — CTAs, link hovers,
   focus rings, active states. Never decoration.

   Mobile-first · min-width media queries · logical properties everywhere
   (the /ar/ RTL page reuses this stylesheet and mirrors automatically).
   Default state = fully visible with JS disabled; every hidden/animated
   initial state is gated behind `html.js` or a JS-toggled class.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Design tokens ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* palette */
  --bg:            #0C0F14;
  --bg-soft:       #10141B;
  --ink:           #EFE7D8;
  --ink-dim:       rgba(239, 231, 216, .64);
  --ink-faint:     rgba(239, 231, 216, .40);
  --ink-ghost:     rgba(239, 231, 216, .12);
  --copper:        #C6A15B;
  --copper-hi:     #D9B878;
  --hairline:      rgba(239, 231, 216, .14);
  --hairline-soft: rgba(239, 231, 216, .08);
  --field-line:    rgba(239, 231, 216, .25);

  /* type stacks (fonts.css defines the faces) */
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:      'Amiri', 'Times New Roman', serif;        /* decorative Arabic */
  --font-ar-head: 'Tajawal', system-ui, sans-serif;         /* RTL headings */

  /* modular type scale (~1.33) */
  --fs-eyebrow: .72rem;
  --fs-small:   clamp(.82rem, .8rem + .1vw, .9rem);
  --fs-body:    clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-h3:      clamp(1.3rem, 1.18rem + .6vw, 1.65rem);
  --fs-h2:      clamp(2.1rem, 1.55rem + 2.6vw, 3.9rem);
  --fs-hero:    clamp(2.7rem, 11.5vw, 10rem);
  --fs-quote:   clamp(1.55rem, 1.15rem + 2vw, 2.85rem);
  --fs-ghost:   clamp(4rem, 18vw, 17rem);

  /* rhythm */
  --space-section: clamp(4.5rem, 11vw, 9.5rem);
  --gutter:        clamp(1.25rem, 4.5vw, 3.5rem);
  --container:     78rem;
  --measure:       44rem;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .55s;

  /* chrome */
  --nav-h: 76px;
  --cta-h: 56px;
  --z-mmenu: 290;
  --z-nav: 300;
  --z-cta: 280;
  --z-grain: 350;
  --z-cursor: 500;
  --z-preloader: 600;
}

/* ── 2 · Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-block-size: 100vh;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
figure { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--copper); color: var(--bg); }

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

/* ── 3 · Shared primitives ─────────────────────────────────────────── */
.container {
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 700;
  background: var(--copper);
  color: var(--bg);
  font-size: .85rem;
  font-weight: 600;
  padding: .8rem 1.3rem;
  border-radius: 2px;
  transform: translateY(-220%);
  transition: transform .3s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* Decorative Arabic word — always Amiri, never letter-spaced (breaks joining) */
.ar {
  font-family: var(--font-ar) !important;
  letter-spacing: normal !important;
}

/* Eyebrow: small-caps Latin marker + short hairline */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: clamp(1.1rem, 2.5vw, 1.6rem);
}
.eyebrow::before {
  content: "";
  inline-size: 2.4rem;
  block-size: 1px;
  background: var(--hairline);
  flex-shrink: 0;
}
.eyebrow .ar { font-size: 1.25em; color: var(--ink-dim); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  inline-size: 2.4rem;
  block-size: 1px;
  background: var(--hairline);
  flex-shrink: 0;
}

/* Section headings — one voice per chapter, set in section rules below */
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: .01em;
  text-wrap: balance;
}
.h2--center { text-align: center; }

/* The accent word: Amiri italic — a bilingual whisper inside Latin display */
.h2 em, .hero__title em {
  font-family: var(--font-ar);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.65;
  text-wrap: pretty;
}
.lead em, .body-text em {
  font-family: var(--font-ar);
  font-style: italic;
  font-size: 1.04em;
}
.body-text { color: var(--ink-dim); margin-block-start: 1.2em; }

/* ── 4 · Buttons (touch ≥48px · magnetic-ready span inside) ────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-block: .85rem;
  padding-inline: 1.9rem;
  border-radius: 2px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn > span { position: relative; z-index: 1; display: inline-block; }

.btn--solid { background: var(--copper); color: var(--bg); }
.btn--solid:hover { background: var(--copper-hi); }

.btn--outline {
  border: 1px solid rgba(239, 231, 216, .35);
  color: var(--ink);
}
.btn--outline:hover {
  background: rgba(239, 231, 216, .05);
  border-color: rgba(239, 231, 216, .6);
}

.btn--ghost { color: var(--ink-dim); padding-inline: .5rem; }
.btn--ghost::after {
  content: "";
  position: absolute;
  inset-inline: .5rem;
  inset-block-end: .5rem;
  block-size: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::after { transform: scaleX(1); }

.btn--small {
  min-block-size: 44px;
  padding-block: .55rem;
  padding-inline: 1.3rem;
  font-size: .72rem;
}
.btn--full { inline-size: 100%; }

/* ── 5 · Custom cursor (pointer:fine + JS only) ────────────────────── */
/* left/top are physical on purpose: GSAP drives x/y from pointer
   coordinates, which are direction-independent. */
.cursor-dot, .cursor-ring {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
}
.cursor-dot {
  inline-size: 6px;
  block-size: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ink);
}
.cursor-ring {
  inline-size: 36px;
  block-size: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(239, 231, 216, .55);
  mix-blend-mode: difference;
  transition: scale .35s var(--ease), border-color .35s var(--ease);
}
.cursor-ring.is-hover { scale: 1.6; border-color: var(--copper); }
@media (pointer: fine) {
  html.js .cursor-dot, html.js .cursor-ring,
  html.has-cursor .cursor-dot, html.has-cursor .cursor-ring { display: block; }
}

/* ── 6 · Film grain ────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .grain { opacity: .05; animation: grain-shift 1.2s steps(3) infinite; }
}
@keyframes grain-shift {
  0%   { background-position: 0 0; }
  33%  { background-position: -64px 42px; }
  66%  { background-position: 48px -70px; }
  100% { background-position: 0 0; }
}

/* ── 7 · Preloader (hidden without JS via <noscript>, .no-motion,
        and .is-done — every exit path covered) ────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
html.no-motion .preloader { display: none; }

.preloader__inner { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.preloader__ar {
  font-family: var(--font-ar);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--ink-dim);
}
.preloader__name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: .14em;
  margin-inline-start: .14em; /* optical centering of tracked caps */
}
.preloader__city {
  font-size: .68rem;
  letter-spacing: .55em;
  margin-inline-start: .55em;
  color: var(--ink-faint);
}
.preloader__line {
  inline-size: min(200px, 42vw);
  block-size: 1px;
  margin-block-start: 1.5rem;
  background: var(--ink);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: center; /* direction-agnostic progress */
}
.preloader__count {
  position: absolute;
  inset-block-end: clamp(1rem, 4vh, 2rem);
  inset-inline-end: clamp(1.2rem, 4vw, 2.4rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ── 8 · Navigation ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  border-block-end: 1px solid transparent;
  transition: transform .5s var(--ease),
              background-color .5s var(--ease),
              border-color .5s var(--ease);
}
.nav.is-hidden, .nav.nav--hidden { transform: translateY(-100%); }
.nav.is-scrolled, .nav.nav--scrolled {
  background: rgba(12, 15, 20, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end-color: var(--hairline-soft);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  block-size: var(--nav-h);
  padding-inline: var(--gutter);
}

.nav__logo {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%); /* symmetric — direction-independent */
  display: grid;
  justify-items: center;
  align-content: center;
  min-block-size: 44px;
  line-height: 1;
}
.nav__logo-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: .22em;
  margin-inline-start: .22em;
}
.nav__logo-city {
  margin-block-start: .35rem;
  font-size: .54rem;
  letter-spacing: .55em;
  margin-inline-start: .55em;
  color: var(--ink-faint);
}

.nav__links { display: none; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 7px;
  block-size: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

/* Live Dubai time + tonight's status (filled by JS) */
.nav__status {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nav__burger {
  position: relative;
  z-index: calc(var(--z-nav) + 10);
  display: grid;
  place-content: center;
  gap: 7px;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -10px; /* optical: align glyph with gutter */
}
.nav__burger span {
  display: block;
  inline-size: 24px;
  block-size: 1.5px;
  background: var(--ink);
  transition: transform .45s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* ── 9 · Mobile menu ───────────────────────────────────────────────── */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mmenu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding-block-start: calc(var(--nav-h) + 1rem);
  padding-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter);
  background: rgba(12, 15, 20, .98);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.mmenu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease), visibility 0s;
}
.mmenu__nav { display: grid; gap: .35rem; }
.mmenu__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 3rem);
  line-height: 1.3;
  color: var(--ink);
  padding-block: .3rem;
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
}
.mmenu__link:hover { color: var(--copper); }
/* staggered reveal — hidden state only once JS is on board */
html.js .mmenu__link { opacity: 0; transform: translateY(22px); }
html.js .mmenu.is-open .mmenu__link { opacity: 1; transform: none; }
.mmenu.is-open .mmenu__link:nth-child(1) { transition-delay: .10s; }
.mmenu.is-open .mmenu__link:nth-child(2) { transition-delay: .16s; }
.mmenu.is-open .mmenu__link:nth-child(3) { transition-delay: .22s; }
.mmenu.is-open .mmenu__link:nth-child(4) { transition-delay: .28s; }
.mmenu.is-open .mmenu__link:nth-child(5) { transition-delay: .34s; }
.mmenu__foot {
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--hairline-soft);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* ── 10 · Fixed mobile CTA — the ONE solid copper action on small screens */
.mobile-cta {
  position: fixed;
  inset-inline: var(--gutter);
  inset-block-end: calc(.9rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  background: var(--copper);
  color: var(--bg);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease), opacity .5s var(--ease), visibility 0s linear .5s;
}
.mobile-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
}

/* ── 11 · Hero — poster-led, veil is a light grade ─────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: clip;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture,
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.hero__media img { object-fit: cover; }
.hero__video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__video.is-ready { opacity: 1; }

/* light grade only — the room must stay clearly visible */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(12, 15, 20, .28) 0%,
      rgba(12, 15, 20, 0) 42%,
      rgba(12, 15, 20, .62) 100%);
}

.hero__content {
  position: relative;
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding-block-start: calc(var(--nav-h) + 2rem);
  padding-block-end: clamp(2.4rem, 7vh, 4.5rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(239, 231, 216, .85);
  margin-block-end: clamp(1.1rem, 3vh, 1.8rem);
}
.hero__eyebrow .ar { font-size: 1.3em; color: var(--ink); }
.hero__eyebrow-rule {
  inline-size: clamp(2rem, 6vw, 4rem);
  block-size: 1px;
  background: rgba(239, 231, 216, .45);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: .005em;
  text-wrap: balance;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block-end: .09em;   /* descender room inside the mask */
  margin-block-end: -.09em;
}
.hero__title .line-inner { display: block; will-change: transform; }

.hero__sub {
  max-inline-size: 33rem;
  margin-block-start: clamp(1.2rem, 3vh, 1.8rem);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(239, 231, 216, .82);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.1rem;
  margin-block-start: clamp(1.6rem, 4vh, 2.4rem);
}

.hero__loc {
  margin-block-start: clamp(1.4rem, 3vh, 2rem);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero__scroll { display: none; }

@media (min-width: 901px) {
  .hero__loc {
    position: absolute;
    inset-block-end: clamp(2.4rem, 7vh, 4.5rem);
    inset-inline-end: var(--gutter);
    margin-block-start: 0;
  }
  .hero__scroll {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%); /* symmetric — direction-independent */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding-block-end: 1.3rem;
  }
  .hero__scroll-line {
    position: relative;
    inline-size: 1px;
    block-size: 52px;
    background: rgba(239, 231, 216, .25);
    overflow: hidden;
  }
  .hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(-100%);
    animation: scroll-drip 2.2s var(--ease) infinite;
  }
  .hero__scroll-text {
    font-size: .62rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}
@keyframes scroll-drip {
  to { transform: translateY(100%); }
}

/* short viewports: let the content breathe in natural flow, never clip */
@media (max-height: 700px) {
  .hero__loc { position: static; margin-block-start: 1.3rem; }
  .hero__scroll { display: none !important; }
}

/* ── 12 · Marquee ──────────────────────────────────────────────────── */
.marquee {
  overflow: clip;
  border-block: 1px solid var(--hairline-soft);
  padding-block: .95rem;
  background: var(--bg);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  animation: marquee-run 46s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-inline-end: 2.6rem;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.marquee__group .ar { font-size: 1.05rem; color: var(--ink-dim); }
.marquee__group i { font-style: normal; font-size: .68rem; color: var(--ink-ghost); }
@keyframes marquee-run {
  to { transform: translateX(-50%); }
}

/* ── 13 · Story — asymmetric editorial grid ────────────────────────── */
.story { padding-block: var(--space-section); }

.story__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

.story__text { order: -1; }
.story__text .lead { margin-block-end: 0; }

.story__media-frame {
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--bg-soft);
}
.story__media-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.story__media figcaption {
  margin-block-start: .9rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.story__media figcaption b { color: var(--ink-dim); font-weight: 500; }

.story__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-block-start: clamp(2rem, 5vw, 3.2rem);
  padding-block-start: clamp(1.4rem, 3vw, 2rem);
  border-block-start: 1px solid var(--hairline-soft);
}
.story__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
}
.story__stat-label {
  display: block;
  margin-block-start: .55rem;
  max-inline-size: 11rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--ink-faint);
}

@media (min-width: 901px) {
  .story__grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .story__text { order: 0; grid-column: 7 / 13; }  /* 6 cols */
  .story__media { grid-column: 2 / 7; }            /* 5 cols, offset 1 */
}

/* ── 14 · Signature dishes — desktop: JS-pinned horizontal track ·
        mobile: native snap carousel (a signature, not a demotion) ─── */
.dishes { overflow: clip; background: var(--bg); }
.dishes__pin { padding-block: var(--space-section) calc(var(--space-section) * .55); }

.dishes__head { position: relative; margin-block-end: clamp(2rem, 5vh, 3.5rem); }
.dishes__hint {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block-start: 1.2rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dishes__hint span { display: inline-block; animation: hint-nudge 1.8s var(--ease) infinite; }
@keyframes hint-nudge { 50% { transform: translateX(6px); } }

.dishes__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-inline: var(--gutter);
}

.dish { position: relative; padding-block-start: 2.7rem; }
.dish__num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -.2rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5vw, 4.8rem);
  line-height: 1;
  color: var(--ink-ghost);
  pointer-events: none;
}
.dish__media {
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--bg-soft);
}
.dish__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
@media (hover: hover) {
  .dish:hover .dish__media img { transform: scale(1.045); }
}
.dish__name {
  margin-block-start: 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.dish__desc {
  margin-block-start: .5rem;
  max-inline-size: 26rem;
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.dish__price {
  display: inline-block;
  margin-block-start: .95rem;
  padding-block-start: .55rem;
  border-block-start: 1px solid var(--hairline);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dishes__end {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding-inline: clamp(1rem, 4vw, 4rem);
}
.dishes__end .ar { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--ink-dim); }

/* mobile — snap carousel with a peek of the next plate */
@media (max-width: 900px) {
  .dishes__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-block-end: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .dishes__track::-webkit-scrollbar { display: none; }
  .dish { flex: 0 0 78vw; scroll-snap-align: center; }
  .dishes__end { min-inline-size: 62vw; scroll-snap-align: center; }
}

/* desktop — flat track the JS pin translates; CSS stays out of its way */
@media (min-width: 901px) {
  .dishes__pin {
    min-block-size: 100vh;
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--nav-h) 1rem;
  }
  .dishes__head {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .dishes__head .h2 br { display: none; } /* one editorial line on wide screens */
  .dishes__hint {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: .45rem;
    margin-block-start: 0;
  }
  .dishes__track { inline-size: max-content; }
  .dish { flex: 0 0 auto; inline-size: clamp(300px, 32vw, 420px); }
  /* keep name + price inside the viewport on shorter desktop windows */
  .dish__media { max-block-size: 50vh; }
}

/* ── 15 · Tasting — a literary menu, Death & Co measure ───────────── */
.tasting { position: relative; padding-block: var(--space-section); overflow: clip; }
/* the house pattern appears here, once, deliberately */
.tasting::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/pattern.svg") center / 420px repeat;
  opacity: .045;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 25%, transparent 78%);
}
.tasting__inner {
  position: relative;
  max-inline-size: var(--measure);
  margin-inline: auto;
  text-align: center;
}
.tasting__meta {
  margin-block-start: 1.1rem;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  color: var(--ink-dim);
}

.tasting__list {
  counter-reset: course;
  margin-block: clamp(2.4rem, 6vw, 3.6rem);
  text-align: start;
}
.tasting__list li {
  counter-increment: course;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  padding-block: 1.05rem;
}
.tasting__list li::before {
  content: counter(course, decimal-leading-zero);
  flex-shrink: 0;
  inline-size: 1.9rem;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.tasting__course {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  line-height: 1.3;
}
.tasting__leader {
  flex: 1 1 2rem;
  border-block-end: 1px dotted rgba(239, 231, 216, .3);
  transform: translateY(-.32em);
}
.tasting__note {
  max-inline-size: 42%;
  text-align: end;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  line-height: 1.5;
}

.tasting__pairing {
  margin-block-end: 1.9rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* small screens: note settles under its course, leader rules the row */
@media (max-width: 600px) {
  .tasting__note {
    flex-basis: 100%;
    max-inline-size: none;
    margin-inline-start: 2.9rem;
    text-align: start;
  }
}

/* ── 16 · Space — parallax collage, mixed ratios, staggered ───────── */
.space { padding-block: var(--space-section); }
.space .h2 { margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }

.space__grid { display: grid; gap: clamp(2.6rem, 6vw, 5rem); }

.space__frame {
  position: relative;
  overflow: clip;
  background: var(--bg-soft);
}
.space__fig--a .space__frame { aspect-ratio: 3 / 2; }
.space__fig--b .space__frame { aspect-ratio: 4 / 5; }
.space__fig--c .space__frame { aspect-ratio: 1 / 1; }
.space__fig--d .space__frame { aspect-ratio: 3 / 2; }
/* 20% bleed gives the JS parallax room to drift without exposing edges */
.space__frame img {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 120%;
  object-fit: cover;
  will-change: transform;
}
.space__fig figcaption {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-block-start: .95rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.space__fig figcaption i {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 901px) {
  .space .h2 { padding-inline-start: calc(100% / 12); } /* one-column indent */
  .space__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  .space__fig--a { grid-column: 1 / 8; }
  .space__fig--b { grid-column: 9 / 13; margin-block-start: clamp(4rem, 12vh, 7rem); }
  .space__fig--c { grid-column: 2 / 7;  margin-block-start: clamp(1rem, 4vh, 3rem); }
  .space__fig--d { grid-column: 8 / 13; margin-block-start: clamp(3rem, 9vh, 6rem); }
}

/* ── 17 · Voices — one quote on stage, large ──────────────────────── */
.voices { padding-block: var(--space-section); text-align: center; }

/* without JS all three quotes read as a quiet stack */
.voices__stage { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-block-start: clamp(2.5rem, 6vw, 4rem); }

.voice p {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.35;
  text-wrap: balance;
}
.voice cite {
  display: block;
  margin-block-start: 1.6rem;
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.voice cite::before { content: "— "; color: var(--ink-ghost); }

/* with JS the stage holds a single rotating quote */
html.js .voices__stage {
  gap: 0;
  max-inline-size: 58rem;
  margin-inline: auto;
}
html.js .voice {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
/* first quote shows until JS marks an active one */
html.js .voices__stage:not(:has(.is-active)) .voice:first-child,
html.js .voice.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s var(--ease);
}

/* ── 18 · Reservations ─────────────────────────────────────────────── */
.reserve {
  padding-block: var(--space-section);
  background: var(--bg-soft);
  border-block: 1px solid var(--hairline-soft);
}
.reserve__grid { display: grid; gap: clamp(2.6rem, 6vw, 5rem); }

.reserve__details { display: grid; margin-block-start: clamp(2rem, 4vw, 2.8rem); }
.reserve__details > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--hairline-soft);
}
.reserve__details dt {
  padding-block-start: .3rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reserve__details dd { color: var(--ink-dim); line-height: 1.6; }
.reserve__details a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.reserve__details a:hover { color: var(--copper); }

.reserve__form { display: grid; gap: 1.7rem 2rem; align-content: start; }
.field { display: grid; gap: .3rem; align-content: start; }
.field label {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input, .field select {
  inline-size: 100%;
  min-block-size: 48px;
  padding-block: .55rem;
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid var(--field-line);
  color: var(--ink);
  color-scheme: dark;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field input::placeholder { color: rgba(239, 231, 216, .3); }
.field input:focus, .field select:focus {
  outline: none;
  border-block-end-color: var(--copper);
  box-shadow: 0 16px 26px -20px rgba(198, 161, 91, .5);
}
.field :focus-visible { outline: none; } /* border + glow carry the signal */

.reserve__form .btn--full { margin-block-start: .5rem; }
.reserve__success {
  padding-block-start: 1.3rem;
  border-block-start: 1px solid var(--hairline-soft);
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.reserve__success .ar { font-size: 1.35rem; color: var(--ink); }

@media (min-width: 601px) {
  .reserve__form { grid-template-columns: 1fr 1fr; }
  .field--full,
  .reserve__form .btn--full,
  .reserve__success { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  .reserve__grid { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

/* ── 19 · Footer — no dead zone, giant ghost wordmark ─────────────── */
.footer {
  position: relative;
  overflow: clip;
  padding-block: clamp(4rem, 9vw, 7rem) calc(var(--cta-h, 56px) + 2.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.footer__watermark {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.14em;
  text-align: center;
  font-family: var(--font-ar);
  font-size: var(--fs-ghost);
  line-height: 1;
  color: rgba(239, 231, 216, .05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem 2rem;
}
.footer__brand { grid-column: 1 / -1; }
.footer__logo { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .2em; }
.footer__logo-city {
  display: block;
  margin-block-start: .45rem;
  font-size: .58rem;
  letter-spacing: .55em;
  color: var(--ink-faint);
}
.footer__brand p { margin-block-start: 1.2rem; font-size: var(--fs-small); color: var(--ink-dim); }
.footer__col h4 {
  margin-block-end: .9rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer__col p { font-size: var(--fs-small); color: var(--ink-dim); line-height: 1.4; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  transition: color .3s var(--ease);
}
.footer__col a:hover { color: var(--copper); }

.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 2rem;
  justify-content: space-between;
  margin-block-start: clamp(3rem, 7vw, 5rem);
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--hairline-soft);
  font-size: .78rem;
  color: var(--ink-faint);
}

@media (min-width: 901px) {
  .footer { padding-block-end: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 3rem; }
}

/* ── 20 · Desktop nav reveal ───────────────────────────────────────── */
@media (min-width: 901px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .mobile-cta { display: none; }
  .mmenu { display: none; }
}
@media (max-width: 900px) {
  .nav__status { display: none; }
}

/* ── 21 · Reduced motion — every loop rests ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee__track { animation: none; inline-size: auto; justify-content: center; }
  .marquee__group:nth-child(2) { display: none; }
  .hero__scroll-line::after, .dishes__hint span { animation: none; }
  .grain { animation: none; opacity: .03; }
}

/* ── 22 · RTL readiness (/ar/ reuses this sheet) ─────────────────────
   Letter-spacing never applies to Arabic script; headings switch to
   Tajawal while decorative words keep Amiri via .ar. Logical
   properties do all the mirroring — nothing below repositions layout. */
[dir="rtl"] * { letter-spacing: normal !important; }

[dir="rtl"] body { font-family: var(--font-ar-head); }
[dir="rtl"] .hero__title,
[dir="rtl"] .h2,
[dir="rtl"] .dish__name,
[dir="rtl"] .dish__num,
[dir="rtl"] .tasting__course,
[dir="rtl"] .voice p,
[dir="rtl"] .mmenu__link,
[dir="rtl"] .story__stat-num,
[dir="rtl"] .footer__logo,
[dir="rtl"] .nav__logo-name,
[dir="rtl"] .preloader__name,
[dir="rtl"] .preloader__count {
  font-family: var(--font-ar-head);
  font-weight: 500;
}

/* ── 23 · JS state additions ─────────────────────────────────────────
   (appended with the js/main.js motion-system rewrite — additive only)
   Custom cursor: the base rules show the dot/ring under plain html.js,
   which would leave a frozen dot in the corner if the cursor module
   never activates (missing GSAP, coarse pointer, reduced motion).
   Fix: only html.has-cursor (set by the cursor module itself) may show
   them — and while it's set, the native pointer retires. */
@media (pointer: fine) {
  html.js:not(.has-cursor) .cursor-dot,
  html.js:not(.has-cursor) .cursor-ring { display: none; }
  html.has-cursor * { cursor: none !important; }
}


/* ── 24 · RTL / Arabic refinements (/ar/ page only) ──────────────────
   §22 already does the two big things: the global letter-spacing kill
   ([dir="rtl"] * → normal !important — Arabic script must never be
   tracked) and the Tajawal swap for body + display elements. This
   block holds ONLY what logical properties cannot mirror on their
   own: Arabic type metrics, diacritic-safe wrapping/masks, and the
   few glyphs/animations that carry a physical direction. No margin,
   padding or position overrides — flex/grid + logical props in the
   main rules already mirror the layout. */

/* Arabic letterforms read smaller than Latin caps at the same px:
   lift the small tracked styles a step (Tajawal 500 covers display
   weight via §22; sizes below are the only adjustments needed). */
html[dir="rtl"] {
  --fs-eyebrow: .8rem;                                  /* .72rem Latin small-caps size is unreadable in Arabic */
  --fs-small: clamp(.9rem, .88rem + .1vw, .98rem);      /* small text one step up */
}
[dir="rtl"] .story__stat-label,
[dir="rtl"] .dishes__hint,
[dir="rtl"] .field label,
[dir="rtl"] .reserve__details dt,
[dir="rtl"] .footer__col h4,
[dir="rtl"] .hero__scroll-text,
[dir="rtl"] .voice cite,
[dir="rtl"] .nav__status,
[dir="rtl"] .btn--small { font-size: .78rem; }          /* hard-coded .62–.72rem styles → one legible floor */

/* Arabic carries vowel marks above and tails below the baseline:
   it needs measurably more line-height than the Latin settings. */
[dir="rtl"] body { line-height: 1.8; }                  /* 1.7 → room for diacritics */
[dir="rtl"] .lead,
[dir="rtl"] .hero__sub { line-height: 1.8; }            /* 1.65/1.6 → */
[dir="rtl"] .hero__title { line-height: 1.15; }         /* 1.02 clips Arabic ascenders */
[dir="rtl"] .h2 { line-height: 1.28; }                  /* keeps shadda/tanwin ink inside the SplitText line masks */
[dir="rtl"] .voice p { line-height: 1.5; }              /* 1.35 → */
[dir="rtl"] .dish__name { line-height: 1.4; }           /* 1.25 → */
[dir="rtl"] .tasting__course { line-height: 1.45; }     /* 1.3 → */
[dir="rtl"] .mmenu__link { line-height: 1.4; }          /* 1.3 → */

/* Shadda-orphan fix: text-wrap: balance may break between a base
   letter and its combining mark — Arabic display text wraps plainly. */
[dir="rtl"] .hero__title,
[dir="rtl"] .h2,
[dir="rtl"] .voice p { text-wrap: wrap; }

/* The Amiri ornament «السحاب.» descends far deeper than any Latin
   glyph; widen the masked line window so ح's tail is never clipped
   (negative margin keeps the visual rhythm unchanged). */
[dir="rtl"] .hero__title .line { padding-block-end: .3em; margin-block-end: -.3em; }

/* Arabic has no italic tradition — synthetic oblique on Amiri reads
   broken; the ornament stays Amiri, just upright. */
[dir="rtl"] .hero__title em,
[dir="rtl"] .h2 em { font-style: normal; }

/* «مرّر →»: the arrow is a physical-direction glyph — flip it and
   nudge it left, into the RTL travel direction. */
[dir="rtl"] .dishes__hint span { transform: scaleX(-1); animation-name: hint-nudge-rtl; }
@keyframes hint-nudge-rtl { 50% { transform: translateX(-6px) scaleX(-1); } }

/* Marquee: mirrored travel so new words arrive from the left, the
   direction Arabic reading advances. Groups are identical, so the
   loop stays seamless; reduced-motion already disables the animation. */
[dir="rtl"] .marquee__track { animation-name: marquee-run-rtl; }
@keyframes marquee-run-rtl { to { transform: translateX(50%); } }

/* Mobile snap carousel: no rules needed — RTL overflow scrolling
   starts at the right edge and scroll-snap-align/padding are logical,
   so card 1 sits rightmost and the snap order reads naturally.
   Desktop pin direction is handled in JS (dirF). Forms likewise:
   date/time inputs keep UA-internal LTR segment order while aligning
   to the right like every other field — no override required. */

/* ── 22 · Final polish (hardening pass) ──────────────────────────── */

/* C1 · Mobile CTA clearance — the fixed .mobile-cta bar overlays the
   last viewport-height of the page; this bottom padding lets the
   footer credit line scroll fully clear of it at absolute page end.
   Desktop is untouched (the bar is display:none above 900px). */
@media (max-width: 900px) {
  body { padding-block-end: calc(var(--cta-h, 56px) + env(safe-area-inset-bottom, 0px)); }
}

/* C2 · Tasting meta orphan (EN only) — balance the wrap so the last
   word ("only") never sits alone on the final line at 360px. Arabic
   is deliberately excluded: balancing can split a base letter from
   its combining mark. */
[dir="ltr"] .tasting__meta { text-wrap: balance; }

/* C3 · Mobile menu rhythm — the link block centers vertically in the
   leftover space (no dead zone beneath the links) with a comfortable,
   height-aware gap, while .mmenu__foot stays pinned to the bottom
   safe-area. Logical margins only and the stagger/transition classes
   on .mmenu__link are untouched, so [dir="rtl"] inherits the same
   rhythm with nothing physical to fight it. */
.mmenu { justify-content: flex-start; }
.mmenu__nav { margin-block: auto; gap: clamp(.5rem, 2vh, 1rem); }