/* ==========================================================================
   team.css — a Team profile at /team/<slug>/

   `Form_Team_Full_Bios_v6_BEN_BIO_UPDATED.html` (Ben, 22 Sep 2026), its second
   and cleaner treatment: the one that takes its cue from the live Form
   profiles rather than making each person a card-based landing page.

   Ported values rather than eyeballed ones. Where the prototype names a raw
   colour that the theme already has as a token, the token is used — `--paper`,
   `--ink`, `--orange`, `--line` — so a profile follows the site rather than
   drifting from it.

   Breakpoints follow the theme's four approved states, not the prototype's
   1000/650: the prototype was written standalone and the site's states win,
   as they do in every other family here.
   ========================================================================== */

/* ------------------------------------------------------- the introduction */
.profile-top {
	padding: max(54px, var(--header-clear)) 0 34px;   /* the back link is the first thing on the page: never under the header */
	background: var(--paper);
}

.profile-top .backlink {
	display: inline-block;
	margin-bottom: 24px;
	font-size: max(calc(12px * var(--type-small)), var(--type-floor));
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 800;
}

.profile-top .backlink:hover,
.profile-top .backlink:focus-visible {
	color: var(--orange-text);
}

.profile-role {
	margin-bottom: 12px;
	font-size: calc(15px * var(--type-reading));
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 800;
}

.profile-name-compact {
	margin: 0;
	max-width: 1100px;
	font-size: 56px;
	line-height: .9;
	letter-spacing: var(--tr-display);
	font-weight: 900;
}

.profile-intro-compact {
	margin: 28px 0 0;
	max-width: 820px;
	color: #4f4a44;
}

/* ------------------------------------------------------------- the sheet */
.profile-sheet {
	padding: 22px 0 68px;
	background: #fff;
}

.profile-sheet-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	align-items: start;
}

.profile-photo {
	margin: 0;
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	background: #191919;
}

.profile-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1/1.06;
	object-fit: cover;
}

/*
 * The initials stand-in has to hold the same box as a portrait, or a person
 * without one collapses the column.
 */
.profile-photo .person-image-fallback {
	position: relative;
	inset: auto;
	width: 100%;
	aspect-ratio: 1/1.06;
}

.profile-photo figcaption {
	padding: 15px 18px 16px;
	background: #1c1c1c;
	color: #fff;
	font-size: max(calc(11.5px * var(--type-small)), var(--type-floor));
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 800;
}

.profile-qa-wrap {
	min-width: 0;
}

.profile-qa-head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}

.profile-qa-head h2 {
	margin: 0;
	font-size: clamp(38px,4vw,58px);
	line-height: .98;
	letter-spacing: var(--tr-display);
	font-weight: 900;
}

/* --------------------------------------------------------------- the Q&A */
/*
 * The hierarchy is the point: the question is the louder of the two. Ben
 * raised the questions by 20% to 15.6px on 22 Sep 2026 and left the answers
 * where they were, so the question leads and the answer stays quiet and easy
 * to read.
 */
.qa-grid-compact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 36px;
	border-top: 0;
}

.qa-grid-compact .qa {
	padding: 18px 0 20px;
	border-bottom: 1px solid var(--line);
}

.qa-grid-compact .qa span:not(.qa-answer) {
	display: block;
	margin-bottom: 7px;
	font-size: var(--fs-body);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	font-weight: 800;
}

.qa-grid-compact .qa .qa-answer {
	display: block;
	font-size: var(--fs-body);
	line-height: 1.55;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--journey-lede);
}

/* ------------------------------------------------------ back to the team */
.team-return {
	padding: 48px 0;
	background: var(--paper);
	border-top: 1px solid rgba(17,17,17,.08);
}

.team-return-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

.team-return h2 {
	margin: 0;
	max-width: 760px;
	font-size: clamp(38px,4.5vw,62px);
	line-height: .97;
	letter-spacing: var(--tr-display);
	font-weight: 900;
}

.team-return .btn {
	justify-self: start;
}

/* ------------------------------------------------------------ 651+ tablet */
@media screen and (min-width: 651px) {

	.profile-top {
		padding: max(72px, var(--header-clear)) 0 40px;
	}

	.profile-name-compact {
		font-size: clamp(62px,7vw,102px);
	}


	.profile-sheet {
		padding: 34px 0 92px;
	}

	.profile-photo img,
	.profile-photo .person-image-fallback {
		aspect-ratio: 1/1.1;
	}

	.qa-grid-compact {
		grid-template-columns: 1fr 1fr;
	}

	.qa-grid-compact .qa {
		padding: 22px 0 24px;
	}

}

/* ------------------------------------------------- 1101+ the two columns */
@media screen and (min-width: 1101px) {

	.profile-sheet-grid {
		grid-template-columns: minmax(360px,.82fr) minmax(0,1.18fr);
		gap: 56px;
	}

	/*
	 * The portrait follows a long set of answers down the page. `top` clears
	 * the sticky header rather than guessing: `--header-h` is the same token
	 * the header itself is built from.
	 */
	.profile-photo {
		position: sticky;
		top: calc(var(--header-h) + 30px);
	}

	.team-return-grid {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {

	.profile-photo {
		position: relative;
		top: auto;
	}

}