/* «Уроки»: полка «Книги, которые стоит прочитать вокалисту» (03.10.2026, его референс – видео FAVORITE BOOKS с Pinterest):
   книги стоят корешками, по очереди одна «выезжает» и разворачивается обложкой, потом встаёт обратно. Нажатие или
   наведение на корешок открывает эту книгу. Обложки Юссона, Дмитриева, Морозова и Садолин – снимки, у Емельянова и
   Сета Риггза – строгие текстовые обложки. Скрипт – vk-books-1.js. */
.vb { background: #000; color: #fff; padding: 90px 0 80px; font-family: 'Noto Sans', Arial, sans-serif; overflow: hidden; }
.vb__head { text-align: center; padding: 0 20px; }
.vb__title { margin: 0; font-weight: 300; font-size: clamp(22px, 3.2vw, 38px); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.vb__line { display: block; width: min(520px, 80%); height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, #e00000, transparent); }
.vb__shelf { --h: 300px; display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 60px auto 0; padding: 0 16px; height: var(--h); }
.vb__bk { position: relative; flex: none; width: var(--sp); height: var(--h); perspective: 1100px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: width .75s cubic-bezier(.22, 1, .36, 1); outline: none; }
.vb__bk.is-open { width: var(--cw); }
.vb__bk:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
/* корешок */
.vb__sp { position: absolute; left: 0; top: 0; width: var(--sp); height: 100%; box-sizing: border-box; display: flex; justify-content: center; padding: 16px 0;
  background: var(--c); color: var(--t); transform-origin: right center; backface-visibility: hidden;
  box-shadow: inset -6px 0 10px rgba(0, 0, 0, .18), inset 4px 0 6px rgba(255, 255, 255, .08);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .45s; }
.vb__sp span { writing-mode: vertical-rl; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.vb__sp small { font-weight: 400; opacity: .7; margin-top: 10px; }
.vb__bk.is-open .vb__sp { transform: rotateY(-90deg); opacity: 0; }
/* обложка */
.vb__fr { position: absolute; left: 0; top: 0; width: var(--cw); height: 100%; transform-origin: left center; transform: rotateY(90deg); opacity: 0; backface-visibility: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .35s .05s; }
.vb__bk.is-open .vb__fr { transform: none; opacity: 1; }
.vb__fr img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* текстовая обложка */
.vb__fr--txt { box-sizing: border-box; padding: 22px 18px; display: flex; flex-direction: column; background: var(--fc, #f2f2f2); color: var(--ft, #000); }
.vb__fr--txt b { font-weight: 700; font-size: 30px; line-height: .98; letter-spacing: -.02em; }
.vb__fr--txt i { font-style: normal; font-size: 12px; line-height: 1.35; margin-top: 12px; opacity: .75; }
.vb__fr--txt em { font-style: normal; margin-top: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #e00000; }
.vb__note { text-align: center; margin: 34px auto 0; padding: 0 20px; max-width: 640px; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.6; }
.vb__note b { color: #fff; font-weight: 400; }
@media (max-width: 767px) {
  .vb { padding: 64px 0 56px; }
  /* обложки выше на 30% (04.10.2026, его просьба): 200 → 260 px; на узких экранах – сколько позволяет ширина полки
     (обложка растёт вместе с высотой, пропорции не меняются; корешки уже, чтобы раскрытая книга помещалась) */
  .vb__shelf { --h: min(260px, calc((100vw - 196px) / .75)); gap: 5px; margin-top: 44px; padding: 0 10px; }
  .vb__bk:not(.is-open), .vb__sp { width: calc(var(--sp) * .62); }
  .vb__sp span { font-size: 10.5px; }
  .vb__fr--txt b { font-size: 27px; }
  .vb__fr--txt i { font-size: 15px; }
  .vb__fr--txt em { font-size: 13.5px; }
  .vb__fr--txt { padding: 20px 17px; }
}
@media (max-width: 360px) {
  .vb__shelf { --h: min(214px, calc((100vw - 187px) / .75)); gap: 4px; padding: 0 8px; }
  .vb__sp span { font-size: 9.5px; }
  .vb__fr--txt b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .vb__bk, .vb__sp, .vb__fr { transition: none; } }