* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fffdf8;
  color: #202020;
  font: 18px/1.5 Georgia, "Times New Roman", serif;
}
.titlebar { border-bottom: 1px solid #777; background: #f3efe5; }
.titlebar > div { max-width: 48rem; margin: 0 auto; padding: .65rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.site-name { color: #202020; text-decoration: none; font-size: 1.1rem; }
.titlebar nav { margin: 0; font-size: .92rem; }
main { max-width: 48rem; margin: 3rem auto; padding: 0 1.25rem; }
h1 { margin: 0; font-size: 2rem; font-weight: normal; }
h2 { margin: 2.25rem 0 .5rem; font-size: 1.35rem; font-weight: normal; border-bottom: 1px solid #aaa; }
p { margin: .55rem 0; }
.headshot { float: left; width: 9rem; height: 9rem; margin: 0 1.5rem 1rem 0; border-radius: 50%; object-fit: cover; }
a { color: #003c78; }
a:hover { color: #7a1f13; }
nav { margin-top: 1.25rem; }
ol, ul { padding-left: 1.4rem; }
li { margin: .7rem 0; }
.entries span, .muted, footer { color: #555; font-size: .92rem; }
footer { margin: 3rem 0 1rem; border-top: 1px solid #aaa; padding-top: .75rem; }
@media (max-width: 36rem) {
  body { font-size: 17px; }
  .titlebar > div { display: block; }
  .titlebar nav { margin-top: .35rem; }
  main { margin: 1.5rem auto; }
  .headshot { width: 7rem; height: 7rem; margin-left: 1rem; }
}