/* =============================================================
   CoMPhy Lab · Team page (v2)
   Three sections — Present / Collaborators / Alumni — hard-
   separated, with identical photo crop (1:1, --r-md) and a
   line-clamped bio (3 lines for present, 4 for collaborators,
   unclamped for alumni). Driven by _data/team.yml.
   ============================================================= */

.team-page {
  width: min(100% - 2rem, var(--maxw-page));
  margin: 0 auto;
  padding: var(--s-9) 0 var(--s-8);
  position: relative;
  z-index: 1;
}

.team-page__head {
  max-width: 68ch;
  margin: 0 auto var(--s-8);
  text-align: center;
}

.team-page__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--t-track-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--s-4);
}

.team-page__kicker .rule {
  width: 32px;
  height: 1px;
  background: var(--c-border-strong);
}

.team-page__title {
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

.team-page__lede {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--fg-1);
  margin: 0;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  font-variation-settings: "opsz" 18;
}

/* -- Roster group head -------------------------------------- */
.roster { display: grid; gap: var(--s-8); }

.roster__group { scroll-margin-top: var(--s-7); }

.roster__group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.roster__group-head h2 {
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--fg-strong);
  margin: 0;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}

.roster__group-head span {
  font-family: var(--t-mono);
  font-size: 12px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-5);
}

.t-member {
  display: grid;
  gap: var(--s-3);
  scroll-margin-top: var(--s-7);
}

.t-member__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-brand-purple) 8%, var(--c-paper-tint));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: 48px;
  color: var(--c-brand-purple);
  letter-spacing: -0.02em;
  border: 1px solid var(--c-border);
  position: relative;
}

[data-theme="dark"] .t-member__photo {
  color: #d99adc;
  background: color-mix(in srgb, var(--c-brand-purple) 18%, var(--c-paper-tint));
}

.t-member__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Missing-asset stripe */
.t-member__photo--ph:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(15, 12, 8, 0.025) 0 8px,
    transparent 8px 16px
  );
  pointer-events: none;
}

[data-theme="dark"] .t-member__photo--ph:after {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0 8px,
    transparent 8px 16px
  );
}

.t-member__name {
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 24;
  line-height: 1.25;
  margin: 0;
}

.t-member__role {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.4;
}

.t-member__bio {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
  max-width: 42ch;
  margin: 0;
}

.t-member__links {
  display: flex;
  gap: var(--s-2);
  margin-top: 2px;
}

.t-member__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg-strong) 5%, transparent);
  color: var(--fg-2);
  border-bottom: 0;
}

.t-member__links a:hover {
  background: color-mix(in srgb, var(--c-accent-teal) 12%, transparent);
  color: var(--c-accent-teal);
}

.t-member__links i { font-size: 13px; }

/* The PI tile gets teal framing to stand out */
.t-member--pi .t-member__photo {
  background: color-mix(in srgb, var(--c-accent-teal) 12%, var(--c-paper-tint));
  color: var(--c-accent-teal);
  border-color: color-mix(in srgb, var(--c-accent-teal) 30%, transparent);
}

/* Link used on the name to deep-link to /team#slug */
.t-member__name-link {
  color: inherit;
  border-bottom: 0;
  text-decoration: none;
}

.t-member__name-link:hover { color: var(--c-accent-teal); }

@media (max-width: 520px) {
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .t-member__photo { aspect-ratio: 1 / 1; }

  .t-member__photo { font-size: 36px; }
}

/* --- Neutralise legacy .team-section / .team-grid layout ---
   The old team.html layout rendered heading-driven sections with
   styles in team.css. If a page still carries that markup it
   inherits new tokens through bridge.css; we just silence the
   overriding background-colors so paper shows through. */
.team-section, .team-grid, .team-member { background: transparent; }

/* --- Photo-free compact tiles for collaborators + alumni.
   Collaborators and alumni lists are long and the photo slot
   adds noise without signal — we don't typically have consistent
   headshots for collaborators, and alumni are defined by their
   project rather than their face. Drop the photo bed, tighten
   the bio clamp, let the grid pack more per row. */
#collaborators .t-member__photo,
#alumni .t-member__photo { display: none; }

#collaborators .t-member,
#alumni .t-member {
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-surface-strong);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

#collaborators .t-member__bio { -webkit-line-clamp: 4; }

/* Alumni bios sometimes carry a 'finished MPhys / went to X / now at Y'
   sentence that runs longer than collaborator one-liners. Let them flow. */
#alumni .t-member__bio { -webkit-line-clamp: unset; display: block; }

/* =========================================================
   World map — team / collaborators / talks / conference visits.
   Section sits below alumni; iframe is lazy-loaded by the script
   in _team/index.md. Style mirrors the rest of the team page:
   serif title + mono num, 4 chip legend, paper-tinted card frame.
   ========================================================= */
.t-map {
  margin-top: var(--s-9);
  scroll-margin-top: var(--s-7);
}

.t-map__head { max-width: 68ch; margin: 0 0 var(--s-6); }

.t-map__num {
  font-family: var(--t-mono);
  font-size: var(--t-small);
  color: var(--fg-2);
  letter-spacing: var(--t-track-wide);
  display: block;
  margin-bottom: var(--s-2);
}

.t-map__title {
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--s-3);
  line-height: 1.2;
}

.t-map__sub {
  font-size: var(--t-body);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  line-height: 1.55;
}

.t-map__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-small);
  color: var(--fg-1);
}

.t-map__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t-map__legend strong { color: var(--fg-strong); font-weight: 600; }

.t-map__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--fg-strong) 20%, transparent);
}

/* Match the four Google-Maps marker colours so the legend reads
   together with the iframe content. */
.t-map__dot--hometown { background: #f29900; }

.t-map__dot--collab   { background: #3aa757; }

.t-map__dot--talk     { background: var(--c-brand-purple); }

.t-map__dot--visit    { background: var(--fg-3); }

/* Map frame — paper-tint card with the iframe filling it. */
.t-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-paper-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.t-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.t-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  font-family: var(--t-mono);
  font-size: var(--t-small);
}

@media (max-width: 760px) {
  .t-map__frame { aspect-ratio: 4 / 3; }
}

/* Alumni thesis link — PDF icon + italic title, coral accent */
.t-member__thesis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-accent-coral);
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent-coral) 30%, transparent);
  text-decoration: none;
  margin-top: 4px;
  padding-bottom: 1px;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease), border-bottom-color var(--dur-fast) var(--ease);
}

.t-member__thesis:hover {
  color: var(--c-accent-teal);
  border-bottom-color: var(--c-accent-teal);
}

.t-member__thesis i { font-size: 11px; flex-shrink: 0; }

.t-member__thesis em { font-style: italic; }

:root[data-theme="dark"] .t-member__thesis { color: #f96; }

:root[data-theme="dark"] .t-member__thesis:hover { color: var(--c-accent-teal); }

/* Denser grid for the photo-less lists */
#collaborators .roster-grid,
#alumni .roster-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}