.distorsion-patreon-cta.is-patreon-monochrome {
	--distorsion-patreon-accent: #fff;
	--distorsion-patreon-paper: #fff;
	--distorsion-patreon-muted: #c9c9c9;
	--distorsion-patreon-surface: #080808;
	--distorsion-patreon-line: #454545;
	display: grid;
	gap: 0.75rem;
	min-width: 0;
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--distorsion-patreon-line);
	border-radius: var(--wp--custom--radius--large, 1rem);
	background: var(--distorsion-patreon-surface);
	color: var(--distorsion-patreon-paper);
}

.distorsion-patreon-brand {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 100%;
	margin: 0 0 0.75rem;
	padding: 0.35rem 0;
}

.distorsion-patreon-brand .distorsion-patreon-brand__symbol {
	display: block;
	flex: 0 0 auto;
	width: 3rem;
	height: auto;
}

.distorsion-patreon-brand .distorsion-patreon-brand__wordmark {
	display: block;
	width: 9.9375rem;
	max-width: calc(100% - 4.25rem);
	height: auto;
}

.distorsion-patreon-cta__eyebrow,
.distorsion-patreon-cta__title,
.distorsion-patreon-cta__copy,
.distorsion-patreon-link {
	margin: 0;
}

.distorsion-patreon-cta__eyebrow {
	color: var(--distorsion-patreon-accent);
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.distorsion-patreon-cta__title {
	color: var(--distorsion-patreon-paper);
	font-size: clamp(1.35rem, 4vw, 2.15rem);
	line-height: 1.1;
}

.distorsion-patreon-cta__copy {
	max-width: 68ch;
	color: var(--distorsion-patreon-muted);
}

.distorsion-patreon-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 0.25rem;
}

.is-patreon-monochrome .distorsion-patreon-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--distorsion-patreon-accent);
	border-radius: 999px;
	background: var(--distorsion-patreon-accent);
	color: #080808;
	font-weight: 850;
	line-height: 1.2;
	text-decoration: none;
}

.is-patreon-monochrome .distorsion-patreon-cta__button:hover,
.is-patreon-monochrome .distorsion-patreon-cta__button:focus-visible {
	background: #e6e6e6;
	color: #080808;
	text-decoration: none;
}

.is-patreon-monochrome .distorsion-patreon-cta__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.distorsion-patreon-link .distorsion-patreon-cta__link {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	font-weight: 750;
}

@media (max-width: 40rem) {
	.distorsion-patreon-cta__actions,
	.distorsion-patreon-cta__button {
		width: 100%;
	}
}

/* Compact decorative brand mark beside the episode Patreon heading. */
.distorsion-episode-patreon > .distorsion-episode-patreon__title:first-child {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
}

.distorsion-episode-patreon > .distorsion-episode-patreon__title:first-child::before {
	content: "";
	flex: 0 0 1em;
	width: 1em;
	height: 1em;
	margin-top: 0.075em;
	background: url("../images/patreon-symbol-white.svg") center / contain no-repeat;
}
