/* =====================================================================
   about.css — About page composition
   ===================================================================== */

/* A large page title; the section below brings its own spacing. */
.page-header--display {
  border-bottom: 0;
  margin-bottom: 0;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem);
}

.page-header--display h1 {
  font-size: clamp(2.5rem, 7.2vw, 5.75rem);
  line-height: 0.98;
}

/* ---------- Portrait pair ---------- */
.about-media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}

.about-media .ph:first-child { aspect-ratio: 16 / 9; }

/* The narrow frame stretches to whatever height the portrait sets. */
.about-media .ph:last-child { height: 100%; }

/* ---------- Three columns of detail ---------- */
.about-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  padding-top: var(--space-md);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--rule);
}

.about-col .col-title {
  margin-bottom: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.about-list li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.about-list li:last-child { border-bottom: 0; }

.about-list__title {
  display: block;
  font-weight: 500;
}

.about-list__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.about-list a { transition: color 0.15s ease; }
.about-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.about-col .btn { margin-top: 1.25rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .about-media {
    grid-template-columns: 1fr;
  }

  .about-media .ph:last-child {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .about-cols {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}