/* Phones get the desktop shelf: one angled row, sized to the screen. A tap lifts a book into focus; a second tap opens it. */
@media (max-width: 760px) {
  .work--hero .bookshelf, .section-mode .work--hero .bookshelf {
    --book-h: min(calc((100vw - 3.4rem) / 1.08), calc(100svh - 22rem), 320px);
    display: flex; grid-template-columns: none; justify-content: center; align-items: center;
    gap: calc(var(--book-h) * .025); min-height: calc(var(--book-h) * 1.12); padding-bottom: calc(var(--book-h) * .07);
  }
  .work--hero .books-stage { padding: 1rem 0 1.2rem; }
  .bookshelf .book, .bookshelf .book:focus-visible { width: calc(var(--book-h) * .31); }
  .bookshelf .book-object, .bookshelf .book:focus-visible .book-object { margin-left: calc(var(--book-h) * -.027); }
  .bookshelf .book-spine, .bookshelf .book:focus-visible .book-spine { transform: rotateY(-30deg); }
  .bookshelf .book-cover, .bookshelf .book:focus-visible .book-cover { transform: rotateY(81deg); }
  .section-mode .work--hero .books-hint { font-size: .6rem; margin-top: 1rem; }
}
/* The veil and note exist for touch only; elsewhere they stay out of the layout. */
.book-focus-veil, .book-focus-note { display: none; }
@media (pointer: coarse) {
  .book-focus-veil, .book-focus-note { display: block; }
  .bookshelf .book { transition: opacity .5s ease; }
  .bookshelf .book .book-spine, .bookshelf .book .book-cover, .bookshelf .book .book-object { transition-duration: .9s; transition-timing-function: cubic-bezier(.45, .05, .2, 1); }
  .bookshelf.has-focus .book:not(.is-focused) { opacity: 0; pointer-events: none; }
  .bookshelf .book.is-focused {
    position: fixed; left: 50%; top: 44%; z-index: 52; width: calc(var(--book-h) * .8); height: var(--book-h);
    transform: translate(-50%, -50%) scale(var(--focus-scale, 1.6)); transition: none;
  }
  .bookshelf .book.is-focused .book-object { margin-left: calc(var(--book-h) * -.2); animation: none; }
  .bookshelf .book.is-focused .book-spine { transform: rotateY(-90deg); }
  .bookshelf .book.is-focused .book-cover { transform: rotateY(0deg); filter: brightness(1); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
  .book-focus-veil { position: fixed; inset: 0; z-index: 50; background: rgba(18, 14, 11, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
  .book-focus-veil.is-on { opacity: 1; pointer-events: auto; }
  .book-focus-note {
    position: fixed; z-index: 53; left: 50%; top: calc(44% + var(--note-offset, 200px)); transform: translateX(-50%);
    margin: 0; width: max-content; color: #d9d1c2; font: 500 1.5rem/1.1 "Caveat", cursive; text-align: center; pointer-events: none;
    opacity: 0; translate: 0 10px; transition: opacity .4s ease .35s, translate .5s cubic-bezier(.2,.8,.2,1) .35s;
  }
  .book-focus-note.is-on { opacity: 1; translate: 0 0; }
  .book-focus-note span { display: block; transform: rotate(-4deg); }
  .book-focus-note svg { display: block; width: 64px; height: 44px; margin: -.1rem auto 0; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
  html.book-focus .frame, html.book-focus .section-controls { visibility: hidden; }
  html.book-focus body::before, html.book-focus body::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bookshelf .book, .bookshelf .book.is-focused, .book-focus-veil, .book-focus-note { transition: none; }
}