@property --cm{syntax: "<length>"; inherits: true; initial-value: 12.8px;}.bookshelf{container-type:inline-size}.shelf{--lean: 90deg;display:flex;flex-direction:column;gap:4rem}.shelf-level{position:relative}.shelf-level:has([aria-expanded=true]){z-index:1}.shelf-row{position:relative;z-index:1;display:flex;align-items:flex-end;gap:0;padding-inline:1.5rem}.decor{flex-shrink:0;width:calc(var(--w) * var(--cm));height:calc((var(--h) + var(--drop)) * var(--cm));margin-bottom:calc(var(--drop) * var(--cm) * -1);margin-inline:1.25rem}.decor img{width:100%;height:100%}.book-slot{--W: calc(var(--w) * var(--cm));--H: calc(var(--h) * var(--cm));--D: max(var(--d) * var(--cm), 1.5rem);--fw: calc(var(--W) * cos(var(--lean)) + var(--D) * sin(var(--lean)));--tip: 0deg;position:relative;flex-shrink:0;width:calc(var(--fw) * cos(var(--tip)) + var(--H) * sin(var(--tip)));height:calc(var(--H) * cos(var(--tip)) + var(--fw) * sin(var(--tip)))}.pose-1,.pose-3{--tip: 12deg}.pose-2{--lean: 0deg}.pose-1 .book-hit{left:calc(var(--fw) * cos(var(--tip)) - var(--fw));transform-origin:bottom right;rotate:var(--tip)}.pose-3 .book-hit{left:calc(var(--H) * sin(var(--tip)));transform-origin:bottom left;rotate:calc(var(--tip) * -1)}.book-slot .book-hit[aria-expanded=true]{rotate:0deg}.book-hit{position:absolute;bottom:0;left:0;width:var(--fw);height:var(--H);display:block;cursor:pointer;transition:rotate .65s var(--ease-out-strong);perspective:1400px;perspective-origin:50% 30%}.book-slot:has(.book-hit:hover,.book-hit:focus-visible){z-index:1}.book-slot:has([aria-expanded=true]){z-index:2}.book{position:absolute;bottom:0;left:50%;width:var(--W);height:var(--H);margin-left:calc(var(--W) / -2);transform-style:preserve-3d;translate:0 0 calc(var(--W) / -2 * sin(var(--lean)));rotate:y var(--lean);transition:translate .65s var(--ease-out-strong),rotate .65s var(--ease-out-strong)}.book-hit:hover .book,.book-hit:focus-visible .book{translate:0 -.4rem calc(var(--W) / -2 * sin(var(--lean)) + 1rem)}[aria-expanded=true] .book{translate:0 -2rem 9rem;rotate:y -14deg}.book-hit:focus-visible{outline:none}.book-hit:focus-visible .book-spine{outline:2px solid black;outline-offset:2px}.book-face{position:absolute;display:block;backface-visibility:hidden}.book-cover{inset:0;width:100%;height:100%;object-fit:cover;border-radius:0 2px 2px 0;translate:0 0 calc(var(--D) / 2)}.book:after{content:"";position:absolute;inset:0;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#0000 2.5%,#00000038 3.5%,#ffffff30 5%,#0000 8%),linear-gradient(115deg,#ffffff1f,#0000 40% 70%,#00000014);translate:0 0 calc(var(--D) / 2 + .5px);backface-visibility:hidden;pointer-events:none}.book-back{inset:0;background:var(--spine);rotate:y 180deg;translate:0 0 calc(var(--D) / -2)}.book-spine{top:0;left:calc(var(--W) / 2 - var(--D) / 2);width:var(--D);height:100%;rotate:y -90deg;translate:calc(var(--W) / -2) 0 0;display:flex;align-items:center;justify-content:space-between;gap:max(.25rem,.6 * var(--cm));padding-inline:max(.4rem,1.75 * var(--cm));overflow:hidden;writing-mode:vertical-rl;color:var(--ink);font-family:var(--font-grotesk);background:linear-gradient(90deg,#00000059,#0000 22%,#ffffff26 45%,#0000 70%,#0006),var(--spine)}.book-spine-title{flex:0 0 auto;max-inline-size:100%;font-size:clamp(.45rem,min(var(--D) * .42,1.1 * var(--cm)),.8rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-spine-author{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.4rem,min(var(--D) * .32,.85 * var(--cm)),.65rem);letter-spacing:.04em;white-space:nowrap;opacity:.8}.spine-vintage .book-spine-title{font-family:var(--font-serif);font-weight:400;letter-spacing:.01em;text-transform:none}.spine-vintage .book-spine-author{font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:1}.spine-penguin-select .book-spine-title{font-family:var(--font-serif);font-weight:400;letter-spacing:.02em}.spine-penguin-select .book-spine-author{font-family:var(--font-serif);font-style:italic;letter-spacing:0;opacity:1}.spine-vincent .book-spine-title,.spine-vincent .book-spine-author{font-family:var(--font-serif);font-weight:400;text-transform:none;opacity:1}.spine-vincent .book-spine-title{letter-spacing:.02em}.spine-death-note .book-spine-title{font-family:var(--font-serif);font-size:clamp(.5rem,min(var(--D) * .55,1.4 * var(--cm)),1.05rem);letter-spacing:.04em}.book-pages{top:2px;left:calc(var(--W) / 2 - var(--D) / 2);width:var(--D);height:calc(100% - 4px);rotate:y 90deg;translate:calc(var(--W) / 2 - 2px) 0 0;background:linear-gradient(90deg,#0000004d,#0000 25% 75%,#00000040),repeating-linear-gradient(90deg,#f6f1e4 0 1px,#ddd4bf 1px 2px)}.book-top{top:calc(var(--H) / 2 - var(--D) / 2);left:0;width:calc(100% - 2px);height:var(--D);rotate:x 90deg;translate:0 calc(var(--H) / -2 + 1px) 0;background:repeating-linear-gradient(0deg,#f6f1e4 0 1px,#ddd4bf 1px 2px)}.shelf-plank{--top: 1.25rem;--edge: 1.1rem;height:calc(var(--top) + var(--edge));margin-top:calc(var(--top) * -.6);filter:drop-shadow(0 10px 10px #0000003d)}.shelf-plank:before{content:"";display:block;height:100%;clip-path:polygon(.75rem 0,calc(100% - .75rem) 0,100% var(--top),100% 100%,0 100%,0 var(--top));background:linear-gradient(#0000004d,#0000 40%) 0 0 / 100% var(--top) no-repeat,linear-gradient(#0000 calc(var(--top) - 1px),#ffffff59 calc(var(--top) - 1px) calc(var(--top) + 1px),#0000 0),linear-gradient(#0000 var(--top),#ffffff26 var(--top),#0000 calc(var(--top) + .35rem)),repeating-linear-gradient(90deg,#0000 0 37px,#00000010 37px 39px,#0000 39px 83px),linear-gradient(#a8784f,#c39468 var(--top),#b0815a var(--top),#8a5f3c)}@media(prefers-reduced-motion:reduce){.book,.book-hit{transition:none}}