/* Personal introduction and project stories share the site's colour tokens. */
.profile { padding-top: 64px; padding-bottom: 40px; }
.profile-intro { max-width: 800px; padding-bottom: 64px; }
.profile-role { color: var(--accent); font-weight: 600; margin: 0 0 16px; }
.profile h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 24px; }
.profile-lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.65; color: var(--dim); max-width: 58ch; }
.profile-section { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.profile h2 { margin: 0 0 18px; font-size: 28px; letter-spacing: -.02em; }
.profile h3 { margin: 0; font-size: 22px; line-height: 1.3; }
.profile p { max-width: 66ch; }
.profile-story { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.profile-story p:first-child { margin-top: 0; }
.profile-story p, .profile-section-intro, .project-summary > p, .profile-contact > p { color: var(--dim); }
.project-story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
.project-story + .project-story { border-top: 1px solid var(--line); }
.project-image { display: block; border-radius: 12px; }
.project-image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.project-image.portrait { max-width: 300px; width: 100%; justify-self: center; }
.profile-contact { padding-bottom: 48px; }
.top nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
@media (max-width: 760px) {
  .profile { padding-top: 40px; }
  .profile-intro { padding-bottom: 40px; }
  .profile-story, .project-story { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project-story { padding: 28px 0; }
}