diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
index 795a2ad..d5ce364 100644
--- a/components/ThemeProvider.tsx
+++ b/components/ThemeProvider.tsx
@@ -161,13 +161,20 @@ export function ThemeProvider({
   );
 
   // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
-  // Tailwind preflight resets h1..h6 to font-family: inherit, which would
-  // make headings pick up the body font. We override that here using the
-  // `--font-header` CSS var ThemeProvider sets per-page.
+  // Body font is set on `body` once and inherited by descendants (span, a,
+  // p, li, etc. don't need explicit rules — applying one to `span/a` would
+  // break heading children, anchors inside headings, and any element using
+  // `as="span"` to render a heading variant).
+  // Form controls have user-agent defaults, so they need an explicit override.
+  // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore
+  // the heading font + weight here using the per-page CSS vars.
   const css = `
-    body, p, span, a, li, button, input, textarea, select {
+    body {
       font-family: var(--font-body), system-ui, -apple-system, sans-serif;
     }
+    button, input, textarea, select {
+      font-family: inherit;
+    }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-header), system-ui, -apple-system, sans-serif;
       font-weight: var(--font-weight-header, 600);