/* The cards of the works (shelf/ and the start page): layout only; colours from the variables of the page, with the classic values as fallback */
.works { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.works .work { color: inherit; margin: 0; }
.works .work:hover { border-color: var(--cinnabar, #a8362a); }
.work .nom { display: block; font-family: var(--nom-font, 'Nom Na Tong Supplement', 'NomKhai-Supplement', 'Han-Nom Gothic Supplement', serif); font-size: 1.7rem; line-height: 1.3; }
.work rt { display: none; }   /* the reading is the line below */
.works .card-sum { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; margin-top: .15rem; }
.work .qn { display: block; font-family: var(--bs-body-font-family, system-ui, sans-serif); font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
.works .card-cover { position: relative; isolation: isolate; overflow: hidden; padding: 0; color: #1a1410; border: 1px solid var(--line, #e4d9c0); }
.card-cover > img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.card-cover .head { position: relative; padding: 1rem 1rem 3.2rem; color: #fff; }
.card-cover .head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(20, 12, 6, .78) 0%, rgba(20, 12, 6, .35) 70%, rgba(20, 12, 6, 0) 100%); }
.card-cover .head * { color: #fff !important; }
.card-cover .nom, .card-cover .qn { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.card-cover .qn { font-family: var(--bs-body-font-family, system-ui, sans-serif); font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
.card-cover .body { margin: 0 .6rem .6rem; padding: .7rem .9rem; background: rgba(255, 253, 248, .84); border-radius: .6rem; color: #1a1410; }
.card-cover .body * { color: #1a1410 !important; }
.card-cover .body .text-secondary, .card-cover .body small { color: #4a3d30 !important; }
.card-play { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); width: 4.2rem; height: 4.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 12, 6, .55); color: #fff; font-size: 2.8rem; line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); box-shadow: 0 2px 12px rgba(0, 0, 0, .45); pointer-events: none; }
.card-play .bi { margin-left: .2rem; }   /* the triangle looks centred when it sits a little to the right */
a.card-cover:hover .card-play { background: rgba(20, 12, 6, .75); }
.cd { display: block; }
.works small.d-block, .card-cover .body small { opacity: .6; }