Move structural breakpoint to 640px, shorten Hero heading

Tablet layout (768-1023px) hit the md: grid switch exactly where the
fluid clamp() tokens were already at their floor, leaving no room to
shrink. Moves the fluid floor and structural breakpoint down together
to sm: (640px) so real tablets always get the fluid, desktop-like
structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/
Newsletter/Footer/Tools back onto one line, leaving documented lg:
exceptions where content genuinely doesn't fit yet. Also shortens the
Hero heading to a single sentence with no trailing period (the brand's
orange dot already renders one, animated).

app/components/About.tsx

@@ -3,19 +3,20 @@ import { Reveal } from "./Reveal";
 
 export function About() {
   return (
-    <section id="ueber-bjoern" className="bg-bg-dark flex flex-col md:flex-row md:items-stretch w-full">
+    <section id="ueber-bjoern" className="bg-bg-dark flex flex-col sm:flex-row sm:items-stretch w-full">
 
       {/* Text content — relative + z-10 so it renders above the overlapping
-          photo at lg+. Comes first in DOM at every breakpoint (no reorder
-          here — unlike Hero, there's no conversion CTA at stake).
-          md:flex-[1.4_0_0] lg:flex-[1_0_0] — at Tablet the text column got
-          the narrower 1:1.4 share meant for Desktop's overlap layout,
-          leaving it too cramped for the fixed-width statement + quote/bio
-          row. Widened at Tablet (text gets the bigger share, image the
-          smaller one, no overlap yet) and reverted to the original ratio
-          from lg: up, where the overlap trick actually needs the image to
-          have more room. */}
-      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 md:flex-[1.4_0_0] lg:flex-[1_0_0] min-w-0 relative z-10">
+          photo from sm+. Comes first in DOM at every breakpoint (no
+          reorder here — unlike Hero, there's no conversion CTA at stake).
+          Used to be md:flex-[1.4_0_0] lg:flex-[1_0_0]: a two-step ratio
+          where Tablet got a wider, non-overlap-ready share and only
+          reverted to the real 1:1.4 Desktop ratio at lg: — that in-between
+          step existed purely to compensate for the grid arriving (at the
+          old md: 768px) before the fluid tokens had room to shrink.
+          Now the grid itself starts at sm: (640px), aligned with the
+          fluid floor, so the single real ratio applies from sm: up
+          directly — no intermediate step needed. */}
+      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1_0_0] min-w-0 relative z-10">
 
         {/* Large serif statement — width-constrained as per design */}
         <p
@@ -26,11 +27,13 @@ export function About() {
         </p>
 
         {/* Quote row: script quote / divider / author bio — side-by-side
-            from lg: (was md:) — even with the text column's wider Tablet
-            share above, quote + divider + the whitespace-nowrap bio ("Gründer
-            von einfach-produktiv.") together still needed more room than
-            Tablet's ~384px column has. Stacked with a horizontal divider
-            through the whole Tablet range instead, side-by-side (vertical
+            only from lg: (1024px), a deliberate exception to the site's
+            sm: (640px) structural consolidation: quote + divider + the
+            whitespace-nowrap bio ("Gründer von einfach-produktiv.")
+            together need more room than the sm:-anchored text column has
+            through the whole 640-1023px range, independent of the outer
+            text/image ratio above. Stacked with a horizontal divider
+            through that whole range instead, side-by-side (vertical
             divider) only once there's real room at lg:. */}
         <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 lg:gap-0 w-full">
 
@@ -80,13 +83,14 @@ export function About() {
         </div>
       </Reveal>
 
-      {/* Author photo — overlaps the text column via -ml-48 from lg+ only
-          (that overlap trick has nothing to blend into once stacked, and
-          at Tablet it would eat back into the extra width the text column
-          above just gained); plain full-width photo below the text on
-          Mobile, plain side-by-side (no overlap) at Tablet. */}
+      {/* Author photo — overlaps the text column via -ml-48 from sm+ now
+          (moved down together with the ratio collapse above — the overlap
+          trick and the 1:1.4 share are the same Desktop-style treatment,
+          previously gated behind the extra lg: step for the same reason
+          the ratio was, so both move together); plain full-width photo
+          below the text on true Mobile only. */}
       <Reveal
-        className="relative overflow-hidden w-full md:flex-[1_0_0] lg:flex-[1.4_0_0] lg:-ml-48"
+        className="relative overflow-hidden w-full sm:flex-[1.4_0_0] sm:-ml-48"
         style={{ minHeight: "14rem" }}
         delay={0.15}
       >
@@ -94,11 +98,11 @@ export function About() {
           alt="Björn"
           src="/about-author.jpg"
           fill
-          sizes="(min-width: 1024px) 58vw, (min-width: 768px) 42vw, 100vw"
+          sizes="(min-width: 640px) 58vw, 100vw"
           className="object-cover object-center pointer-events-none"
         />
-        {/* Left gradient: wide enough to cover the text-column overlap — lg+ only */}
-        <div className="hidden lg:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
+        {/* Left gradient: wide enough to cover the text-column overlap — moved to sm+ with the overlap itself */}
+        <div className="hidden sm:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
       </Reveal>
 
     </section>