From abffa282da160b793a97c7ddaa476c0910c67650 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 26 Mar 2026 17:28:59 +0000
Subject: [PATCH] [#576] Fix ruled-paper line alignment in Markdown styles

All vertical margins in .story-markdown now use multiples of
var(--line-height) (28px) instead of em units (~16px) to stay
aligned with the ruled-paper grid. Headings with larger font-size
get line-height: calc(var(--line-height) * 2) to span two lines
cleanly. List item margins zeroed to inherit line-height grid.

Fixes #576

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index bc64eed2..92ed3567 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -112,36 +112,42 @@ code, pre, .font-mono {
   }
 }
 
-/* Markdown rendering inside ruled paper — fiction-focused prose */
+/* Markdown rendering inside ruled paper — fiction-focused prose.
+   All vertical spacing must be multiples of var(--line-height) (28px)
+   to stay aligned with the ruled-paper grid lines. */
 .story-markdown h1 {
   font-size: 1.5rem;
+  line-height: calc(var(--line-height) * 2);
   font-weight: 700;
-  margin: 1.5em 0 0.5em;
+  margin: var(--line-height) 0 var(--line-height);
 }
 .story-markdown h2 {
   font-size: 1.25rem;
+  line-height: calc(var(--line-height) * 2);
   font-weight: 700;
-  margin: 1.25em 0 0.5em;
+  margin: var(--line-height) 0 0;
 }
 .story-markdown h3 {
   font-size: 1.1rem;
+  line-height: var(--line-height);
   font-weight: 600;
-  margin: 1em 0 0.5em;
+  margin: var(--line-height) 0 0;
 }
 .story-markdown p {
-  margin: 0 0 1em;
+  margin: 0 0 var(--line-height);
 }
 .story-markdown blockquote {
   border-left: 3px solid var(--accent);
   padding-left: 1rem;
-  margin: 1em 0;
+  margin: var(--line-height) 0;
   font-style: italic;
   color: var(--text-muted);
 }
 .story-markdown hr {
   border: none;
   text-align: center;
-  margin: 1.5em 0;
+  margin: var(--line-height) 0;
+  line-height: var(--line-height);
 }
 .story-markdown hr::after {
   content: "* * *";
@@ -151,10 +157,10 @@ code, pre, .font-mono {
 }
 .story-markdown ul,
 .story-markdown ol {
-  margin: 0.5em 0 1em 1.5em;
+  margin: 0 0 var(--line-height) 1.5em;
 }
 .story-markdown li {
-  margin-bottom: 0.25em;
+  margin-bottom: 0;
 }
 .story-markdown strong {
   font-weight: 700;