@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/fustat-arabic.woff2') format('woff2');
}

/* =====================================================================
   ENCODEX — ARABIC TYPE LAYER
   ---------------------------------------------------------------------
   Loaded only by the /ar/ pages, after the page stylesheet. The
   self-hosted display faces (Michroma / Hanken Grotesk / Kode Mono)
   are latin subsets. Fustat supplies a consistent, modern Arabic layer
   while the latin instrument labels keep their existing faces.
   Two hazards this file exists to remove:
     1. tracking — the design leans on wide letter-spacing, which
        breaks Arabic glyph joining. Any translated run (dir="rtl")
        drops it entirely.
     2. line-height — Arabic script needs more vertical room than the
        latin grid the pages were drawn on.
   HUD chrome, spec refs and code registers stay latin/LTR by design,
   exactly like the labelling on real hardware — this layer only
   touches elements the translation marked dir="rtl".
   ===================================================================== */

:root {
  --f-ar-disp: 'Fustat', 'Hanken Grotesk', 'Noto Kufi Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
  --f-ar-text: 'Fustat', 'Hanken Grotesk', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
}

/* joined script: no tracking, ever */
html[lang='ar'] [dir='rtl'],
html[lang='ar'] [dir='rtl'] * {
  letter-spacing: 0 !important;
}

/* text runs: Arabic-capable stack + breathing room */
html[lang='ar'] [dir='rtl'] {
  font-family: var(--f-ar-text) !important;
}
html[lang='ar'] h1[dir='rtl'],
html[lang='ar'] h2[dir='rtl'],
html[lang='ar'] h3[dir='rtl'],
html[lang='ar'] h4[dir='rtl'] {
  font-family: var(--f-ar-disp) !important;
  font-weight: 600;
  line-height: 1.36;
}
html[lang='ar'] p[dir='rtl'],
html[lang='ar'] li[dir='rtl'],
html[lang='ar'] blockquote[dir='rtl'],
html[lang='ar'] figcaption[dir='rtl'] {
  line-height: 1.78;
}

/* SVG figure labels: tracking breaks Arabic joining, and dir="rtl" on
   <text> is not an option (it flips text-anchor start/end sides). The
   Arabic pages drop tracking on all figure text instead — Latin tokens
   tighten by ~1px, Arabic labels join correctly. */
html[lang='ar'] svg text {
  font-family: 'Kode Mono', 'Fustat', monospace !important;
  letter-spacing: 0 !important;
}

/* Arabic utility text needs more optical size than the latin mono layer.
   These selectors deliberately leave reference codes and telemetry alone. */
html[lang='ar'] :is(.btn, .ui-btn)[dir='rtl'] {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
html[lang='ar'] :is(
  .s-eyebrow,
  .s-section-label,
  .section-label,
  .lab-eyebrow,
  .ct-eyebrow,
  .p-label,
  .tag,
  .sec-meta
)[dir='rtl'] {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

html[lang='ar'] :is(.menu-links, .ui-menu-links) a[dir='rtl'] {
  font-weight: 500;
}

/* form fields carrying Arabic input or placeholders */
html[lang='ar'] input[dir='rtl'],
html[lang='ar'] textarea[dir='rtl'],
html[lang='ar'] select[dir='rtl'] {
  font-family: var(--f-ar-text) !important;
  letter-spacing: 0 !important;
}

/* mobile-menu hover cue: mirror for RTL. The links carry dir="rtl", so the
   flex main axis runs right-to-left and the page CSS's margin-left:auto
   lands mid-row instead of at the far edge; the arrow glyph, its entry
   drift and the hover glide all point the wrong way. */
html[lang='ar'] #ui .ui-menu-links a[dir='rtl']::after {
  content: '←';
  margin-left: 0;
  margin-right: auto;
  transform: translateX(12px);
}
html[lang='ar'] #ui .ui-menu-links a[dir='rtl']:hover { transform: translateX(-22px); }
html[lang='ar'] #ui .ui-menu-links a[dir='rtl']:hover::after { transform: none; }
/* the contact link keeps its tick, never the arrow — re-assert the page
   CSS's content:none, which the higher-specificity rule above would beat */
html[lang='ar'] #ui .ui-menu-links a.c[dir='rtl']::after { content: none; }

/* contact link's pulsing tick: same RTL auto-margin mirror */
html[lang='ar'] #ui .ui-menu-links a.c[dir='rtl'] .tick { margin-left: 0; margin-right: auto; }