/* --- fonts.css --- */ /* GENERATED by src/fonts.py - do not edit by hand. * Recursive (c) The Recursive Project Authors, SIL Open Font License 1.1. * Noto Sans Georgian (c) The Noto Project Authors, SIL Open Font License 1.1. * FiraGO (c) Carrois Corporate GbR and HERE Europe B.V., SIL Open Font License 1.1. * Licence texts and source hashes: src/assets/fonts/vendor/ and src/fonts.py. * What was measured, and why this Georgian face: src/assets/fonts/measurement.json. */ @font-face { font-family: 'Recursive'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/recursive-latin.71c055d4fb.woff2') format('woff2'); unicode-range: U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2007-200B,U+2010-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+203E,U+2044,U+2052,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+2260,U+2264; } @font-face { font-family: 'Noto Sans Georgian'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/noto-sans-georgian-mkhedruli.940cb74bf0.woff2') format('woff2'); unicode-range: U+10D0-10FF; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/firago-arabic-indic-digits.7f2b252d57.woff2') format('woff2'); unicode-range: U+0660-0669; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; } /* --- tokens.css --- */ /* Design tokens — the aluminium instrument (DESIGN-BRIEF.md §5.11, decided by * the user on 2026-09-13). * * The page is an instrument chassis printed in ink. Dark screens are set into it * only where the machine speaks — the hero's recorded run, the S5 ledger table, * and the command boxes (§5.4, screen inventory) — and the verdict signals exist * only inside those screens. There is no brand colour: the brand colour is ink. * * COLOUR is decided in this file and nowhere else. Every value below was chosen * by measurement against every pair the system forms, and tests/test_contrast.py * re-measures all of them from this file at run time rather than trusting the * numbers written in these comments: * * text on the chassis --ink 11.97:1, --ink-2 7.15:1, --ink-3 4.92:1 * (worst case: each on --chassis-2) * text on a screen --screen-ink 14.35:1, --screen-ink-2 7.24:1, * --pass 8.25:1, --refine 8.29:1, --defect 5.98:1 * (worst case: each on --screen-2) * a filled signal --screen on --pass 9.07:1, on --defect 6.57:1 * strokes (1.4.11) --rule 3.22:1 at worst (on --chassis-2), and 3.50:1 * on --screen-2: one rule tone serves both surfaces * focus, both surfaces --focus-ring 11.97:1 on --chassis-2, --focus-gap * 14.35:1 on --screen-2, and 15.25:1 between the two * * A colour literal anywhere else the generator delivers is one of exactly four * things: * * 1. a colour this file declares, at an alpha, because no CSS function takes * an alpha of a hex custom property (a cast in ink, the header's chassis); * 2. a colour this file declares, at full opacity, where no custom property * can reach: the web manifest in src/build.py, the theme-color meta in * src/templates/shell.html, and src/assets/favicon.svg; * 3. black at an alpha, which is a cast and was never palette; * 4. #000 inside a mask's gradient, which is coverage and never a colour. * * In the stylesheets themselves not even the first kind is written out: every * cast and edge at an alpha is a token below (--shadow-raise, --ring-hover, * --shadow-bezel), and tests/test_contrast.py fails an rgb() or rgba() in any * other file of src/styles/. * * No glow, no gradient atmosphere, no coloured cast: every shadow is cast in ink * or black at an alpha, and an edge drawn with a shadow has no blur and no offset. */ :root { /* The chassis: brushed aluminium, not off-white. --chassis-2 is the same metal recessed (a key's track, a pressed control, a row under the pointer); at 1.13:1 it is never a boundary on its own, --rule is. */ --chassis: #D9DAD6; --chassis-2: #CDCEC9; /* Ink. Text, strokes, the mark, and the one fill a control on the chassis may have. Secondary and tertiary text are the ink thinned toward the metal, never a new grey. */ --ink: #0F1111; --ink-2: #383B3A; --ink-3: #505351; /* The identifying stroke, on the chassis and in a screen alike. Its luminance sits where its contrast against the lightest chassis tone and the darkest screen tone would meet, which is why one value clears 3:1 on all four surfaces. */ --rule: #6C6F6B; /* Screens: set into the chassis, no glow. --screen-2 is an inset within a screen (a code line's well, a table's header row). */ --screen: #0B0C0C; --screen-2: #161818; --screen-ink: #E6E7E3; --screen-ink-2: #A3A6A1; /* Verdict signals. SCREENS ONLY — tests/test_contrast.py fails any rule outside a screen that names one. Meaning is always carried by a glyph and a word as well; the colour is the third channel, never the only one. */ --pass: #5CC48B; --defect: #F26B5E; --refine: #E2A640; /* Focus, visible on both surfaces: a two-tone indicator. The ring is ink, which reads on the chassis; the gap between it and the control is screen ink, which reads in a screen. Whichever surface the control sits on, one of the two clears 3:1 against it. */ --focus-ring: var(--ink); --focus-gap: var(--screen-ink); /* --- Type ---------------------------------------------------------------- One family. Recursive's MONO axis is the colour rule set in type: Sans (MONO 0) on the chassis, where a person reads; Mono (MONO 1) in screens and code, where the machine speaks. Both stacks name the same three faces in the same order: Recursive draws Latin, Noto Sans Georgian draws Mkhedruli (chosen by measurement, src/assets/fonts/measurement.json), and FiraGO draws only the ten Arabic-Indic digits of the hero's evidence line. The system fallbacks after them differ, which is all that separates the two. The axis is set through font-variation-settings, and only MONO: CASL, slnt and CRSV are pinned inside the subset, and wght is font-weight. */ --font-sans: 'Recursive', 'Noto Sans Georgian', 'FiraGO', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Recursive', 'Noto Sans Georgian', 'FiraGO', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --axis-sans: "MONO" 0; --axis-mono: "MONO" 1; /* The shipped wght range is 400-700, and these are its four named stops. */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --weight-display: 700; /* The scale: whole pixels, every adjacent step at least 1.25 — 12, 15, 19, 24, 30, 38, 48, 60, then the poster. Eight steps above a 12px floor force the body to 19px: 12 x 1.25 x 1.25 is 18.75. Recursive's measured x-height is 543/1000em (the median ink top of a-z at 400), so 19px sets 10.3px. --size-hero is the front page's headline where the hero has the room for it: measured on 2026-09-14, the Georgian H1 at 48px holds three lines in the five-column block from 1440px wide and leaves the copy column above the fold from 820px tall, and at 1366x768 it takes a fourth line and pushes the column's last link under the fold, so there the H1 keeps 38px (src/styles/sections.css). --size-moment is the page's memorable moment (DESIGN-BRIEF.md §8.1 №1): what the gate changed in the recorded lines, `\d` to `[0-9]` and 2700 to raise, set larger than the headline at every width it has, because the moment was the smallest text in the first viewport. It is one step above the hero step and one below the poster, and it is used by the hero screen alone. Only the poster figure is fluid, because it is the one element wide enough to overflow a 320px screen in Georgian; its minimum is 1.25x the moment step, so the ratio holds at every width. tests/test_contrast.py evaluates the whole scale from 320 to 1920px. */ --size-micro: 0.75rem; --size-small: 0.9375rem; --size-body: 1.1875rem; --size-h3: 1.5rem; --size-h2: 1.875rem; --size-h1: 2.375rem; --size-hero: 3rem; --size-moment: 3.75rem; --size-display: clamp(4.6875rem, 1.5rem + 11vw, 6rem); /* Leading, from the measured vertical metrics (measurement.json, "calibration"). Recursive's content box is 950 + 250 = 1.2em, and the tallest ink a line of Latin can hold at 700 is 1.044em, so no step goes below that: lines never collide. The headings sit close to it, the body carries the reading white, and text at the small step — the screens' notes, the lens and gate descriptions, all running text on a phone — sits between the two, because its lines are short: at 15px a column of the grid or a 390px phone holds 40-60 characters, not the 66 the body leading is set for. */ --lh-display: 1.05; --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.3; --lh-small: 1.4; --lh-body: 1.5; /* Tracking closes only the display sizes, and never below -0.04em. Zeroed for Georgian below: Mkhedruli has no capitals, its counters are the letterform. --track-hero is the front page's headline set as display (§8.4 №13): at the display weight Recursive's Sans sets wide, so the 38 and 48px headline closes half a hundredth of an em further than the poster, whose size already reads tight. */ --track-display: -0.02em; --track-hero: -0.025em; --track-h1: -0.01em; --track-h2: -0.005em; /* Measure. `ch` is the advance of `0`, which in Recursive is 600/1000em in both Sans and Mono. Over the decks as they stood on 2026-09-13 the mean advance was 507.9 in English and 598.8 in Georgian, so one `ch` bought 1.181 English characters and 1.002 Georgian ones: 56ch and 66ch are both ~66 characters. tests/test_i18n.py recomputes the means from the decks and the recorded advances on every run. */ --measure: 56ch; --measure-lead: 47ch; --measure-wide: 60ch; /* --- Space --------------------------------------------------------------- The one spacing scale (§4, §5.11 №3). Named by value: a step is its size. */ --space-4: 4px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* The 12-column grid. Twelve columns at every width; the gutter and the side margin are scale steps and widen at the two breakpoints the brief uses — 720px, where a phone's compact form ends, and 1080px, the wide layout shared with src/scripts/site.js, where the stage instrument turns horizontal. At 1440 the grid is exactly 12 x 90 + 11 x 24 = 1344px between 48px margins. */ --grid-columns: 12; --grid-gutter: var(--space-16); --grid-margin: var(--space-16); --grid-max: 1344px; /* Instrument-precise corners: a key, a plate, a screen. */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* The one cast: something raised off the chassis, lit from above. Ink at an alpha, never a tint and never a halo. Only a control lifts off the metal (the 404's call to act, the header's drawer); nothing that is read does, the skill cards included (§8.3 №11). */ --shadow-raise: 0 1px 2px rgba(15, 17, 17, .14), 0 8px 24px rgba(15, 17, 17, .10); /* The edge an ink button draws under the pointer: the chassis at .5, inset, with no blur and no offset. Composited over --ink it measures 4.06:1, so it is a real edge and not a tint. */ --ring-hover: inset 0 0 0 2px rgba(217, 218, 214, .5); /* The seat every screen sits in (§8.3 №10). A screen is set INTO the chassis, not stood on it: inside its rule-tone lip, a dark rim, and a soft cast from the lip's upper edge falling onto the glass. Both layers are black at an alpha and both are inset, so nothing is lit, nothing is coloured and nothing reaches out over the metal. */ --shadow-bezel: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 8px 12px -6px rgba(0, 0, 0, .9); /* --- Motion (§5.6) ------------------------------------------------------- The durations of the five items, and nothing else moves. №1, the recorded run, is a ceiling (--duration-run) over beats that each take --duration-beat and start --stagger-run apart within the lens rows. */ --duration-run: 2400ms; --stagger-run: 60ms; --duration-beat: 240ms; --duration-toggle: 180ms; --duration-open: 240ms; --duration-close: 160ms; --duration-copy: 180ms; --duration-hover: 180ms; /* Exponential ease-out from an already-visible default: the disclosure and the toggle's roll. Colour changes use the standard curve. */ --ease-decelerate: cubic-bezier(.16, 1, .3, 1); --ease-standard: cubic-bezier(.4, 0, .2, 1); } @media (min-width: 720px) { :root { --grid-gutter: var(--space-24); --grid-margin: var(--space-32); } } @media (min-width: 1080px) { :root { --grid-margin: var(--space-48); } } /* Georgian calibration, from the same record. * * No size scale. Noto Sans Georgian's Mkhedruli x-height is 1.006x Recursive's * at 400 (1.007x at 500, 1.009x at 600), so the two scripts already stand at * one optical size, and a heading scale would only break the 1.25 steps. * * Leading: 87.9% of Mkhedruli letters leave the x-band against 50% of Latin * a-z, and the mean vertical ink per letter is 0.773em against 0.656em. Every * leading below adds the difference, rounded up — 0.12em — so the mean white * between two lines is the same in both editions. * * Measure: re-derived for the Georgian `ch`, see --measure above. */ :lang(ka) { --lh-display: 1.17; --lh-h1: 1.27; --lh-h2: 1.32; --lh-h3: 1.42; --lh-small: 1.52; --lh-body: 1.62; --track-display: 0; --track-hero: 0; --track-h1: 0; --track-h2: 0; --measure: 66ch; --measure-lead: 55ch; --measure-wide: 71ch; } /* --- base.css --- */ /* Base: reset, document surfaces, typography, the Georgian rules. * * The resets below name only elements this generator actually emits. There are * no speculative rules for markup the site cannot produce, because a rule for * an element that never renders is a rule nobody can check. * tests/test_a11y.py asserts that every element named here appears in the * built pages. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* No smooth scrolling. An in-page jump that glides is motion, and §5.6 lists every motion this page has; a scroll animation is not one of them, so an anchor lands at once, for every reader. Every in-page link on this one-page site lands under the sticky header without this. The bar is 64px tall plus its 1px rule (.header-bar min-height and .site-header's border), and the rest is breathing room, so a heading arrives below the bar instead of behind it. tests/test_a11y.py pins both numbers: move one and the offset fails rather than silently going stale. max(), because the bar's height is px but its CONTENT is rem: at a raised root font size the bar grows and a fixed offset under-shoots (WCAG 1.4.4). 5rem is the same 80px. */ scroll-padding-top: max(80px, 5rem); /* Thumb, then track. A themed scrollbar is an authored control, so the thumb owes the same 3:1 as every other boundary: --rule on the recessed --chassis-2 track. */ scrollbar-color: var(--rule) var(--chassis-2); scrollbar-width: thin; } body { margin: 0; background: var(--chassis); color: var(--ink); /* Sans: MONO 0. Every rule that switches to --font-mono switches the axis with it, or Recursive would draw "mono" text proportionally; tests/test_assets.py holds the two together. */ font-family: var(--font-sans); font-variation-settings: var(--axis-sans); font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--weight-regular); font-kerning: normal; caret-color: var(--ink); accent-color: var(--ink); -webkit-font-smoothing: antialiased; } ::selection { background: var(--ink); color: var(--chassis); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--chassis-2); } ::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--chassis-2); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* Two tones, so the indicator reads on either surface: the ink ring against the chassis, the --focus-gap between ring and control against a screen. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); border-radius: var(--radius-xs); } /* Only suppress the ring for pointer focus, never for keyboard focus. */ :focus:not(:focus-visible) { outline: none; } ::marker { color: var(--ink-2); } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; } h1, h2, h3, h4 { font-weight: var(--weight-bold); text-wrap: balance; } h1 { font-size: var(--size-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); } h2 { font-size: var(--size-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); } h3 { font-size: var(--size-h3); line-height: var(--lh-h3); } /* The page's fourth level is a label inside a block — a lens, a findings list — and never a reading heading, so it sits at the body size. */ h4 { font-size: var(--size-body); line-height: var(--lh-h3); } /* Running prose: a measure, no orphan on the last line, and quotation marks hung into the margin where the engine can (hanging-punctuation is Safari's; elsewhere the line starts on its mark, as it did). */ p { max-width: var(--measure); text-wrap: pretty; hanging-punctuation: first allow-end last; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } code { font-family: var(--font-mono); font-variation-settings: var(--axis-mono); /* `none`, not `font-feature-settings: 'liga' 0`: `none` also turns off `calt` and every other contextual ligature a face may drive, so `--` in an install command always renders as the two hyphens a reader has to type. */ font-variant-ligatures: none; } /* Figures — counts, versions, severities, dates, the ledger — must not jitter. Recursive's default figures are already tabular in both Sans and Mono (every digit advances 600/1000em, measurement.json), so this states the intent rather than switching anything on. */ time, .count, .version, .num { font-variant-numeric: tabular-nums; } svg { display: block; } table { border-collapse: collapse; } caption { text-align: start; } /* --- Georgian ---------------------------------------------------------------- * The calibration itself — leading and measure, re-derived for Recursive and * Noto Sans Georgian — lives with the tokens it restates, in * src/styles/tokens.css. What stays here is the rule that is not a token: * Mkhedruli has no capitals, so Latin tracking closes the counters that ARE the * letterform, and every Georgian run sets at zero tracking. * * text-transform: uppercase appears NOWHERE in this stylesheet, by rule and by * test (tests/test_security.py). The shipped Georgian subset is Mkhedruli only, * so an uppercase transform would map into Mtavruli, which no shipped face * declares, and drop out of the webfont mid-word. */ :lang(ka) { letter-spacing: 0; } h1:lang(ka), h2:lang(ka), h3:lang(ka) { letter-spacing: 0; } /* --- Layout ------------------------------------------------------------- */ /* The grid's outer frame: its side margin and maximum width are tokens and change at the grid breakpoints. */ .container { width: min(100% - 2 * var(--grid-margin), var(--grid-max)); margin-inline: auto; } .page-shell { background: var(--chassis); min-height: 100dvh; } .lead { font-size: var(--size-body); color: var(--ink-2); max-width: var(--measure-lead); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-16); top: var(--space-8); z-index: 100; display: inline-flex; align-items: center; min-height: 44px; transform: translateY(-200%); background: var(--ink); color: var(--chassis); padding: var(--space-8) var(--space-24); border-radius: var(--radius-xs); font-weight: var(--weight-bold); text-decoration: none; } .skip-link:focus-visible { transform: translateY(0); } /* No ornament. Empty space is the ornament, and the sections' own padding is * what draws it. tests/test_contrast.py proves no repeating pattern and no * gradient came back. */ /* --- components.css --- */ /* Components. Each container earns its shape from what it holds; there is no * single card template repeated down the page. * * Motion lives in one place per component: its own * `@media (prefers-reduced-motion: no-preference)` block, and only the items of * DESIGN-BRIEF.md §5.6 exist. A reader who asked for reduced motion gets every * state change at once. tests/test_demonstration.py::MotionGrammarTests reads * every transition and keyframe on the page against that list. */ /* --- Buttons ------------------------------------------------------------- * Every control is a real