:root {
	--mvl-quote-ink: #27004b;
	--mvl-quote-accent: #99634d;
	--mvl-quote-muted: #6b6070;
	--mvl-quote-fill: rgba( 39, 0, 75, 0.035 );
	--mvl-quote-edge: rgba( 39, 0, 75, 0.1 );
	--mvl-quote-corner: 16px;
	--mvl-quote-petal: clamp( 40px, 7vw, 56px );
}

.wp-block-quote,
.wp-block-pullquote,
.mvl-post__body blockquote {
	position: relative;
	margin: 2.2em 0;
	padding: clamp( 26px, 3vw, 34px ) clamp( 24px, 3vw, 34px ) clamp( 30px, 3.4vw, 40px );
	border: 1px solid var( --mvl-quote-edge );
	border-left: 1px solid var( --mvl-quote-edge );
	border-radius: var( --mvl-quote-corner ) var( --mvl-quote-corner ) var( --mvl-quote-corner ) var( --mvl-quote-petal );
	background: var( --mvl-quote-fill );
	color: var( --mvl-quote-ink );
}

.wp-block-quote::before,
.wp-block-pullquote::before,
.mvl-post__body blockquote::before {
	content: "\201C";
	position: absolute;
	top: 4px;
	left: 18px;
	font-family: var( --mvl-font-display );
	font-size: 62px;
	line-height: 1;
	color: var( --mvl-quote-accent );
	opacity: 0.34;
}

/* A pullquote wraps its own blockquote; the figure carries the card, the
   inner element carries nothing, or the two nest and double every edge. */
.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.wp-block-pullquote blockquote::before { content: none; }

.wp-block-quote p,
.wp-block-pullquote p,
.mvl-post__body blockquote p {
	position: relative;
	margin: 0;
	font-family: var( --mvl-font-display );
	font-weight: 300;
	font-size: clamp( 20px, 2.2vw, 24px );
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var( --mvl-quote-ink );
}

.wp-block-quote p + p,
.wp-block-pullquote p + p,
.mvl-post__body blockquote p + p { margin-top: 0.6em; }

.wp-block-quote strong,
.wp-block-pullquote strong,
.mvl-post__body blockquote strong { font-weight: 600; }

.wp-block-quote cite,
.wp-block-pullquote cite,
.mvl-post__body blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var( --mvl-font-body );
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mvl-quote-muted );
}

.wp-block-quote.has-text-align-center,
.wp-block-pullquote.has-text-align-center { text-align: left; }

.wp-block-quote.is-style-plain,
.wp-block-pullquote.is-style-plain {
	border-color: transparent;
	background: none;
}
