/*
	Custom overrides carried over 1:1 from the original carrd site
	(inline <style> blocks in old_website_carrd/index.html).
*/

#navbar {
position: fixed !important;
z-index: 98;
}

@media screen and (min-width: 736px) and (max-width: 1179px) {
#text03 {
display: none;
}

span.thumbnail:hove {
border: 2px solid #EACDA4;
}

.buttons {
/* Example styles */
margin-right: -100px;
margin-left: -100px;
text-align: center;
}
}

#icons02 {
padding-top: 3px !important;
}

#podcast .frame iframe {
height: 9rem !important;
}

@media (max-width: 1179px) { #podcast .frame iframe {
height: 14rem !important;
max-width: 900px !mportant;
}
#spoti .frame iframe {
height: 13rem !important;
}
}

.modal-app .overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}

.modal-app .modal .p {
font-size: 1.25rem;
}

.modal-app .modal {
font-family: "Red Hat Text", sans-serif;
color: #F2EADD;
position: fixed;
width: 800px;
min-height: 450px;
max-width:calc(100% - 80px);
max-height:calc(100% - 80px);
z-index: 9999;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
vertical-align: middle;
background-color: #3a3b3a;
border-radius: 5px;
text-align: left;
overflow-y: auto;
}

.modal-app .modal h3 {
font-family: sans-serif;
font-size: 1.5rem;
}

.modal-app .modal b {
font-weight: 700;
font-style: italic;
color: #d5b67b;
}

@media (max-width: 768px) {
/* Show the Hamburger */
.modal-app .modal {
font-size: 16px;
}
}

/* --- Band-Member-Popup: Foto + Text, kein Leerraum --- */

@keyframes member-modal-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.modal-app .modal.member-modal {
	width: 900px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(213, 182, 123, 0.25);
	border-radius: 8px;
	animation: member-modal-in 0.25s ease both;
}

.member-modal .member-modal-inner {
	display: flex;
	align-items: stretch;
	max-height: calc(100vh - 80px);
}

.member-modal .member-photo {
	flex: 0 0 19rem;
	position: relative;
}

.member-modal .member-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.member-modal .member-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 2.25rem 2.5rem;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d5b67b40 transparent;
}

.member-modal .member-body h3 {
	font-family: 'Sen', sans-serif;
	font-size: 1.6rem;
	margin: 0;
	line-height: 1.25;
}

.member-modal .member-instrument {
	display: block;
	margin: 0.4rem 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid rgba(213, 182, 123, 0.35);
	font-size: 1.05rem;
}

.member-modal .member-body p {
	line-height: 1.65;
	font-size: 1.05rem;
}

.modal-close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 1;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 30, 28, 0.65);
	border: 1px solid rgba(213, 182, 123, 0.35);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.modal-close svg {
	width: 1rem;
	height: 1rem;
	stroke: #F2EADD;
	stroke-width: 2;
	fill: none;
}

.modal-close:hover,
.modal-close:focus-visible {
	background: #D5B67B;
	border-color: #D5B67B;
}

.modal-close:hover svg,
.modal-close:focus-visible svg {
	stroke: #1E1E1C;
}

@media (max-width: 768px) {
	.modal-app .modal.member-modal {
		max-width: calc(100% - 40px);
		max-height: calc(100% - 40px);
	}

	.member-modal .member-modal-inner {
		flex-direction: column;
		max-height: calc(100vh - 40px);
	}

	.member-modal .member-photo {
		flex: 0 0 auto;
		height: 11rem;
	}

	.member-modal .member-photo img {
		position: static;
		height: 11rem;
	}

	.member-modal .member-body {
		padding: 1.5rem 1.4rem;
	}
}

#gallery01 .frame:hover {
border: 2px solid #EACDA4;
}

.hidden {
max-height: 0px !important;
overflow: hidden !important;
}

/* --- "Weiterlesen"/"Einklappen" collapse buttons --- */

.buttons-component.instance-3 > li > a,
.buttons-component.instance-5 > li > a {
	width: auto;
	min-width: 10.25rem;
	padding: 0 1.75rem;
	border-radius: 2rem;
	background-color: transparent;
	border: 1px solid rgba(213, 182, 123, 0.45);
	color: #D5B67B;
	text-align: center;
	letter-spacing: 0.02em;
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.buttons-component.instance-3 > li > a:hover,
.buttons-component.instance-5 > li > a:hover,
.buttons-component.instance-3 > li > a:focus-visible,
.buttons-component.instance-5 > li > a:focus-visible {
	background-color: #D5B67B !important;
	border-color: #D5B67B;
	color: #1E1E1C;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(213, 182, 123, 0.25);
}

.buttons-component.instance-3 > li > a:active,
.buttons-component.instance-5 > li > a:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 2px 8px rgba(213, 182, 123, 0.2);
}

/* chevron that flips when the text is expanded */
a.collapse-toggle::after {
	content: '';
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.6rem;
	margin-bottom: 0.18em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	vertical-align: middle;
}

a.collapse-toggle.expanded::after {
	transform: rotate(225deg);
	margin-bottom: -0.12em;
}

@media (max-width: 736px) {
	.buttons-component.instance-3 > li,
	.buttons-component.instance-5 > li {
		width: 100%;
	}

	.buttons-component.instance-3 > li > a,
	.buttons-component.instance-5 > li > a {
		width: 100%;
		max-width: 30rem;
	}
}

/* --- Presse Rezensionen: Lesbarkeit --- */

/* Zitat-Blöcke: Gold-Balken, begrenzte Zeilenlänge, ruhigerer Zeilenabstand */
#text29,
#text25,
#text27,
#container11 .text-component.instance-11 {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	border-left: 2px solid rgba(213, 182, 123, 0.5);
	padding: 0.4rem 0 0.4rem 1.4rem;
	line-height: 1.75;
}

#textgeese {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	border-left: 2px solid rgba(213, 182, 123, 0.5);
	padding: 0 0 0 1.4rem; /* no vertical padding: element collapses to 0 */
	line-height: 1.75;
}

/* Sektion zentriert: Quellen, Button und Trennlinien in derselben Spalte */
#text30,
#text26,
#text32,
#text33,
#collapseBtn {
	max-width: 46rem;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

#container11 .divider-component {
	max-width: 46rem;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Langer eingeklappter Text liest sich aufrecht deutlich besser;
   die goldene Überschrift ("Sun Ra zurück vom Saturn?") bleibt kursiv. */
#textgeese em {
	font-style: normal;
}

#textgeese span[style*="d5b67b"] em {
	font-style: italic;
}

/* Quellenzeilen: dezenter abgesetzt, am Balken ausgerichtet */
#text30,
#text26,
#text32,
#text33 {
	font-size: 0.9em;
	padding-left: calc(1.4rem + 2px);
	opacity: 0.9;
}

@media (max-width: 736px) {
	#text29,
	#text25,
	#text27,
	#textgeese,
	#container11 .text-component.instance-11 {
		padding-left: 1rem;
	}

	#text30,
	#text26,
	#text32,
	#text33 {
		padding-left: calc(1rem + 2px);
	}
}

/* --- Band-Galerie: Porträts nicht am Kopf beschneiden --- */

#gallery01 ul > li > .thumbnail > .frame > img {
	object-position: 50% 22%;
}

/* --- Presse-Fotogalerie: Vollbild-Button + Lightbox --- */

#slideshow01 .zoom-btn {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 3;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 30, 28, 0.6);
	border: 1px solid rgba(213, 182, 123, 0.4);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	opacity: 0.75;
	transition: opacity 0.25s ease, background-color 0.25s ease,
		border-color 0.25s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#slideshow01 .zoom-btn svg {
	width: 1.05rem;
	height: 1.05rem;
	stroke: #F2EADD;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
}

#slideshow01 .zoom-btn:hover,
#slideshow01 .zoom-btn:focus-visible {
	opacity: 1;
	background: #D5B67B;
	border-color: #D5B67B;
}

#slideshow01 .zoom-btn:hover svg,
#slideshow01 .zoom-btn:focus-visible svg {
	stroke: #1E1E1C;
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: member-modal-fade 0.2s ease both;
}

@keyframes member-modal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.gallery-lightbox .lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.94);
}

.gallery-lightbox .lightbox-figure {
	position: relative;
	margin: 0;
	max-width: calc(100vw - 11rem);
	text-align: center;
}

.gallery-lightbox .lightbox-figure img {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	border-radius: 4px;
	vertical-align: top;
}

.gallery-lightbox figcaption {
	margin-top: 0.9rem;
	font-family: 'Red Hat Text', sans-serif;
	color: #F2EADD;
	font-size: 1rem;
}

.gallery-lightbox .lightbox-counter {
	margin-left: 0.9rem;
	color: #F2EADD7D;
	font-variant-numeric: tabular-nums;
}

.gallery-lightbox .lightbox-close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	z-index: 2;
}

.gallery-lightbox .ss-nav.lightbox-nav {
	position: relative;
	z-index: 2;
	height: auto;
	width: 4.5rem;
	max-width: none;
	flex: 0 0 auto;
	align-self: center;
}

@media (max-width: 736px) {
	.gallery-lightbox .ss-nav.lightbox-nav {
		position: absolute;
		top: 0;
		height: 100%;
		width: 3.25rem;
	}

	.gallery-lightbox .ss-nav.lightbox-nav.prev { left: 0; }
	.gallery-lightbox .ss-nav.lightbox-nav.next { right: 0; }

	.gallery-lightbox .lightbox-figure {
		max-width: calc(100vw - 2rem);
	}
}

/* --- Presse: Zwischenüberschrift über den Zitaten --- */

#text34.press-subhead {
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	color: #F2EADD;
	letter-spacing: 0.025rem;
	line-height: 1.2;
}

#text34.press-subhead:not(:first-child) {
	margin-top: 2.25rem !important;
}

#text34.press-subhead:not(:last-child) {
	margin-bottom: 1.5rem !important;
}

/* --- YouTube: Lite-Embed-Fassade + Playlist-Button --- */

#embed14 > .inner > .frame > .yt-lite {
	display: block;
	height: 30rem;
	max-width: 100%;
	width: 100%;
	border: 0;
	border-radius: inherit;
	padding: 0;
	background-color: #000;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.yt-lite .yt-lite-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.25rem;
	display: block;
	transition: transform 0.2s ease;
}

.yt-lite .yt-lite-play svg {
	display: block;
	width: 100%;
}

.yt-lite .yt-lite-play-bg {
	fill: #212121;
	fill-opacity: 0.85;
	transition: fill 0.2s ease, fill-opacity 0.2s ease;
}

.yt-lite:hover .yt-lite-play,
.yt-lite:focus-visible .yt-lite-play {
	transform: translate(-50%, -50%) scale(1.06);
}

.yt-lite:hover .yt-lite-play-bg,
.yt-lite:focus-visible .yt-lite-play-bg {
	fill: #f00;
	fill-opacity: 1;
}

#yt-more {
	--flex-alignment: flex-start;
	margin-top: 1.5rem !important;
}

#yt-more > li > a.yt-link {
	display: inline-block;
	height: 2.625rem;
	line-height: 2.625rem;
	min-width: 10.25rem;
	padding: 0 1.75rem;
	border-radius: 2rem;
	border: 1px solid rgba(213, 182, 123, 0.45);
	background-color: transparent;
	color: #D5B67B;
	font-family: 'Red Hat Text', sans-serif;
	font-size: 1.125em;
	text-align: center;
	letter-spacing: 0.02em;
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

#yt-more > li > a.yt-link:hover,
#yt-more > li > a.yt-link:focus-visible {
	background-color: #D5B67B;
	border-color: #D5B67B;
	color: #1E1E1C;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(213, 182, 123, 0.25);
}

@media (max-width: 736px) {
	#yt-more > li {
		width: 100%;
	}

	#yt-more > li > a.yt-link {
		width: 100%;
		max-width: 30rem;
	}
}

/* --- Repertoire: zweispaltige Liste im Gigs-Look --- */

#repertoire-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
	column-count: 2;
	column-gap: 2.5rem;
}

#repertoire-list li {
	display: flex;
	gap: 0.9rem;
	padding: 0.08rem 0;
	break-inside: avoid;
	font-family: 'Red Hat Text', sans-serif;
	font-size: 1rem;
	line-height: 1.45;
	color: #F2EADD;
	transition: color 0.2s ease;
}

#repertoire-list .rep-no {
	flex: 0 0 1.6rem;
	color: #D5B67B;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

#repertoire-list li:hover .rep-title {
	color: #EACDA4;
}

@media (max-width: 900px) {
	#repertoire-list {
		column-count: 1;
	}
}

/* --- Kommende Konzerte im Hero, unter dem Bandnamen --- */

#hero-gigs {
	margin: 2rem auto 0;
	max-width: 36rem;
	width: 100%;
	padding: 0 1rem;
	text-align: center;
	font-family: 'Red Hat Text', sans-serif;
}

#hero-gigs .hero-gigs-title {
	margin: 0 0 0.75rem;
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #D5B67B;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* The list sits centered under the heading, but its rows are left-aligned:
   every date has the same width, so venues line up in one column. */
#hero-gigs ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: fit-content;
	max-width: 100%;
	text-align: left;
}

#hero-gigs li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.95rem;
	padding: 0.3rem 0;
	font-size: 1.35rem;
	line-height: 1.45;
	color: #F2EADD;
	/* The hero photo is busy — keep the list readable over it. */
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.5);
}

#hero-gigs .hero-gig-date {
	color: #EACDA4;
	font-variant-numeric: tabular-nums;
}

/* A link that doesn't fit wraps under its venue, not under the date. */
#hero-gigs .hero-gig-venue {
	margin-right: 0.95rem;
}

#hero-gigs .hero-gig-link {
	display: inline-block;
	font-size: 0.9em;
	color: #D5B67B;
	text-decoration: none;
	border-bottom: 1px solid rgba(213, 182, 123, 0.45);
	white-space: nowrap;
}

#hero-gigs .hero-gig-link:hover {
	color: #EACDA4;
	border-bottom-color: #EACDA4;
}

@media screen and (max-width: 480px) {
	#hero-gigs {
		margin-top: 1.5rem;
	}

	#hero-gigs li {
		font-size: 1.15rem;
	}
}

/* --- Gigs: strukturierte Liste --- */

#gigs-list {
	max-width: 34rem;
	width: 100%;
	margin-top: 1.5rem;
	text-align: left;
}

#gigs-list .gig-year:not(:first-child) {
	margin-top: 2rem;
}

/* Kommende Konzerte: hervorgehobener Block (rahmenlos) */
#gigs-list .gig-upcoming {
	margin-bottom: 2.5rem;
}

#gigs-list .gig-upcoming h3 {
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: #D5B67B;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
}

#gigs-list .gig-upcoming .gig-date {
	flex: 0 0 6rem;
	color: #EACDA4;
}

#gigs-list .gig-upcoming li {
	font-size: 1.1rem;
}

#gigs-list .gig-empty {
	margin: 0;
	font-family: 'Red Hat Text', sans-serif;
	font-size: 1.02rem;
	line-height: 1.7;
	color: #F2EADDBB;
}

#gigs-list .gig-archive-title {
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #F2EADD7D;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
}

#gigs-list .gig-year h3 {
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: #D5B67B;
	letter-spacing: 0.05em;
	margin: 0 0 0.65rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid rgba(213, 182, 123, 0.3);
}

#gigs-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#gigs-list li {
	display: flex;
	gap: 1.25rem;
	padding: 0.3rem 0;
	font-family: 'Red Hat Text', sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
}

#gigs-list .gig-date {
	flex: 0 0 3.6rem;
	color: #F2EADD7D;
	font-variant-numeric: tabular-nums;
}

#gigs-list .gig-venue {
	color: #F2EADD;
}

#gigs-list .gig-link {
	margin-left: 0.6rem;
	font-size: 0.9em;
	color: #D5B67B;
	text-decoration: none;
	border-bottom: 1px solid rgba(213, 182, 123, 0.45);
	white-space: nowrap;
}

#gigs-list .gig-link:hover {
	color: #EACDA4;
	border-bottom-color: #EACDA4;
}

#gigs-list .gig-year .gig-link {
	color: #F2EADD7D;
	border-bottom-color: #F2EADD3D;
}

/* --- Sprachumschalter (Maße 1:1 vom vorherigen Widget übernommen) --- */

.lang-switcher {
	position: fixed;
	bottom: 0;
	right: 20px;
	z-index: 9997;
	display: flex;
}

.lang-switcher .lang-option {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: 56.25px;
	padding: 12.5px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 25px;
	text-transform: uppercase;
	color: #333;
	opacity: 0.4;
	transition: color 0.25s ease, opacity 0.25s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.lang-switcher .lang-option:hover,
.lang-switcher .lang-option:focus-visible {
	opacity: 0.75;
}

.lang-switcher .lang-option.active {
	color: #FA8072;
	opacity: 1;
}

.lang-switcher .lang-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3.125px;
	width: 0;
	background-color: #333;
	transition: width 0.3s ease, background-color 0.25s ease;
}

.lang-switcher .lang-option.active .lang-underline {
	width: 100%;
	background-color: #FA8072;
}

/* --- Klickbare Booking-Adresse --- */

a.email-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed rgba(213, 182, 123, 0.5);
	transition: color 0.25s ease, border-color 0.25s ease;
}

a.email-link:hover,
a.email-link:focus-visible {
	color: #D5B67B;
	border-bottom-color: #D5B67B;
}

/* --- Presse slideshow controls (arrows, counter, thumbnails) --- */

#slideshow01 > .content {
	display: block;
	position: relative;
}

#slideshow01 .ss-nav,
.gallery-lightbox .ss-nav {
	position: absolute;
	top: 0;
	height: 100%;
	width: 5.5rem;
	max-width: 22%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	opacity: 0.45;
	transition: opacity 0.25s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#slideshow01 .ss-nav:hover,
#slideshow01 .ss-nav:focus-visible,
.gallery-lightbox .ss-nav:hover,
.gallery-lightbox .ss-nav:focus-visible {
	opacity: 1;
}

#slideshow01 .ss-nav.prev {
	left: 0;
}

#slideshow01 .ss-nav.next {
	right: 0;
}

#slideshow01 .ss-nav svg,
.gallery-lightbox .ss-nav svg {
	width: 2.25rem;
	height: 2.25rem;
	stroke: #F2EADD;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}

#slideshow01 .ss-counter {
	text-align: center;
	color: #F2EADD7D;
	font-size: 0.85rem;
	letter-spacing: 0.075em;
	margin-top: 0.75rem;
	font-variant-numeric: tabular-nums;
}

#slideshow01 .ss-thumbs {
	position: relative; /* thumbnails' offsetLeft must be strip-relative */
	display: flex;
	gap: 0.5rem;
	justify-content: flex-start;
	max-width: 56rem;
	margin: 0.75rem auto 0;
	overflow-x: auto;
	padding: 2px 2px 0.35rem;
	scrollbar-width: thin;
	scrollbar-color: #d5b67b40 transparent;
}

#slideshow01 .ss-thumb {
	flex: 0 0 auto;
	width: 4.25rem;
	height: 3rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#slideshow01 .ss-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1px;
}

#slideshow01 .ss-thumb:hover,
#slideshow01 .ss-thumb:focus-visible {
	opacity: 0.85;
}

#slideshow01 .ss-thumb.active {
	border-color: #EACDA4;
	opacity: 1;
}

@media (max-width: 736px) {
	#slideshow01 .ss-nav,
.gallery-lightbox .ss-nav {
		width: 3.25rem;
	}

	#slideshow01 .ss-nav svg,
.gallery-lightbox .ss-nav svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	#slideshow01 .ss-thumbs {
		max-width: 100%;
	}
}

/* Not from carrd: the band name "El is a Sound of Joy" is longer than the
   original "Sound of Joy". Keep it on one line in the navbar, and make room
   for it next to the nav buttons on narrower desktops. */
#text03 {
white-space: nowrap;
}

@media screen and (min-width: 1180px) and (max-width: 1365px) {
#text03 {
padding-left: 2rem;
font-size: 1.5em;
}
}

/* On phones the hero heading breaks as "El is a / Sound of Joy /
   The Music of / Sun Ra" instead of wherever the words run out. */
@media screen and (max-width: 736px) {
#text12 .hero-name-prefix {
display: block;
}
}