/*
 * 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); }

/* ------------------------------------------------------------- closing */

.book-out {
  margin-top: 80px;
  border-top: 1px solid var(--rule);
  background: var(--raised);
  padding-top: 80px;
  padding-bottom: 80px;
}

.book-out__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.book-out__title {
  max-width: 28ch;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
}

.book-out__actions { display: flex; gap: 14px; flex-wrap: wrap; }

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