body.festival-guide-page {
	--festival-guide-surface: color-mix(in srgb, var(--color-background, #fff) 90%, var(--color-background-100, #f3f3f3) 10%);
	--festival-guide-surface-strong: color-mix(in srgb, var(--color-background, #fff) 80%, var(--color-background-100, #f3f3f3) 20%);
	--festival-guide-surface-soft: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 8%, var(--color-background, #fff) 92%);
	--festival-guide-border: color-mix(in srgb, var(--color-contrast, #111) 10%, var(--color-border, rgba(128, 128, 128, 0.2)) 90%);
	--festival-guide-muted: var(--color-secondary, #757575);
	--festival-guide-heading: var(--color-contrast, #111);
	--festival-guide-shadow: 0 24px 60px -42px rgba(15, 23, 42, 0.18);
	--festival-guide-shadow-soft: 0 18px 42px -34px rgba(15, 23, 42, 0.14);
}

[data-color-scheme="dark"] body.festival-guide-page {
	--festival-guide-surface: color-mix(in srgb, var(--color-background-100, #212121) 84%, var(--color-background, #0f0f0f) 16%);
	--festival-guide-surface-strong: color-mix(in srgb, var(--color-background-100, #212121) 70%, var(--color-background, #0f0f0f) 30%);
	--festival-guide-surface-soft: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 10%, var(--color-background-100, #212121) 90%);
	--festival-guide-border: color-mix(in srgb, var(--color-contrast, #fff) 16%, var(--color-border, rgb(153 153 153 / 30%)) 84%);
	--festival-guide-shadow: 0 30px 70px -46px rgba(0, 0, 0, 0.72);
	--festival-guide-shadow-soft: 0 20px 44px -36px rgba(0, 0, 0, 0.58);
}

@media (prefers-color-scheme: dark) {
	[data-color-scheme="system"] body.festival-guide-page {
		--festival-guide-surface: color-mix(in srgb, var(--color-background-100, #212121) 84%, var(--color-background, #0f0f0f) 16%);
		--festival-guide-surface-strong: color-mix(in srgb, var(--color-background-100, #212121) 70%, var(--color-background, #0f0f0f) 30%);
		--festival-guide-surface-soft: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 10%, var(--color-background-100, #212121) 90%);
		--festival-guide-border: color-mix(in srgb, var(--color-contrast, #fff) 16%, var(--color-border, rgb(153 153 153 / 30%)) 84%);
		--festival-guide-shadow: 0 30px 70px -46px rgba(0, 0, 0, 0.72);
		--festival-guide-shadow-soft: 0 20px 44px -36px rgba(0, 0, 0, 0.58);
	}
}

.festival-guide {
	display: grid;
	gap: clamp(2.75rem, 6vw, 5rem);
	padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.festival-guide__hero-surface,
.festival-guide-card,
.festival-guide-link-card,
.festival-guide__cta-card,
.festival-guide__recommendation {
	border: 1px solid var(--festival-guide-border);
	border-radius: 24px;
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--ghost-accent-color, #e11d48) 12%, transparent) 0%, transparent 46%),
		linear-gradient(180deg, var(--festival-guide-surface-strong), var(--festival-guide-surface));
	box-shadow: var(--festival-guide-shadow);
}

.festival-guide__hero-surface {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	overflow: hidden;
}

.festival-guide__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.85fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

.festival-guide__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.85rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ghost-accent-color, #e11d48);
}

.festival-guide__hero-title {
	margin: 0;
	max-width: 14ch;
	color: var(--festival-guide-heading);
	font-size: clamp(2.35rem, 4vw, 4.4rem);
	line-height: 0.97;
	letter-spacing: -0.03em;
}

.festival-guide__lead,
.festival-guide__section-head > p {
	max-width: 60ch;
	margin: 1rem 0 0;
	color: var(--festival-guide-muted);
	font-size: 1.05rem;
	line-height: 1.72;
}

.festival-guide__hero-actions,
.festival-guide__footer-actions,
.festival-guide__section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.4rem;
}

.festival-guide__pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.festival-guide__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--festival-guide-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--festival-guide-surface) 88%, var(--color-background, #fff) 12%);
	color: var(--festival-guide-heading);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
}

.festival-guide__hero-panel {
	display: grid;
	gap: 1rem;
}

.festival-guide__sample-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1.2rem, 2.8vw, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--ghost-accent-color, #e11d48) 16%, var(--festival-guide-border) 84%);
	border-radius: 22px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--festival-guide-surface-strong) 82%, var(--festival-guide-surface-soft) 18%), var(--festival-guide-surface)),
		radial-gradient(circle at top right, color-mix(in srgb, var(--ghost-accent-color, #e11d48) 10%, transparent) 0%, transparent 48%);
	box-shadow: var(--festival-guide-shadow-soft);
}

.festival-guide__sample-top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.festival-guide__sample-kicker {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ghost-accent-color, #e11d48);
}

.festival-guide__sample-name {
	margin: 0;
	color: var(--festival-guide-heading);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.festival-guide__sample-meta {
	margin: 0;
	color: var(--festival-guide-muted);
	font-size: 0.96rem;
	line-height: 1.55;
}

.festival-guide__sample-list {
	padding-left: 1rem;
}

.festival-guide__ui-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.festival-guide__ui-button {
	display: inline-flex;
	align-items: center;
	gap: 0.62rem;
	min-height: 2.7rem;
	padding: 0.72rem 1rem;
	border: 1px solid var(--festival-guide-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--festival-guide-surface) 88%, var(--color-background, #fff) 12%);
	color: var(--festival-guide-heading);
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.festival-guide__ui-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	color: currentColor;
	flex: 0 0 auto;
}

.festival-guide__ui-button-icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.festival-guide-card {
	display: grid;
	gap: 0.9rem;
	padding: 1.25rem;
	min-width: 0;
}

.festival-guide-card--compact {
	padding: 1.1rem 1.15rem;
	box-shadow: var(--festival-guide-shadow-soft);
}

.festival-guide__step-card {
	position: relative;
	padding-top: 3.3rem;
}

.festival-guide__step-number {
	position: absolute;
	top: 1.15rem;
	left: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 999px;
	background: var(--festival-guide-surface-soft);
	color: var(--ghost-accent-color, #e11d48);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ghost-accent-color, #e11d48) 18%, transparent);
}

.festival-guide__section {
	display: grid;
	gap: 1.4rem;
}

.festival-guide__section-head {
	display: grid;
	gap: 0.25rem;
}

.festival-guide__section-head .section-title,
.festival-guide__cta-title {
	margin: 0;
	color: var(--festival-guide-heading);
	font-size: clamp(1.55rem, 2.2vw, 2.35rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.festival-guide__grid {
	display: grid;
	gap: 1rem;
}

.festival-guide__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.festival-guide__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.festival-guide__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.festival-guide__card-head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.festival-guide__icon-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.65rem;
	height: 2.65rem;
	border-radius: 999px;
	background: var(--festival-guide-surface-soft);
	color: var(--ghost-accent-color, #e11d48);
	flex: 0 0 auto;
}

.festival-guide__icon-bubble svg,
.festival-guide__pill svg,
.festival-guide__badge svg,
.festival-guide-link-card svg {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
}

.festival-guide-card h3,
.festival-guide__recommendation h3,
.festival-guide-link-card h3 {
	margin: 0;
	color: var(--festival-guide-heading);
	font-size: 1.08rem;
	line-height: 1.25;
}

.festival-guide-card p,
.festival-guide__recommendation p,
.festival-guide-link-card p,
.festival-guide__list,
.festival-guide__numbered-list {
	margin: 0;
	color: var(--festival-guide-muted);
}

.festival-guide__list,
.festival-guide__numbered-list {
	display: grid;
	gap: 0.65rem;
	padding-left: 1.1rem;
	line-height: 1.6;
}

.festival-guide__list li::marker,
.festival-guide__numbered-list li::marker {
	color: var(--ghost-accent-color, #e11d48);
	font-weight: 700;
}

.festival-guide__signal-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.festival-guide__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	width: max-content;
	padding: 0.42rem 0.72rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.1;
}

.festival-guide__badge--featured {
	background: color-mix(in srgb, #d6a33a 16%, var(--festival-guide-surface) 84%);
	color: color-mix(in srgb, #d6a33a 76%, var(--festival-guide-heading) 24%);
}

.festival-guide__badge--trending {
	background: color-mix(in srgb, #f97316 14%, var(--festival-guide-surface) 86%);
	color: color-mix(in srgb, #f97316 72%, var(--festival-guide-heading) 28%);
}

.festival-guide__badge--deal {
	background: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 14%, var(--festival-guide-surface) 86%);
	color: var(--ghost-accent-color, #e11d48);
}

.festival-guide__badge--save,
.festival-guide__badge--like {
	background: color-mix(in srgb, var(--festival-guide-heading) 6%, var(--festival-guide-surface) 94%);
	color: var(--festival-guide-heading);
}

.festival-guide__badge-card {
	align-content: start;
}

.festival-guide__recommendation {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
}

.festival-guide__trending-explainer {
	margin-top: 1rem;
}

.festival-guide__trending-explainer p {
	margin: 0;
	max-width: 72ch;
}

.festival-guide__category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.festival-guide-link-card {
	display: grid;
	gap: 0.75rem;
	padding: 1.15rem 1.2rem;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.festival-guide-link-card:hover,
.festival-guide-link-card:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 44%, var(--festival-guide-border) 56%);
	box-shadow: 0 20px 40px -34px color-mix(in srgb, var(--ghost-accent-color, #e11d48) 16%, rgba(15, 23, 42, 0.18));
}

.festival-guide-link-card__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ghost-accent-color, #e11d48);
	font-size: 0.9rem;
	font-weight: 600;
}

.festival-guide__cta-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1.35rem, 3vw, 2rem);
}

.festival-guide__cta-card--inline {
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--ghost-accent-color, #e11d48) 14%, transparent) 0%, transparent 44%),
		linear-gradient(180deg, color-mix(in srgb, var(--festival-guide-surface-soft) 52%, var(--festival-guide-surface-strong) 48%), var(--festival-guide-surface));
}

.festival-guide__cta-card p {
	margin: 0;
	max-width: 58ch;
	color: var(--festival-guide-muted);
}

.festival-guide a:not(.button):not(.festival-guide-link-card) {
	color: var(--ghost-accent-color, #e11d48);
	text-decoration-color: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.festival-guide a:not(.button):not(.festival-guide-link-card):hover,
.festival-guide a:not(.button):not(.festival-guide-link-card):focus-visible {
	text-decoration-color: currentColor;
}

.festival-guide__inline-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--festival-guide-muted);
	font-size: 0.92rem;
	font-weight: 600;
}

.festival-guide__inline-note svg {
	width: 1rem;
	height: 1rem;
}

.ss-guide-entry-points,
.ss-guide-cta,
.ss-guide-plan {
	margin-top: 40px;
}

.ss-guide-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.ss-guide-links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 8px 14px;
	border: 1px solid var(--festival-guide-border);
	border-radius: 999px;
	background: var(--color-bg-secondary, var(--festival-guide-surface-soft));
	color: var(--festival-guide-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.ss-guide-links a:hover,
.ss-guide-links a:focus-visible {
	border-color: color-mix(in srgb, var(--ghost-accent-color, #e11d48) 44%, var(--festival-guide-border) 56%);
	background: color-mix(in srgb, var(--festival-guide-surface-soft) 72%, var(--festival-guide-surface) 28%);
}

.ss-guide-cta {
	justify-items: center;
	text-align: center;
}

.ss-guide-cta-button {
	margin-top: 0.5rem;
}

.ss-guide-proof {
	margin-top: 20px;
	opacity: 0.8;
	font-size: 14px;
}

.festival-guide__extra {
	margin-top: 1rem;
}

.festival-guide__extra .post-content {
	max-width: var(--container--width);
	margin: 0 auto;
}

@media (max-width: 991px) {
	.festival-guide__hero-grid,
	.festival-guide__grid--2,
	.festival-guide__grid--3,
	.festival-guide__grid--4,
	.festival-guide__signal-list,
	.festival-guide__category-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.festival-guide {
		gap: 2.5rem;
		padding-top: 1.25rem;
	}

	.festival-guide__hero-surface,
	.festival-guide-card,
	.festival-guide__recommendation,
	.festival-guide-link-card,
	.festival-guide__cta-card {
		border-radius: 20px;
	}

	.festival-guide__hero-actions,
	.festival-guide__footer-actions,
	.festival-guide__section-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.festival-guide__hero-actions > .button,
	.festival-guide__footer-actions > .button,
	.festival-guide__section-actions > .button {
		width: 100%;
	}

	.festival-guide__ui-actions {
		flex-direction: column;
	}

	.festival-guide__ui-button {
		width: 100%;
		justify-content: center;
	}
}