body {
  max-width: 700px;
  margin: auto;
  padding: 40px 20px;
  font: 16px/1.6 Arial, sans-serif;
  color: #222;
}

header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 16px;
}

.site-name {
  margin: 0;
  font-weight: bold;
}

nav a { margin-left: 12px; }
a { color: #222; text-underline-offset: 3px; }
a:visited { color: #222; }
main { padding: 30px 0; }
h1 { font-size: 30px; margin: 0 0 18px; }
h2 { font-size: 19px; margin: 32px 0 10px; }
p { margin: 0 0 16px; }

dt { font-weight: bold; margin-top: 15px; }
dd { margin-left: 0; }
article { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid #ddd; }
section { margin-bottom: 26px; }
figure { margin: 20px 0; }
img { max-width: 100%; height: auto; }
figure img { max-height: 420px; }
.portrait { width: 180px; height: 180px; object-fit: cover; object-position: center 20%; }
figcaption { color: #666; font-size: 14px; }

blockquote {
  margin: 25px 0 10px;
  padding-left: 15px;
  border-left: 2px solid #bbb;
}

input, textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  padding: 8px;
  border: 1px solid #aaa;
  font: inherit;
}

button { padding: 8px 14px; font: inherit; }
footer { border-top: 1px solid #ddd; padding-top: 18px; color: #666; }

@media (max-width: 600px) {
  header { display: block; }
  nav a { margin: 0 12px 0 0; }
}