/* =========================================================
   SIIRF library: resources as books
   ========================================================= */
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-italic.woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
.lib-head { padding: 40px 0 6px; }
.lib-head .label { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.lib-head p { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }

.shelf-grid { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 22px; }
.res { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.res:hover { color: var(--ink); }
.cover {
  position: relative; aspect-ratio: 3 / 4.1; border-radius: 4px 12px 12px 4px; padding: 24px 18px 18px 30px;
  display: flex; flex-direction: column; color: var(--i); background-color: var(--c);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .08) 14px, rgba(255, 255, 255, .1) 18px, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .18));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 18px 28px -18px rgba(31, 41, 51, .6), inset -3px 0 0 rgba(255, 255, 255, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cover::before { content: ""; position: absolute; left: 22px; top: 14px; bottom: 14px; border-left: 1px solid var(--g); opacity: .6; }
.cover .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); margin-bottom: auto; }
.cover .ico svg { width: 22px; height: 22px; }
.cover .ico svg * { stroke: var(--i); }
.cover h2 { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.15; color: var(--i); margin: 0 0 12px; }
.cover .rule { width: 34px; height: 2px; background: var(--g); margin-bottom: 10px; }
.cover small { font-weight: 800; font-size: .66rem; letter-spacing: .16em; color: var(--g); }
.res:hover .cover, .res:focus-visible .cover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 26px 34px -18px rgba(31, 41, 51, .7); }
.res p { margin: 0; color: var(--muted); font-size: .94rem; }
.res .go { font-weight: 700; color: var(--primary); font-size: .92rem; }
.res:hover .go { color: var(--accent); }
.b-assess { --c: #7A3E31; --i: #F3E6CC; --g: #D9BB7B; }
.b-game { --c: #2C5A52; --i: #EEE7D6; --g: #D4B57A; }
.b-guides { --c: #56475E; --i: #F0E5CF; --g: #D4B57A; }
.b-plan { --c: #3E5442; --i: #EED9A0; --g: #D9BC7E; }
.b-log { --c: #B7862B; --i: #2A2116; --g: #3B2E1E; }
@media (max-width: 1100px) { .shelf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } .cover h2 { font-size: 1.1rem; } }