body {
  color: var(--color-ink);
  background: var(--color-surface-alt);
  font-family: var(--font-body);
  line-height: var(--line-height-base);
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
code { overflow-wrap: anywhere; }

.site-header {
  background: var(--color-surface);
  border-bottom: var(--border-width-thick) solid var(--color-ink);
}

.site-header__inner, main, .site-footer__inner {
  width: min(100% - 2 * var(--gutter), 860px);
  margin-inline: auto;
}

.site-header__inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-header img { display: block; width: 160px; max-width: 100%; }
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-3); font-weight: 700; }

main { padding-block: var(--space-6) var(--space-7); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; }
h1, h2 { font-family: var(--font-heading); line-height: var(--line-height-snug); }
h1 { font-size: 3.25rem; margin: var(--space-2) 0 var(--space-3); }
h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
p, ul { margin: 0 0 var(--space-3); }
li + li { margin-top: var(--space-2); }
.lead { font-size: var(--text-lg); max-width: 65ch; }
.notice {
  border: var(--border-width-thick) solid var(--color-ink);
  background: var(--color-warning-surface);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  margin-block: var(--space-5);
}
section { border-top: var(--border-width) solid var(--color-ink); padding-block: var(--space-4); }
section p:last-child, section ul:last-child { margin-bottom: 0; }
.site-footer { border-top: var(--border-width-thick) solid var(--color-ink); background: var(--color-surface); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); }

@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  .site-header__inner { align-items: flex-start; flex-direction: column; padding-block: var(--space-3); }
  .site-header nav { gap: var(--space-2); }
}