/* ----- Recognition: CD jewel cases, one per line (public/shelf.js); rows and panels are .rw-* in crate.css ----- */
.cr-tracks li.rw-row .cr-open { text-decoration: none; }
@media print { .rw-thumb, .rw-panel { display: none !important; } }

/* ----- the CD booklet: one page per award, role or article, unfolding left to right when the case is pinned ----- */
.bk { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 2px 18px; perspective: 1400px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bk-p { flex: 0 0 clamp(200px, 26%, 260px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 14px; margin: 0;
    background: color-mix(in oklab, var(--bg) 82%, var(--ink) 4%); border: 1px solid var(--line); border-radius: 2px;
    transform-origin: left center; transform: rotateY(-70deg); opacity: 0;
    transition: transform var(--rw-t, .7s) var(--cr-ease), opacity var(--rw-t, .7s) var(--cr-ease), box-shadow .3s; transition-delay: calc(var(--i, 0) * 70ms); }
.rw-panel.is-shown .bk-p { transform: none; opacity: 1; }
.bk-img { width: 72px; height: 96px; object-fit: cover; border-radius: 1px; background: var(--line); opacity: .9; filter: saturate(.85); }   /* certificates stay small: a token, not an exhibit */
.bk-h { margin: 0; display: grid; gap: 2px; line-height: 1.3; }
.bk-h b { font-weight: 500; }
.bk-y, .bk-m { font: 400 var(--fs-meta)/1.45 var(--font-mono); color: var(--muted); }
.bk-m { margin: 0; }
.bk-n { margin: 0; }
.bk-p .cd-orig { margin-top: auto; }
.bk-x { flex: 0 0 auto; align-self: end; margin: 0; max-width: 18em; font: 400 var(--fs-meta)/1.45 var(--font-mono); color: var(--muted); }
.bk-names { flex-basis: clamp(240px, 40%, 420px); }
.bk-list { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 18px; }
.bk-list li { padding: 3px 0; break-inside: avoid; }
.bk-p.is-target { box-shadow: 0 0 0 1px var(--ink); }
@media (max-width: 560px) { .bk-p { flex-basis: 78%; } }
@media (prefers-reduced-motion: reduce) { .bk-p { transition: none; transform: none; } }
@media print { .rw-fold { display: none !important; } }

.bk-liner { flex-basis: clamp(240px, 34%, 360px); }
.bk-liner .bk-n { font-style: italic; }