/* ==========================================================================
   Marlowe & Finch — instructor.css
   Instructors listing (faculty groups) + instructor profile hero.
   Ported from design-mockup/css/style.css.
   ========================================================================== */

.profile-hero{ padding: 72px 0 96px; border-bottom: 1px solid var(--border); }
.profile-hero .wrap{
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.profile-portrait img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 6px solid var(--cream);
  outline: 1px solid var(--border-strong);
  filter: sepia(0.1) saturate(0.9);
}
.profile-info h1{ margin-top: 16px; font-size: 42px; }
.profile-info .role{
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--secondary);
  font-size: 17px;
}
.profile-info .bio{ margin-top: 26px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.8; max-width: 560px; }
.profile-stats{
  display: flex;
  gap: 40px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.profile-stats div strong{ display: block; font-family: var(--font-serif); font-size: 22px; color: var(--primary); }
.profile-stats div span{ font-size: 12px; color: var(--ink-muted); }

.faculty-group{ margin-bottom: 64px; }
.faculty-group:last-child{ margin-bottom: 0; }
.faculty-group > .eyebrow{ display: inline-flex; margin-bottom: 28px; }
.faculty-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px;
}