.accordion {
	list-style: none;
	margin-inline: -16px;
	margin-block-start: 24px;
}

.accordion > li {
	background-color: var(--primary-dark);
	border-radius: 16px;
	margin-bottom: 8px;
	scroll-margin-top: var(--navbar-h);
}

.accordion h3 {
	margin-block: 32px 24px;
}

.accordion button {
	--angle: 45deg;
	--border-w: 4px;
	--offset: 3px;
	--padding: calc(16px - var(--border-w));

	background-clip: padding-box;
	background-color: #0000;
	border: var(--border-w) solid #0000;
	border-radius: var(--r1);
	color: inherit;
	display: grid;
	grid-template-columns: 1fr 24px;
	letter-spacing: 0;
	outline: none;
	padding: var(--padding);
	position: relative;
	text-align: start;
	transition: background .1s;
	user-select: none;
	width: 100%;
}

.accordion button > h3 {
	font: normal 1.125rem / 1.4em 'Manrope', sans-serif;
	margin: 0;
}

.accordion button:focus-visible {
	background-color: #3231;
}

@media (hover: hover) {
	.accordion button:hover {
		background-color: #3231;
	}
}

.accordion button::before, .accordion button::after {
	background: currentColor;
	content: '';
	width: 8px;
	height: 2px;
	position: absolute;
	right: var(--padding);
	top: 50%;
	transition: transform .2s;
}

.accordion button::before {
	right: calc(var(--padding) + 7px);
	transform: translateY(calc(-50% + var(--offset))) rotate(var(--angle));
	transform-origin: right;
}

.accordion button::after {
	transform: translateY(calc(-50% + var(--offset))) rotate(calc(-1 * var(--angle)));
	transform-origin: left;
}

.accordion button[aria-expanded="true"] {
	--angle: -45deg;
	--offset: -3px;
}

.accordion-body {
	contain: content;
	height: 0;
	margin-inline: 16px;
	transition: height .3s;
}

.accordion-body > :first-child {
	padding-block: 8px 16px;
}

.accordion-body h4 {
	margin-block: 32px 20px;
	font: normal 1.125rem / 1.5rem 'Libre Caslon Text', serif;
}

.accordion-body h5 {
	font: bold 1rem / 1.75em Manrope, sans-serif;
}

.accordion-body ol li + li {
	margin-block-start: 24px;
}

.accordion-body .list:last-child {
	margin-bottom: 0;
}

.accordion-body .list:first-child {
	margin: 0;
	padding-block-start: 0;
}