/* ==========================================================================
   Timeless Festival — design tokens + base
   Every value below is read from the Figma file (key 2PCbY1p6afO8DFfDgt39P5)
   via the REST API, not eyeballed. Design canvas is 1280px wide with a
   1152px content column, so the gutter is 64px.

   One open item: the display face is named "Chunk" in Figma and is a heavy
   grotesque, not the open-source ChunkFive slab. Until the real font files
   arrive, --font-display falls back to Archivo Black. See README.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&family=Montserrat:wght@400;500;600;700&family=Syne:wght@400;600;700;800&display=swap");

:root {
	/* --- Brand palette (exact, from Figma) --- */
	--c-ink: #1c1b1b;
	--c-paper: #fcf9f8;
	--c-white: #ffffff;
	--c-line: #e5e2e1;
	--c-slate: #4b4452;

	--c-purple: #7236b5;
	--c-purple-mid: #864ac5;
	--c-purple-light: #934dd5;
	--c-magenta: #cc57ff;

	--c-yellow: #ffdf3c;
	--c-yellow-light: #ffe258;
	--c-yellow-ink: #211b00;
	--c-yellow-deep: #736200;

	--c-red: #ff003d;
	--c-pink: #ff5c7e;
	--c-blue: #00178a;
	--c-gold: #b09e70;
	--c-teal: #00606a;

	/* --- Semantic --- */
	--bg-page: var(--c-paper);
	--bg-inverse: var(--c-ink);
	--text-body: var(--c-ink);
	--text-inverse: var(--c-paper);
	--text-muted: var(--c-slate);
	--accent: var(--c-yellow);

	/* --- Type families --- */
	--font-display: "Chunk", "Archivo Black", "Arial Black", system-ui, sans-serif;
	/* Figma names this face "Syne", but the design was rendered with Syne
	   missing: real Syne ExtraBold sets "REVOLUTION" at 1340px where the
	   export shows 725px, and 725px matches the same stand-in used for Chunk.
	   The drawn layouts were built around that narrower face, so following the
	   export rather than the label is what keeps them intact. Restore
	   `"Syne", ` at the front once the designer confirms. */
	--font-alt: var(--font-display);
	/* The small 16px card names are drawn in real Syne Regular — measured at
	   0.58em average advance, far narrower than the Archivo Black stand-in
	   that --font-display carries for the big display type. */
	--font-syne: "Syne", "Montserrat", system-ui, sans-serif;
	--font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* --- Type scale.
	   Figma sizes at 1280px: hero 80, section 96–106, alt display 120–160,
	   h3 48, body 20, small 16, eyebrow 14. clamp() scales them down on
	   narrow screens without ever exceeding the design value. --- */
	--fs-display-xl: clamp(3.5rem, 12.5vw, 10rem);   /* Syne 160 */
	--fs-display-lg: clamp(3rem, 8.3vw, 6.625rem);   /* Chunk 106 */
	--fs-display: clamp(2.5rem, 7.5vw, 6rem);        /* Chunk 96 */
	--fs-hero: clamp(2.25rem, 6.25vw, 5rem);         /* Chunk 80 */
	--fs-h3: clamp(1.75rem, 3.75vw, 3rem);           /* Chunk 48 */
	--fs-lead: clamp(1.0625rem, 1.56vw, 1.25rem);    /* Archivo 20 */
	--fs-body: 1rem;                                 /* Archivo 16 */
	--fs-eyebrow: 0.875rem;                          /* Archivo 14 */

	--lh-display: 0.92;
	--ls-display: -0.03em;

	/* --- Space --- */
	--gutter: clamp(1.25rem, 5vw, 4rem);
	--section-y: clamp(4rem, 9vw, 8rem);
	--stack: clamp(1rem, 2vw, 2rem);

	/* --- Shape --- */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 9999px;
	--border-heavy: 2px solid var(--c-ink);

	--wrap: 1152px;
	--nav-h: 96px;

	/* Width compensation for the stand-in display face — see the hero title
	   rule. This becomes 1 when the real "Chunk" web fonts are added. */
	--display-fit: 0.836;
}

/* --------------------------------------------------------- reset + base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--bg-page);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

button {
	font: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	margin: 0 0 var(--stack);
}

h1 {
	font-size: var(--fs-hero);
}

h2 {
	font-size: var(--fs-display);
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: 0;
}

p {
	margin: 0 0 1em;
}

/* ------------------------------------------------------------- utilities */

.wrap {
	width: min(100% - (var(--gutter) * 2), var(--wrap));
	margin-inline: auto;
}

.section {
	padding-block: var(--section-y);
	position: relative;
	overflow: clip;
}

.section--dark {
	background: var(--bg-inverse);
	color: var(--text-inverse);
}

/* "// THE EXPERIENCE" — Archivo Bold 14 / tracking 2.8px (0.2em). */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-purple);
	margin: 0 0 1.25rem;
}

.section--dark .eyebrow {
	color: var(--c-yellow);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	max-width: 36ch;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--c-purple);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- button
   The design uses a heavy black outline with a hard offset shadow — no blur.
   ------------------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 2rem;
	border: var(--border-heavy);
	border-radius: var(--radius-pill);
	background: var(--c-yellow);
	color: var(--c-yellow-ink);
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 8px 8px 0 var(--c-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--c-ink);
}

.btn:active {
	transform: translate(4px, 4px);
	box-shadow: 4px 4px 0 var(--c-ink);
}

.btn--purple {
	background: var(--c-purple);
	color: var(--c-white);
}

/* Header ticket button — Chunk 24px, 207×52 in the design. */
.btn--nav {
	padding: 0.625rem 1.75rem;
	font-size: 1.5rem;
}

/* Large hero buttons — Chunk 48px, 4px outline, radius 12 in the design. */
.btn--lg {
	padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--fs-h3);
	border-width: 4px;
	border-radius: var(--radius-sm);
	max-width: 100%;
}

/* The hero calls to action are drawn in sentence case, not caps — uppercasing
   them makes the labels too wide for their fixed-size boxes. */
.hero .btn--lg {
	text-transform: none;
}

/* "Explore Lineup" — no fill, paper outline, and Archivo rather than Chunk. */
.btn--outline {
	background: transparent;
	color: var(--c-paper);
	border-color: var(--c-paper);
	font-family: var(--font-body);
	font-weight: 700;
	box-shadow: none;
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: rgb(252 249 248 / 0.12);
	box-shadow: none;
	transform: translate(-2px, -2px);
}

/* ---------------------------------------------------------------- header
   96px tall, translucent paper with a 12px backdrop blur and a 2px rule.
   ------------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: var(--nav-h);
	display: flex;
	align-items: center;
	background: rgb(252 249 248 / 0.8);
	backdrop-filter: blur(24px);
	border-bottom: var(--border-heavy);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

@supports not (backdrop-filter: blur(24px)) {
	.site-header {
		background: var(--c-paper);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stack);
	width: min(100% - (var(--gutter) * 2), var(--wrap));
	margin-inline: auto;
}

.site-brand img {
	max-height: 56px;
	width: auto;
}

.site-brand--text {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	text-decoration: none;
}

/* Nav links — Montserrat Bold 16 / tracking 0.8px (0.05em). */
.nav-primary ul {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-primary a {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-slate);
	padding-block: 0.25rem;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-primary .current-menu-item > a,
.nav-primary a:hover,
.nav-primary a:focus-visible {
	color: var(--c-purple);
	border-bottom-color: var(--c-yellow);
}

/* Figma: globe 20×20 at x=908.8, search 18×18 at x=952.8, ticket button at
   x=994.8 — a 24px rhythm. */
.header-actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Language switcher — a single link to the other language. The header is a
   fixed 1280 frame and French labels are much longer than the English ones it
   was drawn with, so a FR/EN pair did not fit beside the nav. */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border: 1.5px solid rgb(28 27 27 / 0.25);
	border-radius: 999px;
	color: var(--c-ink);
	text-decoration: none;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.lang-switch:hover,
.lang-switch:focus-visible {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-paper);
}

.lang-switch__globe {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink);
}

.header-icon img {
	width: 18px;
	height: 18px;
}

.nav-toggle {
	display: none;
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0.5rem;
	color: inherit;
	cursor: pointer;
}

.site-brand,
.header-actions {
	flex-shrink: 0;
}

/* On small screens the ticket button has to give way to the logo and the
   menu toggle, so it drops to UI type at a readable size. */
@media (max-width: 767px) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.lang-switch {
		font-size: 11px;
		padding: 3px 6px;
		gap: 4px;
	}

	.lang-switch__globe {
		width: 12px;
		height: 12px;
	}

	.site-brand img {
		max-height: 40px;
	}

	.btn--nav {
		font-size: 1rem;
		padding: 0.5rem 1rem;
		border-width: 2px;
		box-shadow: 3px 3px 0 var(--c-ink);
	}
}

@media (max-width: 419px) {
	.btn--nav {
		font-size: 0.8125rem;
		padding: 0.5rem 0.75rem;
	}

	.site-brand img {
		max-height: 34px;
	}
}

/* 899, not 1023: the desktop header frame starts at 900, and the two
   breakpoints disagreeing meant 900-1023 drew the full nav row *and*
   the hamburger, which then stole width from the nav. */
@media (max-width: 899px) {
	.nav-toggle {
		display: block;
	}

	.nav-primary {
		display: none;
	}

	.nav-primary.is-open {
		display: block;
		position: absolute;
		inset: 100% 0 auto 0;
		background: var(--c-paper);
		padding: var(--gutter);
		border-bottom: var(--border-heavy);
	}

	.nav-primary.is-open ul {
		flex-direction: column;
		gap: 1.25rem;
	}
}

/* ------------------------------------------------------------------ hero
   Rebuilt against the Figma frame, which is a fixed 1280×1205 composition.
   --u is one design pixel: every offset, size and type step below is the
   literal Figma number multiplied by it, so the whole hero scales as one
   piece and stays true to the drawing at any width. Scaling is capped at
   1600px so the type does not run away on very wide monitors.

   Below 900px the absolute placement is dropped and the hero reflows.
   ------------------------------------------------------------------------ */

.hero {
	/* One design pixel. The stage below is 1280 of these wide, so up to 1920px
	   it fills the viewport exactly and the ornament still bleeds off both
	   edges; past that it stops growing and centres. */
	--u: calc(min(100vw, 1280px) / 1280);
	position: relative;
	isolation: isolate;
	background: #241f21;
	color: var(--c-white);
	overflow: clip;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero film.
   Sits over the still and under the scrim, so the type keeps its contrast
   either way. It stays at opacity 0 until the film is genuinely playing —
   fading in on a timer alone would show a blank frame on a slow connection.
   Not interactive: this is scenery, and clicks belong to the buttons above. */
.hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s var(--ease-out);
}

.hero__media.is-film .hero__video {
	opacity: 1;
}

/* A 16:9 film covering a hero of any shape: the two minimums force it past
   the container on whichever axis is short, and the ratio keeps it undistorted.
   .hero already has overflow: clip, so the overspill never shows. */
.hero__video wistia-player {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	aspect-ratio: 16 / 9;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	display: block;
	background: transparent;
}

/* The film opens out of the still rather than cross-fading flatly. */
.has-motion .hero__video {
	scale: 1.05;
	transition: opacity 1.2s var(--ease-out), scale 1.8s var(--ease-out);
}

.has-motion .hero__media.is-film .hero__video {
	scale: 1;
}

/* Scrim over the photo so the white display type keeps its contrast. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(28 27 27 / 0.72) 0%, rgb(28 27 27 / 0.25) 55%, transparent 100%),
		linear-gradient(180deg, rgb(28 27 27 / 0.5) 0%, transparent 30%);
}

/* The 1280-wide design canvas, centred. Everything in the hero is positioned
   against this rather than against the full-bleed section, so the composition
   never drifts left on a wide monitor. */
.hero__stage {
	position: relative;
	z-index: 1;
	width: calc(1280 * var(--u));
	max-width: 100%;
	height: 100%;
	margin-inline: auto;
}

.hero__arcs {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

/* Figma: 190×564 at (0, 96) and 612×771 at (668, 434). */
.hero__arcs--left {
	top: 0;
	left: 0;
	width: calc(190 * var(--u));
}

/* Anchored to the section's bottom-right, not the centred stage, so it stays
   flush to the viewport edge on screens wider than the 1280 canvas. */
.hero__arcs--right {
	right: 0;
	bottom: 0;
	width: calc(612 * var(--u));
}

/* Two 93×94 outlined circles floating over the photo. */
.hero__dot {
	position: absolute;
	z-index: 2;
	width: calc(93 * var(--u));
	height: calc(94 * var(--u));
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
}

.hero__dot--yellow {
	left: calc(827 * var(--u));
	top: calc(290 * var(--u));
	background: var(--c-yellow);
}

.hero__dot--pink {
	left: calc(692 * var(--u));
	top: calc(734.7 * var(--u));
	background: #e9566a;
}

.hero__patronage {
	font-family: var(--font-ui);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

.hero__col,
.hero__card,
.hero__patronage,
.hero__scroll {
	position: relative;
	z-index: 3;
}

.hero__title {
	margin: 0;
}

.hero__title span {
	display: block;
}

/* Each drawn line is its own mask so the type can rise out of it. The padding
   /negative-margin pair keeps ascenders from being clipped. Both levels must
   be block — these are spans, and inline masks would let the lines run
   together and overflow their column. */
.hero__line,
.hero__line > span {
	display: block;
}

.hero__line {
	overflow: hidden;
	padding-block: 0.03em;
	margin-block: -0.03em;
}

.hero__lede {
	margin: 0;
}

/* Buy Tickets 356×98, Explore Lineup 431×106 — both radius 12, 4px outline. */
.hero__buy,
.hero__explore {
	display: flex;
}

/* Purple panel, 3px outline, radius 12, hard 8/8 shadow — and tilted.
   Figma stores rotation: 0.0524 rad on this node; measuring the rendered
   export confirms 3.01deg clockwise. The 482×167 in the node's bounding box
   is the *rotated* AABB — the panel itself is 464×138. */
.hero__dates {
	background: var(--c-purple);
	border: calc(3 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--c-ink);
	margin: 0;
	/* Independent property, not transform — leaves translate free for motion. */
	rotate: 3.01deg;
}

/* Hairline rule above the date panel — the "Live Countdown" frame's stroke. */
.hero__countdown {
	border-top: 1px solid rgb(252 249 248 / 0.3);
}

.hero__when {
	display: block;
	font-family: var(--font-display);
	line-height: 1;
	text-transform: uppercase;
}

.hero__place {
	display: block;
	text-transform: uppercase;
}

/* Card: 445×556, radius 24, 4px outline, solid black panel offset 16/16. */
.hero__card {
	margin: 0;
	background: var(--c-paper);
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: calc(24 * var(--u));
	overflow: hidden;
	box-shadow: calc(16 * var(--u)) calc(16 * var(--u)) 0 var(--c-ink);
}

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

.hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--u));
	color: rgb(252 249 248 / 0.6);
}

.hero__scroll-label {
	font-size: calc(14 * var(--u));
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding-left: 0.3em;
}

/* 4×48 track with a 4×24 indicator riding inside it. */
.hero__scroll-bar {
	position: relative;
	width: calc(4 * var(--u));
	height: calc(48 * var(--u));
	border-radius: var(--radius-pill);
	background: rgb(252 249 248 / 0.3);
	overflow: hidden;
}

.hero__scroll-bar::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 50%;
	background: var(--c-paper);
	border-radius: inherit;
	animation: timeless-scroll-cue 2.2s ease-in-out infinite;
}

@keyframes timeless-scroll-cue {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(100%); }
}

/* --------------------------------------------------- desktop: exact frame */

@media (min-width: 900px) {
	/* Header on the drawn frame: logo inset 72 left, actions inset 78 right.
	   Laid out as a flex row rather than by absolute coordinates — the drawn
	   positions assume six short English labels, and French runs a third
	   longer, so fixed offsets guarantee the nav and the actions collide. Flex
	   keeps both anchors exactly where they are drawn and gives the nav
	   whatever is left between them. */
	.site-header {
		--u: calc(min(100vw, 1280px) / 1280);
		height: calc(96 * var(--u));
	}

	.site-header__inner {
		position: relative;
		width: calc(1280 * var(--u));
		max-width: 100%;
		height: 100%;
		margin-inline: auto;
		display: flex;
		align-items: center;
		gap: calc(12 * var(--u));
		padding-inline: calc(72 * var(--u)) calc(78 * var(--u));
	}

	.site-brand {
		position: static;
		flex: 0 0 auto;
		width: calc(151 * var(--u));
	}

	.site-brand img {
		width: 100%;
		max-height: none;
	}

	.nav-primary {
		position: static;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: center;
		/* The drawn nav baseline sits a little above the header's centre line. */
		margin-top: calc(-4 * var(--u));
	}

	/* Seven items where the frame was drawn for six, and French labels run
	   about a third longer than the English ones. Rather than shrink the type
	   until the words almost touch, the row spreads across whatever space is
	   left between the logo and the ticket button: the gap is a floor, and
	   space-between shares out the remainder. That keeps the drawn type size
	   and stays even in both languages, whatever the labels are. */
	.nav-primary ul {
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		gap: calc(16 * var(--u));
		padding-inline: calc(10 * var(--u));
	}

	.nav-primary a {
		font-size: calc(16 * var(--u));
		line-height: calc(25.6 * var(--u));
		letter-spacing: 0.03em;
		white-space: nowrap;
	}

	/* The ticket button ends 78 from the right edge, as drawn. */
	.header-actions {
		position: static;
		flex: 0 0 auto;
		gap: calc(14 * var(--u));
		height: calc(52 * var(--u));
	}

	.header-icon img {
		width: calc(18 * var(--u));
		height: calc(18 * var(--u));
	}

	/* Scales with the frame like everything else in the header — left at a
	   fixed pixel size it ate the nav's width as the viewport narrowed. */
	.lang-switch {
		font-size: calc(12 * var(--u));
		gap: calc(5 * var(--u));
		padding: calc(4 * var(--u)) calc(8 * var(--u));
		border-width: calc(1.5 * var(--u));
	}

	.lang-switch__globe {
		width: calc(14 * var(--u));
		height: calc(14 * var(--u));
	}

	/* Billetterie: 207×52, Chunk 24, hard 8/8 shadow. */
	.btn--nav {
		width: calc(207 * var(--u));
		height: calc(52 * var(--u));
		padding: 0;
		font-size: calc(24 * var(--u));
		border-width: calc(2 * var(--u));
		box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--c-ink);
	}

	/* 1205 drawn, less the 96 the nav overlays. */
	.hero {
		height: calc(1109 * var(--u));
	}

	.hero__patronage {
		position: absolute;
		top: calc(49 * var(--u));
		left: 0;
		right: 0;
		font-size: calc(18 * var(--u));
	}

	/* Text column: 560 wide at (162.7, 234.9). */
	.hero__col {
		position: absolute;
		left: calc(162.7 * var(--u));
		top: calc(138.9 * var(--u));
		width: calc(560 * var(--u));
	}

	/* Chunk 80/92. The line is 1189 wide in Figma, so it deliberately runs
	   past the 560 column — nowrap keeps it to the two drawn lines whatever
	   the display face measures. */
	.hero__title {
		width: max-content;
		max-width: calc(1250 * var(--u));
		/* Figma reserves 186px for the two lines; holding that keeps every
		   element below it on its drawn baseline whatever the face measures. */
		min-height: calc(186 * var(--u));
		/* Measured off the Figma export, "Experience Morocco's" is a 954px run
		   at Chunk 80. Archivo Black sets the same string at 1141px, which
		   overflows the frame, so the stand-in is scaled by --display-fit to
		   occupy the drawn width. Line-height stays at the design value, so the
		   block still fills its 186px and nothing below it moves.
		   Set --display-fit to 1 once the real Chunk files are installed. */
		font-size: calc(80 * var(--u) * var(--display-fit));
		line-height: calc(92 * var(--u));
		letter-spacing: 0;
		margin-bottom: calc(32 * var(--u));
	}

	.hero__title span {
		white-space: nowrap;
	}

	/* Archivo 20/32, 560 wide, top 452.9. */
	/* Four lines at 32px in the design — reserved so the buttons below land
	   on their drawn positions even though Archivo wraps this copy in three. */
	.hero__lede {
		width: calc(560 * var(--u));
		min-height: calc(128 * var(--u));
		font-size: calc(20 * var(--u));
		line-height: calc(32 * var(--u));
		margin-bottom: calc(48 * var(--u));
	}

	/* Same width compensation as the headline — Archivo Black sets these
	   strings ~20% wider than Chunk, so they would burst their fixed boxes. */
	.hero .btn--lg {
		font-size: calc(48 * var(--u) * var(--display-fit));
		line-height: calc(57.6 * var(--u));
		border-width: calc(4 * var(--u));
		border-radius: calc(12 * var(--u));
		padding: 0;
		box-shadow: none;
	}

	/* Only the filled button carries the hard shadow in the design. */
	.hero__buy {
		box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--c-ink);
	}

	.hero__when {
		white-space: nowrap;
	}

	.hero__buy {
		width: calc(356 * var(--u));
		height: calc(98 * var(--u));
		margin-bottom: calc(32 * var(--u));
	}

	.hero__explore {
		width: calc(431 * var(--u));
		height: calc(106 * var(--u));
		/* Explore ends at 865; the countdown rule sits at 929. */
		margin-bottom: calc(64 * var(--u));
	}

	/* Rule at 929 (833 once rebased); the panel's centre sits at 932. */
	.hero__countdown {
		width: calc(560 * var(--u));
		padding-top: calc(30 * var(--u));
	}

	.hero__dates {
		width: calc(464 * var(--u));
		height: calc(138 * var(--u));
		/* Rotating about the centre puts the panel's left edge here. */
		margin-left: calc(24.3 * var(--u));
		padding: calc(14 * var(--u)) calc(18 * var(--u));
	}

	.hero__when {
		font-size: calc(64 * var(--u) * var(--display-fit));
	}

	.hero__place {
		margin-top: calc(6 * var(--u));
		font-size: calc(20 * var(--u));
		line-height: calc(24 * var(--u));
	}

	.hero__card {
		position: absolute;
		left: calc(757 * var(--u));
		top: calc(421 * var(--u));
		width: calc(445 * var(--u));
		height: calc(556 * var(--u));
	}

	.hero__scroll {
		position: absolute;
		top: calc(999.4 * var(--u));
		left: calc(640 * var(--u));
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------- below 900: reflow */

@media (max-width: 899px) {
	.hero {
		--u: calc(min(100vw, 900px) / 1280);
	}

	.hero__stage {
		width: 100%;
		height: auto;
		padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
	}

	.hero__patronage {
		font-size: clamp(0.6875rem, 1.9vw, 1rem);
		margin-bottom: clamp(2rem, 6vw, 3rem);
	}

	.hero__title {
		font-size: clamp(2.25rem, 7.5vw, 4rem);
		line-height: 1.12;
		margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	}

	.hero__lede {
		max-width: 46ch;
		font-size: var(--fs-lead);
		line-height: 1.6;
		margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
	}

	.hero .btn--lg {
		font-size: clamp(1.375rem, 4.5vw, 2rem);
		border-width: 3px;
		padding: 0.7em 1.4em;
	}

	.hero__buy {
		margin-bottom: 1rem;
	}

	.hero__explore {
		margin-bottom: clamp(2rem, 6vw, 3rem);
	}

	.hero__dates {
		display: inline-block;
		border-width: 3px;
		border-radius: var(--radius-sm);
		padding: clamp(0.875rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
		margin-bottom: clamp(2.5rem, 8vw, 4rem);
	}

	.hero__when {
		font-size: clamp(1.75rem, 6.5vw, 3rem);
	}

	.hero__place {
		margin-top: 0.4rem;
		font-size: var(--fs-lead);
	}

	.hero__card {
		max-width: 445px;
		border-width: 3px;
		border-radius: var(--radius-lg);
		box-shadow: 12px 12px 0 var(--c-ink);
	}

	.hero__card img {
		height: auto;
	}

	/* Flush to the header at every size — only pulled sideways, never up, so
	   it always meets the bar rather than being cropped below it. */
	.hero__arcs--left {
		top: 0;
		width: 28%;
		transform: translateX(-55%);
	}

	/* Keeps the centred patronage line clear of that arc. */
	.hero__patronage {
		padding-inline: 3rem;
	}

	.hero__arcs--right {
		top: auto;
		left: auto;
		right: 0;
		bottom: 0;
		width: 66%;
		opacity: 0.85;
	}

	.hero__dot,
	.hero__scroll {
		display: none;
	}
}

/* ---------------------------------------------------------------- reveal */

/* ============================================================== bento
   "The Experience" — Figma section 1152×952, page x=64 / y=1297.
   Row A: 757 teal + 32 gap + 363 yellow.
   Row B: 363 purple + 32 gap + 757 red.
   Same --u design-pixel unit as the hero; stacks below 900px.
   ==================================================================== */

.bento {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	color: var(--text-body);
	overflow: clip;
}

.bento__stage {
	position: relative;
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

/* The heading is inset a further 64 from the cards. */
.bento__head {
	padding-left: calc(64 * var(--u));
}

/* 14 + 2 + (2 x 88) = 192, the exact height Figma gives this block. */
.bento__head .eyebrow {
	font-size: calc(14 * var(--u));
	line-height: 1;
	margin-bottom: calc(2 * var(--u));
}

.bento__title {
	font-size: calc(96 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.bento__title span {
	display: block;
}

/* Outlined circles floating behind the cards. */
.bento__dot {
	position: absolute;
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
}

.bento__dot--yellow {
	left: calc(640 * var(--u));
	top: 0;
	width: calc(92 * var(--u));
	height: calc(94 * var(--u));
	background: var(--c-yellow);
}

.bento__dot--magenta {
	left: calc(1038 * var(--u));
	top: calc(108 * var(--u));
	width: calc(174 * var(--u));
	height: calc(176 * var(--u));
	background: var(--c-magenta);
}

.bento__row {
	display: flex;
	gap: calc(32 * var(--u));
	align-items: flex-start;
}

.card {
	position: relative;
	overflow: hidden;
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(24 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: calc(50 * var(--u));
}

.card--wide  { width: calc(757 * var(--u)); }
.card--narrow { width: calc(363 * var(--u)); }

.card--teal   { background: #007b86; color: var(--c-paper); }
.card--yellow { background: var(--c-yellow); color: #000; }
.card--purple { background: #8c51d0; color: var(--c-paper); }
.card--red    { background: #e9566a; color: var(--c-yellow-light); }

.card--centred {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The photo reads as a teal duotone in the design: luminosity blend over the
   card's fill. Figma frames the image high in the card, so bias the crop
   upward — centring lands on the darkest part of the shot. */
.card--teal .card__media {
	mix-blend-mode: luminosity;
	object-position: center 28%;
	opacity: 1;
}

.card__title {
	position: relative;
	z-index: 1;
	font-size: calc(64 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.card__title span {
	display: block;
}

/* The oversized "01" watermark on the purple card. */
.card__index {
	position: absolute;
	z-index: 1;
	top: calc(34 * var(--u));
	right: calc(34 * var(--u));
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(80 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	color: var(--c-paper);
}

@media (min-width: 900px) {
	.bento {
		/* Section top at page y=1297, less the 96 the nav overlays. */
		padding-top: calc(92 * var(--u));
		padding-bottom: calc(120 * var(--u));
	}

	.bento__head {
		height: calc(192 * var(--u));
	}

	.bento__row--a .card { height: calc(362 * var(--u)); }
	.bento__row--a .card--yellow { height: calc(360 * var(--u)); }

	.bento__row--b {
		margin-top: calc(38 * var(--u));
	}

	.bento__row--b .card--purple { height: calc(360 * var(--u)); }
	.bento__row--b .card--red { height: calc(356 * var(--u)); }

	.card--red .card__title {
		font-size: calc(96 * var(--u) * var(--display-fit));
		line-height: calc(86 * var(--u));
	}
}

/* ------------------------------------------------------- bento: stacked */

@media (max-width: 899px) {
	.bento {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(3.5rem, 10vw, 5rem);
	}

	.bento__stage {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.bento__head {
		padding-left: 0;
		margin-bottom: clamp(2rem, 6vw, 3rem);
	}

	.bento__title {
		font-size: clamp(2.5rem, 11vw, 5rem);
		line-height: 0.92;
	}

	.bento__row {
		flex-direction: column;
		gap: clamp(1rem, 4vw, 1.5rem);
	}

	.bento__row--b {
		margin-top: clamp(1rem, 4vw, 1.5rem);
	}

	.card {
		width: 100%;
		min-height: clamp(220px, 55vw, 320px);
		padding: clamp(1.5rem, 6vw, 2.5rem);
		border-width: 2px;
		border-radius: var(--radius-lg);
	}

	.card__title {
		font-size: clamp(1.75rem, 7vw, 2.75rem);
		line-height: 0.95;
	}

	.card--red .card__title {
		font-size: clamp(2rem, 9vw, 3.5rem);
	}

	.card__index {
		top: clamp(1rem, 4vw, 1.5rem);
		right: clamp(1rem, 4vw, 1.5rem);
		font-size: clamp(2rem, 8vw, 3rem);
		line-height: 1;
	}

	/* Ornament is desktop-only — it has nowhere to sit in a stacked column. */
	.bento__dot {
		display: none;
	}
}

/* ============================================================= lineup
   "The 2026 Lineup" — Figma section 1280×1304 on #1C1B1B, page y=2341.
   Cards are 450×600 at x=64 with a 32 gap and run past the right edge,
   so the rail scrolls horizontally.
   ==================================================================== */

.lineup {
	--u: calc(min(100vw, 1280px) / 1280);
	position: relative;
	background: var(--c-ink);
	color: var(--c-paper);
	overflow: clip;
}

.lineup__stage {
	position: relative;
	width: calc(1280 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.lineup__dot {
	position: absolute;
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.lineup__dot--purple {
	left: calc(-73 * var(--u));
	top: calc(-31 * var(--u));
	width: calc(128 * var(--u));
	height: calc(129 * var(--u));
	background: var(--c-purple-mid);
}

.lineup__dot--pink {
	left: calc(996 * var(--u));
	top: calc(-88 * var(--u));
	width: calc(174 * var(--u));
	height: calc(176 * var(--u));
	background: var(--c-pink);
}

.lineup__dot--yellow {
	left: calc(779 * var(--u));
	top: calc(240 * var(--u));
	width: calc(93 * var(--u));
	height: calc(94 * var(--u));
	background: var(--c-yellow);
}

.lineup__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--stack);
}

.lineup__title {
	font-size: calc(106 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	letter-spacing: 0;
	color: var(--c-paper);
	margin: 0;
}

.lineup__title span {
	display: block;
}

/* "FULL SCHEDULE" — Montserrat 16/24, two lines, underlined. */
.lineup__more {
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-yellow-light);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: calc(4 * var(--u));
}

.lineup__more span {
	display: block;
}

.lineup__more:hover,
.lineup__more:focus-visible {
	color: var(--c-yellow);
}

/* The rail runs off the right edge exactly as drawn. With the motion layer on
   it becomes a continuous marquee; without it, a plain horizontal scroller. */
.lineup__marquee {
	position: relative;
	z-index: 1;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lineup__marquee::-webkit-scrollbar {
	display: none;
}

.lineup__track {
	display: flex;
	flex: 0 0 auto;
	gap: calc(32 * var(--u));
	list-style: none;
	margin: 0;
	padding: 0 calc(32 * var(--u)) 0 0;
}

/* The duplicate only exists to close the loop. */
.lineup__track[aria-hidden="true"] {
	display: none;
}

.has-motion .lineup__marquee {
	overflow: hidden;
	scroll-snap-type: none;
}

.has-motion .lineup__track {
	animation: timeless-marquee 46s linear infinite;
}

.has-motion .lineup__track[aria-hidden="true"] {
	display: flex;
}

/* Let people stop it to read a name. */
.has-motion .lineup__marquee:hover .lineup__track,
.has-motion .lineup__marquee:focus-within .lineup__track {
	animation-play-state: paused;
}

@keyframes timeless-marquee {
	to {
		translate: -100% 0;
	}
}

.artist {
	flex: 0 0 auto;
	width: calc(450 * var(--u));
	scroll-snap-align: start;
}

.artist__frame {
	position: relative;
	height: calc(600 * var(--u));
	border: calc(2 * var(--u)) solid rgb(252 249 248 / 0.2);
	border-radius: calc(16 * var(--u));
	overflow: hidden;
}

.artist__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

/* Yellow pill, 26 in from the frame's top-left corner. */
.artist__date {
	position: absolute;
	top: calc(26 * var(--u));
	left: calc(26 * var(--u));
	margin: 0;
	padding: calc(8 * var(--u)) calc(18 * var(--u));
	background: var(--c-yellow);
	color: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 600;
	text-transform: uppercase;
}

.artist__name {
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	color: var(--c-paper);
	margin: calc(24 * var(--u)) 0 0;
}

.artist__genre {
	margin: calc(8 * var(--u)) 0 0;
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 226 88 / 0.7);
}

@media (min-width: 900px) {
	/* No top padding on the section: in Figma the 128 sits *inside* it, above
	   the eyebrow, and the decorative circles are placed against the section's
	   own top edge. Padding here would shift every dot down by 128. */
	.lineup {
		padding-bottom: calc(176 * var(--u));
	}

	.lineup__head {
		padding-top: calc(128 * var(--u));
		padding-inline: calc(64 * var(--u));
		margin-bottom: calc(80 * var(--u));
	}

	.lineup__head .eyebrow {
		font-size: calc(14 * var(--u));
		line-height: 1;
		margin-bottom: calc(16 * var(--u));
	}

	/* Aligns the rail with the 64 gutter but lets it bleed off the right. */
	.lineup__marquee {
		padding-left: calc(64 * var(--u));
		scroll-padding-inline-start: calc(64 * var(--u));
	}
}

/* ------------------------------------------------------ lineup: stacked */

@media (max-width: 899px) {
	.lineup {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(3.5rem, 10vw, 5rem);
	}

	.lineup__stage {
		width: 100%;
	}

	.lineup__head {
		flex-direction: column;
		gap: 1.5rem;
		padding-inline: var(--gutter);
		margin-bottom: clamp(2rem, 7vw, 3rem);
	}

	.lineup__title {
		font-size: clamp(2.5rem, 11vw, 5rem);
		line-height: 0.92;
	}

	.lineup__more {
		font-size: 0.875rem;
		line-height: 1.4;
	}

	.lineup__marquee {
		padding-left: var(--gutter);
		scroll-padding-inline-start: var(--gutter);
	}

	.lineup__track {
		gap: 1rem;
		padding-right: 1rem;
	}

	.artist {
		width: min(78vw, 340px);
	}

	.artist__frame {
		height: min(104vw, 452px);
		border-width: 2px;
		border-radius: var(--radius-md);
	}

	.artist__date {
		top: 1rem;
		left: 1rem;
		padding: 0.35rem 0.9rem;
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	.artist__name {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
		line-height: 1.05;
		margin-top: 1rem;
	}

	.artist__genre {
		font-size: 0.8125rem;
		line-height: 1.4;
		margin-top: 0.35rem;
	}

	.lineup__dot--purple,
	.lineup__dot--yellow {
		display: none;
	}

	.lineup__dot--pink {
		left: auto;
		right: calc(-60 * var(--u));
		top: calc(-40 * var(--u));
	}
}

/* =============================================================== feed
   "The Community Feed" — Figma section 1280×1381, page y=3716.
   A true masonry: six tiles on irregular rows, so above 900px they are
   placed absolutely on the design grid rather than forced into a grid.
   ==================================================================== */

.feed {
	--u: calc(min(100vw, 1280px) / 1280);
	position: relative;
	background: var(--bg-page);
	color: var(--text-body);
	overflow: clip;
}

.feed__stage {
	position: relative;
	width: calc(1280 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.feed__dot {
	position: absolute;
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.feed__dot--yellow {
	left: calc(613 * var(--u));
	top: calc(114 * var(--u));
	width: calc(92 * var(--u));
	height: calc(94 * var(--u));
	background: var(--c-yellow);
}

.feed__dot--magenta {
	left: calc(1036 * var(--u));
	top: calc(275 * var(--u));
	width: calc(174 * var(--u));
	height: calc(176 * var(--u));
	background: var(--c-magenta);
}

.feed__dot--red {
	left: calc(-53 * var(--u));
	top: calc(751 * var(--u));
	width: calc(174 * var(--u));
	height: calc(176 * var(--u));
	background: var(--c-red);
	z-index: 0;
}

.feed__title {
	font-size: calc(96 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.feed__title span {
	display: block;
}

.masonry {
	position: relative;
}

.tile {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(16 * var(--u));
	margin: 0;
}

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

/* Item 1 carries a 20% purple wash in the design. */
.tile--1::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(114 54 181 / 0.2);
}

.tile--6 {
	background: var(--c-purple);
	color: var(--c-paper);
	display: flex;
	flex-direction: column;
}

/* "JOIN THE STORY" — the design's alt display face (see --font-alt). */
.tile__title {
	font-family: var(--font-alt);
	font-weight: 400;
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

.tile__title span {
	display: block;
}

.tile__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-paper);
	color: var(--c-ink);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.tile__btn:hover,
.tile__btn:focus-visible {
	background: var(--c-yellow);
}

.tile--2 {
	background: var(--c-yellow);
	color: var(--c-ink);
}

.tile__quote {
	font-family: var(--font-display);
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	text-transform: uppercase;
	margin: 0;
}

.tile__cite {
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	color: var(--c-slate);
}

.tile--4 {
	background: var(--c-teal);
}

@media (min-width: 900px) {
	.feed {
		padding-bottom: calc(41 * var(--u));
	}

	.feed__head {
		padding-top: calc(128 * var(--u));
		padding-left: calc(64 * var(--u));
	}

	.feed__head .eyebrow {
		font-size: calc(14 * var(--u));
		line-height: 1;
		margin-bottom: calc(16 * var(--u));
	}

	/* Container sits at 64,502 and is 1152×838. */
	.masonry {
		margin-left: calc(64 * var(--u));
		width: calc(1152 * var(--u));
		height: calc(838 * var(--u));
		margin-top: calc(80 * var(--u));
	}

	.masonry .tile {
		position: absolute;
	}

	.tile--1 { left: 0; top: 0; width: calc(363 * var(--u)); height: calc(199 * var(--u)); }
	.tile--3 { left: calc(395 * var(--u)); top: 0; width: calc(363 * var(--u)); height: calc(199 * var(--u)); }
	.tile--6 { left: calc(789 * var(--u)); top: 0; width: calc(363 * var(--u)); height: calc(363 * var(--u)); }
	.tile--2 { left: 0; top: calc(231 * var(--u)); width: calc(755 * var(--u)); height: calc(346 * var(--u)); }
	.tile--4 { left: calc(790 * var(--u)); top: calc(383 * var(--u)); width: calc(363 * var(--u)); height: calc(455 * var(--u)); }
	.tile--5 { left: calc(2 * var(--u)); top: calc(603 * var(--u)); width: calc(753 * var(--u)); height: calc(235 * var(--u)); }

	/* Heading at 52,85 and button at 106,225 inside the purple tile. */
	.tile--6 .tile__title {
		margin: calc(85 * var(--u)) 0 0 calc(52 * var(--u));
	}

	.tile__btn {
		width: calc(152 * var(--u));
		height: calc(52 * var(--u));
		margin: calc(25 * var(--u)) 0 0 calc(106 * var(--u));
	}

	/* Quote at 34,33; attribution at 34,288. */
	.tile__quote {
		margin: calc(33 * var(--u)) calc(34 * var(--u)) 0;
	}

	.tile__cite {
		display: block;
		margin: calc(31 * var(--u)) calc(34 * var(--u)) 0;
	}
}

/* -------------------------------------------------------- feed: stacked */

@media (max-width: 899px) {
	.feed {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(3.5rem, 10vw, 5rem);
	}

	.feed__stage {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.feed__title {
		font-size: clamp(2.5rem, 11vw, 5rem);
		line-height: 0.92;
	}

	.masonry {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(0.75rem, 3vw, 1rem);
		margin-top: clamp(2rem, 7vw, 3rem);
	}

	.tile {
		border-width: 2px;
		border-radius: var(--radius-md);
		min-height: 120px;
	}

	/* The two full-width tiles keep their emphasis when stacked. */
	.tile--2,
	.tile--5 {
		grid-column: 1 / -1;
	}

	.tile--6 {
		grid-column: 1 / -1;
		padding: clamp(1.25rem, 5vw, 2rem);
		gap: 1.25rem;
		align-items: flex-start;
	}

	.tile--4 {
		min-height: 160px;
	}

	.tile__title {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
		line-height: 1.05;
	}

	.tile__btn {
		padding: 0.6rem 1.4rem;
		font-size: 0.875rem;
		border-width: 2px;
	}

	.tile--2 {
		padding: clamp(1.25rem, 5vw, 2rem);
	}

	.tile__quote {
		font-size: clamp(1.25rem, 5vw, 2rem);
		line-height: 1.15;
	}

	.tile__cite {
		display: block;
		margin-top: 1rem;
		font-size: 0.875rem;
	}

	.feed__dot--yellow,
	.feed__dot--red {
		display: none;
	}

	.feed__dot--magenta {
		left: auto;
		right: calc(-70 * var(--u));
		top: calc(60 * var(--u));
	}
}

/* =========================================================== partners
   "Trusted By" — Figma 1152×672 at page y=5241, logo strip 1133×514.
   ==================================================================== */

.partners {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	color: var(--text-body);
}

.partners__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.partners__title {
	font-size: calc(96 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

/* The composition bleeds the full 1280 canvas — it carries the card, its hard
   yellow shadow and the surrounding circles, so it is not inset to 1152. */
.partners__logos {
	width: calc(1280 * var(--u));
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	margin-top: calc(-16 * var(--u));
}

@media (min-width: 900px) {
	.partners {
		padding-block: calc(64 * var(--u)) calc(128 * var(--u));
	}

	.partners__head .eyebrow {
		font-size: calc(14 * var(--u));
		line-height: 1;
		margin-bottom: calc(16 * var(--u));
	}
}

@media (max-width: 899px) {
	.partners {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(3rem, 9vw, 4.5rem);
	}

	.partners__stage {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.partners__title {
		font-size: clamp(2.25rem, 10vw, 4rem);
	}

	.partners__logos {
		width: 100%;
		margin-top: 1.5rem;
	}
}

/* ============================================================= footer
   Figma 1280×688 on #1C1B1B. Brand column at 71, link columns at 656
   and 948, divider at 546, legal line at 579.
   ==================================================================== */

.site-footer {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--c-ink);
	color: var(--c-paper);
}

.site-footer__stage {
	width: calc(1280 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.site-footer__logo {
	width: calc(368 * var(--u));
	max-width: 100%;
	height: auto;
}

.site-footer__tagline {
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(26 * var(--u));
	color: var(--c-line);
	margin: 0;
	max-width: calc(368 * var(--u));
}

.site-footer__heading {
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-paper);
	margin: 0 0 calc(32 * var(--u));
}

.site-footer__list,
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__list li + li {
	margin-top: calc(18 * var(--u));
}

.site-footer__list a,
.site-footer__social a {
	font-family: var(--font-ui);
	font-size: calc(16 * var(--u));
	line-height: calc(26 * var(--u));
	color: var(--c-line);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible,
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--c-yellow);
	text-decoration: underline;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: calc(24 * var(--u));
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	border-top: 1px solid rgb(252 249 248 / 0.15);
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	line-height: calc(20 * var(--u));
	color: var(--c-line);
}

.site-footer__bottom p {
	margin: 0;
}

@media (min-width: 900px) {
	.site-footer {
		height: calc(688 * var(--u));
	}

	/* Brand at 71 (368 wide), then columns at 656 and 948 — so the two gaps
	   are 217 and 32, not a single uniform one. Empty tracks carry them. */
	.site-footer__cols {
		display: grid;
		grid-template-columns:
			calc(368 * var(--u)) calc(217 * var(--u))
			calc(260 * var(--u)) calc(32 * var(--u))
			calc(260 * var(--u));
		gap: 0;
		padding: calc(132 * var(--u)) 0 0 calc(71 * var(--u));
	}

	.site-footer__brand { grid-column: 1; }
	.site-footer__col:nth-of-type(1) { grid-column: 3; }
	.site-footer__col:nth-of-type(2) { grid-column: 5; }

	.site-footer__tagline {
		margin-top: calc(31 * var(--u));
	}

	.site-footer__social {
		margin-top: calc(32 * var(--u));
	}

	.site-footer__bottom {
		margin: calc(80 * var(--u)) calc(71 * var(--u)) 0;
		padding-top: calc(33 * var(--u));
	}
}

@media (max-width: 899px) {
	.site-footer {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(3rem, 9vw, 4rem) 2rem;
	}

	.site-footer__stage {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.site-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 7vw, 3rem);
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__logo {
		width: min(280px, 70%);
	}

	.site-footer__tagline {
		margin-top: 1.25rem;
		font-size: 0.9375rem;
		line-height: 1.6;
		max-width: 46ch;
	}

	.site-footer__social {
		margin-top: 1.5rem;
		gap: 1.25rem;
	}

	.site-footer__heading {
		font-size: 0.9375rem;
		margin-bottom: 1.25rem;
	}

	.site-footer__list a,
	.site-footer__social a {
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.site-footer__list li + li {
		margin-top: 0.75rem;
	}

	.site-footer__bottom {
		margin-top: clamp(2.5rem, 8vw, 3.5rem);
		padding-top: 1.5rem;
		font-size: 0.8125rem;
		line-height: 1.5;
	}
}

/* ============================================================= motion
   All movement is opacity plus the independent `translate` / `scale` /
   `rotate` properties, never `transform` — the phone-sized arcs already
   carry a transform of their own, and these compose with it.

   Nothing here runs unless main.js adds .has-motion, so a visitor with
   prefers-reduced-motion, or with JS off, gets the finished layout with no
   hidden content.
   ==================================================================== */

:root {
	--ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
	/* Slight overshoot — things land with a bit of bounce, like a poster
	   being slapped down. */
	--ease-pop: cubic-bezier(0.34, 1.46, 0.64, 1);
	--dur: 0.72s;
	--stagger: 90ms;
}

/* ---------------------------------------------------- scroll reveals */

.has-motion [data-reveal] {
	opacity: 0;
	translate: 0 32px;
	transition:
		opacity var(--dur) var(--ease-out),
		translate var(--dur) var(--ease-out);
	transition-delay: calc(var(--d, 0) * var(--stagger));
}

.has-motion [data-reveal].is-in {
	opacity: 1;
	translate: 0 0;
}

/* Cards arrive with a little pop. */
.has-motion .card[data-reveal],
.has-motion .tile[data-reveal],
.has-motion .artist[data-reveal] {
	scale: 0.94;
	translate: 0 40px;
	transition:
		opacity var(--dur) var(--ease-out),
		translate 0.8s var(--ease-pop),
		scale 0.8s var(--ease-pop);
	transition-delay: calc(var(--d, 0) * var(--stagger));
}

/* --- Feed: the photograph resolves as its tile lands ------------------
   The tile arrives on the shared card motion. The image inside runs a longer,
   slower scale on top of it, so the crop opens out and comes to rest rather
   than arriving already composed — which is what makes a photograph read as
   photographed rather than placed.

   Only the images do this. The quote tile and the follow tile have no
   photograph to resolve, and animating them the same way would just be
   movement for its own sake.

   No column parallax here, though it was in the plan: the tiles fill their
   frames exactly, so drifting them would need the images permanently
   oversized and re-cropped. Not worth changing how the photographs are framed
   for a scroll effect. */

.has-motion .feed .tile img {
	scale: 1.16;
	transition: scale 1.4s var(--ease-out);
	transition-delay: calc(var(--d, 0) * var(--stagger));
}

.has-motion .feed .tile[data-reveal].is-in img {
	scale: 1;
}

/* --- Bento: the cards are dealt, not faded ---------------------------
   These are solid colour panels with a hard ink border, so they should arrive
   like something printed being put down. Three changes make that read:

   1. A single run of four. The two rows are separate reveal groups, so their
      stagger indices both restarted at zero and the cards arrived two at a
      time; offsetting the second row turns it into one diagonal deal.
   2. A settle rotation. A panel that lands a degree off-square and squares up
      feels physical; the same panel arriving perfectly aligned does not.
   3. The photograph resolves as its card settles, running the opposite way,
      so the crop comes to rest rather than arriving already finished.

   Deliberately no shadow growth: the Figma file puts hard shadows on the
   buttons, the date panel and the hero deck, but not on these cards, and
   inventing one here would be a design change rather than a motion one. */

.has-motion .bento .card[data-reveal] {
	rotate: var(--tilt, 1.1deg);
	transition:
		opacity var(--dur) var(--ease-out),
		translate 0.8s var(--ease-pop),
		scale 0.8s var(--ease-pop),
		rotate 0.9s var(--ease-out);
	/* The shorthand above resets the delay, so it has to be restated —
	   without this the first row lost its stagger and arrived all at once. */
	transition-delay: calc(var(--d, 0) * var(--stagger));
}

.has-motion .bento .card[data-reveal]:nth-child(2n) {
	--tilt: -1.1deg;
}

.has-motion .bento__row--b .card[data-reveal],
.has-motion .bento__row--b .card[data-reveal] .card__media {
	transition-delay: calc((var(--d, 0) + 2) * var(--stagger));
}

.has-motion .bento .card[data-reveal].is-in {
	rotate: 0deg;
}

.has-motion .bento .card__media {
	scale: 1.12;
	transition: scale 1.3s var(--ease-out);
	transition-delay: calc(var(--d, 0) * var(--stagger));
}

.has-motion .bento .card[data-reveal].is-in .card__media {
	scale: 1;
}

.has-motion .card[data-reveal].is-in,
.has-motion .tile[data-reveal].is-in,
.has-motion .artist[data-reveal].is-in {
	scale: 1;
}

/* ==================================================== hero entrance
   Ordered like a show starting: the room settles, the headline drops in
   line by line, then the supporting copy, then the ornament pops.
   ==================================================================== */

/* --- 1. the headline rises out of its mask, line by line --- */

.has-motion .hero .hero__line > span,
.has-motion .page-hero .hero__line > span {
	display: block;
	translate: 0 115%;
	rotate: 2deg;
	transition:
		translate 1s var(--ease-out),
		rotate 1s var(--ease-out);
	transition-delay: calc(0.25s + var(--d, 0) * 130ms);
}

.has-motion .hero__line:nth-child(1) > span { --d: 0; }
.has-motion .hero__line:nth-child(2) > span { --d: 1; }
.has-motion .hero__line:nth-child(3) > span { --d: 2; }

.has-motion .hero.is-ready .hero__line > span,
.has-motion .page-hero.is-ready .hero__line > span {
	translate: 0 0;
	rotate: 0deg;
}

/* --- 2. supporting copy fades up behind it --- */

.has-motion .hero__patronage,
.has-motion .hero__lede,
.has-motion .hero__buy,
.has-motion .hero__explore,
.has-motion .hero__countdown {
	opacity: 0;
	translate: 0 28px;
	transition:
		opacity 0.8s var(--ease-out),
		translate 0.8s var(--ease-out);
	transition-delay: calc(var(--d, 0) * 110ms);
}

.has-motion .hero__patronage { --d: 0; }
.has-motion .hero__lede { --d: 5; }
.has-motion .hero__buy { --d: 6; }
.has-motion .hero__explore { --d: 7; }
.has-motion .hero__countdown { --d: 8; }

.has-motion .hero.is-ready .hero__patronage,
.has-motion .hero.is-ready .hero__lede,
.has-motion .hero.is-ready .hero__buy,
.has-motion .hero.is-ready .hero__explore,
.has-motion .hero.is-ready .hero__countdown {
	opacity: 1;
	translate: 0 0;
}

/* The date panel settles into its 3° tilt rather than starting there. */
.has-motion .hero__dates {
	rotate: -4deg;
	transition: rotate 1s var(--ease-pop);
	transition-delay: 0.95s;
}

.has-motion .hero.is-ready .hero__dates {
	rotate: 3.01deg;
}

/* --- 3. the media card swings in from the right --- */

.has-motion .hero__card {
	opacity: 0;
	translate: 60px 24px;
	rotate: 3deg;
	scale: 0.94;
	transition:
		opacity 0.9s var(--ease-out),
		translate 1s var(--ease-pop),
		rotate 1s var(--ease-pop),
		scale 1s var(--ease-pop);
	transition-delay: 0.55s;
}

.has-motion .hero.is-ready .hero__card {
	opacity: 1;
	translate: 0 0;
	rotate: 0deg;
	scale: 1;
}

/* --- 4. ornament: arcs sweep in, dots pop --- */

.has-motion .hero__arcs {
	opacity: 0;
	scale: 0.86;
	transition:
		opacity 1.2s var(--ease-out),
		scale 1.4s var(--ease-out);
}

.has-motion .hero__arcs--left { transform-origin: top left; }
.has-motion .hero__arcs--right { transform-origin: bottom right; }

.has-motion .hero.is-ready .hero__arcs {
	opacity: 1;
	scale: 1;
}

.has-motion .hero__dot {
	opacity: 0;
	scale: 0.2;
	transition:
		opacity 0.5s var(--ease-out),
		scale 0.7s var(--ease-pop);
}

.has-motion .hero.is-ready .hero__dot {
	opacity: 1;
	scale: 1;
}

.has-motion .hero.is-ready .hero__dot--yellow { transition-delay: 1.05s; }
.has-motion .hero.is-ready .hero__dot--pink { transition-delay: 1.2s; }

/* --- 5. slow push-in on the stage photo, then a permanent drift --- */

.has-motion .hero__media img {
	scale: 1.1;
	transition: scale 2.8s var(--ease-out);
}

.has-motion .hero.is-ready .hero__media img {
	scale: 1.02;
}

/* --- 6. ambient: nothing is ever completely still --- */

.has-motion .hero.is-ready .hero__dot--yellow {
	animation: timeless-float 7s 2s ease-in-out infinite;
}

.has-motion .hero.is-ready .hero__dot--pink {
	animation: timeless-float 9s 2.4s ease-in-out infinite reverse;
}

.has-motion .hero.is-ready .hero__arcs--left {
	animation: timeless-sway 14s 2s ease-in-out infinite;
}

.has-motion .hero.is-ready .hero__arcs--right {
	animation: timeless-sway 18s 2s ease-in-out infinite reverse;
}

@keyframes timeless-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}

@keyframes timeless-sway {
	0%, 100% { rotate: 0deg; }
	50% { rotate: 1.6deg; }
}

/* Section ornament keeps drifting too. */
.has-motion .bento__dot,
.has-motion .lineup__dot,
.has-motion .feed__dot {
	animation: timeless-float 8s ease-in-out infinite;
}

.has-motion .bento__dot--magenta,
.has-motion .lineup__dot--pink,
.has-motion .feed__dot--magenta {
	animation-duration: 11s;
	animation-direction: reverse;
}

/* ------------------------------------------------------- soft parallax */

.has-motion [data-parallax] {
	will-change: translate;
}

/* --------------------------------------------------------- hover states */

.card,
.tile,
.artist__frame {
	transition:
		translate 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

@media (hover: hover) and (min-width: 900px) {
	.card:hover,
	.tile--6:hover,
	.tile--2:hover {
		translate: 0 -6px;
		box-shadow: 0 14px 0 -4px rgb(28 27 27 / 0.18);
	}

	.artist:hover .artist__frame {
		translate: 0 -8px;
	}

	.artist__photo {
		transition: scale 0.6s var(--ease-out), filter 0.6s var(--ease-out);
	}

	.artist:hover .artist__photo {
		scale: 1.06;
		filter: grayscale(0);
	}

	.card__media {
		transition: scale 0.8s var(--ease-out);
	}

	.card--teal:hover .card__media {
		scale: 1.05;
	}

	.tile img {
		transition: scale 0.7s var(--ease-out);
	}

	.tile:hover img {
		scale: 1.06;
	}

	.lineup__more {
		transition: translate 0.3s var(--ease-out);
	}

	.lineup__more:hover {
		translate: 0 -3px;
	}
}

/* ------------------------------------------- section headings, line by line
   Same idea as the hero: each drawn line of an H2 rises as its section
   scrolls in, so the type feels like it is being set rather than pasted. */

/* Section headings wipe up from behind a mask rather than fading in.
   A fade is the generic web gesture; a wipe reads as printed, which is what
   this design is — flat poster shapes with hard shadows and no gradients.

   The line-height here (88) is tighter than the type size (96–106), so the
   glyphs overflow their own box. The mask is therefore padded and pulled back
   by an equal negative margin: accents and descenders keep their room, the
   layout does not move, and the incoming line is pushed past the padding so
   it cannot peek below the edge. */

.has-motion .line-wipe {
	display: block;
	overflow: hidden;
	padding-block: 0.16em;
	margin-block: -0.16em;
}

.has-motion .line-wipe > span {
	display: block;
	translate: 0 calc(100% + 0.18em);
	transition: translate 0.85s var(--ease-out);
	transition-delay: calc(0.08s + var(--i, 0) * 90ms);
}

.has-motion .bento__title span:nth-child(2),
.has-motion .lineup__title span:nth-child(2),
.has-motion .feed__title span:nth-child(2) { --i: 1; }

.has-motion .feed__title span:nth-child(3) { --i: 2; }

.has-motion [data-reveal].is-in .line-wipe > span {
	translate: 0 0;
}

/* A block containing a wipe does not slide as well. Doing both moved the
   heading and revealed it at the same time, which read as mush; the wipe
   should be the only gesture. The eyebrow above it still fades, so the
   sequence stays: label, then headline. */
.has-motion [data-reveal]:has(.line-wipe) {
	opacity: 1;
	translate: 0 0;
}

.has-motion [data-reveal]:has(.line-wipe) .eyebrow {
	opacity: 0;
	transition: opacity 0.5s var(--ease-out);
}

.has-motion [data-reveal].is-in:has(.line-wipe) .eyebrow {
	opacity: 1;
}

/* ---------------------------------------------------- nav + ticket button */

.nav-primary a {
	position: relative;
}

/* The yellow rule sweeps in from the left rather than just appearing. */
.nav-primary a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: var(--c-yellow);
	scale: 0 1;
	transform-origin: left center;
	transition: scale 0.32s var(--ease-out);
}

.has-motion .nav-primary a {
	border-bottom-color: transparent;
}

.nav-primary a:hover::after,
.nav-primary a:focus-visible::after,
.nav-primary .current-menu-item > a::after {
	scale: 1 1;
}

/* A slow breath on the ticket button — it is the one thing we want clicked. */
.has-motion .btn--nav {
	animation: timeless-breathe 4.5s 3s ease-in-out infinite;
}

.has-motion .btn--nav:hover {
	animation-play-state: paused;
}

@keyframes timeless-breathe {
	0%, 92%, 100% { scale: 1; }
	96% { scale: 1.035; }
}

/* ------------------------------------------------------------- partners
   The strip is one flattened image from the design, so the hover works on
   the card as a whole. Per-logo hovers need the individual sponsor files —
   see README. */

.partners__logos {
	transition: scale 0.5s var(--ease-out), rotate 0.5s var(--ease-out);
}

.has-motion .partners__logos[data-reveal] {
	scale: 0.96;
	transition:
		opacity var(--dur) var(--ease-out),
		translate var(--dur) var(--ease-out),
		scale 0.9s var(--ease-pop),
		rotate 0.5s var(--ease-out);
}

.has-motion .partners__logos[data-reveal].is-in {
	scale: 1;
}

@media (hover: hover) and (min-width: 900px) {
	.partners__logos:hover {
		scale: 1.015;
		rotate: -0.25deg;
	}
}

/* ------------------------------------------------------- bento card life */

@media (hover: hover) and (min-width: 900px) {
	.card__title,
	.card__index {
		transition: translate 0.4s var(--ease-out);
	}

	.card:hover .card__title {
		translate: 6px 0;
	}

	.card--purple:hover .card__index {
		translate: 0 -6px;
	}

	/* The date pill lifts with its card. */
	.artist__date {
		transition: translate 0.4s var(--ease-pop), scale 0.4s var(--ease-pop);
	}

	.artist:hover .artist__date {
		translate: 0 -3px;
		scale: 1.05;
	}
}

/* ========================================================== inner pages
   Shared furniture for Line Up / Experience / VIP / Billetterie.
   ==================================================================== */

.page-hero {
	--u: calc(min(100vw, 1280px) / 1280);
	position: relative;
	background: var(--bg-page);
	overflow: clip;
}

.page-hero__stage {
	position: relative;
	width: calc(1280 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.page-hero__arcs {
	position: absolute;
	pointer-events: none;
	opacity: 0.9;
}

/* 120/108 uppercase — the inner pages' display heading. */
.page-hero__title--alt {
	font-family: var(--font-alt);
	font-weight: 400;
	font-size: calc(120 * var(--u) * var(--display-fit));
	line-height: calc(108 * var(--u));
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

/* The middle line is set in purple. */
.page-hero__title--alt .is-accent {
	color: var(--c-purple);
}

.page-hero__lede {
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	max-width: calc(576 * var(--u));
	margin: 0;
}

.page-hero__dates {
	display: inline-block;
	margin: 0;
	background: var(--c-purple);
	color: var(--c-white);
	border: calc(3 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--c-ink);
	rotate: 3.01deg;
}

@media (min-width: 900px) {
	.page-hero {
		padding-block: calc(128 * var(--u)) calc(128 * var(--u));
	}

	/* Column starts at the 64 gutter and is 757 wide, as drawn. */
	.page-hero__col {
		margin-left: calc(64 * var(--u));
		width: calc(757 * var(--u));
	}

	.page-hero__lede {
		margin-top: calc(32 * var(--u));
	}

	/* Panel at 911,501 in a hero starting at 224. */
	.page-hero__dates {
		position: absolute;
		left: calc(847 * var(--u));
		top: calc(277 * var(--u));
		width: calc(309 * var(--u));
		padding: calc(30 * var(--u)) calc(34 * var(--u));
	}

	.page-hero__arcs {
		right: 0;
		top: calc(-46 * var(--u));
		width: calc(459 * var(--u));
	}
}

@media (max-width: 899px) {
	.page-hero {
		--u: calc(min(100vw, 900px) / 1280);
		padding-block: clamp(2.5rem, 9vw, 4rem);
	}

	.page-hero__stage {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.page-hero__title--alt {
		font-size: clamp(2.75rem, 13vw, 6rem);
		line-height: 0.92;
	}

	.page-hero__lede {
		margin-top: 1.5rem;
		font-size: var(--fs-lead);
		line-height: 1.6;
		max-width: 46ch;
	}

	.page-hero__dates {
		margin-top: 2rem;
		padding: 1rem 1.5rem;
		border-width: 3px;
	}

	.page-hero__arcs {
		right: 0;
		top: 0;
		width: 42%;
		opacity: 0.5;
	}
}

/* ------------------------------------------------------------- filters */

.filters {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.filters__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	background: #ebe7e7;
	border-radius: calc(12 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	flex-wrap: wrap;
	padding: calc(24 * var(--u)) calc(27 * var(--u));
}

.filters__search {
	position: relative;
	flex: 0 1 calc(366 * var(--u));
}

.filters__search input {
	width: 100%;
	height: calc(58 * var(--u));
	padding: 0 calc(52 * var(--u)) 0 calc(26 * var(--u));
	background: var(--c-paper);
	border: 1px solid rgb(28 27 27 / 0.12);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	color: var(--text-body);
}

.filters__search button {
	position: absolute;
	right: calc(20 * var(--u));
	top: 50%;
	translate: 0 -50%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.filters__days {
	display: flex;
	flex-wrap: wrap;
	gap: calc(14 * var(--u));
}

.chip {
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-ink);
	padding: calc(9 * var(--u)) calc(24 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), translate 0.25s var(--ease-out);
}

.chip:hover {
	translate: 0 -2px;
}

.chip.is-active {
	background: var(--c-ink);
	color: var(--c-paper);
}

.filters__genre {
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
	gap: calc(16 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	text-transform: uppercase;
}

.filters__genre-value {
	background: var(--c-paper);
	border-radius: var(--radius-pill);
	padding: calc(10 * var(--u)) calc(22 * var(--u));
}

@media (max-width: 899px) {
	.filters {
		--u: calc(min(100vw, 900px) / 1280);
		padding-inline: var(--gutter);
	}

	.filters__stage {
		width: 100%;
		padding: 1.25rem;
		gap: 1rem;
	}

	.filters__search {
		flex: 1 1 100%;
	}

	.filters__search input {
		height: 48px;
		font-size: 1rem;
		padding-inline: 1.25rem 3rem;
	}

	.chip {
		font-size: 0.8125rem;
		padding: 0.5rem 1rem;
		border-width: 2px;
	}

	.filters__genre {
		margin-left: 0;
		font-size: 0.8125rem;
	}
}

/* -------------------------------------------------------- artist grid */

.grid-artists {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.grid-artists__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	list-style: none;
	padding: 0;
	margin-block: 0;
	display: grid;
	grid-template-columns: repeat(3, calc(352 * var(--u)));
	justify-content: space-between;
	gap: calc(64 * var(--u)) calc(48 * var(--u));
}

/* The middle column sits 96px lower — the design's asymmetric shift. */
.acard--shift {
	margin-top: calc(96 * var(--u));
}

/* Card: 352x440, 3px stroke, 12 radius, hard 8px shadow.
   Laid out as a grid rather than with an absolutely positioned caption so
   that neither the photo nor the caption becomes a containing block — the
   whole-card click overlay on the name link then resolves against the frame
   and covers the entire card, not just its bottom strip. */
.acard__frame {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	height: calc(440 * var(--u));
	border-radius: calc(12 * var(--u));
	overflow: hidden;
	background: var(--c-paper);
	border: calc(3 * var(--u)) solid var(--c-ink);
	box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--c-ink);
}

/* The design draws the photo at 381x477 inside a 352x440 card — a cover fit
   with a slight offset. object-fit does the same thing and survives real
   portraits arriving at whatever aspect ratio they happen to be. */
.acard__photo {
	grid-row: 1 / -1;
	grid-column: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: scale 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}

.acard__meta {
	position: absolute;
	top: calc(24 * var(--u));
	left: calc(24 * var(--u));
	margin: 0;
	display: grid;
	justify-items: start;
	gap: calc(8 * var(--u));
	z-index: 3;
}

.acard__tag {
	display: grid;
	place-items: center;
	min-width: calc(114 * var(--u));
	min-height: calc(30 * var(--u));
	padding-inline: calc(8 * var(--u));
	border: calc(3 * var(--u)) solid var(--c-ink);
	font-family: var(--font-ui);
	font-size: calc(12 * var(--u));
	line-height: calc(16 * var(--u));
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
}

.acard__tag--stage {
	background: var(--c-yellow);
	color: var(--c-yellow-deep);
}

.acard__tag--day {
	background: var(--c-purple);
	color: var(--c-white);
}

/* Favourite toggle — 48x48 at (277,27). Kept above the card-wide click
   overlay so it is pressable instead of following the artist link. */
.acard__fav {
	position: absolute;
	top: calc(24 * var(--u));
	right: calc(24 * var(--u));
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
	display: grid;
	place-items: center;
	padding: 0;
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: 50%;
	background: var(--c-paper);
	color: var(--c-ink);
	cursor: pointer;
	z-index: 3;
	transition: scale 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.acard__fav svg {
	display: block;
	width: calc(20 * var(--u));
	height: calc(18 * var(--u));
}

.acard__fav[aria-pressed="true"] svg {
	fill: currentColor;
}

.acard__caption {
	grid-row: 2;
	grid-column: 1;
	height: calc(116 * var(--u));
	padding: calc(32 * var(--u)) calc(32 * var(--u)) 0;
	display: grid;
	align-content: start;
	gap: calc(8 * var(--u));
	background: linear-gradient(to top, var(--c-ink) 0%, rgb(28 27 27 / 0) 100%);
}

.acard__name {
	margin: 0;
	font-family: var(--font-syne);
	font-weight: 400;
	font-size: calc(16 * var(--u));
	line-height: calc(20 * var(--u));
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-paper);
	white-space: nowrap;
}

.acard__genre {
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-yellow-light);
	white-space: nowrap;
}

@media (hover: hover) and (min-width: 900px) {
	.acard:hover .acard__photo {
		scale: 1.06;
		filter: grayscale(0);
	}

	.acard__frame {
		transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
	}

	.acard:hover .acard__frame {
		translate: -4px -4px;
		box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--c-ink);
	}

	.acard__fav:hover {
		scale: 1.1;
		background: var(--c-yellow);
	}
}

@media (min-width: 900px) {
	.grid-artists {
		padding-block: calc(64 * var(--u)) calc(64 * var(--u));
	}
}

@media (max-width: 899px) {
	.grid-artists {
		--u: calc(min(100vw, 900px) / 1280);
		padding: clamp(2.5rem, 8vw, 3.5rem) var(--gutter);
	}

	.grid-artists__stage {
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}

	.acard--shift {
		margin-top: 0;
	}

	/* Height follows the card's own 352:440 proportion instead of a scaled
	   pixel value, so it stays correct at any column width. */
	.acard__frame {
		height: auto;
		aspect-ratio: 352 / 440;
		border-width: 2px;
		box-shadow: 6px 6px 0 var(--c-ink);
	}

	.acard__meta {
		top: 0.875rem;
		left: 0.875rem;
		gap: 0.375rem;
	}

	.acard__tag {
		min-width: 0;
		min-height: 0;
		padding: 0.25rem 0.5rem;
		border-width: 2px;
		font-size: 0.6875rem;
		line-height: 1.2;
	}

	.acard__fav {
		top: 0.875rem;
		right: 0.875rem;
		width: 2.25rem;
		height: 2.25rem;
		border-width: 2px;
	}

	.acard__fav svg {
		width: 1rem;
		height: 0.9rem;
	}

	.acard__caption {
		height: auto;
		min-height: 26%;
		padding: 2.25rem 1.125rem 1rem;
		align-content: end;
		gap: 0.25rem;
	}

	.acard__name {
		font-size: 1rem;
		line-height: 1.25;
	}

	.acard__genre {
		font-size: 0.8125rem;
		line-height: 1.35;
		letter-spacing: 0.08em;
	}
}

/* -------------------------------------------------------- newsletter */

.newsletter {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--c-purple);
	color: var(--c-white);
	text-align: center;
}

.newsletter__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.newsletter__title {
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.newsletter__lede {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: calc(32 * var(--u)) auto 0;
	max-width: calc(672 * var(--u));
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(16 * var(--u));
	margin-top: calc(32 * var(--u));
}

.newsletter__form input {
	flex: 0 1 calc(420 * var(--u));
	height: calc(64 * var(--u));
	padding-inline: calc(28 * var(--u));
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-pill);
	background: var(--c-paper);
	font-family: var(--font-body);
	font-size: calc(18 * var(--u));
	text-transform: uppercase;
	color: var(--text-body);
}

.newsletter__pending {
	margin: calc(32 * var(--u)) 0 0;
	font-family: var(--font-body);
	font-size: calc(18 * var(--u));
	opacity: 0.85;
}

@media (min-width: 900px) {
	.newsletter {
		padding-block: calc(128 * var(--u));
	}
}

@media (max-width: 899px) {
	.newsletter {
		--u: calc(min(100vw, 900px) / 1280);
		padding: clamp(3rem, 10vw, 4.5rem) var(--gutter);
	}

	.newsletter__stage {
		width: 100%;
	}

	.newsletter__title {
		font-size: clamp(2rem, 9vw, 3rem);
		line-height: 1;
	}

	.newsletter__lede {
		font-size: 0.8125rem;
		margin-top: 1.25rem;
	}

	.newsletter__form input {
		flex: 1 1 100%;
		height: 52px;
		font-size: 1rem;
	}
}

/* ------------------------------------------- inner-page hero entrance */

.has-motion .page-hero__lede,
.has-motion .page-hero__dates,
.has-motion .page-hero__arcs {
	opacity: 0;
	translate: 0 26px;
	transition:
		opacity 0.8s var(--ease-out),
		translate 0.8s var(--ease-out);
	transition-delay: calc(0.35s + var(--d, 0) * 120ms);
}

.has-motion .page-hero__lede { --d: 1; }
.has-motion .page-hero__dates { --d: 2; }
.has-motion .page-hero__arcs { --d: 0; translate: 0 0; }

.has-motion .page-hero.is-ready .page-hero__lede,
.has-motion .page-hero.is-ready .page-hero__dates,
.has-motion .page-hero.is-ready .page-hero__arcs {
	opacity: 1;
	translate: 0 0;
}

/* ------------------------------------------------- soft yellow disc
   A 384px blurred circle behind the inner-page headings. */

.page-hero__blob {
	position: absolute;
	width: calc(384 * var(--u));
	height: calc(384 * var(--u));
	border-radius: var(--radius-pill);
	background: var(--c-yellow);
	filter: blur(calc(28 * var(--u)));
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
	translate: 0 var(--py, 0);
}

.page-hero__col {
	position: relative;
	z-index: 1;
}

@media (min-width: 900px) {
	.page-hero__blob {
		right: calc(-102 * var(--u));
		top: calc(-45 * var(--u));
	}
}

@media (max-width: 899px) {
	.page-hero__blob {
		right: calc(-120 * var(--u));
		top: 0;
		width: 60vw;
		height: 60vw;
		filter: blur(40px);
		opacity: 0.6;
	}
}

/* ---------------------------------------------------------- pricing tiers
   Figma: three 363×589 cards at x 64 / 459 / 853, r12 with a 2px outline.
   The middle one is purple and sits 32px higher. */

.pricing {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.pricing__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	list-style: none;
	padding: 0;
	margin-block: 0;
	display: grid;
	grid-template-columns: repeat(3, calc(363 * var(--u)));
	justify-content: space-between;
	align-items: start;
	gap: calc(32 * var(--u));
}

.tier {
	position: relative;
	min-height: calc(589 * var(--u));
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	color: var(--c-ink);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	padding: calc(58 * var(--u)) calc(42 * var(--u)) calc(42 * var(--u));
}

.tier--featured {
	background: var(--c-purple);
	color: var(--c-paper);
	margin-top: calc(-32 * var(--u));
}

.tier__badge {
	position: absolute;
	top: calc(-14 * var(--u));
	left: 50%;
	translate: -50% 0;
	margin: 0;
	background: var(--c-yellow);
	color: var(--c-ink);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: var(--radius-pill);
	padding: calc(5 * var(--u)) calc(18 * var(--u));
	font-family: var(--font-ui);
	font-size: calc(14 * var(--u));
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tier__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tier__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: calc(48 * var(--u));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	text-transform: uppercase;
	margin: calc(20 * var(--u)) 0 0;
}

.tier__name span {
	display: block;
}

.tier__price {
	display: flex;
	align-items: baseline;
	gap: calc(12 * var(--u));
	flex-wrap: wrap;
	margin: calc(24 * var(--u)) 0 0;
}

.tier__amount {
	font-family: var(--font-display);
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	text-transform: uppercase;
}

.tier__unit {
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	opacity: 0.8;
}

.tier__features {
	list-style: none;
	margin: calc(28 * var(--u)) 0 0;
	padding: 0;
	display: grid;
	gap: calc(16 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
}

.tier__features li {
	position: relative;
	padding-left: calc(32 * var(--u));
}

.tier__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(8 * var(--u));
	width: calc(16 * var(--u));
	height: calc(16 * var(--u));
	border-radius: var(--radius-pill);
	background: var(--c-yellow);
	border: calc(2 * var(--u)) solid var(--c-ink);
}

.tier__cta {
	margin-top: auto;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(56 * var(--u));
	background: var(--c-yellow);
	color: var(--c-yellow-ink);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--c-ink);
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.tier__cta:hover,
.tier__cta:focus-visible {
	translate: -2px -2px;
	box-shadow: calc(9 * var(--u)) calc(9 * var(--u)) 0 var(--c-ink);
}

@media (min-width: 900px) {
	.pricing {
		padding-block: calc(37 * var(--u)) calc(94 * var(--u));
	}
}

@media (max-width: 899px) {
	.pricing {
		--u: calc(min(100vw, 900px) / 1280);
		padding: clamp(3rem, 9vw, 4rem) var(--gutter);
	}

	.pricing__stage {
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: clamp(2rem, 6vw, 2.5rem);
	}

	.tier {
		min-height: 0;
		padding: 2.5rem 1.75rem 1.75rem;
		border-width: 2px;
		border-radius: var(--radius-sm);
	}

	.tier--featured {
		margin-top: 0;
	}

	.tier__name {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
		line-height: 1.05;
	}

	.tier__amount {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
		line-height: 1.1;
	}

	.tier__cta {
		min-height: 48px;
		margin-top: 2rem;
	}
}

/* ================================================================= vip
   Figma: yellow enquiry card 1152×838 at (64,710), radius 24, with the
   media panel 326×457 on the right and three floating discs behind.
   ==================================================================== */

.vip {
	--u: calc(min(100vw, 1280px) / 1280);
	position: relative;
	background: var(--bg-page);
	overflow: clip;
}

.vip__dot {
	position: absolute;
	border-radius: var(--radius-pill);
	pointer-events: none;
	translate: 0 var(--py, 0);
}

.vip__dot--red {
	width: calc(120 * var(--u));
	height: calc(120 * var(--u));
	background: var(--c-red);
	border: calc(4 * var(--u)) solid var(--c-ink);
	right: calc(140 * var(--u));
	top: calc(3 * var(--u));
}

.vip__dot--yellow {
	width: calc(240 * var(--u));
	height: calc(240 * var(--u));
	background: var(--c-yellow);
	border: calc(4 * var(--u)) solid var(--c-ink);
	left: calc(-120 * var(--u));
	top: calc(155 * var(--u));
}

.vip__dot--cyan {
	width: calc(240 * var(--u));
	height: calc(240 * var(--u));
	background: #91f1ff;
	border: calc(4 * var(--u)) solid var(--c-ink);
	right: calc(-160 * var(--u));
	bottom: calc(60 * var(--u));
}

.vip__card {
	position: relative;
	z-index: 1;
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	background: var(--c-yellow);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(24 * var(--u));
	box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--c-ink);
	display: grid;
	gap: calc(40 * var(--u));
	padding: calc(79 * var(--u)) calc(61 * var(--u));
}

.vip__title {
	font-size: calc(87 * var(--u) * var(--display-fit));
	line-height: calc(79 * var(--u));
	letter-spacing: 0;
	color: #000;
	margin: 0;
}

.vip__lede {
	font-family: var(--font-body);
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	color: var(--c-yellow-ink);
	max-width: calc(485 * var(--u));
	margin: calc(24 * var(--u)) 0 0;
}

.vip__notice {
	margin: calc(20 * var(--u)) 0 0;
	padding: calc(14 * var(--u)) calc(20 * var(--u));
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	background: var(--c-paper);
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	max-width: calc(569 * var(--u));
}

.vip__notice--ok {
	background: #91f1ff;
}

.vip__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(16 * var(--u));
	margin-top: calc(26 * var(--u));
	max-width: calc(571 * var(--u));
}

.vip__field {
	margin: 0;
}

.vip__field--wide {
	grid-column: 1 / -1;
}

.vip__form input,
.vip__form textarea {
	width: 100%;
	background: var(--c-white);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	padding: calc(18 * var(--u)) calc(26 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	color: var(--text-body);
}

.vip__form textarea {
	resize: vertical;
	min-height: calc(61 * var(--u));
}

/* Honeypot — present for bots, gone for everyone else. */
.vip__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vip__submit {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: calc(24 * var(--u));
	min-width: calc(465 * var(--u));
	min-height: calc(78 * var(--u));
	background: #00b2c2;
	color: var(--c-ink);
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--c-ink);
	font-family: var(--font-display);
	font-size: calc(40 * var(--u) * var(--display-fit));
	text-transform: uppercase;
	cursor: pointer;
	transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.vip__submit:hover,
.vip__submit:focus-visible {
	translate: -2px -2px;
	box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--c-ink);
}

.vip__media {
	margin: 0;
}

.vip__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(23 * var(--u));
	border: calc(2 * var(--u)) solid var(--c-ink);
}

@media (min-width: 900px) {
	.vip {
		padding-block: calc(69 * var(--u)) calc(128 * var(--u));
	}

	/* Copy column left, 326-wide media panel right. */
	.vip__card {
		grid-template-columns: minmax(0, 1fr) calc(326 * var(--u));
		align-items: center;
	}
}

@media (max-width: 899px) {
	.vip {
		--u: calc(min(100vw, 900px) / 1280);
		padding: clamp(2.5rem, 8vw, 4rem) var(--gutter);
	}

	.vip__card {
		width: 100%;
		padding: clamp(1.75rem, 6vw, 2.5rem);
		border-radius: var(--radius-lg);
		box-shadow: 8px 8px 0 var(--c-ink);
		gap: 2rem;
	}

	.vip__title {
		font-size: clamp(2rem, 9vw, 3.25rem);
		line-height: 1;
	}

	.vip__lede {
		font-size: 1rem;
		line-height: 1.6;
		max-width: none;
	}

	.vip__form {
		grid-template-columns: 1fr;
		max-width: none;
		gap: 0.75rem;
	}

	.vip__form input,
	.vip__form textarea {
		padding: 0.9rem 1.1rem;
		font-size: 1rem;
		border-width: 2px;
		border-radius: var(--radius-sm);
	}

	.vip__submit {
		min-width: 0;
		width: 100%;
		min-height: 56px;
		font-size: clamp(1.25rem, 6vw, 1.75rem);
		border-width: 2px;
		border-radius: var(--radius-sm);
	}

	.vip__media img {
		max-height: 320px;
		border-radius: var(--radius-md);
	}

	.vip__dot--red,
	.vip__dot--cyan {
		display: none;
	}

	.vip__dot--yellow {
		left: -30vw;
		top: 10%;
		width: 50vw;
		height: 50vw;
	}
}

/* ========================================================== experience
   Figma: hero 192–880 (centred) · timeline 880–1538 on #7236B5 ·
   bento 1538–3008 · map 3008–4365 on #F6F3F2 · CTA 4365–5339.
   ==================================================================== */

.xhero {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	text-align: center;
}

.xhero__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.xhero__title {
	font-size: calc(160 * var(--u) * var(--display-fit));
	line-height: calc(122 * var(--u));
	margin: 0;
}

.xhero__lede {
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	max-width: calc(560 * var(--u));
	margin: calc(32 * var(--u)) auto 0;
}

.xhero__stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(56 * var(--u));
	margin: calc(58 * var(--u)) 0 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ timeline */

.timeline {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--c-purple);
	color: var(--c-paper);
}

.timeline__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.timeline__title {
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.timeline__days {
	list-style: none;
	margin: calc(57 * var(--u)) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(48 * var(--u));
}

.tday__n {
	font-family: var(--font-display);
	font-size: calc(80 * var(--u) * var(--display-fit));
	line-height: 1;
	margin: 0;
	color: rgb(252 249 248 / 0.35);
}

.tday__date {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: calc(16 * var(--u)) 0 0;
}

.tday__slots {
	list-style: none;
	margin: calc(28 * var(--u)) 0 0;
	padding: 0;
	display: grid;
	gap: calc(16 * var(--u));
	border-top: 1px solid rgb(252 249 248 / 0.25);
	padding-top: calc(24 * var(--u));
}

.tday__slots li {
	display: grid;
	grid-template-columns: calc(60 * var(--u)) 1fr;
	gap: calc(12 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
}

.tday__time {
	font-weight: 700;
}

.tday__what {
	opacity: 0.9;
}

/* --------------------------------------------------- experiences bento */

.xbento {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.xbento__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.xbento__head {
	text-align: center;
}

.xbento__title {
	font-size: calc(80 * var(--u) * var(--display-fit));
	line-height: calc(77 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.xbento__lede {
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	max-width: calc(620 * var(--u));
	margin: calc(32 * var(--u)) auto 0;
}

/* Two rows: 757 + 363, then 363 + 757. */
.xbento__grid {
	margin-top: calc(80 * var(--u));
	display: grid;
	grid-template-columns: calc(757 * var(--u)) calc(363 * var(--u));
	gap: calc(32 * var(--u));
}

.xcard {
	position: relative;
	overflow: hidden;
	border: calc(4 * var(--u)) solid var(--c-ink);
	border-radius: calc(12 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(456 * var(--u));
}

.xcard--narrow:nth-of-type(3) {
	grid-column: 1;
	min-height: calc(412 * var(--u));
}

.xcard:nth-of-type(4) {
	grid-column: 2 / 3;
	grid-row: 2;
	min-height: calc(412 * var(--u));
}

.xcard--purple { background: var(--c-purple); color: var(--c-paper); }
.xcard--dark { background: var(--c-ink); color: var(--c-paper); }

.xcard--photo { color: var(--c-paper); }

.xcard__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: scale 0.7s var(--ease-out);
}

.xcard--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(28 27 27 / 0.15) 0%, rgb(28 27 27 / 0.82) 100%);
	z-index: 0;
}

.xcard__body {
	position: relative;
	z-index: 1;
	padding: calc(44 * var(--u));
}

.xcard__icon {
	display: block;
	font-size: calc(56 * var(--u));
	line-height: 1;
	margin-bottom: calc(24 * var(--u));
}

.xcard__eyebrow {
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 calc(10 * var(--u));
	opacity: 0.85;
}

.xcard__title {
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.xcard__title span {
	display: block;
}

.xcard__text {
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	margin: calc(18 * var(--u)) 0 0;
	max-width: 44ch;
	opacity: 0.92;
}

.xcard__cta {
	display: inline-block;
	margin-top: calc(24 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-yellow);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
}

/* ------------------------------------------------------------ map + CTA */

.xmap {
	--u: calc(min(100vw, 1280px) / 1280);
	background: #f6f3f2;
}

.xmap__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.xmap__title {
	font-size: calc(64 * var(--u) * var(--display-fit));
	line-height: calc(58 * var(--u));
	margin: 0;
}

.xmap__lede {
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	max-width: calc(560 * var(--u));
	margin: calc(28 * var(--u)) 0 0;
}

/* The design shows an illustrated site plan; it is not in the file yet. */
.xmap__pending {
	margin: calc(40 * var(--u)) 0 0;
	padding: calc(80 * var(--u)) calc(40 * var(--u));
	border: calc(2 * var(--u)) dashed rgb(28 27 27 / 0.25);
	border-radius: calc(16 * var(--u));
	text-align: center;
	font-family: var(--font-body);
	font-size: calc(18 * var(--u));
	color: var(--text-muted);
}

.xcta {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--c-purple);
	color: var(--c-paper);
	text-align: center;
}

.xcta__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.xcta__title {
	font-size: calc(120 * var(--u) * var(--display-fit));
	line-height: calc(132 * var(--u));
	letter-spacing: 0;
	margin: 0 0 calc(48 * var(--u));
}

@media (min-width: 900px) {
	.xhero { padding-block: calc(96 * var(--u)) calc(96 * var(--u)); }
	.timeline { padding-block: calc(128 * var(--u)); }
	.xbento { padding-block: calc(128 * var(--u)); }
	.xmap { padding-block: calc(127 * var(--u)); }
	.xcta { padding-block: calc(128 * var(--u)); }
}

@media (hover: hover) and (min-width: 900px) {
	.xcard:hover .xcard__media { scale: 1.05; }
}

@media (max-width: 899px) {
	.xhero, .timeline, .xbento, .xmap, .xcta {
		--u: calc(min(100vw, 900px) / 1280);
		padding-inline: var(--gutter);
	}

	.xhero { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.timeline, .xbento, .xmap, .xcta { padding-block: clamp(3rem, 9vw, 4.5rem); }

	.xhero__stage, .timeline__stage, .xbento__stage, .xmap__stage, .xcta__stage {
		width: 100%;
	}

	.xhero__title { font-size: clamp(2.75rem, 14vw, 6rem); line-height: 0.92; }
	.xhero__lede, .xbento__lede, .xmap__lede { font-size: var(--fs-lead); line-height: 1.6; }
	.xhero__stats { gap: 1.5rem; font-size: 0.8125rem; margin-top: 2rem; }

	.timeline__title, .xmap__title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1; }
	.timeline__days { grid-template-columns: 1fr; gap: 2.5rem; }
	.tday__n { font-size: clamp(2.5rem, 12vw, 4rem); }

	.xbento__title { font-size: clamp(2.25rem, 11vw, 4rem); line-height: 0.95; }
	.xbento__grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
	.xcard, .xcard--narrow:nth-of-type(3), .xcard:nth-of-type(4) {
		grid-column: 1;
		grid-row: auto;
		min-height: clamp(280px, 70vw, 400px);
		border-width: 2px;
	}
	.xcard__body { padding: clamp(1.25rem, 5vw, 2rem); }
	.xcard__title { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.05; }
	.xcard__text { font-size: 0.9375rem; }

	.xmap__pending { padding: 3rem 1.25rem; font-size: 1rem; }

	.xcta__title { font-size: clamp(2.25rem, 11vw, 4rem); line-height: 1; margin-bottom: 2rem; }
}

/* ====================================================== single artist
   Not a Figma frame — assembled from the design's existing parts.
   ==================================================================== */

.artist-single {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.artist-single__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	display: grid;
	gap: calc(64 * var(--u));
	align-items: start;
}

.artist-single__media {
	position: relative;
	border: calc(2 * var(--u)) solid var(--c-ink);
	border-radius: calc(16 * var(--u));
	overflow: hidden;
	box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--c-ink);
}

.artist-single__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.artist-single__name {
	font-size: calc(96 * var(--u) * var(--display-fit));
	line-height: calc(88 * var(--u));
	letter-spacing: 0;
	margin: 0;
}

.artist-single__facts {
	list-style: none;
	margin: calc(40 * var(--u)) 0 0;
	padding: 0;
	display: grid;
	gap: calc(18 * var(--u));
	border-top: 2px solid rgb(28 27 27 / 0.15);
	padding-top: calc(28 * var(--u));
}

.artist-single__facts li {
	display: grid;
	grid-template-columns: calc(120 * var(--u)) 1fr;
	gap: calc(16 * var(--u));
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
}

.artist-single__facts span {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.artist-single__text {
	margin-top: calc(32 * var(--u));
	font-family: var(--font-body);
	font-size: calc(18 * var(--u));
	line-height: 1.7;
	max-width: 60ch;
}

.artist-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(20 * var(--u));
	margin: calc(44 * var(--u)) 0 0;
}

/* Outline button that reads on the light background. */
.btn--ghost-dark {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
	font-family: var(--font-body);
	font-weight: 700;
	box-shadow: none;
}

.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
	background: rgb(28 27 27 / 0.06);
	box-shadow: none;
}

/* Card names link through to the artist page. */
.artist__name a,
.acard__name a {
	text-decoration: none;
}

.artist__name a:hover,
.acard__name a:hover,
.artist__name a:focus-visible,
.acard__name a:focus-visible {
	text-decoration: underline;
}

.artist__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

@media (min-width: 900px) {
	.artist-single {
		padding-block: calc(96 * var(--u)) calc(112 * var(--u));
	}

	.artist-single__stage {
		grid-template-columns: calc(445 * var(--u)) minmax(0, 1fr);
	}

	.artist-single__media {
		height: calc(556 * var(--u));
	}
}

@media (max-width: 899px) {
	.artist-single {
		--u: calc(min(100vw, 900px) / 1280);
		padding: clamp(2.5rem, 8vw, 4rem) var(--gutter);
	}

	.artist-single__stage {
		width: 100%;
		gap: 2rem;
	}

	.artist-single__media {
		max-height: 420px;
		box-shadow: 8px 8px 0 var(--c-ink);
	}

	.artist-single__name {
		font-size: clamp(2.25rem, 11vw, 4rem);
		line-height: 0.95;
	}

	.artist-single__facts li {
		grid-template-columns: 100px 1fr;
		font-size: 0.9375rem;
	}

	.artist-single__actions .btn--lg {
		flex: 1 1 100%;
	}
}

/* ========================================================== page body
   Prose column for the pages that are not drawn in Figma. Uses the same
   --u scale so type and rhythm match the designed pages.
   ==================================================================== */

.page-body {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	color: var(--text-body);
}

.page-body__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.prose {
	max-width: 68ch;
	font-family: var(--font-body);
	font-size: calc(18 * var(--u));
	line-height: 1.75;
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2 {
	font-size: calc(48 * var(--u) * var(--display-fit));
	line-height: 1.05;
	letter-spacing: 0;
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.prose h3 {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 1.8em;
	margin-bottom: 0.4em;
}

.prose a {
	color: var(--c-purple);
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--c-ink);
}

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose li + li {
	margin-top: 0.5em;
}

.prose strong {
	font-weight: 700;
}

.prose hr {
	border: 0;
	border-top: 2px solid rgb(28 27 27 / 0.12);
	margin-block: 2.5em;
}

.prose blockquote {
	margin: 2em 0;
	padding: calc(24 * var(--u)) calc(28 * var(--u));
	background: var(--c-yellow);
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-md);
	box-shadow: 8px 8px 0 var(--c-ink);
	font-size: calc(20 * var(--u));
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

/* --- native Details blocks become the FAQ accordion --- */

.prose details {
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-md);
	background: var(--c-white);
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.3s var(--ease-out, ease);
}

.prose details + details {
	margin-top: calc(12 * var(--u));
}

.prose details[open] {
	box-shadow: 6px 6px 0 var(--c-ink);
}

.prose summary {
	cursor: pointer;
	list-style: none;
	padding: calc(22 * var(--u)) calc(64 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));
	position: relative;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: calc(18 * var(--u));
	line-height: 1.4;
}

.prose summary::-webkit-details-marker {
	display: none;
}

/* Plus that rotates into a minus. */
.prose summary::after,
.prose summary::before {
	content: "";
	position: absolute;
	right: calc(26 * var(--u));
	top: 50%;
	width: calc(16 * var(--u));
	height: 3px;
	background: var(--c-ink);
	translate: 0 -50%;
	transition: rotate 0.3s var(--ease-out, ease), opacity 0.3s ease;
}

.prose summary::before {
	rotate: 90deg;
}

.prose details[open] summary::before {
	rotate: 0deg;
	opacity: 0;
}

.prose summary:hover {
	background: var(--c-yellow);
}

.prose details > *:not(summary) {
	padding-inline: calc(26 * var(--u));
}

.prose details > *:last-child {
	padding-bottom: calc(24 * var(--u));
}

/* --- contact / info cards built from a plain list --- */

.prose .is-style-cards ul,
.prose ul.is-style-cards {
	list-style: none;
	padding: 0;
	display: grid;
	gap: calc(16 * var(--u));
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.prose ul.is-style-cards li {
	margin: 0;
	padding: calc(24 * var(--u));
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-md);
	background: var(--c-white);
}

@media (min-width: 900px) {
	.page-body {
		padding-block: calc(24 * var(--u)) calc(120 * var(--u));
	}
}

@media (max-width: 899px) {
	.page-body {
		--u: calc(min(100vw, 900px) / 1280);
		padding: 0 var(--gutter) clamp(3rem, 10vw, 4.5rem);
	}

	.page-body__stage {
		width: 100%;
	}

	.prose {
		font-size: 1rem;
	}

	.prose h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}

	.prose summary {
		font-size: 1rem;
		padding: 1rem 3rem 1rem 1.1rem;
	}

	.prose details > *:not(summary) {
		padding-inline: 1.1rem;
	}
}

/* ------------------------------------------------- whole-card click target
   The artist name is the real link — screen readers get one clear link per
   card — and this overlay extends its hit area across the whole card, which
   is where people actually click. */

.acard,
.artist {
	position: relative;
}

.acard__name a::after,
.artist__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Keep the pill above the overlay so it stays readable, not clickable. */
.artist__date,
.acard__meta {
	z-index: 3;
}

@media (hover: hover) and (min-width: 900px) {
	.acard:hover .acard__name a,
	.artist:hover .artist__name a {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

/* The teal tile is an empty colour block in the Figma file, which reads as a
   mistake on the page. It carries a photo, toned to the card's colour so the
   teal is still doing its job in the composition. */
.tile--4 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
	opacity: 0.92;
}

/* ======================================================== hero deck
   The media card holds a stack of images. The front one drops out of
   frame to reveal the next, and the cycle loops through the bill.
   The card already clips, so the drop reads as a card leaving the frame.
   ==================================================================== */

.hero__deck-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* Without the motion layer only the design's own image is shown, so the
   hero still matches the drawing exactly. */
.hero__deck-card:not(:first-child) {
	display: none;
}

.has-motion .hero__deck-card:not(:first-child) {
	display: block;
}

.has-motion .hero__deck-card {
	transition:
		translate 0.8s cubic-bezier(0.45, 0, 0.7, 1),
		rotate 0.8s cubic-bezier(0.45, 0, 0.7, 1),
		opacity 0.55s ease 0.25s;
}

.has-motion .hero__deck-card.is-out {
	translate: 0 118%;
	rotate: -7deg;
	opacity: 0;
}

/* Used while a card is being reset to the back of the stack. */
.has-motion .hero__deck-card.is-resetting {
	transition: none;
}

/* Footer social icons — outlined discs in the design's button language. */
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	min-width: 40px;
	min-height: 40px;
	border: 2px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-line);
	transition:
		background-color 0.25s var(--ease-out, ease),
		color 0.25s var(--ease-out, ease),
		border-color 0.25s var(--ease-out, ease),
		translate 0.25s var(--ease-out, ease);
}

.social-link svg {
	width: 20px;
	height: 20px;
}

.social-link:hover,
.social-link:focus-visible {
	background: var(--c-yellow);
	border-color: var(--c-yellow);
	color: var(--c-ink);
	translate: 0 -3px;
	text-decoration: none;
}

.site-footer__social {
	align-items: center;
}

/* ============================================================ gallery
   Not a Figma frame. A masonry-ish grid in the design's card language.
   ==================================================================== */

.gallery {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
}

.gallery__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
}

.gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(24 * var(--u));
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: calc(210 * var(--u));
}

.gallery__item {
	overflow: hidden;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-md);
	position: relative;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.7s var(--ease-out, ease);
}

/* A few tiles run tall or wide so the grid does not read as a plain matrix. */
.gallery__item--1 { grid-row: span 2; }
.gallery__item--4 { grid-column: span 2; }

@media (hover: hover) {
	.gallery__item:hover img {
		scale: 1.06;
	}
}

@media (min-width: 900px) {
	.gallery {
		padding-block: calc(24 * var(--u)) calc(120 * var(--u));
	}
}

@media (max-width: 899px) {
	.gallery {
		--u: calc(min(100vw, 900px) / 1280);
		padding: 0 var(--gutter) clamp(3rem, 10vw, 4.5rem);
	}

	.gallery__stage {
		width: 100%;
	}

	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 44vw;
		gap: clamp(0.75rem, 3vw, 1rem);
	}

	.gallery__item--4 {
		grid-column: span 2;
	}
}

/* Auto-fitted display text must not wrap, or there is nothing to measure. */
[data-fit] {
	white-space: nowrap;
}

/* ========================================================== ticketing
   Basket steppers, checkout, and the printable pass.
   ==================================================================== */

.stepper {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	margin-top: auto;
	padding-top: calc(20 * var(--u));
}

.stepper__btn {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-pill);
	background: var(--c-paper);
	color: var(--c-ink);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, scale 0.2s ease;
}

.stepper__btn:hover {
	background: var(--c-yellow);
}

.stepper__btn:active {
	scale: 0.92;
}

.stepper__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.25rem;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-sm);
	background: var(--c-paper);
	color: var(--c-ink);
	-moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.stepper.is-active .stepper__input {
	background: var(--c-yellow);
}

/* The basket bar follows you down the page — the single most important
   conversion affordance on this screen. */
.pricing__bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1rem clamp(1rem, 3vw, 2rem);
	background: var(--c-ink);
	color: var(--c-paper);
	border-radius: var(--radius-lg);
	box-shadow: 0 -6px 30px rgb(28 27 27 / 0.25);
}

.pricing__count {
	margin: 0;
	font-family: var(--font-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.875rem;
}

.pricing__total {
	margin: 0 auto 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1;
}

/* ----------------------------------------------------------- checkout */

.checkout {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	padding-block: clamp(3rem, 8vw, 6rem);
}

.checkout__stage {
	width: calc(1152 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.checkout__stage--narrow {
	max-width: 60ch;
}

.checkout__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	counter-reset: step;
}

.checkout__steps li {
	counter-increment: step;
	color: var(--text-muted);
	opacity: 0.6;
}

.checkout__steps li::before {
	content: counter(step) ". ";
}

.checkout__steps .is-done,
.checkout__steps .is-current {
	opacity: 1;
	color: var(--c-ink);
	font-weight: 700;
}

.checkout__steps .is-current {
	color: var(--c-purple);
}

.checkout__title {
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	line-height: 1;
	margin: 0 0 1rem;
}

.checkout__lede {
	font-size: var(--fs-lead);
	line-height: 1.6;
	max-width: 56ch;
	margin-bottom: 2rem;
}

.checkout__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.checkout__reassure {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--text-muted);
	max-width: 46ch;
}

.checkout__error {
	padding: 1rem 1.25rem;
	border: 2px solid var(--c-red);
	border-radius: var(--radius-sm);
	background: rgb(255 0 61 / 0.06);
	margin-bottom: 1.5rem;
}

.checkout__notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.checkout__notice--warn {
	background: var(--c-yellow);
	border: 2px solid var(--c-ink);
}

.checkout__badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.4rem 1rem;
	border-radius: var(--radius-pill);
	border: 2px solid var(--c-ink);
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.checkout__badge--ok { background: #b8f0c8; }
.checkout__badge--wait { background: var(--c-yellow); }
.checkout__badge--fail { background: var(--c-pink); }

.checkout__back {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------ summary */

.summary {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: 8px 8px 0 var(--c-ink);
}

.summary__title {
	font-size: 1.25rem;
	letter-spacing: 0;
	margin: 0 0 1rem;
}

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

.summary__line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6rem;
	border-bottom: 1px solid rgb(28 27 27 / 0.12);
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.summary__qty {
	color: var(--text-muted);
}

.summary__admits {
	display: block;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.summary__amount {
	white-space: nowrap;
	font-weight: 700;
}

.summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 1rem 0 0;
	font-family: var(--font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8125rem;
}

.summary__total strong {
	font-family: var(--font-display);
	font-size: 1.75rem;
	letter-spacing: 0;
}

/* --------------------------------------------------------------- form */

.field {
	display: block;
	margin: 0 0 1.25rem;
}

.field label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.field input {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	font: inherit;
	color: var(--c-ink);
}

.field input:focus-visible {
	outline: 3px solid var(--c-purple);
	outline-offset: 2px;
}

.field--error input {
	border-color: var(--c-red);
}

.field__msg {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	color: var(--c-red);
}

.checkout__submit {
	width: 100%;
}

/* ------------------------------------------------------------ tickets */

.tickets {
	--u: calc(min(100vw, 1280px) / 1280);
	background: var(--bg-page);
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.tickets__stage {
	width: calc(1000 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tickets__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.tickets__title {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1;
	margin: 0.25rem 0 0.5rem;
}

.tickets__meta {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	color: var(--text-muted);
}

.tickets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

/* The pass: body and a perforated stub, as a physical ticket would be. */
.pass {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	border: 3px solid var(--c-ink);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-purple);
	color: var(--c-paper);
	box-shadow: 10px 10px 0 var(--c-ink);
	break-inside: avoid;
}

.pass__body {
	padding: clamp(1.25rem, 3vw, 2rem);
}

.pass__brand {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.85;
}

.pass__tier {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1;
	letter-spacing: 0;
	margin: 0.5rem 0 1.25rem;
}

.pass__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1.25rem;
	margin: 0;
}

.pass__facts dt {
	font-family: var(--font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.pass__facts dd {
	margin: 0.15rem 0 0;
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Dashed edge reads as a tear-off line. */
.pass__stub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.25rem;
	background: var(--c-paper);
	color: var(--c-ink);
	border-left: 3px dashed var(--c-ink);
}

.pass__qr {
	width: 100%;
	max-width: 180px;
	height: auto;
	border-radius: 6px;
}

.pass__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: 0.08em;
}

.pass__index {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.tickets__note {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--text-muted);
}

@media (max-width: 767px) {
	.checkout__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout__aside {
		order: -1;
	}

	.pass {
		grid-template-columns: minmax(0, 1fr);
	}

	.pass__stub {
		border-left: 0;
		border-top: 3px dashed var(--c-ink);
	}

	.pricing__bar {
		border-radius: var(--radius-md);
	}
}

/* ----------------------------------------------------------- printing
   "Download" is the browser's own print-to-PDF: no library, and the layout
   is identical to what is on screen. */
@media print {
	.site-header,
	.site-footer,
	.tickets__print,
	.tickets__note,
	#wpadminbar {
		display: none !important;
	}

	.tickets {
		padding: 0;
	}

	.pass {
		box-shadow: none;
		page-break-inside: avoid;
		margin-bottom: 12mm;
	}

	body {
		background: #fff;
	}
}

/* ------------------------------------------------------ demo payment
   A stand-in for the bank's page. Styled to read as a payment screen, and
   banded so nobody can mistake it for a real one. */

.demo__banner {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--c-yellow);
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.demo__banner strong {
	display: block;
	font-family: var(--font-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
}

.demo__card {
	border: 3px solid var(--c-ink);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: 10px 10px 0 var(--c-ink);
	overflow: hidden;
}

.demo__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.25rem;
	background: var(--c-ink);
	color: var(--c-paper);
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.demo__amount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1.25rem;
	border-bottom: 2px dashed rgb(28 27 27 / 0.2);
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.demo__amount strong {
	font-family: var(--font-display);
	font-size: 1.75rem;
	letter-spacing: 0;
}

.demo__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin: 0;
	padding: 1.25rem;
}

.demo__fields > div:first-child {
	grid-column: 1 / -1;
}

.demo__fields dt {
	font-family: var(--font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Values, not inputs — nothing here is typed or collected. */
.demo__fields dd {
	margin: 0.3rem 0 0;
	padding: 0.7rem 0.9rem;
	border: 2px solid rgb(28 27 27 / 0.18);
	border-radius: var(--radius-sm);
	background: rgb(28 27 27 / 0.03);
	font-family: var(--font-body);
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.demo__ref {
	margin: 0;
	padding: 0 1.25rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.demo__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
}

.demo__cancel {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	color: var(--text-muted);
}

.demo__note {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--text-muted);
}

@media (max-width: 520px) {
	.demo__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.demo__actions .btn {
		width: 100%;
	}
}

/* =================================================== ticketing on mobile
   Every size in the ticketing UI was expressed as `calc(N * var(--u))`,
   which is right on the 1280 canvas but collapses below it: at 375px --u is
   0.293, so a 14px label rendered at 4px. Anything that is type or a touch
   target is restated here in absolute terms.
   ==================================================================== */

@media (max-width: 899px) {
	.tier__eyebrow {
		font-size: 0.75rem;
		line-height: 1.3;
		letter-spacing: 0.16em;
	}

	.tier__badge {
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
		padding: 0.35rem 0.85rem;
	}

	.tier__price {
		margin-block: 1rem;
		gap: 0.35rem;
	}

	.tier__unit {
		font-size: 0.875rem;
		line-height: 1.4;
	}

	.tier__features {
		gap: 0.7rem;
		margin-top: 1.25rem;
	}

	.tier__features li {
		font-size: 0.9375rem;
		line-height: 1.5;
		padding-left: 1.75rem;
	}

	.tier__features li::before {
		width: 1rem;
		height: 1rem;
		top: 0.2rem;
	}

	/* Touch targets: 44px minimum on every control. */
	.stepper {
		gap: 0.65rem;
		padding-top: 1.25rem;
	}

	.stepper__btn,
	.stepper__input {
		height: 48px;
	}

	.stepper__btn {
		flex-basis: 48px;
		width: 48px;
		font-size: 1.35rem;
	}

	.stepper__input {
		font-size: 1.125rem;
	}

	/* --- checkout ---------------------------------------------------- */

	.checkout__steps {
		font-size: 0.6875rem;
		gap: 0.5rem 1rem;
		margin-bottom: 1.5rem;
	}

	.checkout__lede {
		font-size: 1rem;
	}

	.summary {
		padding: 1.25rem;
		box-shadow: 6px 6px 0 var(--c-ink);
	}

	.summary__title {
		font-size: 1.0625rem;
	}

	.summary__line {
		font-size: 0.9375rem;
	}

	.summary__total {
		font-size: 0.75rem;
	}

	.summary__total strong {
		font-size: 1.5rem;
	}

	.field input {
		font-size: 1rem; /* under 16px iOS zooms the page on focus */
		padding: 0.85rem 0.9rem;
	}

	/* --- the pass ----------------------------------------------------- */

	.pass {
		box-shadow: 6px 6px 0 var(--c-ink);
	}

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

	.pass__facts dt {
		font-size: 0.625rem;
	}

	.pass__facts dd {
		font-size: 0.875rem;
	}

	.pass__code {
		font-size: 1rem;
	}

	.tickets__head {
		align-items: flex-start;
	}

	.tickets__print {
		width: 100%;
	}
}

/* Very small phones: the basket bar must not eat the screen. */
@media (max-width: 420px) {
	.pricing__bar {
		gap: 0.6rem;
		padding: 0.85rem 1rem;
	}

	.pricing__total {
		font-size: 1.375rem;
	}

	.pricing__bar .btn {
		width: 100%;
		font-size: 1.125rem;
	}

	.tier {
		padding: 2.25rem 1.25rem 1.5rem;
	}
}


/* ------------------------------------------------- search & empty states */

.searchform {
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.searchform__row {
	display: flex;
	gap: 0.5rem;
	max-width: 34rem;
}

.searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 1rem;
	font-family: var(--font-ui);
	padding: 0.85rem 1rem;
	color: var(--c-ink);
	background: var(--c-white);
	border: var(--border-heavy);
	border-radius: 999px;
}

.searchform__submit {
	flex: 0 0 auto;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.5rem;
	color: var(--c-paper);
	background: var(--c-ink);
	border: var(--border-heavy);
	border-radius: 999px;
	cursor: pointer;
}

.searchform__submit:hover,
.searchform__submit:focus-visible {
	background: var(--c-purple);
}

.results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 3vw, 1.5rem);
}

.results__item {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--c-white);
	border: var(--border-heavy);
	border-radius: 0.75rem;
	box-shadow: 6px 6px 0 var(--c-ink);
}

.results__kind {
	margin: 0 0 0.35rem;
	font-family: var(--font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-purple);
}

.results__title {
	margin: 0;
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	line-height: 1.2;
}

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

.results__title a:hover,
.results__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.results__excerpt {
	margin: 0.5rem 0 0;
	color: var(--text-muted);
}

/* Shared by the search miss and the line-up day filter. */
.results-empty,
.grid-artists__empty {
	max-width: 34rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--c-white);
	border: var(--border-heavy);
	border-radius: 0.75rem;
}

.results-empty__lead,
.grid-artists__empty-lead {
	margin: 0 0 0.5rem;
	font-family: var(--font-alt);
	font-size: clamp(1.25rem, 4vw, 1.75rem);
	line-height: 1.15;
	text-transform: uppercase;
}

.results-empty__links {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.results-empty__links a {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	border: 2px solid var(--c-ink);
	border-radius: 999px;
}

.results-empty__links a:hover,
.results-empty__links a:focus-visible {
	color: var(--c-paper);
	background: var(--c-ink);
}

/* --- line-up filtering --- */

.grid-artists__empty {
	margin-inline: auto;
	text-align: center;
}

.grid-artists__empty button {
	margin-top: 1rem;
}

/* The drawn 96px stagger reads as intentional across a full grid and as a
   mistake once cards are filtered out, so it is dropped while filtering. */
.grid-artists__stage.is-filtered .acard--shift {
	margin-top: 0;
}

.grid-artists__status {
	margin: clamp(1.25rem, 3vw, 2rem) auto 0;
	width: calc(1152 * var(--u));
	max-width: 100%;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* The status line is for screen readers first; it should not shout on screen. */
@media (max-width: 899px) {
	.grid-artists__status {
		padding-inline: var(--gutter);
	}
}