*,
*::before,
*::after {
  box-sizing: border-box;
}

body.site {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: var(--lh-16);
  color: var(--text);
  background: var(--bg);
}

.site__header,
.site__main,
.site__footer {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.site__header {
  padding-top: var(--space-8);
}

.site__logo {
  display: block;
  height: var(--space-6);
  width: auto;
}

.site__logo--dark {
  display: none;
}

.site__header a {
  display: inline-block;
}

.site__header a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

@media (prefers-color-scheme: dark) {
  .site__logo--light {
    display: none;
  }

  .site__logo--dark {
    display: block;
  }
}

.site__main {
  flex: 1;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

/* The margin rule from report covers and docs, carried onto the page. */
.site__content {
  max-width: var(--prose-max);
  padding-left: var(--space-6);
  border-left: var(--rule-margin) solid var(--border);
}

.site__title {
  margin: 0;
  padding-bottom: var(--space-6);
  font-family: var(--font-editorial);
  font-size: var(--text-64);
  line-height: var(--lh-64);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}

.site__lead {
  margin: 0;
  font-size: var(--text-22);
  line-height: var(--lh-22);
  color: var(--text-secondary);
}

.site__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--form-max);
}

.site__join {
  margin-top: var(--space-12);
  max-width: calc(var(--form-max) + var(--space-10));
}

.site__notice {
  margin: 0;
  padding-top: var(--space-4);
  max-width: var(--form-max);
  font-size: var(--text-14);
  line-height: var(--lh-14);
  color: var(--text-secondary);
}

.site__status {
  margin: 0;
  padding-top: var(--space-16);
  font-size: var(--text-14);
  line-height: var(--lh-14);
  color: var(--text-secondary);
}

.site__footer {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  font-size: var(--text-14);
  line-height: var(--lh-14);
  color: var(--text-secondary);
}

.site__footer p {
  margin: 0;
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--border);
}

@media (max-width: 640px) {
  .site__main {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .site__content {
    padding-left: var(--space-4);
  }
}