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

html {
  background: var(--ds-bg-0);
  color: var(--ds-text-0);
}

body {
  margin: 0;
  min-height: 100%;
  font: var(--ds-type-body);
  background: var(--ds-bg-0);
  color: var(--ds-text-0);
}

a {
  color: var(--ds-accent);
  text-decoration-thickness: var(--ds-border-width);
  text-underline-offset: var(--ds-space-1);
}

a:hover {
  color: var(--ds-text-0);
}

.site-header,
.site-footer,
main {
  width: min(42rem, calc(100% - var(--ds-space-8)));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--ds-space-7);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-text-0);
  text-decoration: none;
  font: var(--ds-type-label);
}

.brand img {
  width: var(--ds-space-8);
  height: auto;
}

nav a {
  font: var(--ds-type-label);
  color: var(--ds-text-1);
  text-decoration: none;
}

nav a[aria-current="page"],
nav a:hover {
  color: var(--ds-text-0);
}

.eyebrow {
  margin: var(--ds-space-10) 0 var(--ds-space-3);
  font: var(--ds-type-eyebrow);
  letter-spacing: var(--ds-track-upper);
  text-transform: uppercase;
  color: var(--ds-accent);
}

h1 {
  margin: 0 0 var(--ds-space-5);
  font: var(--ds-type-display);
  font-size: var(--ds-text-3xl);
  letter-spacing: var(--ds-track-display);
  line-height: var(--ds-leading-tight);
}

.lede {
  margin: 0 0 var(--ds-space-7);
  font: var(--ds-type-body-medium);
  font-size: var(--ds-text-lg);
  color: var(--ds-text-1);
}

main p {
  margin: 0 0 var(--ds-space-5);
  color: var(--ds-text-1);
}

.doc h2 {
  margin: var(--ds-space-8) 0 var(--ds-space-3);
  font: var(--ds-type-label);
  font-size: var(--ds-text-xl);
  color: var(--ds-text-0);
}

.site-footer {
  display: flex;
  gap: var(--ds-space-6);
  padding-block: var(--ds-space-10) var(--ds-space-12);
  font: var(--ds-type-caption);
  color: var(--ds-text-2);
}

.site-footer a {
  color: var(--ds-text-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ds-text-0);
}