body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

header, main, footer {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 16px;
}

header {
  max-width: none;
  padding-block: 12px;
  background: linear-gradient(var(--felt-light), var(--felt));
}

header a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

a { color: var(--link); }

img { max-width: 100%; height: auto; }

.hero { text-align: center; padding-block: 24px 8px; }
.hero img { border-radius: 22%; }
.hero h1 { margin: 12px 0 0; }
.subtitle { margin: 0; color: var(--muted); font-size: 1.1rem; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.details dt { font-weight: 600; }
.details dd { margin: 0; }

footer { padding-block: 24px; color: var(--muted); font-size: 0.9rem; }
footer nav a { margin-inline-end: 16px; }

@media (max-width: 30rem) {
  .details { grid-template-columns: 1fr; gap: 0; }
  .details dd { margin-bottom: 12px; }
}