diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index 1270ba2..ae32db5 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -72,8 +72,8 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
   <!-- The route — desktop horizontal -->
   <div class="rr-wrap rr-desktop">
     <div class="rr-scroll" id="rr-scroll">
-      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 580px;`}>
-        <svg class="rr-path" width={layout.trackWidth} height="580" aria-hidden="true">
+      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 420px;`}>
+        <svg class="rr-path" width={layout.trackWidth} height="420" aria-hidden="true">
           <defs>
             <linearGradient id="rr-path-gradient" x1="0" y1="0" x2="1" y2="0">
               <stop offset="0" stop-color="#2a2520" stop-opacity="0.55"/>
@@ -243,12 +243,12 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
-    /* Card-half (110px) + breathing buffer (30px) so first/last dots
-       have a card-width of clear space inside the viewport when scrolled
-       to the extremes. scroll-padding makes snap-stops land cleanly. */
-    padding: 0 140px 8px;
-    scroll-padding-left: 140px;
-    scroll-padding-right: 140px;
+    /* 60px is enough for a 220px card centred under a dot 60px from
+       the edge — card extends 50px past the dot, sits inside the
+       padded container. */
+    padding: 0 60px 8px;
+    scroll-padding-left: 60px;
+    scroll-padding-right: 60px;
   }
   .rr-scroll::-webkit-scrollbar { display: none; }
   .rr-track { position: relative; }
diff --git a/src/lib/roadmap-layout.ts b/src/lib/roadmap-layout.ts
index 7dcb2d1..0c7bf15 100644
--- a/src/lib/roadmap-layout.ts
+++ b/src/lib/roadmap-layout.ts
@@ -33,7 +33,7 @@ export interface LayoutResult {
 
 export function computeRouteLayout(opts: LayoutOpts): LayoutResult {
   const minSpacing  = opts.minSpacingX  ?? 320;
-  const trackHeight = opts.trackHeight  ?? 580;
+  const trackHeight = opts.trackHeight  ?? 420;
   const amplitude   = opts.amplitude    ?? 120;
   const padding     = opts.paddingX     ?? 60;
   const midY        = trackHeight / 2;
@@ -51,11 +51,13 @@ export function computeRouteLayout(opts: LayoutOpts): LayoutResult {
     };
   }
 
-  const usableWidth = Math.max(
-    opts.viewportWidth - padding * 2,
-    (itemCount - 1) * minSpacing,
-  );
-  const trackWidth = usableWidth + padding * 2;
+  // Aim for ~80% of viewport for low item counts; data-driven minimum
+  // takes over once items × minSpacing exceeds that target (the carousel
+  // case — track extends past viewport).
+  const targetUsableWidth = opts.viewportWidth * 0.80;
+  const dataDrivenWidth   = (itemCount - 1) * minSpacing;
+  const usableWidth       = Math.max(targetUsableWidth, dataDrivenWidth);
+  const trackWidth        = usableWidth + padding * 2;
 
   const itemX: number[] = Array.from({ length: itemCount }, (_, i) =>
     itemCount === 1
diff --git a/tests/roadmap-layout.test.ts b/tests/roadmap-layout.test.ts
index 8425dd2..a4b7d5d 100644
--- a/tests/roadmap-layout.test.ts
+++ b/tests/roadmap-layout.test.ts
@@ -10,12 +10,13 @@ describe('computeRouteLayout', () => {
   it('1 item — produces a valid single-point M path on the centreline', () => {
     const out = computeRouteLayout({ itemCount: 1, viewportWidth: 1000 });
     expect(out.itemX).toHaveLength(1);
-    expect(out.midY).toBe(290); // trackHeight 580 / 2
+    expect(out.midY).toBe(210); // trackHeight 420 / 2
     expect(out.itemY).toEqual([out.midY]);
     expect(out.cardSide).toEqual(['below']);
     expect(out.pathD.startsWith('M ')).toBe(true);
     expect(out.pathD).not.toContain('C ');
-    expect(out.trackWidth).toBeGreaterThanOrEqual(1000);
+    // Target usable width = 1000 * 0.8 = 800; trackWidth = 800 + 60*2 = 920
+    expect(out.trackWidth).toBe(920);
   });
 
   it('2 items — itemX strictly increasing, cardSide alternates below/above', () => {
@@ -50,18 +51,18 @@ describe('computeRouteLayout', () => {
     expect((out.pathD.match(/C /g) ?? []).length).toBe(6);
   });
 
-  it('20 items — track expands beyond viewport, spacing respects minSpacingX', () => {
+  it('20 items — data-driven width wins over the 80% target', () => {
     const out = computeRouteLayout({ itemCount: 20, viewportWidth: 800 });
     expect(isStrictlyIncreasing(out.itemX)).toBe(true);
-    expect(out.trackWidth).toBeGreaterThan(800);
-    // With minSpacing 320 and 20 items, the route should be at least
-    // (20 - 1) * 320 + 2 * 60 = 6200px wide
-    expect(out.trackWidth).toBeGreaterThanOrEqual(6200);
+    // (20 - 1) * 320 + 60 * 2 = 6200; clearly beats 800 * 0.8 + 120 = 760.
+    expect(out.trackWidth).toBe(6200);
   });
 
-  it('trackWidth is never smaller than the viewport width', () => {
-    const out = computeRouteLayout({ itemCount: 1, viewportWidth: 2000 });
-    expect(out.trackWidth).toBeGreaterThanOrEqual(2000);
+  it('few items on a wide viewport — track ≈ 80% of viewport + padding', () => {
+    // 3 items at viewport 1400. Data-driven = 2 * 320 + 120 = 760.
+    // 80% target = 1400 * 0.8 + 120 = 1240 — should win.
+    const out = computeRouteLayout({ itemCount: 3, viewportWidth: 1400 });
+    expect(out.trackWidth).toBe(1240);
   });
 });