/*
Theme Name:        Forest & Brass
Description:       Elegant dark block theme for a cellist portfolio. Deep forest green, bone white, brass accents. Playfair Display + Source Sans 3.
Version:           3.0.3
Author:            Kiryl
Requires at least: 6.5
Requires PHP:      8.0
Text Domain:       forest-brass
*/

/* ============================================================
   1. Globals
   ============================================================ */

::selection {
	background: #C9A227;
	color: #1C2B25;
}

/* Film grain. A flat dark colour reads as cheap; a barely-visible noise layer
   over it reads as printed. Fixed so it does not scroll with content. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
}

@media print {
	body::after {
		display: none;
	}
}

/* Sections carry their own padding, so no gaps between them — otherwise the
   page background shows as a stripe where two bands meet. WordPress applies
   block-gap margins from several places (root, container layout, the block
   itself), so this has to win outright rather than compete with them. */
.wp-site-blocks > *,
.fb-home-main > *,
main.wp-block-group > section {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* The homepage sections sit inside post content now, so they need naming
   separately — but scoped to the front page only. Applied everywhere it also
   stripped the spacing from ordinary paragraphs, headings and quotes on the
   other pages, which rely on those margins to breathe. */
.home .wp-block-post-content > *,
.home .entry-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.fb-home-main {
	display: block;
}

a {
	transition: opacity .2s ease, color .2s ease;
}

a:hover {
	opacity: .8;
}

/* Eyebrow label — "Additional CSS class: fb-eyebrow".
   These act as section titles, so they carry more weight than the incidental
   small caps elsewhere; letter-spacing eases off slightly as the size grows. */
.fb-eyebrow {
	font-size: .82rem !important;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #C9A227;
	margin-bottom: 18px;
}

/* lead paragraph */
.fb-lead {
	font-size: 1.1rem;
	line-height: 1.7;
	opacity: .92;
}

/* understated "more" link with an arrow */
.fb-more a {
	font-size: .8rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	text-decoration: none;
	color: #C9A227;
	border-bottom: 1px solid rgba(201, 162, 39, .45);
	padding-bottom: 4px;
}

.fb-more a::after {
	content: " \2192";
	display: inline-block;
	transition: transform .25s ease;
}

.fb-more a:hover::after {
	transform: translateX(4px);
}

/* outlined button look */
.wp-block-button.is-style-outline .wp-block-button__link,
.fb-btn .wp-block-button__link {
	font-size: .78rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	border: 1px solid #C9A227;
	background: transparent;
	color: currentColor;
	border-radius: 0;
	padding: 13px 34px;
	transition: background-color .25s ease, color .25s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #C9A227;
	color: #1C2B25;
	opacity: 1;
}

/* ============================================================
   2. Header + language switcher
   ============================================================ */

.fb-header {
	position: relative;
	z-index: 10;
}

.fb-header .wp-block-navigation a {
	text-decoration: none;
}

.cc-lang {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .78rem;
	letter-spacing: .12em;
}

.cc-lang__item {
	color: inherit;
	text-decoration: none;
	opacity: .5;
	transition: opacity .2s ease, color .2s ease;
}

.cc-lang__item:hover {
	opacity: 1;
}

.cc-lang__item.is-current {
	opacity: 1;
	color: #C9A227;
}

.cc-lang__item.is-placeholder {
	cursor: default;
}

.cc-lang__item + .cc-lang__item {
	border-left: 1px solid rgba(242, 239, 230, .25);
	padding-left: 10px;
}

/* ============================================================
   3. Hero — animated colour reveal on load
   ============================================================ */

.fb-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

/* photo settles from a slight zoom */
.fb-hero .wp-block-cover__image-background,
.fb-hero .wp-block-cover__video-background {
	animation: fb-settle 3s cubic-bezier(.16, .84, .44, 1) both;
}

/* the two side washes — these sweep in from the edges on load */
.fb-hero::before,
.fb-hero::after {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 42%;
	pointer-events: none;
	z-index: 1;
}

.fb-hero::before {
	left: 0;
	background: linear-gradient(to right, #1C2B25 0%, rgba(28, 43, 37, .92) 26%, rgba(28, 43, 37, .55) 62%, rgba(28, 43, 37, 0) 100%);
	animation: fb-wash-left 1.5s cubic-bezier(.22, .61, .36, 1) .15s both;
}

.fb-hero::after {
	right: 0;
	background: linear-gradient(to left, #1C2B25 0%, rgba(28, 43, 37, .92) 26%, rgba(28, 43, 37, .55) 62%, rgba(28, 43, 37, 0) 100%);
	animation: fb-wash-right 1.5s cubic-bezier(.22, .61, .36, 1) .15s both;
}

/* top and bottom blend, so the photo never has a hard edge */
.fb-hero .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12vh;
	height: 45vh;
	background: linear-gradient(to top, #1C2B25 0%, rgba(28, 43, 37, .7) 45%, rgba(28, 43, 37, 0) 100%);
	pointer-events: none;
	z-index: -1;
	animation: fb-fade 1.6s ease .3s both;
}

.fb-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.fb-hero__content {
	max-width: 560px;
}

/* staggered entrance for the text */
.fb-hero__line {
	animation: fb-rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

.fb-hero__content > .fb-eyebrow {
	animation-delay: .55s;
}

.fb-hero__content > h1 {
	animation-delay: .7s;
	margin-bottom: 14px;
}

.fb-hero__tagline {
	animation-delay: .88s;
	font-size: 1.05rem;
	max-width: 420px;
	opacity: .88;
}

@keyframes fb-wash-left {
	from { transform: translateX(-101%); }
	to   { transform: translateX(0); }
}

@keyframes fb-wash-right {
	from { transform: translateX(101%); }
	to   { transform: translateX(0); }
}

@keyframes fb-settle {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}

@keyframes fb-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

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

/* ============================================================
   4. Venue marquee
   ============================================================ */

.fb-marquee {
	position: relative;
	overflow: hidden;
	padding: 26px 0;
	border-top: 1px solid rgba(242, 239, 230, .12);
	border-bottom: 1px solid rgba(242, 239, 230, .12);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.fb-marquee__track {
	display: flex;
	width: max-content;
	animation: fb-marquee 46s linear infinite;
}

.fb-marquee:hover .fb-marquee__track {
	animation-play-state: paused;
}

.fb-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.fb-marquee__group > span {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 300;
	letter-spacing: .04em;
	opacity: .62;
	white-space: nowrap;
	padding: 0 4px;
}

.fb-marquee__group > i {
	color: #C9A227;
	font-style: normal;
	padding: 0 22px;
	opacity: .8;
}

@keyframes fb-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   5. Scroll reveal
   ============================================================ */

.fb-js .fb-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform .85s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

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

/* ============================================================
   6. Concerts
   ============================================================ */

.cc-concerts {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(242, 239, 230, .15);
}

.cc-concert {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 32px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid rgba(242, 239, 230, .15);
	transition: background-color .3s ease;
}

.cc-concert:hover {
	background: rgba(242, 239, 230, .03);
}

.cc-concert__date {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.cc-concert__day {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.1rem;
	font-weight: 300;
}

.cc-concert__month {
	font-size: .76rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .6;
	margin-top: 4px;
}

.cc-concert__body {
	min-width: 0;
}

.cc-concert__venue {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 6px;
}

.cc-concert__place {
	font-size: .86rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .6;
	margin: 0 0 10px;
}

.cc-concert__program,
.cc-concert__performers {
	font-size: .9rem;
	opacity: .78;
	margin: 0;
	line-height: 1.55;
}

.cc-concert__performers {
	font-style: italic;
	opacity: .6;
	margin-top: 4px;
}

/* No min-height here. A percentage height inside an auto-sized grid row can
   resolve against the whole container, which stretched this cell down the
   length of the list and left the centred ticket link floating rows below its
   own concert. align-self does the vertical centring safely. */
.cc-concert__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
}

/* concerts without a ticket link leave this cell empty — collapse it so it
   cannot claim height of its own */
.cc-concert__action:empty {
	display: none;
}

.cc-concert__tickets {
	font-size: .76rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	text-decoration: none;
	color: #C9A227;
	border: 1px solid rgba(201, 162, 39, .5);
	padding: 10px 22px;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease;
}

.cc-concert__tickets:hover {
	background: #C9A227;
	color: #1C2B25;
	opacity: 1;
}

.cc-empty {
	opacity: .55;
	font-style: italic;
	padding: 20px 0;
}

/* ============================================================
   7. Recordings
   ============================================================ */

.cc-section {
	padding: 90px 0;
}

/* The recordings band gets the darker green and runs edge to edge, so it reads
   as its own chapter rather than blending into the gallery below it.
   The colour is painted with a huge box-shadow rather than 100vw + negative
   margins: shadows do not affect layout, so this stays correct whatever the
   parent's width or padding happens to be, and it can never cause sideways
   scrolling. */
.cc-section--recordings {
	background: #14201B;
	box-shadow: 0 0 0 100vmax #14201B;
	clip-path: inset(-1px -100vmax);
	padding: 104px 6vw;
}

.cc-section__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.cc-section__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	margin: 0 0 40px;
}

.cc-section__more {
	margin-top: 40px;
}

/* newest recording, played large */
.cc-recording--featured .cc-recording__embed {
	aspect-ratio: 21 / 9;
	margin-bottom: 22px;
}

.cc-recording--featured .cc-recording__title {
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	margin-bottom: 8px;
}

.cc-recording--featured .cc-recording__desc {
	font-size: 1rem;
	max-width: 62ch;
}

.cc-recording--featured .cc-video__play {
	width: 96px;
	height: 96px;
}

.cc-recording--featured .cc-video__play::before {
	border-width: 12px 0 12px 20px;
}

/* the remainder, smaller and quieter beneath it */
.cc-recordings--rest {
	margin-top: 60px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px 34px;
}

.cc-section__more a {
	font-size: .8rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	text-decoration: none;
	color: #C9A227;
	border-bottom: 1px solid rgba(201, 162, 39, .45);
	padding-bottom: 4px;
}

.cc-recordings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 48px 40px;
}

.cc-recording__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 16px;
	background: rgba(0, 0, 0, .3);
}

.cc-recording__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- YouTube facade: our own still + play button. The real player only loads
   when clicked, so no YouTube chrome, no suggested-video grid, faster pages. --- */

.cc-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #14201B;
	cursor: pointer;
	display: block;
	overflow: hidden;
}

.cc-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(.35) contrast(1.04);
	transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .5s ease;
}

.cc-video:hover .cc-video__poster,
.cc-video:focus-visible .cc-video__poster {
	transform: scale(1.04);
	filter: grayscale(0) contrast(1);
}

.cc-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 32, 27, .55), rgba(20, 32, 27, .1));
	pointer-events: none;
}

.cc-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	border: 1px solid rgba(201, 162, 39, .8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 32, 27, .35);
	backdrop-filter: blur(2px);
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
	z-index: 2;
}

.cc-video__play::before {
	content: "";
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #C9A227;
	margin-left: 4px;
	transition: border-left-color .3s ease;
}

.cc-video:hover .cc-video__play,
.cc-video:focus-visible .cc-video__play {
	background: #C9A227;
	border-color: #C9A227;
	transform: translate(-50%, -50%) scale(1.06);
}

.cc-video:hover .cc-video__play::before,
.cc-video:focus-visible .cc-video__play::before {
	border-left-color: #1C2B25;
}

.cc-recording__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 400;
	margin: 0 0 6px;
}

.cc-recording__year {
	opacity: .6;
	font-size: .9rem;
}

.cc-recording__desc {
	font-size: .88rem;
	opacity: .72;
	margin: 0;
	line-height: 1.55;
}

/* ============================================================
   8. Testimonials
   ============================================================ */

.fb-quoteband .cc-testimonial {
	text-align: center;
}

.cc-testimonial {
	margin: 0;
	padding: 24px 0;
	position: relative;
}

.cc-testimonial blockquote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.4;
	margin: 0 0 20px;
	border: none;
	padding: 0;
}

.cc-testimonial cite,
.cc-testimonial cite a {
	font-style: normal;
	font-size: .8rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #C9A227;
	text-decoration: none;
}

/* list of quotes (biography page, homepage press band) */
.cc-testimonials .cc-testimonial {
	position: relative;
	padding: 34px 0;
	border-bottom: 1px solid rgba(242, 239, 230, .12);
	transition: opacity .45s ease;
}

.cc-testimonials .cc-testimonial:last-child {
	border-bottom: none;
}

.cc-testimonials blockquote {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

/* Hover: a brass rule draws itself down the left, the quote steps aside to make
   room for it, and the other quotes recede — so the one you are reading is the
   only one at full strength. Pointer devices only, or it sticks on touch. */
@media (hover: hover) {

	.cc-testimonials .cc-testimonial::before {
		content: "";
		position: absolute;
		left: -26px;
		top: 34px;
		bottom: 34px;
		width: 2px;
		background: #C9A227;
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	}

	.cc-testimonials .cc-testimonial blockquote,
	.cc-testimonials .cc-testimonial figcaption {
		transition: transform .55s cubic-bezier(.22, .61, .36, 1), color .3s ease;
	}

	.cc-testimonials:hover .cc-testimonial {
		opacity: .4;
	}

	.cc-testimonials .cc-testimonial:hover {
		opacity: 1;
	}

	.cc-testimonials .cc-testimonial:hover::before {
		transform: scaleY(1);
	}

	.cc-testimonials .cc-testimonial:hover blockquote,
	.cc-testimonials .cc-testimonial:hover figcaption {
		transform: translateX(14px);
	}
}

/* ============================================================
   9. Biography page
   ============================================================ */

.fb-bio-hero {
	position: relative;
}

.fb-bio-lead p {
	font-size: 1.22rem;
	line-height: 1.72;
	font-weight: 300;
}

.fb-bio-body p {
	margin-bottom: 1.5em;
}

/* Biography portrait.
   The studio backdrops differ from shot to shot, so a colour photo dropped into
   the page reads as a pasted-on rectangle. Black and white plus a soft edge
   makes it part of the page rather than an object sitting on top of it — and it
   keeps colour meaningful where it is used (hero, homepage biography). */
.fb-bio-portrait figure {
	margin: 0;
	overflow: hidden;
}

/* The fade runs downward, not sideways: the subject sits in the upper part of
   the frame, so the cello and the floor dissolve into the page while the face
   and the left edge stay crisp. */
.fb-bio-portrait img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 18%;
	display: block;
	filter: grayscale(1) contrast(1.06) brightness(1.02);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .5) 84%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .5) 84%, rgba(0, 0, 0, 0) 100%);
}

.fb-bio-portrait {
	align-self: flex-start;
}

/* pull quote inside the biography */
.fb-pullquote {
	border-left: 1px solid #C9A227;
	padding: 6px 0 6px 28px;
	margin: 46px 0;
}

.fb-pullquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	line-height: 1.4;
	margin: 0;
}

/* Facts list.
   Rows rather than columns: four items in a three-across grid always leaves an
   orphan, and a label/value row reads like a specification sheet — which is
   exactly what this is. Works with any number of facts. */
.fb-facts {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(242, 239, 230, .14);
}

.fb-facts > div {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 10px 40px;
	align-items: baseline;
	padding: 24px 0;
	border-bottom: 1px solid rgba(242, 239, 230, .14);
	transition: background-color .35s ease;
}

@media (hover: hover) {
	.fb-facts > div:hover {
		background: rgba(242, 239, 230, .035);
	}
}

.fb-facts dt,
.fb-facts .fb-facts__label {
	font-size: .76rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #C9A227;
	margin: 0;
	padding-top: .35em;
}

.fb-facts dd,
.fb-facts .fb-facts__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.5;
	opacity: .92;
}

/* ============================================================
   9a. Social links
   ============================================================ */

.wp-block-social-links.is-style-logos-only {
	gap: 10px !important;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link {
	margin: 0;
	padding: 10px;
}

/* 34px icon inside a 54px hit area — comfortably past the 44px minimum */
.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	min-height: 54px;
	transition: transform .25s ease, opacity .25s ease;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor svg {
	width: 34px;
	height: 34px;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link:hover .wp-block-social-link-anchor {
	transform: translateY(-2px);
	opacity: 1;
}

/* ============================================================
   9b. Booklet download
   ============================================================ */

.cc-booklet {
	margin: 60px 0 0;
}

.cc-booklet__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border: 1px solid rgba(201, 162, 39, .7);
	color: #C9A227;
	text-decoration: none;
	font-size: .78rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.cc-booklet__link svg {
	width: 17px;
	height: 17px;
	flex: none;
}

.cc-booklet__link:hover,
.cc-booklet__link:focus-visible {
	background: #C9A227;
	border-color: #C9A227;
	color: #1C2B25;
	opacity: 1;
}

/* ============================================================
   10. Contact page
   ============================================================ */

.fb-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
	margin-top: 10px;
}

.fb-contact-card {
	border: 1px solid rgba(242, 239, 230, .15);
	padding: 32px 28px;
	transition: border-color .3s ease;
}

.fb-contact-card:hover {
	border-color: rgba(201, 162, 39, .5);
}

.fb-contact-card__label {
	font-size: .76rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #C9A227;
	margin: 0 0 12px;
}

.fb-contact-card__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 400;
	margin: 0;
	line-height: 1.5;
	word-break: break-word;
}

.fb-contact-card__value a {
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 239, 230, .25);
	padding-bottom: 2px;
}

.fb-contact-card__value a:hover {
	border-color: #C9A227;
	color: #C9A227;
}

.fb-contact-card__note {
	font-size: .82rem;
	opacity: .6;
	margin: 10px 0 0;
}

.fb-mail a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 162, 39, .5);
	padding-bottom: 5px;
}

.fb-mail a:hover {
	color: #C9A227;
}

/* ============================================================
   11. Biography teaser — full-height portrait, faded edge
   ============================================================ */

/* Portrait mask. One custom property so the shape can change per breakpoint:
   narrow screens fade only the inner edge, wide screens fade both sides so the
   photo has no hard edge anywhere. */
:root {
	--fb-portrait-mask: linear-gradient(to right, #000 0%, #000 52%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 1400px) {
	:root {
		--fb-portrait-mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 7%, #000 18%, #000 52%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, 0) 100%);
	}
}

.fb-bio {
	overflow: hidden;
}

.fb-bio > .wp-block-columns {
	align-items: stretch;
	gap: 0;
	margin-bottom: 0;
	min-height: clamp(520px, 74vh, 820px);
}

.fb-bio .fb-portrait {
	display: flex;
	align-self: stretch;
}

.fb-bio .fb-portrait figure {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* --- Fallback for a Front Page template customised in the Site Editor before
   theme v1.4. That saved copy has no .fb-bio wrapper, so match the section by
   the portrait column it contains and rebuild the same full-bleed layout. --- */

.wp-block-group:not(.fb-bio):has(> .wp-block-columns > .fb-portrait) {
	overflow: hidden;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}

/* The saved copy sits in a constrained-layout group, which caps children at the
   content width and centres them — that is what kept the photo off the edge.
   Let this one row span the full viewport instead. */
.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) {
	align-items: stretch;
	gap: 0;
	margin-bottom: 0;
	min-height: clamp(520px, 74vh, 820px);
	max-width: none !important;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-group:not(.fb-bio) > .wp-block-columns > .fb-portrait {
	padding: 0 !important;
	display: flex;
	align-self: stretch;
}

.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) > .wp-block-column:not(.fb-portrait) {
	padding: 90px 6vw 90px 56px;
	align-self: center;
}

.wp-block-group:not(.fb-bio) > .wp-block-columns > .fb-portrait figure {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* the image fills the whole column and dissolves into the page on its
   inner edge, so there is no visible rectangle */
.fb-bio .fb-portrait img,
.wp-block-group:not(.fb-bio) > .wp-block-columns > .fb-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	aspect-ratio: auto !important;
	display: block;
	-webkit-mask-image: var(--fb-portrait-mask);
	mask-image: var(--fb-portrait-mask);
}

/* ============================================================
   11b. Light section — the page's one bright band
   ============================================================ */

.fb-light {
	background: #F2EFE6;
	color: #1C2B25;
}

.fb-light .fb-eyebrow,
.fb-light .cc-testimonial cite,
.fb-light .cc-testimonial cite a,
.fb-light .fb-more a {
	color: #8C6D14;
}

.fb-light .fb-more a {
	border-bottom-color: rgba(140, 109, 20, .45);
}

.fb-light .cc-testimonials .cc-testimonial {
	border-bottom-color: rgba(28, 43, 37, .14);
}

.fb-light .cc-testimonial blockquote {
	color: #1C2B25;
}

/* Light bands are painted the same way as the recordings band: a huge
   box-shadow rather than 100vw, so they span the viewport whatever the parent
   is doing, and can never cause sideways scrolling. */
.cc-section--press,
.cc-section--partners {
	background: #F2EFE6;
	box-shadow: 0 0 0 100vmax #F2EFE6;
	/* 1px of vertical bleed closes hairline seams where two bands meet and
	   sub-pixel rounding would otherwise let the page colour show through */
	clip-path: inset(-1px -100vmax);
	margin: 0 !important;
}

.cc-section--press {
	padding: 104px 6vw;
}

.cc-section--partners {
	padding: 90px 6vw;
	text-align: center;
}

/* Uppercase tracked-out sans is the language of small utility labels, which is
   part of why this band read as cheap. A serif italic set between two hairlines
   is the traditional way a programme credits its supporters, and it sits closer
   to the headings than to the fine print. */
.cc-section--partners .fb-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.45rem !important;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: none;
	color: rgba(28, 43, 37, .62);
	margin-bottom: 48px;
}

.cc-section--partners .fb-eyebrow::before,
.cc-section--partners .fb-eyebrow::after {
	content: "";
	height: 1px;
	width: clamp(40px, 8vw, 90px);
	background: rgba(28, 43, 37, .22);
	flex: none;
}

/* Partners and press are separate patterns, so they are siblings one level up.
   Match on the wrappers to collapse the doubled padding where they meet. */
section:has(> .cc-section--partners) + section .cc-section--press,
main > section:has(.cc-section--partners) + section .cc-section--press {
	padding-top: 34px;
}

/* belt and braces: any empty paragraph left beside a band contributes nothing */
section > p:empty,
section:has(> .cc-section) > p {
	display: none;
}

/* ============================================================
   11b-ii. Partner logos
   ============================================================ */

.cc-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px 40px;
}

/* Every logo sits in a cell of the same size and is scaled to fit inside it.
   A shared height alone makes a long wordmark tower over a compact mark; equal
   cells give the row an even rhythm whatever shapes arrive. */
.cc-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 230px;
	height: 96px;
	line-height: 0;
	text-decoration: none;
}

/* fills its cell without ever exceeding it, whatever the proportions */
.cc-partner img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: .85;
	transition: opacity .3s ease, transform .3s ease;
}

.cc-partner:hover img,
.cc-partner:focus-visible img {
	opacity: 1;
	transform: translateY(-2px);
}

.cc-partner__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	line-height: 1.4;
	color: #1C2B25;
	opacity: .8;
}

/* ============================================================
   11c. Full-bleed photo break
   ============================================================ */

.fb-photobreak {
	position: relative;
	overflow: hidden;
}

/* black and white by default — unifies shots taken on different backdrops and
   keeps colour meaningful where it is used (hero, biography) */
.fb-photobreak .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.06);
	transform: scale(1.02);
}

/* Scrim behind the text. An even overlay across the whole photo either washes
   the image out or leaves small type unreadable over light patches; a gradient
   weighted to the bottom darkens only where the words are. */
.fb-photobreak::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 26, 22, .82) 0%, rgba(16, 26, 22, .45) 38%, rgba(16, 26, 22, 0) 72%);
	pointer-events: none;
	z-index: 1;
}

.fb-photobreak .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* A constrained layout gives every child auto side margins, which centred the
   narrow quote while the full-width attribution stayed left. Pin both to the
   left edge of the container instead. */
.fb-photobreak__line {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.6rem, 3.4vw, 2.9rem);
	line-height: 1.35;
	max-width: 22ch;
	margin: 0 auto 0 0;
}

.fb-photobreak__attrib {
	font-size: .84rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	/* lighter than the brass used on flat backgrounds — small caps at this size
	   need more separation from a photograph than from a solid colour */
	color: #E6C868;
	text-shadow: 0 1px 12px rgba(16, 26, 22, .9);
	margin: 24px auto 0 0;
	max-width: 40ch;
}

.fb-photobreak__line {
	text-shadow: 0 2px 24px rgba(16, 26, 22, .5);
}

/* ============================================================
   11d. Facts strip
   ============================================================ */

.fb-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 30px 40px;
	border-top: 1px solid rgba(242, 239, 230, .14);
	border-bottom: 1px solid rgba(242, 239, 230, .14);
	padding: 44px 0;
}

.fb-strip__item {
	text-align: left;
}

.fb-strip__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 300;
	line-height: 1;
	display: block;
}

.fb-strip__label {
	display: block;
	margin-top: 10px;
	font-size: .76rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	opacity: .6;
}

/* ============================================================
   11e. Image lightbox (WordPress native, enabled in theme.json)
   ============================================================ */

.wp-lightbox-overlay {
	background: rgba(16, 26, 22, .94) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.wp-lightbox-overlay .wp-lightbox-close {
	color: #F2EFE6;
	background: transparent;
	border: 0;
	padding: 14px;
	cursor: pointer;
	transition: color .25s ease;
}

.wp-lightbox-overlay .wp-lightbox-close:hover {
	color: #C9A227;
}

.wp-lightbox-overlay .wp-lightbox-close svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* the enlarged image never quite fills the screen, so it reads as a plate
   floating over the page rather than a full-screen takeover */
.wp-lightbox-overlay .wp-lightbox-image img,
.wp-lightbox-overlay img {
	max-width: 88vw !important;
	max-height: 86vh !important;
	object-fit: contain;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

/* the small magnifier badge WordPress adds to clickable images */
.wp-lightbox-container button.lightbox-trigger {
	background: rgba(20, 32, 27, .6);
	border: 1px solid rgba(242, 239, 230, .25);
	backdrop-filter: blur(3px);
	transition: background-color .25s ease, border-color .25s ease;
}

.wp-lightbox-container button.lightbox-trigger:hover {
	background: #C9A227;
	border-color: #C9A227;
}

.wp-lightbox-container button.lightbox-trigger svg {
	fill: #F2EFE6;
}

.wp-lightbox-container button.lightbox-trigger:hover svg {
	fill: #1C2B25;
}

/* ============================================================
   12. Gallery strip
   ============================================================ */

.fb-gallery-strip figure {
	overflow: hidden;
	margin: 0;
}

.fb-gallery-strip img {
	width: 100%;
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.fb-gallery-strip figure:hover img {
	transform: scale(1.05);
}

/* staggered so the row is not a flat band of three equal rectangles */
@media (min-width: 783px) {
	.fb-gallery-strip > .wp-block-column:nth-child(1) {
		transform: translateY(28px);
	}

	.fb-gallery-strip > .wp-block-column:nth-child(3) {
		transform: translateY(52px);
	}
}

/* An image block with nothing chosen yet renders an empty <img>. Hide it on the
   front end so unfilled slots leave no gap — it is still fully visible and
   editable in the editor. */
.fb-gallery-strip img:not([src]),
.fb-portrait img:not([src]) {
	display: none;
}

/* ============================================================
   13. Responsive
   ============================================================ */

@media (max-width: 782px) {

	/* Page content needs breathing room from the screen edge. The homepage is
	   excluded — its sections pad themselves and several are full-bleed. */
	body:not(.home) main.wp-block-group {
		padding-left: 6vw;
		padding-right: 6vw;
	}

	/* the customised bio section keeps a 6vw right padding, which showed as a
	   strip of background beside the photo — the text column pads itself */
	.wp-block-group:not(.fb-bio):has(> .wp-block-columns > .fb-portrait) {
		padding-right: 0 !important;
	}

	/* long-form text: smaller and tighter so it reads on a narrow screen */
	.fb-bio-lead p {
		font-size: 1.05rem;
		line-height: 1.65;
	}

	.fb-bio-body p,
	.fb-lead {
		font-size: 1rem;
		line-height: 1.7;
	}

	.fb-facts > div {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 20px 0;
	}

	.fb-facts dt,
	.fb-facts .fb-facts__label {
		padding-top: 0;
	}

	.fb-facts dd,
	.fb-facts .fb-facts__value {
		font-size: 1.08rem;
	}

	.fb-pullquote {
		margin: 34px 0;
		padding-left: 20px;
	}

	.fb-contact-card {
		padding: 26px 22px;
	}

	/* gallery becomes a swipeable carousel — one-and-a-bit images visible so it
	   is obvious there is more to the right */
	.fb-gallery-strip {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-right: -6vw;
		padding-right: 6vw;
	}

	.fb-gallery-strip::-webkit-scrollbar {
		display: none;
	}

	.fb-gallery-strip > .wp-block-column {
		flex: 0 0 78% !important;
		min-width: 78% !important;
		scroll-snap-align: start;
		transform: none !important;
	}

	.fb-strip {
		grid-template-columns: 1fr 1fr;
		gap: 26px 20px;
		padding: 34px 0;
	}

	.fb-photobreak__line {
		max-width: none;
	}

	.cc-section--recordings {
		padding: 70px 6vw;
	}

	.cc-section--press {
		padding: 70px 6vw;
	}

	.cc-section--partners {
		padding: 54px 6vw;
	}

	.cc-partners {
		gap: 28px 36px;
	}

	.cc-partner {
		width: 150px;
		height: 74px;
	}

	.cc-section--partners .fb-eyebrow {
		font-size: .86rem !important;
		letter-spacing: .28em;
		margin-bottom: 30px;
	}

	.fb-eyebrow {
		font-size: .76rem !important;
		letter-spacing: .26em;
	}

	.cc-booklet__link {
		padding: 15px 26px;
		font-size: .68rem;
		letter-spacing: .2em;
	}

	.cc-recording--featured .cc-recording__embed {
		aspect-ratio: 16 / 9;
	}

	.cc-recording--featured .cc-video__play {
		width: 68px;
		height: 68px;
	}

	.cc-recording--featured .cc-video__play::before {
		border-width: 9px 0 9px 15px;
	}

	.cc-recordings--rest {
		margin-top: 44px;
		gap: 34px 20px;
	}

	/* ---------- mobile navigation overlay ---------- */

	/* bigger hamburger — the default is a small tap target */
	.wp-block-navigation__responsive-container-open {
		padding: 10px;
		margin: -10px;
	}

	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* core sets its own padding here with equal specificity, hence !important */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		padding: 22px 6vw 44px !important;
		align-items: stretch;
	}

	/* The admin bar is fixed over the top 46px of the viewport, and this overlay
	   is fixed too — so it has to start below it. Only affects logged-in users;
	   visitors never see the bar. */
	.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
		top: 46px !important;
	}

	/* close button sits exactly where the hamburger was, so the icon appears to
	   swap in place rather than jump. Core positions this itself, so every
	   property here has to win outright. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: static !important;
		margin-top: 0 !important;
	}

	/* Mirror the hamburger's box exactly.
	   The hamburger has 10px padding and a -10px margin inside a header padded
	   by 6vw, so its icon's right edge lands exactly 6vw from the viewport and
	   its top at 26px. Offsetting this button by the same 10px puts the two
	   icons in identical positions, so the X appears where the hamburger was. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 16px !important;
		right: calc(6vw - 10px) !important;
		left: auto !important;
		margin: 0 !important;
		padding: 10px !important;
	}

	/* ---------- open / close animation ---------- */

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: fb-menu-in .34s cubic-bezier(.22, .61, .36, 1) both;
	}

	.wp-block-navigation__responsive-container.is-menu-open.fb-menu-closing {
		animation: fb-menu-out .22s ease both;
	}

	/* menu rows drift up in sequence behind the fade */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .cc-lang--in-menu {
		animation: fb-menu-item .5s cubic-bezier(.22, .61, .36, 1) both;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .10s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .16s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .22s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .28s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .34s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .40s; }
	.wp-block-navigation__responsive-container.is-menu-open .cc-lang--in-menu { animation-delay: .46s; }

	/* on the way out everything leaves together with the overlay */
	.wp-block-navigation__responsive-container.is-menu-open.fb-menu-closing .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open.fb-menu-closing .cc-lang--in-menu {
		animation: none;
	}

	@keyframes fb-menu-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@keyframes fb-menu-out {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

	@keyframes fb-menu-item {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: none; }
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		padding-top: 84px !important;
		margin-top: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
		gap: 0 !important;
		width: 100%;
		align-items: flex-start;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	/* even rhythm, no rules between items */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block !important;
		width: 100%;
		font-size: 1.22rem !important;
		letter-spacing: .16em;
		line-height: 1.25 !important;
		padding: 22px 0 !important;
		min-height: 64px;
		box-sizing: border-box;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
		color: #C9A227;
		opacity: 1;
	}

	/* language switcher, once JS has moved it into the overlay: pinned to the
	   bottom, no boxes — the active language is simply brass and underlined */
	.cc-lang--in-menu {
		margin-top: auto;
		padding-top: 48px;
		gap: 0;
		font-size: .95rem;
		letter-spacing: .22em;
	}

	.cc-lang--in-menu .cc-lang__item {
		border: none !important;
		padding: 14px 12px 10px;
		margin-right: 14px;
		opacity: .45;
		border-bottom: 1px solid transparent !important;
	}

	.cc-lang--in-menu .cc-lang__item:first-child {
		margin-left: -12px;
	}

	.cc-lang--in-menu .cc-lang__item.is-current {
		opacity: 1;
		color: #C9A227;
		border-bottom-color: #C9A227 !important;
	}

	/* Force the biography row to stack. Explicit flex-basis on the columns can
	   survive core's stacking rule, which left a narrow photo squeezed beside
	   narrow text on phones. display:block removes the flex context entirely. */
	.fb-bio > .wp-block-columns,
	.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) {
		display: block !important;
	}

	/* width:auto, not 100% — with content-box sizing a 100% width plus 6vw of
	   side padding overflows the screen, which pushed the text off the right */
	.fb-bio > .wp-block-columns > .wp-block-column,
	.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) > .wp-block-column {
		width: auto !important;
		flex-basis: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}

	/* stacked: portrait sits above the text and fades downward instead */
	.fb-bio > .wp-block-columns {
		min-height: 0;
	}

	.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) {
		min-height: 0;
	}

	.fb-bio .fb-portrait,
	.wp-block-group:not(.fb-bio) > .wp-block-columns > .fb-portrait {
		display: block;
	}

	.fb-bio .fb-portrait img,
	.wp-block-group:not(.fb-bio) > .wp-block-columns > .fb-portrait img {
		height: auto;
		aspect-ratio: 4 / 5 !important;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
	}

	.fb-bio .fb-bio__text,
	.wp-block-group:not(.fb-bio) > .wp-block-columns:has(> .fb-portrait) > .wp-block-column:not(.fb-portrait) {
		padding: 20px 6vw 70px !important;
	}

	/* concerts: plain stacking beats a grid here — percentage heights inside a
	   single-column grid were inflating the empty rows */
	.cc-concert {
		display: block;
		padding: 24px 0;
	}

	.cc-concert__date {
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		margin-bottom: 12px;
	}

	.cc-concert__day {
		font-size: 1.5rem;
	}

	.cc-concert__month {
		margin-top: 0;
	}

	.cc-concert__action {
		display: block;
		min-height: 0;
		margin-top: 16px;
	}

	.cc-concert__tickets {
		display: inline-block;
		padding: 12px 24px;
	}

	.fb-hero::before,
	.fb-hero::after {
		width: 55%;
	}

	.fb-marquee__group > span {
		font-size: .95rem;
	}

	.fb-marquee__group > i {
		padding: 0 16px;
	}
}

/* ============================================================
   14. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.fb-hero::before,
	.fb-hero::after,
	.fb-hero .wp-block-cover__image-background,
	.fb-hero__line,
	.fb-hero .wp-block-cover__inner-container::before {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.fb-marquee__track {
		animation: none;
	}

	.fb-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.cc-testimonials .cc-testimonial,
	.cc-testimonials .cc-testimonial::before,
	.cc-testimonials .cc-testimonial blockquote,
	.cc-testimonials .cc-testimonial figcaption {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .cc-lang--in-menu {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}