Page goes full-bleed: drop the 1080px column cap

The 1080px cap on .container.wide / .header-inner / .banner-wrap /
.tab-lede was a holdover from when sections were single-column reading
columns: a centred narrow column flanked by big paper margins worked
fine when prose and demo were stacked vertically. With every Demo-tab
section now living in a sticky-narrative + demo grid, the demo half
was being squeezed to ~700-740px on a 1440px laptop and the UMAP
scatter / 3D folding viewers / species tree all felt cramped.

Going full bleed (max-width: none + 48px lateral padding to match the
banner gutters) lets the demos use the room they need; the 248px
sticky narrative rail caps line length on prose regardless of viewport
width, and .tab-lede p still has its 760px cap so the framing
paragraph below the banner stays readable on a 32" display.

Mobile (≤720px): all four wrappers drop their lateral padding to 16px
so the banner art and the tab strip can still breathe on a phone.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/styles/banner.css

@@ -4,9 +4,12 @@
    on a Canvas overlay positioned to mirror the original helix bbox. */
 
 .banner-wrap {
-  max-width: 1080px;
-  margin: 0 auto;
-  padding: 24px 32px 0;
+  /* Full-bleed banner: matches the page-wide layout adopted everywhere
+     else. The CARBON-0 SVG inside has a fixed aspect ratio so it
+     simply scales up; nothing breaks at 4K. */
+  max-width: none;
+  margin: 0;
+  padding: 24px 48px 0;
 }
 .carbon-banner {
   --paper: #f7f5ee;
@@ -87,6 +90,6 @@
   vector-effect: non-scaling-stroke;
 }
 .carbon-banner .cb-tiny-bars rect { fill: var(--green); }
-@media (max-width: 760px) {
+@media (max-width: 720px) {
   .banner-wrap { padding: 12px 16px 0; }
 }

assets/styles/base.css

@@ -17,7 +17,17 @@ body {
   padding: 0;
 }
 .container { max-width: 760px; margin: 0 auto; padding: 48px 32px 96px; }
-.container.wide { max-width: 1080px; }
+/* .container.wide is the wrapper for every Demo / Recipe section. We
+   used to cap it at 1080px which gave a centred reading column flanked
+   by big paper margins — fine when the demos sat under their narrative
+   in a single column, claustrophobic now that section--two-col puts
+   them side by side. Going full bleed lets the demos (UMAP scatter,
+   tree, 3D viewers) breathe; the 248px sticky narrative rail keeps the
+   line-length on prose under control regardless of viewport width. */
+.container.wide { max-width: none; padding: 48px 48px 96px; }
+@media (max-width: 720px) {
+  .container.wide { padding: 32px 16px 64px; }
+}
 
 @keyframes pulse { 50% { opacity: 0.3; } }
 

assets/styles/header.css

@@ -3,7 +3,11 @@
 
 header {
   border-bottom: 1px solid #ccc;       /* separator line under the tab strip */
-  padding: 24px 32px 0;                /* no bottom padding — tabs sit on the line */
+  /* 48px lateral padding mirrors .container.wide / .banner-wrap so the
+     CARBON title, banner edge and every section's left edge all share
+     one vertical alignment line. No bottom padding — tabs sit on the
+     border line below. */
+  padding: 24px 48px 0;
   margin-bottom: 0;
   background:
     radial-gradient(circle at 22% 32%, rgba(0, 0, 0, 0.035), transparent 1px),
@@ -17,7 +21,9 @@ header {
   will-change: transform;
 }
 .header-inner {
-  max-width: 1080px; margin: 0 auto;
+  /* Match the full-bleed page layout: header strip stretches edge to
+     edge, with title pinned left and tab strip pushed flush right. */
+  max-width: none;
   display: flex; justify-content: space-between; align-items: flex-end;
   flex-wrap: wrap; gap: 16px 32px;
 }

assets/styles/layout.css

@@ -6,13 +6,20 @@
 
 /* --- Tab lede (short narrative paragraph below the banner) --- */
 .tab-lede {
-  max-width: 1080px; margin: 4px auto 0;
-  padding: 14px 32px 0;
+  /* Full-bleed wrapper, padded to match .container.wide so the lede
+     paragraph aligns under the banner and section bodies. The
+     paragraph itself is still capped at 760px so prose stays
+     readable on a 32" monitor. */
+  max-width: none; margin: 4px 0 0;
+  padding: 14px 48px 0;
 }
 .tab-lede p {
   color: #555; font-size: 14px; line-height: 1.7;
   max-width: 760px; margin: 0;
 }
+@media (max-width: 720px) {
+  .tab-lede { padding: 12px 16px 0; }
+}
 
 /* --- Sections --- */
 section {