/* ============================================================
   Team page redesign — mirrors the homepage (redesign.css) pass.
   Scoped to body.team-refined. Loaded AFTER styles.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged. Same visual language as the home page:
   hairline cards, one restrained accent, calm steel-navy, no side-tab bars.
   ============================================================ */

/* ---- Design tokens (same values as redesign.css) ---- */
.team-refined {
  --ink-900: #0c2143;   /* deepest navy for display type */
  --accent: #12457e;    /* single restrained accent */
  --rule: #e7ecf2;      /* hairline */
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;     /* faint cool panel */
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Browser surfaces (themed, not default) ---- */
.team-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.team-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Heading colour scoped to page content; never the dark footer
   (whose headings stay white) or the banner h1 (white on the photo). ---- */
.team-refined section h2,
.team-refined section h3,
.team-refined section h4 { color: var(--ink-900); }

/* Section heads: serif display, tight tracking, calm rhythm (rhythm kept
   from the live site — no extra padding). */
.team-refined .section-head h2 {
  font-family: var(--serif); font-weight: 600;
  letter-spacing: -0.018em;
}
.team-refined .section-head .lead { color: var(--slate); }

/* Section kickers (eyebrows): keep them, restyle to the refined tracked
   accent label — mirrors the home page exactly. */
.team-refined section .eyebrow {
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent);
}

/* ============================================================
   PAGE BANNER — keep height & geometry; blue-hue overlay so the
   photo still reads. Banner link stays white/underlined (on navy).
   ============================================================ */
.team-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.37) 100%);
}
.team-refined .page-banner h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.018em;
}
/* keep the banner link white + underlined (sits on navy) */
.team-refined .page-banner p a { color: #fff; text-decoration: underline; }
.team-refined .page-banner p a:hover { color: #eaf2fb; }

/* ============================================================
   ATTENDINGS — detailed rows. Remove the thick blue side-tab bar
   (the biggest AI tell) → hairline. Calm the bright blues to steel.
   ============================================================ */
.team-refined .person {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.team-refined .person:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
/* plain 3-up card variant (not used here, but keep the tab bar off) */
.team-refined .people-grid:not(.people-grid--detailed) .person-body { border-top: 0; }

/* detailed rows: drop the 3px side-tab, use a 1px hairline divider */
.team-refined .people-grid--detailed .person:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-card);
}
.team-refined .people-grid--detailed .person-body {
  border-top: none; border-left: 1px solid var(--rule);
}

.team-refined .person-body h3 {
  font-family: var(--serif); font-weight: 600;
  color: var(--ink-900); letter-spacing: -0.018em;
}
.team-refined .person-body h3 a { color: inherit; }
.team-refined a.person:hover h3,
.team-refined .person-body h3 a:hover { color: var(--accent); }
.team-refined .person-body p { color: var(--slate); }

/* subsection labels: calm the bright blue-dark to the single accent */
.team-refined .person-details { border-top: 1px solid var(--rule); }
.team-refined .person-details h4 { color: var(--accent); }
.team-refined .person-details li,
.team-refined .person-details p { color: var(--slate); }
.team-refined .person-details a { color: var(--accent); }
.team-refined .person-details a:hover { color: var(--ink-900); }

/* ============================================================
   FELLOWS + APPs — calm roster cards (incl. enlarged --lg variant)
   ============================================================ */
.team-refined .fellow {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.team-refined .fellow:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-card);
  border-color: var(--rule-strong); background: #fff;
}
.team-refined .fellow .initials {
  background: var(--ink-900); font-family: var(--serif);
}
.team-refined .fellow strong { font-family: var(--sans); color: var(--ink-900); }
.team-refined .fellow span { color: var(--slate-light); }

/* ============================================================
   PAST FELLOWS — same hairline card language, calm hover
   ============================================================ */
.team-refined .past-fellow {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.team-refined .past-fellow:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.team-refined .past-fellow > strong { color: var(--ink-900); }
.team-refined .past-fellow-affiliation { color: var(--ink-900); }
.team-refined .past-fellow .past-fellow-position { color: var(--slate); }
.team-refined .past-fellow .past-fellow-date { color: var(--slate-light); }

/* ============================================================
   MOTION — honour reduced-motion for every transition above
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .team-refined .person,
  .team-refined .fellow,
  .team-refined .past-fellow {
    transition: none;
  }
  .team-refined .person:hover,
  .team-refined .people-grid--detailed .person:hover,
  .team-refined .fellow:hover,
  .team-refined .past-fellow:hover {
    transform: none;
  }
}

/* Banner height reduced ~20% (owner request) */
.team-refined .page-banner { padding: 40px 0; }