/* Book covers + "now reading" card — shared by the Library and the dashboard. */
:root { --gilt: #e6d3a3; --gilt-dim: rgba(230, 211, 163, .38); }

/* ---------- cover ---------- */
.vol { cursor: pointer; outline-offset: 6px; }
.vol-cover {
    --r: 4px 12px 12px 4px;
    position: relative; aspect-ratio: 2 / 3; border-radius: var(--r); overflow: hidden; isolation: isolate;
    background: linear-gradient(155deg, hsl(var(--h) 62% 25%), hsl(var(--h2) 58% 9%) 78%);
    box-shadow: 0 22px 40px -14px rgba(0,0,0,.75), 0 0 36px -14px hsl(var(--h) 90% 60% / .7), inset 0 0 0 1px rgba(255,255,255,.1);
    color: #fff8e8; padding: 15% 11% 9% 15%; display: flex; flex-direction: column;
    transition: box-shadow .35s ease !important;
}
.vol-cover.fx::before, .vol-cover.fx::after { border-radius: var(--r); }
.vol:hover .vol-cover { box-shadow: 0 30px 50px -14px rgba(0,0,0,.8), 0 0 50px -8px hsl(var(--h) 95% 62% / .85), inset 0 0 0 1px rgba(255,255,255,.18); }
.cv-pat { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.vol-cover[data-p="0"] .cv-pat { background: repeating-radial-gradient(circle at 85% 18%, transparent 0 16px, rgba(255,255,255,.07) 16px 17px); }
.vol-cover[data-p="1"] .cv-pat { background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.06) 11px 12px); }
.vol-cover[data-p="2"] .cv-pat { background: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px) 0 0 / 15px 15px; mask-image: linear-gradient(160deg, #000 10%, transparent 75%); -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%); }
.vol-cover[data-p="3"] .cv-pat { background: conic-gradient(from 200deg at 100% 0%, transparent 0 20deg, rgba(255,255,255,.1) 20deg 70deg, transparent 70deg 140deg, rgba(255,255,255,.06) 140deg 180deg, transparent 180deg); }
.cv-pat::after { content: ""; position: absolute; inset: 14px 14px 14px 22px; border: 1px solid rgba(255, 240, 205, .22); border-radius: 2px 8px 8px 2px; }
.cv-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 9%; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.08) 60%, rgba(255,255,255,.1) 85%, rgba(0,0,0,.25)); }
.cv-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.2), transparent 60%); mix-blend-mode: soft-light; }
.vol-cover:hover .cv-glare { opacity: 1; }
.cv-no { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; color: var(--gilt); opacity: .9; text-transform: uppercase; }
.cv-badge { position: absolute; top: 9px; right: 10px; z-index: 2; padding: 3px 8px; border-radius: 99px; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(5,8,18,.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); color: #e9eefc; }
.st-reading .cv-badge { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 14px -2px var(--neon); animation: breathe 2.6s ease-in-out infinite; }
.st-completed .cv-badge { color: var(--gilt); border-color: var(--gilt-dim); }
@keyframes breathe { 50% { box-shadow: 0 0 22px 0 var(--neon); } }
.cv-mono { margin: auto 0 4%; font-family: "Cormorant Garamond", serif; font-style: normal; font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 4.2rem); line-height: .9; letter-spacing: -.02em; color: rgba(255, 246, 224, .94); text-shadow: 0 0 26px hsl(var(--h) 100% 70% / .55); }
.cv-foot { position: relative; padding-top: 8px; }
.cv-foot::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 1px; background: var(--gilt); }
.cv-title { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(.88rem, 1.35vw, 1.02rem); line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cv-author { margin-top: 5px; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.cv-bar::after { content: ""; position: absolute; inset: 0; width: var(--pct); background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 10px var(--neon); }
.st-completed .cv-bar::after { background: var(--gilt); box-shadow: 0 0 10px var(--gilt-dim); }

.vol-cover.lg { padding: 14% 10% 8% 14%; }
.vol-cover.lg .cv-mono { font-size: clamp(3.4rem, 7vw, 5.4rem); }
.vol-cover.lg .cv-title { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.vol-cover.lg .cv-author { font-size: .58rem; }
.vol-cover.lg .cv-no { font-size: .64rem; }

/* ---------- now reading ---------- */
.lib-now { margin: 6px 0 clamp(32px, 5vw, 54px); }
a.now-card { text-decoration: none; color: inherit; }
.now-card {
    display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: clamp(20px, 4vw, 46px); align-items: center; padding: clamp(18px, 3vw, 32px);
    border-radius: 24px; border: 1px solid var(--gilt-dim);
    background: radial-gradient(700px 300px at 100% 0%, color-mix(in srgb, var(--neon-2) 20%, transparent), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 50px -28px var(--neon);
    transition: border-color .3s, box-shadow .3s;
}
.now-card + .now-card { margin-top: 18px; }
.now-card:hover { border-color: var(--neon); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 60px -16px var(--neon); }
.now-kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt); }
.now-body h3 { margin: 8px 0 20px; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.08; color: #fbf6ea; text-wrap: balance; }
.now-meter { height: 6px; border-radius: 9px; background: rgba(255,255,255,.08); position: relative; }
.now-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct); border-radius: inherit; background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 16px var(--neon); animation: barGrow 1.3s cubic-bezier(.2,.7,.2,1) both; transform-origin: 0 50%; }
.now-meter i::after { content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px var(--neon); }
.now-line { margin-top: 14px; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.now-line b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--neon); text-shadow: 0 0 18px var(--glow); vertical-align: -3px; margin-right: 2px; }
.now-cta { display: inline-flex; gap: 8px; margin-top: 22px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--gilt); border-bottom: 1px solid var(--gilt-dim); padding-bottom: 3px; transition: gap .25s, color .25s; }
.now-card:hover .now-cta { gap: 14px; color: #fff; }
@media (max-width: 640px) { .now-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .now-card .vol-cover { width: 170px; } .now-body { width: 100%; } }


/* ---------- dashboard blocks ---------- */
.home-block { margin-bottom: 40px; }
.home-block .now-card { margin-bottom: 0; }
.home-block .now-card + .now-card { margin-top: 18px; }
.home-empty { color: var(--muted); }
.strip { display: flex; gap: 22px; overflow-x: auto; padding: 8px 6px 22px; margin: 0 -6px; scroll-snap-type: x proximity; }
.strip .vol { flex: 0 0 168px; scroll-snap-align: start; text-decoration: none; color: inherit; display: block; }
.strip .vol-meta { padding: 14px 2px 0; }
.strip .vol-meta h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.05rem; line-height: 1.22; color: #f3eee0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s; }
.strip .vol:hover .vol-meta h3 { color: var(--neon); }
.strip .vol-meta p { margin-top: 4px; font-size: .74rem; color: var(--muted); }
.strip-all { flex: 0 0 168px; aspect-ratio: 2 / 3; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; text-decoration: none; color: var(--muted); border: 1px dashed var(--gilt-dim); border-radius: 4px 12px 12px 4px; transition: border-color .25s, color .25s, box-shadow .25s; }
.strip-all b { font-family: var(--font-display); font-size: 2.4rem; background: linear-gradient(120deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip-all span { font-size: .78rem; max-width: 100px; }
.strip-all em { font-style: normal; font-size: .78rem; color: var(--gilt); margin-top: 6px; }
.strip-all:hover { border-color: var(--neon); color: #fff; box-shadow: 0 0 30px -10px var(--neon); }
@media (max-width: 640px) { .strip .vol, .strip-all { flex-basis: 140px; } }