/* Team bio pages (team/*.html). Builds on site.css and pages.css (page hero, crumbs, .split).
   Each page sets --c on the hero and the focus grid to the person's colour from the company team cards. */

/* ------------------------------------------------------------------ hero: portrait + name */
.bio-hero .bio-hero-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.bio-hero h1 { max-width: 14em; }
.bio-photo { position: relative; aspect-ratio: 1; border-radius: 50%; }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--night-line-strong), 0 50px 110px -40px rgba(0, 0, 0, 0.8); }
.bio-photo::after { content: ''; position: absolute; right: 9%; bottom: 9%; width: 16px; height: 16px; background: var(--c, var(--blue)); }
.bio-role { margin-bottom: 18px; font-weight: 600; font-size: 0.98rem; color: var(--sky-strong); }
.bio-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 28px 0 0; }
.bio-chips li { padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; color: var(--mist); box-shadow: inset 0 0 0 1px var(--night-line-strong); }
.bio-hero .crumbs { margin-bottom: 22px; }
@media (max-width: 900px) {
  .bio-hero { padding-top: calc(var(--nav-h) + 36px); }
  .bio-hero .bio-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .bio-photo { width: min(200px, 52vw); }
  .bio-hero .crumbs { margin-bottom: 16px; }
}

/* ------------------------------------------------------------------ bio + facts */
.bio-body .body-copy { font-size: 1.06rem; }
.bio-body .body-copy + .body-copy { margin-top: 18px; }
.bio-body a.cite { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 149, 237, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.bio-body a.cite:hover { text-decoration-color: var(--blue); }
.bio-facts { margin: 40px 0 0; border-top: 1px solid var(--paper-ink); }
.bio-facts > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
.bio-facts dt { font-weight: 600; font-size: 0.92rem; color: var(--paper-muted); }
.bio-facts dd { margin: 0; color: var(--paper-ink); }
@media (max-width: 560px) { .bio-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ------------------------------------------------------------------ areas of focus */
.focus-card h3 { font-size: 1.5rem; }

/* ------------------------------------------------------------------ what they lead */
.bio-kicker { margin-bottom: 16px; font-weight: 600; font-size: 0.95rem; color: var(--sky-strong); }
.bio-lead-link { margin-top: 30px; }

/* ------------------------------------------------------------------ writing, talks and related reading */
.work-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-ink); }
.work-list li { border-bottom: 1px solid var(--paper-line); }
.work-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 28px; gap: 28px; align-items: start; padding: 26px 0; transition: background 0.3s; }
.work-row:hover { background: linear-gradient(90deg, rgba(0, 149, 237, 0.04), transparent 70%); }
.work-kind b { display: block; font-weight: 600; color: var(--paper-ink); }
.work-kind span { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--paper-muted); }
.work-title { display: block; font-family: var(--title); font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.2; color: var(--paper-ink); transition: color 0.2s; }
.work-row:hover .work-title { color: var(--blue); }
.work-desc { display: block; margin-top: 8px; color: var(--paper-body); max-width: 44em; }
.work-go { justify-self: end; padding-top: 6px; color: var(--blue); }
.work-go .arrow { display: inline-block; font-weight: 600; transition: transform 0.35s var(--ease-out); }
.work-row:hover .work-go .arrow { transform: translateX(4px); }
.work-go .ext { transition: transform 0.35s var(--ease-out); }
.work-row:hover .work-go .ext { transform: translate(2px, -2px); }
.related-head { margin: clamp(56px, 7vw, 88px) 0 24px; display: grid; gap: 8px; }
.related-head h3 { color: var(--paper-ink); }
@media (max-width: 720px) {
  .work-row { grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 16px; padding: 22px 0; }
  .work-kind { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .work-kind span { margin-top: 0; }
}

/* ------------------------------------------------------------------ contact + rest of the team */
.bio-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.bio-contact-card { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--paper-ink); color: var(--cream); box-shadow: 0 30px 70px -36px rgba(15, 23, 42, 0.6); }
.bio-contact-card .accent { color: var(--sky); }
.bio-contact-card p { margin-top: 16px; color: var(--mist); max-width: 34em; }
.bio-contact-card .btn-row { margin-top: 30px; }
.bio-contact-card .btn-blue { --bg: var(--blue); --fg: #fff; }
.bio-contact-card .btn-ghost { --bg: transparent; --fg: var(--cream); box-shadow: inset 0 0 0 1px var(--night-line-strong); }
.bio-team { display: flex; flex-direction: column; }
.bio-team h3 { font-size: 1.45rem; color: var(--paper-ink); margin-bottom: 14px; }
.bio-team ul { list-style: none; margin: 0 0 22px; padding: 0; }
.bio-team li + li { border-top: 1px solid var(--paper-line); }
.team-mini { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; }
.team-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--paper-line); }
.team-mini b { display: block; font-family: var(--title); font-weight: 400; font-size: 1.25rem; line-height: 1.2; color: var(--paper-ink); transition: color 0.2s; }
.team-mini span span { display: block; font-size: 0.9rem; color: var(--paper-muted); }
.team-mini:hover b { color: var(--blue); }
.bio-team .link-arrow { margin-top: auto; }
@media (max-width: 900px) { .bio-contact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bio-contact-card .btn-row .btn { width: 100%; justify-content: center; } }