html,
body {
  margin: 0;
  /* remove Safari’s default 8 px margin */
}

:root {
  /**
   * Define a measure for book spines to have their relative sizes be to scale.
   * The spine height measurements in mm are in books.json. 
   * 1 mm  =  2.6 px   (≈60 % of real size on a 96 dpi screen)
   */
  --px-per-mm: 2.6px;
}

body {
  background-color: #000000;
  color: #FFFFFF;
}

.bookshelf {
  /* lay the books left => right */
  display: flex;
  /* …and start a new “shelf” when we run out of room */
  flex-wrap: wrap;
  /* top-align every spine on each shelf */
  align-items: flex-end;
  /* space between books; use any unit you like */
  gap: 0.5rem;
  /* optional — keeps the books off the very edge */
  padding: 0.5rem;
}

/* books that live in the shelf should never hide behind the sidebar */
@media (min-width: 600px) {
  .bookshelf {
    /* keep everything inside this reduced content area: */
    max-width: calc(100% - 420px);
    /* 420 px = sidebar width */
    /* If your shelf is a flex or grid row that wraps, this alone is enough.
       If it’s a masonry layout using columns, add: column-gap: … */
    gap: 0.25rem;
  }
}

@media (max-width: 599px) {
  .bookshelf {
    /* keep every spine on the same row */
    flex-wrap: nowrap;
    /* horizontal scroll instead of line-breaks */
    overflow-x: auto;
    overflow-y: hidden;
    /* prevents accidental vertical scroll */
    -webkit-overflow-scrolling: touch;
    /* smooth momentum scrolling on iOS */
    gap: 0.5rem;
    /* same gap you already use */
    scroll-snap-type: x proximity;
    /* optional—makes scrolling “stick” */
  }

  /* keep each spine from shrinking and let it snap nicely */
  .spine {
    flex: 0 0 auto;
    /* don’t shrink, don’t grow */
    scroll-snap-align: end;
    /* or `start`—pick what feels best */
  }

  /* cosmetic: thin scrollbar that doesn’t dominate the UI */
  .bookshelf::-webkit-scrollbar {
    height: 4px;
  }

  .bookshelf::-webkit-scrollbar-thumb {
    background: #444;
    /* subtle thumb */
    border-radius: 2px;
  }
}

.spine {
  display: block;
  /* We store h-mm as a style attribute on the spine img */
  height: calc(var(--h-mm) * var(--px-per-mm));
  /* keep the image’s aspect ratio */
  width: auto;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset -3px 0 4px -2px rgb(255 255 255 / .35),
    0 2px 4px rgb(0 0 0 / .25);
  /* Ease in/out for hover animation. */
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Disable Live Text -- text selection in images. */
.spine,
.spine img {
  -webkit-user-select: none;
  user-select: none;
}

/* Only run the fancy hover effect on devices that *have* hover */
@media (hover: hover) and (pointer: fine) {
  .spine:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgb(0 0 0 /.35);
  }
}

/* Book Detail */

/* Persistent sidebar + mobile overlay */
.book-detail {
  position: fixed;
  top: 0;
  right: 0;
  /* so padding sits inside the width */
  box-sizing: border-box;
  height: 100dvh;
  width: 100%;
  /* mobile default */
  background: #111;
  color: #fff;
  z-index: 1000;

  display: none;
  /* shown via .open on mobile */
  flex-direction: column;
  padding: 1.25rem;
}

.book-detail.open {
  /* mobile: overlay visible */
  display: flex;
}

/* ≥600 px: sidebar is always visible, no close button needed */
@media (min-width: 600px) {
  .book-detail {
    display: flex;
    /* persistent */
    width: 420px;
    border-left: 1px solid #333;
  }
}

.detail-content {
  .title {
    font-size: 2rem;
    font-family: "Playfair Display", serif;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .author,
  .year {
    margin-top: 4px;
    margin-bottom: 6px;
  }

  p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
  }
}