.sky::after { content: ""; position: absolute; inset: 0; background: rgba(8, 11, 22, .55); }

main.legal { display: grid; gap: 3rem; max-width: 52rem; padding: 120px var(--gutter) 14vh; }

.legal header { display: grid; gap: 1.1rem; max-width: 40rem; }

.eyebrow { font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-quiet); }

.legal h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }

.legal h1 em, .lede em { font-style: italic; color: var(--ink-soft); }

.meta { font-family: var(--mono); font-size: .6875rem; color: var(--ink-quiet); }

.lede { font-size: 1.1rem; color: var(--ink-soft); }

.legal section { display: grid; padding-top: 1.2rem; border-top: 1px solid var(--rule); }

.legal section > :not(h2) + :not(h2) { margin-top: .9rem; }

.legal h2 { font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; line-height: 1.6rem; color: var(--ink-quiet); margin-bottom: .6rem; }

.legal h3 { font-weight: 400; font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }

.legal ul, .legal ol { padding-left: 1.2rem; display: grid; gap: .45rem; }

.legal li::marker { color: var(--ink-quiet); }

.legal strong { font-weight: 500; color: #ece6d9; }

.legal a { text-decoration: underline; text-decoration-color: var(--ink-quiet); text-underline-offset: .22em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }

.legal code {
  font-family: var(--mono);
  font-size: .82em;
  background: rgba(214, 208, 196, .08);
  padding: .05em .35em;
  border-radius: 2px;
}

.path {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.9;
  padding: .9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(8, 11, 22, .6);
}

.path span { color: var(--ink-quiet); }

.quiet { color: var(--ink-soft); }

.foot nav [aria-current] { color: var(--ink-quiet); }

@media (min-width: 760px) {
  main.legal { padding-top: 140px; }
  .legal section { grid-template-columns: 12rem minmax(0, 1fr); column-gap: 2rem; }
  .legal section > * { grid-column: 2; }
  .legal section > h2 { grid-column: 1; grid-row: 1 / span 40; align-self: start; margin-bottom: 0; }
}