.spine{width:var(--w);height:var(--h);background-color:var(--bg);color:var(--fg);cursor:pointer;isolation:isolate;transform-origin:50% 100%;transition:transform .28s var(--ease-out), filter .28s var(--ease-out), background-color .7s var(--ease-in-out), color .7s var(--ease-in-out);border:0;border-radius:1.5px 1.5px .5px .5px;flex-direction:column;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:inset 1px 0 #ffffff12,inset -1px 0 #00000047,3px 0 4px -2px #00000073}.spine:before{content:"";z-index:3;pointer-events:none;background:linear-gradient(90deg,#0000006b 0%,#0000000f 12%,#ffffff21 28%,#ffffff0a 46%,#00000008 68%,#0000005c 100%);position:absolute;inset:0}.spine:after{content:"";z-index:1;pointer-events:none;background-image:var(--noise);opacity:.2;mix-blend-mode:multiply;background-size:140px 140px;position:absolute;inset:0}.spine:hover,.spine:focus-visible{filter:brightness(1.06);z-index:5;transform:translateY(-8px)}.spine:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.spine[data-hidden]{visibility:hidden}.spine__title,.spine__author{z-index:2;writing-mode:vertical-rl;white-space:nowrap;text-overflow:ellipsis;flex:none;line-height:1;position:relative;overflow:hidden}.spine__title{font-size:var(--fs);max-height:calc(var(--h) * .66);margin-top:max(10px, calc(var(--h) * .07))}.spine__author{font-size:calc(var(--fs) * .72);max-height:calc(var(--h) * .22);opacity:.9;margin-top:auto}.spine__mark{z-index:2;width:min(7px, calc(var(--w) * .32));height:min(7px, calc(var(--w) * .32));background:var(--band);opacity:.85;border-radius:50%;flex:none;margin:9px 0 8px;position:relative}.spine__title+.spine__mark{margin-top:auto}.spine--print.spine--a .spine__title{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-stretch:75%}.spine--print.spine--b .spine__title{font-family:var(--sans);font-weight:600;font-stretch:85%}.spine--print .spine__author{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ac);font-weight:500;font-stretch:80%}.spine--print.spine--b .spine__mark{border-radius:1px;transform:rotate(45deg)scale(.8)}.spine--serif .spine__title{font-family:var(--serif);font-weight:500;font-size:calc(var(--fs) * 1.05);letter-spacing:.01em}.spine--serif.spine--b .spine__title{font-style:italic;font-weight:420}.spine--serif .spine__author{font-family:var(--serif);font-style:italic;font-size:calc(var(--fs) * .8)}.spine--serif .spine__mark{width:min(10px, calc(var(--w) * .4));border-radius:0;height:1px}.spine__block{z-index:1;background:var(--ac);height:19%;position:absolute;top:0;left:0;right:0;box-shadow:0 1px #0000002e}.spine--jacket .spine__title{margin-top:calc(var(--h) * .19 + 9px);font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-weight:650;font-stretch:78%}.spine--jacket.spine--b .spine__title{font-family:var(--serif);text-transform:none;letter-spacing:.005em;font-weight:500;font-stretch:100%}.spine--jacket .spine__author{font-family:var(--sans);font-size:calc(var(--fs) * .66);letter-spacing:.08em;text-transform:uppercase}.spine--cloth:after{background-image:var(--cloth);opacity:.55;background-size:90px 90px}.spine--cloth{background-image:linear-gradient(var(--band), var(--band)), linear-gradient(var(--band), var(--band)), linear-gradient(var(--band), var(--band)), linear-gradient(var(--band), var(--band));background-position:0 6.5%,0 8%,0 92%,0 93.5%;background-repeat:no-repeat;background-size:100% 1px,100% 1px,100% 1px,100% 1px}.spine--cloth .spine__title{margin-top:calc(var(--h) * .12);font-family:var(--serif);font-weight:520;font-size:calc(var(--fs) * .82);text-transform:uppercase;letter-spacing:.14em;max-height:calc(var(--h) * .6)}.spine--cloth.spine--b .spine__title{text-transform:none;letter-spacing:.02em;font-size:calc(var(--fs) * .95);font-style:italic}.spine--cloth .spine__author{font-family:var(--serif);font-size:calc(var(--fs) * .62);text-transform:uppercase;letter-spacing:.16em;margin-bottom:calc(var(--h) * .1)}.spine--cloth .spine__mark{display:none}.spine--leather{background-image:linear-gradient(#00000059,#ffffff1f 40%,#0006),linear-gradient(#00000059,#ffffff1f 40%,#0006),linear-gradient(#00000059,#ffffff1f 40%,#0006),linear-gradient(#00000059,#ffffff1f 40%,#0006);background-position:0 9%,0 64%,0 77%,0 90%;background-repeat:no-repeat;background-size:100% 5px,100% 5px,100% 5px,100% 5px}.spine__label{z-index:1;height:46%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--band) 55%, transparent), inset 0 0 0 3px #0003;background:#00000052;position:absolute;top:13%;left:8%;right:8%}.spine--leather .spine__title{margin-top:calc(var(--h) * .13 + 7px);max-height:calc(var(--h) * .46 - 14px);font-family:var(--serif);font-weight:560;font-size:calc(var(--fs) * .78);text-transform:uppercase;letter-spacing:.12em}.spine--leather .spine__author,.spine--leather .spine__mark{display:none}.spine--flat{border-radius:.5px 1.5px 1.5px .5px;flex-direction:row;align-items:center;box-shadow:inset 0 1px #ffffff14,inset 0 -1px #00000047,0 2px 3px -1px #0006}.spine--flat:before{background:linear-gradient(#ffffff1f 0%,#ffffff0a 30%,#0000000a 60%,#0000005c 100%)}.spine--flat .spine__title,.spine--flat .spine__author{writing-mode:horizontal-tb;max-width:64%;max-height:none}.spine--flat .spine__title{margin:0 0 0 10px}.spine--flat .spine__author{margin:0 10px 0 auto}.spine--flat .spine__mark,.spine--flat .spine__block,.spine--flat .spine__label{display:none}.spine--flat.spine--cloth,.spine--flat.spine--leather{background-image:none}.spine--flat:hover,.spine--flat:focus-visible{transform:translate(-6px)}.spine--lean{transform-origin:0 100%;transform:rotate(var(--lean))}.spine--lean:hover,.spine--lean:focus-visible{transform:rotate(var(--lean)) translateY(-6px)}.spine--pending .spine__mark,.spine--pending .spine__block,.spine--pending .spine__label{opacity:0}.spine__mark,.spine__block,.spine__label{transition:opacity .7s var(--ease-in-out)}.spine--enter{animation:spine-enter .9s var(--ease-book) backwards;animation-delay:var(--delay)}.spine--flat.spine--enter{animation-name:spine-enter-flat}@keyframes spine-enter{0%{opacity:0;transform:translateY(-26px)rotate(-2deg)}60%{opacity:1}}@keyframes spine-enter-flat{0%{opacity:0;transform:translate(30px)}}.spine--ghost{background:color-mix(in srgb, var(--ink) 3%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);border-radius:2px 2px 0 0}.spine--ghost:before,.spine--ghost:after{content:none}.spine--ghost:hover,.spine--ghost:focus-visible{filter:none;transform:none}.spine--ghost.spine--lean:hover,.spine--ghost.spine--lean:focus-visible{transform:rotate(var(--lean))}.spine__slip{--slip:var(--lightningcss-light,var(--wall-lift))var(--lightningcss-dark,color-mix(in srgb, var(--ink) 88%, var(--wall)));--slip-ink:var(--lightningcss-light,var(--ink-2))var(--lightningcss-dark,color-mix(in srgb, var(--wall-deep) 70%, var(--ink)));width:clamp(7px, calc(var(--w) * .6), 20px);height:calc(var(--h) * .6);transform-origin:50% 100%;background:var(--slip);color:var(--slip-ink);opacity:.8;font-family:var(--sans);font-size:clamp(7px, calc(var(--w) * .42), 10px);letter-spacing:.06em;writing-mode:vertical-rl;text-orientation:upright;transition:translate .28s var(--ease-out), opacity .28s var(--ease-out);justify-content:flex-start;align-items:center;padding-block-start:6px;font-weight:600;line-height:1;display:flex;position:absolute;bottom:0;left:50%;overflow:hidden;translate:-50%;rotate:-2deg;box-shadow:0 1px 2px #00000038}.spine--ghost:hover .spine__slip,.spine--ghost:focus-visible .spine__slip{opacity:1;translate:-50% -8px}.spine--ghost.spine--flat .spine__slip{width:calc(var(--w) * .55);height:clamp(7px, calc(var(--h) * .6), 20px);writing-mode:horizontal-tb;font-size:clamp(7px, calc(var(--h) * .42), 10px);padding-block-start:0;padding-inline-start:6px;bottom:50%;left:10%;translate:0 50%;rotate:0deg}.spine--ghost.spine--flat:hover .spine__slip,.spine--ghost.spine--flat:focus-visible .spine__slip{translate:-6px 50%}.spine--returning{animation:spine-return .64s var(--ease-out) backwards}@keyframes spine-return{0%{opacity:.15;translate:0 -10px}55%{opacity:1}}
