/* =============================================================
   Story Builder — legal / content pages (privacy, terms).
   Standalone pages load: colors_and_type.css + this file.
   NOT site.css — so we keep the calm warm-paper palette (and the
   automatic dark-mode tokens) rather than the marketing terracotta.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.legal-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Top bar */
.legal-bar { border-bottom: 1px solid var(--hairline); }
.legal-bar .legal-wrap {
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.legal-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 17px/1 var(--font-serif-classical);
  letter-spacing: -0.01em; color: var(--ink);
}
.legal-brand:hover { text-decoration: none; }
.legal-brand svg { width: 20px; height: 20px; }
.legal-back { font: 500 14px/1 var(--font-sans); color: var(--ink-3); }
.legal-back:hover { color: var(--accent); }

/* Document */
.legal-main { padding: 56px 0 24px; }
.legal-kicker {
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 16px;
}
.legal-main h1 {
  font: 600 clamp(32px, 5vw, 46px)/1.08 var(--font-serif-classical);
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px;
}
.legal-updated { font: 400 14px/1.5 var(--font-sans); color: var(--ink-3); margin: 0; }
.legal-lede {
  font: 400 19px/1.6 var(--font-serif-literary); font-style: italic;
  color: var(--ink-2); margin: 28px 0 0;
}

.legal-main h2 {
  font: 600 23px/1.3 var(--font-serif-classical); letter-spacing: -0.01em;
  color: var(--ink); margin: 52px 0 12px;
}
.legal-main h3 {
  font: 600 16px/1.4 var(--font-sans); color: var(--ink); margin: 28px 0 6px;
}
.legal-main p { font: 400 16px/1.7 var(--font-sans); color: var(--ink-2); margin: 12px 0; }
.legal-main ul { margin: 12px 0; padding-left: 22px; }
.legal-main li { font: 400 16px/1.7 var(--font-sans); color: var(--ink-2); margin: 7px 0; }
.legal-main strong { color: var(--ink); font-weight: 600; }
.legal-main a { font-weight: 500; }

/* "Short version" summary card */
.legal-tldr {
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--bg-raised); padding: 22px 24px; margin: 32px 0;
}
.legal-tldr h2 { margin: 0 0 8px; font-size: 18px; }
.legal-tldr ul { margin: 8px 0 0; }
.legal-tldr li { margin: 5px 0; }

.legal-rule { border: 0; border-top: 1px solid var(--hairline); margin: 8px 0 0; }

/* Footer */
.legal-foot { border-top: 1px solid var(--hairline); margin-top: 56px; }
.legal-foot .legal-wrap {
  display: flex; gap: 12px 32px; justify-content: space-between; flex-wrap: wrap;
  padding: 28px 24px; font: 400 13px/1.5 var(--font-sans); color: var(--ink-3);
}
.legal-foot a { color: var(--ink-3); }
.legal-foot a:hover { color: var(--accent); }