:root {


--color-navy-900: var(--navy);
--color-navy-800: var(--navy-2);
--color-navy-950: color-mix(in srgb, var(--navy) 65%, #000);
--color-navy-300: color-mix(in srgb, var(--navy) 32%, #fff);
--color-navy-200: color-mix(in srgb, var(--navy) 18%, #fff);
--color-navy-100: color-mix(in srgb, var(--navy) 10%, #fff);
--color-navy-50: color-mix(in srgb, var(--navy) 5%, #fff);
--color-wood-500: var(--wood);
--color-wood-600: color-mix(in srgb, var(--wood) 78%, #000);
--color-sand-100: var(--surface);
--color-sand-50: color-mix(in srgb, var(--surface) 50%, #fff);
--color-ink: var(--ink);
--color-body: var(--muted);
--color-muted: var(--muted);
--color-paper: var(--paper);
--color-soft: var(--surface);
--color-beige: var(--surface);
--color-line: var(--line);
--font-heading: var(--wx-font);
--font-sans: var(--wx-font);
--radius-ui: var(--r-lg);
}

@media (max-width: 560px) {
    /* site-p21.css forces the About page's stat band into three columns even inside its own
       560px breakpoint (#about-story .ab-stats), outranking the page's own phone rule
       (.ab-stats { grid-template-columns: 1fr }) — the cards overflowed a 390px phone to
       595px. Stacked cards are the v1 design's own intent for phones. */
    #about-story .ab-stats { grid-template-columns: 1fr; }
}