/* Book pages. Load this AFTER style.css; it reuses that file's colours, fonts and measures. */

/* a review page is a section of the site, not the current page itself */
.nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--rubric)}

/* ---------- books.html: the shelf ---------- */
.shelf-section{padding:1.5rem 0 1rem}
.shelf{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
  gap:2.4rem 1.6rem;
}
.book{display:block;text-decoration:none}
.book img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--paper-inset);
}
.book span{display:block}
.book .title{font-family:Halant,Georgia,serif;font-size:1.22rem;line-height:1.2;margin-top:.8rem}
.book .author{margin-top:.2rem;color:var(--ink-soft);font-size:.95rem;line-height:1.4}
.book .when{margin-top:.25rem;color:var(--ink-soft);font-size:.88rem;font-variant-numeric:tabular-nums}
.book:hover .title,.book:focus-visible .title{
  text-decoration:underline;text-decoration-color:var(--rubric);
  text-decoration-thickness:1px;text-underline-offset:.2em;
}
/* the "no reviews yet" line disappears by itself once the first review is added */
.shelf-section:has(.shelf li) .empty{display:none}

/* ---------- a single review ---------- */
.verdict{font-size:1.2rem;line-height:1.55;max-width:var(--measure);margin:0}

/* same two-column grid as the rest of the site: notes in the margin, text in the measure */
.review-grid{
  display:grid;grid-template-columns:var(--margin-col) minmax(0,var(--measure));
  gap:2.5rem;padding:1.5rem 0 1rem;
}
.facts{
  list-style:none;margin:0;padding:.4rem 0 0;
  color:var(--sage);font-size:.92rem;line-height:1.5;text-align:right;
}
.facts li{margin-bottom:.35rem}

.review-body p{margin:0 0 1.15rem}
.review-body h2{font-size:1.5rem;margin:2.2rem 0 .7rem;color:var(--sage)}
.review-photo{margin:0 0 1.8rem}
.review-photo img{
  display:block;width:100%;height:auto;max-height:44rem;
  object-fit:contain;background:var(--paper-inset);
}
.review-photo figcaption{margin-top:.55rem;color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.review-body .elsewhere{margin-top:2rem;color:var(--ink-soft);font-size:.95rem}

@media (max-width:44rem){
  .review-grid{grid-template-columns:1fr;gap:1rem;padding-top:1rem}
  .facts{
    text-align:left;padding-top:0;
    display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;
  }
  .facts li{margin:0}
  .shelf{gap:2rem 1.1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media print{
  .review-grid{grid-template-columns:1fr;gap:.5rem}
  .facts{text-align:left}
}