/* PaintZeal site theme */

:root,
[data-theme="light"] {
	--mc-background: #f7f3eb;
	--mc-surface: #fffdf9;
	--mc-surface-strong: #eee3d2;
	--mc-text: #302b27;
	--mc-text-muted: #6f655d;
	--mc-border: #b9aa97;
	--mc-accent: #9d4e35;
	--mc-accent-hover: #7f3f2d;
	--mc-accent-text: #fffaf4;
	--mc-focus: #456661;
	--mc-code-background: #efe7da;
	--mc-success: #4f755d;
	--mc-warning: #8a5a00;
	--mc-danger: #a64236;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--mc-background: #1f1a17;
		--mc-surface: #29231f;
		--mc-surface-strong: #3a3029;
		--mc-text: #f3ede2;
		--mc-text-muted: #c7b9a8;
		--mc-border: #74665a;
		--mc-accent: #e29270;
		--mc-accent-hover: #f0ad90;
		--mc-accent-text: #1f1a17;
		--mc-focus: #8fb3ad;
		--mc-code-background: #332b26;
		--mc-success: #82b18d;
		--mc-warning: #e2b76d;
		--mc-danger: #ed8b7f;
	}
}

[data-theme="dark"] {
	--mc-background: #1f1a17;
	--mc-surface: #29231f;
	--mc-surface-strong: #3a3029;
	--mc-text: #f3ede2;
	--mc-text-muted: #c7b9a8;
	--mc-border: #74665a;
	--mc-accent: #e29270;
	--mc-accent-hover: #f0ad90;
	--mc-accent-text: #1f1a17;
	--mc-focus: #8fb3ad;
	--mc-code-background: #332b26;
	--mc-success: #82b18d;
	--mc-warning: #e2b76d;
	--mc-danger: #ed8b7f;
}

header,
footer {
	background: var(--mc-surface);
}

header {
	border-bottom: var(--mc-border-width) solid var(--mc-border);
}

.illustrated-hero {
	position: relative;
	display: grid;
	min-height: clamp(19rem, 32vw, 24rem);
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	border: var(--mc-border-width) solid var(--mc-border);
	border-radius: var(--mc-radius);
	background: var(--mc-surface);
}

.illustrated-hero::before,
.illustrated-hero::after {
	position: absolute;
	inset: 0;
	content: "";
}

.illustrated-hero::before {
	z-index: -2;
	background-image: var(--hero-illustration);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 58% auto;
}

.illustrated-hero::after {
	z-index: -1;
	background: linear-gradient(90deg, var(--mc-surface) 0 43%, rgb(255 253 249 / 92%) 53%, rgb(255 253 249 / 20%) 72%, transparent 84%);
}

.illustrated-hero-content {
	width: min(100%, 39rem);
	padding: clamp(1.75rem, 5vw, 3.5rem);
}

.illustrated-hero .eyebrow {
	color: var(--mc-accent);
}

.illustrated-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mc-space-4);
}

.illustrated-card > img,
main:has(.illustrated-hero) #painters article.card::before {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-block-end: var(--mc-space-5);
	border-radius: var(--mc-radius-small);
	background-image: var(--painter-illustration);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
}

.illustrated-card > img + h3 {
	margin-block-start: 0;
}

main:has(.illustrated-hero) #painters article.card::before {
	content: "";
}

main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/vincent-van-gogh/"]) { --painter-illustration: url("/assets/illustrations/vincent-van-gogh.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/bob-ross/"]) { --painter-illustration: url("/assets/illustrations/bob-ross.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/pablo-picasso/"]) { --painter-illustration: url("/assets/illustrations/pablo-picasso.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/claude-monet/"]) { --painter-illustration: url("/assets/illustrations/claude-monet.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/frida-kahlo/"]) { --painter-illustration: url("/assets/illustrations/frida-kahlo.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/andy-warhol/"]) { --painter-illustration: url("/assets/illustrations/andy-warhol.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/sandro-botticelli/"]) { --painter-illustration: url("/assets/illustrations/sandro-botticelli.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/jackson-pollock/"]) { --painter-illustration: url("/assets/illustrations/jackson-pollock.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/henri-matisse/"]) { --painter-illustration: url("/assets/illustrations/henri-matisse.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/edgar-degas/"]) { --painter-illustration: url("/assets/illustrations/edgar-degas.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/georgia-okeeffe/"]) { --painter-illustration: url("/assets/illustrations/georgia-okeeffe.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/jean-michel-basquiat/"]) { --painter-illustration: url("/assets/illustrations/jean-michel-basquiat.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/keith-haring/"]) { --painter-illustration: url("/assets/illustrations/keith-haring.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/yayoi-kusama/"]) { --painter-illustration: url("/assets/illustrations/yayoi-kusama.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/jmw-turner/"]) { --painter-illustration: url("/assets/illustrations/jmw-turner.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/wassily-kandinsky/"]) { --painter-illustration: url("/assets/illustrations/wassily-kandinsky.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/roy-lichtenstein/"]) { --painter-illustration: url("/assets/illustrations/roy-lichtenstein.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/joan-miro/"]) { --painter-illustration: url("/assets/illustrations/joan-miro.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/marc-chagall/"]) { --painter-illustration: url("/assets/illustrations/marc-chagall.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/edward-hopper/"]) { --painter-illustration: url("/assets/illustrations/edward-hopper.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/albrecht-durer/"]) { --painter-illustration: url("/assets/illustrations/albrecht-durer.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/paul-klee/"]) { --painter-illustration: url("/assets/illustrations/paul-klee.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/david-hockney/"]) { --painter-illustration: url("/assets/illustrations/david-hockney.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/winslow-homer/"]) { --painter-illustration: url("/assets/illustrations/winslow-homer.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/andrew-wyeth/"]) { --painter-illustration: url("/assets/illustrations/andrew-wyeth.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/jasper-johns/"]) { --painter-illustration: url("/assets/illustrations/jasper-johns.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/helen-frankenthaler/"]) { --painter-illustration: url("/assets/illustrations/helen-frankenthaler.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/devon-rodriguez/"]) { --painter-illustration: url("/assets/illustrations/devon-rodriguez.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/ashley-longshore/"]) { --painter-illustration: url("/assets/illustrations/ashley-longshore.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/sophie-tea/"]) { --painter-illustration: url("/assets/illustrations/sophie-tea.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/slawn/"]) { --painter-illustration: url("/assets/illustrations/slawn.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/kiptoe/"]) { --painter-illustration: url("/assets/illustrations/kiptoe.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/sarah-kraning/"]) { --painter-illustration: url("/assets/illustrations/sarah-kraning.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/george-tooker/"]) { --painter-illustration: url("/assets/illustrations/george-tooker.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/jacob-lawrence/"]) { --painter-illustration: url("/assets/illustrations/jacob-lawrence.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/david-alfaro-siqueiros/"]) { --painter-illustration: url("/assets/illustrations/david-alfaro-siqueiros.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/sidney-nolan/"]) { --painter-illustration: url("/assets/illustrations/sidney-nolan.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/frank-stella/"]) { --painter-illustration: url("/assets/illustrations/frank-stella.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/bridget-riley/"]) { --painter-illustration: url("/assets/illustrations/bridget-riley.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/peter-halley/"]) { --painter-illustration: url("/assets/illustrations/peter-halley.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/paul-cadmus/"]) { --painter-illustration: url("/assets/illustrations/paul-cadmus.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/ben-shahn/"]) { --painter-illustration: url("/assets/illustrations/ben-shahn.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/koo-schadler/"]) { --painter-illustration: url("/assets/illustrations/koo-schadler.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/james-gurney/"]) { --painter-illustration: url("/assets/illustrations/james-gurney.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/tony-scherman/"]) { --painter-illustration: url("/assets/illustrations/tony-scherman.svg"); }
main:has(.illustrated-hero) #painters article.card:has(a[href="/painters/betsy-eby/"]) { --painter-illustration: url("/assets/illustrations/betsy-eby.svg"); }

#overview:has(> .illustrated-hero) {
	gap: 0;
}

#overview:has(> .illustrated-hero) > .illustrated-hero {
	border-block-end: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

#overview:has(> .illustrated-hero) > .notice {
	display: flex;
	width: 100%;
	max-width: none;
	flex-direction: column;
	gap: var(--mc-space-5);
	padding: 0;
	border: 0;
	background: transparent;
}

#overview:has(> .illustrated-hero) > .notice > p {
	margin: 0;
}

#overview:has(> .illustrated-hero) > .notice > p:first-child {
	display: none;
}

#overview:has(> .illustrated-hero) > .notice > p:last-child {
	order: -1;
	width: 100%;
	padding: 0 clamp(1.75rem, 5vw, 3.5rem) var(--mc-space-4);
	border: var(--mc-border-width) solid var(--mc-border);
	border-block-start: 0;
	border-radius: 0 0 var(--mc-radius) var(--mc-radius);
	background: var(--mc-surface);
	font-weight: 600;
}

#overview:has(> .illustrated-hero) > .notice > p:nth-child(2) {
	width: min(100%, var(--mc-reading-width));
	padding: var(--mc-space-3) var(--mc-space-4);
	border-inline-start: 0.25rem solid var(--mc-accent);
	background: var(--mc-surface);
	font-size: 0.95rem;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .illustrated-hero::after {
		background: linear-gradient(90deg, var(--mc-surface) 0 43%, rgb(41 35 31 / 94%) 53%, rgb(41 35 31 / 28%) 72%, transparent 84%);
	}
}

[data-theme="dark"] .illustrated-hero::after {
	background: linear-gradient(90deg, var(--mc-surface) 0 43%, rgb(41 35 31 / 94%) 53%, rgb(41 35 31 / 28%) 72%, transparent 84%);
}

@media (max-width: 40rem) {
	main:has(.illustrated-hero) {
		padding-block-start: 0;
	}

	.illustrated-hero {
		width: 100vw;
		min-height: 0;
		margin-inline: calc(50% - 50vw);
		padding-block-start: 13rem;
		border-inline: 0;
		border-radius: 0;
	}

	.illustrated-hero::before {
		bottom: auto;
		height: 14rem;
		background-position: center;
		background-size: cover;
	}

	.illustrated-hero::after,
	[data-theme="dark"] .illustrated-hero::after,
	:root:not([data-theme]) .illustrated-hero::after {
		background: linear-gradient(180deg, transparent 0 38%, var(--mc-surface) 96%);
	}

	.illustrated-hero-content {
		width: 100%;
		padding: var(--mc-space-6) var(--mc-gutter) var(--mc-space-6);
		background: var(--mc-surface);
	}

	#overview:has(> .illustrated-hero) > .notice {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		gap: var(--mc-space-5);
	}

	#overview:has(> .illustrated-hero) > .notice > p:last-child {
		padding: 0 var(--mc-gutter) var(--mc-space-4);
		border-inline: 0;
		border-radius: 0;
	}

	#overview:has(> .illustrated-hero) > .notice > p:nth-child(2) {
		width: calc(100% - (var(--mc-gutter) * 2));
		margin-inline: var(--mc-gutter);
	}
}