feat: full responsive layout — mobile-first, lg breakpoint, fluid typography

Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type.

Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close,
  h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open.
Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image
  scales responsively, gradient mask via .hero-mask only at lg+ in CSS.
Divider: flex-wrap + gap-y for smaller screens.
Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight.
Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row,
  excerpt hidden on mobile secondary cards to save space.
About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo.
Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+.
Footer: flex-col→lg:flex-row, flex-wrap on legal links.
globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop.

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

app/globals.css

@@ -13,7 +13,32 @@
 }
 
 html {
-  scroll-padding-top: 6.25rem; /* navbar height */
+  scroll-padding-top: 5rem; /* mobile navbar height */
+}
+
+@media (min-width: 1024px) {
+  html {
+    scroll-padding-top: 6.25rem; /* desktop navbar height */
+  }
+}
+
+/* Hero image: gradient mask only on desktop where image is right-column */
+.hero-mask {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+@media (min-width: 1024px) {
+  .hero-mask {
+    -webkit-mask-image:
+      linear-gradient(to right, transparent 0%, black 14%),
+      linear-gradient(to bottom, transparent 0%, black 10%);
+    -webkit-mask-composite: destination-in;
+    mask-image:
+      linear-gradient(to right, transparent 0%, black 14%),
+      linear-gradient(to bottom, transparent 0%, black 10%);
+    mask-composite: intersect;
+  }
 }
 
 body {