/* --- style.css --- */ /* ---- Inter, self-hosted (2026-08-28) --------------------------------- Latin-subset, weight-axis (100-900) VARIABLE Inter, vendored in fonts/ -- see fonts/README.md and fonts/inter-OFL.txt (SIL OFL 1.1). The font stack has always named "Inter" first, but nothing ever loaded it, so the font-feature-settings on `body` below (cv05 / cv08 / ss03) was a no-op for every visitor who did not happen to have Inter installed. This makes it real. Two files, ~98KB total; font-display: swap, so first paint is never blocked -- a brief fallback flash is the right trade for that. Italic is a real cut, not a synthesised slant, which matters on a site this dense with cited titles. */ @font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "InterVariable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); } :root { /* Tells the browser which palette its OWN surfaces should use: form-control chrome, date pickers, to a platform default (Arial on Windows). Almost every button component on the site already works around this with `font: inherit`, but a handful never did (#navtrig, bare .preset, the Bloch gate buttons, the daily-question options, the qubit-pill ket). Harmless while the body font was ~Segoe UI anyway; visible now that InterVariable actually loads. One reset, family only -- components keep whatever size/weight they set. */ button, input, select, textarea { font-family: inherit; } /* Smooth scrolling plus a sticky header means every in-page anchor has to be told about the header, or it lands underneath it. This site runs almost entirely on deep links -- the nav chips point at widget ids, the Ledger at #c-, the Frontier at #q-, the two curriculum pages at #t01..#t24 -- so "the thing you clicked is behind the bar" is not an edge case here, it is the main path. --nav-h carries a static default that is correct for the one-row header at every width it is sticky at; alive.js replaces it with the measured height (and keeps it measured through resize), so a header that wraps to two rows still parks its targets in the open. Below 720px the header is not sticky, so the padding is deliberately zero. */ html { scroll-behavior: smooth; } /* THE TYPE SIZE (2026-09-24). Chinmoy: "people should not have to zoom in to check what's written there or strain their eyes." Every font-size on the site is in rem, so the root is the one dial that moves all of it: body text goes 16px -> 17px on a phone and 18px from 720px up, and every label, caption and control scales in proportion. A PERCENTAGE, not px, so a reader who has already raised their browser's default size keeps that on top. */ /* 2026-09-25: phones went 17px -> 18px as well (Chinmoy: "increase fonts for mobile"). Measured first: on a 375px viewport 72% of all text was the 17px body and a quarter was the 14.5px captions, notes and 12px labels, which is where a phone reader squints. One root, one dial: the whole hierarchy moves together. */ html { font-size: 112.5%; } :root { --nav-h: 82px; } @media (min-width: 720px) { html { scroll-padding-top: calc(var(--nav-h) + 14px); } } body { background: var(--bg); color: var(--text); font-family: InterVariable, Inter, "Segoe UI", -apple-system, system-ui, sans-serif; /* Inter character variants: cv05 gives the lowercase l a tail and cv08 puts serifs on the uppercase I, so l / I / 1 stop colliding -- worth having on a site this dense with notation and ket vectors. ss03 rounds the quotes and commas. All three are no-ops on Segoe UI / San Francisco (the fonts most visitors actually get -- Inter is named but not loaded), and font-feature-settings does not switch off the default kern/liga/calt. If Inter is ever self-hosted, this is already in place. */ font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1; font-optical-sizing: auto; line-height: 1.65; /* Breaks a word only when it cannot fit on a line by itself. With the larger type (2026-09-24) two did not on a 375px phone and pushed the whole page sideways: analog.html's "disagree/disagree/..." run and a file path in on ledger.html. */ overflow-wrap: break-word; } /* ambient layer: two soft glows + the lattice dot grid (the Lattice IS the brand) + a film-grain texture (2026-09-23, researched top-10 item 7). A wide radial gradient over a near-black ground is exactly where 8-bit colour BANDS -- visible steps instead of a smooth fade, worst on the cheap displays a reader is likeliest to be on. A few percent of noise breaks the banding up by dithering the boundary, which is the same reason film stock and printed halftones never band the way flat digital colour does; it reads as texture, not decoration. Self-contained: an SVG data: URI (img-src already allows data:, so this needs no CSP change) with feTurbulence generating the noise and feColorMatrix converting it straight to a LOW, FIXED alpha -- white speckle at ~3.5%, baked into the image itself rather than tuned via a separate CSS opacity, so it is the same texture in every browser that can rasterise an SVG filter, not a second moving part to keep in sync. Composited NORMALLY, not blended: mix-blend-mode: overlay reads more "correct" in photography but doubles the surface this rule has to be proven safe on, and normal compositing at this alpha is close enough to invisible in light mode that it costs nothing to leave unconditional. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(640px circle at 12% -4%, var(--glow1), transparent 62%), radial-gradient(760px circle at 88% 104%, var(--glow2), transparent 62%), radial-gradient(circle, var(--dot) 1px, transparent 1.5px), var(--grain-url); background-size: auto, auto, 26px 26px, 140px 140px; } /* hairline accent bar, drifting slowly */ body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: linear-gradient(90deg, #8b5cf6, #2dd4bf, #8b5cf6); background-size: 200% 100%; animation: drift 14s linear infinite; } .wrap { max-width: 780px; margin: 0 auto; padding: 0 20px 80px; } /* Fixed at 780px regardless of viewport, the whole page (nav included, since it lives inside .wrap) sat in a narrow centre column with dead margins on any screen wider than a tablet -- reading text that size is fine, but every grid, table and card on the site was still capped to that width too, so widescreen desktops never got to use the extra room. Widened in two steps rather than one jump so very large monitors don't overshoot into uncomfortably long text lines. 2026-09-24: the 1024-1439 step went 880px -> 1180px with the type-size change above. At 18px the header needs ~942px to stay one row, and an 880px column wrapped it to two on every page. Those widths have no rails in the gutters (rails.css starts at 1440), so the column simply takes the screen, the way index.html's own home.css override already did; running prose is still held to THE MEASURE below. 1440 and up stays 1040px because the rails are positioned against exactly that width. */ @media (min-width: 1024px) { .wrap { max-width: 1180px; } } @media (min-width: 1440px) { .wrap { max-width: 1040px; } } /* THE MEASURE. The two steps above did what that comment wanted for grids, tables, cards and games -- and carried the running prose along with them, which is the one thing that does not want the extra room. Measured 2026-09-22 at 1440px: 99 characters per line (counted in '0' advances, so the true character count is higher still) against the 65-75 that long-form text is set at. A reader loses the start of the next line at that length. The fix keeps the container wide and caps only the running prose, so a table still spans 1040px while the paragraph above it does not. Headings are deliberately NOT capped: they are short, and h2 carries a drawn accent whose width is part of the section rule. */ .wrap { --measure: 70ch; } @media (min-width: 1024px) { .wrap > p, .wrap > ul, .wrap > ol, .wrap > blockquote, .wrap > dl { max-width: var(--measure); } } /* :not(.rung-rail) on every bare `nav` rule below, header through mobile overrides: rung.js (2026-08-23) creates its own