/* type.css — System 1, "Didone Atelier". One voice, three scripts. * * PROPOSAL from the sandbox. Big brother holds the pen on production. * * Replaces two different old arrangements: * · index/gallery/he/ar inline ~63.7 KB of base64 @font-face — re-downloaded * on EVERY page navigation, never cached, in every edition. * · about/commission fetch from fonts.googleapis.com at runtime — a * third-party dependency on the critical path of Hebrew and Arabic text. * * Files: /assets/fonts/*.woff2, built by tools/build-fonts.py, licence and * ranges in /assets/fonts/FONTS.md. Cached once, reused by every page. * * THE RULE THAT IS EASY TO GET WRONG: every RTL stack names the brand Latin * face SECOND. The Hebrew and Arabic subsets carry no Latin codepoints, so a * Latin token inside an RTL sentence falls through the script face — and if the * stack does not name Bodoni or Space Grotesk next, it lands on a system font. * "RAL 9005" in a Hebrew paragraph renders in Arial and looks almost right. */ /* ---------- Latin: loads in every edition ---------- */ @font-face{font-family:'Bodoni Moda';src:url(/assets/fonts/bodoni-moda-latin.woff2)format('woff2'); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2212,U+00D7,U+FEFF,U+FFFD} @font-face{font-family:'Bodoni Moda';src:url(/assets/fonts/bodoni-moda-italic-latin.woff2)format('woff2'); font-weight:400 700;font-style:italic;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2212,U+00D7,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';src:url(/assets/fonts/space-grotesk-latin.woff2)format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2212,U+00D7,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-400-latin.woff2)format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-600-latin.woff2)format('woff2'); font-weight:600;font-style:normal;font-display:swap} /* ---------- Hebrew ---------- */ @font-face{font-family:'Frank Ruhl Libre';src:url(/assets/fonts/frank-ruhl-libre-hebrew.woff2)format('woff2'); font-weight:300 900;font-style:normal;font-display:swap; unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA,U+25CC} @font-face{font-family:'Heebo';src:url(/assets/fonts/heebo-hebrew.woff2)format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA,U+25CC} /* ---------- Arabic ---------- */ @font-face{font-family:'Amiri';src:url(/assets/fonts/amiri-400-arabic.woff2)format('woff2'); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'Amiri';src:url(/assets/fonts/amiri-700-arabic.woff2)format('woff2'); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'Plex Arabic';src:url(/assets/fonts/plex-arabic-400.woff2)format('woff2'); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'Plex Arabic';src:url(/assets/fonts/plex-arabic-500.woff2)format('woff2'); font-weight:500;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'Plex Arabic';src:url(/assets/fonts/plex-arabic-600.woff2)format('woff2'); font-weight:600;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} /* The RTL stacks name 'IBM Plex Sans Arabic' first and 'Plex Arabic' second. Define BOTH against the same files so the first name resolves locally — a family-name mismatch is how three self-hosted faces become unreachable while every gate stays green. */ @font-face{font-family:'IBM Plex Sans Arabic';src:url(/assets/fonts/plex-arabic-400.woff2)format('woff2'); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'IBM Plex Sans Arabic';src:url(/assets/fonts/plex-arabic-500.woff2)format('woff2'); font-weight:500;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} @font-face{font-family:'IBM Plex Sans Arabic';src:url(/assets/fonts/plex-arabic-600.woff2)format('woff2'); font-weight:600;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011} /* ---------- the stacks, per edition ---------- Names chosen by CONSUMER COUNT, not taste (big brother's ruling): --display 294 reads, --ui 236, --mono 364, across 25 files. --type-* had 0 reads in 1 file — correct stacks, inert because nothing on the ship consumed them. Renaming definitions is one file; renaming 894 consumers is a diff with no user-visible benefit and real regression risk. Script face first (it owns its block), brand Latin SECOND (it catches the fall-through), generic last. Without the second name a Latin token inside an RTL sentence lands on a system font and looks almost right. HEBREW ROLES, settled by his ruling R3 (2026-07-31, typography.md:156) and the face roster: DISPLAY/MENU is Frank Ruhl Libre; BODY/UI stays Heebo, which is all S144 ever governed once R3 narrowed it. Half that ruling reverses his decision, so both halves live here together. */ :root{ --display:'Bodoni Moda', Georgia, serif; --ui:'Space Grotesk', system-ui, -apple-system, sans-serif; --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } :root:lang(he), [lang="he"]{ --display:'Frank Ruhl Libre', 'Bodoni Moda', 'Noto Serif Hebrew', serif; --ui:'Heebo', 'Space Grotesk', 'Arial Hebrew', sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace; } :root:lang(ar), [lang="ar"]{ --display:'Amiri', 'Bodoni Moda', 'Noto Naskh Arabic', serif; /* 'Noto Serif Arabic' is not a real family — HTTP 400 */ --ui:'IBM Plex Sans Arabic', 'Plex Arabic', 'Space Grotesk', sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace; } /* Western tabular numerals in every edition (ruling R2) — dimensions, prices and tolerances must line up and read identically in EN, HE and AR. */ body{ font-variant-numeric: tabular-nums lining-nums; } /* Emphasis ladder: Latin has a TRUE italic; Hebrew and Arabic step WEIGHT. Never oblique an RTL face — a slanted Hebrew or Arabic letter is a defect, not an emphasis. */ [lang="he"] em, [lang="he"] i, [lang="ar"] em, [lang="ar"] i{ font-style: normal; font-weight: 600; } /* ---------- lead-time badge ---------- Lives here because type.css is the ONE stylesheet all three surfaces that state the lead time already load — works pages, commission and configure. site-pages.css reaches only the first of those, and defining it twice is the drift this codebase keeps paying for. It is typographic anyway: mono, tracked, uppercase. The NUMBER comes from docs/s176-works-data.json (_delivery) and is enforced by tools/audit-lead-time.mjs. The STRING is the one already in the i18n dictionary, so this adds a surface rather than new copy. */ /* S323 — IT WAS A FACT DRESSED AS A BUTTON. The old rule was `border:1px solid currentColor; border-radius:99px` at mono/11px/uppercase — which is, property for property, what `.btn` looks like. So the delivery time sat directly above two real buttons wearing the same pill, and the page appeared to offer four actions of which one was not an action at all. That is most of what he meant by "no hierarchy": not four weights competing, but a statement of fact claiming to be clickable. Now it reads as status — a marker dot and tracked mono, no border, no pill. The string and the class are untouched, so the lead-time gate still sees exactly what it audits. */ .leadbadge{ display:inline-block; margin:16px 0 2px; padding:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:0; border-radius:0; color:var(--ink3,#858aa3); } .leadbadge::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--warm,#e9b872); margin-inline-end:9px; vertical-align:middle; } /* ───────────────────────────────────────────────────────────────────────────── S337 — THE LANGUAGE SWITCHER WAS THE ONE ELEMENT RENDERING HEBREW AND ARABIC IN WHATEVER THE OS HAD. The switcher span carries an INLINE `font-family:ui-monospace,Menlo,monospace` (78 surfaces). Children inherit a COMPUTED font-family, not the var that produced it — so `עברית` and `العربية` never saw the `[lang="he"]` / `[lang="ar"]` retargeting above them, and rendered in a system monospace. That is the control a Hebrew or Arabic speaker uses to FIND THEIR OWN LANGUAGE, set in the one face on the page nobody chose, after a week of work to give all three scripts one voice. Declaring the family ON the link makes each one resolve against its own lang: Heebo for Hebrew, IBM Plex Sans Arabic for Arabic, Space Grotesk for English. Any rule beats inheritance, so this wins over the inline style on the parent without touching 78 files of markup. */ .ns-langs a[lang], .i18n-switcher a[lang]{ font-family:var(--ui); } /* S337 — WEIGHTS THAT DO NOT EXIST. type.css ships JetBrains Mono at 400 and 600 only, and Bodoni Moda declares font-weight:400 700. Every element using those families inherited the body's 300, which no face can satisfy: the browser resolved upward to 400 or synthesised one. Thirty-five mono elements — the single largest cohort on a works page — asked for a weight that has never shipped, so the mono ladder was two weights wearing three names. His ruling was fewer fonts and fewer weights, and the site just reached zero third-party font requests. Adding a third mono face to restore a distinction nobody can currently see would spend bytes to undo that. So the CSS is corrected to describe what actually renders, rather than the faces corrected to match the CSS. If a lighter mono is genuinely wanted later, that is a decision with a byte cost attached and it should be made deliberately. */ .brand span, .nav-cta, .ns-eyebrow, .ns-d, .ns-foot, .crumbs, .leadbadge, .btn, .nextwork, .legal-line, .foot-grid h2{ font-weight:400; } .priceline{ font-weight:400; }