/* The legal pages. Set for reading one fact at a time: a single column at a
   comfortable measure, headings that are findable by scanning, and no
   photograph. */

.wr-legal {
  padding-block: clamp(var(--space-8), 12vh, 7rem);
}

.wr-legal__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.wr-legal__block {
  /* A link to a clause must not land under the sticky header. */
  scroll-margin-block-start: 6rem;
  margin-block-start: clamp(var(--space-6), 5vh, var(--space-8));
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.wr-legal__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.wr-legal__lines {
  margin-block-start: var(--space-4);
  max-inline-size: 62ch;
}

/* An address is a block of lines, not paragraphs: they sit together. Prose
   blocks separate, so only a line long enough to be a sentence gets space. */
.wr-legal__lines > p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.wr-legal__lines > p + p {
  margin-block-start: var(--space-4);
}

.wr-legal__contacts {
  display: grid;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-4);
  font-size: var(--text-base);
}

.wr-legal__contacts dt {
  color: var(--color-ink-faint);
}

.wr-legal__contacts dd a {
  color: var(--color-ink);
}

@media (min-width: 34rem) {
  .wr-legal__contacts {
    grid-template-columns: 7rem auto;
    justify-content: start;
  }

  .wr-legal__contacts dt {
    grid-column: 1;
  }

  .wr-legal__contacts dd {
    grid-column: 2;
  }
}

/* The heading is its own link. No visible affordance until hover or focus:
   these are section markers, not calls to action, and six underlined headings
   would read as a navigation bar. */
.wr-legal__anchor {
  color: inherit;
  text-decoration: none;
}

.wr-legal__anchor:hover,
.wr-legal__anchor:focus-visible {
  color: var(--color-accent-text);
}

/* Its absence is the clearest sign of a neglected legal page, and for a
   privacy policy it is the thing a reader checks first. */
.wr-legal__updated {
  margin-block-start: clamp(var(--space-7), 6vh, var(--space-8));
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}