@charset "utf-8";
/* ==========================================================================
   Marana Big PHAT Band — site styles
   Loads AFTER assets/css/main.css. Everything here is namespaced .mbpb-*
   so it layers on the HTML5 UP "Paradigm Shift" template instead of
   fighting it. Safe to delete this file to revert to the stock template.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   Navy is the template's existing #24324A. Brass is the new accent — the
   band is a horn section, so the palette comes from the instruments.
   -------------------------------------------------------------------------- */

:root {
	--mbpb-navy:        #24324A;
	--mbpb-navy-deep:   #1A2436;
	--mbpb-navy-soft:   #3A4B68;

	--mbpb-brass:       #B8873B;
	--mbpb-brass-lt:    #E0B767;
	--mbpb-brass-pale:  #F7F0E1;

	--mbpb-ember:       #A8412C;

	--mbpb-ink:         #14181F;
	--mbpb-mute:        #626C7C;
	--mbpb-rule:        #E4E1D9;
	--mbpb-paper:       #FFFFFF;

	--mbpb-radius:      3px;
	--mbpb-shadow:      0 1px 2px rgba(20, 24, 31, .05),
	                    0 8px 24px -12px rgba(20, 24, 31, .18);
}

/* --------------------------------------------------------------------------
   2. Typography overrides
   The stock pairing (Source Sans Pro + Raleway) is what makes the template
   read as a template. Swapped for:
     Alfa Slab One  — woodtype slab, the vernacular of old concert bills.
                      Used ONLY for the hero line and gig date numerals.
     Archivo        — headings and UI. More spine than Raleway.
     Source Serif 4 — body copy. Concert programs are set in serif.
   -------------------------------------------------------------------------- */

body,
input,
select,
textarea {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
}

h1 {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.mbpb-display {
	font-family: "Alfa Slab One", Georgia, serif;
	font-weight: 400;
	letter-spacing: -.005em;
	text-transform: none;
}

/* Small tracked label. Used as an eyebrow above content blocks. */
.mbpb-eyebrow {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mbpb-brass);
	margin: 0 0 .85rem 0;
	display: block;
}

/* --------------------------------------------------------------------------
   2b. Resets
   main.css sets `ul { list-style: disc; padding-left: 1rem }`,
   `ul li { padding-left: .325rem }`, `dl dd { margin-left: 1.5rem }` and
   `dl dt { margin-bottom: 1rem }`. None of that suits the components below,
   so it gets cleared here rather than fought selector by selector.
   -------------------------------------------------------------------------- */

.mbpb-gigs,
.mbpb-desks,
.mbpb-front,
.mbpb-facts,
.mbpb-sitefoot,
.mbpb-btn-row {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mbpb-gigs > li,
.mbpb-desks > li,
.mbpb-front > li,
.mbpb-facts > li,
.mbpb-sitefoot > li,
.mbpb-btn-row > li {
	padding-left: 0;
}

.mbpb-gig__meta,
.mbpb-gig__meta dt,
.mbpb-gig__meta dd {
	margin-left: 0;
}

.mbpb-gig__meta dt {
	margin-bottom: 0;
}

.mbpb-gig__meta dd small,
.mbpb-gig__note small {
	display: inline-block;
	font-size: .8rem;
	line-height: 1.55;
	color: var(--mbpb-mute);
	margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   3. Accessibility floor
   -------------------------------------------------------------------------- */

.mbpb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--mbpb-navy);
	color: #fff;
	padding: .85rem 1.25rem;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-bottom: 0;
}

.mbpb-skip:focus {
	left: 1rem;
	top: 1rem;
}

.mbpb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mbpb-brass);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Buttons
   The template's .button.primary is hard-wired with !important, so these use
   their own class rather than trying to out-specify it.
   -------------------------------------------------------------------------- */

.mbpb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .17em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	padding: 1.05rem 1.6rem;
	border: 2px solid var(--mbpb-brass);
	border-radius: var(--mbpb-radius);
	background: var(--mbpb-brass);
	color: var(--mbpb-navy-deep);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease,
	            color .18s ease, transform .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mbpb-btn:hover,
.mbpb-btn:focus {
	background: var(--mbpb-brass-lt);
	border-color: var(--mbpb-brass-lt);
	color: var(--mbpb-navy-deep);
	border-bottom-color: var(--mbpb-brass-lt);
	transform: translateY(-2px);
}

/* Outline variant. Uses currentColor so it stays legible on the navy panel
   and on white without needing two rules. */
.mbpb-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
	opacity: .9;
}

.mbpb-btn--ghost:hover,
.mbpb-btn--ghost:focus {
	background: transparent;
	border-color: var(--mbpb-brass);
	color: var(--mbpb-brass);
	opacity: 1;
}

.mbpb-btn--sm {
	padding: .8rem 1.15rem;
	font-size: .62rem;
}

.mbpb-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0 0;
	padding: 0;
	list-style: none;
}

/* Hero sits in a right-aligned header on wide screens. */
@media screen and (min-width: 1153px) {
	.mbpb-hero .mbpb-btn-row {
		justify-content: flex-end;
	}
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.mbpb-hero__logo {
	display: block;
	max-width: 340px;
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
}

@media screen and (min-width: 1153px) {
	.mbpb-hero__logo {
		margin-left: auto;
	}
}

.mbpb-hero__line {
	font-family: "Alfa Slab One", Georgia, serif;
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	line-height: 1.06;
	letter-spacing: -.01em;
	margin: 0 0 1.35rem 0;
	text-transform: none;
	color: inherit;
}

.mbpb-hero__line em {
	font-style: normal;
	color: var(--mbpb-brass);
}

.mbpb-hero__sub {
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 34rem;
	margin: 0 0 1.75rem 0;
	opacity: .88;
}

@media screen and (min-width: 1153px) {
	.mbpb-hero__sub {
		margin-left: auto;
	}
}

/* "Next show" strip — the single most useful fact on the site, so it gets
   a permanent slot rather than being buried in a carousel. */
.mbpb-nextup {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .85rem;
	padding: .8rem 1.1rem;
	border: 1px solid rgba(184, 135, 59, .55);
	border-left: 4px solid var(--mbpb-brass);
	border-radius: var(--mbpb-radius);
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .78rem;
	line-height: 1.5;
	text-align: left;
}

.mbpb-nextup__tag {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mbpb-brass);
}

.mbpb-nextup__what {
	font-weight: 600;
}

.mbpb-nextup__when {
	opacity: .8;
}

/* --------------------------------------------------------------------------
   6. Gig cards
   Replaces the click-through carousel. Every date is visible at once —
   the dates are the reason people come to the site.
   -------------------------------------------------------------------------- */

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

.mbpb-gig {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 0 1.75rem;
	position: relative;
	padding: 1.75rem;
	background: var(--mbpb-paper);
	border: 1px solid var(--mbpb-rule);
	border-radius: var(--mbpb-radius);
	box-shadow: var(--mbpb-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mbpb-gig:hover {
	transform: translateY(-3px);
	border-color: rgba(184, 135, 59, .5);
	box-shadow: 0 1px 2px rgba(20, 24, 31, .05),
	            0 18px 36px -18px rgba(20, 24, 31, .3);
}

/* The next show gets a brass edge and a flag. */
.mbpb-gig--next {
	border-color: rgba(184, 135, 59, .55);
	background:
		linear-gradient(to right, var(--mbpb-brass) 0 5px, transparent 5px),
		var(--mbpb-brass-pale);
	padding-left: 2.1rem;
}

.mbpb-gig__flag {
	position: absolute;
	top: -.72rem;
	left: 2.1rem;
	background: var(--mbpb-ember);
	color: #fff;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .32rem .7rem;
	border-radius: 2px;
	line-height: 1.4;
}

.mbpb-gig__date {
	text-align: center;
	padding-top: .2rem;
	border-right: 1px solid var(--mbpb-rule);
	padding-right: 1rem;
	margin-right: -.75rem;
}

.mbpb-gig--next .mbpb-gig__date {
	border-right-color: rgba(184, 135, 59, .4);
}

.mbpb-gig__mon {
	display: block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mbpb-ember);
	line-height: 1.6;
}

.mbpb-gig__day {
	display: block;
	font-family: "Alfa Slab One", Georgia, serif;
	font-size: 3.15rem;
	line-height: .95;
	color: var(--mbpb-navy);
	margin: .1rem 0 .25rem 0;
}

.mbpb-gig__yr {
	display: block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpb-mute);
	line-height: 1.5;
}

.mbpb-gig__body > h3 {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.35;
	text-transform: none;
	color: var(--mbpb-ink);
	margin: 0 0 .9rem 0;
}

.mbpb-gig__meta {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	gap: .35rem .9rem;
	margin: 0 0 1.1rem 0;
	font-size: .9rem;
	line-height: 1.55;
}

.mbpb-gig__meta dt {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mbpb-mute);
	padding-top: .3rem;
}

.mbpb-gig__meta dd {
	margin: 0;
	color: var(--mbpb-ink);
}

.mbpb-gig__note {
	font-size: .95rem;
	line-height: 1.7;
	color: var(--mbpb-ink);
	margin: 0 0 1.25rem 0;
	opacity: .92;
}

/* Admission badges. Three states, because "free", "pass the hat" and
   "buy a ticket" are three different things to the person reading. */
.mbpb-tag {
	display: inline-block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: .18rem .5rem;
	margin-left: .4rem;
	vertical-align: 1px;
	white-space: nowrap;
}

.mbpb-tag--free {
	color: #1F5D3F;
	background: #E6F2EA;
	border: 1px solid #C4DFCE;
}

.mbpb-tag--donation {
	color: #7A5716;
	background: var(--mbpb-brass-pale);
	border: 1px solid rgba(184, 135, 59, .5);
}

.mbpb-tag--ticketed {
	color: #FFFFFF;
	background: var(--mbpb-navy);
	border: 1px solid var(--mbpb-navy);
}

@media screen and (max-width: 640px) {
	.mbpb-gig,
	.mbpb-gig--next {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.1rem;
		padding: 1.4rem;
	}

	.mbpb-gig--next {
		border-top: 5px solid var(--mbpb-brass);
		background: var(--mbpb-brass-pale);
	}

	.mbpb-gig__flag {
		left: 1.4rem;
	}

	.mbpb-gig__date {
		display: flex;
		align-items: baseline;
		gap: .55rem;
		text-align: left;
		border-right: 0;
		border-bottom: 1px solid var(--mbpb-rule);
		padding: .3rem 0 .85rem 0;
		margin: 0;
	}

	.mbpb-gig__day {
		font-size: 2.1rem;
		margin: 0;
	}

	.mbpb-gig__meta {
		grid-template-columns: minmax(0, 1fr);
		gap: .1rem;
	}

	.mbpb-gig__meta dt {
		padding-top: .55rem;
	}
}

/* --------------------------------------------------------------------------
   7. Stage plot roster
   The signature element. A 20-piece band's whole selling point is that it is
   a 20-piece band, so the roster is laid out the way the band actually sits
   on stage — trumpets on the back riser, then bones, saxes on the front row,
   rhythm off to the side, conductor and vocalist at the stage edge.
   -------------------------------------------------------------------------- */

.mbpb-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
	grid-template-areas:
		"tpt rhy"
		"tbn rhy"
		"sax rhy"
		"front front";
	gap: .8rem;
	padding: 1.75rem 1.75rem 0 1.75rem;
	background:
		linear-gradient(180deg, var(--mbpb-navy-deep), var(--mbpb-navy));
	border-radius: var(--mbpb-radius) var(--mbpb-radius) 0 0;
	margin: 0 0 2.5rem 0;
	position: relative;
}

/* Footlights: the stage edge. */
.mbpb-stage::after {
	content: "";
	display: block;
	grid-column: 1 / -1;
	height: 5px;
	margin: 1.5rem -1.75rem 0 -1.75rem;
	background: linear-gradient(
		to right,
		var(--mbpb-brass) 0%,
		var(--mbpb-brass-lt) 22%,
		var(--mbpb-brass) 48%,
		var(--mbpb-brass-lt) 74%,
		var(--mbpb-brass) 100%
	);
}

.mbpb-riser {
	padding: .9rem 1rem;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(224, 183, 103, .18);
	border-radius: var(--mbpb-radius);
}

.mbpb-riser--tpt   { grid-area: tpt; }
.mbpb-riser--tbn   { grid-area: tbn; }
.mbpb-riser--sax   { grid-area: sax; }
.mbpb-riser--rhy   { grid-area: rhy; }

.mbpb-riser__label {
	display: block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mbpb-brass-lt);
	margin: 0 0 .7rem 0;
}

.mbpb-desks {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpb-desks li {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .74rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .01em;
	color: #EDEFF3;
	background: rgba(255, 255, 255, .07);
	border-radius: 2px;
	padding: .38rem .6rem;
	white-space: nowrap;
}

.mbpb-desks li span {
	color: var(--mbpb-brass-lt);
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-left: .35rem;
}

/* Conductor / vocals / sound — the people at the front of the stage. */
.mbpb-front {
	grid-area: front;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: .35rem 0 0 0;
	list-style: none;
}

.mbpb-front li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .18rem;
	background: rgba(224, 183, 103, .12);
	border: 1px solid rgba(224, 183, 103, .35);
	border-radius: var(--mbpb-radius);
	padding: .55rem .95rem;
	text-align: center;
}

.mbpb-front li span {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .55rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mbpb-brass-lt);
}

.mbpb-front li strong {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
}

@media screen and (max-width: 900px) {
	.mbpb-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"tpt"
			"tbn"
			"sax"
			"rhy"
			"front";
		padding: 1.25rem 1.25rem 0 1.25rem;
	}

	.mbpb-stage::after {
		margin-left: -1.25rem;
		margin-right: -1.25rem;
	}

	.mbpb-desks li {
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   8. Booking facts strip
   -------------------------------------------------------------------------- */

.mbpb-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--mbpb-rule);
	border: 1px solid var(--mbpb-rule);
	border-radius: var(--mbpb-radius);
	overflow: hidden;
	margin: 0 0 2rem 0;
	padding: 0;
	list-style: none;
}

.mbpb-facts li {
	background: var(--mbpb-paper);
	padding: 1.1rem 1.1rem;
}

.mbpb-facts strong {
	display: block;
	font-family: "Alfa Slab One", Georgia, serif;
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--mbpb-navy);
	margin-bottom: .35rem;
}

.mbpb-facts span {
	display: block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--mbpb-mute);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Contact details, video, footer
   -------------------------------------------------------------------------- */

.mbpb-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--mbpb-radius);
	background: var(--mbpb-navy-deep);
	box-shadow: var(--mbpb-shadow);
	margin-bottom: 1.25rem;
}

.mbpb-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mbpb-sitefoot {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mbpb-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 100;
	width: 2.9rem;
	height: 2.9rem;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--mbpb-navy);
	color: var(--mbpb-brass-lt);
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 6px 20px -6px rgba(20, 24, 31, .55);
}

.mbpb-totop.is-shown {
	display: flex;
}

/* --------------------------------------------------------------------------
   10. Scroll reveal — off by default, enabled by JS so no-JS still shows
       everything. Disabled entirely under reduced-motion.
   -------------------------------------------------------------------------- */

.mbpb-js .mbpb-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.mbpb-js .mbpb-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mbpb-js .mbpb-reveal,
	.mbpb-js .mbpb-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mbpb-gig:hover,
	.mbpb-btn:hover {
		transform: none;
	}

	* {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   11. Chair status board (join.html)
   Three states, because "we need someone now" and "we're building a bench"
   are different asks and should not look the same.
   -------------------------------------------------------------------------- */

.mbpb-chairs {
	display: grid;
	gap: .6rem;
	margin: 0 0 1.25rem 0;
	padding: 0;
	list-style: none;
}

.mbpb-chairs > li {
	padding-left: 0;
}

.mbpb-chair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .35rem 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: var(--mbpb-paper);
	border: 1px solid var(--mbpb-rule);
	border-left: 4px solid var(--mbpb-rule);
	border-radius: var(--mbpb-radius);
}

.mbpb-chair--open { border-left-color: var(--mbpb-ember); }
.mbpb-chair--sub  { border-left-color: var(--mbpb-brass); }
.mbpb-chair--full { border-left-color: var(--mbpb-rule); opacity: .72; }

.mbpb-chair__part {
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mbpb-ink);
	margin: 0;
}

.mbpb-chair__note {
	grid-column: 1 / -1;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--mbpb-mute);
	margin: 0;
}

.mbpb-status {
	display: inline-block;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .56rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.5;
	padding: .3rem .65rem;
	border-radius: 2px;
	white-space: nowrap;
}

.mbpb-status--open {
	background: var(--mbpb-ember);
	color: #fff;
}

.mbpb-status--sub {
	background: var(--mbpb-brass-pale);
	color: #7A5716;
	border: 1px solid rgba(184, 135, 59, .5);
}

.mbpb-status--full {
	background: #EFEFEC;
	color: var(--mbpb-mute);
	border: 1px solid var(--mbpb-rule);
}

.mbpb-key {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 0 0 1.75rem 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--mbpb-mute);
}

.mbpb-key > li {
	padding-left: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
}

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

/* Numbered steps — the audition process is an actual sequence, so it gets
   numbers. Nothing else on the site does. */
.mbpb-steps {
	counter-reset: mbpb-step;
	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
}

.mbpb-steps > li {
	counter-increment: mbpb-step;
	position: relative;
	padding: 0 0 1.35rem 3.25rem;
	margin: 0;
}

.mbpb-steps > li::before {
	content: counter(mbpb-step);
	position: absolute;
	left: 0;
	top: .1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mbpb-navy);
	color: var(--mbpb-brass-lt);
	font-family: "Alfa Slab One", Georgia, serif;
	font-size: .95rem;
	border-radius: 50%;
}

.mbpb-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.09rem;
	top: 2.6rem;
	bottom: .15rem;
	width: 2px;
	background: var(--mbpb-rule);
}

.mbpb-steps h3 {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--mbpb-ink);
	margin: 0 0 .4rem 0;
}

.mbpb-steps p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
}

/* Small callout used for the under-18 note. */
.mbpb-note {
	border-left: 3px solid var(--mbpb-brass);
	background: var(--mbpb-brass-pale);
	border-radius: 0 var(--mbpb-radius) var(--mbpb-radius) 0;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem 0;
	font-size: .9rem;
	line-height: 1.7;
}

.mbpb-note p:last-child {
	margin-bottom: 0;
}

/* Cross-page nav */
.mbpb-backlink {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: "Archivo", Helvetica, Arial, sans-serif;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-bottom: 0;
	opacity: .85;
	margin-bottom: 1.5rem;
}

.mbpb-backlink:hover {
	opacity: 1;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. Overrides for the "WHITE CONTENT AREA TEXT FIX" block in main.css

   main.css (your own additions, near the bottom) contains:

       .content, .content p, .content li, .content strong,
       .content h3, .content h4, .content a { color: #24324A !important; }

       #wrapper > section > .content, ... span { color: #24324A !important; }

   That paints every piece of text inside .content navy and marks it
   !important, which wins over anything set by class alone. On a white
   background it's invisible; on the navy stage plot and the navy Ticketed
   badge it made text vanish entirely.

   Rather than edit main.css (yours, and you may rely on that rule
   elsewhere), each element that needs a different color is restated here
   with !important and a higher class count so it wins the cascade.

   If you ever delete that block from main.css, this whole section can go.
   -------------------------------------------------------------------------- */

/* Eyebrow labels */
#wrapper .content .mbpb-eyebrow { color: var(--mbpb-brass) !important; }

/* Stage plot — light text on a dark panel */
#wrapper .content .mbpb-riser__label   { color: var(--mbpb-brass-lt) !important; }
#wrapper .content .mbpb-desks li       { color: #EDEFF3 !important; }
#wrapper .content .mbpb-desks li span  { color: var(--mbpb-brass-lt) !important; }
#wrapper .content .mbpb-front li span  { color: var(--mbpb-brass-lt) !important; }
#wrapper .content .mbpb-front li strong{ color: #FFFFFF !important; }

/* Gig date block */
#wrapper .content .mbpb-gig__mon  { color: var(--mbpb-ember) !important; }
#wrapper .content .mbpb-gig__day  { color: var(--mbpb-navy) !important; }
#wrapper .content .mbpb-gig__yr   { color: var(--mbpb-mute) !important; }
#wrapper .content .mbpb-gig__flag { color: #FFFFFF !important; }

#wrapper .content .mbpb-gig__meta dd small,
#wrapper .content .mbpb-gig__note small { color: var(--mbpb-mute) !important; }

/* Admission badges */
#wrapper .content .mbpb-tag--free     { color: #1F5D3F !important; }
#wrapper .content .mbpb-tag--donation { color: #7A5716 !important; }
#wrapper .content .mbpb-tag--ticketed { color: #FFFFFF !important; }

/* Booking facts */
#wrapper .content .mbpb-facts strong { color: var(--mbpb-navy) !important; }
#wrapper .content .mbpb-facts span   { color: var(--mbpb-mute) !important; }

/* Chair board (join page) */
#wrapper .content .mbpb-status--open  { color: #FFFFFF !important; }
#wrapper .content .mbpb-status--sub   { color: #7A5716 !important; }
#wrapper .content .mbpb-status--full  { color: var(--mbpb-mute) !important; }
#wrapper .content .mbpb-chair__note   { color: var(--mbpb-mute) !important; }
#wrapper .content .mbpb-key,
#wrapper .content .mbpb-key li        { color: var(--mbpb-mute) !important; }
#wrapper .content .mbpb-steps > li::before { color: var(--mbpb-brass-lt) !important; }

/* Buttons — .content a is forced navy, which kills the ghost-button hover */
#wrapper .content a.mbpb-btn         { color: var(--mbpb-navy-deep) !important; }
#wrapper .content a.mbpb-btn--ghost  { color: var(--mbpb-navy) !important; }
#wrapper .content a.mbpb-btn--ghost:hover,
#wrapper .content a.mbpb-btn--ghost:focus { color: var(--mbpb-brass) !important; }

/* --------------------------------------------------------------------------
   13. Hero subhead

   main.css styles the first paragraph after an <h1> in a section header as a
   small uppercase tracked label:

       #wrapper section > header h1 + p { ... text-transform: uppercase; }

   Our hero subhead is exactly that paragraph, so it was rendering as tiny
   all-caps instead of readable body copy. Restated at a higher class count.
   -------------------------------------------------------------------------- */

#wrapper > section.intro > header .mbpb-hero__sub {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-size: 1.02rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
	text-transform: none;
}