/* ─────────────────────────────────────────────────────────────── soft syntax — the design kernel for rathan.me A warm, pastel, handmade take on code-as-structure. The metaphor is a living computational notebook (Quarto/tidyverse), never a dark IDE. Opt-in: any piece may use these tokens, override them, or ignore the file entirely. Readability is the veto rule — wobble and tilt belong on tiles and accents, never on running prose. ─────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ RECURSIVE, SELF-HOSTED — 2026-08-08. Replaces a render-blocking third-party stylesheet from fonts.googleapis.com on every page. 161.2 KB against the 302.5 KB Google actually serves for latin, and it ADDS seven characters the site renders that Google's latin subset does not contain: → ← − ≥ ✓ ▶ ◀. Those were silently falling back to a system font mid-sentence. Regenerate exactly (needs nothing in the repo — one-off commands): python3 -m venv /tmp/ft && /tmp/ft/bin/pip install fonttools brotli curl -L -o /tmp/Recursive.ttf \ "https://raw.githubusercontent.com/google/fonts/main/ofl/recursive/Recursive%5BCASL%2CCRSV%2CMONO%2Cslnt%2Cwght%5D.ttf" /tmp/ft/bin/fonttools varLib.instancer /tmp/Recursive.ttf CRSV=0 wght=300:700 -o /tmp/Rec-trim.ttf /tmp/ft/bin/pyftsubset /tmp/Rec-trim.ttf \ --unicodes="U+0020-007E,U+00A0-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+221A,U+2248,U+2260,U+2264-2265,U+25B6,U+25C0,U+2713,U+FEFF,U+FFFD" \ --flavor=woff2 --output-file=public/styles/fonts/recursive-v1.woff2 CRSV is pinned to 0 because nothing here uses the cursive axis. wght is clamped to 300–700 because 700 is the heaviest weight in the whole site (`.pipe`). MONO, CASL and slnt are all live and must stay. Latin Extended-A was measured and left out: it costs 26 KB and no character on the site needs it. If a name ever does, that one character falls back and the rest of the word does not — an acceptable trade at 26 KB, but a real one, so it is written down. The version is in the FILENAME, not a query string, because _headers caches this immutably for a year. To change the subset, bump to -v2. Licence: SIL OFL 1.1, alongside at OFL-Recursive.txt (OFL §2 requires the notice to travel with a redistributed copy, which self-hosting makes us). Credited on /debts/. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Recursive"; src: url("/styles/fonts/recursive-v1.woff2") format("woff2"); font-weight: 300 700; /* must match the clamped wght range */ font-style: oblique 0deg 15deg; /* declares slnt, so font-style still selects it */ font-display: swap; } /* ═══════════════════════════════════════════════════════════════════════ VIDEO COORDINATION LAYER — added 2026-08-06. ⟲ FULLY REVERSIBLE. Sampled from Rathan's test frame (see content/PALETTE-2026-08-06.md). The room is warm greige with one saturated element — a rust chair at #ad552f, 73% saturation against nothing else above 37%. The old palette was cool and green-cast, so the video would have read as pasted in. To roll back, restore these eight values and nothing else: --bg #f5f7f0 --rule #dfe4d6 --bg-tint #eef2e8 --ink #1e2b26 --card #fffdf7 --pipe #ca3722 --coral #ff6b5e --num #9a6410 Everything else in this file is untouched. A copy of the original is at content/PALETTE-2026-08-06.md. ═══════════════════════════════════════════════════════════════════════ */ :root { /* surfaces — warmed off the green cast toward the room's greige walls (sampled #a59386 / #a79990, hue ~22°) */ --bg: #f4f1ea; /* was #f5f7f0 */ --bg-tint: #ece7dd; /* was #eef2e8 */ --card: #fffcf5; /* was #fffdf7 */ --rule: #e2dbd0; /* was #dfe4d6 */ /* text — near-black warmed just off green so the dark rail sits beside the video without reading as a different room */ --ink: #232420; /* was #1e2b26 */ --ink-soft: #55655c; /* was #74837a — measured 3.69:1 on --bg and 3.92:1 on --card, i.e. the one token in here that broke this file's own ≥4.5:1 contract. It gets used for real label text (units, field labels, section eyebrows), not just decoration, so it was darkened rather than quarantined. Now 4.89:1 / 5.20:1. */ --ink-faint: #616f66; /* syntax roles — all checked for contrast on --bg */ --fn: #5f4bc4; /* function names */ --pipe: #ab4d27; /* was #ca3722. The chair's rust, deepened until it clears 4.5:1 on the new warmer --bg. Same hue family as the sampled #ad552f, so the accent and the video's only saturated object are the same colour. */ /* was #0b7d70, which measured 4.45:1 on --bg and 4.08:1 on --bg-tint — the one remaining token breaking this file's own ≥4.5:1 contract, caught by re-measuring the whole token grid on 2026-08-08 rather than by looking. It carries real text (the lesson's marginal-revenue tag, the "ready when you are" note, `.str` in the archive dialect), so it gets darkened rather than quarantined. Now 5.01 / 5.52 / 4.59 on bg / card / bg-tint, and 5.52 as a chart fill on --card against the 3:1 that SC 1.4.11 asks of graphics. Same shape of fix as --num on 2026-08-06: a palette shift moved a background and a colour that had nothing to do with it quietly fell below the line. */ --str: #0a7469; /* "strings" */ --num: #935e0e; /* numbers — was #9a6410, which measured 4.62:1 on the old cooler --bg but fell to 4.43:1 on the warmer one. */ --cmt: #5c6a60; /* # comments — they carry real content, so they clear 4.5:1 rather than sitting decoratively faint */ --op: #55655c; /* == <- infix */ /* accents for tiles + highlights */ --coral: #e2703c; /* was #ff6b5e — the pink lean fought the rust chair. Now a warm orange; still clears 4.5:1 on --ink, which it must for the lesson's "now" concept state. */ --teal: #12a594; --yellow: #ffcf4a; --purple: #8a7bff; --sky: #5eb8e8; --rose: #f48fb1; /* Two families, one typeface. Recursive's MONO axis lets the same font be gridded code or proportional prose — but font-variation-settings CANNOT make a FALLBACK font proportional (the spec: variation settings do not affect font selection where a fallback is used). So a page setting MONO 0 and falling back to `monospace` renders its prose 20.6% wider during every font swap, and each paragraph gains a line. Use --mono where the text is code, --text where it is prose. */ --mono: "Recursive", ui-monospace, "SF Mono", Menlo, monospace; --text: "Recursive", "Helvetica Neue", Helvetica, Arial, sans-serif; /* --hand (Caveat) is deliberately NOT here. It is a second typeface used by exactly two headings, on /debts/ and /404 — and a `--hand` token sitting in the kernel that / and /lesson/ both load is a loaded gun: any future class="hand" on the storefront would render in Apple Chancery. Those two pages declare it locally, next to the only two words that use it. */ --fold: cubic-bezier(.2, .8, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); /* MONO 1 = monospaced, CASL .6 = warm/casual letterforms. The whole concept in one declaration: machine grid, human hand. */ font-variation-settings: "MONO" 1, "CASL" 0.6, "slnt" 0; font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.08rem); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--yellow); color: var(--ink); } a { color: inherit; text-decoration-color: var(--coral); text-underline-offset: 3px; } a:hover { color: var(--pipe); } /* ── syntax tokens ─────────────────────────────────────────── */ .fn { color: var(--fn); } .pipe { color: var(--pipe); font-variation-settings: "MONO" 1, "CASL" 0.6, "wght" 700; } .str { color: var(--str); } .num { color: var(--num); } .op { color: var(--op); } .var { color: var(--ink); } .kw { color: var(--fn); font-variation-settings: "MONO" 1, "CASL" 0.6, "wght" 600; } .cmt { color: var(--cmt); font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -8; } /* console output, as R prints it */ .out { color: var(--ink-soft); font-variation-settings: "MONO" 1, "CASL" 0.3; } .out .prompt { color: var(--ink-faint); } /* ── code blocks ─────────────────────────────────────────────── .code — a 
, for console output with real newlines
   .cells — a 
 of .line children, for authored source. Avoids
            
 whitespace traps and lets each line be a block
            (so it can animate and hold real elements).            */
.code {
  margin: 0;
  white-space: pre-wrap;
  tab-size: 2;
}
.cells { margin: 0; }
.cells .line { display: block; min-height: 1.7em; }
.cells .spacer { height: 1.1em; }
.indent { padding-left: 2ch; }

/* ── interactive tokens: the code IS the control ───────────── */
.poke {
  /* it's a