/* akar.zone self-hosted fonts — subsetted woff2, generated from Fontsource
   Vazirmatn arabic subset verified to contain Sorani glyphs: ڕ ێ ۆ ڵ ە ک ی گ چ پ ژ */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/inter-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/inter-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/vazirmatn-arabic-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/vazirmatn-arabic-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/vazirmatn-arabic-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/vazirmatn-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/vazirmatn-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/vazirmatn-latin-700-normal.woff2) format('woff2');
}


/* akar.zone design tokens — BRIEF.md §7 "document-dark" revision.
   Dark only. One accent, desaturated steel, on links/data/focus — never a fill. */

:root {
  /* ---- palette (§7, corrected values) ---- */
  --bg:            #101214;  /* lifted off pure black — printed surface, not app chrome */
  --surface:       #161A1E;  /* the few genuinely bounded blocks (projects only) */
  --border:        #1E2228;  /* hairline rules */
  --border-strong: #262A30;  /* emphasised divider, outer frame */
  --text:          #E8EAED;  /* body and headings — 15.2:1 on --bg */
  --text-secondary:#C3C9D2;  /* supporting copy — 10.4:1 */
  --text-muted:    #6B7480;  /* labels, captions, metadata — 4.6:1 */
  --accent:        #6E93B8;  /* links + data figures ONLY — desaturated steel, 5.5:1 */
  --accent-rule:   #34506B;  /* the hairline under a link. nothing else. */

  /* ---- type stacks (§7) ---- */
  /* Latin display / headings / data / labels */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Latin body */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Kurdish + Arabic, ALL weights and roles — never the Latin mono on RTL text */
  --font-rtl:  "Vazirmatn", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;

  /* ---- type scale (1.25 ratio on a 17px base; mono display runs one step tighter) ---- */
  --text-xs:  0.72rem;   /* labels, captions — mono, letterspaced */
  --text-sm:  0.85rem;   /* metadata, stat labels */
  --text-base:1rem;      /* body: 17px set in html */
  --text-lg:  1.18rem;   /* lede paragraphs */
  --text-xl:  1.5rem;    /* section headings — mono */
  --text-2xl: 2.1rem;    /* page title — mono */
  --leading-body: 1.75;
  --leading-tight: 1.25;

  /* ---- rhythm (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* ---- measure & layout ---- */
  --measure: 68ch;        /* prose 65–75ch; wide layout is for the page, not the paragraph */
  --page-max: 1100px;

  color-scheme: dark;     /* dark only — the identity IS the dark surface */
}

/* ---- base ---- */
html { font-size: 17px; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-base)/var(--leading-body) var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* per-locale stacks set explicitly — never rely on fallback for RTL */
:lang(ckb), :lang(ar), [dir="rtl"] {
  font-family: var(--font-rtl);
}
[dir="rtl"] code, [dir="rtl"] .mono-latin { font-family: var(--font-mono); } /* Latin tokens inside RTL runs only */

/* ---- links: text + hairline, the ONLY action pattern on this site ---- */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-rule);
  padding-bottom: 1px;
}
a:hover { border-bottom-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-bottom-color: transparent;
}
/* No filled buttons anywhere, either side. If a <button> ever exists, it dresses as a link. */
button {
  all: unset;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-rule);
  cursor: pointer;
  font: inherit;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- RTL latin-token isolate (§6 rendering rule) ----
   Latin runs inside ku/ar text are wrapped in this by rtl-guard.js (or at
   build time) and bound to the preceding word with an NBSP, so reflow can
   never push a Latin token to the start of an RTL line. */
.lt { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ---- numerals: Latin digits, tabular where they align ---- */
.tnum, td, .stat { font-variant-numeric: tabular-nums; }

/* ---- motion: optional everywhere ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* akar.zone page styles — document-dark (§7). Extends tokens.css. */

/* interior layout vars (augment tokens.css) */
:root { --rail: 210px; --gap: clamp(2rem, 5vw, 5rem); }

/* shared page container (homepage overrides this entirely via .page.home) */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px) clamp(48px, 7vw, 88px); }

/* masthead — inline, minimal nav. no sidebar, no rail (homepage hides its nav) */
header.top {
  display: flex; align-items: baseline; gap: var(--gap);
  padding: clamp(20px, 3vw, 30px) 0; border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 0.85rem;
}
header.top .brand { color: var(--text); font-weight: 500; border: none; letter-spacing: 0.01em; }
header.top nav { margin-inline-start: auto; display: flex; gap: 1.6rem; }
header.top nav a { display: inline-block; padding: 0.7rem 0; }              /* ≥44px tap target */
header.top nav a[aria-current] { color: var(--text); border-bottom-color: var(--text-muted); }
header.top nav a[aria-current]:hover { border-bottom-color: var(--text-secondary); }

/* ===== HOMEPAGE — the fork as a printed title page (§4.1, §7) =====
   A full-viewport "plate" framed by one hairline: masthead top, the thesis
   breathing in the upper-middle, the fork + footer anchored to the bottom.
   Scoped under .page.home so interior pages are untouched. */
.page.home {
  max-width: none;                                   /* override the reading column — use the viewport */
  margin: clamp(14px, 2.5vw, 28px);
  min-height: calc(100dvh - 2 * clamp(14px, 2.5vw, 28px));
  border: 1px solid var(--border-strong);            /* the printed plate, inset from the edges */
  padding: clamp(18px, 3vw, 36px) clamp(20px, 4vw, 56px);
  display: flex; flex-direction: column;
}
.page.home footer.page-end { margin-top: 0; }        /* the fork's margin-top:auto already spaces it */

.home-title {                                        /* grow into the freed space; center the thesis optically */
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(40px, 6vh, 72px);
  /* Centred on the same axis the dot puts the wordmark on, so the thesis and
     akar.zone share one spine. The rate line and the footer stay on the left
     margin: they are instrument rails, and the rate's tabular figures exist to
     line up on an edge — centred, the digits shift sideways on every reload. */
  align-items: center; text-align: center;
  /* The plate's top rule. It used to be the masthead's border-bottom, but with
     the brand gone that header held nothing — an empty banner landmark drawing
     a line. The line was the only part worth keeping, so it lives here now;
     margin-top reproduces the band of air the masthead used to occupy. */
  margin-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--border);
}
.home-title .greeting {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--text-secondary); margin: 0 0 clamp(28px, 5vh, 52px);
}
.home-title .greeting .ckb {
  font-family: var(--font-rtl); font-weight: 500; font-size: 1rem;
  direction: rtl; unicode-bidi: isolate; margin-inline-end: 0.15em;
}
.home-title .name {
  font: 500 clamp(1.05rem, 2.4vw, 1.35rem)/1.2 var(--font-mono);
  letter-spacing: 0.01em; color: var(--text-secondary); margin: 0 0 clamp(14px, 2vh, 20px);
}
.home-title .tagline {                               /* the focal point — the thesis */
  font: 500 clamp(2.1rem, 6.2vw, 4.1rem)/1.06 var(--font-mono);
  letter-spacing: -0.015em; color: var(--text);
  margin: 0; max-width: 16ch; text-wrap: balance;
}
.home-title .subline {
  font: 400 clamp(0.86rem, 1.5vw, 1rem)/1.5 var(--font-mono);
  letter-spacing: 0.01em; color: var(--text-secondary);
  margin: clamp(22px, 3.4vh, 34px) 0 0; font-variant-numeric: tabular-nums;
}

.fork {                                              /* two doors either side of ONE hairline — no cards */
  border-top: 1px solid var(--border-strong);        /* .home-title flex:1 now fills the height; fork sits above the footer */
  display: grid; grid-template-columns: 1fr 1px 1fr;
}
.fork .rule { background: var(--border-strong); }
.fork .door {
  display: block; padding-block: clamp(34px, 6vh, 58px);
  color: inherit; border: 0;                         /* not a button — a large text link */
}
.fork .door:first-child { padding-inline-end: clamp(24px, 4vw, 56px); }
.fork .door:last-child  { padding-inline-start: clamp(24px, 4vw, 56px); }
.fork .word {
  font: 500 clamp(1.9rem, 4.4vw, 2.9rem)/1 var(--font-mono);
  letter-spacing: -0.01em; color: var(--accent); display: inline-block;
  padding-bottom: 4px; border-bottom: 1px solid var(--accent-rule);
  transition: border-color 0.18s ease;
}
.fork .path {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-secondary);
  margin-inline-start: 0.6em; letter-spacing: 0.02em; white-space: nowrap;
}
.fork .door:hover .word,
.fork .door:focus-visible .word { border-bottom-color: var(--accent); }
.fork .door:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- .fork.mark — the wordmark split at its own dot: akar . zone ----
   The domain is Latin in every locale, so this reads LTR on ku/ar too: without
   direction:ltr the RTL grid places the first item on the right and the name
   renders "zone.akar". The .word/.dot spans additionally carry .lt so the
   [dir="rtl"] font override above does not pull them into the Arabic stack. */
.fork.mark {
  grid-template-columns: 1fr auto 1fr; align-items: baseline;
  direction: ltr; unicode-bidi: isolate;
}
.fork.mark .door:first-child { text-align: right; padding-inline-end: 0; }
.fork.mark .door:last-child  { text-align: left;  padding-inline-start: 0; }
.fork.mark .word {                                   /* halves stay quiet; the joint carries the accent */
  color: var(--text-secondary); border-bottom-color: var(--border-strong);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.fork.mark .dot {
  font: 500 clamp(1.9rem, 4.4vw, 2.9rem)/1 var(--font-mono);
  letter-spacing: -0.01em; color: var(--accent);
  padding-inline: 0.06em; -webkit-user-select: none; user-select: none;
}
.fork.mark .door:hover .word,
.fork.mark .door:focus-visible .word { color: var(--accent); border-bottom-color: var(--accent); }

/* The stem arrives. The figure above ends flush on the fork's top rule, and
   this carries the last of it across the door's padding so the line terminates
   on the dot rather than near it. Height tracks .door's padding-block, plus two
   pixels so the join survives sub-pixel rounding. Under 720px the dot is not
   rendered (the name wraps instead), so there is nothing to connect to and this
   does not apply. */
.fork.mark .dot { position: relative; }
.fork.mark .dot::before {
  content: ""; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: calc(clamp(34px, 6vh, 58px) + 2px);
  background: var(--accent);
}
@media (max-width: 720px) { .fork.mark .dot::before { content: none; } }

@media (max-width: 720px) {
  .fork { grid-template-columns: 1fr; }
  .fork .rule { display: none; }
  .fork .door:first-child { padding-inline-end: 0; border-bottom: 1px solid var(--border-strong); }
  .fork .door:last-child  { padding-inline-start: 0; }
  /* stacked, the name wraps at its own dot: "akar." above "zone".
     .fork.mark must restate the single column — a media query adds no
     specificity, so .fork.mark above would otherwise keep the 3-column grid. */
  .fork.mark { grid-template-columns: 1fr; }
  .fork.mark .dot { display: none; }
  /* centred, so the stacked name keeps the spine the thesis sits on */
  .fork.mark .door:first-child { text-align: center; }
  .fork.mark .door:last-child  { text-align: center; }
  .fork.mark .door:first-child .word::after { content: "."; color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .fork .word { transition: none; }
}

/* ===== INTERIOR PAGES — Akar / Zone / Disclosure share one document system ===== */

/* page-head (hero) — mono eyebrow + mono thesis, start-aligned */
.pagehead { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.pagehead .meta {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 clamp(28px, 4vw, 44px);
}
.thesis {
  font: 500 clamp(2rem, 4.6vw, 3.1rem)/1.08 var(--font-mono);
  letter-spacing: -0.02em; color: var(--text); margin: 0 0 clamp(28px, 3.5vw, 40px);
  max-width: 16ch; text-wrap: balance;
}
.thesis .turn { color: var(--text-secondary); font-weight: 400; }
.lede { max-width: var(--measure); }
.lede p { margin: 0 0 1.15rem; }
.lede p:first-child { font: 500 clamp(1.12rem, 1.6vw, 1.28rem)/1.6 var(--font-body); color: var(--text); margin-bottom: 1.3rem; }
.lede p + p { color: var(--text-secondary); font-size: 1.06rem; line-height: 1.75; }

/* sections — heading rail left, content right (§7: use the width, not the paragraph) */
.sec {
  border-top: 1px solid var(--border); padding: clamp(40px, 5vw, 72px) 0;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap);
}
.rail { position: sticky; top: 24px; align-self: start; }
.rail h2 {
  font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0;
}
.rail .gloss { margin: 1.1rem 0 0; max-width: 22ch; font: 400 0.82rem/1.55 var(--font-body); color: var(--text-secondary); }
.rail .gloss b { font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.content { min-width: 0; }
.intro { max-width: var(--measure); color: var(--text-secondary); margin: 0 0 clamp(24px, 3vw, 34px); }

/* prose (disclosure) — plain reading, opening line carries the anchor weight */
.prose { max-width: var(--measure); }
.prose p { color: var(--text-secondary); font-size: 1.06rem; line-height: 1.75; margin: 0 0 1.3rem; }
.prose p:last-child { margin-bottom: 0; }
.prose p:first-child { font: 500 clamp(1.12rem, 1.6vw, 1.28rem)/1.6 var(--font-body); color: var(--text); margin-bottom: 1.5rem; }

/* milestones — a ledger. hairlines + tabular figures, years in accent (data) */
.record { width: 100%; max-width: 760px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.record td { padding: 0.72rem 0; vertical-align: baseline; border-bottom: 1px solid var(--border); }
.record tr.open td { border-bottom: none; padding-bottom: 0.1rem; }      /* bind a shared-year group */
.record tr.cont td { padding-top: 0.1rem; }
.record td.y { width: 5.5ch; padding-inline-end: 2rem; font: 500 0.95rem/1.7 var(--font-mono); color: var(--accent); }
.record td.m { color: var(--text-secondary); }
.record td.m b { color: var(--text); font-weight: 500; }

/* skills — spec sheet, unboxed. label ↔ run uses the width */
.spec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.spec dt { grid-column: 1; padding: 1.05rem 0 0; font: 500 0.85rem/1.4 var(--font-mono); color: var(--text); border-top: 1px solid var(--border); }
.spec dd { grid-column: 2; padding: 1.05rem 0; margin: 0; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; }
.spec dt:first-of-type, .spec dt:first-of-type + dd { border-top: none; padding-top: 0; }

/* what makes me different — typographic runs, unboxed. NO counter (RTL-safe) */
.diff { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.diff li { padding: 1.6rem 0; border-top: 1px solid var(--border); }
.diff li:first-child { border-top: none; padding-top: 0; }
.diff .claim { display: block; font: 500 1.14rem/1.4 var(--font-mono); letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.6rem; }
.diff p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }

/* contact — key/value rows, unboxed. NO email on this site (§4.11) */
.contact { max-width: 520px; }
.contact .row { display: flex; align-items: baseline; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.contact .row:first-child { padding-top: 0; }
.contact .row:last-child { border-bottom: none; }
.contact .k { flex: 0 0 6.5rem; font: 500 0.72rem/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.contact .v { color: var(--text-secondary); }
.contact .v a { display: inline-block; padding: 0.7rem 0; }               /* ≥44px tap target */

/* PRODUCTS (Zone) — owned, launched. The ONE place --surface + a solid border is allowed (§4.8). */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.product { background: var(--surface); border: 1px solid var(--border-strong); padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; }
.product .phead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.product .name { font: 500 1.15rem/1.2 var(--font-mono); letter-spacing: -0.01em; color: var(--text); border: none; }
a.name { color: var(--text); border-bottom: 1px solid var(--accent-rule); }
a.name:hover { border-bottom-color: var(--accent); }
.product .ext { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.product .pdesc { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; margin: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2rem; margin-top: auto; padding-top: 1.5rem; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat .fig { font: 500 1.35rem/1 var(--font-mono); color: var(--accent); }
.stat .lab { font: 400 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.product .disc { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); font: 400 0.72rem/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

/* SERVICES (Zone) — unboxed list */
.services { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.services li { padding: 1.15rem 0; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; }
.services li:first-child { border-top: none; padding-top: 0; }

/* PARTNERS (Zone) — paid, disclosed. Deliberately NOT a product: dashed, no surface, scaffold. */
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.partner { background: transparent; border: 1px dashed var(--border-strong); padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; }
.partner .slot { font: 400 0.72rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1rem; }
.partner .pending { font: 500 1.1rem/1.3 var(--font-mono); color: var(--text-secondary); margin: 0 0 0.55rem; }
.partner .pdesc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; margin: 0; }
.partner .refwrap { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-strong); }
/* the referral marker — inline typographic link on EVERY partner card, NOT a badge/pill (§7) */
.referral { display: inline-block; padding: 0.85rem 0; align-self: flex-start; font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-rule); }
.referral:hover { border-bottom-color: var(--accent); }

/* BUILDING (Zone) — real, unlaunched. The intentional third treatment: a staged ledger line. */
.building { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.build-item { border-top: 1px solid var(--border); border-inline-start: 2px solid var(--accent-rule); padding: 1.5rem 0 1.5rem clamp(1.1rem, 2vw, 1.6rem); }
.build-item:first-child { border-top: none; }
.build-item .status { display: block; font: 500 0.68rem/1.4 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.6rem; }
.build-item .bname { display: block; font: 500 1.14rem/1.3 var(--font-mono); letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.5rem; }
.build-item p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }

/* one quiet cross-link (Akar↔Zone, Disclosure→Zone) */
.crosslink { border-top: 1px solid var(--border); padding: clamp(40px, 5vw, 72px) 0; font-family: var(--font-mono); font-size: 0.95rem; }
.crosslink .lbl { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.6rem; }
.crosslink a { display: inline-block; padding: 0.7rem 0; }               /* ≥44px tap target */

/* colophon — the layout's shared footer, styled to match the document system */
footer.page-end {
  border-top: 1px solid var(--border-strong); padding-top: 1.6rem; margin-top: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-secondary);
}
footer.page-end .sep { color: var(--text-muted); }
footer.page-end a { display: inline-block; padding: 0.4rem 0; }

/* interior responsive */
@media (max-width: 860px) {
  .sec { grid-template-columns: 1fr; gap: 1.6rem; }
  .rail { position: static; }
  .rail .gloss { max-width: var(--measure); }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .spec dt { border-top: 1px solid var(--border); padding-top: 1.05rem; }
  .spec dd { border-top: none; padding-top: 0.4rem; }
  .spec dt:first-of-type { border-top: none; padding-top: 0; }
  .products, .partners { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  header.top { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  header.top nav { margin-inline-start: 0; }
  .contact .row { flex-direction: column; gap: 0.25rem; }
  .contact .k { flex-basis: auto; }
}

/* 404 */
.notfound { min-height: 60vh; display: grid; place-content: center; gap: var(--space-2); }
.notfound .code { font: 500 var(--text-2xl)/1 var(--font-mono); color: var(--text-muted); }


/* ===================================================================
   LOCALE SWITCHER + RTL CORRECTNESS — added with the ku/ar locales.
   The rest of this sheet was already direction-agnostic: it uses only
   logical properties (margin-inline-*, padding-inline-*), so nothing
   needed flipping.
   =================================================================== */

/* The switcher lives in the footer, not the masthead: .page.home hides
   header nav entirely, and the homepage needs a switcher too. */
.langs { display: inline-flex; gap: 0.9rem; align-items: baseline; }
.langs a { display: inline-block; padding: 0.4rem 0; unicode-bidi: isolate; }
.langs a[aria-current] { color: var(--text); border-bottom-color: var(--text-muted); }
.langs a[aria-current]:hover { border-bottom-color: var(--text-secondary); }

/* Arabic script is cursive. Tracking prises the letter joins apart and every
   word reads as misspelled, so no RTL surface may carry letter-spacing —
   several label classes here set it globally. Latin runs marked .lt, and
   <code>, keep their own. !important because those label rules are more
   specific than any sane descendant selector. */
[dir="rtl"] *:not(.lt):not(code):not(.mono-latin) {
  /* JetBrains Mono carries no Arabic glyphs. Display rules here reach for
     --font-mono via the `font:` shorthand, so on an RTL page the browser fell
     through to a generic monospace face, which renders Sorani and Arabic
     UNSHAPED — the letters stand apart instead of joining, and every word
     looks broken. Force the RTL stack; .lt / code / .mono-latin are Latin by
     definition and keep theirs. */
  font-family: var(--font-rtl) !important;
  letter-spacing: normal !important;
}

/* Latin tokens inside RTL prose are wrapped in .lt at author time (there is no
   rtl-guard.js — this site ships no JavaScript). .lt is defined above with
   direction:ltr + unicode-bidi:isolate; without it a trailing "+" or "/" is
   absorbed into the Arabic run and reorders, e.g. "16+" renders as "+16". */

/* --- hero signal trace (BRIEF.md §7) ---------------------------------------
   A carrier held flat with one event two thirds along, where 2017 sits on the
   milestones. It goes in the gap the hero already leaves between the thesis and
   the lede, so nothing is added to the page - a space that meant nothing now
   means something. One hairline. No fill, no glow, no gradient, no box.

   The base line is painted always and the live stroke rests at offset 0, so the
   trace is complete at rest: a reduced-motion reader, a link-preview screenshot
   and a slow first paint all see a finished line rather than an empty frame.

   preserveAspectRatio="none" lets it stretch to the box it is given, which is
   why the height is set rather than derived - at phone widths an auto height
   collapses the amplitude to ~21px and the carrier reads as a squiggle. */
.trace {
  display: block; width: 100%; height: clamp(46px, 7vw, 90px);
  margin: clamp(22px, 2.8vw, 30px) 0 0;
}
.trace .base { fill: none; stroke: var(--accent-rule); stroke-width: 1; }
.trace .live {
  fill: none; stroke: var(--accent); stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: trace-draw 1.5s cubic-bezier(.22, .61, .36, 1) 1 both;
}
@keyframes trace-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .trace .live { animation: none; } }

/* Mirrored for Sorani and Arabic: a trace that always ran left to right would
   resolve backwards against the text, putting the event before the eye reaches
   it. Same geometry, one rule. */
[dir="rtl"] .trace g.sweep { transform: scaleX(-1); transform-origin: center; }

/* --- homepage fan (BRIEF.md §7) --------------------------------------------
   Sixteen lines and one market arm converging on a single point, then a stem
   that breaks once before it ends. The count is the record: 16+ stations
   delivered blueprint to live signal. The break is a fair value gap - an
   absence marked rather than filled - which is the argument the page used to
   make in a sentence. Two ticks measure it, so a reader reads intent and not a
   rendering fault.

   Entry points are clustered on equilibrium by a golden-ratio easing rather
   than spaced evenly: a rhythm with a reason, which nobody has to decode.

   No .base twin here, unlike .trace: at sixteen strokes the resting under-layer
   doubles the ink for nothing. The live stroke rests at offset 0 instead, so
   the figure is still complete before it ever animates - reduced motion, a
   link-preview screenshot and a slow first paint all see the finished fan.

   The headline it replaces is still in the DOM, carrying .sr-only. The page
   keeps its h1 for search and for a screen reader; it just stops being seen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fan {
  /* A figure, not a rule: it keeps its own aspect and sits inside the measure,
     so it reads as an object on the plate rather than another full-bleed
     hairline. preserveAspectRatio is left at its default - unlike .trace, the
     geometry here is a composition and distorting it collapses the stem. */
  display: block; width: min(100%, 560px); height: auto;
  margin: clamp(26px, 3.2vw, 38px) auto 0;
}
.fan .live {
  fill: none; stroke: var(--accent); stroke-width: 1.1;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: fan-draw 1.1s cubic-bezier(.22, .61, .36, 1) 1 both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
.fan .tick { stroke: var(--text-muted); stroke-width: 1; }
@keyframes fan-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fan .live { animation: none; } }
/* Same reason .trace mirrors: a figure that always resolved left to right would
   run backwards against Sorani and Arabic, landing the market arm first. */
[dir="rtl"] .fan g.sweep { transform: scaleX(-1); transform-origin: center; }
@media (max-width: 720px) {
  /* Sixteen strokes inside a phone-width plate land about 3px apart and read as
     a smudge, which is worse than a smaller true number. Half of them drop: the
     figure keeps its shape and nobody counts stations on a phone. */
  .fan .alt { display: none; }
}


/* --- the signal chain (BRIEF.md §7, direction B) --------------------------
   One hairline runs down the /akar/ sections and each section opens on a node.
   The page is a signal path because the career was one: source, station, uplink,
   receiver. The structure carries that; the headings stay exactly what they are.

   The mock-up for this had the sections relabelled as chain stages - Source,
   Stations, and so on. Seeing it rendered killed it: "Contact" as "receiver" is
   the point where a true idea turns into a theme park. The line is the argument;
   the words do not have to repeat it.

   No accent. §7 spends the accent on links, data figures and focus states, and a
   structural rule is none of those - it is the same hairline vocabulary the
   section rules already use, only turned ninety degrees. */
:root { --sec-pad: clamp(40px, 5vw, 72px); }

.page.chain .sec {
  position: relative;
  padding-block: var(--sec-pad);
  padding-inline-start: clamp(22px, 2.6vw, 32px);
}
/* The spine. Logical inset, so Sorani and Arabic get it mirrored to the right
   edge with no second rule. */
.page.chain .sec::before {
  content: ""; position: absolute; inset-block: 0;
  inset-inline-start: 9px; width: 1px; background: var(--border);
}
/* The node. Not on .rail - that is sticky, and a node that travels with the
   heading reads as a bug. */
.page.chain .sec::after {
  content: ""; position: absolute; box-sizing: border-box;
  inset-inline-start: 5px; top: calc(var(--sec-pad) + 3px);
  width: 9px; height: 9px; border-radius: 50%;
  /* --text-muted, not --border-strong. Measured against the ground, the ring
     was 1.30:1 - a rule the eye never finds, which is a chain that is not
     there. --text-muted is 3.96:1: visible, still quiet, and it spends no
     accent, so section 7 holds for the right reason rather than by accident.
     The spine can stay at --border; it reads once the nodes anchor it. */
  border: 1px solid var(--text-muted); background: var(--bg);
}
/* A chain terminates. The last run fades out rather than being cut off by the
   crosslink that follows. */
.page.chain .sec:last-of-type::before {
  background: linear-gradient(180deg, var(--border) 0%, var(--border) 62%, transparent 100%);
}

@media (max-width: 700px) {
  /* The rail stacks above the content at this width, so the node would sit
     beside a heading that is no longer where it was. Keep the line, drop the
     indent to something a phone can spare. */
  .page.chain .sec { padding-inline-start: 18px; }
}

/* --- the branch figure (/akar/decisions/) ----------------------------------
   Four paths leave one point; three stop at a terminator, one runs on. It is
   the page's own subject drawn once, and it sits inside the section whose text
   decodes it - undecoded it would be ornament, which section 7 bans.

   Neutral throughout. The surviving path is separated from the dropped ones by
   value, not by hue, so the accent stays spent on links and data. */
.branch {
  display: block; width: 100%; height: auto;
  margin: clamp(26px, 3vw, 34px) 0 clamp(10px, 1.4vw, 14px);
}
.branch .dead { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.branch .stop { stroke: var(--border-strong); stroke-width: 1.5; }
.branch .live { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.branch .origin, .branch .head { fill: var(--text-muted); }
/* Mirrored for Sorani and Arabic: the path that survives should run toward the
   end of the reading direction, not away from it. */
[dir="rtl"] .branch .fan { transform: scaleX(-1); transform-origin: center; }
.figcap {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 clamp(18px, 2vw, 24px);
}
[dir="rtl"] .figcap { letter-spacing: normal; }