/* =============================================================================
   page.css — prose rhythm for editor-authored static pages (templates/page.php)
   =============================================================================
   Linked PER PAGE by the static-pages catch-all route in public/index.php via
   the layout's `styles` hook — the same pattern as forms.css. Not global.

   WHY THIS FILE EXISTS: base.css zeroes all margins; every layout opts into
   its own rhythm (the story page has its prose layer, forms have forms.css).
   Static pages had none, so the first real content (terms + privacy,
   June 11 2026) rendered as an unspaced wall. This is their rhythm.

   Everything is tokens — space scale for gaps, --measure for line length,
   --color-rule for hairlines — per the design system's "no raw px" rule.
   Heading TYPOGRAPHY (Stoker, Forest, step sizes) is global in base.css;
   this file only adds the vertical space around things.

   Scope note: `.site-main > h1` is safe here ONLY because this stylesheet
   loads solely on the pages route; other templates with h1s never see it. */

.site-main > h1 { margin-bottom: var(--space-2xs); }

.page-body { max-width: var(--measure, 70ch); }
.page-body > :first-child { margin-top: 0; }

.page-body p,
.page-body ul,
.page-body ol { margin-bottom: var(--space-s); }

.page-body h2 { margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.page-body h3 { margin-top: var(--space-l); margin-bottom: var(--space-2xs); }

.page-body ul,
.page-body ol { padding-left: 1.4em; } /* em, not a token: marker indent is
                                          relative to the text size it brackets */
.page-body li { margin-bottom: var(--space-2xs); }
.page-body li:last-child { margin-bottom: 0; }

.page-body hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-l) 0;
}

/* Prose links: moss at rest deepening to forest, gold hairline underline —
   the holding-page link convention plus the form consent-line hairline. */
.page-body a {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: color 0.15s;
}
.page-body a:hover { color: var(--green); }

.page-body code {
  background: var(--color-bg-layer);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
}