/* about.css, About article page */

main { max-width: 720px; margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) 1.5rem 5rem; }
main h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); line-height: 1.05; }
.lead { font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--text-2); margin-top: 1.3rem; max-width: 52ch; }
main h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: -0.015em; margin: 2.8rem 0 .8rem; }
main p { color: color-mix(in srgb, var(--text) 82%, var(--text-2)); font-size: 1.08rem; margin: 0 0 1rem; }
main p strong { color: var(--text); font-weight: 600; }
.rule { height: 1px; background: var(--border); border: 0; margin: 3rem 0; }
.ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* Team */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.4rem 0 .5rem; }
.member {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding: 1.6rem; text-align: center;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s;
}
.member:hover { transform: translateY(-5px); box-shadow: var(--clay-shadow); }
.member-avatar {
  display: block; width: 96px; height: 96px; margin: 0 auto .95rem; border-radius: 50%;
  overflow: hidden; box-shadow: 0 8px 20px rgba(60, 70, 130, 0.22);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.member:hover .member-avatar { transform: scale(1.06) rotate(-3deg); }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Monogram fallback (photo missing) + the Claude Code tile */
.member-avatar .mono-initials { display: none; }
.member-avatar.mono { display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep)); }
.member-avatar.mono .mono-initials { display: block; color: #fff; font: 700 1.7rem var(--round); letter-spacing: -.02em; }
.member-avatar.cc .mono-initials { font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.05em; }
.member h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.member-role { color: var(--accent-deep); font: 600 .82rem var(--mono); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .6rem; }
.member-bio { color: var(--text-2); font-size: .95rem; margin: 0; }

@media (max-width: 520px) { .team { grid-template-columns: minmax(0, 1fr); } }