.about-page {
  --about-accent-green: #3C8707;
  --about-accent-pink: #FF4BB7;
  --about-link: #006FE8;
  --about-copy-max: 36rem;
  --highlight-pink: color-mix(in srgb, var(--about-accent-pink) 40%, white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--viewport-height) - var(--nav-top-height));
  padding-top: calc(var(--page-pad-top) + var(--about-pad-top-extra));
  padding-bottom: calc(var(--pin-pad) + var(--about-pad-bottom-extra) + env(safe-area-inset-bottom, 0px));
}

.about-page-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-left: var(--page-pad-left);
  padding-right: var(--page-pad-right);
}

.about-page-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(38rem, 100%);
  margin-inline: auto;
  text-align: left;
}

.about-sections {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--about-section-gap);
}

.about-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-md);
  width: 100%;
  text-align: left;
}

.about-section__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--case-body-size);
  font-weight: var(--type-ui-weight);
  line-height: var(--case-body-lh);
  letter-spacing: var(--case-body-track);
  color: var(--case-ink);
}

.about-section__body {
  width: 100%;
  min-width: 0;
}

.about-section-divider {
  margin: 0;
  border: 0;
  border-top: var(--case-rule);
  width: 100%;
  max-width: var(--about-copy-max);
}

.about-bio {
  width: 100%;
  max-width: var(--about-copy-max);
  font-size: var(--case-body-size);
  line-height: var(--case-body-lh);
  color: var(--case-ink);
  text-align: left;
  text-wrap: pretty;
}

.about-bio p {
  margin: 0;
}

.about-bio p + p {
  margin-top: var(--prose-gap);
}

.about-accent {
  color: var(--case-ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: var(--highlight-pad-block) var(--highlight-pad-inline);
  border-radius: var(--highlight-radius);
}

.about-accent--green {
  background-color: var(--highlight-green);
}

.about-accent--pink {
  background-color: var(--highlight-pink);
}

.about-bio__email {
  color: var(--about-link);
  text-decoration: none;
  transition: none;
}

.about-bio__email:hover,
.about-bio__email:focus-visible,
.about-bio__email:active {
  color: var(--about-link);
  background: none;
  text-decoration: none;
  opacity: 1;
}

.about-touch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--space-inline-list);
}

.about-touch-item {
  display: block;
}

.about-touch-item a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--case-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--case-body-lh);
  letter-spacing: var(--case-body-track);
  color: var(--case-ink);
  text-decoration: none;
}

.about-touch-item a:hover,
.about-touch-item a:focus-visible {
  color: var(--link-hover-pink);
}

@media (max-width: 1024px) {
  .about-page {
    justify-content: flex-start;
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .about-section {
    gap: var(--space-stack-sm);
  }

  .about-touch-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--case-callout-item-gap);
  }
}