/**
 * Books Page Styles — v5.2
 *
 * books.html: load css/global.css first, then css/books.css (parallel <link>s).
 *
 * Grid: 5 columns × 16 rows (complete bottom row, no gaps)
 * Books: 2col × 3rows, Book-09: 2col × 2rows
 * Fillers: 1col × 1row, 3 per column stack
 * Bottom row: 3 extra filler cells to complete the grid
 *
 * v5 fixes:
 * - Zero margin on filler cells (override portfolio.css)
 * - Font sizes bumped two steps across the board
 * - Filter active = gold accent text + underline (no shadow)
 * - Bottom grid row fully filled with book-spine SVG fillers
 * - Mobile modal pushed below nav bar
 * - 2 columns ≤480px (quotes full width); 2 columns ≤768px with dense row spans
 * - Hero minimal on mobile so 2 books visible on load
 */

/* ============================================
   VARIABLE BRIDGE — map short tokens to global.css
   ============================================ */
:root {
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent-glow: var(--color-accent-glow);
  --bg-primary: var(--color-bg-base);
  --bg-secondary: var(--color-bg-elevated);
  --bg-card: var(--color-bg-card);
  --border: var(--color-border-subtle);
  --border-accent: var(--color-border-strong);
  --font-poetry: var(--font-body);
  --font-mono: 'Space Mono', monospace;
}

/* ============================================
   HERO
   ============================================ */
.books-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8rem var(--padding-desktop, 4rem) 4rem;
  background: transparent;
  overflow: hidden;
}

.books-hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.books-hero-title {
  font-family: var(--font-poetry, 'Cormorant Garamond', serif);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  margin: 1rem 0;
}

.hero-ornament {
  width: 150px;
  margin: 2rem auto 0;
  color: var(--accent);
}

.ornament-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawOrnament 2s ease forwards;
}

.ornament-circle {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawCircle 1s ease 1s forwards;
}

@keyframes drawOrnament { to { stroke-dashoffset: 0; } }
@keyframes drawCircle   { to { stroke-dashoffset: 0; } }

/* Background Particles — fullscreen fixed, lowest layer */

/* ============================================
   FILTER TABS
   ============================================ */
.books-collection {
  padding: 2rem var(--padding-desktop, 4rem) 8rem;
  background: transparent;
}

.collection-header {
  max-width: 1400px;
  margin: 0 auto 3rem;
  display: flex;
  justify-content: center;
}

.filter-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background-color: var(--bg-secondary);
  border-radius: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Font size bumped two steps (was 0.82rem → 0.95rem) */
.filter-tab {
  padding: 0.8rem 1.5rem;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Active/hover: gold text + underline, NO background fill, NO shadow */
.filter-tab:hover,
.filter-tab.active {
  color: var(--accent, #f0d78c);
  border-bottom-color: var(--accent, #f0d78c);
}

/* (Old sliding-background `.filter-tab::before` tombstone removed 2026-06-19 — CSS-016:
   inert — no rule gives `.filter-tab::before` any `content`, so it never rendered.) */

/* ============================================
   BOOKS GRID — 5-column named-area layout (desktop)
   ============================================ */
.books-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1vw, 1.2rem);
  grid-template-areas:
    "b1  b1  fa1 b2  b2"
    "b1  b1  fa2 b2  b2"
    "b1  b1  fa3 b2  b2"
    "fb1 b3  b3  b4  b4"
    "fb2 b3  b3  b4  b4"
    "fb3 b3  b3  b4  b4"
    "b5  b5  fc1 b6  b6"
    "b5  b5  fc2 b6  b6"
    "b5  b5  fc3 b6  b6"
    "fd1 b7  b7  b8  b8"
    "fd2 b7  b7  b8  b8"
    "fd3 b7  b7  b8  b8"
    "b9  b9  fe1 fe2 fe3"
    "b9  b9  fe1 fe2 fe3";
}

/* ============================================
   GRID CELL
   ============================================ */
.grid-cell {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background-color: var(--bg-card, rgba(26,26,30,0.8));
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  min-height: 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.grid-cell.hidden {
  display: none !important;
}

/* ============================================
   BOOK CELL
   ============================================ */
.book-cell {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  scroll-margin-top: 80px; /* clear fixed nav when anchor-navigated from home.html */
}

.book-cell:hover {
  border-color: var(--border-accent, rgba(255,255,255,0.2));
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.book-cover {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 2vw, 1.2rem);
  overflow: hidden;
  background: var(--bg-primary, #0d0d0f);
}

.book-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.6s ease;
  transform: translateZ(0);       /* GPU layer — prevents Safari repaint jank on hover */
}

.book-cell:hover .book-cover img {
  will-change: transform;  /* SC-07: only while hovering — no permanent GPU layer on idle covers (mirrors home.css) */
  transform: scale(1.04) translateZ(0);
}

.cover-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(13, 13, 15, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.book-cell:hover .cover-overlay {
  opacity: 1;
}

/* View label bumped (was 0.78rem → 0.88rem) */
.view-label {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg-primary, #0d0d0f);
  background: var(--accent, #f0d78c);
  padding: 0.75rem 1.5rem;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}

.book-cell:hover .view-label {
  transform: translateY(0);
}

/* Info strip — font sizes bumped two steps */
.book-info {
  flex: 0 0 auto;
  padding: clamp(0.6rem, 1.2vw, 1rem) clamp(0.7rem, 1.5vw, 1.3rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

/* was 0.62–0.75 → 0.76–0.88 */
.book-year {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: clamp(0.875rem, 3.5cqw, 1rem);
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* was 0.92–1.4 → 1.1–1.65 */
.book-title {
  font-family: var(--font-poetry, 'Cormorant Garamond', serif);
  font-size: clamp(1.1rem, 6cqw, 1.65rem);
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
}

/* was 0.58–0.7 → 0.72–0.84 */
.book-pub {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: clamp(0.875rem, 3cqw, 1rem);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* was 0.54–0.65 → 0.68–0.78 */
.book-lang {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: clamp(0.875rem, 2.5cqw, 1rem);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ============================================
   FILLER CELLS
   Override any portfolio.css rules:
   margin, display, inline-block — all zeroed
   ============================================ */
.filler-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin: 0;
}

.filler-cell:hover {
  transform: none;
}

.quote-cell {
  padding: clamp(0.7rem, 1.5vw, 1.5rem);
}

/* Desktop/laptop: 20px. Mobile breakpoints (≤768, ≤480, ≤360) override below. */
.quote-text {
  font-family: var(--font-poetry, 'Cormorant Garamond', serif);
  font-size: 1.25rem;              /* 20px — was clamp(1rem,5cqw,1.3rem)≈16px */
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.decor-cell {
  color: var(--accent);
}

.decor-cell svg {
  width: 55%;
  height: 55%;
}

.decor-rect {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: drawRect 4s ease-in-out infinite;
  animation-play-state: paused;
}
.books-grid.anim-running .decor-rect {
  animation-play-state: running;
}

@keyframes drawRect {
  0%, 100% { stroke-dashoffset: 240; }
  50%      { stroke-dashoffset: 0; }
}

.ornament-cell {
  position: relative;
  color: var(--accent);
}

.orn-corner {
  position: absolute;
  width: clamp(12px, 1.8vw, 22px);
  height: clamp(12px, 1.8vw, 22px);
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.4;
}

.orn-corner.tl { top: 8px;    left: 8px;  border-width: 1px 0 0 1px; }
.orn-corner.tr { top: 8px;    right: 8px; border-width: 1px 1px 0 0; }
.orn-corner.bl { bottom: 8px; left: 8px;  border-width: 0 0 1px 1px; }
.orn-corner.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.orn-center {
  width: clamp(22px, 2.5vw, 34px);
  height: clamp(22px, 2.5vw, 34px);
}

/* Book-spine SVG cells (bottom row fillers) */
.spine-cell {
  padding: clamp(0.5rem, 1vw, 1rem);
}

.spine-cell svg {
  width: 70%;
  height: 70%;
}

/* ============================================
   MODAL
   ============================================ */
.book-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Safari 14.0 — no inset shorthand */
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.book-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(13, 13, 15, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Safari perf: disable modal backdrop-filter on Apple devices (integrated GPU) */
.ua-webkit-apple .modal-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-container {
  position: relative;
  width: 92%;
  max-width: 1100px;
  max-height: 85vh;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  overflow: auto;
  transform: scale(0.95);
  transition: transform 0.5s ease;
}

.book-modal.active .modal-container {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  width: 44px; height: 44px;
  background: var(--bg-primary, #0d0d0f);
  border: 1px solid var(--accent, #f0d78c);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.modal-close:hover {
  background-color: var(--accent, #f0d78c);
  transform: scale(1.1);
}

.modal-close span {
  position: absolute;
  width: 18px; height: 2px;
  background-color: var(--accent, #f0d78c);
  transition: background-color 0.3s ease;
}

.modal-close:hover span { background-color: var(--bg-primary, #0d0d0f); }
.modal-close span:first-child { transform: rotate(45deg); }
.modal-close span:last-child  { transform: rotate(-45deg); }

.modal-content {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  min-height: 500px;
}

.modal-image {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-secondary);
}

.modal-image img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.modal-details {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-year {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.modal-title {
  font-family: var(--font-poetry, 'Cormorant Garamond', serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.4;
}

.modal-genre {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal-description {
  font-family: var(--font-poetry, 'Cormorant Garamond', serif);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.8;
  color: var(--text-secondary);
}

.modal-description p { margin-bottom: 1rem; }

.modal-meta {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: auto;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.meta-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-primary);
}

.modal-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
  align-self: flex-start;
}

.modal-buy-link:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

.modal-buy-link .buy-store {
  font-weight: 600;
}

.modal-buy-link .buy-arrow {
  transition: transform 0.3s ease;
}

.modal-buy-link:hover .buy-arrow {
  transform: translateX(3px);
}

/* ============================================
   FILTERED STATE
   ============================================ */
.books-grid.filtered {
  grid-template-areas: none !important;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
}

.books-grid.filtered .grid-cell {
  grid-area: auto !important;
}

.books-grid.filtered .book-cell {
  min-height: 380px;
}

.books-grid.filtered .filler-cell {
  min-height: 120px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet 769–1024px: 3-col — quotes full row so text isn’t squeezed */
@media (min-width: 769px) and (max-width: 1024px) {
  .books-collection {
    padding: 2rem clamp(0.5rem, 2.5vw, 1.5rem) 6rem;
  }

  .books-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none !important;
    grid-auto-rows: minmax(min-content, auto);
    grid-auto-flow: row;
    gap: clamp(0.4rem, 1.2vw, 0.8rem);
    max-width: 100%;
  }

  .books-grid .grid-cell {
    grid-area: auto !important;
  }

  .books-grid .quote-cell {
    grid-column: 1 / -1;
  }

  .books-grid .book-cell {
    aspect-ratio: unset;
    min-height: min(52vw, 340px);
  }

  .books-grid .filler-cell:not(.quote-cell) {
    min-height: clamp(100px, 22vw, 160px);
    aspect-ratio: unset;
  }

  .modal-content {
    grid-template-columns: 1fr;
  }

  .modal-image { height: 300px; }
  .modal-details { padding: 2rem; }

  .books-grid.filtered {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .books-grid.filtered .book-cell {
    min-height: min(52vw, 340px);
    aspect-ratio: unset;
  }
  .books-grid.filtered .filler-cell:not(.quote-cell) {
    min-height: clamp(100px, 22vw, 160px);
    aspect-ratio: unset;
  }
}

/* Mobile ≤768px: 2-col — books span 2 rows beside stacked fillers; quotes full width */
@media (max-width: 768px) {
  .books-hero {
    padding: 4.5rem var(--padding-mobile, 1.5rem) 3rem;
    min-height: 40vh;
  }

  .books-collection {
    padding: 1rem 0.35rem 4rem;
  }

  .collection-header {
    margin-bottom: 1rem;
  }

  .filter-tab {
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
  }

  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "b1  b2"
      "fa1 fa1"
      "fa2 fa3"
      "fb1 b3"
      "fb2 fb2"
      "fb3 b4"
      "b5  b6"
      "fc1 fc1"
      "fc2 fc3"
      "fd1 b7"
      "fd2 fd2"
      "fd3 b8"
      "b9  fe1"
      "fe2 fe3";
    grid-auto-rows: minmax(min-content, auto);
    gap: clamp(0.35rem, 2vw, 0.55rem);
    max-width: 100%;
  }

  .books-grid .grid-cell {
    overflow: visible;
  }

  .books-grid .book-cell .book-cover {
    overflow: hidden;
  }

  .books-grid .book-cell {
    aspect-ratio: unset;
    min-height: min(52vw, 260px);
    align-self: stretch;
  }

  .books-grid .quote-cell {
    min-height: auto;
    align-self: stretch;
  }

  .books-grid .filler-cell:not(.quote-cell) {
    aspect-ratio: unset;
    min-height: clamp(104px, 30vw, 168px);
    align-self: stretch;
  }

  .books-grid .filler-cell.spine-cell {
    min-height: clamp(120px, 34vw, 200px);
  }

  .quote-cell {
    padding: clamp(1rem, 4vw, 1.4rem);
  }

  .quote-text {
    font-size: clamp(1rem, 3.6vw, 1.12rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-height: none;
  }

  .book-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .book-cover {
    padding: clamp(0.3rem, 1.2vw, 0.7rem);
  }

  .book-info {
    padding: clamp(0.4rem, 0.9vw, 0.65rem) clamp(0.45rem, 1vw, 0.75rem);
    gap: 0.1rem;
  }

  .modal-content {
    grid-template-columns: 1fr;
  }

  /* Modal: pushed below nav on mobile */
  .book-modal {
    align-items: flex-start;
    padding-top: 4.5rem;
  }

  .modal-container {
    max-height: calc(100vh - 5rem);
    max-height: calc(100svh - 5rem);
  }

  .modal-close {
    width: 40px; height: 40px;
    top: 0.6rem; right: 0.6rem;
  }

  .modal-close span {
    width: 16px;
  }

  .modal-image {
    height: auto;
    max-height: 45vh;
    padding: 1rem;
  }

  .modal-image img {
    max-height: 40vh;
    width: auto;
    object-fit: contain;
  }

  .modal-meta { flex-wrap: wrap; gap: 1rem; }
  .modal-details { padding: 1.5rem; }
  .modal-title { font-size: 1.5rem; }

  .books-grid.filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .books-grid.filtered .book-cell {
    grid-row: span 2;
    min-height: 0;
    aspect-ratio: unset;
  }

  .books-grid.filtered .filler-cell:not(.quote-cell) {
    grid-row: span 1;
    min-height: clamp(104px, 30vw, 168px);
    aspect-ratio: unset;
  }

  .books-grid.filtered .filler-cell.quote-cell {
    grid-column: 1 / -1;
  }
}

/* Phone ≤480px: 2 columns for books/fillers — ~2+ books visible; quotes full width; cap cover height */
@media (max-width: 480px) {
  .books-hero {
    padding: 4.5rem 0.4rem 1rem;
    min-height: 15vh;
  }

  .books-hero-title {
    font-size: 2rem;
  }

  .hero-ornament {
    width: 100px;
    margin-top: 1rem;
  }

  .books-collection {
    padding: 0.8rem 0.45rem 3rem;
  }

  .collection-header {
    margin-bottom: 0.8rem;
  }

  .filter-tabs {
    gap: 0.15rem;
    padding: 0.2rem;
  }

  .filter-tab {
    padding: 0.38rem 0.55rem;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }

  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0.4rem;
    padding: 0;
    justify-items: stretch;
  }

  .books-grid .grid-cell {
    width: 100%;
    max-height: none;
    justify-self: stretch;
  }

  .books-grid .book-cell {
    aspect-ratio: unset;
    min-height: auto;
  }

  /* Don’t let the cover flex-grow to fill the screen */
  .books-grid .book-cell .book-cover {
    flex: 0 0 auto;
    min-height: 0;
    max-height: min(34vh, 200px);
    padding: 0.3rem 0.35rem;
  }

  .books-grid .book-cell .book-cover img {
    max-height: min(32vh, 190px);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .books-grid .filler-cell:not(.quote-cell) {
    min-height: clamp(72px, 20vw, 118px);
    max-height: none;
  }

  .books-grid .filler-cell.spine-cell {
    min-height: clamp(84px, 24vw, 140px);
  }

  .book-info {
    padding: 0.4rem 0.45rem;
    gap: 0.1rem;
  }

  .book-title {
    font-size: clamp(0.875rem, 3.4vw, 1.125rem);
    line-height: 1.4;
  }

  .book-year { font-size: 0.875rem; }
  .book-pub,
  .book-lang { font-size: 0.875rem; }

  .quote-cell {
    padding: clamp(0.85rem, 3.5vw, 1.1rem);
  }

  .quote-text {
    font-size: clamp(0.875rem, 3.8vw, 1rem);
    line-height: 1.5;
  }

  .decor-cell svg {
    width: min(42%, 72px);
    height: min(42%, 72px);
  }

  .orn-center {
    width: 22px;
    height: 22px;
  }

  .orn-corner {
    width: 8px;
    height: 8px;
  }

  .orn-corner.tl { top: 5px; left: 5px; }
  .orn-corner.tr { top: 5px; right: 5px; }
  .orn-corner.bl { bottom: 5px; left: 5px; }
  .orn-corner.br { bottom: 5px; right: 5px; }

  .books-grid.filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .books-grid.filtered .quote-cell {
    grid-column: 1 / -1 !important;
  }

  .books-grid.filtered .book-cell,
  .books-grid.filtered .filler-cell:not(.quote-cell) {
    grid-column: auto !important;
    grid-row: span 1 !important;
    max-height: none;
    aspect-ratio: unset;
  }

  .books-grid.filtered .filler-cell:not(.quote-cell) {
    min-height: clamp(72px, 20vw, 118px);
  }
}

/* Tiny phones ≤360px */
@media (max-width: 360px) {
  .books-grid .book-cell {
    min-height: auto;
  }

  .books-grid .book-cell .book-cover {
    max-height: min(30vh, 176px);
  }

  .books-grid .book-cell .book-cover img {
    max-height: min(28vh, 168px);
  }

  .book-title {
    font-size: 0.875rem;
  }

  .quote-text {
    font-size: 0.875rem;
  }
}