diff --git a/templates/case-study.html b/templates/case-study.html
index 3e604ee..3614aa8 100644
--- a/templates/case-study.html
+++ b/templates/case-study.html
@@ -94,7 +94,7 @@
.body p+p{margin-top:var(--s3)}
.body h3{margin-top:var(--s5);font-size:1.0625rem}
.body h3:first-child{margin-top:0}
-.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s6);
+.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--s6);
margin-top:var(--s6)}
.snag{padding:var(--s5);border:1px solid var(--rust-line);border-radius:.75rem;
background:var(--rust-soft)}
@@ -143,7 +143,16 @@
.kicker blockquote{font-size:1.0625rem}
.two{gap:var(--s5)}
.body p,.next li,.snag>p{line-height:1.45}
+}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */
+@media (max-width:23rem){
+ :root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem}
+ body{padding-inline:var(--s3)}
+ .snag,.kicker{padding:var(--s3)}
+ .ledger tbody tr{padding-block:var(--s2)}
+ .next li+li{margin-top:var(--s1)}
+ .colophon{margin-top:var(--s4);padding-top:var(--s2)}
}
+
diff --git a/templates/metrics-dashboard.html b/templates/metrics-dashboard.html
index 39fe9c6..4346044 100644
--- a/templates/metrics-dashboard.html
+++ b/templates/metrics-dashboard.html
@@ -99,7 +99,7 @@
margin-top:var(--s2);color:var(--subtle);font-size:.8125rem}
/* PANELS */
-.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--s4);
+.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:var(--s4);
margin-top:var(--s4);align-items:start}
.panel{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.panel>h2{font-size:1rem}
diff --git a/templates/postmortem.html b/templates/postmortem.html
index 4d268c8..cb9e5b2 100644
--- a/templates/postmortem.html
+++ b/templates/postmortem.html
@@ -6,19 +6,17 @@
Checkout was unavailable for 3 hours 47 minutes on 12 September
diff --git a/templates/project-status.html b/templates/project-status.html
index a6b40a7..a3341de 100644
--- a/templates/project-status.html
+++ b/templates/project-status.html
@@ -105,7 +105,7 @@
.rail li.risk .rail__s{color:var(--warn)}
/* SCOPE METERS */
-.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s5);
+.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--s5);
margin-top:var(--s4)}
.m__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.m__label{font-size:.875rem}
@@ -175,7 +175,17 @@
.ask__who{margin-top:var(--s2)}
.ask__n{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
+}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */
+@media (max-width:23rem){
+ :root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem}
+ body{padding-inline:var(--s3)}
+ .verdict{padding:var(--s3)}
+ .blk li{padding-block:var(--s2);padding-inline:var(--s3)}
+ .ask li{padding-block:var(--s2)}
+ .rail li{padding-bottom:var(--s1)}
+ .colophon{margin-top:var(--s4);padding-top:var(--s2)}
}
+
diff --git a/templates/report.html b/templates/report.html
index e11f689..85b098f 100644
--- a/templates/report.html
+++ b/templates/report.html
@@ -136,6 +136,15 @@
.next,.colophon{max-width:40rem}
}
@media (max-width:44rem){
+ /* the band is one column from here down, so the compact SPACING scale starts here rather
+ than at 30rem — restoring desktop spacing inside a still-narrow sheet is what made this
+ document taller at 490px than at 390px. Type stays full until 30rem. */
+ :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.25rem;--s7:1.375rem}
+ .sec{margin-top:var(--s6)}
+ .sec>p,.sec>h3+p{margin-top:var(--s3)}
+ .next{padding-top:var(--s5)}
+ .steps li{padding-block:var(--s3)}
+ .list li+li{margin-top:var(--s2)}
.lede{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.quarter{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:var(--s4);
padding-left:0;padding-top:var(--s4);border-left:0;border-top:1px solid var(--line2)}
@@ -161,7 +170,24 @@
.sec>p,.sec>h3+p{margin-top:var(--s3)}
.list li,.steps p,.lede p{line-height:1.42}
.colophon{margin-top:var(--s5);padding-top:var(--s3)}
+}/* Below ~360px the sheet wraps hard. Tighten spacing and return measure to the column;
+ line-height is left alone — 1.5 is the WCAG 1.4.12 baseline and leading is the wrong
+ thing to spend on a height budget. */
+@media (max-width:23rem){
+ :root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:1rem;--s7:1.125rem}
+ .paper{padding-inline:var(--s2)}
+ .steps li{padding-block:var(--s2)}
+ .list li+li{margin-top:var(--s1)}
+ .next{padding-top:var(--s4)}
+ .colophon{margin-top:var(--s4);padding-top:var(--s3)}
+ .chart{padding:var(--s3)}
+ .lede{margin-top:var(--s4);gap:var(--s4)}
+ .quarter{gap:var(--s3);padding-top:var(--s3)}
+ .pull{margin:var(--s5) 0;padding-left:var(--s4)}
+ .sec{margin-top:var(--s5)}
+ .bars div+div{margin-top:var(--s3)}
}
+
diff --git a/templates/research-brief.html b/templates/research-brief.html
index 484c3bd..315fe8b 100644
--- a/templates/research-brief.html
+++ b/templates/research-brief.html
@@ -102,7 +102,7 @@
margin-top:.15rem}
/* CLOSERS */
-.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s5);
+.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--s5);
margin-top:var(--s7);padding-top:var(--s5);border-top:2px solid var(--ink)}
.closers h2{font-size:1.1875rem}
.bul{margin-top:var(--s4)}
@@ -115,39 +115,66 @@
color:var(--subtle);font-size:.8125rem;line-height:1.55}
@media (max-width:62rem){
- .cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
- .rail{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
-}
-@media (max-width:34rem){
+ /* One column from here down, so the compact SPACING scale applies from here down too —
+ not from 34rem. Restoring desktop spacing while the layout is still a single narrow
+ column is what made this document taller at 550px than at 390px. Type is not touched
+ here; that stays in the 34rem block where the measure actually needs it. */
:root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.125rem;--s7:1.25rem;--s8:1.5rem}
- body{padding:var(--s5) var(--s4) var(--s8);font-size:.9375rem;line-height:1.46}
- .q{line-height:1.1}
+ .cols{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
+ .rail{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
+ body{padding:var(--s5) var(--s4) var(--s8)}
.mast{padding-bottom:var(--s4)}
- .meta{margin-top:var(--s4);gap:var(--s1) var(--s4)}
+ .meta{margin-top:var(--s4)}
.answer{padding:var(--s4)}
- .answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34}
.answer p+p{margin-top:var(--s2)}
- .cols{margin-top:var(--s5);gap:var(--s5)}
.h-sec{padding-bottom:var(--s1)}
- .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36}
- .ev__n{padding-top:.1rem}
- .ev h3{font-size:1rem;line-height:1.16}
.ev p{margin-top:var(--s1)}
- .ev li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s3)}
+ .ev li{padding-bottom:var(--s3)}
.ev li+li{padding-top:var(--s3)}
.cite{margin-top:var(--s2)}
.card{padding:var(--s4)}
.card>p{margin-top:var(--s2)}
- .conf{line-height:1.2}
.scale{margin-top:var(--s2)}
.srcs li+li{margin-top:var(--s2);padding-top:var(--s2)}
- /* the rail stops being a rail: confidence and method pair up, sources runs full width */
- .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
- .rail>section:nth-child(2){grid-column:1/-1;order:1}
.closers{margin-top:var(--s5);padding-top:var(--s3);gap:var(--s4)}
.bul li+li{margin-top:var(--s2)}
.colophon{margin-top:var(--s5);padding-top:var(--s3)}
}
+@media (max-width:34rem){
+ body{font-size:.9375rem;line-height:1.46}
+ .q{line-height:1.1}
+ .meta{gap:var(--s1) var(--s4)}
+ .answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34}
+ .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36}
+ .ev__n{padding-top:.1rem}
+ .ev h3{font-size:1rem;line-height:1.16}
+ .ev li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3)}
+ .conf{line-height:1.2}
+ /* the rail stops being a rail: confidence and method pair up, sources runs full width */
+ .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
+ .rail>section:nth-child(2){grid-column:1/-1;order:1}
+}/* Below ~360px the single column wraps hard and the page grows again. Tighten the SPACING
+ scale only — line-height stays at 1.46/1.36, because 1.5 is the WCAG 1.4.12 baseline and
+ compressing leading to hit a height budget is the wrong trade. */
+@media (max-width:23rem){
+ :root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:.875rem;--s7:1rem;--s8:1.125rem}
+ /* at this width the height is WRAPPING, not spacing — narrowing the side gutters returns
+ 16px of measure to every paragraph, which buys more than another spacing cut does */
+ body{padding-inline:var(--s3)}
+ /* Measured, not assumed: unpairing the rail here makes the page TALLER (2,983 -> 3,023),
+ so the pairing stays. The saving at this width is in the evidence gutter instead. */
+ .ev li{grid-template-columns:1.5rem minmax(0,1fr);padding-bottom:var(--s2)}
+ .ev li+li{padding-top:var(--s2)}
+ .ev__n{font-size:.75rem}
+ .mast{padding-bottom:var(--s3)}
+ .answer{padding:var(--s3) var(--s4)}
+ .card{padding:var(--s3) var(--s4)}
+ .srcs li+li{margin-top:var(--s1);padding-top:var(--s1)}
+ .closers{margin-top:var(--s4);padding-top:var(--s2);gap:var(--s3)}
+ .bul li+li{margin-top:var(--s1)}
+ .colophon{margin-top:var(--s4);padding-top:var(--s2)}
+}
+
diff --git a/templates/service-health.html b/templates/service-health.html
index 123577f..e0a9efc 100644
--- a/templates/service-health.html
+++ b/templates/service-health.html
@@ -6,25 +6,23 @@
Every service met its objective and the error budget is 71% gone