/* VARIABLES
----------------------------------------- */
:root {
	--main-width: 1024px;
	--module-width: 320px;
	--bg-color: #f0f0f0;
	--fg-color: #333;
	--border-color: #ccc;
	--play-bg-color: #333;
	--play-fg-color: #fff;
	--font-light: 300;
	--font-book: 400;
	--font-medium: 500;
	--font-bold: 700;
	--info-module-width: 500px;
	--info-link-color: #f04;
}

/* 
----------------------------------------- */
body.link-page {
	color: var(--fg-color);
	background-color: var(--bg-color);
}

/* 
----------------------------------------- */
.link-page #wrap,
.link-page #info-wrap {
	width: var(--main-width);
	margin: 32px auto;
}

.link-page #wrap #release-info,
.link-page #wrap #digital-info,
.link-page #wrap #physical-info,
.link-page #wrap #noton-release-1,
.link-page #wrap #noton-release-2,
.link-page #wrap #noton-release-3 {
	width: var(--module-width);
	background-color: var(--bg-color);
	outline-width: 1px;
	outline-style: solid;
	outline-color: var(--border-color);
	outline-offset: -1px;
	float: left;
}

.link-page #wrap #shop-info,
.link-page #wrap #noton-release {
	float: left;
}

.link-page #wrap #digital-info,
.link-page #wrap #physical-info,
.link-page #wrap #noton-release-2,
.link-page #wrap #noton-release-3 {
	margin-left: 32px;
}

.link-page #info-wrap #info-column-1,
.link-page #info-wrap #info-column-2 {
	width: var(--info-module-width);
	background-color: var(--bg-color);
	outline-width: 1px;
	outline-style: solid;
	outline-color: var(--border-color);
	outline-offset: -1px;
	float: left;
}

.link-page #info-wrap #info-column-2 {
	margin-left: 24px;
}

/* Release Cover / Meta
----------------------------------------- */
#release-info .release-cover {
	padding: 0;
	border-bottom: 1px dotted var(--border-color);
}

#release-info .release-cover img {
	width: 100%;
}

#release-info .release-meta {
	padding: 24px 8px;
}

#release-info .release-meta span {
	display: block;
}

#release-info .release-meta span.catalog-number {
	font-size: 11px;
	font-weight: var(--font-book);
	line-height: 1em;
	text-align: center;
}

#release-info .release-meta span.release-title {
	font-size: 20px;
	font-weight: var(--font-bold);
	line-height: 1em;
	margin-top: 8px;
	text-align: center;
}

#release-info .release-meta span.artist-name {
	font-size: 15px;
	font-weight: var(--font-bold);
	line-height: 1em;
	text-align: center;
}

/* Pre-Listening
----------------------------------------- */
#release-info .release-preview {
	border-top: 1px dotted var(--border-color);
	padding: 24px 16px;
}

#release-info .release-preview .agp-sp.agp-sp--list {
	padding: 0;
	margin: 0;
}

#release-info .release-preview .agp-sp__track + .agp-sp__track {
	border-top: 1px dotted var(--border-color);
}

#release-info .release-preview .agp-sp__track__infos span {
	font-size: 11px;
	color: var(--fg-color);
}

#release-info .release-preview .agp-sp__track__infos__duration::before {
	color: var(--play-fg-color);
	background-color: var(--play-bg-color);
}

#release-info .release-preview .agp-sp__track__waveform wave wave {
	background-color: transparent;
}

#release-info .release-preview .agp-sp__track__infos__title .track_artists {
	display: none;
}

/* NOTON Shop Linktree
----------------------------------------- */
#noton-release-1 nav h2,
#noton-release-2 nav h2,
#noton-release-3 nav h2 {
	font-size: 12px;
	font-weight: var(--font-light);
	line-height: 1em;
	padding: 12px;
	text-align: center;
	text-transform: none;
	border-bottom: 1px dotted var(--border-color);
}

#noton-release-1 nav ul li a,
#noton-release-2 nav ul li a,
#noton-release-3 nav ul li a {
	color: var(--fg-color);
	display: block;
	height: 96px;
	background-position: 10px 14px;
	background-repeat: no-repeat;
	background-size: 65px 65px;
}

#noton-release-1 nav ul li a:hover,
#noton-release-2 nav ul li a:hover,
#noton-release-3 nav ul li a:hover {
	opacity: 0.666;
}

#noton-release-1 nav ul li + li,
#noton-release-2 nav ul li + li,
#noton-release-3 nav ul li + li {
	border-top: 1px dotted var(--border-color);
}

#noton-release-1 nav ul li a span,
#noton-release-2 nav ul li a span,
#noton-release-3 nav ul li a span {
	display: block;
	padding-left: 85px;
	padding-right: 14px;
}

#noton-release-1 nav ul li a span.cat,
#noton-release-2 nav ul li a span.cat,
#noton-release-3 nav ul li a span.cat {
	font-weight: var(--font-light);
	padding-top: 10px;
}

#noton-release-1 nav ul li a span.artist,
#noton-release-2 nav ul li a span.artist,
#noton-release-3 nav ul li a span.artist {
	font-weight: var(--font-medium);
}

#noton-release-1 nav ul li a span.title,
#noton-release-2 nav ul li a span.title,
#noton-release-3 nav ul li a span.title {
	font-weight: var(--font-book);
	font-style: italic;
	text-transform: none;
}

#noton-release-1 nav ul li.n-061 a {background-image: url('../img/link/link-N-061_130.png');}
#noton-release-1 nav ul li.n-059 a {background-image: url('../img/link/link-N-059_130.png');}
#noton-release-1 nav ul li.n-058 a {background-image: url('../img/link/link-N-058_130.png');}
#noton-release-1 nav ul li.n-057 a {background-image: url('../img/link/link-N-057_130.png');}
#noton-release-1 nav ul li.n-056 a {background-image: url('../img/link/link-N-056_130.png');}
#noton-release-1 nav ul li.n-055 a {background-image: url('../img/link/link-N-055_130.png');}
#noton-release-1 nav ul li.n-054 a {background-image: url('../img/link/link-N-054_130.png');}
#noton-release-1 nav ul li.n-053 a {background-image: url('../img/link/link-N-053_130.png');}
#noton-release-1 nav ul li.n-052 a {background-image: url('../img/link/link-N-052_130.png');}
#noton-release-1 nav ul li.n-051 a {background-image: url('../img/link/link-N-051_130.png');}
#noton-release-1 nav ul li.n-050 a {background-image: url('../img/link/link-N-050_130.png');}
#noton-release-1 nav ul li.n-049 a {background-image: url('../img/link/link-N-049_130.png');}
#noton-release-1 nav ul li.n-048 a {background-image: url('../img/link/link-N-048_130.png');}
#noton-release-1 nav ul li.n-047 a {background-image: url('../img/link/link-N-047_130.png');}
#noton-release-1 nav ul li.n-046 a {background-image: url('../img/link/link-N-046_130.png');}
#noton-release-1 nav ul li.n-045 a {background-image: url('../img/link/link-N-045_130.png');}
#noton-release-1 nav ul li.n-044 a {background-image: url('../img/link/link-N-044_130.png');}
#noton-release-1 nav ul li.n-043 a {background-image: url('../img/link/link-N-043_130.png');}

#noton-release-2 nav ul li.n_003 a {background-image: url('../img/link/link-N_003_130.png');}
#noton-release-2 nav ul li.n_002 a {background-image: url('../img/link/link-N_002_130.png');}
#noton-release-2 nav ul li.n_001 a {background-image: url('../img/link/link-N_001_130.png');}

#noton-release-3 nav ul li.nx010 a {background-image: url('../img/link/link-Nx010_130.jpg');}
#noton-release-3 nav ul li.nx009 a {background-image: url('../img/link/link-Nx009_130.jpg');}
#noton-release-3 nav ul li.nx003-1 a {background-image: url('../img/link/link-Nx003-1_130.jpg');}
#noton-release-3 nav ul li.nx003 a {background-image: url('../img/link/link-Nx003_130.jpg');}
#noton-release-3 nav ul li.nx002 a {background-image: url('../img/link/link-Nx002_130.jpg');}

/* Digital & Physical Platform
----------------------------------------- */
#shop-info nav h2 {
	font-size: 12px;
	font-weight: var(--font-light);
	line-height: 1em;
	padding: 12px;
	text-align: center;
	border-bottom: 1px dotted var(--border-color);
}

#shop-info nav ul li a,
#shop-info nav ul li span.empty {
	display: block;
	height: 64px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 320px 64px;
}

#shop-info nav ul li a:hover {
	opacity: 0.666;
}

#shop-info nav ul li + li {
	border-top: 1px dotted var(--border-color);
}

#shop-info nav ul li.link-spotify a {background-image: url('../img/link/link-spotify.svg');}
#shop-info nav ul li.link-apple a {background-image: url('../img/link/link-apple-music.svg');}
#shop-info nav ul li.link-itunes a {background-image: url('../img/link/link-itune-store.svg');}
#shop-info nav ul li.link-amazon a {background-image: url('../img/link/link-amazon-music.svg');}
#shop-info nav ul li.link-deezer a {background-image: url('../img/link/link-deezer.svg');}
#shop-info nav ul li.link-juno a {background-image: url('../img/link/link-juno-download.svg');}
#shop-info nav ul li.link-tidal a {background-image: url('../img/link/link-tidal.svg');}
#shop-info nav ul li.link-youtube a {background-image: url('../img/link/link-youtube.svg');}

#shop-info nav ul li.link-noton a {background-image: url('../img/link/link-noton-shop.svg');}
#shop-info nav ul li.link-bleep a {background-image: url('../img/link/link-bleep.svg');}
#shop-info nav ul li.link-anost a {background-image: url('../img/link/link-anost.svg');}
#shop-info nav ul li.link-balades-sonores a {background-image: url('../img/link/link-balades-sonores.svg');}
#shop-info nav ul li.link-boomkat a {background-image: url('../img/link/link-boomkat.svg');}
#shop-info nav ul li.link-decks-records a {background-image: url('../img/link/link-decks-records.svg');}
#shop-info nav ul li.link-deejay a {background-image: url('../img/link/link-deejay.svg');}
#shop-info nav ul li.link-dussmann a {background-image: url('../img/link/link-dussmann.svg');}
#shop-info nav ul li.link-juno-records a {background-image: url('../img/link/link-juno-records.svg');}
#shop-info nav ul li.link-lafeltrinelli a {background-image: url('../img/link/link-lafeltrinelli.png');}
#shop-info nav ul li.link-materia-prima a {background-image: url('../img/link/link-materia-prima.svg');}
#shop-info nav ul li.link-norman-records a {background-image: url('../img/link/link-norman-records.svg');}
#shop-info nav ul li.link-oye-records a {background-image: url('../img/link/link-oye-records.svg');}
#shop-info nav ul li.link-phonica a {background-image: url('../img/link/link-phonica.svg');}
#shop-info nav ul li.link-rotor a {background-image: url('../img/link/link-rotor.png');}
#shop-info nav ul li.link-rough-trade a {background-image: url('../img/link/link-rough-trade.svg');}
#shop-info nav ul li.link-rush-hour a {background-image: url('../img/link/link-rush-hour.png');}
#shop-info nav ul li.link-serendeepity a {background-image: url('../img/link/link-serendeepity.svg');}
#shop-info nav ul li.link-tower-records a {background-image: url('../img/link/link-tower-records.svg');}

#shop-info nav ul li.link-empty span.empty {background-image: url('../img/link/link-empty.svg');}
#shop-info nav ul li.link-unknown a {background-image: url('../img/link/link-unknown.svg');}

/* Country Code */
#shop-info nav ul li {
	position: relative;
}

#shop-info nav ul li a + span {
	display: block;
	width: 28px;
	height: 16px;
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 10;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 28px 16px;
	opacity: 0.75;
}

#shop-info nav ul li span.country-be {background-image: url('../img/link/country-be.svg');}
#shop-info nav ul li span.country-de {background-image: url('../img/link/country-de.svg');}
#shop-info nav ul li span.country-es {background-image: url('../img/link/country-es.svg');}
#shop-info nav ul li span.country-fr {background-image: url('../img/link/country-fr.svg');}
#shop-info nav ul li span.country-gb {background-image: url('../img/link/country-gb.svg');}
#shop-info nav ul li span.country-it {background-image: url('../img/link/country-it.svg');}
#shop-info nav ul li span.country-jp {background-image: url('../img/link/country-jp.svg');}
#shop-info nav ul li span.country-nl {background-image: url('../img/link/country-nl.svg');}
#shop-info nav ul li span.country-pl {background-image: url('../img/link/country-pl.svg');}
#shop-info nav ul li span.country-pt {background-image: url('../img/link/country-pt.svg');}
#shop-info nav ul li span.country-uk {background-image: url('../img/link/country-uk.svg');}
#shop-info nav ul li span.country-us {background-image: url('../img/link/country-us.svg');}

/* Xerrox Selected (created: 2023-03-22)
----------------------------------------- */
#info-column-2 h2 {
	font-size: 16px;
	padding: 12px 24px 12px 24px;
}

#info-column-2 h3 {
	font-size: 14px;
	padding: 0 24px 12px 24px;
}

#info-column-2 ul {
	font-size: 12px;
	padding: 0 24px 12px 24px;
}

#info-column-2 ul li a {
	color: var(--info-link-color);
}

/* FLEXIBLE LAYOUT (< 1024px)
----------------------------------------- */
@media screen and (max-width: 1023px) {
	.link-page #wrap {
		width: 672px;
	}
	.link-page #wrap #release-info,
	.link-page #wrap #noton-release-1 {
		width: 320px;
	}
	.link-page #wrap #shop-info,
	.link-page #wrap #noton-release {
		width: 320px;
		margin-left: 32px;
	}
	.link-page #wrap #digital-info,
	.link-page #wrap #physical-info,
	.link-page #wrap #noton-release-2,
	.link-page #wrap #noton-release-3 {
		width: 320px;
		margin-left: 0;
	}
	.link-page #wrap #physical-info,
	.link-page #wrap #noton-release-3 {
		margin-top: 32px;
	}
	.link-page #info-wrap {
		width: 672px;
	}
	.link-page #info-wrap #info-column-1 {
		width: 672px;
		clear: both;
	}
	.link-page #info-wrap #info-column-2 {
		width: 672px;
		margin-top: 32px;
		margin-bottom: 0;
		margin-left: 0;
		clear: both;
	}
}

/* FLEXIBLE LAYOUT (< 768px)
----------------------------------------- */
@media screen and (max-width: 767px) {
	.link-page #wrap {
		width: 320px;
	}
	.link-page #wrap #release-info,
	.link-page #wrap #noton-release-1 {
		width: 320px;
		clear: both;
	}
	.link-page #wrap #shop-info,
	.link-page #wrap #noton-release {
		width: 320px;
		margin-left: 0;
		clear: both;
	}
	.link-page #wrap #digital-info,
	.link-page #wrap #physical-info,
	.link-page #wrap #noton-release-2,
	.link-page #wrap #noton-release-3 {
		width: 320px;
		margin-top: 32px;
		margin-bottom: 0;
		margin-left: 0;
		clear: both;
	}
	.link-page #info-wrap {
		width: 320px;
	}
	.link-page #info-wrap #info-column-1 {
		width: 320px;
		clear: both;
	}
	.link-page #info-wrap #info-column-2 {
		width: 320px;
		margin-top: 32px;
		margin-bottom: 0;
		margin-left: 0;
		clear: both;
	}
}

/* DARK MODE
----------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #333;
		--fg-color: #fff;
		--border-color: #666;
		--play-bg-color: #fff;
		--play-fg-color: #333;
	}
	#release-info .release-preview .agp-sp__track__waveform wave wave {
		background-color: #ccc;
	}
	#shop-info nav ul li.link-spotify a {background-image: url('../img/link/link-spotify-w.svg');}
	#shop-info nav ul li.link-apple a {background-image: url('../img/link/link-apple-music-w.svg');}
	#shop-info nav ul li.link-itunes a {background-image: url('../img/link/link-itune-store-w.svg');}
	#shop-info nav ul li.link-amazon a {background-image: url('../img/link/link-amazon-music-w.svg');}
	#shop-info nav ul li.link-deezer a {background-image: url('../img/link/link-deezer-w.svg');}
	#shop-info nav ul li.link-juno a {background-image: url('../img/link/link-juno-download-w.svg');}
	#shop-info nav ul li.link-tidal a {background-image: url('../img/link/link-tidal-w.svg');}
	#shop-info nav ul li.link-youtube a {background-image: url('../img/link/link-youtube-w.svg');}

	#shop-info nav ul li.link-noton a {background-image: url('../img/link/link-noton-shop-w.svg');}
	#shop-info nav ul li.link-bleep a {background-image: url('../img/link/link-bleep-w.svg');}
	#shop-info nav ul li.link-anost a {background-image: url('../img/link/link-anost-w.svg');}
	#shop-info nav ul li.link-balades-sonores a {background-image: url('../img/link/link-balades-sonores-w.svg');}
	#shop-info nav ul li.link-boomkat a {background-image: url('../img/link/link-boomkat-w.svg');}
	#shop-info nav ul li.link-decks-records a {background-image: url('../img/link/link-decks-records-w.svg');}
	#shop-info nav ul li.link-deejay a {background-image: url('../img/link/link-deejay-w.svg');}
	#shop-info nav ul li.link-dussmann a {background-image: url('../img/link/link-dussmann-w.svg');}
	#shop-info nav ul li.link-juno-records a {background-image: url('../img/link/link-juno-records-w.svg');}
	#shop-info nav ul li.link-lafeltrinelli a {background-image: url('../img/link/link-lafeltrinelli-w.png');}
	#shop-info nav ul li.link-materia-prima a {background-image: url('../img/link/link-materia-prima-w.svg');}
	#shop-info nav ul li.link-norman-records a {background-image: url('../img/link/link-norman-records-w.svg');}
	#shop-info nav ul li.link-oye-records a {background-image: url('../img/link/link-oye-records-w.svg');}
	#shop-info nav ul li.link-phonica a {background-image: url('../img/link/link-phonica-w.svg');}
	#shop-info nav ul li.link-rotor a {background-image: url('../img/link/link-rotor-w.png');}
	#shop-info nav ul li.link-rough-trade a {background-image: url('../img/link/link-rough-trade-w.svg');}
	#shop-info nav ul li.link-rush-hour a {background-image: url('../img/link/link-rush-hour-w.png');}
	#shop-info nav ul li.link-serendeepity a {background-image: url('../img/link/link-serendeepity-w.svg');}
	#shop-info nav ul li.link-tower-records a {background-image: url('../img/link/link-tower-records-w.svg');}

	#shop-info nav ul li.link-empty span.empty {background-image: url('../img/link/link-empty-w.svg');}
	#shop-info nav ul li.link-unknown a {background-image: url('../img/link/link-unknown-w.svg');}

	#shop-info nav ul li span.country-be {background-image: url('../img/link/country-be-w.svg');}
	#shop-info nav ul li span.country-de {background-image: url('../img/link/country-de-w.svg');}
	#shop-info nav ul li span.country-es {background-image: url('../img/link/country-es-w.svg');}
	#shop-info nav ul li span.country-fr {background-image: url('../img/link/country-fr-w.svg');}
	#shop-info nav ul li span.country-gb {background-image: url('../img/link/country-gb-w.svg');}
	#shop-info nav ul li span.country-it {background-image: url('../img/link/country-it-w.svg');}
	#shop-info nav ul li span.country-jp {background-image: url('../img/link/country-jp-w.svg');}
	#shop-info nav ul li span.country-nl {background-image: url('../img/link/country-nl-w.svg');}
	#shop-info nav ul li span.country-pl {background-image: url('../img/link/country-pl-w.svg');}
	#shop-info nav ul li span.country-pt {background-image: url('../img/link/country-pt-w.svg');}
	#shop-info nav ul li span.country-uk {background-image: url('../img/link/country-uk-w.svg');}
	#shop-info nav ul li span.country-us {background-image: url('../img/link/country-us-w.svg');}
}