body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: "Mona Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); }

.bar { background: var(--green); color: #fff; }
.bar__inner, .doc, .foot { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.bar__inner { height: 72px; display: flex; align-items: center; gap: 14px; }
.bar a { color: #fff; text-decoration: none; font-weight: 700; font-stretch: 112.5%; font-size: 20px; }
.bar span { font-size: 13px; color: var(--green-muted); }

.doc { padding-top: 48px; padding-bottom: 48px; }
.doc h1 { color: var(--ink); font-size: clamp(32px, 5vw, 44px); line-height: 1.15; font-stretch: 112.5%; margin: 0 0 8px; }
.doc h2 { color: var(--ink); font-size: 22px; line-height: 1.3; margin: 40px 0 8px; }
.doc .meta { color: var(--ink-muted); font-size: 15px; margin: 0 0 32px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }

.foot { border-top: 1px solid var(--rule); padding-top: 20px; padding-bottom: 32px; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; }