Fix ruled-paper line alignment broken by Markdown paragraph margins

[realproject7]

Bug

Text lines no longer align with the ruled-paper stripes on story pages (both desktop and mobile). This regression was introduced by PR #571 (Markdown support).

Root Cause

The ruled-paper background uses a strict 28px line-height grid (--line-height: 28px). The repeating gradient draws horizontal lines every 28px, and text must land exactly on those lines to look correct.

PR #571 introduced .story-markdown styles that use em-based margins which break the grid:

• .story-markdown p { margin: 0 0 1em; } — 1em = 16px (not a multiple of 28px)
• .story-markdown h1 { margin: 1.5em 0 0.5em; } — fractional line-height multiples
• .story-markdown blockquote { margin: 1em 0; } — same issue
• .story-markdown hr { margin: 1.5em 0; } — same issue

Previously, plain text used whitespace-pre-wrap with no margins, so every line stayed on the 28px grid. Now <p> tags inject margins that drift text off the ruled lines.

Fix

All margins inside .story-markdown must be multiples of var(--line-height) (28px) to maintain grid alignment:

.story-markdown p {
  margin: 0 0 var(--line-height); /* 28px instead of 1em (16px) */
}
.story-markdown h1 {
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
}
.story-markdown h2 {
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
}
.story-markdown h3 {
  margin: var(--line-height) 0 var(--line-height);
}
.story-markdown blockquote {
  margin: var(--line-height) 0;
}
.story-markdown hr {
  margin: var(--line-height) 0;
  height: var(--line-height);
  line-height: var(--line-height);
}
.story-markdown ul,
.story-markdown ol {
  margin: 0 0 var(--line-height) 1.5em;
}
.story-markdown li {
  margin-bottom: 0; /* inherit line-height from parent */
}

Also ensure heading font-size + line-height stays on grid (e.g., larger headings may need line-height: calc(var(--line-height) * 2) to span two ruled lines).

Files to modify

• src/app/globals.css — all .story-markdown rules (lines 116–174)

Branch

task/576-ruled-paper-alignment

Acceptance criteria

• All text lines sit exactly on ruled-paper stripes (desktop + mobile)
• Paragraphs, headings, blockquotes, scene breaks, lists all maintain grid alignment
• Verify with existing E2E storylines on plotlink.xyz (IDs 34–42)