/* ============================================================
   Wherewolf — legal / long-form prose pages (privacy, terms)
   Built on top of site.css (design tokens, nav, footer).
   This file only styles the readable content column.
   ============================================================ */

.legal {
  padding: 140px 0 100px;            /* top padding clears the fixed nav */
  background: radial-gradient(120% 80% at 50% 0%, #12101a 0%, var(--ww-bg) 55%);
  min-height: 100vh;
}
.legal-wrap { width: min(760px, 100% - 48px); margin-inline: auto; }

.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ww-font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--ww-fg-3); margin-bottom: 26px;
  transition: color var(--ww-dur-fast, 160ms) var(--ww-ease, ease);
}
.legal-back:hover { color: var(--ww-gold-soft); }

.legal-head { margin-bottom: 6px; }
.legal-title {
  font-family: var(--ww-font-display); font-weight: 700;
  font-size: clamp(34px, 6vw, 52px); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ww-fg); margin: 18px 0 0;
}
.legal-meta {
  margin: 16px 0 0; font-family: var(--ww-font-mono);
  font-size: 12.5px; letter-spacing: 0.06em; color: var(--ww-fg-4);
}
.legal-rule {
  height: 1px; margin: 30px 0 4px;
  background: linear-gradient(90deg, var(--ww-gold-deep), transparent);
}

.legal-body { color: var(--ww-fg-2); font-size: 16px; line-height: 1.75; }
.legal-body h2 {
  font-family: var(--ww-font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 26px); letter-spacing: 0.04em;
  color: var(--ww-fg); margin: 46px 0 14px;
}
.legal-body h3 {
  font-family: var(--ww-font-body); font-weight: 600;
  font-size: 16.5px; letter-spacing: 0.02em;
  color: var(--ww-gold-soft); margin: 28px 0 8px;
}
.legal-body p { margin: 0 0 16px; }
.legal-body ul,
.legal-body ol { margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin: 0 0 9px; }
.legal-body li::marker { color: var(--ww-gold); }
.legal-body a { color: var(--ww-gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--ww-gold); }
.legal-body strong { color: var(--ww-fg); font-weight: 600; }