.pikapika-legal-content {
  color: var(--copy);
}

.pikapika-legal-content .shell {
  width: var(--page);
  margin-inline: auto;
}

.legal-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(56px, 9vw, 140px);
  align-items: end;
  padding-block: clamp(84px, 9vw, 136px);
}

.legal-kicker {
  margin: 0 0 28px;
  color: var(--wine);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.legal-intro h1 {
  margin: 0;
  color: var(--wine);
  font-family: var(--serif);
  font-size: clamp(58px, 7vw, 96px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.legal-intro h1 span {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .72em;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -.045em;
}

.legal-lede {
  max-width: 570px;
  margin: 0 0 8px;
  color: var(--copy);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.8;
}

.legal-body {
  padding-block: clamp(70px, 8vw, 120px);
  border-top: 1px solid var(--line);
  background: var(--mist);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
}

.legal-policy {
  scroll-margin-top: 156px;
  padding: 0 0 clamp(72px, 8vw, 112px);
}

.legal-policy + .legal-policy {
  padding-top: clamp(72px, 8vw, 112px);
  border-top: 1px solid var(--line);
}

.legal-section-label {
  margin: 0 0 18px;
  color: var(--wine);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legal-policy h2 {
  max-width: 780px;
  margin: 0 0 34px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 62px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.legal-policy > p:not(.legal-section-label),
.legal-subsection > p {
  max-width: 760px;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.85;
}

.legal-fee-note {
  max-width: 760px;
  margin-top: 36px;
  padding: 24px 28px;
  border: 1px solid #c9c5c1;
  background: rgba(255, 255, 255, .55);
}

.legal-fee-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.legal-fee-note strong {
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
}

.legal-subsection {
  scroll-margin-top: 156px;
  max-width: 820px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.admin-bar .legal-policy,
.admin-bar .legal-subsection {
  scroll-margin-top: 190px;
}

.legal-subsection:last-child {
  padding-bottom: 0;
}

.legal-subsection h3 {
  margin: 0 0 22px;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 800px) {
  .pikapika-legal-content .shell {
    width: calc(100% - 36px);
  }

  .legal-intro {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .legal-policy,
  .legal-subsection {
    scroll-margin-top: 112px;
  }

  .admin-bar .legal-policy,
  .admin-bar .legal-subsection {
    scroll-margin-top: 164px;
  }
}

@media (max-width: 520px) {
  .legal-intro {
    padding-block: 68px;
  }

  .legal-intro h1 {
    font-size: clamp(48px, 15vw, 66px);
  }

  .legal-body {
    padding-block: 58px 80px;
  }

  .legal-policy h2 {
    font-size: 38px;
  }

  .legal-policy > p:not(.legal-section-label),
  .legal-subsection > p {
    font-size: 15px;
  }

  .legal-fee-note {
    padding: 20px;
  }
}