.about-me-page {
  --about-accent: #c9a8ff;
  --about-text: #f5f1fa;
  --about-bg: #0e0a1c;
  /* Same width as .portfolio-container so content lines up with the header */
  --about-content-width: min(1150px, calc(100% - clamp(40px, 11.4vw, 168px)));
  min-width: 320px;
  margin: 0;
  padding: 0;
  color: var(--about-text);
  background: var(--about-bg);
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Same light palette as the homepage light mode */
:root[data-portfolio-theme="light"] .about-me-page {
  --about-accent: #4d317b;
  --about-text: #0e0a1c;
  --about-bg: #f5f1fa;
}

.about-me-page .portfolio-header {
  width: 100%;
  margin: 0;
}

.about-me-page main {
  width: 100%;
}

.about-me-page main section {
  margin: 0;
  padding: 0;
  border: 0;
}

.about-me-page .about-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.35fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  width: var(--about-content-width);
  margin: clamp(24px, 3vw, 48px) auto clamp(80px, 10vw, 140px);
}

.about-intro__profile {
  min-width: 0;
  margin: 0;
}

.about-intro__portrait {
  overflow: hidden;
  border-radius: 16px;
}

.about-intro__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  text-align: left;
}

.about-intro__name {
  color: var(--about-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.about-intro__caption {
  opacity: 1;
}

.about-intro__role {
  color: var(--about-accent);
  font-size: 18px;
  line-height: 1.4;
}

.about-intro__portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-intro__copy {
  min-width: 0;
}

/* The homepage diagram links to these ("Why empathy? →" and so on). Room
   is kept above for the navigation if it stays on screen, plus a gap. */
.about-intro__copy > p[id] {
  scroll-margin-top: calc(var(--about-header-offset, 0px) + 32px);
}

/* The paragraph a visitor arrived at glows briefly, without moving the
   text, so it's clear where they've landed */
.about-intro__copy > p:target {
  border-radius: 6px;
  animation: about-arrived 2400ms ease-out;
}

@keyframes about-arrived {
  from,
  30% {
    background: color-mix(in srgb, var(--about-accent) 16%, transparent);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--about-accent) 16%, transparent);
  }
}

.about-eyebrow {
  margin: 0 0 24px;
  color: var(--about-accent);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.about-me-page .about-intro h1 {
  width: auto;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  color: var(--about-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.23;
  text-align: left;
}

.about-intro h1 span,
.about-intro__copy > p:not(.about-eyebrow) span {
  color: var(--about-accent);
}

.about-intro__copy > p:not(.about-eyebrow),
.about-section__inner > p:not(.about-eyebrow),
.about-interests__grid p {
  margin: 0 0 24px;
  color: var(--about-text);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.6;
}

.about-me-page .about-gallery {
  --flip-duration: 400ms;
  --flip-easing: cubic-bezier(0.4, 0, 0.2, 1);
  width: var(--about-content-width);
  margin: 0 auto clamp(80px, 10vw, 140px);
}

.about-me-page .about-gallery h2 {
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding: 0;
  border: 0;
  color: var(--about-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.23;
  text-align: center;
}

/* Focus lands on the heading after switching moments, so keyboard users
   carry on from the top of the gallery */
.about-me-page .about-gallery h2:focus {
  outline: none;
}

.about-me-page .about-gallery h2:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--about-accent);
  outline-offset: 6px;
}

.about-gallery__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

.about-gallery__toggle {
  display: inline-flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 1.5px solid var(--about-accent);
  border-radius: 999px;
  color: var(--about-text);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.about-gallery__toggle:hover {
  background-color: rgb(154 98 246 / 16%);
  box-shadow: 0 0 0 4px rgb(154 98 246 / 20%);
}

.about-gallery__toggle:active {
  box-shadow: 0 0 0 2px rgb(154 98 246 / 20%);
}

.about-gallery__toggle:focus-visible {
  outline: 3px solid var(--about-accent);
  outline-offset: 3px;
}

.about-gallery__toggle svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--flip-duration) var(--flip-easing);
}

[data-flipped="true"] .about-gallery__toggle svg {
  transform: rotate(180deg);
}

/* Both labels share one cell, so the button keeps the width of the longer
   one and the heading doesn't shift when it changes */
.about-gallery__toggle-labels {
  display: grid;
}

.about-gallery__toggle-label {
  grid-area: 1 / 1;
}

.about-gallery__toggle-label--back,
[data-flipped="true"] .about-gallery__toggle-label:not(.about-gallery__toggle-label--back) {
  visibility: hidden;
}

[data-flipped="true"] .about-gallery__toggle-label--back {
  visibility: visible;
}

/* Each item grows by its image's aspect ratio, so every image in a row
   ends up the same height */
.about-gallery__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 40px);
}

.about-gallery__row + .about-gallery__row {
  margin-top: clamp(40px, 5vw, 72px);
}

.about-gallery figure {
  min-width: 0;
  margin: 0;
}

.about-gallery__row > figure {
  flex: var(--ratio) 1 0;
  min-width: 0;
}

/* A card is two photos back to back. The flip turns the card in place, so
   its size and position never change. */
.about-gallery__card {
  perspective: 1600px;
}

.about-gallery__flip {
  position: relative;
  aspect-ratio: var(--ratio);
  transform-style: preserve-3d;
}

.about-gallery__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: zoom-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.about-gallery__frame:focus-visible {
  outline: 3px solid var(--about-accent);
  outline-offset: 4px;
}

.about-gallery__photo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  transition: transform 300ms var(--flip-easing);
}

/* Trims the empty bars above and below the video call screenshot so both
   rows of tiles stay in view */
.about-gallery__photo--top {
  object-position: center 51%;
}

/* Frames the "Take-Home Message" title, the quote and the kids' video tiles
   on the Sunday school slide */
.about-gallery__photo--bottom {
  object-position: center 62%;
}

/* A gentle lean-in shows the photo opens. Hover only on devices that can
   hover, so taps don't get stuck. */
.about-gallery__frame:focus-visible .about-gallery__photo {
  transform: scale(1.04);
}

@media (hover: hover) {
  .about-gallery__frame:hover .about-gallery__photo {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .about-gallery__flip {
    transition: transform var(--flip-duration) var(--flip-easing)
      var(--flip-delay, 0ms);
  }

  .about-gallery__frame--back {
    transform: rotateY(180deg);
  }

  [data-flipped="true"] .about-gallery__card:has(.about-gallery__frame--back) .about-gallery__flip {
    transform: rotateY(180deg);
  }
}

/* Reduced motion: the photos and captions switch instantly instead of
   turning */
@media (prefers-reduced-motion: reduce) {
  .about-me-page .about-gallery {
    --flip-duration: 0ms;
  }

  .about-intro__copy > p:target {
    animation: none;
  }

  /* Overrides the per-card offset set inline by the script */
  .about-gallery__card {
    --flip-delay: 0ms !important;
  }

  .about-gallery__frame--back,
  [data-flipped="true"] .about-gallery__card:has(.about-gallery__frame--back) .about-gallery__frame:not(.about-gallery__frame--back) {
    opacity: 0;
  }

  [data-flipped="true"] .about-gallery__frame--back {
    opacity: 1;
  }

  .about-gallery__photo,
  .about-gallery__toggle svg {
    transition: none;
  }

  .about-gallery__frame:focus-visible .about-gallery__photo,
  .about-gallery__frame:hover .about-gallery__photo,
  [data-flipped="true"] .about-gallery__toggle svg {
    transform: none;
  }

  /* A slight brighten stands in for the zoom */
  .about-gallery__frame:focus-visible .about-gallery__photo,
  .about-gallery__frame:hover .about-gallery__photo {
    filter: brightness(1.08);
  }
}

/* Both captions share one cell, so the caption area keeps the height of the
   longer one. The old caption fades out over the first half of the flip and
   the new one fades in over the second half. */
.about-gallery figcaption {
  display: grid;
  width: auto;
  margin: 16px 0 0;
  color: var(--about-text);
  font-style: normal;
  text-align: left;
  opacity: 1;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}

.about-gallery__caption {
  grid-area: 1 / 1;
  transition: opacity calc(var(--flip-duration) / 2) ease
    calc(var(--flip-duration) / 2 + var(--flip-delay, 0ms));
}

.about-gallery__caption--back,
[data-flipped="true"] .about-gallery__card:has(.about-gallery__caption--back) .about-gallery__caption:not(.about-gallery__caption--back) {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity calc(var(--flip-duration) / 2) ease var(--flip-delay, 0ms),
    visibility 0s linear calc(var(--flip-duration) / 2 + var(--flip-delay, 0ms));
}

[data-flipped="true"] .about-gallery__caption--back {
  visibility: visible;
  opacity: 1;
  transition: opacity calc(var(--flip-duration) / 2) ease
    calc(var(--flip-duration) / 2 + var(--flip-delay, 0ms));
}

@media (max-width: 768px) {
  .about-me-page .about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 24px;
  }

  .about-intro__profile {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .about-gallery__row {
    flex-direction: column;
    align-items: stretch;
  }

  .about-gallery__row > figure {
    flex: none;
  }

  .about-gallery__row + .about-gallery__row {
    margin-top: 40px;
  }

}

@media (max-width: 660px) {
  .about-me-page {
    --about-content-width: calc(100% - 40px);
  }

  /* A wider target that's easy to reach with a thumb */
  .about-gallery__toggle {
    width: min(100%, 360px);
  }
}