@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/outfit.woff2") format("woff2");
}

:root {
	--global-heading-font-family: "Outfit", "Avenir Next", "Century Gothic", "Futura", sans-serif;
	--global-body-font-family: "Outfit", "Avenir Next", "Century Gothic", "Futura", sans-serif;
	--xms-ink: #f4f1ea;
	--xms-muted: #cfc9bf;
	--xms-gold: #c4a35a;
	--xms-void: #0c0c0c;
}

body,
button,
input,
select,
textarea {
	font-family: "Outfit", "Avenir Next", "Century Gothic", "Futura", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Outfit", "Avenir Next", "Century Gothic", "Futura", sans-serif;
	font-weight: 600;
}

#masthead,
#masthead .site-header-wrap,
#masthead .site-header-row-container-inner,
#main-header,
#mobile-header,
#mobile-header .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: var(--xms-void) !important;
	color: var(--xms-ink);
}

#masthead .site-main-header-wrap .site-header-row-container-inner,
#mobile-header .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid #2a2a2a;
}

#masthead .header-navigation .header-menu-container > ul > li > a,
#masthead .header-navigation .header-menu-container > ul > li > a:visited,
#site-navigation a,
#mobile-header .menu-toggle-open,
#mobile-header .menu-toggle-open .kadence-svg-icon {
	color: var(--xms-ink) !important;
	font-weight: 500;
	letter-spacing: 0.03em;
	font-size: 1.05rem;
}

#main-header .site-header-row-container-inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

#main-header .site-container {
	max-width: none;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#main-header .site-main-header-inner-wrap.site-header-row {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0.45rem;
	min-height: 0 !important;
	width: 100%;
	padding: 1.45rem 0 0.7rem;
	grid-template-columns: none !important;
}

#main-header .site-header-main-section-left {
	width: 100%;
	max-width: 100%;
	justify-content: flex-start !important;
}

#main-header .site-header-main-section-left .site-header-item {
	width: auto;
	justify-content: flex-start;
}

#main-header .site-header-main-section-right,
#main-header .site-header-item-main-navigation {
	width: 100%;
	max-width: 100%;
	justify-content: center !important;
}

#main-header .header-navigation .header-menu-container > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.1rem 1.45rem;
	width: 100%;
}

#main-header .header-navigation .header-menu-container > ul > li > a {
	white-space: nowrap;
}

.xms-shop-lead {
	max-width: 40rem;
	margin: 0 auto 1.5rem;
	color: #4a5568;
	line-height: 1.55;
}

#masthead .header-navigation .header-menu-container > ul > li > a:hover,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
#site-navigation a:hover {
	color: var(--xms-gold) !important;
}

/* Music technology dropdown (and any future primary submenus). */
#main-header .header-navigation .header-menu-container > ul > li.menu-item-has-children {
	position: relative;
}

#main-header .header-navigation .header-menu-container > ul > li > .sub-menu {
	min-width: 15.5rem;
	padding: 0.45rem 0;
	background: #14110e !important;
	border: 1px solid #3a342c;
	border-radius: 0.35rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

#main-header .header-navigation .header-menu-container > ul > li > .sub-menu > li > a {
	display: block;
	padding: 0.55rem 1rem;
	color: #f4f1ea !important;
	font-size: 0.88rem;
	white-space: nowrap;
}

#main-header .header-navigation .header-menu-container > ul > li > .sub-menu > li > a:hover,
#main-header .header-navigation .header-menu-container > ul > li > .sub-menu > li.current-menu-item > a {
	color: var(--xms-gold) !important;
	background: #1a1712;
}

#mobile-drawer .mobile-menu-container .sub-menu a {
	color: #cfc9bf !important;
	font-size: 0.92rem;
}

#mobile-drawer,
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-header,
#mobile-drawer .menu-toggle-close {
	background: #111 !important;
	color: var(--xms-ink) !important;
}

#mobile-drawer .mobile-menu-container a {
	color: var(--xms-ink) !important;
}

#mobile-drawer .mobile-menu-container a:hover {
	color: var(--xms-gold) !important;
}

#masthead img.custom-logo,
#mobile-header img.custom-logo {
	display: none !important;
}

.xms-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--xms-ink);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.xms-wordmark__word {
	font-weight: 600;
	font-size: 1.78rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.xms-wordmark__x {
	position: relative;
	font-weight: 700;
	font-size: 3.2rem;
	letter-spacing: 0;
	line-height: 0.82;
	margin-right: 0.2rem;
}

.xms-wordmark__x::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 52%;
	width: 0.22em;
	height: 0.22em;
	background: var(--xms-gold);
	transform: translate(-50%, -50%) rotate(45deg);
}

#colophon,
#colophon .site-footer-wrap,
#colophon .site-footer-row-container-inner {
	background: var(--xms-void) !important;
	color: var(--xms-muted);
	border: 0;
}

#colophon .site-middle-footer-wrap .site-footer-row-container-inner {
	border-top: 1px solid #2a2a2a;
}

#colophon .site-container {
	max-width: none;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#colophon,
#colophon p,
#colophon .site-info,
#colophon .footer-social-wrap {
	color: var(--xms-muted) !important;
}

#colophon .site-middle-footer-inner-wrap.site-footer-row-columns-3 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	grid-template-columns: none !important;
}

#colophon .site-footer-middle-section-1 {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	justify-content: flex-start !important;
}

#colophon .site-footer-middle-section-2,
#colophon .footer-section-inner-items-0:empty {
	display: none;
}

#colophon .site-footer-middle-section-3 {
	flex: 0 0 auto;
	max-width: none;
	justify-content: flex-end !important;
}

#colophon .footer-navigation-wrap,
#colophon .footer-navigation-inner,
#colophon .footer-navigation,
#colophon .footer-menu-container {
	width: 100%;
}

#colophon .footer-navigation .footer-menu-container > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0.1rem 0;
	margin: 0;
	padding: 0.7rem 0;
}

#colophon .footer-navigation .footer-menu-container > ul > li {
	display: inline-flex;
	align-items: center;
}

#colophon .footer-navigation .footer-menu-container > ul > li + li::before {
	content: "·";
	color: #4a4741;
	font-weight: 400;
	padding: 0 0.5rem;
	pointer-events: none;
}

#colophon a,
#colophon .footer-navigation .footer-menu-container > ul > li > a {
	color: #9a958c !important;
	font-weight: 400;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	line-height: 1.4;
	padding: 0.12rem 0 !important;
}

#colophon .site-info,
#colophon .footer-html,
#colophon .footer-html-inner,
#colophon .footer-html-inner p {
	font-weight: 400;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	color: #8a857c !important;
}

#colophon a:hover,
#colophon .footer-navigation .footer-menu-container > ul li a:hover {
	color: var(--xms-gold) !important;
}

#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a {
	color: var(--xms-gold) !important;
}

#colophon .site-footer-middle-section-3,
#colophon .site-footer-middle-section-3 .footer-widget-area-inner,
#colophon .site-footer-middle-section-3 p {
	text-align: right !important;
	margin: 0;
}

#colophon .site-footer-middle-section-3 img {
	height: 18px !important;
	opacity: 0.72;
}

@media (min-width: 960px) {
	#colophon .footer-navigation .footer-menu-container > ul {
		flex-wrap: nowrap;
	}
}

.xms-score-cover {
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 11% 9% 10%;
	box-sizing: border-box;
	text-align: center;
	color: #1a140c;
}

.xms-score-cover__composer {
	font-size: clamp(1.05rem, 2.1vw, 1.55rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.15;
}

.xms-score-cover__title {
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.2;
}

.xms-score-cover__force,
.xms-score-cover__opus {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.78;
}

.xms-score-cover--rose {
	background: linear-gradient(#cfd9e4 0 28%, #e3b7ae 28% 72%, #f3ead8 72% 100%);
}

.xms-score-cover--ink {
	background: linear-gradient(#2a3140 0 32%, #cbb392 32% 70%, #efe6d6 70% 100%);
	color: #f4f1ea;
}

.xms-score-cover--ink .xms-score-cover__title,
.xms-score-cover--ink .xms-score-cover__force,
.xms-score-cover--ink .xms-score-cover__opus {
	color: #1a140c;
}

.xms-score-cover--sage {
	background: linear-gradient(#c5d1c2 0 30%, #e4d8c0 30% 70%, #f4efe4 70% 100%);
}

.xms-score-cover--sand {
	background: linear-gradient(#ead7b4 0 30%, #c9b189 30% 68%, #f7f1e4 68% 100%);
}

.xms-score-cover--wine {
	background: linear-gradient(#4c2430 0 30%, #8a4a55 30% 68%, #f3ead8 68% 100%);
	color: #f4f1ea;
}

.xms-score-cover--wine .xms-score-cover__force,
.xms-score-cover--wine .xms-score-cover__opus {
	color: #1a140c;
}

.xms-score-cover--dusk {
	background: linear-gradient(#2f3648 0 34%, #b9a68c 34% 70%, #efe6d6 70% 100%);
	color: #f4f1ea;
}

.xms-score-cover--dusk .xms-score-cover__title,
.xms-score-cover--dusk .xms-score-cover__force,
.xms-score-cover--dusk .xms-score-cover__opus {
	color: #1a140c;
}

.xms-score-cover--gold {
	background: linear-gradient(#c4a35a 0 32%, #1a140c 32% 70%, #f3ead8 70% 100%);
	color: #1a140c;
}

.xms-score-cover--gold .xms-score-cover__title {
	color: #f4f1ea;
}

.xms-score-cover--fog {
	background: linear-gradient(#d5dde3 0 30%, #e8eef2 30% 68%, #f4f1ea 68% 100%);
}

.xms-work-cover {
	position: relative;
	width: 100%;
	height: 100%;
}

.xms-work-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xms-work-cover__mark {
	position: absolute;
	left: 0.7rem;
	bottom: 0.7rem;
	padding: 0.22rem 0.5rem;
	border-radius: 0.22rem;
	background: rgba(12, 12, 12, 0.72);
	color: #c4a35a;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.xms-project {
	position: relative;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem 1.5rem 4.6rem;
	text-align: center;
	background-color: #111;
	background-image: var(--xms-project);
	background-size: cover;
	background-position: center;
	color: #f4f1ea;
}

.xms-project::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(12, 12, 12, 0.42) 0%,
		rgba(12, 12, 12, 0.72) 55%,
		rgba(12, 12, 12, 0.88) 100%
	);
}

.xms-project--line {
	min-height: 34vh;
	padding: 4.2rem 1.5rem 4rem;
	margin-top: 3.4rem;
}

.xms-project__inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
}

.xms-project__kicker {
	margin: 0 0 0.85rem;
	color: #c4a35a;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.xms-project h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: #fff;
}

.xms-project p {
	margin: 0 0 1.75rem;
	color: #cfc9bf;
	font-size: 1.02rem;
	line-height: 1.6;
}

.xms-project .xms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.35rem;
	border-radius: 0.35rem;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.xms-project .xms-btn--solid {
	background: #c4a35a;
	color: #1a140c !important;
}

.xms-project .xms-btn--solid:hover {
	background: #d4b56a;
	color: #1a140c;
}
