/* Team member page.
   Built from the Figma bio frame (1600 x 843 cover, 638px portrait at x20/y205,
   caption at x678 bottom-aligned, 770px centred biography column). The rem
   values match the template's own scale, where 1rem = 1px at 1600. */

.hero-bio .hero-ring {
	top: min(-190px, -382rem);
	right: auto;
	left: max(230px, 713rem);
	width: max(650px, 1303rem);
}
.bio-block {
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	gap: max(12px, 20rem);
	height: auto;
	max-height: none;
	padding: max(120px, 205rem) 0 0;
}
.bio-photo {
	position: relative;
	flex: 0 0 max(280px, 638rem);
	width: max(280px, 638rem);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: max(20px, 32rem);
	background: var(--light-grey);
}
.bio-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bio-caption {
	display: flex;
	flex-direction: column;
	gap: max(20px, 40rem);
	padding: 0 0 max(4px, 8rem);
}
.bio-name {
	display: flex;
	flex-direction: column;
	gap: max(10px, 20rem);
}
.bio-position {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: max(6px, 8rem);
	font-size: var(--text_M);
	line-height: 120%;
	letter-spacing: -0.02em;
	color: var(--black-400);
}
.bio-position span + span::before {
	content: '|';
	margin-right: max(6px, 8rem);
}
.bio-scroll {
	display: inline-flex;
	align-items: center;
	gap: max(8px, 12rem);
	font-size: var(--button);
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--black);
	text-decoration: none;
	transition: color 0.4s ease-in-out;
}
.bio-scroll .icon {
	width: max(16px, 20rem);
	height: max(16px, 20rem);
	transition: transform 0.4s ease-in-out;
}
.bio-scroll:hover {
	color: var(--black-600);
}
.bio-scroll:hover .icon {
	transform: translateY(max(3px, 4rem));
}

@media screen and (max-width: 1024px) {
	.hero-bio .hero-ring {
		left: auto;
		right: min(-140px, -180rem);
		top: min(-160px, -200rem);
		width: max(520px, 900rem);
	}
}

@media screen and (max-width: 767px) {
	.bio-block {
		flex-direction: column;
		align-items: stretch;
		gap: max(24px, 24rem);
		padding: max(96px, 96rem) 0 0;
	}
	.bio-photo {
		flex: none;
		width: 100%;
	}
	.bio-caption {
		gap: max(16px, 16rem);
		padding: 0;
	}
	.bio-name {
		gap: max(8px, 8rem);
	}
	.bio-position {
		font-size: var(--text_S);
	}
	.hero-bio .hero-ring {
		right: min(-90px, -90rem);
		top: min(-70px, -70rem);
		width: max(360px, 360rem);
	}
}