/**
 * Event Manager Pro - site design system.
 *
 * Product pattern: Ticketing / Box Office (event grid + seat map).
 * Style: Soft UI Evolution - real depth from layered soft shadows rather than
 * gradients, hairline borders kept for definition, motion used to explain
 * hierarchy rather than to decorate.
 *
 * Palette: red on a warm ground, from the 2026 reference. The ramp keeps its
 * historical `amber` variable names so components rebrand without being
 * rewritten; only the values changed. #EA021B is the fill (4.64:1 under
 * white), #A50008 is red as text, and #F9262A is display type at 24px and up
 * - plus small text on ink, where it measures 4.80:1.
 *
 * Type: Plus Jakarta Sans throughout. Weight carries the hierarchy; a second
 * family never does.
 *
 * Loaded after emp-frontend.css so the component custom properties declared
 * there resolve to these tokens.
 */

/* =====================================================================
 * 0. Document
 *
 * One family across the whole site, which is what the rebrand means. Astra
 * prints its own body rule inline in <head>, after this stylesheet, so a
 * bare `body` selector at (0,0,1) loses the tie on source order. `html body`
 * at (0,0,2) wins it. Without this, any plugin text that does not set its
 * own family - a status line, an inline notice - silently falls back to the
 * theme system stack while everything around it is Plus Jakarta Sans.
 * ===================================================================== */

html body {
	font-family: var(--emp-font);
}

/* =====================================================================
 * 1. Tokens
 * ===================================================================== */

:root {
	/* --- Brand ramp -------------------------------------------------
	 * Red, from the approved reference. The ramp keeps its historical
	 * variable names so every component that already referenced them
	 * rebrands without being rewritten; only the values changed.
	 *
	 * The reference ships #F9262A, which carries 3.81:1 on the ground and
	 * 3.93:1 under white. That fails AA at the 11px eyebrows and 14px
	 * buttons it is used on, so the working tone is deepened to #EA021B,
	 * which passes both and is visually near-identical. */
	--emp-amber-50: #fff4f1;   /* section tint                          */
	--emp-amber-100: #ffebe7;  /* chips, soft fills                     */
	--emp-amber-200: #ffc9bf;  /* borders on tinted ground              */
	--emp-amber-400: #ea021b;  /* the brand fill: 4.64:1 under white    */
	--emp-amber-500: #c50516;  /* pressed / hover fill: 6.16:1          */
	--emp-amber-800: #a50008;  /* red as TEXT: 7.82:1 on ground,
	                              7.03:1 on the chip tint               */
	--emp-red-display: #f9262a; /* display type 24px and up ONLY, and
	                              decorative fills. 3.81:1 is large-text
	                              AA and nothing smaller may use it.    */

	/* --- Gold: the secondary accent, for "selling fast" and prices ---- */
	--emp-gold: #f1ba4b;       /* ink on gold is 10.66:1                */
	--emp-gold-ink: #180f09;   /* WHITE on gold is 1.77:1 and is banned */

	/* --- Neutrals: warm, biased to sit under the red ----------------- */
	--emp-navy-900: #180f0d;   /* ink: 18.29:1 on the ground            */
	--emp-navy-800: #211816;
	--emp-navy-700: #1c1411;   /* footer ground                         */
	--emp-navy-600: #332723;   /* footer hairline                       */
	--emp-slate-600: #574a44;  /* muted text on tinted grounds, 7.41:1  */
	--emp-slate-500: #685a54;  /* muted text, 6.40:1 on the ground      */
	--emp-slate-400: #a99c94;  /* muted text ON ink, 6.80:1             */
	--emp-slate-300: #d6ccc2;  /* footer text on ink, 11.47:1           */
	--emp-slate-200: #e7ddd2;  /* borders                               */
	--emp-slate-100: #f0e6db;  /* chips, pressed                        */
	--emp-slate-50: #f8f2eb;   /* surface                               */

	/* --- Semantic status: never the sole carrier of meaning ----------
	 * Sold-out red and the brand red are close, so sold-out is always
	 * paired with the hatch pattern or the word, never left to hue. */
	--emp-green-600: #16a34a;  /* available / confirmed                 */
	--emp-green-700: #15803d;  /* the same meaning, as text             */
	--emp-green-50: #f0fdf4;
	--emp-red-600: #dc2626;    /* sold out / failed                     */
	--emp-red-700: #b91c1c;    /* the same meaning, as text             */
	--emp-red-50: #fef2f2;
	--emp-warn-600: #b45309;   /* holding / pending                     */

	/* --- Semantic aliases ------------------------------------------- */
	--emp-c-ink: var(--emp-navy-900);
	--emp-c-ink-soft: var(--emp-navy-800);
	--emp-c-muted: var(--emp-slate-500);
	--emp-c-line: var(--emp-slate-200);
	--emp-c-line-soft: var(--emp-slate-100);
	--emp-c-line-strong: var(--emp-slate-300);
	--emp-c-surface: var(--emp-slate-50);
	--emp-c-canvas: #ffffff;
	/* The page ground is a warm off-white, not white. Cards stay white so
	 * they still read as raised against it. */
	--emp-c-ground: #fefbf7;

	--emp-c-accent: var(--emp-amber-400);        /* fills only          */
	--emp-c-accent-dark: var(--emp-amber-500);   /* hover fill          */
	--emp-c-accent-text: var(--emp-amber-800);   /* red as text         */
	--emp-c-accent-soft: var(--emp-amber-50);
	--emp-c-accent-chip: var(--emp-amber-100);
	/* This REVERSES the retired amber rule. White on red is 4.64:1 and
	 * passes; ink on red is 3.69:1 and fails. Red surfaces carry white
	 * type, where amber surfaces carried dark type. */
	--emp-c-on-accent: #ffffff;

	/* Red as small text ON INK. The display tone is banned under 24px on a
	   light ground, where it carries 3.81:1, but the same tone against the
	   ink measures 4.80:1 and is the only red in the ramp that clears AA
	   there - the text red is 1.63:1 on ink and disappears. */
	--emp-c-accent-on-ink: var(--emp-red-display);

	--emp-c-footer: var(--emp-navy-700);
	--emp-c-footer-line: var(--emp-navy-600);
	--emp-c-footer-text: var(--emp-slate-300);

	/* --- Gradients ---------------------------------------------------
	 * Three, each with a job: the primary action, and two veils that let
	 * a title sit on any poster and stay legible. No decorative washes. */
	--emp-grad-accent: linear-gradient(100deg, #ea021b 0%, #f4501f 100%);
	/* Both veils hold near-full opacity through the whole text block and
	   only then fall away. The generated posters carry their own title in
	   pure white at that exact height, so a veil that fades across the
	   text leaves the artwork title ghosting behind the overlay one.
	   Measured: the band under the title reads luminance 255. */
	--emp-grad-veil: linear-gradient(to top, rgba(20, 12, 10, 0.96) 0%, rgba(20, 12, 10, 0.92) 30%, rgba(20, 12, 10, 0.5) 58%, rgba(20, 12, 10, 0.06) 86%);
	--emp-grad-card: linear-gradient(to top, rgba(20, 12, 10, 0.94) 0%, rgba(20, 12, 10, 0.88) 26%, rgba(20, 12, 10, 0.42) 60%, rgba(20, 12, 10, 0) 100%);

	/* --- Radii: one rule, applied everywhere -------------------------
	 * Controls are full pill, cards 16px, inputs 12px, media 20px. */
	--emp-r-xs: 8px;
	--emp-r-sm: 8px;
	--emp-r: 12px;
	--emp-r-lg: 16px;
	--emp-r-xl: 20px;
	--emp-r-pill: 999px;

	/* --- Elevation: two-layer, tinted with the warm ink hue ---------- */
	--emp-e-1: 0 1px 2px rgba(24, 15, 13, 0.06), 0 1px 3px rgba(24, 15, 13, 0.04);
	--emp-e-2: 0 4px 12px -2px rgba(24, 15, 13, 0.08), 0 2px 6px -2px rgba(24, 15, 13, 0.05);
	--emp-e-3: 0 12px 32px -8px rgba(24, 15, 13, 0.14), 0 4px 12px -4px rgba(24, 15, 13, 0.07);
	--emp-e-brand: 0 10px 24px -8px rgba(234, 2, 27, 0.4);
	--emp-shadow: var(--emp-e-1);
	--emp-shadow-lift: var(--emp-e-3);

	/* --- Type --------------------------------------------------------
	 * One family. The weight range carries the hierarchy, so there is no
	 * second face to fall back to or to keep in sync. */
	--emp-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--emp-font-display: var(--emp-font);

	/* Anchored in px, not rem. Astra sets the document root to about 14.6px,
	 * so a rem-based scale silently renders ~9% small, which pushed body
	 * copy under the 16px readability floor and 44px touch targets down to
	 * 40px. Absolute units keep the system honest whatever the theme does. */
	--emp-t-xs: 11px;
	--emp-t-sm: 13px;
	--emp-t-base: 16px;
	--emp-t-lg: 18px;
	--emp-t-xl: clamp(20px, 1.6vw, 22px);
	--emp-t-2xl: clamp(28px, 3vw, 36px);
	--emp-t-3xl: clamp(34px, 5vw, 56px);
	--emp-t-hero: clamp(44px, 7.8vw, 112px);

	/* --- Vertical rhythm ---------------------------------------------
	 * The page's spacing steps, not one value repeated. Each clamp lands
	 * on an 8px multiple at both ends, and the steps descend so proximity
	 * carries meaning: a heading sits nearer its own content than its
	 * section sits from the next one.
	 *
	 *   section      120px apart at desktop, 80px on a phone
	 *   head to body  32px
	 *   block gap     24px
	 */
	--emp-sec-y: clamp(40px, 4.2vw, 60px);
	--emp-sec-y-lead: clamp(32px, 3.4vw, 48px);
	--emp-head-gap: clamp(24px, 2.4vw, 32px);

	/* --- Space: 8px base -------------------------------------------- */
	--emp-s-1: 4px;
	--emp-s-2: 8px;
	--emp-s-3: 12px;
	--emp-s-4: 16px;
	--emp-s-5: 20px;
	--emp-s-6: 24px;
	--emp-s-7: 28px;   /* referenced since the seat map; never defined */
	--emp-s-8: 32px;
	--emp-s-10: 40px;
	--emp-s-12: 48px;
	--emp-s-16: 64px;
	--emp-section-y: clamp(64px, 8vw, 112px);
	--emp-block-gap: clamp(24px, 3vw, 48px);

	/* Shared measure for the signed-in customer area: My tickets and My
	 * account must line up with each other. */
	--emp-account-measure: 1040px;

	/* --- Touch targets: absolute floors, never scaled ---------------- */
	--emp-touch: 44px;
	--emp-touch-compact: 36px;

	/* --- Motion: 150-320ms, meaning-bearing ------------------------- */
	--emp-d-fast: 150ms;
	--emp-d: 220ms;
	--emp-d-slow: 320ms;
	--emp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--emp-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

	--emp-ring: 0 0 0 3px rgba(247, 150, 28, 0.45);
}

/* Repoint the component tokens declared in emp-frontend.css. Every block that
 * declares its own token scope must be listed, or it silently falls back to
 * the currentColor-derived defaults and drifts from the system. */
.emp-search,
.emp-tiles,
.emp-facts,
.emp-pills,
.emp-linklist,
.emp-eventlist,
.emp-details,
.emp-cards,
.emp-carousel,
.emp-tickets,
.emp-checkout,
.emp-confirmation,
.emp-staff,
.emp-scanner,
.emp-dashboard,
.emp-seatmap,
.emp-submit,
.emp-order,
.emp-form,
.emp-table {
	--emp-border: var(--emp-c-line);
	--emp-border-strong: var(--emp-c-line-strong);
	--emp-muted: var(--emp-c-muted);
	--emp-surface: var(--emp-c-surface);
	--emp-accent: var(--emp-c-accent);
	--emp-accent-soft: var(--emp-c-accent-chip);
	/* These two are used as text in emp-frontend.css (scanner verdicts,
	 * status pills), so they take the text-safe tones. */
	--emp-ok: var(--emp-green-700);
	--emp-bad: var(--emp-red-700);
	--emp-radius: var(--emp-r);
	--emp-gap: var(--emp-block-gap);
}

/* =====================================================================
 * 2. Typography
 * ===================================================================== */

.emp-card,
.emp-search,
.emp-tiles,
.emp-facts,
.emp-cards,
.emp-staff,
.emp-checkout,
.emp-confirmation,
.emp-tickets,
.emp-dashboard,
.emp-scanner,
.emp-seatmap,
.emp-submit,
.emp-eventlist,
.emp-header,
.emp-footer,
.emp-hero {
	font-family: var(--emp-font);
	font-feature-settings: "cv11", "ss01";
}

/* Astra's root size lands body copy at roughly 14.6px. These blocks are
 * reading surfaces — ticket terms, seat labels, checkout — so they are set
 * back to the 16px floor rather than inheriting it. */
.emp-card__body,
.emp-facts,
.emp-checkout,
.emp-confirmation,
.emp-tickets,
.emp-seatmap,
.emp-submit,
.emp-eventlist,
.emp-dashboard {
	font-size: var(--emp-t-base);
	line-height: 1.5;
}

.emp-section-title,
.emp-card__title,
.emp-hero__title,
.emp-submit__title,
.emp-checkout__title,
.emp-form__heading,
.emp-stat__value,
.emp-eventlist__title {
	font-family: var(--emp-font-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.emp-card__title {
	font-weight: 600;
	line-height: 1.25;
}

/* The date eyebrow is small type, so it takes the dark amber, not the fill. */
.emp-card__when {
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.emp-card__where,
.emp-card__organizer,
.emp-eventlist__meta {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

/* =====================================================================
 * 3. Buttons
 * ===================================================================== */

.emp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--emp-s-2);
	min-height: var(--emp-touch);
	padding: 10px 22px;
	border-radius: var(--emp-r-sm);
	font-family: var(--emp-font);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease),
		color var(--emp-d) var(--emp-ease),
		transform var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease);
}

/* Compact only where a mouse is driving: on touch it returns to the full
 * target, because a 36px control in a dense table row is a mis-tap waiting
 * to happen. */
.emp-button--small {
	min-height: var(--emp-touch-compact);
	padding: 6px 14px;
	font-size: var(--emp-t-sm);
}

@media (pointer: coarse) {
	.emp-button--small {
		min-height: var(--emp-touch);
	}
}

.emp-button--wide {
	width: 100%;
}

.emp-button--primary,
.emp-search__submit {
	border: 1px solid var(--emp-c-accent);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	box-shadow: var(--emp-e-1);
}

/* The hover fill stays under dark type as well: white on #ea580c is only
 * 3.56:1, while ink on it is 5.02:1. Amber never carries white text here. */
.emp-button--primary:hover,
.emp-button--primary:focus-visible,
.emp-search__submit:hover {
	border-color: var(--emp-c-accent-dark);
	background: var(--emp-c-accent-dark);
	color: var(--emp-c-on-accent);
	transform: translateY(-2px);
	box-shadow: var(--emp-e-brand);
}

.emp-button--primary:active {
	transform: translateY(0);
	box-shadow: var(--emp-e-1);
}

.emp-button:not(.emp-button--primary) {
	border: 1px solid var(--emp-c-line-strong);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
}

.emp-button:not(.emp-button--primary):hover {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	color: var(--emp-c-accent-text);
}

/* One visible focus treatment for every interactive element. */
.emp-button:focus-visible,
.emp-tile:focus-visible,
.emp-card a:focus-visible,
.emp-pills a:focus-visible,
.emp-seatmap__zoom:focus-visible,
.emp-carousel__btn:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
	box-shadow: var(--emp-ring);
}

/* =====================================================================
 * 4. Cards, tiles, pills
 * ===================================================================== */

.emp-cards {
	gap: var(--emp-block-gap);
}

/* ---------------------------------------------------------------------
 * The event card, in the home page's poster language.
 *
 * One component feeds three surfaces - the archive, the related row on a
 * single event, and the Elementor widget - so this block is the whole
 * site's card. It drops the white box it used to sit in: the poster is the
 * product, and card chrome around a poster only competes with it.
 *
 * The earlier version cropped the artwork to 16/9. Posters are portrait,
 * so that threw away more than half the image and sliced through the title
 * printed on the poster itself. It is 3/4 here, the same ratio the home
 * page grid uses.
 * ------------------------------------------------------------------- */

.emp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transition: none;
}

.emp-card:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}

.emp-card__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-ink);
	transition: transform 320ms var(--emp-ease);
}

.emp-card:hover .emp-card__media {
	transform: translateY(-4px);
}

.emp-card__media img,
.emp-card__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: none;
}

.emp-card:hover .emp-card__media img {
	transform: none;
}

/* Most posters carry their own printed title, so an overlay title needs a
   veil under it or the two read as one smear. This is the same gradient
   the home page posters use; it was strengthened after measuring the band
   beneath the text, where the contrast range fell from 232 to 18. */
.emp-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--emp-grad-card);
}

/* Astra declares `h1..h6 { color }` directly on the element, and an
   inherited white always loses to a direct declaration however specific
   the ancestor is, so the title has to name its own colour. */
.emp-card .emp-card__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 20px;
	color: #fff;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* A card drawn without a poster keeps its title in the body, on the page
   ground, so it takes ink rather than white. */
.emp-card .emp-card__title--plain {
	padding: 0 0 6px;
	color: var(--emp-c-ink);
}

.emp-card .emp-card__title--plain a {
	color: inherit;
}

.emp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0;
	padding: 14px 2px 0;
	background: none;
}

.emp-card__badge {
	top: 14px;
	right: 14px;
	padding: 6px 12px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: var(--emp-e-1);
}

/* The date chip moves to the top corner: the foot of the poster now holds
   the title. */
.emp-card__datebadge {
	top: 14px;
	right: auto;
	bottom: auto;
	left: 14px;
	z-index: 1;
	border-radius: var(--emp-r-sm);
	background: rgba(255, 255, 255, 0.92);
	color: var(--emp-c-ink);
	box-shadow: none;
}

.emp-card__day {
	font-family: var(--emp-font-display);
	font-weight: 800;
	line-height: 1;
}

.emp-card__month {
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.emp-card__when {
	margin: 0 0 6px;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.emp-card__where,
.emp-card__organizer {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: 15px;
	line-height: 1.45;
}

.emp-card__price {
	color: var(--emp-c-ink);
	font-size: var(--emp-t-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.emp-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emp-s-3);
	margin-top: auto;
	padding: 14px 0 0;
	border-top: 0;
}

/* The call to action is a red text link on the card, not a filled button:
   a grid of filled buttons turns the page into a wall of red and leaves
   the posters fighting for attention. */
.emp-card .emp-button--small {
	min-height: var(--emp-touch);
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.emp-card .emp-button--small:hover {
	background: none;
	color: var(--emp-c-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.emp-tile {
	border-radius: var(--emp-r);
	background: var(--emp-c-canvas);
	transition:
		transform var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease),
		background-color var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease);
}

.emp-tile:hover {
	transform: translateY(-4px);
	border-color: var(--emp-amber-200);
	background: var(--emp-c-accent-soft);
	box-shadow: var(--emp-e-2);
}

.emp-tile__name {
	font-weight: 600;
}

.emp-tile__count {
	color: var(--emp-c-muted);
}

.emp-pills a,
.emp-pill {
	border-radius: var(--emp-r-pill);
	font-size: var(--emp-t-sm);
	font-weight: 500;
	transition:
		background-color var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease),
		color var(--emp-d) var(--emp-ease);
}

.emp-pills a:hover {
	border-color: var(--emp-amber-200);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

/* Status pills pair colour with a word, so colour is never the only signal. */
.emp-pill--soldout,
.emp-status--soldout {
	background: var(--emp-red-50);
	color: var(--emp-red-700);
	border-color: rgba(220, 38, 38, 0.25);
}

.emp-pill--online {
	background: var(--emp-green-50);
	color: var(--emp-green-700);
	border-color: rgba(22, 163, 74, 0.25);
}

.emp-pill--past {
	background: var(--emp-c-surface);
	color: var(--emp-c-muted);
	border-color: var(--emp-c-line);
}

/* =====================================================================
 * 5. Search
 * ===================================================================== */

.emp-search {
	border-radius: var(--emp-r-xl);
	border-color: var(--emp-c-line);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
	transition: box-shadow var(--emp-d) var(--emp-ease);
}

.emp-search:focus-within {
	box-shadow: var(--emp-e-3);
}

.emp-search__submit {
	border-radius: var(--emp-r-pill);
	padding-inline: 1.6rem;
}

/* =====================================================================
 * 6. Header
 *
 * Targets Elementor's location wrapper rather than a custom class: Elementor
 * applies _css_classes to widgets but not to containers, so the wrapper is the
 * dependable hook.
 * ===================================================================== */

.elementor-location-header,
.emp-header {
	font-family: var(--emp-font);
	background: var(--emp-c-canvas);
}

.elementor-location-header > .e-con {
	transition:
		box-shadow var(--emp-d-slow) var(--emp-ease),
		padding var(--emp-d-slow) var(--emp-ease);
}

.elementor-location-header .elementor-sticky--effects {
	box-shadow: var(--emp-e-2);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}

.elementor-location-header .elementor-nav-menu .elementor-item {
	position: relative;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--emp-c-ink-soft);
	transition: color var(--emp-d) var(--emp-ease);
}

/* An underline that grows from the centre reads as "this is where you are"
 * without shifting the layout on hover. */
.elementor-location-header .elementor-nav-menu .elementor-item::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.35rem;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--emp-c-accent);
	transform: translateX(-50%);
	transition: width var(--emp-d) var(--emp-ease);
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu .elementor-item.highlighted {
	color: var(--emp-c-ink);
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover::after,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active::after {
	width: calc(100% - 1.6rem);
}

/* Elementor ships `.elementor-widget-heading .elementor-heading-title[class*=
 * "elementor-size-"] > a { color: inherit }` at specificity (0,3,1), which ties
 * with the obvious selector and wins on load order. Matching the widget class
 * as well takes this to (0,4,1) so the logo keeps its ink colour instead of
 * inheriting Astra's link blue. */
.elementor-location-header .elementor-widget-heading.emp-logo .elementor-heading-title > a,
.elementor-widget-heading.emp-logo .elementor-heading-title > a,
.emp-logo .elementor-heading-title a {
	font-family: var(--emp-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--emp-c-ink);
	text-decoration: none;
	transition: color var(--emp-d-fast) var(--emp-ease);
}

.elementor-location-header .elementor-widget-heading.emp-logo .elementor-heading-title > a:hover,
.elementor-widget-heading.emp-logo .elementor-heading-title > a:hover,
.emp-logo .elementor-heading-title a:hover {
	color: var(--emp-c-accent-text);
}

/* =====================================================================
 * 7. Footer
 * ===================================================================== */

.elementor-location-footer,
.emp-footer {
	font-family: var(--emp-font);
	background: var(--emp-c-footer);
	color: var(--emp-c-footer-text);
}

.elementor-location-footer > .e-con {
	background: var(--emp-c-footer);
}

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer .elementor-heading-title {
	font-family: var(--emp-font-display);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: var(--emp-s-3);
}

.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer p,
.elementor-location-footer li {
	color: var(--emp-c-footer-text);
	font-size: 15px;
	line-height: 1.75;
}

.elementor-location-footer a,
.elementor-location-footer .elementor-icon-list-text {
	color: var(--emp-c-footer-text);
	text-decoration: none;
	transition:
		color var(--emp-d-fast) var(--emp-ease),
		transform var(--emp-d-fast) var(--emp-ease);
}

.elementor-location-footer a:hover,
.elementor-location-footer a:hover .elementor-icon-list-text {
	color: var(--emp-amber-400);
}

.elementor-location-footer .elementor-icon-list-item:hover {
	transform: translateX(4px);
}

.elementor-location-footer .elementor-icon-list-icon svg,
.elementor-location-footer .elementor-icon-list-icon i {
	color: var(--emp-amber-400);
	fill: var(--emp-amber-400);
}

/* Bottom bar sits on the same navy, separated by a hairline. Matched
 * structurally as the footer's last row, since container CSS classes are not
 * emitted by Elementor. */
.emp-footer__bar,
.elementor-location-footer .emp-footer__bar,
.elementor-location-footer > .e-con > .e-con:last-child {
	border-top: 1px solid var(--emp-c-footer-line);
}

.elementor-location-footer .emp-footer__bar p {
	font-size: var(--emp-t-sm);
	margin: 0;
	color: var(--emp-c-footer-text);
}

.elementor-location-footer .elementor-social-icon {
	background: transparent;
	border: 1px solid var(--emp-c-footer-line);
	border-radius: var(--emp-r-sm);
	transition:
		background-color var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease),
		transform var(--emp-d) var(--emp-ease);
}

.elementor-location-footer .elementor-social-icon:hover {
	background: var(--emp-amber-400);
	border-color: var(--emp-amber-400);
	color: var(--emp-navy-900);
	transform: translateY(-3px);
}

@media (max-width: 767px) {
	.elementor-location-footer .e-con-boxed > .e-con-inner,
	.elementor-location-footer .e-con > .e-con-inner {
		text-align: left;
	}
}

/* =====================================================================
 * 8. Section rhythm
 * ===================================================================== */

.emp-section-title {
	margin-bottom: var(--emp-s-3);
	font-size: var(--emp-t-3xl);
	font-weight: 600;
	line-height: 1.1;
}

.emp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	margin-bottom: var(--emp-s-3);
	padding: 0.35rem 0.9rem;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

/* =====================================================================
 * 9. Hero
 * ===================================================================== */

.emp-hero {
	--emp-hero-overlay: #ffffff;
	--emp-hero-overlay-alpha: 0.66;
	--emp-hero-image: none;

	position: relative;
	display: flex;
	align-items: center;
	min-height: 86vh;
	padding: clamp(4rem, 9vw, 7.5rem) 0;
	overflow: hidden;
	isolation: isolate;
	font-family: var(--emp-font);
	background: var(--emp-amber-50);
}

.emp-hero--media {
	background-image: var(--emp-hero-image);
	background-size: cover;
	background-position: center;
}

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

/* The wash is what makes dark type readable over a busy photograph. */
.emp-hero__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--emp-hero-overlay);
	opacity: var(--emp-hero-overlay-alpha);
}

.emp-hero__toggle {
	position: absolute;
	top: var(--emp-s-6);
	right: var(--emp-s-6);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--emp-touch);
	height: var(--emp-touch);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: rgba(255, 255, 255, 0.9);
	color: var(--emp-c-ink);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	cursor: pointer;
	box-shadow: var(--emp-e-1);
	transition:
		background-color var(--emp-d-fast) var(--emp-ease),
		transform var(--emp-d-fast) var(--emp-ease);
}

.emp-hero__toggle:hover {
	background: #fff;
	transform: translateY(-2px);
}

.emp-hero__inner {
	width: min(100% - 2.5rem, 1140px);
	margin-inline: auto;
}

.emp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	margin: 0 0 var(--emp-s-5);
	padding: 0.4rem 0.95rem;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/* A live dot: the one piece of continuous motion on the page, and it earns
 * its place by meaning "events are on sale right now". */
.emp-hero__eyebrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--emp-green-600);
	box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
	animation: emp-pulse 2.4s var(--emp-ease) infinite;
}

@keyframes emp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
	70% { box-shadow: 0 0 0 0.5rem rgba(22, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.emp-hero__title {
	margin: 0 0 var(--emp-s-5);
	max-width: 17ch;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-hero);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--emp-c-ink);
	text-wrap: balance;
}

.emp-hero__sub {
	margin: 0 0 var(--emp-s-8);
	max-width: 48ch;
	color: var(--emp-c-ink-soft);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.6;
}

.emp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3);
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.emp-hero__btn {
	margin-top: 0;
	padding: 1rem 1.9rem;
	border-radius: var(--emp-r-pill);
	font-size: var(--emp-t-base);
}

.emp-hero__btn--ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	border-color: var(--emp-c-line-strong);
	background: rgba(255, 255, 255, 0.75);
	color: var(--emp-c-ink);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.emp-hero__btn--ghost:hover {
	background: #fff;
	border-color: var(--emp-c-ink);
	color: var(--emp-c-ink);
}

.emp-hero__play {
	flex: 0 0 auto;
}

/* Stat strip: a single raised panel rather than a row of loose numbers. */
.emp-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	border-radius: var(--emp-r-lg);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: var(--emp-e-2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: hidden;
}

.emp-hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-1);
	padding: var(--emp-s-5) var(--emp-s-6);
	border-left: 1px solid var(--emp-c-line);
}

.emp-hero__stat:first-child {
	border-left: 0;
}

.emp-hero__statvalue {
	font-family: var(--emp-font-display);
	color: var(--emp-c-ink);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.emp-hero__statlabel {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.emp-hero__scroll {
	display: flex;
	align-items: center;
	gap: var(--emp-s-3);
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.emp-hero__scroll::before {
	content: "";
	width: 2px;
	height: 1.75rem;
	border-radius: 2px;
	background: linear-gradient(var(--emp-c-accent), transparent);
}

@media (max-width: 767px) {
	.emp-hero {
		min-height: 0;
	}

	.emp-hero__title {
		max-width: none;
	}

	.emp-hero__stat {
		border-left: 0;
		border-top: 1px solid var(--emp-c-line);
	}

	.emp-hero__stat:first-child {
		border-top: 0;
	}

	.emp-hero__btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-hero__video {
		display: none;
	}
}

/* =====================================================================
 * 10. Forms, notices, tickets
 * ===================================================================== */

.emp-field__label,
.emp-form__ticketlabel {
	display: block;
	margin-bottom: var(--emp-s-2);
	font-size: var(--emp-t-sm);
	font-weight: 600;
	color: var(--emp-c-ink-soft);
}

.emp-field__required {
	color: var(--emp-red-600);
}

.emp-field input,
.emp-field select,
.emp-field textarea,
.emp-input {
	border-radius: var(--emp-r-sm);
	border: 1px solid var(--emp-c-line-strong);
	background: var(--emp-c-canvas);
	transition:
		border-color var(--emp-d-fast) var(--emp-ease),
		box-shadow var(--emp-d-fast) var(--emp-ease);
}

.emp-field input:focus-visible,
.emp-field select:focus-visible,
.emp-field textarea:focus-visible,
.emp-input:focus-visible {
	outline: none;
	border-color: var(--emp-c-accent);
	box-shadow: var(--emp-ring);
}

.emp-form__hint {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.5;
}

.emp-form__heading {
	font-size: var(--emp-t-xl);
	font-weight: 600;
}

/* Notices carry an icon-weight left rule plus wording, so meaning survives
 * without colour vision. */
.emp-notice {
	border-radius: var(--emp-r);
	border: 1px solid var(--emp-c-line);
	border-left-width: 4px;
	background: var(--emp-c-surface);
	box-shadow: var(--emp-e-1);
}

.emp-notice--success {
	border-color: rgba(22, 163, 74, 0.3);
	border-left-color: var(--emp-green-600);
	background: var(--emp-green-50);
}

.emp-notice--error {
	border-color: rgba(220, 38, 38, 0.3);
	border-left-color: var(--emp-red-600);
	background: var(--emp-red-50);
}

.emp-tickets,
.emp-checkout,
.emp-confirmation {
	border-radius: var(--emp-r-lg);
}

.emp-tier {
	border-radius: var(--emp-r);
	border: 1px solid var(--emp-c-line);
	background: var(--emp-c-canvas);
	transition:
		border-color var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease);
}

.emp-tier:hover {
	border-color: var(--emp-amber-200);
	box-shadow: var(--emp-e-2);
}

.emp-summary,
.emp-order {
	border-radius: var(--emp-r);
	background: var(--emp-c-surface);
	border: 1px solid var(--emp-c-line);
}

.emp-ticketlist__item {
	gap: var(--emp-s-3);
	align-items: center;
}

.emp-ticketlist__seat {
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

.emp-ticketlist__code {
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-surface);
	font-variant-numeric: tabular-nums;
}

.emp-progress {
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-line-soft);
	overflow: hidden;
}

.emp-progress__bar {
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent);
	transition: width var(--emp-d-slow) var(--emp-ease);
}

/* =====================================================================
 * 11. Tables and dashboard
 * ===================================================================== */

.emp-tablewrap {
	border-radius: var(--emp-r);
	border: 1px solid var(--emp-c-line);
	background: var(--emp-c-canvas);
	overflow-x: auto;
}

.emp-table th {
	background: var(--emp-c-surface);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.emp-table td,
.emp-table th {
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-table tbody tr:hover {
	background: var(--emp-amber-50);
}

.emp-col--seat {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.emp-col--muted {
	color: var(--emp-c-muted);
}

.emp-stat {
	border-radius: var(--emp-r);
	border: 1px solid var(--emp-c-line);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-stat__value {
	font-size: var(--emp-t-2xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.emp-stat__label {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* =====================================================================
 * 12. Scanner
 * ===================================================================== */

.emp-scanner__viewport {
	border-radius: var(--emp-r-lg);
	background: var(--emp-navy-900);
	overflow: hidden;
}

.emp-scanner__result {
	border-radius: var(--emp-r);
	border: 1px solid var(--emp-c-line);
	border-left-width: 5px;
	box-shadow: var(--emp-e-2);
}

.emp-scanner__result--ok {
	border-left-color: var(--emp-green-600);
	background: var(--emp-green-50);
}

.emp-scanner__result--bad {
	border-left-color: var(--emp-red-600);
	background: var(--emp-red-50);
}

.emp-scanner__who {
	font-family: var(--emp-font-display);
	font-weight: 600;
}

/* Read at arm's length in a dim foyer. */
.emp-scanner__seat {
	font-family: var(--emp-font-display);
	color: var(--emp-c-ink);
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * 13. Organizer submission
 * ===================================================================== */

.emp-submit__title {
	margin: var(--emp-s-8) 0 var(--emp-s-4);
	font-size: var(--emp-t-xl);
	font-weight: 600;
}

.emp-submit__title:first-child {
	margin-top: 0;
}

.emp-submit__form {
	margin-top: var(--emp-s-6);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-submit__form .emp-field--full {
	grid-column: 1 / -1;
}

.emp-submit__form textarea,
.emp-submit__form select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	color: inherit;
	font: inherit;
	line-height: 1.55;
}

.emp-submit__form textarea {
	resize: vertical;
}

.emp-submit__form textarea:focus-visible,
.emp-submit__form select:focus-visible {
	outline: none;
	border-color: var(--emp-c-accent);
	box-shadow: var(--emp-ring);
}

.emp-submit__form input[type="file"] {
	padding: var(--emp-s-2) 0;
	font: inherit;
}

.emp-submit__thumb {
	margin-top: var(--emp-s-2);
	border-radius: var(--emp-r-sm);
	border: 1px solid var(--emp-c-line);
}

.emp-submit .emp-form__hint {
	display: block;
	margin-top: var(--emp-s-1);
}

/* =====================================================================
 * 14. Seat map
 *
 * Colour follows the box-office convention: the fill is the price category,
 * status is carried by pattern and shape so it survives colour blindness and
 * greyscale printing.
 * ===================================================================== */

.emp-seatmap {
	font-family: var(--emp-font);
	margin-block: var(--emp-s-6);
}

.emp-seatmap__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3) var(--emp-s-5);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--emp-s-4);
}

.emp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2) var(--emp-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--emp-t-sm);
}

.emp-legend__item {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
}

.emp-legend__swatch {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 4px;
	flex: none;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.emp-legend__price {
	color: var(--emp-c-muted);
	font-variant-numeric: tabular-nums;
}

.emp-legend__item--taken::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 4px;
	background: repeating-linear-gradient(
		45deg,
		var(--emp-slate-300),
		var(--emp-slate-300) 2px,
		var(--emp-slate-100) 2px,
		var(--emp-slate-100) 4px
	);
}

/* Map stage */

.emp-seatmap__stage {
	position: relative;
	margin-bottom: var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background:
		radial-gradient(circle at 50% 0%, rgba(247, 150, 28, 0.06), transparent 60%),
		var(--emp-c-surface);
	box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
	overflow: hidden;
}

.emp-seatmap__controls {
	position: absolute;
	top: var(--emp-s-3);
	right: var(--emp-s-3);
	z-index: 2;
	display: flex;
	gap: var(--emp-s-1);
	padding: var(--emp-s-1);
	border-radius: var(--emp-r-pill);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--emp-e-2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.emp-seatmap__zoom {
	display: grid;
	place-items: center;
	min-width: var(--emp-touch-compact);
	height: var(--emp-touch-compact);
	padding: 0 var(--emp-s-2);
	border: 0;
	border-radius: var(--emp-r-pill);
	background: transparent;
	color: var(--emp-c-ink);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--emp-d-fast) var(--emp-ease),
		color var(--emp-d-fast) var(--emp-ease);
}

.emp-seatmap__zoom:hover {
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

@media (pointer: coarse) {
	.emp-seatpick {
		width: 38px;
		height: 38px;
	}

	.emp-seatmap__zoom {
		min-width: var(--emp-touch);
		height: var(--emp-touch);
	}
}

.emp-seatmap__canvas {
	touch-action: none;
	cursor: grab;
}

.emp-seatmap__canvas:active {
	cursor: grabbing;
}

.emp-svg {
	display: block;
	width: 100%;
	height: clamp(300px, 50vh, 560px);
}

.emp-svg-seat {
	fill: var(--emp-slate-300);
	stroke: rgba(15, 23, 42, 0.14);
	stroke-width: 0.5;
	cursor: pointer;
	transition:
		opacity var(--emp-d-fast) var(--emp-ease),
		stroke-width var(--emp-d-fast) var(--emp-ease);
}

.emp-svg-seat:hover {
	opacity: 0.72;
	stroke: var(--emp-c-ink);
	stroke-width: 1.2;
}

.emp-svg-seat.is-taken {
	fill: var(--emp-slate-200);
	stroke: var(--emp-slate-300);
	cursor: not-allowed;
	opacity: 0.5;
}

/* Selected seats invert to ink with a halo, so a chosen seat is obvious at a
 * glance even against a busy category palette. */
.emp-svg-seat.is-selected {
	fill: var(--emp-c-ink) !important;
	stroke: var(--emp-c-accent);
	stroke-width: 2;
	opacity: 1;
}

.emp-svg-seat.is-accessible {
	stroke: var(--emp-c-ink);
	stroke-width: 1.2;
	stroke-dasharray: 2 1.5;
}

.emp-svg-decor rect {
	fill: var(--emp-slate-200);
}

.emp-svg-decor text {
	fill: var(--emp-c-muted);
	font-size: 13px;
	font-family: var(--emp-font);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Accessible seat list — laid out as the room reads: one line per row,
 * a fixed label on the left, aisles preserved, scrolling sideways rather
 * than wrapping so seat 30 is still in row A and not on a line of its own. */

.emp-seatmap__listintro {
	margin: 0 0 var(--emp-s-3);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-seatgroup {
	margin: 0 0 var(--emp-s-6);
	padding: var(--emp-s-5) 0 var(--emp-s-3);
	border: 0;
	border-top: 1px solid var(--emp-c-line);
}

.emp-seatgroup__title {
	display: block;
	width: 100%;
	margin: 0 0 var(--emp-s-4);
	padding: 0;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
	text-align: center;
}

.emp-seatgroup__band {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.emp-seatgroup__price {
	color: var(--emp-c-muted);
	font-weight: 500;
}

.emp-seatgroup__price::before {
	content: "— ";
}

/* The scroller. Rows are wider than a phone by design.
 *
 * min-width:0 on the whole chain is load-bearing. A <fieldset> refuses to
 * shrink below its content, so without it the group grew to the width of the
 * longest row and the seats simply ran off the screen with nothing to scroll
 * — which is exactly what a phone showed. */
.emp-seatmap__list,
.emp-seatgroup,
.emp-seatgrid {
	min-width: 0;
	max-width: 100%;
}

.emp-seatgrid {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-2);
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: var(--emp-s-3);
	scrollbar-width: thin;
	scrollbar-color: var(--emp-c-line-strong) transparent;

	/* Scroll shadows: the two 'local' layers scroll with the content and
	 * cover the fixed shadows when there is nothing more that way, so an
	 * edge only shades while seats remain off-screen. Phones hide their
	 * scrollbars, so without this there is no sign the row continues. */
	background:
		linear-gradient(to right, var(--emp-c-canvas) 40%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
		linear-gradient(to left, var(--emp-c-canvas) 40%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) left center / 16px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) right center / 16px 100% no-repeat scroll;
}

/* Keep the scrollbar visible where the platform would otherwise hide it. */
.emp-seatgrid::-webkit-scrollbar {
	height: 8px;
}

.emp-seatgrid::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--emp-c-line-strong);
}

.emp-seatline {
	display: flex;
	align-items: center;
	gap: var(--emp-s-3);
	width: max-content;
	min-width: 100%;
}

/* Sticks to the left edge while the seats scroll past, so you never lose
 * track of which row you are looking at. */
.emp-seatline__label {
	position: sticky;
	left: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: var(--emp-r-xs);
	background: var(--emp-c-ink);
	color: #fff;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	box-shadow: 0 0 0 6px var(--emp-c-canvas);
}

.emp-seatline__seats {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* An aisle: reproduced from the real seat positions. */
.emp-seatline__aisle {
	flex: none;
	width: calc(var(--emp-aisle, 1) * 22px);
}

.emp-seatpick {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-xs);
	background: var(--emp-seat-fill, var(--emp-c-canvas));
	color: var(--emp-seat-ink, var(--emp-c-ink));
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition:
		border-color var(--emp-d-fast) var(--emp-ease),
		background-color var(--emp-d-fast) var(--emp-ease),
		transform var(--emp-d-fast) var(--emp-ease);
}

.emp-seatpick:hover {
	border-color: var(--emp-c-ink);
	transform: translateY(-1px);
	box-shadow: var(--emp-e-1);
}

.emp-seatpick input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.emp-seatpick:has(input:checked) {
	border-color: var(--emp-c-ink);
	background: var(--emp-c-ink);
	color: #fff;
	font-weight: 700;
	transform: translateY(-1px);
	box-shadow: var(--emp-e-2);
}

.emp-seatpick:has(input:focus-visible) {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
	box-shadow: var(--emp-ring);
}

/* Unavailable seats lose the band colour entirely: the row then reads as a
 * block of colour with holes in it, which is the thing a buyer scans for. */
.emp-seatpick--taken {
	background: var(--emp-c-canvas);
	border-color: var(--emp-c-line);
	color: var(--emp-slate-300);
	cursor: not-allowed;
	text-decoration: line-through;
}

.emp-seatpick--taken:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--emp-c-line);
}

.emp-seatpick--taken:hover {
	border-color: var(--emp-c-line-strong);
}

/* Accessible seats carry a mark, so status is never colour alone. */
.emp-seatpick--accessible::after {
	content: "\267F";
	position: absolute;
	top: -0.35rem;
	right: -0.25rem;
	font-size: 0.7rem;
	background: var(--emp-c-canvas);
	border-radius: 50%;
	padding: 0 0.1rem;
}

/* Selection summary */

.emp-seatmap__summary {
	position: sticky;
	bottom: var(--emp-s-2);
	margin-top: var(--emp-s-4);
	padding: var(--emp-s-4) var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--emp-e-3);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.emp-seatmap__none {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-seatmap__chosen {
	margin: 0 0 var(--emp-s-3);
	padding: 0;
	list-style: none;
	max-height: 9rem;
	overflow-y: auto;
}

.emp-seatmap__chosen li {
	display: flex;
	justify-content: space-between;
	gap: var(--emp-s-4);
	padding: var(--emp-s-1) 0;
	font-size: var(--emp-t-sm);
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-seatmap__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-top: var(--emp-s-2);
	border-top: 1px solid var(--emp-c-line);
	font-variant-numeric: tabular-nums;
}

.emp-seatmap__total strong {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 700;
}

.emp-seatmap__actions {
	margin-top: var(--emp-s-4);
}

@media (max-width: 640px) {
	.emp-svg {
		height: 46vh;
	}
}

/* =====================================================================
 * 15. Motion
 * ===================================================================== */

/* The hidden state is scoped to .emp-js, which the script adds to <html>.
 * If the script never runs, nothing is ever hidden. */
.emp-js .emp-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--emp-d-slow) var(--emp-ease),
		transform 480ms var(--emp-ease);
	will-change: opacity, transform;
}

.emp-js .emp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Cards arrive as a wave, scaling up very slightly with an overshoot: the
 * grid reads as one group settling into place rather than six separate fades. */
.emp-js .emp-reveal-group > * {
	opacity: 0;
	transform: translateY(16px) scale(0.96);
	transition:
		opacity var(--emp-d-slow) var(--emp-ease),
		transform 420ms var(--emp-ease-back);
}

/* The script stamps --emp-i on each child, so the wave keeps working past the
 * eighth card. The cap stops a long grid from taking several seconds to
 * finish arriving. */
.emp-js .emp-reveal-group.is-visible > * {
	opacity: 1;
	transform: none;
	transition-delay: min(calc(var(--emp-i, 0) * 60ms), 480ms);
}

@media (prefers-reduced-motion: reduce) {
	.emp-js .emp-reveal,
	.emp-js .emp-reveal-group > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.emp-card,
	.emp-tile,
	.emp-button,
	.emp-seatpick,
	.emp-card__media img {
		transition: none;
	}

	.emp-card:hover,
	.emp-tile:hover,
	.emp-button--primary:hover,
	.emp-seatpick:has(input:checked),
	.emp-card:hover .emp-card__media img {
		transform: none;
	}

	.emp-hero__eyebrow::before {
		animation: none;
	}
}


/* The seat number is printed on the seat itself. It must never intercept a
 * tap — the rect underneath is the control. */
.emp-svg-seatnum {
	font-family: var(--emp-font);
	font-size: 8px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: central;
	fill: var(--emp-c-ink);
	pointer-events: none;
	user-select: none;
	font-variant-numeric: tabular-nums;
}

.emp-svg-seat.is-taken + .emp-svg-seatnum,
.emp-svg-seatnum[data-taken] {
	fill: var(--emp-c-muted);
	opacity: 0.7;
}

/* A chosen seat inverts to ink, so its number flips to white. */
.emp-svg-seat.is-selected + .emp-svg-seatnum {
	fill: #ffffff !important;
	font-weight: 700;
}

/* =====================================================================
 * 16. Stepped booking flow
 * ===================================================================== */

.emp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2);
	margin: 0 0 var(--emp-s-8);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.emp-steps__item {
	display: flex;
	align-items: center;
	gap: var(--emp-s-2);
	flex: 1 1 auto;
	padding: var(--emp-s-3) var(--emp-s-4);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	font-weight: 600;
	white-space: nowrap;
}

.emp-steps__num {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	background: var(--emp-c-line-soft);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
}

.emp-steps__item.is-current {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	color: var(--emp-c-accent-text);
}

.emp-steps__item.is-current .emp-steps__num {
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
}

/* A finished step reads as finished without relying on colour alone. */
.emp-steps__item.is-done {
	border-color: rgba(22, 163, 74, 0.3);
	color: var(--emp-green-700);
}

.emp-steps__item.is-done .emp-steps__num {
	background: var(--emp-green-700);
	color: #fff;
	font-size: 0;
}

.emp-steps__item.is-done .emp-steps__num::after {
	content: "\2713";
	font-size: 13px;
}

.emp-booking__title {
	margin: 0 0 var(--emp-s-2);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.emp-booking__lead {
	display: flex;
	align-items: center;
	gap: var(--emp-s-2);
	margin: 0 0 var(--emp-s-6);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-base);
}

.emp-booking__back {
	margin: 0 0 var(--emp-s-3);
	font-size: var(--emp-t-sm);
}

/* --- Price bands ---------------------------------------------------- */

.emp-bands {
	display: grid;
	gap: var(--emp-s-3);
	margin: 0 0 var(--emp-s-6);
	padding: 0;
	list-style: none;
}

.emp-band__label {
	display: flex;
	align-items: center;
	gap: var(--emp-s-4);
	padding: var(--emp-s-4) var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r);
	background: var(--emp-c-canvas);
	cursor: pointer;
	transition:
		border-color var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease),
		background-color var(--emp-d) var(--emp-ease);
}

.emp-band__label:hover {
	border-color: var(--emp-amber-200);
	box-shadow: var(--emp-e-1);
}

/* The whole row is the control, so selection has to be unmistakable. */
.emp-band__label:has(input:checked) {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	box-shadow: var(--emp-e-2);
}

.emp-band__label:has(input:focus-visible) {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
}

.emp-band__label input {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var(--emp-c-accent-dark);
}

.emp-band__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-2) var(--emp-s-3);
	flex: 1 1 auto;
	min-width: 0;
}

.emp-band__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
}

.emp-band__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
}

.emp-band__meta {
	flex: 1 1 100%;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-band__price {
	flex: none;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.emp-band.is-soldout .emp-band__label {
	background: var(--emp-c-surface);
	cursor: not-allowed;
	opacity: 0.7;
}

.emp-band.is-soldout .emp-band__meta {
	color: var(--emp-red-700);
	font-weight: 600;
}

.emp-booking__qty {
	display: flex;
	align-items: center;
	gap: var(--emp-s-3);
	margin-bottom: var(--emp-s-6);
}

.emp-booking__qty select {
	min-height: var(--emp-touch);
	padding: 0 var(--emp-s-3);
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	font: inherit;
	font-variant-numeric: tabular-nums;
}

/* --- Event page call to action --------------------------------------- */

.emp-bookcta {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-3);
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
}

.emp-bookcta__price {
	margin: 0;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 700;
}

.emp-bookcta__from {
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: var(--emp-t-sm);
	font-weight: 500;
}

.emp-bookcta__actions {
	margin: 0;
}

.emp-bookcta__hint {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-seatmap__limit {
	margin: var(--emp-s-3) 0 0;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 600;
	min-height: 1.2em;
}

/* =====================================================================
 * 17. Mobile
 *
 * The footer was the single cause of sideways scroll on every page: its
 * inner row kept four columns at any width, crushing each to about 60px
 * while the text inside needed 71-103px. Elementor's own responsive
 * settings were never applied to those containers, so they are stacked
 * here instead.
 * ===================================================================== */

@media (max-width: 767px) {
	/* Elementor drives container direction through a custom property, read by
	 * its own `.e-con.e-flex > .e-con-inner` rule at specificity (0,3,0).
	 * Setting flex-direction directly loses that fight, so the property is
	 * overridden instead and Elementor's own rule does the work. */
	.elementor-location-footer .e-con,
	.elementor-location-footer .e-con-inner {
		--flex-direction: column;
		--container-widget-width: 100%;
	}

	.elementor-location-footer .e-con.e-flex > .e-con-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.elementor-location-footer .e-con-inner > .e-con,
	.elementor-location-footer .e-con-inner > .elementor-element {
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}

	/* Four stacked columns are a long footer; close the gaps a little. */
	.elementor-location-footer .e-con-inner > .e-con {
		--padding-block-start: 12px;
		--padding-block-end: 12px;
	}

	/* --- Header ---------------------------------------------------------
	 * The template is already one row — logo, then a block holding the nav
	 * and a "Find events" button. On a phone it wrapped onto two lines and
	 * cost 221px, a quarter of the screen before any content. Three things
	 * caused it: the widgets are set to 100% width, the nav widget reserves
	 * room for the desktop menu it is hiding, and the CTA duplicates a link
	 * the burger already offers.
	 *
	 * Elementor writes per-element rules at (0,3,0), so these carry an extra
	 * class to win on specificity rather than reaching for !important. */
	.elementor-location-header .e-con {
		--padding-block-start: 10px;
		--padding-block-end: 10px;
	}

	/* The flex container is .e-con-inner, not .e-con — targeting the wrapper
	 * left the row wrapping and cost an hour of head-scratching. */
	.elementor-location-header .e-con.e-con > .e-con-inner {
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* Sized to its own text, not grown to fill: a growing logo pushed the
	 * nav onto a second line. */
	.elementor-location-header .e-con.e-con .elementor-widget-heading {
		width: auto;
		flex: 0 1 auto;
		min-width: 0;
	}

	.elementor-location-header .e-con.e-con .elementor-widget-nav-menu {
		width: auto;
		flex: 0 0 auto;
	}

	/* Kept on phones at the owner's request. Compact so the logo, this and
	 * the burger still share one row. */
	.elementor-location-header .e-con.e-con .elementor-widget-button {
		display: inline-flex;
		width: auto;
		flex: 0 0 auto;
	}

	.elementor-location-header .e-con.e-con .elementor-widget-button .elementor-button {
		min-height: 40px;
		padding: 9px 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* The logo may be an SVG with no intrinsic limit; keep it from crowding
	 * the other two out of the row. */
	.elementor-location-header .e-con.e-con .elementor-widget-image {
		flex: 0 1 auto;
		min-width: 0;
	}

	.elementor-location-header .e-con.e-con .elementor-widget-image img {
		max-width: 100%;
		height: auto;
	}

	/* Elementor centres the toggle with auto margins on both sides; only the
	 * left one should be automatic, so it settles against the right edge. */
	.elementor-location-header .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		margin-left: auto;
		margin-right: 0;
	}

	.elementor-location-header .elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* The bottom bar reads better centred once it has stacked. */
	.elementor-location-footer > .e-con > .e-con:last-child .e-con-inner {
		gap: var(--emp-s-3);
	}

	/* A long venue name or email must wrap rather than widen the page. */
	.emp-booking,
	.emp-checkout,
	.emp-confirmation,
	.emp-tickets,
	.emp-seatmap,
	.emp-dashboard,
	.emp-scanner {
		overflow-wrap: break-word;
	}

	/* Steps: tighter, and the rail wraps to two lines rather than scrolling. */
	.emp-steps {
		gap: var(--emp-s-1);
	}

	.emp-steps__item {
		padding: var(--emp-s-2) var(--emp-s-3);
		font-size: var(--emp-t-xs);
	}

	.emp-steps__num {
		width: 20px;
		height: 20px;
	}

	/* Price bands: the price drops under the name instead of fighting it. */
	.emp-band__label {
		flex-wrap: wrap;
		gap: var(--emp-s-2) var(--emp-s-3);
		padding: var(--emp-s-4);
	}

	.emp-band__body {
		flex: 1 1 60%;
	}

	.emp-band__price {
		margin-left: auto;
	}

	.emp-booking__qty {
		flex-wrap: wrap;
	}

	.emp-booking__qty select {
		flex: 1 1 100%;
	}

	/* Seat summary is sticky; keep it from eating the screen. */
	.emp-seatmap__chosen {
		max-height: 6.5rem;
	}

	.emp-seatmap__summary {
		padding: var(--emp-s-3) var(--emp-s-4);
	}


	/* The picker: tighter gaps so more of the row is on screen at once. */
	.emp-seatline {
		gap: var(--emp-s-2);
	}

	.emp-seatline__seats {
		gap: 4px;
	}

	.emp-seatline__label {
		width: 26px;
		height: 26px;
		font-size: var(--emp-t-xs);
		box-shadow: 0 0 0 5px var(--emp-c-canvas);
	}

	.emp-seatgroup {
		padding-top: var(--emp-s-4);
	}

	.emp-hero {
		min-height: 0;
	}
}

/* Very narrow phones: stop the step labels forcing a third line. */
@media (max-width: 400px) {
	.emp-steps__item {
		flex: 1 1 100%;
	}
}

/* =====================================================================
 * 18. Event detail page
 *
 * Pattern: Event/Conference Landing — facts up front, a register CTA that
 * stays reachable, supporting detail below it. The panel is sticky on
 * desktop because the decision to buy is made while reading, not after.
 * ===================================================================== */

.emp-eventpage {
	margin-top: var(--emp-s-10);
	font-family: var(--emp-font);
	font-size: var(--emp-t-base);
	line-height: 1.5;
}

.emp-ico {
	flex: none;
	color: var(--emp-c-accent-text);
}

/* --- Facts strip ----------------------------------------------------- */

.emp-factbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--emp-s-1);
	margin: 0 0 var(--emp-s-8);
	padding: var(--emp-s-2);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	list-style: none;
}

.emp-factbar__item {
	display: flex;
	align-items: flex-start;
	gap: var(--emp-s-3);
	padding: var(--emp-s-4);
	border-radius: var(--emp-r);
}

/* A hairline between cells, but not before the first on each row — a
 * border on every cell leaves a stray line at the start of a wrapped row. */
.emp-factbar__item + .emp-factbar__item {
	box-shadow: inset 1px 0 0 var(--emp-c-line-soft);
}

.emp-factbar__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.emp-factbar__label {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.emp-factbar__value {
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.emp-eventpage__gone {
	color: var(--emp-red-700);
}

/* --- Two columns ----------------------------------------------------- */

.emp-eventpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--emp-block-gap);
	align-items: start;
}

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

	/* On a phone the panel leads: deciding to buy comes before reading
	 * who the organizer is. */
	.emp-eventpage__aside {
		order: -1;
	}
}

.emp-eventpage__main {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-5);
	min-width: 0;
}

.emp-panel {
	padding: var(--emp-s-5) var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
}

.emp-panel__title {
	margin: 0 0 var(--emp-s-3);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.emp-panel p {
	margin: 0 0 var(--emp-s-2);
}

.emp-panel p:last-child {
	margin-bottom: 0;
}

/* Organizer */

.emp-organizer {
	display: flex;
	align-items: flex-start;
	gap: var(--emp-s-4);
}

.emp-organizer__avatar {
	flex: none;
	border-radius: 50%;
}

.emp-organizer__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
	text-decoration: none;
}

.emp-organizer__bio {
	margin: var(--emp-s-1) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

/* Venue */

.emp-venue__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
}

.emp-venue__address {
	color: var(--emp-c-muted);
}

/* --- Booking panel --------------------------------------------------- */

.emp-eventpage__aside {
	min-width: 0;
}

.emp-bookpanel {
	position: sticky;

	/* The site header is fixed and the section bar sticks under it, so a
	 * panel resting at 24px would come to rest behind both. */
	top: calc( var(--emp-header-h) + var(--emp-secnav-h) + var(--emp-s-5) );
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
}

.emp-bookpanel__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--emp-s-4);
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-bookpanel__from {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	font-weight: 500;
}

.emp-bookpanel__price {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* Countdown: quiet by default, and only urgent when it truly is. */
.emp-bookpanel__countdown {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	margin: var(--emp-s-4) 0 0;
	padding: 5px 12px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-surface);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.emp-bookpanel__countdown.is-soon {
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

.emp-bookpanel__countdown.is-soon::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--emp-c-accent-dark);
}

.emp-bookpanel__cta {
	margin: var(--emp-s-5) 0 0;
}

.emp-bookpanel__note {
	margin: var(--emp-s-3) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	text-align: center;
}

.emp-bookpanel__points {
	margin: var(--emp-s-5) 0 0;
	padding: var(--emp-s-4) 0 0;
	border-top: 1px solid var(--emp-c-line-soft);
	list-style: none;
	display: grid;
	gap: var(--emp-s-2);
}

.emp-bookpanel__points li {
	display: flex;
	align-items: center;
	gap: var(--emp-s-2);
	color: var(--emp-c-ink-soft);
	font-size: var(--emp-t-sm);
}

.emp-bookpanel__points .emp-ico {
	color: var(--emp-green-700);
	width: 16px;
	height: 16px;
}

.emp-bookpanel .emp-status {
	margin: var(--emp-s-5) 0 0;
	text-align: center;
}

@media (max-width: 900px) {
	.emp-bookpanel {
		position: static;
	}
}

/* =====================================================================
 * 19. Event hero, description surface and line-up
 *
 * The theme prints neither the title nor the featured image for this post
 * type, so the page opened straight into body copy. Both are rendered by
 * the plugin instead, and the description gets its own surface so it stops
 * floating on the page background.
 * ===================================================================== */

.emp-hero-event {
	margin: 0 0 var(--emp-s-8);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-xl);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
	overflow: hidden;
}

/* A wide banner is cropped to the letterbox it was made for. */
.emp-hero-event__media {
	position: relative;
	aspect-ratio: 16 / 7;
	background: var(--emp-c-surface);
}

/* <picture> is inline by default, so it would not fill the media box the
 * way the bare <img> used to. */
.emp-hero-event__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.emp-hero-event__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* No banner: the poster is shown whole and sets its own height. Cropping a
 * 4:5 poster into a 16:7 box throws away 65% of it - normally the title band
 * along the bottom and the faces along the top. */
.emp-hero-event__media--poster {
	aspect-ratio: auto;
	/* The poster sets the height, but the box must still reserve space before
	 * the image arrives - with aspect-ratio off and height auto it collapses
	 * to nothing, and everything below jumps when the poster loads. */
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--emp-c-ink);
}

.emp-hero-event__media--poster .emp-hero-event__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 560px;
	object-fit: contain;
}

.emp-hero-event__body {
	padding: var(--emp-s-6) var(--emp-s-8) var(--emp-s-8);
}

.emp-hero-event__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2);
	margin: 0 0 var(--emp-s-3);
}

.emp-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.emp-chip:hover {
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
}

.emp-hero-event__title {
	margin: 0;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-3xl);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.emp-hero-event__when {
	display: flex;
	align-items: center;
	gap: var(--emp-s-2);
	margin: var(--emp-s-3) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-base);
	font-weight: 500;
}

@media (max-width: 640px) {
	.emp-hero-event__media {
		aspect-ratio: 3 / 2;
	}

	.emp-hero-event__media--poster {
		aspect-ratio: auto;
		min-height: 280px;
	}

	.emp-hero-event__media--poster .emp-hero-event__img {
		max-height: 68vh;
	}

	.emp-hero-event__body {
		padding: var(--emp-s-5);
	}
}

/* --- Description --------------------------------------------------- */

.emp-eventbody {
	padding: var(--emp-s-8);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	font-size: var(--emp-t-base);
	line-height: 1.7;
}

.emp-eventbody > *:first-child {
	margin-top: 0;
}

.emp-eventbody > *:last-child {
	margin-bottom: 0;
}

.emp-eventbody h2,
.emp-eventbody h3 {
	font-family: var(--emp-font-display);
	letter-spacing: -0.02em;
	margin-top: var(--emp-s-6);
}

.emp-eventbody ul,
.emp-eventbody ol {
	padding-left: 1.25em;
}

.emp-eventbody li {
	margin-bottom: var(--emp-s-2);
}

@media (max-width: 640px) {
	.emp-eventbody {
		padding: var(--emp-s-5);
	}
}

/* --- Line-up -------------------------------------------------------- */

.emp-lineup {
	margin-top: var(--emp-s-10);
}

.emp-lineup__title {
	margin: 0 0 var(--emp-s-5);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.emp-lineup__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--emp-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--emp-s-1);
	padding: var(--emp-s-5) var(--emp-s-3);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	text-align: center;
	transition:
		transform var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease);
}

.emp-person:hover {
	transform: translateY(-4px);
	border-color: var(--emp-amber-200);
	box-shadow: var(--emp-e-2);
}

.emp-person__photo {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin-bottom: var(--emp-s-2);
	border-radius: 50%;
	overflow: hidden;
	background: var(--emp-c-surface);
}

.emp-person__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Initials beat a generic silhouette: the placeholder still says who. */
.emp-person__photo--initials {
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.emp-person__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
	font-weight: 600;
	line-height: 1.25;
}

.emp-person__role {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.emp-person,
	.emp-person:hover {
		transition: none;
		transform: none;
	}
}

/* =====================================================================
 * 20. Event page ground
 *
 * The cards are white, so they need something to sit on. The tint goes on
 * the body and the theme's own wrappers are made transparent, otherwise a
 * white content wrapper paints over it and only the margins tint.
 * ===================================================================== */

/* The page ground is the warm off-white the rest of the site uses. It was
   a cool #f8f8f8 from before the rebrand, which read as a different site
   the moment you left the home page. */
:root {
	--emp-c-page: var(--emp-c-ground);
}

body.emp-single-event {
	background-color: var(--emp-c-page);
}

body.emp-single-event #page,
body.emp-single-event #content,
body.emp-single-event .site-content,
body.emp-single-event #primary,
body.emp-single-event .ast-container,
body.emp-single-event .entry-content,
body.emp-single-event .site-main,
body.emp-single-event article {
	background-color: transparent;
}

/* The hero opens with its own lead band, so the theme's content padding
 * above it is dead space between a header and the first thing worth
 * looking at. The selector keeps the ID it has always had, because an ID
 * outranks any class rule added later and a competing rule elsewhere in
 * this file would silently lose to it. */
body.emp-single-event #content,
body.emp-single-event .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* The hero already carries its own top margin; drop it so the 40px above
 * is the only gap. */
body.emp-single-event .emp-hero-event {
	margin-top: 0;
}

/* =====================================================================
 * 21. Description beside the booking panel
 *
 * The description used to run full width above the grid, which pushed the
 * booking panel a screen and a half down. It now leads the left column, so
 * the panel sits alongside it and stays in view while the page is read.
 * ===================================================================== */

.emp-eventpage__main > .emp-eventbody {
	margin: 0;
}

.emp-eventbody {
	position: relative;
	padding: var(--emp-s-6) var(--emp-s-7, 28px);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	font-size: var(--emp-t-base);
	line-height: 1.7;
}

.emp-eventbody__inner > *:first-child {
	margin-top: 0;
}

.emp-eventbody__inner > *:last-child {
	margin-bottom: 0;
}

/* Clamp is added by the script once the height is known, so nothing is
 * hidden if that script never runs.
 *
 * --emp-clamp is the single source of truth for the collapsed height: the
 * script reads it back before deciding whether collapsing is worth a control
 * at all. It was previously 380px, which was taller than the copy on most
 * events, so the button appeared and hid nothing. */
.emp-eventbody {
	--emp-clamp: 190px;
}

.emp-eventbody.is-clamped .emp-eventbody__inner {
	max-height: var(--emp-clamp);
	overflow: hidden;
	/* The fade tells the eye there is more, which a hard cut does not. */
	-webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.emp-eventbody__more {
	margin: var(--emp-s-4) 0 0;
}

.emp-eventbody__more .emp-button {
	width: 100%;
}

@media (max-width: 640px) {
	.emp-eventbody {
		padding: var(--emp-s-5);
	}
}

/* The panel is the first thing on a phone: deciding to buy comes before
 * reading three paragraphs about the act. */
@media (max-width: 900px) {
	.emp-eventpage__grid {
		display: flex;
		flex-direction: column;
	}

	.emp-eventpage__aside {
		order: -1;
	}
}

/* =====================================================================
 * 22. Booking panel rhythm and mobile width
 * ===================================================================== */

/* One gap for the whole panel instead of a different margin per element.
 * The measured rhythm was 16 / 20 / 12 / 20 — close enough to look like a
 * mistake rather than a decision. */
.emp-bookpanel {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-5);
}

.emp-bookpanel > * {
	margin: 0;
}

.emp-bookpanel__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--emp-s-5);
	border-bottom: 1px solid var(--emp-c-line-soft);
}

/* The countdown is a chip, not a block: it should hug its text and sit
 * hard against the left edge rather than stretching across the panel. */
.emp-bookpanel__countdown {
	align-self: flex-start;
	margin: 0;
}

/* The note belongs to the button above it, so it sits closer to that than
 * to the next group. */
.emp-bookpanel__cta + .emp-bookpanel__note {
	margin-top: calc(var(--emp-s-3) - var(--emp-s-5));
}

.emp-bookpanel__points {
	margin: 0;
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
	gap: var(--emp-s-3);
}

@media (max-width: 900px) {
	/* align-items: start is set on the desktop grid so the sticky panel does
	 * not stretch to the column height. Once the grid becomes a flex column
	 * that same value applies to the horizontal axis, and the panel shrank to
	 * its content — the 23px of dead space down the right-hand side. */
	.emp-eventpage__grid {
		align-items: stretch;
	}

	.emp-eventpage__aside,
	.emp-eventpage__main {
		width: 100%;
		max-width: 100%;
	}
}

/* =====================================================================
 * 23. Checkout summary table
 *
 * The base rule sets `padding: 0.7rem 0` — no horizontal padding at all.
 * That was invisible while the table was bare, but the theme layer gives it
 * a border and a background, so the seat label and the price ended up
 * pressed against the frame.
 * ===================================================================== */

.emp-summary {
	overflow: hidden; /* Clip the row rules to the rounded corners. */
	border-spacing: 0;
}

.emp-summary th,
.emp-summary td {
	padding: 14px var(--emp-s-5);
	vertical-align: middle;
}

.emp-summary tfoot th,
.emp-summary tfoot td {
	padding-top: var(--emp-s-4);
	padding-bottom: var(--emp-s-4);
}

/* The seat is the row's subject; its band and row are supporting detail. */
.emp-summary__qty {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-summary td {
	font-variant-numeric: tabular-nums;
}

.emp-summary tfoot td {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
}

/* Same treatment for the confirmation page's order table. */
.emp-order th,
.emp-order td {
	padding: 14px var(--emp-s-5);
}

@media (max-width: 640px) {
	.emp-summary th,
	.emp-summary td,
	.emp-order th,
	.emp-order td {
		padding: 12px var(--emp-s-4);
	}
}

/* =====================================================================
 * 24. Checkout steps 1 and 2
 * ===================================================================== */

/* Which show you are buying for. Checkout named the step but never the
 * event, which on a shared link is the first thing you want confirmed. */
.emp-context {
	display: flex;
	align-items: center;
	gap: var(--emp-s-4);
	margin: 0 0 var(--emp-s-6);
	padding: var(--emp-s-3) var(--emp-s-4);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r);
	background: var(--emp-c-surface);
}

.emp-context__thumb img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: var(--emp-r-sm);
	object-fit: cover;
}

.emp-context__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.emp-context__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	color: var(--emp-c-ink);
}

.emp-context__name:hover {
	color: var(--emp-c-accent-text);
}

.emp-context__meta {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.35;
}

/* The cost of the choice, before the choice is committed. */
.emp-runtotal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--emp-s-2) var(--emp-s-3);
	margin: var(--emp-s-5) 0 0;
	padding: var(--emp-s-4) var(--emp-s-5);
	border: 1px solid var(--emp-amber-200);
	border-radius: var(--emp-r);
	background: var(--emp-c-accent-soft);
}

.emp-runtotal__label {
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.emp-runtotal__sum {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.emp-runtotal__calc {
	flex: 1 1 100%;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

/* A button that admits it is working. */
.emp-button.is-busy {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.emp-button.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--emp-c-on-accent);
	animation: emp-spin 620ms linear infinite;
}

@keyframes emp-spin {
	to { transform: rotate(360deg); }
}

/* A disabled option should read as unavailable, not merely unselected. */
.emp-booking__qty select option:disabled {
	color: var(--emp-c-muted);
}

@media (prefers-reduced-motion: reduce) {
	.emp-button.is-busy::after {
		animation-duration: 2s;
	}
}

/* =====================================================================
 * 25. Seat picker panel
 *
 * The selection summary was the one part of this screen that read as a
 * finished component: a white card, hairline rules, figures right-aligned
 * in tabular numerals. Everything above it was loose parts stacked on the
 * page. This brings the whole step onto that system — one card, one rhythm,
 * one rule weight.
 * ===================================================================== */

.emp-seatmap__list {
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

/* The band and its price are the panel's heading. */
.emp-seatmap__list .emp-seatgroup {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.emp-seatmap__list .emp-seatgroup__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--emp-s-2) var(--emp-s-4);
	width: 100%;
	margin: 0 0 var(--emp-s-4);
	padding: 0 0 var(--emp-s-4);
	border-bottom: 1px solid var(--emp-c-line-soft);
	text-align: left;
	font-size: var(--emp-t-lg);
}

.emp-seatgroup__price {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 700;
	color: var(--emp-c-ink);
	font-variant-numeric: tabular-nums;
}

/* The em dash separator made sense in a centred heading; on a split row the
 * two halves are already distinct. */
.emp-seatgroup__price::before {
	content: none;
}

/* Instruction and legend share one line: what to do, and what the colours
 * mean, in the order you need them. */
.emp-seatmap__listintro {
	margin: 0 0 var(--emp-s-3);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-seatmap__toolbar {
	margin: 0 0 var(--emp-s-5);
	padding: 0 0 var(--emp-s-4);
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-seatmap__toolbar .emp-legend {
	gap: var(--emp-s-2) var(--emp-s-3);
	font-size: var(--emp-t-xs);
}

/* Chips, not boxes: the legend is a key, not a control. */
.emp-seatmap__toolbar .emp-legend__item {
	padding: 4px 10px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-surface);
	border-color: transparent;
	color: var(--emp-c-muted);
	font-weight: 600;
}

.emp-seatgrid {
	padding-bottom: var(--emp-s-2);
}

/* Rows sit on the same hairline as the summary's line items. */
.emp-seatline {
	padding: var(--emp-s-2) 0;
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-seatline:first-child {
	border-top: 0;
	padding-top: 0;
}

.emp-seatmap__actions {
	margin-top: var(--emp-s-5);
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-seatmap__actions .emp-button {
	width: 100%;
}

/* The summary is the same card, one step raised because it is the running
 * result rather than the controls. */
.emp-seatmap__summary {
	border-radius: var(--emp-r-lg);
}

.emp-seatmap__chosen li {
	padding: var(--emp-s-2) 0;
	font-variant-numeric: tabular-nums;
}

.emp-seatmap__total {
	padding-top: var(--emp-s-3);
}

@media (max-width: 640px) {
	.emp-seatmap__list {
		padding: var(--emp-s-4);
	}
}

/* =====================================================================
 * 26. Stacking fix, and steps 1 and 3 on the same card system
 * ===================================================================== */

/* The row badges are sticky with a z-index so they hold their place while a
 * row scrolls sideways. That also floated them above the sticky summary,
 * where they showed through as stray "A" and "B" chips over the totals.
 * The summary is the higher surface, so it gets the higher layer — and an
 * opaque background, since a translucent panel over scrolling seats reads
 * as a rendering fault. */
.emp-seatline__label {
	z-index: 1;
}

.emp-seatmap__summary {
	z-index: 20;
	background: var(--emp-c-canvas);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* --- Step 1: the same panel as step 2 -------------------------------- */

.emp-booking__form {
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-bands {
	margin-bottom: 0;
}

/* Bands are rows in a list, not free-floating cards inside a card. */
.emp-band__label {
	border-radius: var(--emp-r);
}

.emp-booking__qty {
	margin: var(--emp-s-5) 0 0;
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-booking__actions {
	margin: var(--emp-s-5) 0 0;
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-booking__actions .emp-button {
	width: 100%;
}

/* --- Step 3: details and payment ------------------------------------- */

.emp-checkout .emp-form {
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

/* Each heading opens a section, so it carries the rule rather than sitting
 * loose above one. */
.emp-checkout .emp-form__heading {
	margin: var(--emp-s-6) 0 var(--emp-s-4);
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* :first-of-type, not :first-child — hidden nonce and action fields come
 * first in the form, so the opening heading is never the first child and
 * kept drawing a rule above itself. */
.emp-checkout .emp-form__heading:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.emp-checkout .emp-summary {
	margin-bottom: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

/* The gateway choice is a card in its own right. */
.emp-gateway {
	padding: var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r);
	background: var(--emp-c-surface);
}

.emp-gateway__title {
	font-family: var(--emp-font-display);
	font-weight: 600;
}

.emp-gateway__desc {
	margin: var(--emp-s-1) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

/* One attendee per seat: each is a row, separated like the summary's lines. */
.emp-form__grid--attendee {
	padding: var(--emp-s-4) 0;
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-form__grid--attendee:last-of-type {
	border-bottom: 0;
}

.emp-checkout .emp-form > p:last-child,
.emp-checkout .emp-form__actions {
	margin: var(--emp-s-6) 0 0;
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-checkout .emp-form .emp-button--primary {
	width: 100%;
}

@media (max-width: 640px) {
	.emp-booking__form,
	.emp-checkout .emp-form {
		padding: var(--emp-s-4);
	}
}

/* =====================================================================
 * 27. Search bar: the stacked-field bug
 *
 * `.emp-search__field { flex: 1 1 10rem }` sets flex-basis on the MAIN
 * axis. Once the bar stacks, the main axis is vertical, so 10rem stopped
 * meaning "at least this wide" and started meaning "this tall" — every
 * field grew to ~146px and the homepage showed four inputs separated by
 * gaping holes.
 * ===================================================================== */

.emp-search--stacked .emp-search__field,
.emp-search--stacked .emp-search__submit {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.emp-search .emp-search__field,
	.emp-search .emp-search__submit {
		flex: 0 0 auto;
		width: 100%;
	}

	.emp-search__field input,
	.emp-search__field select {
		min-height: var(--emp-touch);
	}
}

/* =====================================================================
 * 28. Order confirmation
 * ===================================================================== */

.emp-confirmation {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-5);
}

.emp-confirmation__lead {
	margin: 0;
	color: var(--emp-c-muted);
}

.emp-confirmation .emp-facts,
.emp-confirmation .emp-ticketlist {
	margin: 0;
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-confirmation .emp-form__heading {
	margin: 0;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
}

/* One ticket per row, on the same hairline as every other list here. */
.emp-confirmation .emp-ticketlist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.emp-ticketlist__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-2) var(--emp-s-3);
	padding: var(--emp-s-4) 0;
	border-bottom: 1px solid var(--emp-c-line-soft);
}

.emp-ticketlist__item:first-child {
	padding-top: 0;
}

.emp-ticketlist__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.emp-ticketlist__name {
	font-family: var(--emp-font-display);
	font-weight: 600;
}

.emp-ticketlist__code {
	margin-left: auto;
	padding: 4px 10px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-surface);
	font-size: var(--emp-t-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

@media (max-width: 640px) {
	.emp-confirmation .emp-facts,
	.emp-confirmation .emp-ticketlist {
		padding: var(--emp-s-4);
	}

	/* The code is the row's subject on a phone, so it gets its own line
	 * rather than being squeezed against the name. */
	.emp-ticketlist__code {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

/* =====================================================================
 * 29. Staff sign in / sign up
 * ===================================================================== */

.emp-auth {
	display: flex;
	justify-content: center;
	padding: var(--emp-s-10) var(--emp-s-4);
	font-family: var(--emp-font);
	font-size: var(--emp-t-base);
}

.emp-auth__card {
	width: 100%;
	max-width: 420px;
	padding: var(--emp-s-8);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
}

.emp-auth__title {
	margin: 0 0 var(--emp-s-2);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.emp-auth__lead {
	margin: 0 0 var(--emp-s-6);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.55;
}

.emp-auth__actions {
	display: grid;
	gap: var(--emp-s-3);
}

/* WordPress's own login form, brought onto the same system. */
#emp-loginform p {
	margin: 0 0 var(--emp-s-4);
}

#emp-loginform label {
	display: block;
	margin-bottom: var(--emp-s-2);
	font-size: var(--emp-t-sm);
	font-weight: 600;
	color: var(--emp-c-ink-soft);
}

#emp-loginform input[type="text"],
#emp-loginform input[type="password"] {
	width: 100%;
	min-height: var(--emp-touch);
	padding: 10px 14px;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	font: inherit;
}

#emp-loginform input:focus-visible {
	outline: none;
	border-color: var(--emp-c-accent);
	box-shadow: var(--emp-ring);
}

#emp-loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--emp-s-2);
	font-weight: 400;
	color: var(--emp-c-muted);
}

#emp-loginform .login-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--emp-c-accent-dark);
}

#emp-loginform .login-submit {
	margin-bottom: 0;
}

#emp-loginform .button-primary,
#emp-loginform input[type="submit"] {
	width: 100%;
	min-height: var(--emp-touch);
	padding: 10px 22px;
	border: 1px solid var(--emp-c-accent);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-family: var(--emp-font);
	font-size: var(--emp-t-base);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--emp-d) var(--emp-ease);
}

#emp-loginform .button-primary:hover,
#emp-loginform input[type="submit"]:hover {
	background: var(--emp-c-accent-dark);
	border-color: var(--emp-c-accent-dark);
}

.emp-auth__alt {
	margin: var(--emp-s-4) 0 0;
	text-align: center;
	font-size: var(--emp-t-sm);
	color: var(--emp-c-muted);
}

.emp-auth__alt a {
	color: var(--emp-c-accent-text);
}

@media (max-width: 480px) {
	.emp-auth {
		padding: var(--emp-s-6) var(--emp-s-3);
	}

	.emp-auth__card {
		padding: var(--emp-s-5);
	}
}

/* =====================================================================
 * 30. Site-wide responsive sweep
 *
 * Anything that sets a rem flex-basis, a fixed grid track or a nowrap run
 * has to give way on a narrow screen. These are the blocks that had none.
 * ===================================================================== */

@media (max-width: 640px) {
	/* Filter and picker rows: stack rather than squeeze. */
	.emp-dashboard__filters,
	.emp-dashboard__picker,
	.emp-seatadmin__filters,
	.emp-vrow {
		flex-direction: column;
		align-items: stretch;
	}

	.emp-dashboard__filters > *,
	.emp-dashboard__picker > *,
	.emp-seatadmin__filters > * {
		width: 100%;
	}

	.emp-dashboard__filters select,
	.emp-dashboard__filters input,
	.emp-dashboard__picker select,
	.emp-dashboard__picker button {
		width: 100%;
		min-height: var(--emp-touch);
	}

	/* Card and tile grids: one column beats two cramped ones. */
	.emp-cards--grid,
	.emp-form__grid,
	.emp-tier__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.emp-tiles {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.emp-stats {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	}

	/* Anything tabular scrolls inside its own box, never the page. */
	.emp-tablewrap,
	.emp-seatgrid {
		max-width: 100%;
	}

	/* Event list rows read better stacked than as a squeezed two-column. */
	.emp-eventlist__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.emp-eventlist__price {
		justify-self: start;
	}

	/* Steps and legends wrap instead of forcing a horizontal scroll. */
	.emp-legend,
	.emp-steps,
	.emp-factbar {
		flex-wrap: wrap;
	}

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

	.emp-factbar__item + .emp-factbar__item {
		box-shadow: none;
		border-top: 1px solid var(--emp-c-line-soft);
	}

	/* Pagination and inline button rows. */
	.emp-pagination {
		flex-wrap: wrap;
		gap: var(--emp-s-2);
	}
}

/* Nothing on the site may push the page sideways. */
.emp-eventpage,
.emp-booking,
.emp-checkout,
.emp-seatmap,
.emp-auth,
.emp-staff {
	max-width: 100%;
}

/* =====================================================================
 * 31. Heading colour
 *
 * Section headings were Elementor's default #6EC1E4, which carries just
 * 2.02:1 on white — a real contrast failure, not only a taste one. The red
 * already used elsewhere on the site (#DD183B, the back-to-top control)
 * reads at 4.92:1 and passes AA.
 *
 * Component titles inside cards stay ink: a card whose every heading is red
 * competes with the buttons that are meant to be clicked.
 * ===================================================================== */

:root {
	--emp-c-heading: #dd183b;
	--emp-c-heading-dark: #ff5c7a; /* Same role, legible on the navy footer. */
}

.elementor-widget-heading .elementor-heading-title,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.emp-section-title,
.emp-hero-event__title,
.emp-lineup__title,
.emp-booking__title,
.emp-checkout__title,
.emp-auth__title,
.emp-submit__title {
	color: var(--emp-c-heading);
}

/* The header logo is a heading widget; it keeps its own colour. */
.elementor-location-header .elementor-widget-heading .elementor-heading-title,
.elementor-location-header .elementor-widget-heading .elementor-heading-title > a {
	color: var(--emp-c-ink);
}

/* On navy, the same red drops to 2.93:1. Footer headings stay white. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4 {
	color: #ffffff;
}

/* Hero sits on a photograph wash; ink keeps it readable over any image. */
.emp-hero__title {
	color: var(--emp-c-ink);
}

/* =====================================================================
 * 32. Carousel controls
 *
 * They were 62 × 40 with a 50% radius — a squashed ellipse, transparent,
 * and under the 44px touch floor.
 * ===================================================================== */

.emp-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--emp-s-3);
	margin-top: var(--emp-s-5);
}

.emp-carousel__btn {
	display: grid;
	place-items: center;
	width: var(--emp-touch);
	height: var(--emp-touch);
	min-width: var(--emp-touch);
	padding: 0;
	flex: 0 0 auto;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: 50%;
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--emp-e-1);
	transition:
		background-color var(--emp-d) var(--emp-ease),
		border-color var(--emp-d) var(--emp-ease),
		color var(--emp-d) var(--emp-ease),
		transform var(--emp-d) var(--emp-ease),
		box-shadow var(--emp-d) var(--emp-ease);
}

.emp-carousel__btn:hover:not(:disabled) {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	transform: translateY(-2px);
	box-shadow: var(--emp-e-2);
}

.emp-carousel__btn:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
	box-shadow: var(--emp-ring);
}

/* At either end the control is spent, and should look it. */
.emp-carousel__btn:disabled,
.emp-carousel__btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.emp-carousel__btn,
	.emp-carousel__btn:hover:not(:disabled) {
		transition: none;
		transform: none;
	}
}

/* =====================================================================
 * 33. Order confirmation
 *
 * The last screen of the purchase, and the one people screenshot. It gets
 * the same cards as the three steps before it: a success banner, the order
 * facts, then the tickets themselves as stubs with the code set apart.
 * ===================================================================== */

.emp-confirmation .emp-checkout__title {
	margin: 0 0 var(--emp-s-4);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* The outcome, stated once and unmistakably. */
.emp-confirmation__lead {
	display: flex;
	align-items: flex-start;
	gap: var(--emp-s-3);
	margin: 0 0 var(--emp-s-6);
	padding: var(--emp-s-5);
	border: 1px solid rgba(22, 163, 74, 0.3);
	border-left-width: 4px;
	border-left-color: var(--emp-green-600);
	border-radius: var(--emp-r);
	background: var(--emp-green-50);
	color: var(--emp-green-700);
	font-size: var(--emp-t-base);
	font-weight: 500;
}

.emp-confirmation__lead::before {
	content: "\2713";
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--emp-green-700);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* An order still awaiting a bank transfer is not a success yet. */
.emp-confirmation .emp-status--soldout ~ .emp-confirmation__lead,
.emp-confirmation__lead.is-pending {
	border-color: var(--emp-amber-200);
	border-left-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	color: var(--emp-c-accent-text);
}

.emp-confirmation__lead.is-pending::before {
	content: "\21BB";
	background: var(--emp-c-accent-dark);
}

/* Order facts as a card, on the same rules as the checkout summary. */
.emp-confirmation .emp-facts {
	gap: 0;
	margin: 0 0 var(--emp-s-6);
	padding: var(--emp-s-2) var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-confirmation .emp-facts__term,
.emp-confirmation .emp-facts__value {
	padding: var(--emp-s-4) 0;
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-confirmation .emp-facts__term:first-of-type,
.emp-confirmation .emp-facts__term:first-of-type + .emp-facts__value {
	border-top: 0;
}

.emp-confirmation .emp-facts__value {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.emp-confirmation .emp-form__heading {
	margin: 0 0 var(--emp-s-4);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
}

/* Tickets as stubs: the code is what gets scanned, so it is set apart from
 * the name rather than trailing it as another line of text. */
.emp-confirmation .emp-ticketlist {
	margin: 0;
	padding: var(--emp-s-2) var(--emp-s-5);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	list-style: none;
}

.emp-confirmation .emp-ticketlist__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-2) var(--emp-s-3);
	padding: var(--emp-s-4) 0;
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-confirmation .emp-ticketlist__item:first-child {
	border-top: 0;
}

.emp-confirmation .emp-ticketlist__name {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
	font-weight: 600;
}

.emp-confirmation .emp-ticketlist__type {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-confirmation .emp-ticketlist__code {
	margin-left: auto;
	padding: 6px 12px;
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.emp-confirmation .emp-facts,
	.emp-confirmation .emp-ticketlist {
		padding-inline: var(--emp-s-4);
	}

	.emp-confirmation .emp-ticketlist__code {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}

/* =====================================================================
 * 34. Event information rows
 *
 * The practical facts an organizer fills in per event - language, genre,
 * age guidance, refunds, door time. Laid out as label-over-value rows with
 * a tinted icon tile, so the panel stays readable at two columns on desktop
 * and one on a phone.
 * ===================================================================== */

/* Two fixed columns rather than auto-fit: the row dividers below depend on
 * knowing exactly which items sit in the top row. */
.emp-eventinfo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--emp-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-eventinfo__item {
	display: flex;
	align-items: center;
	gap: var(--emp-s-4);
	padding: var(--emp-s-3) 0;
	min-width: 0;
}

/* A hairline between stacked rows, never above the first in a column. The
 * grid can reflow to one or two columns, so the rule is drawn on the row
 * itself rather than as a shared border. */
.emp-eventinfo__item + .emp-eventinfo__item {
	border-top: 1px solid var(--emp-c-line-soft);
}

@media (min-width: 620px) {
	.emp-eventinfo {
		grid-template-columns: 1fr 1fr;
	}

	/* The second item now shares the top row, so it keeps no divider above. */
	.emp-eventinfo__item:nth-child(2) {
		border-top: 0;
	}
}

.emp-eventinfo__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--emp-r-sm);
	border: 1px solid var(--emp-c-line);
	background: var(--emp-c-surface);
	color: var(--emp-c-muted);
}

.emp-eventinfo__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.emp-eventinfo__label {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.3;
}

.emp-eventinfo__value {
	color: var(--emp-c-ink);
	font-size: var(--emp-t-base);
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: break-word;
}

/* =====================================================================
 * 35. Terms & conditions box
 *
 * The same card as the description so the two read as siblings, with a
 * heading and slightly quieter body — terms are reference material, not
 * the pitch.
 * ===================================================================== */

.emp-eventbody__title {
	margin: 0 0 var(--emp-s-3);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.emp-eventbody--terms {
	background: var(--emp-c-surface);
}

.emp-eventbody--terms .emp-eventbody__inner {
	color: var(--emp-c-ink-soft);
	font-size: var(--emp-t-sm);
	line-height: 1.65;
}

.emp-eventbody--terms .emp-eventbody__inner ul,
.emp-eventbody--terms .emp-eventbody__inner ol {
	margin: 0;
	padding-left: 1.15em;
}

.emp-eventbody--terms .emp-eventbody__inner li + li {
	margin-top: var(--emp-s-2);
}

/* Terms collapse tighter than the description: two clauses are enough to
 * show what kind of rules these are. */
.emp-eventbody--terms {
	--emp-clamp: 150px;
}

/* =====================================================================
 * 36. My tickets
 *
 * The customer's own wallet. Read on a phone, in a queue, often on a bad
 * connection - so the QR is the largest thing on the single view and the
 * list leads with what identifies a ticket rather than with chrome.
 * ===================================================================== */

/* My tickets and My account are two tabs of one area, so they have to
 * share a measure - at different widths the tab bar jumps sideways as you
 * switch between them. Both were written separately, at 940 and 1040. */
.emp-tickets {
	max-width: var(--emp-account-measure);
	margin: 0 auto;
}

.emp-tickets__head {
	margin-bottom: var(--emp-s-6);
}

.emp-tickets__title {
	margin: 0 0 var(--emp-s-2);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
}

.emp-tickets__lead {
	margin: 0;
	max-width: 60ch;
	color: var(--emp-c-muted);
}

/* Section headings, not labels stuck to the card below them. The margin
 * here used to reference --emp-s-7, which was never defined: one bad value
 * invalidates the whole shorthand, so both the space above AND below the
 * heading computed to zero and "Past events" sat against the card above it.
 * Adjacent margins collapse, so these are the gaps you actually see. */
.emp-tickets__group {
	margin: var(--emp-s-12) 0 var(--emp-s-5);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
}

/* The first heading follows the tab bar rather than a group of cards, and
 * the bar's own bottom margin already separates them. */
.emp-accountnav + .emp-tickets__group {
	margin-top: var(--emp-s-8);
}

.emp-tickets__back {
	margin: 0 0 var(--emp-s-4);
	font-size: var(--emp-t-sm);
}

/* --- The list ---------------------------------------------------------- */

.emp-ticketcards {
	display: grid;
	gap: var(--emp-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-ticketcards--past {
	opacity: 0.72;
}

.emp-ticketcard__link {
	display: flex;
	gap: var(--emp-s-5);
	padding: var(--emp-s-4);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.emp-ticketcard__link:hover,
.emp-ticketcard__link:focus-visible {
	border-color: var(--emp-c-line-strong);
	box-shadow: var(--emp-e-2);
	transform: translateY(-1px);
}

.emp-ticketcard__art {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 84px;
	height: 112px;
	overflow: hidden;
	border-radius: var(--emp-r);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
}

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

.emp-ticketcard__initials {
	font-family: var(--emp-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.emp-ticketcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;

	/* Takes the slack so the action below can sit at the far edge. */
	flex: 1 1 auto;
}


/* --- Several tickets to one event ------------------------------------ */
/* The card carries the chrome itself here, because the link is no longer
 * wrapped around the whole thing - each ticket row is its own link, and
 * anchors cannot be nested inside one another. */

.emp-ticketcard--group {
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	overflow: hidden;
}

.emp-ticketcard__top {
	display: flex;
	gap: var(--emp-s-5);
	padding: var(--emp-s-4);
}

.emp-ticketcard__count {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--emp-c-accent-text);
	margin-bottom: 2px;
}

.emp-ticketgroup {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--emp-c-line-soft);
}

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

.emp-ticketgroup__item + .emp-ticketgroup__item {
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-ticketgroup__item::marker {
	content: none;
}

.emp-ticketgroup__row {
	display: flex;
	align-items: center;
	gap: var(--emp-s-3);

	/* A comfortable target even on the shortest row. */
	min-height: 52px;
	padding: 10px var(--emp-s-4);

	color: var(--emp-c-ink);
	font-family: var(--emp-font);
	font-size: var(--emp-t-sm);
	text-decoration: none;
	transition: background-color 160ms ease;
}

.emp-ticketgroup__row:hover,
.emp-ticketgroup__row:focus-visible {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-ticketgroup__row:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: -2px;
}

.emp-ticketgroup__seat {
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.emp-ticketgroup__code {
	color: var(--emp-c-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Pushes the chip and the chevron to the far edge. */
	margin-right: auto;
}

.emp-ticketgroup__row .emp-chip {
	align-self: center;
	flex: none;
}

.emp-ticketgroup__row .emp-ticketcard__chev {
	flex: none;
	color: var(--emp-c-accent-text);
}

.emp-ticketgroup__row:hover .emp-ticketcard__chev,
.emp-ticketgroup__row:focus-visible .emp-ticketcard__chev {
	transform: translateX(3px);
}

/* On a phone the tier takes its own line rather than squeezing onto one
 * with the code and truncating the thing people read out at the door. */
@media (max-width: 560px) {
	.emp-ticketgroup__row {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.emp-ticketgroup__seat {
		flex: 1 1 100%;
	}
}

/* Sign-in details is a single form with no sidebar beside it. */
.emp-account__single {
	max-width: 640px;
}

/* The card was always a link; nothing said so, and on a wide row the right
 * third was empty. */
.emp-ticketcard__go {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	align-self: center;
	padding-left: var(--emp-s-4);
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.emp-ticketcard__chev {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform 180ms ease;
}

.emp-ticketcard__link:hover .emp-ticketcard__chev,
.emp-ticketcard__link:focus-visible .emp-ticketcard__chev {
	transform: translateX(3px);
}

/* Below the card's two-column width the label is noise; the chevron alone
 * still reads as "there is more this way". */
@media (max-width: 560px) {
	.emp-ticketcard__golabel {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.emp-ticketcard__go {
		padding-left: var(--emp-s-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-ticketcard__chev {
		transition: none;
	}
}

.emp-ticketcard__event {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
	line-height: 1.25;
}

.emp-ticketcard__when,
.emp-ticketcard__where {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-ticketcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2) var(--emp-s-4);
	margin-top: var(--emp-s-2);
}

.emp-ticketcard__seat {
	font-weight: 600;
}

.emp-ticketcard__code {
	color: var(--emp-c-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--emp-t-sm);
}

/* Status carries a word as well as a colour. */
.emp-chip {
	align-self: flex-start;
	margin-bottom: 2px;
	padding: 3px 10px;
	border-radius: var(--emp-r-pill);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.emp-chip.is-valid {
	background: var(--emp-green-50);
	color: var(--emp-green-700);
}

.emp-chip.is-used {
	background: var(--emp-slate-100);
	color: var(--emp-slate-500);
}

.emp-chip.is-pending {
	background: var(--emp-amber-50);
	color: var(--emp-amber-800);
}

.emp-chip.is-past {
	background: var(--emp-slate-100);
	color: var(--emp-slate-500);
}

/* --- The single ticket -------------------------------------------------- */

.emp-ticketview {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: var(--emp-s-6);
	align-items: start;
}

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

.emp-ticketview__pass {
	padding: var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
	text-align: center;
}

.emp-ticketview__event {
	margin: var(--emp-s-2) 0 2px;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	line-height: 1.25;
}

.emp-ticketview__when {
	margin: 0 0 var(--emp-s-5);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-ticketview__qr {
	margin: 0 auto;
	max-width: 260px;
	padding: var(--emp-s-3);
	border-radius: var(--emp-r);
	background: #ffffff;
}

.emp-ticketview__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.emp-ticketview__code {
	margin: var(--emp-s-4) 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--emp-t-lg);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.emp-ticketview__hint {
	margin: 4px 0 var(--emp-s-4);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-ticketfacts {
	margin: 0 0 var(--emp-s-5);
	padding: var(--emp-s-5) var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
}

.emp-ticketfacts__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2) var(--emp-s-5);
	padding: var(--emp-s-3) 0;
}

.emp-ticketfacts__row + .emp-ticketfacts__row {
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-ticketfacts dt {
	flex: 0 0 140px;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-ticketfacts dd {
	flex: 1 1 200px;
	margin: 0;
	font-weight: 600;
}

.emp-ticketactions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3);
}

.emp-ticketactions .emp-button {
	flex: 1 1 200px;
	justify-content: center;
}

/* Apple's own guidance is a black pill; it is recognised as a system
 * affordance, so it is left alone rather than restyled to the brand. */
.emp-button--wallet {
	background: #000000;
	border-color: #000000;
	color: #ffffff;
}

.emp-button--wallet:hover,
.emp-button--wallet:focus-visible {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #ffffff;
}

.emp-ticketterms {
	margin-top: var(--emp-s-5);
	font-size: var(--emp-t-sm);
}

.emp-ticketterms summary {
	cursor: pointer;
	font-weight: 600;
}

.emp-ticketterms__body {
	margin-top: var(--emp-s-3);
	color: var(--emp-c-ink-soft);
}

.emp-findtickets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--emp-s-3);
	margin-top: var(--emp-s-6);
	padding: var(--emp-s-5) var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-surface);
}

.emp-findtickets .emp-field {
	flex: 1 1 260px;
	margin: 0;
}

.emp-findtickets .emp-status {
	flex: 1 1 100%;
	margin: 0;
}

/* --- Full-screen code --------------------------------------------------- */

/* White ground, nothing else on screen, and the screen kept awake: the three
 * things that decide whether a phone scans first time in a queue. */
.emp-qrfull {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--emp-s-5);
	padding: var(--emp-s-6);
	background: #ffffff;
}

.emp-qrfull svg {
	width: min(86vw, 86vh, 560px);
	height: auto;
}

.emp-qrfull__code {
	margin: 0;
	color: #000000;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: clamp(18px, 5vw, 26px);
	font-weight: 600;
	letter-spacing: 0.08em;
}

body.emp-qrfull-open {
	overflow: hidden;
}

/* --- Confirmation: on to the tickets ---------------------------------- */

.emp-confirmation__actions {
	margin-top: var(--emp-s-6);
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line);
}

.emp-confirmation__actions .emp-button {
	width: 100%;
	justify-content: center;
}

.emp-confirmation__note {
	margin: var(--emp-s-3) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.55;
}

@media (min-width: 620px) {
	.emp-confirmation__actions .emp-button {
		width: auto;
		min-width: 260px;
	}
}

/* Dashboard: the operator's own tickets, kept out of the way of the tools. */

.emp-dashboard__own {
	margin: 0 0 var(--emp-s-4);
	font-size: var(--emp-t-sm);
	text-align: right;
}

/* =====================================================================
 * 37. My account
 *
 * Details and sign-in on the left, order history alongside. Forms first
 * because that is what people came to change; history is reference.
 * ===================================================================== */

.emp-account {
	max-width: var(--emp-account-measure);
	margin: 0 auto;
}

/* No rule under this any more: the tab bar directly below carries its own
 * bottom border, and two hairlines 20px apart read as an accident. The
 * 24px matches .emp-tickets__head so the two pages share a rhythm as well
 * as a measure. */
.emp-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-4);
	margin-bottom: var(--emp-s-6);
}

.emp-account__avatar {
	border-radius: 50%;
}

.emp-account__id {
	flex: 1 1 240px;
	min-width: 0;
}

.emp-account__title {
	margin: 0 0 2px;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
}

.emp-account__lead {
	margin: 0;
	color: var(--emp-c-muted);
	overflow-wrap: break-word;
}

.emp-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3);
	margin: 0;
}

.emp-account__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--emp-s-5);
	align-items: start;
}

@media (min-width: 880px) {
	.emp-account__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.emp-account__main {
	display: flex;
	flex-direction: column;
	gap: var(--emp-s-5);
	min-width: 0;
}

.emp-account__panel {
	min-width: 0;
}

.emp-account__hint {
	margin: 0 0 var(--emp-s-4);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	line-height: 1.55;
}

/* 8px put the submit hard against the last input, so it read as part of
 * the field rather than as the thing that commits the form. */
.emp-account__panel .emp-button {
	margin-top: var(--emp-s-5);
}

/* --- Order history ------------------------------------------------------ */

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

.emp-orderlist__item {
	padding: var(--emp-s-4) 0;
}

.emp-orderlist__item + .emp-orderlist__item {
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-orderlist__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-3);
}

.emp-orderlist__ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--emp-t-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.emp-orderlist__event {
	margin: var(--emp-s-2) 0 0;
	font-weight: 600;
	line-height: 1.3;
}

.emp-orderlist__meta {
	margin: 2px 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-orderlist__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-4);
	margin: var(--emp-s-3) 0 0;
	font-size: var(--emp-t-sm);
}

.emp-tickets__account {
	margin: var(--emp-s-3) 0 0;
	font-size: var(--emp-t-sm);
}

/* =====================================================================
 * 38. Organizer dashboard: tabs, sales tables, seat board
 *
 * Organizers never see wp-admin, so everything they need is here and has
 * to read like the rest of the site rather than like an admin screen.
 * ===================================================================== */

.emp-dashtabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-1);
	margin: 0 0 var(--emp-s-5);
	padding-bottom: var(--emp-s-2);
	border-bottom: 1px solid var(--emp-c-line);
}

.emp-dashtabs__tab {
	padding: 10px 16px;
	border-radius: var(--emp-r-sm) var(--emp-r-sm) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.emp-dashtabs__tab:hover,
.emp-dashtabs__tab:focus-visible {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
}

/* The active tab is marked by weight and a rule, not colour alone. */
.emp-dashtabs__tab.is-active {
	color: var(--emp-c-ink);
	box-shadow: inset 0 -3px 0 var(--emp-c-accent);
}

/* Links that leave the dashboard sit apart from the tabs proper. */
.emp-dashtabs__tab--out {
	margin-left: auto;
	font-weight: 500;
}

.emp-dashtabs__tab--out + .emp-dashtabs__tab--out {
	margin-left: 0;
}

.emp-dashboard__own {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-2);
	justify-content: flex-end;
	margin: 0 0 var(--emp-s-4);
	font-size: var(--emp-t-sm);
}

.emp-dashboard__heading {
	margin: var(--emp-s-6) 0 var(--emp-s-3);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
}

/* --- Tables ------------------------------------------------------------- */

.emp-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
}

.emp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--emp-t-sm);
}

.emp-table th,
.emp-table td {
	padding: var(--emp-s-3) var(--emp-s-4);
	text-align: left;
	white-space: nowrap;
}

.emp-table thead th {
	border-bottom: 1px solid var(--emp-c-line);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.emp-table tbody tr + tr td {
	border-top: 1px solid var(--emp-c-line-soft);
}

/* Figures line up column to column. */
.emp-table td:nth-child(n + 2) {
	font-variant-numeric: tabular-nums;
}

.emp-table__total td {
	border-top: 2px solid var(--emp-c-line) !important;
	font-weight: 700;
}

/* --- The seat board ------------------------------------------------------ */

.emp-seatboard .emp-vcard {
	padding: var(--emp-s-4);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	overflow-x: auto;
}

.emp-seatboard .emp-seatadmin__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3);
	margin-bottom: var(--emp-s-4);
}

.emp-seatboard .emp-seatadmin__section {
	margin: var(--emp-s-5) 0 var(--emp-s-2);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-base);
}

.emp-seatboard .emp-seatadmin__row {
	display: flex;
	align-items: center;
	gap: var(--emp-s-3);
	padding: var(--emp-s-2) 0;
}

.emp-seatboard .emp-seatadmin__rowlabel {
	flex: 0 0 34px;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	font-weight: 700;
}

.emp-seatboard .emp-seatadmin__seats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Each seat is a submit button, so it has to look and behave like one. */
.emp-seatboard .emp-seatadmin__seats button {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-xs);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	font-size: var(--emp-t-xs);
	font-weight: 600;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.emp-seatboard .emp-seatadmin__seats button:hover:not(:disabled),
.emp-seatboard .emp-seatadmin__seats button:focus-visible:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: var(--emp-e-2);
}

.emp-seatboard .emp-seatadmin__seats button:disabled {
	cursor: not-allowed;
	opacity: 0.85;
}

.emp-seatboard .emp-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-3);
	margin: 0 0 var(--emp-s-4);
	padding: 0;
	list-style: none;
}

.emp-seatboard .emp-tile {
	flex: 1 1 110px;
	padding: var(--emp-s-3) var(--emp-s-4);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r);
	background: var(--emp-c-surface);
}

.emp-seatboard .emp-tile__value {
	display: block;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.emp-seatboard .emp-tile__label {
	display: block;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.emp-dashtabs__tab--out {
		margin-left: 0;
	}

	.emp-dashboard__own {
		justify-content: flex-start;
	}
}

/* =====================================================================
 * 39. Submit an event: two views, and a form in sections
 *
 * The list and the form used to sit stacked on one page, so it was never
 * obvious which one you were meant to be filling in. They are now separate
 * views behind a tab bar, and the form is grouped into numbered fieldsets
 * rather than one uninterrupted column of twenty inputs.
 * ===================================================================== */

.emp-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emp-s-1);
	margin: 0 0 var(--emp-s-6);
	padding-bottom: var(--emp-s-2);
	border-bottom: 1px solid var(--emp-c-line);
}

.emp-subtabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--emp-s-2);
	min-height: 44px;
	padding: 10px 18px;
	border-radius: var(--emp-r-sm) var(--emp-r-sm) 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-base);
	font-weight: 600;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.emp-subtabs__tab:hover,
.emp-subtabs__tab:focus-visible {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
}

/* Weight and a rule mark the active tab, so it does not rely on colour. */
.emp-subtabs__tab.is-active {
	color: var(--emp-c-ink);
	box-shadow: inset 0 -3px 0 var(--emp-c-accent);
}

.emp-subtabs__count {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-surface);
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.emp-subtabs__tab.is-active .emp-subtabs__count {
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

/* --- Form header ------------------------------------------------------- */

.emp-submit__head {
	max-width: 62ch;
	margin-bottom: var(--emp-s-6);
	padding-left: var(--emp-s-5);
	border-left: 3px solid var(--emp-c-accent);
}

.emp-submit__title {
	margin: 0 0 var(--emp-s-2);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
}

.emp-submit__lead {
	margin: 0;
	color: var(--emp-c-muted);
	line-height: 1.6;
}

/* --- Sections ----------------------------------------------------------- */

/* Screen-reader-only, for the legend that names each group. */
.emp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Three planes, not one. White fields on a white card on a white page gave
 * the eye nothing to hold; each section now has a warm header band, a white
 * body, and tinted fields that turn white as you type in them. */
.emp-formsection {
	/* A fieldset will not shrink below its content without this, so the
	 * ticket grid inside would force the page to scroll sideways. */
	min-width: 0;
	margin: 0 0 var(--emp-s-5);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	transition: box-shadow var(--emp-d-fast) var(--emp-ease);
}

/* The section being filled in lifts, so it is obvious where you are in a
 * long form without a progress bar shouting about it. */
.emp-formsection:focus-within {
	box-shadow: var(--emp-e-2);
}

.emp-formsection__head {
	display: flex;
	align-items: flex-start;
	gap: var(--emp-s-4);
	padding: var(--emp-s-5) var(--emp-s-6);
	border-bottom: 1px solid var(--emp-amber-200);
	background: var(--emp-c-accent-soft);
}

.emp-formsection__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.emp-formsection__heading {
	min-width: 0;
}

.emp-formsection__title {
	margin: 3px 0 0;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 600;
	line-height: 1.25;
}

/* Slate-600 rather than the usual muted grey: on this warm tint the lighter
 * one measures 4.48:1 and misses the contrast floor. */
.emp-formsection__hint {
	margin: 4px 0 0;
	max-width: 62ch;
	color: var(--emp-slate-600);
	font-size: var(--emp-t-sm);
	line-height: 1.55;
}

.emp-formsection__body {
	padding: var(--emp-s-6);
}

.emp-formsection__body > *:first-child {
	margin-top: 0;
}

.emp-formsection__body > *:last-child {
	margin-bottom: 0;
}

/* Fields read as fields: a tint at rest, white once focused. */
.emp-formsection .emp-field input,
.emp-formsection .emp-field select,
.emp-formsection .emp-field textarea {
	background: var(--emp-c-surface);
}

.emp-formsection .emp-field input:focus-visible,
.emp-formsection .emp-field select:focus-visible,
.emp-formsection .emp-field textarea:focus-visible {
	background: var(--emp-c-canvas);
}

.emp-form__subheading {
	margin: var(--emp-s-6) 0 var(--emp-s-3);
	padding-top: var(--emp-s-5);
	border-top: 1px solid var(--emp-c-line-soft);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--emp-c-muted);
}

/* --- Submit bar ---------------------------------------------------------- */

/* The one dark moment on the page: it anchors the foot of a long form and
 * makes the commit point unmistakable, instead of the page fading out into
 * more white. */
.emp-submit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emp-s-3);
	padding: var(--emp-s-6);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-ink);
	box-shadow: var(--emp-e-2);
}

.emp-submit__actions .emp-button--ghost {
	border-color: rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #ffffff;
}

.emp-submit__actions .emp-button--ghost:hover,
.emp-submit__actions .emp-button--ghost:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.emp-submit__actions .emp-button {
	min-width: 180px;
	justify-content: center;
}

.emp-submit__note {
	flex: 1 1 100%;
	margin: 0;
	color: var(--emp-slate-300);
	font-size: var(--emp-t-sm);
}

.emp-submit__empty {
	padding: var(--emp-s-8) var(--emp-s-6);
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-surface);
	text-align: center;
}

.emp-submit__empty p:first-child {
	margin-top: 0;
	color: var(--emp-c-muted);
}

@media (max-width: 640px) {
	/* Padding lives on the head and body now, not the fieldset - putting it
	 * back here would inset the header band instead of letting it run to the
	 * card's edges. */
	.emp-formsection__head,
	.emp-formsection__body {
		padding: var(--emp-s-5) var(--emp-s-4);
	}

	.emp-submit__actions {
		padding: var(--emp-s-5) var(--emp-s-4);
	}

	.emp-submit__actions .emp-button {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* =====================================================================
 * 40. Event page: secondary section navigation
 *
 * A jump bar for a page that can run to five or six blocks. It is printed
 * from the blocks that actually rendered, so it never offers a link to a
 * section an organizer left empty.
 *
 * The two offsets it depends on - the site header, and the bar's own height
 * - are measured at runtime and written to the two custom properties below,
 * so nothing here hard-codes a number a header edit would silently break.
 * The values here are only the pre-script fallback, taken from the header as
 * it stands: 160px on desktop, 80px once Elementor switches to its mobile
 * header.
 * ===================================================================== */

:root {
	--emp-header-h: 160px;
	--emp-secnav-h: 52px;
}

@media (max-width: 767px) {
	:root {
		--emp-header-h: 80px;
		--emp-secnav-h: 46px;
	}
}

/* Every anchor the bar can reach clears the fixed header AND the bar
 * itself, or a jump would land the heading underneath both. */
.emp-eventnav-scope [id^="emp-sec-"] {
	scroll-margin-top: calc( var(--emp-header-h) + var(--emp-secnav-h) + 16px );
}

.emp-secnav {
	position: sticky;
	top: var(--emp-header-h);

	/* Under the site header's 99, above the page's own panels. */
	z-index: 90;

	margin: 0 0 var(--emp-s-6);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);

	/* Keeps the swiped row inside the rounded corners. */
	overflow: hidden;
}

.emp-secnav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	margin: 0;
	padding: 0 var(--emp-s-6);
	list-style: none;

	/* One row, always. On a narrow screen the row is swiped rather than
	 * wrapped - a wrapped jump bar pushes the page content down by a whole
	 * line every time an event has one section more than the last. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.emp-secnav__list::-webkit-scrollbar {
	display: none;
}

.emp-secnav__item {
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-secnav__item::marker {
	content: none;
}

.emp-secnav__link {
	display: block;
	padding: 15px 2px 13px;
	border-bottom: 2px solid transparent;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.emp-secnav__link:hover,
.emp-secnav__link:focus-visible {
	color: var(--emp-c-ink);
	border-bottom-color: var(--emp-c-line-strong);
	text-decoration: none;
}

.emp-secnav__link:focus-visible {
	outline: 2px solid var(--emp-c-accent);

	/* Inset, because the bar clips its overflow. */
	outline-offset: -2px;
}

.emp-secnav__link.is-active {
	color: var(--emp-c-ink);
	font-weight: 600;
	border-bottom-color: var(--emp-c-accent);
}

/* A fade on whichever edge the row can still be swiped towards, so it
 * reads as scrollable rather than truncated. Both classes are set by the
 * script from the real scroll position. */
.emp-secnav.is-fade-end:not(.is-fade-start) .emp-secnav__list {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}

.emp-secnav.is-fade-start:not(.is-fade-end) .emp-secnav__list {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
	mask-image: linear-gradient(to right, transparent 0, #000 36px);
}

.emp-secnav.is-fade-start.is-fade-end .emp-secnav__list {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

@media (max-width: 767px) {
	.emp-secnav {
		margin-bottom: var(--emp-s-5);
		border-radius: var(--emp-r-xs);
	}

	.emp-secnav__list {
		gap: 20px;
		padding: 0 16px;
	}

	.emp-secnav__link {
		padding: 13px 2px 11px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-secnav__link {
		transition: none;
	}
}

@media print {
	.emp-secnav {
		display: none;
	}
}

/* =====================================================================
 * 41. Dark bands
 *
 * The homepage ran nine sections of white and near-white in a row, so
 * there was nothing for the eye to rest against until the navy footer.
 * Two ink bands give it a spine: one under the category grid, one under
 * the "list your event" call to action, which is the one block on the
 * page whose whole job is to stop the scroll.
 *
 * Two, not three. A third band starts to read as a dark theme rather
 * than as emphasis, and anything adjacent to the footer merges into it.
 *
 * .emp-dark is the reusable part - put it in an Elementor container's
 * CSS Classes field and it works anywhere. The bindings at the end of
 * this section are only there because the two homepage containers do
 * not carry the class yet; delete a binding once its container does.
 * ===================================================================== */

.emp-dark {
	/* The wash is amber-400 at 13%, bled in from the top corner so the
	 * band reads as this brand rather than as generic dark mode. */
	background-color: var(--emp-c-ink);
	background-image: radial-gradient(
		1200px 320px at 18% 0%,
		rgba(247, 150, 28, 0.13),
		transparent 62%
	);
}

/* The three-class form is deliberate: Elementor prints
 * .elementor-widget-heading .elementor-heading-title in the per-page
 * stylesheet, which loads after this file, so an equally specific rule
 * here would lose on order alone. */
.emp-dark h1,
.emp-dark h2,
.emp-dark h3,
.emp-dark h4,
.emp-dark .elementor-heading-title,
.emp-dark .elementor-widget-heading .elementor-heading-title {
	color: var(--emp-slate-50);
}

.emp-dark p,
.emp-dark .elementor-widget-text-editor {
	color: var(--emp-slate-300);
}

/* --- Tiles on ink ---------------------------------------------------- */
/* A white card on ink is a glare. These are the ground lifted slightly,
 * which is why the border does the work of separating them. */

.emp-dark .emp-tile {
	background: rgba(255, 255, 255, 0.055);
	border-color: rgba(255, 255, 255, 0.13);
	box-shadow: none;
}

.emp-dark .emp-tile:hover {
	background: rgba(247, 150, 28, 0.14);
	border-color: var(--emp-c-accent);
	box-shadow: none;
}

.emp-dark .emp-tile__name {
	color: var(--emp-slate-50);
}

.emp-dark .emp-tile__count {
	color: var(--emp-slate-400);
}

.emp-dark .emp-tile__avatar {
	border-color: rgba(255, 255, 255, 0.18);
}

.emp-dark .emp-tile:focus-visible {
	outline-color: var(--emp-c-accent);
}

/* --- Page bindings --------------------------------------------------- */
/* Homepage: "Browse by category" and the "Hosting something?" call to
 * action. Keyed to the container ids because the class is not in the
 * Elementor settings yet. */

.elementor-element-5bb8964,
.elementor-element-1cb2e01 {
	/* !important because Elementor prints its own container rules at a
	 * higher specificity than anything a plugin stylesheet can reach
	 * without naming the page id too. */
	background-color: var(--emp-c-ink) !important;
	background-image: radial-gradient(
		1200px 320px at 18% 0%,
		rgba(247, 150, 28, 0.13),
		transparent 62%
	) !important;
}

/* The category container was built with no top padding, because on a
 * white page it simply flowed on from the section above it. Give a band
 * an edge and that asymmetry shows: 0 above the heading, 64 below the
 * tiles. Both sides are set here rather than only the missing one, so a
 * later edit to one of them cannot reintroduce the imbalance. The CTA
 * band already sits at 64/64 and is left alone. */
.elementor-element-5bb8964 {
	--padding-top: 64px !important;
	--padding-bottom: 64px !important;
}

@media (max-width: 767px) {
	.elementor-element-5bb8964 {
		--padding-top: 44px !important;
		--padding-bottom: 44px !important;
	}
}

/* Elementor gives every container flex-wrap: wrap, which is harmless
 * until one of them holds a CSS grid whose row count depends on the
 * width. Wrapping a column flex container then reserves height for the
 * tallest arrangement the grid could take rather than the one it
 * actually took, and the band was left with 249px of dead ink below the
 * last tile on a phone. The children here are a single stacked column;
 * they have nothing to wrap into. */
.elementor-element-5bb8964 > .e-con-inner {
	flex-wrap: nowrap !important;
}

/* The search band was built at 88px top and bottom with no mobile
 * value, so on a 440px screen a third of the band was empty ground. */
@media (max-width: 767px) {
	.elementor-element-ca7b4de {
		--padding-top: 48px !important;
		--padding-bottom: 48px !important;
	}
}

.elementor-element-5bb8964 h2,
.elementor-element-5bb8964 .elementor-heading-title,
.elementor-element-5bb8964 .elementor-widget-heading .elementor-heading-title,
.elementor-element-1cb2e01 h2,
.elementor-element-1cb2e01 .elementor-heading-title,
.elementor-element-1cb2e01 .elementor-widget-heading .elementor-heading-title {
	color: var(--emp-slate-50);
}

.elementor-element-1cb2e01 p,
.elementor-element-1cb2e01 .elementor-widget-text-editor {
	color: var(--emp-slate-300);
}

.elementor-element-5bb8964 .emp-tile {
	background: rgba(255, 255, 255, 0.055);
	border-color: rgba(255, 255, 255, 0.13);
	box-shadow: none;
}

.elementor-element-5bb8964 .emp-tile:hover {
	background: rgba(247, 150, 28, 0.14);
	border-color: var(--emp-c-accent);
	box-shadow: none;
}

.elementor-element-5bb8964 .emp-tile__name {
	color: var(--emp-slate-50);
}

.elementor-element-5bb8964 .emp-tile__count {
	color: var(--emp-slate-400);
}

/* Five categories in a four-column grid stranded one tile on a row of
 * its own. Against white that was just whitespace; against ink it is a
 * hole. auto-fit gives the row exactly as many columns as there are
 * tiles that fit, so a partial row cannot happen at this width. The
 * selector carries the container id as well as the class so it outranks
 * the fixed column count Elementor prints for the widget's own control. */
.elementor-element-5bb8964 .elementor-widget-container .emp-tiles {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

/* A 160px floor puts two tracks over the width of a 375px phone, which
 * would drop the grid to a single tile per row - narrower than it was
 * before. 132px keeps the pair. */
@media (max-width: 767px) {
	.elementor-element-5bb8964 .elementor-widget-container .emp-tiles {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
	}
}

/* --- The booking title row ------------------------------------------- */
/* Title left, seating-plan link right. Wraps rather than squeezing, so a
 * long category name on a phone pushes the link onto its own line instead
 * of colliding with it. */

.emp-booking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--emp-s-3) var(--emp-s-5);
}

.emp-booking__head .emp-booking__title {
	margin: 0;
}

.emp-booking__layout {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	/* A comfortable target without looking like a button - the primary
	 * action on this screen is choosing a ticket, not reading the plan. */
	padding: 8px 12px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.emp-booking__layout:hover,
.emp-booking__layout:focus-visible {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	color: var(--emp-c-accent-text);
	text-decoration: none;
}

.emp-booking__layout:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
}

.emp-booking__layoutico {
	width: 17px;
	height: 17px;
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	.emp-booking__layout {
		transition: none;
	}
}

/* --- Mailing list signup --------------------------------------------- */

.emp-signup {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.emp-signup__title {
	font-family: var(--emp-font-display);
	font-size: clamp(22px, 3vw, 30px);
	margin: 0 0 8px;
}

.emp-signup__lead {
	margin: 0 0 var(--emp-s-5);
	color: var(--emp-c-muted);
}

.emp-signup__row {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.emp-signup__field {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 380px;
}

.emp-signup__field input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	font-size: 16px;
}

.emp-signup__row .emp-button {
	flex: none;
	height: 48px;
}

/* Off-screen rather than display:none - a bot reads the stylesheet too, and
 * a hidden field it can see is a hidden field it will skip. */
.emp-signup__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.emp-signup__done,
.emp-signup__error {
	margin: 0 0 var(--emp-s-4);
	padding: 12px 14px;
	border-radius: var(--emp-r-sm);
	font-weight: 600;
}

.emp-signup__done {
	background: var(--emp-green-50);
	color: var(--emp-green-700);
}

.emp-signup__error {
	background: var(--emp-red-50);
	color: var(--emp-red-700);
}

@media (max-width: 560px) {
	.emp-signup__row {
		flex-wrap: wrap;
	}

	.emp-signup__field,
	.emp-signup__row .emp-button {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* --- Dates in a run --------------------------------------------------- */

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

.emp-datelist__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--emp-c-line-soft);
}

.emp-datelist__item:first-child {
	border-top: 0;
}

.emp-datelist__item::marker {
	content: none;
}

.emp-datelist__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--emp-s-4);
	padding: 12px 2px;
	color: var(--emp-c-ink);
	text-decoration: none;
}

a.emp-datelist__row:hover,
a.emp-datelist__row:focus-visible {
	color: var(--emp-c-accent-text);
	text-decoration: none;
}

.emp-datelist__when {
	font-weight: 600;
}

.emp-datelist__state {
	flex: none;
	font-size: var(--emp-t-sm);
	color: var(--emp-c-accent-text);
	font-weight: 600;
}

/* A night that cannot be bought should not look like the ones that can. */
.emp-datelist__item.is-past .emp-datelist__row,
.emp-datelist__item.is-gone .emp-datelist__row {
	color: var(--emp-c-muted);
}

.emp-datelist__item.is-past .emp-datelist__state,
.emp-datelist__item.is-gone .emp-datelist__state {
	color: var(--emp-c-muted);
	font-weight: 500;
}

.emp-datelist__item.is-current .emp-datelist__row {
	background: var(--emp-c-accent-soft);
	border-radius: var(--emp-r-xs);
	padding-left: 10px;
	padding-right: 10px;
}

.emp-datelist__item.is-current .emp-datelist__state {
	color: var(--emp-slate-600);
	font-weight: 500;
}

/* --- Add-ons at checkout --------------------------------------------- */

.emp-addons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.emp-addon {
	display: flex;
	align-items: center;
	gap: var(--emp-s-4);
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	list-style: none;
}

.emp-addon::marker {
	content: none;
}

.emp-addon__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.emp-addon__name {
	font-weight: 600;
}

.emp-addon__desc {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

.emp-addon__left {
	color: var(--emp-c-accent-text);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.emp-addon__price {
	flex: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.emp-addon__qty input {
	width: 72px;
}

@media (max-width: 560px) {
	.emp-addon {
		flex-wrap: wrap;
	}

	.emp-addon__body {
		flex: 1 1 100%;
	}
}

/* Scarcity, not status: amber rather than the neutral chip, because it is
 * the one badge meant to change what the reader does next. */
.emp-card__badge--urgent {
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-weight: 700;
}

.emp-search__price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.emp-search__price input[type="number"] {
	min-width: 0;
	width: 100%;
}

.emp-search__to {
	flex: none;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
}

/* A discount is good news, so it reads as a credit rather than as another
 * grey line of the bill. */
.emp-summary__discount th,
.emp-summary__discount td {
	color: var(--emp-green-700);
	font-weight: 600;
}

.emp-coupon {
	margin: var(--emp-s-5) 0 0;
	padding: var(--emp-s-4);
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-surface);
}

.emp-coupon input[type="text"] {
	text-transform: uppercase;
	max-width: 260px;
}

/* A launch that has not opened yet is not a refusal, so it does not get
 * the muted "closed" treatment. */
.emp-status--pending {
	background: var(--emp-c-accent-soft);
	border: 1px solid var(--emp-amber-200);
	border-radius: var(--emp-r-sm);
	padding: 12px 14px;
	color: var(--emp-c-accent-text);
	font-weight: 600;
}

/* =====================================================================
 * 41b. Visually hidden text - fallback only
 *
 * .screen-reader-text is used in seven places in this plugin (seat labels,
 * icon button names, form legends) but was never defined here: it relied on
 * the theme providing it. Astra and Elementor both do, so the live site is
 * fine - but without it every hidden label becomes visible body text, and
 * the seat map in particular collapses into unreadable overlap.
 *
 * :where() gives this zero specificity, so a theme's own rule still wins.
 * This only fills the gap when nothing else defines it.
 * ===================================================================== */

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

/* =====================================================================
 * 42. Header actions: search, account, and the customer's own area
 *
 * Two icon controls in the site header. Icon-only is a real risk - an
 * unlabelled glyph is a guess - so each one carries a screen-reader label
 * and a native tooltip, and each is a 44px target rather than the 24px the
 * icon itself occupies.
 *
 * Signed out, the account control is a plain link to sign in: a menu whose
 * only item is "Sign in" makes people open a door to find another door.
 * ===================================================================== */

.emp-headeractions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* The wrapper Elementor puts around an injected widget has no opinion of
 * its own, so it must not introduce a line box of its own either. */
.elementor-element-empheaderactions,
.elementor-element-empheaderactions > .elementor-widget-container {
	display: flex;
	align-items: center;
}

.emp-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 44px of target around a 22px icon. */
	width: 44px;
	height: 44px;
	padding: 0;

	border: 1px solid transparent;
	border-radius: var(--emp-r-sm);
	background: none;
	color: var(--emp-c-ink);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.16s ease,
		border-color 0.16s ease,
		color 0.16s ease;
}

.emp-iconbtn:hover {
	background: var(--emp-c-accent-soft);
	border-color: var(--emp-amber-200);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-iconbtn:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
}

.emp-iconbtn[aria-expanded="true"] {
	background: var(--emp-c-accent-soft);
	border-color: var(--emp-amber-200);
}

.emp-iconbtn__ico {
	width: 22px;
	height: 22px;
	display: block;
}

/* --- Account menu ---------------------------------------------------- */

.emp-accountmenu {
	position: relative;
}

.emp-accountmenu__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 200;

	min-width: 232px;
	padding: 8px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-md, 12px);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
	font-family: var(--emp-font);
	text-align: left;
}

.emp-accountmenu__panel[hidden] {
	display: none;
}

.emp-accountmenu__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px 12px;
	border-bottom: 1px solid var(--emp-c-line-soft);
	margin-bottom: 6px;
}

.emp-accountmenu__name {
	font-weight: 600;
	font-size: 15px;
	color: var(--emp-c-ink);
	line-height: 1.3;
}

.emp-accountmenu__mail {
	font-size: 13px;
	color: var(--emp-c-muted);

	/* A long address must not widen the panel off the screen edge. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 208px;
}

.emp-accountmenu__list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}

.emp-accountmenu__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-accountmenu__link {
	display: block;
	padding: 11px 12px;
	border-radius: var(--emp-r-xs);
	color: var(--emp-c-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.emp-accountmenu__link:hover,
.emp-accountmenu__link:focus-visible {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-accountmenu__link:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: -2px;
}

.emp-accountmenu__link--out {
	border-top: 1px solid var(--emp-c-line-soft);
	border-radius: 0 0 var(--emp-r-xs) var(--emp-r-xs);
	margin-top: 2px;
	color: var(--emp-slate-600);
}

/* --- The search panel ------------------------------------------------ */
/* Fixed rather than absolute: it belongs to the header, which is itself
 * fixed, and the offset comes from the measured header height so it
 * cannot drift when the header changes size. */

.emp-headersearch {
	position: fixed;
	top: var(--emp-header-h, 80px);
	left: 0;
	right: 0;
	z-index: 95;

	padding: 20px;
	border-bottom: 1px solid var(--emp-c-line);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
}

.emp-headersearch[hidden] {
	display: none;
}

.emp-headersearch__form {
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--emp-font);
}

.emp-headersearch__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--emp-slate-600);
}

.emp-headersearch__row {
	display: flex;
	gap: 10px;
}

.emp-headersearch__row input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--emp-c-line-strong);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	font-family: var(--emp-font);
	font-size: 16px;
}

.emp-headersearch__row input[type="search"]:focus {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 1px;
	border-color: var(--emp-c-accent);
}

.emp-headersearch__row .emp-button {
	flex: none;
	height: 48px;
}

@media (max-width: 600px) {
	.emp-headersearch {
		padding: 16px;
	}

	.emp-headersearch__row {
		flex-wrap: wrap;
	}

	.emp-headersearch__row .emp-button {
		flex: 1 1 100%;
	}
}

/* --- The customer's own area ----------------------------------------- */
/* My tickets and My account were reachable only from the header, so moving
 * between them meant going back up to the account menu each time. */

.emp-accountnav {
	margin: 0 0 var(--emp-s-6);
	border-bottom: 1px solid var(--emp-c-line);
}

.emp-accountnav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Never wraps; on a narrow screen it is swiped. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.emp-accountnav__list::-webkit-scrollbar {
	display: none;
}

.emp-accountnav__item {
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-accountnav__item::marker {
	content: none;
}

.emp-accountnav__tab {
	display: block;
	padding: 12px 2px 10px;
	border-bottom: 2px solid transparent;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.emp-accountnav__tab:hover {
	color: var(--emp-c-ink);
	border-bottom-color: var(--emp-c-line-strong);
	text-decoration: none;
}

.emp-accountnav__tab:focus-visible {
	outline: 2px solid var(--emp-c-accent-dark);
	outline-offset: 2px;
}

.emp-accountnav__tab.is-active {
	color: var(--emp-c-ink);
	font-weight: 600;
	border-bottom-color: var(--emp-c-accent);
}

@media (prefers-reduced-motion: reduce) {
	.emp-iconbtn,
	.emp-accountnav__tab {
		transition: none;
	}
}

/* =====================================================================
 * 43. Touch targets
 *
 * Measured at 375px across every page. The primary button already grows
 * on a coarse pointer; these did not.
 * ===================================================================== */

@media (pointer: coarse) {
	/* The section-nav tabs came to 42px - near enough to look right and
	 * still wrong under a thumb. */
	.emp-secnav__link {
		padding-top: 16px;
		padding-bottom: 14px;
	}

	/* A category chip is small type by design, so the type stays as it is
	 * and only the box it sits in grows. */
	.emp-chip {
		min-height: var(--emp-touch);
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* Elementor draws its menu toggle as a 20px box - less than half the
 * minimum, on the one control a phone cannot do without. The icon keeps
 * its size; only the hit area grows around it. */
.e-n-menu-toggle,
.elementor-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--emp-touch);
	min-height: var(--emp-touch);
}

/* The card title was the only route into an event a keyboard could take,
 * and it was 19px tall. Stretching it over the card makes the whole card
 * the target. The card is already position:relative for its badges.
 *
 * The footer is lifted above the overlay so "Get tickets" still reaches
 * the ticket anchor rather than the top of the page. */
.emp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.emp-card__footer {
	position: relative;
	z-index: 2;
}

/* =====================================================================
 * 44. FAQ accordion
 *
 * Built on <details>/<summary>, so every answer still opens with the
 * script absent. The panel height is animated from JS because a native
 * <details> jumps out of display:none, which no CSS transition can catch.
 * ===================================================================== */

/* The theme applies border-box to most elements but not to <summary> or
 * to every div, so min-height and padding were adding together. */
.emp-faq,
.emp-faq *,
.emp-faq *::before,
.emp-faq *::after {
	box-sizing: border-box;
}

.emp-faq {
	--emp-faq-rail: 232px;
	margin: 0 0 var(--emp-s-7);
	font-family: var(--emp-font);
	color: var(--emp-c-ink);
}

/* --- the filter bar ------------------------------------------------- */

.emp-faq__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 28px;
}

/* The wrapper is the field, not the input.
 *
 * The theme styles inputs with attribute selectors - input[type="text"]
 * and friends - which outrank a single class, so any padding set on the
 * input here loses and the icon ends up sitting under the placeholder.
 * Giving the border, background and spacing to the wrapper and laying the
 * three children out with flex removes the argument entirely. */
.emp-faq__search {
	display: flex;
	flex: 1 1 320px;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: var(--emp-touch);
	padding: 0 8px 0 16px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	transition: border-color var(--emp-d) var(--emp-ease), box-shadow var(--emp-d) var(--emp-ease);
}

.emp-faq__search:focus-within {
	border-color: var(--emp-c-accent);
	box-shadow: 0 0 0 4px var(--emp-c-accent-chip);
}

.emp-faq__search > .emp-faq__svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--emp-c-muted);
	pointer-events: none;
}

/* Everything the theme puts on an input has to come back off. The field
 * around it now carries all of it. */
.emp-faq .emp-faq__input[type="search"] {
	flex: 1 1 auto;

	/* Fill the field, so there is no dead strip above and below the
	 * text where a tap lands on the wrapper and does nothing. */
	align-self: stretch;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--emp-c-ink);
	font-family: inherit;

	/* 16px exactly: anything smaller makes iOS zoom the page on focus. */
	font-size: 16px;
	line-height: 1.4;
	appearance: none;
}

.emp-faq .emp-faq__input[type="search"]:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

/* Safari draws a clear button of its own right where ours sits. */
.emp-faq__input::-webkit-search-cancel-button {
	display: none;
}

.emp-faq__clear {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--emp-c-muted);
	cursor: pointer;
	transition: background var(--emp-d) var(--emp-ease), color var(--emp-d) var(--emp-ease);
}

.emp-faq__clear:hover {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
}

.emp-faq__clear .emp-faq__svg {
	width: 17px;
	height: 17px;
}

/* The visible circle stays 34px so it sits inside the field, but the
 * thumb gets the full 44. */
.emp-faq__clear::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--emp-touch);
	height: var(--emp-touch);
	transform: translate(-50%, -50%);
}

/* Every display rule above would otherwise beat the hidden attribute,
 * which is a UA rule and loses to any author declaration. */
.emp-faq [hidden] {
	display: none !important;
}

.emp-faq__count {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- two columns ---------------------------------------------------- */

.emp-faq__layout {
	display: grid;
	grid-template-columns: var(--emp-faq-rail) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* --- the category rail ---------------------------------------------- */

.emp-faq__rail {
	position: sticky;

	/* The header is fixed and measured at runtime; never a literal. */
	top: calc(var(--emp-header-h, 80px) + 20px);
}

.emp-faq__raillist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-faq__railitem::marker {
	content: none;
}

.emp-faq__raillink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: var(--emp-touch);
	padding: 10px 14px;
	border-left: 2px solid transparent;
	border-radius: var(--emp-r-sm);
	color: var(--emp-c-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--emp-d) var(--emp-ease), color var(--emp-d) var(--emp-ease);
}

.emp-faq__raillink:hover,
.emp-faq__raillink:focus-visible {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-faq__raillink.is-active {
	border-left-color: var(--emp-c-accent);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	color: var(--emp-c-ink);
	font-weight: 600;
}

.emp-faq__railnum {
	color: var(--emp-c-muted);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.emp-faq__raillink.is-active .emp-faq__railnum {
	color: var(--emp-c-accent-text);
}

/* --- groups --------------------------------------------------------- */

.emp-faq__main {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

.emp-faq__group {
	scroll-margin-top: calc(var(--emp-header-h, 80px) + 24px);
}

.emp-faq__grouptitle {
	margin: 0 0 14px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.emp-faq__items {
	overflow: hidden;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

/* --- one question --------------------------------------------------- */

.emp-faq__item + .emp-faq__item {
	border-top: 1px solid var(--emp-c-line);
}

.emp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 62px;
	padding: 16px 20px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;

	/* Both this and the WebKit rule below are needed to drop the
	 * native disclosure triangle. */
	list-style: none;
	transition: background var(--emp-d) var(--emp-ease);
}

.emp-faq__q::-webkit-details-marker {
	display: none;
}

.emp-faq__q:hover {
	background: var(--emp-c-surface);
}

.emp-faq__q:focus-visible {
	outline: 2px solid var(--emp-c-accent);
	outline-offset: -2px;
}

/* A plus that loses its upright stroke and becomes a minus. */
.emp-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--emp-c-surface);
	transition: background 200ms var(--emp-ease), transform 300ms var(--emp-ease);
}

.emp-faq__icon::before,
.emp-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: var(--emp-c-ink);
	transform: translate(-50%, -50%);
	transition: transform 300ms var(--emp-ease), opacity 200ms var(--emp-ease), background 200ms var(--emp-ease);
}

.emp-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.emp-faq__item[open] .emp-faq__icon {
	background: var(--emp-c-accent);
	transform: rotate(180deg);
}

.emp-faq__item[open] .emp-faq__icon::before,
.emp-faq__item[open] .emp-faq__icon::after {
	background: var(--emp-c-on-accent);
}

.emp-faq__item[open] .emp-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* --- the answer ----------------------------------------------------- */

.emp-faq__a {
	overflow: hidden;
}

/* Restated because the browser default that hides this is only a UA rule,
 * and theme CSS setting display on divs was winning. The script sets the
 * open attribute before it measures and removes it only after the panel
 * has finished collapsing, so the height animation still has something to
 * measure at both ends. */
.emp-faq__item:not([open]) > .emp-faq__a {
	display: none;
}

.emp-faq__ainner {
	max-width: 66ch;
	padding: 0 20px 20px;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.65;
}

.emp-faq__ainner > :first-child {
	margin-top: 0;
}

.emp-faq__ainner > :last-child {
	margin-bottom: 0;
}

.emp-faq__ainner a {
	color: var(--emp-c-accent-text);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Only while the script is driving the height. */
.emp-faq__item.is-animating > .emp-faq__a {
	transition: height 280ms var(--emp-ease);
}

/* --- a closing note, not an accordion ------------------------------- */

.emp-faq__group--note .emp-faq__grouptitle {
	margin-bottom: 8px;
}

.emp-faq__group--note .emp-faq__intro {
	padding: 20px 24px;
	border: 1px solid var(--emp-c-line);
	border-left: 3px solid var(--emp-c-accent);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	color: var(--emp-c-muted);
	font-size: 15.5px;
	line-height: 1.65;
}

.emp-faq__group--note .emp-faq__intro > :first-child {
	margin-top: 0;
}

.emp-faq__group--note .emp-faq__intro > :last-child {
	margin-bottom: 0;
}

.emp-faq__group--note .emp-faq__intro a {
	color: var(--emp-c-accent-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- filtered down to nothing --------------------------------------- */

.emp-faq__empty {
	margin: 0;
	padding: 32px 24px;
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-lg);
	color: var(--emp-c-muted);
	font-size: 15.5px;
	text-align: center;
}

.emp-faq__item[hidden],
.emp-faq__group[hidden] {
	display: none;
}

/* --- one column ------------------------------------------------------ */

@media (max-width: 900px) {
	.emp-faq__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* The rail becomes a swiped row above the questions, pinned under
	 * the header for the same reason the event page bar is. */
	.emp-faq__rail {
		top: var(--emp-header-h, 80px);
		z-index: 3;
		margin: 0 -16px;
		padding: 8px 0;
		background: var(--emp-c-page, #f8f8f8);
	}

	.emp-faq__raillist {
		flex-direction: row;
		gap: 8px;
		padding: 0 16px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.emp-faq__raillist::-webkit-scrollbar {
		display: none;
	}

	.emp-faq__raillink {
		border: 1px solid var(--emp-c-line);
		border-radius: var(--emp-r-pill);
		background: var(--emp-c-canvas);
		white-space: nowrap;
	}

	.emp-faq__raillink.is-active {
		border-color: var(--emp-c-accent);
		background: var(--emp-c-accent-chip);
	}

	.emp-faq__grouptitle {
		font-size: 20px;
	}

	.emp-faq__q {
		padding: 15px 16px;
		font-size: 16px;
	}

	.emp-faq__ainner {
		padding: 0 16px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-faq__item.is-animating > .emp-faq__a,
	.emp-faq__icon,
	.emp-faq__icon::before,
	.emp-faq__icon::after {
		transition: none;
	}
}

@media print {
	.emp-faq__bar,
	.emp-faq__rail {
		display: none;
	}

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

	/* Paper has no affordance for opening anything. */
	.emp-faq__a {
		height: auto !important;
	}

	.emp-faq__icon {
		display: none;
	}
}

/* =====================================================================
 * 45. Support-page lead, solo accordion, and the card grid
 * ===================================================================== */

/* Prose above the accordion - the sentence that frames the page, or the
 * standing caveat at the top of a policy. */
.emp-faq__lead,
.emp-panels__lead {
	max-width: 68ch;
	margin: 0 0 24px;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 16.5px;
	line-height: 1.65;
}

.emp-faq__lead > :first-child,
.emp-panels__lead > :first-child {
	margin-top: 0;
}

.emp-faq__lead > :last-child,
.emp-panels__lead > :last-child {
	margin-bottom: 0;
}

.emp-faq__lead em,
.emp-panels__lead em {
	color: var(--emp-c-ink);
	font-style: italic;
}

/* A policy page whose sections are themselves the questions has nothing
 * to navigate between, so the rail is not rendered and the column it
 * would have occupied should not be reserved. */
.emp-faq__layout--solo {
	grid-template-columns: minmax(0, 1fr);
}

/* --- the card grid --------------------------------------------------- */

.emp-panels {
	margin: 0 0 var(--emp-s-7);
	font-family: var(--emp-font);
	color: var(--emp-c-ink);
}

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

.emp-panels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	align-items: start;
}

.emp-panels__card {
	padding: 26px 28px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	transition: border-color var(--emp-d) var(--emp-ease), box-shadow var(--emp-d) var(--emp-ease);
}

.emp-panels__card:hover {
	border-color: var(--emp-amber-200, var(--emp-c-line-strong));
	box-shadow: var(--emp-e-2);
}

.emp-panels__title {
	margin: 0 0 12px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.emp-panels__subtitle {
	margin: 18px 0 8px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 16px;
	font-weight: 600;
}

.emp-panels__body {
	color: var(--emp-c-muted);
	font-size: 15.5px;
	line-height: 1.7;
}

.emp-panels__body > :first-child {
	margin-top: 0;
}

.emp-panels__body > :last-child {
	margin-bottom: 0;
}

/* The label half of "Email: someone@example.com" carries the weight, so
 * the eye lands on the field name and then the value. */
.emp-panels__body strong {
	color: var(--emp-c-ink);
	font-weight: 600;
}

.emp-panels__body a {
	color: var(--emp-c-accent-text);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.emp-panels__body em {
	font-style: italic;
}

@media (max-width: 600px) {
	.emp-panels__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.emp-panels__card {
		padding: 22px 20px;
	}

	.emp-panels__title {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-panels__card {
		transition: none;
	}
}

/* =====================================================================
 * 46. Browse pages and the related-events row
 * ===================================================================== */

.emp-archive {
	margin: 0 0 var(--emp-s-7);
}

.emp-archive,
.emp-archive *,
.emp-archive *::before,
.emp-archive *::after,
.emp-related,
.emp-related *,
.emp-related *::before,
.emp-related *::after {
	box-sizing: border-box;
}

/* --- the city and category rows -------------------------------------- */

.emp-archive__nav {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 14px;
}

.emp-archive__navlabel {
	flex: 0 0 auto;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.emp-archive__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-archive__chips li::marker {
	content: none;
}

.emp-archive__chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 15px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--emp-d) var(--emp-ease), color var(--emp-d) var(--emp-ease), background var(--emp-d) var(--emp-ease);
}

.emp-archive__chip:hover,
.emp-archive__chip:focus-visible {
	border-color: var(--emp-c-line-strong);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-archive__chip.is-active {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
	font-weight: 600;
}

@media (pointer: coarse) {
	.emp-archive__chip {
		min-height: var(--emp-touch);
	}
}

/* --- the grid --------------------------------------------------------- */

.emp-archive__cards {
	margin: 24px 0 0;
}

.emp-archive__empty {
	margin: 24px 0 0;
	padding: 36px 24px;
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-lg);
	color: var(--emp-c-muted);
	font-size: 15.5px;
	text-align: center;
}

/* --- pagination ------------------------------------------------------- */

.emp-archive__pagination {
	margin: 36px 0 0;
}

.emp-archive__pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-archive__pagination li::marker {
	content: none;
}

.emp-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--emp-touch);
	min-height: var(--emp-touch);
	padding: 6px 14px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-sm);
	background: var(--emp-c-canvas);
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.emp-archive__pagination a.page-numbers:hover {
	border-color: var(--emp-c-line-strong);
	color: var(--emp-c-ink);
	text-decoration: none;
}

.emp-archive__pagination .page-numbers.current {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-weight: 600;
}

.emp-archive__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --- related events --------------------------------------------------- */

.emp-related {
	margin: 56px 0 0;
	padding: 36px 0 0;
	border-top: 1px solid var(--emp-c-line);
}

.emp-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 22px;
}

.emp-related__title {
	margin: 0;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.emp-related__more {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.emp-related__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (pointer: coarse) {
	.emp-related__more {
		min-height: var(--emp-touch);
	}
}

@media (max-width: 767px) {
	.emp-archive__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.emp-related {
		margin-top: 40px;
		padding-top: 28px;
	}

	.emp-related__title {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-archive__chip {
		transition: none;
	}
}

/* --emp-slate-400 is the muted tone for text ON ink. On a white chip it
   carries 2.67:1, so the count was effectively invisible. The tone for a
   light ground is --emp-c-muted, at 6.40:1. */
.emp-archive__chipnum {
	margin-left: 7px;
	color: var(--emp-c-muted);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.emp-archive__chip.is-active .emp-archive__chipnum {
	color: var(--emp-c-accent-text);
}

/* =====================================================================
 * 47. Running total on the ticket form
 *
 * The booking fee gets its own line here, before the buyer commits to
 * anything. A fee first seen at the payment step is the commonest reason
 * a checkout is abandoned.
 * ===================================================================== */

.emp-ticketsum {
	margin: 20px 0 18px;
	padding: 16px 18px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-surface);
	font-family: var(--emp-font);
}

.emp-ticketsum,
.emp-ticketsum * {
	box-sizing: border-box;
}

.emp-ticketsum[hidden] {
	display: none !important;
}

.emp-ticketsum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	color: var(--emp-c-muted);
	font-size: 15px;
	line-height: 1.5;
}

.emp-ticketsum__row + .emp-ticketsum__row {
	margin-top: 8px;
}

.emp-ticketsum__row[hidden] {
	display: none !important;
}

.emp-ticketsum__row span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.emp-ticketsum__row--total {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--emp-c-line);
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 18px;
	font-weight: 600;
}

/* The fee is stated plainly, not apologised for and not hidden. */
.emp-ticketsum__row--fee span:first-child {
	color: var(--emp-c-muted);
}

/* =====================================================================
 * 48. Organizer payout statement
 *
 * The answer to "how did you arrive at that number". Every figure here
 * traces to an event, and the held/released state is shown rather than
 * left to be inferred from a smaller total than expected.
 * ===================================================================== */

.emp-earnings,
.emp-earnings * {
	box-sizing: border-box;
}

.emp-earnings__stats {
	margin: 0 0 20px;
}

/* A third line under the number, saying what it means. */
.emp-stat__hint {
	display: block;
	margin-top: 4px;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 12.5px;
	line-height: 1.4;
}

/* The one figure the organizer actually came here for. */
.emp-stat--accent {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-chip);
}

.emp-stat--accent .emp-stat__value {
	color: var(--emp-c-accent-text);
}

.emp-earnings__terms {
	max-width: 68ch;
	margin: 0 0 8px;
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 14.5px;
	line-height: 1.6;
}

.emp-earnings__terms--good {
	color: var(--emp-c-accent-text);
	font-weight: 500;
}

.emp-earnings__subheading {
	margin: 32px 0 12px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.emp-earnings__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-lg);
	color: var(--emp-c-muted);
	font-size: 15px;
}

/* Money columns line up; the name column takes the slack. */
.emp-earnings__table td:not(:first-child),
.emp-earnings__table th:not(:first-child) {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.emp-earnings__subheading {
		margin-top: 26px;
		font-size: 17px;
	}
}

/* =====================================================================
 * 49. Organizer application
 *
 * Includes the honeypot rule both this form and the newsletter signup
 * were missing - without it the "leave this empty" trap field is simply
 * a visible input asking people to leave it empty.
 * ===================================================================== */

.emp-hp,
.emp-signup__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.emp-apply,
.emp-apply * {
	box-sizing: border-box;
}

.emp-apply {
	max-width: 640px;
	margin: 0 0 var(--emp-s-7);
	font-family: var(--emp-font);
}

.emp-apply__form {
	padding: 28px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-apply .emp-field {
	margin: 0 0 18px;
}

.emp-apply .emp-field__req {
	color: var(--emp-c-accent-text);
}

.emp-apply .emp-field__hint {
	display: block;
	margin-top: 5px;
	color: var(--emp-c-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.emp-apply .emp-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--emp-c-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.emp-apply .emp-field--check input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.emp-apply textarea,
.emp-apply input[type="text"],
.emp-apply input[type="email"],
.emp-apply input[type="tel"],
.emp-apply input[type="url"],
.emp-apply select {
	width: 100%;
	min-height: var(--emp-touch);

	/* 16px exactly: anything smaller makes iOS zoom on focus. */
	font-size: 16px;
}

.emp-apply textarea {
	min-height: 110px;
	resize: vertical;
}

/* =====================================================================
 * 50. Sell with us
 *
 * The page had a form on it and nothing else. This is the rest: what we
 * do, what it costs, and what happens next - so the form is the last
 * thing somebody meets rather than the first.
 * ===================================================================== */

.emp-sell__hero,
.emp-sell__points,
.emp-sell__fees,
.emp-sell__steps {
	box-sizing: border-box;
	font-family: var(--emp-font);
}

.emp-sell__hero *,
.emp-sell__points *,
.emp-sell__fees *,
.emp-sell__steps * {
	box-sizing: border-box;
}

/* --- hero ------------------------------------------------------------ */

.emp-sell__hero {
	margin: 0 0 40px;
	padding: 56px 40px;
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-ink);
	color: #fff;
}

.emp-sell__heroinner {
	max-width: 44rem;
}

/* This eyebrow sits on the ink hero, where the accent fill measures
   4.06:1 and fails. The on-ink tone clears AA at 4.80:1. */
.emp-sell__eyebrow {
	margin: 0 0 12px;
	color: var(--emp-c-accent-on-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.emp-sell__title {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--emp-font-display);
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-wrap: balance;
}

.emp-sell__lead {
	margin: 0 0 26px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17.5px;
	line-height: 1.6;
}

.emp-sell__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 0;
}

.emp-sell__ctanote {
	color: rgba(255, 255, 255, 0.66);
	font-size: 14.5px;
}

/* --- reasons --------------------------------------------------------- */

.emp-sell__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 18px;
	margin: 0 0 40px;
}

.emp-sell__point {
	padding: 24px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
}

.emp-sell__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
}

.emp-sell__pointtitle {
	margin: 0 0 8px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.emp-sell__pointbody {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* --- fees ------------------------------------------------------------ */

.emp-sell__fees {
	margin: 0 0 40px;
	padding: 32px;
	border: 1px solid var(--emp-c-line);
	border-left: 3px solid var(--emp-c-accent);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-surface);
}

.emp-sell__feestitle {
	margin: 0 0 14px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 20px;
	font-weight: 600;
}

.emp-sell__feefigure {
	margin: 0 0 18px;
	color: var(--emp-c-muted);
	font-size: 17px;
	line-height: 1.5;
}

.emp-sell__feefigure strong {
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 30px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.emp-sell__feenotes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.emp-sell__feenotes li {
	position: relative;
	padding-left: 24px;
	color: var(--emp-c-muted);
	font-size: 15px;
	line-height: 1.55;
}

.emp-sell__feenotes li::marker {
	content: none;
}

.emp-sell__feenotes li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--emp-c-accent);
}

/* --- steps ----------------------------------------------------------- */

.emp-sell__steps {
	margin: 0 0 40px;
}

.emp-sell__stepstitle {
	margin: 0 0 18px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 20px;
	font-weight: 600;
}

.emp-sell__steplist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.emp-sell__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.emp-sell__step::marker {
	content: none;
}

.emp-sell__stepnum {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--emp-c-ink);
	color: #fff;
	font-family: var(--emp-font-display);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.emp-sell__stepbody {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.emp-sell__stepbody strong {
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 16px;
	font-weight: 600;
}

.emp-sell__stepbody span {
	color: var(--emp-c-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

/* --- the form itself ------------------------------------------------- */

.emp-apply {
	max-width: none;
	scroll-margin-top: calc(var(--emp-header-h, 80px) + 24px);
}

.emp-apply__form {
	max-width: 640px;
}

/* The theme styles inputs by attribute selector, which outranks a single
 * class - so a checkbox inherits width:100%, fills the whole row as a
 * flex item, and shoves its own label clean out of the card. */
.emp-apply .emp-field--check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	min-width: 18px;
	height: 18px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
}

.emp-apply .emp-field--check label {
	min-width: 0;
}

@media (max-width: 782px) {
	.emp-sell__hero {
		padding: 40px 24px;
	}

	.emp-sell__title {
		font-size: 32px;
	}

	.emp-sell__lead {
		font-size: 16.5px;
	}

	.emp-sell__fees {
		padding: 24px 20px;
	}

	.emp-sell__feefigure strong {
		font-size: 26px;
	}

	.emp-apply__form {
		padding: 22px 18px;
	}
}

/* =====================================================================
 * 51. Review note on the organizer event list
 * ===================================================================== */

.emp-reviewnote {
	display: block;
	max-width: 42ch;
	margin-top: 6px;
	padding-left: 10px;
	border-left: 3px solid var(--emp-c-accent);
	color: var(--emp-c-muted);
	font-family: var(--emp-font);
	font-size: 13.5px;
	line-height: 1.5;
}

/* =====================================================================
 * 52. Hero slider
 *
 * Slides are stacked and cross-faded rather than translated along a
 * track: no width arithmetic, nothing to recalculate on resize, and a
 * slide that is not showing takes no layout space to mis-measure.
 * ===================================================================== */

.emp-heroslider {
	position: relative;
	overflow: hidden;
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-ink);
	font-family: var(--emp-font);
}

.emp-heroslider,
.emp-heroslider * {
	box-sizing: border-box;
}

.emp-heroslider__track {
	position: relative;

	/* Overridden by the widget height control; this is the fallback. */
	height: 560px;
}

.emp-heroslider__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms var(--emp-ease), visibility 0s linear 600ms;
}

.emp-heroslider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms var(--emp-ease), visibility 0s;
}

.emp-heroslider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark at the bottom where the words are, clear at the top where the
 * artwork usually is. */
.emp-heroslider__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.65) 38%, rgba(15, 23, 42, 0.15) 70%, rgba(15, 23, 42, 0.05) 100% );
}

.emp-heroslider__body {
	position: relative;
	width: 100%;
	max-width: 46rem;
	padding: 40px 48px 44px;
	color: #fff;
}

.emp-heroslider__cat {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.emp-heroslider__title {
	margin: 0 0 12px;
	font-family: var(--emp-font-display);
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-wrap: balance;
}

.emp-heroslider__title a {
	color: #fff;
	text-decoration: none;
}

.emp-heroslider__title a:hover,
.emp-heroslider__title a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.emp-heroslider__meta {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16.5px;
	line-height: 1.5;
}

.emp-heroslider__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 0;
}

.emp-heroslider__price {
	color: rgba(255, 255, 255, 0.9);
	font-size: 15.5px;
	font-weight: 500;
}

/* --- arrows ---------------------------------------------------------- */

.emp-heroslider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background var(--emp-d) var(--emp-ease), border-color var(--emp-d) var(--emp-ease);
}

.emp-heroslider__arrow:hover {
	background: var(--emp-c-accent);
	border-color: var(--emp-c-accent);
	color: var(--emp-c-on-accent);
}

.emp-heroslider__arrow:focus-visible {
	outline: 3px solid var(--emp-c-accent);
	outline-offset: 3px;
}

.emp-heroslider__arrow--prev { left: 20px; }
.emp-heroslider__arrow--next { right: 20px; }

/* --- dots ------------------------------------------------------------ */

.emp-heroslider__dots {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

/* The visible dot is small; the button around it is not, so it can
 * actually be hit on a phone. */
.emp-heroslider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.emp-heroslider__dot span {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transition: background var(--emp-d) var(--emp-ease), width var(--emp-d) var(--emp-ease);
}

.emp-heroslider__dot:hover span {
	background: rgba(255, 255, 255, 0.75);
}

.emp-heroslider__dot.is-active span {
	width: 26px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent);
}

.emp-heroslider__dot:focus-visible {
	outline: 3px solid var(--emp-c-accent);
	outline-offset: 0;
	border-radius: 50%;
}

/* The dot stays visually small; the thumb gets the full target. */
@media (pointer: coarse) {
	.emp-heroslider__dot {
		width: var(--emp-touch);
		height: var(--emp-touch);
	}

	.emp-heroslider__dots {
		gap: 2px;
	}
}

/* --- smaller screens -------------------------------------------------- */

@media (max-width: 1024px) {
	.emp-heroslider__title { font-size: 36px; }
	.emp-heroslider__body { padding: 32px 36px 52px; }
}

@media (max-width: 767px) {
	.emp-heroslider { border-radius: var(--emp-r-md, 12px); }

	.emp-heroslider__body {
		max-width: none;
		padding: 24px 20px 56px;
	}

	.emp-heroslider__title { font-size: 27px; }
	.emp-heroslider__meta { margin-bottom: 18px; font-size: 15px; }

	/* Arrows shrink and tuck in; the dots and swipe carry most of the
	 * navigation at this width. */
	.emp-heroslider__arrow {
		width: 44px;
		height: 44px;
	}

	.emp-heroslider__arrow--prev { left: 8px; }
	.emp-heroslider__arrow--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.emp-heroslider__slide,
	.emp-heroslider__arrow,
	.emp-heroslider__dot span {
		transition: none;
	}
}

/* =====================================================================
 * 53. Section header with a View all link
 *
 * The heading and the link that follows from it are one row, so they stay
 * on the same baseline at every width instead of being two widgets kept
 * in line by hand.
 * ===================================================================== */

.emp-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 22px;
	font-family: var(--emp-font);
}

.emp-sechead,
.emp-sechead * {
	box-sizing: border-box;
}

.emp-sechead__title {
	margin: 0;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.2;
	text-wrap: balance;
}

.emp-sechead__more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	min-height: var(--emp-touch);
	padding: 8px 4px;
	color: var(--emp-c-accent-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: gap var(--emp-d) var(--emp-ease), color var(--emp-d) var(--emp-ease);
}

.emp-sechead__more:hover,
.emp-sechead__more:focus-visible {
	color: var(--emp-c-ink);
	text-decoration: none;

	/* The chevron slides out a little rather than the whole row moving. */
	gap: 10px;
}

.emp-sechead__more:focus-visible {
	outline: 2px solid var(--emp-c-accent);
	outline-offset: 3px;
	border-radius: var(--emp-r-xs, 6px);
}

@media (max-width: 600px) {
	.emp-sechead {
		align-items: center;
		gap: 10px 14px;
	}

	.emp-sechead__title {
		font-size: 24px;
	}

	.emp-sechead__more {
		font-size: 14.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-sechead__more {
		transition: none;
	}
}


/* =====================================================================
 * 54. Contact page
 *
 * A two-column split: the copy and the ways to reach a person on the
 * left, the form raised on its own card to the right. The point of the
 * arrangement is that somebody who only wants an email address never has
 * to scroll past a form to find one.
 *
 * Collapses to a single column at 900px, form last - on a phone the
 * address should still come first.
 * ===================================================================== */

.emp-contact,
.emp-contact * {
	box-sizing: border-box;
}

.emp-contact {
	font-family: var(--emp-font);
}

.emp-contact__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin: 0 0 56px;
}

/* --- left column ------------------------------------------------------ */

.emp-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 18px;
	padding: 6px 14px;
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-accent-chip);
	color: var(--emp-c-accent-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.emp-contact__eyebrow svg {
	width: 14px;
	height: 14px;
}

.emp-contact p.emp-contact__lead {
	max-width: 15ch;
	margin: 0 0 18px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 46px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

/* The second line carries the accent, so the headline has a hinge. */
.emp-contact__lead em {
	display: block;
	color: var(--emp-c-accent-text);
	font-style: normal;
}

.emp-contact p.emp-contact__sub {
	max-width: 46ch;
	margin: 0 0 36px;
	color: var(--emp-c-muted);
	font-size: 17px;
	line-height: 1.65;
}

/* --- the four info cards ---------------------------------------------- */

.emp-contact__ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.emp-contact__way {
	padding: 20px 22px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-1);
	transition: border-color var(--emp-d) var(--emp-ease), box-shadow var(--emp-d) var(--emp-ease);
}

.emp-contact__way:hover {
	border-color: var(--emp-amber-200, var(--emp-c-line-strong));
	box-shadow: var(--emp-e-2);
}

.emp-contact__way h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 15px;
	font-weight: 600;
}

.emp-contact__way h3 svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--emp-c-accent-text);
}

.emp-contact__way p {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: 14.5px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.emp-contact__way a {
	color: var(--emp-c-ink);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.emp-contact__way a:hover,
.emp-contact__way a:focus-visible {
	color: var(--emp-c-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- the form card ---------------------------------------------------- */

.emp-contactform,
.emp-contactform * {
	box-sizing: border-box;
}

.emp-contactform__form {
	padding: 30px 30px 28px;

	/* The accent edge along the top, in place of the reference's blue. */
	border: 1px solid var(--emp-c-line);
	border-top: 5px solid var(--emp-c-accent);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-3, var(--emp-e-2));
}

.emp-contactform__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0 18px;
}

.emp-contactform .emp-field {
	margin: 0 0 18px;
}

.emp-contactform .emp-field--subject {
	grid-column: 1 / -1;
}

.emp-contactform .emp-field__label {
	display: block;
	margin-bottom: 6px;
	color: var(--emp-c-ink);
	font-size: 14px;
	font-weight: 600;
}

.emp-contactform .emp-field__req {
	color: var(--emp-c-accent-text);
}

.emp-contactform input[type="text"],
.emp-contactform input[type="email"],
.emp-contactform textarea {
	width: 100%;
	min-height: var(--emp-touch);

	/* 16px exactly: anything smaller makes iOS zoom on focus. */
	font-size: 16px;
}

.emp-contactform textarea {
	min-height: 150px;
	resize: vertical;
}

.emp-contactform__actions {
	margin: 6px 0 0;
}

/* Full width, like the reference - it is the only action on the card. */
.emp-contactform__actions .emp-button {
	width: 100%;
	justify-content: center;
}

/* --- everything below the split --------------------------------------- */

.emp-contact section {
	margin: 0 0 40px;
}

.emp-contact h2 {
	margin: 0 0 18px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.emp-contact__panel {
	padding: 26px 28px;
	border: 1px solid var(--emp-c-line);
	border-left: 3px solid var(--emp-c-accent);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-surface);
}

.emp-contact__panel p {
	max-width: 68ch;
	margin: 0 0 12px;
	color: var(--emp-c-muted);
	font-size: 15.5px;
	line-height: 1.7;
}

.emp-contact__panel p:last-child {
	margin-bottom: 0;
}

.emp-contact__nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 22px 26px;
	border: 1px dashed var(--emp-c-line-strong);
	border-radius: var(--emp-r-lg);
}

.emp-contact__nudge p {
	max-width: 58ch;
	margin: 0;
	color: var(--emp-c-muted);
	font-size: 15.5px;
	line-height: 1.6;
}

.emp-contact p.emp-contact__signoff {
	margin: 44px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--emp-c-line);
	color: var(--emp-c-muted);
	font-family: var(--emp-font-display);
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

/* --- one column ------------------------------------------------------- */

@media (max-width: 900px) {
	.emp-contact__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		margin-bottom: 40px;
	}

	.emp-contact p.emp-contact__lead {
		max-width: 20ch;
		font-size: 34px;
	}
}

@media (max-width: 600px) {
	.emp-contact p.emp-contact__lead { font-size: 28px; }
	.emp-contact p.emp-contact__sub { font-size: 16px; margin-bottom: 28px; }
	.emp-contact h2 { font-size: 21px; }
	.emp-contact section { margin-bottom: 32px; }

	.emp-contact__way,
	.emp-contact__panel,
	.emp-contact__nudge {
		padding: 20px 18px;
	}

	.emp-contactform__form {
		padding: 24px 18px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-contact__way {
		transition: none;
	}
}


/* =====================================================================
 * 55. Homepage
 *
 * Follows the client-approved reference design (22 Sep 2026).
 *
 * The page is light throughout: a warm off-white ground alternating with
 * a warm surface, and nothing inverts to dark mid-scroll. One accent,
 * red, used identically in every section. One radius rule: controls are
 * full pill, cards 16px, inputs 12px, media 20px.
 *
 * Poster-led cards are the centrepiece. Event artwork is portrait and
 * already carries the event name, so the poster runs full-bleed at 3:4
 * with the title on a veil at its foot, and the date, place and price sit
 * on the page ground below with no card chrome. The poster is the card.
 * ===================================================================== */

.emp-hx {
	/* A tighter grid gap than the site default. --emp-block-gap is shared
	   with .emp-cards and other page layouts, so it is narrowed here
	   rather than in :root, where it would silently tighten every other
	   page too. */
	--emp-block-gap: clamp(16px, 1.9vw, 24px);

	margin: 0;
	background: var(--emp-c-ground);
	color: var(--emp-c-ink);
	font-family: var(--emp-font);
	font-size: var(--emp-t-base);
	line-height: 1.6;
}

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

/* Astra prints an inline rule in <head>, after this stylesheet, that
   underlines content links: `.ast-single-post .entry-content a` at (0,2,1),
   which outranks `.emp-hx a` at (0,1,1). The live page escapes it only
   because it uses the Elementor template and never gets those body classes,
   so the moment that template changes every button and card here grows an
   underline. None of these are prose links, so the decoration is refused
   outright and the two that underline on hover restate it. */
.emp-hx a {
	text-decoration: none !important;
}

.emp-hx :focus-visible {
	outline: 2px solid var(--emp-c-accent);
	outline-offset: 3px;
	border-radius: var(--emp-r-xs);
}

.emp-hx__wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
}

.emp-hx__band {
	padding: var(--emp-sec-y) 0;
}

.emp-hx__band--surface {
	background: var(--emp-c-surface);
}

/* --- type --------------------------------------------------------- */

.emp-hx .emp-hx__h1 {
	margin: 0 0 24px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-hero);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.92;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The payoff clause carries the accent. Emphasis is colour and weight in
   the same family, never a second typeface. Display tone is allowed here
   because the type is far above the 24px large-text threshold. */
.emp-hx .emp-hx__h1 em {
	color: var(--emp-red-display);
	font-style: normal;
}

.emp-hx .emp-hx__h2 {
	margin: 0;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-3xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
}

.emp-hx .emp-hx__h2 em {
	color: var(--emp-red-display);
	font-style: normal;
}

.emp-hx .emp-hx__h2 a {
	color: inherit;
}

.emp-hx .emp-hx__h2 a:hover {
	color: var(--emp-c-accent-text);
}

.emp-hx .emp-hx__h3 {
	margin: 0 0 6px;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-transform: uppercase;
}

.emp-hx .emp-hx__h3 a {
	/* A one-line title gives a 35px line box, under the 44px floor. The
	   inline-flex lets the link carry a minimum height without the
	   padding that would push the heading off its baseline. */
	display: inline-flex;
	align-items: center;
	min-height: var(--emp-touch);
	color: inherit;
}

.emp-hx .emp-hx__h3 a:hover {
	color: var(--emp-c-accent-text);
}

/* The eyebrow takes --emp-c-accent-text, not the display tone: at 11px it
   needs the 7.82:1 tone, and the display tone only clears large-text AA. */
.emp-hx p.emp-hx__eyebrow {
	margin: 0 0 18px;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.emp-hx p.emp-hx__lede {
	max-width: 62ch;
	margin: 16px 0 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-lg);
	line-height: 1.6;
}

.emp-hx__head {
	margin: 0 0 var(--emp-head-gap);
}

.emp-hx__head .emp-hx__lede {
	margin-top: 12px;
}

.emp-hx__more {
	display: inline-flex;
	align-items: center;
	min-height: var(--emp-touch);
	margin-top: 16px;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.emp-hx__more:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* --- buttons ------------------------------------------------------- */

.emp-hx .emp-hx__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--emp-r-pill);
	font-family: var(--emp-font);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 220ms cubic-bezier(.22, .61, .36, 1), transform 150ms cubic-bezier(.22, .61, .36, 1);
}

/* White on this red is 4.64:1. Ink on it is 3.69:1 and fails, which is
   why red surfaces carry white type where amber surfaces carried dark. */
.emp-hx .emp-hx__btn--red {
	background: var(--emp-grad-accent);
	color: var(--emp-c-on-accent);
	box-shadow: var(--emp-e-brand);
}

.emp-hx .emp-hx__btn--red:hover {
	background: var(--emp-c-accent-dark);
	color: var(--emp-c-on-accent);
}

.emp-hx .emp-hx__btn--line {
	background: transparent;
	color: var(--emp-c-ink);
	box-shadow: inset 0 0 0 1px var(--emp-c-line-strong);
}

.emp-hx .emp-hx__btn--line:hover {
	background: var(--emp-c-surface);
	color: var(--emp-c-ink);
}

.emp-hx .emp-hx__btn:active {
	transform: translateY(1px);
}

.emp-hx .emp-hx__btn--wide {
	width: 100%;
	margin-top: 24px;
}

.emp-hx__ghost {
	display: inline-flex;
	align-items: center;
	min-height: var(--emp-touch);
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.emp-hx__ghost:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* --- hero ---------------------------------------------------------- */

.emp-hx__hero {
	position: relative;
	padding: var(--emp-sec-y-lead) 0 var(--emp-sec-y);
}

.emp-hx__herogrid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.emp-hx__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

/* --- hero search --------------------------------------------------- */

.emp-hx .emp-hx__search {
	display: grid;
	/* The keyword field takes the room: its placeholder is the longest
	   string in the row and truncating it looks like a bug. */
	grid-template-columns: minmax(0, 1fr) 168px auto;
	gap: 10px;
	margin: 24px 0 0;
}

.emp-hx__field {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 18px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	color: var(--emp-c-muted);
}

.emp-hx__field svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--emp-c-accent-text);
}

/* Astra styles inputs and selects at element level with attribute
   selectors that outrank a single class, so the wrapper is the visual
   field and the control itself is stripped back to nothing. */
.emp-hx .emp-hx__field input,
.emp-hx .emp-hx__field select {
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--emp-c-ink);
	font-family: var(--emp-font);

	/* 16px exactly: anything smaller makes iOS zoom on focus. */
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;

	/* The wrapper draws the 52px pill, so the control has to fill it.
	   A label extends the hit area of a text input but not of a select,
	   which would otherwise offer a 40px target.

	   Astra prints `input[type=...] { height: 40px }` inline. That is a
	   definite cross size, and a flex item with one ignores stretch, so
	   `height: auto` has to come first for the stretch to mean anything. */
	height: auto;
	align-self: stretch;
}

.emp-hx .emp-hx__field input::placeholder {
	color: var(--emp-c-muted);
	opacity: 1;
}

.emp-hx .emp-hx__field select option {
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
}

.emp-hx .emp-hx__field:focus-within {
	border-color: var(--emp-c-accent);
	box-shadow: 0 0 0 3px rgba(234, 2, 27, 0.14);
}

.emp-hx .emp-hx__field input:focus,
.emp-hx .emp-hx__field select:focus {
	outline: none;
}

/* --- hero spotlight ------------------------------------------------ */

.emp-hx__spot {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--emp-r-xl);
	background-color: var(--emp-c-ink);
	background-size: cover;
	background-position: center;
	box-shadow: var(--emp-e-3);
}

.emp-hx__spot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--emp-grad-veil);
}

.emp-hx__spotbody {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 3vw, 36px);
	color: #fff;
}

.emp-hx__spoteyebrow {
	color: #fff;
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.emp-hx__spottitle {
	font-family: var(--emp-font-display);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

.emp-hx__spotfacts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.emp-hx__chip {
	padding: 7px 14px;
	border-radius: var(--emp-r-pill);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	backdrop-filter: blur(6px);
}

/* Ink on gold is 10.66:1. White on gold is 1.77:1 and is banned. */
.emp-hx__chip--gold {
	background: var(--emp-gold);
	color: var(--emp-gold-ink);
	backdrop-filter: none;
}

/* --- poster card --------------------------------------------------- */

.emp-hx__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--emp-block-gap);
}

.emp-hx__grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.emp-hx__card {
	display: flex;
	flex-direction: column;
}

.emp-hx__poster {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--emp-r-lg);
	background-color: var(--emp-c-ink);
	background-size: cover;
	background-position: center;
	transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.emp-hx__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--emp-grad-card);
}

.emp-hx__card:hover .emp-hx__poster {
	transform: translateY(-4px);
}

.emp-hx__tag {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: var(--emp-r-pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--emp-c-ink);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.emp-hx__postertitle {
	position: relative;
	z-index: 1;
	padding: 20px;
	color: #fff;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.emp-hx__cardmeta {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 2px 0;
}

.emp-hx p.emp-hx__date {
	margin: 0 0 6px;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.emp-hx p.emp-hx__place {
	margin: 0;
	color: var(--emp-c-muted);
	font-size: 15px;
	line-height: 1.45;
}

.emp-hx__cardfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
}

.emp-hx__price {
	color: var(--emp-c-ink);
	font-size: var(--emp-t-base);
	font-weight: 700;
}

/* --- featured ------------------------------------------------------ */

.emp-hx__feature {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.emp-hx__featureart {
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--emp-r-xl);
	background-color: var(--emp-c-ink);
	background-size: cover;
	background-position: center;
	box-shadow: var(--emp-e-2);
}

.emp-hx__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 28px;
	margin: 28px 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--emp-c-line);
}

.emp-hx__facts dt {
	margin: 0 0 4px;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.emp-hx__facts dd {
	margin: 0;
	color: var(--emp-c-ink);
	font-size: var(--emp-t-base);
	font-weight: 600;
	line-height: 1.35;
}

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

.emp-hx__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	/* The filters control the grid, so they sit nearer to it than to the
	   heading above. Equal gaps on both sides would leave them reading as
	   part of neither. */
	margin: 0 0 var(--emp-block-gap);
}

.emp-hx__filter {
	display: inline-flex;
	align-items: center;
	min-height: var(--emp-touch);
	padding: 0 20px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	font-size: var(--emp-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color 220ms cubic-bezier(.22, .61, .36, 1);
}

.emp-hx__filter:hover {
	background: var(--emp-c-surface-2, var(--emp-c-surface));
	color: var(--emp-c-ink);
}

.emp-hx__filter.is-on {
	border-color: transparent;
	background: var(--emp-c-ink);
	color: #fff;
}

/* --- finder -------------------------------------------------------- */

.emp-hx__finder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.emp-hx__finderpanel {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-xl);
	background: var(--emp-c-canvas);
	box-shadow: var(--emp-e-2);
}

.emp-hx p.emp-hx__finderlabel {
	margin: 0 0 12px;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Needs the element qualifier too: the base rule above is (0,2,1) and
   would otherwise win and zero this margin back out. */
.emp-hx p.emp-hx__finderlabel:not(:first-child) {
	margin-top: 24px;
}

.emp-hx__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.emp-hx__pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--emp-touch);
	padding: 0 18px;
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-pill);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	font-size: 15px;
	font-weight: 500;
	transition: border-color 220ms cubic-bezier(.22, .61, .36, 1), background-color 220ms cubic-bezier(.22, .61, .36, 1);
}

.emp-hx__pill:hover {
	border-color: var(--emp-c-accent);
	background: var(--emp-c-accent-soft);
	color: var(--emp-c-accent-text);
}

/* --- act rail ------------------------------------------------------ */

.emp-hx__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(230px, 1fr);
	gap: var(--emp-block-gap);
	padding-bottom: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--emp-c-line-strong) transparent;
}

.emp-hx__rail > * {
	scroll-snap-align: start;
}

.emp-hx__act {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--emp-r-lg);
	background-color: var(--emp-c-ink);
	background-size: cover;
	background-position: center;
}

.emp-hx__act::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--emp-grad-card);
}

.emp-hx__actbody {
	position: relative;
	z-index: 1;
	padding: 20px;
	color: #fff;
}

.emp-hx__actkind {
	display: block;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.emp-hx__actname {
	display: block;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-transform: uppercase;
}

/* --- gallery strip ------------------------------------------------- */

.emp-hx__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: var(--emp-block-gap);
	padding-bottom: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--emp-c-line-strong) transparent;
}

.emp-hx__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	margin: 0;
	overflow: hidden;
	border-radius: var(--emp-r-lg);
	background-color: var(--emp-c-ink);
	background-size: cover;
	background-position: center;
	scroll-snap-align: start;
}

.emp-hx__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--emp-grad-card);
}

.emp-hx__frame figcaption {
	position: relative;
	z-index: 1;
	padding: 20px;
	color: #fff;
}

.emp-hx__frame figcaption b {
	display: block;
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-lg);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.emp-hx__frame figcaption span {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--emp-t-sm);
}

/* --- cities -------------------------------------------------------- */

.emp-hx__cities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--emp-block-gap);
}

.emp-hx .emp-hx__city {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(22px, 2.4vw, 32px);
	border: 1px solid var(--emp-c-line);
	border-radius: var(--emp-r-lg);
	background: var(--emp-c-canvas);
	color: var(--emp-c-ink);
	transition: border-color 220ms cubic-bezier(.22, .61, .36, 1), box-shadow 220ms cubic-bezier(.22, .61, .36, 1);
}

.emp-hx .emp-hx__city:hover {
	border-color: var(--emp-c-accent);
	box-shadow: var(--emp-e-2);
}

.emp-hx__city b {
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	text-transform: uppercase;
}

.emp-hx__city span {
	color: var(--emp-c-muted);
	font-size: 15px;
}

.emp-hx__city em {
	margin-top: 10px;
	color: var(--emp-c-accent-text);
	font-size: var(--emp-t-sm);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- horizon ------------------------------------------------------- */

.emp-hx__horizon {
	border-top: 1px solid var(--emp-c-line);
}

.emp-hx__horizonrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(24px, 3vw, 36px) 0;
	border-bottom: 1px solid var(--emp-c-line);
}

/* --- closing ------------------------------------------------------- */

.emp-hx__closing {
	padding: var(--emp-sec-y) 0;
	text-align: center;
}

.emp-hx .emp-hx__h1--closing {
	margin: 0 auto 36px;
	max-width: 16ch;
}

/* --- narrower ------------------------------------------------------ */

/* Between these widths the hero is still two columns but its left column
   is too narrow for a three-across search: the keyword placeholder is the
   longest string in the row and gets cut. Give the input its own row and
   let the date and button share the one below. Above 1360 all three fit;
   below 901 the hero is single column and the base rule takes over. */
@media (min-width: 901px) and (max-width: 1360px) {
	.emp-hx .emp-hx__search {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.emp-hx .emp-hx__search > .emp-hx__field:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 1080px) {
	.emp-hx__grid--four {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.emp-hx__herogrid,
	.emp-hx__feature,
	.emp-hx__finder {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The poster leads on a phone: it is the thing being sold, so it
	   moves above the copy. It keeps its portrait 4/5 ratio here: the
	   artwork is portrait, and a landscape box crops about half its
	   height away, which slices through the title printed on the poster
	   itself. Width is not scarce on a phone; height is the thing to
	   spend. */
	.emp-hx__feature .emp-hx__featureart {
		order: -1;
	}

	.emp-hx__grid,
	.emp-hx__grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.emp-hx__cities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.emp-hx .emp-hx__search .emp-hx__btn {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.emp-hx__wrap {
		padding: 0 20px;
	}

	/* The rhythm tokens already step down at this width, so the bands
	   need no override. The hero keeps one because its first element is
	   a small eyebrow that needs less room above it than a headline. */
	.emp-hx__hero {
		padding: 24px 0 var(--emp-sec-y);
	}

	.emp-hx__grid,
	.emp-hx__grid--four,
	.emp-hx__cities {
		grid-template-columns: minmax(0, 1fr);
	}

	.emp-hx p.emp-hx__lede {
		font-size: var(--emp-t-base);
	}

	.emp-hx__cta .emp-hx__btn {
		flex: 1 1 100%;
	}

	.emp-hx__horizonrow {
		flex-direction: column;
		align-items: flex-start;
	}

	.emp-hx__horizonrow .emp-hx__btn {
		width: 100%;
	}

	/* An odd number of facts leaves an orphan in a two-column grid, and
	   a 150px column wraps a venue name to three lines. One column. */
	.emp-hx__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- arrival ------------------------------------------------------
 * Mobile only, and deliberately light: opacity plus a small rise, both
 * composited. The `.emp-js` guard is the script's class on <html>, so a
 * script failure can never leave content hidden. Section 15 clears all of
 * it under prefers-reduced-motion.
 * ------------------------------------------------------------------ */

.emp-js .emp-hx .emp-reveal,
.emp-js .emp-hx .emp-reveal-group > * {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (max-width: 900px) {
	.emp-js .emp-hx .emp-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 380ms cubic-bezier(.22, .61, .36, 1),
			transform 380ms cubic-bezier(.22, .61, .36, 1);
	}

	.emp-js .emp-hx .emp-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.emp-js .emp-hx .emp-reveal-group > * {
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity 360ms cubic-bezier(.22, .61, .36, 1),
			transform 360ms cubic-bezier(.22, .61, .36, 1);
	}

	.emp-js .emp-hx .emp-reveal-group.is-visible > * {
		opacity: 1;
		transform: none;
		transition-delay: min(calc(var(--emp-i, 0) * 45ms), 180ms);
	}

	/* The rails scroll sideways, so shifting their children would move
	   content inside a scroll container. Those only fade. */
	.emp-js .emp-hx .emp-hx__rail.emp-reveal-group > *,
	.emp-js .emp-hx .emp-hx__strip.emp-reveal-group > * {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emp-js .emp-hx .emp-reveal,
	.emp-js .emp-hx .emp-reveal.is-visible,
	.emp-js .emp-hx .emp-reveal-group > *,
	.emp-js .emp-hx .emp-reveal-group.is-visible > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.emp-hx__poster,
	.emp-hx .emp-hx__btn,
	.emp-hx .emp-hx__city,
	.emp-hx__filter,
	.emp-hx__pill {
		transition: none;
	}

	.emp-hx__card:hover .emp-hx__poster {
		transform: none;
	}
}


/* =====================================================================
 * 56. Event archive, in the home page's band language
 *
 * The archive used to sit in Astra's white article box: a small
 * sentence-case heading in a card, then chips, then the grid, all on one
 * flat ground. The home page reads as bands - a lead band with an eyebrow
 * and a display heading, then an alternating ground - and this brings the
 * archive onto the same rhythm without touching the theme template. The
 * body class comes from EMP_Archive::body_class().
 *
 * Astra prints `body.archive .ast-archive-description .ast-archive-title
 * { font-size: 2rem; font-weight: 600 }` inline, at (0,3,1) and after this
 * stylesheet, so every rule that has to beat it carries `body` plus four
 * classes. Matching its specificity is not enough; source order decides a
 * tie and Astra is always later.
 * ===================================================================== */

body.emp-eventarchive .site-content .ast-container {
	max-width: none;
	padding: 0;
}

body.emp-eventarchive .site-content .content-area,
body.emp-eventarchive .site-content .site-main {
	margin: 0;
	padding: 0;
}

/* --- the lead band -------------------------------------------------- */

/* Astra sets this box's padding in three places, one of them inline at
   (0,2,1) and in em, so it lands at 44px on a phone and pushes the
   heading into the middle of the page. */
body.emp-eventarchive .site-content .ast-archive-description {
	max-width: none;
	margin: 0;
	padding: var(--emp-sec-y-lead) 0 var(--emp-sec-y);
	border: 0;
	border-radius: 0;
	background: var(--emp-c-ground);
	box-shadow: none;
	text-align: left;
}

body.emp-eventarchive .site-content .ast-archive-description > * {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 32px;
}

body.emp-eventarchive .ast-archive-description .page-title.ast-archive-title {
	margin: 0;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-3xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

body.emp-eventarchive .ast-archive-description .ast-archive-title .emp-archive__eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.emp-eventarchive .ast-archive-description .ast-archive-description-inner p,
body.emp-eventarchive .ast-archive-description p {
	margin: 14px auto 0;
	color: var(--emp-c-muted);
	font-size: var(--emp-t-lg);
	line-height: 1.6;
}

/* --- the filter band ------------------------------------------------ */

/* No ground here: the band behind the filter rows is drawn by the rows
   themselves, and a background on this wrapper would cover it. */
.emp-eventarchive .emp-archive {
	margin: 0;
}

.emp-eventarchive .emp-archive__nav,
.emp-eventarchive .emp-archive__cards,
.emp-eventarchive .emp-archive__pagination,
.emp-eventarchive .emp-archive__empty {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* The two rows butt together so they read as one surface band. Each one
   paints its own full-bleed strip behind itself, because there is no
   element wrapping just the filters and adding one would mean changing
   markup three call sites depend on. */
.emp-eventarchive .emp-archive__nav {
	position: relative;
	margin: 0;
	padding-block: 10px;
}

.emp-eventarchive .emp-archive__nav::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: var(--emp-c-surface);
}

.emp-eventarchive .emp-archive__nav:first-of-type {
	padding-top: var(--emp-sec-y);
}

.emp-eventarchive .emp-archive__nav:last-of-type {
	padding-bottom: var(--emp-sec-y);
}

.emp-eventarchive .emp-archive__navlabel {
	color: var(--emp-c-muted);
	font-size: var(--emp-t-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* --- the grid ------------------------------------------------------- */

.emp-eventarchive .emp-archive__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.9vw, 24px);
	margin-top: var(--emp-sec-y);
	padding-bottom: var(--emp-sec-y);
}

.emp-eventarchive .emp-archive__pagination {
	padding-bottom: var(--emp-sec-y);
}

/* A 36px chip is under the touch floor, and the filter row is the first
   thing a thumb reaches on this page. */
@media (pointer: coarse) {
	.emp-archive__chip {
		min-height: var(--emp-touch);
	}
}

@media (max-width: 1080px) {
	.emp-eventarchive .emp-archive__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.emp-eventarchive .emp-archive__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body.emp-eventarchive .site-content .ast-archive-description > *,
	.emp-eventarchive .emp-archive__nav,
	.emp-eventarchive .emp-archive__cards,
	.emp-eventarchive .emp-archive__pagination,
	.emp-eventarchive .emp-archive__empty {
		padding-inline: 20px;
	}

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


/* =====================================================================
 * 57. Single event, in the home page's band language
 *
 * The event page was sitting in Astra's white article box, which put the
 * theme's own entry header above the plugin's hero: two H1 elements with
 * the same text, and a byline showing the post's publish date rather than
 * the event's. The box is removed, the duplicate header and the
 * previous/next post rail go with it, and the page becomes bands on the
 * ground like the home page.
 * ===================================================================== */

/* --- undo the theme's article box ----------------------------------- */

body.emp-single-event.ast-separate-container .site-content .ast-container {
	max-width: none;
	padding: 0;
}

body.emp-single-event.ast-separate-container .site-content .content-area,
body.emp-single-event.ast-separate-container .site-content .site-main {
	margin: 0;
	padding: 0;
}

body.emp-single-event.ast-separate-container .site-content .site-main > article {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* The plugin's hero already carries the title, the category and the real
   event date. Astra's header repeated the title as a second H1 and dated
   the page by when the post was published. */
.emp-single-event .site-main > article > .single-layout-1 > .entry-header,
.emp-single-event .ast-single-post-order > .entry-header,
.emp-single-event .site-main .entry-header .entry-title,
.emp-single-event .site-main .entry-header .post-meta,
.emp-single-event .site-main .ast-single-post-order .entry-header {
	display: none;
}

/* Previous and next by publish order means nothing on an event, and the
   related row below already answers "what else is on". */
.emp-single-event .post-navigation {
	display: none;
}

/* --- bands ---------------------------------------------------------- */

.emp-single-event .emp-eventpage {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* The wrap sits on the hero itself, not on its children. A child that
   carries a background - the poster box does - would otherwise paint its
   own padding and bleed to the window edge. */
.emp-single-event .emp-hero-event {
	max-width: 1320px;
	margin-inline: auto;
	padding: var(--emp-sec-y-lead) 32px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* The hero takes the home page's featured layout: poster on the left,
   the copy beside it. It applies only when the event is showing a poster,
   because a 16:7 banner in a narrow column is a letterbox slot and reads
   as a mistake. :has() is the test; where it is unsupported the hero
   simply stays stacked, which is the old behaviour. */
@media (min-width: 901px) {
	.emp-single-event .emp-hero-event:has(.emp-hero-event__media--poster) {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(32px, 4vw, 56px);
		align-items: center;
	}

	.emp-single-event .emp-hero-event:has(.emp-hero-event__media--poster) .emp-hero-event__body {
		padding: 0;
	}
}

/* 3/4 against a 4/5 poster crops about six per cent off the sides, which
   is the same trade the home page grid makes. The old rule let the poster
   set its own height, which was right while it spanned the full width and
   wrong now that it has a column of its own. */
.emp-single-event .emp-hero-event__media--poster {
	display: block;
	aspect-ratio: 3 / 4;
	min-height: 0;
	border-radius: var(--emp-r-xl);
	overflow: hidden;
}

.emp-single-event .emp-hero-event__media--poster .emp-hero-event__img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* The section rail is sticky, so it needs a ground under it once content
   scrolls beneath. It takes the page ground and a hairline rather than a
   white card, which read as a second header. */
.emp-single-event .emp-secnav {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--emp-c-line);
	border-radius: 0;
	background: var(--emp-c-ground);
	box-shadow: none;
}

.emp-single-event .emp-secnav__list {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* The poster is portrait, so the hero media keeps the 3/4 the rest of the
   site uses rather than the letterbox it had. */
.emp-single-event .emp-hero-event__media--poster {
	border-radius: var(--emp-r-xl);
	overflow: hidden;
}

.emp-single-event .emp-hero-event__title {
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-3xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

.emp-single-event .emp-eventpage {
	margin-top: 0;
	padding-block: var(--emp-sec-y);
}

/* The related row takes the alternating ground, which is what turns the
   bottom of the page into a band rather than more of the same sheet. */
.emp-single-event .emp-related {
	position: relative;
	max-width: none;
	margin: 0;
	padding: var(--emp-sec-y) 0;
	border-top: 0;
}

.emp-single-event .emp-related::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: var(--emp-c-surface);
}

.emp-single-event .emp-related > * {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 32px;
}

.emp-single-event .emp-related__head {
	margin-bottom: var(--emp-head-gap);
}

.emp-single-event .emp-related .emp-related__title {
	margin: 0;
	color: var(--emp-c-ink);
	font-family: var(--emp-font-display);
	font-size: var(--emp-t-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
}

.emp-single-event .emp-related__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.9vw, 24px);
}

@media (max-width: 1080px) {
	.emp-single-event .emp-related__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.emp-single-event .emp-related__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.emp-single-event .emp-hero-event,
	.emp-single-event .emp-secnav__list,
	.emp-single-event .emp-eventpage,
	.emp-single-event .emp-related > * {
		padding-inline: 20px;
	}

	.emp-single-event .emp-related__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The theme paints its skip link in the palette's accent, which lands at
   4.37:1 on the grey it appears over. It is a keyboard-only control and
   the one thing a keyboard user meets first, so it takes the text red. */
.skip-link.screen-reader-text,
.skip-link.screen-reader-text:focus {
	color: var(--emp-c-accent-text);
	font-family: var(--emp-font);
	font-weight: 700;
}

/* --- Astra's underline rule on single posts -------------------------- */

/* Astra prints `.ast-single-post .entry-content a { text-decoration:
   underline }` inline at (0,2,1), which outranks every single-class rule
   the plugin has. On an event page that underlined the category chip, the
   whole section rail, the organiser's name and every button. The home page
   never showed it because /home-2/ renders through an Elementor template
   rather than the single-post one.
   Prose links inside the description are the exception: there an underline
   is the right signal, so they are restated after. */
.emp-single-event .entry-content .emp-eventnav-scope a,
.emp-single-event .entry-content .emp-related a,
.emp-single-event .entry-content .emp-tickets a {
	text-decoration: none;
}

.emp-single-event .entry-content .emp-eventbody a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.emp-single-event .entry-content .emp-secnav__link:hover,
.emp-single-event .entry-content .emp-related__more:hover,
.emp-single-event .entry-content .emp-organizer__name:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- the theme's own top padding ------------------------------------- */

/* The archive opens with its own lead band too. `#content` is the same
   element as `.site-content`, so the ID has to be named here as well or
   the theme's own rule outranks this one. */
body.emp-eventarchive #content,
body.emp-eventarchive .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

body.emp-eventarchive .site-content .ast-container,
body.emp-single-event .site-content .ast-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Astra gives the content column `id="primary"`, and its 4em padding is
   set through that ID, so a class selector can never reach it however
   long the chain is. Both page types open with their own lead band and do
   not want it. */
body.emp-eventarchive #primary,
body.emp-single-event #primary,
body.emp-eventarchive .site-content .content-area,
body.emp-single-event .site-content .content-area {
	margin-block: 0;
	padding-block: 0;
}