/* Legal pages (privacy.php, terms.php): numbered contents beside a 38rem reading
   column. Ported from the approved design (pages.css section I). Depends on
   styles.css (tokens, .kicker, .prose). The design's "Draft change" markers were
   a review aid and are not part of the published pages. */
.legal { padding-bottom: var(--section-pad); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.legal__head { padding-block: clamp(32px, 5vw, 72px) var(--space-4); }
.legal__head .kicker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.legal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.legal__toc { padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface-raised); }
.legal__toc .kicker { color: var(--text-muted); }
.legal__toc ol { display: grid; margin-top: var(--space-3); counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--text-strong); text-decoration: none; }
.legal__toc a::before { content: counter(toc); font-family: var(--font-display); font-style: italic; color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
.legal__body { padding-top: var(--space-2); max-width: 38rem; overflow-wrap: break-word; }
.legal__body .lead { color: var(--text-strong); }
/* Each topic is a <section>; keep the design's paragraph rhythm inside it. */
.legal__body section > * + * { margin-top: 1em; }
@media (min-width: 1080px) {
  .legal__grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8fr); column-gap: clamp(48px, 7vw, 120px); }
  .legal__head { grid-column: 1 / -1; border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--space-6); }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding: 0; border: 0; background: none; }
  .legal__toc ol { border-top: 1px solid var(--rule); }
  .legal__toc li { border-bottom: 1px solid var(--rule); }
}