:root {
  color-scheme: light;
  color: #252822;
  background: #f6f4ed;
  font: 100%/1.65 system-ui, sans-serif;
}

body { margin: 0; }

nav, main, footer {
  width: min(100% - 2rem, 42rem);
  margin-inline: auto;
}

header { border-block-end: 1px solid #dcd9cc; }

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.2rem;
  padding-block: 1.1rem;
}

a { color: #215347; text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid #215347; outline-offset: .2em; }
.brand { margin-inline-end: auto; font-size: 1.25rem; font-weight: 700; }
[aria-current="page"] { font-weight: 700; }

main { padding-block: clamp(2.5rem, 6vw, 4.25rem); }

h1, h2 {
  color: #22281f;
  font-family: Georgia, serif;
  line-height: 1.16;
}

h1 { margin-block: 0 .6em; font-size: clamp(2.2rem, 7vw, 3.5rem); }
h2 { margin-block: 1.45em .4em; font-size: 1.65rem; }
p { margin-block: .6em 1em; }
ul { padding-inline-start: 1.35em; }
li + li { margin-block-start: .65em; }
.eyebrow { color: #515c4f; font-size: .95rem; }

footer {
  border-block-start: 1px solid #dcd9cc;
  padding-block: 1.3rem 2.4rem;
  color: #515c4f;
  font-size: .93rem;
}