/* ================== DESIGN TOKENS ================== One source of truth for colour, type and spacing. Every value below was picked against the page background for a WCAG AA contrast ratio; the old palette leaned on #555/#777 greys that measured 2.1:1 and 3.4:1, which is why so much of the archive was hard to read. Ratios are noted per token. ==================================================== */ :root { /* Surfaces: one deliberate elevation ramp, replacing a dozen ad-hoc near-blacks (#050505, #0d0d0d, #111, #141414, #1c1c1c, #1f1f1f …). */ --bg: #0b0b0c; --surface-1: #131315; /* cards, panels */ --surface-2: #1a1a1d; /* raised: chips, table headers */ --surface-3: #232327; /* inputs, hover fills */ --border: #2c2c32; --border-strong:#3c3c44; /* Text, measured on --bg */ --text: #f2f2f3; /* 17.9:1 */ --text-secondary: #c4c4c9; /* 11.2:1 */ --text-muted: #a3a3ab; /* 7.5:1 */ --text-faint: #8d8d96; /* 5.6:1 — the floor; nothing dimmer */ /* Accent. #ff0000 on black is 5.2:1 but vibrates badly at text sizes; #ff4d4d is both calmer and higher contrast. --accent-strong is the only red used behind white text (5.2:1). */ --accent: #ff4d4d; /* 6.4:1 on --bg */ --accent-strong: #d12b2b; --accent-soft: rgba(255, 77, 77, 0.13); --accent-border: rgba(255, 77, 77, 0.38); /* Focus ring: deliberately not red, so it can never be confused with a hover state and stays visible on top of red surfaces. */ --focus: #6ea8ff; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Type scale. Nothing below 13px: the old sheet had 30 rules at 10-12px. */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px - long-form body */ --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; /* 4px spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --measure: 68ch; /* readable line length for prose */ --content: 1120px; /* standard page width */ --reading: 860px; /* long-form article column */ } /* ================== RESET ================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The off-canvas mobile drawer sits at translateX(100%), which extends the scrollable area by its own width. `clip` contains it without making the root a scroll container, which `hidden` would -- and that breaks the sticky nav. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================== BODY ================== */ body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; background: var(--bg); color: var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } /* Prose links. Anything without a component class -- the About page copy, the essay bodies, injected cross-links -- was falling back to the UA's #0000EE, which measures 2.1:1 on this background. Component classes set their own colour and outrank this on specificity, so they are unaffected. */ a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: from-font; } a:hover { color: var(--text); } ::selection { background: var(--accent-strong); color: var(--text); } /* Keyboard users had no visible focus anywhere on the site. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } /* Names a region for screen readers without changing the visual design. Used where a card grid would otherwise follow the page h1 with no h2. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-16)); z-index: 2000; background: var(--accent-strong); color: var(--text); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); text-decoration: none; font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: var(--sp-4); } /* The background wordmark used to be a 90vw disc at 0.18 opacity sitting behind every page, so text landed on black in some places and dark red in others. It is now a small, near-invisible corner mark. */ .bg-logo { position: fixed; right: -60px; bottom: -60px; top: auto; left: auto; transform: none; width: 340px; height: 340px; opacity: 0.045; z-index: 0; pointer-events: none; } .bg-logo text { fill: var(--accent); } .bg-logo circle { stroke: var(--accent); } /* ================== NAVBAR ================== Scoped away from