/**
 * BIO PAGE STYLES
 * ===================
 * Bio-specific styles. Shared layout comes from page-layout.css.
 *
 * BEM NAMING:
 * - Blocks: .bio-text
 */

/* ==========================================================================
   COMPONENTS - Bio Text
   ========================================================================== */

.page-content .bio-text {
  text-align: left;
}

.bio-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bio-text p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin: 0;
}

/* ==========================================================================
   OVERRIDES - Media Queries
   ========================================================================== */

@media (max-width: 40rem) {
  .bio-text p {
    font-size: var(--text-sm);
  }
}