/* Rhune's release and artist cards, shared by Rhune pages (rhune_pages.css) and
   curator profiles' Collection. A release card takes its ground from its sleeve;
   an artist card is a portrait with the name set over it. */
/* Outside a Rhune page the cards bring the page's resets with them. */
.rhune-cards { font: 400 16px/1.5 var(--rh-sans); }
.rhune-cards :is(p, h3) { margin: 0; color: inherit; font-family: inherit; }
.rhune-cards a { text-decoration: none; }
.rhune-cards img { display: block; }

/* Releases: each takes its ground from its sleeve. */
.rhune-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 292px;
    gap: 12px;
    padding: 0 var(--rhune-gutter, 20px) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--rhune-gutter, 20px);
    scrollbar-width: none;
}
.rhune-shelf::-webkit-scrollbar { display: none; }
.rhune-shelf--small { grid-auto-columns: 200px; gap: 10px; }
.rhune-release { display: flex; flex-direction: column; min-height: calc(292px * 4 / 3); padding: 22px; background: var(--tone); color: var(--on-tone) !important; scroll-snap-align: start; }
.rhune-release-art { display: block; flex: none; width: 100%; aspect-ratio: 1; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
.rhune-release-art img { width: 100%; height: 100%; object-fit: cover; }
.rhune-release h3 { margin-top: auto !important; padding-top: 16px; font-size: 30px; font-weight: 500; line-height: 0.98; letter-spacing: -0.058em; }
.rhune-release p { margin-top: 7px !important; font-size: 13px; line-height: 1.35; opacity: 0.72; }
.rhune-release--small { min-height: calc(200px * 4 / 3); padding: 16px; }
.rhune-release--small h3 { font-size: 21px; letter-spacing: -0.05em; }
.rhune-release--small p { font-size: 12px; }
/* A curator's album card sits on its blurred-cover ground (artwork_ground.py), as on the Board. */
.rhune-release.has-ground { position: relative; isolation: isolate; overflow: hidden; }
.rhune-release.has-ground::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("/static/artwork-grain.png") var(--grain-at, 0 0) / 64px 64px; opacity: 0.3; pointer-events: none; }
.rhune-release > .artwork-ground { position: absolute; z-index: -2; inset: -20%; background: var(--ground) center top / cover no-repeat; pointer-events: none; }
.rhune-artist-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 16px; overflow: hidden; isolation: isolate; background: var(--rhune-deep, #171615); color: var(--rhune-on-deep, #f1efe9) !important; scroll-snap-align: start; }
.rhune-artist-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.15); }
/* Curators' artist cards show the real image; black and white is Rhune's own pages' treatment. */
.rhune-artist-card .curator-collection-art img { filter: none; }
/* Explicit layers: a cover fading in gets its own compositing layer in WebKit and, left to
   implicit order, can paint over the shade and name for a frame. */
.rhune-artist-card-art { z-index: 0; }
.rhune-artist-card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 6, 0) 45%, rgba(8, 7, 6, 0.8) 100%); }
.rhune-artist-card :is(h3, p) { position: relative; z-index: 2; }
.rhune-artist-card h3 { font-size: 21px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.rhune-artist-card p { margin-top: 5px !important; font-size: 12px; opacity: 0.75; }

@media (min-width: 860px) {
    .rhune-shelf { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .rhune-shelf--small { grid-template-columns: repeat(auto-fill, 220px); }
    .rhune-release { min-height: 0; }
}