.book-card { border: 1px solid var(--border); background: var(--bg-elevated); padding: 2.5rem; margin-bottom: 2rem; position: relative; overflow: hidden; }
.book-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); }
.book-label { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 1rem; }
.book-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--text-bright); letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.book-card .book-series { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--accent-soft); margin-bottom: 1.2rem; }
.book-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; }
.book-status { display: inline-block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-soft); border: 1px solid var(--border-warm); padding: 0.4rem 1rem; margin-top: 1.2rem; }
.story-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
.story-card { display: block; border: 1px solid var(--border); background: var(--bg-elevated); padding: 1.8rem 2rem; text-decoration: none; position: relative; transition: border-color 0.4s, transform 0.3s, box-shadow 0.4s; }
.story-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); opacity: 0; transition: opacity 0.4s; }
.story-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); opacity: 0; transition: opacity 0.4s; }
.story-card:hover { border-color: var(--border-warm); transform: translateY(-2px); box-shadow: 0 0 20px rgba(181, 160, 122, 0.04), inset 0 0 20px rgba(181, 160, 122, 0.02); }
.story-card:hover::before, .story-card:hover::after { opacity: 1; }
.story-title { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--text-bright); letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.story-genre { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 0.7rem; }
.story-desc { font-family: var(--serif); font-size: 0.9rem; font-style: italic; color: var(--text-muted); line-height: 1.7; }
.story-arrow { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 0.9rem; color: var(--accent-dim); transition: color 0.3s, transform 0.3s; }
.story-card:hover .story-arrow { color: var(--accent); transform: translateY(-50%) translateX(4px); }
@media (max-width: 768px) { .book-card { padding: 1.8rem; } .story-card { padding: 1.5rem; } .story-arrow { display: none; } }