/**
 * VIP booking page.
 *
 * Palette taken from the site itself rather than invented: the dusty rose is sampled
 * from pinkwall.jpg on the homepage (average #BB9E99), and the purple is #3C2078, which
 * the child theme already uses for event titles and button hovers. Type is
 * mendl-sans-dawn, the site's face, with Style Your Lipstick as the display accent —
 * both already loaded sitewide, so nothing new is fetched.
 */

.vipx {
	/* Full-bleed out of the theme's constrained content column. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(2.75rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
	background: linear-gradient(180deg, #cbb2ad 0%, #bb9e99 58%, #b09290 100%);
	color: #2b1b3f;
	font-family: 'mendl-sans-dawn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	overflow: hidden;
}

.vipx__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- heading */

.vipx-head {
	text-align: center;
	margin: 0 0 clamp(1.05rem, 2.1vw, 1.575rem);
}

.vipx-head__eyebrow {
	margin: 0 0 .35rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #3c2078;
	opacity: .85;
}

.vipx-head__title {
	margin: 0;
	font-family: 'Style Your Lipstick', 'mendl-sans-dawn', cursive;
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	line-height: 1.05;
	color: #3c2078;
}

.vipx-head__meta {
	margin: .6rem 0 0;
	font-size: 1rem;
	color: #43304f;
	opacity: .9;
}

.vipx-subhead {
	margin: 2.5rem 0 1rem;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #3c2078;
}

/* The first subhead follows the page header, which brings its own bottom margin — the
   full 2.5rem on top of that opens a gap that reads as a missing section.

   Must come AFTER .vipx-subhead: both are single-class selectors, so specificity is
   equal and the later rule wins. Above it, the shorthand `margin` would overwrite this. */
.vipx-subhead--first {
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------- disclaimer */

.vipx-alert {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	max-width: 780px;
	/* Below the cards now, so the spacing flips to the top. */
	margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
	padding: 1.15rem 1.35rem;
	background: #fffdfc;
	border-left: 5px solid #3c2078;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(43, 27, 63, .16);
}

.vipx-alert__mark {
	flex: 0 0 auto;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	background: #3c2078;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.65rem;
	text-align: center;
}

.vipx-alert__body { flex: 1 1 auto; }

.vipx-alert__text {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: #2b1b3f;
}

.vipx-alert__note {
	margin: .5rem 0 0;
	font-size: .9375rem;
	color: #6a5a78;
}

.vipx-alert__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
	font-size: .9375rem;
	font-weight: 600;
	color: #3c2078;
	text-decoration: none;
	border-bottom: 2px solid rgba(60, 32, 120, .28);
	transition: border-color .18s ease, gap .18s ease;
}

.vipx-alert__link:hover,
.vipx-alert__link:focus-visible {
	border-bottom-color: #3c2078;
	gap: .65rem;
}

.vipx-alert__arrow { transition: transform .18s ease; }
.vipx-alert__link:hover .vipx-alert__arrow { transform: translateX(2px); }

/* ---------------------------------------------------------------- cards */

.vipx-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	align-items: stretch;
}

/* Keep a lone card from stretching the full width and looking stranded. */
.vipx-grid--1 { max-width: 420px; margin: 0 auto; }
.vipx-grid--2 { max-width: 840px; margin: 0 auto; }

.vipx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fffdfc;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(43, 27, 63, .18);
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

.vipx-card__edge {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #3c2078, #6a3fb5);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}

.vipx-card:hover,
.vipx-card:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 22px 44px rgba(43, 27, 63, .28);
}

.vipx-card:hover .vipx-card__edge,
.vipx-card:focus-within .vipx-card__edge {
	transform: scaleX(1);
}

.vipx-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e8ded9;
}

.vipx-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.vipx-card:hover .vipx-card__media img { transform: scale(1.05); }

.vipx-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.5rem 1.5rem 1.65rem;
}

.vipx-card__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #3c2078;
}

.vipx-card__blurb {
	margin: .45rem 0 0;
	font-size: .9688rem;
	line-height: 1.5;
	color: #5b4a68;
}

.vipx-card__price {
	margin: .9rem 0 1rem;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	color: #2b1b3f;
}

.vipx-card__includes {
	margin: 0 0 1.35rem;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.vipx-card__includes li {
	position: relative;
	padding: 0 0 0 1.6rem;
	margin: 0 0 .5rem;
	font-size: .9688rem;
	line-height: 1.45;
	color: #40304d;
}

.vipx-card__includes li::before {
	content: '';
	position: absolute;
	left: .25rem;
	top: .52em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: #bb9e99;
	box-shadow: 0 0 0 3px rgba(187, 158, 153, .28);
}

.vipx-card__cta { margin-top: auto; }

.vipx-card__left {
	margin: .7rem 0 0;
	font-size: .8438rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #a8443f;
}

/* The Stripe plugin renders its own button; make it belong to this page. */
.vipx-card__cta .asp_product_buy_btn,
.vipx-card__cta .stripe-button-el,
.vipx-card__cta input[type="submit"],
.vipx-card__cta button {
	display: block;
	width: 100%;
	padding: .85rem 1.2rem;
	background: #3c2078;
	border: 2px solid #3c2078;
	border-radius: 999px;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vipx-card__cta .asp_product_buy_btn:hover,
.vipx-card__cta .stripe-button-el:hover,
.vipx-card__cta input[type="submit"]:hover,
.vipx-card__cta button:hover {
	background: #2c1759;
	border-color: #2c1759;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(43, 27, 63, .3);
}

.vipx-btn {
	display: block;
	width: 100%;
	padding: .85rem 1.2rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
}

/* Sold out is LOUD (the owner's rule, 2026-09-02): bold, solid red, full
   contrast — a piece of news, never the faded neutral it used to be. */
.vipx-btn--out {
	background: #c8102e;
	color: #ffffff;
	border: 2px solid #c8102e;
	font-weight: 700;
	cursor: not-allowed;
}

/* Waiting to open — the accent colour, not the grey of sold out.
   Sold out is a dead end and looks like one; this is an invitation to come back, so it
   keeps the card's own colour and full contrast. */
.vipx-btn--soon {
	background: #f3eefc;
	color: #3c2078;
	border: 2px solid #d9cdf0;
	cursor: default;
}

/* The card quiets down through its greyed photo alone — a whole-card opacity
   would also dim the solid-red Sold Out button, which must stay loud. */
.vipx-card.is-sold-out:hover { transform: none; box-shadow: 0 12px 30px rgba(43, 27, 63, .18); }
.vipx-card.is-sold-out .vipx-card__media img { filter: grayscale(.55); }

/* ---------------------------------------------------------------- chooser */

.vipx-choose {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.vipx-choose__item { margin: 0 0 .75rem; }

.vipx-choose__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.35rem;
	background: #fffdfc;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(43, 27, 63, .14);
	text-decoration: none;
	color: #2b1b3f;
	transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}

.vipx-choose__link:hover,
.vipx-choose__link:focus-visible {
	transform: translateX(5px);
	box-shadow: 0 14px 30px rgba(43, 27, 63, .24);
}

.vipx-choose__main { flex: 1 1 auto; }

.vipx-choose__title {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	color: #3c2078;
}

.vipx-choose__meta {
	display: block;
	margin-top: .15rem;
	font-size: .9062rem;
	color: #6a5a78;
}

.vipx-choose__arrow {
	font-size: 1.35rem;
	color: #3c2078;
	transition: transform .22s ease;
}

.vipx-choose__link:hover .vipx-choose__arrow { transform: translateX(4px); }

.vipx-choose__badge {
	padding: .3rem .7rem;
	border-radius: 999px;
	background: #efe8e6;
	color: #8a7b84;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vipx-empty {
	max-width: 620px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	text-align: center;
	background: rgba(255, 253, 252, .72);
	border-radius: 12px;
	font-size: 1.0625rem;
	color: #4b3a58;
}

/* ---------------------------------------------------------------- footer note */

.vipx-foot {
	max-width: 780px;
	margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
	text-align: center;
	font-size: .9062rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #43304f;
	opacity: .92;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.vipx-card,
	.vipx-card__edge,
	.vipx-card__media img,
	.vipx-choose__link,
	.vipx-choose__arrow,
	.vipx-alert__link,
	.vipx-alert__arrow,
	.vipx-card__cta .asp_product_buy_btn,
	.vipx-card__cta button {
		transition: none !important;
	}
	.vipx-card:hover,
	.vipx-choose__link:hover { transform: none; }
	.vipx-card:hover .vipx-card__media img { transform: none; }
}

@media (max-width: 600px) {
	.vipx { border-radius: 0; }
	.vipx-alert { flex-direction: column; gap: .65rem; }
}

/* ==========================================================================
   Page-level treatment.

   The dark background is `body { background-color: #0a1520 }` in the child theme —
   NOT a content wrapper, which is what an earlier attempt guessed at and painted to
   no effect. So the page opened dark, turned pink where our band began, and went
   dark again below it. Recolour the body on this page and let the band go
   transparent, and the whole page reads as one surface.
   ========================================================================== */

/*
 * The page keeps the site's dark background down to the headline; the pink begins
 * at the VIP panel and runs to the end of it. So the body is left alone and the
 * band paints itself again, full-bleed.
 */
body.vex-vip-page .content,
body.vex-vip-page .content-modern,
body.vex-vip-page .article {
	background: transparent;
}

body.vex-vip-page .vipx {
	background: linear-gradient(180deg, #cbb2ad 0%, #bb9e99 58%, #b09290 100%);
	padding-top: .5rem;
}

/* The theme's header sits OVER the content rather than above it, which is why it
   reserves so much room at the top. Removing that space entirely ran the intro copy
   underneath the logo and nav; trimming it too far left them still touching. Clear
   the header properly — just not by the near-empty screen the theme leaves. */
body.vex-vip-page .content {
	padding-top: 0;
	/* The theme leaves a deep run of background below the content. With the panel
	   ending in its own colour there is nothing to show there, so close the gap and
	   let the dark return only for the footer. */
	padding-bottom: 0;
	margin-bottom: 0;
}

body.vex-vip-page .content > .container:last-child,
body.vex-vip-page .article {
	padding-bottom: 0;
	margin-bottom: 0;
}

body.vex-vip-page .vipx {
	margin-bottom: 0;
}

@media (max-width: 782px) {
	body.vex-vip-page .content {
		padding-top: clamp(3rem, 11vw, 4.5rem);
	}
}

/* ==========================================================================
   The page's own copy.

   The intro and closing paragraphs are written in the editor, so they arrived with
   the theme's default treatment: small, full-bleed across the whole window, ragged
   left, and visually unrelated to the panel beneath them. Give them the same
   measure and centring as the rest of the page so they read as the opening of this
   design rather than text left over above it.
   ========================================================================== */

body.vex-vip-page .content p {
	max-width: 74rem;
	margin-top: 0;
	margin-bottom: .7rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: clamp(.9375rem, 1vw, 1rem);
	line-height: 1.65;
}

body.vex-vip-page .content p:first-of-type {
	font-size: clamp(1rem, 1.1vw, 1.0625rem);
	line-height: 1.6;
}

/* Anything inside our own panel keeps the treatment it was designed with. */
body.vex-vip-page .content .vipx p {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	font-size: inherit;
	line-height: inherit;
}

body.vex-vip-page .content .vipx .vipx-card__blurb,
body.vex-vip-page .content .vipx .vipx-card__price,
body.vex-vip-page .content .vipx .vipx-card__left,
body.vex-vip-page .content .vipx .vipx-alert__text,
body.vex-vip-page .content .vipx .vipx-alert__note {
	text-align: left;
}

body.vex-vip-page .content .vipx .vipx-card__blurb {
	font-size: .9688rem;
	line-height: 1.5;
	color: #5b4a68;
}

body.vex-vip-page .content .vipx .vipx-card__price {
	font-size: 2.25rem;
	line-height: 1;
	color: #2b1b3f;
}

body.vex-vip-page .content .vipx .vipx-head__meta,
body.vex-vip-page .content .vipx .vipx-head__eyebrow,
body.vex-vip-page .content .vipx .vipx-foot {
	text-align: center;
}

/* ==========================================================================
   The Stripe button.

   Its label is wrapped in a span — `<button class="asp_product_buy_btn blue">
   <span>Book</span></button>` — so colouring the button alone left the text the
   site's teal link colour, pale cyan on our purple fill. The child theme does
   whiten that span, but only on the product's own page, which is not this one.
   ========================================================================== */

.vipx-card__cta .asp_product_buy_btn,
.vipx-card__cta .asp_product_buy_btn span,
.vipx-card__cta button,
.vipx-card__cta button span,
.vipx-card__cta a,
.vipx-card__cta a span,
.vipx-card__cta input[type="submit"] {
	color: #ffffff !important;
	text-shadow: none !important;
	-webkit-text-fill-color: #ffffff;
}

.vipx-card__cta .asp_product_buy_btn,
.vipx-card__cta button,
.vipx-card__cta a {
	display: block;
	width: 100%;
	padding: .9rem 1.2rem;
	background: #3c2078;
	border: 2px solid #3c2078;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vipx-card__cta .asp_product_buy_btn:hover,
.vipx-card__cta button:hover,
.vipx-card__cta a:hover {
	background: #2c1759;
	border-color: #2c1759;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(43, 27, 63, .32);
}

.vipx-card__cta .asp_product_buy_button,
.vipx-card__cta form,
.vipx-card__cta > div {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* ==========================================================================
   Type.

   The site face renders capital S as a stylised form, so uppercasing turns
   "SILVER" into something closer to "ʃILVER" and "PLACES" into "PLACE/". Let these
   sit in their natural case instead; the weight and letterspacing still carry the
   emphasis. The eyebrow keeps its uppercase — no S in it.
   ========================================================================== */

.vipx-card__name {
	text-transform: none;
	letter-spacing: .01em;
	font-size: 1.6rem;
}

.vipx-card__left {
	text-transform: none;
	letter-spacing: .01em;
	font-size: .9062rem;
}

.vipx-btn,
.vipx-choose__badge {
	text-transform: none;
	letter-spacing: .02em;
}

.vipx-card__cta .asp_product_buy_btn,
.vipx-card__cta button,
.vipx-card__cta a {
	text-transform: none;
	letter-spacing: .04em;
}

/* ==========================================================================
   The panel rising over the intro.

   The grouped intro pins itself just below the header while the panel, which comes
   after it in the flow and sits above it, scrolls up and covers it. The panel's
   fill has to be fully opaque for this to read as a cover rather than a blend.
   ========================================================================== */

body.vipx-has-intro .vipx-intro {
	/*
	 * Not sticky: the theme scrolls the page with a transform, which cancels it. The
	 * script translates this element instead, and reads the hold distance from here so
	 * the value stays with the rest of the layout.
	 */
	--vipx-pin-top: 110px;
	position: relative;
	z-index: 1;
	will-change: transform;
}

@media (max-width: 782px) {
	body.vipx-has-intro .vipx-intro {
		--vipx-pin-top: 70px;
	}
}

body.vipx-has-intro .vipx {
	position: relative;
	z-index: 2;
}

/*
 * NOTE: an earlier version forced overflow: visible on these wrappers, because
 * position: sticky is cancelled by any ancestor that clips. That approach was
 * abandoned for the manual translate above, and the override was left behind — it
 * let the panel's full-bleed width escape its container, widening the whole document
 * and dragging the footer off the right-hand edge with it. Do not reinstate it.
 */

/* Someone who has asked for less motion still gets the page, just without the
   overlap — the panel simply follows the copy. */
@media (prefers-reduced-motion: reduce) {
	body.vipx-has-intro .vipx-intro {
		transform: none !important;
	}
}

/* ==========================================================================
   The gap above the footer.

   This was never the footer. The wrapper the theme puts round page content,
   .page-content, carries a 60px bottom margin, and .content adds its own padding
   below that — together they opened a deep band of page background between the
   panel and the footer buttons.

   An earlier attempt flattened the footer's own columns instead, which cost some of
   its contents. The footer is left exactly as the theme has it everywhere else.
   ========================================================================== */

body.vex-vip-page .page-content {
	margin-bottom: 0;
}

/*
 * The footer's own box was worth trimming too — just not the way it was done before.
 * .footer__inner carries a 120px minimum height regardless of what is in it, and the
 * footer adds padding around that. Removing both brings the band down to its contents.
 *
 * What is NOT touched: the columns inside (.footer__left / __center / __right and
 * their inners) and the scroll-top control. Flattening those is what cost the footer
 * some of its contents last time. Their spacing is the theme's, and it stays.
 */
body.vex-vip-page #footer {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
}

body.vex-vip-page #footer .footer__inner {
	min-height: 0;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

/* ==========================================================================
   Disclaimer: keep the ticket link on the same line as the sentence.

   Both run as inline content rather than as a flex row, so that on a narrow window
   the link drops to its own line naturally instead of being squeezed against the
   text. The box widens a little to give the two room to sit together.
   ========================================================================== */

.vipx-alert {
	max-width: 1000px;
}

.vipx-alert__text {
	display: inline;
}

.vipx-alert__link {
	display: inline-flex;
	margin-top: 0;
	margin-left: .75rem;
	vertical-align: baseline;
}

.vipx-alert__note {
	display: inline;
	margin-left: .75rem;
}

/* ==========================================================================
   Book button: centre the label, and set it lowercase.

   The label sits in its own span, and the theme's generic button styling gives that
   span asymmetric spacing, which pushed the word left of centre inside the pill.
   Centre it explicitly with flex rather than relying on text-align, and clear the
   span's own spacing so nothing offsets it.

   Lowercase to match the site's own controls — the nav, "follow", "mailing list"
   and "scroll top" are all lowercase.
   ========================================================================== */

.vipx-card__cta .asp_product_buy_btn,
.vipx-card__cta button,
.vipx-card__cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 8.5rem;
	padding: .85rem 1.9rem;
	text-transform: lowercase;
	line-height: 1.1;
}

.vipx-card__cta .asp_product_buy_btn span,
.vipx-card__cta button span,
.vipx-card__cta a span {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: lowercase;
}

/* The sold-out label is not a real button, so it needs the same treatment. */
.vipx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 8.5rem;
	padding: .85rem 1.9rem;
	text-transform: lowercase;
}

/* ==========================================================================
   Button hover: invert.

   Site-wide convention — a button reverses its fill and its label on hover rather
   than just darkening. Default is the purple fill with a light label; hover swaps to
   the light fill with the purple label, the border holding the shape steady through
   the change so nothing shifts.

   These carry !important because the label colour is set that way above, to beat the
   theme's link styling on the span inside the button.
   ========================================================================== */

.vipx-card__cta .asp_product_buy_btn:hover,
.vipx-card__cta .asp_product_buy_btn:focus-visible,
.vipx-card__cta button:hover,
.vipx-card__cta button:focus-visible,
.vipx-card__cta a:hover,
.vipx-card__cta a:focus-visible {
	background: #fffdfc;
	border-color: #3c2078;
	color: #3c2078 !important;
	-webkit-text-fill-color: #3c2078;
}

.vipx-card__cta .asp_product_buy_btn:hover span,
.vipx-card__cta .asp_product_buy_btn:focus-visible span,
.vipx-card__cta button:hover span,
.vipx-card__cta button:focus-visible span,
.vipx-card__cta a:hover span,
.vipx-card__cta a:focus-visible span {
	color: #3c2078 !important;
	-webkit-text-fill-color: #3c2078;
}

/* The ticket link in the disclaimer is a button in spirit, so it inverts too. */
.vipx-alert__link:hover,
.vipx-alert__link:focus-visible {
	background: #3c2078;
	color: #fffdfc;
	border-bottom-color: transparent;
	border-radius: 999px;
	padding: .25rem .75rem;
	margin-left: .4rem;
}

/* ==========================================================================
   Confirmation before checkout.
   ========================================================================== */

.vipx-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

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

.vipx-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 32, .62);
	backdrop-filter: blur(2px);
}

.vipx-modal__card {
	position: relative;
	width: 100%;
	max-width: 520px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fffdfc;
	border-radius: 16px;
	border-top: 5px solid #3c2078;
	box-shadow: 0 26px 60px rgba(20, 12, 32, .45);
	font-family: 'mendl-sans-dawn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #2b1b3f;
	outline: none;
	animation: vipx-modal-in .22s cubic-bezier(.2, .7, .3, 1);
}

@keyframes vipx-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.vipx-modal__eyebrow {
	margin: 0 0 .25rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #7a6a88;
}

.vipx-modal__eyebrow:empty { display: none; }

.vipx-modal__title {
	margin: 0 0 .85rem;
	font-size: clamp(1.35rem, 2.4vw, 1.6rem);
	font-weight: 700;
	color: #3c2078;
}

.vipx-modal__body {
	margin: 0 0 .8rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #453250;
}

.vipx-modal__note {
	margin: 0 0 .8rem;
	font-size: .9375rem;
	color: #6a5a78;
}

.vipx-modal__tickets {
	display: inline-block;
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	font-weight: 600;
	color: #3c2078;
	text-decoration: none;
	border-bottom: 2px solid rgba(60, 32, 120, .3);
}

.vipx-modal__tickets:hover,
.vipx-modal__tickets:focus-visible {
	border-bottom-color: #3c2078;
}

.vipx-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin-top: .5rem;
}

.vipx-modal__confirm,
.vipx-modal__cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.vipx-modal__confirm {
	background: #3c2078;
	border: 2px solid #3c2078;
	color: #fffdfc;
}

/* Site-wide convention: buttons invert on hover. */
.vipx-modal__confirm:hover,
.vipx-modal__confirm:focus-visible {
	background: #fffdfc;
	color: #3c2078;
}

.vipx-modal__cancel {
	background: transparent;
	border: 2px solid rgba(60, 32, 120, .35);
	color: #3c2078;
}

.vipx-modal__cancel:hover,
.vipx-modal__cancel:focus-visible {
	background: #3c2078;
	border-color: #3c2078;
	color: #fffdfc;
}

body.vipx-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.vipx-modal__card { animation: none; }
}

/* Confirmation dialog: everything centred. */
.vipx-modal__card {
	text-align: center;
}

.vipx-modal__actions {
	justify-content: center;
}

/* ==========================================================================
   The dark band, and the lead copy's new home.

   The page's own copy now sits inside the panel, under the show heading, where it
   belongs. What remains above the panel is an empty spacer sized to sit behind the
   header — that is what gets pinned, so the panel still rides up over the dark band
   exactly as before.
   ========================================================================== */

/*
 * The page-title block is disabled on this page but still carries min-height: 100px,
 * reserving room for a title that is never drawn — the same species of leftover as
 * the margin on .page-content at the other end of the page.
 */
body.vex-vip-page .pt-disabled {
	min-height: 0;
}

body.vipx-has-intro .vipx-intro {
	min-height: clamp(9rem, 12vw, 10.75rem);
}

@media (max-width: 782px) {
	body.vipx-has-intro .vipx-intro {
		min-height: clamp(5rem, 16vw, 7rem);
	}
}

.vipx-lead {
	/* Wide enough that each paragraph holds one line at desktop widths. */
	max-width: 74rem;
	margin: 0 auto clamp(1.1rem, 2vw, 1.6rem);
}

.vipx-lead p {
	margin: 0;
	text-align: center;
	font-size: clamp(.9375rem, 1vw, 1rem);
	line-height: 1.4;
	color: #453250;
}

/* Yellow: the opening line carries the weight. */
.vipx-lead p:first-child {
	font-size: clamp(1rem, 1.1vw, 1.0625rem);
	font-weight: 600;
	color: #3a2a48;
}

/* Green: the qualifier reads as an aside. */
.vipx-lead p:first-child ~ p {
	font-style: italic;
}



/*
 * It is inside the panel now, so the page-level copy rules must not reach it. The
 * margin has to be reset at this specificity too: body.vex-vip-page .content p
 * outranks .vipx-lead p, so zeroing the margin there alone had no effect.
 */
body.vex-vip-page .content .vipx-lead p {
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
}

/* ==========================================================================
   Card depth.

   Two things were wrong before: the blur was roughly double the offset, which gives
   haze rather than an edge, and the shadow was tinted purple, which reads as glow.

   Here each layer's blur is about equal to its offset — that is what keeps an edge
   on the shadow — and they double in sequence so the darkness falls off naturally
   with distance. Neutral black, no tint.
   ========================================================================== */

.vipx-card {
	box-shadow:
		0 1px 1px rgba(0, 0, 0, .20),
		0 2px 2px rgba(0, 0, 0, .20),
		0 4px 4px rgba(0, 0, 0, .19),
		0 8px 8px rgba(0, 0, 0, .18),
		0 16px 16px rgba(0, 0, 0, .16),
		0 28px 26px rgba(0, 0, 0, .13);
}

.vipx-card:hover,
.vipx-card:focus-within {
	transform: translateY(-14px);
	box-shadow:
		0 2px 2px rgba(0, 0, 0, .22),
		0 4px 4px rgba(0, 0, 0, .21),
		0 8px 8px rgba(0, 0, 0, .20),
		0 16px 16px rgba(0, 0, 0, .19),
		0 32px 30px rgba(0, 0, 0, .17),
		0 52px 46px rgba(0, 0, 0, .15);
}

.vipx-card.is-sold-out:hover {
	transform: none;
	box-shadow:
		0 1px 1px rgba(0, 0, 0, .20),
		0 2px 2px rgba(0, 0, 0, .20),
		0 4px 4px rgba(0, 0, 0, .19),
		0 8px 8px rgba(0, 0, 0, .18),
		0 16px 16px rgba(0, 0, 0, .16),
		0 28px 26px rgba(0, 0, 0, .13);
}

/* The warning box lifts too, but less, so it stays subordinate to what is on sale. */
.vipx-alert {
	box-shadow:
		0 1px 1px rgba(0, 0, 0, .16),
		0 2px 2px rgba(0, 0, 0, .15),
		0 5px 5px rgba(0, 0, 0, .14),
		0 10px 10px rgba(0, 0, 0, .12),
		0 18px 18px rgba(0, 0, 0, .10);
}

/* The panel is deliberately wider than its container. Nothing should be able to turn
   that into horizontal page scroll. */
body.vex-vip-page .content,
body.vex-vip-page .page-content,
body.vex-vip-page .content > .container {
	overflow-x: clip;
}

/* A show that has not opened yet, on the chooser list.
   The accent colour rather than the muted grey of Sold out — one is "come back", the
   other is "too late", and they must not look alike. Placed last so it outranks the base
   badge rule, which is declared twice in this file at equal strength.

   🔴 Not uppercase, unlike the badges beside it. The site face draws a capital S as a
   stylised form, so "ON SALE" reads as "ON ʃALE". A two-word badge gets away with it; one
   carrying a date does not, and the date is easier to read in sentence case anyway. */
.vipx-choose__badge--soon {
	background: #f3eefc;
	color: #3c2078;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
}

/* ------------------------------------------------------------------ the waitlist
   The join button lives OUTSIDE .vipx-card__cta so the tickets dialog never catches
   it. It is the card's accent, inverted on hover like every button on the site. */
.vipx-card__wait { margin-top: 10px; }

.vipx-btn--wait {
	display: inline-block;
	width: 100%;
	padding: 12px 18px;
	border-radius: 3px;
	background: #ffffff;
	color: #3c2078;
	border: 2px solid #3c2078;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.vipx-btn--wait:hover,
.vipx-btn--wait:focus-visible { background: #3c2078; color: #ffffff; }

.vipx-wait__card { max-width: 480px; }
.vipx-wait__form { margin-top: 18px; }
.vipx-wait__row { display: flex; gap: 12px; }
.vipx-wait__row .vipx-wait__label { flex: 1 1 0; min-width: 0; }
.vipx-wait__label {
	display: block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(43, 27, 63, .7);
}
.vipx-wait__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid rgba(43, 27, 63, .3);
	border-radius: 3px;
	background: #fff;
	color: #2b1b3f;
	font: inherit;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
}
.vipx-wait__input:focus { outline: 2px solid #3c2078; outline-offset: 1px; }
.vipx-wait__hp { position: absolute; left: -9999px; top: -9999px; }
.vipx-wait__status { margin: 4px 0 0; min-height: 1.4em; font-size: 14px; color: rgba(43, 27, 63, .75); }
.vipx-wait__status.is-error { color: #a8443f; font-weight: 600; }
.vipx-wait__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.vipx-wait__submit,
.vipx-wait__cancel {
	padding: 12px 20px;
	border-radius: 3px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.vipx-wait__submit { background: #3c2078; color: #fff; border: 2px solid #3c2078; }
.vipx-wait__submit:hover,
.vipx-wait__submit:focus-visible { background: #fff; color: #3c2078; }
.vipx-wait__submit[disabled] { opacity: .6; cursor: progress; }
.vipx-wait__cancel { background: transparent; color: #3c2078; border: 2px solid transparent; }
.vipx-wait__cancel:hover,
.vipx-wait__cancel:focus-visible { border-color: #3c2078; }
.vipx-wait__done-line { font-size: 17px; font-weight: 700; color: #2b1b3f; margin: 16px 0 8px; }
.vipx-wait__done-note { font-size: 15px; line-height: 1.5; color: rgba(43, 27, 63, .75); margin: 0; }

@media (max-width: 480px) {
	.vipx-wait__row { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.vipx-btn--wait, .vipx-wait__submit, .vipx-wait__cancel { transition: none; }
}

/* ------------------------------------------------------------------ invitations */
.vipx-invite {
	margin: 18px auto 0;
	max-width: 620px;
	padding: 18px 22px;
	border-radius: 6px;
	background: #f3eefc;
	border: 2px solid #d9cdf0;
	color: #2b1b3f;
	text-align: center;
}
.vipx-invite--over { margin-top: 26px; text-align: left; }
.vipx-invite__title { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.vipx-invite__body { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: rgba(43, 27, 63, .85); }
.vipx-invite__body:last-child { margin-bottom: 0; }
.vipx-invite__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.vipx-invite__yes,
.vipx-invite__no {
	padding: 12px 22px;
	border-radius: 3px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.vipx-invite__yes { background: #3c2078; color: #fff; border: 2px solid #3c2078; text-decoration: none; display: inline-block; }
/* "Not going to take it?" on a live invitation — a plain link, the place is the point. */
.vipx-invite__pass a { color: #3c2078; font-weight: 700; text-decoration: underline; }
.vipx-invite__yes:hover, .vipx-invite__yes:focus-visible { background: #fff; color: #3c2078; }
.vipx-invite__no { background: transparent; color: #3c2078; border: 2px solid #3c2078; }
.vipx-invite__no:hover, .vipx-invite__no:focus-visible { background: #3c2078; color: #fff; }
.vipx-invite__yes[disabled], .vipx-invite__no[disabled] { opacity: .6; cursor: progress; }
.vipx-invite__status { margin: 12px 0 0; font-size: 15px; font-weight: 600; min-height: 1.4em; }
.vipx-invite__status:empty { display: none; }

/* Sold out on the chooser is as loud as it is on a card (the owner's rule: every
   sold-out control is solid red), and the waitlist link sits beside the row. */
.vipx-choose__item { display: flex; align-items: center; gap: 12px; }
.vipx-choose__item .vipx-choose__link { flex: 1 1 auto; min-width: 0; }
.vipx-choose__badge--out {
	background: #c8102e;
	color: #ffffff;
	border: 2px solid #c8102e;
	font-weight: 700;
	opacity: 1;
}
.vipx-choose__wait {
	flex: 0 0 auto;
	display: inline-block;
	padding: 12px 18px;
	border-radius: 3px;
	background: #ffffff;
	color: #3c2078;
	border: 2px solid #3c2078;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.vipx-choose__wait:hover,
.vipx-choose__wait:focus-visible { background: #3c2078; color: #ffffff; text-decoration: none; }
@media (max-width: 600px) {
	.vipx-choose__item { flex-wrap: wrap; }
	.vipx-choose__wait { width: 100%; text-align: center; }
}
/* "Add us to your contacts" on the you-are-on-the-list panel */
.vipx-wait__done-card { margin: 14px 0 0; font-size: 15px; }
.vipx-wait__card { display: inline-block; margin-top: 6px; padding: 10px 18px; border: 2px solid #3c2078; border-radius: 3px; color: #3c2078; font-weight: 700; text-decoration: none; }
.vipx-wait__card:hover, .vipx-wait__card:focus-visible { background: #3c2078; color: #fff; }