/* Bibliographical Handbook page (mu-plugin kemble-handbook) */
.hb-hero { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: center; margin: 10px 0 24px; padding: 22px; border-radius: 18px; background: linear-gradient(120deg, #1f3f5c, #2f5f86 60%, #c9a227); color: #fff; overflow: hidden; position: relative; font-family: var(--font-ui); animation: hb-fade 0.8s var(--ease) both; }
@media (max-width: 640px) { .hb-hero { grid-template-columns: 1fr; } }
@keyframes hb-fade { from { opacity: 0; transform: translateY(10px); } }
.hb-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; }
.hb-cover { border-radius: 8px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.35); transform: rotate(-2deg); transition: transform 0.5s var(--ease); }
.hb-cover img { display: block; width: 100%; animation: hb-kb 18s ease-in-out infinite alternate; }
@keyframes hb-kb { from { transform: scale(1) translateY(0); } to { transform: scale(1.12) translateY(-4%); } }
.hb-hero:hover .hb-cover { transform: rotate(0) scale(1.03); }
.hb-kicker { margin: 0 0 4px !important; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; }
.entry-content h2.hb-title { margin: 0 0 12px !important; color: #fff; font-size: 24px; line-height: 1.25; } .hb-title em { color: #f0d27a; }
.hb-counters { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; }
.hb-counters b { display: block; font-family: var(--font-serif); font-size: 26px; line-height: 1.1; color: #f0d27a; } .hb-counters span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
.hb-btns { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; max-width: none !important; }
.entry-content .hb-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--accent-strong) !important; font-weight: 700; font-size: 13.5px; text-decoration: none; background-image: none; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.entry-content .hb-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); color: var(--accent-strong) !important; }
.entry-content .hb-btn-soft { background: rgba(255,255,255,0.18); color: #fff !important; } .entry-content .hb-btn-soft:hover { color: #fff !important; }
.entry-content h2.hb-h { margin: 30px 0 6px; font-size: 20px; }
.hb-note { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin: 0 0 12px !important; max-width: none !important; }
.hb-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; font-family: var(--font-ui); }
.entry-content .hb-sec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; background-image: none; position: relative; overflow: hidden;
	opacity: 0; transform: translateX(-14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s; transition-delay: calc(var(--i, 0) * 45ms); }
.entry-content .hb-sec::before { content: ""; position: absolute; inset: 0; background: var(--accent-soft); transform-origin: right; transform: scaleX(1); transition: transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + 0.15s); z-index: 1; }
.entry-content .hb-sec.is-in { opacity: 1; transform: none; } .entry-content .hb-sec.is-in::before { transform: scaleX(0); }
.entry-content .hb-sec:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); }
.hb-sec::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ease); z-index: 2; }
.hb-sec:hover::after { left: 130%; }
.hb-sec-k { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hb-sec-t { font-size: 13px; line-height: 1.3; }
.hb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; font-family: var(--font-ui); }
.entry-content .hb-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); text-decoration: none; background-image: none; color: var(--ink); padding: 0; margin: 0;
	opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.3s, border-color 0.3s; transition-delay: calc(var(--i, 0) * 90ms); }
.entry-content .hb-card.is-in { opacity: 1; transform: none; }
.entry-content a.hb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--ink); }
.hb-card-pic { display: block; aspect-ratio: 3 / 1.6; overflow: hidden; background: linear-gradient(160deg, #e8e1cf, #d6dde6); }
.hb-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.5s; }
.hb-card:hover .hb-card-pic img { transform: scale(1.08) rotate(-1deg); }
.hb-card-pic-text { display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 44px; font-weight: 700; color: var(--accent); opacity: 0.5; }
.hb-card-body { display: block; padding: 12px 14px 14px; } .hb-card-body b { display: block; font-family: var(--font-serif); font-size: 17px; color: var(--accent-strong); margin-bottom: 4px; } .hb-card-body span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.hb-card-soon { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .hb-hero, .hb-cover img { animation: none; } .entry-content .hb-sec, .entry-content .hb-card { opacity: 1; transform: none; transition: none; } .entry-content .hb-sec::before { display: none; } }