/*
 * The legal documents.
 *
 * Terms and privacy carried twenty section titles between them, every one of
 * them marked up as a bold paragraph. So neither had an outline: a screen
 * reader could not move between sections, no clause could be linked to, and a
 * search engine saw one wall of text. Real headings, and a contents list read
 * back out of them.
 */

.legal {
  background: var(--sg-ground);
}

/* Masthead ----------------------------------------------------------------- */

.legal .legal-top {
  padding-block: clamp(2rem, 3.5vw, 2.875rem) clamp(1.5rem, 2.5vw, 2.125rem);
  border-bottom: 1px solid var(--sg-line);
}

.legal .legal-title {
  margin-top: 0.875rem;
  max-width: 22ch;
}

/* The document and its contents --------------------------------------------- */

.legal .legal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3rem, 5.5vw, 5.5rem);
}

.legal .legal-toc {
  position: sticky;
  top: 1.5rem;
  /* A document of sixteen sections makes a list longer than the viewport;
     it scrolls inside itself rather than pushing the page. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal .legal-toc h2 {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sg-soft);
}

.legal .legal-toc ol {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.legal .legal-toc li {
  padding-block: 0.4375rem;
  border-top: 1px solid var(--sg-line);
}

.legal .legal-toc li:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal .legal-toc a {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--sg-body);
}

.legal .legal-toc a:hover {
  color: var(--sg-ink);
}

.legal .legal-doc {
  max-width: 68ch;
}

.legal .legal-doc > :first-child {
  margin-top: 0;
}

.legal .legal-doc p {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--sg-body);
  text-wrap: pretty;
}

.legal .legal-doc h2 {
  /* The anchor lands under nothing on this page, but the offset keeps the
     heading clear of the top edge when it does. */
  scroll-margin-top: 1.5rem;
  margin-top: 2.25rem;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-weight: 700;
}

.legal .legal-doc h3 {
  scroll-margin-top: 1.5rem;
  margin-top: 1.625rem;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: var(--sg-track-tight);
  font-weight: 600;
}

.legal .legal-doc strong {
  color: var(--sg-ink);
  font-weight: 600;
}

.legal .legal-doc a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal .legal-doc ul,
.legal .legal-doc ol {
  margin: 0.875rem 0 0;
  padding-left: 1.5rem;
}

.legal .legal-doc li {
  margin-top: 0.4375rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sg-body);
}

.legal .legal-foot {
  margin-top: 2.75rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--sg-line);
  font-size: 0.875rem;
  color: var(--sg-soft);
}

/* Narrow --------------------------------------------------------------------- */

@media (max-width: 899px) {
  .legal .legal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Stuck to the top of a single column the contents would follow the reader
   * down the whole document. It becomes what it is at this width: a list at
   * the head of the page.
   */
  .legal .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sg-line);
  }
}