/* People page specific styles */

:root{
  --avatar-size: 140px;
}

/* Use for the people grid container */
.people-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

/* Card */
.person{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color:inherit; text-decoration:none;
}
.person:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--brand) 25%, var(--line));
}

/* Uniform avatars */
.person img{
  width:var(--avatar-size);
  height:var(--avatar-size);
  object-fit:cover;
  border-radius:50%;              /* circle avatars; remove if you prefer rounded-squ*

/* ---------- People: Intro band ---------- */
.people-intro{
  margin: 8px 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(241,245,249,.55), rgba(241,245,249,.32));
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.people-kicker{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px;
}
.people-kicker span{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(2,132,199,.10);
  border:1px solid rgba(2,132,199,.28);
  color:#065f46;                 /* teal accent */
  font-weight:600;
  font-size:.9rem;
}

.people-lede{
  color:#334155;                 /* slate-700 */
  font-size:1.05rem;
  line-height:1.75;
  letter-spacing:-.005em;
  max-width: 70ch;               /* elegant reading width */
  margin:2px 0 0;
  text-wrap: pretty;
  hyphens:auto;
  font-feature-settings:"liga","kern","onum";
}

/* (Optional) tighten on small screens */
@media (max-width: 900px){
  .people-lede{ font-size:1rem; line-height:1.7; }
}
/* ===== People: intro card ===== */

.people-intro{
  margin: 18px 0 28px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,0.65); /* subtle background */
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
  max-width: 72ch;
}

.people-lede{
  color:#334155;                /* slate-700 */
  font-size:1.05rem;
  line-height:1.7;
  margin:0 0 14px 0;
  text-align: justify;
}

/* Tags as muted pill-buttons */
.people-tags{
  display:flex; gap:10px; flex-wrap:wrap;
}

.people-tags .tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:#334155;
  background:rgba(226,232,240,0.7); /* slate-200-ish */
  border:1px solid rgba(203,213,225,0.6);
  transition: all .2s ease;
}

.people-tags .tag:hover{
  background:rgba(203,213,225,0.9); 
  border-color: rgba(148,163,184,0.9);
  transform: translateY(-1px);
}
/* ===== Generic card box ===== */
.card-box {
  padding: 22px 24px;
  margin: 20px 0 30px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff; /* white but sits above gray page */
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}

/* Intro text */
.people-lede{
  color:#334155;
  font-size:1.05rem;
  line-height:1.75;
  margin:0 0 16px 0;
  max-width: 70ch;
}

/* Tag pills */
.people-tags{
  display:flex; gap:10px; flex-wrap:wrap;
}

.people-tags .tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:#334155;
  background:rgba(241,245,249,0.9);  /* light gray */
  border:1px solid rgba(226,232,240,0.9);
  transition: all .2s ease;
}

.people-tags .tag:hover{
  background:rgba(226,232,240,1);
  border-color: rgba(203,213,225,1);
  transform: translateY(-1px);
}