/* ============================================================================
   books.css
   ----------------------------------------------------------------------------
   Page-specific styles only. The shared shell (colour tokens, base type, skip
   link, hero, nav, footer) lives in site.css, which every page loads first.
   site.css is generated: edit it in the root repo's _shared/ and run sync.py,
   never here.
   ========================================================================== */

:root{
  /* prose beside covers, not a gallery */
  --maxw:840px;
}

/* Screen reader only. Used to give the star row a text equivalent. */
.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

h2{
  font-size:clamp(23px,3.6vw,30px);
  line-height:1.25;margin:56px 0 14px;font-weight:650;letter-spacing:-.01em;color:#f0f6fb;
}
.section-note{color:var(--muted);font-size:15px;margin:0 0 22px}

/* ---------- book list ---------- */
/* Same panel, border and radius as the .site-card on the about page, laid out
   as cover beside text instead of image above text. */
.books{
  display:grid;gap:18px;
  margin:0;padding:0;list-style:none;
}
.book{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
}
.book:hover{border-color:#2a3d55}

.cover{
  display:block;line-height:0;
  border-radius:6px;overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--border);
  align-self:start;
}
/* Goodreads covers arrive at inconsistent sizes and aspect ratios, so the box
   is fixed at the standard 2:3 book shape and the image is fitted inside it.
   `contain` not `cover`: cropping a cover cuts the title off the taller ones,
   and a little letterboxing is a much smaller sin than a beheaded book. */
.cover img{
  width:100%;height:165px;
  object-fit:contain;display:block;
}

.book-body{min-width:0}
.book-body h3{
  margin:0 0 4px;font-size:18px;font-weight:650;line-height:1.35;color:#e6eef6;
}
.author{margin:0 0 10px;font-size:14px;color:var(--muted)}

/* ---------- stars ---------- */
/* Five glyphs always, the unearned ones dimmed, so the rating reads at a
   glance without counting. Books with no rating render no star row at all. */
.stars{
  margin:0 0 10px;
  font-size:15px;letter-spacing:2px;line-height:1;
  color:var(--amber);
}
.star-off{color:var(--border)}

/* ---------- review ---------- */
.review{
  margin:0 0 10px;
  font-size:15px;line-height:1.65;color:var(--text);
  white-space:pre-line;
}
.more{white-space:nowrap;font-size:14px}

/* The meta line sits quietly under the review. Its link keeps the muted
   colour so it does not compete with the review text above it. */
.when{margin:0;font-size:13px;color:var(--muted)}
.when a{color:inherit;border-bottom-color:rgba(143,163,184,.35)}
.when a:hover{color:var(--green);border-bottom-color:var(--green)}

/* A currently reading card has no review or rating to balance the cover, so
   it sits centred against it. */
.book--current .book-body{align-self:center}

@media(max-width:560px){
  .book{grid-template-columns:80px 1fr;gap:16px;padding:16px}
  .cover img{height:120px}
  .book--current .book-body{align-self:start}
}

.updated{font-size:13px;opacity:.8}