body {
  max-width: 36rem;
  margin: 3rem auto;
  padding: 0 1.25rem;
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  background: #fff;
}
.portrait {
  width: 8rem; height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  margin-bottom: 1.5rem;
}
.portrait img {
  /* Scaled up and nudged so the frame sits on the face only,
     keeping the wall behind out of shot. */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 14%;
  transform: scale(1.45);
  transform-origin: 38% 14%;
  filter: brightness(1.12) contrast(0.97);
}
h1 { font-size: 1.6rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
.sub { color: #666; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 2.25rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul { padding-left: 1.1rem; }
li { margin-bottom: .5rem; }
.cta {
  display: inline-block; margin-top: .25rem;
  padding: .6rem 1.3rem; border-radius: 5px;
  background: #1c4f7c; color: #fff;
  text-decoration: none; font-weight: 600;
}
.alt { font-size: .92rem; color: #666; }
a { color: #1c4f7c; }
footer {
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid #ddd;
  font-size: .87rem; color: #666;
}
footer a { color: #666; }
.fine { font-size: .8rem; line-height: 1.5; }
@media (prefers-color-scheme: dark) {
  body { background: #14181d; color: #e6e9ed; }
  .sub, .alt, footer, footer a { color: #98a3ae; }
  a, .cta { color: #8ab8e4; }
  .cta { background: #1c4f7c; color: #fff; }
  footer { border-color: #2a323a; }
}