/* ══════════════════════════════════════════════════════════════════════════════ RTM AUDIO v2 — BASE. The tokens and the furniture every v2 surface shares. ⚠ THIS IS THE ONLY HOME OF THE v2 TOKENS. world.css (the threshold, the rooms, the counter) and page.css (the store, the account, the legal pages) both build on this file and neither re-declares a token. Two homes of one table is how the accent hues drifted before. Load order is always: /fonts.css → /v2/base.css → (world.css | page.css) ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* a room, not a page: the ground has depth and a light in it */ --air:#0b0b0d; --air-2:#131317; --smoke:#1b1c21; --dust:#8e8b85; --chalk:#efece5; --chalk-2:#b9b5ac; --lamp:#57c279; --edge:rgba(239,236,229,.10); --edge-2:rgba(239,236,229,.05); /* ── THE DISPLAY FACE — Klim's Söhne Breit Kräftig, our own licensed type ────────────────── Deployed 2026-09-08 on the CTO's ruling. Klim order 26090410: Desktop (5 users) + Web (20,000 monthly page views, rtmaudio.com). Declared once, in /fonts.css. ⛔⛔ IT IS ONE CUT. usWeightClass=500, usWidthClass=7, ONE static file, NO fvar, and the weight is IN THE FAMILY NAME. There is no wght axis and no wdth axis to interpolate. Read off the file's own tables, not off a datasheet. ⚠ THE COMMENT THAT USED TO SIT HERE SAID THE SWAP WAS "this token plus one @font-face src, and nothing else." THAT WAS FALSE AND IT WAS THE TRAP. Doing exactly that would have asked this one cut for weights 600/620/640 and widths 106%-122%, and the browser would have answered with 16 SYNTHESISED FAKE BOLDS and 18 silently inert width rules. Nothing reports a fake bold. It renders, it looks deliberate, and it is a smeared outline. ⇒ SO THE DISPLAY SCALE WAS RE-CUT TO WHAT ONE CUT CAN ACTUALLY SERVE: 22 weight declarations now resolve to --display-weight, and all 18 font-stretch rules were REMOVED rather than left to do nothing. Hierarchy is carried by SIZE, TRACKING and COLOUR, which is what a one-weight display face has always had to use. ⚠ WHAT THAT COST, SAID PLAINLY: the width axis was the v2 display system's whole idea, and it is gone. Whether the scale should now be re-tuned to compensate (tracking and size doing the work weight and width used to) is a DESIGN question and it is JIM's, not WEB's. Nothing here was re-tuned — the sizes, tracking and colour are exactly as they were, so this change is one variable, reversible in one token. */ --display:'Söhne Breit',system-ui,-apple-system,sans-serif; /* ⚠ --display-weight IS NOT DEFINED HERE ANY MORE. It moved to /fonts.css on 2026-09-08, when the front door joined this display face: site.css does not load on the v2 world/store surfaces and this file does not load on the front door, so neither could be the single home. fonts.css is the only stylesheet every page loads. One value, one home — do not re-declare it here. */ /* ⚠ 2026-09-08 — THIS TOKEN NOW HOLDS THE DISPLAY FACE TOO. OHAD: "Söhne everywhere ... by everywhere, I meant everywhere on the website." CASS ruled body copy in, on measurements: 0 elements overflow, page heights move -1.9%..+4.2%, and Söhne's x-height is 0.5250 em against Outfit's 0.4700 (+11.7%) — it is MORE legible per glyph at the same size, not less. ⚠⚠ THE ONE REAL COST, MEASURED AND ACCEPTED: the body scale ran on THREE weights (300/400/500, 26 rules) and this face has ONE. All three now render at 500. That does NOT destroy emphasis, because every one of the 12 emphasis rules on this site ALSO changes colour (--chalk over --chalk-2) — weight was the secondary cue, and it was checked rule by rule, not assumed. ⚠ NOTHING asks for 600+ anywhere in body copy, so there are no synthesised fake bolds. ⚠ THE font-weight:300/400 DECLARATIONS ARE DELIBERATELY LEFT IN PLACE, unlike the 18 font-stretch rules which were deleted. The distinction is whether the rule can ever work again: there is no wdth axis in this file and never will be, but a second Söhne cut is purchasable, so those weights record a recoverable hierarchy rather than dead code. ⚠ Outfit stays declared in /fonts.css and on disk — OFL, fetched by nobody, part of rollback. */ --text:'Söhne Breit',system-ui,-apple-system,sans-serif; /* ⛔⛔ CASS RULED 2026-09-08: THE MONOSPACE STAYS, AND IT IS THE ONE SURFACE SÖHNE DOES NOT TAKE. Ohad said "Söhne everywhere ... everywhere on the website", then "CASS should decide." This is what I decided and why, so nobody has to guess and nobody re-litigates it: THE NUMBER: Söhne Breit Kräftig's ten digits span 0.4540 em to 0.8680 em — a 0.414 em spread, the widest digit 91% wider than the narrowest. JetBrains Mono's ten digits are ALL 0.6000 em. Read from both files' own hmtx tables, not from a datasheet. WHY IT DECIDES: this token sets LIVE, ANIMATING NUMERIC READOUTS — the in-page demo's dB and LUFS values, the A/B transport, the plugin mocks, the spec tables. With proportional digits a number that changes from -7.5 to -11.2 visibly jumps sideways. That is not a style preference; it is a readout that looks broken to someone judging a measuring tool. ⚠ IT IS FIXABLE, AND I AM NAMING THE FIX RATHER THAN QUIETLY SKIPPING IT: Söhne DOES ship `tnum` (confirmed in its GSUB feature list), so `font-variant-numeric: tabular-nums` would restore alignment. What I will not do is tag every numeric surface on a LIVE store in the same run as a font swap and hope I found them all — a missed one shows a customer a wobbling meter. ⇒ SO THIS IS THE HONEST SHAPE OF THE SITE NOW, AND IT IS A RULE RATHER THAN AN ACCIDENT: · Söhne Breit Kräftig = everything a person READS. Display, headings, body copy, labels. · JetBrains Mono = everything that is a MEASUREMENT. Numbers, readouts, spec values. This morning the site had FOUR display voices and no rule. It now has ONE voice plus ONE deliberate instrument register, with the rule written down. That is the improvement. ⚠ THE UPGRADE OWNS THE REST. Ohad: "we will upgrade the website as well later on." Whether the instrument register survives at all is a question for that work — it is a re-typesetting decision, not a font swap. Do not fold this token into --display without doing the tnum sweep and driving the live demo. JetBrains Mono is SIL OFL, so it costs nothing to keep meanwhile. */ --mark:'JetBrains Mono',ui-monospace,Menlo,monospace; --slow:cubic-bezier(.16,1,.3,1); --u:8px; /* ── THE SMALL-TYPE SCALE (fashion round, 2026-09-01) ────────────────────── 11px appeared THIRTY-NINE times across these sheets: the Buy button and the fine print were typographically identical, and the field research's top user complaint is tiny text. Three deliberate sizes now: STRUCTURE stays 11 (marks, heads, the bar), ACTIONS rise to 13 in chalk (a control invites; it does not whisper), FINE PRINT drops to 10. ⚠ Fine print keeps FULL ink — the couture note said opacity:.6, but that lands ~2.9:1 and content has a 4.5:1 floor in contrast.mjs. Accessibility outranks the atelier. */ --t-mark:11px; --t-act:13px; --t-fine:10px; } *{margin:0;padding:0;box-sizing:border-box} /* ── THE MATERIAL (fashion round). The ground was flat #0b0b0d with two radial washes — no surface at all. One tiling grain plate at 3.5%, blended, gives the dark a tooth without a single lit pixel of its own. 12 KB, and it is the only texture on the site. */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:url(/v2/grain.png) repeat;opacity:.035;mix-blend-mode:overlay} /* ⚠ ANY class that sets `display` overrides the UA's `[hidden]{display:none}`, and the element comes back on screen with nobody noticing. This shipped: the store's pre-sale clock is built hidden and revealed by JS only when a drop is actually running, and `.clock{display:flex}` put a hardcoded "24:00:00" in front of every visitor with no pre-sale behind it — a fake number on the commercial surface, which is the one place we can least afford one. The guard is global and deliberately `!important`: hidden must mean hidden, always. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;background:var(--air)} body{ background:var(--air); color:var(--chalk); font-family:var(--text); font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} ::selection{background:var(--lamp);color:var(--air)} :focus-visible{outline:1px solid var(--lamp);outline-offset:4px} /* ── the room's light. One soft source, top left, and a deep fall-off. Not a gradient wash: a lamp, so the ground reads as space rather than as a colour. ── */ .room-light{ position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(120vw 90vh at 18% -10%, rgba(120,130,150,.13), transparent 60%), radial-gradient(80vw 70vh at 85% 110%, rgba(87,194,121,.055), transparent 62%); } /* ══ THE BAR — the same fixed header on every v2 surface ══════════════════════ */ .bar{ position:fixed;top:0;left:0;right:0;z-index:30; display:flex;align-items:center;justify-content:space-between; padding:calc(var(--u)*2.5) calc(var(--u)*4); font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--dust); mix-blend-mode:difference; } .bar a:hover{color:var(--chalk)} .bar .b-nav{display:flex;gap:calc(var(--u)*3)} /* ══ THE KICKER — the small tracked line above a heading, on every v2 surface ═══ */ .p-kicker{font-family:var(--mark);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--dust);display:flex;gap:calc(var(--u)*3);flex-wrap:wrap} .p-kicker .g{color:var(--lamp)} /* ══ THE GROUND — the same footer strip on every v2 surface ══════════════════ */ .ground{border-top:1px solid var(--edge-2);padding:calc(var(--u)*5) calc(var(--u)*4); display:flex;justify-content:space-between;gap:calc(var(--u)*3);flex-wrap:wrap; font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)} .ground a:hover{color:var(--chalk)}