:root { /* Site typeface (loaded in Favicon.astro). Both variables resolve to the same stack so the whole site (brand, nav, captions, body) shares one typeface. */ --font-body: 'Spectral', 'Times New Roman', serif; --font-receipt: 'Spectral', 'Times New Roman', serif; /* Page background — pale warm with a faint pink undertone; picked by blind a/f swatch test, July 2026. The dust texture below sits on top of it. Every page reads this variable, so this is the one knob for trying a new ground. (Tried and pulled: clay #e4d3cc, ivory #faf5e8, grey-ish #faf9f6, pure #fff.) */ --paper: #f9f3ee; --text: #1c1a18; --text-muted: #2a2723; --text-faint: #8a8578; } /* White + dust texture live on (and the root background-color) so iOS Safari's overscroll / "rubber-band" area above the header and below the footer shows the texture too — no white gaps when you pull past the ends. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100%; background-color: var(--paper); background-image: url('/icons/dust.webp'); background-size: 400px 300px; /* Stop iOS Safari's rubber-band overscroll, which reveals bare white bands above/below the page (the dust image never paints that region). */ overscroll-behavior: none; } body { font-family: var(--font-body); color: var(--text); min-height: 100vh; /* background comes from above so it fills the whole scroll area */ background: transparent; overscroll-behavior: none; } a { color: inherit; }