/* Three-books motif with the falling books (MO-01–03, MX-07). Ported from the prototype (public/assets/site.css,
   ddf9b78). Script: assets/js/falling-books.js. */
.book-motif { width: min(350px, 100%); margin-bottom: var(--within-gap); }
.book-motif > svg { display: block; width: 100%; height: auto; overflow: visible; }
.falling-book rect { stroke: none; }
/* All three titles in Barlow at 24px (DM Serif Display is for H1 only, client feedback 12 Oct 2026):
   large text at any weight, so white on the Bronze book meets CL-05. */
.falling-book text { fill: currentColor; font-family: var(--font-body); font-size: 24px; font-weight: 400; dominant-baseline: central; }
.book-top { color: var(--color-text-inverse); }
.book-top rect { fill: var(--color-text); }
/* The title on the Bronze book is large text (CL-05): 24px in the SVG, and the motif never renders
   below 350px wide on phones from 360px up. */
.book-middle { color: var(--color-accent-text); }
.book-middle rect { fill: var(--color-accent); }
.book-bottom { color: var(--color-text); }
.book-bottom rect { fill: var(--color-surface-alt); stroke: var(--color-text); stroke-width: 1; }

/* Standing books (MX-07, desktop and tablet) reach about 121px above the motif and 37px to the
   left of it: keep them clear of the section above and inside the viewport. */
@media (min-width: 768px) and (max-width: 1259px) {
  .book-motif { margin-left: 24px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .book-motif { margin-top: 56px; }
}
@media (max-width: 767px) {
  .book-motif { width: 350px; max-width: 100%; overflow: hidden; }
  .book-motif > svg { overflow: hidden; }
}