fix(ship): P1 complete — theme CSS (REQ-254,255,256)

---ci---
project: acdl
phase: 1
milestone: v1.22
status: complete
phase_role: execution
---/ci---

.ciagent/CHECKPOINT.json

@@ -1,12 +1,12 @@
 {
   "phase": 0,
-  "stage": "plan",
+  "stage": "complete",
   "milestone": "v1.22",
   "phase_role": "pre_execution",
   "attempts": 0,
-  "updated_at": "2026-08-11T14:38:00Z",
+  "updated_at": "2026-08-11T14:40:00Z",
   "milestone_complete": false,
-  "tag": null,
+  "tag": "v1.21.0",
   "requirements": ["REQ-254","REQ-255","REQ-256","REQ-257","REQ-258","REQ-259","REQ-260","REQ-261","REQ-262"],
-  "notes": "v1.22 PLAN complete. 7 phases, 4 waves. Plan persisted to PLAN.md. Tags on v1.21.x line."
+  "notes": "v1.22 P0 complete. Tag v1.21.0. Merged phase/00 -> milestone/v1.22-deck-layout-fix. Release creation failed (local-only fallback). Phase branch deleted. Proceeding to P1 (theme CSS)."
 }

docs/presentations/assets/nova-sp-theme.css

@@ -4,9 +4,18 @@
  * Palette: S&P Red (#D6002A), Black (#1B1B1B), White (#FFFFFF), Grey (#F0F0F0).
  * Font: Akkurat Pro (fallback Helvetica Neue / Arial).
  *
- * This theme extends Marp's default and applies the S&P palette to ALL slide
- * chrome — backgrounds, headers/footers, pagination, tables, blockquotes,
- * code blocks — not just headings.
+ * This theme is a STANDALONE stylesheet (applied via `marp --theme
+ * nova-sp-theme.css`). It does NOT `@import "default"` because Marp's
+ * default theme applies `padding: 56px 64px` (which does not reserve
+ * header/footer space) and other base styles (font, color, list spacing)
+ * that would conflict with the S&P palette. Instead, this theme sets
+ * the padding explicitly: 48px top (reserves header space), 40px bottom
+ * (reserves footer space), 56px sides. This gives precise control over
+ * the padding budget. (GRILL revision 2 — @import rejection documented.)
+ *
+ * v1.22 (REQ-254,255,256): added section padding + overflow handling,
+ * aspect-ratio-aware image rules, title-slide chrome suppression,
+ * paragraph/list/table spacing tightening.
  */
 
 :root {
@@ -17,12 +26,17 @@
   --sp-dark-grey: #2E2E2E;
 }
 
-/* Base section */
+/* Base section — padding reserves header (top) + footer (bottom) space.
+ * REQ-254: zero padding was the root cause of "out of whack" layout.
+ * 48px top reserves header chrome; 40px bottom reserves footer chrome;
+ * 56px sides give breathing room. */
 section {
   font-family: "Akkurat Pro", "Helvetica Neue", "Arial", sans-serif;
   font-size: 22px;
   color: var(--sp-black);
   background: var(--sp-white);
+  padding: 48px 56px 40px;
+  overflow: auto;
 }
 
 /* Headings — S&P Red */
@@ -31,6 +45,12 @@ h2 { color: var(--sp-red); font-size: 26px; margin-bottom: 0.2em; }
 h3 { color: var(--sp-red); font-size: 22px; margin-bottom: 0.2em; }
 h4 { color: var(--sp-dark-grey); font-size: 20px; margin-bottom: 0.15em; }
 
+/* REQ-256: tighten h2 + lead-paragraph spacing (the deck's recurring
+ * `## Slide N — Title` + `**bold lead**` pattern). Default <p> margins
+ * waste ~44px per slide; this reclaims ~22px. */
+section h2 + p { margin-top: 0.2em; }
+section p { margin: 0.4em 0; }
+
 /* Title slides — black background, red top border */
 section.title {
   background: var(--sp-black);
@@ -40,6 +60,12 @@ section.title {
 section.title h1 { color: var(--sp-white); }
 section.title h2 { color: var(--sp-white); }
 
+/* REQ-256: suppress header/footer chrome on title slides. The
+ * `<!-- _class: title -->` + `<!-- _paginate: false -->` directives
+ * only suppress the page number, not the chrome. This prevents the
+ * header/footer from colliding with title/appendix content. */
+section.title header, section.title footer { display: none; }
+
 /* Tables — grey header with red underline, explicit white body for readability on any background */
 table { font-size: 18px; width: 100%; border-collapse: collapse; background: var(--sp-white); }
 th { background: var(--sp-grey); border-bottom: 2px solid var(--sp-red); padding: 6px 10px; text-align: left; }
@@ -49,6 +75,12 @@ section.title table, section table { background: var(--sp-white); }
 section.title td, section td { background: var(--sp-white); color: var(--sp-black); }
 section.title th, section th { background: var(--sp-grey); color: var(--sp-black); }
 
+/* REQ-256: dense tables (≥8 rows) use tighter cell padding so 10-13 row
+ * tables (slides 8, 12, A1) fit. Apply via `table.dense` class in the
+ * marp deck. */
+table.dense td, table.dense th { padding: 4px 8px; }
+table.dense { font-size: 16px; }
+
 /* Blockquotes — red left border */
 blockquote { border-left: 4px solid var(--sp-red); color: var(--sp-dark-grey); font-size: 20px; padding-left: 12px; }
 
@@ -57,8 +89,18 @@ pre { background: var(--sp-black); color: var(--sp-white); border-radius: 4px; p
 code { background: var(--sp-grey); color: var(--sp-black); border-radius: 2px; padding: 1px 4px; font-size: 18px; }
 pre code { background: transparent; color: inherit; }
 
-/* Images — centered, max height */
-img { display: block; margin: 0 auto; max-height: 320px; }
+/* REQ-255: aspect-ratio-aware image rules. The blunt `max-height: 320px`
+ * broke `w:` directives on tall images (slide 9) and did nothing for
+ * ultra-wide images (slide 6). The new rule uses `object-fit: contain`
+ * and `max-width: 100%` so images scale within the content area without
+ * ignoring explicit `w:`/`h:` directives. */
+img { display: block; margin: 0 auto; max-width: 100%; max-height: 380px; object-fit: contain; }
+/* Wide diagrams (ultra-wide aspect): tighter max-height so they don't
+ * render as a thin strip. Apply via `![w:1000 class:wide]` — or rely on
+ * the default max-height which is already tighter. */
+img.wide { max-height: 280px; }
+/* Tall diagrams: more vertical room. Apply via `![h:480 class:tall]`. */
+img.tall { max-height: 480px; }
 
 /* Header/footer — subtle grey */
 header { color: var(--sp-dark-grey); border-bottom: 1px solid var(--sp-grey); }
@@ -73,9 +115,17 @@ footer { color: var(--sp-dark-grey); border-top: 1px solid var(--sp-grey); }
 .bespoke-progress-parent { background: var(--sp-grey); }
 .bespoke-progress-bar { background: var(--sp-red) !important; }
 
-/* Lists — tighter */
+/* Lists — tighter. REQ-256: add ol styling (match ul). */
 ul { margin-top: 0.3em; }
+ol { margin-top: 0.3em; }
 li { margin-bottom: 0.2em; }
 
 /* Strong — S&P Red for emphasis in lead lines */
 strong { color: var(--sp-red); }
+
+/* REQ-256: PPTX export fidelity — no scrollbars in exported slides.
+ * The `overflow: auto` above is an authoring-time signal; in print/PPTX
+ * we clamp to `hidden` so the exported slide is clean. */
+@media print {
+  section { overflow: hidden; }
+}