header.faculty-header {
	margin-block-end: 0 !important;
}
.faculty-header-wrapper {
	background-color: var( --clarku-color-gray, #333 );
	color: var( --clarku-color-white, #fff );
	display: flex;
	flex-direction: row;
	font-size: .9125rem;
	font-weight: 700;
	letter-spacing: .05em;
	margin-block-end: 0;
	text-transform: uppercase;
	& > div {
		padding: 1.25rem;
	}
	& .h-faculty {
		flex-basis: 45%;
	}
	& .h-department {
		flex-grow: 1;
	}
	& .h-contact {
		flex-basis: 30%;
	}
}

.faculty-profiles.list,
.faculty-department.list {
	display: block;
	max-width: 100% !important;
	padding-block-start: 2rem;
	& > li {
		display: list-item;
		margin-left: 0;
		padding-inline: 1rem;
	}
	& > li:not(:first-child) {
		padding-block: 1rem;
	}
	& li:before {
		display: none;
	}
	& .h-card {	
		display: flex;
		flex-direction: column;
		justify-items: flex-start;
		margin-block-end: 2rem;
		padding-block-end: 2rem;
		width: 100%;
	}
	& .h-card:not( :last-child ) {	
		border-bottom: 1px solid var(--clarku-color-smoke);
	}
	& .avatar {
		aspect-ratio: 1/1;
		border-radius: 50%;
		height: 7.5rem;
		margin-inline-end: 1.25rem;
		overflow: hidden;
		width: 7.5rem;
		img {
			display: block;
			max-width: unset;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: .2s scale ease, .2s transform ease;
		}
	}
	& .h-card.no-photo .avatar {
		display: none;
	}
	a:hover img, .fake-hover img {
		scale: 1.05;
		transform: translateY(-2px);
	}
	& .name {
/* 		flex-grow: 2; */
	}
	& .p-name {
		font-size: 1.5rem;
		font-weight: 600;
		margin-block-end: 0;
	}
	& .position {
		font-family: var( --clarku-type-serif, "Crimson Text", serif);
		font-size: 1rem;
		font-weight: 700;
		margin-block-end: .5rem;
	}
	& .degrees ul {
		font-family: var( --clarku-type-sans, "Source Sans Pro", sans-serif);
		font-size: 1rem;
		line-height: 1.3;
		& > li {
			display: list-item;
			font-family: var( --clarku-type-serif, "Crimson Text", serif);
			font-size: 1rem;
			font-weight: 400;
			margin-block-end: .25rem;
		}
	}
	& .department,
	& .contact {
		font-size: 1.125rem;
		text-align: left;
	}
}


.faculty-department.list {
	& .avatar {
		flex-basis: 7.5rem;
		height: 7.5rem;
		min-width: 7.5rem;
		width: 7.5rem;
		& img {
			height: 100%;
			width: 100%;
		}
	}
	& .name {
		flex-grow: 1;
	}
	& .contact {
		flex-shrink: 0;
	}
	& .p-name {
		font-weight: 400;
	}
	& .position {
		color: var( --clarku-color-gray, #333 );
		font-family: var( --clarku-type-sans, "Source Sans Pro", sans-serif);
		font-size: 1.125rem;
		font-style: italic;
		font-weight: 500;
	}
}

@media only screen and (min-width:600px) {
	.faculty-profiles.list,
	.faculty-department.list {
		& .h-card {	
			padding-block-end: 1rem;
		}
	}

	.faculty-profiles.list {
		& .name {
			flex-basis: calc( 45% - 100px );
		}
		& .department {
			flex-basis: 25%;
		}
		& .contact {
			flex-basis: 30%;
			padding-block-end: 2rem;
		}
		& .department,
		& .contact {
			padding-block-start: .4375rem;
		}

	}

	.faculty-department.list {
		.h-card {
			align-items: center;
			flex-direction: row;
		}
		& .h-card.no-photo .avatar {
			display: block;
		}
		& .contact {
			padding-inline: 1rem;
			text-align: right;
		}
	}

}
@media only screen and (min-width:800px) {
	.faculty-profiles.list {
		border: 1px solid var( --clarku-color-smoke, #999 );
		padding-inline: 1rem;
	}

	.faculty-profiles.list {
		.h-card {
			flex-direction: row;
		}
		& .h-card.no-photo .avatar {
			display: block;
		}
		& .contact {
			padding-inline: 1rem;
		}
	}
}



/** begin filter form and related styles **/
html body .content > .faculty-filters:first-child {
	margin-block-start: 1rem !important;
}
html body .faculty-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	
	margin-block: 1.5rem !important;
	padding: 1.5rem;
	border: 1px solid var( --clarku-color-smoke );
	background-color: #eee;
	
	& select {
		border-radius: 0;
		appearance: none;

		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='m5.99 7.59L.2 1.81 1.62.39l4.37 4.37L10.38.37l1.41 1.41-5.81 5.81Z'/%3E%3C/svg%3E");
		background-position: 95% 50%;
		background-repeat: no-repeat;
		background-size: 8px 12px;
		flex-basis: fit-content;

		& option {
		}
	}
	
	& input,
	& select {
		margin-block-end: 0 !important;
	}
}
@media only screen and (min-width:800px) {
	html body .faculty-filters {
		flex-direction: row;
		gap: 1.5rem;
	}
	& input {
	}
	& select {
	}
}
.h-card {
	max-height: 1000px;
	overflow: hidden;
	transition: .2s all ease;
	transition-delay: calc( var( --delay, 0 ) * 1ms);
}
.hide {
	max-height: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	opacity: 0;
	padding: 0 !important;
/* 
	display: none !important;
 */
}


ol.status {
	& li.listing-item {
		margin: 0;
		padding: .5rem;
	}
	& li:nth-child(odd) {
		background-color: #eee;
	}
	& .date { padding-inline-start: 1rem; }
	& .date::before { content: " Last update: "; }
}
