/* ───────────────────────────────────────────────────────────────────────── 53 Peaks — shared component polish. Loaded after tokens.css on every page. Deliberately ADDITIVE and minimal: it adds cross-cutting correctness the audit flagged (keyboard focus, money alignment) without overriding any page's existing layout, so it can't regress a page. ───────────────────────────────────────────────────────────────────────── */ /* Keyboard focus — visible on every interactive element for keyboard users, invisible for mouse/touch (the audit found NO focus state anywhere, a WCAG 2.4.7 failure on the auth + money surfaces auditors test first). */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Light-theme focus ring: the legacy gold (#c9a84c) is low-contrast and off-palette on warm paper. On migrated (.ds) pages use the navy accent — higher contrast on white and consistent with the institutional accent. Higher specificity than the base rules above, so it overrides without touching the dark legacy pages. */ .ds :focus-visible, .ds a:focus-visible, .ds button:focus-visible, .ds input:focus-visible, .ds select:focus-visible, .ds textarea:focus-visible, .ds [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Money / quantity cells: right-aligned, tabular figures so digits line up column-to-column the way a financial product should. Apply `.num` to any currency or numeric cell. (Pages that already define .num inherit these; the tabular-nums + right alignment are the institutional convention.) */ .num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Respect reduced-motion preferences (institutional accessibility). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ─── Brand mark — ONE canonical rule so "53 Peaks" renders identically on every page. The logo CSS used to be copy-pasted inline into all 33 pages and had drifted (some added letter-spacing, one dropped the gold span color). `nav a.logo` / `footer a.logo` outrank any leftover inline `.logo` rule by specificity, so this is authoritative without having to edit every page. (The header mark lives in