fix(theme): post typography hierarchy & spacing cleanup (#7)

* fix(theme): post typography hierarchy & spacing cleanup

Restore reader hierarchy inside .post-body without breaking the
newspaper aesthetic surfaced on /introducing-autovault/:

- Split the merged .post-body h2/h3 rule. H2 stays as the editorial
  kicker (now 13px mono, rule above, --bleed); H3 becomes a Fraunces
  600 serif subhead at 1.35em with no border so the two are visibly
  distinct. H4 added at 1.1em for tertiary breaks.
- Tighten paragraph and heading-adjacent rhythm; add h2+h3 sibling
  rule so a subhead can immediately follow a section kicker without
  excess gap.
- Scope the negative-margin figure bleed to >=920px so figures stop
  overhanging the prose column on phones.
- Add post-body figcaption rule matching the mono/uppercase system.
- Bump inline code from 0.85em/1px-padding to 0.92em/2px so tokens
  sit on the body baseline instead of shrinking.
- Add post-body pre margin so code blocks have consistent vertical
  spacing across Gutenberg wrappers.
- Define --ink-soft / --ink-mute / --rule fallbacks in style.css so
  blockquote color is guaranteed even if custom.css loads out of
  order; soften the blockquote left bar from --bleed to --rule to
  stop it competing with link-hover.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(theme): add dark-mode fallbacks for newspaper tokens

Agent-Logs-Url: https://github.com/verygoodplugins/minimalcode/sessions/7e77b415-8b8a-4751-85c9-f768e6f49e72

Co-authored-by: jack-arturo <13076544+jack-arturo@users.noreply.github.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jack-arturo <13076544+jack-arturo@users.noreply.github.com>

Author: 3 people

assets/css/custom.css

@@ -477,8 +477,8 @@ pre {
   font-family: "JetBrains Mono", monospace;
 }
 code {
-  padding: 1px 6px;
-  font-size: 0.85em;
+  padding: 2px 6px;
+  font-size: 0.92em;
 }
 pre {
   padding: var(--spacing-md);
@@ -660,10 +660,76 @@ pre code {
 .aj-banner .robot { font-size: 22px; line-height: 1; }
 .aj-banner strong { display: block; color: var(--hot); margin-bottom: 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
 .post-body { font-family: "Fraunces", serif; font-size: 19px; line-height: 1.65; color: var(--ink); max-width: 64ch; }
-.post-body p { margin: 0 0 1.2em; text-wrap: pretty; }
-.post-body h2, .post-body h3 { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bleed); margin: 2em 0 0.8em; padding-top: 1em; border-top: 1px solid var(--rule); font-weight: 700; }
-.post-body figure { margin: 2.2em -40px; font-family: "JetBrains Mono", monospace; }
+.post-body p { margin: 0 0 1.1em; text-wrap: pretty; }
+
+/* H2 — editorial section break: kicker label + rule above. */
+.post-body h2 {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--bleed);
+  font-weight: 700;
+  margin: 3em 0 0.6em;
+  padding-top: 1.1em;
+  border-top: 1px solid var(--rule);
+}
+
+/* H3 — serif subhead. No border, sentence case, comfortably larger than body. */
+.post-body h3 {
+  font-family: "Fraunces", serif;
+  font-size: 1.35em;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.005em;
+  color: var(--ink);
+  margin: 1.8em 0 0.5em;
+  text-wrap: balance;
+}
+
+/* H4 — tertiary subhead, slightly smaller than H3. */
+.post-body h4 {
+  font-family: "Fraunces", serif;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--ink);
+  margin: 1.4em 0 0.4em;
+}
+
+/* Collapse the gap when H3 immediately follows H2 so the kicker
+   stays visually attached to its subhead. */
+.post-body h2 + h3 { margin-top: 0.8em; }
+
+/* Lists — smaller indent + comfortable item rhythm at 19px serif body. */
+.post-body ul,
+.post-body ol { margin: 0 0 1.2em 1.4em; padding: 0; }
+.post-body li { margin-bottom: 0.4em; }
+.post-body li > ul,
+.post-body li > ol { margin-top: 0.4em; margin-bottom: 0.4em; }
+
+/* Code blocks — consistent vertical spacing regardless of Gutenberg wrapper. */
+.post-body pre { margin: 1.6em 0; }
+
+/* Figure bleed only when side rails are present (≥920px). Below that, keep
+   figures inside the prose column so they don't overhang the page padding. */
+.post-body figure { margin: 1.8em 0; font-family: "JetBrains Mono", monospace; }
+@media (min-width: 920px) {
+  .post-body figure { margin: 2.2em -40px; }
+}
 .post-body figure img, .post-body p > img, .entry-featured-image img { display: block; max-width: 100%; width: 100%; height: auto; border: 1.5px solid var(--rule); border-radius: 0; background: var(--paper-dark); }
+
+/* Figcaption — match the editorial mono/uppercase system. */
+.post-body figcaption {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: var(--ink-mute);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-align: left;
+  margin-top: 0.6em;
+  line-height: 1.4;
+}
 .filed-under { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--rule); }
 .filed-label { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
 .post-tags { display: flex; gap: 6px; flex-wrap: wrap; }

style.css

@@ -110,6 +110,13 @@ Tags: blog, minimal, dark-mode, code, technical
   --fg-primary:   var(--text-primary);
   --fg-secondary: var(--text-secondary);
   --fg-tertiary:  var(--text-tertiary);
+
+  /* Newspaper-palette fallbacks. The full set lives in custom.css; these
+     guarantee blockquote / figcaption color even if custom.css fails to
+     load or rules cascade unexpectedly. */
+  --ink-soft: #2a2724;
+  --ink-mute: #6b665c;
+  --rule:     #1a1814;
 }
 
 /* Dark mode colors */
@@ -129,6 +136,11 @@ Tags: blog, minimal, dark-mode, code, technical
   --code-text: #e6edf3;
   --shadow: rgba(0, 0, 0, 0.4);
   --shadow-elev: rgba(0, 0, 0, 0.6);
+
+  /* Newspaper-palette fallbacks for dark mode */
+  --ink-soft: #b8aa97;
+  --ink-mute: #8f8374;
+  --rule:     #4c4339;
 }
 
 /* Base styles */
@@ -213,10 +225,11 @@ pre code {
   padding: 0;
 }
 
-/* Blockquotes — match .post-body p rhythm: no top margin, 1.2em bottom. */
+/* Blockquotes — match .post-body p rhythm: no top margin, 1.2em bottom.
+   Left bar uses --rule (near-black) so it doesn't fight link-hover --bleed. */
 blockquote {
-  border-left: 3px solid var(--bleed);
-  padding: 0 0 0 1em;
+  border-left: 4px solid var(--rule);
+  padding: 0 0 0 1.1em;
   margin: 0 0 1.2em;
   color: var(--ink-soft);
   font-style: italic;
@@ -403,4 +416,3 @@ h2[id], h3[id], h4[id] {
 .wp-block-list strong {
   color: var(--text-primary);
 }
-