/* Willy Reads (public). Greyscale, covers included: book covers are always shown black and white. */
.reads { max-width: 980px; }
.reads-head { padding: 14px 16px 15px; margin-bottom: 18px; text-align: center; }
.reads-head h1 { font: 700 clamp(19px, 2.6vw, 26px)/1.15 var(--font-ui); text-wrap: balance; }
.reads-head p { margin-top: 6px; color: var(--ink-2); font-size: 14px; text-wrap: balance; }
.reads-empty { padding: 30px 16px; text-align: center; color: #666; }

/* Reading now and Up next (list cards) and Read (cover grid) use the shared item design in /css/items.css. */
.hp { display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -1px; image-rendering: pixelated; }
/* book pages (/reads/<slug>/) only: the status dot and progress bar there */
.tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.bar { display: block; margin-top: 7px; height: 9px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p); background: repeating-linear-gradient(90deg, #111 0 5px, #444 5px 7px); }

/* ------------------------------------------------------------ one book (/reads/<slug>/) */
.bk { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px; }
.bk__cover { position: relative; border: 1.5px solid var(--ink); border-radius: 3px 8px 8px 3px; overflow: hidden; background: #e4e4e4; box-shadow: 4px 4px 0 rgba(0, 0, 0, .18); }
.bk__cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0)); pointer-events: none; }
.bk__cover img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.06); }
.bk__cover--blank { display: grid; place-items: center; aspect-ratio: 2 / 3; padding: 16px; background: repeating-linear-gradient(0deg, #fff 0 2px, #e9e9e9 2px 4px); }
.bk__blank { padding: 6px 8px; background: #fff; border: 1px solid var(--ink); font: 700 17px/1.2 var(--font-ui); text-align: center; }
.bk__title { font: 700 clamp(21px, 3vw, 28px)/1.18 var(--font-ui); text-wrap: balance; overflow-wrap: anywhere; }
.bk__author { margin-top: 6px; font-size: 16px; color: #444; }
.bk__author:empty { display: none; }
.bk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font: 18px/1.1 var(--font-lcd); color: #555; }
.bk__tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
.bk__date { display: none; }   /* no dates on the public side; book.js also removes it */
.bk__fmt { display: inline-flex; align-items: center; gap: 5px; }
.bk__prog { display: flex; align-items: center; gap: 10px; max-width: 320px; margin-top: 12px; font: 17px/1 var(--font-lcd); }
.bk__prog .bar { flex: 1; margin: 0; }
.bk__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bk__btn { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink);
  font: 700 15px/1.1 var(--font-ui); text-decoration: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
.bk__btn:hover { background: var(--ink); color: #fff; }
.bk__btn--main { background: var(--ink); color: #fff; }
.bk__btn--main:hover { background: #fff; color: var(--ink); }
.bk__h { margin: 0 0 8px; font: 16px/1 var(--font-lcd); letter-spacing: .02em; color: #555; }
.bk__about { margin-top: 18px; padding-top: 14px; border-top: 1.5px dotted #bbb; font-size: 13.5px; line-height: 1.5; color: #555; overflow-wrap: anywhere; }
.bk__about p + p { margin-top: .7em; }
.bk__notes .bk__h { color: var(--ink); }
.bk__notes { margin-top: 18px; padding-top: 14px; border-top: 1.5px dotted #999; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.bk__notes p + p { margin-top: .8em; }
.bk__foot { margin: 14px 4px 0; text-align: center; font-size: 14px; }
.bk__foot a { color: inherit; }
@media (max-width: 620px) {
  .bk { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .bk__cover { width: min(78%, 300px); justify-self: center; }
}