/* Single album page — matches the site's index pages. */

.drc-album-page .drc-section { padding-block: var(--space-xl, 3rem) 0; }
.drc-album-page .drc-album-hero { padding-top: var(--space-2xl, 4rem); }
.drc-album-page .drc-album-related { padding-bottom: var(--space-2xl, 4rem); }
.drc-album-page .drc-container { width: 100%; max-width: 90%; margin-inline: auto; }
.drc-h2 { font-size: var(--text-l, 1.5rem); font-weight: 700; margin: 0 0 1rem; letter-spacing: -.01em; }

/* Breadcrumb */
.drc-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: var(--space-m, 1.5rem); font-size: var(--text-xs, .85rem); color: #bbb; }
.drc-crumbs a { color: #999; text-decoration: none; }
.drc-crumbs a:hover { color: #1db954; }

/* Hero */
.drc-album-hero__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-xl, 3rem); align-items: start; }
.drc-cover { display: block; width: 100%; padding: 0; border: 0; background: #f4f4f4; border-radius: 4px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.drc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.drc-cover:hover img { opacity: .9; }
.drc-cover:focus-visible { outline: 3px solid #1db954; outline-offset: 3px; }
.drc-cover--empty { display: flex; align-items: center; justify-content: center; color: #ccc; font-size: var(--text-2xl, 3rem); cursor: default; }

.drc-gallery { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; }
.drc-gallery__thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid #eee; border-radius: 3px; overflow: hidden; background: #f4f4f4; cursor: zoom-in; }
.drc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.drc-gallery__thumb:hover img { opacity: .75; }
.drc-gallery__thumb:focus-visible { outline: 2px solid #1db954; outline-offset: 2px; }

.drc-album-hero__artist { margin: 0 0 .25rem; font-size: var(--text-m, 1.25rem); font-weight: 500; }
.drc-album-hero__artist a { color: #555; text-decoration: none; }
.drc-album-hero__artist a:hover { color: #1db954; }
.drc-album-hero__title { margin: 0 0 var(--space-m, 1.5rem); font-size: var(--text-2xl, 2.75rem); line-height: 1.05; letter-spacing: -.02em; }

.drc-facts { margin: 0 0 var(--space-m, 1.5rem); border-top: 1px solid #f0f0f0; }
.drc-facts__row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #f0f0f0; }
.drc-facts dt { font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #999; align-self: center; }
.drc-facts dd { margin: 0; font-size: var(--text-s, 1rem); color: #1a1a1a; }
.drc-facts dd a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #e5e5e5; }
.drc-facts dd a:hover { color: #1db954; border-color: #1db954; }

.drc-owners { display: flex; flex-wrap: wrap; gap: .5rem; }
.drc-owner { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; background: #f4f4f4; font-weight: 600; font-size: var(--text-xs, .85rem); }
.drc-owner a { border: 0 !important; }
.drc-owner__fmt { font-weight: 400; color: #777; }

.drc-album-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-m, 1.5rem); }

.drc-player { margin-bottom: 1rem; }
.drc-player iframe { display: block; border-radius: 12px; border: 0; }

.drc-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.drc-link {
	display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem;
	background: #fff; border: 1px solid #e5e5e5; border-radius: 4px;
	font-size: var(--text-s, 1rem); font-weight: 500; color: #1a1a1a; text-decoration: none;
	transition: border-color .15s, color .15s;
}
.drc-link:hover { border-color: #1a1a1a; }
.drc-link--spotify { background: #1db954; border-color: #1db954; color: #fff; font-weight: 600; }
.drc-link--spotify:hover { background: #1aa34a; border-color: #1aa34a; color: #fff; }

/* Tracklist + lyrics */
.drc-tracks__head { display: flex; align-items: baseline; gap: .75rem; }
.drc-tracks__total { font-size: var(--text-xs, .85rem); color: #bbb; }
.drc-tracks__hint { margin: -.5rem 0 1rem; font-size: var(--text-xs, .85rem); color: #999; }
.drc-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid #f0f0f0; max-width: 820px; }
.drc-tracks__heading { padding: 1.25rem 0 .5rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #999; border-bottom: 1px solid #f0f0f0; }
.drc-track { border-bottom: 1px solid #f0f0f0; }
.drc-track__row {
	display: grid; grid-template-columns: 2.75rem 1fr auto 1.25rem; gap: .75rem; align-items: baseline;
	width: 100%; padding: .8rem .25rem; margin: 0; border: 0; background: none; text-align: left;
	font: inherit; color: #1a1a1a; cursor: pointer; border-radius: 4px;
}
.drc-track__row--static { grid-template-columns: 2.75rem 1fr auto; cursor: default; }
button.drc-track__row:hover { background: #fafafa; }
button.drc-track__row:hover .drc-track__title { color: #1db954; }
.drc-track__row:focus-visible { outline: 2px solid #1db954; outline-offset: -2px; }
.drc-track__pos { font-size: var(--text-xs, .85rem); color: #bbb; font-variant-numeric: tabular-nums; }
.drc-track__title { font-size: var(--text-s, 1rem); font-weight: 600; transition: color .15s; }
.drc-track__by { font-weight: 400; color: #999; }
.drc-track__dur { font-size: var(--text-xs, .85rem); color: #999; font-variant-numeric: tabular-nums; }
.drc-track__chev { width: .6rem; height: .6rem; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: rotate(45deg); justify-self: center; align-self: center; transition: transform .2s; margin-top: -.3rem; }
.drc-track.is-open .drc-track__chev { transform: rotate(-135deg); margin-top: .2rem; border-color: #1db954; }
.drc-track.is-open .drc-track__title { color: #1db954; }
.drc-track__drawer { padding: .25rem 0 1.5rem 3.5rem; }
.drc-lyrics { max-width: 60ch; font-size: var(--text-s, 1rem); line-height: 1.65; color: #333; }
.drc-lyrics p { margin: 0 0 1em; }
.drc-lyrics__loading, .drc-lyrics__empty { color: #999; font-style: italic; }
.drc-lyrics__genius { display: inline-block; margin-top: .25rem; font-size: var(--text-xs, .85rem); font-weight: 600; color: #1a1a1a; }
.drc-lyrics__source { margin-top: .5rem !important; font-size: var(--text-2xs, .72rem); color: #bbb; }

/* Notes (comments) */
.drc-notes { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 820px; }
.drc-notes li { padding: 1rem 0; border-bottom: 1px solid #f0f0f0; }
.drc-notes .comment-meta, .drc-notes .comment-metadata { font-size: var(--text-xs, .85rem); color: #999; }
.drc-notes .comment-meta a { color: inherit; text-decoration: none; }
.drc-notes .reply a { font-size: var(--text-xs, .85rem); color: #1db954; }
.drc-album-notes .comment-respond { max-width: 820px; }
.drc-album-notes .comment-reply-title { font-size: var(--text-m, 1.1rem); margin: 0 0 .75rem; }
.drc-album-notes label { display: block; font-size: var(--text-xs, .85rem); font-weight: 600; color: #555; margin-bottom: .3rem; }
.drc-album-notes input[type="text"], .drc-album-notes input[type="email"], .drc-album-notes input[type="url"], .drc-album-notes textarea {
	width: 100%; max-width: 100%; padding: .6rem .75rem; border: 1px solid #e5e5e5; border-radius: 4px; font: inherit; font-size: 16px;
}
.drc-album-notes textarea:focus, .drc-album-notes input:focus { outline: none; border-color: #1db954; box-shadow: 0 0 0 3px rgba(29,185,84,.15); }
.drc-album-notes .drc-btn--primary, .drc-album-notes input[type="submit"] {
	padding: .65rem 1.4rem; border-radius: 4px; border: 1px solid #1db954; background: #1db954; color: #fff; font-weight: 600; cursor: pointer;
}

/* Lightbox */
html.drc-lb-open { overflow: hidden; }
.drc-lb {
	position: fixed; inset: 0; z-index: 100000; display: none;
	align-items: center; justify-content: center;
	background: rgba(10, 10, 10, .94); color: #fff;
	touch-action: pan-y;
}
.drc-lb.is-open { display: flex; }
.drc-lb__stage { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4rem 4.5rem; box-sizing: border-box; }
.drc-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); transition: opacity .2s; user-select: none; -webkit-user-drag: none; }
.drc-lb__img.is-loading { opacity: .3; }
.drc-lb__close, .drc-lb__nav {
	position: absolute; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	transition: background .15s;
}
.drc-lb__close:hover, .drc-lb__nav:hover { background: rgba(255,255,255,.2); }
.drc-lb__close:focus-visible, .drc-lb__nav:focus-visible { outline: 2px solid #1db954; outline-offset: 2px; }
.drc-lb__close { top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.drc-lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; line-height: 1; }
.drc-lb__prev { left: 1rem; }
.drc-lb__next { right: 1rem; }
.drc-lb__count { position: absolute; bottom: 1rem; left: 0; right: 0; margin: 0; text-align: center; font-size: .85rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
	.drc-album-hero__grid { grid-template-columns: 1fr; gap: var(--space-l, 2rem); }
	.drc-album-hero__art { max-width: 420px; }
}
@media (max-width: 640px) {
	.drc-facts__row { grid-template-columns: 6rem 1fr; }
	.drc-track__drawer { padding-left: .25rem; }
	.drc-lb__stage { padding: 3.5rem .5rem; }
	.drc-lb__nav { top: auto; bottom: .5rem; transform: none; width: 44px; height: 44px; }
	.drc-lb__count { bottom: 1.3rem; }
}