/* =========================================================
   VONA BAND
   SOUND / PLAYLIST
========================================================= */

:root {
	--vona-black: #070707;
	--vona-black2: #0d0d0d;
	--vona-black3: #141414;

	--vona-white: #f7f4ee;
	--vona-yellow: #f3c548;

	--vona-muted: rgba(255,255,255,.56);
	--vona-line: rgba(255,255,255,.10);

	--sound-inner: 1580px;
}


/* =========================================================
   BASE
========================================================= */

.sound-page {
	width: 100%;

	background: var(--vona-black);

	color: #fff;

	overflow: hidden;
}

.sound-page *,
.sound-page *::before,
.sound-page *::after {
	box-sizing: border-box;
}

.sound-page img {
	display: block;

	width: 100%;
}

.sound-page a {
	color: inherit;

	text-decoration: none;
}

.sound-page button {
	font-family: inherit;
}


/* =========================================================
   COMMON
========================================================= */

.sound-inner {
	width: calc(100% - 96px);
	max-width: var(--sound-inner);

	margin: 0 auto;
}


.sound-section {
	position: relative;

	padding:
		160px
		0;

	background:
		var(--vona-black);
}


.sound-section-head {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 60px;

	margin-bottom: 70px;
}


.sound-section-index {
	flex: 0 0 200px;
}


.sound-section-index > span {
	display: block;

	margin-bottom: 10px;

	color: var(--vona-yellow);

	font-size: 13px;
	font-weight: 900;

	letter-spacing: -.02em;
}


.sound-section-index h2 {
	margin: 0;

	font-size: clamp(40px, 4vw, 68px);
	font-weight: 900;

	line-height: .88;
	letter-spacing: -.065em;
}


.sound-section-copy {
	max-width: 430px;

	padding-top: 8px;
}


.sound-section-copy p {
	margin: 0;

	color: var(--vona-muted);

	font-size: 15px;
	line-height: 1.85;
}


/* =========================================================
   01 SOUND HERO
========================================================= */

.sound-hero {
	position: relative;

	height: 100svh;
	min-height: 820px;

	background: #050505;

	overflow: hidden;
}


/* BACKGROUND */

.sound-hero-bg {
	position: absolute;

	inset: 0;

	z-index: 0;
}


.sound-hero-bg img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.02);
}


/* OVERLAY */

.sound-hero-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.91) 0%,
			rgba(0,0,0,.68) 31%,
			rgba(0,0,0,.26) 61%,
			rgba(0,0,0,.14) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0,0,0,.24) 0%,
			transparent 35%,
			transparent 62%,
			rgba(0,0,0,.70) 100%
		);
}


/* HERO INNER */

.sound-hero-inner {
	position: relative;

	z-index: 3;

	width: calc(100% - 96px);
	max-width: var(--sound-inner);

	height: 100%;

	margin: 0 auto;

	display: flex;
	align-items: center;
}


/* HERO HEAD */

.sound-hero-head {
	position: absolute;

	top: 135px;
	left: 0;
}


.sound-eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #fff;

	font-size: 11px;
	font-weight: 800;

	letter-spacing: .22em;
}


.sound-hero-head h1 {
	margin: 0;

	font-size: clamp(78px, 7.2vw, 132px);
	font-weight: 900;
	font-style: italic;

	line-height: .76;
	letter-spacing: -.075em;
}


.sound-hero-head h1 strong {
	display: block;

	color: var(--vona-yellow);

	font-weight: inherit;
}


/* FEATURED TRACK */

.sound-hero-track {
	position: absolute;

	left: 0;
	bottom: 105px;

	display: flex;
	align-items: flex-end;

	gap: 48px;

	width: 820px;
	max-width: 70%;
}


/* NUMBER */

.sound-hero-track-number {
	flex: 0 0 100px;

	padding-bottom: 4px;
}


.sound-hero-track-number span {
	display: block;

	margin-bottom: 11px;

	color: rgba(255,255,255,.38);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .15em;
}


.sound-hero-track-number strong {
	display: block;

	color: rgba(255,255,255,.16);

	font-size: 82px;
	font-weight: 900;

	line-height: .8;
	letter-spacing: -.07em;
}


/* INFO */

.sound-hero-track-info {
	flex: 1;
}


.sound-hero-label {
	margin: 0 0 13px;

	color: var(--vona-yellow);

	font-size: 11px;
	font-weight: 800;

	letter-spacing: .17em;
}


.sound-hero-track-info h2 {
	margin: 0;

	font-size: clamp(62px, 6vw, 108px);
	font-weight: 900;
	font-style: italic;

	line-height: .78;
	letter-spacing: -.07em;
}


.sound-hero-artist {
	margin: 19px 0 0;

	color: #fff;

	font-size: 11px;
	font-weight: 800;

	letter-spacing: .13em;
}


.sound-hero-desc {
	margin: 24px 0 0;

	color: rgba(255,255,255,.64);

	font-size: 14px;
	line-height: 1.8;
}


/* ACTIONS */

.sound-hero-actions {
	display: flex;
	align-items: center;

	gap: 12px;

	margin-top: 30px;
}


.sound-play-button {
	border: 0;

	cursor: pointer;
}


.sound-play-main {
	height: 54px;

	padding: 0 22px;

	display: inline-flex;
	align-items: center;

	gap: 14px;

	background: var(--vona-yellow);

	color: #080808;

	transition:
		background .25s ease,
		transform .25s ease;
}


.sound-play-main:hover {
	background: #fff;

	transform: translateY(-2px);
}


.sound-play-main strong {
	font-size: 9px;
	font-weight: 900;

	letter-spacing: .14em;
}


.sound-play-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border-radius: 50%;

	background: #080808;

	color: #fff;

	padding-left: 2px;

	font-size: 9px;
}


.sound-detail-link {
	height: 54px;

	padding: 0 20px;

	display: inline-flex;
	align-items: center;

	gap: 24px;

	border:
		1px solid rgba(255,255,255,.32);

	background:
		rgba(0,0,0,.12);

	color: #fff;

	font-size: 9px;
	font-weight: 800;

	letter-spacing: .12em;

	-webkit-backdrop-filter:
		blur(8px);

	backdrop-filter:
		blur(8px);

	transition:
		background .25s ease,
		border-color .25s ease,
		color .25s ease;
}


.sound-detail-link:hover {
	border-color: #fff;

	background: #fff;

	color: #080808;
}


/* SCROLL */

.sound-hero-scroll {
	position: absolute;

	right: 0;
	bottom: 53px;

	display: flex;
	align-items: center;

	gap: 14px;

	color: rgba(255,255,255,.34);

	font-size: 8px;
	font-weight: 700;

	letter-spacing: .16em;
}


.sound-hero-scroll i {
	position: relative;

	display: block;

	width: 60px;
	height: 1px;

	background:
		rgba(255,255,255,.18);

	overflow: hidden;
}


.sound-hero-scroll i::after {
	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: var(--vona-yellow);

	animation:
		soundScroll 2.2s infinite;
}


@keyframes soundScroll {

	0% {
		left: -100%;
	}

	60%,
	100% {
		left: 100%;
	}

}


/* =========================================================
   02 ALL TRACKS
========================================================= */

.all-tracks-section {
	background:
		var(--vona-white);

	color: #080808;
}


.all-tracks-section
.sound-section-index > span {
	color: rgba(0,0,0,.40);
}


.all-tracks-section
.sound-section-index h2 {
	color: #080808;
}


.all-tracks-section
.sound-section-copy p {
	color: rgba(0,0,0,.48);
}


/* TRACK LIST */

.track-list {
	border-top:
		1px solid rgba(0,0,0,.18);
}


.track-row {
	position: relative;

	display: grid;

	grid-template-columns:
		70px
		88px
		minmax(0, 1fr)
		180px
		120px;

	align-items: center;

	gap: 25px;

	min-height: 116px;

	padding:
		14px
		0;

	border-bottom:
		1px solid rgba(0,0,0,.13);

	transition:
		padding .3s ease,
		background .3s ease;
}


.track-row::before {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 0;

	background:
		#0b0b0b;

	transform:
		scaleY(0);

	transform-origin:
		center bottom;

	transition:
		transform .3s cubic-bezier(.2,.75,.2,1);
}


.track-row:hover::before {
	transform:
		scaleY(1);
}


.track-row > * {
	position: relative;

	z-index: 2;
}


/* NUMBER */

.track-number {
	color: rgba(0,0,0,.35);

	font-size: 12px;
	font-weight: 800;

	letter-spacing: .06em;

	transition:
		color .25s ease;
}


.track-row:hover
.track-number {
	color:
		var(--vona-yellow);
}


/* COVER */

.track-cover {
	position: relative;

	width: 88px;
	height: 88px;

	overflow: hidden;

	background: #ddd;
}


.track-cover img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .45s cubic-bezier(.2,.75,.2,1);
}


.track-row:hover
.track-cover img {
	transform:
		scale(1.06);
}


/* MAIN */

.track-main {
	min-width: 0;
}


.track-label {
	display: inline-block;

	margin-bottom: 7px;

	color: var(--vona-yellow);

	font-size: 7px;
	font-weight: 900;

	letter-spacing: .16em;
}


.track-title {
	display: block;

	width: max-content;
	max-width: 100%;

	color: #090909;

	font-size: clamp(25px, 2.3vw, 38px);
	font-weight: 900;

	line-height: 1;

	letter-spacing: -.045em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	transition:
		color .25s ease;
}


.track-main p {
	margin: 8px 0 0;

	color: rgba(0,0,0,.46);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: .08em;

	transition:
		color .25s ease;
}


.track-row:hover
.track-title {
	color: #fff;
}


.track-row:hover
.track-main p {
	color:
		rgba(255,255,255,.48);
}


/* TYPE */

.track-type {
	color: rgba(0,0,0,.37);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .14em;

	transition:
		color .25s ease;
}


.track-row:hover
.track-type {
	color:
		rgba(255,255,255,.48);
}


/* ACTIONS */

.track-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 10px;
}


.track-play-button {
	width: 42px;
	height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(0,0,0,.25);

	border-radius: 50%;

	background:
		transparent;

	color: #080808;

	transition:
		background .25s ease,
		border-color .25s ease,
		color .25s ease,
		transform .25s ease;
}


.track-play-button span {
	padding-left: 2px;

	font-size: 10px;
}


.track-row:hover
.track-play-button {
	border-color:
		rgba(255,255,255,.33);

	color: #fff;
}


.track-play-button:hover,
.track-play-button.is-playing {
	border-color:
		var(--vona-yellow) !important;

	background:
		var(--vona-yellow);

	color:
		#080808 !important;

	transform:
		scale(1.08);
}


.track-arrow {
	width: 42px;
	height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: rgba(0,0,0,.48);

	font-size: 16px;

	transition:
		color .25s ease,
		transform .25s ease;
}


.track-row:hover
.track-arrow {
	color: #fff;
}


.track-arrow:hover {
	color:
		var(--vona-yellow) !important;

	transform:
		translateX(4px);
}


/* =========================================================
   03 MUSIC MOMENTS
========================================================= */

.sound-moments-section {
	padding:
		170px
		0
		180px;

	background:
		#090909;
}


.sound-moments-title {
	margin-left: auto;

	text-align: right;
}


.sound-moments-title h3 {
	margin: 0;

	font-size: clamp(50px, 5vw, 90px);
	font-weight: 900;
	font-style: italic;

	line-height: .82;
	letter-spacing: -.07em;
}


.sound-moments-title h3 strong {
	color: var(--vona-yellow);

	font-weight: inherit;
}


/* GRID */

.sound-moments-grid {
	display: grid;

	grid-template-columns:
		repeat(12, 1fr);

	grid-auto-rows:
		260px;

	gap: 8px;
}


.sound-moment-item {
	position: relative;

	grid-column:
		span 4;

	overflow: hidden;

	background: #111;
}


.sound-moment-large {
	grid-column:
		span 7;

	grid-row:
		span 2;
}


.sound-moment-wide {
	grid-column:
		span 8;
}


.sound-moment-item img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: top;

	transition:
		transform .7s cubic-bezier(.2,.75,.2,1),
		filter .5s ease;
}


.sound-moment-item::after {
	content: "";

	position: absolute;

	inset: 0;

	background:
		rgba(0,0,0,0);

	transition:
		background .35s ease;
}


.sound-moment-item:hover img {
	transform:
		scale(1.04);
}


.sound-moment-item:hover::after {
	background:
		rgba(0,0,0,.12);
}


/* =========================================================
   04 KEEP LISTENING
========================================================= */

.keep-listening-section {
	position: relative;

	min-height: 700px;

	display: flex;
	align-items: center;

	background:
		radial-gradient(
			circle at 75% 40%,
			rgba(243,197,72,.09),
			transparent 35%
		),
		#070707;

	border-top:
		1px solid rgba(255,255,255,.08);
}


.keep-listening-inner {
	width: calc(100% - 96px);
	max-width: var(--sound-inner);

	margin: 0 auto;

	padding:
		120px
		0;
}


.keep-listening-label {
	display: block;

	margin-bottom: 18px;

	color: var(--vona-yellow);

	font-size: 10px;
	font-weight: 800;

	letter-spacing: .20em;
}


.keep-listening-inner h2 {
	margin: 0;

	font-size: clamp(84px, 9vw, 165px);
	font-weight: 900;
	font-style: italic;

	line-height: .76;
	letter-spacing: -.075em;
}


.keep-listening-inner h2 strong {
	color: var(--vona-yellow);

	font-weight: inherit;
}


.keep-listening-inner > p {
	margin: 35px 0 0;

	color: rgba(255,255,255,.48);

	font-size: 14px;
}


/* LINKS */

.keep-listening-links {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 48px;
}


.keep-listening-links a {
	width: 190px;
	height: 56px;

	padding:
		0
		18px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	border:
		1px solid rgba(255,255,255,.16);

	color:
		rgba(255,255,255,.70);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: .12em;

	transition:
		background .25s ease,
		border-color .25s ease,
		color .25s ease;
}


.keep-listening-links a strong {
	font-size: 15px;

	transition:
		transform .25s ease;
}


.keep-listening-links a:hover {
	border-color:
		var(--vona-yellow);

	background:
		var(--vona-yellow);

	color:
		#080808;
}


.keep-listening-links a:hover
strong {
	transform:
		translate(3px,-3px);
}


/* =========================================================
   FIXED MINI PLAYER
========================================================= */

.sound-player {
	position: fixed;

	z-index: 15000;

	left: 50%;
	bottom: 22px;

	width:
		min(
			calc(100% - 48px),
			1080px
		);

	transform:
		translate(-50%, 35px);

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		visibility .3s ease,
		transform .35s cubic-bezier(.2,.75,.2,1);
}


.sound-player.open {
	opacity: 1;
	visibility: visible;

	transform:
		translate(-50%, 0);

	pointer-events: auto;
}


.sound-player-inner {
	height: 80px;

	padding:
		10px
		14px;

	display: flex;
	align-items: center;

	gap: 16px;

	border:
		1px solid rgba(255,255,255,.14);

	background:
		linear-gradient(
			120deg,
			rgba(18,18,18,.93),
			rgba(8,8,8,.94)
		);

	-webkit-backdrop-filter:
		blur(22px)
		saturate(145%);

	backdrop-filter:
		blur(22px)
		saturate(145%);

	box-shadow:
		0 20px 70px rgba(0,0,0,.40),
		inset 0 1px 0 rgba(255,255,255,.06);
}


/* COVER */

.sound-player-cover {
	flex:
		0 0 58px;

	width: 58px;
	height: 58px;

	background: #151515;

	overflow: hidden;
}


.sound-player-cover img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* TOGGLE */

.sound-player-toggle {
	flex:
		0 0 44px;

	width: 44px;
	height: 44px;

	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border:
		1px solid var(--vona-yellow);

	border-radius: 50%;

	background:
		var(--vona-yellow);

	color:
		#080808;

	cursor: pointer;

	transition:
		transform .25s ease;
}


.sound-player-toggle:hover {
	transform:
		scale(1.06);
}


.sound-player-toggle span {
	padding-left: 2px;

	font-size: 10px;
}


/* INFO */

.sound-player-info {
	flex:
		0 0 180px;

	min-width: 0;
}


.sound-player-label {
	display: block;

	color:
		rgba(255,255,255,.32);

	font-size: 6px;
	font-weight: 800;

	letter-spacing: .15em;
}


.sound-player-title {
	display: block;

	margin-top: 4px;

	color: #fff;

	font-size: 11px;
	font-weight: 900;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.sound-player-artist {
	margin: 3px 0 0;

	color:
		rgba(255,255,255,.40);

	font-size: 7px;
	font-weight: 700;

	letter-spacing: .05em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* PROGRESS */

.sound-player-progress {
	flex: 1;

	min-width: 100px;
}


.sound-player-progress-bar {
	position: relative;

	width: 100%;
	height: 3px;

	background:
		rgba(255,255,255,.13);

	cursor: pointer;
}


.sound-player-progress-bar span {
	position: absolute;

	top: 0;
	left: 0;

	width: 0;
	height: 100%;

	background:
		var(--vona-yellow);
}


/* TIME */

.sound-player-time {
	display: flex;
	align-items: center;

	gap: 5px;

	color:
		rgba(255,255,255,.40);

	font-size: 7px;
}


.sound-player-time em {
	font-style: normal;

	color:
		rgba(255,255,255,.18);
}


/* DETAIL */

.sound-player-detail {
	height: 36px;

	padding:
		0
		13px;

	display: flex;
	align-items: center;

	gap: 12px;

	border:
		1px solid rgba(255,255,255,.12);

	color:
		rgba(255,255,255,.56);

	font-size: 7px;
	font-weight: 800;

	letter-spacing: .10em;

	transition:
		border-color .25s ease,
		color .25s ease;
}


.sound-player-detail:hover {
	border-color:
		var(--vona-yellow);

	color:
		var(--vona-yellow);
}


/* CLOSE */

.sound-player-close {
	flex:
		0 0 34px;

	width: 34px;
	height: 34px;

	padding: 0;

	border: 0;

	background:
		transparent;

	color:
		rgba(255,255,255,.42);

	font-size: 21px;

	cursor: pointer;

	transition:
		color .2s ease;
}


.sound-player-close:hover {
	color: #fff;
}


/* =========================================================
   <= 1280
========================================================= */

@media (max-width:1280px) {

	.sound-inner,
	.sound-hero-inner,
	.keep-listening-inner {
		width:
			calc(100% - 64px);
	}


	.sound-section {
		padding:
			135px
			0;
	}


	/* HERO */

	.sound-hero-head {
		top: 120px;
	}


	.sound-hero-track {
		max-width: 78%;
	}


	/* TRACK LIST */

	.track-row {
		grid-template-columns:
			55px
			80px
			minmax(0,1fr)
			140px
			105px;

		gap: 18px;
	}


	.track-cover {
		width: 80px;
		height: 80px;
	}


	/* MOMENTS */

	.sound-moments-grid {
		grid-auto-rows:
			230px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px) {

	/* HERO */

	.sound-hero {
		min-height: 760px;
	}


	.sound-hero-head h1 {
		font-size: 74px;
	}


	.sound-hero-track {
		width: 720px;
		max-width: 86%;
	}


	.sound-hero-track-info h2 {
		font-size: 68px;
	}


	/* TRACKS */

	.track-row {
		grid-template-columns:
			45px
			72px
			1fr
			110px;

		min-height: 102px;
	}


	.track-cover {
		width: 72px;
		height: 72px;
	}


	.track-type {
		display: none;
	}


	/* MOMENTS */

	.sound-moments-grid {
		grid-template-columns:
			repeat(2,1fr);

		grid-auto-rows:
			320px;
	}


	.sound-moment-item,
	.sound-moment-large,
	.sound-moment-wide {
		grid-column: auto;
		grid-row: auto;
	}


	.sound-moment-large {
		grid-row:
			span 2;
	}


	/* PLAYER */

	.sound-player-info {
		flex-basis: 150px;
	}


	.sound-player-detail {
		display: none;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px) {

	/* =====================================================
	   COMMON
	===================================================== */

	.sound-inner,
	.sound-hero-inner,
	.keep-listening-inner {
		width:
			calc(100% - 36px);
	}


	.sound-section {
		padding:
			95px
			0;
	}


	.sound-section-head {
		display: block;

		margin-bottom: 42px;
	}


	.sound-section-index {
		width: 100%;

		margin-bottom: 25px;
	}


	.sound-section-index > span {
		font-size: 9px;
	}


	.sound-section-index h2 {
		font-size: 44px;
	}


	.sound-section-copy {
		max-width: none;

		padding: 0;
	}


	.sound-section-copy p {
		font-size: 13px;
	}


	/* =====================================================
	   HERO
	===================================================== */

	.sound-hero {
		height: auto;

		min-height: 100svh;
	}


	.sound-hero-bg img {
		object-position:
			60% center;
	}


	.sound-hero-overlay {
		background:
			linear-gradient(
				to bottom,
				rgba(0,0,0,.20) 0%,
				rgba(0,0,0,.24) 38%,
				rgba(0,0,0,.74) 67%,
				rgba(0,0,0,.96) 100%
			);
	}


	.sound-hero-inner {
		min-height: 100svh;

		display: flex;

		flex-direction: column;

		justify-content: flex-end;

		padding:
			105px
			0
			58px;
	}


	.sound-hero-head {
		position: absolute;

		top: 95px;
		left: 0;
	}


	.sound-eyebrow {
		margin-bottom: 10px;

		font-size: 8px;
	}


	.sound-hero-head h1 {
		font-size:
			clamp(52px, 15vw, 72px);
	}


	.sound-hero-track {
		position: relative;

		left: auto;
		bottom: auto;

		display: block;

		width: 100%;
		max-width: none;
	}


	.sound-hero-track-number {
		display: none;
	}


	.sound-hero-label {
		font-size: 8px;
	}


	.sound-hero-track-info h2 {
		font-size:
			clamp(52px, 16vw, 76px);
	}


	.sound-hero-artist {
		margin-top: 15px;

		font-size: 9px;
	}


	.sound-hero-desc {
		margin-top: 18px;

		font-size: 12px;
		line-height: 1.65;
	}


	.sound-hero-actions {
		margin-top: 24px;
	}


	.sound-play-main,
	.sound-detail-link {
		height: 48px;
	}


	.sound-play-main {
		padding:
			0
			16px;
	}


	.sound-play-main strong {
		font-size: 8px;
	}


	.sound-detail-link {
		padding:
			0
			15px;

		font-size: 8px;
	}


	.sound-hero-scroll {
		display: none;
	}


	/* =====================================================
	   TRACK LIST
	===================================================== */

	.all-tracks-section {
		padding:
			95px
			0
			110px;
	}


	.track-row {
		grid-template-columns:
			36px
			58px
			minmax(0,1fr)
			80px;

		gap: 10px;

		min-height: 82px;

		padding:
			11px
			0;
	}


	.track-cover {
		width: 58px;
		height: 58px;
	}


	.track-number {
		font-size: 9px;
	}


	.track-label {
		display: none;
	}


	.track-title {
		font-size:
			clamp(17px, 5vw, 22px);
	}


	.track-main p {
		margin-top: 5px;

		font-size: 7px;
	}


	.track-type {
		display: none;
	}


	.track-actions {
		gap: 4px;
	}


	.track-play-button {
		width: 36px;
		height: 36px;
	}


	.track-arrow {
		width: 36px;
		height: 36px;

		font-size: 14px;
	}


	/* 모바일 hover 대체 */

	.track-row:hover::before {
		transform:
			scaleY(0);
	}


	.track-row:hover
	.track-title {
		color: #080808;
	}


	.track-row:hover
	.track-main p {
		color:
			rgba(0,0,0,.46);
	}


	.track-row:hover
	.track-number {
		color:
			rgba(0,0,0,.35);
	}


	.track-row:hover
	.track-play-button {
		border-color:
			rgba(0,0,0,.25);

		color:
			#080808;
	}


	.track-row:hover
	.track-arrow {
		color:
			rgba(0,0,0,.48);
	}


	/* =====================================================
	   MOMENTS
	===================================================== */

	.sound-moments-section {
		padding:
			100px
			0
			110px;
	}


	.sound-moments-title {
		margin-top: 35px;

		text-align: left;
	}


	.sound-moments-title h3 {
		font-size:
			clamp(46px, 14vw, 66px);
	}


	.sound-moments-grid {
		grid-template-columns:
			1fr
			1fr;

		grid-auto-rows:
			210px;

		gap: 5px;
	}


	.sound-moment-large {
		grid-column:
			span 2;

		grid-row:
			span 2;
	}


	.sound-moment-wide {
		grid-column:
			span 2;
	}


	/* =====================================================
	   KEEP LISTENING
	===================================================== */

	.keep-listening-section {
		min-height: 600px;
	}


	.keep-listening-inner {
		padding:
			90px
			0;
	}


	.keep-listening-label {
		font-size: 8px;
	}


	.keep-listening-inner h2 {
		font-size:
			clamp(66px, 20vw, 94px);
	}


	.keep-listening-inner > p {
		margin-top: 24px;

		font-size: 12px;
	}


	.keep-listening-links {
		margin-top: 35px;

		gap: 7px;
	}


	.keep-listening-links a {
		flex:
			1 1 calc(50% - 7px);

		width: auto;

		height: 48px;

		font-size: 8px;
	}


	/* =====================================================
	   PLAYER
	===================================================== */

	.sound-player {
		bottom: 10px;

		width:
			calc(100% - 18px);
	}


	.sound-player-inner {
		height: 68px;

		padding:
			7px
			9px;

		gap: 9px;
	}


	.sound-player-cover {
		flex-basis: 50px;

		width: 50px;
		height: 50px;
	}


	.sound-player-toggle {
		flex-basis: 38px;

		width: 38px;
		height: 38px;
	}


	.sound-player-info {
		flex:
			0 0 100px;
	}


	.sound-player-title {
		font-size: 9px;
	}


	.sound-player-artist {
		font-size: 6px;
	}


	.sound-player-time {
		display: none;
	}


	.sound-player-detail {
		display: none;
	}


	.sound-player-close {
		flex-basis: 28px;

		width: 28px;
	}


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

	.sound-inner,
	.sound-hero-inner,
	.keep-listening-inner {
		width:
			calc(100% - 28px);
	}


	/* HERO */

	.sound-hero-actions {
		flex-direction: column;

		align-items: stretch;
	}


	.sound-play-main,
	.sound-detail-link {
		width: 100%;

		justify-content: center;
	}


	/* TRACK */

	.track-row {
		grid-template-columns:
			28px
			54px
			minmax(0,1fr)
			40px;
	}


	.track-cover {
		width: 54px;
		height: 54px;
	}


	.track-actions {
		display: block;
	}


	.track-arrow {
		display: none;
	}


	/* MOMENTS */

	.sound-moments-grid {
		grid-template-columns:
			1fr;

		grid-auto-rows:
			auto;
	}


	.sound-moment-item,
	.sound-moment-large,
	.sound-moment-wide {
		grid-column: auto;
		grid-row: auto;

		aspect-ratio:
			1 / 1;
	}


	.sound-moment-large {
		aspect-ratio:
			4 / 5;
	}


	.sound-moment-wide {
		aspect-ratio:
			16 / 10;
	}


	/* KEEP */

	.keep-listening-links {
		display: block;
	}


	.keep-listening-links a {
		width: 100%;

		margin-top: 7px;
	}


	/* PLAYER */

	.sound-player-cover {
		display: none;
	}


	.sound-player-info {
		flex:
			0 0 95px;
	}

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width:360px) {

	.track-row {
		grid-template-columns:
			24px
			50px
			minmax(0,1fr)
			36px;

		gap: 7px;
	}


	.track-cover {
		width: 50px;
		height: 50px;
	}


	.track-title {
		font-size: 16px;
	}


	.sound-player-info {
		display: none;
	}

}


/* =========================================================
   SHORT PC
========================================================= */

@media (min-width:769px) and (max-height:820px) {

	.sound-hero {
		min-height: 700px;
	}


	.sound-hero-head {
		top: 95px;
	}


	.sound-hero-head h1 {
		font-size: 76px;
	}


	.sound-hero-track {
		bottom: 70px;
	}


	.sound-hero-track-info h2 {
		font-size: 70px;
	}


	.sound-hero-desc {
		margin-top: 18px;
	}


	.sound-hero-actions {
		margin-top: 22px;
	}

}