/* ============================================================================= combo — base.css THE NEUTRAL SKELETON STYLESHEET. One file, both writing directions, every locale. --------------------------------------------------------------------------- 0. WHAT CHANGED, AND WHY — read this before editing --------------------------------------------------------------------------- The first version of this file was STRUCTURALLY correct and VISUALLY a wireframe. Sections, hierarchy, conversion order, RTL and contrast were all right; the surface was flat colour blocks, 1px-bordered white cards in even grids, no photography, no depth, no material. An operator looked at four generated directions and said "they look horrible … basic … why no images". He was right, and the diagnosis was precise: the layer that was missing was CRAFT, not structure. For a local trade business — plumbing, drains, facade cleaning, pest control — the photograph IS the trust signal. A customer standing in a flooded kitchen does not read a value proposition; they look for evidence that these are real people with real vans and a real phone number, and they press call. So this file now treats photography as the primary material and typography as the primary voice, and it ships an elevation system rather than one generic box-shadow. Everything below is still a token, still logical-property-only, still one file. See website-starter/10-visual-craft.md for the reasoning, the elevation ladder, the type ramp, the composition patterns and the scrim arithmetic. --------------------------------------------------------------------------- 0b. WHAT THE DESIGN LAW CHANGED, AND WHERE --------------------------------------------------------------------------- website-starter/00-design-law.md is the translation of the `design-taste-frontend` skill into a system with no React, no Tailwind, no motion library and no build step at request time. It outranks every other TRACK 0 document. This pass brought this file into line with it. The additions, and the section of the law each answers: THE THREE DIALS (1) `:root[data-variance|data-motion|data-density]` blocks, written onto by partials/head from project.config.json. One template set, ten levels. HERO FIT (4.7) --hero-min-block-size, the capped hero padding, the `.hero__panel` plate and its 48rem collapse, the hero bullet caps at 2 (phone) and 4 (anywhere). SPLIT-HEADER CAP (4.7) documented on `.section__head--split`; four of the six templates that carried it moved to `--start`. EYEBROW RESTRAINT (4.7) documented on `.section__eyebrow`. NO shipped template emits one. The recommended number is zero. CELL COUNT (4.7, 9.C) `.card-grid--trio` for the N=3 case, and the mod-4 arithmetic written out over `--editorial`. IMAGE STRATEGY (4.8) --media-placeholder behind every media container, and `.work-evidence__*`: the proof band that replaces the logo wall this category cannot have. MATERIALITY (4.4, 4.2) the elevation ladder re-derived as a BRAND-TINTED ink in the @supports block. No pure-black drop shadows. MOTION (5, 5.C, 5.D) `.reveal`, scroll-driven, four gates, no listener, no library, removed rather than shortened under `reduce`. ORPHANS (9.B) `text-wrap: balance` on the four heading classes, `pretty` on the running-text ones. THE SHAPE LOCK (4.4) IS NOT ENFORCED HERE AND CANNOT BE. This file ships seven radius tokens because a project's chosen family needs three plus the pill. The rule is that `design/chosen-direction.md` names, in a table, which token each of `.card`, `.panel`, `.btn`, `.pill`, `.icon-tile`, `.media-frame`, `.hero__panel` and `.faq__item` uses, and that AT MOST THREE distinct tokens appear in that table plus `--radius-pill`. A page using five radii has no radius system, it has five decisions. The defaults below already comply: `--radius-lg` on the containers, `--radius-md` on the icon tile, `--radius-pill` on the pills and buttons. --------------------------------------------------------------------------- 1. LOGICAL PROPERTIES ONLY --------------------------------------------------------------------------- There is no RTL fork of this file and there must never be one. Direction comes from a single `dir` attribute on , set from `locales[].dir`, and every rule below is written in flow-relative terms so the whole page mirrors itself: margin-left -> margin-inline-start padding-right -> padding-inline-end border-left -> border-inline-start text-align: left -> text-align: start right: 1rem -> inset-inline-end: 1rem bottom: 1rem -> inset-block-end: 1rem orig: the reference implemented RTL by hand-mirroring physical properties INSIDE inline style="" attributes — a border-right here, a margin-left there — across six forked templates, plus a mirrored SVG arrow it maintained as a second copy of the path data. Every one of those pairs was a chance for the two directions to drift, and they did. Where a physical property is genuinely unavoidable it is marked `/* PHYSICAL: * /`. There are exactly six such places in this file: box-shadow offsets, the directional-icon flip, carousel overflow, the viewport-width media queries, `object-position` on photographs, and the full-bleed viewport-width escape. Each is explained where it appears. GRADIENTS ARE ALL `to bottom` OR RADIAL — never `to right` — so not one of them needs a direction override. --------------------------------------------------------------------------- 2. EVERY VALUE IS A TOKEN --------------------------------------------------------------------------- No rule below contains a colour except the `:root` block and the `@supports` upgrade that follows it, which are the skeleton default layer. `theme.tokens` from project.config.json is emitted by partials/theme-vars into an inline