:root {
	--bg: #e8d3ef;
	--surface: #f5edf7;
	--surface-strong: #a997ac;
	--text: #101419;
	--text-soft: #2d222a;
	--muted: #43546e;
	--border: #a997ac;
	--accent: #391d58;
	--accent-strong: #2e1a44;
	--inverse: #e8d3ef;
	--max: 68rem;
}

.footer-links {
	margin-left: 0.35rem;
	white-space: nowrap;
}
.footer-links a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.footer-links a:hover {
	color: var(--text);
}

/* Work page: two-up album hero grid */
.album-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 1.25rem 0;
}

.album-hero {
	margin: 0;
}

.album-hero-image {
	display: block;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.02);
	transform: translateZ(0);
}

.album-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.album-hero-image:hover,
.album-hero-image:focus-visible {
	outline: none;
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

.album-hero-caption {
	margin-top: 0.65rem;
	font-size: 1.05rem;
}

.album-hero-caption a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.album-hero-caption a:hover {
	border-bottom-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 760px) {
	.album-hero-grid {
		grid-template-columns: 1fr;
	}
}

/* About page: text + polaroid */
.about-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
	gap: 1.25rem;
	align-items: start;
}

.polaroid {
	margin: 0;
	padding: 0.85rem 0.85rem 1.35rem 0.85rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(60, 6, 99, 0.14);
	box-shadow: 0 18px 50px rgba(60, 6, 99, 0.18);
	transform: rotate(4.5deg);
	transform-origin: 70% 20%;
}

.polaroid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.polaroid-caption {
	margin-top: 0.7rem;
	font-size: 0.95rem;
	color: rgba(27, 11, 47, 0.78);
}

@media (max-width: 860px) {
	.about-split {
		grid-template-columns: 1fr;
	}
	.polaroid {
		max-width: 22rem;
		margin: 0.25rem auto 0 auto;
		transform: rotate(2.5deg);
	}
}

/*
	Palette variants
	- "amethyst" variant is for Home + The Insomnia Club (darker / richer)
	- "family" variant is for Family Business (deep ink / blue)
*/
.page-variant-amethyst {
	/* full palette (darker) */
	--dark-amethyst: #310055ff;
	--indigo-ink: #3c0663ff;
	--indigo: #4a0a77ff;
	--indigo-2: #5a108fff;
	--indigo-bloom: #6818a5ff;
	--dark-violet: #8b2fc9ff;
	--lavender-purple: #ab51e3ff;
	--bright-lavender: #bd68eeff;
	--mauve-magic: #d283ffff;
	--mauve: #dc97ffff;

	/* light background + darker text (using amethyst family) */
	--bg: #f3e8ff;
	--surface: rgba(255, 255, 255, 0.72);
	--surface-strong: rgba(220, 151, 255, 0.38);
	--text: #1b0b2f; /* deep plum for legibility */
	--text-soft: rgba(27, 11, 47, 0.88);
	--muted: rgba(27, 11, 47, 0.68);
	--border: rgba(60, 6, 99, 0.18);
	--accent: var(--indigo-ink);
	--accent-strong: var(--indigo);
	--inverse: #ffffff;
}
.page-variant-amethyst body {
	color: var(--text);
}
.page-variant-amethyst a,
.page-variant-amethyst .brand,
.page-variant-amethyst .nav a {
	color: var(--accent);
}
.page-variant-amethyst a:hover {
	opacity: 0.9;
}
.page-variant-amethyst .header {
	background: linear-gradient(
		180deg,
		rgba(243, 232, 255, 0.92),
		rgba(220, 151, 255, 0.46)
	);
}
.page-variant-amethyst .main {
	background:
		radial-gradient(
			1100px 700px at 12% 10%,
			rgba(189, 104, 238, 0.42),
			transparent 62%
		),
		radial-gradient(
			900px 650px at 86% 18%,
			rgba(220, 151, 255, 0.55),
			transparent 60%
		),
		radial-gradient(
			900px 680px at 46% 92%,
			rgba(104, 24, 165, 0.16),
			transparent 58%
		),
		linear-gradient(
			135deg,
			rgba(243, 232, 255, 0.96),
			rgba(220, 151, 255, 0.36)
		);
}
.page-variant-amethyst .footer {
	background: rgba(220, 151, 255, 0.16);
}
.page-variant-amethyst .card {
	background: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.78),
		rgba(220, 151, 255, 0.26)
	);
	border-color: rgba(60, 6, 99, 0.16);
	box-shadow: 0 16px 40px rgba(60, 6, 99, 0.12);
}
.page-variant-amethyst .h1,
.page-variant-amethyst .h2,
.page-variant-amethyst .track-title,
.page-variant-amethyst .track-subtitle {
	color: var(--text);
}
.page-variant-amethyst .small,
.page-variant-amethyst .lede,
.page-variant-amethyst .track-meta,
.page-variant-amethyst .track-number {
	color: var(--muted);
}
.page-variant-amethyst .track-item,
.page-variant-amethyst .track-feature {
	background: rgba(0, 0, 0, 0.14);
	border-color: rgba(189, 104, 238, 0.26);
}
.page-variant-amethyst .pill {
	background: linear-gradient(
		160deg,
		rgba(90, 16, 143, 0.14),
		rgba(220, 151, 255, 0.26)
	);
	color: var(--text);
}
.page-variant-amethyst .note {
	color: var(--text-soft);
	border-left-color: rgba(220, 151, 255, 0.7);
}
.page-variant-amethyst .button {
	background: linear-gradient(160deg, var(--indigo-ink), var(--indigo-bloom));
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(60, 6, 99, 0.22);
}
.page-variant-amethyst .button:hover {
	background: linear-gradient(160deg, var(--indigo-bloom), var(--dark-violet));
}
.page-variant-amethyst .media-embed {
	background: linear-gradient(
		180deg,
		rgba(189, 104, 238, 0.22),
		rgba(220, 151, 255, 0.16)
	);
}

.page-variant-family {
	/* full palette (ink / blue) */
	--ink-black: #00111cff;
	--ink-black-2: #001523ff;
	--ink-black-3: #001a2cff;
	--deep-space-blue: #002137ff;
	--deep-space-blue-2: #00253eff;
	--deep-space-blue-3: #002945ff;
	--deep-space-blue-4: #002e4eff;
	--deep-space-blue-5: #003356ff;
	--yale-blue: #003a61ff;
	--yale-blue-2: #00406cff;

	/* strict palette observance: ONLY use the provided palette values */
	--bg: var(--ink-black);
	--surface: var(--deep-space-blue-2);
	--surface-strong: var(--deep-space-blue-5);
	--text: #eaf6ff;
	--text-soft: rgba(234, 246, 255, 0.92);
	--muted: rgba(234, 246, 255, 0.72);
	--border: var(--yale-blue-2);
	--accent: var(--yale-blue);
	--accent-strong: var(--yale-blue-2);
	--inverse: var(--ink-black);
}
.page-variant-family body {
	color: var(--text);
}
.page-variant-family a,
.page-variant-family .brand,
.page-variant-family .nav a {
	color: var(--text);
}
.page-variant-family .nav a[aria-current='page'] {
	color: var(--text);
	text-decoration: underline;
}
.page-variant-family .header {
	background: linear-gradient(
		135deg,
		var(--deep-space-blue-2),
		var(--yale-blue)
	);
}
.page-variant-family .main {
	background:
		radial-gradient(
			1100px 720px at 70% 8%,
			var(--yale-blue-2),
			transparent 60%
		),
		radial-gradient(1000px 720px at 12% 22%, var(--yale-blue), transparent 58%),
		radial-gradient(
			900px 780px at 42% 92%,
			var(--deep-space-blue-4),
			transparent 56%
		),
		radial-gradient(
			820px 620px at 88% 78%,
			var(--deep-space-blue-5),
			transparent 56%
		),
		linear-gradient(135deg, var(--ink-black-2), var(--deep-space-blue-2));
	position: relative;
}
.page-variant-family .main::before {
	/* Subtle CSS-only grain (no images) */
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 21, 35, 0.04) 0,
			rgba(0, 21, 35, 0.04) 1px,
			transparent 1px,
			transparent 3px
		),
		repeating-linear-gradient(
			90deg,
			rgba(0, 21, 35, 0.025) 0,
			rgba(0, 21, 35, 0.025) 1px,
			transparent 1px,
			transparent 4px
		);
	opacity: 0.22;
	mix-blend-mode: multiply;
}
.page-variant-family .main {
	isolation: isolate;
}
.page-variant-family .container,
.page-variant-family .header,
.page-variant-family .footer {
	position: relative;
	z-index: 1;
}
.page-variant-family .footer {
	background: rgba(0, 0, 0, 0.18);
}
.page-variant-family .card {
	background: linear-gradient(
		160deg,
		var(--deep-space-blue-2),
		var(--deep-space-blue-4)
	);
	border-color: rgba(0, 64, 108, 0.55);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
}
.page-variant-family .h1,
.page-variant-family .h2,
.page-variant-family .track-title,
.page-variant-family .track-subtitle {
	color: var(--text);
}
.page-variant-family .small,
.page-variant-family .lede,
.page-variant-family .track-meta,
.page-variant-family .track-number {
	color: var(--muted);
}
.page-variant-family .track-item,
.page-variant-family .track-feature {
	background: rgba(0, 0, 0, 0.12);
	border-color: rgba(0, 64, 108, 0.45);
}
.page-variant-family .pill {
	background: linear-gradient(
		160deg,
		rgba(0, 64, 108, 0.14),
		rgba(231, 243, 255, 0.45)
	);
	color: var(--text);
}
.page-variant-family .note {
	color: var(--text-soft);
	border-left-color: rgba(234, 246, 255, 0.55);
}
.page-variant-family .button {
	background: linear-gradient(
		160deg,
		var(--deep-space-blue-5),
		var(--yale-blue-2)
	);
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(0, 33, 55, 0.18);
}
.page-variant-family .button:hover {
	background: linear-gradient(160deg, var(--yale-blue), var(--yale-blue-2));
}
.page-variant-family .track-photo {
	border-color: rgba(0, 64, 108, 0.45);
}
.page-variant-family .track-photo img {
	background: linear-gradient(
		180deg,
		rgba(0, 21, 35, 0.55),
		rgba(0, 33, 55, 0.24)
	);
}
.page-variant-family .track-highlight-box,
.page-variant-family .media-link {
	background: linear-gradient(
		160deg,
		rgba(0, 64, 108, 0.12),
		rgba(255, 255, 255, 0.62)
	);
	border-color: rgba(0, 64, 108, 0.22);
	box-shadow: 0 16px 36px rgba(0, 33, 55, 0.12);
}

.track-grid {
	display: grid;
	gap: 1rem;
}
@media (min-width: 52rem) {
	.track-grid {
		grid-template-columns: 1fr;
	}
}
.track-card {
	display: grid;
	gap: 1rem;
	align-items: start;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.1);
}
@media (min-width: 52rem) {
	.track-card {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.6fr);
	}
}
.track-card a {
	color: inherit;
}
.track-card-image {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.12);
}
.track-card-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	font-family:
		ui-sans-serif,
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Helvetica,
		Arial,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
}
a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
a:hover {
	opacity: 0.85;
}
.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 2rem 1.25rem;
}
.header {
	border-bottom: 1px solid var(--border);
	background: linear-gradient(
		180deg,
		rgba(232, 211, 239, 0.96),
		rgba(169, 151, 172, 0.92)
	);
	backdrop-filter: blur(8px);
}
.header-inner {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	justify-content: space-between;
	padding: 1.25rem 1.25rem;
	max-width: var(--max);
	margin: 0 auto;
}
.brand {
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--accent-strong);
	text-decoration: none;
}
.nav a {
	margin-left: 1rem;
	text-decoration: none;
	color: var(--text-soft);
}
.nav a[aria-current='page'] {
	color: var(--accent-strong);
	text-decoration: underline;
}
.main {
	padding: 2rem 0;
}
.footer {
	border-top: 1px solid var(--border);
	color: var(--text-soft);
	font-size: 0.95rem;
	background: rgba(169, 151, 172, 0.18);
}
.grid {
	display: grid;
	gap: 1.25rem;
}
@media (min-width: 52rem) {
	.grid-2 {
		grid-template-columns: 1fr 1fr;
	}
}
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 16px 40px rgba(46, 26, 68, 0.08);
}
.h1 {
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1.1;
	margin: 0 0 1rem 0;
	letter-spacing: -0.02em;
	color: var(--accent-strong);
}
.h2 {
	font-size: 1.25rem;
	margin: 0 0 0.75rem 0;
	color: var(--accent);
}
.lede {
	font-size: 1.1rem;
	color: var(--muted);
	max-width: 55ch;
}
.kicker {
	color: var(--fjord, var(--muted));
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
}
.hr {
	height: 1px;
	background: var(--border);
	margin: 2rem 0;
}
.small {
	font-size: 0.95rem;
	color: var(--muted);
}
.button {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	text-decoration: none;
	color: var(--inverse);
	background: var(--accent);
	box-shadow: 0 10px 24px rgba(57, 29, 88, 0.22);
	transition:
		transform 140ms ease,
		filter 140ms ease,
		box-shadow 140ms ease,
		background-color 140ms ease,
		border-color 140ms ease,
		color 140ms ease;
}
.button:hover,
.button:focus-visible {
	background: var(--accent-strong);
	filter: brightness(1.03);
	transform: translateY(-1px);
	box-shadow: 0 14px 34px rgba(57, 29, 88, 0.3);
}

.button:focus-visible {
	outline: 3px solid rgba(57, 29, 88, 0.22);
	outline-offset: 2px;
}

/* Button variant: ghost (used on hero overlays) */
.button.button--ghost {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.button.button--ghost:hover,
.button.button--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.26);
	border-color: rgba(255, 255, 255, 0.55);
	filter: none;
}
.note {
	border-left: 3px solid var(--accent);
	padding-left: 1rem;
	color: var(--text-soft);
}
code {
	background: rgba(57, 29, 88, 0.08);
	color: var(--accent-strong);
	padding: 0.15rem 0.35rem;
	border-radius: 6px;
}
input,
textarea,
select {
	background: white;
	color: var(--text);
}
.media-embed {
	width: 100%;
	min-height: 352px;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(46, 26, 68, 0.12);
	background: linear-gradient(
		180deg,
		rgba(57, 29, 88, 0.12),
		rgba(169, 151, 172, 0.18)
	);
}
.cover-panel {
	position: relative;
	min-height: 28rem;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(169, 151, 172, 0.8);
	box-shadow: 0 16px 40px rgba(46, 26, 68, 0.12);
	background: #ddd;
}
.cover-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cover-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 20, 25, 0.06) 25%,
		rgba(46, 26, 68, 0.42) 100%
	);
}
.cover-panel-note {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	padding: 1rem 1.05rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 16px 36px rgba(46, 26, 68, 0.16);
}
.hero-splash {
	position: relative;
	min-height: 36rem;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(169, 151, 172, 0.7);
	box-shadow: 0 18px 44px rgba(46, 26, 68, 0.12);
	background: #d8c5df;
	display: grid;
	align-items: end;
}
.hero-splash img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero-splash::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 20, 25, 0.1) 15%,
		rgba(16, 20, 25, 0.55) 100%
	);
}
.hero-splash-content {
	position: relative;
	z-index: 1;
	padding: 2rem;
	max-width: 38rem;
}
.hero-kicker {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0.75rem;
}
.hero-title {
	margin: 0;
	font-size: clamp(2.35rem, 5vw, 4.8rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: white;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.stack {
	display: grid;
	gap: 1rem;
}
.tracklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}
.track-item {
	padding: 1rem;
	border: 1px solid rgba(169, 151, 172, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.45);
}
.track-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 0.5rem;
	color: var(--muted);
	font-size: 0.92rem;
}
.track-number {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.track-title {
	margin: 0.1rem 0 0.45rem 0;
	font-size: 1.2rem;
	color: var(--accent-strong);
}
.pill {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(57, 29, 88, 0.1);
	color: var(--accent-strong);
	font-size: 0.85rem;
}
.track-feature {
	display: grid;
	gap: 1.25rem;
	padding: 1rem;
	border: 1px solid rgba(169, 151, 172, 0.8);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.5);
}
@media (min-width: 52rem) {
	.track-feature {
		grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.5fr);
		align-items: start;
	}
}
.track-photo {
	position: relative;
	min-height: 28rem;
	border-radius: 16px;
	border: 1px solid rgba(169, 151, 172, 0.8);
	display: grid;
	place-items: end end;
	overflow: hidden;
	background: #ddd;
}
.track-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 20, 25, 0.02) 35%,
		rgba(46, 26, 68, 0.34) 100%
	);
	pointer-events: none;
}
.track-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	border-radius: 0;
	background: linear-gradient(
		180deg,
		rgba(232, 211, 239, 0.38),
		rgba(169, 151, 172, 0.22)
	);
}
.track-photo-note {
	display: none;
}
.track-sections {
	display: grid;
	gap: 0.85rem;
	padding: 0.35rem 0 0.35rem 0.2rem;
	align-content: center;
}
.track-highlight-box {
	padding: 1rem 1.05rem;
	border-radius: 14px;
	background: linear-gradient(
		160deg,
		rgba(57, 29, 88, 0.14),
		rgba(169, 151, 172, 0.22)
	);
	border: 1px solid rgba(57, 29, 88, 0.18);
	box-shadow: 0 16px 36px rgba(46, 26, 68, 0.14);
}
.track-highlight-box strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--accent-strong);
}
.track-detail-group {
	display: grid;
	gap: 0.35rem;
}
.track-detail-group p,
.track-detail-group ul {
	margin-top: 0;
	margin-bottom: 0;
}
.track-subtitle {
	margin: 0;
	font-size: 1rem;
	color: var(--accent);
}
.collaborator-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--text-soft);
}
.media-link-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.media-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.68rem 0.95rem;
	border-radius: 999px;
	background: linear-gradient(
		160deg,
		rgba(57, 29, 88, 0.12),
		rgba(169, 151, 172, 0.18)
	);
	color: var(--accent-strong);
	text-decoration: none;
	border: 1px solid rgba(169, 151, 172, 0.7);
	box-shadow: 0 8px 20px rgba(46, 26, 68, 0.08);
	font-weight: 600;
}
.media-link:hover {
	background: linear-gradient(
		160deg,
		rgba(57, 29, 88, 0.2),
		rgba(169, 151, 172, 0.24)
	);
}
.media-link-kind {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: 0.18rem 0.42rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.photo-caption {
	margin: 0.15rem 0 0 0;
	color: var(--muted);
	font-size: 0.92rem;
}
.album-variant-family {
	--album-bg: #2d222a;
	--album-surface: #391d58;
	--album-surface-soft: rgba(46, 26, 68, 0.26);
	--album-text: #e8d3ef;
	--album-muted: #a997ac;
	--album-border: rgba(232, 211, 239, 0.24);
	background: linear-gradient(
		180deg,
		rgba(45, 34, 42, 0.94),
		rgba(57, 29, 88, 0.96)
	);
	color: var(--album-text);
}
.album-variant-family .h2,
.album-variant-family .track-title,
.album-variant-family .pill {
	color: var(--album-text);
}
.album-variant-family .small,
.album-variant-family .track-number,
.album-variant-family .track-meta,
.album-variant-family .lede {
	color: var(--album-muted);
}
.album-variant-family .note {
	color: var(--album-text);
	border-left-color: #e8d3ef;
}
.album-variant-family .track-item {
	background: rgba(232, 211, 239, 0.08);
	border-color: var(--album-border);
}
.album-variant-family .pill {
	background: rgba(232, 211, 239, 0.12);
}
.album-variant-family .media-embed {
	background: linear-gradient(
		180deg,
		rgba(232, 211, 239, 0.12),
		rgba(169, 151, 172, 0.08)
	);
}