.legal {
  padding: clamp(7rem, 14vh, 10rem) var(--site-margin) clamp(4rem, 10vh, 7rem);
}
.legal__inner {
  max-width: 46rem;
  margin-inline: auto;
}

.legal__title {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: var(--ink);
  text-align: center;
}
.legal__intro {
  margin-top: 0.9rem;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--body);
  opacity: 0.75;
}

.legal__rule {
  width: 100%;
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: clamp(2.6rem, 6vh, 4rem);
}

.legal__section + .legal__section {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
}
.legal__section h2 {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.legal__section p,
.legal__section li {
  color: var(--body);
  hyphens: auto;
}
.legal__section p + p {
  margin-top: 0.9rem;
}
.legal__section a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.3s var(--ease);
}
.legal__section a:hover {
  opacity: 0.65;
}

.legal__list {
  list-style: none;
  margin-top: 0.9rem;
}
.legal__list li {
  position: relative;
  padding-left: 1.4rem;
}
.legal__list li + li {
  margin-top: 0.4rem;
}
.legal__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink);
  opacity: 0.6;
}
.legal__list + p {
  margin-top: 0.9rem;
}

.legal__block {
  margin-top: 0.9rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
  font-style: italic;
}

.legal__updated {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--body);
  opacity: 0.6;
}

@media (max-width: 620px) {
  .legal {
    padding-top: clamp(6rem, 12vh, 8rem);
  }
}