Site improvements: mobile SVG performance and crayon wrapper contrast

[andypbrowne]

Summary

Consolidates all in-progress site improvements into a single feature branch:

1. Mobile SVG performance — deduplicate crayon SVGs to reduce homepage HTML size
2. Crayon wrapper contrast — derive wrapper color from crayon tip color at WCAG 3:1 contrast

This replaces the separate PRs for mobile SVG performance and crayon wrapper contrast.

Mobile SVG performance

The homepage was shipping 120 full inline SVGs (~406 KB of HTML), each with duplicate path data and an expensive feMorphology filter. That combination is especially slow on mobile browsers.

This reduces the homepage HTML to ~91 KB (~77% smaller) while keeping the same crayon visuals.

• Shared SVG sprite — static crayon artwork lives in one <symbol>; each crayon uses a lightweight <use> reference plus its color path
• Removed SVG filters — dropped the inner-shadow filter chain that was forcing 120 separate GPU filter passes
• HTML labels — crayon names render as positioned text instead of 120 SVG <text> nodes
• Scroll performance — content-visibility: auto on list items so off-screen crayons skip layout/paint until scrolled into view

Metric	Before	After
Homepage HTML size	~406 KB	~91 KB
SVG filter definitions	120	0
Duplicate path data	120×	1× (shared sprite)

Crayon wrapper contrast

Each crayon wrapper is no longer a generic gray (#D9D9D9). The wrapper color is computed from the crayon tip color at build time:

• Light crayons get a darker wrapper

• Dark crayons get a lighter wrapper

• Target contrast ratio: WCAG 3:1 (the standard for graphical UI components)

• Added utils/crayon-wrapper-color.js with WCAG relative luminance and contrast calculations

• Added an Eleventy crayonWrapper filter

• Moved the wrapper body path out of the shared sprite and into each per-crayon SVG with {{ crayon.hex | crayonWrapper }}

Test plan

• Build passes (npm run build)
• Homepage crayons render correctly on desktop
• Homepage crayons render correctly on mobile (Safari iOS / Chrome Android)
• Copy hex button still works
• Sort and palette filters still work
• Wrapper colors meet 3:1 contrast against crayon tip colors