/**
 * Team screen layout.
 *
 * Only the spacing and the pieces that exist nowhere else on the site live
 * here. Everything shared — .eyebrow, .pill-nav, .person, .grid--people,
 * .team-group__heading, .chip, .btn, .cta-strip, .prose — is implemented in
 * main.css and must not be redefined below.
 */

/* -------------------------------------------------------------------------
 * Intro
 * ---------------------------------------------------------------------- */

.team-intro {
	padding-top: var( --space-3xl );
	padding-bottom: var( --space-2xl );
}

.team-intro__title {
	margin: var( --space-lg ) 0 0;
	font-family: var( --font-display );
	font-size: var( --fs-5xl );
	font-weight: 700;
	line-height: var( --lh-tight );
	color: var( --color-ink );
}

.team-intro__lead {
	max-width: 600px;
	margin: var( --space-md ) 0 0;
	font-family: var( --font-body );
	font-size: var( --fs-lg );
	line-height: var( --lh-body );
	color: var( --color-ink-2 );
}

.team-intro .pill-nav {
	margin-top: var( --space-xl );
}

/* -------------------------------------------------------------------------
 * Groups
 * ---------------------------------------------------------------------- */

.team-group__dept {
	margin-bottom: var( --space-xl );
}

.team-group__dept-title {
	margin: 0 0 var( --space-md );
	font-family: var( --font-display );
	font-size: var( --fs-lg );
	font-weight: 600;
	color: var( --color-ink );
}

/* Glue between the avatar and the two text lines inside .person. */
.person__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Closing call to action
 * ---------------------------------------------------------------------- */

.team-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-lg );
	padding-top: var( --space-lg );
	padding-bottom: var( --space-3xl );
	border-top: 1px solid var( --rule );
}

.team-cta__title {
	margin: 0 0 var( --space-xs );
	font-family: var( --font-display );
	font-size: var( --fs-3xl );
	font-weight: 700;
	color: var( --color-ink );
}

.team-cta__text {
	max-width: 440px;
	margin: 0;
	font-family: var( --font-body );
	font-size: var( --fs-md );
	line-height: var( --lh-body );
	color: var( --color-ink-2 );
}

/* -------------------------------------------------------------------------
 * Single member
 * ---------------------------------------------------------------------- */

.team-member {
	padding-top: var( --space-2xl );
	padding-bottom: var( --space-3xl );
}

.team-member__back {
	display: inline-block;
	margin-bottom: var( --space-lg );
	font-family: var( --font-body );
	font-size: var( --fs-base );
	font-weight: 700;
}

.team-member__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-xl );
	padding-bottom: var( --space-xl );
	border-bottom: 1px solid var( --rule );
}

.team-member__portrait {
	flex: none;
	width: 160px;
	height: 160px;
	overflow: hidden;
	border-radius: 50%;
	background: var( --accent-soft );
}

.team-member__photo,
.team-member__photo-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The shared fallback is sized for a 52px card avatar; scale it up here. */
.team-member__photo-fallback {
	font-size: var( --fs-5xl );
}

.team-member__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-sm );
	min-width: 0;
}

.team-member__name {
	margin: 0;
	font-family: var( --font-display );
	font-size: var( --fs-5xl );
	font-weight: 700;
	line-height: var( --lh-tight );
	color: var( --color-ink );
}

.team-member__departments {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-xs );
	margin: 0;
}

.team-member__bio {
	margin-top: var( --space-xl );
	max-width: var( --width-content );
}

@media ( max-width: 600px ) {

	.team-intro {
		padding-top: var( --space-2xl );
	}

	.team-intro__title,
	.team-member__name {
		font-size: var( --fs-4xl );
	}

	.team-member__portrait {
		width: 120px;
		height: 120px;
	}
}