/* A personal introduction using the portfolio's existing type and palette. */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s7);
  margin: var(--s6) 0 var(--s8);
}
.about-intro h1 { font-size: clamp(3rem, 6vw, 4.75rem); margin: var(--s3) 0 var(--s5); }
.about-lead { font-size: var(--text-xl); line-height: 1.4; max-width: 32ch; }
.about-context { color: var(--ink-soft); margin-top: var(--s4); max-width: 55ch; }
.about-intro .btn-row { margin-top: var(--s5); }
.about-portrait { width: 100%; max-width: 340px; justify-self: end; }
.about-story .prose { max-width: 74ch; }
.about-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--s6);
  align-items: center;
  padding: var(--s6);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--accent);
}
.about-board { display: block; }
.about-board img { width: 100%; }
.about-feature h3 { font-size: var(--text-2xl); margin: var(--s2) 0 var(--s3); }
.about-feature p + p { margin-top: var(--s3); }
.about-feature p, .about-supporting p, .about-tools dd, .about-contact p { color: var(--ink-soft); }
.about-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; font: var(--text-xs)/1.6 var(--mono); margin-top: var(--s5); }
.about-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.about-links a { font-weight: 600; text-underline-offset: 5px; }
.about-supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); }
.about-supporting article { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s5); }
.about-supporting h3 { font-size: 1.5rem; }
.about-supporting h3 a { text-decoration: none; }
.about-supporting p { margin: var(--s3) 0; }
.about-tools > div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.about-tools dt { font-weight: 600; }
.about-contact p { max-width: 64ch; }
.about-email { display: inline-block; font-size: var(--text-xl); font-weight: 600; overflow-wrap: anywhere; margin-top: var(--s5); text-underline-offset: 6px; }
@media (max-width: 640px) {
  .about-intro, .about-feature, .about-supporting { grid-template-columns: 1fr; }
  .about-intro { gap: var(--s6); margin-bottom: var(--s7); }
  .about-portrait { width: min(100%, 260px); justify-self: start; }
  .about-feature { padding: var(--s5); }
  .about-board { max-width: 240px; justify-self: center; }
  .about-tools > div { grid-template-columns: 1fr; gap: var(--s2); }
}