/* =====================================================================
   Container
   ===================================================================== */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-max);
  }
}

/* Centred reading column, two thirds of the container from the md breakpoint. */
.narrow {
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

@media (min-width: 768px) {
  .narrow {
    max-width: var(--narrow-width);
  }
}

/* =====================================================================
   Sections
   ===================================================================== */

.section {
  position: relative;
  padding-block: var(--section-padding-sm);
  background-color: var(--color-surface);
}

.section--flush {
  padding-block: 0;
}

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

.section--tall {
  padding-block: var(--section-padding-lg);
}

.section--lg {
  padding-block: var(--section-padding-md);
}

.section--band {
  padding-block: var(--section-padding-xl);
}

.section--muted {
  background-color: var(--color-surface-muted);
}

.section--subtle {
  background-color: var(--color-surface-subtle);
}

.section--accent {
  background-color: var(--color-accent);
}

/* =====================================================================
   Section headings
   ===================================================================== */

.section__title {
  margin-bottom: 0.5rem;
  padding-bottom: var(--space-sm);
  color: var(--color-text);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-title);
  text-align: center;
}

.section__title--inverse {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.section__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-subtitle);
  text-align: center;
}

.section__subtitle p + p {
  margin-top: var(--line-height-subtitle);
}

/* Running text directly after a subtitle needs breathing room. */
.section__subtitle + .prose {
  margin-top: var(--space-md);
}

.section__subtitle:last-child {
  padding-bottom: 0;
}

/* =====================================================================
   Long-form text
   ===================================================================== */

.prose {
  color: var(--color-text-muted);
  line-height: var(--line-height-text);
}

.prose p {
  margin-bottom: var(--space-sm);
}

/* Legal page: h2 marks the two main blocks, h3 the sub-topics (former
   bold-paragraph look). */
.prose h2 {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subtitle);
}

.prose h2:not(:first-child) {
  margin-top: var(--space-lg);
}

.prose h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text);
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose blockquote:last-child {
  margin-bottom: 0;
}