.book-shelf{--book-shelf-gap: clamp(.15rem, 1.2vw, .2rem);--book-spine-height-short: clamp(18rem, 31vw, 24rem);--book-spine-height-medium: clamp(19rem, 32.5vw, 25rem);--book-spine-height-tall: clamp(20rem, 34vw, 26rem);--book-spine-radius: .55rem;width:100%}.book-shelf__header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-block-end:clamp(1rem,2vw,1.75rem)}.book-shelf__title{margin:0;color:var(--color-2);font-family:var(--font-family-mono);font-size:var(--font-large);font-weight:800;line-height:1;text-transform:uppercase}.book-shelf__note{margin:0;color:var(--color-3);font-family:var(--font-family-sans);font-size:var(--font-small);text-align:right}.book-shelf__grid{display:grid;grid-template-columns:repeat(5,max-content);justify-content:center;align-items:end;gap:var(--book-shelf-gap);list-style:none;margin:0;padding:clamp(.75rem,2vw,1.5rem) 0 1.25rem}.book-shelf__item{display:flex;align-items:end;min-width:0;transform:translateZ(0);will-change:auto}.book-shelf__item[data-dragging=true]{position:relative;z-index:3;opacity:.9;transition:none;will-change:transform}.book-shelf__item[data-dropping=true]{position:relative;z-index:3;will-change:transform}.book-shelf__item[data-animating=true]{transition:transform .22s cubic-bezier(.77,0,.175,1);will-change:transform}.book-shelf__empty{margin:0;color:var(--color-3);font-family:var(--font-family-sans);font-size:var(--font-small)}.book-spine{--book-spine-height: var(--book-spine-height-medium);--book-spine-mobile-height: 4.75rem;--book-spine-tilt: 0deg;--book-spine-paper: color-mix(in srgb, var(--book-spine-accent) 58%, var(--color-1));--book-spine-shadow: color-mix(in srgb, var(--book-spine-base) 70%, black);position:relative;isolation:isolate;display:block;width:var(--book-spine-width);height:var(--book-spine-height);overflow:hidden;border:1px solid color-mix(in srgb,var(--book-spine-accent) 38%,var(--color-5));border-radius:var(--book-spine-radius);color:var(--book-spine-paper);background:radial-gradient(circle at 35% 16%,rgba(255,255,255,.11) 0 .06rem,transparent .07rem),radial-gradient(circle at 72% 42%,rgba(0,0,0,.13) 0 .045rem,transparent .055rem),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 .08rem,transparent .08rem .26rem),repeating-linear-gradient(0deg,rgba(0,0,0,.055) 0 .06rem,transparent .06rem .22rem),linear-gradient(90deg,rgba(255,255,255,.23),transparent 16%,rgba(0,0,0,.2) 94%),var(--book-spine-base);box-shadow:inset .28rem 0 #ffffff24,inset .62rem 0 #ffffff0b,inset -.42rem 0 #0003,0 .4rem .9rem #00000014;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none;transform-origin:bottom center;transform:rotate(var(--book-spine-tilt));transition:transform .32s var(--ease-lightbox-out),box-shadow .22s ease,filter .22s ease}.book-shelf__grid[data-reorder-ready=true] .book-spine{cursor:grab;user-select:none}.book-shelf__grid[data-reordering=true] .book-spine{cursor:grabbing}.book-shelf__item[data-dragging=true] .book-spine{filter:saturate(1.16);transform:translateY(-.72rem) rotate(calc(var(--book-spine-tilt) - 1.1deg)) scale(1.035);box-shadow:inset .28rem 0 #fff3,inset .62rem 0 #ffffff0e,inset -.42rem 0 #0000003d,0 1rem 1.8rem #0000002e}.book-spine:focus-visible{filter:saturate(1.08);transform:translateY(-.45rem) rotate(var(--book-spine-tilt));box-shadow:inset .28rem 0 #ffffff2e,inset .62rem 0 #ffffff0e,inset -.42rem 0 #0000003b,0 .8rem 1.4rem #00000024}@media(hover:hover)and (pointer:fine){.book-spine:hover{filter:saturate(1.08);transform:translateY(-.45rem) rotate(var(--book-spine-tilt));box-shadow:inset .28rem 0 #ffffff2e,inset .62rem 0 #ffffff0e,inset -.42rem 0 #0000003b,0 .8rem 1.4rem #00000024}}.book-spine:focus-visible{outline:2px solid var(--color-2);outline-offset:4px}.book-spine--short{--book-spine-height: var(--book-spine-height-short)}.book-spine--tall{--book-spine-height: var(--book-spine-height-tall)}@media(min-width:521px){.book-spine{--book-spine-tilt: var(--book-spine-random-tilt, 0deg)}}.book-spine__image{position:absolute;inset:0;z-index:-3;display:block;width:100%;height:100%;object-fit:cover;opacity:.38;mix-blend-mode:multiply}.book-spine:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 18%,rgba(0,0,0,.22) 92%),linear-gradient(180deg,transparent 0 10.2%,var(--book-spine-paper) 10.2% 10.9%,transparent 10.9% 88.8%,var(--book-spine-paper) 88.8% 89.5%,transparent 89.5%);opacity:.74}.book-spine:after{content:"";position:absolute;inset:.24rem .2rem .2rem .34rem;z-index:-1;pointer-events:none;border:.11rem solid var(--book-spine-paper);border-radius:calc(var(--book-spine-radius) - .2rem);opacity:.82;box-shadow:.17rem 0 color-mix(in srgb,var(--book-spine-shadow) 32%,transparent),inset .1rem 0 #ffffff24}.book-spine__frame{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}.book-spine__ornament{--book-spine-ornament-source: none;position:absolute;left:50%;width:calc(var(--book-spine-width) * .64);max-width:4.25rem;aspect-ratio:1;color:var(--book-spine-paper);background:currentColor;-webkit-mask:var(--book-spine-ornament-source) center / contain no-repeat;mask:var(--book-spine-ornament-source) center / contain no-repeat;opacity:.82;transform:translate(-50%)}.book-spine__ornament--top{top:1.45rem}.book-spine__ornament--bottom{bottom:4.05rem;transform:translate(-50%) rotate(180deg)}.book-spine__publisher{position:absolute;right:.45rem;bottom:1.1rem;left:.58rem;display:block;overflow:hidden;color:var(--book-spine-paper);font-family:var(--font-family-mono);font-size:clamp(.42rem,.62vw,.55rem);font-weight:800;letter-spacing:.06rem;line-height:1.15;text-align:center;text-transform:uppercase}.book-spine__content{position:relative;z-index:1;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;width:100%;height:100%;padding:7.15rem .44rem 6.4rem}.book-spine__title{display:block;max-height:100%;padding:.35rem 0;font-family:var(--font-family-sans);font-size:clamp(.72rem,1.04vw,.94rem);font-weight:800;letter-spacing:.04rem;line-height:1.08;text-align:center;text-transform:uppercase;text-wrap:balance;text-shadow:0 1px 0 rgba(0,0,0,.18),0 0 .55rem color-mix(in srgb,var(--book-spine-base) 48%,transparent);writing-mode:vertical-rl}.book-spine__author{display:block;max-width:calc(var(--book-spine-width) - .9rem);overflow:hidden;color:color-mix(in srgb,currentColor 86%,var(--color-1));font-family:var(--font-family-mono);font-size:clamp(.52rem,.7vw,.67rem);font-weight:800;letter-spacing:.05rem;line-height:1;text-align:center;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}@media(max-width:520px){.book-shelf{--book-shelf-gap: .55rem;--book-spine-height-short: 4.75rem;--book-spine-height-medium: 5rem;--book-spine-height-tall: 5.25rem}.book-shelf__header{display:block}.book-shelf__note{margin-block-start:.4rem;text-align:left}.book-shelf__grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;justify-content:stretch;gap:var(--book-shelf-gap);padding-block-start:.75rem}.book-spine{width:100%;height:var(--book-spine-mobile-height);transform-origin:center;border-radius:.45rem}.book-spine:focus-visible{transform:translate(.25rem)}@media(hover:hover)and (pointer:fine){.book-spine:hover{transform:translate(.25rem)}}.book-spine:before{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%,rgba(0,0,0,.16)),linear-gradient(90deg,transparent 0 7%,var(--book-spine-paper) 7% 7.5%,transparent 7.5% 89%,var(--book-spine-paper) 89% 89.5%,transparent 89.5%);opacity:.64}.book-spine:after{inset:.42rem;border-width:.09rem}.book-spine__ornament{top:50%;left:auto;right:.95rem;width:2.6rem;max-width:none;opacity:.42;transform:translateY(-50%) rotate(90deg)}.book-spine__ornament--bottom,.book-spine__publisher{display:none}.book-spine__content{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:none;justify-items:start;gap:.75rem;padding:.65rem 4.1rem .65rem .9rem}.book-spine__title{max-height:none;padding:0;font-size:.88rem;line-height:1.1;text-align:left;writing-mode:horizontal-tb}.book-spine__author{max-width:6rem;font-size:.68rem}}@media(prefers-reduced-motion:reduce){.book-shelf__item[data-animating=true],.book-shelf__item[data-dragging=true],.book-shelf__item[data-dropping=true],.book-spine{transition:none}}