/* Related-work disclosure in project sticky headings. */
.sticky-header.has-related-work .hgroup {
	max-height: none;
	flex-wrap: wrap;
}

.related-work-toggle {
	flex: 0 0 auto;
}

.related-work-toggle .ico {
	transition: transform ease-in-out 0.3s;
}

.related-work-toggle.active .ico {
	transform: rotate(180deg);
}

.sticky-header.has-related-work .related-work {
	overflow: hidden;
	flex: 1 0 100%;
	width: 100%;
	max-width: 100%;
	max-height: 0;
	margin: 0;
	opacity: 0;
	transition: max-height ease-in-out 0.3s, opacity ease-in-out 0.3s;
}

.sticky-header.has-related-work .related-work.expanded {
	opacity: 1;
}

.related-work ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-0-5);
	margin: 0;
	padding: 0 var(--gut-inner-tight) var(--grid-0-5);
	list-style: none;
}

.related-work a {
	display: flex;
	flex-direction: column;
	gap: var(--grid-0-125);
	padding: var(--grid-0-5);
	color: var(--color-fg-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	text-decoration: none;
	background: var(--color-bg-secondary);
	border-radius: var(--rad-sm);
}

.related-work a span {
	color: var(--color-fg-tertiary);
	font-size: var(--font-size-xs);
	font-weight: normal;
}

@media (hover: hover) {
	.related-work a:hover {
		background: var(--color-bg-tertiary);
	}
}