/* Bio ======================================================================
   Figma: bio · W 1280 · H 728 (hug) · padding 48 · no fill of its own
   content: W 580, centred, vertical auto layout, gap 24
   text:    gap 12, 5 paragraphs, Title (20) = Inter 20/32, Grey (12)
   button:  centred, outlined, 153 × 48
   ========================================================================== */

.bio {
  padding-block: var(--container-pad);
  /* It used to sit on the body's light base; that is dark now, see base.css. */
  background: var(--color-bg);

  /* Seam cover for the boundary below — see the note on .work in works.css.
     This is the one the black line was reported on: light bio over blue dap,
     with the body's #1F1F1F behind the pair. */
  box-shadow: 0 1px 0 0 var(--color-bg);
}

/* Grid container: the column width resolves against this */
.bio__inner {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 6 columns (50%), centred. Full width on mobile. */
.bio__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* columns only from 64rem — see hero.css */
@media (width >= 64rem) {
  .bio__content { width: var(--w-6); }
}

.bio__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.bio__text p {
  font-size: var(--title-20-size);
  line-height: var(--title-20-leading);
  letter-spacing: var(--title-20-tracking);
  font-weight: var(--title-20-weight);
  color: var(--color-text);
}

.bio__actions {
  display: flex;
  justify-content: center;
}