:root { --maxw: 72ch; }
* { box-sizing: border-box; }
html { line-height: 1.5; }
body {
  margin: 0 auto;
  padding: 2rem 1rem;
  max-width: var(--maxw);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  color: #111111;
}
a { color: inherit; }
a:hover, a:focus { text-decoration: none; background-color:#ccc; border-bottom:5px solid red}

header { margin-bottom: 2rem; }
nav ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
nav a {
  text-decoration: none;
  padding-bottom: .1rem;
  border-bottom: 1px solid transparent;
}
nav a[aria-current="page"] {
  border-bottom-color: #000;
  font-weight: 600;
}
/* On hover we just use underline (from a:hover) without changing border,
   so there is no double line with the active-page underline. */
nav a:hover,
nav a:focus {
  aborder-bottom-color: transparent;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 1.2rem 0 .6rem;
}
h1 { font-size: 1.9rem; }
h2 {
  font-size: 1.3rem;
  border-bottom: 1px solid #000;
  padding-bottom: .25rem;
}
h3 { font-size: 1.05rem; }

p, li { font-size: 1rem; }

.subtle { color: #555; margin-top: .25rem; }

section { margin-bottom: 2rem; }

article {
  border-top: 1px solid #000;
  padding-top: .5rem;
  margin-top: .5rem;
}

/* Avoid double line when a section heading is immediately followed by an article */
h2 + article {
  border-top: none;
  margin-top: .25rem;
}

footer {
  border-top: 2px solid #000;
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: .9rem;
  color: #333;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  color: #000;
  padding: .5rem;
  border: 1px solid #000;
}

.meta {
  font-size: .9rem;
  color: #555;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*@media (prefers-color-scheme: dark) {
  body { background: #000; color: #e6e6e6; }
  h2, footer, article { border-color: #e6e6e6; }
}*/

@media print {
  nav, .skip-link { display: none !important; }
  a { text-decoration: none; }
}