/* Friction45 — design tokens from Figma Make */
:root {
	--rose: #eebcc5;
	--black: #000000;
	--white: #ffffff;
	--burgundy: #7d3e52;
	--violet: #453e56;
	--terracotta: #b26c57;
	--pink: #fd9db9;
	--gray-bg: #f5f5f5;
	--dark: #0e0e0e;
	--slate: #3e5c76;
	--sand: #d8cfc4;
	--red: #7a1e2c;
	--border-width: 4px;
	--container: 72rem;
	--nav-height: 4.5rem;
	--font: "Antonio", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Layout themes */
.theme-dark {
	background: var(--black);
	color: var(--white);
}

.theme-light {
	background: var(--gray-bg);
	color: var(--dark);
}

.theme-rose {
	background: var(--rose);
	color: var(--black);
}

/* Navigation */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--rose);
	color: var(--black);
	border-bottom: var(--border-width) solid var(--black);
}

.site-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--nav-height);
	padding-block: 1rem;
	gap: 1rem;
}

.site-nav__logo {
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.site-nav__logo:hover,
.site-nav__link:hover,
.site-nav__social:hover {
	opacity: 0.7;
}

.site-nav__right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.site-nav__links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__link {
	font-size: 0.875rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-nav__link.is-active {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.site-nav__socials {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--black);
}

.site-nav__social {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-nav__toggle {
	display: none;
	background: transparent;
	border: var(--border-width) solid var(--black);
	padding: 0.5rem 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 0.75rem;
}

/* Typography */
.hero-title {
	font-size: clamp(3rem, 10vw, 8rem);
	line-height: 0.85;
	font-weight: 900;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

.hero-title span {
	color: var(--burgundy);
}

.page-hero--sessions,
.page-hero--about {
	padding-bottom: 4rem;
}

.page-hero--shows {
	padding-bottom: 2.5rem;
}

.hero-title--sessions,
.hero-title--about,
.hero-title--shows {
	font-size: clamp(3.75rem, 16vw, 11rem);
	margin-bottom: 0;
	line-height: 0.82;
}

.section-title {
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

/* Sections */
.page-hero {
	padding-top: calc(var(--nav-height) + 4rem);
	padding-bottom: 3rem;
	border-bottom: var(--border-width) solid currentColor;
}

.page-hero--rose-border {
	border-bottom-color: var(--rose);
}

.section--rose-border {
	border-top-color: var(--rose);
}

.btn--rose-border {
	border-color: var(--rose);
}

.btn--violet {
	color: var(--violet);
	border-color: var(--violet);
}

.section {
	padding-block: 5rem;
}

.section--compact {
	padding-block: 2rem;
	border-bottom: var(--border-width) solid var(--dark);
}

.shows-views .section--compact {
	padding-block: 1.25rem;
}

.section--border-top {
	border-top: var(--border-width) solid currentColor;
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 1.25rem 3rem;
	font-size: 1.125rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: var(--border-width) solid currentColor;
	transition: opacity 0.2s;
}

.btn:hover {
	opacity: 0.8;
}

.btn--burgundy {
	background: var(--burgundy);
	color: var(--white);
	border-color: var(--white);
}

.btn--outline {
	background: transparent;
}

.btn--slate {
	background: var(--slate);
	color: var(--gray-bg);
	border-color: var(--dark);
}

.empty-state {
	font-size: 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
}

.error-404 {
	min-height: calc(100dvh - var(--nav-height) - 12rem);
	display: flex;
	align-items: center;
}

.error-404__inner {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
}

.error-404__code {
	margin: 0 0 1rem;
	font-size: clamp(4rem, 18vw, 10rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--burgundy);
}

.error-404__title {
	margin-bottom: 1.5rem;
	margin-top: 0.5rem;
	font-size: clamp(2rem, 6vw, 3.5rem);
}

.error-404__text {
	margin: 0.75rem auto 3rem;
	max-width: 28rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--terracotta);
	line-height: 1.5;
}

/* Featured latest session (homepage hero) — Figma Make */
.session-featured {
	position: relative;
	width: 100%;
	min-height: 600px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.session-featured__media {
	position: absolute;
	inset: 0;
}

.session-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.session-featured__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		#000000 0%,
		rgba(0, 0, 0, 0.7) 45%,
		rgba(0, 0, 0, 0.2) 100%
	);
}

.session-featured__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 4rem;
	padding-top: 6rem;
}

.session-featured__badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.25rem 1rem;
	background: var(--burgundy);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.session-featured__title {
	margin: 0 0 2rem;
	font-size: 12vw;
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--white);
}

.session-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2rem 4rem;
}

.session-featured__tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.session-featured__tracks li {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-weight: 900;
	text-transform: uppercase;
}

.session-featured__track-num {
	color: var(--burgundy);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	min-width: 1.75rem;
}

.session-featured__track-name {
	color: var(--rose);
	font-size: 1.125rem;
	letter-spacing: 0.04em;
}

.session-featured__play {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--pink);
}

.session-featured__play:hover {
	opacity: 0.85;
}

.session-featured__play-circle {
	width: 5rem;
	height: 5rem;
	border: var(--border-width) solid var(--pink);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pink);
	flex-shrink: 0;
}

.session-featured__play-circle svg {
	width: 2rem;
	height: 2rem;
	margin-left: 0.15rem;
	fill: currentColor;
	color: var(--pink);
}

.session-featured__play-label {
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.session-featured__accent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--burgundy);
	z-index: 2;
}

.section-title--sessions-prev {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--terracotta);
}

.section--sessions-prev-head {
	padding-top: 5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
}

.section--sessions-filter--under-prev {
	padding-top: 2rem;
	border-top: none;
}

.section--previous-sessions {
	padding-top: 4rem;
}

/* Alumni — matched to Figma Make /famille */
.page-hero--alumni {
	padding-top: calc(var(--nav-height) + 3.5rem);
	padding-bottom: 3rem;
	border-bottom: none;
}

.section--alumni {
	padding-block: 5rem;
}

.alumni-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--terracotta);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-title--alumni {
	font-size: clamp(3.75rem, 10vw, 10vw);
	margin-bottom: 1rem;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--white);
}

.hero-title--alumni span {
	color: var(--burgundy);
}

.alumni-intro {
	margin: 1.5rem 0 0;
	max-width: 28rem;
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: color-mix(in srgb, var(--rose) 50%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

.alumni-card {
	position: relative;
	aspect-ratio: 2 / 3;
	perspective: 1000px;
	cursor: pointer;
	outline: none;
	transition: transform 0.25s ease;
}

.alumni-card:hover:not(.is-flipped) {
	transform: scale(1.02);
}

.alumni-card:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: 4px;
}

.alumni-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

.alumni-card.is-flipped .alumni-card__inner {
	transform: rotateY(180deg);
}

.alumni-card__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.alumni-card__face--front {
	pointer-events: auto;
}

.alumni-card__face--front::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent 35%,
		color-mix(in srgb, var(--white) 18%, transparent) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.alumni-card:hover:not(.is-flipped) .alumni-card__face--front::after {
	opacity: 1;
	animation: alumni-shine 0.7s ease forwards;
}

@keyframes alumni-shine {
	from {
		transform: translateX(-120%);
	}
	to {
		transform: translateX(120%);
	}
}

.alumni-card__face--back {
	background: var(--dark);
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.alumni-card.is-flipped .alumni-card__face--front {
	pointer-events: none;
}

.alumni-card.is-flipped .alumni-card__face--back {
	pointer-events: auto;
}

.alumni-card__frame {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	border: 3px solid var(--rose);
	transition: border-color 0.2s ease;
}

.alumni-card:hover:not(.is-flipped) .alumni-card__frame--front {
	border-color: var(--white);
}

.alumni-card__frame--back {
	border-color: var(--burgundy);
}

.alumni-card__frame-inner {
	position: absolute;
	inset: 6px;
	z-index: 10;
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
}

.alumni-card__frame-inner--back {
	border-color: color-mix(in srgb, var(--burgundy) 30%, transparent);
}

.alumni-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.25);
}

.alumni-card__noise {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.2;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 128px 128px;
}

.alumni-card__noise--back {
	opacity: 0.1;
}

.alumni-card__gradient {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to top,
		var(--dark) 0%,
		color-mix(in srgb, var(--dark) 40%, transparent) 45%,
		transparent 100%
	);
}

.alumni-card__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 20;
	padding: 0.25rem 0.5rem;
	background: var(--burgundy);
	border: 1px solid color-mix(in srgb, var(--rose) 50%, transparent);
	color: var(--rose);
	font-size: 0.5625rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	line-height: 1;
}

.alumni-card__badge--back {
	position: static;
	display: inline-flex;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0.375rem 0.75rem;
	border-color: color-mix(in srgb, var(--rose) 30%, transparent);
	letter-spacing: 0.2em;
}

.alumni-card__front-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 1rem;
}

.alumni-card__hint {
	position: absolute;
	left: 50%;
	bottom: 5.25rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.65rem;
	transform: translateX(-50%) translateY(6px);
	background: color-mix(in srgb, var(--dark) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent);
	color: var(--rose);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.alumni-card__hint-icon {
	font-size: 0.75rem;
	line-height: 1;
}

.alumni-card:hover:not(.is-flipped) .alumni-card__hint,
.alumni-card:focus-visible:not(.is-flipped) .alumni-card__hint {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.alumni-grid.has-interacted .alumni-card__hint {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.alumni-card,
	.alumni-card__inner,
	.alumni-card__hint {
		transition: none;
	}

	.alumni-card:hover:not(.is-flipped) {
		transform: none;
	}

	.alumni-card:hover:not(.is-flipped) .alumni-card__face--front::after {
		animation: none;
		opacity: 0;
	}
}

.alumni-card__genres {
	margin: 0 0 0.25rem;
	font-size: 0.625rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--terracotta);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.alumni-card__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--white);
}

.alumni-card__city {
	margin: 0.25rem 0 0;
	font-size: 0.625rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: color-mix(in srgb, var(--rose) 60%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.alumni-card__city--back {
	color: var(--terracotta);
	margin-bottom: 0.75rem;
}

.alumni-card__back-body {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
}

.alumni-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.alumni-card__tags li {
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--burgundy);
	font-size: 0.5625rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rose);
}

.alumni-card__rule {
	border-top: 1px solid color-mix(in srgb, var(--rose) 20%, transparent);
	margin-bottom: 1rem;
}

.alumni-card__rule--footer {
	margin-top: 1rem;
	margin-bottom: 0;
	padding-top: 1rem;
}

.alumni-card__session-label {
	margin: 0 0 0.25rem;
	font-size: 0.625rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--terracotta);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.alumni-card__session {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--rose);
}

.alumni-card__bio {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.6;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: color-mix(in srgb, var(--white) 70%, transparent);
	flex: 1;
}

.alumni-card__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 30;
}

.alumni-card__socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--rose);
	font-size: 0.625rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	pointer-events: auto;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.alumni-card__social-icon {
	display: inline-flex;
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}

.alumni-card__social-icon svg {
	width: 100%;
	height: 100%;
}

.alumni-card__socials a:hover,
.alumni-card__socials a:focus-visible {
	opacity: 1;
}

.alumni-badge-cta {
	padding-block: 4rem;
	border-top: 1px solid color-mix(in srgb, var(--rose) 20%, transparent);
}

.alumni-badge-cta__inner {
	max-width: 42rem;
}

.alumni-badge-cta__badge {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 0.5rem 1rem;
	background: var(--burgundy);
	border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
	color: var(--rose);
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.alumni-badge-cta__title {
	margin: 0 0 1rem;
	font-size: 1.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--white);
}

.alumni-badge-cta__text {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: color-mix(in srgb, var(--rose) 60%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.alumni-badge-cta__btn {
	display: inline-block;
	padding: 0.75rem 2rem;
	border: 2px solid var(--burgundy);
	color: var(--rose);
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.alumni-badge-cta__btn:hover {
	opacity: 0.8;
}

/* Session cards — larger thumbnails on homepage */
.sessions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-inline: auto;
}

.session-card {
	cursor: default;
}

.session-card--has-video {
	cursor: pointer;
}

.session-card--has-video:hover {
	opacity: 0.9;
}

.session-card__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	font: inherit;
}

.session-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	min-height: 12rem;
	border: var(--border-width) solid var(--white);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.session-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.session-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

.session-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.session-card__play-circle {
	width: 5rem;
	height: 5rem;
	border: var(--border-width) solid var(--burgundy);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--burgundy);
}

.session-card__play-circle svg {
	width: 2rem;
	height: 2rem;
	margin-left: 0.15rem;
	fill: currentColor;
	color: var(--burgundy);
}

.session-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 900;
	background: var(--burgundy);
	color: var(--white);
}

.session-card__band {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: var(--burgundy);
}

.session-card__subtitle {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--terracotta);
	margin-bottom: 0.5rem;
}

.session-card__tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.session-card__tracks li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--white);
}

.session-card__tracks li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--burgundy);
	flex-shrink: 0;
}

.sessions-pagination {
	margin-top: 3rem;
}

.sessions-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sessions-pagination .page-numbers li {
	margin: 0;
}

.sessions-pagination a,
.sessions-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	padding: 0.75rem 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border: var(--border-width) solid currentColor;
}

.sessions-pagination a:hover {
	background: var(--burgundy);
	color: var(--white);
	border-color: var(--burgundy);
}

.sessions-pagination .current {
	background: var(--white);
	color: var(--black);
}

/* Live session filters (dark theme) */
.section--sessions-filter {
	border-bottom: var(--border-width) solid var(--white);
}

.theme-dark .session-filters .view-toggle__btn {
	border-color: var(--white);
	color: var(--white);
	text-decoration: none;
}

.theme-dark .session-filters .view-toggle__btn.is-active,
.theme-dark .session-filters .view-toggle__btn:hover {
	background: var(--white);
	color: var(--black);
}

.theme-dark .session-filters .view-toggle__btn.is-active {
	background: var(--burgundy);
	color: var(--white);
	border-color: var(--burgundy);
}

.session-filters__group + .session-filters__group {
	margin-top: 1.25rem;
}

.session-filters__label {
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--terracotta);
}

.session-filters__scroll--enabled {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
}

.session-filters__scroll--enabled .session-filters__toggle {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	min-width: 100%;
}

.session-filters__scroll--enabled .view-toggle__btn {
	white-space: nowrap;
	flex-shrink: 0;
}

/* CTA block */
.cta-block {
	text-align: center;
}

.cta-block__title {
	font-size: clamp(2rem, 5vw, 3.125rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	margin: 0 0 1.5rem;
}

.cta-block__text {
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--terracotta);
	margin: 0 0 2rem;
}

.cta-block__text--slate {
	color: var(--slate);
}

/* Footer */
.site-footer {
	padding-block: 3rem;
	border-top: var(--border-width) solid currentColor;
	text-align: center;
}

.site-footer__brand {
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 900;
	margin: 0 0 1rem;
}

.site-footer__tagline {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--terracotta);
	margin: 0 0 1.5rem;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
}

.site-footer__icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	border: 2px solid var(--burgundy);
	transition: background 0.2s, color 0.2s;
}

.site-footer__icon-link:hover {
	background: var(--burgundy);
	color: var(--white);
}

.site-footer__icon-link--pink {
	border-color: var(--pink);
}

.site-footer__icon-link--pink:hover {
	background: var(--pink);
	color: var(--black);
}

.site-footer__email {
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--terracotta);
	transition: background 0.2s, color 0.2s;
}

.site-footer__email:hover {
	background: var(--terracotta);
	color: var(--black);
}

/* Shows page */
.view-toggle {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: var(--border-width) solid var(--dark);
	background: transparent;
	color: var(--dark);
	transition: background 0.2s, color 0.2s;
}

.view-toggle__btn.is-active,
.view-toggle__btn:hover {
	background: var(--dark);
	color: var(--gray-bg);
}

.shows-views .view-toggle {
	gap: 1rem;
}

.shows-views .view-toggle__btn {
	padding: 0.875rem 2rem;
}

.shows-views .section[data-view-panel] {
	padding-top: 3.5rem;
}

.shows-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.show-card {
	border: var(--border-width) solid var(--dark);
	background: var(--gray-bg);
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

a.show-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.show-card:focus-visible {
	outline: 3px solid var(--show-color, var(--dark));
	outline-offset: 2px;
}

.show-card:hover,
.show-card:focus-visible {
	border-color: var(--show-color, var(--dark));
}

.show-card:hover {
	background: linear-gradient(to right, var(--gray-bg), var(--sand));
}

.show-card__inner {
	display: flex;
	flex-direction: column;
}

.show-card__image {
	width: 100%;
	height: 12rem;
	flex-shrink: 0;
	border-bottom: var(--border-width) solid var(--dark);
	overflow: hidden;
}

.show-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.5s;
}

.show-card:hover .show-card__image img {
	filter: grayscale(0%);
}

.show-card__body {
	flex: 1;
	padding: 1.5rem 2rem;
}

.show-card__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: baseline;
	margin-bottom: 1rem;
}

.show-card__date {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	line-height: 1;
}

.show-card__day {
	font-size: 1.25rem;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.show-card__bands {
	margin: 1rem 0;
}

.show-card__band {
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	transition: transform 0.3s ease;
}

.show-card__band:nth-child(1) {
	transition-delay: 0ms;
}

.show-card__band:nth-child(2) {
	transition-delay: 50ms;
}

.show-card__band:nth-child(3) {
	transition-delay: 100ms;
}

.show-card__band:nth-child(4) {
	transition-delay: 150ms;
}

.show-card:hover .show-card__band,
.show-card:focus-visible .show-card__band {
	transform: translateX(0.5rem);
}

.show-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.show-card__price {
	padding: 0.75rem 1.5rem;
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--gray-bg);
	border: var(--border-width) solid var(--dark);
}

.show-card__arrow {
	font-size: 3.75rem;
	font-weight: 900;
	line-height: 1;
	transition: transform 0.3s ease;
}

.show-card:hover .show-card__arrow,
.show-card:focus-visible .show-card__arrow {
	transform: translateX(0.5rem);
}

.show-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	flex-shrink: 0;
}

/* Single concert */
.page-hero--compact {
	padding-top: calc(var(--nav-height) + 1.5rem);
	padding-bottom: 1rem;
	border-bottom: var(--border-width) solid var(--dark);
}

.show-single__back {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--slate);
	text-decoration: none;
	transition: color 0.2s;
}

.show-single__back:hover {
	color: var(--dark);
}

.show-single__card {
	border: var(--border-width) solid var(--dark);
	background: var(--gray-bg);
}

.show-single__layout {
	display: flex;
	flex-direction: column;
}

.show-single__image {
	width: 100%;
	height: 16rem;
	border-bottom: var(--border-width) solid var(--dark);
	overflow: hidden;
}

.show-single__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.show-single__content {
	padding: 2rem;
}

.show-single__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: baseline;
	margin-bottom: 1.5rem;
}

.show-single__date {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1;
	overflow-wrap: anywhere;
}

.show-single__day {
	font-size: 1.25rem;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.show-single__bands {
	margin-bottom: 1.5rem;
}

.show-single__band {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.show-single__band + .show-single__band {
	margin-top: 0.5rem;
}

.show-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2rem;
}

.show-single__meta p {
	margin: 0;
}

.show-single__price {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--gray-bg);
	border: var(--border-width) solid var(--dark);
}

.show-single__body {
	max-width: 42rem;
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.show-single__body > :first-child {
	margin-top: 0;
}

.show-single__body > :last-child {
	margin-bottom: 0;
}

.show-single__actions {
	margin-top: 1rem;
}

/* About page */
.about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

.about-images {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.about-image-frame {
	position: relative;
}

.about-image-frame__shadow {
	position: absolute;
	top: -1rem;
	left: -1rem;
	width: 100%;
	height: 100%;
	border: var(--border-width) solid var(--burgundy);
	z-index: 0;
}

.about-image-frame__inner {
	position: relative;
	border: var(--border-width) solid var(--rose);
	overflow: hidden;
	aspect-ratio: 1;
	z-index: 1;
}

.about-image-frame__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.about-images__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.about-content__heading {
	font-size: 2.25rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.about-content__heading--burgundy {
	color: var(--burgundy);
}

.about-content__heading--violet {
	color: var(--violet);
}

.about-content__heading--pink {
	color: var(--pink);
}

.about-content p {
	font-size: 1.125rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.about-content__highlight {
	color: var(--terracotta);
}

.about-team-intro {
	text-align: center;
	color: var(--terracotta);
	max-width: 48rem;
	margin: 0 auto 3rem;
	font-size: 1.125rem;
	line-height: 1.7;
}

.about-tags {
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-tags li {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.125rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
}

.about-tags__dot {
	width: 12px;
	height: 12px;
	border: 2px solid var(--rose);
	flex-shrink: 0;
}

.about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 16rem));
	justify-content: center;
	gap: 3rem;
	max-width: 40rem;
	margin-inline: auto;
}

.team-card {
	text-align: center;
}

.team-card__frame {
	position: relative;
	max-width: 16rem;
	margin: 0 auto 1rem;
}

.team-card__shadow {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	width: 100%;
	height: 100%;
	border: var(--border-width) solid var(--burgundy);
}

.team-card__photo {
	position: relative;
	border: var(--border-width) solid var(--rose);
	aspect-ratio: 1;
	overflow: hidden;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.team-card__name {
	font-size: 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.team-card__role {
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rose);
	margin-bottom: 0.5rem;
}

.team-card__specialty {
	font-size: 0.875rem;
	color: var(--terracotta);
	line-height: 1.5;
}

.contact-block {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.contact-block__subtitle {
	color: var(--terracotta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2rem;
	font-size: 1.25rem;
}

.contact-block__email {
	font-size: 1.5rem;
	font-weight: 900;
}

.contact-block__email:hover {
	color: var(--burgundy);
}

/* Contribute modal */
.contact-modal {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.contact-modal[hidden] {
	display: none;
}

.contact-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
}

.contact-modal__dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--black);
	border: var(--border-width) solid var(--rose);
	padding: 2rem;
	color: var(--white);
}

.contact-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: 0;
	color: var(--rose);
	font-size: 2rem;
	line-height: 1;
	font-weight: 900;
	cursor: pointer;
}

.contact-modal__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	margin: 0 0 1rem;
	color: var(--burgundy);
}

.contact-modal__intro {
	color: var(--terracotta);
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

.contact-modal__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact-modal__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact-modal__label {
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rose);
}

.contact-modal__field input,
.contact-modal__field textarea {
	width: 100%;
	background: var(--black);
	border: var(--border-width) solid var(--rose);
	color: var(--white);
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.contact-modal__field input::placeholder,
.contact-modal__field textarea::placeholder {
	color: var(--violet);
	opacity: 1;
}

.contact-modal__field input:focus,
.contact-modal__field textarea:focus {
	outline: none;
	border-color: var(--burgundy);
}

.contact-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

.contact-modal__submit {
	flex: 1;
	min-width: 10rem;
}

.contact-modal__mailto-fallback {
	flex: 1;
	min-width: 10rem;
	color: var(--violet);
	border-color: var(--violet);
	text-align: center;
}

/* Concert calendar (Figma) */
.concert-calendar {
	position: relative;
}

.concert-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: var(--border-width) solid var(--dark);
}

.concert-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: transparent;
	border: 2px solid var(--dark);
	color: var(--dark);
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
}

.concert-calendar__nav:hover {
	background: var(--dark);
	color: var(--rose);
}

.concert-calendar__month {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	margin: 0;
	text-align: center;
}

.concert-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.concert-calendar__weekday {
	text-align: center;
	font-size: 0.875rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--violet);
	padding-block: 0.5rem;
}

.concert-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem;
}

.concert-calendar__cell {
	aspect-ratio: 1;
	border: 2px solid var(--dark);
	padding: 0.5rem;
	background: var(--rose);
	transition: background 0.2s, transform 0.2s;
	position: relative;
	min-height: 4rem;
	font: inherit;
	color: inherit;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	appearance: none;
	-webkit-appearance: none;
}

.concert-calendar__cell:not(.concert-calendar__cell--empty):not(.concert-calendar__cell--has-show):hover {
	background: var(--pink);
}

.concert-calendar__cell--empty {
	background: transparent;
	border-color: transparent;
}

.concert-calendar__cell--has-show {
	background: var(--burgundy);
	color: var(--rose);
	cursor: pointer;
	font-weight: 900;
}

.concert-calendar__cell--has-show:hover,
.concert-calendar__cell--has-show.is-active {
	background: var(--violet);
	transform: scale(1.03);
	z-index: 1;
}

.concert-calendar__cell--has-show:not(.concert-calendar__cell--empty):hover {
	background: var(--violet);
}

.concert-calendar__day {
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1;
}

.concert-calendar__count {
	position: absolute;
	right: 0.35rem;
	bottom: 0.35rem;
	font-size: 0.75rem;
}

.concert-calendar__popup {
	position: fixed;
	z-index: 150;
	max-width: 24rem;
	background: var(--black);
	color: var(--rose);
	border: var(--border-width) solid var(--burgundy);
	padding: 1.5rem;
	pointer-events: auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.concert-calendar__popup[hidden] {
	display: none;
}

.concert-calendar__popup-date {
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--terracotta);
	margin-bottom: 0.75rem;
}

.concert-calendar__popup-show + .concert-calendar__popup-show {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 2px solid var(--burgundy);
}

.concert-calendar__popup-band {
	font-size: 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.concert-calendar__popup-meta {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.concert-calendar__popup-venue {
	color: var(--terracotta);
}

.concert-calendar__popup-details {
	display: flex;
	gap: 1rem;
	margin-top: 0.35rem;
	font-weight: 900;
}

.concert-calendar__popup-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pink);
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

.concert-calendar__popup-link:hover {
	color: var(--white);
	opacity: 1;
}

/* YouTube modal */
.youtube-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.youtube-modal[hidden] {
	display: none;
}

.youtube-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.youtube-modal__dialog {
	position: relative;
	width: min(960px, 100%);
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 1rem;
}

.youtube-modal__close {
	position: absolute;
	top: -3rem;
	right: 0;
	background: transparent;
	border: 0;
	color: var(--white);
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 900;
}

.youtube-modal__frame-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--black);
}

.youtube-modal__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Utilities */
.grayscale-img {
	filter: grayscale(100%);
}

.text-center {
	text-align: center;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}