.person-lead {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: var(--prose-max);
  margin-block-end: var(--space-40);
  margin-inline: 0 auto;
  padding: var(--space-16);
}

.person-lead__photo-link {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--radius-m);
}

.person-lead__photo {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: var(--radius-m);
}

.person-lead__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.person-lead__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

.person-lead__name a {
  color: inherit;
}

.person-lead__name a:hover {
  color: var(--color-primary);
}

.person-lead__role {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

.person-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--tap-target-min);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--color-link);
  overflow-wrap: anywhere;
}

.person-mail:hover {
  color: var(--color-link-hover);
}

.person-mail svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.person-groups > .c-grid:empty {
  display: none;
}

.person-groups > .c-grid + .c-grid {
  margin-top: var(--space-40);
}

.resume-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.resume-head__photo {
  flex: 0 0 auto;
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: var(--radius-m);
}

.resume-head__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.resume-head__body .page-head__kicker {
  margin-bottom: 0;
}

.resume-head__name {
  max-width: 20ch;
}

.resume-head__role {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-secondary);
}

.resume-main {
  max-width: var(--prose-max);
  min-width: 0;
}

.resume-block + .resume-block {
  margin-top: var(--space-40);
}

.resume-block__title {
  margin-bottom: var(--space-24);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
}

.resume-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.resume-row + .resume-row {
  margin-top: var(--space-16);
}

.resume-row .c-badge {
  justify-self: start;
  white-space: nowrap;
}

.resume-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.resume-row__name {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

.resume-row__note {
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

.resume-side {
  gap: var(--space-24);
}

.resume-side__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}

.resume-side__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: 0;
  font-weight: var(--fw-semibold);
}

.resume-side__text {
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  white-space: pre-line;
}

.resume-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
}

@media (min-width: 768px) {
  .person-lead {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    padding: var(--space-24);
  }

  .person-lead__photo {
    width: 200px;
    height: 200px;
  }

  .resume-head {
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
  }

  .resume-head__photo {
    width: 168px;
    height: 168px;
  }

  .resume-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-24);
    align-items: start;
  }

  .resume-row + .resume-row {
    margin-top: var(--space-20);
  }
}