/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · lang.css
   Per-language type (DIRECTION 3) and every right-to-left adjustment.

   How it works
   1. Every element that carries a lang attribute re-reads the font stacks and the
      metrics for its own language. So <html lang="ur"> sets up a whole page, and a
      single <span lang="hi"> in the language panel of an English page is set
      correctly too (with system fonts, because each page loads only its own web fonts).
   2. The metrics are custom properties (--lh-display, --lh-text, --tracking-display …)
      that base.css and components.css consume. Nothing else is needed per component.
   3. RTL: all CSS uses logical properties, so most things mirror by themselves. What
      cannot (transforms, transform origins, directional glyphs) is listed at the foot of this
      file under [dir="rtl"]. --dir is 1 or -1 for x translations in CSS; core.js has DT.rtl().
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font stacks ─────────────────────────────────────────────────────────────
   Written here by tools/build.mjs from src/i18n/languages.json (fonts.display,
   fonts.text), one rule per language. Do not hand-write them: edit the registry. */
@layer lang {
/* generated from src/i18n/languages.json */
[lang]:lang(en){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(zh-Hant){--font-display:"Gabarito", "Chiron Hei HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", sans-serif;--font-text:"Hanken Grotesk", "Chiron Hei HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", sans-serif}
[lang]:lang(zh-Hans){--font-display:"Gabarito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;--font-text:"Hanken Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif}
[lang]:lang(hi){--font-display:"Gabarito", "Anek Devanagari", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif;--font-text:"Hanken Grotesk", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif}
[lang]:lang(pa){--font-display:"Gabarito", "Anek Gurmukhi", "Noto Sans Gurmukhi", "Gurmukhi MN", "Nirmala UI", sans-serif;--font-text:"Hanken Grotesk", "Noto Sans Gurmukhi", "Gurmukhi MN", "Nirmala UI", sans-serif}
[lang]:lang(ur){--font-display:"Gabarito", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif;--font-text:"Hanken Grotesk", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif}
[lang]:lang(fil){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(id){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(th){--font-display:"Gabarito", "Anuphan", "Noto Sans Thai Looped", "Thonburi", "Leelawadee UI", sans-serif;--font-text:"Hanken Grotesk", "Noto Sans Thai Looped", "Thonburi", "Leelawadee UI", sans-serif}
[lang]:lang(ko){--font-display:"Gabarito", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--font-text:"Hanken Grotesk", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}
[lang]:lang(de){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(fr){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(es){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(it){--font-display:"Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
[lang]:lang(ru){--font-display:"Onest", "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
}

@layer base {
  /* Re-apply family and rhythm wherever the language changes. :where() keeps this at zero
     specificity, so any component rule still wins. */
  :where([lang]) {
    font-family: var(--font-text);
    line-height: var(--lh-text);
    letter-spacing: normal;
    hyphens: var(--hyphens-text);
    -webkit-hyphens: var(--hyphens-text);
  }
  :where(h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-sub, .display):where([lang]),
  :where(h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-sub, .display) :where([lang]) {
    font-family: var(--font-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    hyphens: var(--hyphens-display);
    -webkit-hyphens: var(--hyphens-display);
  }
  :where(h3, h4, .h-sub):where([lang]),
  :where(h3, h4, .h-sub) :where([lang]) {
    line-height: var(--lh-sub);
    letter-spacing: var(--tracking-sub);
  }
}

@layer lang {
  /* ── Latin and Cyrillic: Gabarito with Hanken Grotesk; Onest for Russian ── */
  [lang]:is(:lang(en), :lang(de), :lang(fr), :lang(it), :lang(es), :lang(id), :lang(fil), :lang(ru)) {
    --lh-display: 1.04;
    --lh-sub: 1.18;
    --lh-text: 1.6;
    --lh-ui: 1.25;
    --tracking-display: -0.022em;
    --tracking-sub: -0.012em;
    --display-scale: 1;
    --text-scale: 1;
    --measure: 34em;
    --mask-pad: .2em;
    --underline-offset: .22em;
    --fw-strong: 600;
    --fw-sub: 700;
    --fw-display: 700;
    --fw-hero: 800;
    --hyphens-display: auto;
    --hyphens-text: manual;
  }
  /* Long words: hyphenate body text too (headings already do, in every language). */
  [lang]:is(:lang(de), :lang(ru), :lang(fil), :lang(id)) { --hyphens-text: auto; }
  /* German and Russian headlines run long: a touch smaller, so fewer words break. */
  [lang]:is(:lang(de), :lang(ru)) { --display-scale: .92; }
  /* Onest is a little wider and taller on its body than Gabarito. */
  [lang]:lang(ru) { --lh-display: 1.1; --lh-sub: 1.22; --tracking-display: -0.02em; --measure: 36em; }

  /* ── Chinese and Korean ─────────────────────────────────────────────────── */
  [lang]:is(:lang(zh-Hant), :lang(zh-Hans), :lang(ko)) {
    --lh-display: 1.25;
    --lh-sub: 1.38;
    --lh-text: 1.75;
    --lh-ui: 1.35;
    --tracking-display: 0em;
    --tracking-sub: 0em;
    --display-scale: .88;               /* full-width glyphs read larger than Latin at the same size */
    --text-scale: 1;
    --measure: 34em;                    /* 34 full-width characters */
    --mask-pad: .16em;
    --underline-offset: .28em;
    --fw-strong: 700;                   /* 400 to 700 are loaded */
    --fw-sub: 700;
    --fw-display: 700;
    --fw-hero: 700;
  }
  [lang]:is(:lang(zh-Hant), :lang(zh-Hans)) {
    line-break: strict;                 /* no line starts with 。，」 or ends with 「 */
    text-autospace: normal;             /* a hair of space between 漢字 and Latin or digits */
    --hyphens-display: manual;
    --hyphens-text: manual;
  }
  [lang]:lang(ko) {
    word-break: keep-all;               /* Korean breaks at spaces, not inside a word */
    line-break: strict;
    --hyphens-display: manual;
    --hyphens-text: manual;
  }

  /* ── Devanagari and Gurmukhi ─────────────────────────────────────────────
     Tall vowel signs above the headline and below the baseline: generous leading,
     no tracking (it breaks the headline), no synthetic bold. */
  [lang]:is(:lang(hi), :lang(pa)) {
    --lh-display: 1.4;
    --lh-sub: 1.45;
    --lh-text: 1.75;
    --lh-ui: 1.5;
    --tracking-display: 0em;
    --tracking-sub: 0em;
    --display-scale: .92;
    --text-scale: 1;
    --measure: 38em;
    --mask-pad: .34em;
    --underline-offset: .34em;
    --fw-strong: 500;                   /* text face is loaded at 400 and 500 */
    --fw-sub: 600;
    --fw-display: 700;
    --fw-hero: 700;
    --hyphens-display: manual;
    --hyphens-text: manual;
  }

  /* ── Thai ────────────────────────────────────────────────────────────────
     No spaces between words: the browser breaks by dictionary. Stacked tone marks
     need the same generous leading. Looped text face for easy reading. */
  [lang]:lang(th) {
    --lh-display: 1.4;
    --lh-sub: 1.5;
    --lh-text: 1.8;
    --lh-ui: 1.55;
    --tracking-display: 0em;
    --tracking-sub: 0em;
    --display-scale: .92;
    --text-scale: 1;
    --measure: 38em;
    --mask-pad: .36em;
    --underline-offset: .36em;
    --fw-strong: 500;
    --fw-sub: 600;
    --fw-display: 700;
    --fw-hero: 700;
    line-break: auto;
    word-break: normal;
    --hyphens-display: manual;
    --hyphens-text: manual;
  }

  /* ── Urdu (Nastaliq) ─────────────────────────────────────────────────────
     Nastaliq descends diagonally along the line, so it needs far more leading than
     anything else here (2.1 text, 1.7 display), never any tracking, and a slightly
     larger text size because the letters are small on their body. */
  [lang]:lang(ur) {
    --lh-display: 1.7;
    --lh-sub: 2;                        /* two lines of a sub-heading touched at 1.8: the descenders of one met the next */
    --lh-text: 2.1;
    --lh-ui: 1.9;
    --tracking-display: 0em;
    --tracking-sub: 0em;
    --display-scale: .78;
    --text-scale: 1.06;
    --measure: 34em;
    --mask-pad: .55em;
    --underline-offset: .62em;
    --fw-strong: 600;
    --fw-sub: 600;
    --fw-display: 700;
    --fw-hero: 700;
    --hyphens-display: manual;
    --hyphens-text: manual;
  }

  /* ── Right to left ───────────────────────────────────────────────────────
     Only what logical properties cannot express. Keep this list short and complete. */
  [dir="rtl"] { --dir: -1; --petal-mask-flat: var(--petal-mask-rtl); }
  [dir="ltr"] { --dir: 1; --petal-mask-flat: var(--petal-mask-ltr); }

  /* Directional glyphs (chevron, external-link arrow) point the other way. */
  [dir="rtl"] .icon--dir { transform: scaleX(-1); }
  [dir="rtl"] .icon--dir:is(.icon--back, .icon--up, .icon--down) { transform: none; }

  /* Things that grow from the start side with a transform (which has no logical form). */
  [dir="rtl"] .site-nav__link > span::after,
  [dir="rtl"] .site-menu__link > span::after,
  [dir="rtl"] .link-petal::after,
  [dir="rtl"] .progress__fill { transform-origin: right center; }

  /* The seam's long curve follows the reading direction. */
  [dir="rtl"] .seam::before { transform: scaleX(-1); }
  [dir="rtl"] .seam--flip::before { transform: none; }

  /* The leaf and its mirror change places, so a pair leans the same way round in the reading direction
     (panel--leaf does the same by itself: its corners are logical). Photographs themselves are never mirrored. */
  [dir="rtl"] .frame--leaf { --mask: url("../img/art/mask-leaf-flip.svg"); }
  [dir="rtl"] .frame--leaf-flip { --mask: url("../img/art/mask-leaf.svg"); }

  /* Segmented control: its sliding thumb is placed by JavaScript from the physical left edge. */
  [dir="rtl"] .segmented__thumb { transform-origin: right center; }

  /* Latin runs that must keep their own order inside RTL text. */
  [dir="rtl"] :is([lang="en"], .ltr) { unicode-bidi: isolate; }
}