/* ── legal pages (/terms, /privacy) ───────────────────────────────────────
   Long documents read top to bottom: one ~70-character column in the
   site's type, headings in the display face, generous line height. The
   text is English only (the Terms say the English version prevails), so
   the article is marked data-i18n-skip; the header and footer still
   follow the language toggle. Section links clear the fixed header via
   html's scroll-padding-top (base.css). */

.lg-doc { max-width: 72ch; padding-bottom: clamp(72px, 12vh, 120px); font-size: 16px; line-height: 1.7; color: var(--fg-muted); }

.lg-doc h1 {
  margin: 0; font: 650 clamp(34px, 5vw, 52px)/1.05 var(--display);
  letter-spacing: -0.03em; color: var(--fg);
}
.lg-meta { margin: 16px 0 0; font: 400 13px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--fg-faint); }
.lg-doc h2 {
  margin: 52px 0 14px; font: 600 22px/1.3 var(--display);
  letter-spacing: -0.015em; color: var(--fg);
}
.lg-doc h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 600; color: var(--fg); }
.lg-doc p { margin: 0; }
.lg-doc p + p, .lg-doc ul + p, .lg-doc .lg-table-wrap + p { margin-top: 14px; }
.lg-doc ul { margin: 10px 0 0; padding-left: 22px; }
.lg-doc li + li { margin-top: 8px; }
.lg-doc li::marker { color: var(--fg-faint); }
.lg-doc strong { color: var(--fg); font-weight: 600; }
.lg-doc a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.lg-doc a:hover { color: var(--brand-hi); text-decoration-color: currentColor; }

/* retention schedule (privacy) */
.lg-table-wrap { margin: 14px 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.lg-table th { text-align: left; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--fg); background: var(--canvas-2); border-bottom: 1px solid var(--line); }
.lg-table td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { width: 42%; color: var(--fg); }

/* Grievance Officer contact */
.lg-contact { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0 14px; }
.lg-contact dt { color: var(--fg); font-weight: 600; }
.lg-contact dd { margin: 0; }

@media (max-width: 760px) {
  .lg-doc { font-size: 15.5px; }
  .lg-doc h2 { margin-top: 40px; font-size: 19px; }
  .lg-contact { grid-template-columns: 1fr; gap: 0; }
  .lg-contact dd + dt { margin-top: 8px; }
  /* the retention table becomes stacked rows on a phone */
  .lg-table thead { display: none; }
  .lg-table tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .lg-table tr:last-child { border-bottom: 0; }
  .lg-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .lg-table td:first-child { margin-bottom: 2px; font-weight: 600; }
}