From ae1f1ab71be28b4252d57c393cd36d26423198fb Mon Sep 17 00:00:00 2001
From: pat <sinachpat@gmail.com>
Date: Tue, 1 Sep 2026 03:49:17 +0000
Subject: [PATCH] fix(reader): use full chapter width with workflow rail

---
 marketing-site/styles/globals.css | 81 ++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 6 deletions(-)

diff --git a/marketing-site/styles/globals.css b/marketing-site/styles/globals.css
index 4ebd4c2..4695729 100644
--- a/marketing-site/styles/globals.css
+++ b/marketing-site/styles/globals.css
@@ -422,8 +422,8 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 @media (max-width: 600px) { .foot-in { padding: 48px 20px 40px; } }
 
 /* ============ READER DEMO ============ */
-/* Layout the landing page does not already have. Same tokens, same 1080px wrap,
-   same ~20px cards and 999px pills. Do not restyle the homepage recipe. */
+/* Layout the landing page does not already have. Reader pages use a wider wrap.
+   Same tokens, same ~20px cards and 999px pills. Do not restyle the homepage recipe. */
 
 .demo-chip {
   display: inline-flex; align-items: center; gap: 8px;
@@ -436,6 +436,13 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
   margin-bottom: 22px;
 }
 
+
+.reader-nav .nav-in,
+.reader-footer .foot-in,
+.wrap.reader-wide {
+  max-width: min(1520px, calc(100vw - 40px));
+}
+
 .reader-nav .reader-links { gap: 22px; }
 .reader-nav .nav-current {
   font-size: 14.5px; font-weight: 600; color: var(--color-ink);
@@ -456,15 +463,21 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 .chapter-shell {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
-  gap: 40px;
+  gap: 32px 40px;
   align-items: start;
 }
+@media (min-width: 1080px) {
+  .chapter-shell {
+    grid-template-columns: 240px minmax(0, 1fr) 280px;
+  }
+}
 .chapter-col { min-width: 0; }
 .chapter-kicker { margin: 8px 0 14px; }
 .chapter-title {
   font-family: var(--font-display); font-weight: 900;
   font-size: clamp(2.1rem, 4.6vw, 3.4rem);
   letter-spacing: -0.028em; line-height: 1.02; margin: 0 0 12px;
+  max-width: 22ch;
 }
 .chapter-by {
   font-family: var(--font-mono); font-size: 12.5px; color: var(--color-muted);
@@ -472,6 +485,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 }
 .chapter-promise {
   font-size: 1.12rem; line-height: 1.62; color: var(--color-ink); margin: 0 0 28px;
+  max-width: 46rem;
 }
 
 .chapter-outline {
@@ -512,6 +526,53 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
   font-family: var(--font-mono); font-size: 12px; color: var(--color-pine); flex: none;
 }
 
+
+.chapter-rail {
+  position: sticky;
+  top: 84px;
+  align-self: start;
+  display: none;
+}
+@media (min-width: 1080px) {
+  .chapter-rail { display: block; }
+}
+.chapter-rail .spec { margin: 0 0 14px; }
+.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.rail-card {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 16px 18px;
+  background: var(--color-card);
+  border: 1px solid var(--color-line);
+  border-radius: 16px;
+  box-shadow: var(--sh-sm);
+  transition: border-color 0.18s, transform 0.14s var(--ease), box-shadow 0.18s;
+}
+.rail-card:hover {
+  border-color: var(--color-pine-tint);
+  transform: translateY(-1px);
+  box-shadow: var(--sh-md);
+}
+.rail-card.is-done { border-color: var(--color-pine-tint); background: var(--color-pine-wash); }
+.rail-kicker {
+  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--color-pine);
+}
+.rail-title {
+  font-family: var(--font-display); font-weight: 600;
+  font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2;
+  color: var(--color-ink);
+}
+.rail-meta {
+  font-family: var(--font-mono); font-size: 12px; color: var(--color-muted);
+  letter-spacing: 0.02em;
+}
+.rail-skip {
+  display: inline-block; margin-top: 16px;
+  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
+  color: var(--color-pine);
+}
+.rail-skip:hover { color: var(--color-pine-deep); }
+
 .chapter-outline-mobile {
   margin: 0 0 24px;
   padding: 10px 16px 12px;
@@ -530,10 +591,17 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 .chapter-outline-mobile .outline-progress { margin-top: 4px; }
 
 .chapter-map {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 40px;
   margin: 0 0 8px;
   padding: 18px 0 6px;
   border-top: 1px solid var(--color-line);
 }
+.chapter-map-title { grid-column: 1 / -1; }
+@media (max-width: 720px) {
+  .chapter-map { grid-template-columns: 1fr; }
+}
 .chapter-map-title {
   font-family: var(--font-display); font-weight: 600;
   font-size: 1.2rem; letter-spacing: -0.02em;
@@ -579,7 +647,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
   scroll-margin-top: 88px;
 }
 
-.essay { margin: 0 0 36px; }
+.essay { margin: 0 0 36px; max-width: 46rem; }
 .essay h2 {
   font-family: var(--font-display); font-weight: 600;
   font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.2;
@@ -689,7 +757,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 
 .recipe-focus-page { padding: 40px 0 96px; }
 .recipe-focus-page .demo-chip { margin-bottom: 12px; }
-.recipe-focus-page .recipe { max-width: 42rem; }
+.recipe-focus-page .recipe { max-width: none; }
 .focus-back {
   font-family: var(--font-mono); font-size: 13px; color: var(--color-muted);
   margin: 0 0 28px;
@@ -699,13 +767,14 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 @media (max-width: 959px) {
   .chapter-shell { grid-template-columns: 1fr; gap: 0; }
   .chapter-outline { display: none; }
+  .chapter-rail { display: none; }
 }
 @media (min-width: 960px) {
   .chapter-outline-mobile { display: none; }
 }
 
 @media print {
-  .reader-nav, .chapter-outline, .chapter-outline-mobile, .reader-footer, .skip-row, .tryit-actions, .demo-chip, .recipe-jump {
+  .reader-nav, .chapter-outline, .chapter-outline-mobile, .chapter-rail, .reader-footer, .skip-row, .tryit-actions, .demo-chip, .recipe-jump {
     display: none !important;
   }
   .recipe-nested { break-inside: avoid; box-shadow: none; }