/*
 * Autoriah Article Series: its own plain look. A site whose theme dresses .article-series itself
 * answers article_series_plain_look with false, and this file is not loaded.
 *
 * It takes its colours from the words around it (currentColor) unless a theme sets:
 *   --article-series-accent    the box's edge and the current part (currentColor)
 *   --article-series-rule      the lines (the words' colour, faint)
 *   --article-series-surface   the box's and the cards' ground (a faint wash of the words' colour)
 *   --article-series-muted     the small words ("Part 2", "Previous", "4 parts")
 */

.article-series,
.article-series-cards {
	--article-series-rule-fallback: rgba(127, 127, 127, 0.35);
	--article-series-surface-fallback: rgba(127, 127, 127, 0.08);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.article-series,
	.article-series-cards {
		--article-series-rule-fallback: color-mix(in srgb, currentColor 22%, transparent);
		--article-series-surface-fallback: color-mix(in srgb, currentColor 5%, transparent);
	}
}

/* ---- the part box -------------------------------------------------------------------------- */
.article-series--box {
	margin-block: 0 2rem;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--article-series-accent, currentColor);
	background: var(--article-series-surface, var(--article-series-surface-fallback));
	font-size: 0.95em;
	line-height: 1.5;
}
/* At the end of an article, the box stands clear of the last words. */
* + .article-series--box {
	margin-block-start: 2rem;
}
.article-series__title {
	margin: 0 0 0.5rem;
	font-weight: 600;
}
.article-series__parts {
	padding-inline-start: 1.5rem;
}
.article-series__part {
	margin: 0;
}
.article-series__part.is-current .article-series__link {
	font-weight: 600;
	color: var(--article-series-accent, inherit);
}

/* ---- the previous and next ----------------------------------------------------------------- */
.article-series--steps {
	margin-block: 2.5rem 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--article-series-rule, var(--article-series-rule-fallback));
}
.article-series__step-link {
	text-decoration: none;
}
/* No text-transform: uppercase here or on the cards. Chrome hands the capitals to a screen reader as the link's
   name ("PREVIOUS …"), and some readers then spell the word out letter by letter. */
.article-series__step-word {
	font-size: 0.85em;
	letter-spacing: 0.04em;
	color: var(--article-series-muted, inherit);
}
.article-series__step-title {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.article-series__step-link:hover .article-series__step-title,
.article-series__step-link:focus-visible .article-series__step-title {
	text-decoration-thickness: 2px;
}

/* ---- the cards ----------------------------------------------------------------------------- */
.article-series-card {
	overflow: hidden;
	border: 1px solid var(--article-series-rule, var(--article-series-rule-fallback));
	border-radius: 6px;
	background: var(--article-series-surface, var(--article-series-surface-fallback));
}
.article-series-card__title,
.article-series-card__count,
.article-series-card__teaser {
	padding-inline: 1rem;
}
.article-series-card__title {
	padding-block: 0.9rem 0.35rem;
	font-size: 1.15em;
	line-height: 1.3;
}
.article-series-card__link {
	text-decoration: none;
}
.article-series-card__link:hover .article-series-card__name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.article-series-card__part,
.article-series-card__count {
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--article-series-muted, inherit);
}
.article-series-card__part {
	margin-block-end: 0.2rem;
}
.article-series-card__count {
	margin: 0 0 0.35rem;
}
.article-series-card__teaser {
	margin: 0 0 1rem;
	font-size: 0.95em;
	line-height: 1.5;
}