/* LI10: the book shop grid + the pinned Audio & eBook slide (dark tokens: --room-library, --room-library-card, --line, --tx-*, --brass, --btn) */

/* ---------- shop cards: one clean responsive grid, no skew, same cover box, price + Buy on one row ---------- */
.books{padding-bottom:clamp(4rem,6vw,8rem);background:var(--room-library,#10131A)}
.books .book{background:var(--room-library-card,#161A23)}
.books__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;max-width:none;margin-inline:0;padding-bottom:0;transform:none}
.books__cards .book{--n:2;flex:0 0 calc((100% - (var(--n) - 1) * 2rem) / var(--n));min-width:0;transform:none!important;rotate:none!important;padding:1.2rem 1.2rem 1.6rem;gap:.9rem;transition:transform .45s var(--cl-ease),box-shadow .45s var(--cl-ease)}
@media (min-width:860px){.books__cards .book{--n:3}}
@media (min-width:1280px){.books__cards .book{--n:5}}
.books__cards .book__cover{aspect-ratio:3/4;width:100%;display:grid;place-items:center;padding:1.2rem;background:var(--room-library,#10131A);box-shadow:inset 0 0 2.4rem rgb(5 4 3 / .55);overflow:hidden}
.books__cards .book__cover img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 .9rem 1.4rem rgb(5 4 3 / .65))}
.books__cards .book__cover .typo-cover{aspect-ratio:3/4;height:100%;width:auto;max-width:100%;padding:.6rem;gap:1rem;outline-offset:-.5rem;box-shadow:0 .9rem 1.4rem rgb(5 4 3 / .6)}
.books__cards .typo-cover__title{font-size:clamp(1.5rem,1.45vw,2.4rem);letter-spacing:.02em;overflow-wrap:break-word;hyphens:none}
.books__cards .typo-cover__by{font-size:1rem;letter-spacing:.14em}
.books__cards .typo-cover__rule{width:3rem}
.books__cards .book h3{font-size:clamp(1.8rem,1.55vw,2.4rem);line-height:1.1;margin:.4rem 0 0;min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.books__cards .book__by{margin-top:0;font-size:1.4rem}
.book__buy{margin-top:auto;padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap}
.book__buy .book__price{margin:0;font-size:1.7rem}
.book__buy .book__acts{margin:0;padding:0;flex:none}
.book__buy .act--buy{padding:.95rem 1.8rem}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not(.cl-reduce) .books__cards .book:hover{transform:translateY(-.5rem)!important}
}
@media (max-width:640px){
  .books__cards{gap:1.2rem}
  .books__cards .book{flex-basis:calc((100% - 1.2rem) / 2);padding:1rem 1rem 1.3rem}
  .books__cards .book__cover{padding:.8rem}
  .books__cards .book h3{font-size:1.65rem}
  .books__cards .book__by{font-size:1.25rem}
  .book__buy .book__price{font-size:1.5rem}
  .book__buy .act--buy{padding:.85rem 1.5rem;font-size:1.2rem}
}

/* ---------- Audio & eBook: pinned sideways slide, same feel as the treasures ---------- */
.lib-section{position:relative;background:var(--room-library,#10131A);color:var(--tx-mid)}
.lib-pin{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--room-library,#10131A);padding:clamp(7rem,10vh,9rem) 0 clamp(1.6rem,3vh,3rem)}
.lib-view{flex:1 1 0;min-height:0;display:flex;align-items:stretch;overflow:hidden;outline:0}
.lib-track{display:flex;align-items:stretch;gap:clamp(2.4rem,3.2vw,5.2rem);width:max-content;height:100%;padding:1.4rem clamp(2rem,6vw,9.6rem);will-change:transform}
.lib-intro{flex:0 0 auto;align-self:center;width:min(36vw,52rem);padding-right:clamp(2rem,4vw,6rem)}
.lib-intro .eyebrow{margin:0 0 1.6rem}
.lib-intro h2{font-size:clamp(3.8rem,5.4vw,8.4rem);line-height:.96;text-transform:uppercase;letter-spacing:.005em;margin:0 0 2.4rem;color:var(--tx-hi)}
.lib-lead{font:400 clamp(1.7rem,1.3vw,2rem)/1.5 var(--sans);max-width:30ch;color:var(--tx-mid);margin:0}
.lib-cue{display:inline-block;margin-top:clamp(2rem,4vh,4rem);font:600 1.2rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);padding-right:7rem;position:relative}
.lib-cue::after{content:"";position:absolute;right:0;top:50%;width:5.2rem;height:1px;background:var(--brass);transform-origin:left;animation:lib-cue 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes lib-cue{0%{transform:scaleX(.15)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.2}}
.lib-list{display:flex;align-items:stretch;gap:clamp(2rem,2.4vw,3.6rem);list-style:none;margin:0;padding:0}
.lib-end{flex:0 0 clamp(1rem,4vw,8rem);height:1px}

.lib-tile{flex:0 0 auto;width:clamp(25rem,21vw,34rem);max-height:64rem;background:var(--room-library-card,#161A23);color:var(--tx-mid);padding:1.3rem 1.3rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 1.6rem 4rem rgb(5 4 3 / .45),inset 0 0 0 1px var(--line);transition:transform .45s var(--cl-ease),box-shadow .45s var(--cl-ease)}
.lib-tile__cover{position:relative;flex:1 1 0;min-height:10rem;display:block;background:var(--room-library,#10131A);padding:1.2rem;box-shadow:inset 0 0 2.4rem rgb(5 4 3 / .55);overflow:hidden}
.lib-tile__cover img{position:absolute;top:1.2rem;left:1.2rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem);object-fit:contain;object-position:center;filter:drop-shadow(0 .9rem 1.4rem rgb(5 4 3 / .65));-webkit-user-drag:none}
.lib-tile__cover .typo-cover{position:absolute;top:1.2rem;bottom:1.2rem;left:50%;transform:translateX(-50%);aspect-ratio:3/4;height:calc(100% - 2.4rem);max-width:calc(100% - 2.4rem);width:auto;padding:.6rem;gap:1rem;box-shadow:0 .9rem 1.4rem rgb(5 4 3 / .6)}
.lib-tile__cover .typo-cover{outline-offset:-.5rem}
.lib-tile__cover .typo-cover__title{font-size:clamp(1.5rem,1.45vw,2.4rem);letter-spacing:.02em;overflow-wrap:break-word;hyphens:none}
.lib-tile__cover .typo-cover__by{font-size:1rem;letter-spacing:.14em}
.lib-tile__cover .typo-cover__rule{width:3rem}
.lib-tile__title{font:600 clamp(1.9rem,1.5vw,2.4rem)/1.1 var(--serif);color:var(--tx-hi);text-transform:none;letter-spacing:0;margin:.3rem 0 0;min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-tile__by{font:400 1.35rem/1.2 var(--sans);color:var(--tx-low);margin:-.2rem 0 0}
.lib-chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:.1rem 0 0;padding:0}
.lib-chips li{font:600 1.05rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);border:1px solid rgb(201 166 107 / .55);border-radius:999px;padding:.5rem .95rem}
.lib-tile__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:auto;padding-top:.8rem}
.lib-act{font:600 1.2rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:var(--brass);background:none;border:0;border-bottom:1px solid var(--brass);padding:.5rem 0;white-space:nowrap;transition:color .25s var(--cl-ease),border-color .25s var(--cl-ease),background-color .25s var(--cl-ease)}
.lib-act:hover{color:var(--tx-hi);border-color:var(--tx-hi)}
.lib-act--listen{background:var(--btn);color:var(--ground);border:0;border-radius:999px;padding:.9rem 1.9rem}
.lib-act--listen:hover{background:var(--tx-hi);color:var(--ground)}
.lib-tile.is-playing{box-shadow:0 1.6rem 4rem rgb(5 4 3 / .45),inset 0 0 0 1px var(--brass)}
.lib-act:focus-visible,.lib-player__play:focus-visible,.lib-player__bar:focus-visible,.lib-view:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not(.cl-reduce) .lib-tile:hover{transform:translateY(-.6rem);box-shadow:0 2.4rem 5rem rgb(5 4 3 / .55),inset 0 0 0 1px var(--line-hi)}
}
@media (max-height:640px) and (min-width:768px){
  .lib-pin{padding-top:7rem}
  .lib-tile{padding:1rem 1rem 1.2rem;gap:.55rem}
  .lib-tile__cover{min-height:8rem}
  .lib-tile__cover img{top:.8rem;left:.8rem;width:calc(100% - 1.6rem);height:calc(100% - 1.6rem)}
  .lib-tile__cover .typo-cover{top:.8rem;bottom:.8rem;height:calc(100% - 1.6rem);max-width:calc(100% - 1.6rem);padding:.4rem;gap:.6rem}
  .lib-tile__cover .typo-cover__title{font-size:1.05rem;letter-spacing:0}
  .lib-tile__cover .typo-cover__by{font-size:.8rem;letter-spacing:.08em}
  .lib-tile__cover .typo-cover__rule{width:2rem}
  .lib-tile__title{font-size:1.8rem}
  .lib-chips li{padding:.4rem .8rem}
  .lib-player{padding-block:.8rem}
  .lib-player__play{width:4.2rem;height:4.2rem}
}

/* the shared player bar: stays in view under the shelf */
.lib-player{flex:none;margin:clamp(1rem,2vh,1.8rem) clamp(2rem,6vw,9.6rem) 0;display:grid;grid-template-columns:auto minmax(0,1.1fr) auto minmax(8rem,2fr) auto;align-items:center;gap:1.6rem;background:var(--room-library-card,#161A23);border:1px solid var(--line);box-shadow:0 2rem 5rem rgb(5 4 3 / .4);padding:1rem 2rem 1rem 1rem}
.lib-player__cover{width:4.6rem;aspect-ratio:3/4;object-fit:cover;background:var(--room-library,#10131A);box-shadow:0 .6rem 1.4rem rgb(5 4 3 / .6)}
.lib-player__kicker{font:600 1.05rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 .5rem}
.lib-player__title{font:600 clamp(1.9rem,1.6vw,2.4rem)/1.1 var(--serif);color:var(--tx-hi);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-player__play{width:4.8rem;height:4.8rem;border-radius:50%;border:0;background:var(--btn);color:var(--ground);display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color .25s var(--cl-ease)}
.lib-player__play:hover{background:var(--tx-hi)}
.lib-player__play svg{fill:currentColor}
.lib-player__play .i-pause{display:none}
.lib-player__play[aria-pressed="true"] .i-pause{display:block}
.lib-player__play[aria-pressed="true"] .i-play{display:none}
.lib-player__bar{position:relative;height:.6rem;background:var(--line);border-radius:3px;cursor:pointer}
.lib-player__bar::before{content:"";position:absolute;inset:-1.2rem 0}
.lib-player__fill{display:block;height:100%;width:0;background:var(--brass);border-radius:3px}
.lib-player__time{font:500 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--tx-mid);white-space:nowrap}

/* narrow screens / reduced motion / no ScrollTrigger: a plain swipe row (no pin) */
.lib-native .lib-pin{height:auto;display:block;overflow:visible;padding:clamp(6rem,10vw,9rem) 0 clamp(5rem,8vw,8rem)}
.lib-native .lib-view{scroll-padding-inline:var(--gutter);display:block;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lib-native .lib-track{height:auto;align-items:flex-start;gap:1.6rem;padding:1.4rem var(--gutter) 2.4rem}
.lib-native .lib-intro{width:min(72vw,34rem);scroll-snap-align:start;padding-right:0}
.lib-native .lib-intro h2{font-size:clamp(3.4rem,10vw,6rem)}
.lib-native .lib-list{align-items:flex-start;gap:1.6rem}
.lib-native .lib-tile{width:calc((100vw - 2 * var(--gutter) - 1.6rem) / 2.1);max-height:none;scroll-snap-align:start}
@media (min-width:640px){.lib-native .lib-tile{width:calc((100vw - 2 * var(--gutter) - 4rem) / 3.3)}}
.lib-native .lib-tile__cover{flex:none;aspect-ratio:3/4;min-height:0;padding:.9rem}
.lib-native .lib-tile__cover .typo-cover{height:calc(100% - 1.8rem);top:.9rem;bottom:.9rem}
.lib-native .lib-tile__cover img{top:.9rem;left:.9rem;width:calc(100% - 1.8rem);height:calc(100% - 1.8rem)}
.lib-native .lib-player{margin:1.6rem var(--gutter) 0}
@media (prefers-reduced-motion:reduce){.lib-cue::after{animation:none}}
@media (max-width:640px){
  .lib-player{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c m p" "b b t";row-gap:1.4rem;padding:1rem}
  .lib-player__cover{grid-area:c}.lib-player__meta{grid-area:m;min-width:0}.lib-player__play{grid-area:p}
  .lib-player__bar{grid-area:b}.lib-player__time{grid-area:t;justify-self:end;margin-top:-.4rem}
}