/* Privacy (/privacy): one document set on the site's index rows. The questions hold the first
   column line and the answers the fifth, so the page can be scanned down one edge and read along
   the other, at a readable measure, at any width. Anchor lines: column 1 and column 5. */

.policy { padding-top: calc(var(--sp-section) / 2); }

.policy__head,
.policy__part {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.policy__head > *,
.policy__part > * { grid-column: 1 / -1; min-width: 0; }

.policy__head { row-gap: var(--sp-l); padding-bottom: var(--sp-xl); }

.policy__part {
  row-gap: var(--sp-s);
  padding-block: var(--sp-m) var(--sp-l);
  border-top: 1px solid var(--line);
}
.policy__part:last-child { padding-bottom: 0; }

/* The questions: the prose heading's voice (lead size, expanded), standing beside the answer. */
.policy__part > h2 {
  max-width: 18ch;
  font-size: var(--fs-lead);
  font-weight: var(--heading-weight);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.policy__text li + li { margin-top: 0.3em; }
.policy__tel { white-space: nowrap; }
.policy__updated { color: var(--fg-muted); }

@media (min-width: 720px) {
  .policy__short { grid-column: 5 / -1; }
  .policy__part > h2 { grid-column: 1 / span 4; }
  .policy__text { grid-column: 5 / -1; }
}

/* Beside a long answer the question stays in view. */
@media (min-width: 1100px) {
  .policy__part > h2 { position: sticky; top: var(--sp-m); align-self: start; }
}