/*
 * Haus of Contour — the policies page.
 *
 * A list of terms, each a heading beside a plain statement and the reasoning
 * behind it. The reasoning is set in the muted colour so the term itself is
 * what someone skimming actually reads.
 */

.terms { margin-top: 72px; }

.term {
  border-top: 1px solid var(--rule);
  padding: 34px 0;
  display: grid;
  grid-template-columns: minmax(min(200px, 100%), 0.55fr) minmax(min(280px, 100%), 1fr);
  gap: 48px;
  align-items: start;
}

.term__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.term__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 64ch;
  text-wrap: pretty;
}

/* The "why", which is not itself a term. */
.term__detail {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 64ch;
  text-wrap: pretty;
}

/* Closes the last term, which otherwise ends on open space. */
.terms__end { border-top: 1px solid var(--rule); }

@media (max-width: 720px) {
  .term { grid-template-columns: 1fr; gap: 16px; }
  .terms { margin-top: 48px; }
}