/* =============================================================
   ABOUT
   Two columns: a short, human paragraph on the left; current
   focus and obsessions on the right. Disciplines, not software.
   ============================================================= */

/* About was still using the generic section padding on both
   sides (~4-8rem); the bottom, in particular, left it feeling
   disconnected from Experience right after it. */
.about {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.about__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 860px) {
  .about__inner {
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
  }
}

/* --- Left: prose ------------------------------------------- */
.about__main .eyebrow {
  margin-bottom: var(--space-5);
}

.about__prose {
  display: grid;
  gap: var(--space-5);
  max-width: 54ch;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

/* Lead paragraph carries a touch more weight */
.about__prose p:first-child {
  font-size: var(--text-lg);
  color: var(--color-text);
}

/* --- Right: focus + obsessions ----------------------------- */
.about__aside {
  display: grid;
  gap: var(--space-7);
}

.about__block-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
  /* Matches .about__main .eyebrow's margin-bottom so the prose
     and the list both start on the same line. */
  margin-bottom: var(--space-5);
}

.about__list {
  display: grid;
  gap: var(--space-3);
}

.about__list li {
  font-size: var(--text-md);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.about__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}