/* ABOUT */

.about-intro {
  padding-top: 25vh;
  padding-bottom: 15vh;
}

.about-name-phonetic {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-secondary-on-light);
  transition: color var(--transition-slow);
}


.about-body {
  grid-column: 7 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-16);
  font-size: var(--text-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-primary-on-light);
  text-wrap: pretty;
  transition: color var(--transition-slow);
  max-width: var(--text-max-width);
}

body.is-dark-section .about-body {
  color: var(--color-text-primary-on-dark);
}

body.is-dark-section .about-name-phonetic {
  color: var(--color-text-secondary-on-dark);
}

.about-photo {
  grid-column: 2 / span 2;
  grid-row: 1;
  align-self: end;
  overflow: hidden;
  background-color: var(--color-bg-light-gray);
  aspect-ratio: 4/5;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  

/* OFF SCREEN — snapshot gallery */
.about-offscreen {
  padding-top: var(--spacing-160);
  padding-bottom: var(--spacing-160);
}

.offscreen-label {
  grid-column: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.offscreen-label-sticky {
  position: sticky;
  top: var(--spacing-120);
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-4);
  padding-right: var(--spacing-16);
}

.offscreen-label h2 {
  font-family: var(--font-family);
  font-size: var(--text-heading-24);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-body);
  color: var(--color-text-primary-on-light);
  transition: color var(--transition-slow);
}

.offscreen-label p {
  font-family: var(--font-family);
  font-size: var(--text-body-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary-on-light);
  text-wrap: pretty;
  transition: color var(--transition-slow);
}

body.is-dark-section .offscreen-label h2 {
  color: var(--color-text-primary-on-dark);
}

body.is-dark-section .offscreen-label p {
  color: var(--color-text-secondary-on-dark);
}

.offscreen-gallery {
  grid-column: 3 / -1;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-80);
}

.offscreen-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}

.offscreen-row:nth-child(1) > :nth-child(1) { grid-column: 1 / span 2; }
.offscreen-row:nth-child(1) > :nth-child(2) { grid-column: 3 / span 2; }
.offscreen-row:nth-child(1) > :nth-child(3) { grid-column: 7 / span 2; }

.offscreen-row:nth-child(2) > :nth-child(1) { grid-column: 3 / span 2; }
.offscreen-row:nth-child(2) > :nth-child(2) { grid-column: 5 / span 2; }
.offscreen-row:nth-child(2) > :nth-child(3) { grid-column: 9 / span 2; }

.offscreen-row:nth-child(3) > :nth-child(1) { grid-column: 1 / span 2; }
.offscreen-row:nth-child(3) > :nth-child(2) { grid-column: 5 / span 2; }
.offscreen-row:nth-child(3) > :nth-child(3) { grid-column: 7 / span 2; }
.offscreen-row:nth-child(3) > :nth-child(4) { grid-column: 9 / span 2; }

.offscreen-item {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-8);
}

.offscreen-image {
  width: 100%;
  height: auto;
  background-color: var(--color-bg-light-gray);
}

.offscreen-caption {
  font-family: var(--font-family);
  font-size: var(--text-caption-13);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary-on-light);
  text-wrap: balance;
  transition: color var(--transition-slow);
}

body.is-dark-section .offscreen-caption {
  color: var(--color-text-secondary-on-dark);
}





@media (max-width: 768px) {
  .about-intro {
  padding-top: 8vh;
  padding-bottom: 5vh;
  }

  .about-photo {
    grid-column: 3 / span 2;
    grid-row: auto;
    align-self: auto;
    order: 1;
    margin-top: var(--spacing-32);
  }

  .about-body {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 2;
    margin-top: var(--spacing-32);
  }

  .about-offscreen {
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
  }

  .offscreen-label {
    grid-column: 1 / -1;
  }

  .offscreen-gallery {
    grid-column: 1 / -1;
    display: block;
    column-count: 2;
    column-gap: var(--gutter-mobile);
    margin-top: var(--spacing-32);
  }

  .offscreen-row {
    display: contents;
  }

  .offscreen-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--spacing-32);
  }
}