.bookshelf-page{--bookshelf-wood: #8f7358;--bookshelf-wood-light: #b59878;--bookshelf-wood-dark: #6f5842}.bookshelf-hero{margin-bottom:42px}.bookshelf-stack{display:grid;gap:52px}.bookshelf-bay-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:16px;padding-top:18px;border-top:1px dashed var(--rule-strong)}.bookshelf-bay-index{font-family:var(--serif);font-size:2.4rem;line-height:1;color:color-mix(in srgb,var(--rule-strong) 82%,var(--accent));font-style:italic}.bookshelf-bay-copy h2{margin:0;font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,1.85rem);font-weight:500;line-height:1.08}.bookshelf-bay-copy p{margin:8px 0 0;max-width:38rem;color:var(--muted);font-size:.92rem;line-height:1.55}.bookshelf-count{display:inline-grid;place-items:center;min-width:2rem;height:2rem;padding:0 8px;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,white);color:var(--muted);font-family:var(--mono);font-size:.74rem}.bookshelf-alcove{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:3px;background:var(--surface);box-shadow:var(--shadow)}.bookshelf-scroll{display:flex;gap:26px;overflow-x:auto;padding:30px 24px 26px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bookshelf-wood) 55%,transparent) transparent}.bookshelf-entry{position:relative;flex:0 0 138px;display:grid;grid-template-rows:214px auto;gap:20px;scroll-snap-align:start;outline:none;animation:bookshelf-enter .68s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i, 0) * 90ms + 80ms)}.bookshelf-entry:after{content:"";position:absolute;top:214px;left:-13px;right:-13px;height:16px;border-radius:1px;background:linear-gradient(180deg,var(--bookshelf-wood-light) 0%,var(--bookshelf-wood) 42%,var(--bookshelf-wood-dark) 100%);box-shadow:0 5px 14px color-mix(in srgb,var(--text) 16%,transparent),inset 0 1px color-mix(in srgb,white 28%,transparent);pointer-events:none}.bookshelf-volume{position:relative;align-self:end;justify-self:center;width:100%;transform:rotate(var(--tilt, 0deg));transform-origin:center bottom;transition:transform .22s cubic-bezier(.22,1,.36,1),filter .22s ease}.bookshelf-entry:nth-child(3n+1) .bookshelf-volume{--tilt: -1.4deg}.bookshelf-entry:nth-child(3n+2) .bookshelf-volume{--tilt: .8deg}.bookshelf-entry:nth-child(3n) .bookshelf-volume{--tilt: -.5deg}.bookshelf-bay--reading .bookshelf-volume{width:108%}.bookshelf-bay--queue .bookshelf-cover{filter:saturate(.82) brightness(.96)}.bookshelf-volume-body{position:relative;aspect-ratio:2 / 3;max-height:198px;border-radius:2px 6px 6px 2px;overflow:hidden;background:var(--surface);box-shadow:inset 4px 0 10px color-mix(in srgb,var(--text) 16%,transparent),1px 0 color-mix(in srgb,var(--bookshelf-wood-dark) 35%,transparent),0 14px 22px color-mix(in srgb,var(--text) 18%,transparent)}.bookshelf-volume-edge{position:absolute;inset:0 auto 0 0;width:9px;z-index:2;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 24%,transparent) 0%,color-mix(in srgb,var(--text) 8%,transparent) 55%,transparent 100%)}.bookshelf-cover,.bookshelf-spine{width:100%;height:100%;object-fit:cover;display:block}.bookshelf-spine{display:grid;place-items:center;padding:10px;text-align:center;border:1px solid var(--rule-strong);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}.bookshelf-spine-title{font-family:var(--serif);font-size:.74rem;line-height:1.3;color:var(--muted)}.bookshelf-volume-shadow{position:absolute;left:12%;right:12%;bottom:-8px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--text) 22%,transparent);filter:blur(6px);opacity:.45;transition:opacity .22s ease}.bookshelf-ribbon{position:absolute;top:-4px;right:10px;z-index:3;width:14px;height:34px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#1f4a3c),color-mix(in srgb,var(--accent) 65%,#16352b));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:0 2px 4px color-mix(in srgb,var(--text) 18%,transparent)}.bookshelf-catalog{padding-top:4px}.bookshelf-catalog-title{margin:0;font-family:var(--serif);font-size:.9rem;line-height:1.28;font-weight:500}.bookshelf-catalog-author{margin:6px 0 0;color:var(--muted);font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.4}@media(hover:hover)and (pointer:fine){.bookshelf-entry:hover .bookshelf-volume,.bookshelf-entry:focus-visible .bookshelf-volume{--tilt: 0deg;transform:translateY(-10px) rotate(0)}.bookshelf-entry:hover .bookshelf-volume-body,.bookshelf-entry:focus-visible .bookshelf-volume-body{box-shadow:inset 4px 0 10px color-mix(in srgb,var(--text) 16%,transparent),1px 0 color-mix(in srgb,var(--bookshelf-wood-dark) 35%,transparent),0 22px 30px color-mix(in srgb,var(--text) 22%,transparent)}.bookshelf-entry:hover .bookshelf-volume-shadow,.bookshelf-entry:focus-visible .bookshelf-volume-shadow{opacity:.62}}.bookshelf-entry:focus-visible .bookshelf-volume-body{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px}@keyframes bookshelf-enter{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.bookshelf-entry{animation:none}.bookshelf-volume,.bookshelf-volume-shadow{transition:none}}@media(max-width:760px){.bookshelf-bay-header{grid-template-columns:1fr auto;grid-template-areas:"index count" "copy copy"}.bookshelf-bay-index{grid-area:index;font-size:2rem}.bookshelf-bay-copy{grid-area:copy}.bookshelf-count{grid-area:count}.bookshelf-scroll{gap:18px;padding:22px 16px 20px}.bookshelf-entry{flex-basis:118px;grid-template-rows:184px auto}.bookshelf-entry:after{top:184px;left:-9px;right:-9px;height:14px}.bookshelf-volume-body{max-height:168px}}
