/**
 * CFUL 2026 — Components
 *
 * Upcoming-events cards + list (Figma nodes 421:1679 card caption,
 * 421:1680 list row title, 421:1683 list row date). Data/markup in
 * inc/events.php + template-parts/home/upcoming-events.php +
 * template-parts/cards/event-card.php.
 */

/* -------------------------------------------------------------------- */
/* Section spacing helper                                                */
/* -------------------------------------------------------------------- */

.cful-upcoming {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	/* The bleed carousel's gutter math uses 100vw (which includes the
	   scrollbar), so on screens wider than --container-max it can overshoot
	   the content area by ~half a scrollbar. Clip here — at the content-area
	   edge — to absorb that overshoot without a page-level scrollbar. `clip`
	   (not `hidden`) so no scroll container is created. */
	overflow-x: clip;
}

/* -------------------------------------------------------------------- */
/* Event card                                                           */
/* -------------------------------------------------------------------- */

.cful-event-card {
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	/* Fill the carousel slide, which the flex track stretches to the tallest
	   card, so the caption can grow to that shared height (below). */
	height: 100%;
	overflow: hidden;
}

.cful-event-card__image-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.cful-event-card__image-link {
	display: block;
	height: 100%;
	width: 100%;
}

.cful-event-card__image {
	display: block;
	filter: grayscale(100%);
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

.cful-event-card__image--placeholder {
	background: var(--cful-gray);
}

.cful-event-card__caption {
	background: var(--card-accent, var(--color-primary));
	color: var(--cful-white);
	display: flex;
	/* Grow to fill the card below the fixed-ratio image, so every card's accent
	   block bottoms out at the tallest slide's height (min-height is the floor
	   for short/single-card cases). */
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-3);
	min-height: 290px;
	padding: var(--space-5);
}

.cful-event-card__title {
	font-family: var(--font-sans);
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-event-card__title a {
	color: inherit;
}

.cful-event-card__title a:hover,
.cful-event-card__title a:focus-visible {
	text-decoration: underline;
}

.cful-event-card__date {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: var(--fw-regular);
	margin: 0;
	margin-top: auto;
}

.cful-event-card__dept,
.cful-event-card__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	margin: 0;
}

/* Subtitle sits under the title, matching the department line's size/weight. */
.cful-event-card__subtitle {
	font-weight: var(--fw-regular);
}

/* Extra separation between the date and the department line (Figma leaves two
   blank lines here); sits on top of the caption's base gap. */
.cful-event-card__dept {
	margin-top: var(--space-6);
}

.cful-event-card__dept-label {
	font-weight: var(--fw-semibold);
}

.cful-event-card__dept-sub {
	font-weight: var(--fw-regular);
}

.cful-event-card__dept-label + .cful-event-card__dept-sub::before {
	content: " ";
}

/*
 * Stacked (mobile) carousel: cards become full-width rows, so pin the image
 * to a fixed band instead of the 4/3 aspect ratio — otherwise the image would
 * balloon with the row width, keeping the image compact like it was
 * side-by-side.
 */
@media (max-width: 37.5em) {
	.cful-event-card__image-wrap {
		aspect-ratio: auto;
		height: 13rem;
	}

	/* Stacked cards don't need equal heights, so let the caption hug its
	   content: the bottom-pin slack collapses and the date sits just under
	   the subtitle (Figma keeps this gap tight on mobile). */
	.cful-event-card__caption {
		min-height: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Events list                                                          */
/* -------------------------------------------------------------------- */

.cful-events-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-block: var(--space-9) var(--space-7);
}

.cful-events-list__row {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	justify-content: space-between;
}

.cful-events-list__main {
	align-items: baseline;
	width: 100%;
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hairline);
}

.cful-events-list__title {
	font-family: var(--font-sans);
	font-size: var(--text-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-events-list__title a {
	color: inherit;
}

.cful-events-list__title a:hover,
.cful-events-list__title a:focus-visible {
	text-decoration: underline;
}

/* Subtitle sits inline after the title, separated by a hyphen. */
.cful-events-list__subtitle {
	font-weight: var(--fw-regular);
}

.cful-events-list__subtitle::before {
	content: " - ";
}

.cful-events-list__dept {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	margin: 0;
}

.cful-events-list__dept-label {
	font-weight: var(--fw-semibold);
}

.cful-events-list__dept-sub {
	font-weight: var(--fw-regular);
}

.cful-events-list__dept-label + .cful-events-list__dept-sub::before {
	content: " ";
}

.cful-events-list__date {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	margin: 0;
}

/* On mobile, shift the homepage list from 9/3 to a ~60/40 split so the     */
/* title has room to wrap; keep title and date bottom-aligned. Selectors    */
/* carry the col-span-* class for the specificity to beat layout.css's      */
/* mobile stacking collapse.                                                */
@media (max-width: 56.25em) {
	.cful-events-list__main {
		align-items: end;
	}

	.cful-events-list__title.col-span-9 {
		grid-column: span 7 / span 7;
	}

	.cful-events-list__date.col-span-3 {
		grid-column: span 5 / span 5;
	}
}

/* -------------------------------------------------------------------- */
/* Department color utilities                                          */
/* -------------------------------------------------------------------- */

.dept-praxis {
	--card-accent: var(--dept-praxis);
}
.dept-lancog {
	--card-accent: var(--dept-lancog);
}
.dept-hphil {
	--card-accent: var(--dept-hphil);
}

/* -------------------------------------------------------------------- */
/* Generic templates — page header                                     */
/* -------------------------------------------------------------------- */

.cful-page-header {
	margin-bottom: var(--space-4);
}

.cful-page-header .cful-section-label {
	margin-bottom: var(--space-4);
}

.cful-page-header__title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-page-header__description {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	margin-top: var(--space-3);
}

/* -------------------------------------------------------------------- */
/* Members archive — header with reveal search                          */
/* Title left, a <details> disclosure ("Search" → underlined input)     */
/* right. Native <details> so it reveals without JS; the field matches   */
/* the Figma bottom-border-only style.                                   */
/* -------------------------------------------------------------------- */

.cful-page-header--search {
	/* One fixed height shared by the "Search" label and the field so swapping
	 * them never changes the box size, and center alignment (by box, not text
	 * baseline) keeps that box in the same spot whether open or closed —
	 * baseline alignment would shift because the label and field use different
	 * font sizes. */
	--cful-search-h: calc(var(--text-lg) * var(--leading-tight));
	align-items: center;
	column-gap: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: var(--space-3);
}

/* The heading owns the header's bottom margin; drop its own so the flex
 * row's baseline stays clean. */
.cful-page-header--search .cful-section-label {
	margin-bottom: 0;
}

/*
 * Mobile: the box shares the header row with the title, filling the leftover
 * space so it never goes full width nor wraps to its own line. From --bp-sm up
 * it shrink-wraps to a fixed member-tile width, pinned to the container's right
 * edge (aligned with the grid's right end).
 */
.cful-people-search {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 37.5em) {
	.cful-people-search {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/*
 * Plain block flow (no flex on the <details> — that breaks how the element
 * sizes/hides its closed content). The trigger and the field never show at
 * once, so the box shrink-wraps to whichever is visible and text-align keeps
 * it flush right within the header.
 */
.cful-people-search__disclosure {
	text-align: right;
}

/* The "Search" trigger, styled to read like the section eyebrow. */
.cful-people-search__toggle {
	color: var(--color-text);
	cursor: pointer;
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	/* Same fixed box as the field so swapping label <-> input never nudges the
	 * row up or down. */
	height: var(--cful-search-h);
	letter-spacing: 0.02em;
	line-height: var(--cful-search-h);
	list-style: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.cful-people-search__toggle::-webkit-details-marker {
	display: none;
}

.cful-people-search__toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/*
 * Once open, the field replaces the trigger: hide the "Search" word visually
 * (kept focusable/announced so keyboard users can still collapse it) so only
 * the underlined input shows, flush right.
 */
.cful-people-search__disclosure[open] .cful-people-search__toggle {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Block wrapper at the shared height so the open box matches the label box. */
.cful-people-search__field-wrap {
	display: block;
	height: var(--cful-search-h);
}

/*
 * Blank text box with only a 2px bottom border (Figma) — body size, regular
 * weight, no placeholder. Its width tracks one member tile in the archive grid
 * (1-up below --bp-sm, 3-up to --bp-lg, 6-up above), computed from the same
 * container-pad + grid-gap tokens the grid uses, so the box lines up with a
 * member photo.
 */
.cful-people-search__field {
	background: none;
	border: 0;
	border-radius: 0;
	/* Underline as an inset shadow (no blur) rather than a border, so it paints
	 * inside the box and doesn't add 2px of height — otherwise swapping the
	 * borderless "Search" label for the field jumps the row by the border. */
	box-shadow: inset 0 -2px 0 var(--cful-black);
	color: var(--color-text);
	font-family: var(--font-sans);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	/* Identical fixed box to the "Search" label (despite the smaller font) so
	 * toggling the box triggers no vertical rearrangement. */
	height: var(--cful-search-h);
	line-height: var(--cful-search-h);
	min-width: 0;
	padding: 0;
	/* Mobile: fill the leftover header space (form is flex:1). Fixed
	 * member-tile widths kick in from --bp-sm up (below). */
	width: 100%;
}

@media (min-width: 37.5em) {
	.cful-people-search__field {
		width: calc(
			(
					min(100vw, var(--container-max)) - (2 * var(--container-pad)) -
						(2 * var(--grid-gap))
				) /
				3
		);
	}
}

@media (min-width: 75em) {
	.cful-people-search__field {
		width: calc(
			(
					min(100vw, var(--container-max)) - (2 * var(--container-pad)) -
						(5 * var(--grid-gap))
				) /
				6
		);
	}
}

.cful-people-search__field:focus-visible {
	box-shadow: inset 0 -2px 0 var(--color-primary);
	outline: none;
}

/* -------------------------------------------------------------------- */
/* Generic templates — entry (loop item / single)                      */
/* -------------------------------------------------------------------- */

.cful-entry {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-7);
}

.cful-entry:not(:last-child) {
	border-bottom: var(--border-hairline);
}

.cful-entry__header {
	margin-bottom: var(--space-4);
}

.cful-entry__title {
	font-family: var(--font-serif);
	font-size: var(--text-3xl);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-2);
}

.cful-entry__title a {
	color: inherit;
}

.cful-entry__title a:hover,
.cful-entry__title a:focus-visible {
	text-decoration: underline;
}

.cful-entry__meta {
	color: var(--color-section-label);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	gap: var(--space-3);
	margin: 0;
}

.cful-entry__meta--type {
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cful-entry__permalink {
	font-size: var(--text-xs);
	margin: var(--space-1) 0 0;
	word-break: break-all;
}

.cful-entry__permalink a {
	color: var(--color-section-label);
}

.cful-entry__thumbnail {
	margin: var(--space-4) 0;
}

.cful-entry__thumbnail img {
	width: 100%;
}

.cful-entry__content {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.cful-entry__content > * + * {
	margin-top: var(--space-4);
}

.cful-entry__more a {
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

.cful-entry--none {
	padding-bottom: 0;
}

.cful-entry--none .cful-entry__title {
	font-size: var(--text-xl);
}

.cful-entry--none .cful-search-form {
	margin-top: var(--space-5);
	max-width: 480px;
}

/* -------------------------------------------------------------------- */
/* Post navigation (single.php) + back links                           */
/* -------------------------------------------------------------------- */

.cful-post-nav {
	border-top: var(--border-hairline);
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-7);
	padding-top: var(--space-5);
}

.cful-post-nav .nav-previous,
.cful-post-nav .nav-next {
	max-width: 48%;
}

.cful-post-nav .nav-next {
	margin-left: auto;
	text-align: right;
}

.cful-post-nav__label {
	color: var(--color-section-label);
	display: block;
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	margin-bottom: var(--space-1);
	text-transform: uppercase;
}

.cful-post-nav__title {
	font-family: var(--font-serif);
	font-size: var(--text-md);
}

.cful-back-link {
	margin-top: var(--space-6);
}

.cful-back-link a,
.cful-404__home-link a {
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Pagination                                                           */
/* -------------------------------------------------------------------- */

.cful-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.cful-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.cful-pagination .page-numbers {
	border: var(--border-hairline);
	color: var(--color-text);
	display: inline-flex;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	min-height: 40px;
	min-width: 40px;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
}

.cful-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

.cful-pagination .page-numbers:hover,
.cful-pagination .page-numbers:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

.cful-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.cful-page-links a {
	border: var(--border-hairline);
	display: inline-flex;
	min-height: 40px;
	min-width: 40px;
	align-items: center;
	justify-content: center;
	padding: var(--space-1) var(--space-3);
}

/* -------------------------------------------------------------------- */
/* Event tag (department chip used outside the card/list components)   */
/* -------------------------------------------------------------------- */

.cful-event-tag {
	align-items: center;
	background: var(--card-accent, var(--color-primary));
	color: var(--cful-white);
	display: inline-flex;
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.cful-event-tag__label {
	font-weight: var(--fw-semibold);
}

.cful-event-tag__sub {
	font-weight: var(--fw-regular);
	opacity: 0.9;
}

/* -------------------------------------------------------------------- */
/* Events archive (archive-events.php)                                 */
/* -------------------------------------------------------------------- */

/*
 * Filtered archive: a flat, 2px-separated list. Each row is two columns —
 * title (+ subtitle) and the research-group line on the left, event type over
 * the date/date-range on the right. The homepage list reuses the base
 * .cful-events-list* classes WITHOUT the --archive modifier, so it's untouched.
 */
.cful-events-archive-list {
	border-top: var(--border-medium);
	gap: 0;
	margin-block: 0;
}

.cful-events-list__row--archive {
	align-items: flex-start;
	border-bottom: var(--border-medium);
	flex-direction: row;
	gap: var(--space-5);
	justify-content: space-between;
	padding-block: var(--space-6);
}

/* Left column carries no divider of its own — the row rule does. */
.cful-events-list__row--archive .cful-events-list__main {
	border-bottom: 0;
	padding-bottom: 0;
	width: auto;
}

/* Comp titles are semibold, not the list default's bold. */
.cful-events-list__row--archive .cful-events-list__title {
	font-weight: var(--fw-semibold);
}

/* Right column: event type stacked over the date, right-aligned. */
.cful-events-list__meta {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-2);
	text-align: right;
}

.cful-events-list__type {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: var(--fw-medium);
	margin: 0;
	text-transform: uppercase;
}

/* Desktop: reserve at least two of the 12 grid columns for the meta column so
 * the event type / date sit in a stable band (matches the comp). */
@media (min-width: 56.25em) {
	.cful-events-list__row--archive .cful-events-list__meta {
		min-inline-size: calc(
			2 * ((100% - 11 * var(--grid-gap)) / 12) + var(--grid-gap)
		);
	}
}

/* -------------------------------------------------------------------- */
/* Comments (comments.php)                                             */
/* -------------------------------------------------------------------- */

.cful-comments {
	border-top: var(--border-hairline);
	margin-top: var(--space-8);
	padding-top: var(--space-7);
}

.cful-comments__title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	margin: 0 0 var(--space-5);
}

.cful-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cful-comments__list .comment {
	border-top: var(--border-hairline);
	padding-block: var(--space-5);
}

.cful-comments__list .children {
	list-style: none;
	margin: 0;
	padding-left: var(--space-6);
}

.cful-comments__list .comment-author {
	font-weight: var(--fw-semibold);
}

.cful-comments__list .comment-author .says {
	display: none;
}

.cful-comments__list .comment-metadata {
	color: var(--color-section-label);
	font-size: var(--text-xs);
	margin-bottom: var(--space-2);
}

.cful-comments__list .comment-metadata a {
	color: inherit;
}

.cful-comments__list .comment-content > * + * {
	margin-top: var(--space-3);
}

.cful-comments__list .reply {
	margin-top: var(--space-2);
}

.cful-comments__list .comment-reply-link {
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

.cful-comments__closed {
	color: var(--color-section-label);
	font-size: var(--text-sm);
	margin-top: var(--space-5);
}

.cful-comment-form {
	margin-top: var(--space-6);
}

.cful-comment-form p {
	margin-bottom: var(--space-4);
}

.cful-comment-form label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-1);
}

.cful-comment-form input[type="text"],
.cful-comment-form input[type="email"],
.cful-comment-form input[type="url"],
.cful-comment-form textarea {
	border: var(--border-hairline);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	min-height: 40px;
	padding: var(--space-2) var(--space-3);
	width: 100%;
}

.cful-comment-form textarea {
	min-height: 140px;
}

.cful-comment-form .form-submit input[type="submit"] {
	background: var(--color-primary);
	border: 0;
	color: var(--color-primary-contrast);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	min-height: 40px;
	padding: var(--space-3) var(--space-5);
}

/* -------------------------------------------------------------------- */
/* Responsive (mobile collapse, ~899px and below)                      */
/* -------------------------------------------------------------------- */

@media (max-width: 56.25em) {
	.cful-post-nav {
		flex-direction: column;
		gap: var(--space-4);
	}

	.cful-post-nav .nav-previous,
	.cful-post-nav .nav-next {
		max-width: 100%;
	}

	.cful-post-nav .nav-next {
		margin-left: 0;
		text-align: left;
	}

	.cful-entry__title {
		font-size: var(--text-xl);
	}

	.cful-events-list__date {
		text-align: left;
	}

	.cful-comments__list .children {
		padding-left: var(--space-4);
	}
}

/* -------------------------------------------------------------------- */
/* Recent publications — editorial citation list (Figma node 421:1688)  */
/* -------------------------------------------------------------------- */

.cful-pub-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cful-pub-list__item {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
}

.cful-pub-list__byline {
	font-weight: var(--fw-bold);
}

.cful-pub-list__title {
	color: inherit;
	text-decoration: none;
}

a.cful-pub-list__title:hover,
a.cful-pub-list__title:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Archive filter bar — shared by the publications & events archives     */
/* (.cful-archive-filters*), plus the publication-specific rows below.   */
/* -------------------------------------------------------------------- */

/*
 * The publications comp puts the whole content band on the #d4d4d4 page gray
 * (--cful-gray), between the light header and dark footer. Scoped to that
 * archive via the core body class; the events archive keeps the default
 * --cful-white background.
 */
.post-type-archive-publications #site-content {
	background: var(--cful-gray);
}

/* Wide gap between the title and the rule above the filters on desktop.
 * .cful-page-header is shared with other templates, so scope the bump to the
 * two archives (tightened to a symmetric --space-2 on mobile, further down). */
.post-type-archive-publications .cful-page-header,
.post-type-archive-events .cful-page-header {
	margin-bottom: var(--space-9);
}

/* 2px rule above the filter bar, then a large gap down to the "Recent" list. */
.cful-archive-filters {
	border-top: var(--border-medium);
	margin-bottom: var(--space-11);
	padding-top: var(--space-6);
}

/*
 * "Filters" trigger. On mobile it's a real disclosure toggle (native
 * <details>) that reveals the stacked fields; on desktop the fields are always
 * shown and this reads as a plain muted label (see the min-width override below
 * and archive-filters.js). No caret in either state (per design).
 */
.cful-archive-filters__toggle {
	color: var(--color-muted);
	cursor: pointer;
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	list-style: none;
	margin: 0 0 var(--space-3);
}

.cful-archive-filters__toggle::-webkit-details-marker {
	display: none;
}

.cful-archive-filters__toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Four equal controls on desktop; stack to one column below --bp-md. */
.cful-archive-filters__row {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 56.25em) {
	.cful-archive-filters__row {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Desktop keeps every field visible; archive-filters.js forces the
	 * disclosure open, so the trigger is just a static label here. */
	.cful-archive-filters__toggle {
		cursor: default;
	}
}

.cful-archive-filters__field {
	background: var(--cful-white);
	border: var(--border-medium);
	border-radius: var(--radius-card);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	padding: var(--space-2) var(--space-3);
	width: 100%;
}

.cful-archive-filters__field::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.cful-archive-filters__field:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/*
 * Native <select> with the comp's down-caret. It reads muted until a real
 * option is chosen (i.e. while the empty placeholder option is selected) —
 * done with :has() so no JS is needed.
 */
.cful-archive-filters__select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239e9e9e' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-position: right var(--space-3) center;
	background-repeat: no-repeat;
	background-size: 0.7em;
	cursor: pointer;
	padding-right: var(--space-6);
}

.cful-archive-filters__select:has(option[value=""]:checked) {
	color: var(--color-muted);
}

/*
 * On mobile the filter fields collapse behind the "Filters" disclosure, so
 * tighten the title -> rule -> "Filters" gaps to a symmetric --space-2 (the
 * desktop asymmetry above reads wrong once the fields are hidden), and open up
 * a pronounced gap below the collapsed bar before the "Recent" list.
 */
@media (max-width: 56.25em) {
	.post-type-archive-publications .cful-page-header,
	.post-type-archive-events .cful-page-header {
		margin-bottom: var(--space-2);
	}

	.cful-archive-filters {
		margin-bottom: var(--space-12);
		padding-top: var(--space-2);
	}

	/* On mobile "Filters" is a real toggle heading, not a muted desktop label —
	 * render it in ink to match the comp. */
	.cful-archive-filters__toggle {
		color: var(--color-text);
	}
}

/*
 * Results grid: the 12-col grid exists only to offset the "Recent" heading
 * (md:col-start-3) on desktop while the list and pagination stay full-width.
 * Vertical rhythm is margin-driven, so zero the grid's row gap. Shared by both
 * archives' results wrappers.
 */
.cful-pub-results.cful-grid,
.cful-events-results.cful-grid {
	row-gap: 0;
}

/*
 * HTMX loading state. The <form> and pager set hx-indicator to the results
 * container, so htmx adds .htmx-request to it while a fetch is in flight: fade
 * the stale rows, block interaction, and float a spinner on top. The container
 * is the indicator AND the swap target, so the fresh markup that replaces it
 * arrives without the class — no manual teardown needed.
 */
.cful-pub-results,
.cful-events-results {
	position: relative;
}

.cful-pub-results.htmx-request,
.cful-events-results.htmx-request {
	min-height: 12rem;
}

.cful-pub-results.htmx-request > *,
.cful-events-results.htmx-request > * {
	opacity: 0.3;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.cful-pub-results.htmx-request::after,
.cful-events-results.htmx-request::after {
	animation: cful-spin 0.7s linear infinite;
	block-size: 1.75rem;
	border: 2px solid var(--color-muted);
	border-block-start-color: transparent;
	border-radius: 50%;
	content: "";
	inline-size: 1.75rem;
	inset-block-start: var(--space-8);
	inset-inline: 0;
	margin-inline: auto;
	position: absolute;
}

@keyframes cful-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cful-pub-results.htmx-request::after,
	.cful-events-results.htmx-request::after {
		animation: none;
	}
}

.cful-archive__heading {
	margin-bottom: var(--space-7);
}

/* Rows: reserved cover column + flowing citation, 2px-separated. */
.cful-pub-archive {
	border-top: var(--border-medium);
	gap: 0;
}

.cful-pub-row {
	align-items: start;
	border-bottom: var(--border-medium);
	column-gap: var(--space-5);
	display: grid;
	grid-template-columns: 1fr;
	padding-block: var(--space-6);
}

@media (min-width: 37.5em) {
	.cful-pub-row {
		grid-template-columns: 90px 1fr;
	}
}

.cful-pub-row__cover-img {
	display: block;
	height: auto;
	max-width: 90px;
	width: 100%;
}

.cful-pub-row__link {
	color: var(--color-text);
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	margin-left: auto;
	margin-top: var(--space-3);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	width: -moz-fit-content;
	width: fit-content;
}

.cful-pub-archive__empty,
.cful-people-archive__empty {
	color: var(--color-muted);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	padding-block: var(--space-6);
}

/* Pagination */
.cful-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.cful-pagination .page-numbers {
	border: var(--border-hairline);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
}

.cful-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

.cful-pagination a.page-numbers:hover,
.cful-pagination a.page-numbers:focus-visible {
	background: var(--color-text);
	color: var(--cful-white);
}

.cful-pagination .page-numbers.dots {
	border-color: transparent;
}

/* -------------------------------------------------------------------- */
/* Pager (compact: ← current / total →)                                 */
/* -------------------------------------------------------------------- */

/*
 * Reusable full-width, transparent nav bar (template-parts/pagination-nav.php):
 * a centered cluster of prev/next arrows flanking a `current / total` indicator.
 * Spans the whole page (sits outside .cful-container) with its own gutter via
 * --container-pad and --space-3 vertical padding.
 */
.cful-pager {
	align-items: center;
	background: transparent;
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	padding: var(--space-7) var(--container-pad);
	width: 100%;
}

.cful-pager__status {
	color: var(--color-text);
	font-size: var(--text-md); /* one step above base */
	line-height: var(--leading-tight);
}

.cful-pager__arrow {
	align-items: center;
	color: var(--color-text);
	display: inline-flex;
	font-size: var(--text-2xl); /* four steps above base */
	line-height: 1;
	text-decoration: none;
}

.cful-pager__arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* People grid (faces and names)                                        */
/* -------------------------------------------------------------------- */

/*
 * Own explicit equal-column grid rather than the 12-col col-span utilities:
 * an N-up faces grid reads cleaner as repeat(N, 1fr). Columns step 2 -> 3 -> 6
 * at the --bp-sm (37.5em) / --bp-lg (75em) token breakpoints (literal em —
 * var() can't be used in media conditions). Generous row gap matches the comp's
 * vertical rhythm; column gap stays on the shared grid gap (~20px @1440).
 */
.cful-people-grid {
	column-gap: var(--grid-gap);
	display: grid;
	grid-template-columns: 1fr; /* one member per row on phones (horizontal card) */
	row-gap: var(--space-8);
}

@media (min-width: 37.5em) {
	.cful-people-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 75em) {
	.cful-people-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/*
 * Mobile-first: horizontal card — portrait photo (left) + name/role/degree
 * (right). The photo spans all three text rows; name/role/degree auto-place
 * into column 2. At --bp-sm (37.5em) the reset block below restores the
 * desktop vertical card (photo above text).
 */
.cful-person-card {
	align-items: start;
	color: inherit;
	column-gap: var(--space-4);
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	text-decoration: none;
}

.cful-person-card:hover,
.cful-person-card:focus-visible {
	text-decoration: none;
}

/* Portrait 5:6 photo (Figma frames 195x236), black & white to match the comp. */
.cful-person-card__photo-wrap {
	aspect-ratio: 5 / 6;
	margin-bottom: 0; /* phone: photo sits left of the text block, no gap below */
	overflow: hidden;
}

.cful-person-card__photo {
	display: block;
	filter: grayscale(100%);
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

.cful-person-card__photo--placeholder {
	background: var(--cful-gray);
}

.cful-person-card__name {
	color: var(
		--card-accent,
		var(--color-text)
	); /* phone: department accent identifies the sub-department */
	font-family: var(--font-sans);
	font-size: var(
		--text-xl
	); /* phone: one step up; reset to --text-lg at tablet+ */
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-person-card__role,
.cful-person-card__degree {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	line-height: var(--leading-snug);
	margin: 0;
}

.cful-person-card__role {
	margin-top: var(--space-2);
}

/* Tablet/desktop: restore the vertical card (photo above default-color name),
   mirroring how the grid columns are defined mobile-first above. */
@media (min-width: 37.5em) {
	.cful-person-card {
		display: block;
	}

	.cful-person-card__photo-wrap {
		margin-bottom: var(--space-3);
	}

	.cful-person-card__name {
		color: var(--color-text);
		font-size: var(--text-lg);
	}
}

/*
 * Hover/focus: a colored line stroke around the photo in the person's
 * department accent (--card-accent from the `.dept-{slug}` class on the card),
 * falling back to the site primary. Outline draws outside the wrap so it is
 * not clipped by overflow:hidden and does not shift layout.
 */
.cful-person-card:hover .cful-person-card__photo-wrap,
.cful-person-card:focus-visible .cful-person-card__photo-wrap {
	outline: 4px solid var(--card-accent, var(--color-primary));
}

/* -------------------------------------------------------------------- */
/* Member profile (single-people.php) — Figma 657:1113                   */
/* --card-accent is set inline on .cful-person-profile from the person's */
/* primary department; section labels consume it.                        */
/* -------------------------------------------------------------------- */

.cful-person-profile {
	color: var(--color-text);
}

.cful-person-profile__head {
	align-items: end;
	margin-bottom: var(--space-6);
}

.cful-person-profile__name {
	font-family: var(--font-sans);
	font-size: var(--text-3xl);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-person-profile__photo {
	margin: 0;
}

.cful-person-profile__photo img {
	display: block;
	filter: grayscale(100%);
	height: 240px;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	width: 192px; /* 240 * 4 / 5 — fixed 4:5 portrait */
}

.cful-person-profile__rule {
	background: var(--color-border);
	border: 0;
	height: 1px;
	margin: var(--space-6) 0;
}

/* First rule only: full-bleed to both viewport edges so the divider spans
   #site-content's full width. Same gutter math as the bleed carousel — the
   container's own padding plus (above --container-max) the centered gutter.
   Below --container-max the max() term is 0, so there's no vw / scrollbar
   overshoot. */
.cful-person-profile__rule--bleed {
	margin-inline: calc(
		(var(--container-pad) + max(0px, (100vw - var(--container-max)) / 2)) * -1
	);
}

.cful-person-profile__body {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

.cful-person-profile__depts {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cful-person-profile__dept-logo {
	display: block;
	height: auto;
	max-width: 96px;
	width: 100%;
}

.cful-person-profile__label {
	color: var(--card-accent, var(--color-primary));
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	letter-spacing: 0.02em;
	margin: 0 0 var(--space-1);
	text-transform: uppercase;
}

.cful-person-profile__value {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	margin: 0;
}

.cful-person-profile__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Mirrors .cful-person-profile__label (uppercase, --text-sm, tracked) but stays
   black on every subsite instead of taking the department accent. A dedicated
   class rather than __field, which is the existing label/value wrapper. */
.cful-person-profile__contact-link {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.cful-person-profile__contact-link:hover,
.cful-person-profile__contact-link:focus-visible {
	text-decoration: underline;
}

.cful-person-profile__bio {
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.cful-person-profile__bio p {
	margin: 0 0 var(--space-4);
}

.cful-person-profile__bio p:last-child {
	margin-bottom: 0;
}

.cful-person-profile__bio a {
	color: inherit;
}

.cful-person-profile__intro {
	margin-bottom: var(--space-4);
}

.cful-person-profile__pubs {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

/* Department badge — fallback shown until a logo SVG is added. */
.cful-dept-badge {
	border-left: 3px solid var(--card-accent, var(--color-primary));
	display: inline-flex;
	flex-direction: column;
	padding-left: var(--space-3);
}

.cful-dept-badge__label {
	color: var(--card-accent, var(--color-primary));
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
}

.cful-dept-badge__sub {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
}

/* Member profile — phone layout (Figma 946:1239). Head: name + photo side by
   side; body: department logo + metadata side by side, biography full-width
   below. The container class (e.g. .cful-person-profile__head.cful-grid) beats
   the .cful-grid col-span collapse rule on specificity, so flex wins over the
   utility's stacked children. */
@media (max-width: 37.5em) {
	.cful-person-profile__head.cful-grid {
		align-items: flex-start;
		display: flex;
		gap: var(--space-4);
	}

	.cful-person-profile__name {
		flex: 1 1 auto;
		font-size: var(--text-xl);
	}

	.cful-person-profile__photo {
		flex: 0 0 auto;
	}

	.cful-person-profile__photo img {
		height: 8.75rem; /* keep the 4:5 portrait at ~7rem wide */
		width: 7rem;
	}

	.cful-person-profile__body.cful-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-6) var(--space-8);
	}

	.cful-person-profile__depts {
		flex: 0 0 auto;
	}

	.cful-person-profile__meta {
		flex: 1 1 12rem;
	}

	.cful-person-profile__bio {
		flex: 1 0 100%; /* biography wraps to its own full-width row */
	}
}

/* -------------------------------------------------------------------- */
/* Single event page                                                    */
/* -------------------------------------------------------------------- */

/* Mobile-first: one column; items stack in source order
   (intro, poster, program, date/location + register). */
.cful-event-hero {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: 1fr;
}

/* Desktop: 12-col grid. The left column holds the intro at the top with the
   program intro pinned bottom-left; the poster and the date/location aside
   sit top-right, the register link riding the aside's bottom edge. */
@media (min-width: 56.25em) {
	.cful-event-hero {
		align-items: stretch;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto 1fr;
	}

	.cful-event-hero__intro {
		grid-column: 1 / 7;
		grid-row: 1;
	}

	.cful-event-hero__poster {
		align-self: start;
		grid-column: 7 / 9;
		grid-row: 1 / 3;
	}

	.cful-event-hero__aside {
		grid-column: 10 / 13;
		grid-row: 1 / 3;
	}

	.cful-event-hero__program {
		align-self: end;
		grid-column: 1 / 7;
		grid-row: 2;
	}
}

.cful-event-hero__eyebrow {
	color: var(--card-accent, var(--color-primary));
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}

.cful-event-hero__title {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.04rem; /* -0.72px */
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-event-hero__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.04rem; /* -0.72px */
	line-height: var(--leading-tight);
	margin: var(--space-4) 0 0;
}

.cful-event-hero__program {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
}

.cful-event-hero__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	height: 100%;
}

.cful-event-hero__poster {
	margin: 0;
}

.cful-event-hero__poster img {
	display: block;
	height: auto;
	max-height: 18.4375rem; /* 295px */
	max-width: 100%;
	width: auto;
}

.cful-event-hero__info {
	color: var(--card-accent, var(--color-text));
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	line-height: var(--leading-snug);
}

.cful-event-hero__when,
.cful-event-hero__where,
.cful-event-hero__where p {
	margin: 0;
}

.cful-event-hero__when,
.cful-event-hero__where {
	font-size: var(--text-sm);
}

.cful-event-hero__register {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	margin-top: auto;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 0.15em;
}

.cful-event-hero__register:hover,
.cful-event-hero__register:focus-visible {
	text-decoration: none;
}

.cful-event-synopsis {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: var(--leading-normal);
}

/* Sit the synopsis flush under the hero — the hero section above already
   supplies the bottom padding, so drop this section's top padding only. */
.cful-event-synopsis-section {
	padding-block-start: 0;
}

.cful-event-content-band {
	background: transparent;
	color: var(--color-text);
}

.cful-event-content-band--dept {
	background: var(--card-accent);
	color: var(--cful-white-alt);
}

.cful-event-content-band__body {
	color: inherit;
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

.cful-event-content-band__body a {
	color: inherit;
	text-decoration: underline;
}

/* Vertical rhythm for the_content(): reset the editor's own block margins,
   then space siblings with an owl. Collapse truly-empty blocks so a stray
   <p></p> from the WYSIWYG editor doesn't leave a double gap. */
.cful-event-content-band__body > * {
	margin-block: 0;
}

.cful-event-content-band__body > :empty {
	display: none;
}

.cful-event-content-band__body > * + * {
	margin-top: var(--space-4);
}

@media (max-width: 56.25em) {
	.cful-event-hero__aside {
		height: auto;
	}

	.cful-event-hero__register {
		margin-top: var(--space-4);
	}
}

/* -------------------------------------------------------------------- */
/* Site-wide search (search.php + template-parts/search/*)               */
/* -------------------------------------------------------------------- */

/*
 * Header: a reveal-on-click "Search" disclosure over a hairline rule. The
 * <summary> reads as the page title (semibold, sentence case); once the box is
 * open the word is visually hidden so only the form shows — matching the blank
 * landing in the comp. The revealed panel is the canonical get_search_form()
 * (.cful-search-form: bordered field + visible submit), so the confirm action
 * is obvious given search is submit-driven, not live.
 */
.cful-search-page__header {
	/* One fixed height shared by the "Search" label and the open box so
	 * swapping them (collapsed <-> open) never changes the box size and the
	 * row can't jump. Centered by box, not baseline, since the two use
	 * different font sizes. */
	--cful-search-h: calc(var(--text-xl) * var(--leading-normal));
	border-bottom: var(--border-hairline);
	padding-bottom: var(--space-5);
}

.cful-search-page__toggle {
	align-items: center;
	color: var(--color-text);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: var(--fw-semibold);
	height: var(--cful-search-h);
	letter-spacing: -0.01em;
	list-style: none;
}

.cful-search-page__toggle::-webkit-details-marker {
	display: none;
}

.cful-search-page__toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Open: swap the word for the box — hidden but kept focusable/announced. */
.cful-search-page__disclosure[open] .cful-search-page__toggle {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.cful-search-page__panel {
	max-width: 32rem;
}

/*
 * The revealed box mirrors the People archive search field, but as one unit:
 * the 2px inset "underline" sits on the whole form so the field and the submit
 * share a single bottom border (painted inside so toggling never shifts
 * layout). The submit is transparent — just black-ish "Search" text — reading
 * as part of the box while staying the visible confirm affordance.
 */
.cful-search-page__panel .cful-search-form {
	align-items: center;
	box-shadow: inset 0 -2px 0 var(--cful-black);
	gap: var(--space-3);
	/* Same fixed box as the "Search" label so toggling triggers no reflow. */
	min-height: var(--cful-search-h);
}

.cful-search-page__panel .cful-search-form:focus-within {
	box-shadow: inset 0 -2px 0 var(--color-primary);
}

.cful-search-page__panel .cful-search-form__field {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1 1 auto;
	font-size: var(--text-lg);
	min-height: 0;
	padding: 0;
}

.cful-search-page__panel .cful-search-form__field:focus-visible {
	outline: none;
}

.cful-search-page__panel .cful-search-form__submit {
	background: none;
	border: 0;
	color: var(--color-text);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	min-height: 0;
	padding: 0;
}

.cful-search-page__panel .cful-search-form__submit:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Results list: hairline-separated rows, wide main column + a narrow right
 * column carrying the cover/portrait (publications, people) or the date band
 * (events), aligned to the grid's rightmost column. */
.cful-search-results {
	margin-top: var(--space-7);
}

.cful-search-row {
	align-items: start;
	border-bottom: var(--border-hairline);
	column-gap: var(--grid-gap);
	display: grid;
	grid-template-columns: 1fr;
	padding-block: var(--space-6);
	row-gap: var(--space-4);
}

@media (min-width: 56.25em) {
	.cful-search-row {
		grid-template-columns: 1fr 8rem;
	}
}

.cful-search-row__main {
	min-width: 0;
}

.cful-search-row__eyebrow {
	color: var(--color-section-label);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}

.cful-search-row__title {
	font-family: var(--font-sans);
	font-size: var(--text-3xl);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	line-height: var(--leading-tight);
	margin: 0;
}

.cful-search-row__title a {
	color: var(--color-text);
	text-decoration: none;
}

.cful-search-row__title a:hover,
.cful-search-row__title a:focus-visible {
	text-decoration: underline;
}

.cful-search-row__detail {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-2xl);
	font-weight: var(--fw-regular);
	line-height: var(--leading-snug);
	margin: var(--space-2) 0 0;
}

.cful-search-row__dept {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	margin: var(--space-3) 0 0;
}

.cful-search-row__dept-label {
	font-weight: var(--fw-semibold);
}

.cful-search-row__dept-sub {
	font-weight: var(--fw-regular);
}

/* Right column. */
.cful-search-row__aside {
	align-items: start;
	display: flex;
	flex-direction: column;
}

@media (min-width: 56.25em) {
	.cful-search-row__aside {
		align-items: flex-end;
	}
}

.cful-search-row__cover,
.cful-search-row__photo {
	display: block;
	height: auto;
	max-width: 7.5rem;
	width: 100%;
}

/* People portraits are black & white, matching the members grid. */
.cful-search-row__photo {
	filter: grayscale(100%);
}

.cful-search-row__photo--placeholder {
	aspect-ratio: 1 / 1;
	background: var(--color-muted);
}

.cful-search-row__date {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (min-width: 56.25em) {
	.cful-search-row__date {
		text-align: right;
	}
}

.cful-search-results__empty {
	font-size: var(--text-md);
	margin-top: var(--space-7);
}