/* Custom styles on top of Tailwind */
.navlink { display:block; padding:.5rem .25rem; opacity:.8; transition:opacity .2s, color .2s; }
.navlink:hover, .navlink.active { opacity:1; color:#C8963E; }

/* Hero: bookcloth background with a shelf of rising book spines */
.hero { background: repeating-linear-gradient(90deg, #0F3D3E 0 46px, #134a4b 46px 92px, #0d3536 92px 130px); }
.spine-row { display:flex; align-items:flex-end; gap:6px; height:84px; overflow:hidden; }
.spine { flex:1; border-radius:3px 3px 0 0; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { transform: translateY(100%); } to { transform:none; } }

/* Book card */
.card { background:#fff; border-radius:10px; overflow:hidden; border:1px solid #E4E9E5;
  transition: transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(15,61,62,.35); }
.cover { aspect-ratio: 2/3; background: linear-gradient(135deg,#0F3D3E,#1c5a5b); display:flex; align-items:center;
  justify-content:center; text-align:center; padding:1rem; color:#C8963E; font-family:Fraunces,serif; overflow:hidden; }
.cover img { width:100%; height:100%; object-fit:cover; transition: transform .4s; margin:-1rem; padding:0; }
.card:hover .cover img { transform: scale(1.05); }
.clamp3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chip { display:inline-block; font-size:.75rem; padding:.2rem .6rem; border-radius:999px; background:#E4E9E5; color:#0F3D3E; }
.heart.on { color:#c0392b; }

/* Skeleton loading */
.skel { background: linear-gradient(90deg,#e9edea 25%,#f5f7f5 50%,#e9edea 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:10px; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* Toast */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translate(-50%,120%); background:#172321; color:#fff;
  padding:.7rem 1.2rem; border-radius:8px; transition:transform .3s; z-index:60; }
.toast.show { transform:translate(-50%,0); }

.page { animation: fade .35s ease both; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

:focus-visible { outline:2px solid #C8963E; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }