/* Our People — layout */
.page-people .person {
	--card-pad: 1.25rem;
	--card-gap: 1.0rem;
	--photo-size: 120px;
	--max-width: 920px;

	display: grid;
	grid-template-columns: 1fr;
	/* mobile */
	grid-template-areas:
		"photo"
		"content";
	gap: var(--card-gap);
	padding: var(--card-pad);
	margin: 0 auto 1.25rem auto;
	max-width: var(--max-width);
	background: var(--card-bg, #fff);
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
	border-radius: 16px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
	color: var(--card-fg, #111);
}

@media (min-width: 720px) {
	.page-people .person {
		grid-template-columns: var(--photo-size) 1fr;
		/* photo | content */
		grid-template-areas: "photo content";
		align-items: start;
	}
}

.page-people .person-photo {
	margin: 0;
	grid-area: photo;
	width: var(--photo-size);
	height: var(--photo-size);
}

.page-people .person-content {
	grid-area: content;
}

@media (min-width: 720px) {
	.page-people .person-photo {
		position: sticky;
		top: 1.25rem;
	}
}

.page-people .person-photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	background: #f7f7f7;
}

/* Typography */
.page-people .person h2 {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	line-height: 1.2;
}

.page-people .person .role {
	margin: .2rem 0 .9rem 0;
	font-size: .96rem;
	letter-spacing: .02em;
	opacity: .75;
}

.page-people .person p {
	margin: .6rem 0;
	line-height: 1.6;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.page-people .person {
		--card-bg: #111418;
		--card-fg: #e8ebf0;
		--card-border: rgba(255, 255, 255, 0.12);
		box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
	}

	.page-people .cta-row a:hover {
		background: rgba(255, 255, 255, .08);
	}
}