/**
 * Styles for the bits/* blocks.
 *
 * Uses the theme's design tokens when they exist and falls back to the BitS
 * palette otherwise, so the blocks render correctly in the editor and in any
 * theme.
 */

:root,
.editor-styles-wrapper {
	--bits-red: var(--wp--preset--color--red, #7f1416);
	--bits-red-dark: var(--wp--preset--color--red-dark, #5e0f10);
	--bits-black: var(--wp--preset--color--black, #000);
	--bits-ink: var(--wp--preset--color--contrast, #222);
	--bits-rule: var(--wp--preset--color--border, #e0e0e0);
	--bits-muted: var(--wp--preset--color--text-muted, #666);
	--bits-panel: var(--wp--preset--color--off-white, #eaeaec);
	--bits-grey: var(--wp--preset--color--grey, #8b8b8b);
	--bits-sans: var(--wp--preset--font-family--heading, "Helvetica Neue", Helvetica, Arial, sans-serif);
	--bits-serif: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
}

/* Shared -------------------------------------------------------------- */

.bits-label {
	font-family: var(--bits-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bits-muted);
	margin: 1rem 0 0.15rem;
	display: block;
}

/*
 * inline-flex with an explicit line-height, rather than inline-block: the label
 * was sitting on a text baseline inside a taller line box, which left it a
 * pixel or two low. Centring the flex line removes that and gives the external
 * -link icon somewhere to sit.
 */
.bits-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	line-height: 1;
	font-family: var(--bits-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--bits-red);
	border: 0;
	padding: 0.75rem 1.35rem;
	cursor: pointer;
	text-decoration: none;
}

.bits-button__external {
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
	fill: currentColor;
	/* Optical nudge: the glyph reads high against uppercase text. */
	transform: translateY(0.5px);
}

.bits-button:hover,
.bits-button:focus {
	background: var(--bits-red-dark);
	color: #fff;
	text-decoration: none;
}

/*
 * Secondary action. Carries the same 2px border as the solid button so the two
 * are the same height side by side and neither resizes on hover.
 */
.bits-button,
.bits-button--outline {
	border: 2px solid var(--bits-red);
}

.bits-button--outline {
	background: transparent;
	color: var(--bits-red);
}

.bits-button--outline:hover,
.bits-button--outline:focus {
	background: var(--bits-red);
	color: #fff;
}

.bits-performance__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.bits-performance__actions:empty {
	display: none;
}

/* The flex row owns the spacing now. */
.bits-performance__actions .bits-button {
	margin-top: 0;
}

.bits-button-outline {
	display: inline-block;
	font-family: var(--bits-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	border: 2px solid #fff;
	padding: 0.9rem 1.6rem;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
}

.bits-button-outline:hover,
.bits-button-outline:focus {
	background: #fff;
	color: #000;
	text-decoration: none;
}

/* Hero ---------------------------------------------------------------- */

.bits-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	background-color: #111;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.bits-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

.bits-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem 1.25rem;
}

.bits-hero__title {
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: clamp(2.25rem, 5vw, 3.375rem);
	line-height: 1.1;
	color: #fff;
	margin: 0;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* Listen hero --------------------------------------------------------- */

.bits-listen-hero {
	position: relative;
	background-color: #000;
	color: #fff;
	overflow: hidden;
}

.bits-listen-hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
}

/*
 * The portrait sits inside the content column, against its right edge, and is
 * scaled whole to the band's height — the same frame as the headline and
 * buttons, rather than a cropped close-up pinned to the edge of the window.
 */
.bits-listen-hero.has-portrait .bits-listen-hero__inner::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1.5rem;
	width: 45%;
	background-image: var(--bits-listen-hero-image);
	background-size: contain;
	background-position: right bottom;
	background-repeat: no-repeat;
	pointer-events: none;
}

.bits-listen-hero__inner > * {
	position: relative;
}

/* Where the headline would run into the portrait, the portrait steps back. */
@media (max-width: 781px) {
	.bits-listen-hero.has-portrait .bits-listen-hero__inner::before {
		width: 60%;
		opacity: 0.35;
	}
}

.bits-listen-hero__title {
	font-family: var(--bits-serif);
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.05;
	margin: 0 0 0.35rem;
	color: #fff;
}

.bits-listen-hero__subtitle {
	font-family: var(--bits-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin: 0 0 1.75rem;
	color: #fff;
}

.bits-listen-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Circle nav ---------------------------------------------------------- */

.bits-circle-nav {
	background: var(--bits-red);
	padding: 15px 1.5rem;
}

.bits-circle-nav__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.bits-circle-nav__item {
	margin: 0;
	flex: 0 0 auto;
}

/*
 * Each circle shows its own photograph, cut from one sprite: six 170px circles
 * on a 180px pitch, two columns by four rows. The unit below is a single sprite
 * pixel expressed in whatever the circle currently measures, so the positions
 * are written in the sprite's own coordinates and every breakpoint scales
 * itself — change --bits-circle-size and the artwork follows.
 */
.bits-circle-nav__link {
	--bits-circle-size: 175px;
	--bits-sprite-unit: calc(var(--bits-circle-size) / 170);

	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;
	width: var(--bits-circle-size);
	height: var(--bits-circle-size);
	border-radius: 50%;
	border: 3px solid #fff;
	color: #fff;
	background-image: url("circle-nav-sprite.png");
	background-repeat: no-repeat;
	/* Measured from the border box, so the photo runs under the white ring
	   instead of leaving a sliver of the sprite's own white showing. */
	background-origin: border-box;
	background-size:
		calc(360 * var(--bits-sprite-unit))
		calc(720 * var(--bits-sprite-unit));
	text-align: center;
	padding: 1.25rem 0.95rem;
	font-family: var(--bits-sans);
	font-weight: 700;
	font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bits-circle-nav__link:hover,
.bits-circle-nav__link:focus {
	text-decoration: none;
	color: #fff;
}

/*
 * The photographs are mid-grey, so white text needs something between it and
 * them. This sits above the picture and below the label — a negative z-index
 * inside the isolated stacking context the link creates.
 */
.bits-circle-nav__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	transition: background-color 0.15s ease;
}

.bits-circle-nav__link:hover::after,
.bits-circle-nav__link:focus::after {
	background: rgba(0, 0, 0, 0.68);
}

.bits-circle-nav__item.is-active .bits-circle-nav__link::after {
	background: var(--bits-black);
}


/* Circle positions, in sprite pixels: column 0 or 1, rows 0 to 3. */

.bits-circle-nav__item:nth-child(1) .bits-circle-nav__link {
	background-position: calc(-5 * var(--bits-sprite-unit)) calc(-5 * var(--bits-sprite-unit));
}

.bits-circle-nav__item:nth-child(2) .bits-circle-nav__link {
	background-position: calc(-5 * var(--bits-sprite-unit)) calc(-185 * var(--bits-sprite-unit));
}

.bits-circle-nav__item:nth-child(3) .bits-circle-nav__link {
	background-position: calc(-185 * var(--bits-sprite-unit)) calc(-185 * var(--bits-sprite-unit));
}

.bits-circle-nav__item:nth-child(4) .bits-circle-nav__link {
	background-position: calc(-5 * var(--bits-sprite-unit)) calc(-365 * var(--bits-sprite-unit));
}

.bits-circle-nav__item:nth-child(5) .bits-circle-nav__link {
	background-position: calc(-185 * var(--bits-sprite-unit)) calc(-365 * var(--bits-sprite-unit));
}

.bits-circle-nav__item:nth-child(6) .bits-circle-nav__link {
	background-position: calc(-5 * var(--bits-sprite-unit)) calc(-545 * var(--bits-sprite-unit));
}

/* The sprite holds six. Anything beyond it falls back to the plain red. */
.bits-circle-nav__item:nth-child(n+7) .bits-circle-nav__link {
	background-image: none;
}

@media (max-width: 1100px) {
	.bits-circle-nav__link {
		--bits-circle-size: 140px;
	}
}

@media (max-width: 640px) {
	.bits-circle-nav__link {
		--bits-circle-size: 118px;
		border-width: 2px;
	}
}

/* Local city buttons -------------------------------------------------- */

.bits-local-pages__list {
	list-style: none;
	margin: 2rem auto;
	padding: 0;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.bits-local-pages__item {
	margin: 0;
}

.bits-local-pages__link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 165px;
	padding: 1rem 1.25rem;
	border-radius: 50%;
	background: var(--bits-red);
	color: #fff;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1.25rem;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
}

.bits-local-pages__link:hover,
.bits-local-pages__link:focus {
	background: var(--bits-red-dark);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 900px) {
	.bits-local-pages__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.bits-local-pages__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.bits-local-pages__link {
		min-height: 130px;
		font-size: 1rem;
	}
}

/* Map ----------------------------------------------------------------- */

.bits-map {
	width: 100%;
	background: var(--bits-panel);
}

.bits-map__canvas {
	width: 100%;
	height: var(--bits-map-height, 480px);
}

.bits-map__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bits-map-height, 480px);
	padding: 2rem;
	text-align: center;
	color: #666;
	font-family: var(--bits-sans);
	font-size: 0.9375rem;
}

.bits-map--full {
	--bits-map-height: 520px;
}

.bits-map--boxed {
	--bits-map-height: 420px;
}

.bits-map--single {
	--bits-map-height: 380px;
}

.bits-infowindow {
	font-family: var(--bits-serif);
	font-size: 0.9375rem;
	line-height: 1.35;
	max-width: 260px;
}

.bits-infowindow__title {
	font-family: var(--bits-sans);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 0.25rem;
}

.bits-infowindow ul {
	margin: 0.4rem 0 0;
	padding-left: 1.1rem;
}

.bits-infowindow a {
	color: var(--bits-red);
}

/* Search bar ---------------------------------------------------------- */

.bits-performance-search {
	background: var(--bits-red);
	padding: 0.9rem 1.5rem;
}

.bits-performance-search__form {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
	align-items: stretch;
}

.bits-performance-search select,
.bits-performance-search input[type="text"] {
	width: 100%;
	min-height: 46px;
	padding: 0.55rem 0.75rem;
	border: 1px solid #fff;
	border-radius: 0;
	background: #fff;
	color: #444;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1rem;
}

.bits-performance-search button {
	min-height: 46px;
	width: 100%;
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.bits-performance-search button:hover,
.bits-performance-search button:focus {
	background: #fff;
	color: var(--bits-red);
}

.bits-performance-search__pin {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: currentColor;
}

@media (max-width: 900px) {
	.bits-performance-search__form {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.bits-performance-search__form {
		grid-template-columns: 1fr;
	}
}

/* Performance list ---------------------------------------------------- */

.bits-performance-list__heading {
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1.875rem;
	text-transform: uppercase;
	margin: 2rem 0 0.35rem;
	color: var(--bits-ink);
}

.bits-performance-list__note {
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1rem;
	color: #555;
	margin: 0 0 0.75rem;
}

.bits-performance-list__rule {
	border: 0;
	border-top: 1px solid var(--bits-rule);
	margin: 0.75rem 0;
}

/*
 * Every cell is placed explicitly. Auto-placement would otherwise pull the
 * first column up into the empty row-1/column-3 cell whenever a performance has
 * no photo, so the details would sit in a different place depending on whether
 * an image happened to exist.
 */
.bits-performance {
	display: grid;
	grid-template-columns: 1fr 1fr 320px;
	gap: 0.5rem 2rem;
	align-content: start;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--bits-rule);
}

.bits-performance__title {
	grid-column: 1 / span 2;
	grid-row: 1;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1.875rem;
	line-height: 1.15;
	margin: 0;
}

.bits-performance__col--where {
	grid-column: 1;
	grid-row: 2;
}

.bits-performance__col--what {
	grid-column: 2;
	grid-row: 2;
}

.bits-performance__title a {
	color: var(--bits-ink);
	text-decoration: none;
}

.bits-performance__title a:hover {
	color: var(--bits-red);
}

.bits-performance__media {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: start;
	justify-self: end;
	width: 100%;
}

.bits-performance__media img {
	display: block;
	width: 100%;
	height: auto;
}

.bits-performance__col {
	min-width: 0;
}

.bits-performance__value {
	margin: 0;
	overflow-wrap: break-word;
}


@media (max-width: 900px) {
	.bits-performance {
		grid-template-columns: 1fr 1fr;
	}

	.bits-performance__media {
		grid-column: 1 / span 2;
		grid-row: 3;
		justify-self: start;
		max-width: 320px;
	}
}

@media (max-width: 600px) {
	.bits-performance {
		grid-template-columns: 1fr;
	}

	.bits-performance__title {
		grid-column: 1;
		grid-row: 1;
	}

	.bits-performance__col--where {
		grid-column: 1;
		grid-row: 2;
	}

	.bits-performance__col--what {
		grid-column: 1;
		grid-row: 3;
	}

	.bits-performance__media {
		grid-column: 1;
		grid-row: 4;
	}
}

.bits-performance-list__empty {
	padding: 2rem 0;
	color: #555;
}

/* Pagination ---------------------------------------------------------- */

.bits-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	margin: 2rem 0;
}

.bits-pagination a,
.bits-pagination span {
	display: inline-block;
	min-width: 2.4rem;
	text-align: center;
	padding: 0.5rem 0.7rem;
	font-family: var(--bits-sans);
	font-size: 0.9375rem;
	border: 1px solid var(--bits-rule);
	color: var(--bits-ink);
	text-decoration: none;
}

.bits-pagination a:hover {
	background: var(--bits-red);
	border-color: var(--bits-red);
	color: #fff;
}

.bits-pagination .is-current {
	background: var(--bits-red);
	border-color: var(--bits-red);
	color: #fff;
}

.bits-pagination .is-disabled {
	opacity: 0.4;
}

/* Single performance -------------------------------------------------- */

.bits-performance-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: start;
}

.bits-performance-details__facts {
	margin: 0;
}

.bits-performance-details__media img {
	display: block;
	width: 100%;
	height: auto;
}

.bits-performance-details__description {
	grid-column: 1 / -1;
}

@media (max-width: 780px) {
	.bits-performance-details {
		grid-template-columns: 1fr;
	}
}

/* Performer dashboard ------------------------------------------------- */

.bits-performer-dashboard__notice {
	background: var(--bits-grey);
	color: #fff;
	font-family: var(--bits-sans);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.35;
	padding: 1.1rem 1.35rem;
	margin-bottom: 2rem;
}

.bits-performer-dashboard__notice a {
	color: #fff;
	text-decoration: underline;
}

.bits-performer-dashboard .login-username label,
.bits-performer-dashboard .login-password label {
	display: block;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 1.25rem;
	margin-bottom: 0.4rem;
}

.bits-performer-dashboard .login-username input,
.bits-performer-dashboard .login-password input {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #ccc;
	border-radius: 0;
	font-size: 1rem;
}

.bits-performer-dashboard .login-remember {
	margin: 1rem 0;
	font-family: var(--bits-sans);
	font-weight: 300;
}

.bits-performer-dashboard .login-submit input {
	font-family: var(--bits-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--bits-red);
	border: 0;
	padding: 1rem 2rem;
	cursor: pointer;
}

.bits-performer-dashboard__list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.bits-performer-dashboard__list > li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--bits-rule);
	font-size: 1.375rem;
}

.bits-performer-dashboard__options {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-family: var(--bits-sans);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bits-performer-dashboard__pending {
	color: var(--bits-muted);
}

/* Editor placeholders -------------------------------------------------- */

.bits-editor-placeholder {
	border: 1px dashed #b4b4b4;
	background: #f6f6f6;
	padding: 1.25rem;
	font-family: var(--bits-sans);
	font-size: 0.875rem;
	color: #444;
}

.bits-editor-placeholder strong {
	display: block;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

/* Menus --------------------------------------------------------------- */

.bits-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
}

.bits-menu__list a {
	text-decoration: none;
	color: inherit;
}

.bits-menu__list--primary {
	justify-content: flex-end;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bits-menu__list--primary > li {
	position: relative;
}

.bits-menu__list--primary > li > a {
	display: block;
	padding: 1.15rem 0 1rem;
	border-bottom: 2px solid transparent;
}

.bits-menu__list--primary > li.current-menu-item > a,
.bits-menu__list--primary > li.current-menu-ancestor > a,
.bits-menu__list--primary > li.current-menu-parent > a,
.bits-menu__list--primary > li:hover > a,
.bits-menu__list--primary > li:focus-within > a {
	border-bottom-color: #fff;
}

/*
 * On desktop the red bar below the header *is* the sub-navigation, so the black
 * bar must not also drop the same links down over it. The markup keeps them —
 * the narrow-screen menu below expands them inline — but display:none takes
 * them out of the layout, the tab order and the accessibility tree, so nothing
 * is announced twice.
 */
.bits-menu__list--primary .sub-menu,
.bits-menu__submenu-toggle {
	display: none;
}

/* Account / Login sits in the black bar as a button, not another plain link. */
.bits-menu__list--primary > li.bits-menu__account > a {
	background: var(--bits-red);
	color: #fff;
	/*
	 * A pixel more above than below. The label is all caps and has no
	 * descenders, but its line box still reserves the space for them, so
	 * symmetric padding leaves the letters sitting high in the button —
	 * measured at 14.3px of clearance above the caps against 16.1px below.
	 */
	padding: 0.5625rem 1.1rem 0.4375rem;
	border: 2px solid var(--bits-red);
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bits-menu__list--primary > li.bits-menu__account > a:hover,
.bits-menu__list--primary > li.bits-menu__account > a:focus {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.bits-menu__list--footer {
	justify-content: center;
	gap: 1.25rem 2.5rem;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bits-menu__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.75rem 0;
	cursor: pointer;
	color: inherit;
}

.bits-menu__bars,
.bits-menu__bars::before,
.bits-menu__bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	content: "";
}

.bits-menu__bars::before {
	transform: translateY(-8px);
}

.bits-menu__bars::after {
	transform: translateY(6px);
}

@media (max-width: 860px) {
	.bits-menu--primary .bits-menu__toggle {
		display: block;
	}

	/*
	 * The toggle stays on the logo row; the panel drops out of flow and spans
	 * the whole header, so the menu is not squeezed into the column the nav
	 * happens to occupy.
	 */
	.bits-menu--primary .bits-menu__panel {
		display: none;
	}

	.bits-menu--primary .bits-menu__panel.is-open {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--bits-black);
		padding: 0 1.5rem 1rem;
		z-index: 50;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}

	.bits-menu__list--primary {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		padding-bottom: 1rem;
	}

	.bits-menu__list--primary > li {
		width: 100%;
	}

	.bits-menu__list--primary > li > a {
		padding: 0.6rem 0;
		border-bottom: 0;
	}

	/*
	 * Narrow screens have no room for the red bar's right-aligned row, so each
	 * section becomes an accordion inside the hamburger panel. This rule owns
	 * the whole reset, since the desktop rule only hides them.
	 */
	.bits-menu__list--primary > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.bits-menu__list--primary > li > a {
		flex: 1 1 auto;
	}

	.bits-menu__submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
	}

	.bits-menu__chevron {
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.bits-menu__submenu-toggle[aria-expanded="false"] .bits-menu__chevron {
		transform: translateY(0) rotate(-45deg);
	}

	.bits-menu__submenu-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	.bits-menu__list--primary .sub-menu {
		display: block;
		flex: 1 0 100%;
		list-style: none;
		margin: 0;
		padding: 0 0 0.5rem 1rem;
		text-transform: none;
		letter-spacing: 0.02em;
	}

	.bits-menu__list--primary .sub-menu.is-collapsed {
		display: none;
	}

	.bits-menu__list--primary .sub-menu a {
		display: block;
		padding: 0.5rem 0;
	}

	/* The account button spans the row so it reads as the call to action. */
	.bits-menu__list--primary > li.bits-menu__account {
		border-bottom: 0;
		margin-top: 1rem;
	}

	.bits-menu__list--primary > li.bits-menu__account > a {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.9125rem 1.1rem 0.7875rem;
	}

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

/* Section sub-navigation (red submenu under the black bar) ------------- */

.bits-section-nav {
	background: var(--bits-red);
}

/* Collapses to nothing when the current section has no children, so pages
   without a submenu do not get an empty red stripe. */
.bits-section-nav.is-empty {
	display: none;
}

.bits-section-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.bits-section-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.75rem;
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bits-section-nav__item a {
	display: inline-block;
	padding: 0.55rem 0;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.bits-section-nav__item.is-current a,
.bits-section-nav__item a:hover,
.bits-section-nav__item a:focus {
	color: #fff;
}

@media (max-width: 860px) {
	.bits-section-nav__list {
		justify-content: center;
		gap: 1rem;
	}
}

/* Map pin + InfoWindow ------------------------------------------------- */

.bits-map__pin {
	display: block;
	width: 28px;
	height: 57px;
	/*
	 * An advanced marker anchors its content near the bottom centre, but the
	 * artwork's point is at x = 14.75 of 28, so the pin lands 1.5px right of
	 * the coordinate. The legacy map corrected for the same thing with
	 * anchor: Point(15, 57). Measured against the map's own projection, this
	 * puts the point itself on the location.
	 */
	transform: translateX(-1.53px);
}

.bits-map__empty {
	margin: 0;
	padding: 0.75rem 1.5rem;
	text-align: center;
	font-family: var(--bits-sans);
	font-size: 0.9375rem;
	color: #555;
}

/*
 * Google's InfoWindow puts an empty title slot (.gm-style-iw-ch) and the close
 * button in a 48px header row above the content. These windows carry their own
 * heading, so that row is pure dead space at the top of every popup.
 *
 * Hide the empty title slot and lift the close button out of flow so it floats
 * over the top-right corner; the content then starts at the top, with enough
 * right padding that the first line never runs under the button.
 */
.gm-style .gm-style-iw-ch {
	display: none;
}

/*
 * Do NOT set position here. Google positions this bubble absolutely and lifts
 * it above the pin with translate(-50%, -100%); making it relative puts it back
 * in flow, which gives .gm-style-iw-t the bubble's full height and throws the
 * window ~200px above the marker. It is already a positioning context for the
 * close button below, being absolute.
 */
.gm-style .gm-style-iw-c {
	padding-top: 12px;
}

.gm-style .gm-style-iw-chr {
	position: absolute;
	top: 0;
	right: 0;
	height: auto;
	z-index: 1;
}

/* The close button is 48px square and sits flush to the corner. */
.gm-style .gm-style-iw-d {
	padding-right: 48px;
}

/* Only the first line has to clear it; the rest can use the full width. */
.gm-style .infowindow_list > li:not(:first-child) {
	margin-right: -36px;
}

.infowindow {
	font-family: var(--bits-sans);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.infowindow a,
.infowindow a:hover,
.infowindow a:active {
	color: var(--bits-red);
}

.infowindow_list {
	list-style: none;
	margin: 0;
	padding: 0 0 5px;
}

.infowindow_list li {
	margin: 0;
}

.infowindow_title {
	font-family: var(--bits-sans);
	font-weight: 700;
	color: var(--bits-red);
	padding: 5px 0;
}

.infowindow_address_name {
	font-family: var(--bits-sans);
	font-weight: 700;
}

.infowindow_address,
.infowindow_performance_count {
	margin-bottom: 5px;
}

.infowindow_times {
	margin-bottom: 10px;
	font-style: italic;
}

.infowindow_link {
	margin-bottom: 5px;
}

.infowindow_link span {
	font-style: italic;
}

.infowindow strong {
	font-family: var(--bits-sans);
	font-weight: 700;
}

/* Gravity Forms: the DATA:* fields are machine-filled and must never be seen. */

.gform_wrapper .bits_hidden_field,
.gform_wrapper .gf_hidden,
.gform_wrapper .gform_hidden {
	display: none !important;
}

/* Nearby-performance panel on the registration form. */

.bits-registration-nearby:empty {
	display: none;
}

.bits-registration-nearby {
	margin: 0.75rem 0 1.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--bits-panel);
	border-left: 4px solid var(--bits-red);
	font-family: var(--bits-sans);
	font-size: 0.9375rem;
}

.bits-registration-nearby h4 {
	font-family: var(--bits-sans);
	font-weight: 700;
	font-size: 0.9375rem;
	margin: 0 0 0.35rem;
}

.bits-registration-nearby p {
	margin: 0 0 0.5rem;
}

.bits-registration-nearby ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* Year accordions ------------------------------------------------------ */

/*
 * Shared by bits/participants and by the core/details blocks that carry the
 * hand-typed pre-2015 rosters, so both halves of the Participants page read as
 * one continuous list. Built on <details>, which means no JavaScript, keyboard
 * support for free, and browsers that expand a closed panel when the visitor
 * finds text inside it with Ctrl-F — how this page is actually used.
 */
/* Doubled class to outrank the flow layout's block-gap margin, which would
   otherwise space the core/details panels 24px further apart than the block's
   own and break the run. */
.bits-accordion.bits-accordion {
	border-bottom: 1px solid var(--wp--preset--color--border, #e0e0e0);
	margin-block: 0;
}

.bits-participants > .bits-accordion:first-child {
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

.bits-accordion > summary {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.85rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #222);
	list-style: none;
}

/* Both halves of the "hide the native triangle" incantation. */
.bits-accordion > summary::-webkit-details-marker {
	display: none;
}

.bits-accordion > summary::marker {
	content: "";
}

.bits-accordion > summary:hover {
	color: var(--wp--preset--color--red, #8c1515);
}

.bits-accordion > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--red, #8c1515);
	outline-offset: 2px;
}

.bits-accordion__meta {
	font-family: var(--bits-sans, inherit);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #666);
}

/* Pushed right in both shapes of summary — with a count span and without. */
.bits-accordion > summary::after {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	margin-left: auto;
	align-self: center;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform 150ms ease;
	opacity: 0.5;
}

.bits-accordion[open] > summary::after {
	transform: translateY(0.06em) rotate(-135deg);
}

.bits-accordion__body,
.bits-accordion > *:not(summary) {
	padding-bottom: 1.25rem;
}

/* core/details lays its content out as a flow container, which puts a
   block-gap margin above the first child; the block's own panels have none. */
.bits-accordion > *:not(summary):first-of-type {
	margin-block-start: 0;
}

/* The legacy rosters ship as a bare <h3> inside the details; the summary
   already names the year. */
.bits-accordion > .bits-table-wrap > h3,
.bits-accordion > h3:first-of-type {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bits-accordion > summary::after {
		transition: none;
	}
}

/* Remind Me — form and dialog ------------------------------------------ */

.bits-remind {
	max-width: 34rem;
	margin: 2.5rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

.bits-remind__heading {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.bits-remind__intro {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--text-muted, #666);
	font-size: var(--wp--preset--font-size--medium);
}

.bits-remind__field {
	margin: 0 0 1rem;
}

.bits-remind__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--bits-sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bits-remind__field input[type="email"] {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #e0e0e0);
	border-radius: 0;
	font-family: var(--bits-sans);
	font-size: var(--wp--preset--font-size--medium);
	background: #fff;
	color: var(--wp--preset--color--contrast, #222);
}

.bits-remind__field input[type="email"]:focus {
	outline: 2px solid var(--wp--preset--color--red, #8c1515);
	outline-offset: 1px;
}

.bits-remind__check {
	margin: 0 0 0.5rem;
}

.bits-remind__check label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
}

.bits-remind__check input {
	flex: none;
	margin-top: 0.2em;
}

/* The promise made to anyone who leaves the box unticked; it has to be
   readable, not fine print. */
.bits-remind__note {
	margin: 0 0 1.5rem;
	padding-left: 1.85rem;
	color: var(--wp--preset--color--text-muted, #666);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Off-screen rather than display:none — a bot that skips hidden fields is
   exactly the one worth catching. */
.bits-remind__trap {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bits-remind__status:empty,
.bits-remind__notice:empty {
	display: none;
}

.bits-remind__status,
.bits-remind__notice {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

.bits-remind__status--error,
.bits-remind__notice--error {
	color: var(--wp--preset--color--red, #8c1515);
}

.bits-remind__notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--off-white, #f5f5f5);
}

.bits-remind-dialog {
	width: min(34rem, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	padding: 2rem;
	border: 0;
	background: #fff;
	color: var(--wp--preset--color--contrast, #222);
	overflow: auto;
}

.bits-remind-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

/* Inside the dialog the panel is the whole thing, so it needs no rule of its
   own to separate it from what came before. */
.bits-remind-dialog .bits-remind {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	max-width: none;
}

.bits-remind-dialog__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-muted, #666);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.bits-remind-dialog__close:hover,
.bits-remind-dialog__close:focus-visible {
	color: var(--wp--preset--color--red, #8c1515);
}

/* Once a performance has happened the action row says so instead of offering a
   calendar entry, directions and a reminder that can no longer be useful. */
.bits-performance__past {
	margin: 0;
	font-family: var(--bits-sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--text-muted, #666);
}

/* The photo already attached to a performance being edited. */
.bits-existing-photo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.bits-existing-photo img {
	display: block;
	max-width: 80px;
	height: auto;
}

.bits-existing-photo__note {
	font-family: var(--bits-sans);
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-muted, #666666);
}