/* "Worth reading" sidebar, shared by every page that shows the reading list */
.reading { background: #fff; border-radius: 12px; padding: 18px; box-shadow: inset 0 0 0 1px var(--rule); }
.reading-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.reading-pick { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-soft); line-height: 1.8; }
.reading-pick select {
    font: inherit; font-weight: 700; color: var(--ink); background-color: transparent; border: 0; border-bottom: 2px solid var(--rule);
    border-radius: 0; padding: 0 18px 0 2px; cursor: pointer; -webkit-appearance: none; appearance: none; field-sizing: content; max-width: 100%;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: right 6px top 55%, right 2px top 55%; background-size: 4px 4px; background-repeat: no-repeat;
}
.reading-pick select:hover, .reading-pick select:focus { border-bottom-color: var(--cap); outline: none; }
.reading-list { list-style: none; padding: 0; margin-top: 14px; border-top: 1px solid var(--rule); }
.reading-list li { border-bottom: 1px solid var(--rule); }
.book { display: flex; gap: 12px; padding: 14px 0; text-decoration: none; color: inherit; }
.book:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.book:hover .cover { transform: translateY(-2px) rotate(-1.5deg); }
.book-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.4; }
.book-text strong { font-size: 15px; letter-spacing: -0.01em; line-height: 1.25; }
.book-author { margin-top: 2px; color: var(--ink-soft); }
.book-why { margin-top: 6px; }
.book-go { margin-top: 6px; font-weight: 600; color: var(--cap); }
.cover {
    flex: none; position: relative; display: flex; align-items: flex-end; width: 48px; height: 68px; padding: 6px 5px 6px 8px;
    border-radius: 2px 5px 5px 2px; overflow: hidden; background: var(--c); color: #fff; transition: transform .2s;
    box-shadow: 0 5px 12px rgba(31, 42, 46, .2), inset 3px 0 0 rgba(255,255,255,.14), inset 5px 0 0 rgba(0,0,0,.12);
}
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 45%); }
.cover-title { font-size: 8.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.reading-foot { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.text-btn, .text-link { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.text-btn:hover, .text-link:hover { text-decoration-color: var(--ink); }
.reading-disclosure { margin-top: 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .book:hover .cover { transform: none; } }