body { background: var(--bg); }

.about-page { max-width: 680px; margin: 0 auto; padding: 40px 24px 90px; }

.about-head { margin-bottom: 30px; }
.about-head .brand { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.about-head h1 { font-family: var(--serif); font-size: 28px; margin: 0; }

.about-bio { font-family: var(--sans); }
.about-bio p {
  font-size: 15.5px; line-height: 1.75; color: var(--ink-dim);
  margin: 0 0 20px; max-width: 62ch;
}
.about-lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  color: var(--ink); font-style: italic;
}
.about-bio a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); }
.about-bio a:hover { border-bottom-color: var(--accent-2); }

.about-cta {
  margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.about-cta a {
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color .15s, border-color .15s;
}
.about-cta a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* the contact form that used to be its own page — folded in here since
   its whole content was one short form, and About already ended with a
   "Get in touch" link pointing at it */
#contact.contact-card { margin-top: 40px; scroll-margin-top: 24px; }
.contact-heading { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.contact-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-dim); }

@media (max-width: 480px) {
  .about-page { padding: 30px 18px 70px; }
  .about-lede { font-size: 17px; }
}