/* 00-fonts-and-naming.css — the site-wide NAMING convention (read it before adding any class, id, data-* or custom property), then the self-hosted @font-face rules: Jost and Space Mono. The css/style/ files are linked one after another in filename order, so a later file wins a tie. */ /* STstudio — v4 */ /* NAMING — one convention for every class, id, data-* attribute and custom property on the site (css/, js/, index.html, scripts/). Type sizes have their own rules at the top of css/tokens.css. 1. Whole English words, lowercase, single hyphens. The only short forms: nav, btn, num, prev, lang, url, 3d, sr-only. No prefixes like ac-, cf-, wt-. 2. A part is block-part: archive-card → archive-card-title, contact-form → contact-form-label. At most two words after the block; past that, the part is a block of its own. 3. A variant fixed in the markup or by a generator is base--variant, written next to the base: work-table-row work-table-row--header, reveal--delay-1. One hyphen = part, two hyphens = variant. 4. A state JS adds or removes is is- or has- (is-active, is-open, is-revealed, body.is-menu-open). CSS writes a state together with its component (.detail-panel.is-open), never alone. Generators never write is-*. 5. Name what a thing is, not its tag, place, look or history: project-title, not project-h1; header-actions, not right. Never a lone everyday word (right, dark, title, year) — a text search can't find it. 6. A name used on one page only starts with that page's slug: op- for /op/, legal- for /privacy/. A component on two or more pages gets a plain name. 7. ids only for URL anchors (#about, #work, #contact — outside links use them, never rename),