/* ========================================================================== BASE — reset, global typography, accessibility primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { background: var(--bg-primary); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: none; font-smooth: never; } /* Custom cursor sprite replaces the system cursor on fine-pointer devices; script.js adds .has-custom-cursor to after feature-detecting. */ .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button { cursor: none; } h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-transform: uppercase; font-weight: 700; } ::selection { background: var(--ink); color: var(--ink-inverse); } /* ---- Focus states ------------------------------------------------------- Always visible, never suppressed — a hard offset pixel outline. */ :focus { outline: none; } :focus-visible { outline: var(--border-w) solid var(--accent); outline-offset: 3px; } /* ---- Skip link ------------------------------------------------------------ */ .skip-link { position: fixed; top: -100px; left: var(--sp-2); z-index: 999; background: var(--ink); color: var(--ink-inverse); padding: var(--sp-1) var(--sp-2); font-family: var(--font-body); font-size: var(--fs-small); border: var(--border-w) solid var(--ink); transition: top var(--dur-fast) ease; } .skip-link:focus { top: var(--sp-2); } /* ---- Utility -------------------------------------------------------------- */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .crisp { shape-rendering: crispEdges; image-rendering: pixelated; } /* ---- Custom scrollbar (pixel-brutalism) ------------------------------------ Blocky, square, no rounded corners — reuses existing color tokens and the site's 2px hairline-border convention (--border-w-thin), not new hex values or border weights. Page background is white (--bg-primary), so that's the track color, not --bg-inverse — a black track wouldn't match the page it sits against. scrollbar-color/-width is the standard property (Firefox, and Chromium/ Edge 121+); ::-webkit-scrollbar covers Chrome/Safari/older Edge, which either ignore scrollbar-color or (Safari) don't support it at all. The ::-webkit-scrollbar rules are left unscoped (bare pseudo-element, no preceding selector) so they apply to every scrollable box on the page — the main document AND any nested overflow:auto/scroll element (e.g. .modal in 03-components.css) — without repeating the block per-container. .case-grid's own scrollbar-width:none / ::-webkit-scrollbar{display:none} (06-responsive.css) is more specific and continues to win there, so the swipeable card slider still deliberately shows no scrollbar. scrollbar-width/-color are NOT inherited by nested scroll containers (unlike the webkit pseudo-elements), so .modal sets its own copy of these two — see 03-components.css. Wrapped in forced-colors so Windows High Contrast Mode users keep the OS-native scrollbar instead of these custom colors. */ @media not (forced-colors: active) { html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-primary); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-primary); border-left: var(--border-w-thin) solid var(--ink); } ::-webkit-scrollbar-thumb { background: var(--accent); border: var(--border-w-thin) solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: var(--ink); } ::-webkit-scrollbar-corner { background: var(--bg-primary); } } /* ---- Reduced motion -------------------------------------------------------- Global downgrade. Section-specific animation kills live in 05-animations.css next to the keyframes they cancel, so the override always wins on cascade order without needing extra specificity. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * , *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; scroll-behavior: auto !important; } }