/* THE LEGAL DOCUMENTS' COLUMN (Terms, Privacy). The chrome they share with
   the About page (the type scale, the grid, the bar, the footer, prose links
   and the label) is about/page.css, loaded before this; what is here is the
   one thing only a document has, a long column of headed sections.

   It stands on About's grid: the track and the gutter place it, the measure
   bounds its lines, and it starts the page's one gap under the bar the way
   About's blocks stand that gap apart. The heading is About's display size
   with the date as the label over it, the opening paragraph About's lead,
   and each section is headed at the size About heads a card, because a
   dozen headings at the section size would shout the document down. */

.doc {
  max-width: calc(var(--track) + 2 * var(--gutter));
  margin: 0 auto;
  /* The side inset is About's --edge-*, not the bare gutter: served
     viewport-fit=cover, a phone held sideways reaches under the notch. */
  padding: var(--section-gap) var(--edge-r) 0 var(--edge-l);
}

.doc > * { max-width: var(--measure); }

.doc h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.doc .lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}

.doc-section { margin-top: var(--space-7); }

.doc h2 {
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.doc p,
.doc li { color: var(--ink-2); }

.doc strong {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* Paragraphs and lists are spaced by the one step About spaces paragraphs
   by; items inside a list by half of it. */
.doc p + p,
.doc p + ul,
.doc ul + p { margin-top: var(--space-2); }

.doc ul {
  padding-left: 20px;
  list-style: disc;
}

.doc li + li { margin-top: var(--space-1); }

.doc li::marker { color: var(--ink-3); }

/* The current page in the footer's legal pair reads as the ink the others
   take on hover: where you are, said in the link's own language. */
.footer a[aria-current="page"] { color: var(--ink); }