/* PostLever legal pages.

   Hand-written, like tokens.css and logo/. build-postlever.py does not write
   these pages' documents, so a rebuild cannot clobber them. Their header and
   footer are the site's, written in by the build and drawn by chrome.css.

   Colour and type come from tokens.css, on the light ground every page of the
   site is on: each legal page sets data-ground="light" on <html>, which points
   the semantic tokens at their light values. Nothing here introduces a literal.

   base.css is deliberately not loaded: it is 130KB of layout, components and
   animation for a page these documents share nothing with. A legal document is
   a column of text. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- the document ---- */
.legal-doc { padding: 3.5rem 0 5rem; }

.legal-doc h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.legal-meta {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  margin: 0 0 2.5rem;
}

.legal-doc h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}
.legal-doc h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}
.legal-doc p, .legal-doc li { color: var(--color-text-muted); }
.legal-doc p { margin: 0 0 1rem; }
.legal-doc ul, .legal-doc ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-doc li { margin-bottom: 0.4rem; }
.legal-doc a { color: var(--brand-fill); text-underline-offset: 0.2em; }
.legal-doc a:hover { color: var(--brand-fill-hover); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
}
.legal-table th {
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 0.875rem;
}
.legal-table tr:last-child td { border-bottom: 0; }
/* Narrow screens: let a wide table scroll inside itself rather than pushing the
   page sideways. */
.legal-scroll { overflow-x: auto; }

.legal-doc hr {
  border: 0;
  border-top: 1px solid var(--color-border-light);
  margin: 2.5rem 0;
}

@media (max-width: 600px) {
  .legal-doc { padding: 2.5rem 0 3.5rem; }
}