Fix hero name animation: z-index and font size

- Add `isolate` to section + `-z-10` to SVG so background text renders
  behind in-flow content (abs-positioned elements paint over in-flow
  by default without an explicit stacking context)
- Reduce fontSize 22vw → 15vw so "Jonathan" fits within max-w-5xl
  without clipping

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/Hero.tsx

@@ -2,12 +2,12 @@ import Link from 'next/link'
 
 export default function Hero() {
   return (
-    <section className="relative overflow-hidden mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+    <section className="relative isolate overflow-hidden mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
 
       {/* Background name — outline fills in on load */}
       <svg
         aria-hidden="true"
-        className="pointer-events-none absolute inset-0 h-full w-full"
+        className="pointer-events-none absolute inset-0 -z-10 h-full w-full"
         preserveAspectRatio="xMidYMid meet"
       >
         <text
@@ -16,7 +16,7 @@ export default function Hero() {
           textAnchor="middle"
           dominantBaseline="middle"
           fontFamily="var(--font-geist-sans), sans-serif"
-          fontSize="22vw"
+          fontSize="15vw"
           fontWeight="700"
           strokeWidth="1"
           className="name-outline-fill"