hero: oversized stacked display type

components/portfolio/Hero.tsx

@@ -16,6 +16,15 @@ function openCommandPalette() {
 
 export function Hero() {
   const shouldReduceMotion = useReducedMotion();
+  const headingFragments = hero.heading
+    .split(". ")
+    .map((fragment, index, fragments) => {
+      if (index < fragments.length - 1 && !fragment.endsWith(".")) {
+        return `${fragment}.`;
+      }
+
+      return fragment;
+    });
 
   return (
     <section
@@ -38,12 +47,16 @@ export function Hero() {
 
         <h1
           id="hero-heading"
-          className="max-w-6xl font-display text-[clamp(64px,10vw,140px)] leading-[0.92] tracking-[-0.06em] text-balance text-blacksite-text"
+          className="max-w-6xl font-display text-[clamp(3rem,9vw,7.5rem)] font-medium leading-[0.92] tracking-[-0.05em] text-balance text-blacksite-text"
         >
-          {hero.heading}
+          {headingFragments.map((fragment) => (
+            <span key={fragment} className="block">
+              {fragment}
+            </span>
+          ))}
         </h1>
 
-        <p className="mt-8 max-w-2xl text-lg leading-8 text-blacksite-muted sm:text-xl">
+        <p className="mt-6 max-w-2xl font-mono text-sm leading-7 text-blacksite-muted sm:text-base">
           {hero.subline}
         </p>
 
@@ -63,7 +76,7 @@ export function Hero() {
             onClick={openCommandPalette}
             className="inline-flex items-center justify-center border border-blacksite-line bg-blacksite-bg2/85 px-6 py-3 font-mono text-xs uppercase tracking-[0.16em] text-blacksite-muted transition-colors hover:border-signal-orange hover:text-blacksite-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal-orange"
           >
-            Open Command Palette
+            ⌘K
           </button>
         </div>
       </m.div>