/**
 * The public show page: three chapters (2026-10-06).
 *
 * Loaded after public.css on a single show. Michael's rules for it: the page
 * had seven boxed sections and three red buttons, and the venue card "looks
 * really bad and could use some love". Now it is a hero, the experience, the
 * venue, and one quiet band at the foot, with one red thing on the page: the
 * ticket action.
 *
 * House rules kept here: Poppins for everything but the H1, sentence case,
 * square corners, fills and space instead of drawn lines, charcoal panels
 * instead of one flat black, red (#ED2124) for the ticket action only, touch
 * targets of 44px, nothing wider than a 320px screen.
 */

.mpr-event {
	--ev-0: #000;
	--ev-1: #0d0d0d;
	--ev-2: #121212;
	--ev-3: #151515;
	--ev-btn: #1f1f1f;
	--ev-red: #ED2124;
	--ev-deep: #780000;
	--ev-text: #fff;
	--ev-soft: #ddd8d1;
	--ev-dim: #a9a6a1;
	--ev-gap: clamp(40px, 6vw, 84px);
	--ev-pad: 24px;
	--ev-face: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	overflow-x: clip;
}

.mpr-event .mpr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mpr-event a:hover { color: var(--ev-text); }
.mpr-event :focus-visible { outline: 2px solid var(--ev-text); outline-offset: 3px; }

/* ── Headings: three of them, small, sentence case ───────────────────── */

.mpr-event h2,
.mpr-event .mpr-event-heading {
	font-family: var(--ev-face) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	/* Michael, 2026-10-06: "such large headings on these sections is crazy." */
	font-size: clamp(18px, 1.6vw, 22px) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	color: var(--ev-text);
}

/* A label inside a chapter (the cast, the questions, photos): quieter than a heading. */
.mpr-event .mpr-event-label,
.mpr-event .mpr-event-sponsors .mpr-event-heading {
	font-family: var(--ev-face) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	color: var(--ev-dim);
	margin: 0 0 14px !important;
	padding: 0 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.mpr-event .mpr-btn {
	min-height: 48px;
	padding: 12px 24px;
	font-family: var(--ev-face);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	text-align: center;
	box-sizing: border-box;
}

/* White on the brand red passes contrast as large bold text, so the ticket action never goes under 19px. */
.mpr-event .mpr-btn-primary {
	background: var(--ev-red);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
}
.mpr-event .mpr-btn-primary:hover,
.mpr-event .mpr-btn-primary:focus-visible { background: #c8161a; color: #fff; }

.mpr-event .mpr-btn-neutral { background: var(--ev-btn); color: #fff; }
.mpr-event .mpr-btn-neutral:hover,
.mpr-event .mpr-btn-neutral:focus-visible { background: #2e2e2e; color: #fff; }

.mpr-event .mpr-btn-big {
	min-height: 60px;
	padding: 0 38px;
	font-size: 20px;
	box-shadow: 0 12px 40px rgba(237, 33, 36, .28);
}

/* Where there is nothing to press, the state is said in plain words, not on a dead button. */
.mpr-event .mpr-cta-words {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	background: var(--ev-btn);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	box-sizing: border-box;
}

.mpr-event .mpr-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ev-soft);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.mpr-event .mpr-textlink:hover,
.mpr-event .mpr-textlink:focus-visible { color: #fff; }

/* ── Chapter one: the hero ───────────────────────────────────────────── */

.mpr-event .mpr-poster {
	background:
		radial-gradient(90% 110% at 88% 0%, rgba(120, 0, 0, .5), transparent 62%),
		linear-gradient(180deg, #0d0d0d 0%, #000 100%);
}
.mpr-event .mpr-poster.has-art::before { opacity: .5; }
.mpr-event .mpr-poster.has-art::after {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .8) 48%, rgba(0, 0, 0, .5) 100%),
		linear-gradient(0deg, #000 0%, transparent 40%);
}

.mpr-event .mpr-poster-inner {
	padding: clamp(28px, 4vw, 56px) var(--ev-pad) clamp(36px, 5vw, 72px);
	gap: clamp(28px, 5vw, 72px);
}

.mpr-event .mpr-poster .mpr-event-title {
	font-size: clamp(36px, 5.6vw, 78px);
	margin: 6px 0 16px;
}

.mpr-event .mpr-poster .mpr-event-blurb {
	margin: 0 0 22px;
	max-width: 46ch;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.5;
	color: var(--ev-soft);
}

.mpr-event .mpr-event-cancelled {
	display: inline-block;
	margin: 12px 0 4px;
	padding: 10px 16px;
	background: var(--ev-deep);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
}

.mpr-event .mpr-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}
.mpr-event .mpr-hero-meta li { margin: 0; padding: 0; list-style: none; line-height: 1.4; }
.mpr-event .mpr-hero-meta .is-when { flex: 0 0 100%; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; color: #fff; }
.mpr-event .mpr-hero-meta .is-where { flex: 0 0 100%; font-size: 16px; color: var(--ev-soft); }
.mpr-event .mpr-hero-meta .is-age { padding: 3px 10px; background: rgba(255, 255, 255, .13); font-size: 13px; font-weight: 600; color: #fff; }
.mpr-event .mpr-hero-meta .is-price { font-size: 17px; font-weight: 600; color: #fff; }
.mpr-event .mpr-dot { color: var(--ev-dim); padding: 0 2px; }

.mpr-event .mpr-poster-actions { gap: 14px 18px; margin: 0; }

.mpr-event .mpr-cta-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}
.mpr-event .mpr-cta-note::before { content: ""; width: 8px; height: 8px; background: #fff; flex: none; }

.mpr-event .mpr-buyproof {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--ev-soft);
}
.mpr-event .mpr-buyproof li { margin: 0; padding: 0; list-style: none; }
.mpr-event .mpr-buyproof li::before { content: "\2713"; margin-right: 7px; color: #fff; }

.mpr-event .mpr-event-remaining { margin: 12px 0 0; font-size: 14px; color: var(--ev-soft); }

.mpr-event .mpr-hero-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 10px 0 0; padding: 0; }

.mpr-event .mpr-poster-art img {
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .75);
}

/* ── Chapters ────────────────────────────────────────────────────────── */

.mpr-event .mpr-chapter { margin: 0; padding: var(--ev-gap) 0; }
.mpr-event .mpr-chapter-inner {
	max-width: var(--mpr-event-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--ev-pad);
}

/* ── Chapter two: the experience ─────────────────────────────────────── */

.mpr-event .mpr-experience { background: linear-gradient(180deg, #0d0d0d 0%, #000 70%); }

.mpr-event .mpr-xp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mpr-event .mpr-xp-story { min-width: 0; }

.mpr-event .mpr-event-copy {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ev-soft);
}
.mpr-event .mpr-event-copy > :last-child { margin-bottom: 0; }

.mpr-event .mpr-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	max-width: 68ch;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.mpr-event .mpr-xp-story > .mpr-highlights:first-child { margin-top: 0; }
.mpr-event .mpr-highlight {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 13px 15px;
	background: var(--ev-3);
	color: var(--ev-soft);
	font-size: 15px;
	line-height: 1.45;
	list-style: none;
}
.mpr-event .mpr-highlight .mpr-icon { color: var(--ev-dim); margin-top: 1px; }

.mpr-event .mpr-faqs { max-width: 68ch; margin-top: 36px; }
.mpr-event .mpr-xp-story > .mpr-faqs:first-child { margin-top: 0; }
.mpr-event .mpr-faq,
.mpr-event .mpr-faq:last-child { margin: 0 0 8px; padding: 0; background: var(--ev-3); }
.mpr-event .mpr-faq summary { min-height: 48px; align-items: center; padding: 12px 18px; font-size: 16px; font-weight: 600; box-sizing: border-box; }
.mpr-event .mpr-faq summary::after,
.mpr-event .mpr-faq summary:hover { color: #fff; }
.mpr-event .mpr-faq-answer { padding: 0 18px 18px; }

/* The essentials: one card, the facts under their own words, the action again. */
.mpr-event .mpr-essentials {
	min-width: 0;
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--ev-3);
	box-sizing: border-box;
}
.mpr-event .mpr-essentials-facts { display: grid; gap: 14px; margin: 0; padding: 0; }
.mpr-event .mpr-essentials-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; margin: 0; }
.mpr-event .mpr-essentials-facts dt { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ev-dim); }
.mpr-event .mpr-essentials-facts dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: #fff; overflow-wrap: anywhere; }
.mpr-event .mpr-essentials .mpr-btn,
.mpr-event .mpr-essentials .mpr-cta-words { display: flex; justify-content: center; width: 100%; margin-top: 22px; }
.mpr-event .mpr-essentials > .mpr-btn:first-child,
.mpr-event .mpr-essentials > .mpr-cta-words:first-child { margin-top: 0; }
.mpr-event .mpr-essentials .mpr-cta-words { background: var(--ev-btn); }
.mpr-event .mpr-essentials-seller { margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--ev-dim); text-align: center; }

@media (min-width: 900px) {
	.mpr-event .mpr-xp-grid {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
		gap: clamp(36px, 5vw, 72px);
		align-items: start;
	}
}

/* The cast: a strip of portraits that scrolls sideways. A list that overflows, nothing more. */
.mpr-event .mpr-event-cast { margin-top: clamp(36px, 5vw, 64px); }
.mpr-event .mpr-experience .mpr-chapter-inner > .mpr-event-heading + .mpr-event-cast { margin-top: 0; }

.mpr-event .mpr-cast-strip {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 4px 4px 16px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #3a3a3a transparent;
}
.mpr-event .mpr-cast-strip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mpr-event .mpr-cast-card { flex: 0 0 clamp(132px, 15vw, 176px); margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
.mpr-event .mpr-cast-strip .mpr-cast-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-height: 44px;
	text-align: left;
	text-decoration: none;
	color: #fff;
}
.mpr-event .mpr-cast-shot {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ev-3);
}
.mpr-event .mpr-cast-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mpr-event .mpr-cast-blank {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ev-face);
	font-size: 44px;
	font-weight: 700;
	color: #3a3a3a;
}
/* Somebody's name: Poppins, not the display face (the owner's rule). */
.mpr-event .mpr-cast-strip .mpr-cast-name {
	font-family: var(--ev-face);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	color: #fff;
	overflow-wrap: anywhere;
}
.mpr-event .mpr-cast-strip a.mpr-cast-link:hover .mpr-cast-name,
.mpr-event .mpr-cast-strip a.mpr-cast-link:focus-visible .mpr-cast-name { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.mpr-event .mpr-cast-strip .mpr-cast-members { margin: -4px 0 0; font-size: 13px; color: var(--ev-dim); opacity: 1; }
/* The lineup: what each person is, a line about them, and where to find them. No borders, no rounding. */
.mpr-event .mpr-cast-strip .mpr-cast-role { margin: -4px 0 0; font-size: 13px; color: var(--ev-dim); line-height: 1.3; }
.mpr-event .mpr-cast-strip .mpr-cast-bio { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ev-dim); }
.mpr-event .mpr-cast-strip .mpr-cast-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.mpr-event .mpr-cast-strip .mpr-cast-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 10px;
	background: var(--ev-3);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.mpr-event .mpr-cast-strip .mpr-cast-links a:hover,
.mpr-event .mpr-cast-strip .mpr-cast-links a:focus-visible { background: var(--mp-red); }

/* ── Sponsors ────────────────────────────────────────────────────────── */

.mpr-event .mpr-event-section { padding: clamp(28px, 4vw, 48px) var(--ev-pad); }

/* ── Chapter three: the venue ────────────────────────────────────────── */

.mpr-event .mpr-venue {
	position: relative;
	background: linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
}

.mpr-event .mpr-venue-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 3vw, 40px);
	background: var(--ev-1);
	box-sizing: border-box;
}
.mpr-event .mpr-venue-card.has-no-shot { background: var(--ev-0); }
.mpr-event .mpr-venue-card .mpr-event-heading { margin: 0 0 4px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ev-dim); }

.mpr-event .mpr-venue-mark { display: block; align-self: flex-start; width: auto; height: auto; max-width: 140px; max-height: 72px; object-fit: contain; }

.mpr-event .mpr-venue-name {
	margin: 0;
	padding: 0;
	font-family: var(--ev-face);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: #fff;
}
.mpr-event .mpr-venue-address { margin: -6px 0 0; padding: 0; font-size: 16px; line-height: 1.5; color: var(--ev-soft); }
.mpr-event .mpr-venue-secret { margin: 0; padding: 12px 14px; background: var(--ev-3); font-size: 15px; line-height: 1.5; color: #fff; }

.mpr-event .mpr-venue-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
}
.mpr-event .mpr-venue-fact { margin: 0; padding: 12px 14px; background: var(--ev-3); }
.mpr-event .mpr-venue-fact dt { margin: 0 0 2px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ev-dim); }
.mpr-event .mpr-venue-fact dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: #fff; overflow-wrap: anywhere; }

.mpr-event .mpr-venue-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; }
.mpr-event .mpr-venue-links .mpr-btn { flex: 1 1 150px; width: auto; }

/* With a photograph: it runs the width of the page and the panel sits over it at one side. */
.mpr-event .mpr-venue.has-photo { padding: 0; background: var(--ev-0); }
.mpr-event .mpr-venue-photo { height: clamp(200px, 56vw, 300px); overflow: hidden; }
.mpr-event .mpr-venue-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mpr-event .mpr-venue.has-photo .mpr-chapter-inner { padding: 0; }

@media (min-width: 900px) {
	.mpr-event .mpr-venue.has-photo { display: flex; align-items: center; min-height: clamp(460px, 44vw, 640px); }
	.mpr-event .mpr-venue-photo { position: absolute; inset: 0; height: auto; }
	.mpr-event .mpr-venue-photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .3) 52%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 32%);
	}
	.mpr-event .mpr-venue.has-photo .mpr-chapter-inner {
		position: relative;
		width: 100%;
		padding: clamp(40px, 5vw, 72px) var(--ev-pad);
	}
	.mpr-event .mpr-venue.has-photo .mpr-venue-card { width: min(100%, 470px); }

	/* No photograph: the panel alone, wide, with the three answers side by side. */
	.mpr-event .mpr-venue-card.has-no-shot .mpr-venue-facts { grid-template-columns: repeat(auto-fit, minmax(200px, 340px)); }
	.mpr-event .mpr-venue-card.has-no-shot .mpr-venue-links .mpr-btn { flex: 0 0 auto; }
}

/* ── Photos ──────────────────────────────────────────────────────────── */

.mpr-event .mpr-event-photos { padding-top: 0; }
.mpr-event .mpr-venue + .mpr-event-photos { padding-top: var(--ev-gap); }
.mpr-event .mpr-event-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mpr-event .mpr-event-gallery a { display: block; }
.mpr-event .mpr-event-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mpr-event .mpr-event-photos-share { margin: 18px 0 0; padding: 0; }

/* ── The closing band: one quiet line, the same action, the share icons ─ */

.mpr-event .mpr-closing {
	background:
		radial-gradient(70% 220% at 0% 50%, rgba(120, 0, 0, .6), transparent 62%),
		#121212;
}
.mpr-event .mpr-closing-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 32px;
	max-width: var(--mpr-event-width, 1200px);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 36px) var(--ev-pad);
}
.mpr-event .mpr-closing-line { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; }
.mpr-event .mpr-closing-line b { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; line-height: 1.35; color: #fff; }
.mpr-event .mpr-closing-line span { font-size: 15px; color: var(--ev-soft); }
.mpr-event .mpr-closing-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.mpr-event .mpr-closing-line .mpr-closing-state { font-size: 16px; font-weight: 600; color: #fff; }
.mpr-event .mpr-closing-line .mpr-closing-state:first-child { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; }
.mpr-event .mpr-closing .mso-event-social { flex: none; }

/* ── More events ─────────────────────────────────────────────────────── */

.mpr-event .mpr-event-related { padding-top: var(--ev-gap); }
.mpr-event .mpr-related-card { background: var(--ev-2); }
.mpr-event .mpr-related-title { text-transform: none; font-weight: 600; }
.mpr-event .mpr-nav-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0; text-transform: none; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.mpr-event .mpr-nav-all:hover { color: #fff; }

/* ── The ticket bar on a phone ───────────────────────────────────────── */

.mpr-event .mpr-stickybuy { background: #0d0d0d; }

@media (max-width: 767px) {
	.mpr-event { --ev-pad: 16px; }

	.mpr-event .mpr-poster-inner,
	.mpr-event .mpr-poster.has-art .mpr-poster-inner { padding: 16px var(--ev-pad) 32px; gap: 18px; }
	/* The poster leads on a phone, but not so tall that the title and the button fall off the first screen. */
	.mpr-event .mpr-poster-art img { max-height: 38vh; background: transparent; box-shadow: none; }

	.mpr-event .mpr-poster-actions { flex-direction: column; align-items: stretch; }
	.mpr-event .mpr-btn-big,
	.mpr-event .mpr-poster-actions .mpr-cta-words { width: 100%; justify-content: center; }
	.mpr-event .mpr-btn-big { padding: 0 20px; }
	.mpr-event .mpr-cta-note { justify-content: center; }

	.mpr-event .mpr-venue-links .mpr-btn { flex: 1 1 100%; }

	.mpr-event .mpr-closing-inner { flex-direction: column; align-items: stretch; gap: 16px; }
	.mpr-event .mpr-closing-line { flex: none; }
	.mpr-event .mpr-closing-action { flex-direction: column; align-items: stretch; }

	.mpr-event .mpr-stickybuy .mpr-btn { min-height: 48px; padding: 8px 18px !important; font-size: 19px; text-transform: none; white-space: nowrap; }
	/* Room for the bar, so it never sits on top of the last thing on the page. */
	.mpr-event:has(.mpr-stickybuy) { padding-bottom: 76px; }
	/* The site footer sits outside the page body, so the bar covered its logo. Room is made once the bar is actually showing. */
	body:has(.mpr-stickybuy:not([hidden])) { padding-bottom: 76px; }
}

@media (max-width: 380px) {
	.mpr-event .mpr-essentials-facts > div { grid-template-columns: 72px minmax(0, 1fr); }
	.mpr-event .mpr-cast-card { flex-basis: 124px; }
}