/* style.css — all site styling. Tokens come from variables.css. CLAUDE.md §1: custom CSS only, no framework. NO @import HERE, DELIBERATELY. An @import is fetched *by* this stylesheet, so the browser must download and parse style.css before it discovers variables.css — a serial round trip added to the render-blocking path. Both files are linked from the HTML instead, which fetches them in parallel. See CLAUDE.md §3. Load order in the HTML: variables.css first, then style.css. Colour rule: use the SEMANTIC tokens (--color-link, --color-cta-bg, …), never the raw --brand-* tokens. The brand tones fail WCAG AA as text on white; the semantic tokens already point at the compliant variant per context. See variables.css. */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, ol, li, table { margin: 0; padding: 0; } ul, ol { list-style-position: outside; padding-left: 1.25em; } /* ---------- base ---------- */ body { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-line-height); color: var(--color-text); background: var(--color-bg); -webkit-text-size-adjust: 100%; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); } /* ---------- headings: size from tokens, level from structure ---------- */ h1, h2, h3, h4 { font-family: var(--heading-font); line-height: var(--heading-line-height); color: var(--color-dark); text-wrap: balance; } h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); margin-bottom: var(--space-md); } h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); margin-top: var(--space-xl); margin-bottom: var(--space-sm); } h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); margin-top: var(--space-lg); margin-bottom: var(--space-xs); color: var(--color-primary-text); } h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); margin-top: var(--space-md); margin-bottom: var(--space-xs); } p, ul, ol, table { margin-bottom: var(--space-md); } article { max-width: var(--measure); } article table { max-width: none; } /* ---------- sidebar table of contents (Phase 6) ---------------------------- NEW-TEMPLATE PAGES ONLY. Only the 8 hand-built pages load this file, so the 55 migrated pages cannot pick this up — a sidebar there would alter their layout, which the content/layout freeze forbids. Hidden below 1024px rather than reflowed: on a phone a 9-11 item list of full H2 questions would push the article below a screenful of navigation. The headings themselves remain the mobile wayfinding. The container is 1100px and `article` is capped at --measure (68ch ~ 640px), so ~420px already sat unused. The 240px column therefore MOVES the article, it does not narrow it — the 640px content measure and the 1280x720 @2x image spec in CLAUDE.md §15.1 both still hold. */ .toc { display: none; } @media (min-width: 1024px) { main > .container { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-xl); align-items: start; } .toc { display: block; position: sticky; top: var(--space-md); max-height: calc(100vh - var(--space-xl)); overflow-y: auto; font-size: 0.8125rem; line-height: 1.45; border-left: 3px solid var(--color-border); padding-left: var(--space-md); } .toc-title { margin: 0 0 var(--space-sm); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .toc ol { list-style: none; margin: 0; padding: 0; } .toc li { margin-bottom: var(--space-xs); } .toc-h3 { padding-left: var(--space-md); } .toc a { color: var(--color-text-muted); text-decoration: none; display: block; } .toc a:visited { color: var(--color-text-muted); } .toc a:hover { color: var(--color-accent-text); text-decoration: underline; } /* scroll-spy state, set by the IIFE; aria-current is the source of truth so the highlight is exposed to assistive tech, not just painted */ .toc a[aria-current="true"] { color: var(--color-primary-text); font-weight: 600; } } /* ---------- images (URL-preserving: styling only, never a path change) ---------- */ img { max-width: 100%; height: auto; display: block; } /* Reserve layout box from the intrinsic width/height attributes to stop CLS. Every must carry width= and height= — CLAUDE.md §10. */ img[width][height] { height: auto; } /* ---------- links ---------- */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--color-link-visited); } a:hover { color: var(--color-link-hover); } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* ---------- header / nav / footer ---------- MOVED OUT 2026-08-10. All chrome now lives in chrome.css, which is the single source of header / nav / footer / back-to-top for ALL 63 pages. This file used to carry 17 chrome selectors that chrome.css also defines. The 8 new-template pages load both files, so chrome.css won where it spoke and the stale rules here still applied where it did not — the duplication CLAUDE.md §3 and §14 exist to prevent. Every removed selector was verified covered first: .site-logo* -> chrome.css `.site-header .site-logo*`, same properties, higher specificity .site-header .container-> chrome.css's version is a superset (adds width, max-width, margin/padding-inline, box-sizing); the generic `.container` above still applies .site-nav ul -> superseded by `.site-nav > ul.nav-list`. This was the selector behind the specificity bug that left every dropdown permanently open — removing it is the point, not a side effect .site-footer* -> chrome.css's version is a superset (adds background, font-family) Everything below is this template's own CONTENT styling. Do not re-add chrome. */ /* ---------- breadcrumb ---------- */ .breadcrumb { font-size: 0.875rem; color: var(--color-text-muted); padding-block: var(--space-md); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; } .breadcrumb li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-primary); } .breadcrumb [aria-current="page"] { color: var(--color-text); } /* ---------- content blocks ---------- */ main { padding-bottom: var(--space-2xl); } .lede { font-size: 1.0625rem; color: var(--color-text-muted); } .meta { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-lg); } .answer strong { font-weight: 700; color: var(--color-dark); } /* ---------- CTA (white text on --color-cta-bg clears AA at 4.52:1) ---------- */ .cta { display: inline-block; background: var(--color-cta-bg); color: var(--color-cta-text); text-decoration: none; font-weight: 600; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius); } .cta:visited { color: var(--color-cta-text); } .cta:hover { background: var(--color-cta-bg-hover); color: var(--color-cta-text); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; margin-bottom: var(--space-md); } table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; } th, td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: top; } th { font-weight: 600; background: var(--color-surface); color: var(--color-dark); white-space: nowrap; } caption { text-align: left; font-size: 0.875rem; color: var(--color-text-muted); padding-bottom: var(--space-sm); } /* footer chrome moved to chrome.css — see the note above the breadcrumb section */ /* ---------- 404 ---------- */ .error-page { text-align: center; padding-block: var(--space-2xl); max-width: 56ch; margin-inline: auto; } .error-code { font-size: 4rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-sm); } .error-page ul { display: inline-block; text-align: left; margin-top: var(--space-md); }