/* ============================================================
   About — the turn out of the hero.

   Follows the architecture practice's Intro block: a tall photograph
   on the left carrying a caption plate, the statement and the reading
   on the right, and the figures ruled off underneath. The old version
   was two columns of text with a drawn line between them, which asked
   the reader to start reading before they had been shown anything.
   ============================================================ */

.about { overflow: clip; }

.about__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 6vw, 6rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .about__layout { grid-template-columns: minmax(280px, 5fr) 7fr; }
}

/* ---- The photograph ---- */

.about__figure { position: relative; }
.about__figure .media { aspect-ratio: 4 / 5; }

/* ---- Copy ---- */

/* The page's thesis, and so still the largest heading below the
   hero — but no longer the 62px it used to be. It now tops out
   between the section scale and the hero, which is the only place
   a statement heading can sit without either shouting over the
   headline above it or disappearing into the sections below. */
.about__lead h2 {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.875rem);   /* 24 -> 46 */
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 22ch;
}

.about__copy { margin-top: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: 1.15rem; }
.about__copy p {
  color: var(--muted);
  line-height: 1.75;
  max-width: 54ch;
  text-wrap: pretty;
}
.about__copy strong { color: var(--fg); font-weight: 500; }

/* ---- Figures — the count and its dimension line ---- */

.about__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--gutter);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.metric { position: relative; }

.metric__value {
  display: block;
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--t-numeral);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--fg);
}

/* The dimension line drawn under a figure as it counts. */
.metric__bar {
  display: block;
  height: 1px;
  margin-top: 0.7rem;
  background: var(--fg);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left center;
}

.metric__label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

.metric__note {
  margin-top: 0.5rem;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--muted);
  max-width: 32ch;
}

@media (prefers-reduced-motion: reduce) {
  .metric__bar { transform: scaleX(1); }
}