*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #000; }

body {
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  line-height: 1.6;
  background: #000;
  color: #fff;
  padding: 48px 16px 64px;
}

main { max-width: 560px; margin: 0 auto; }

a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover, a:focus-visible { color: #aaa; }
a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

.site-header { display: flex; flex-direction: column; gap: 16px; }
.headshot { width: 240px; }
.headshot img { display: block; width: 100%; height: auto; margin-bottom: 4px; }
.headshot figcaption { font-size: 0.68rem; color: #888; white-space: nowrap; }
.headshot figcaption a { color: #888; }
.headshot figcaption a:hover { color: #aaa; }
h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.role, .meta { color: #aaa; }
.meta { font-size: 0.85rem; }

section { margin-top: 40px; padding-top: 20px; border-top: 1px solid #333; }

h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

section > p { margin-bottom: 12px; }

.entries { list-style: none; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 480px) {
  body { padding-top: 32px; }
  .headshot { width: 180px; }
  h1 { font-size: 1.4rem; }
}