/* =========================================================
   VONA BAND
   MEMBER DETAIL
   /member/{slug}
========================================================= */

:root {
	--vona-black: #080808;
	--vona-black2: #101010;
	--vona-black3: #171717;

	--vona-white: #f7f4ee;
	--vona-gray: rgba(255,255,255,.58);
	--vona-line: rgba(255,255,255,.11);

	--vona-yellow: #f3c548;

	--detail-inner: 1540px;
}


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

.member-detail {
	width: 100%;

	background: var(--vona-black);

	color: #fff;

	overflow: hidden;
}

.member-detail *,
.member-detail *::before,
.member-detail *::after {
	box-sizing: border-box;
}

.member-detail img {
	display: block;

	width: 100%;
}

.member-detail a {
	color: inherit;

	text-decoration: none;
}

.member-detail button {
	font-family: inherit;
}


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

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

	margin: 0 auto;
}


/* =========================================================
   SECTION INDEX
========================================================= */

.section-index {
	flex: 0 0 180px;
}

.section-index span {
	display: block;

	margin-bottom: 8px;

	color: var(--vona-yellow);

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

	letter-spacing: -.03em;
}

.section-index h2 {
	margin: 0;

	color: #fff;

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

	line-height: .92;
	letter-spacing: -.055em;
}

.section-index-light span {
	color: var(--vona-yellow);
}

.section-index-light h2 {
	color: #fff;
}


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

.member-detail-hero {
	position: relative;

	width: 100%;
	height: 100svh;

	min-height: 820px;

	background: #050505;

	overflow: hidden;
}


/* BACKGROUND */

.member-detail-hero-bg {
	position: absolute;

	inset: 0;

	z-index: 0;
}

.member-detail-hero-bg::after {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.88) 0%,
			rgba(0,0,0,.58) 25%,
			rgba(0,0,0,.17) 54%,
			rgba(0,0,0,.08) 100%
		),
		linear-gradient(
			to top,
			rgba(0,0,0,.48),
			transparent 45%
		);

	pointer-events: none;
}

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

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


/* HERO INNER */

.member-detail-hero-inner {
	position: relative;

	z-index: 3;

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

	height: 100%;

	margin: 0 auto;

	display: flex;
	align-items: center;
}


/* COPY */

.member-detail-hero-copy {
	width: min(610px, 44vw);

	padding-top: 40px;
}

.section-eyebrow {
	display: block;

	margin-bottom: 20px;

	color: #fff;

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

	letter-spacing: .22em;
}

.member-detail-hero-copy h1 {
	margin: 0;

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

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

.member-detail-hero-copy h1 span,
.member-detail-hero-copy h1 strong {
	display: block;
}

.member-detail-hero-copy h1 strong {
	color: var(--vona-yellow);

	font-weight: inherit;
}

.member-role {
	margin-top: 25px;

	color: #fff;

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

	letter-spacing: .18em;
}


/* MESSAGE */

.member-hero-message {
	margin-top: 58px;
}

.member-hero-message > strong {
	display: block;

	font-size: clamp(25px, 2.1vw, 36px);
	font-weight: 800;

	line-height: 1.25;
	letter-spacing: -.035em;
}

.member-hero-message p {
	margin: 17px 0 0;

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

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


/* NUMBER */

.member-detail-hero-number {
	position: absolute;

	left: 0;
	bottom: 62px;

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

	gap: 6px;
}

.member-detail-hero-number strong {
	color: var(--vona-yellow);

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

	line-height: 1;
}

.member-detail-hero-number span {
	padding-bottom: 2px;

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

	font-size: 10px;
	font-weight: 700;
}


/* =========================================================
   COMMON DETAIL SECTION
========================================================= */

.member-detail-section {
	position: relative;

	padding: 150px 0;

	border-top:
		1px solid var(--vona-line);

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


/* =========================================================
   02 PROFILE
========================================================= */

.profile-section {
	padding:
		150px
		0
		165px;
}

.profile-section .member-detail-inner {
	display: flex;

	align-items: flex-start;

	gap: 60px;
}

.profile-layout {
	flex: 1;

	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(380px, .95fr);

	gap: 70px;

	align-items: center;
}


/* PROFILE VISUAL */

.profile-visual {
	position: relative;

	min-height: 660px;

	overflow: hidden;

	background: #111;
}

.profile-visual::after {
	content: "";

	position: absolute;

	inset: auto 0 0;

	height: 35%;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,.42),
			transparent
		);

	pointer-events: none;
}

.profile-visual img {
	width: 100%;
	height: 100%;

	min-height: 660px;

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


/* PROFILE CONTENT */

.profile-content {
	padding-right: 20px;
}

.profile-message {
	margin-bottom: 50px;
}

.profile-message h3 {
	margin: 0;

	font-size: clamp(32px, 3vw, 51px);
	font-weight: 800;

	line-height: 1.2;
	letter-spacing: -.045em;
}

.profile-message p {
	max-width: 560px;

	margin: 26px 0 0;

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

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


/* PROFILE SPEC */

.profile-spec {
	margin: 0;

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

.profile-spec > div {
	display: grid;

	grid-template-columns:
		130px 1fr;

	align-items: center;

	min-height: 52px;

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

.profile-spec dt {
	color: rgba(255,255,255,.43);

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

	letter-spacing: .12em;
}

.profile-spec dd {
	margin: 0;

	color: #fff;

	font-size: 13px;
	font-weight: 600;
}


/* =========================================================
   03 ABOUT
========================================================= */

.about-section {
	padding: 0;

	background: #0c0c0c;
}

.about-layout {
	position: relative;

	min-height: 760px;

	display: grid;

	grid-template-columns:
		180px
		minmax(0, 1.15fr)
		minmax(420px, .85fr);

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

	margin: 0 auto;
}


/* INDEX */

.about-layout > .section-index {
	padding-top: 110px;
}


/* VISUAL */

.about-visual {
	position: relative;

	min-height: 760px;

	overflow: hidden;
}

.about-visual::after {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			transparent 60%,
			rgba(12,12,12,.50) 100%
		);

	pointer-events: none;
}

.about-visual img {
	width: 100%;
	height: 100%;

	min-height: 760px;

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


/* CONTENT */

.about-content {
	padding:
		110px
		30px
		100px
		65px;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.about-content h3 {
	margin: 0;

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

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

.about-content h3 strong {
	color: var(--vona-yellow);

	font-weight: inherit;
}

.about-desc {
	max-width: 510px;

	margin-top: 45px;

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

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


/* =========================================================
   04 SIGNATURE GEAR
========================================================= */

.gear-section {
	padding:
		145px
		0
		160px;

	background:
		#090909;
}

.gear-section .member-detail-inner {
	display: flex;

	align-items: flex-start;

	gap: 60px;
}

.gear-grid {
	flex: 1;

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 14px;
}

.gear-card {
	position: relative;

	min-width: 0;

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

	background:
		linear-gradient(
			180deg,
			#151515,
			#0c0c0c
		);

	overflow: hidden;

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

.gear-card:hover {
	transform: translateY(-6px);

	border-color:
		rgba(243,197,72,.65);
}


/* GEAR IMAGE */

.gear-image {
	aspect-ratio: 1 / 1;

	padding: 20px;

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

	background:
		radial-gradient(
			circle,
			rgba(243,197,72,.11),
			transparent 65%
		);
}

.gear-image img {
	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* GEAR INFO */

.gear-info {
	padding:
		22px
		22px
		28px;

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

.gear-info strong {
	display: block;

	color: #fff;

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

.gear-info > span {
	display: block;

	margin-top: 5px;

	color: var(--vona-yellow);

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

	letter-spacing: .10em;
}

.gear-info p {
	margin: 15px 0 0;

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

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


/* =========================================================
   05 MUSIC
========================================================= */

.member-music-section {
	padding:
		145px
		0
		155px;

	background: #0b0b0b;
}

.member-music-section .member-detail-inner {
	position: relative;

	display: flex;

	align-items: flex-start;

	gap: 60px;
}

.member-track-grid {
	flex: 1;

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 20px;
}


/* TRACK */

.member-track-card {
	min-width: 0;
}

.member-track-cover {
	position: relative;

	display: block;

	aspect-ratio: 1 / 1;

	background: #151515;

	overflow: hidden;
}

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

	object-fit: cover;

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

.member-track-cover-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,.40),
			transparent 50%
		);

	opacity: .6;

	transition:
		opacity .3s ease;
}

.member-track-cover:hover img {
	transform: scale(1.045);
}

.member-track-cover:hover
.member-track-cover-overlay {
	opacity: .25;
}


/* INFO */

.member-track-info {
	display: flex;

	align-items: center;

	gap: 12px;

	padding-top: 15px;
}

.member-track-meta {
	flex: 1;

	min-width: 0;
}

.member-track-title {
	display: block;

	color: #fff;

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

	line-height: 1.3;

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

.member-track-title:hover {
	color: var(--vona-yellow);
}


/* PLAY */

.track-play-button {
	flex: 0 0 38px;

	width: 38px;
	height: 38px;

	padding: 0;

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

	border:
		1px solid rgba(243,197,72,.72);

	border-radius: 50%;

	background:
		transparent;

	color: #fff;

	cursor: pointer;

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

.track-play-button:hover,
.track-play-button.is-playing {
	background:
		var(--vona-yellow);

	color:
		#080808;
}

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

	font-size: 10px;
}


/* ALL MUSIC */

.member-music-more {
	position: absolute;

	right: 0;
	bottom: -65px;
}

.view-all-music {
	display: flex;

	align-items: center;

	gap: 25px;

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

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

	letter-spacing: .12em;
}

.view-all-music strong {
	color: var(--vona-yellow);

	font-size: 16px;
}

.view-all-music:hover {
	color: #fff;
}


/* =========================================================
   06 ON STAGE
========================================================= */

.stage-section {
	position: relative;

	height: 720px;

	padding: 0;

	background: #050505;

	overflow: hidden;
}

.stage-visual {
	position: absolute;

	inset: 0;
}

.stage-visual::after {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.78) 0%,
			rgba(0,0,0,.18) 43%,
			rgba(0,0,0,.10) 65%,
			rgba(0,0,0,.68) 100%
		),
		linear-gradient(
			to top,
			rgba(0,0,0,.48),
			transparent 55%
		);
}

.stage-visual img {
	width: 100%;
	height: 100%;

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

.stage-inner {
	position: relative;

	z-index: 3;

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

	height: 100%;

	margin: 0 auto;

	display: flex;

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

	padding-top: 95px;
}


/* STAGE MESSAGE */

.stage-message {
	align-self: flex-end;

	width: 430px;

	margin-bottom: 90px;
}

.stage-message h3 {
	margin: 0;

	font-size: clamp(45px, 4vw, 70px);
	font-weight: 800;
	font-style: italic;

	line-height: .94;
	letter-spacing: -.06em;
}

.stage-message h3 strong {
	color: var(--vona-yellow);

	font-weight: inherit;
}

.stage-desc {
	margin-top: 28px;

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

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


/* =========================================================
   07 LIVE GALLERY
========================================================= */

.member-gallery-section {
	padding:
		140px
		0
		160px;

	background: #080808;
}

.member-gallery-section .member-detail-inner {
	display: flex;

	align-items: flex-start;

	gap: 60px;
}

.member-gallery-grid {
	flex: 1;

	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap: 8px;
}

.member-gallery-item {
	position: relative;

	aspect-ratio: 4 / 5;

	padding: 0;

	border: 0;

	background: #111;

	cursor: pointer;

	overflow: hidden;
}

.member-gallery-item img {
	width: 100%;
	height: 100%;

	object-fit: cover;

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

.gallery-hover {
	position: absolute;

	inset: 0;

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

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

	opacity: 0;

	transition:
		opacity .3s ease;
}

.gallery-hover em {
	color: #fff;

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

	letter-spacing: .18em;
}

.member-gallery-item:hover img {
	transform: scale(1.055);

	filter: brightness(.8);
}

.member-gallery-item:hover
.gallery-hover {
	opacity: 1;
}


/* =========================================================
   08 NEXT MEMBER
========================================================= */

.member-next-section {
	position: relative;

	height: 440px;

	background: #080808;

	overflow: hidden;
}

.member-next-link {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;
}

.member-next-bg {
	position: absolute;

	inset: 0;

	overflow: hidden;
}

.member-next-bg img {
	width: 100%;
	height: 100%;

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

	transform: scale(1.01);

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

.member-next-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.82) 0%,
			rgba(0,0,0,.42) 45%,
			rgba(0,0,0,.15) 100%
		);
}

.member-next-link:hover
.member-next-bg img {
	transform: scale(1.04);
}


/* INNER */

.member-next-inner {
	position: relative;

	z-index: 3;

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

	height: 100%;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		180px
		1fr
		auto;

	align-items: center;

	gap: 60px;
}

.member-next-title small {
	display: block;

	margin-bottom: 12px;

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

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

	letter-spacing: .16em;
}

.member-next-title > strong {
	display: block;

	color: #fff;

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

	line-height: .9;
	letter-spacing: -.06em;
}

.member-next-title > strong span {
	margin-right: 17px;

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

.member-next-button {
	min-width: 170px;
	height: 52px;

	padding: 0 20px;

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

	border:
		1px solid rgba(243,197,72,.75);

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

	letter-spacing: .10em;

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

.member-next-button strong {
	font-size: 16px;
}

.member-next-link:hover
.member-next-button {
	background:
		var(--vona-yellow);

	color: #080808;
}


/* =========================================================
   GALLERY LAYER
========================================================= */

.gallery-layer {
	position: fixed;

	inset: 0;

	z-index: 20000;

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

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		visibility .3s ease;
}

.gallery-layer.open {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;
}

.gallery-layer-dim {
	position: absolute;

	inset: 0;

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

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

	backdrop-filter:
		blur(10px);
}

.gallery-layer-content {
	position: relative;

	z-index: 2;

	width: calc(100% - 100px);
	height: calc(100% - 100px);

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

.gallery-layer-image-wrap {
	max-width: 100%;
	max-height: 100%;

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

.gallery-layer-image {
	width: auto;
	max-width: 100%;

	height: auto;
	max-height: calc(100vh - 100px);

	object-fit: contain;
}


/* CLOSE */

.gallery-layer-close {
	position: fixed;

	top: 30px;
	right: 35px;

	z-index: 10;

	width: 50px;
	height: 50px;

	padding: 0;

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

	border-radius: 50%;

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

	cursor: pointer;
}

.gallery-layer-close span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 21px;
	height: 1px;

	background: #fff;
}

.gallery-layer-close span:first-child {
	transform:
		translate(-50%,-50%)
		rotate(45deg);
}

.gallery-layer-close span:last-child {
	transform:
		translate(-50%,-50%)
		rotate(-45deg);
}


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

.member-player {
	position: fixed;

	z-index: 15000;

	left: 50%;
	bottom: 24px;

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

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

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		visibility .3s ease,
		transform .35s ease;
}

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

	transform:
		translate(-50%,0);

	pointer-events: auto;
}

.member-player-inner {
	height: 76px;

	padding:
		0
		20px;

	display: flex;
	align-items: center;

	gap: 18px;

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

	background:
		rgba(10,10,10,.90);

	-webkit-backdrop-filter:
		blur(20px)
		saturate(130%);

	backdrop-filter:
		blur(20px)
		saturate(130%);

	box-shadow:
		0 15px 60px rgba(0,0,0,.4);
}


/* PLAYER TOGGLE */

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

	width: 44px;
	height: 44px;

	padding: 0;

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

	border-radius: 50%;

	background:
		var(--vona-yellow);

	color: #080808;

	cursor: pointer;
}

.member-player-toggle span {
	font-size: 11px;
}


/* INFO */

.member-player-info {
	flex: 0 0 150px;

	min-width: 0;
}

.member-player-info > span {
	display: block;

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

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

	letter-spacing: .15em;
}

.member-player-title {
	display: block;

	margin-top: 4px;

	color: #fff;

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

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


/* PROGRESS */

.member-player-progress {
	flex: 1;
}

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

	width: 100%;
	height: 3px;

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

	cursor: pointer;
}

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

	top: 0;
	left: 0;

	width: 0;
	height: 100%;

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


/* TIME */

.member-player-time {
	display: flex;

	gap: 5px;

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

	font-size: 8px;
}

.member-player-time em {
	font-style: normal;
}


/* CLOSE */

.member-player-close {
	flex: 0 0 35px;

	width: 35px;
	height: 35px;

	padding: 0;

	border: 0;

	background:
		transparent;

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

	font-size: 22px;

	cursor: pointer;
}


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

@media (max-width:1280px) {

	.member-detail-inner,
	.member-detail-hero-inner,
	.about-layout,
	.stage-inner,
	.member-next-inner {
		width:
			calc(100% - 64px);
	}


	.section-index {
		flex-basis: 145px;
	}


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


	/* PROFILE */

	.profile-section
	.member-detail-inner {
		gap: 40px;
	}

	.profile-layout {
		grid-template-columns:
			minmax(0,1fr)
			minmax(340px,.9fr);

		gap: 45px;
	}


	/* ABOUT */

	.about-layout {
		grid-template-columns:
			145px
			minmax(0,1.1fr)
			minmax(350px,.9fr);
	}

	.about-content {
		padding-left: 45px;
	}


	/* GEAR */

	.gear-section
	.member-detail-inner,
	.member-music-section
	.member-detail-inner,
	.member-gallery-section
	.member-detail-inner {
		gap: 40px;
	}


	/* NEXT */

	.member-next-inner {
		grid-template-columns:
			145px
			1fr
			auto;

		gap: 40px;
	}

}


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

@media (max-width:1024px) {

	.member-detail-section {
		padding:
			115px
			0;
	}


	/* HERO */

	.member-detail-hero {
		min-height: 720px;
	}

	.member-detail-hero-copy {
		width: 50%;
	}

	.member-detail-hero-copy h1 {
		font-size: 80px;
	}


	/* INDEX */

	.section-index {
		flex-basis: 120px;
	}

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


	/* PROFILE */

	.profile-layout {
		grid-template-columns:
			1fr
			360px;

		gap: 35px;
	}

	.profile-visual,
	.profile-visual img {
		min-height: 560px;
	}


	/* ABOUT */

	.about-layout {
		grid-template-columns:
			120px
			1fr
			340px;

		min-height: 650px;
	}

	.about-visual,
	.about-visual img {
		min-height: 650px;
	}

	.about-content {
		padding:
			80px
			20px
			70px
			35px;
	}


	/* GEAR */

	.gear-grid,
	.member-track-grid {
		grid-template-columns:
			repeat(2,1fr);
	}


	/* STAGE */

	.stage-section {
		height: 620px;
	}


	/* GALLERY */

	.member-gallery-grid {
		grid-template-columns:
			repeat(3,1fr);
	}


	/* NEXT */

	.member-next-section {
		height: 370px;
	}

	.member-next-inner {
		grid-template-columns:
			120px
			1fr
			auto;
	}

}


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

@media (max-width:768px) {

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

	.member-detail-inner,
	.member-detail-hero-inner,
	.about-layout,
	.stage-inner,
	.member-next-inner {
		width:
			calc(100% - 36px);
	}


	/* =====================================================
	   SECTION INDEX
	===================================================== */

	.section-index {
		flex: none;

		width: 100%;

		margin-bottom: 28px;
	}

	.section-index span {
		margin-bottom: 5px;

		font-size: 10px;
	}

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


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

	.member-detail-hero {
		height: auto;

		min-height: 100svh;
	}


	.member-detail-hero-bg::after {
		background:
			linear-gradient(
				to bottom,
				rgba(0,0,0,.12) 0%,
				rgba(0,0,0,.16) 38%,
				rgba(0,0,0,.83) 78%,
				rgba(0,0,0,.98) 100%
			);
	}


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


	.member-detail-hero-inner {
		min-height: 100svh;

		display: flex;

		align-items: flex-end;

		padding:
			130px
			0
			55px;
	}


	.member-detail-hero-copy {
		width: 100%;

		padding: 0;
	}


	.section-eyebrow {
		margin-bottom: 13px;

		font-size: 8px;
	}


	.member-detail-hero-copy h1 {
		font-size:
			clamp(62px, 20vw, 90px);

		line-height: .79;
	}


	.member-role {
		margin-top: 19px;

		font-size: 9px;
	}


	.member-hero-message {
		margin-top: 35px;
	}


	.member-hero-message > strong {
		font-size: 23px;
	}


	.member-hero-message p {
		margin-top: 13px;

		font-size: 12px;
	}


	.member-detail-hero-number {
		position: static;

		margin-top: 35px;
	}


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

	.member-detail-section {
		padding:
			90px
			0;
	}


	/* =====================================================
	   PROFILE
	===================================================== */

	.profile-section
	.member-detail-inner {
		display: block;
	}


	.profile-layout {
		display: block;
	}


	.profile-visual,
	.profile-visual img {
		min-height: 0;
	}


	.profile-visual {
		aspect-ratio:
			4 / 5;
	}


	.profile-visual img {
		height: 100%;
	}


	.profile-content {
		padding: 0;

		margin-top: 38px;
	}


	.profile-message {
		margin-bottom: 36px;
	}


	.profile-message h3 {
		font-size: 31px;
	}


	.profile-message p {
		margin-top: 18px;

		font-size: 12px;
	}


	.profile-spec > div {
		grid-template-columns:
			105px 1fr;

		min-height: 47px;
	}


	.profile-spec dt {
		font-size: 8px;
	}


	.profile-spec dd {
		font-size: 12px;
	}


	/* =====================================================
	   ABOUT
	===================================================== */

	.about-section {
		padding: 0;
	}


	.about-layout {
		display: flex;
		flex-direction: column;

		min-height: auto;
	}


	.about-layout >
	.section-index {
		order: 1;

		padding:
			85px
			0
			0;
	}


	.about-visual {
		order: 2;

		width: 100%;

		min-height: 0;

		aspect-ratio:
			4 / 5;
	}


	.about-visual img {
		min-height: 0;

		height: 100%;
	}


	.about-visual::after {
		background:
			linear-gradient(
				to top,
				rgba(12,12,12,.56),
				transparent 40%
			);
	}


	.about-content {
		order: 3;

		padding:
			45px
			0
			90px;
	}


	.about-content h3 {
		font-size:
			clamp(46px, 14vw, 66px);
	}


	.about-desc {
		margin-top: 30px;

		font-size: 12px;
	}


	/* =====================================================
	   GEAR
	===================================================== */

	.gear-section
	.member-detail-inner {
		display: block;
	}


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

		gap: 10px;
	}


	.gear-image {
		padding: 10px;
	}


	.gear-info {
		padding:
			16px
			13px
			20px;
	}


	.gear-info strong {
		font-size: 11px;
	}


	.gear-info > span {
		font-size: 7px;
	}


	.gear-info p {
		font-size: 10px;
	}


	/* =====================================================
	   MUSIC
	===================================================== */

	.member-music-section
	.member-detail-inner {
		display: block;
	}


	.member-track-grid {
		grid-template-columns:
			repeat(2,1fr);

		gap:
			27px
			12px;
	}


	.member-track-title {
		font-size: 10px;
	}


	.track-play-button {
		flex-basis: 34px;

		width: 34px;
		height: 34px;
	}


	.member-music-more {
		position: static;

		margin-top: 42px;

		display: flex;
		justify-content: flex-end;
	}


	/* =====================================================
	   ON STAGE
	===================================================== */

	.stage-section {
		height: 650px;
	}


	.stage-visual::after {
		background:
			linear-gradient(
				to bottom,
				rgba(0,0,0,.08) 0%,
				rgba(0,0,0,.08) 40%,
				rgba(0,0,0,.72) 76%,
				rgba(0,0,0,.94) 100%
			);
	}


	.stage-visual img {
		object-position:
			center;
	}


	.stage-inner {
		display: flex;
		flex-direction: column;

		justify-content: space-between;

		padding:
			70px
			0
			50px;
	}


	.stage-inner >
	.section-index {
		margin: 0;
	}


	.stage-message {
		width: 100%;

		margin: 0;
	}


	.stage-message h3 {
		font-size:
			clamp(42px, 13vw, 59px);
	}


	.stage-desc {
		margin-top: 20px;

		font-size: 12px;
	}


	/* =====================================================
	   GALLERY
	===================================================== */

	.member-gallery-section
	.member-detail-inner {
		display: block;
	}


	.member-gallery-grid {
		grid-template-columns:
			repeat(2,1fr);

		gap: 6px;
	}


	.member-gallery-item {
		aspect-ratio:
			1 / 1.15;
	}


	/* =====================================================
	   NEXT MEMBER
	===================================================== */

	.member-next-section {
		height: 470px;
	}


	.member-next-overlay {
		background:
			linear-gradient(
				to top,
				rgba(0,0,0,.92),
				rgba(0,0,0,.28) 65%,
				rgba(0,0,0,.14)
			);
	}


	.member-next-inner {
		display: flex;
		flex-direction: column;

		align-items: flex-start;
		justify-content: flex-end;

		gap: 0;

		padding-bottom: 42px;
	}


	.member-next-inner >
	.section-index {
		position: absolute;

		top: 40px;
		left: 0;
	}


	.member-next-title {
		width: 100%;
	}


	.member-next-title > strong {
		font-size:
			clamp(39px, 12vw, 54px);
	}


	.member-next-button {
		width: 170px;

		margin-top: 25px;
	}


	/* =====================================================
	   GALLERY LAYER
	===================================================== */

	.gallery-layer-content {
		width:
			calc(100% - 28px);

		height:
			calc(100% - 100px);
	}


	.gallery-layer-close {
		top: 18px;
		right: 18px;

		width: 44px;
		height: 44px;
	}


	.gallery-layer-image {
		max-height:
			calc(100vh - 90px);
	}


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

	.member-player {
		bottom: 12px;

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


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

		padding:
			0
			12px;

		gap: 11px;
	}


	.member-player-toggle {
		flex-basis: 40px;

		width: 40px;
		height: 40px;
	}


	.member-player-info {
		flex-basis: 105px;
	}


	.member-player-info > span {
		font-size: 6px;
	}


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


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

}


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

@media (max-width:480px) {

	.member-detail-inner,
	.member-detail-hero-inner,
	.about-layout,
	.stage-inner,
	.member-next-inner {
		width:
			calc(100% - 28px);
	}


	/* HERO */

	.member-detail-hero-inner {
		padding-bottom: 42px;
	}

	.member-detail-hero-copy h1 {
		font-size:
			clamp(58px, 19vw, 78px);
	}


	/* SECTION */

	.member-detail-section {
		padding:
			76px
			0;
	}


	/* PROFILE */

	.profile-message h3 {
		font-size: 27px;
	}


	/* GEAR */

	.gear-grid {
		grid-template-columns: 1fr;
	}


	.gear-card {
		display: grid;

		grid-template-columns:
			42%
			58%;
	}


	.gear-image {
		aspect-ratio: auto;

		min-height: 180px;
	}


	.gear-info {
		display: flex;
		flex-direction: column;
		justify-content: center;

		border-top: 0;

		border-left:
			1px solid rgba(255,255,255,.07);
	}


	/* MUSIC */

	.member-track-grid {
		grid-template-columns: 1fr 1fr;
	}


	/* STAGE */

	.stage-section {
		height: 590px;
	}


	/* NEXT */

	.member-next-section {
		height: 420px;
	}

}


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

@media (max-width:360px) {

	.member-track-grid {
		grid-template-columns: 1fr;
	}

	.member-track-cover {
		aspect-ratio:
			16 / 11;
	}

}


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

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

	.member-detail-hero {
		min-height: 700px;
	}

	.member-detail-hero-copy h1 {
		font-size:
			clamp(72px, 7vw, 110px);
	}

	.member-hero-message {
		margin-top: 38px;
	}

	.member-detail-hero-number {
		bottom: 38px;
	}

}