From 0b8c37424b00feb359051c2323ee0457721e667c Mon Sep 17 00:00:00 2001
From: CRHQ <noreply@crhq.ai>
Date: Sat, 5 Sep 2026 17:40:38 +0000
Subject: [PATCH] fix(launch-announcement): make spacing fluid so it does not
 step where the layout holds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `@media (min-width: 48rem)` block declared only spacing — `padding-inline`
on `.wrap`, `padding-block` on `section` and `.hero` — and nothing structural.
A reader at 768px therefore received a measure set for a layout they did not
have: `section` padding jumped 0.62rem to 2.6rem, a 4x step, while the grid was
identical either side. Height stepped 377px across a single pixel of width.

The three values are now `clamp()`, matching the fluid `font-size` idiom already
used elsewhere in this template. The ramp is anchored so that 390px clamps to the
original floor and 768px reaches the original ceiling exactly, so both sampled
widths are byte-for-byte unchanged in output and only the band between them —
the band that carried the defect — is affected. The spacing-only breakpoint is
removed; the three remaining boundaries all declare layout.

Nothing was deleted, no line-height was compressed, no structural element removed.

  heights   390: 2838 -> 2838   768: 2601 -> 2601   1440: 2128 -> 2128
  boundary  767->768 step 377px -> 1px
  overflow  0 at all 201 widths sampled from 320 to 1920

Co-Authored-By: CRHQ <noreply@crhq.ai>
---
 templates/launch-announcement.html | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/templates/launch-announcement.html b/templates/launch-announcement.html
index e1de191..fb5b9a0 100644
--- a/templates/launch-announcement.html
+++ b/templates/launch-announcement.html
@@ -68,15 +68,16 @@
       .wrap {
         max-width: 60rem;
         margin-inline: auto;
-        padding-inline: 1.25rem;
+        padding-inline: clamp(1.25rem, -0.053rem + 5.319vw, 2.5rem);
       }
-      section { padding-block: 0.62rem; }
+      section { padding-block: clamp(0.62rem, -1.444rem + 8.426vw, 2.6rem); }
 
       /* MASTHEAD --------------------------------------------------------- */
       .hero {
         background: var(--dark);
         color: #ffffff;
-        padding-block: 1.5rem 1.15rem;
+        padding-block: clamp(1.5rem, -1.106rem + 10.638vw, 4rem)
+          clamp(1.15rem, -1.039rem + 8.936vw, 3.25rem);
       }
       .eyebrow {
         display: inline-flex;
@@ -333,11 +334,6 @@
       @media (min-width: 34rem) {
         .rows > div { grid-template-columns: 11rem 1fr; }
       }
-      @media (min-width: 48rem) {
-        .wrap { padding-inline: 2.5rem; }
-        section { padding-block: 2.6rem; }
-        .hero { padding-block: 4rem 3.25rem; }
-      }
       @media (min-width: 62rem) {
         .lead {
           display: grid;