/* ============================================================
   About — codex layout
   Reuses codex-home.css for masthead, footer, pills, eyebrow.
   ============================================================ */

.about {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 10vw, 128px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
}

.about > * {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


/* ===== Section header ===== */
.about__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  max-width: 900px;
}

.about__title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-text);
}

/* ===== Portrait + bio grid ===== */
.about__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.about__portrait {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-faint);
}

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding-top: var(--s-8);
}

.about__bio p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-text);
  max-width: 560px;
}

.about__lead {
  font-size: 22px !important;
  font-weight: 400;
  line-height: 1.5 !important;
  letter-spacing: -0.005em;
}

/* ===== Bio pills ===== */
.about__pills {
  margin-top: var(--s-16);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--s-32);
  }

  .about__portrait {
    aspect-ratio: 4 / 5;
    max-width: 320px;
  }

  .about__bio p { font-size: 16px; }
  .about__lead { font-size: 19px !important; }
}