/* ==========================================================================
   About chapter — an asymmetric spread: the statement and its photograph on
   one side, the six values as a numbered editorial index on the other.
   No cards, no icons; the numerals carry the hierarchy.
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 1rem + 5vw, 7rem);
  align-items: start;
}

/* ---- Statement side --------------------------------------------------------- */

.about__statement { position: sticky; top: 7.5rem; }

.about__title {
  margin-block: var(--space-5) var(--space-6);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.about__lead {
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.95;
}

/* Two photographs, the smaller one overlapping the larger — a composition
   rather than two images stacked in a column. */
.about__media {
  position: relative;
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  padding-inline-end: clamp(2rem, 1rem + 5vw, 6rem);
  padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.about__media-main { width: 100%; height: auto; }

.about__media-inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: clamp(8rem, 5rem + 14vw, 15rem);
  height: auto;
  border: 6px solid var(--bone-100);
}

/* ---- Value index -------------------------------------------------------------- */

.values { counter-reset: value; }

.value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
  padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-top: 1px solid var(--rule-on-bone);
}

.value:first-child { border-top: 0; padding-top: 0; }

.value::before {
  content: counter(value, decimal-leading-zero);
  counter-increment: value;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  color: var(--bone-fg);
  opacity: 0.22;
  transition: opacity var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}

.value:hover::before { opacity: 1; color: var(--accent-ink); }

.value__title {
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.45;
}

.value__text {
  max-width: 46ch;
  color: var(--bone-fg-soft);
  font-size: var(--fs-sm);
  line-height: 1.85;
}