/* ============================================================
   BABYLON — Ristorante Mediorientale, Milano
   Design system: Ishtar Gate lapis & gold, ancient route motif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Cairo:wght@400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --ink:        #1b1712;
  --lapis:      #14324f;
  --lapis-deep: #0c2138;
  --gold:       #c69a3c;
  --gold-bright:#e0b658;
  --sand:       #ece3d1;
  --cream:      #f6f1e6;
  --terracotta: #a8492f;
  --line:       rgba(27,23,18,0.12);
  --green:      #4c6e4a;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Archivo', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container: 1180px;
  --edge: clamp(20px, 5vw, 64px);
}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }

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

/* ---- language toggle: JS controls display with !important; this rule only
   matters before JS has run once (progressive-enhancement fallback) ---- */
html:not([data-active-lang]) [data-lang="en"],
html:not([data-active-lang]) [data-lang="ar"]{ display:none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.05;
  margin:0;
  color:var(--ink);
}
.display-xl{ font-size:clamp(48px, 8vw, 112px); font-weight:400; letter-spacing:-0.01em; }
.display-lg{ font-size:clamp(34px, 5vw, 60px); }
.display-md{ font-size:clamp(26px, 3.4vw, 38px); }
p{ margin:0; }
.lede{ font-size:clamp(17px, 1.9vw, 21px); line-height:1.55; font-weight:400; color:#3a342c; }
.body-sm{ font-size:15px; color:#4a4438; }
.highlight{ font-style:italic; color:var(--gold); }

/* ============================================================
   NAV — wordmark uses the real logo image, two colorways
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--edge);
  transition:background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.site-nav.is-scrolled{
  background:rgba(246,241,230,0.94);
  backdrop-filter:blur(10px);
  padding-top:13px; padding-bottom:13px;
  box-shadow:0 1px 0 var(--line);
}
.nav-mark{ display:block; height:38px; }
.nav-mark img{ height:100%; width:auto; }
.nav-mark .logo-dark{ display:none; }
.site-nav.is-scrolled .nav-mark .logo-light{ display:none; }
.site-nav.is-scrolled .nav-mark .logo-dark{ display:block; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream); opacity:0.85; transition:opacity 0.4s ease, color 0.4s ease;
  position:relative; padding-bottom:4px;
}
.site-nav.is-scrolled .nav-links a{ color:var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width 0.3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ opacity:1; }

.nav-right{ display:flex; align-items:center; gap:22px; }

.lang-toggle{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  color:var(--cream); background:none; border:1px solid rgba(246,241,230,0.4);
  border-radius:20px; padding:5px 10px; transition:all 0.4s ease;
}
.site-nav.is-scrolled .lang-toggle{ color:var(--ink); border-color:var(--line); }
.lang-toggle span{ padding:2px 5px; border-radius:10px; opacity:0.55; transition:all 0.2s ease; }
.lang-toggle span.active{ opacity:1; background:var(--gold); color:var(--ink); }

.nav-cta{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--cream);
  padding:9px 18px; border-radius:2px; transition:all 0.3s ease;
}
.site-nav.is-scrolled .nav-cta{ color:var(--ink); }
.nav-cta:hover{ background:var(--gold); color:var(--ink); }

.nav-burger{ display:none; }

/* ============================================================
   HERO — minimalist line-art gate motif, matching the real logo
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--edge) 90px;
  overflow:hidden;
  color:var(--cream);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(198,154,60,0.16), transparent 55%),
    linear-gradient(155deg, var(--lapis) 0%, var(--lapis-deep) 55%, #081625 100%);
}
.hero-mark{
  position:absolute; top:0; right:0; height:100%; width:auto;
  opacity:0.16; z-index:1; pointer-events:none;
}
.hero-mark img{ height:100%; width:auto; object-fit:contain; }
.hero-inner{ position:relative; z-index:2; max-width:820px; }
.hero .eyebrow{ color:var(--gold-bright); }
.hero h1{ color:var(--cream); margin-top:18px; }
.hero .lede{ color:rgba(246,241,230,0.85); max-width:560px; margin-top:22px; }
.hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; border:1px solid transparent;
  transition:all 0.3s ease;
}
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-bright); transform:translateY(-1px); }
.btn-outline{ border-color:rgba(246,241,230,0.5); color:var(--cream); }
.btn-outline:hover{ border-color:var(--cream); background:rgba(246,241,230,0.08); }
.btn-outline-dark{ border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:var(--cream); }

.hero-scroll{
  position:absolute; bottom:32px; left:var(--edge); z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  color:rgba(246,241,230,0.65); text-transform:uppercase;
}
.hero-scroll .line{ width:40px; height:1px; background:rgba(246,241,230,0.5); }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ padding:120px 0; }
.section-tight{ padding:80px 0; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.statement{ text-align:left; max-width:920px; }
.statement h2{ margin-top:14px; }
.statement p{ margin-top:28px; }
.statement-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:end; }

/* ============================================================
   THE JOURNEY — minimalist, no circles/no dashed rules.
   A single hairline with tab-stop numerals; the country name IS
   the marker. Country names double as the recurring color accent.
   ============================================================ */
.journey{ background:var(--ink); color:var(--cream); position:relative; }
.journey .eyebrow{ color:var(--gold); }
.journey-head{ max-width:640px; margin-bottom:64px; }
.journey-head h2{ color:var(--cream); margin-top:14px; }
.journey-head p{ color:rgba(246,241,230,0.7); margin-top:20px; }

.route{ border-top:1px solid rgba(246,241,230,0.16); }
.route-stop{
  display:grid;
  grid-template-columns: 90px 1fr 1.4fr;
  gap:36px;
  align-items:start;
  padding:38px 0;
  border-bottom:1px solid rgba(246,241,230,0.16);
}
.route-index{
  font-family:var(--font-mono); font-size:13px; color:rgba(246,241,230,0.4);
  letter-spacing:0.05em; padding-top:6px;
  direction:ltr; unicode-bidi:isolate;
}
.route-country{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(26px,3vw,38px);
  color:var(--gold-bright);
}
.route-right{ display:flex; gap:20px; align-items:flex-start; }
.route-photo{
  width:96px; border-radius:2px; overflow:hidden; flex-shrink:0;
}
.route-photo img{ width:100%; height:auto; display:block; object-fit:contain; }
.route-dishes{ display:flex; flex-direction:column; gap:7px; }
.route-dishes span{ font-size:14px; color:rgba(246,241,230,0.68); }
.route-dishes b{ color:var(--cream); font-weight:500; }

/* ============================================================
   STORY SECTION — expanded, with hero-script callout repeated
   ============================================================ */
.story{ background:var(--cream); }
.story-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.story-art{ border-radius:2px; overflow:hidden; aspect-ratio:4/5; }
.story-art img{ width:100%; height:100%; object-fit:cover; }
.story-copy .eyebrow{ margin-bottom:16px; }
.story-copy p{ margin-top:20px; }
.story-copy p + p{ margin-top:16px; }
.story-script-note{
  margin-top:30px; padding:22px 24px; border-left:2px solid var(--gold);
  background:var(--sand);
}
.story-script-note svg{ height:22px; width:auto; margin-bottom:12px; }
.story-script-note p{ font-size:14px; color:#5a5344; margin-top:0; font-style:italic; }

/* ============================================================
   CHEF / OWNER SECTION — editorial, Albi-inspired asymmetry
   ============================================================ */
.chef{ background:var(--lapis-deep); color:var(--cream); position:relative; overflow:hidden; }
.chef-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
.chef-photo{ border-radius:2px; overflow:hidden; aspect-ratio:3/4; position:relative; }
.chef-photo img{ width:100%; height:100%; object-fit:cover; }
.chef .eyebrow{ color:var(--gold); }
.chef-name{ color:var(--cream); margin-top:14px; }
.chef-role{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(246,241,230,0.55); margin-top:10px; }
.chef-quote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.2vw,26px); line-height:1.4; color:var(--gold-bright);
  margin-top:30px; max-width:520px;
}
.chef-copy p{ font-size:15px; color:rgba(246,241,230,0.78); margin-top:18px; max-width:520px; }

/* ============================================================
   CUISINE / CATEGORY STRIP
   ============================================================ */
.cuisine{ background:var(--sand); }
.cuisine-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:60px; flex-wrap:wrap; }
.cuisine-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cuisine-card{ background:var(--sand); padding:44px 34px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:background 0.3s ease; }
.cuisine-card:hover{ background:var(--cream); }
.cuisine-num{ font-family:var(--font-mono); font-size:12px; color:var(--gold); letter-spacing:0.1em; }
.cuisine-card h3{ font-size:22px; margin-top:auto; padding-top:24px; }
.cuisine-card p{ font-size:14px; color:#5a5344; margin-top:10px; }

/* ============================================================
   EXPERIENCE GALLERY — a few real photographs, restrained
   ============================================================ */
.experience{ background:var(--cream); }
.experience-head{ max-width:640px; margin-bottom:56px; }
.experience-head p{ margin-top:18px; }
.gallery-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:14px;
  height:560px;
}
.gallery-grid a{ display:block; }
.gallery-item{ overflow:hidden; border-radius:2px; height:100%; position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-big{ grid-row: 1 / 3; }

/* ============================================================
   HALAL STRIP
   ============================================================ */
.halal-strip{ padding:46px 0; background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.halal-strip .wrap{ display:flex; align-items:center; gap:16px; justify-content:center; flex-wrap:wrap; text-align:center; }
.halal-strip .eyebrow{ color:var(--terracotta); }
.halal-strip p{ font-family:var(--font-display); font-size:19px; }

/* ============================================================
   MENU CTA
   ============================================================ */
.menu-cta{ background:linear-gradient(155deg, var(--lapis-deep), var(--ink)); color:var(--cream); text-align:center; padding:130px 0; }
.menu-cta .eyebrow{ color:var(--gold); }
.menu-cta h2{ color:var(--cream); margin-top:18px; }
.menu-cta .btn{ margin-top:40px; }

/* ============================================================
   RESERVE
   ============================================================ */
.reserve{ background:var(--cream); text-align:center; }
.reserve-inner{ max-width:640px; margin:0 auto; }
.reserve h2{ margin-top:16px; }
.reserve p{ margin-top:22px; }
.reserve-actions{ display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* ============================================================
   LOCATION
   ============================================================ */
.location{ background:var(--sand); }
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.loc-block + .loc-block{ margin-top:34px; }
.loc-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; color:var(--gold); text-transform:uppercase; }
.loc-value{ font-family:var(--font-display); font-size:22px; margin-top:8px; }
.loc-value a:hover{ color:var(--terracotta); }
.map-frame{ aspect-ratio:1/1; border-radius:2px; overflow:hidden; border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(0.4) sepia(0.15); }

/* ============================================================
   HALAL BADGE (footer)
   ============================================================ */
.halal-badge{
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(246,241,230,0.25); border-radius:40px;
  padding:10px 20px; width:fit-content;
}
.halal-badge svg{ width:22px; height:22px; flex-shrink:0; }
.halal-badge span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(246,241,230,0.85); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--ink); color:var(--cream); padding:80px 0 32px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(246,241,230,0.14); }
.footer-mark{ height:34px; }
.footer-mark img{ height:100%; width:auto; }
.footer-tag{ font-size:14px; color:rgba(246,241,230,0.55); margin-top:14px; max-width:280px; }
.footer-cols{ display:flex; gap:70px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:400; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:rgba(246,241,230,0.75); transition:color 0.2s ease; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:12px; color:rgba(246,241,230,0.4); flex-wrap:wrap; gap:16px; }

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.mobile-menu{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px;
  transform:translateY(-100%); transition:transform 0.5s ease;
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:32px; }
.mobile-menu-close{ position:absolute; top:24px; right:var(--edge); background:none; border:0; color:var(--cream); font-size:28px; }

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-hero{ padding:190px 0 70px; background:linear-gradient(155deg, var(--lapis), var(--lapis-deep)); color:var(--cream); text-align:center; }
.menu-hero h1{ color:var(--cream); margin-top:16px; }
.menu-hero p{ color:rgba(246,241,230,0.7); margin-top:18px; max-width:520px; margin-left:auto; margin-right:auto; }

.menu-jump{
  position:sticky; top:0; z-index:50; background:rgba(246,241,230,0.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:16px var(--edge);
  display:flex; gap:26px; overflow-x:auto;
}
.menu-jump a{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; color:#5a5344; }
.menu-jump a:hover{ color:var(--terracotta); }

/* ---- legend ---- */
.menu-legend{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; padding:36px 0 0; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:#5a5344; }
.legend-item svg{ width:16px; height:16px; }
.legend-note{ font-size:12px; color:#8a8272; font-style:italic; margin-top:14px; }

/* ---- mezze / tasting routes ---- */
.mezze-routes{ padding:50px 0 20px; }
.mezze-routes-head{ margin-bottom:34px; }
.mezze-routes-head p{ margin-top:12px; max-width:560px; }
.mezze-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.mezze-card{ background:var(--cream); padding:32px 28px; }
.mezze-card h3{ font-size:20px; margin-bottom:6px; }
.mezze-card .mezze-sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block; }
.mezze-card ul{ display:flex; flex-direction:column; gap:8px; }
.mezze-card li{ font-size:14px; color:#4a4438; padding-left:14px; position:relative; }
.mezze-card li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:1px; background:var(--gold); }

.menu-body{ padding:70px 0 60px; }
.menu-category{ margin-bottom:90px; scroll-margin-top:150px; }
.menu-category-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:8px; }
.menu-category-head h2{ font-size:clamp(28px,3.4vw,42px); }
.menu-category-note{ font-size:13px; color:var(--terracotta); font-style:italic; margin-bottom:40px; }

.dish-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; }
.dish{ padding:24px 0; border-bottom:1px solid var(--line); }
.dish-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.dish-name-wrap{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dish-name{ font-family:var(--font-display); font-size:19px; }
.dish-price{ font-family:var(--font-mono); font-size:15px; color:var(--terracotta); white-space:nowrap; }
.dish-desc{ font-size:14px; color:#5a5344; margin-top:6px; max-width:90%; }
.dish-allergen{ font-size:11px; color:#9a9080; margin-top:6px; letter-spacing:0.02em; }
.badge-v{ width:15px; height:15px; flex-shrink:0; }

.coperto-note{ text-align:center; margin-top:40px; font-family:var(--font-mono); font-size:13px; color:#5a5344; letter-spacing:0.04em; }
.saj-note{ background:var(--sand); border-left:2px solid var(--gold); padding:18px 22px; margin-top:20px; font-size:13px; color:#5a5344; max-width:640px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; background:none; border:0; color:var(--cream); width:26px; height:20px; flex-direction:column; justify-content:space-between; padding:0; }
  .site-nav.is-scrolled .nav-burger{ color:var(--ink); }
  .nav-burger span{ display:block; height:1px; width:100%; background:currentColor; }
  .nav-cta{ display:none; }

  /* hero mark: move into the empty space above the headline instead of
     bleeding down behind the text */
  .hero-mark{
    top:82px; right:auto; left:50%; bottom:auto;
    height:clamp(120px, 22vh, 210px); width:auto;
    transform:translateX(-50%);
  }
  .hero-mark img{ height:100%; width:auto; }

  /* portrait photos: don't force them into a wide crop on mobile */
  .story-art{ aspect-ratio:auto; }
  .chef-photo{ aspect-ratio:auto; }
  .story-art img, .chef-photo img{ height:auto; object-fit:contain; }

  .statement-grid{ grid-template-columns:1fr; gap:26px; }

  .route-stop{ grid-template-columns:1fr; gap:14px; padding:30px 0; }
  .route-right{ flex-direction:column; align-items:flex-start; gap:14px; }
  .route-photo{ width:100%; max-width:280px; }

  .story-grid, .chef-grid{ grid-template-columns:1fr; gap:36px; }

  .cuisine-grid{ grid-template-columns:1fr; }
  .cuisine-head{ flex-direction:column; align-items:flex-start; }

  .gallery-grid{ grid-template-columns:1fr; grid-template-rows:repeat(3, 220px); height:auto; }
  .gallery-big{ grid-row:auto; }

  .mezze-grid{ grid-template-columns:1fr; }

  .location-grid{ grid-template-columns:1fr; gap:40px; }

  .footer-top{ flex-direction:column; gap:36px; }
  .footer-cols{ gap:40px; }

  .dish-list{ grid-template-columns:1fr; }
  .menu-jump{ gap:18px; }

  section{ padding:80px 0; }
}

@media (max-width: 480px){
  .hero{ padding-bottom:70px; }
  .hero-ctas{ flex-direction:column; align-self:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .reserve-actions{ flex-direction:column; align-self:stretch; }
  .reserve-actions .btn{ justify-content:center; }
}

/* ============================================================
   ARABIC / RTL SUPPORT
   ============================================================ */
[data-lang="ar"]{
  font-family:'Cairo', 'Archivo', sans-serif;
  letter-spacing:0 !important;
  text-transform:none !important;
}
h1[data-lang="ar"], h2[data-lang="ar"], h3[data-lang="ar"],
.chef-quote[data-lang="ar"], .route-country[data-lang="ar"]{
  font-family:'Amiri', 'Fraunces', serif;
}
html[dir="rtl"] body{ font-family:'Cairo', sans-serif; }

html[dir="rtl"] .hero-scroll{ left:auto; right:var(--edge); }
html[dir="rtl"] .hero-mark{ right:auto; left:0; }
html[dir="rtl"] .nav-links a::after{ left:auto; right:0; }
html[dir="rtl"] .story-script-note{ border-left:none; border-right:2px solid var(--gold); }
html[dir="rtl"] .saj-note{ border-left:none; border-right:2px solid var(--gold); }
html[dir="rtl"] .mezze-card li{ padding-left:0; padding-right:14px; }
html[dir="rtl"] .mezze-card li::before{ left:auto; right:0; }
html[dir="rtl"] .halal-badge{ direction:ltr; }
html[dir="rtl"] .lang-toggle{ direction:ltr; }

.lang-toggle span{ min-width:24px; text-align:center; }