/* RTM AUDIO — one shell, one grid, one type system, one hue per product. This file is the design language. Six product pages used to carry six drifted copies of it; only 44 rules were byte-identical. Everything below is shared by construction. THE RULE THIS SURFACE OBEYS: the page behaves like an instrument, not a brochure. Motion here only ever reports state — there is no decorative animation in this file, and every transition is attached to a control the reader operated. */ /* ── 1. THE GROUND ─────────────────────────────────────────────────────────── */ :root{ --void:#0a0c0f; --ink:#ece8df; --ink-2:#b7b4ab; --ink-dim:#7d838b; --ink-faint:#575f67; /* 3.02:1 on --void; #4a5158 measured 2.43 */ --line:#20262c; --line-2:#161b20; --grid:#12171c; --green:#57c279; --green-hi:#8fe7ab; --acc:var(--green); /* per-product hue; set on */ /* ⚠ THE TOKEN IS CALLED --serif AND IT HOLDS A GROTESK. 2026-09-08, OHAD: "Söhne everywhere." The front door was the last surface still speaking in a second display voice — Instrument Serif here, Söhne on the store and all six product pages — and that split WAS the defect, not the face. Renaming the token would touch every rule that reads it on a live store for no rendered difference, so the name stays wrong on purpose and says so here. v2/product.css carries the same note for the same reason. ⚠ Instrument Serif stays declared in /fonts.css and on disk: it is OFL, costs nothing, is fetched by nobody, and is half of the two-token rollback. ⛔ LICENCE: Söhne Breit Kräftig is Klim Type Foundry, order 26090410 — Desktop (5 users) + Web (20,000 monthly page views, rtmaudio.com ONLY). App/embedding NOT purchased, so this face may never be named in a plug-in face's CSS, never shipped inside a bundle, and never set in an email or ad creative (Klim clause 3b counts subscribers and impressions against the same 20,000). Declared once, in /fonts.css. */ --serif:'Söhne Breit',system-ui,-apple-system,sans-serif; /* ⚠ 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. */ --sans:'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. */ --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --bind:4rem; --maxw:75.7rem; --ease:cubic-bezier(.32,.72,0,1); --u:0.5rem; /* spacing unit — every gap is a multiple, and it scales with the root */ } /* ── 2. THE SCALE LAW ────────────────────────────────────────────────────────── The page SCALES, it does not reflow. Root font-size is fluid between 992px and 1750px and clamped at both ends; every size below is in rem, so a 2560px display gets a larger page, not a wider one. Measured requirement: rendered characters-per-line stays within ±5% from 1024px to 2560px, and no width introduces horizontal scroll. */ html{ font-size:clamp(16px, 14.04px + 0.198vw, 17.5px); -webkit-text-size-adjust:100%; } /* SIX rendered sizes, and no more. A dense datasheet is more legible on fewer sizes, not on more — the old /peak rendered twelve. */ :root{ --t-display:clamp(2.1rem, 1.1rem + 3.4vw, 4.1rem); --t-h2:clamp(1.5rem, 1rem + 1.6vw, 2.35rem); --t-lead:1.02rem; --t-body:0.855rem; --t-name:1.55rem; /* the product name in a rack row — display register, row scale */ --t-label:0.625rem; --t-micro:0.56rem; } /* ⚠ Any rule that sets `display` overrides the UA's `[hidden]{display:none}` and brings the element back on screen silently. That shipped once, on the store, as a hardcoded countdown with no pre-sale behind it. Gated by scripts/gates/hiddenmeanshidden.mjs. */ [hidden]{display:none!important} *{margin:0;padding:0;box-sizing:border-box} body{ background:var(--void); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:var(--t-body); line-height:1.62; letter-spacing:.018em; -webkit-font-smoothing:antialiased; overflow-x:hidden; background-image: repeating-linear-gradient(0deg,transparent 0 47px,var(--grid) 47px 48px), repeating-linear-gradient(90deg,transparent 0 47px,var(--grid) 47px 48px); } a{color:inherit;text-decoration:none} ::selection{background:var(--acc);color:#04110a} :focus-visible{outline:2px solid var(--acc);outline-offset:3px} img,video{max-width:100%;height:auto} /* -.03em is v2/product.css's shipped value for .disp in this exact face — cited, not invented. */ .serif,.disp{font-family:var(--serif);font-weight:var(--display-weight);line-height:.94;letter-spacing:-.03em} .mono{font-family:var(--mono)} .lbl,.eyebrow{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em; text-transform:uppercase;color:var(--ink-dim);font-weight:400; } .lbl.g,.eyebrow.g{color:var(--acc)} h1{font-size:var(--t-display)} h2{font-size:var(--t-h2)} p{max-width:62ch} .lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.7} .frame{max-width:var(--maxw);margin:0 auto;padding:0 calc(var(--u)*4) 0 calc(var(--bind) + var(--u)*2.5);position:relative} /* ── 3. DATASHEET FURNITURE (the distinctive asset — keep) ─────────────────── */ .bind{ position:fixed;top:0;bottom:0;left:0;width:var(--bind);border-right:1px solid var(--line);z-index:20; background:var(--void);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--u)*2) 0; } .bind .pn{ writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:calc(var(--u)*1.5) 0; } .bind .pn.top{color:var(--acc)} .dim{display:flex;align-items:center;gap:calc(var(--u)*1.25);font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)} .dim .r{flex:1;height:1px;background:var(--line);position:relative} .dim .r::before,.dim .r::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--ink-faint)} .dim .r::before{left:0}.dim .r::after{right:0} /* ── 4. NAV ───────────────────────────────────────────────────────────────── */ nav{ position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;align-items:center; padding:calc(var(--u)*1.75) calc(var(--u)*4) calc(var(--u)*1.75) calc(var(--bind) + var(--u)*2.5); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--void) 88%,transparent); backdrop-filter:blur(6px); font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase; } nav .id{display:inline-flex;gap:.6em;align-items:center} nav .id i{width:9px;height:9px;border-radius:50%;background:var(--acc)} nav .id b{font-weight:400;letter-spacing:.2em} nav .id span{color:var(--ink-faint)} nav .links{display:flex;gap:calc(var(--u)*2.5);color:var(--ink-dim)} nav .links a{transition:color .2s var(--ease);padding:6px 0} nav .links a:hover,nav .links a[aria-current]{color:var(--ink)} @media(max-width:640px){nav .id span{display:none}nav .links a:nth-child(3){display:none}} /* ── 5. THE LABEL SWAP — a control states what it will DO, then what it IS ─── Two copies of the label, one translated out of the box. It reports the hover/focus state of the control it sits on; it is not decoration. */ .swap{display:inline-block;overflow:hidden;vertical-align:bottom;position:relative} .swap span{display:block;transition:transform .34s var(--ease)} .swap span:last-child{position:absolute;inset:0;transform:translateY(105%)} a:hover .swap span:first-child,a:focus-visible .swap span:first-child, button:hover .swap span:first-child,button:focus-visible .swap span:first-child{transform:translateY(-105%)} a:hover .swap span:last-child,a:focus-visible .swap span:last-child, button:hover .swap span:last-child,button:focus-visible .swap span:last-child{transform:translateY(0)} /* ── 6. THE RACK — a spec matrix, not a card wall ─────────────────────────── */ .rowset{border-top:1px solid var(--line);padding-bottom:calc(var(--u)*7)} /* clears the floating lane rail */ .prow{ display:grid;grid-template-columns:200px 1fr 132px 88px;gap:calc(var(--u)*2.75);align-items:center; padding:calc(var(--u)*2.5) 0;border-bottom:1px solid var(--line);position:relative; transition:background .2s var(--ease); } .prow:hover,.prow:focus-within{background:#0d1116} .prow .plate{position:relative;border:1px solid var(--line);background:#000;overflow:hidden} .prow .plate .fr{aspect-ratio:16/10;overflow:hidden} .prow .plate img{width:100%;height:100%;object-fit:cover;object-position:center top; /* Every thumbnail is a screenshot of a dark plugin face on a dark ground. Without a lift the 16:10 crop reads as an empty black rectangle; the top of a UI shot is the informative half. */ filter:contrast(1.04) brightness(1.18)} .prow .plate::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px; border:1px solid var(--acc);border-right:0;border-bottom:0;opacity:.55;z-index:2} .prow .nm{font-family:var(--serif);font-size:var(--t-name);line-height:1} .prow .pn{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)} .prow .ds{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;margin-top:calc(var(--u));max-width:52ch} .prow .sp{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase; /* These are the row's spec VALUES — "24 ERB bands", "bit-exact null" — so they read as content, not as furniture. --ink-faint measured 2.43:1, under the 3.0 floor for small text. */ color:var(--ink-dim);text-align:right;line-height:1.6} .prow .go{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase; color:var(--acc);text-align:right} .prow .st{position:absolute;inset:0} /* the whole row is the target */ @media(max-width:860px){ .prow{grid-template-columns:1fr;gap:calc(var(--u)*1.75)} .prow .plate{max-width:320px}.prow .sp,.prow .go{text-align:left} } /* ── 7. THE LANE RAIL — a facet is a URL ──────────────────────────────────── */ .lanes{ position:sticky;bottom:calc(var(--u)*2);z-index:14;display:flex;justify-content:center; margin:calc(var(--u)*4) 0 0;pointer-events:none; } .lanes ul{ display:flex;gap:2px;list-style:none;pointer-events:auto;max-width:100%;overflow-x:auto; border:1px solid var(--line);background:color-mix(in srgb,var(--void) 92%,transparent); backdrop-filter:blur(8px);padding:2px;scrollbar-width:thin; } .lanes a{ display:block;white-space:nowrap;padding:calc(var(--u)*1.25) calc(var(--u)*1.75); font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-dim);transition:color .18s var(--ease),background .18s var(--ease); } .lanes a:hover{color:var(--ink);background:#0f1419} .lanes a[aria-current="page"]{color:var(--void);background:var(--acc)} .lanes .n{color:var(--ink-faint);margin-left:.6em} .lanes a[aria-current="page"] .n{color:#04110a;opacity:.6} /* ── 8. SPEC TABLE ────────────────────────────────────────────────────────── */ .spec{width:100%;border-collapse:collapse;border-top:1px solid var(--line)} .spec tr{border-bottom:1px solid var(--line)} .spec td{padding:calc(var(--u)*1.75) 0;vertical-align:top} .spec td.n{font-family:var(--mono);font-size:var(--t-label);color:var(--acc);letter-spacing:.1em;width:44px} .spec td.k{font-family:var(--serif);font-size:var(--t-lead);width:34%;color:var(--ink);line-height:1.15} .spec td.v{font-family:var(--mono);font-size:var(--t-body);color:var(--ink-dim);line-height:1.6} @media(max-width:720px){.spec td.k{width:auto}} /* ── 9. BUY BLOCK ─────────────────────────────────────────────────────────── ⚠ Named .buyblock, not .buy. `.buy` is the BUTTON class the store uses, and when both existed the store's buy button inherited `display:grid; grid-template-columns:1fr 280px` and rendered 400px wide, overflowing its own panel. One class name, one meaning. */ .buyblock{display:grid;grid-template-columns:1fr 280px;border:1px solid var(--line);border-top:2px solid var(--ink-faint)} .buyblock .l{padding:calc(var(--u)*3.5) calc(var(--u)*4);border-right:1px solid var(--line)} .buyblock .r{padding:calc(var(--u)*3.5) calc(var(--u)*4);display:flex;flex-direction:column;justify-content:center} .buyblock .price{font-family:var(--serif);font-size:var(--t-display);line-height:.8} .buyblock .price .c{font-size:var(--t-label);color:var(--ink-dim);vertical-align:top} .cta{ display:inline-block;margin-top:calc(var(--u)*2);align-self:flex-start;background:var(--acc);color:var(--void); padding:calc(var(--u)*1.5) calc(var(--u)*2.25);font-family:var(--mono);font-size:var(--t-label); letter-spacing:.16em;text-transform:uppercase;transition:filter .2s var(--ease); } .cta:hover{filter:brightness(1.12)} .cta.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)} .cta.ghost:hover{color:var(--ink);border-color:var(--ink-faint);filter:none} @media(max-width:720px){.buyblock{grid-template-columns:1fr}.buyblock .l{border-right:0;border-bottom:1px solid var(--line)}} /* ── 10. DEMO VIDEO — nothing plays that was not asked for ────────────────── */ .demo{border:1px solid var(--line);background:#000} .demo video{display:block;width:100%;height:auto} .demo figcaption{ padding:calc(var(--u)*1.5) calc(var(--u)*2);border-top:1px solid var(--line); font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;color:var(--ink-faint); } /* ── 11. SECTIONS + FOOTER ────────────────────────────────────────────────── */ section{padding:calc(var(--u)*7) 0;border-top:1px solid var(--line)} section:first-of-type{border-top:0} .cap{display:flex;justify-content:space-between;gap:calc(var(--u)*2.5);flex-wrap:wrap} footer{border-top:1px solid var(--line);padding:calc(var(--u)*3.25) 0 calc(var(--u)*6.5)} footer .row{display:flex;justify-content:space-between;gap:calc(var(--u)*2);flex-wrap:wrap; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)} footer .row a{color:var(--ink-dim);transition:color .2s} footer .row a:hover{color:var(--ink)} footer .fl{display:flex;gap:calc(var(--u)*1.75);flex-wrap:wrap} footer .rev{margin-top:calc(var(--u)*2);color:var(--ink-faint)} footer .rev s{opacity:.5} @media(max-width:640px){ :root{--bind:0px} .bind{display:none} .frame,nav{padding-left:calc(var(--u)*2.5);padding-right:calc(var(--u)*2.5)} } /* ── 12. MOTION IS ONLY EVER STATE ──────────────────────────────────────────── Honoured for the OS setting and for the reader's own switch, which overrides it in both directions — the switch is state the reader owns, so it is allowed to exist. */ @media(prefers-reduced-motion:reduce){ :root:not([data-motion="full"]) *{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } :root[data-motion="reduce"] *{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .motion-switch{ background:transparent;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer; font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; padding:6px 10px;transition:color .18s var(--ease),border-color .18s var(--ease); } .motion-switch:hover{color:var(--ink);border-color:var(--ink-faint)} html:not(.js) .motion-switch{display:none} /* a control that cannot work is not shown */ /* ── 13. THE PLATE — the framed component every product page mounts artwork in ─ It was defined six times, six slightly different ways. One definition, one corner tick in the product's own hue, and the variants that pages actually used. */ .plate{position:relative;border:1px solid var(--line);background:#000;overflow:hidden} .plate .fr{overflow:hidden} .plate .fr.wide{aspect-ratio:16/9} .plate .fr.face{aspect-ratio:4/3} .plate img,.plate video{display:block;width:100%;height:auto;transition:transform .5s var(--ease)} .plate::before{content:"";position:absolute;top:-1px;left:-1px;width:9px;height:9px; border:1px solid var(--acc);border-right:0;border-bottom:0;opacity:.55;z-index:2;pointer-events:none} .plate::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px; border:1px solid var(--line);border-left:0;border-top:0;z-index:2;pointer-events:none} .plate .stamp,.plate .cap,.plate .tag{ position:absolute;left:0;bottom:0;padding:6px 10px;background:color-mix(in srgb,var(--void) 82%,transparent); font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint);z-index:2} .plate.lift{transition:border-color .3s var(--ease)} .plate.lift:hover{border-color:var(--ink-faint)} .plate.lift:hover img,.plate.lift:hover video{transform:scale(1.012)} .plate--gray img,.plate--gray video{filter:grayscale(1)} .plate--gray:hover img,.plate--gray:hover video{filter:grayscale(0)} .cta-row{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap;margin-top:calc(var(--u)*3)} .cta.cta-dead{opacity:.45;pointer-events:none} .lbl.a,.eyebrow.a{color:var(--acc)} .disp .acc{color:var(--acc)} /* ── 14. LEGAL PROSE ────────────────────────────────────────────────────────── The EULA and the privacy notice used to run a separate palette (sand/cream/gold) whose gold was TxB EQ's product accent doing duty as a global. Same shell as everything else now; the wording is untouched. */ .legal{max-width:44rem} /* A legal page sets its heading in the display face like every other page. Without this it inherits the body sans, because it carries no .disp class of its own. */ /* -.035em is v2/page.css:186's value for .legal h1 in this face. */ .legal h1{font-family:var(--serif);font-weight:var(--display-weight);font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em} .legal .updated{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.24em; text-transform:uppercase;color:var(--ink-faint);margin-top:calc(var(--u)*2)} .legal .intro{margin-top:calc(var(--u)*4);font-size:var(--t-lead);color:var(--ink-2);line-height:1.75;max-width:none} .legal .intro strong{font-weight:500;color:var(--ink)} .legal section{padding:0;border:0;margin-top:calc(var(--u)*4.5)} .legal h2{font-family:var(--serif);font-size:var(--t-lead);color:var(--ink);line-height:1.2; display:flex;gap:calc(var(--u)*1.75);align-items:baseline} .legal h2 .n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;color:var(--acc);flex:none} .legal p{margin-top:calc(var(--u)*1.75);color:var(--ink-2);line-height:1.75;max-width:none} .legal a{border-bottom:1px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease)} .legal a:hover{color:var(--acc);border-color:var(--acc)} .legal ul,.legal ol{margin-top:calc(var(--u)*1.75);padding-left:calc(var(--u)*2.5);color:var(--ink-2)} .legal li{margin-top:calc(var(--u));line-height:1.75} .legal strong{color:var(--ink);font-weight:500} .legal .rule{height:1px;background:var(--line);border:0;margin:calc(var(--u)*5) 0} .legal .legalcaps{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-dim);display:block;line-height:1.7} /* ── 15. PAGE TRANSITIONS ───────────────────────────────────────────────────── Cross-document View Transitions: the effect the reference sites pay a routing framework and a client-side router for, in four lines, with the browser still doing real navigation. The scrollbar, the back button, Ctrl+F and a JS-off reader all keep working. ⚠ Duration stays short — this reports that a navigation happened, it is not an animation. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s} @media(prefers-reduced-motion:reduce){ :root:not([data-motion="full"]) ::view-transition-group(*), :root:not([data-motion="full"]) ::view-transition-old(*), :root:not([data-motion="full"]) ::view-transition-new(*){animation:none!important} } /* ── 16. THE LANE INDEX — categories as the spine, not a filter bar ─────────── Every plugin company organises its front page by PRODUCT NAME, which is the one thing a visitor with a problem does not yet know. This organises it by the question they arrived with. The question is the link; the product is the answer they get for clicking. Intrigue lives in the demonstration, never in the specification — so nothing here is hidden: the lane, the count and the price are all on the row. */ .laneindex{border-top:1px solid var(--line)} .lrow{ position:relative;display:grid;grid-template-columns:44px 1fr 150px 44px; gap:calc(var(--u)*2.5);align-items:baseline; padding:calc(var(--u)*3.25) 0;border-bottom:1px solid var(--line); transition:background .22s var(--ease); } .lrow:hover,.lrow:focus-within{background:#0d1116} .lrow .st{position:absolute;inset:0} .lrow .num{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;color:var(--acc)} .lrow .q{font-family:var(--serif);font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em; color:var(--ink-2);transition:color .22s var(--ease);max-width:24ch} .lrow:hover .q,.lrow:focus-within .q{color:var(--ink)} .lrow .meta{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim);text-align:right;line-height:1.7} .lrow .meta b{display:block;color:var(--acc);font-weight:400} .lrow .go{font-family:var(--mono);font-size:var(--t-label);color:var(--ink-faint);text-align:right; transition:color .22s var(--ease),transform .22s var(--ease)} .lrow:hover .go,.lrow:focus-within .go{color:var(--acc);transform:translateX(4px)} @media(max-width:860px){ .lrow{grid-template-columns:32px 1fr;gap:calc(var(--u)*1.5)} .lrow .meta{grid-column:2;text-align:left} .lrow .go{display:none} } /* The rail sits at the TOP of the rack, where a reader looking for a category will find it. */ .lanes.top{position:sticky;top:52px;bottom:auto;margin:0 0 calc(var(--u)*3);justify-content:flex-start} .lanes.top ul{background:color-mix(in srgb,var(--void) 94%,transparent)} /* ── 17. THE HERO ───────────────────────────────────────────────────────────── Display type gets the full measure instead of sharing a row with the instrument. The instrument is not decoration squeezed into a corner: it is the claim, so it gets its own section and the full width. */ .hero h1{max-width:16ch} .herolede{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(var(--u)*5); align-items:start;margin-top:calc(var(--u)*3.5)} .herofacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line); border:1px solid var(--line)} .herofacts div{background:var(--void);padding:calc(var(--u)*2) calc(var(--u)*2.25)} .herofacts b{display:block;font-family:var(--serif);font-weight:var(--display-weight);font-size:var(--t-name); line-height:1;color:var(--ink)} .herofacts span{display:block;margin-top:6px;font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} @media(max-width:860px){.herolede{grid-template-columns:1fr;gap:calc(var(--u)*3.5)}} /* The instrument, full width. Its scope was 132px tall in a sidebar; here it can actually be read. */ #prove .bench .scope{height:180px} /* ── 18. THE INSTRUMENT ─────────────────────────────────────────────────────── Not a page and not a widget in a box. This is the same object mounted wherever the site needs to be playable: the home hero, every product hero. Same engine, same delta view, different colour. The site does not link to a demo, the site IS the demo. */ .inst{background:#08090c;border-top:1px solid var(--line);outline:none} /* the playing surface and the story are SIBLINGS: the canvas fills the stage, the story follows it */ .inst .inst-stage{position:relative;min-height:clamp(340px,48vh,560px);overflow:hidden} .inst[data-over="1"] .inst-stage{box-shadow:inset 0 0 0 1px var(--acc)} .inst:focus-visible .inst-stage{box-shadow:inset 0 0 0 2px var(--acc)} .inst .inst-view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y} .inst .inst-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column; justify-content:space-between;pointer-events:none; /* the instrument runs full bleed, so its UI has to clear the binding rail like every frame does */ padding:calc(var(--u)*3) calc(var(--u)*3.5) calc(var(--u)*3) calc(var(--bind) + var(--u)*2.5)} .inst .inst-ui > *{pointer-events:auto} .inst .inst-top{display:flex;justify-content:space-between;gap:calc(var(--u)*2);flex-wrap:wrap; font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint)} .inst .inst-eng{color:var(--acc)} .inst .inst-drop{margin-top:auto} .inst .inst-cue{font-family:var(--sans);font-weight:500;letter-spacing:-.02em; font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--ink)} .inst[data-state="loaded"] .inst-cue{font-size:var(--t-body);color:var(--ink-dim); font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-weight:400} .inst .inst-files{display:flex;gap:calc(var(--u)*2.5);flex-wrap:wrap;margin-top:calc(var(--u)*1.75)} .inst .inst-files button{background:none;border:0;padding:0 0 4px;cursor:pointer; font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-2);border-bottom:1px solid var(--line);transition:.2s var(--ease)} .inst .inst-files button:hover,.inst .inst-files button:focus-visible{color:var(--acc);border-color:var(--acc)} .inst .inst-ctl{position:absolute;right:calc(var(--u)*4);bottom:calc(var(--u)*3); display:flex;gap:calc(var(--u)*2.5);opacity:0;transition:opacity .35s var(--ease)} .inst[data-state="loaded"] .inst-ctl{opacity:1} .inst .inst-knob{width:82px;text-align:center;cursor:ns-resize;outline:none} .inst .inst-knob .dial{position:relative;width:62px;height:62px;margin:0 auto;border-radius:50%; background:conic-gradient(from 220deg,#20262c 0deg,#3a424b 40deg,#20262c 80deg,#39414a 120deg, #1d2329 160deg,#39414a 200deg,#20262c 240deg,#3a424b 280deg,#20262c 320deg,#39414a 360deg); border:1px solid var(--line)} .inst .inst-knob .dial::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:19px; background:var(--acc);transform-origin:50% 25px; transform:translateX(-50%) rotate(calc((var(--p,0.5) - 0.5) * 280deg))} .inst .inst-knob:focus-visible .dial{border-color:var(--acc)} .inst .inst-knob .k{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} .inst .inst-knob .v{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;color:var(--ink)} .inst .inst-hint{margin-top:calc(var(--u)*2);font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} .inst[data-bypass="1"] .inst-hint,.inst[data-delta="1"] .inst-hint{color:var(--acc)} @media(max-width:760px){ .inst .inst-ctl{position:static;justify-content:flex-start;margin-top:calc(var(--u)*2.5)} .inst .inst-ui{padding:calc(var(--u)*2.5)} } /* the plug-in switcher above the home rack */ .instpick{display:flex;gap:2px;flex-wrap:wrap;margin-top:calc(var(--u)*3.5)} .instpick button{background:transparent;border:1px solid var(--line);cursor:pointer; font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-dim);padding:calc(var(--u)*1.25) calc(var(--u)*2);transition:.2s var(--ease)} .instpick button:hover{color:var(--ink);border-color:var(--ink-faint)} .instpick button[aria-pressed="true"]{color:var(--void);background:var(--acc);border-color:var(--acc)} /* ── the instrument tells you what it is, and how to own it ───────────────────── The argument arrives AFTER the visitor has heard the thing, not before. This is the commercial half of the instrument and it is part of the same object, not a banner underneath it. */ .inst-tell{border-bottom:1px solid var(--line);background:#0b0d11} .inst-tell-in{max-width:var(--maxw);margin:0 auto; padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*4) calc(var(--bind) + var(--u)*2.5); display:grid;grid-template-columns:1.25fr .75fr;gap:calc(var(--u)*5);align-items:start} .inst-lane{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em; text-transform:uppercase;color:var(--acc)} .inst-what h3{font-family:var(--serif);font-weight:var(--display-weight);font-size:var(--t-h2);line-height:1; margin-top:calc(var(--u)*1.25);color:var(--ink)} .inst-what p{margin-top:calc(var(--u)*2);color:var(--ink-2);max-width:52ch;line-height:1.65} .inst-what ul{margin-top:calc(var(--u)*2.25);display:flex;gap:calc(var(--u)*3);flex-wrap:wrap; list-style:none;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim)} .inst-what li{border-left:1px solid var(--acc);padding-left:calc(var(--u)*1.25)} .inst-buy{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.75)} .inst-cta{display:inline-block;background:var(--acc);color:var(--void); font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase; padding:calc(var(--u)*1.6) calc(var(--u)*2.5);transition:filter .2s var(--ease)} .inst-cta:hover{filter:brightness(1.12)} .inst-more{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em; text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:4px} .inst-more:hover{color:var(--acc);border-color:var(--acc)} .inst-terms{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint)} @media(max-width:860px){.inst-tell-in{grid-template-columns:1fr;gap:calc(var(--u)*3.5); padding-left:calc(var(--u)*2.5)}}