/* legal.css — document styles for the legal pages (privacy.html, terms.html).
   Loads after site.css, which provides the shared chrome (tokens, header,
   footer, atmospheric wash). This file adds the narrow reading column and the
   long-form document type: headings, prose, the navigable table of contents,
   and the "categories of personal information" data table. */
:root {
  --container:   min(820px, 92vw);          /* narrow reading column */
  --rule-strong: rgba(61, 53, 43, 0.20);    /* denser hairline for data-table cells */
}
body { font-size: 16px; line-height: 1.65; }   /* comfortable long-form reading */

/* ── Document body ───────────────────────────────────────────── */
.legal { padding-block: clamp(40px, 7vh, 84px) clamp(56px, 10vh, 120px); }
.legal-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 54px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.legal-meta { color: var(--muted); font-size: 14px; margin: 0 0 clamp(28px, 4vh, 44px); }
.legal h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em;
  color: var(--fg); margin: clamp(28px, 4vh, 44px) 0 10px;
  scroll-margin-top: 1.5rem;
}
.legal h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(17px, 1.4vw, 19px); letter-spacing: 0;
  color: var(--fg); margin: clamp(22px, 3vh, 32px) 0 8px;
}
.legal p { color: var(--muted); margin: 0 0 18px; max-width: 68ch; text-wrap: pretty; overflow-wrap: break-word; }
.legal p:last-child { margin-bottom: 0; }

.legal ul {
  color: var(--muted); margin: 0 0 18px;
  padding-inline-start: 1.3em; max-width: 68ch;
}
.legal li { margin: 0 0 9px; text-wrap: pretty; overflow-wrap: break-word; }
.legal li:last-child { margin-bottom: 0; }
.legal li::marker { color: var(--muted); }

/* Table of contents — navigable multi-column index for the long legal docs */
.legal-toc { margin-top: 2px; }
.legal-toc ol {
  columns: 17rem;
  column-gap: clamp(28px, 4vw, 52px);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: toc;
}
.legal-toc li { break-inside: avoid; margin: 0 0 6px; }
/* Higher specificity than the inline-prose link rule (.legal a:not(.backlink)),
   so the index reads as calm ink at rest and reveals the accent on hover. */
.legal nav.legal-toc a {
  display: block;
  padding-inline-start: 2em;
  color: var(--fg); text-decoration: none;
  counter-increment: toc;
}
.legal nav.legal-toc a::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 2em; margin-inline-start: -2em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.legal nav.legal-toc a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Gentle, consistent colour fade on every interactive link in the document
   (inline, table-of-contents, backlink), matching the footer. */
.legal a { transition: color 0.15s ease; }
.legal a:not(.backlink) {
  color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.legal a:not(.backlink):hover { color: var(--accent-deep); }

/* Data table — privacy "categories of personal information" */
.legal-table-wrap {
  overflow-x: auto; margin: 0 0 18px;
}
.legal table {
  border-collapse: collapse; width: 100%;
  min-width: 560px; font-size: 14px; color: var(--muted);
}
.legal th, .legal td {
  border: 1px solid var(--rule-strong);
  padding: 10px 12px; text-align: start; vertical-align: top;
  overflow-wrap: break-word;
}
.legal thead th { font-weight: 600; color: var(--fg); background: var(--surface); }
.legal tbody th { font-weight: 600; color: var(--fg); }

.backlink {
  display: inline-block;
  margin-top: clamp(36px, 6vh, 64px);
  padding-block: 4px;
  font-size: 14px; color: var(--accent-ink);
}
.backlink:hover { color: var(--accent-deep); }