html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  background-color: var(--wa-color-surface-lowered);
}

body {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
  font-family: var(--wa-font-family-body);
}

a {
  color: var(--wa-color-text-link);
  text-underline-offset: var(--wa-space-2xs);
}

.site-header,
.site-footer {
  inline-size: 100%;
  max-inline-size: calc(var(--wa-space-5xl) * 18);
  padding: var(--wa-space-l) var(--wa-space-xl);
  margin-inline: auto;
}

.site-header {
  background-color: var(--wa-color-surface-default);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  box-shadow: var(--wa-shadow-s);
  backdrop-filter: blur(var(--wa-space-s));
}

.brand-link,
.legal-nav a {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-semibold);
  text-decoration: none;
}

.brand-link {
  font-family: var(--wa-font-family-heading);
}

.brand-link img {
  inline-size: calc(var(--wa-space-4xl) * 2);
  max-inline-size: 100%;
  block-size: auto;
}

main {
  padding-inline: var(--wa-space-xl);
}

.legal-document {
  inline-size: 100%;
  max-inline-size: 75ch;
  padding: var(--wa-space-3xl);
  margin-inline: auto;
  border-inline: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background-color: var(--wa-color-surface-default);
  box-shadow: var(--wa-shadow-m);
}

.legal-header {
  padding-block-end: var(--wa-space-xl);
  border-block-end: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
}

.legal-header h1,
.legal-section h2,
.legal-header p,
.legal-section p,
.legal-section ul,
.site-footer p {
  margin-block: 0;
}

.legal-header h1 {
  font-size: var(--wa-font-size-4xl);
  letter-spacing: 0.02em;
}

.legal-header p,
.site-footer {
  color: var(--wa-color-text-quiet);
}

.legal-section h2 {
  font-size: var(--wa-font-size-xl);
  letter-spacing: 0.015em;
}

.legal-section p,
.legal-section li {
  line-height: var(--wa-line-height-normal);
}

.site-footer {
  background-color: var(--wa-color-surface-lowered);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.site-footer p a {
  color: inherit;
}

.site-footer p a:hover,
.legal-nav a:hover {
  color: var(--wa-color-text-link);
}

.legal-nav a:hover {
  text-decoration: underline;
}

.legal-nav a[aria-current="page"] {
  color: var(--wa-color-warning-on-quiet);
}

@media (max-width: 48rem) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: var(--wa-space-l);
  }

  main {
    padding-inline: var(--wa-space-l);
  }

  .legal-document {
    padding: var(--wa-space-2xl) 0;
    border-inline: 0;
    box-shadow: none;
  }
}