.quote {
	/* Quote surfaces */
	--quote-paper-note: #fff;
	--quote-paper-margin: #fff5bc;

	/* Translucent relationships retain sRGB fallbacks. */
	--quote-shadow-strong: rgb(7 29 92 / 34%);
	--quote-shadow-soft: rgb(7 29 92 / 18%);
	--quote-brand-shadow: rgb(16 42 120 / 18%);
	--quote-highlight-tape: rgb(247 200 67 / 72%);

	/* Component typography */
	--quote-body-color: var(--color-ink);
	--quote-body-font: var(--font-serif);
	--quote-body-size: var(--font-size-body);
	--quote-body-weight: 400;
	--quote-body-leading: 1.55;
	--quote-caption-color: var(--color-accent);

	position: relative;
	margin-block: 1.125rem 0;
	margin-inline: 0;

	blockquote {
		margin: 0;
		quotes: "“" "”" "‘" "’";

		> p:first-child::before {
			content: open-quote;
		}

		> p:last-child::after {
			content: close-quote;
		}

		> p:first-child::before,
		> p:last-child::after {
			color: var(--color-brand);
			font-weight: 700;
		}

		p {
			margin-block: 0 0.75rem;
			color: var(--quote-body-color);
			font-family: var(--quote-body-font);
			font-size: var(--quote-body-size);
			font-weight: var(--quote-body-weight);
			line-height: var(--quote-body-leading);
			overflow-wrap: anywhere;
			text-wrap: pretty;
		}
	}

	figcaption {
		color: var(--quote-caption-color);
		font-family: var(--font-sans);
		font-size: var(--font-size-label);
		font-weight: 900;
		letter-spacing: 0.14em;
		text-transform: uppercase;

		&::before {
			content: "—";
			margin-inline-end: 0.5em;
		}
	}

	cite {
		font-style: normal;
	}
}

@supports (color: color-mix(in oklch, black, white)) {
	.quote {
		--quote-shadow-strong: color-mix(
			in oklch,
			var(--color-brand-deep) 34%,
			transparent
		);
		--quote-shadow-soft: color-mix(
			in oklch,
			var(--color-brand-deep) 18%,
			transparent
		);
		--quote-brand-shadow: color-mix(
			in oklch,
			var(--color-brand) 18%,
			transparent
		);
		--quote-highlight-tape: color-mix(
			in oklch,
			var(--color-highlight) 72%,
			transparent
		);
	}
}

/* Torn notes */

.quote-note {
	--note-offset: 0;
	/* Keep tear depth independent of the review height. */
	--paper-shape: polygon(
		0 0.5rem,
		4% 0,
		8% 0.5rem,
		13% 0,
		18% 0.5rem,
		23% 0,
		28% 0.5rem,
		33% 0,
		38% 0.5rem,
		43% 0,
		48% 0.5rem,
		53% 0,
		58% 0.5rem,
		63% 0,
		68% 0.5rem,
		73% 0,
		78% 0.5rem,
		83% 0,
		88% 0.5rem,
		93% 0,
		100% 0.5rem,
		98% calc(100% - 0.5rem),
		93% 100%,
		88% calc(100% - 0.5rem),
		83% 100%,
		78% calc(100% - 0.5rem),
		73% 100%,
		68% calc(100% - 0.5rem),
		63% 100%,
		58% calc(100% - 0.5rem),
		53% 100%,
		48% calc(100% - 0.5rem),
		43% 100%,
		38% calc(100% - 0.5rem),
		33% 100%,
		28% calc(100% - 0.5rem),
		23% 100%,
		18% calc(100% - 0.5rem),
		13% 100%,
		8% calc(100% - 0.5rem),
		3% 100%
	);
	--tape-offset: 0%;
	--tape-tilt: 0deg;
	--tape-inline-size: 5.75rem;

	isolation: isolate;
	padding-block: 1.8125rem 1.6875rem;
	padding-inline: 1.9375rem;
	margin-block: 4.5rem;
	background: transparent;
	filter: drop-shadow(0 0.125rem 0.125rem var(--quote-shadow-strong))
		drop-shadow(0.125rem 0.25rem 0.25rem var(--quote-shadow-soft));
	translate: var(--note-offset) 0;

	&:nth-last-child(1 of .quote-note) {
		margin-block-end: 0;
	}

	&::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(
				circle,
				var(--color-paper-grain) 0 0.03125rem,
				transparent 0.046875rem
			)
			0 0 / 0.25rem 0.25rem,
			var(--quote-paper-note);
		clip-path: var(--paper-shape);
		content: "";
	}

	&::before {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: calc(50% + var(--tape-offset));
		inline-size: var(--tape-inline-size);
		block-size: 1.125rem;
		background: var(--quote-highlight-tape);
		content: "";
		translate: -50% -35%;
		rotate: var(--tape-tilt);
	}
}

/* Cycle layout offsets independently from the randomly assigned note designs. */

.quote-note:nth-child(4n + 1 of .quote-note) {
	--note-offset: -0.65rem;
}

.quote-note:nth-child(4n + 2 of .quote-note) {
	--note-offset: 0.25rem;
}

.quote-note:nth-child(4n + 3 of .quote-note) {
	--note-offset: -0.8rem;
}

.quote-note:nth-child(4n + 4 of .quote-note) {
	--note-offset: 0.3125rem;
}

.quote-note-1 {
	--tape-tilt: 2deg;
	--tape-inline-size: 5.875rem;
}

.quote-note-2 {
	--paper-shape: polygon(
		1% 0.25rem,
		9% 0.5rem,
		17% 0,
		25% 0.5rem,
		34% 0.25rem,
		43% 0.75rem,
		52% 0,
		61% 0.5rem,
		70% 0.25rem,
		79% 0.75rem,
		88% 0,
		99% 0.5rem,
		100% calc(100% - 1rem),
		92% calc(100% - 0.25rem),
		84% calc(100% - 0.75rem),
		76% 100%,
		67% calc(100% - 0.5rem),
		58% 100%,
		49% calc(100% - 0.75rem),
		40% calc(100% - 0.25rem),
		31% calc(100% - 0.75rem),
		22% 100%,
		13% calc(100% - 0.5rem),
		2% calc(100% - 0.25rem)
	);
	--tape-offset: -1%;
	--tape-tilt: -3deg;
	--tape-inline-size: 5.125rem;
}

.quote-note-3 {
	--paper-shape: polygon(
		0 0.75rem,
		7% 0,
		15% 0.5rem,
		23% 0.25rem,
		31% 0.75rem,
		40% 0,
		48% 0.5rem,
		57% 0.25rem,
		65% 0.75rem,
		74% 0,
		83% 0.5rem,
		91% 0.25rem,
		100% 0.75rem,
		99% calc(100% - 0.5rem),
		90% calc(100% - 1rem),
		82% 100%,
		73% calc(100% - 0.75rem),
		64% calc(100% - 0.25rem),
		55% calc(100% - 1rem),
		46% 100%,
		37% calc(100% - 0.5rem),
		28% 100%,
		18% calc(100% - 0.75rem),
		9% calc(100% - 0.25rem),
		1% calc(100% - 0.75rem)
	);
	--tape-offset: -1%;
	--tape-tilt: 4deg;
	--tape-inline-size: 6.3125rem;
}

.quote-note-4 {
	--paper-shape: polygon(
		1% 0.5rem,
		6% 0,
		14% 0.75rem,
		22% 0.25rem,
		30% 0.5rem,
		38% 0,
		47% 0.75rem,
		56% 0.25rem,
		64% 0.5rem,
		72% 0,
		80% 0.75rem,
		89% 0.25rem,
		99% 0.5rem,
		100% calc(100% - 0.75rem),
		94% 100%,
		86% calc(100% - 0.75rem),
		78% calc(100% - 0.25rem),
		69% calc(100% - 1rem),
		60% 100%,
		51% calc(100% - 0.5rem),
		42% 100%,
		33% calc(100% - 0.75rem),
		24% calc(100% - 0.25rem),
		15% calc(100% - 1rem),
		7% 100%,
		0 calc(100% - 0.5rem)
	);
	--tape-offset: -2%;
	--tape-tilt: -1deg;
	--tape-inline-size: 4.875rem;
}

/* Notebook margin */

.quote-margin {
	--quote-body-color: var(--color-brand);
	--quote-body-size: 1.25rem;
	--quote-body-leading: 1.6;

	margin-block: 0.625rem 3.125rem;
	margin-inline: 1.25rem 0.75rem;
	padding-block: 1.8125rem 1.5625rem;
	padding-inline: 3.3125rem 2.125rem;
	border: 0.125rem dashed var(--color-brand);
	background:
		linear-gradient(transparent 1.9375rem, var(--quote-brand-shadow) 2rem) 0 0 /
		100% 2rem,
		var(--quote-paper-margin);
	box-shadow: 0.375rem 0.4375rem 0 var(--quote-brand-shadow);
	translate: -1.25rem 0;
	rotate: -1.25deg;

	blockquote {
		margin-block-end: 1.5rem;
	}

	&::before {
		position: absolute;
		inset-block: 0.625rem;
		inset-inline-start: 0.5rem;
		inline-size: 1.25rem;
		background:
			radial-gradient(
				circle,
				var(--color-surface) 0 0.3125rem,
				var(--color-brand) 0.34375rem 0.4375rem,
				transparent 0.46875rem
			)
			center top / 100% 2rem repeat-y;
		content: "";
	}

	blockquote p {
		font-style: italic;
		text-decoration-color: var(--color-accent);
		text-decoration-line: underline;
		text-decoration-thickness: 0.1875rem;
		text-underline-offset: 0.3125rem;
	}
}

.quote-margin ::selection {
	background-color: rgb(16 42 120 / 78%);
	color: var(--color-on-dark);
}

/* User preference adaptations */

@media (width <= 61.25rem) {
	.quote-note {
		translate: 0;
	}
}

@media (width <= 42.5rem) and (orientation: portrait) {
	.quote-margin {
		margin-inline: 0.75rem;
		translate: 0;
		rotate: none;
	}
}

@media (prefers-contrast: more) {
	.quote {
		--quote-brand-shadow: rgb(16 42 120 / 32%);
	}

	@supports (color: color-mix(in oklch, black, white)) {
		.quote {
			--quote-brand-shadow: color-mix(
				in oklch,
				var(--color-brand) 32%,
				transparent
			);
		}
	}
}

@media (forced-colors: active) {
	.quote-note {
		filter: none;
	}

	.quote-note::after {
		outline: 1px solid CanvasText;
	}

	.quote-margin {
		border-color: CanvasText;
		box-shadow: none;
	}
}