.about {
  padding: 24px var(--page-gutter) 0;
  display: flex;
  gap: 72px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

/* First frame of the "looking down" animation, cropped to the top 800/900. */
.about__char {
  flex-shrink: 0;
  height: 100%;
  max-height: 800px;
  aspect-ratio: 467 / 800;
  background-image: url("../images/character/down-000.webp");
  background-size: 100% auto;
  background-position: 0 0;
  /* The image's green differs slightly from the page, so fade all four edges
     (the shared .char mask only fades top and bottom). */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 72%, transparent 97%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 72%, transparent 97%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.about__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3vh, 28px);
  padding-top: clamp(0px, 4vh, 48px);
}

.about__title { font-size: clamp(36px, 6.5vh, 64px); }
.about__bio { line-height: 1.6; max-width: 620px; }

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.about__fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}

.about__fact-value {
  font-size: 17px;
  line-height: 1.5;
}

.about__cta { align-self: flex-start; }

/* Rotating role in the title; about.html's script toggles .is-out. */
.flip {
  display: inline-block;
  padding: 0 0.12em;
  color: #b9d4b0;
  border-bottom: 3px solid #b9d4b0;
  transform-origin: 50% 50% -0.4em;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.flip.is-out {
  transform: rotateX(90deg);
  opacity: 0;
}

.about__fact-link {
  display: block;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1024px) {
  .about { gap: 40px; }
  .about__facts { grid-template-columns: 1fr; gap: 0; }
  .about__fact { padding-top: 16px; }
}

@media (max-width: 900px) {
  .about { flex-direction: column; align-items: stretch; padding-bottom: 56px; gap: 8px; }
  .about__char { height: 360px; align-self: center; }
  .about__content { padding-top: 0; gap: 20px; }
  .about__title { font-size: clamp(34px, 7vw, 52px); }
}

@media (max-width: 640px) {
  .about__char { height: 280px; }
}