/* About page (KAN-452). Layered on blog-editorial.css, which supplies the tokens, type, header and footer. */

/* The hero shares the body's 720px column; the blog hero is 1120px wide because articles have a contents sidebar. */
.about-hero { max-width: 720px; }
.about-body { max-width: 720px; margin: auto; padding: 0 32px 72px; }
.about-lead { font-size: 22px; line-height: 1.6; }

/* Founders: two photos side by side. The WebP files are already cut to a circle with a transparent corner. */
.about-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 24px 0 0; list-style: none; }
.about-founder { margin: 0; text-align: center; }
.about-founder__photo { display: block; width: 180px; height: 180px; margin: 0 auto 16px; object-fit: contain; }
.about-founder__name { margin: 0 0 4px; color: var(--blog-maroon); }
.about-founder__role { margin: 0; color: var(--blog-muted); font-size: 16px; }

.about-contact { padding: 0; list-style: none; }
.about-contact li { padding: 12px 0; margin: 0; border-top: 1px solid #c6b8b5; }

@media (max-width: 540px) {
  .about-body { padding: 0 20px 48px; }
  .about-lead { font-size: 20px; }
  .about-founders { gap: 20px; }
  .about-founder__photo { width: 128px; height: 128px; }
  .about-founder__name { font-size: 18px; }
  .about-founder__role { font-size: 14px; }
}