/* 年华 · page layer on /sections/shell.css: the jacket shelf between a year's photos and its rows. */
/* Jackets stand on a common baseline; a DVD case is taller than a CD, so it keeps its shape. */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:32px 20px;margin:0;padding:0;list-style:none}
.work{min-width:0}
.art{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1}
.art img{width:100%;height:auto;border-radius:var(--r-art);outline:1px solid #0000000f;outline-offset:-1px;background:var(--fill)}
.art img.tall{width:auto;height:100%}
.work b{display:-webkit-box;margin-top:12px;overflow:hidden;font-size:14px;font-weight:500;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere;text-wrap:pretty}
.work small{display:block;margin-top:4px;color:var(--gray);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums}
/* A jacket's text opens under the shelf, named by the jacket. */
.work .bk-open{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
/* A jacket's 曲目 in the reader: its tracks, who wrote them and their tempo. */
.tk{margin:0 0 4px;padding:0;list-style:none;border-top:1px solid var(--line)}
.tk li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tk-n{color:var(--gray-2);font-size:13px;line-height:1.7;font-variant-numeric:tabular-nums;text-align:right}
.rd-body .tk-t{margin:0;font-size:15px;line-height:1.6}
.rd-body .tk-c{margin:2px 0 0;color:var(--gray);font-size:13px;line-height:1.6}
/* a role and its names wrap as one, the dot after them staying on their line */
.tk-c span{display:inline-block}
.tk-c span:not(:last-child)::after{content:' ·'}
.rd-body h4+.tk{margin-top:0}
.s-scheduled{color:var(--accent)}
.row.is-cancelled b{color:var(--gray)}

@media (max-width:760px){
 .shelf{display:flex;gap:16px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
 .shelf::-webkit-scrollbar{display:none}
 .work{flex:0 0 132px;scroll-snap-align:start}
}