/**
 * Center for Law and Public Trust: component styles.
 *
 * theme.json handles tokens and element/block defaults. This file covers
 * layout pieces and block style variations theme.json can't express.
 * Loaded on the front end and in the editor.
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

a {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Shared "uppercase label" treatment. */
.clpt-caps,
.is-style-kicker {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.clpt-utility {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation.is-style-utility {
	font-size: calc(var(--wp--preset--font-size--base) - 1px);
	font-weight: 500;
	gap: 0.5rem 1.5rem;
}

.wp-block-navigation.is-style-utility a {
	color: var(--wp--preset--color--base);
	padding-block: 0.1em 0;
	/* The rule is a background so it can grow left to right on hover.
	 * Offset up from the bottom edge to sit just under the text. */
	background: linear-gradient(currentColor, currentColor) no-repeat left 0 bottom 0.1em / 0% 1px;
	transition: background-size 0.25s ease-out;
}

.wp-block-navigation.is-style-utility a:hover,
.wp-block-navigation.is-style-utility a:focus-visible,
.wp-block-navigation.is-style-utility .current-menu-item > a {
	background-size: 100% 1px;
}

body:not(.home) .clpt-header {
	border-bottom: var(--wp--custom--rule--thick) solid var(--wp--preset--color--primary);
}

.clpt-header .wp-block-site-logo img {
	height: auto;
	max-width: min(100%, 60vw);
}

/* Primary navigation: purple caps, active item black with a magenta rule.
 * Core forces the link container to `color: inherit`, so set it on the nav. */
.wp-block-navigation.clpt-primary-nav {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation.clpt-primary-nav .wp-block-navigation-item__content {
	color: inherit;
	padding-bottom: var(--wp--custom--rule--medium);
	/* The rule is a background so it can grow left to right on hover. */
	background: linear-gradient(var(--wp--preset--color--magenta), var(--wp--preset--color--magenta)) no-repeat left bottom / 0% var(--wp--custom--rule--medium);
	transition: background-size 0.25s ease-out, color 0.25s ease-out;
}

.wp-block-navigation.clpt-primary-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.clpt-primary-nav .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.clpt-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.clpt-primary-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	background-size: 100% var(--wp--custom--rule--medium);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation.is-style-utility a,
	.wp-block-button.is-style-arrow .wp-block-button__link,
	.wp-block-navigation.clpt-primary-nav .wp-block-navigation-item__content {
		transition: none;
	}
}

.clpt-primary-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--primary);
}

.clpt-primary-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.clpt-primary-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin: 8px 0;
	border-radius: 0;
	background: currentColor;
	box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
}

.clpt-header .wp-block-search__button {
	color: var(--wp--preset--color--gray);
	position: relative;
	right: -8px;
	top: -1px;
	transform: scaleX(-1);
}

.clpt-header .wp-block-search__button {
	background: transparent;
	border: 0;
	margin-top: -0.15rem;
	padding: 0.25rem;
}

.clpt-header .wp-block-search__button svg {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}

.clpt-header .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 599px) {
	.wp-block-navigation.is-style-utility {
		font-size: 0.6875rem;
		gap: 0.25rem 1rem;
		justify-content: end;
	}

	.clpt-primary-nav .wp-block-navigation-item {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.clpt-header .wp-block-site-logo {
		flex-shrink: 1;
		min-width: 0;
	}
}

/* Mobile menu overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--large);
	gap: 1.25rem;
}

@media (min-width: 1235px) {
	.clpt-nav-group {
		margin-top: -2rem !important;
	}
}

/* Between the core mobile breakpoint (600px) and desktop, tighten the header. */
@media (min-width: 600px) and (max-width: 959px) {
	.clpt-header .wp-block-site-logo img {
		width: 200px;
	}

	.clpt-primary-nav {
		gap: 0.75rem 1rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 600px) and (max-width: 1235px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media(min-width: 1236px) {
	.clpt-primary-nav {
		position: relative;
		right: -8px;
	}
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.clpt-footer {
	/* Arches are the logo mark, enlarged; their bars run off to the right. */
	--clpt-arch-height: 343px;
	--clpt-arch-offset: -80px;
	--clpt-arch-clear: 232px;

	/* The arches' three stems continue as solid bars from the artwork's bottom edge (1px overlap hides the seam)
	   to the footer's bottom. Positions and widths are the stems' coordinates in the 344-unit-tall arch artwork. */
	--clpt-arch-unit: calc(var(--clpt-arch-height) / 344);
	--clpt-stem: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	--clpt-stem-top: calc(var(--clpt-arch-height) - 1px);
	background-image: url(../images/footer-arches.svg), var(--clpt-stem), var(--clpt-stem), var(--clpt-stem);
	background-position:
		var(--clpt-arch-offset) 0,
		calc(var(--clpt-arch-offset) + var(--clpt-arch-unit) * 127.08) var(--clpt-stem-top),
		calc(var(--clpt-arch-offset) + var(--clpt-arch-unit) * 185.1) var(--clpt-stem-top),
		calc(var(--clpt-arch-offset) + var(--clpt-arch-unit) * 243.13) var(--clpt-stem-top);
	background-repeat: no-repeat;
	--clpt-stem-size: calc(var(--clpt-arch-unit) * 28.77) 100%;
	background-size: auto var(--clpt-arch-height), var(--clpt-stem-size), var(--clpt-stem-size), var(--clpt-stem-size);
	padding-bottom: var(--wp--preset--spacing--30);
	min-height: var(--clpt-arch-height);
	padding-top: calc(var(--clpt-arch-height) * 0.53);
	/* Line the content up with the wide-width main column, but never over the arches. */
	--clpt-footer-gutter: calc((100% - var(--wp--style--global--wide-size)) / 2);
	padding-left: max(var(--clpt-arch-clear), var(--clpt-footer-gutter)) !important;
	padding-right: max(var(--wp--style--root--padding-right), var(--clpt-footer-gutter)) !important;
}

.clpt-footer .wp-block-site-logo img {
	width: 230px;
}

.clpt-footer .wp-block-navigation {
	font-size: 0.9rem;
}

/* Same growing magenta rule as the primary nav. */
.clpt-footer .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding-bottom: var(--wp--custom--rule--medium);
	background: linear-gradient(var(--wp--preset--color--magenta), var(--wp--preset--color--magenta)) no-repeat left bottom / 0% var(--wp--custom--rule--medium);
	transition: background-size 0.25s ease-out, color 0.25s ease-out;
}

.clpt-footer .wp-block-navigation a:hover,
.clpt-footer .wp-block-navigation a:focus-visible {
	color: black;
	background-size: 100% var(--wp--custom--rule--medium);
}

@media (prefers-reduced-motion: reduce) {
	.clpt-footer .wp-block-navigation a {
		transition: none;
	}
}

.clpt-footer {
	color: var(--wp--preset--color--gray);
}

.clpt-footer a:not(:hover, :focus-visible) {
	text-decoration: none;
}

.clpt-footer__fineprint {
	font-size: 0.875rem;
}

@media (max-width: 781px) {
	.clpt-footer {
		--clpt-arch-height: 200px;
		--clpt-arch-offset: -47px;
		--clpt-arch-clear: clamp(1rem, 4vw, 3rem);

		/* Content sits under the arches here, so the stems would run behind it. */
		background-image: url(../images/footer-arches.svg);
		padding-top: calc(var(--clpt-arch-height) + 1.5rem);
	}
}

/* -------------------------------------------------------------------------
 * Headings, rules and section framing
 * ---------------------------------------------------------------------- */

.is-style-ruled:where(.wp-block-heading, .wp-block-group) {
	border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--accent);
	padding-top: 0.4em;
}

.wp-block-group.is-style-ruled {
	padding-top: var(--wp--preset--spacing--40);
}

/* Long-form posts: a magenta rule above each section heading (h2). */
.single .wp-block-post-content > h2.wp-block-heading {
	border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--accent);
	padding-top: 0.25em;
	margin-top: var(--wp--preset--spacing--60);
}

.single .wp-block-post-content > h2:first-child {
	margin-top: 0;
}

.wp-block-post-content > h3,
.wp-block-post-content > h4 {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content :where(h2, h3, h4) + p {
	margin-top: 0.5rem;
}

:where(.wp-block-post-content) [id] {
	scroll-margin-top: 2rem;
}

/* The footnotes heading (clpt_footnotes_heading()) sits after the content in
 * the publication templates, outside the post content's h2 rule. */
.single-publication .clpt-footnotes-heading {
	border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--accent);
	padding-top: 0.25em;
	margin-top: var(--wp--preset--spacing--60);
}

/* Archive intro under the title. */
.wp-block-term-description {
	color: var(--wp--preset--color--contrast);
	max-width: 52rem;
}

/* Lead paragraph (the larger gray intro text). */
p.is-style-lead {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}

p.is-style-kicker {
	color: var(--wp--preset--color--accent);
}

/* Subtitle under a page title (clpt_subtitle), such as a person's role. */
.clpt-subtitle {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.1;
	margin-top: 0.1em;
}

/* Post meta (date, authors) under report titles. */
.clpt-meta {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--large);
}

.clpt-meta > * {
	margin-block: 0.25rem;
}

.clpt-meta .wp-block-post-author__content > * {
	display: inline;
	font-size: inherit;
	margin: 0;
}

.clpt-meta .wp-block-post-author__byline::after {
	content: " ";
}

/* -------------------------------------------------------------------------
 * Breadcrumbs
 * ---------------------------------------------------------------------- */

.wp-block-breadcrumbs a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--magenta);
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-arrow .wp-block-button__link {
	color: inherit;
	padding: 0 0 var(--wp--custom--rule--medium);
	/* The rule is a background so it can grow left to right on hover. */
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% var(--wp--custom--rule--medium);
	transition: background-size 0.25s ease-out;
	font-size: var(--wp--preset--font-size--small);
	/* border-bottom: var(--wp--custom--rule--medium) solid var(--wp--preset--color--magenta); */
	border-radius: 0;
}

.clpt-hero .wp-block-button.is-style-arrow .wp-block-button__link {
	border-bottom-color: currentColor;
	font-size: 1rem;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "\00a0\2192";
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible {
	color: inherit;
	background-size: 100% var(--wp--custom--rule--medium);
}

/* -------------------------------------------------------------------------
 * Tabs (core/navigation "Tabs" style and the Category Tabs block)
 * ---------------------------------------------------------------------- */

.wp-block-navigation.is-style-tabs,
.wp-block-clpt-archive-tabs {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

.wp-block-clpt-archive-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Core forces nav links to `color: inherit`, so color the nav itself. */
.wp-block-navigation.is-style-tabs {
	color: var(--wp--preset--color--primary);
	gap: 0.5rem 1.75rem;
}

.wp-block-navigation.is-style-tabs a,
.wp-block-clpt-archive-tabs a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: var(--wp--custom--rule--medium) solid transparent;
	padding-bottom: 0.2em;
}

.wp-block-clpt-archive-tabs a {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation.is-style-tabs a:hover,
.wp-block-navigation.is-style-tabs .current-menu-item > a,
.wp-block-clpt-archive-tabs a:hover,
.wp-block-clpt-archive-tabs .current-menu-item > a {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--magenta);
}

/*
 * Switching tabs in a section (inc/sections.php): cards in both lists slide
 * to their new place, cards leaving fade and shrink out, cards arriving fade
 * and grow in after them.
 */
::view-transition-group(root),
::view-transition-group(.clpt-card) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(.clpt-card):only-child {
	animation: clpt-card-out 0.2s ease-in both;
}

::view-transition-new(.clpt-card):only-child {
	animation: clpt-card-in 0.35s cubic-bezier(0.2, 0, 0, 1) 0.15s both;
}

@keyframes clpt-card-out {
	to {
		opacity: 0;
		transform: scale(0.94);
	}
}

@keyframes clpt-card-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.97);
	}
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.wp-block-group:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) {
	position: relative;
	height: 100%;
}

.has-card-title-font-size {
	line-height: 1.1;
}

.wp-block-group:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-group.is-style-card-tinted {
	background: var(--wp--preset--color--stone);
}

.wp-block-group.is-style-card-featured {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-group:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-featured-image {
	margin: 0;
}

.is-style-card-featured :where(.wp-block-post-title, .wp-block-post-terms, .wp-block-post-terms a, h2, h3, a) {
	color: var(--wp--preset--color--base);
}

/* The whole card is clickable through its title link. */
:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) :where(.wp-block-post-terms a, .wp-block-post-excerpt__more-link) {
	position: relative;
	z-index: 1;
}

:where(.is-style-card, .is-style-card-tinted) .wp-block-post-title {
	color: var(--wp--preset--color--primary);
}

:where(.is-style-card, .is-style-card-tinted):hover .wp-block-post-title,
:where(.is-style-card, .is-style-card-tinted):focus-within .wp-block-post-title {
	color: var(--wp--preset--color--accent);
}

:where(.is-style-card, .is-style-card-tinted):hover .wp-block-post-title a,
:where(.is-style-card, .is-style-card-tinted):focus-within .wp-block-post-title a {
	text-decoration: underline;
}

:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-featured-image img {
	background: var(--wp--preset--color--placeholder);
}

/* The image zooms in on hover, as on people. */
:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-featured-image {
	overflow: hidden;
}

:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-featured-image img {
	transition: transform 0.5s ease-in;
}

:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured):is(:hover, :focus-within) .wp-block-post-featured-image img {
	transform: scale(1.05);
	transition: transform 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured):is(:hover, :focus-within) .wp-block-post-featured-image img {
		transform: none;
	}
}

/* Post excerpt ending in a magenta arrow (an up-and-over one for items that
 * link off the site; see inc/external-links.php). The external icon is a mask
 * on an inline box after a no-break space, so it can't wrap onto a line of
 * its own and takes the arrow's color. */
.wp-block-post-excerpt.is-style-arrow .wp-block-post-excerpt__excerpt::after {
	content: "\00a0\2192";
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.has-external-link .wp-block-post-excerpt.is-style-arrow .wp-block-post-excerpt__excerpt::after {
	--clpt-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -18 56 56' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21v-7a6 6 0 0 1 6-6h8'/%3E%3Cpath d='M15 3l5 5-5 5'/%3E%3C/svg%3E");
	content: "\00a0";
	padding-right: 0.85em;
	background-color: currentColor;
	/* Safari shows the parts of the box the mask doesn't cover as a faint
	 * outline, so the mask (2em) overflows the box and the SVG's viewBox pads
	 * the 24-unit icon (about 0.85em) on the left, top and bottom. */
	-webkit-mask-image: var(--clpt-external-icon);
	mask-image: var(--clpt-external-icon);
	-webkit-mask-position: right center;
	mask-position: right center;
	-webkit-mask-size: 2em 2em;
	mask-size: 2em 2em;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Card label. Core prints its Post Terms styles only on pages that use that
 * block, so the label block carries the same styles itself. A single item's
 * project pills (Post Projects block) share them. */
.wp-block-clpt-post-type-label,
.wp-block-clpt-post-projects {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}

.wp-block-clpt-post-projects {
	margin-bottom: -0.5rem;
}

.wp-block-clpt-post-type-label a {
	color: inherit;
	text-decoration: none;
}

/* Pills: an upcoming event's date in place of the label, "Project" on a
 * project's cards, and a project's title above the title of each item in it. */
.wp-block-post-terms.is-date,
.clpt-pill {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	line-height: 1.2;
	padding: 0.35em 0.9em 0.3em;
	width: fit-content;
}

.wp-block-post-terms.is-date a {
	color: inherit;
}

/* Pill links stay white on hover, when links otherwise turn the pill's
 * color. */
a.clpt-pill,
.clpt-pill a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	text-decoration-color: currentColor;
}

a.clpt-pill:is(:hover, :focus),
.clpt-pill a:is(:hover, :focus) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.wp-block-clpt-post-projects {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.is-style-card-featured .wp-block-post-excerpt.is-style-arrow .wp-block-post-excerpt__excerpt::after {
	color: var(--wp--preset--color--magenta);
}

/* Query loop "Mosaic" and the Featured Mosaic block's feature: the image fills
 * the card under a purple panel with the label, title and excerpt. The Query
 * Loop style's first result spans two columns. */
:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) > .wp-block-group {
	background: var(--wp--preset--color--lavender);
	border: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 22rem;
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) .wp-block-post-featured-image {
	inset: 0;
	position: absolute;
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) .wp-block-post-featured-image :where(a, img) {
	aspect-ratio: auto !important;
	display: block;
	height: 100% !important;
	width: 100%;
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) .wp-block-post-featured-image + .wp-block-group {
	background: rgb(101 69 143 / 0.84);
	color: var(--wp--preset--color--base);
	position: relative;
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) :where(.wp-block-post-title, .wp-block-post-terms, .wp-block-post-terms a) {
	color: var(--wp--preset--color--base);
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) .wp-block-post-title {
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

:is(.wp-block-post-template.is-style-mosaic > li:first-child, .clpt-mosaic__item.is-feature) .wp-block-post-excerpt__excerpt::after {
	color: var(--wp--preset--color--base);
}

@media (min-width: 782px) {
	.wp-block-post-template.is-style-mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.wp-block-post-template.is-style-mosaic > li:first-child {
		grid-column: span 2;
	}
}

/* Featured Mosaic block: three columns, a medium feature spanning two and a
 * wide one spanning all three. */
.clpt-mosaic {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.clpt-mosaic__item {
	margin: 0;
}

.clpt-mosaic__item.is-feature-wide {
	grid-column: 1 / -1;
}

.clpt-mosaic__item.is-feature-wide > .wp-block-group {
	min-height: clamp(22rem, 40vw, 32rem);
}

@media (min-width: 782px) {
	.clpt-mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.clpt-mosaic__item.is-feature-medium {
		grid-column: span 2;
	}
}

/* Date pill (event dates). */
.wp-block-post-date.is-style-pill {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	line-height: 1.2;
	padding: 0.35em 0.9em 0.3em;
	text-transform: uppercase;
	width: fit-content;
}

/* "Read more" pill (project page list). */
.wp-block-read-more.is-style-pill {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	line-height: 1.2;
	padding: 0.35em 1.1em 0.3em;
	text-decoration: none;
	text-transform: uppercase;
	width: fit-content;
}

.wp-block-read-more.is-style-pill:hover {
	background: var(--wp--preset--color--primary);
}

.wp-block-read-more.is-style-pill:focus-visible {
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Projects (inc/projects.php)
 * ---------------------------------------------------------------------- */

/* Project Cards: the archive card grid (three columns of at least 16rem). */
.wp-block-clpt-project-cards {
	--clpt-gap: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--clpt-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(min(16rem, 100%), (100% - var(--clpt-gap) * 2) / 3), 1fr));
	list-style: none;
	margin-bottom: 0;
	padding: 0;
}

.wp-block-clpt-project-cards .is-style-card {
	display: flex;
	flex-direction: column;
}

.wp-block-clpt-project-cards .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
}

.wp-block-clpt-project-cards .wp-block-post-featured-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wp-block-clpt-project-cards__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-clpt-project-cards__body > * {
	margin: 0;
}

/* Project page: the summary as a lead paragraph, then the longer description. */
.wp-block-term-description.is-style-lead {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}

.wp-block-term-description.is-style-lead p {
	margin: 0;
}

/* Project page: publications as a ruled list, image beside the text. */
.clpt-list__item {
	border-top: var(--wp--custom--rule--medium) solid var(--wp--preset--color--accent);
	margin-bottom: 0;
	padding-block: var(--wp--preset--spacing--40);
}

.clpt-list__item .wp-block-post-featured-image {
	margin: 0;
}

.clpt-list__item .wp-block-post-featured-image img {
	background: var(--wp--preset--color--placeholder);
}

.clpt-list__item .wp-block-post-date {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--small);
}

.clpt-list__item .wp-block-post-title {
	color: var(--wp--preset--color--primary);
}

.clpt-list__item .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.clpt-list__item .wp-block-post-title a:hover,
.clpt-list__item .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.clpt-list__item .wp-block-post-excerpt {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--medium);
	max-width: 42rem;
}

.clpt-list__item .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.clpt-list__item .wp-block-read-more {
	margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
 * People
 * ---------------------------------------------------------------------- */

.wp-block-image.is-style-portrait img {
	aspect-ratio: 9 / 10;
	background: var(--wp--preset--color--placeholder);
	object-fit: cover;
	width: 100%;
}

/* Rounded corners on photos. */
.wp-block-image.is-style-portrait img,
.wp-block-post-content .wp-block-image img,
.clpt-closeup,
.wp-block-post-featured-image img,
.clpt-mailing-band {
	border-radius:  var(--wp--custom--radius--card);
}

.clpt-mosaic .wp-block-post-featured-image img { 
	border-top-left-radius:  var(--wp--custom--radius--card);
	border-top-right-radius:  var(--wp--custom--radius--card);
}


/* The featured image at the top of a page or post: half the content width from 768px. */
@media (min-width: 768px) {
	.wp-block-post-featured-image.clpt-lead-image {
		width: 70%;
	}
}

/* Cards and the Mosaic clip their own corners. */
:where(.is-style-card, .is-style-card-tinted, .is-style-card-featured) .wp-block-post-featured-image img {
	border-radius: 0;
}

.clpt-person {
	position: relative;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.clpt-person > * {
	margin-block: 0;
}

.clpt-person .wp-block-image {
	margin-bottom: 0.6rem;
}

.clpt-person__name {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* The name link stretches over the whole card, and its rule grows left to
 * right like the primary nav's (thinner, as a background). */
.clpt-person__name a {
	color: inherit;
	text-decoration: none;
	padding-bottom: 2px;
	background: linear-gradient(var(--wp--preset--color--magenta), var(--wp--preset--color--magenta)) no-repeat left bottom / 0% 2px;
	transition: background-size 0.25s ease-out;
}

.clpt-person__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.clpt-person:hover .clpt-person__name a,
.clpt-person__name a:focus-visible {
	background-size: 100% 2px;
}

.clpt-person figure {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.clpt-person img {
	transition: transform 0.5s ease-in;
}

.clpt-person:hover img {
	transform: scale(1.05);
	transition: transform 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.clpt-person__name a {
		transition: none;
	}

	.clpt-person:hover img {
		transform: none;
	}
}

/* Bios block: the people grid built from bios. Columns shrink to fit as
 * the core grid layout does (9rem minimum, then fewer columns). */
.wp-block-clpt-bios > h2 {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.wp-block-clpt-bios__grid {
	--clpt-bios-gap: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--clpt-bios-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(min(9rem, 100%), (100% - var(--clpt-bios-gap) * (var(--clpt-bios-columns, 4) - 1)) / var(--clpt-bios-columns, 4)), 1fr));
}

.wp-block-clpt-bios .clpt-person {
	scroll-margin-top: 2rem;
}

.wp-block-clpt-bios .clpt-person .wp-block-image {
	margin-top: 0;
}

.clpt-person__link {
	margin-top: 0.4rem !important;
}

/* "View bio" stretches over the card, like the name link. */
.clpt-person__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* -------------------------------------------------------------------------
 * Hero and "Close Up"
 * ---------------------------------------------------------------------- */

.wp-block-cover.clpt-hero {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* The second selector outranks core's positioned-content rules
 * (e.g. .is-position-center-left), which reset margin to 0 and width to auto. */
.clpt-hero .wp-block-cover__inner-container,
body .wp-block-cover.clpt-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
}

.clpt-hero .wp-block-cover__inner-container > * {
	max-width: 48rem;
}

.clpt-closeup {
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.clpt-closeup .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
 * Pull quote: magenta quotation marks above and below.
 * ---------------------------------------------------------------------- */

.wp-block-pullquote {
	text-align: left;
}

.wp-block-pullquote blockquote::before,
.wp-block-pullquote blockquote::after {
	color: var(--wp--preset--color--magenta);
	display: block;
	font-size: 6rem;
	font-style: normal;
	font-weight: 700;
	height: 0.55em;
	line-height: 1;
}

.wp-block-pullquote blockquote::before {
	content: "\201C";
	margin-bottom: 0.1em;
}

.wp-block-pullquote blockquote::after {
	content: "\201D";
	margin-top: 0.2em;
}

.wp-block-pullquote p {
	font-size: inherit;
	line-height: inherit;
	max-width: 20em;
}

.wp-block-pullquote cite {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--card-title);
	display: block;
	font-style: normal;
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------
 * Sidebar: table of contents and sign-up
 * ---------------------------------------------------------------------- */

@media (min-width: 782px) {
	.clpt-sticky {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}

	.admin-bar .clpt-sticky {
		top: calc(32px + var(--wp--preset--spacing--40));
	}
}

.wp-block-clpt-table-of-contents {
	border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--accent);
	padding-top: 0.75rem;
}

.wp-block-clpt-table-of-contents__title {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--card-title);
	margin: 0 0 0.75rem;
}

.wp-block-clpt-table-of-contents__list {
	font-size: var(--wp--preset--font-size--base);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-clpt-table-of-contents__list li {
	margin-block: 0.4rem;
}

.wp-block-clpt-table-of-contents__list .is-level-3 {
	padding-left: 0.75rem;
}

.wp-block-clpt-table-of-contents__list a {
	color: var(--wp--preset--color--gray);
	text-decoration: none;
}

.wp-block-clpt-table-of-contents__list a:hover,
.wp-block-clpt-table-of-contents__list a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.clpt-signup-sidebar .wp-block-heading {
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Mailing list form
 * ---------------------------------------------------------------------- */

.wp-block-clpt-mailing-list-form {
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0;
}

.clpt-signup {
	margin: 0;
}

.clpt-signup__required {
	margin: 0;
	opacity: 0.9;
	text-align: right;
}

@media(min-width: 583px) {
	.clpt-signup__fields {
		display: grid;
		gap: 0;
	}
}

.is-layout-inline .clpt-signup__fields {
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/* Floating labels: the label sits over the empty input and moves up into
 * the space above it on focus or once the field has a value. */
.clpt-signup__field {
	--clpt-field-inset: 0px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0;
	padding-top: 1rem;
	position: relative;
}

/* Focus line spans the whole field, dividers included. */
.clpt-signup__field::after {
	background: var(--wp--preset--color--accent);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease-out;
}

.clpt-signup__field:focus-within::after {
	transform: scaleX(1);
}

/* Inline layout: a divider before every field but the first, with the
 * input text and label inset by the same amount. */
.is-layout-inline .clpt-signup__field + .clpt-signup__field {
	--clpt-field-inset: 1rem;
}

@media(min-width: 583px) {
	.is-layout-inline .clpt-signup__field + .clpt-signup__field input {
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* Past the 1px divider, lined up with the input text. */
@media(min-width: 583px) {
	.is-layout-inline .clpt-signup__field + .clpt-signup__field label {
		left: calc(var(--clpt-field-inset) + 1px);
	}
}

.clpt-signup__field label {
	font-size: var(--wp--preset--font-size--base);
	left: 0;
	opacity: 0.9;
	pointer-events: none;
	position: absolute;
	top: 1.25rem;
	transform-origin: left top;
	transition: transform 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
}

.clpt-signup__field input:focus + label,
.clpt-signup__field input:not(:placeholder-shown) + label {
	opacity: 1;
	transform: translateY(-1.25rem) scale(0.8);
}

.clpt-signup__field input:focus-visible {
	outline: none;
}

/* Separate rule: an unsupported selector would void the whole list. */
.clpt-signup__field input:-webkit-autofill + label {
	opacity: 1;
	transform: translateY(-1.25rem) scale(0.8);
}

@media (prefers-reduced-motion: reduce) {
	.clpt-signup__field label,
	.clpt-signup__field::after {
		transition: none;
	}
}

.clpt-signup__field input {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	display: block;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	padding: 0.25rem 0;
	width: 100%;
}

@media(min-width: 583px) {
	.clpt-signup__field input {
		padding: 0.25rem 0 0.25rem var(--clpt-field-inset);
	}
}

.is-layout-stacked .clpt-signup__field {
	color: var(--wp--preset--color--gray);
}

.clpt-signup__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-top: 1.25rem;
}

.is-layout-inline .clpt-signup__footer {
	justify-content: center;
}

.clpt-signup button {
	cursor: pointer;
}

.clpt-signup__privacy {
	color: inherit !important;
	font-size: 0.75rem;
	opacity: 0.9;
}

.clpt-signup__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.clpt-signup__status {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin: 0 0 1rem;
}

/* Purple band version. */
.clpt-mailing-band {
	color: var(--wp--preset--color--base);
}

.clpt-mailing-band .wp-element-button:hover,
.clpt-mailing-band .wp-element-button:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.clpt-mailing-band :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Share links
 * ---------------------------------------------------------------------- */

.wp-block-clpt-share-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	color: var(--wp--preset--color--gray);
}

.wp-block-clpt-share-links__list {
	display: flex;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-clpt-share-links a {
	color: var(--wp--preset--color--medium-gray);
	display: inline-flex;
}

.wp-block-clpt-share-links a:hover,
.wp-block-clpt-share-links a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.wp-block-clpt-share-links svg {
	fill: currentColor;
	height: 2rem;
	width: 2rem;
}

/* Podcast platform links: share-link colors, smaller icons. */
.wp-block-social-links.is-style-logos-only.clpt-podcast-platforms {
	gap: 0.5rem;
}

.wp-block-social-links.is-style-logos-only.clpt-podcast-platforms .wp-social-link {
	color: var(--wp--preset--color--medium-gray);
	font-size: 1.5rem;
}

.wp-block-social-links.is-style-logos-only.clpt-podcast-platforms .wp-social-link:hover,
.wp-block-social-links.is-style-logos-only.clpt-podcast-platforms .wp-social-link:focus-within {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Podcast player (Simplecast, see inc/podcasts.php)
 * ---------------------------------------------------------------------- */

.clpt-simplecast-player {
	display: block;
	width: 100%;
	height: 200px;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Footnotes (publications)
 * ---------------------------------------------------------------------- */

.wp-block-footnotes {
	font-size: 1rem;
	line-height: 1.5;
	padding-left: 1.25em;
}

.wp-block-footnotes li::marker {
	color: var(--wp--preset--color--accent);
}

sup.fn a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.clpt-small-print {
	font-size: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Lists and misc
 * ---------------------------------------------------------------------- */

.wp-block-list.is-style-plain {
	list-style: none;
	padding-left: 0;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination .current {
	color: var(--wp--preset--color--contrast);
	border-bottom: var(--wp--custom--rule--medium) solid var(--wp--preset--color--magenta);
}

/* Inline magenta arrow at the end of a paragraph (Close Up). */
a.clpt-arrow-link {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	text-decoration: none;
}

a.clpt-arrow-link::after {
	content: "\2192";
}

.home main {
	margin-top: 0;
}

main {
	min-height: 100vh;
}