* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { overflow-x: hidden; max-width: 100%; }
  body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  a { color: var(--link); }
  a:hover { color: var(--link-hover); }
  img { max-width: 100%; }
  section[id], header[id] { scroll-margin-top: 76px; }

  /* ---- Arabic / RTL ---- */
  /* letter-spacing breaks Arabic letter-joining — neutralise it in RTL */
  [dir="rtl"] * { letter-spacing: normal !important; }
  [dir="rtl"] .lang-toggle { letter-spacing: normal; }
  [dir="rtl"] body { font-family: 'Noto Naskh Arabic', serif; }
  @keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---- Hero intro animation (after language is chosen) ---- */
  @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes writeLTR { from { clip-path: inset(0 100% 0 0); filter: blur(8px); opacity: 0.2; } 55% { opacity: 1; } to { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; } }
  @keyframes writeRTL { from { clip-path: inset(0 0 0 100%); filter: blur(8px); opacity: 0.2; } 55% { opacity: 1; } to { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; } }
  .hero-intro .h-kicker { animation: heroRise 0.7s var(--ease-soft) both 0.1s; }
  .hero-intro .h-name   { animation: writeLTR 1.7s var(--ease-soft) both 0.35s; }
  [dir="rtl"] .hero-intro .h-name { animation-name: writeRTL; }
  .hero-intro .h-rule   { animation: heroRise 0.7s var(--ease-soft) both 1.35s; }
  .hero-intro .h-date   { animation: heroRise 0.7s var(--ease-soft) both 1.55s; }
  .hero-intro .h-city   { animation: heroRise 0.7s var(--ease-soft) both 1.7s; }
  .hero-intro .h-cta    { animation: heroRise 0.7s var(--ease-soft) both 1.9s; }
  .hero-intro .h-scroll { animation: heroFade 1s var(--ease-soft) both 2.3s; }
  @media (prefers-reduced-motion: reduce) {
    .hero-intro .h-kicker, .hero-intro .h-name, .hero-intro .h-rule,
    .hero-intro .h-date, .hero-intro .h-city, .hero-intro .h-cta, .hero-intro .h-scroll { animation: none !important; }
  }

  @media (max-width: 860px) {
    .nav-links { display: none !important; }
    .story-grid { grid-template-columns: 1fr !important; }
    .detail-grid, .info-strip { grid-template-columns: 1fr !important; }
    .gallery-grid { grid-template-columns: 1fr 1fr !important; }
  }

  /* Phone */
  @media (max-width: 600px) {
    .gallery-palm { display: none !important; }
    .hero-img { object-position: 50% 20% !important; }
    :root {
      --gutter: 22px;
      --section-y: 60px;
      --fs-script-hero: clamp(3.4rem, 17vw, 5rem);
      --fs-lead: 1.125rem;
      --fs-display-1: clamp(2.1rem, 8vw, 2.6rem);
    }
    #top { min-height: 100svh; padding-top: 96px !important; }
    /* larger, thumb-friendly gallery on phones */
    .gallery-grid { grid-auto-rows: 46vw !important; gap: 10px !important; }
  }

  @media (max-width: 380px) {
    :root { --gutter: 18px; }
  }

/* ---------------------------------------------------------------------------
   Arabic typography
   ---------------------------------------------------------------------------
   Arabic script is cursive: letters join to their neighbours. letter-spacing
   forces those joins apart, so a tracked label renders as disconnected shapes
   rather than a word. The design applies tracked mono labels throughout as
   INLINE styles, which outrank any normal selector, so overriding them for the
   Arabic locale genuinely requires !important.

   Latin runs inside Arabic mode (the date lockup, product names in <bdi>) lose
   their tracking too. That is a deliberate, minor trade against Arabic words
   being visibly broken.

   text-transform: uppercase is left alone - it is simply a no-op for Arabic.
   --------------------------------------------------------------------------- */
html[lang="ar"] * {
  letter-spacing: normal !important;
}