From 280b467273ea6d8b73e9d9236be5f1ebfd56f0d5 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Wed, 9 Sep 2026 22:54:44 -0700
Subject: [PATCH] fix(marketing): expand blog callout sooner and shorten bar

---
 .../sections/LatestPostCallout.module.css          |  2 +-
 .../marketing/sections/LatestPostCallout.tsx       | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/marketing/sections/LatestPostCallout.module.css b/src/components/marketing/sections/LatestPostCallout.module.css
index 4e49b90..4703ceb 100644
--- a/src/components/marketing/sections/LatestPostCallout.module.css
+++ b/src/components/marketing/sections/LatestPostCallout.module.css
@@ -48,7 +48,7 @@
 }
 
 .story[data-enhanced] .track {
-  height: calc(var(--post-height, 320px) + 144px);
+  height: calc(var(--post-height, 320px) + 80px);
 }
 
 .story[data-enhanced] .sticky {
diff --git a/src/components/marketing/sections/LatestPostCallout.tsx b/src/components/marketing/sections/LatestPostCallout.tsx
index 9877128..8fe694c 100644
--- a/src/components/marketing/sections/LatestPostCallout.tsx
+++ b/src/components/marketing/sections/LatestPostCallout.tsx
@@ -27,19 +27,19 @@ export function LatestPostCallout({ post }: { post: LatestPost }) {
   });
   const progress = useTransform(() => {
     const fullHeight = expandedHeight.get();
-    // The story includes the track's 144px spacing and 64px bottom padding.
-    const travel = scrollYProgress.get() * (fullHeight + 208) - 80;
-    // Follow as a pill first. Finish expanding exactly where sticky releases.
-    const t = Math.max(0, Math.min(1, (travel - 128) / (fullHeight - 32)));
+    // The story includes the track's 80px spacing and 64px bottom padding.
+    const travel = scrollYProgress.get() * (fullHeight + 144) - 80;
+    // Start after a short scroll and finish exactly where sticky releases.
+    const t = Math.max(0, Math.min(1, (travel - 48) / (fullHeight - 16)));
     const eased = t * t * (3 - 2 * t);
-    // Never let the growing top edge cross the hero: reserve at least 24px.
-    const clearance = Math.max(0, (travel - 104) / (fullHeight - 48));
+    // Grow into at most 64px of the hero's bottom padding, clear of its content.
+    const clearance = Math.max(0, (travel - 16) / (fullHeight - 48));
     return Math.min(eased, clearance, 1);
   });
   const height = useTransform(
     () => 48 + (expandedHeight.get() - 48) * progress.get(),
   );
-  const maxWidth = useTransform(progress, [0, 1], [896, 1152]);
+  const maxWidth = useTransform(progress, [0, 1], [672, 1152]);
   const pillOpacity = useTransform(progress, [0, 0.18], [1, 0]);
   const contentOpacity = useTransform(progress, [0.22, 0.72], [0, 1]);
   const contentY = useTransform(progress, [0.22, 1], [12, 0]);