/* ==========================================================================
   Accordion on native <details>/<summary>: keyboard and screen-reader support
   without JavaScript. Hairlines, a plus that turns into a minus.
   ========================================================================== */
.accordion { border-block-end: 1px solid var(--line-light); }
.accordion__item { border-block-start: 1px solid var(--line-light); }
.accordion__summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 64px;
	padding-block: var(--s-3);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	color: var(--c-gold-deep);
	transition: transform var(--dur) var(--ease-out);
}
.accordion__item[open] > .accordion__summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
	transform: rotate(180deg);
}
.accordion__summary:hover { color: var(--c-gold-deep); }
.accordion__panel {
	max-width: var(--measure);
	padding-block: 0 var(--s-4);
	padding-inline-start: var(--s-3);
	margin-inline-start: 1px;
	border-inline-start: 1px solid var(--c-gold);
	color: var(--c-slate);
}
.tone-dark .accordion,
.tone-dark .accordion__item { border-color: var(--line-dark); }
.tone-dark .accordion__summary::after { color: var(--c-gold); }
.tone-dark .accordion__panel { color: var(--c-mist); }