.member-grid,
.album-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.member-card {
	min-height: 0;
	padding: 0;
	gap: 0;
	overflow: hidden;
	background: #120f16;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.member-card__frame {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #0b0a10;
}

.member-card__frame picture,
.member-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member-card__role {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 8px;
	background: var(--yellow);
	color: #111;
	font-size: 10px;
	letter-spacing: 0.14em;
}

.member-card__name {
	position: absolute;
	left: 3%;
	right: 3%;
	top: 79%;
	height: 17%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 4px;
	border: 2px solid #9a9286;
	border-radius: 6px;
	background: linear-gradient(180deg, #f4f1ea 0%, #c9c3b8 38%, #8f897f 52%, #d9d4cb 70%, #a8a296 100%);
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.55),
		inset 0 0 0 4px rgba(60, 54, 46, 0.35),
		0 6px 14px rgba(0, 0, 0, 0.55);
	font-family: var(--font-display);
	font-size: clamp(0.78rem, 3.2vw, 1.05rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: #231910;
	text-shadow:
		0 1px 0 rgba(255, 244, 220, 0.42),
		0 -1px 0 rgba(20, 12, 8, 0.55);
}

.member-card em {
	display: block;
	padding: 10px 12px 14px;
	font-size: 0.92rem;
}

.member-card:hover {
	transform: translateY(-8px);
	border-color: var(--magenta);
	box-shadow: 0 14px 36px rgba(255, 43, 214, 0.32);
	color: inherit;
}

.album-tile {
	min-height: 0;
	padding: 0;
	gap: 0;
	overflow: hidden;
	background: #100d14;
	justify-content: flex-start;
}

.album-tile__art {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #0b0a10;
}

.album-tile__art::before {
	content: "";
	position: absolute;
	top: 8%;
	left: 18%;
	z-index: 0;
	width: 84%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #c8c2b6 0 7%, #1a1a1a 8% 10%, #111 11% 38%, #2a2a2a 39% 41%, #0a0a0a 42% 68%, #333 69% 71%, #111 72% 100%);
	box-shadow: 0 0 0 3px #0a0a0a;
	transition: transform 0.4s ease;
}

.album-tile__art picture,
.album-tile__cover {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.album-tile__title {
	display: block;
	padding: 10px 12px 12px;
	font-family: var(--font-display);
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.album-tile:hover {
	border-color: var(--magenta);
	color: inherit;
}

.album-tile:hover .album-tile__art::before {
	transform: translateX(26%);
}

.poster-wall {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding: 8px 6px 12px;
	align-items: start;
}

.poster-card {
	position: relative;
	display: block;
	padding: 10px 10px 16px;
	background: #ece4d4;
	color: #1a1410;
	text-decoration: none;
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.poster-card:nth-child(1) {
	transform: rotate(-3.2deg);
}

.poster-card:nth-child(2) {
	transform: rotate(2.1deg);
}

.poster-card:nth-child(3) {
	transform: rotate(-1.8deg);
}

.poster-card picture,
.poster-card img {
	display: block;
	width: 100%;
	height: auto;
}

.poster-card__label {
	display: block;
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: #1a1410;
}

.poster-card__tape {
	position: absolute;
	z-index: 2;
	width: 54px;
	height: 18px;
	background: linear-gradient(180deg, rgba(255, 244, 196, 0.72), rgba(232, 196, 92, 0.55));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.poster-card__tape--tl {
	top: 6px;
	left: 8px;
	transform: rotate(-18deg);
}

.poster-card__tape--tr {
	top: 8px;
	right: 10px;
	transform: rotate(16deg);
}

.poster-card:hover,
.poster-card:focus-visible {
	transform: rotate(0deg) translateY(-4px);
	box-shadow: 0 20px 36px rgba(255, 43, 214, 0.28);
	color: #1a1410;
	z-index: 2;
}

html.has-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

html.has-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (min-width: 700px) {
	.poster-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px 28px;
		padding: 18px 20px 8px;
	}
}

@media (min-width: 900px) {
	.member-grid,
	.album-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}

	.member-card__name {
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.member-card,
	.album-tile__art::before,
	.poster-card,
	html.has-reveal [data-reveal] {
		transition: none;
	}

	.member-card:hover {
		transform: none;
	}

	.album-tile:hover .album-tile__art::before {
		transform: none;
	}

	.poster-card:nth-child(1),
	.poster-card:nth-child(2),
	.poster-card:nth-child(3),
	.poster-card:hover,
	.poster-card:focus-visible {
		transform: none;
	}

	html.has-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

.road-split h2 {
	margin: 0 0 12px;
	font-size: clamp(2rem, 5vw, 3.6rem);
	text-transform: uppercase;
}