/**
 * About and Contribute pages (page-templates/template-about.php and
 * template-contribute.php). Loaded only on those pages.
 * Same tokens, cards and rhythm as the homepage.
 */

/* Short orange rule above section titles, as on the homepage. */
.sn-about .sn-section__head .sn-section__title::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: var(--sn-accent);
}

/* Shared card look. */
.sn-about-note,
.sn-about-numbers__list,
.sn-about-steps__marker,
.sn-about-member,
.sn-award {
	border: 1px solid var(--sn-border);
	background: var(--sn-card);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
}

/* 2. Story + founder's note ----------------------------------------------------- */
.sn-about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

/* Only the story, or only the note. */
.sn-about-story__grid--single {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}

.sn-about-story__text {
	max-width: 680px;
	font-size: 1.0625rem;
}

/* The story's opening heading reads as the section title. */
.sn-about-story__text > h2:first-child {
	margin-bottom: 0.6em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: -0.025em;
	line-height: 1.2;
}

/* A short quote in the founder's own words, signed with photo and name. */
.sn-about-note {
	position: sticky;
	top: 96px;
	margin: 0;
	padding: 28px;
	border-top: 3px solid var(--sn-accent);
	border-radius: var(--sn-radius-lg);
}

.sn-about-note__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

/* A large, faded opening quotation mark: typography, not an icon. */
.sn-about-note__quote::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin: -4px 0 14px -2px;
	color: var(--sn-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	font-style: normal;
	line-height: 1;
	opacity: 0.35;
}

[data-theme="dark"] .sn-about-note__quote::before {
	opacity: 0.5;
}

.sn-about-note__quote p {
	margin: 0;
	color: var(--sn-text);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.7;
}

.sn-about-note__person {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--sn-border);
}

.sn-about-note__photo {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--sn-card), 0 0 0 4px var(--sn-border);
}

.sn-about-note__person > span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.sn-about-note__person strong {
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
}

.sn-about-note__person span span {
	color: var(--sn-accent-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

[data-theme="dark"] .sn-about-note__person span span {
	color: var(--sn-accent);
}

/* 3. Numbers ------------------------------------------------------------------- */
.sn-about-numbers {
	padding-block: clamp(36px, 5vw, 64px);
}

.sn-about-numbers__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	overflow: hidden;
	border-radius: var(--sn-radius-lg);
}

.sn-about-numbers__list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sn-about-numbers__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sn-about-numbers__list--1 {
	grid-template-columns: minmax(0, 1fr);
}

.sn-about-numbers__item {
	display: flex;
	flex-direction: column-reverse; /* Number above its label. */
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	padding: clamp(22px, 3vw, 32px) 16px;
	text-align: center;
}

.sn-about-numbers__item + .sn-about-numbers__item {
	border-left: 1px solid var(--sn-border);
}

.sn-about-numbers__item dt {
	color: var(--sn-muted);
	font-size: 0.9375rem;
}

.sn-about-numbers__item dd {
	margin: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sn-about-numbers__item--accent dd {
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-about-numbers__item--accent dd {
	color: var(--sn-accent);
}

/* 4. How our notes are made ------------------------------------------------------ */
.sn-about-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A dashed line linking the four markers. */
.sn-about-steps::before {
	content: "";
	position: absolute;
	top: 28px;
	right: 12.5%;
	left: 12.5%;
	border-top: 2px dashed var(--sn-border);
}

.sn-about-steps__item {
	position: relative;
	text-align: center;
}

.sn-about-steps__marker {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	color: var(--sn-primary);
}

.sn-about-steps__number {
	position: absolute;
	top: -4px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sn-accent-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
}

[data-theme="dark"] .sn-about-steps__number {
	background: var(--sn-accent);
	color: var(--sn-navy-950);
}

.sn-about-steps__title {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.sn-about-steps__text {
	max-width: 30ch;
	margin: 0 auto;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* 5. Team ----------------------------------------------------------------------- */
/* Four cards per row, all the same width. A row that isn't full (e.g. a
   5th or 6th member, or a small team) is centred, so it never looks
   unfinished. Cards in a row share the tallest card's height. */
.sn-about-team {
	--sn-team-cols: 4;
	--sn-team-gap: 20px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sn-team-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-about-team > .sn-about-member {
	flex: 0 0 calc((100% - (var(--sn-team-cols) - 1) * var(--sn-team-gap)) / var(--sn-team-cols));
	min-width: 0;
}

.sn-about-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 22px 24px;
	border-radius: var(--sn-radius-lg);
	text-align: center;
}

.sn-about-member__photo {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	margin-bottom: 16px;
	border: 4px solid var(--sn-card);
	border-radius: 50%;
	background: var(--sn-primary-soft);
	box-shadow: 0 0 0 1px var(--sn-border), 0 8px 20px rgba(6, 53, 116, 0.12);
	object-fit: cover;
}

.sn-about-member__photo--initial {
	color: var(--sn-primary);
	font-family: var(--sn-font-heading);
	font-size: 2.25rem;
	font-weight: 800;
}

.sn-about-member__name {
	margin: 0;
	line-height: 1.3;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.sn-about-member__role {
	margin: 4px 0 0;
	line-height: 1.4;
	color: var(--sn-accent-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

[data-theme="dark"] .sn-about-member__role {
	color: var(--sn-accent);
}

/* Optional one-line subtitle, e.g. "Cancer Researcher". */
.sn-about-member__subtitle {
	margin: 4px 0 0;
	color: var(--sn-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Links sit at the bottom so cards in a row line up. */
.sn-about-member__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: auto 0 0;
	padding: 16px 0 0;
	list-style: none;
}

.sn-about-member__links a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sn-border);
	border-radius: 50%;
	color: var(--sn-muted);
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.sn-about-member__links a:hover,
.sn-about-member__links a:focus-visible {
	border-color: var(--sn-primary);
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

/* 6. Recognition & press ------------------------------------------------------- */
#recognition {
	scroll-margin-top: 72px; /* Lands below the sticky header from "Read our story". */
}

.sn-about-awards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-about-awards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 860px;
	margin-inline: auto;
}

.sn-about-awards--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 440px;
	margin-inline: auto;
}

.sn-award {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	border-top: 3px solid var(--sn-accent);
	border-radius: var(--sn-radius-lg);
}

.sn-award__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-award__icon {
	color: var(--sn-accent);
}

.sn-award__place {
	margin: 0;
	color: var(--sn-accent-ink);
	font-family: var(--sn-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

[data-theme="dark"] .sn-award__place {
	color: var(--sn-accent);
}

.sn-award__title {
	margin: 6px 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

.sn-award__meta {
	margin: 4px 0 0;
	color: var(--sn-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.sn-award__text {
	margin: 12px 0 0;
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* The link sits at the bottom so cards in a row line up. */
.sn-award__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--sn-link);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.sn-award__link:hover {
	text-decoration: underline;
}

/* "Featured in: A · B" under the cards. */
.sn-about-press {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	margin: 32px 0 0;
	text-align: center;
}

.sn-about-awards + .sn-about-press {
	padding-top: 28px;
	border-top: 1px solid var(--sn-border);
}

/* The divider spans the cards above it, not the whole page. */
.sn-about-awards--2 + .sn-about-press {
	max-width: 860px;
	margin-inline: auto;
}

.sn-about-awards--1 + .sn-about-press {
	max-width: 440px;
	margin-inline: auto;
}

.sn-about-press__label {
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sn-about-press__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

a.sn-about-press__item:hover {
	color: var(--sn-link);
	text-decoration: underline;
}

.sn-about-press__item .sn-icon {
	color: var(--sn-muted);
}

/* Tablets ----------------------------------------------------------------------- */
@media (max-width: 860px) {
	.sn-about-team {
		--sn-team-cols: 2;
	}

	.sn-about-team > .sn-about-member {
		max-width: 300px;
	}
}

@media (max-width: 960px) {
	.sn-about-story__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sn-about-awards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sn-about-story__text {
		max-width: none;
	}

	.sn-about-note {
		position: static;
		max-width: 680px;
	}

	.sn-about-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
	}

	.sn-about-steps::before {
		display: none;
	}
}

/* Phones ------------------------------------------------------------------------ */
@media (max-width: 640px) {
	.sn-about-numbers__list,
	.sn-about-numbers__list--3,
	.sn-about-numbers__list--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sn-about-numbers__item + .sn-about-numbers__item {
		border-left: 0;
	}

	.sn-about-numbers__item:nth-child(even) {
		border-left: 1px solid var(--sn-border);
	}

	.sn-about-numbers__item:nth-child(n + 3) {
		border-top: 1px solid var(--sn-border);
	}

	/* An odd last item spans the row. */
	.sn-about-numbers__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Steps as a vertical list: marker on the left, line between markers. */
	.sn-about-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.sn-about-steps::before {
		display: block;
		top: 28px;
		bottom: 28px;
		right: auto;
		left: 27px;
		border-top: 0;
		border-left: 2px dashed var(--sn-border);
	}

	.sn-about-steps__item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		text-align: left;
	}

	.sn-about-steps__marker {
		grid-row: span 2;
		margin: 0;
	}

	.sn-about-steps__title {
		align-self: end;
		margin-top: 4px;
	}

	.sn-about-steps__text {
		max-width: none;
		margin: 0;
	}

	/* Short cards fit two to a row on phones. */
	.sn-about-team {
		--sn-team-gap: 12px;
	}

	.sn-about-team > .sn-about-member {
		max-width: none;
	}

	.sn-about-member {
		padding: 20px 12px 18px;
	}

	.sn-about-member__photo {
		width: 80px;
		height: 80px;
		margin-bottom: 12px;
	}

	.sn-about-member__photo--initial {
		font-size: 1.75rem;
	}

	.sn-about-member__name {
		font-size: 1rem;
	}

	.sn-about-member__role,
	.sn-about-member__subtitle {
		font-size: 0.8125rem;
	}

	.sn-about-member__links {
		gap: 6px;
		padding-top: 12px;
	}

	.sn-about-member__links a {
		width: 32px;
		height: 32px;
	}

	.sn-about-note {
		padding: 22px 20px;
	}

	.sn-about-awards,
	.sn-about-awards--2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.sn-award {
		padding: 22px 20px 20px;
	}

	.sn-about-press {
		flex-direction: column;
		gap: 10px;
	}
}

/* Contribute page (page-templates/template-contribute.php) ------------------- */
.sn-contrib__intro {
	max-width: 680px;
	margin: -12px auto 32px;
	text-align: center;
}

.sn-contrib-who,
.sn-contrib-benefits {
	display: grid;
	gap: 20px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sn-contrib-who {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 900px;
}

.sn-contrib-benefits {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sn-contrib-card {
	padding: 28px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
}

.sn-contrib-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-contrib-card--accent .sn-contrib-card__icon {
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-contrib-card--accent .sn-contrib-card__icon {
	color: var(--sn-accent);
}

.sn-contrib-card__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.sn-contrib-card__text {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.sn-contrib__jump {
	margin: 32px 0 0;
	text-align: center;
}

/* Guidelines beside the form. */
.sn-contrib-apply {
	scroll-margin-top: 72px;
}

.sn-contrib-apply__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	align-items: start;
	gap: clamp(28px, 4vw, 48px);
	max-width: 1040px;
}

.sn-contrib-apply__grid--single {
	grid-template-columns: minmax(0, 680px);
	justify-content: center;
}

.sn-contrib-rules {
	position: sticky;
	top: 96px;
	padding: 26px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
}

.sn-contrib-rules__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.sn-contrib-rules__title .sn-icon {
	color: var(--sn-primary);
}

.sn-contrib-rules__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-contrib-rules__list li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.sn-contrib-rules__list .sn-icon {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-contrib-form {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--sn-border);
	border-top: 3px solid var(--sn-accent);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
}

.sn-contrib-form__title {
	margin: 0 0 8px;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	letter-spacing: -0.02em;
}

.sn-contrib-form__intro {
	margin: 0 0 24px;
	color: var(--sn-muted);
	line-height: 1.65;
}

@media (max-width: 960px) {
	.sn-contrib-benefits {
		grid-template-columns: minmax(0, 1fr);
		max-width: 620px;
	}

	.sn-contrib-apply__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 680px;
	}

	.sn-contrib-rules {
		position: static;
	}
}

@media (max-width: 640px) {
	.sn-contrib-who {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.sn-contrib-benefits {
		gap: 14px;
	}

	.sn-contrib-card {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 14px;
		padding: 20px 18px;
	}

	.sn-contrib-card__icon {
		grid-row: span 2;
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.sn-contrib-card__title {
		margin: 2px 0 4px;
	}

	.sn-contrib-rules {
		padding: 22px 20px;
	}
}