/* =========================================================
   Live pages: Experiences, the experience page, booking with
   ticket options, and Support POD.
   Loads last, after mlp-pages / mlp-event / mlp-about-2.
   ========================================================= */

/* -------------------- shared -------------------- */

/* Closing bands sit on the paper everywhere, not on a white panel. */
.mlp-cta-band {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
}

/* Inner-page titles share the home / About heading scale. */
.mlp-page-experiences .mlp-page-title,
.mlp-page-booking .mlp-page-title,
.mlp-page-support .mlp-page-title {
	font-size: clamp(40px, 8vh, 68px);
	line-height: 1.02;
}

/* -------------------- Experiences -------------------- */

.mlp-exp-hero { padding: 40px 0 34px; }
.mlp-exp-hero .mlp-page-title { margin: 0 0 20px; }

.mlp-exp-intro {
	font-family: var(--mlp-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--mlp-body);
	max-width: 58ch;
	margin: 0;
}

/* Event slides are 16:9; a 4:3 crop would cut the lettering. */
.mlp-event-media { aspect-ratio: 16 / 9; }

.mlp-empty[hidden] { display: none; }
.mlp-empty a { color: var(--mlp-cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------- the experience page -------------------- */

.mlp-event-head { max-width: 820px; padding: 14px 0 40px; }

.mlp-event-head .mlp-event-title { margin: 6px 0 10px; }

.mlp-event-subtitle {
	font-family: var(--mlp-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mlp-ink);
	margin: 0 0 18px;
}

.mlp-event-when {
	font-family: var(--mlp-font-body);
	font-size: 17px;
	font-weight: 500;
	color: var(--mlp-ink);
	margin: 0 0 8px;
}

.mlp-event-where {
	font-family: var(--mlp-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mlp-cobalt);
	margin: 0 0 22px;
}

.mlp-event-where a,
.mlp-event-where > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mlp-cobalt);
}

.mlp-event-where a span {
	border-bottom: 1px solid rgba(18, 56, 143, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.18s ease;
}

.mlp-event-where a:hover span,
.mlp-event-where a:focus-visible span { border-bottom-color: var(--mlp-cobalt); }

.mlp-pin { width: 17px; height: 17px; flex: 0 0 auto; }

.mlp-event-intro { max-width: 640px; margin: 0 auto; }
.mlp-event-intro p { font-size: 16px; }

.mlp-event-head .mlp-event-price {
	font-family: var(--mlp-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mlp-ink);
	margin: 16px 0 22px;
}

/* The story: the old "Time & location" panel, now on the paper. */
.mlp-event-story {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 20px 56px;
	align-items: start;
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
	padding: 44px 46px 40px;
	margin: 0 0 30px;
}

.mlp-story { grid-column: 1; }

.mlp-story h2,
.mlp-tickets h2,
.mlp-support-band h2 {
	font-family: var(--mlp-font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.12;
	color: var(--mlp-cobalt);
	margin: 0 0 14px;
}

.mlp-story h2:not(:first-child) { margin-top: 38px; }

.mlp-story h3 {
	font-family: var(--mlp-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mlp-ink);
	margin: 26px 0 10px;
}

.mlp-story p,
.mlp-story li {
	font-family: var(--mlp-font-body);
	font-size: 16px;
	line-height: 1.74;
	color: var(--mlp-body);
}

.mlp-story p { margin: 0 0 14px; }

.mlp-story ul {
	list-style: none;
	margin: 6px 0 16px;
	padding: 0;
}

.mlp-story li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 8px;
}

.mlp-story li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.82em;
	width: 11px;
	height: 3px;
	border-radius: 2px;
	background: var(--mlp-electric, #2F6BFF);
}

.mlp-story strong { color: var(--mlp-ink); font-weight: 600; }

.mlp-map-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mlp-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--mlp-cobalt);
	border: 1px solid rgba(18, 56, 143, 0.45);
	padding: 10px 18px;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.mlp-map-link:hover,
.mlp-map-link:focus-visible { background: rgba(18, 56, 143, 0.06); border-color: var(--mlp-cobalt); }

.mlp-story-thanks { font-style: italic; color: var(--mlp-muted) !important; }

/* Tickets ride beside the story on wide screens. */
.mlp-tickets {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: 90px;
	border: 1px solid rgba(30, 27, 22, 0.12);
	padding: 28px 28px 24px;
}

.mlp-ticket-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mlp-font-body);
	font-size: 15px;
	color: var(--mlp-body);
	margin: 0 0 4px;
}

.mlp-ticket-table th {
	font-family: var(--mlp-font-type);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mlp-muted);
	text-align: left;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--mlp-rule);
}

.mlp-ticket-table th:last-child,
.mlp-ticket-table td:last-child { text-align: right; }

.mlp-ticket-table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--mlp-rule);
}

.mlp-ticket-table td:last-child { font-weight: 600; color: var(--mlp-ink); white-space: nowrap; }

.mlp-story-actions {
	grid-column: 1;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 6px;
}

.mlp-event-story:not(:has(.mlp-tickets)) { grid-template-columns: minmax(0, 1fr); }

/* Can't attend? */
.mlp-support-band {
	text-align: center;
	border: 1px solid rgba(30, 27, 22, 0.12);
	padding: 42px 28px 44px;
	margin: 0 0 30px;
}

.mlp-support-band p:not(.mlp-eyebrow) {
	font-family: var(--mlp-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--mlp-body);
	max-width: 56ch;
	margin: 0 auto 22px;
}

/* -------------------- booking: ticket options -------------------- */

.mlp-page-booking .mlp-form-card,
.mlp-page-support .mlp-form-card {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
}

.mlp-page-booking .mlp-field input,
.mlp-page-booking .mlp-field textarea,
.mlp-page-support .mlp-field input,
.mlp-page-support .mlp-field textarea {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.3);
}

.mlp-page-booking .mlp-field input:focus,
.mlp-page-booking .mlp-field textarea:focus,
.mlp-page-support .mlp-field input:focus,
.mlp-page-support .mlp-field textarea:focus { border-color: var(--mlp-cobalt); }

.mlp-picker { background: transparent; }

.mlp-pick-group { margin: 0 0 14px; }

.mlp-pick-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 4px 14px;
}

.mlp-pick-head .mlp-pick-thumb { width: 96px; height: 54px; }

.mlp-pick.mlp-pick-option {
	grid-template-columns: minmax(0, 1fr) auto;
	background: transparent;
	border: 1px solid var(--mlp-rule);
	margin-bottom: 8px;
	padding: 12px 14px;
}

.mlp-pick.mlp-pick-option.is-chosen {
	border-color: rgba(18, 56, 143, 0.5);
	background: rgba(191, 228, 255, 0.18);
}

.mlp-pick-option .mlp-pick-title { margin-bottom: 1px; }

/* -------------------- Support POD -------------------- */

.mlp-support-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: start;
	padding: 18px 0 60px;
}

.mlp-support-head .mlp-page-title { margin: 0 0 18px; }

.mlp-support-lede {
	font-family: var(--mlp-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--mlp-ink);
	margin: 0 0 16px;
}

.mlp-support-note {
	font-family: var(--mlp-font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--mlp-muted);
	margin: 0 0 22px;
	max-width: 46ch;
}

.mlp-support-back {
	font-family: var(--mlp-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--mlp-cobalt);
}

.mlp-support-form { padding: 32px 32px 28px; }

.mlp-amounts { border: 0; padding: 0; margin: 0 0 22px; }

.mlp-amounts legend {
	font-family: var(--mlp-font-body);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mlp-ink);
	margin-bottom: 12px;
	padding: 0;
}

.mlp-amount-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 18px;
}

.mlp-chip { position: relative; cursor: pointer; }

.mlp-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.mlp-chip span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	font-family: var(--mlp-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--mlp-ink);
	border: 1.5px solid rgba(30, 27, 22, 0.24);
	border-radius: 999px;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mlp-chip:hover span { border-color: var(--mlp-cobalt); color: var(--mlp-cobalt); }
.mlp-chip input:checked + span { background: var(--mlp-cobalt); border-color: var(--mlp-cobalt); color: #fff; }
.mlp-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(18, 56, 143, 0.2); }

.mlp-amount-own { margin-bottom: 0; }

.mlp-amount-input { position: relative; }

.mlp-amount-input span {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--mlp-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--mlp-muted);
	pointer-events: none;
}

.mlp-page-support .mlp-amount-input input { padding-left: 52px; }

/* -------------------- responsive -------------------- */

@media (max-width: 1024px) {
	.mlp-event-story { grid-template-columns: minmax(0, 1fr); padding: 34px 30px 32px; }
	.mlp-story,
	.mlp-tickets,
	.mlp-story-actions { grid-column: 1; grid-row: auto; }
	.mlp-tickets { position: static; }
	.mlp-support-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 760px) {
	.mlp-exp-hero { padding: 26px 0 24px; }
	.mlp-exp-intro { font-size: 16px; }
	.mlp-filters { gap: 8px; margin-bottom: 26px; }
	.mlp-filter { padding: 10px 16px; font-size: 13px; }

	.mlp-event-subtitle { font-size: 13px; letter-spacing: 0.18em; }
	.mlp-event-when { font-size: 16px; }
	.mlp-event-where { font-size: 12px; letter-spacing: 0.1em; }
	.mlp-event-story { padding: 26px 18px 24px; gap: 18px; }
	.mlp-story h2:not(:first-child) { margin-top: 30px; }
	.mlp-tickets { padding: 22px 18px 18px; }
	.mlp-story-actions .mlp-btn { flex: 1 1 100%; justify-content: center; }
	.mlp-support-band { padding: 30px 18px 32px; }

	.mlp-support-form { padding: 24px 18px 22px; }
	.mlp-amount-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mlp-page-booking .mlp-field input,
	.mlp-page-booking .mlp-field textarea,
	.mlp-page-support .mlp-field input,
	.mlp-page-support .mlp-field textarea { font-size: 16px; }
}

/* Steppers sit on the paper like every other field. */
.mlp-stepper,
.mlp-step-input { background: transparent; }
.mlp-stepper { border-color: rgba(30, 27, 22, 0.3); }
.mlp-step-input { border-color: rgba(30, 27, 22, 0.2); }

/* -------------------- phones: sizes and touch -------------------- */

@media (max-width: 760px) {
	.mlp-page-experiences .mlp-page-title,
	.mlp-contact-2 .mlp-page-title,
	.mlp-page-booking .mlp-page-title,
	.mlp-page-support .mlp-page-title {
		font-size: clamp(34px, 10vw, 44px);
		line-height: 1.04;
	}

	.mlp-event-head .mlp-event-title { font-size: clamp(32px, 9vw, 40px); }

	/* Ticket options: name and price on the left, the stepper on the
	   right, one row each, so six options still read as a short list. */
	.mlp-picker { padding: 14px 10px 4px; }
	.mlp-pick-head { padding: 0 0 12px; }
	.mlp-pick-head .mlp-pick-thumb { width: 72px; height: 41px; }
	.mlp-pick.mlp-pick-option { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 10px 12px; }
	.mlp-pick.mlp-pick-option .mlp-stepper { grid-column: auto; justify-self: end; }
	.mlp-step-btn { width: 40px; height: 42px; }
	.mlp-step-input { height: 42px; font-size: 16px; } /* no zoom on focus */

	/* The dots stay small to look at but get a finger-sized target. */
	.mlp-slider-dots { gap: 16px; }
	.mlp-dot { position: relative; }
	.mlp-dot::after { content: ""; position: absolute; inset: -12px; }

	.mlp-steps { gap: 6px; }
	.mlp-steps li { padding: 5px 12px 5px 6px; font-size: 12px; }
}
/* ------------------------------------------ Stripe payment and confirmation */

.mlp-pay-lede {
	font-family: var(--mlp-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--mlp-body);
	margin: 0 0 22px;
}
.mlp-pay-form { margin: 0 0 18px; }
.mlp-pay-secure {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--mlp-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--mlp-muted);
	margin: 0;
}
.mlp-pay-secure svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--mlp-cobalt);
}
.mlp-pay-test {
	display: inline-block;
	margin: 16px 0 0;
	padding: 4px 10px;
	border: 1px dashed rgba(18, 56, 143, 0.35);
	font-family: var(--mlp-font-body);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--mlp-cobalt);
}
.mlp-pay-summary .mlp-sum-total,
.mlp-pay-summary .mlp-sum-who { font-family: var(--mlp-font-body); }
.mlp-pay-summary .mlp-sum-who {
	font-size: 13px;
	line-height: 1.66;
	color: var(--mlp-muted);
}
.mlp-confirm-card p {
	font-family: var(--mlp-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--mlp-body);
	margin: 0 0 14px;
}
.mlp-confirm-event {
	padding: 0 0 16px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--mlp-rule);
}
.mlp-confirm-event p { margin: 0 0 6px; }
.mlp-confirm-card .mlp-confirm-title {
	font-family: var(--mlp-font-display);
	font-size: 22px;
	line-height: 1.25;
	color: var(--mlp-ink);
	margin: 0 0 6px;
}
.mlp-confirm-card .mlp-event-where { margin: 8px 0 0; font-size: 12px; }
.mlp-confirm-card .mlp-cta-actions-inline { margin: 22px 0 0; }
.mlp-pay-card .mlp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* =========================================================
   Home: handwritten links on the collage
   The image sits in its own box so the links are placed in
   percentages of the picture itself at every width.
   ========================================================= */
.mlp-hero-figure {
	position: relative;
	width: 100%;
	max-width: 960px;
	line-height: 0;
}
.mlp-hero-figure .mlp-hero-image {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}
.mlp-hand-link {
	position: absolute;
	z-index: 3;
	display: block;
	line-height: 0;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}
.mlp-hand-link img {
	display: block;
	width: 100%;
	height: auto;
}
.mlp-hand-exp   { left: 33.3%; top: 58.4%; width: clamp(96px, 13.2%, 160px); }
.mlp-hand-about { left: 35.4%; top: 67.9%; width: clamp(91px, 12.4%, 150px); }
/* A slightly larger tap area than the writing itself. */
.mlp-hand-link::before {
	content: "";
	position: absolute;
	inset: -10px -8px;
}
.mlp-hand-link:hover { transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); }
.mlp-hand-link:focus-visible {
	outline: 2px solid var(--mlp-navy);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 1024px) {
	.mlp-hero-figure { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 640px) {
	.mlp-hero-figure { max-width: 560px; }
	.mlp-hand-exp   { left: 19.3%; top: 50.1%; width: 18.6%; }
	.mlp-hand-about { left: 22.9%; top: 66.8%; width: 17.4%; }
}
@media (max-width: 360px) {
	.mlp-hero-figure { max-width: 400px; }
}

/* =========================================================
   Home: the same paper as every other page
   Mirrors .mlp-page in mlp-pages.css: the grain tile, the
   paper photo across the first screen fading into it, and
   the torn corner at the same size.
   ========================================================= */
.mlp-hero-page .mlp-hero {
	isolation: isolate;
	background-color: var(--mlp-ivory, #F8F7F2);
	background-image: url('../images/paper-tile.webp?v=2');
	background-size: 1480px auto;
	background-position: left top;
	background-repeat: repeat;
}
.mlp-hero-page .mlp-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	background: url('../images/paper-bg.jpg?v=2') center center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
@media (max-width: 640px) {
	.mlp-hero-page .mlp-paper-accent { width: clamp(140px, 16vw, 260px); }
}

/* =========================================================
   Mobile menu button: just the three lines
   ========================================================= */
.mlp-nav-toggle {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}
.mlp-nav-toggle:focus { outline: none; }
.mlp-nav-toggle:focus-visible {
	outline: 2px solid var(--mlp-navy);
	outline-offset: 2px;
	border-radius: 6px;
}
.mlp-nav-toggle span,
.mlp-nav-toggle span::before,
.mlp-nav-toggle span::after { width: 24px; border-radius: 2px; }
.mlp-nav-toggle span::before { top: -7px; }
.mlp-nav-toggle span::after  { top: 7px; }