/* crippen-site-front: C2c · Masthead, ambient band (ticket 03, Round 3). Values are the prototype's. */

/* ---- Take over Astra's page frame on this page only (body.crippen-front is added in assets.php) ---- */
body.crippen-front,
body.crippen-front #page,
body.crippen-front #content {
	background: var(--crippen-paper);
}

body.crippen-front #content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

body.crippen-front #primary,
body.crippen-front.ast-separate-container #primary,
body.crippen-front.ast-separate-container.ast-two-container #primary {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
}

body.crippen-front #secondary {
	display: none;
}

body.crippen-front .ast-article-single,
body.crippen-front.ast-separate-container .ast-article-single,
body.crippen-front.ast-separate-container .ast-article-post {
	margin: 0;
	padding: 0 !important;
	background: transparent;
	border: 0;
	box-shadow: none;
}

body.crippen-front .entry-header,
body.crippen-front .ast-breadcrumbs-wrapper {
	display: none;
}

body.crippen-front .entry-content {
	margin: 0;
}

/* Full width even when the page was saved in the block editor: Astra then caps
   every .entry-content[data-ast-blocks-layout] child at its content width. */
body.crippen-front .entry-content > .crippen-fp {
	max-width: none;
	margin: 0;
}

/* The header styles live in base.css, shared with /cv/ and the Work pages. */

/* ---- The module ---- */
.crippen-fp {
	--ink: var(--crippen-ink);
	--muted: var(--crippen-muted);
	--line: var(--crippen-line);
	--accent: var(--crippen-accent);
	--paper: var(--crippen-paper);
	--wash: var(--crippen-wash);
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.65 var(--crippen-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.crippen-fp *,
.crippen-fp *::before,
.crippen-fp *::after {
	box-sizing: border-box;
}

.crippen-fp a {
	color: inherit;
}

.crippen-fp img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.crippen-fp p {
	margin: 0;
}

.cfp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Ambient band: the whole 3:2 photo over a blurred, darkened copy of itself ---- */
.cfp-ambient {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	padding: 40px 0;
	background: #1b1f1d;
}

.cfp-ambient__bg {
	position: absolute;
	inset: -60px;
	width: calc(100% + 120px);
	max-width: none;
	height: calc(100% + 120px);
	object-fit: cover;
	filter: blur(42px) saturate(1.15) brightness(0.72);
	transform: scale(1.1);
}

.crippen-fp .cfp-photo {
	position: relative;
	width: min(calc(100% - 64px), calc(76vh * 1.5));
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 0;
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.65);
}

/* ---- Masthead ---- */
.cfp-mast {
	max-width: var(--crippen-wide);
	margin: 0 auto;
	padding: 36px var(--crippen-gutter) 72px;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
}

.crippen-fp--nophoto .cfp-mast {
	padding-top: 56px;
}

.cfp-name {
	border-top: 2px solid var(--ink);
	padding-top: 22px;
}

.cfp-about {
	border-top: 1px solid var(--line);
	padding-top: 26px;
}

.crippen-fp h1 {
	margin: 0 0 14px;
	padding: 0;
	font: 400 clamp(42px, 5.4vw, 78px) / 0.98 var(--crippen-serif);
	letter-spacing: -0.02em;
	color: var(--ink);
}

.crippen-fp .cfp-tline {
	max-width: 46ch;
	font-size: 16px;
	color: var(--muted);
}

.cfp-bio {
	font: 400 19px/1.62 var(--crippen-serif);
}

.cfp-bio p {
	margin: 0 0 0.7em;
}

.cfp-bio p:last-child {
	margin-bottom: 0;
}

.crippen-fp a.cfp-cv {
	display: inline-flex;
	gap: 8px;
	margin-top: 22px;
	padding-bottom: 2px;
	font-weight: 500;
	font-size: 15px;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ---- Sticky tabs ---- */
.cfp-tabs-wrap {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 5;
	background: rgba(251, 250, 247, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line);
}

.cfp-tabs {
	max-width: var(--crippen-wide);
	margin: 0 auto;
	padding: 0 var(--crippen-gutter);
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.cfp-tabs::-webkit-scrollbar {
	display: none;
}

.crippen-fp a.cfp-tab {
	position: relative;
	padding: 18px 16px 16px;
	font: 400 20px/1.65 var(--crippen-serif);
	color: var(--muted);
	white-space: nowrap;
	text-decoration: none;
	background: none;
}

.crippen-fp a.cfp-tab:first-child {
	padding-left: 0;
}

.crippen-fp a.cfp-tab:hover {
	color: var(--ink);
}

.cfp-n {
	margin-left: 3px;
	font: 500 11px var(--crippen-sans);
	vertical-align: super;
	color: var(--accent);
}

.crippen-fp a.cfp-tab::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 3px;
	background: var(--accent);
	opacity: 0;
}

.crippen-fp a.cfp-tab:first-child::after {
	left: 0;
}

.crippen-fp a.cfp-tab[aria-selected="true"],
.is-js[data-active="papers"] #cfp-tab-papers,
.is-js[data-active="books"] #cfp-tab-books,
.is-js[data-active="talks"] #cfp-tab-talks,
.is-js[data-active="other"] #cfp-tab-other {
	color: var(--ink);
}

.crippen-fp a.cfp-tab[aria-selected="true"]::after,
.is-js[data-active="papers"] #cfp-tab-papers::after,
.is-js[data-active="books"] #cfp-tab-books::after,
.is-js[data-active="talks"] #cfp-tab-talks::after,
.is-js[data-active="other"] #cfp-tab-other::after {
	opacity: 1;
}

.crippen-fp a.cfp-tab:focus-visible,
.crippen-fp a.cfp-btn:focus-visible,
.crippen-fp a.cfp-cv:focus-visible,
.crippen-fp button.cfp-more:focus-visible,
.cfp-card h3 a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ---- Works ---- */
.cfp-works {
	max-width: var(--crippen-wide);
	margin: 0 auto;
	padding: 8px var(--crippen-gutter) 40px;
}

.cfp-panel {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px);
}

/* Without JS every Category is listed in turn under its own heading. */
.crippen-fp h2.cfp-h2 {
	margin: 40px 0 0;
	padding: 0;
	font: 400 30px/1.2 var(--crippen-serif);
	color: var(--ink);
}

.is-js .cfp-panel {
	display: none;
}

.is-js[data-active="papers"] #papers,
.is-js[data-active="books"] #books,
.is-js[data-active="talks"] #talks,
.is-js[data-active="other"] #other {
	display: block;
}

.is-js h2.cfp-h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.cfp-card {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 190px;
	gap: 36px;
	padding: 38px 0;
	border-bottom: 1px solid var(--line);
}

.cfp-body {
	max-width: 72ch;
}

.cfp-c1 a {
	display: block;
}

.crippen-fp .cfp-cover {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top;
	box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s;
}

.cfp-c1 a:hover .cfp-cover {
	transform: translateY(-3px);
}

.cfp-tile {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	background: var(--wash);
	color: var(--accent);
	font: 400 36px var(--crippen-serif);
}

.crippen-fp h3 {
	margin: 0 0 6px;
	padding: 0;
	font: 400 23px/1.22 var(--crippen-serif);
	color: var(--ink);
}

.crippen-fp h3 a {
	text-decoration: none;
}

.crippen-fp h3 a:hover {
	color: var(--accent);
}

.crippen-fp .cfp-meta {
	margin: 0 0 12px;
	font-size: 14.5px;
	color: var(--muted);
}

.cfp-abs {
	font: 400 16.5px/1.62 var(--crippen-serif);
	color: var(--crippen-abstract);
}

.cfp-abs p {
	margin: 0 0 0.6em;
}

.cfp-abs > :last-child {
	margin-bottom: 0;
}

/* Clamp only when the script runs; otherwise the whole Abstract stays readable. */
.is-js .cfp-abs--long:not(.is-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.crippen-fp button.cfp-more {
	display: none;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font: 500 13.5px/1.65 var(--crippen-sans);
	letter-spacing: normal;
	text-transform: none;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none;
}

.is-js button.cfp-more {
	display: inline-block;
}

.crippen-fp button.cfp-more:hover,
.crippen-fp button.cfp-more:focus,
.crippen-fp button.cfp-more:active {
	background: none;
	color: var(--accent);
	box-shadow: none;
}

.cfp-rail {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.crippen-fp .cfp-kicker {
	margin: 0 0 6px;
	font: 500 12px var(--crippen-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.crippen-fp a.cfp-btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid var(--accent);
	border-radius: 999px;
	font: 500 13.5px/1.65 var(--crippen-sans);
	color: var(--accent);
	text-decoration: none;
	background: none;
}

.crippen-fp a.cfp-btn:hover {
	background: var(--accent);
	color: #fff;
}

/* The play triangle is drawn: the font subset has no U+25B6. */
.cfp-play {
	display: inline-block;
	width: 0.7em;
	height: 0.8em;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---- Footer ---- */
.cfp-foot {
	max-width: var(--crippen-wide);
	margin: 0 auto;
	padding: 40px var(--crippen-gutter) 120px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

.crippen-fp .cfp-foot a {
	color: var(--accent);
	text-decoration: none;
}

/* ---- Narrower screens ---- */
@media (max-width: 900px) {
	.cfp-mast {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cfp-card {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.cfp-rail {
		grid-column: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
	}

	.cfp-rail .cfp-kicker {
		display: none;
	}
}

@media (max-width: 640px) {
	.cfp-ambient {
		padding: 20px 0;
	}

	.crippen-fp .cfp-photo {
		width: calc(100% - 40px);
	}

	.crippen-fp a.cfp-tab {
		font-size: 17px;
		padding: 14px 10px 12px;
	}

	.cfp-card {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 18px;
		padding: 28px 0;
	}

	.cfp-bio {
		font-size: 18px;
	}

	.crippen-fp h3 {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crippen-fp .cfp-cover {
		transition: none;
	}
}