/* The workbook: a sea-glass table with the cover and three pages dealt onto it. Product images land in img/product/. */
.workbook { margin-top: var(--section-gap); padding: var(--s8) var(--gutter) var(--s9); background: var(--sea-100); }
.workbook__grid { max-width: 1296px; margin-inline: auto; display: grid; gap: var(--s7); }
.shelf { display: grid; gap: var(--s5); }
.cover, .preview { background: var(--paper); border-radius: 2px; box-shadow: var(--card-shadow); padding: 10px; transform: rotate(var(--tilt)); }
.cover { width: 84%; margin-left: auto; }
.cover img, .preview img { width: 100%; height: auto; aspect-ratio: 11 / 8.5; object-fit: cover; background: #fff; color: transparent; font-size: 0; }
.previews { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter) var(--s5); }
.previews::-webkit-scrollbar { display: none; }
.previews li { flex: none; width: 72vw; scroll-snap-align: center; display: grid; gap: var(--s3); align-content: start; }
.preview.crop img { aspect-ratio: var(--ar); }
@media (min-width: 900px) { .preview.crop img { aspect-ratio: 11 / 8.5; } }
.preview { display: block; width: 100%; border: 0; cursor: zoom-in; transition: transform 200ms var(--ease-out); }
.cap { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); padding-inline: var(--s1); }
.workbook__info { display: grid; gap: var(--s4); align-content: start; }
.tagline { font-size: var(--fs-lede); line-height: 1.35; max-width: 40ch; }
.inside { display: grid; gap: var(--s3); }
.inside li { display: flex; gap: var(--s3); align-items: flex-start; }
.inside li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 0.2em; border: 1.5px solid var(--sea-700); border-radius: 2px; background: var(--white); }
.format { color: var(--muted); }
.price { font-size: var(--fs-h2); font-weight: 800; line-height: 1; }
.workbook .btn { width: min(100%, 340px); justify-self: start; }
@media (min-width: 900px) {
  .workbook { padding-block: var(--s9); }
  .workbook__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .shelf { grid-column: 1 / 8; gap: 0; }
  .cover { width: 76%; margin: 0; padding: 16px; position: relative; z-index: 1; }
  .previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); overflow: visible; margin: -28px 0 0; padding: 0 0 0 var(--s7); }
  .previews li { width: auto; }
  .workbook__info { grid-column: 9 / 13; }
}
@media (hover: hover) and (pointer: fine) {
  .preview:hover, .preview:focus-visible { transform: translateY(-8px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .preview { transition: none; } .preview:hover { transform: rotate(var(--tilt)); } }