/* =====================================================================
   nielsdalgaard.com — /assets/series.css

   The strip of book covers that series.js draws.

   It lived in book-page.css until the free tools wanted it too, and a
   tool page has no business loading the layout of a book page to get
   one grid. The component owns its own styles now: series.js and
   series.css travel together, and anything that wants the strip loads
   the pair.

   Sits on whatever section wrapper the host page provides — .series on
   the book pages, .sec.alt2 on the generated tool pages — and only
   styles what is inside it.
   ===================================================================== */

/* 140px rather than 160: at the 1028px a wrap leaves, 160 fits five
   across and strands the sixth on a line of its own. */
.bp-series{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:18px;margin-top:10px}

/* A column with the title pushed to the bottom. The project lines run to
   one, two or three lines depending on the book, and reserving the worst
   case on every card wastes a third of the space to help one of them.
   Bottom-aligning the titles levels the row whatever the line count. */
.bp-book{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:10px;padding:14px;background:var(--panel);transition:.18s}
.bp-book h3{margin-top:auto}
a.bp-book:hover{border-color:var(--pewter);transform:translateY(-3px)}
/* The covers are not all the same shape — they were drawn for different
   trim sizes, and the roadmap is noticeably wider than the rest. Left at
   their natural heights the row turns into a staircase, with every title
   starting at a different line. A fixed box and object-fit:cover trims a
   few pixels off the long edge and buys a straight row. */
.bp-book img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top;
  border-radius:5px;display:block;margin-bottom:12px;border:1px solid var(--line)}
/* "Project 01 · All instruments" wraps to two lines where "Project 03 ·
   Harmony" takes one, and the titles underneath then start at different
   heights across the row. Reserving both lines keeps them level. */
.bp-book .bn{font-family:'Oswald',sans-serif;font-size:9.5px;letter-spacing:1.6px;
  line-height:1.4;min-height:2.8em;text-transform:uppercase;color:var(--muted2);
  margin-bottom:4px}
.bp-book h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:.4px;text-transform:uppercase;line-height:1.2;color:var(--cream)}

/* The book you are already on. Not a link, so it does not get the hover
   lift either — the border is what says "you are here". */
.bp-book.here{border-color:var(--pewter);background:var(--panel2)}
.bp-book.here .bn{color:var(--pewter)}

/* A strip of covers is navigation, and navigation is not worth a page
   of toner. The button's document carries the books properly. */
@media print{ .bp-series,[data-nd-series]{display:none !important} }