/* ---- legal.css ---- */
/*
  Legal pages: /privacy and /terms (brief 7.3, Phase 7). Plain text at a
  narrower measure than the rest of the site, with a contents list in the
  margin that stays in view on wide screens. No numbering.
*/

.legal-contents {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-self: start;
}

.legal-contents-title {
  font-size: var(--step-0);
  font-stretch: calc(var(--wdth-voice) * 1%);
}

/* .ruled-section sets a large gap under every h2; the contents label is not a section heading. */
.ruled-section .legal-contents-title {
  margin-block-end: 0;
}

.legal-contents ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: 0;
  list-style: none;
}

.legal-body {
  --stack-space: var(--space-s);
  --measure-body: var(--measure-legal);
  --measure-ui: var(--measure-legal);
}

.legal-body h2 {
  font-size: var(--step-2);
  margin-block: var(--space-l) 0;
  scroll-margin-block-start: var(--space-l);
}

.legal-body h2:first-of-type {
  margin-block-start: 0;
}

.legal-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--list-indent);
}

.legal-body dl {
  display: grid;
  gap: var(--space-2xs);
}

.legal-body dt {
  font-weight: var(--weight-bold);
}

.legal-body dd + dt {
  margin-block-start: var(--space-xs);
}

@media (width >= 48rem) {
  .legal-contents {
    grid-column: 1 / 4;
  }

  .legal-body {
    grid-column: 4 / -1;
  }
}

@media (width >= 64rem) {
  .legal-contents {
    position: sticky;
    inset-block-start: var(--space-l);
  }

  .legal-body {
    grid-column: 4 / 11;
  }
}