/* ═══════════════════════════════════════════════════════════
   SENZA PAROLE — het album als pagina. Afspelen loopt via de
   speler in player.js; deze pagina levert alleen de knoppen.
   ═══════════════════════════════════════════════════════════ */

.sp-album{
	display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(32px, 6vw, 120px);
	padding: 0 var(--gutter) clamp(96px, 14vh, 160px);
	align-items: start;
}
.sp-album__head{ position: sticky; top: calc(var(--nav-h) + 32px); }
.sp-album__meta{ margin-top: 1.4rem !important; color: var(--muted); font-size: var(--fs-s); max-width: 30ch; }

.sp-tracks{ list-style: none; margin: 0; padding: 0; }
.sp-track{ margin-bottom: .4rem; }

.sp-track__row{
	display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 1rem;
	width: 100%; padding: .9rem 1rem; margin: 0 -1rem;
	background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer;
	transition: background .2s ease;
}
.sp-track__row:hover{ background: var(--wall-2); }
.sp-track__n, .sp-track__time{ font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-track__title{
	font-family: var(--serif); font-weight: 300; font-size: var(--fs-l); line-height: 1.2; letter-spacing: -.01em;
}
.sp-track__eq{ display: none; align-self: center; }
.sp-track.is-playing .sp-track__n{ display: none; }
.sp-track.is-playing .sp-track__eq{ display: inline-flex; }
.sp-track.is-current .sp-track__title{ font-style: italic; }

.sp-track__text{ padding-left: 3.6rem; }
.sp-track__text summary{
	display: inline-block; cursor: pointer; list-style: none;
	font-size: var(--fs-s); color: var(--muted);
	padding: 0 0 .6rem;
}
.sp-track__text summary::-webkit-details-marker{ display: none; }
.sp-track__text summary::after{ content: ' +'; }
.sp-track__text[open] summary::after{ content: ' \2212'; }
.sp-track__text summary:hover{ color: var(--ink); }
.sp-track__text p{
	font-family: var(--serif); font-weight: 300; font-size: var(--fs-m); line-height: 1.75;
	max-width: 56ch; margin: 0 0 1.6rem !important; color: var(--ink);
}

@media (max-width: 900px){
	.sp-album{ grid-template-columns: 1fr; }
	.sp-album__head{ position: static; }
	.sp-track__text{ padding-left: 3.6rem; }
}
.sp-album__note{ margin-top: .6rem !important; color: var(--muted); font-size: var(--fs-s); font-style: italic; max-width: 30ch; }