html, body {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  max-width: 70ch;
  margin: 0 auto;
  padding-inline: 1.25rem;
  line-height: 1.6;
  color: #111;
  background: #fff;
}

a { color: #0645ad; }
a:visited { color: #663399; }

.topbar {
  padding-block: 1rem;
  border-bottom: 1px solid #ccc;
}

.brand { color: #111; text-decoration: none; }
.brand-mark { font-weight: bold; margin-right: .5rem; }
.brand-name { font-size: .85rem; }
.archive-status { display: none; }

.topnav { margin-top: .75rem; }
.topnav a { margin-right: 1rem; }

.hero { padding-block: 3rem; }
.eyebrow { font-size: .8rem; color: #555; }
.intro { font-size: 1.1rem; max-width: 60ch; }

.primary-browse {
  margin-block: 2rem;
  padding-block: 1rem;
  border-block: 1px solid #ccc;
}

.primary-browse a {
  display: block;
  padding-block: .75rem;
}

.primary-browse small,
.primary-browse strong,
.primary-browse span { display: block; }
.primary-browse strong { font-size: 1.2rem; }
.primary-browse span { font-size: .85rem; color: #555; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 2rem;
  margin-block: 2rem;
}

.stats div { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; }
.stats strong { font-weight: normal; }
.stats span { color: #555; font-size: .8rem; }

.about-section { padding-block: 2rem 5rem; border-top: 1px solid #ccc; }
.about-section h2 { font-size: 1.5rem; margin-bottom: .5rem; }

@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
  .topnav a { display: block; margin-block: .3rem; }
}