/* CanILiveThere — plain, boring, readable CSS. Runtime stays framework- and build-free (fetch + JSON.parse, plain DOM); a small Node prerender step now runs before publish for the no-JS static fallback (see tools/prerender-locations.js) — that step is offline/local, not a runtime dependency. Accessibility/readability outrank cleverness (mission brief, 2026-07-09). Light-mode tokens below + the dark-mode block at the end are the v2 addendum's "site warmth + dark theme" ruling (2026-07-10): a subtle warm-neutral shift on chrome tokens (surface/panel/border/gap), one real pre-existing WCAG AA fix (--accent), and a full dark theme — "an atlas at night," not the light theme with the lights off; every text/background pair below is WCAG-contrast-checked in the addendum itself, not eyeballed. v7 ("The Explorer's Atlas", 2026-07-12): parchment/oxblood palette, replacing the v2 near-white/blue pair below — every new pairing re-checked (WCAG relative-luminance contrast) against the new parchment ground, not carried over on the old numbers. Dark theme is explicitly out of scope this pass (same caution v4/v6 used for map water/the dark ramp before extending them later) — the dark tokens at the end of this file are untouched. */ :root { --ink: #1b1b1b; --paper: #F2E8D5; --muted: #5a5a5a; /* v7 §1.2: reuses --country-border's own hex — one ink family for both UI hairlines and the map's own border stroke, not two. 2.69:1 vs paper (decorative divider, not a text pairing — the 4.5:1 text floor doesn't apply). */ --line: #a58a66; /* "Pasted card" surface — deliberately close in luminance to --paper itself (1.06:1); the border+shadow contract (see .panel-card below) does the separating, not a ground-contrast gap. Still holds real TEXT contrast: 15.96:1 ink-on-it, 6.39:1 muted-on-it. */ --panel: #FBF6E9; --accent: #8C2F1B; --gap-bg: #E4D8BC; --gap-ink: #635c50; /* v6 addendum §2.2: aubergine, brown retired (was #3a2a1a) — clears 10.9-16.3:1 against all three map surfaces, ΔE 27.2 from the ramp's own weakest stop (#330063) — same dark violet-purple family, staying distinct (reviewed as a "coherence check, met"). */ --eliminated: #370036; --conditional: #e07b1a; --focus: #0b5fff; /* Fixed dark chip, not theme-reactive: this floating tooltip always inverts against whatever the page background is, so it must not resolve from --ink (which flips to near-white in dark mode and would put white text on a white chip). */ --tooltip-bg: #1b1b1b; --chip-active-bg: #1f6ea3; --badge-high-border: #2c7fb8; --badge-high-text: #1a4f73; --badge-high-bg: #eaf3fa; --badge-medium-border: #a1dab4; --badge-medium-text: #2f6b45; --badge-medium-bg: #eef8f0; --badge-speculative-border: #e0b04a; --badge-speculative-text: #7a5c14; --badge-speculative-bg: #fdf3df; --div-match-ink: #2f6b45; --div-match-bg: #eef8f0; --div-diverge-ink: #b02a2a; --div-diverge-bg: #fceaea; --div-unchecked-ink: #b95d00; --div-unchecked-bg: #fdf0e0; /* Map-specific chrome (v2 addendum §2.4: warm the room, not the water — the water stays blue, the unresearched-country fill warms with the rest of the chrome, since that's the fill ~90% of the map's landmass wears on first paint). v4 addendum R3 §3.2 narrows (not reverses) that call: still unambiguously water/blue-family, shifted toward a friendlier teal, validated against the score ramp's own light-end floor (2.05:1, real margin) — #eef4f8 -> #e7f4f5. --country-fill (v4 R3 §3.3 confirms this is already the "terrain-paper" warm tan the addendum asked for — unchanged). */ --map-water: #e7f4f5; --country-fill: #d6cdb8; /* v6 addendum R3 §3.1: sand-tone, thinner, translucent — retires the hardcoded #ffffff "municipal overlay" white grid flagged in review ("less of these straight lines... an exciting map, not a municipal overlay"). VALIDATED: 2.07:1 against the landmass (soft, visible, no crisp white line), 2.90:1 where borders meet water. No dark-mode override defined here — out of scope this pass, not validated against the dark landmass fill; carries over as-is until a future pass checks it (named, not silently assumed fine). */ --country-border: #a58a66; } /* v7 §1.4: self-hosted Fraunces (headings/verdict/portrait) + Work Sans (body/tables/UI chrome) — law 7 bans system fonts by name (Inter, Roboto, Arial); the old body stack named three of them directly. REAL BUILD GAP, named plainly, not silently worked around: this session's sandbox has no outbound network access (Bash `curl` denied, WebFetch can't return binary font files) — I could not actually download the real WOFF2 subsets tonight. The @font-face rules below are wired correctly for when the files land (see fonts/README.md for the exact acquisition steps); until then every fallback below is a bare CSS generic (serif / sans-serif) — NEVER a named system font — so the banned-name rule holds even in this degraded state. Visually this means the site currently renders in the browser's own default serif/sans, not Fraunces/Work Sans, until the two files are dropped into fonts/. Flagged as a fast-follow browser errand, not fixed by writing a fake binary. */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-700.woff2") format("woff2"); font-weight: 650 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; position: relative; font-family: "Work Sans", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; } /* v7 §1.5.1: procedural paper grain — one feTurbulence+feColorMatrix SVG filter, encoded once as a data URI and reused everywhere (body here, .panel-card below), no external asset, no JS. feColorMatrix reduces the noise to alpha-only output (R'/G'/B' held at 0, A' = luminance), so this is a pure darkening mask, not a colored texture — applied via mix-blend-mode:multiply at low opacity so it only ever darkens, never lightens or shifts hue. baseFrequency/opacity are a starting-guess craft call (untested rendered, per the spec's own flag) — tune by eye before shipping if it reads too subtle or too muddy on real text. */ :root { --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2126 0.7152 0.0722 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); } body::before { content: ""; position: fixed; inset: 0; background-image: var(--grain-svg); background-repeat: repeat; mix-blend-mode: multiply; opacity: 0.05; pointer-events: none; z-index: 999; } a { color: var(--accent); } a:focus, button:focus, select:focus, input:focus { outline: 3px solid var(--focus); outline-offset: 2px; } /* ---------- top bar (v4 addendum R4: brand/nav/theme-toggle only — site-level chrome, first thing on the page, unchanged position from the old .site-header. The persona block below is a SEPARATE piece, moved out of the header entirely — see .persona-block further down. */ .site-topbar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem; } .brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--ink); } .site-nav { display: flex; gap: 1rem; } .site-nav a { text-decoration: none; color: var(--muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; } .site-nav a.active, .site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); } /* Theme toggle (v4 addendum R2 §"Toggle placement/copy"): fixed label, state-reflecting aria-pressed + .active hook, not label-swapping. */ #theme-toggle { margin-left: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.3rem 0.75rem; font-size: 0.85rem; color: var(--ink); cursor: pointer; } #theme-toggle.active { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: #fff; } /* ---------- persona block (v4 addendum R4 §4.2/4.3): now lives inside
, after each page's own H1/orientation, not in the top bar. */ .persona-block { margin: 0.75rem 0 0.25rem; max-width: 100%; } /* Bug fix: v7 §7.1 widened every