.bookcase{--scene-perspective:1700px;--scene-origin-y:32%;--book-height:172px;--book-thickness:30px;--book-depth:116px;--book-radius:1.5px;--page-cream:#f4efe1;--page-shade:#d9d1bd;--page-block:repeating-linear-gradient(to right,var(--page-cream) 0 1px,var(--page-shade) 1px 2px,var(--page-cream) 2px 4px,var(--page-shade) 4px 5px,var(--page-cream) 5px 7px,var(--page-shade) 7px 8px);--frame-pad:clamp(10px,2.5vw,22px);--shelf-frame:#f7f6f3;--shelf-plank:#efece4;--shelf-plank-edge:#ddd7c8;--shelf-plank-light:#f8f6f0;--shelf-back:#e9e5db;--shelf-back-bottom:#d8d2c4;--shelf-side:#f1eee6;--shelf-side-dark:#ddd8cb;--shelf-top:color-mix(in srgb,var(--shelf-side-dark) 86%,#1c1610);--shelf-top-dark:color-mix(in srgb,var(--shelf-back-bottom) 76%,#1c1610);--shelf-gap:22px;--shadow-color:rgba(28,22,16,0.34);--contact-shadow:rgba(28,22,16,0.42);--ao-strength:0.4;--spine-sheen:rgba(255,255,255,0.16);--spine-edge-dark:rgba(0,0,0,0.34);--scrim-near:rgba(12,10,8,0.5);--scrim-far:rgba(12,10,8,0.9);--scrim-blur:12px}@media (min-width:768px){.bookcase{--book-height:230px;--book-thickness:34px;--book-depth:150px;--shelf-gap:30px}}.bookcase__scene{padding:clamp(16px,4vw,48px) clamp(8px,3vw,40px) clamp(40px,8vw,90px);display:flex;min-height:calc(100vh - 220px);min-height:calc(100svh - 220px)}.bookcase__frame{display:flex;flex-direction:column;gap:var(--shelf-gap);flex:1;width:100%;max-width:1100px;margin:0 auto;padding:var(--frame-pad);padding-top:calc(var(--frame-pad) + var(--book-depth) * .28);background:var(--shelf-frame);position:relative;perspective:var(--scene-perspective);perspective-origin:50% var(--scene-origin-y);overflow:hidden;box-shadow:0 40px 70px -40px var(--shadow-color)}.bookcase__back{inset:calc(var(--book-depth) * -.5);transform:translateZ(calc(var(--book-depth) * -1));background:linear-gradient(to bottom,var(--shelf-back) 0,var(--shelf-back) 55%,var(--shelf-back-bottom) 100%)}.bookcase__back,.bookcase__side{position:absolute;pointer-events:none}.bookcase__side{top:0;bottom:0;width:var(--book-depth)}.bookcase__side--left{left:0;transform-origin:left center;transform:rotateY(90deg);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.022) 0 1px,rgba(255,255,255,.025) 1px 3px,rgba(0,0,0,.014) 3px 4px,rgba(0,0,0,0) 4px 12px),linear-gradient(to right,color-mix(in srgb,var(--shelf-side) 93%,#000) 0,color-mix(in srgb,var(--shelf-side-dark) 93%,#000) 100%)}.bookcase__side--right{right:0;transform-origin:right center;transform:rotateY(-90deg);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.022) 0 1px,rgba(255,255,255,.025) 1px 3px,rgba(0,0,0,.014) 3px 4px,rgba(0,0,0,0) 4px 12px),linear-gradient(to left,var(--shelf-side) 0,var(--shelf-side-dark) 100%)}.bookcase__top{position:absolute;top:0;left:0;right:0;height:var(--book-depth);transform-origin:center top;transform:rotateX(-90deg);pointer-events:none;background-image:linear-gradient(to bottom,rgba(255,255,255,.42) 0 1px,rgba(0,0,0,0) 1px),linear-gradient(to top,rgba(0,0,0,.26) 0 1.5px,rgba(0,0,0,.1) 1.5px 5px,rgba(0,0,0,0) 5px),linear-gradient(to right,rgba(0,0,0,.045) 0,rgba(0,0,0,0) 55%,rgba(255,255,255,.03) 100%),repeating-linear-gradient(to right,rgba(0,0,0,.02) 0 1px,rgba(255,255,255,.02) 1px 3px,rgba(0,0,0,.012) 3px 4px,rgba(0,0,0,0) 4px 11px),linear-gradient(to bottom,var(--shelf-top) 0,var(--shelf-top-dark) 62%,var(--shelf-top-dark) 100%)}.shelf{position:relative;flex:1 1 auto;min-height:var(--book-height);display:flex;flex-direction:column;justify-content:flex-end;transform-style:preserve-3d}.shelf__back{position:absolute;inset:0;left:calc(var(--frame-pad) * -1 - var(--book-depth) * .5);right:calc(var(--frame-pad) * -1 - var(--book-depth) * .5);transform:translateZ(calc(var(--book-depth) * -1 + 1px));background:linear-gradient(180deg,rgba(40,32,22,.15) 0,rgba(40,32,22,0) 30%,rgba(40,32,22,0) 78%,rgba(40,32,22,.16));pointer-events:none}.shelf:not(:first-child) .shelf__back{top:calc(var(--shelf-gap) * -1)}.shelf__row{--plank-thickness:14px;position:relative;display:flex;align-items:flex-end;gap:0;min-height:var(--book-height);padding:0 clamp(6px,2vw,18px);transform-style:preserve-3d}.shelf__plank{position:absolute;left:calc(var(--frame-pad) * -1 - var(--book-depth) * .5);right:calc(var(--frame-pad) * -1 - var(--book-depth) * .5);bottom:0;height:var(--book-depth);transform-origin:center bottom;transform:rotateX(90deg);background-image:linear-gradient(to bottom,rgba(0,0,0,.24) 0 1.5px,rgba(0,0,0,.09) 1.5px 5px,rgba(0,0,0,0) 5px),repeating-linear-gradient(to right,rgba(0,0,0,.03) 0 1px,rgba(255,255,255,.03) 1px 3px,rgba(0,0,0,.018) 3px 4px,rgba(0,0,0,0) 4px 11px),linear-gradient(to bottom,var(--shelf-plank-edge) 0,var(--shelf-plank) 58%,var(--shelf-plank-light) 100%);border-radius:2px}.shelf__lip{position:absolute;left:calc(var(--frame-pad) * -1);right:calc(var(--frame-pad) * -1);bottom:calc(var(--plank-thickness, 14px) * -1);height:var(--plank-thickness,14px);background:linear-gradient(to bottom,var(--shelf-plank-edge) 0,var(--shelf-frame) 100%);border-radius:0 0 3px 3px;box-shadow:0 8px 14px -8px var(--shadow-color)}.book{--bk-thickness:calc(var(--book-thickness) * var(--bk-scale, 1));--bk-height:calc(var(--book-height) * var(--bk-height-scale, 1));--bk-z:calc(var(--book-depth) * var(--bk-inset, 0) * -1);--board-near:color-mix(in srgb,var(--spine-color,#444) 84%,#fff);--board-mid:var(--spine-color,#444);--board-far:color-mix(in srgb,var(--spine-color,#444) 62%,#000);--sheen-x:calc(34% + var(--bk-pos, 0.5) * 26%);--bk-shade:calc(var(--bk-pos, 0.5) * 0.07);position:relative;flex:0 0 auto;width:var(--bk-thickness);min-width:0;height:var(--bk-height);transform-origin:center bottom;transition:width .42s cubic-bezier(.22,1,.36,1),opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1)}.book__body{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--bk-z));pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1)}.book.is-hidden{width:0;opacity:0;transform:scaleY(.7);pointer-events:none}@media (prefers-reduced-motion:reduce){.book{transition:none}}.book__button{appearance:none;position:absolute;inset:0;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:var(--book-radius)}.book:not(.is-empty) .book__button:focus-visible~.book__body,.book:not(.is-empty) .book__button:hover~.book__body{transform:translateZ(20px) rotateY(-10deg) rotateX(-24deg);transform-origin:center bottom}.book__button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}@media (prefers-reduced-motion:reduce){.book__body{transition:none}}.book__spine{position:absolute;inset:0;border-radius:var(--book-radius);background-color:var(--spine-color,#444);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.22),inset 0 -10px 12px -8px rgba(0,0,0,var(--ao-strength)),inset 0 0 0 999px rgba(20,14,8,var(--bk-shade,0));overflow:hidden}.book--cloth .book__spine{background-image:linear-gradient(to right,var(--spine-edge-dark) 0,rgba(0,0,0,0) 15%,var(--spine-sheen) var(--sheen-x,42%),rgba(0,0,0,0) 72%,var(--spine-edge-dark) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.038) 0 1px,rgba(0,0,0,.038) 1px 2px),repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,rgba(0,0,0,.026) 1px 2px)}.book--cloth.book--banded .book__spine:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 19%,rgba(255,255,255,.055) 19% 20%,rgba(0,0,0,.09) 20% 21.4%,rgba(0,0,0,0) 21.4% 23%);pointer-events:none}.book--jacket .book__spine{background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0 87%,rgba(255,255,255,.2) 87.5% 95%,rgba(0,0,0,0) 95.5%),linear-gradient(166deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.2) 47%,rgba(255,255,255,0) 62%),linear-gradient(to right,var(--spine-edge-dark) 0,rgba(255,255,255,.16) 5%,rgba(0,0,0,0) 24%,var(--spine-sheen) var(--sheen-x,50%),rgba(0,0,0,0) 76%,rgba(255,255,255,.13) 95%,var(--spine-edge-dark) 100%)}.book--paper .book__spine{background-image:linear-gradient(to right,var(--spine-edge-dark) 0,rgba(0,0,0,0) 22%,rgba(255,255,255,.07) var(--sheen-x,50%),rgba(0,0,0,0) 78%,var(--spine-edge-dark) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.038) 1px 2px)}.book--paper .book__spine:before{opacity:calc(var(--bk-wear, 0) * .85);background-image:linear-gradient(90deg,rgba(0,0,0,0) 0 24%,rgba(255,255,255,.16) 24% 25%,rgba(0,0,0,0) 25% 62%,rgba(255,255,255,.11) 62% 62.8%,rgba(0,0,0,0) 62.8%)}.book--paper .book__spine:before,.book__spine:after{content:"";position:absolute;inset:0;pointer-events:none}.book__spine:after{opacity:var(--bk-wear,0);background-image:linear-gradient(180deg,rgba(255,255,255,.3) 0,rgba(255,255,255,0) 16%),radial-gradient(closest-side,rgba(255,255,255,.42),rgba(255,255,255,0)),radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0)),radial-gradient(closest-side,rgba(0,0,0,.3),rgba(0,0,0,0)),radial-gradient(closest-side,rgba(0,0,0,.26),rgba(0,0,0,0));background-size:100% 100%,14px 10px,11px 8px,16px 12px,12px 9px;background-position:0 0,0 0,100% 0,0 100%,100% 100%;background-repeat:no-repeat}.book__title{position:absolute;inset:10px 0 14px 0;display:flex;align-items:center;justify-content:flex-start;writing-mode:vertical-rl;transform:rotate(180deg);padding-block:2px;font-size:clamp(8.5px,2.4vw,12px);font-weight:600;letter-spacing:.02em;line-height:1.05;color:var(--spine-text,#fff);text-shadow:0 1px 1px rgba(0,0,0,.35);overflow:hidden;pointer-events:none}.book__title-text{display:block;max-height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book__side{position:absolute;top:0;width:var(--book-depth);height:100%;backface-visibility:hidden;pointer-events:none}.book__side--right{left:100%;transform-origin:left center;transform:rotateY(90deg);background-image:linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 18%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.42) 100%),var(--cover-image,linear-gradient(var(--board-mid),var(--board-mid)));background-size:100% 100%,cover;background-position:0 0,0;background-repeat:no-repeat}.book__side--left{right:100%;transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(to left,var(--board-near) 0,var(--board-mid) 34%,var(--board-far) 100%)}.book__top{position:absolute;top:0;left:0;width:100%;height:var(--book-depth);transform-origin:top center;transform:rotateX(-90deg);border-radius:1px}.book--paper .book__top{background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.26) 100%) 0 0 /100% 100% no-repeat,var(--page-block) center /calc(100% - 2px) 100% no-repeat,var(--spine-color,#444)}.book--cloth .book__top,.book--jacket .book__top{background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.26) 100%) 0 0 /100% 100% no-repeat,repeating-linear-gradient(to right,rgba(255,255,255,.75) 0 2px,var(--board-far) 2px 4px) top /calc(100% - 6px) 4px no-repeat,var(--page-block) center /calc(100% - 6px) 100% no-repeat,var(--board-far)}.book__contact{position:absolute;top:100%;left:calc(var(--bk-thickness) * -.28);right:calc(var(--bk-thickness) * -.28);height:calc(var(--book-depth) * .62);transform-origin:center top;transform:rotateX(-90deg);background:radial-gradient(58% 78% at 50% 0,var(--contact-shadow),rgba(0,0,0,0) 74%);filter:blur(2px);pointer-events:none}.book.is-empty .book__contact,.book.is-empty .book__spine,.book.is-empty .book__top{opacity:0}.book__slot{position:absolute;inset:0;border-radius:var(--book-radius);opacity:0;pointer-events:none;background:linear-gradient(to bottom,var(--shelf-back-bottom),var(--shelf-back));box-shadow:inset 4px 0 8px -4px rgba(0,0,0,.55),inset -4px 0 8px -4px rgba(0,0,0,.55),inset 0 -6px 10px -4px rgba(0,0,0,.5)}.book.is-empty .book__slot{opacity:1}.featured-layer{position:fixed;inset:0;z-index:60;perspective:var(--scene-perspective);perspective-origin:50% 45%;pointer-events:none}.featured-backdrop{position:fixed;inset:0;z-index:55;background:linear-gradient(100deg,var(--scrim-near) 0,var(--scrim-near) 18%,var(--scrim-far) 46%,var(--scrim-far) 100%);backdrop-filter:blur(var(--scrim-blur)) saturate(115%);-webkit-backdrop-filter:blur(var(--scrim-blur)) saturate(115%);pointer-events:auto}@media (max-width:1023px){.featured-backdrop{background:linear-gradient(to bottom,var(--scrim-near) 0,var(--scrim-near) 16%,var(--scrim-far) 50%,var(--scrim-far) 100%)}}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.featured-backdrop{--scrim-near:rgba(12,10,8,0.72);--scrim-far:rgba(12,10,8,0.96)}}.featured{--bk-thickness:calc(var(--book-thickness) * var(--bk-scale, 1));--bk-height:calc(var(--book-height) * var(--bk-height-scale, 1));--book-depth:calc(var(--bk-height) * var(--cover-ar, 0.667));position:absolute;top:0;left:0;pointer-events:none}.featured,.featured__cube{transform-style:preserve-3d}.featured__cube{position:relative;width:var(--bk-thickness);height:var(--bk-height)}.face{position:absolute;top:50%;left:50%;backface-visibility:hidden;overflow:hidden;border-radius:var(--book-radius)}.face--spine{width:var(--bk-thickness);height:var(--bk-height);margin-left:calc(var(--bk-thickness) / -2);margin-top:calc(var(--bk-height) / -2);transform:translateZ(calc(var(--book-depth) / 2));background-color:var(--spine-color,#444);background-image:linear-gradient(to right,var(--spine-edge-dark),rgba(0,0,0,0) 18%,var(--spine-sheen) 50%,rgba(0,0,0,0) 82%,var(--spine-edge-dark));box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.22)}.face--spine .face__title{position:absolute;inset:12px 0;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(9px,1.4vw,13px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--spine-text,#fff);text-shadow:0 1px 1px rgba(0,0,0,.35)}.face--cover{transform:rotateY(90deg) translateZ(calc(var(--bk-thickness) / 2));background:var(--cover-bg,#555);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.face--cover,.face--fore{width:var(--book-depth);height:var(--bk-height);margin-left:calc(var(--book-depth) / -2);margin-top:calc(var(--bk-height) / -2)}.face--fore{transform:rotateY(-90deg) translateZ(calc(var(--bk-thickness) / 2));background:var(--page-block);box-shadow:inset 0 0 14px rgba(0,0,0,.18)}.face--bottom,.face--top{width:var(--bk-thickness);height:var(--book-depth);margin-left:calc(var(--bk-thickness) / -2);margin-top:calc(var(--book-depth) / -2);background:var(--page-block)}.face--top{transform:rotateX(90deg) translateZ(calc(var(--bk-height) / 2))}.face--bottom{transform:rotateX(-90deg) translateZ(calc(var(--bk-height) / 2));filter:brightness(.82)}.cover{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:14px;background:var(--cover-bg);background-image:linear-gradient(135deg,rgba(255,255,255,.16),rgba(0,0,0,.2))}.cover,.cover__img{position:absolute;inset:0}.cover__img{width:100%;height:100%;object-fit:cover;box-shadow:inset 0 2px 6px rgba(255,255,255,.18)}.cover__title{font-size:clamp(13px,1.6vw,18px);font-weight:800;line-height:1.12;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}.cover__author{font-size:clamp(10px,1.1vw,12px);font-weight:500;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.5)}.book-details__accent{display:block;width:40px;height:3px;background:var(--panel-accent,currentColor)}@media (prefers-reduced-motion:reduce){.book-details,.featured,.featured-backdrop{transition:none!important}}