/* ============================================================================ BaseGold v2 - shared stylesheet for the content pages. index.html is a bespoke landing page and keeps its own inline styles. Every other page - the blog listing, the posts, governance and games - links this file instead of carrying its own copy. Before this existed the same v1 block was duplicated verbatim across four posts and diverged in two more. The token block below is copied VERBATIM from index.html's :root. If the site palette changes, change it in both places in the same commit. ========================================================================= */ :root { /* Surfaces */ --ink: #0A0B0D; --ink-alt: #0E1014; --surface: #12141A; --surface-hover: #15171E; --hairline: rgba(255,255,255,.07); --card-border: rgba(255,255,255,.08); /* Text - three steps, not seven: heading #FFFFFF (19.7) -> body #C3CAD6 (11.9) -> muted #9BA4B4 (7.8) The muted step was #8A93A2 (6.4:1) - AA, but the scale's weakest tone and the one carrying every 12-13.5px label. #9BA4B4 clears AAA (7:1) and still reads a clear step below body. Do not darken it back. */ --grey-body: #C3CAD6; --grey-muted: #9BA4B4; --text-1: #FFFFFF; --text-strong: #FFFFFF; --text-body: var(--grey-body); --text-2: var(--grey-body); --muted: var(--grey-muted); --faint: var(--grey-muted); /* Where the grey ramp lands while hovered; indirected so the drag-selection escape can neutralise the effect by reassigning two values. */ --warm-body: var(--gold); --warm-muted: var(--gold-label); /* Accents */ --gold: #F4C860; --gold-mid: #E9B23C; --gold-deep: #D49B22; --gold-label: #C8A45C; --base-blue: #2C6BFF; --base-blue-txt: #7DA8FF; --pos: #4ADE80; --neg: #F87171; --burn-today: #FF8A4C; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --nav-h: 60px; --pad-x: clamp(20px, 5vw, 60px); --measure: 68ch; /* reading width; long-form, not landing-page */ } /* ------------------------------- Base ---------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text-body); font-family: var(--sans); font-size: 17px; line-height: 1.7; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } p { text-wrap: pretty; } img { max-width: 100%; } a { color: var(--gold); text-decoration: none; } a:hover { color: #FFE1A0; } /* ---------------- Grey text warms to gold on hover ---------------------- Mirrors index.html. The four grey tokens are re-pointed on hover rather than a hover rule being written per component, so custom properties re-resolve on every descendant that reads them and later components inherit it for free. ONLY text-level elements are listed, and that is load-bearing: :hover matches every ANCESTOR of the pointer, so admitting one layout element would flood the page gold on any mouse move. div:not(:has(*)) admits text-only leaf divs, which have no descendants to flood. The two greys keep their relationship after the swap - body -> --gold (12.4:1), muted -> --gold-label (8.4:1) - so warming never costs contrast. Gated on a real pointer: a tap leaves :hover stuck on touch devices. */ @media (hover: hover) and (pointer: fine) { :where(p, li, dt, dd, td, th, span, small, i, b, em, strong, figcaption, label, summary, blockquote, code, abbr, time, div:not(:has(*)), .breadcrumb) { transition: color .18s ease; } :where(p, li, dt, dd, td, th, span, small, i, b, em, strong, figcaption, label, summary, blockquote, code, abbr, time, div:not(:has(*)), .breadcrumb):hover { --text-body: var(--warm-body); --text-2: var(--warm-body); --muted: var(--warm-muted); --faint: var(--warm-muted); } } /* Drag-selecting is reading, not pointing: without this the copy strobes gold under the selection band. Reassigning the two warm targets neutralises the rule above without restating its selector list. Class toggled in JS. */ body.is-selecting { --warm-body: var(--grey-body); --warm-muted: var(--grey-muted); } /* No ::selection was defined, so highlighting fell back to the UA default - a hard blue on near-black. Gold wash, warm ink on top. */ ::selection { background: rgba(244,200,96,.30); color: #FFF3D4; } ::-moz-selection { background: rgba(244,200,96,.30); color: #FFF3D4; } h1, h2, h3, h4 { margin: 0; color: var(--text-1); letter-spacing: -0.035em; line-height: 1.15; } hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; } .mono { font-family: var(--mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------- Nav ----------------------------------- */ /* Same lockup as the homepage: coin, wordmark, quiet links. The v1 bar was fixed-position with uppercase letterspaced serif links; this is sticky, so content is never hidden under it and no page needs a magic top padding. */ /* Two markup shapes for the same bar: the blog uses