@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   redhaalayesh.com — "Margin"
   Visual identity v1.0 · 19 August 2026

   Sibling to BMD, never the same paint. NO hex value here is shared with
   BMD: the family resemblance is carried by grammar, not by pigment.

   Shared     one warm ground, one very dark ink, exactly one warm accent,
              hairline rules, mono eyebrows, a single editorial measure.
   Different  BMD's ink is Structural Navy #0F1B2D, cool and architectural.
              This ink is #211E19, a warm near-black: printer's ink on paper.
              BMD's accent is Burnt Ochre #B86B2B (yellow-orange, hue 56).
              This accent is #96461F, a deep rust (hue 44, redder, deeper),
              and unlike BMD's it clears AA as body text at 5.67:1, so it
              carries links, verdicts and numbers instead of decorating.
              Chosen against colour-vision deficiency, not just normal sight:
              4.72:1 at worst across deuteranopia, protanopia and tritanopia
              on the RAISED surface, which is the tightest case on the site.
              BMD's ochre measures 3.23:1 there and could never be text.
              Deutan is the dominant subtype in Saudi prevalence studies.

   BMD is Bone + Navy + Ochre, Inter-led, Kufi Arabic.
   This is Paper + warm ink + rust, Spectral-led, Naskh Arabic.
   Recognisably the same hand. Not the same brand.

   No JavaScript is required by this stylesheet, and none should be added
   to make it work. Theming is prefers-color-scheme only: a toggle needs
   script, script needs a blocking read, and a blocking read flashes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FACES ───────────────────────────────────────────────────────────────
   Self-hosted. Latin and Arabic subsets only. Ranges are Google's
   canonical ones copied verbatim, so an English page never downloads the
   Arabic files and an Arabic page never downloads Inter. All SIL OFL 1.1.
   Markazi has no Latin face here on purpose: Latin runs inside Arabic
   prose fall through to Spectral, so brand names and digits stay
   identical across both trees.
   ───────────────────────────────────────────────────────────────────── */

/* Spectral 400 italic · latin · 22 KB */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spectral-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 400 · latin · 21 KB */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 600 · latin · 22 KB */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/spectral-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Markazi Text · arabic · 40 KB · ONE file, the whole weight axis.
   This face is VARIABLE (wght 400-700), and it was previously declared three
   times pointing at three byte-identical copies of the same file. An Arabic
   page therefore spent 121 KB of critical-path budget, two thirds of it
   preloaded, to deliver 40 KB of font. The range syntax below is what a
   variable face is for: one download serves 400 body, 500 eyebrows and UI,
   and 700 headings, with no synthesis and no second request. */
@font-face {
  font-family: 'Markazi Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/markazi-arabic-var.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* IBM Plex Mono 400 · latin · 14 KB */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 · latin · 14 KB */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 · latin · 24 KB · instanced down from the 100-900
   variable face, because 500 is the only weight the site uses. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── NEUTRAL RAMP ────────────────────────────────────────────────────────
   Hex first so the ~5% of traffic without oklch() gets the real palette,
   then the same values in oklch() for wide-gamut rendering. No p3 chroma
   override: a +34% swing on the one mark meant to be recognisable is an
   anti-feature.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --n-050:#FBF3E5; --n-100:#F6EDDF; --n-150:#EDE3D3; --n-200:#E0D7C7;
  --n-300:#BDB3A2; --n-400:#948B7C; --n-500:#857C6E; --n-600:#776F62;
  --n-650:#6B6459; --n-700:#4A443B; --n-800:#332E27; --n-850:#262019;
  --n-900:#211E19; --n-950:#1B1815;

  --accent-light:#96461F;
  --accent-dark:#E0996A;
}
@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --n-050:oklch(0.9662 0.0246 84.5); --n-100:oklch(0.9469 0.0244 82.7);
    --n-150:oklch(0.9146 0.0234 82.1); --n-200:oklch(0.8737 0.0264 81.3);
    --n-300:oklch(0.7529 0.0242 80.6); --n-400:oklch(0.6110 0.0248 79.9);
    --n-500:oklch(0.5602 0.0243 79.2); --n-600:oklch(0.5121 0.0257 78.4);
    --n-650:oklch(0.4744 0.0243 77.9); --n-700:oklch(0.3583 0.0219 77.1);
    --n-800:oklch(0.2735 0.0176 76.4); --n-850:oklch(0.2231 0.0177 75.8);
    --n-900:oklch(0.2034 0.0119 74.9); --n-950:oklch(0.1815 0.0110 74.2);

    --accent-light:oklch(0.4902 0.1192 44.2);
    --accent-dark:oklch(0.7434 0.1000 55.4);
  }
}

/* ── LIGHT THEME (default) ── surface #F6EDDF ─────────────────────────── */
:root {
  color-scheme: light dark;

  --surface:        var(--n-100);
  --surface-raised: var(--n-150);
  --ink:            var(--n-900);   /* 14.31:1 */
  --ink-headline:   var(--n-900);
  --ink-secondary:  var(--n-700);   /*  8.30:1 */
  --ink-meta:       var(--n-650);   /*  5.04:1 on surface, 4.60:1 on RAISED */
  --accent:         var(--accent-light); /* 5.67:1, text-capable, CVD-safe */
  --on-accent:      var(--n-050);
  --border:         var(--n-650);   /*  5.04:1, passes 1.4.11 */
  --hairline:       var(--n-300);   /* DECORATIVE ONLY, never carries meaning */
  --rule:           var(--n-900);   /* structural */

  /* Spacing. Deliberately irregular: a uniform 8px scale with 24px padding
     and 16px radii everywhere is the most recognisable generated-design
     fingerprint there is. */
  --s-1:0.25rem; --s-2:0.5rem;  --s-3:0.75rem; --s-4:1.25rem;
  --s-5:2rem;    --s-6:3.25rem; --s-7:5.25rem; --s-8:8rem;

  --measure:39rem;      /* ~64ch at 17px Spectral */
  --measure-ar:36rem;   /* Arabic runs ~1.2× longer per idea, so narrower */
  --gutter:clamp(1.25rem, 5vw, 2.5rem);

  --font-text:'Spectral', Georgia, 'Times New Roman', serif;
  --font-ar:'Markazi Text', 'Spectral', Tahoma, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── DARK THEME ── surface #0F1B2D ────────────────────────────────────────
   Built independently, NOT by inverting ramp indices. WCAG overstates
   contrast on dark grounds by 1.7–2.0×, so body ink is deliberately dimmed
   to #DDD6CC rather than pushed to maximum: Markazi is a modulated Naskh
   and its thick–thin contrast blooms against navy at full brightness.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:        var(--n-950);
    --surface-raised: var(--n-850);
    --ink:            var(--n-200);   /* 12.38:1, dimmed to cut halation on Naskh */
    --ink-headline:   var(--n-050);   /* 16.04:1 */
    --ink-secondary:  var(--n-300);   /*  8.53:1 */
    --ink-meta:       var(--n-400);   /*  5.25:1 on surface, 4.79:1 on RAISED */
    --accent:         var(--accent-dark); /* 7.52:1 */
    --on-accent:      var(--n-950);
    --border:         var(--n-500);   /*  4.30:1. NOT n-650, which fails on this ground */
    --hairline:       var(--n-800);
    --rule:           var(--n-800);
  }
}

/* ── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
picture { display: block; }
input, button { font: inherit; color: inherit; }

/* ── BASE ───────────────────────────────────────────────────────────── */
body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;   /* never fake a weight; Markazi has real ones */
  font-synthesis-style: none;
}

.wrap {
  inline-size: 100%;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hidden-but-readable, used by the skip link and by the visually hidden
   <caption> and <label> text. NOT `inset-inline-start: -9999px`: in RTL that
   resolves to `right: -9999px`, which parks the element past the inline-start
   edge and leaves the layout one browser quirk away from a sideways scroll on
   the entire Arabic tree. Clipping in place has no direction to get wrong. */
.skip {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--surface-raised);
  color: var(--ink);
  z-index: 10;
}
.skip:focus {
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  padding: var(--s-3) var(--s-4);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ── TYPE SCALE ─────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-text);
  font-weight: 600;
  color: var(--ink-headline);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.375rem, 5vw, 3.875rem);   /* 38 → 62px */
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h2 { font-size: 1.875rem; line-height: 1.20; letter-spacing: -0.01em; }
h3 { font-size: 1.3125rem; line-height: 1.30; }

p { text-wrap: pretty; }

/* ── FLOW ────────────────────────────────────────────────────────────────
   The reset zeroes every margin, so vertical rhythm is restored here in one
   place rather than per component. Margins are start-side only, so they never
   collapse against a parent's padding unpredictably.

   NOTE ON SPECIFICITY: these are deliberately NOT wrapped in :where().
   The reset above zeroes margins with element-type selectors (0,0,1), and a
   :where()-wrapped rule scores (0,0,0) — so it loses to the reset and every
   gap silently computes to 0. Written plainly, `main > section > * + *`
   scores (0,0,3) and wins, while any class-based component rule (0,1,x)
   still overrides it without !important. */
main > section > * + *           { margin-block-start: var(--s-4); }
main > section > * + :is(h2, h3) { margin-block-start: var(--s-6); }
main > section > :is(h2, h3) + p { margin-block-start: var(--s-3); }
main > section > .eyebrow + *    { margin-block-start: var(--s-3); }
.subscribe > * + *, .bmd > div > * + * { margin-block-start: var(--s-3); }

.lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

/* The eyebrow is BMD's most diagnostic tic. Inherited, one parameter
   shifted: 0.14em here against BMD's 0.18em. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-meta);
  /* The lead-in rule is positioned, NOT a flex sibling. As a flex item it
     turned each text run into its own item, so on narrow screens the "·"
     orphaned onto its own line. Positioned, it pins to the first line and the
     text wraps as ordinary prose. inset-inline-start keeps it correct in RTL. */
  position: relative;
  padding-inline-start: 2.4em;
}
.eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 1.5em;
  block-size: 2px;
  background: var(--accent);
}

.meta, .data {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Links carry the accent. This is the load-bearing difference from BMD,
   whose ochre fails AA as text (3.60:1) and so can only decorate. */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.13em; }
a:hover { text-decoration-thickness: 2px; }

em { font-style: italic; }
strong { font-weight: 600; }

/* The one filled accent element on the site. */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  min-block-size: 44px;   /* WCAG 2.5.8 */
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }

/* ── CHROME ─────────────────────────────────────────────────────────── */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--hairline);
}
.wordmark {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink-headline);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9375rem;
}
.site-nav a { color: var(--ink-secondary); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }

/* The language switcher is the only chrome element on the site with a
   border. It is a plain crawlable link to the counterpart URL, labelled in
   its target language. No flag: a flag names a country, and bare `ar`
   exists to reach Kuwait and the UAE too. No auto-redirect: crawlers send
   no Accept-Language and arrive from non-Saudi IPs, so sniffing would hide
   one whole tree from the citation channel. */
.lang {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--ink-secondary);
  text-decoration: none;
}
.lang:hover { color: var(--accent); border-color: var(--accent); }

.site-foot {
  margin-block-start: var(--s-7);
  padding-block: var(--s-5) var(--s-6);
  border-block-start: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--ink-meta);
}
.site-foot p + p { margin-block-start: var(--s-2); }

/* ── SECTIONS ───────────────────────────────────────────────────────── */
main > section { padding-block-start: var(--s-6); }
.hero { padding-block: var(--s-7) 0; }
.hero .lead { max-inline-size: 34rem; }

/* Sections are separated by space and one hairline, never by boxes. */
.rule { border: 0; border-block-start: 1px solid var(--hairline); margin-block: var(--s-6); }

/* ── FIGURE STRIP ───────────────────────────────────────────────────── */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px solid var(--hairline);
}
.figures dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-block-end: var(--s-2);
  order: 2;
}
.figures dd {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
  order: 1;
}
.figures > div { display: flex; flex-direction: column; }

/* ── LEDGER ROWS ────────────────────────────────────────────────────── */
.ledger { display: flex; flex-direction: column; }
.ledger-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--hairline);
  align-items: baseline;
}
.ledger-row:last-child { border-block-end: 1px solid var(--hairline); }
.ledger-row > .meta { padding-block-start: 0.3rem; }
.ledger-row h3 { margin-block-end: var(--s-2); }
.ledger-row p { color: var(--ink-secondary); font-size: 1rem; }
.ledger-row a { text-decoration: none; }
.ledger-row a:hover { text-decoration: underline; }

@media (max-width: 34rem) {
  .ledger-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .ledger-row > .meta { padding-block-start: 0; }
}

/* Narrow screens: wordmark and language toggle share the first line, nav takes
   the second. Source order stays wordmark → nav → toggle so the tab order and
   the reading order are unchanged. */
@media (max-width: 30rem) {
  .lang { order: 1; margin-inline-start: auto; }
  .site-nav { order: 2; flex-basis: 100%; gap: var(--s-3) var(--s-4); }
}

/* Secondary profiles sit on one wrapping line rather than five ledger rows:
   they are a list of addresses, not five separate things worth a heading.
   The separator is generated so it never lands at the end of a wrapped line. */
.inline-links { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.inline-links a { text-decoration: none; }
.inline-links a:hover { text-decoration: underline; }
.inline-links a + a::before {
  content: " · ";
  color: var(--hairline);
  margin-inline-end: 0.9rem;
}

/* ── SUBSCRIBE ──────────────────────────────────────────────────────── */
.subscribe {
  padding: var(--s-5);
  background: var(--surface-raised);
  border-radius: 2px;
  margin-block-start: var(--s-5);
}
.subscribe h2 { font-size: 1.5rem; margin-block-end: var(--s-3); }
.subscribe p { color: var(--ink-secondary); margin-block-end: var(--s-4); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.field-row input[type="email"] {
  flex: 1 1 15rem;
  min-inline-size: 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 2px;
  min-block-size: 44px;
}
.field-row input::placeholder { color: var(--ink-meta); opacity: 1; }
.subscribe .note { font-size: 0.8125rem; color: var(--ink-meta); margin-block-start: var(--s-3); margin-block-end: 0; }
/* Honeypot. A field no human sees and every naive bot fills, which is the
   only spam defence a zero-JavaScript form can carry in the page itself.
   Clipped in place rather than parked at -9999px, for the same reason .skip
   is: inset-inline-start resolves to `right` in RTL, which would put the
   field back on screen across the entire Arabic tree. */
.hp { position: absolute; inline-size: 1px; block-size: 1px;
      overflow: hidden; clip-path: inset(50%); }

/* ── BMD LOCKUP ─────────────────────────────────────────────────────────
   The block that hands off to the firm. It is marked with THIS site's rust,
   not BMD's ochre: borrowing the firm's literal paint here was the one place
   the two identities would still have collided. The handoff is carried by
   position and wording instead, which is stronger and costs no pigment.
   ───────────────────────────────────────────────────────────────────── */
.bmd {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.bmd::before {
  content: "";
  flex: none;
  inline-size: 3px;
  align-self: stretch;
  background: var(--accent);
}
.bmd p { color: var(--ink-secondary); }
.bmd .eyebrow { margin-block-end: var(--s-2); }

/* ── PORTRAIT ───────────────────────────────────────────────────────────
   One photograph on the site, on /about/. Graded toward the palette so the
   room behind him sits inside the ground rather than fighting it. Explicit
   width/height so it reserves its box and contributes nothing to CLS. */
.portrait {
  margin-block-start: var(--s-5);
  max-inline-size: 22rem;
}
.portrait img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 2px;
  background: var(--surface-raised);
}
.portrait figcaption {
  margin-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
/* The workshop frame runs wider than the portrait: it is evidence, not a
   headshot, so the room around him is part of the information. */
.portrait-wide { max-inline-size: 30rem; }

:lang(ar) .portrait figcaption {
  font-family: var(--font-ar);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ── RTL ────────────────────────────────────────────────────────────────
   Layout is logical-properties-only, so direction is handled by `dir` on
   <html> with no mirrored stylesheet. :dir() is used rather than [dir]
   because it matches RESOLVED direction and can therefore see inside
   <bdi>, which an attribute selector cannot. This block is the entire
   physical-property surface of the site.
   ───────────────────────────────────────────────────────────────────── */
:dir(rtl) .arrow { scale: -1 1; }

/* ── ARABIC ─────────────────────────────────────────────────────────────
   Scoped by :lang, not :dir, because these are linguistic and not
   directional. letter-spacing and text-transform are neutralised rather
   than left unset: uppercase forces textrun separation before script-run
   analysis and can disconnect Arabic joining, and tracking breaks the
   connected script outright.
   ───────────────────────────────────────────────────────────────────── */
/* :lang(ar) matches EVERY element whose language is Arabic, and on /ar/ that
   includes <html> itself. Without the reset below, the rule that follows sets
   the ROOT font-size to 1.1875rem, every rem token on the Arabic tree inflates
   by 18.75%, and --measure-ar (36rem) computes to 684px against the Latin
   tree's 624px. That silently inverts the whole point of a separate Arabic
   measure: Arabic runs about 1.2x longer per idea, so its column has to be
   NARROWER, not wider. Caught by measuring the rendered page, not by reading
   the file. The reset is scoped to :root only, so it cannot disturb any of the
   :lang(ar) type-scale rules below it. */
:root:lang(ar) { font-size: 100%; }

:lang(ar) {
  font-family: var(--font-ar);
  font-size: 1.1875rem;      /* 19px against Latin's 17px */
  line-height: 1.80;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: none;  /* skip-ink fragments Arabic dots */
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 {
  font-family: var(--font-ar);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
:lang(ar) h1 { font-size: clamp(2.125rem, 4.6vw, 3.375rem); }
:lang(ar) h2 { font-size: 1.75rem; }
:lang(ar) h3 { font-size: 1.3125rem; }
:lang(ar) .lead { font-size: 1.3125rem; line-height: 1.75; }
:lang(ar) .wrap { max-inline-size: var(--measure-ar); }
:lang(ar) .wordmark { font-family: var(--font-ar); font-weight: 700; letter-spacing: 0; }

/* Arabic has no italic tradition and software obliquing slants the joins
   incorrectly. Emphasis becomes weight plus accent instead. */
:lang(ar) em { font-style: normal; font-weight: 500; color: var(--accent); }

/* Neither half of the Latin eyebrow device — case and tracking — exists in
   Arabic, so the Arabic eyebrow is rebuilt as a weight-and-size step that
   keeps the accent lead-in rule. */
:lang(ar) .eyebrow {
  font-family: var(--font-ar);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
:lang(ar) .figures dt { font-family: var(--font-ar); font-size: 0.9375rem; letter-spacing: 0; text-transform: none; }
:lang(ar) .site-nav, :lang(ar) .lang, :lang(ar) .btn,
:lang(ar) .field-row input[type="email"] { font-family: var(--font-ar); font-weight: 500; }

/* Digits and Latin tokens stay Latin-faced and bidi-isolated inside Arabic
   prose. Under UBA rules W4/N1 a bare "40+" reorders against its
   punctuation, so the isolation and the accent mark are the same element. */
/* `isolate` alone is NOT enough and this was caught rendering, not in review:
   it isolates the span from its neighbours but the CONTENTS still inherit the
   paragraph's RTL direction, so the neutral "+" in "40+" resolves to the left
   and the figure renders "+40". `direction: ltr` is what pins the internal
   order. <bdi> is left alone because it already isolates AND auto-detects,
   which is what Latin brand names inside Arabic prose need. */
.num { font-family: var(--font-text); direction: ltr; unicode-bidi: isolate; }
bdi  { font-family: var(--font-text); }
:lang(ar) .figures dd { font-family: var(--font-text); }

/* Arabic headings must not clip when a user forces line-height up. */
:lang(ar) h1, :lang(ar) h2 { min-block-size: 0; }

/* ── CITABLE BLOCK ──────────────────────────────────────────────────────
   The copy-pasteable bio on /about/. Bordered rather than raised, because a
   reader is meant to read it as a quotable object lifted out of the page,
   not as a panel the page is built from. The label rides the border.
   ───────────────────────────────────────────────────────────────────── */
.citable {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: var(--s-5) var(--s-4) var(--s-4);
  margin-block-start: var(--s-5);
}
.citable > .eyebrow {
  position: absolute;
  inset-block-start: -0.62em;
  inset-inline-start: var(--s-4);
  padding-inline: 0.5rem;
  background: var(--surface);
  padding-inline-start: 2.9em;
}
.citable > .eyebrow::before { inset-inline-start: 0.5rem; }
.citable p { margin: 0; }
.citable p + p { margin-block-start: var(--s-3); }

/* ── RECORD TABLE ───────────────────────────────────────────────────────
   Lists and tables extract measurably better than the equivalent prose, and
   four ventures with three marked closed is a more honest portrait than any
   paragraph of achievement copy. Hairlines only: no zebra, no box.
   On narrow screens the table becomes stacked rows rather than scrolling,
   because a horizontal scrollbar on a four-row table is a worse answer.
   ───────────────────────────────────────────────────────────────────── */
.record {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-start: var(--s-4);
  text-align: start;
}
.record th, .record td {
  text-align: start;
  padding-block: var(--s-3);
  padding-inline-end: var(--s-4);
  border-block-end: 1px solid var(--hairline);
  vertical-align: baseline;
}
.record thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-meta);
  border-block-end-color: var(--border);
}
.record tbody th { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; }
.record td { color: var(--ink-secondary); font-size: 1rem; }
.record .status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-meta);
  white-space: nowrap;
}
.record .status-active { color: var(--accent); }

:lang(ar) .record thead th,
:lang(ar) .record .status {
  font-family: var(--font-ar);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}
:lang(ar) .record tbody th { font-family: var(--font-ar); font-weight: 700; font-size: 1.1875rem; }

@media (max-width: 32rem) {
  .record, .record tbody, .record tr, .record th, .record td { display: block; }
  .record thead { position: absolute; inline-size: 1px; block-size: 1px;
                  overflow: hidden; clip-path: inset(50%); }
  .record tr { padding-block: var(--s-3); border-block-end: 1px solid var(--hairline); }
  .record th, .record td { border: 0; padding-block: 0.15rem; padding-inline-end: 0; }
}

/* ── PLAIN LISTS ────────────────────────────────────────────────────────
   Used by the disclosures block and the newsletter's "what you get". Marker
   is an accent hairline in the margin rather than a bullet glyph, which is
   the one place the eyebrow device repeats at body scale.
   ───────────────────────────────────────────────────────────────────── */
.marked { list-style: none; padding: 0; }
.marked li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--ink-secondary);
}
.marked li + li { margin-block-start: var(--s-3); }
.marked li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.78em;
  inline-size: 0.75rem;
  block-size: 1px;
  background: var(--accent);
}
:lang(ar) .marked li::before { inset-block-start: 0.92em; }

/* ── Q AND A ────────────────────────────────────────────────────────────
   Question-shaped headings answered in the first sentence. Sized down from
   the section h2 so a run of eight of them does not read as eight sections.
   ───────────────────────────────────────────────────────────────────── */
.qa h2 { font-size: 1.3125rem; line-height: 1.30; }
:lang(ar) .qa h2 { font-size: 1.3125rem; }
main > section.qa > h2 { margin-block-start: var(--s-5); }
main > section.qa > h2 + p { margin-block-start: var(--s-2); }

/* ── ROUTING ROWS ───────────────────────────────────────────────────────
   /contact/ is a switchboard, so it is built from the ledger row with the
   left rail carrying the case rather than a category label.
   ───────────────────────────────────────────────────────────────────── */
.ledger-row .rail {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  padding-block-start: 0.15rem;
}
:lang(ar) .ledger-row .rail { font-family: var(--font-ar); font-weight: 700; font-size: 1.125rem; }

/* ── DATED PAGE ─────────────────────────────────────────────────────────
   /now/ carries a visible date. A page that claims to be current and does
   not say when is worth less than no page.
   ───────────────────────────────────────────────────────────────────── */
.updated {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-meta);
  margin-block-start: var(--s-3);
}
:lang(ar) .updated { font-family: var(--font-ar); font-size: 1rem; letter-spacing: 0; }

/* ── FIGURE VARIANTS ────────────────────────────────────────────────────
   .portrait is the 22rem column figure. .portrait-wide (30rem) is evidence
   rather than a headshot. .portrait-full runs the full measure and is used
   once per page at most, for a frame where the room is the subject.
   ───────────────────────────────────────────────────────────────────── */
.portrait-full { max-inline-size: none; }
.figure-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-5);
}
.figure-pair figure { margin: 0; max-inline-size: none; }

/* ── FOOTER NAV ─────────────────────────────────────────────────────── */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin-block-end: var(--s-2);
  font-size: 0.9375rem;
}
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }

/* ── FORCED COLORS ──────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .eyebrow::before, .bmd::before { forced-color-adjust: none; background: LinkText; }
  .btn { border: 2px solid ButtonText; }
  .figures, .ledger-row, .site-head, .site-foot, .citable { border-color: CanvasText; }
  .record th, .record td, .record tr { border-color: CanvasText; }
  .marked li::before { forced-color-adjust: none; background: LinkText; }
  .lang { border-color: ButtonText; }
}

/* ── MOTION ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── PRINT ──────────────────────────────────────────────────────────── */
@media print {
  .site-nav, .lang, .subscribe, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}