/* ════════════════════════════════════════════════════════════
   nexcode: English pages only (loaded from en/ and partials/page.en.html).
   The base CSS is written for Arabic and RTL. It stays untouched, and
   everything LTR needs is overridden here.
   ════════════════════════════════════════════════════════════ */

/* Brand guide: English text is Space Grotesk. Arabic stays as the fallback for any Arabic word. */
html[lang="en"] {
  --font-ar: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
}

/* The watermark sits in the empty corner. On an LTR page that corner is on the right. */
.watermark { left: auto; right: -140px; }
.watermark-sm { left: auto; right: -66px; }

/* These labels were pushed right to line up with Arabic text. */
.step-num,
.promise-num,
.channel-label,
.channel-value,
.stack-label,
.footer-label,
.page-eyebrow { text-align: left; }
.post-byline-name { text-align: left; }

/* Latin text needs tighter leading than Arabic. */
body { line-height: 1.65; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; }
.hero h1 { line-height: 1.12; letter-spacing: -0.03em; }
.page-lead { line-height: 1.55; }
.post-body { line-height: 1.75; }
.post-body h2, .post-body h3 { line-height: 1.25; }

/* An English prompt is prose to copy, so it wraps instead of scrolling sideways. */
.post-body pre.is-prompt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-ar);
  font-size: 15px;
  line-height: 1.7;
}
.post-body pre.is-prompt code { font-family: inherit; font-size: inherit; }

@media (max-width: 900px) {
  .hero h1 { line-height: 1.15; }
}